/* =========================================================
   Wall Work · poster portfolio
   Static site. No build step. No external requests.
   ========================================================= */

@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Inter Tight";
  src:url("../fonts/inter-tight.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --paper:#F4EFE6;
  --paper-2:#EBE4D7;
  --card:#FBF7EF;
  --ink:#17130F;
  --ink-2:#4C433B;
  --ink-3:#7A6F63;
  --line:rgba(23,19,15,.14);
  --line-2:rgba(23,19,15,.28);
  --accent:#BF4420;
  --dark:#14110E;
  --dark-2:#1D1913;
  --serif:"Instrument Serif",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Inter Tight",ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(20px,4vw,64px);
  --r:2px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:clamp(15.5px,.4vw + 14px,17.5px);
  line-height:1.62; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:400}
p{margin:0}
::selection{background:var(--accent); color:var(--paper)}
body.lb-open{overflow:hidden}

.shell{width:min(1400px,100%); margin-inline:auto; padding-inline:var(--pad)}

.skip{
  position:fixed; top:10px; left:10px; z-index:100; padding:10px 16px;
  background:var(--ink); color:var(--paper); transform:translateY(-160%);
  transition:transform .25s var(--ease);
}
.skip:focus-visible{transform:none}

:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* paper grain + scroll progress ---------------------------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.32;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}
.progress{position:fixed; inset:0 0 auto; height:2px; z-index:70; pointer-events:none}
.progress i{display:block; height:100%; width:0; background:var(--accent); transition:width .1s linear}

