/* ============================================================================
   ART STORE 613 — design system

   One rule governs everything below: the artwork is never cropped, stretched
   or forced into a shape. Where cards need a common rhythm they get a common
   *stage* — a neutral area of fixed height — and the work sits inside it at
   its own proportion. The build gate rejects this file if it ever contains a
   rule that fills a box by cropping.

   The accent colours are sampled from the artist's own logo
   (navy #000060, cyan #00ccfc). Nothing here is an invented brand colour.
   ========================================================================= */

:root{
  /* ── surface ───────────────────────────────────────────────────────── */
  --paper:#faf8f5;
  --paper-2:#f2eee7;
  --stage:#f4f1ea;          /* neutral ground behind an artwork */
  --dark:#14131a;
  --ink:#16151c;
  --ink-soft:#5e5b56;
  --ink-faint:#8b8781;

  /* ── his marks ─────────────────────────────────────────────────────── */
  --navy:#000060;
  --cyan:#00ccfc;
  --line:rgba(22,21,28,.11);
  --line-2:rgba(22,21,28,.06);

  /* ── type ──────────────────────────────────────────────────────────── */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --t-display:clamp(2.4rem,6.4vw,5.2rem);
  --t-h1:clamp(2rem,4.4vw,3.4rem);
  --t-h2:clamp(1.35rem,2.6vw,1.95rem);
  --t-h3:1.22rem;
  --t-lede:clamp(1rem,1.35vw,1.16rem);
  --t-body:1rem;
  --t-cap:.82rem;
  --t-micro:.68rem;
  --track:.2em;             /* letterspacing for small caps labels */

  /* ── measure ───────────────────────────────────────────────────────── */
  --page:1320px;
  --prose:66ch;
  --gut:clamp(1.15rem,4vw,3.4rem);
  --sec:clamp(3.2rem,8vw,6.5rem);
  --sec-tight:clamp(2rem,5vw,3.6rem);

  /* ── motion ────────────────────────────────────────────────────────── */
  --dur-1:420ms;
  --dur-2:680ms;
  --dur-3:900ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-body)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

/* ── shared type ─────────────────────────────────────────────────────── */
.eyebrow{
  font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.1rem;font-weight:500;
}
.eyebrow a{color:var(--ink-soft);border-bottom:1px solid transparent;transition:border-color var(--dur-1)}
.eyebrow a:hover{border-color:var(--cyan)}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.012em;margin:0}
h1{font-size:var(--t-h1);line-height:1.08}
h2{font-size:var(--t-h2);line-height:1.15}
h3{font-size:var(--t-h3);font-weight:500;line-height:1.3}
.lede{font-size:var(--t-lede);color:var(--ink-soft);max-width:58ch;margin:1.2rem 0 0;line-height:1.6}
.fine{font-size:var(--t-cap);color:var(--ink-faint);line-height:1.55}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec-tight{padding-block:var(--sec-tight)}
.rule{border:0;border-top:1px solid var(--line);margin:0}

.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem 2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line);
  margin-bottom:var(--sec-tight)}
.sechead h2{flex:1}
.sechead .more{font-size:var(--t-micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
  border-bottom:1px solid transparent;transition:color var(--dur-1),border-color var(--dur-1)}
.sechead .more:hover{color:var(--ink);border-color:var(--cyan)}

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:.9rem var(--gut);
  background:rgba(250,248,245,.86);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line-2);
  transition:border-color var(--dur-1),background var(--dur-1);
}
.nav.scrolled{border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.85rem;flex-shrink:0}
.brand img{height:38px;width:auto}
.brand .who{
  font:400 var(--t-micro)/1.35 var(--sans);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-soft);
  padding-left:.85rem;border-left:1px solid var(--line);
}
.nav nav{display:flex;gap:clamp(.9rem,2vw,1.9rem);font-size:var(--t-micro);
  letter-spacing:var(--track);text-transform:uppercase}
