/* site.css — the front of the site
   Homepage and the studio's own landing section: hero, statement, process
   cards, the long-form writing, bench notes, footer. */

/* ================= LANDING ================= */
.lander{max-width:1240px;margin:0 auto;padding-inline:20px;padding-block:0 60px}
.lhero{padding-block:52px 34px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
@media (max-width:860px){.lhero{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:32px 24px}}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.lhero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8.5vw,86px);line-height:.92;margin:0;letter-spacing:-.015em}
.lhero h1 em{font-style:italic;color:var(--accent)}
.lead{font-size:16.5px;color:var(--ink-2);margin:18px 0 0;max-width:46ch;line-height:1.5}
.lead.statement{font-family:var(--serif);font-size:23px;line-height:1.35;color:var(--ink);letter-spacing:-.005em;margin-top:20px}
.lead.statement+.lead{font-size:14.5px;margin-top:16px}
.lead.statement span{color:var(--accent);font-style:italic}
.lead b{color:var(--ink);font-weight:600}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;align-items:center}
.ctanote{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.btn-lg{font-size:14px;padding:11px 20px}

/* filmstrip */
.strip-demo{background:var(--surface);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow);padding:14px}
.strip-demo .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px}
.strip-demo figure{margin:0;display:flex;flex-direction:column;gap:5px}
.strip-demo canvas{width:100%;height:auto;display:block;border-radius:1px;background:var(--surface-2);box-shadow:0 1px 3px rgba(21,24,27,.14)}
.strip-demo figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--ink-3);display:flex;align-items:center;gap:4px}
.strip-demo figcaption i{width:7px;height:7px;border-radius:99px;border:1px solid rgba(0,0,0,.2);flex:none}
.strip-demo .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.strip-demo .hd b{font-size:12.5px}
.strip-demo .hd span{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.strip-demo p.fin{margin:11px 0 0;font-size:12px;color:var(--ink-2)}

.pickwrap{padding-block:34px 8px}
.pickh{font-family:var(--serif);font-weight:400;font-size:29px;margin:0 0 5px}
.picksub{color:var(--ink-2);font-size:13.5px;margin:0 0 20px;max-width:74ch}
.picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;padding-bottom:30px}
.pcard{text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);transition:border-color .14s,transform .14s}
.pcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.pcard h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:0;letter-spacing:-.005em;line-height:1}
.pcard .psub{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0}
.pcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12px;border-top:1px solid var(--line);padding-top:9px}
.pcard dt{color:var(--ink-3)}
.pcard dd{margin:0;font-family:var(--mono);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
.pcard .go{margin-top:auto;padding-top:4px;font-size:12.5px;font-weight:700;color:var(--accent)}
.lthree{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;padding-block:38px;border-bottom:1px solid var(--line)}
.lthree h3{font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 7px;letter-spacing:-.005em}
.lthree p{margin:0;color:var(--ink-2);font-size:13.5px}
.lthree .q{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px}

.lsteps{padding-block:34px}
.lsteps h2{font-family:var(--serif);font-weight:400;font-size:29px;margin:0 0 20px}
.lstep{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:13px 0;border-top:1px solid var(--line);align-items:start}
.lstep .n{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600;padding-top:2px}
.lstep b{display:block;font-size:14px;margin-bottom:2px}
.lstep p{margin:0;color:var(--ink-2);font-size:13.5px;max-width:74ch}
.why{padding-block:10px 30px}
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:26px 34px}
.whygrid h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 7px;letter-spacing:-.005em;line-height:1.15}
.whygrid p{margin:0 0 9px;font-size:13.5px;color:var(--ink-2);max-width:62ch}
.whygrid p:last-child{margin:0}
.bench{padding-block:10px 34px}
.benchgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:15px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
.bcard.empty{background:transparent;border-style:dashed;box-shadow:none}
.btag{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0}
.bcard.empty .btag{color:var(--ink-3)}
.bcard h3{font-family:var(--serif);font-weight:400;font-size:21px;margin:0;letter-spacing:-.005em;line-height:1.15}
.bcard .bl{margin:0;font-size:13px;color:var(--ink-2)}
.bcard .bq{margin:0;font-size:13.5px;line-height:1.5;border-left:2px solid var(--accent);padding-left:11px}
.bcard .bslot{margin:0;font-size:12px;color:var(--ink-3);font-style:italic;border-left:2px dashed var(--line-2);padding-left:11px}
.bcard .bfix{margin:auto 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.lfoot{padding-block:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;font-size:12.5px;color:var(--ink-2)}
.lfoot h4{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px;font-weight:500}
.lfoot p{margin:0}


/* ================= HOMEPAGE ================= */
.homehero{padding-block:70px 20px;border-bottom:1px solid var(--line);max-width:62ch}
.homehero h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,10vw,104px);line-height:.9;margin:0;letter-spacing:-.02em}
.homehero h1 em{font-style:italic;color:var(--accent)}
@media (max-width:700px){.homehero{padding-block:44px 18px}}
.sechd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.sechd .kicker{margin:0}
.worksec,.shopsec,.studiosec{padding-block:40px 6px}
.workgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.workcard{margin:0;display:flex;flex-direction:column;gap:11px}
.workcard .ph{aspect-ratio:4/5;background:var(--surface-2);border:1.5px dashed var(--line-2);border-radius:2px;display:flex;align-items:center;justify-content:center}
.workcard .ph span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.workcard img{width:100%;height:auto;display:block;border-radius:2px}
.workcard figcaption{display:flex;flex-direction:column;gap:3px}
.workcard figcaption b{font-size:14px}
.workcard figcaption span{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}
.workcard figcaption .note2{font-family:var(--sans);font-size:12.5px;letter-spacing:0;color:var(--ink-2);margin-top:3px}
.workcard.empty figcaption{opacity:.55}
.studiosec{border-top:1px solid var(--line);margin-top:34px}
.backhome{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;padding:16px 20px 0;max-width:1240px;margin:0 auto;display:block}
.backhome:hover{color:var(--accent)}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);padding:1px 5px;border-radius:2px}