/* header ---------------------------------------------------- */
.top{
  position:fixed; inset:0 0 auto; z-index:50;
  transition:transform .45s var(--ease), background .3s var(--ease), border-color .3s;
  border-bottom:1px solid transparent;
}
.top.is-stuck{
  background:rgba(244,239,230,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.top.is-hidden{transform:translateY(-102%)}
.top-in{display:flex; align-items:center; gap:clamp(16px,3vw,44px); height:clamp(62px,7vw,78px)}

.mark{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.02em; font-size:16px; flex:none}
.mark svg{width:26px; height:26px; color:var(--ink); transition:transform .6s var(--ease-out)}
.mark:hover svg{transform:rotate(-6deg) scale(1.06)}
.mark span{white-space:nowrap}

.links{display:flex; gap:clamp(14px,2vw,30px); margin-left:auto; font-size:14.5px; color:var(--ink-2)}
.links a{position:relative; padding:6px 0}
.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.links a:hover{color:var(--ink)}
.links a:hover::after{transform:scaleX(1)}

.status{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.02em;
  border:1px solid var(--line-2); border-radius:999px; padding:7px 13px 7px 11px;
  color:var(--ink-2); transition:border-color .3s, color .3s, background .3s; flex:none;
}
.status i{width:7px; height:7px; border-radius:50%; background:#3F8F5B; box-shadow:0 0 0 0 rgba(63,143,91,.45); animation:pulse 2.4s infinite}
.status:hover{border-color:var(--ink); color:var(--ink)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(63,143,91,.42)}
  70%{box-shadow:0 0 0 7px rgba(63,143,91,0)}
  100%{box-shadow:0 0 0 0 rgba(63,143,91,0)}
}

.menu-btn{display:none; width:40px; height:40px; margin-left:auto; position:relative}
.menu-btn span{position:absolute; left:9px; right:9px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s}
.menu-btn span:nth-child(1){top:16px}
.menu-btn span:nth-child(2){top:23px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.mnav{display:none}

/* hero ------------------------------------------------------ */
.hero{padding-top:clamp(84px,10vw,124px); overflow:hidden}
.hero-top{max-width:1020px}
h1{
  font-family:var(--serif); font-size:clamp(2.8rem,6.4vw,6.1rem); line-height:.94;
  letter-spacing:-.022em; margin:clamp(14px,2vw,24px) 0 0;
}
h1 em, h2 em{font-style:italic; color:var(--accent)}
.hero-cols{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(24px,4vw,64px); margin-top:clamp(20px,2.6vw,30px);
}
.hero-main{max-width:46ch}
.hero-cta{margin-top:clamp(20px,2.4vw,28px)}

.lede{max-width:46ch; color:var(--ink-2); font-size:clamp(16px,1.1vw,18px); line-height:1.6}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border:1px solid var(--ink); border-radius:999px;
  background:var(--ink); color:var(--paper); font-size:14.5px; font-weight:500;
  transition:transform .3s var(--ease-out), background .3s, color .3s, box-shadow .3s;
}
.btn span{transition:transform .35s var(--ease-out)}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px -14px rgba(23,19,15,.7)}
.btn:hover span{transform:translateY(3px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:rgba(23,19,15,.05)}
.btn.big{padding:16px 26px; font-size:clamp(15px,1.2vw,17px)}

.facts{
  display:grid; gap:0; margin:6px 0 0; width:min(268px,42vw); flex:none;
  border-top:1px solid var(--line);
}
.facts div{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 0 11px; border-bottom:1px solid var(--line);
}
.facts dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.facts dd{margin:0; font-family:var(--serif); font-size:clamp(17px,1.6vw,21px); line-height:1; white-space:nowrap}
.hero-fine{margin-top:14px; font-size:12.5px; color:var(--ink-3)}
@media (max-width:900px){
  .hero-cols{flex-direction:column; gap:26px}
  .hero-main{max-width:none}
  .facts{width:100%}
}

.eyebrow{
  display:flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.eyebrow b{color:var(--accent); font-weight:400}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none}
.eyebrow.light{color:rgba(244,239,230,.72)}
.eyebrow.light b{color:#E8886B}

/* the wall of posters -------------------------------------- */
.wall{margin-top:clamp(30px,4.6vw,58px); overflow:hidden; padding-bottom:8px}
.wall-in{
  display:flex; align-items:flex-start; gap:clamp(12px,1.5vw,24px);
  width:max-content; padding:40px 0 54px; margin-left:-4vw;
  transform:rotate(-1.5deg); transform-origin:center;
  translate:var(--wx,0px) 0;
}
.wall figure{
  margin:0; background:var(--card); padding:8px 8px 24px; flex:0 0 auto;
  box-shadow:0 26px 50px -34px rgba(23,19,15,.55), 0 2px 6px rgba(23,19,15,.08);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
  width:clamp(150px,14.2vw,215px);
}
.wall img{width:100%}
.wall .w1{transform:rotate(-2.6deg) translateY(16px)}
.wall .w2{transform:rotate(1.6deg) translateY(2px); width:clamp(160px,15.4vw,232px)}
.wall .w3{transform:rotate(-1.2deg) translateY(22px); width:clamp(155px,14.8vw,224px)}
.wall .w4{transform:rotate(2.4deg) translateY(8px); width:clamp(150px,14.2vw,214px)}
.wall .w5{transform:rotate(-1.8deg) translateY(18px); width:clamp(160px,15.2vw,228px)}
.wall .w6{transform:rotate(1.2deg) translateY(4px)}
.wall .w7{transform:rotate(-2.2deg) translateY(18px); width:clamp(150px,14vw,212px)}
.wall figure:hover{transform:rotate(0deg) translateY(-8px); box-shadow:0 40px 60px -34px rgba(23,19,15,.6)}

/* belt ------------------------------------------------------ */
.belt{
  border-block:1px solid var(--line); overflow:hidden; padding:14px 0;
  background:linear-gradient(90deg,var(--paper),rgba(244,239,230,.4) 8%,rgba(244,239,230,.4) 92%,var(--paper));
}
.belt-track{
  display:flex; align-items:center; gap:26px; width:max-content;
  animation:marquee 52s linear infinite; will-change:transform;
}
.belt:hover .belt-track{animation-play-state:paused}
.belt span{
  font-family:var(--serif); font-size:clamp(18px,1.7vw,23px); letter-spacing:.01em;
  color:var(--ink-2); white-space:nowrap;
}
.belt i{color:var(--accent); font-size:8px; font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

/* section furniture ---------------------------------------- */
section{position:relative}
section[id]{scroll-margin-top:84px}
.sec-head{max-width:900px}
h2{
  font-family:var(--serif); font-size:clamp(2.2rem,4.4vw,4.2rem); line-height:1.0;
  letter-spacing:-.018em; margin-top:clamp(14px,1.6vw,20px);
}
.sec-lede{margin-top:clamp(16px,2vw,24px); max-width:62ch; color:var(--ink-2)}

.work{padding:clamp(64px,9vw,130px) 0 clamp(40px,6vw,80px)}
.filters{
  display:flex; flex-wrap:wrap; gap:8px; margin:clamp(30px,4vw,46px) 0 clamp(26px,3.4vw,40px);
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border:1px solid var(--line-2); border-radius:999px; font-size:13.5px; color:var(--ink-2);
  transition:background .25s var(--ease), color .25s, border-color .25s, transform .25s;
}
.chip span{font-family:var(--mono); font-size:10.5px; opacity:.6}
.chip:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-1px)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip.is-on span{opacity:.55}

.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(18px,2.2vw,30px); grid-auto-rows:1px; align-items:start}
html:not(.js) .grid{display:block; columns:3; column-gap:clamp(18px,2.2vw,30px)}
.card{
  margin:0 0 clamp(18px,2.2vw,30px); align-self:start;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
html:not(.js) .card{break-inside:avoid}
.card.is-out{display:none}
.card-btn{
  display:block; width:100%; padding:9px; background:var(--card);
  border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.card-btn img{width:100%; transition:transform .7s var(--ease-out), filter .5s}
.card-btn::after{
  content:""; position:absolute; inset:9px; border:1px solid rgba(23,19,15,.08); pointer-events:none;
}
.card-open{
  position:absolute; right:18px; bottom:18px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:8px 12px; border-radius:999px;
  opacity:0; transform:translateY(8px); transition:opacity .35s, transform .35s var(--ease-out);
}
.card:hover .card-btn{transform:translateY(-5px); box-shadow:0 26px 44px -28px rgba(23,19,15,.6); border-color:var(--line-2)}
.card:hover .card-btn img{transform:scale(1.022)}
.card:hover .card-open{opacity:1; transform:none}
.card-btn:active{transform:translateY(-2px) scale(.995)}

figcaption{display:flex; align-items:baseline; gap:10px; padding:11px 2px 0; font-size:13.5px}
figcaption .n{font-family:var(--mono); font-size:10.5px; color:var(--accent); letter-spacing:.05em}
figcaption .t{font-weight:500; letter-spacing:-.01em}
figcaption .k{margin-left:auto; color:var(--ink-3); font-size:12.5px; white-space:nowrap}

/* one brief rail ------------------------------------------- */
.onebrief{padding:clamp(70px,9vw,120px) 0 clamp(60px,8vw,110px); background:var(--paper-2); border-block:1px solid var(--line)}
.rail-wrap{margin-top:clamp(30px,4vw,50px)}
.rail{
  display:flex; gap:clamp(16px,2vw,28px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px var(--pad) 26px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.frame{
  flex:0 0 clamp(250px,30vw,380px); scroll-snap-align:start; margin:0;
  background:var(--card); border:1px solid var(--line); padding:10px 10px 0;
  transition:transform .5s var(--ease-out), box-shadow .5s;
}
.frame:hover{transform:translateY(-6px); box-shadow:0 30px 50px -34px rgba(23,19,15,.6)}
.frame-img{overflow:hidden; background:var(--paper)}
.frame-img img{width:100%; transition:transform .8s var(--ease-out)}
.frame:hover .frame-img img{transform:scale(1.03)}
.frame-meta{padding:18px 6px 22px; position:relative}
.frame-meta span{font-family:var(--mono); font-size:10.5px; color:var(--accent); letter-spacing:.1em}
.frame-meta h3{font-family:var(--serif); font-size:clamp(22px,2vw,28px); margin-top:4px}
.frame-meta p{margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:34ch}
.rail-nav{display:flex; align-items:center; gap:16px; padding:0 var(--pad)}
.rail-btn{
  width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%;
  display:grid; place-items:center; font-size:15px;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.rail-btn:hover{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:scale(1.05)}
.rail-dots{display:flex; gap:7px; margin-left:auto; margin-right:auto}
.rail-dots i{width:6px; height:6px; border-radius:50%; background:var(--line-2); transition:background .3s, transform .3s}
.rail-dots i.on{background:var(--accent); transform:scale(1.3)}

/* formats --------------------------------------------------- */
.formats{padding:clamp(70px,9vw,120px) 0}
.sizes{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px);
  margin-top:clamp(36px,5vw,60px); align-items:end;
}
.size .shape-box{
  display:flex; align-items:flex-end; height:clamp(230px,25vw,350px);
  border-bottom:1px solid var(--line); margin-bottom:16px;
}
.size .shape{
  height:100%; width:auto; aspect-ratio:var(--ar); max-width:100%;
  border:1px solid var(--line-2);
  background:
    repeating-linear-gradient(45deg,rgba(23,19,15,.045) 0 1px,transparent 1px 9px),
    var(--paper-2);
  display:grid; place-items:center; position:relative;
  transform-origin:bottom left; transition:transform .9s var(--ease-out), opacity .6s var(--ease);
}
.s-banner .shape{height:auto; width:100%; max-width:100%}
.js .size:not(.in) .shape{transform:scaleY(.72); opacity:0}
.size .shape span{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); background:var(--paper); padding:5px 8px}
.s-a4{--ar:210/297}
.s-social{--ar:4/5}
.s-banner{--ar:1500/500}

.size h3{margin-top:0; font-family:var(--serif); font-size:clamp(20px,1.9vw,26px)}
.size p{margin-top:6px; color:var(--ink-2); font-size:14px; line-height:1.55; max-width:34ch}
.sizes-note{margin-top:clamp(30px,4vw,46px); color:var(--ink-3); font-size:14px; max-width:60ch}

/* process --------------------------------------------------- */
.process{background:var(--dark); color:var(--paper); padding:clamp(76px,10vw,140px) 0}
.process .sec-lede{color:rgba(244,239,230,.72)}
.process h2{color:var(--paper)}
.process h2 em{color:#E8886B}
.pr-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:clamp(30px,5vw,70px); align-items:center}
.steps{list-style:none; margin:clamp(26px,3vw,38px) 0 0; padding:0; display:grid; gap:2px}
.steps li{
  display:grid; grid-template-columns:46px 1fr; gap:14px; padding:16px 0;
  border-top:1px solid rgba(244,239,230,.16);
}
.steps li:last-child{border-bottom:1px solid rgba(244,239,230,.16)}
.steps b{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:#E8886B; font-weight:400; padding-top:3px}
.steps span{color:rgba(244,239,230,.78); font-size:14.5px; line-height:1.6}
.steps strong{color:var(--paper); font-weight:500}
.pr-fig{margin:0; background:var(--dark-2); border:1px solid rgba(244,239,230,.14); padding:12px}
.pr-fig img{width:100%}
.pr-fig figcaption{margin-top:14px; color:rgba(244,239,230,.62); font-size:13px; line-height:1.6; display:block}
.pr-fig .tag{
  display:inline-block; margin-bottom:8px; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper);
  border:1px solid rgba(244,239,230,.3); border-radius:999px; padding:5px 10px;
}
.disclosure{
  margin-top:clamp(36px,5vw,60px); padding-top:22px; border-top:1px solid rgba(244,239,230,.16);
  color:rgba(244,239,230,.7); max-width:70ch; font-size:14.5px;
}

/* contact --------------------------------------------------- */
.contact{padding:clamp(80px,10vw,150px) 0 clamp(60px,7vw,90px)}
.contact-head{max-width:900px}
.contact h2{font-size:clamp(2.6rem,6vw,5.4rem); margin-top:clamp(14px,2vw,22px)}
.contact-lede{max-width:52ch; margin-top:clamp(18px,2.4vw,28px); color:var(--ink-2); font-size:clamp(16px,1.1vw,18px)}
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(30px,5vw,80px); align-items:start;
  margin-top:clamp(34px,4.6vw,62px); padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line);
}

/* the brief form */
.brief{position:relative; display:grid; gap:clamp(16px,2vw,22px)}
.brief[hidden]{display:none}
.f-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,24px)}
.field{display:grid; gap:6px; min-width:0}
.field label,.field legend{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding:0;
}
.field label i{font-family:var(--sans); font-style:normal; font-size:11.5px; letter-spacing:0; text-transform:none; opacity:.75}
.field input[type=text],.field input[type=email],.field input[type=date]{
  width:100%; padding:9px 0; border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  background:transparent; color:var(--ink); font:inherit; font-size:16px;
  transition:border-color .25s var(--ease);
}
.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:0;
  background:var(--card); color:var(--ink); font:inherit; font-size:15.5px; line-height:1.6;
  resize:vertical; min-height:132px; transition:border-color .25s var(--ease);
}
.field input:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus-visible,.field textarea:focus-visible{outline:none; border-color:var(--accent)}
.field input[type=date]{min-height:42px; color-scheme:light}
.err{display:none; font-size:12.5px; color:var(--accent); line-height:1.45}
.field.is-bad .err{display:block}
.field.is-bad input,.field.is-bad textarea{border-color:var(--accent)}
.hint{display:flex; justify-content:space-between; gap:16px; font-size:12px; color:var(--ink-3); line-height:1.5}
.hint #msg-count{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; white-space:nowrap; color:var(--ink-3)}
.hint.over #msg-count{color:var(--accent)}

