/* ═══════════════════════════════════════════════════════════════
   MERIDIAN ATELIER — concrete monochrome, exposed grid, no curves.
   Palette: paper #e5e3de · ink #141414. Nothing else.
   Radius is forbidden in this file. Shadows are forbidden.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#e5e3de;
  --ink:#141414;
  --ink-dim:#3d3c39;
  --hair:rgba(20,20,20,.14);
  --hair-strong:rgba(20,20,20,.3);
  --gutter:clamp(16px,3vw,48px);
  --colw:calc((100vw - 2*var(--gutter))/12);
  --cut:cubic-bezier(.85,0,.15,1); /* hard in, hard out, zero bounce */
  --font:"Archivo",system-ui,sans-serif;
  --font-narrow:"Archivo Narrow","Archivo",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0!important}
html{scroll-behavior:smooth}
.sec,.hero{scroll-margin-top:52px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--ink);color:var(--paper)}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.skip{
  position:fixed;top:-60px;left:var(--gutter);z-index:60;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  transition:top .2s var(--cut);
}
.skip:focus{top:0}

/* ── exposed 12-column grid ─────────────────────────────────── */
.grid-lines{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(12,1fr);
  padding:0 var(--gutter);
}
.grid-lines i{border-left:1px solid var(--hair)}
.grid-lines i:last-child{border-right:1px solid var(--hair)}
@media (max-width:720px){
  .grid-lines i:nth-child(n+7){display:none}
  .grid-lines{grid-template-columns:repeat(6,1fr)}
}

main,header.bar,footer{position:relative;z-index:1}

/* ── top bar ────────────────────────────────────────────────── */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:stretch;
  padding:0 var(--gutter);
  border-bottom:1px solid var(--hair-strong);
  background:var(--paper);
}
.bar-mark{
  font-weight:900;font-size:.95rem;letter-spacing:-.03em;
  padding:16px 0;
}
.bar-nav{display:flex}
.bar-nav a{
  display:flex;align-items:center;
  padding:0 clamp(10px,1.6vw,24px);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-left:1px solid var(--hair);
}
.bar-nav a:hover{text-decoration:none;background:var(--ink);color:var(--paper)}
.bar-rfp{background:var(--ink);color:var(--paper)}
.bar-rfp:hover{outline:1px solid var(--ink);outline-offset:-4px}
@media (max-width:720px){
  .bar-nav a:not(.bar-rfp){display:none}
}