/* ================= SHOP ================= */
.workcard{text-decoration:none;color:inherit}
a.workcard:hover .ph,a.workcard:hover img{border-color:var(--accent)}
a.workcard:hover b{color:var(--accent)}
.workcard img{border:1px solid var(--line);border-radius:2px}
.buyline{display:flex!important;flex-direction:row!important;align-items:baseline;justify-content:space-between;gap:10px;margin-top:5px;padding-top:7px;border-top:1px solid var(--line)}
.buyline em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--ink);font-weight:600}
.left{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--good)}
.soldout{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--warn)}
.printpage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;padding-block:34px 44px;align-items:start}
@media (max-width:820px){.printpage{grid-template-columns:minmax(0,1fr);gap:26px}}
.printimg img,.printimg .ph{width:100%;border:1px solid var(--line);border-radius:2px}
.printimg .ph{aspect-ratio:4/5;background:var(--surface-2);border:1.5px dashed var(--line-2);display:flex;align-items:center;justify-content:center}
.printimg .ph span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.printinfo h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6vw,54px);line-height:1;margin:6px 0 0;letter-spacing:-.015em}
.printinfo .story{font-size:15px;color:var(--ink-2);margin:14px 0 0;max-width:46ch}
.spec{display:grid;grid-template-columns:auto 1fr;gap:5px 18px;margin:24px 0 0;font-size:13px;border-top:1px solid var(--line);padding-top:16px}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;font-family:var(--mono);font-size:12px}
.buybox{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.buybox.sticker{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:16px;margin-top:18px}
.pricebig{font-family:var(--serif);font-size:34px;margin:0;line-height:1}
.buybox.out .pricebig{color:var(--warn)}
.buybox .left,.buybox .soldout{display:block;margin:7px 0 0;font-size:12px;letter-spacing:0;font-family:var(--sans);color:var(--ink-2)}
.buybtn{margin-top:16px;display:inline-block;text-decoration:none}
.buybtn.disabled{opacity:.45;cursor:not-allowed;background:var(--surface-2);color:var(--ink-3);border-color:var(--line-2)}
.smallprint{font-size:11.5px;color:var(--ink-3);margin:12px 0 0;max-width:42ch}

/* ================= NAV ================= */
.topnav{max-width:1240px;margin:0 auto;padding:18px 20px 0;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{text-decoration:none;color:inherit}
.wordmark{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.01em;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120}
img.wordmark{height:30px;width:auto;display:block;font-variation-settings:normal}
.navlinks{display:flex;gap:2px;flex-wrap:wrap}
.navlinks a{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-decoration:none;padding:7px 10px;border-radius:2px}
.navlinks a:hover{color:var(--accent);background:var(--accent-soft)}
.navlinks a[aria-current=page]{color:var(--ink);background:var(--surface-2)}
.navlinks a.ig{color:var(--accent)}
.cathero{padding-block:44px 20px;border-bottom:1px solid var(--line);max-width:58ch}
.cathero h1{font-family:var(--serif);font-weight:500;font-size:clamp(40px,8vw,74px);line-height:.95;margin:0;
  letter-spacing:-.02em;font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 144}
.seemore{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);text-decoration:none}
.seemore:hover{text-decoration:underline}

/* character in the display face: soft, wonky, optical-sized */
.homehero h1,.pickh,.printinfo h1,.pricebig,.lhero h1,.bcard h3,.pcard h3,.whygrid h3,h2.sec,.folderhd h3{
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144}
.homehero h1{font-weight:500;letter-spacing:-.025em}
.lead.statement{font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 72;font-weight:400}

/* ================= IMAGE-FIRST HOME ================= */
.bigwork{padding:0}
.herorail{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.herorail::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:26px 20px 30px;
  text-decoration:none;color:inherit;min-height:min(82vh,760px)}
.slideart{width:100%;max-width:640px;display:flex;align-items:center;justify-content:center}
.slideart img{max-height:min(66vh,620px);width:auto;max-width:100%;display:block;
  box-shadow:0 8px 34px rgba(21,24,27,.16)}
.heroph{width:100%;aspect-ratio:4/5;max-height:min(66vh,620px);background:var(--surface-2);
  border:1.5px dashed var(--line-2);display:flex;align-items:center;justify-content:center;padding:20px}
.heroph span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;max-width:22ch;line-height:1.7}
.slidecap{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.slidecap b{font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:-.01em;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96}
.slidecap span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--ink-3)}
.slidecap .price{color:var(--ink-2);margin-top:2px}
.slide:hover .slidecap b{color:var(--accent)}
.swipehint{text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 30px}
.worksec.quiet{border-top:1px solid var(--line);padding-top:34px}
.saysec{padding-block:46px;border-top:1px solid var(--line);margin-top:40px;max-width:52ch}
.saysec .lead.statement{margin-top:0}
@media (max-width:640px){
  .slide{min-height:auto;padding:16px 16px 24px}
  .slideart img,.heroph{max-height:62vh}
  .slidecap b{font-size:21px}
}