.needs{border:0; margin:0; padding:0}
.opts{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.opt{position:relative; display:inline-flex}
.opt input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer}
.opt span{
  display:inline-block; padding:8px 14px; border:1px solid var(--line-2); border-radius:999px;
  font-size:13.5px; color:var(--ink-2); transition:background .25s, color .25s, border-color .25s;
}
.opt:hover span{border-color:var(--ink); color:var(--ink)}
.opt input:checked + span{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}

.hp{position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden}

.form-foot{display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px; margin-top:2px}
.form-note{font-size:12px; color:var(--ink-3); max-width:36ch; line-height:1.5}
.form-status{margin:0; font-size:13.5px; line-height:1.55; color:var(--accent); max-width:52ch}
.form-status:empty{display:none}
.brief.is-sending{opacity:.7; pointer-events:none}

/* sent state */
.sent{border:1px solid var(--line); background:var(--card); padding:clamp(24px,3.4vw,40px)}
.sent h3{font-family:var(--serif); font-size:clamp(28px,3.4vw,40px); line-height:1.06; margin-top:12px}
.sent-lede{margin-top:14px; color:var(--ink-2); max-width:42ch}
.sent-note{margin-top:10px; color:var(--ink-3); font-size:13.5px; max-width:42ch}
.sent .btn{margin-top:24px}