/* ── reveal machinery (hard cuts) ───────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s var(--cut),transform .5s var(--cut)}
.rv.in{opacity:1;transform:none}
.rv-slab{
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .7s var(--cut);
}
.in > .rv-slab, .rv-slab.in{clip-path:inset(0 0 0 0)}

/* ── hero ───────────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  padding:calc(72px + 4vh) var(--gutter) 6vh;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hero-kicker{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  border-bottom:1px solid var(--hair-strong);
  padding-bottom:12px;
}
.hero-counter{
  display:flex;align-items:flex-end;gap:clamp(16px,4vw,72px);
  margin:2vh 0;
}
.hc-figure{
  position:relative;overflow:hidden;line-height:.82;
}
.hc-digits{
  display:block;
  font-size:clamp(9rem,34vw,30rem);
  font-weight:900;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
  transform:translateX(-.02em);
}
.hc-wipe{
  position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:top;
}
.hc-wipe.cut{animation:wipe .16s var(--cut)}
@keyframes wipe{
  0%{transform:scaleY(0);transform-origin:top}
  49%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
.hc-caption{
  padding-bottom:1.2em;
  font-size:clamp(.85rem,1.25vw,1.05rem);
  font-weight:500;line-height:1.45;
  max-width:22ch;
}
.hc-rule{display:block;width:64px;height:4px;background:var(--ink);margin-bottom:14px}
.hero-title{
  font-size:clamp(2rem,5.4vw,4.6rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.02;
  text-transform:uppercase;
  margin:3vh 0;
}
.ht-line{display:block;overflow:hidden}
.hero-foot{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  border-top:1px solid var(--hair-strong);
  padding-top:14px;
  font-size:.8rem;letter-spacing:.04em;
}
.hero-foot p{color:var(--ink-dim);font-weight:500}
.hero-cta{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  padding:12px 20px;white-space:nowrap;
}
.hero-cta:hover{text-decoration:none;outline:1px solid var(--ink);outline-offset:3px}

/* ── generic section chrome ─────────────────────────────────── */
.sec{
  position:relative;
  padding:14vh var(--gutter) 12vh;
  border-top:1px solid var(--hair-strong);
}
.sec-head{position:relative;z-index:2}
.sec-index{
  position:absolute;top:4vh;right:var(--gutter);z-index:2;
  font-size:clamp(6rem,18vw,17rem);
  font-weight:900;letter-spacing:-.06em;line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px var(--hair-strong);
  pointer-events:none;user-select:none;
}
.sec-label{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:2.4rem;
  display:inline-block;
  border-bottom:2px solid var(--ink);
  padding-bottom:8px;
}
.sec-title{
  font-size:clamp(1.7rem,4.2vw,3.6rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.05;text-transform:uppercase;
  max-width:16ch;
  margin-bottom:3rem;
}
.sec-note{font-size:.8rem;color:var(--ink-dim);font-weight:500;max-width:52ch}

/* ── 01 practice ────────────────────────────────────────────── */
.practice-body{
  display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);
  max-width:1200px;
}
.practice-body .lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:500;line-height:1.5;
}
.practice-body p:not(.lead){
  font-size:.95rem;color:var(--ink-dim);line-height:1.65;
  border-left:2px solid var(--ink);padding-left:20px;align-self:start;
}
@media (max-width:860px){.practice-body{grid-template-columns:1fr}}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:8vh;border:1px solid var(--hair-strong);
}
.stat{padding:22px 20px 26px;border-left:1px solid var(--hair-strong)}
.stat:first-child{border-left:none}
.stat dt{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.stat dd{font-size:clamp(2rem,4.4vw,3.8rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:none}
  .stat:nth-child(n+3){border-top:1px solid var(--hair-strong)}
}

/* ── 02 index of works ──────────────────────────────────────── */
.index-sec{padding-bottom:0}
.stage{
  position:absolute;inset:0;z-index:0;
  visibility:hidden;
}
.stage.on{visibility:visible}
.stage-art{position:absolute;inset:0}
.stage-art svg{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;
}
.stage-cover{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.stage-cover .slab{
  background:var(--paper);
  transform:scaleY(1);transform-origin:top;
  transition:transform .5s var(--cut);
}
.stage-cover .slab:nth-child(2){transition-delay:.05s}
.stage-cover .slab:nth-child(3){transition-delay:.1s}
.stage-cover .slab:nth-child(4){transition-delay:.15s}
.stage-cover .slab:nth-child(5){transition-delay:.2s}
.stage-cover .slab:nth-child(6){transition-delay:.25s}
.stage.on .stage-cover .slab{transform:scaleY(0)}

.index-table{position:relative;z-index:1;margin-top:4vh;border-top:1px solid var(--hair-strong)}
.index-head,.row{
  display:grid;
  grid-template-columns:minmax(3.2rem,1fr) 4fr 3fr 3fr 1.4fr 1.6fr;
  gap:12px;align-items:baseline;
  padding:0 4px;
}
.index-head{
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);
  padding-top:10px;padding-bottom:10px;
  border-bottom:1px solid var(--hair-strong);
}
.row{
  width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--hair-strong);
  font:inherit;color:inherit;cursor:pointer;
  padding-top:clamp(14px,2vh,22px);padding-bottom:clamp(14px,2vh,22px);
  transition:opacity .3s var(--cut);
}
.row .r-no{font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums}
.row .r-name{
  font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.05rem,2.1vw,1.7rem);line-height:1.05;
}
.row .r-prog,.row .r-loc{font-size:.82rem;color:var(--ink-dim);font-weight:500}
.row .r-year{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
.row .r-status{
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  justify-self:start;border:1px solid var(--ink);padding:4px 8px;
}
.index-table.open .row{opacity:.22}
.index-table.open .row.active{opacity:1;background:var(--ink);color:var(--paper)}
.row.active .r-prog,.row.active .r-loc{color:var(--paper)}
.row.active .r-status{border-color:var(--paper)}
.row:focus-visible{outline-offset:-2px}
.row.active:focus-visible{outline-color:var(--paper)}
@media (max-width:860px){
  .index-head{display:none}
  .index-head ~ .row,.row{
    grid-template-columns:2.6rem 1fr auto;
    grid-template-areas:"no name year" "no meta status";
    row-gap:6px;
  }
  .r-no{grid-area:no}.r-name{grid-area:name}.r-year{grid-area:year}
  .r-prog{grid-area:meta}.r-status{grid-area:status;justify-self:end}
  .r-loc{display:none}
}
.index-caption{
  position:relative;z-index:1;
  min-height:4.4rem;display:flex;align-items:center;
  font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-dim);
  padding:16px 4px;
}
.noscript-note{padding:24px 4px;font-size:.9rem;color:var(--ink-dim)}

/* elevation drawing text */
.stage-art text{
  font-family:var(--font-narrow);
  letter-spacing:.08em;
}