/* ================= BAND + WIP STRIP ================= */
.band{background:linear-gradient(112deg,var(--grad-a) 0%,var(--grad-b) 100%);color:var(--band-ink)}
.band .topnav{padding-top:18px}
.band .topnav .wordmark{display:none}
.band .topnav .brand::after{content:"";}
.band .navlinks a{color:var(--band-ink);opacity:.72}
.band .navlinks a:hover{opacity:1;background:rgba(255,255,255,.22)}
.band .navlinks a[aria-current=page]{opacity:1;background:rgba(255,255,255,.3)}
.bandinner{max-width:1240px;margin:0 auto;padding:44px 20px 60px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:820px){.bandinner{grid-template-columns:minmax(0,1fr);gap:26px;padding:28px 20px 44px}}
.stackname{margin:0;font-family:var(--serif);font-weight:500;line-height:.92;letter-spacing:-.025em;
  font-size:clamp(40px,6.4vw,78px);text-transform:uppercase;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144}
.stackname span{display:block}
.stackname span:last-child{color:rgba(20,24,27,.55)}
.bandsay{padding-top:8px;max-width:44ch}
.bandsay p{margin:0;font-size:clamp(17px,2.1vw,22px);line-height:1.38}
.pill{display:inline-block;margin-top:26px;background:var(--surface);color:var(--ink);
  font-weight:600;font-size:14px;text-decoration:none;padding:13px 30px;border-radius:99px;
  border:1px solid transparent;transition:transform .12s}