/* aside */
.contact-aside{border-top:1px solid var(--line)}
.aside-block{padding:15px 0; border-bottom:1px solid var(--line)}
.aside-block h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:400}
.aside-block p{margin-top:7px; font-size:13.5px; color:var(--ink-2); line-height:1.55; max-width:34ch}
.aside-block .mail{color:var(--ink); border-bottom:1px solid var(--accent); padding-bottom:1px; transition:color .25s}
.aside-block .mail:hover{color:var(--accent)}

/* footer ---------------------------------------------------- */
.foot{border-top:1px solid var(--line); padding:26px 0 40px}
.foot-in{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 24px; font-size:12.5px; color:var(--ink-3)}
.foot .fine{margin-left:auto; max-width:64ch}
.totop{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.totop:hover{color:var(--accent)}

/* lightbox -------------------------------------------------- */
.lb{
  padding:0; border:0; width:100%; max-width:100%; height:100%; max-height:100%;
  background:rgba(16,13,10,.95); color:var(--paper); margin:0;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.lb::backdrop{background:rgba(16,13,10,.9)}
.lb[open]{display:grid; grid-template-rows:auto 1fr auto; animation:lbin .3s var(--ease-out)}
@keyframes lbin{from{opacity:0} to{opacity:1}}
.lb-bar{display:flex; align-items:center; gap:18px; padding:18px clamp(16px,3vw,34px)}
.lb-bar .lb-x{margin-left:auto}
.lb-hint{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,239,230,.4)}
.lb-count{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(244,239,230,.62)}
.lb-x{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; color:rgba(244,239,230,.8);
  border:1px solid rgba(244,239,230,.24); border-radius:999px; padding:8px 14px;
  transition:background .25s, color .25s, border-color .25s;
}
.lb-x:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.lb-body{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(8px,2vw,24px); padding:0 clamp(8px,2vw,24px); min-height:0}
.lb-fig{margin:0; display:grid; place-items:center; min-height:0; height:100%}
.lb-fig img{
  max-height:min(74vh,900px); width:auto; max-width:100%;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
  animation:lbfig .45s var(--ease-out);
}
@keyframes lbfig{from{opacity:0; transform:scale(.98)} to{opacity:1; transform:none}}
.lb-prev,.lb-next{
  width:clamp(40px,4vw,52px); height:clamp(40px,4vw,52px); border-radius:50%;
  border:1px solid rgba(244,239,230,.22); color:var(--paper); display:grid; place-items:center;
  transition:background .25s, color .25s, transform .25s;
}
.lb-prev:hover,.lb-next:hover{background:var(--paper); color:var(--ink); transform:scale(1.06)}
.lb-meta{
  padding:16px clamp(16px,3vw,34px) 24px;
  border-top:1px solid rgba(244,239,230,.14); margin-top:18px;
  display:grid; grid-template-columns:auto 1fr auto; gap:6px 18px; align-items:baseline;
}
.lb-meta .t{font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); line-height:1}
.lb-meta .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#E8886B}
.lb-meta .f{color:rgba(244,239,230,.55); font-size:12.5px; font-family:var(--mono); letter-spacing:.06em; justify-self:end; text-align:right}
.lb-meta .n{grid-column:1/-1; color:rgba(244,239,230,.68); font-size:13.5px; max-width:86ch; line-height:1.55}