/* ── 03 method ──────────────────────────────────────────────── */
.method-list{
  list-style:none;
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--hair-strong);border-left:1px solid var(--hair-strong);
  max-width:1200px;
}
.method-item{
  display:flex;gap:20px;
  padding:clamp(20px,3vw,40px);
  border-right:1px solid var(--hair-strong);border-bottom:1px solid var(--hair-strong);
}
.mi-no{
  font-size:clamp(2.4rem,4.5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:.9;
}
.method-item h3{
  font-size:.8rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:10px;border-bottom:2px solid var(--ink);display:inline-block;padding-bottom:6px;
}
.method-item p{font-size:.9rem;color:var(--ink-dim);line-height:1.6}
@media (max-width:820px){.method-list{grid-template-columns:1fr}}

/* ── 04 rfp (inverted) ──────────────────────────────────────── */
.rfp{background:var(--ink);color:var(--paper);border-top:none}
.rfp ::selection{background:var(--paper);color:var(--ink)}
.sec-index-inv{-webkit-text-stroke:1px rgba(229,227,222,.3)}
.sec-label-inv{border-bottom-color:var(--paper)}
.rfp-inner{max-width:1100px}
.rfp-title{
  font-size:clamp(2rem,5vw,4.2rem);
  font-weight:900;letter-spacing:-.04em;line-height:1;text-transform:uppercase;
  margin-bottom:2rem;
}
.rfp-sub{max-width:62ch;font-size:.95rem;line-height:1.65;color:#b9b7b1;margin-bottom:5vh}
.rfp-form{
  display:grid;grid-template-columns:1fr 1fr;gap:28px var(--gutter);
}
.ff{display:flex;flex-direction:column;gap:8px}
.ff-wide{grid-column:1/-1}
.ff label{font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#b9b7b1}
.ff input,.ff select,.ff textarea{
  background:transparent;border:0;border-bottom:1px solid rgba(229,227,222,.4);
  color:var(--paper);font:inherit;font-weight:500;
  padding:10px 2px;
}
.ff select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--paper) 50%),linear-gradient(-45deg,transparent 49%,var(--paper) 50%);background-position:calc(100% - 14px) 55%,calc(100% - 8px) 55%;background-size:6px 6px;background-repeat:no-repeat;cursor:pointer}
.ff select option{color:var(--ink);background:var(--paper)}
.ff input::placeholder,.ff textarea::placeholder{color:#7a7873}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-bottom:2px solid var(--paper);padding-bottom:9px}
.ff textarea{resize:vertical;min-height:96px}
.rfp-submit{
  grid-column:1/-1;justify-self:start;
  background:var(--paper);color:var(--ink);
  border:0;font:inherit;font-weight:800;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;
  padding:18px 36px;cursor:pointer;
  transition:transform .18s var(--cut);
}
.rfp-submit:hover{transform:translate(4px,-4px);outline:1px solid var(--paper);outline-offset:0}
.rfp-submit:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.rfp-confirm{grid-column:1/-1;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;min-height:1.4em}
@media (max-width:720px){.rfp-form{grid-template-columns:1fr}}

/* ── footer ─────────────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--hair-strong);
  padding:8vh var(--gutter) 4vh;
  background:var(--paper);
}
.footer-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);
  font-size:.82rem;line-height:1.7;font-weight:500;
  margin-bottom:6vh;
}
.footer-grid a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.footer-fine{font-size:.72rem;color:var(--ink-dim);border-top:1px solid var(--hair);padding-top:16px}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr}}

/* ── guide page ─────────────────────────────────────────────── */
.guide-body{
  position:relative;z-index:1;
  max-width:820px;margin:0 auto;
  padding:12vh var(--gutter) 10vh;
}
.guide-body .back{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ink);padding:10px 16px;margin-bottom:6vh;
}
.guide-body .back:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.guide-body h1{
  font-size:clamp(2.2rem,6vw,4rem);font-weight:900;letter-spacing:-.04em;
  line-height:1;text-transform:uppercase;margin-bottom:2rem;
}
.guide-body h2{
  font-size:1rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  margin:3.4rem 0 1rem;border-bottom:2px solid var(--ink);display:inline-block;display:table;padding-bottom:8px;
}
.guide-body p,.guide-body li{font-size:.95rem;line-height:1.7;color:var(--ink-dim)}
.guide-body p strong,.guide-body li strong{color:var(--ink)}
.guide-body ul,.guide-body ol{padding-left:1.3em;display:grid;gap:.5em;margin:.6em 0}
.guide-body code{
  font-family:ui-monospace,Menlo,monospace;font-size:.85em;
  background:rgba(20,20,20,.07);padding:2px 6px;
}
.guide-body a{text-decoration:underline;text-underline-offset:3px}

/* ── 404 ────────────────────────────────────────────────────── */
.lost{
  min-height:100svh;position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0 var(--gutter);
}
.lost-code{
  font-size:clamp(7rem,30vw,24rem);font-weight:900;letter-spacing:-.06em;line-height:.85;
}
.lost h1{
  font-size:clamp(1.2rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  margin:2rem 0 1rem;
}
.lost p{color:var(--ink-dim);max-width:44ch;margin-bottom:2.4rem}
.lost-cta{
  background:var(--ink);color:var(--paper);
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:14px 26px;
}
.lost-cta:hover{text-decoration:none;outline:1px solid var(--ink);outline-offset:3px}
.lost-svg{position:fixed;right:0;bottom:0;width:min(60vw,760px);height:auto;z-index:0;pointer-events:none}

/* ── reduced motion: static but complete ────────────────────── */
@media (prefers-reduced-motion:reduce){
  .rv,.rv-slab{opacity:1;transform:none;transition:none;clip-path:none}
  .stage-cover{display:none}
  .hc-wipe{display:none}
  .row,.skip,.rfp-submit{transition:none}
  .index-table.open .row{opacity:.35}
}