.pill:hover{transform:translateY(-1px)}
.pill.disabled{opacity:.6;cursor:default}
.wipstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:900px){.wipstrip{grid-template-columns:repeat(2,1fr)}}
.wipcell{margin:0;position:relative;overflow:hidden;background:var(--surface-2)}
.wipcell img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.wipph{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--line);background:var(--surface-2)}
.wipcell:last-child .wipph{border-right:none}
.wipph span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.wipcell figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.62));opacity:0;transition:opacity .16s}
.wipcell:hover figcaption{opacity:1}
.wipcell .wipph+figcaption{position:static;background:none;color:var(--ink-3);opacity:1;text-align:center;padding:9px 6px}
:root[data-theme="dark"] .stackname span:last-child,
:root:not([data-theme="light"]) .stackname span:last-child{color:rgba(237,234,227,.5)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .stackname span:last-child{color:rgba(20,24,27,.55)}}

/* ================= THE JOURNEY ================= */
.journey{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:6px 0 0;padding:0;align-items:center}
.journey li{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.journey li+li::before{content:"→";margin:0 7px;color:var(--line-2)}
.journey li.on{color:var(--ink-2)}
.journey li.skip{opacity:.34}
.journey li.skip span{text-decoration:line-through}
.journey a{color:inherit;text-decoration:none}
.journey a:hover{color:var(--accent)}
.workhero{padding-block:44px 22px;border-bottom:1px solid var(--line);max-width:60ch}
.workhero h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,7vw,68px);line-height:.98;margin:0;
  letter-spacing:-.02em;font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144}
.workhero .journey{margin-top:20px;font-size:10.5px}
.stopped{font-family:var(--serif);font-size:19px;color:var(--accent);margin:10px 0 0;font-style:italic}
.processsec{padding-block:34px 6px;max-width:58ch}
.processline{font-family:var(--serif);font-size:clamp(20px,2.6vw,27px);line-height:1.35;margin:0;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96}
.stagerow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;
  padding-block:40px;border-bottom:1px solid var(--line);align-items:start}
@media (max-width:820px){.stagerow{grid-template-columns:minmax(0,1fr);gap:22px;padding-block:28px}}
.stageart img,.stageart .ph{width:100%;border:1px solid var(--line);border-radius:2px}
.stageart .ph{aspect-ratio:4/5;background:var(--surface-2);border:1.5px dashed var(--line-2);
  display:flex;align-items:center;justify-content:center}
.stageart .ph span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stagecap{font-family:var(--serif);font-size:21px;line-height:1.35;margin:8px 0 0;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 72}
.stageinfo .spec{margin-top:18px}
.notforsale{font-size:12.5px;color:var(--ink-3);margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.workcard .journey{margin-top:4px}
.journey li.todo{opacity:.45}
.journey li.todo span{border-bottom:1px dotted currentColor;padding-bottom:1px}
.planned{font-size:12.5px;color:var(--ink-3);margin:18px 0 0;padding-top:16px;border-top:1px dotted var(--line-2)}
.stagerow:has(.planned) .stageart{opacity:.55}

/* ---- bigger work grid, featured pieces running full width ---- */
.workgrid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px}
.workcard.wide{grid-column:1/-1}
.workcard.wide img{width:100%;max-height:74vh;object-fit:contain;background:var(--surface-2)}
.workcard.wide figcaption b{font-family:var(--serif);font-size:27px;font-weight:500;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 120}
.workcard img{max-height:62vh;object-fit:contain;background:var(--surface-2)}
@media (max-width:700px){
  .workgrid{grid-template-columns:minmax(0,1fr);gap:22px}
  .workcard.wide figcaption b{font-size:22px}
}

