/* Site: the title strip index, section heads, register, desk, footer (the masthead is masthead.css).
   Everything sits on the sheet: hairline frame, 12 columns, mono labels for the facts. */

/* ---- lenis ---- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---- title strip: sheet button and index ---- */
.sheet-btn{display:flex;align-items:center;gap:0;width:100%;height:100%;border:0;background:none;padding:0;cursor:pointer;color:var(--ink);text-align:left;min-width:0}
.sheet-btn b{font-weight:600}
.sheet-btn .st{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sheet-btn .caret{flex:none;width:10px;height:6px;margin-left:10px;transition:transform .4s var(--paper-ease)}
.sheet-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.sheet-btn:hover{color:var(--accent)}
.strip>.sheet-btn{padding-inline:14px}
@media (max-width:899px){.strip>.sheet-btn{padding-left:calc(var(--margin) + 6px);border-left:0}}
@media (max-width:599px){.strip>.sheet-btn{padding-right:6px}}   /* room for the longest sheet name */
.sheet-index{position:fixed;left:0;right:0;bottom:calc(var(--strip) + env(safe-area-inset-bottom));z-index:39;overscroll-behavior:contain;max-height:min(calc(78 * var(--svh)),640px);overflow:auto;
  background:var(--paper);border-top:1px solid var(--rule-2);box-shadow:0 -24px 60px -40px rgba(0,0,0,.35);
  padding-block:var(--s5) var(--s4);transform:translateY(12px);opacity:0;transition:transform .5s var(--paper-ease),opacity .4s var(--paper-ease)}
.sheet-index.open{transform:none;opacity:1}
@media (max-width:899px){.sheet-index{bottom:calc(42px + env(safe-area-inset-bottom))}}
.sheet-list{margin-top:var(--s3);border-top:1px solid var(--rule)}
.sheet-list a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:baseline;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.sheet-list .n,.sheet-list .k{font:500 var(--t-label)/1.2 var(--mono);font-stretch:87.5%;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sheet-list .t{font:400 var(--t-h3)/1.1 var(--serif);letter-spacing:-.01em}
.sheet-list .sub a{padding:8px 0 8px 22px;grid-template-columns:56px minmax(0,1fr) auto}
.sheet-list .sub .t{font-size:calc(var(--t-h3) * .78)}
.sheet-list a:hover .t,.sheet-list a[aria-current="page"] .t{color:var(--accent)}
.sheet-list a[aria-current="page"] .n{color:var(--accent)}
.sheet-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin:0;padding-top:6px}
.sheet-foot a{color:var(--accent);text-decoration:none;padding-block:12px}
.sheet-foot span{padding-block:12px}
/* a narrow phone: the kind of drawing goes under the name, so long names never run into it */
@media (max-width:479px){.sheet-list a,.sheet-list .sub a{grid-template-columns:44px minmax(0,1fr);row-gap:4px}.sheet-list .k{grid-column:2}}

/* ---- sections ---- */
.sec-head{align-items:baseline;row-gap:var(--s3);margin-bottom:var(--s6)}
.sec-n{grid-column:1 / span 3;padding-top:.6em}
.sec-head .h2{grid-column:4 / -1;max-width:16em}
@media (max-width:899px){.sec-n,.sec-head .h2{grid-column:1 / -1}}
.muted{color:var(--ink-2)}

/* ---- intro ---- */
.intro{padding-block:var(--s8) var(--s7)}
.intro-grid{align-items:end;row-gap:var(--s6)}
.intro-text{grid-column:1 / span 9;font-size:clamp(2rem,1.35rem + 2.9vw,4.25rem);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.intro-text em{color:var(--accent)}
.intro-fig{grid-column:10 / -1;grid-row:1 / span 2;align-self:center;max-width:300px;justify-self:end;transform:rotate(1.4deg)}
.intro-fig img{box-shadow:0 1px 0 rgba(0,0,0,.08),0 22px 40px -26px rgba(36,32,28,.55)}
.intro-facts{grid-column:1 / span 9;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);border-top:1px solid var(--rule-2);padding-top:var(--s4)}
.intro-facts dd{margin:6px 0 0;font:300 var(--t-h3)/1.1 var(--serif)}
@media (max-width:899px){
  .intro-text,.intro-facts{grid-column:1 / -1}
  .intro-fig{grid-column:1 / -1;grid-row:auto;justify-self:start;max-width:220px}
}
@media (max-width:599px){.intro-facts{grid-template-columns:1fr}}

/* ---- the drawing register ---- */
.register{padding-block:var(--s7) var(--s8)}
.reg{border-bottom:1px solid var(--rule-2)}
.reg-row{display:grid;grid-template-columns:72px minmax(0,1fr) 150px 90px 140px;align-items:baseline;gap:var(--gutter);
  padding:clamp(18px,1.6vw,26px) 0;border-top:1px solid var(--rule);text-decoration:none;position:relative}
.reg-th{border-top:1px solid var(--rule-2);padding-block:12px}
.reg-t{display:grid;gap:6px}
.reg-t .h3{font-size:clamp(1.5rem,1.1rem + 1.7vw,2.75rem);font-weight:300;line-height:1;transition:transform .5s var(--paper-ease),color .3s}
.reg-t .note{max-width:36em}
.reg-n{color:var(--ink-2)}
.reg-s{color:var(--ink)}
/* a tapped link keeps its hover when you come back to the page; only a pointer that can hover gets it */
@media (hover:hover){a.reg-row:hover .h3{color:var(--accent);transform:translateX(10px)}}
a.reg-row::after{content:"";position:absolute;inset:0 auto 0 0;width:0;border-bottom:1px solid var(--accent);transition:width .7s var(--paper-ease)}
@media (hover:hover){a.reg-row:hover::after{width:100%}}
@media (max-width:899px){
  .reg-row{grid-template-columns:40px minmax(0,1fr) auto}
  .hide-md{display:none}
}
/* every row carries a strip of its own drawings, so the register shows how full each drawer is */
.reg-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px var(--s5);margin:0 0 var(--s5);padding-left:calc(72px + var(--gutter))}
.reg-stats b{font-weight:600;color:var(--accent)}
.reg-stats a{margin-left:auto;color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.reg-c{color:var(--ink-2);margin-top:2px}
.reg-strip{grid-column:2 / -1;display:flex;gap:clamp(8px,.9vw,14px);margin-top:var(--s3);overflow:hidden;
  mix-blend-mode:var(--draw-blend);-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
/* min-height:0 lets the 4:3 card win over a tall photo, which otherwise stretched the whole row (cream cards at night) */
.reg-strip picture{flex:none;display:grid;place-items:center;width:clamp(92px,9.4vw,152px);aspect-ratio:4 / 3;min-height:0;overflow:hidden;background:var(--card-bg);padding:var(--slip,0)}
.reg-strip img{max-width:100%;max-height:100%;width:auto;height:auto;mix-blend-mode:multiply;transition:transform .6s var(--paper-ease)}
/* on desktop each piece fits its 4:3 card whole; a percentage height only holds against a positioned card */
@media (min-width:900px){
  .reg-strip picture{position:relative}
  .reg-strip img{position:absolute;inset:var(--slip,0px);width:calc(100% - 2 * var(--slip,0px));height:calc(100% - 2 * var(--slip,0px));max-width:none;max-height:none;object-fit:contain}
}
.reg-strip:has(.ph){mix-blend-mode:normal}
.reg-strip .reg-mk{flex:none;display:grid;place-items:center;width:clamp(92px,9.4vw,152px);aspect-ratio:4 / 3;background:var(--card-bg);color:#24201C}
.reg-mk .lgm{height:58%;width:auto;transition:transform .6s var(--paper-ease)}
.reg-mk.du{background:#AE805E;color:#F6EDE8}
@media (hover:hover){a.reg-row:hover .reg-mk .lgm{transform:translateY(-4px)}}
.reg-strip img.ph{mix-blend-mode:normal}
@media (hover:hover){a.reg-row:hover .reg-strip img{transform:translateY(-4px)}}
.reg-strip picture:nth-child(2) img{transition-delay:30ms}.reg-strip picture:nth-child(3) img{transition-delay:60ms}
.reg-strip picture:nth-child(4) img{transition-delay:90ms}.reg-strip picture:nth-child(5) img{transition-delay:120ms}
.reg-strip picture:nth-child(6) img{transition-delay:150ms}.reg-strip picture:nth-child(7) img{transition-delay:180ms}
:root[data-theme="blueprint"] .reg-strip{--slip:5px}
@media (prefers-color-scheme:dark){:root:not([data-theme="day"]) .reg-strip{--slip:5px}}
@media (max-width:899px){
  .reg-stats{padding-left:0}
  .reg-stats a{margin-left:0}
  /* on a phone the strip runs the full width at one height, so a long elevation reads as long and a plan as a plan */
  .reg-strip{grid-column:1 / -1;gap:10px}
  .reg-strip picture{width:auto;height:var(--rs-h);aspect-ratio:auto;max-width:72vw}
  .reg-strip img{height:100%;width:auto;object-fit:contain}
  .reg-strip .reg-mk{width:auto;height:var(--rs-h)}
  .reg-strip{--rs-h:min(132px,36vw);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .reg-strip::-webkit-scrollbar{display:none}
  .reg-strip picture{scroll-snap-align:start}
}

/* ---- small worlds desk ---- */
.worlds{padding-block:var(--s7) var(--s8)}
.desk{position:relative;aspect-ratio:16 / 7.2;perspective:1400px}
.obj{position:absolute;display:block;text-decoration:none;transform-style:preserve-3d;transition:transform .9s var(--paper-ease)}
.obj figure{transform:rotate(var(--rot,0deg)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .6s var(--paper-ease)}
.obj img{width:100%;box-shadow:0 2px 2px rgba(36,32,28,.08),0 30px 50px -28px rgba(36,32,28,.6)}
.obj figcaption{margin-top:12px;color:var(--ink-2)}
@media (hover:hover){.obj:hover figcaption{color:var(--accent)}}
@media (hover:hover){.obj:hover{transform:translateY(-8px)}}
.o1{left:1%;top:8%;width:19%;--rot:-2.2deg}
.o2{left:23%;top:12%;width:30%;--rot:1.2deg;z-index:1}
.o3{left:57%;top:0;width:17%;--rot:-1.4deg}
.o4{right:1%;top:9%;width:19%;--rot:2.6deg}
.o5{left:60%;top:50%;width:12%;--rot:1.8deg}
@media (max-width:899px){
  .desk{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--gutter)}
  .obj{position:relative;left:auto;right:auto;top:auto;width:auto}
  .o2{grid-column:1 / -1;order:-1}
}
.worlds-more{margin-top:var(--s6)}
.worlds-more a,.pt-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---- about strip ---- */
.about-strip{padding-block:var(--s6) var(--s8)}
.about-strip .grid{border-top:1px solid var(--rule-2);padding-top:var(--s5)}
.about-body{grid-column:4 / -1;display:grid;gap:var(--s5)}
.about-body .h2{max-width:13em}
.about-body .h2 em{color:var(--accent)}
.about-body .lead{max-width:30em;color:var(--ink-2)}
.about-links{display:flex;flex-wrap:wrap;gap:12px 32px}
.about-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
@media (max-width:899px){.about-body{grid-column:1 / -1}}

/* ---- footer ---- */
.foot{border-top:1px solid var(--rule-2);padding-block:var(--s7) var(--s6);margin-top:var(--s5)}
.foot-top{row-gap:var(--s6)}
.foot-cta{grid-column:1 / span 7;display:grid;gap:var(--s4);align-content:start}
.foot-cta .display em{color:var(--accent)}
.foot-lead{max-width:24em}
.foot-mail a{font:300 var(--t-h3)/1.2 var(--serif);color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
.foot-mail{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.copy-mail{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ink-2);cursor:pointer;padding:0}
.copy-mail[hidden]{display:none}
.copy-mail svg{width:20px;height:20px;grid-area:1 / 1;transition:opacity .25s,transform .35s var(--settle)}
.copy-mail .i-done{opacity:0;transform:scale(.6);color:var(--accent)}
.copy-mail.done .i-copy{opacity:0;transform:scale(.6)}
.copy-mail.done .i-done{opacity:1;transform:none}
.copy-mail:hover,.copy-mail:focus-visible{color:var(--accent)}
.copy-note{min-width:5em;color:var(--accent)}
.foot-cols{grid-column:9 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);align-content:start}
.foot-list{margin-top:var(--s3);display:grid;gap:8px;font-size:var(--t-small)}
.foot-list a{text-decoration:none}
.foot-list a:hover{color:var(--accent)}
/* on touch, the small underlined links keep their look but take a larger tap, short of the next row */
@media (pointer:coarse){
  :is(.pt-links,.about-links,.a-links,.worlds-more,.reg-stats) :is(a,button),.foot-list a{position:relative}
  :is(.pt-links,.about-links,.a-links,.worlds-more,.reg-stats) :is(a,button)::before,.foot-list a::before{content:"";position:absolute;inset:-6px -8px}
}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s5);margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--rule)}
.foot-base .mono{max-width:56em;color:var(--ink-2)}
@media (max-width:899px){.foot-cta,.foot-cols{grid-column:1 / -1}}