.nav nav a{color:var(--ink-soft);padding-block:.35rem;position:relative;transition:color var(--dur-1)}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-1) var(--ease)}
.nav nav a:hover{color:var(--ink)}
.nav nav a:hover::after,.nav nav a[aria-current]::after{transform:scaleX(1)}
.nav nav a[aria-current]{color:var(--ink)}
.navtoggle{display:none;background:0;border:0;padding:.4rem;cursor:pointer}
.navtoggle span{display:block;width:22px;height:1px;background:var(--ink);margin:5px 0;
  transition:transform var(--dur-1) var(--ease),opacity var(--dur-1)}

/* ── the artwork stage — the heart of the whole system ───────────────── */
/* A stage is a fixed-height neutral area. The work is centred inside it at
   its own intrinsic proportion. It is never scaled to fill.               */
.stage{
  display:grid;place-items:center;background:var(--stage);
  overflow:hidden;position:relative;
}
.stage img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;                 /* the only fit mode used anywhere */
  transition:transform var(--dur-3) var(--ease),opacity var(--dur-2);
}
.stage::after{                        /* the light that moves, not the work */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 58%);
  transform:translateX(-120%);transition:transform var(--dur-3) var(--ease);
}
a:hover>.stage::after,.card:hover .stage::after{transform:translateX(120%)}