/* ================= THE GALLERY ================= */
.gallery{display:flex;flex-direction:column;align-items:center;gap:clamp(60px,9vw,120px);
  padding-block:clamp(44px,7vw,88px)}
.hung{display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none;color:inherit;max-width:100%}
.hung img{max-height:78vh;max-width:100%;width:auto;display:block;
  box-shadow:0 10px 40px rgba(21,24,27,.14);transition:transform .25s ease}
.hung:hover img{transform:translateY(-3px)}
.hung figcaption{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.hung figcaption b{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.005em;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96}
.hung figcaption span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.hung:hover figcaption b{color:var(--accent)}
@media (max-width:700px){.hung img{max-height:66vh}}

/* ================= CLEAN ENTRANCE ================= */
.entrance{padding-block:clamp(38px,6vw,66px);max-width:58ch}
.rooms{display:flex;flex-wrap:wrap;gap:0;margin-top:34px;border-top:1px solid var(--line)}
.room{flex:1 1 150px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:19px 2px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  border-right:1px solid var(--line);padding-right:16px;transition:color .14s}
.room:last-child{border-right:none}
.room+.room{padding-left:16px}
.room span{font-family:var(--serif);font-size:clamp(21px,2.6vw,27px);font-weight:500;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96}
.room em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.room:hover{color:var(--accent)}
.room:hover em{color:var(--accent)}
.room.all span{color:var(--accent)}
@media (max-width:620px){
  .rooms{flex-direction:column}
  .room{border-right:none;padding-left:2px!important;padding-right:2px}
}

/* A pale photograph on a pale page has no visible edge and reads as though it
   failed to load. Galleries mount work for exactly this reason. */
.hung img{border:1px solid var(--line);background:var(--surface-2)}
.workcard img{border:1px solid var(--line)}

/* ================= STATEMENT ================= */
.statementpage{max-width:60ch;padding-block:clamp(44px,7vw,80px)}
.statementpage h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,7vw,68px);line-height:.98;
  margin:6px 0 30px;letter-spacing:-.02em;font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144}
.stbody p{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0 0 20px;max-width:58ch}
.stbody p:first-child{font-family:var(--serif);font-size:clamp(23px,3vw,30px);line-height:1.3;color:var(--ink);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96;margin-bottom:26px}
.stbody p:last-child{font-family:var(--serif);font-size:21px;line-height:1.35;color:var(--ink);
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 72;padding-top:22px;border-top:1px solid var(--line)}
.signoff{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-top:30px}

/* ================= WORKED EXAMPLE ================= */
.worked{padding-block:34px 10px;border-top:1px solid var(--line)}
.workedwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:30px;align-items:start;margin-top:22px}
@media (max-width:860px){.workedwrap{grid-template-columns:minmax(0,1fr)}}
.workedbig{margin:0}
.workedbig img{width:100%;border:1px solid var(--line);border-radius:2px;display:block;
  box-shadow:0 8px 28px rgba(21,24,27,.14)}
.workedbig figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-top:9px}
.workedrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.workedrow figure{margin:0}
.workedrow img{width:100%;border:1px solid var(--line);border-radius:2px;display:block;background:var(--surface-2)}
.workedrow figcaption{display:flex;flex-direction:column;gap:1px;margin-top:7px}
.workedrow figcaption b{font-size:11.5px}
.workedrow figcaption span{font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}

/* jump links in the studio hero */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.cta .btn{text-decoration:none;display:inline-flex;align-items:center}
.cta{gap:8px}