/* reveal ---------------------------------------------------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.js .reveal.in{opacity:1; transform:none}
.grid .card.reveal:nth-child(3n+2){transition-delay:.06s}
.grid .card.reveal:nth-child(3n+3){transition-delay:.12s}

/* responsive ------------------------------------------------ */
@media (max-width:1100px){
  .links{display:none}
  .menu-btn{display:block}
  .status{display:none}
  .mnav{
    display:grid; gap:2px; padding:8px var(--pad) 22px;
    background:rgba(244,239,230,.97); border-bottom:1px solid var(--line);
  }
  .mnav[hidden]{display:none}
  .mnav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:18px; font-family:var(--serif)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html:not(.js) .grid{columns:2}
  .pr-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr; gap:34px}
}
@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  html:not(.js) .grid{columns:1}
  .sizes{grid-template-columns:1fr; gap:0}
  .size{
    display:grid; grid-template-columns:148px minmax(0,1fr); column-gap:20px; align-items:center;
    padding:22px 0; border-top:1px solid var(--line);
  }
  .size:first-child{padding-top:0; border-top:0}
  .size .shape-box{display:block; height:auto; border-bottom:0; margin-bottom:14px}
  .size .shape{width:100%; height:auto}
  .size h3{margin-top:0}
  .wall-in{padding:26px 0 18px; gap:12px}
  .wall figure{width:132px !important; padding:6px 6px 16px}
  .lb-body{grid-template-columns:1fr; grid-template-rows:1fr auto; gap:0}
  .lb-prev,.lb-next{position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(16,13,10,.6)}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  .lb-hint{display:none}
  .lb-meta{grid-template-columns:1fr; gap:4px}
  .lb-meta .f{justify-self:start; text-align:left}
  .f-row{grid-template-columns:1fr}
  .foot .fine{margin-left:0}
}

/* motion preferences ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .belt-track{animation:none}
  .js .size:not(.in) .shape{transform:none; opacity:1}
}

.hero-fine{margin-top:14px; font-size:12.5px; color:var(--ink-3)}

/* screenshot / no-animation helper: ?still=1 */
.still .reveal{opacity:1 !important; transform:none !important; transition:none !important}
.still .size .shape{transform:none !important; opacity:1 !important}
.still .belt-track,.still .status i{animation:none}
.still .lb[open],.still .lb-fig img{animation:none}

/* turnstile holds an invisible widget off-canvas */
.ts{position:absolute; left:-9999px; top:0; width:0; height:0; overflow:hidden}