/* ── work grid ───────────────────────────────────────────────────────── */
.grid{
  display:grid;gap:clamp(1.6rem,3vw,2.6rem) clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
}
.grid.dense{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.card{display:block;position:relative;min-width:0}
/* a long title must wrap inside its card, never push the grid sideways */
.cap .t,.cap .m,.cyc .cn{overflow-wrap:anywhere}
.card .stage{height:clamp(190px,20vw,270px);padding:clamp(.5rem,1.4vw,1.1rem)}
.card .stage img{box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 26px -14px rgba(0,0,0,.34)}
.card:hover .stage img{transform:scale(1.022)}
.cap{padding-top:.85rem}
.cap .t{display:block;font:400 1.03rem/1.28 var(--serif)}
.cap .m{display:block;font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.35rem}
.cap .m .sep{opacity:.45;margin-inline:.45em}

/* ── cycle tiles ─────────────────────────────────────────────────────── */
.cycgrid{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.cyc{position:relative;display:block;background:var(--paper-2);overflow:hidden}
/* padding belongs to the stage, never to the <img> — padding on the image
   changes its rendered box and the ratio guard rightly rejects that */
.cyc .stage{height:clamp(180px,17vw,230px);background:var(--paper-2);
  padding:1.1rem 1.1rem 3.6rem}
.cyc .meta{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;
  background:linear-gradient(to top,rgba(20,19,26,.9),rgba(20,19,26,.55) 55%,transparent);
  color:#fff}
.cyc .cn{display:block;font:400 1.16rem/1.15 var(--serif)}
.cyc .cc{display:block;font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:.3rem}
.cyc .stage img{transition:transform var(--dur-3) var(--ease)}
.cyc:hover .stage img{transform:scale(1.035)}

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(3.4rem,9vw,7rem) clamp(2rem,4vw,3rem)}
.hero h1{font-size:var(--t-display);line-height:1.02;max-width:16ch}
.hero .lede{max-width:52ch;margin-top:1.8rem}
.heroband{margin-top:clamp(2.4rem,6vw,4.5rem);background:var(--dark);overflow:hidden}
.heroband img{width:100%;height:auto}
.heroband figcaption{padding:1rem var(--gut) 1.4rem;color:rgba(255,255,255,.5);
  font-size:var(--t-cap);max-width:var(--page);margin-inline:auto}

/* ── archival band (photograph + text) ───────────────────────────────── */
.band{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.band.flip>figure{order:2}
.band figure{margin:0;background:var(--stage)}
.band figure img{width:100%;height:auto}
.band figcaption{font-size:var(--t-cap);color:var(--ink-faint);padding-top:.8rem;line-height:1.5}
.band .txt p{margin:0 0 1.05rem;max-width:46ch;color:var(--ink-soft)}
.band .txt p:first-of-type{color:var(--ink)}
@media(max-width:820px){.band{grid-template-columns:1fr}.band.flip>figure{order:0}}

/* ── work detail ─────────────────────────────────────────────────────── */
.workpage{display:grid;gap:clamp(2rem,4.5vw,4rem);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;
  padding-block:clamp(1.6rem,4vw,3rem)}
.workstage{margin:0;background:var(--stage);display:grid;place-items:center;
  padding:clamp(1.2rem,3.4vw,3rem);position:sticky;top:76px}
.workstage img{max-width:100%;height:auto;object-fit:contain;
  box-shadow:0 2px 6px rgba(0,0,0,.09),0 30px 60px -30px rgba(0,0,0,.4)}
.winfo h1{margin-bottom:.55rem}
.winfo .tech{font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.8rem}
@media(max-width:900px){.workpage{grid-template-columns:1fr}.workstage{position:static}}

.lbl{font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .85rem}
.opts{display:grid;gap:.45rem;margin:0 0 1.6rem;padding:0;border:0}
.opt{display:flex;align-items:center;gap:.9rem;padding:.85rem 1.05rem;
  border:1px solid var(--line);cursor:pointer;background:transparent;
  transition:border-color var(--dur-1),background var(--dur-1)}
.opt:hover{border-color:var(--ink-soft)}
.opt input{accent-color:var(--navy);margin:0}
.opt .sz{flex:1;font-size:.94rem}
.opt .sub{display:block;font-size:var(--t-micro);color:var(--ink-faint);
  letter-spacing:.06em;margin-top:.18rem;text-transform:none}
.opt .pr{font:500 1rem var(--serif);white-space:nowrap}
.opt:has(input:checked){border-color:var(--navy);background:var(--paper-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1.05rem 2.3rem;background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  cursor:pointer;transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.reassure{font-size:var(--t-cap);color:var(--ink-faint);margin:.95rem 0 0;max-width:44ch;line-height:1.55}

/* numbered chapters on the detail page */
.chap{padding-block:var(--sec-tight);border-top:1px solid var(--line)}
.chap>.n{font-size:var(--t-micro);letter-spacing:var(--track);color:var(--cyan);
  font-weight:600;margin:0 0 .85rem}
.chap h2{margin-bottom:1.1rem}
.chap p{max-width:var(--prose);color:var(--ink-soft);margin:0 0 1rem}

/* provenance panel */
.prov{display:grid;gap:1.5rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding:clamp(1.4rem,3vw,2.2rem);background:var(--paper-2);border-left:2px solid var(--navy)}
.prov dt{font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.4rem}
.prov dd{margin:0;font:400 1.05rem/1.35 var(--serif)}

/* spec list */
.specs{list-style:none;padding:0;margin:0 0 1.9rem;font-size:.9rem}
.specs li{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.6rem 0;border-bottom:1px solid var(--line-2);color:var(--ink-soft)}
.specs li b{font-weight:500;color:var(--ink);text-align:right}

/* ── filters ─────────────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center;
  padding-block:1.1rem;border-bottom:1px solid var(--line);margin-bottom:var(--sec-tight)}
.fgroup{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.fgroup>span{font-size:var(--t-micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-faint);margin-right:.2rem}
.chip{padding:.34rem .8rem;border:1px solid var(--line);background:transparent;
  font-size:var(--t-cap);cursor:pointer;color:var(--ink-soft);
  transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1)}
.chip:hover{border-color:var(--ink-soft);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fsearch{flex:1;min-width:180px;padding:.5rem .8rem;border:1px solid var(--line);
  background:#fff;font:400 .9rem var(--sans)}
.fcount{font-size:var(--t-cap);color:var(--ink-faint);white-space:nowrap}

/* ── prose ───────────────────────────────────────────────────────────── */
.prose{max-width:var(--prose)}
.prose p{margin:0 0 1.15rem;color:var(--ink-soft)}
.prose p.first{color:var(--ink);font-size:var(--t-lede)}
.prose h3{margin:2.4rem 0 .7rem;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:500}
blockquote{font:300 clamp(1.3rem,2.4vw,1.75rem)/1.42 var(--serif);color:var(--ink);
  border-left:2px solid var(--cyan);padding-left:1.5rem;margin:2.2rem 0 .7rem;max-width:40ch}
blockquote+.fine{margin-left:1.5rem}
table{border-collapse:collapse;width:100%;max-width:34rem;margin:1.2rem 0}
th,td{text-align:left;padding:.72rem .5rem;border-bottom:1px solid var(--line);font-size:.93rem}
th{font-size:var(--t-micro);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* three editions, as chapters */
.tiers{display:grid;gap:clamp(1.4rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));margin-top:var(--sec-tight)}
.tier{padding:clamp(1.5rem,3vw,2.2rem);background:var(--paper-2);
  display:flex;flex-direction:column;gap:.85rem}
.tier.sell{background:var(--dark);color:var(--paper)}
.tier.sell h3,.tier.sell .badge{color:var(--paper)}
.tier.sell p{color:rgba(250,248,245,.72)}
.tier .badge{font-size:var(--t-micro);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--ink-faint)}
.tier.sell .badge{color:var(--cyan)}
.tier p{margin:0;font-size:.93rem;color:var(--ink-soft);line-height:1.6}
.tier ul{margin:.3rem 0 0;padding-left:1.1rem;font-size:.9rem;color:var(--ink-soft)}
.tier.sell ul{color:rgba(250,248,245,.72)}
.tier li{margin-bottom:.35rem}

/* ── exhibitions ─────────────────────────────────────────────────────── */
.exlist{display:grid;gap:clamp(2rem,4vw,3.2rem)}
.ex{display:grid;gap:clamp(1.2rem,3vw,2.4rem);grid-template-columns:minmax(0,220px) minmax(0,1fr);
  align-items:start;padding-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--line)}
.ex .yr{font:300 clamp(1.8rem,3.4vw,2.6rem)/1 var(--serif);color:var(--ink-faint)}
.ex h3{margin-bottom:.4rem}
.ex .where{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .9rem}
.ex p{margin:0 0 .9rem;color:var(--ink-soft);font-size:.94rem;max-width:52ch}
.ex figure{margin:1.1rem 0 0;background:var(--stage)}
.ex figure img{width:100%;height:auto}
.ex figcaption{font-size:var(--t-cap);color:var(--ink-faint);padding-top:.6rem}
@media(max-width:700px){.ex{grid-template-columns:1fr}}

/* ── form ────────────────────────────────────────────────────────────── */
.reqlayout{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:start}
@media(max-width:820px){.reqlayout{grid-template-columns:1fr}}
.form{display:grid;gap:1.15rem;max-width:36rem}
.form label{display:grid;gap:.4rem;font-size:var(--t-micro);letter-spacing:var(--track);
  text-transform:uppercase;color:var(--ink-faint)}
.form input,.form select,.form textarea{
  padding:.85rem .95rem;border:1px solid var(--line);background:#fff;
  font:400 .95rem var(--sans);color:var(--ink);border-radius:0;
  transition:border-color var(--dur-1)}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--navy)}
.form textarea{resize:vertical;min-height:6.5rem}
.formnote{font-size:var(--t-cap);line-height:1.55;padding:.9rem 1rem;
  border-left:2px solid var(--cyan);background:var(--paper-2);color:var(--ink-soft)}
.formnote[data-state="error"]{border-color:#c0392b}
.formnote[data-state="ok"]{border-color:#2e7d4f}
.reqpreview{background:var(--paper-2);padding:1.2rem}
.reqpreview .stage{height:230px;background:var(--stage)}
.reqpreview .t{font:400 1.1rem/1.3 var(--serif);margin:.9rem 0 .25rem}
.reqpreview .m{font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)}
.steps{list-style:none;counter-reset:s;padding:0;margin:1.6rem 0 0}
.steps li{counter-increment:s;position:relative;padding-left:2.2rem;margin-bottom:.9rem;
  font-size:.9rem;color:var(--ink-soft)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  font-size:var(--t-micro);letter-spacing:.1em;color:var(--cyan);font-weight:600}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{background:var(--dark);color:rgba(250,248,245,.62);margin-top:var(--sec);
  padding:var(--sec) 0 clamp(1.6rem,3vw,2.4rem)}
.footgrid{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(150px,1fr))}
.foot h4{font:400 var(--t-micro)/1 var(--sans);letter-spacing:var(--track);
  text-transform:uppercase;color:rgba(250,248,245,.42);margin:0 0 1.1rem;font-weight:500}
.foot a{color:rgba(250,248,245,.72);transition:color var(--dur-1)}
.foot a:hover{color:#fff}
.foot ul{list-style:none;padding:0;margin:0;font-size:.88rem;display:grid;gap:.55rem}
.foot .name{font:300 1.5rem/1.2 var(--serif);color:var(--paper);margin:0 0 .3rem}
.foot .dates{font-size:var(--t-micro);letter-spacing:var(--track);color:rgba(250,248,245,.42)}
.foot .sig{margin:1.6rem 0 0;max-width:190px;opacity:.85;filter:invert(1)}
.foot .base{margin-top:var(--sec-tight);padding-top:1.5rem;
  border-top:1px solid rgba(250,248,245,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;
  font-size:var(--t-cap);color:rgba(250,248,245,.42)}
.foot .base p{margin:0;max-width:62ch}

/* ── motion ──────────────────────────────────────────────────────────────
   Every hidden-then-revealed state is scoped to .js, which is set by an inline
   script in the head. Without JavaScript nothing is ever hidden, so the page
   can never end up blank because an observer failed to fire. */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-2) var(--ease-soft),transform var(--dur-2) var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:70ms}
.js [data-reveal][data-delay="2"]{transition-delay:140ms}
.js [data-reveal][data-delay="3"]{transition-delay:210ms}
.js [data-reveal][data-delay="4"]{transition-delay:280ms}
.js .maskreveal{clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-3) var(--ease)}
.js .maskreveal.in{clip-path:inset(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .maskreveal{clip-path:none}
  .stage::after{display:none}
  .card:hover .stage img,.cyc:hover .stage img{transform:none}
}

/* ── navigation collapse ─────────────────────────────────────────────────
   Seven items do not fit beside the mark below roughly 1040px, so the menu
   folds well before the phone breakpoint. */
@media(max-width:1040px){
  .brand .who{display:none}
  .navtoggle{display:block}
  .nav nav{
    position:fixed;inset:60px 0 auto;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1.4rem;
    clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-2) var(--ease);
  }
  .nav nav a{padding-block:.9rem;border-bottom:1px solid var(--line-2);font-size:.74rem}
  .nav nav a::after{display:none}
  .nav[data-open="true"] nav{clip-path:inset(0 0 0 0)}
  .nav[data-open="true"] .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav[data-open="true"] .navtoggle span:nth-child(2){opacity:0}
  .nav[data-open="true"] .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}

/* ── mobile art direction ────────────────────────────────────────────── */
@media(max-width:760px){
  :root{--t-micro:.66rem}
  .nav{padding-block:.7rem}
  .brand img{height:32px}
  .nav nav{inset-block-start:54px}

  .grid{grid-template-columns:repeat(2,1fr);gap:1.5rem .8rem}
  .grid.dense{grid-template-columns:repeat(2,1fr)}
  .card .stage{height:44vw}
  .cycgrid{grid-template-columns:repeat(2,1fr)}
  .cyc .stage{height:40vw}
  .workstage{padding:1rem;margin-inline:calc(var(--gut) * -1)}
  .hero h1{max-width:none}
  .prov{grid-template-columns:1fr;gap:1.1rem}
  .footgrid{grid-template-columns:1fr 1fr}
  .foot .name{font-size:1.3rem}
}
@media(max-width:400px){
  .grid,.grid.dense,.cycgrid{grid-template-columns:1fr}
  .card .stage,.cyc .stage{height:62vw}
  .footgrid{grid-template-columns:1fr}
}

/* print */
@media print{.nav,.foot,.btn,.filters{display:none}}