/* ============================================================
   MAISON ARTC — production stylesheet
   Design system (Stage 5) · Motion (Stage 6) · refined (Stage 8)
   Launch pass (Stage 9): owned voice · Moroccan identity ·
   storytelling · no placeholders · nav / mobile / a11y / perf
   ============================================================ */
:root{
  --ground:#F2EEE7; --paper:#F6F3EC;
  --ink:#191512; --ink-secondary:#463F37; --ink-muted:#5E5449;
  --hairline:rgba(169,70,27,.28); --hairline-strong:rgba(120,108,92,.5);
  --selection:#E3D9C6; --nocturne:#14110E; --nocturne-ink:#EDE7DB;

  /* Moroccan accent — Marrakech clay / saffron. A signal, never decoration. */
  --clay:#A9461B; --saffron:#C4841F; --indigo:#274156;
  --accent:var(--clay);

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-micro:"Inter",system-ui,-apple-system,sans-serif;

  --t-display-xl:clamp(2.5rem,6vw,5.5rem);
  --t-display-l:clamp(2rem,4.5vw,4rem);
  --t-headline:clamp(1.5rem,3vw,2.5rem);
  --t-title:clamp(1.25rem,2vw,1.5rem);
  --t-body-l:1.25rem; --t-body:1.125rem;
  --t-caption:.8125rem; --t-label:.6875rem;

  --lh-display:1.06; --lh-heading:1.15; --lh-body:1.6;
  --track-display:-.02em; --track-label:.14em;

  --space-5:24px; --space-6:40px; --space-7:64px;
  --space-8:104px; --space-9:168px; --space-10:272px;

  --margin:clamp(28px,8vw,160px); --gutter:32px;
  --container-max:1680px; --reading-max:64ch;

  --dur-micro:200ms; --dur-enter:900ms; --dur-exit:400ms;
  --reveal-rise:24px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
}

*{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--selection);color:var(--ink)}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--font-display);font-size:var(--t-body);
  line-height:var(--lh-body);overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:multiply;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
main{position:relative;z-index:2}

/* ---- micro type ---- */
.label{font-family:var(--font-micro);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--ink-muted);font-weight:500}
.caption{font-family:var(--font-micro);font-size:var(--t-caption);
  letter-spacing:.02em;color:var(--ink-muted)}
[lang="ar"]{font-family:"Noto Naskh Arabic",var(--font-display);}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:var(--ground);
  padding:12px 20px;font-family:var(--font-micro);font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase}
.skip:focus{left:var(--margin)}

/* ============================================================
   HEADER + INDEX
   ============================================================ */
.header{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-5) var(--margin);mix-blend-mode:multiply;
  transition:padding var(--dur-exit) var(--ease-out)}
/* paper scrim — keeps the wordmark legible over any content as it scrolls beneath */
.header::before{content:"";position:absolute;inset:0;bottom:auto;height:200%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,var(--ground) 12%,rgba(242,238,231,.78) 46%,transparent);
  opacity:0;transition:opacity var(--dur-exit) var(--ease-out)}
.header.scrolled{mix-blend-mode:normal;padding-top:16px;padding-bottom:16px}
.header.scrolled::before{opacity:1}
.header.nocturne{mix-blend-mode:normal;color:var(--nocturne-ink)}
.wordmark{font-family:var(--font-display);font-weight:400;
  font-size:1.375rem;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase}
.wordmark .x{font-style:italic;font-weight:500;color:var(--accent)}
.index-btn{font-family:var(--font-micro);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:var(--track-label);
  color:inherit;cursor:pointer;background:none;border:0;position:relative;padding:6px 0}
.index-btn::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width var(--dur-micro) var(--ease-out)}
.index-btn:hover::after,.index-btn:focus-visible::after{width:100%}

.index{position:fixed;inset:0;z-index:60;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;padding:var(--margin);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity var(--dur-exit) var(--ease-in),transform var(--dur-exit) var(--ease-in),visibility 0s linear var(--dur-exit)}
.index.open{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out),visibility 0s}
.index .index-close{position:absolute;top:var(--space-5);right:var(--margin);color:var(--ink)}
.index nav{display:flex;flex-direction:column;gap:clamp(6px,1.6vh,18px)}
.index nav a{font-family:var(--font-display);font-size:var(--t-display-l);
  line-height:1.05;letter-spacing:var(--track-display);color:var(--ink);
  width:max-content;opacity:.35;transform:translateY(16px);
  transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
.index.open nav a{transform:none}
.index nav a:hover,.index nav a[aria-current="page"]{opacity:1}
.index nav a[aria-current="page"]{color:var(--accent)}
.index nav a small{font-family:var(--font-micro);font-size:var(--t-label);
  letter-spacing:var(--track-label);text-transform:uppercase;vertical-align:super;margin-left:1rem;opacity:.6}
.index .index-foot{position:absolute;bottom:var(--space-6);left:var(--margin);display:flex;gap:14px;align-items:baseline}
.index .index-foot [lang="ar"]{opacity:.7}

/* ============================================================
   ORNAMENT — zellige eight-point star (khatim). Used sparingly.
   ============================================================ */
.ornament{display:flex;align-items:center;justify-content:center;gap:22px;
  padding:var(--space-8) 0;color:var(--accent)}
.ornament::before,.ornament::after{content:"";height:1px;width:min(15vw,120px);
  background:linear-gradient(to var(--dir,right),transparent,var(--hairline))}
.ornament::after{--dir:left}
.ornament svg{width:20px;height:20px;opacity:.9;flex:none}

/* ============================================================
   REVEAL — progressive enhancement, no flash of empty page
   ============================================================ */
.reveal{transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);
  transition-delay:var(--d,0ms)}
html.js .reveal{opacity:0;transform:translateY(var(--reveal-rise));will-change:opacity,transform}
html.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   PLATES — art-directed image frames
   ============================================================ */
.plate{position:relative;overflow:hidden;background:var(--paper)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.plate.pos-top img{object-position:center top}
.plate.pos-high img{object-position:center 30%}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
  opacity:.08;mix-blend-mode:overlay}
.plate .plate-note{position:absolute;left:12px;bottom:10px;z-index:3;
  font-family:var(--font-micro);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.plate.on-light .plate-note{color:rgba(25,21,18,.4)}
/* signature reveal for full-bleed frames — a slow settle of scale */
html.js .plate.settle img{transform:scale(1.06);transition:transform 1400ms var(--ease-out)}
html.js .plate.settle.in img{transform:scale(1)}

/* ============================================================
   LINKS / BUTTONS
   ============================================================ */
.enter-link{font-family:var(--font-micro);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ink);position:relative;display:inline-block;padding-bottom:5px;
  background:none;border:0;cursor:pointer}
.enter-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--hairline)}
.enter-link::before{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);
  transition:width var(--dur-micro) var(--ease-out);z-index:1}
.enter-link:hover::before,.enter-link:focus-visible::before{width:100%}

.enquire{display:inline-block;font-family:var(--font-micro);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ink);border:1px solid var(--hairline);padding:16px 28px;cursor:pointer;
  background:none;transition:border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.enquire:hover,.enquire:focus-visible{border-color:var(--accent);color:var(--accent)}

/* ============================================================
   SHARED LAYOUT ATOMS
   ============================================================ */
.pagehead{padding:32vh var(--margin) var(--space-9);max-width:var(--container-max);margin:0 auto}
.pagehead .kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--space-6)}
.pagehead .kicker::before{content:"";width:26px;height:1px;background:var(--accent)}
.pagehead h1{font-family:var(--font-display);font-weight:300;font-size:var(--t-display-xl);
  line-height:var(--lh-display);letter-spacing:var(--track-display);max-width:18ch}
.pagehead h1 em{font-style:italic}
.pagehead .lede{margin-top:var(--space-7);max-width:var(--reading-max);color:var(--ink-secondary);font-size:var(--t-body-l)}
.pagehead .lede em{font-style:italic}

.section{padding:var(--space-9) var(--margin);max-width:var(--container-max);margin:0 auto}
.pause{height:var(--space-10)}

/* editorial */
.editorial{max-width:var(--reading-max)}
.editorial p{color:var(--ink-secondary);margin-bottom:var(--space-6)}
.editorial p:first-of-type{font-size:var(--t-body-l);color:var(--ink)}
.pullquote{font-family:var(--font-display);font-weight:300;font-size:var(--t-display-l);
  line-height:1.12;letter-spacing:-.015em;margin:var(--space-8) 0;max-width:20ch}
.pullquote em{font-style:italic;color:var(--accent)}

/* two-up */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,120px);align-items:center}
.split.reverse{grid-template-columns:.9fr 1.1fr}
.split .col-text{max-width:42ch}
.split h2{font-family:var(--font-display);font-weight:300;font-size:var(--t-headline);
  line-height:var(--lh-heading);letter-spacing:-.01em;margin-bottom:var(--space-5)}
.split p{color:var(--ink-secondary);margin-bottom:var(--space-5)}

/* gallery — composed, asymmetric */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter) var(--gutter);row-gap:var(--space-8)}
.gallery figure{position:relative}
.gallery figcaption{margin-top:var(--space-5);display:flex;justify-content:space-between;gap:16px}
.g-wide{grid-column:span 12}
.g-half{grid-column:span 6}
.g-l{grid-column:1 / span 7}
.g-r{grid-column:8 / span 5;align-self:end}
.g-offset{grid-column:3 / span 8}

/* pieces index — sequence, not shop grid */
.pieces-list{display:flex;flex-direction:column;gap:var(--space-10)}
.piece-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,120px);align-items:center}
.piece-row:nth-child(even){grid-template-columns:1fr 1fr}
.piece-row:nth-child(even) .piece-media{order:2}
.piece-media .plate{aspect-ratio:4/5}
.piece-meta .p-name{font-family:var(--font-display);font-weight:300;font-size:var(--t-title);margin-bottom:var(--space-5)}
.piece-meta .p-line{color:var(--ink-secondary);margin-bottom:var(--space-6);max-width:34ch}

/* provenance placard */
.placard dl{border-top:1px solid var(--hairline)}
.placard .row{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.placard dt{font-family:var(--font-micro);font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ink-muted)}
.placard dd{font-family:var(--font-micro);font-size:var(--t-caption);color:var(--ink-secondary);font-variant-numeric:tabular-nums;text-align:right}

/* archive — the single humble grid */
.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}
.archive-grid figure{opacity:.72;transition:opacity var(--dur-micro) var(--ease-out)}
.archive-grid figure:hover{opacity:1}
.archive-grid .plate{aspect-ratio:4/5}
.archive-grid figcaption{margin-top:14px}
.archive-grid .a-status{color:var(--accent)}

/* film */
.film-hero{position:relative}
.film-hero .plate{width:100%;aspect-ratio:16/9}
.film-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--font-micro);font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--track-label);gap:12px;
  background:none;border:0;cursor:pointer;text-shadow:0 1px 24px rgba(0,0,0,.5)}
.film-play .disc{width:64px;height:64px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
  display:grid;place-items:center;transition:transform var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out)}
.film-play:hover .disc,.film-play:focus-visible .disc{transform:scale(1.06);background:rgba(255,255,255,.08)}

/* forms */
.form{max-width:640px}
.field{margin-bottom:var(--space-7)}
.field label{display:block;margin-bottom:12px}
.field input,.field textarea,.field select{width:100%;background:none;border:0;border-bottom:1px solid var(--hairline);
  font-family:var(--font-micro);font-size:var(--t-body);color:var(--ink);padding:10px 0;min-height:44px}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field .hint{margin-top:8px}
.submit{margin-top:var(--space-5)}
.form-note{margin-top:var(--space-6)}
.confirm{display:none;font-family:var(--font-display);font-weight:300;font-size:var(--t-headline);line-height:var(--lh-heading);max-width:22ch}
.confirm.show{display:block}
.form.sent{display:none}

/* inline newsletter (home) */
.inv-form{display:flex;align-items:center;gap:16px;width:min(460px,86vw);border-bottom:1px solid var(--hairline);padding-bottom:10px}
.inv-form input{flex:1;background:none;border:0;font-family:var(--font-micro);font-size:var(--t-body);color:var(--ink);padding:6px 0;min-height:44px}
.inv-form input::placeholder{color:var(--ink-muted)}
.inv-form input:focus{outline:none}
.inv-form:focus-within{border-color:var(--accent)}
.inv-form button{background:none;border:0;cursor:pointer;color:var(--ink);font-family:var(--font-micro);
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--track-label)}

/* ============================================================
   HOMEPAGE MOVEMENTS
   ============================================================ */
.threshold{min-height:100svh;display:grid;grid-template-columns:1.02fr minmax(auto,46vw);
  align-items:center;gap:clamp(32px,5vw,90px);padding:16vh var(--margin) var(--space-8);position:relative}
.threshold-word{max-width:17ch}
.threshold-word .kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--space-6)}
.threshold-word .kicker::before{content:"";width:26px;height:1px;background:var(--accent)}
.threshold-word h1{font-family:var(--font-display);font-weight:300;font-size:clamp(3.25rem,7vw,6.5rem);
  line-height:1.02;letter-spacing:var(--track-display)}
.threshold-word h1 em{font-style:italic}
.threshold-word .lede{margin-top:var(--space-6);max-width:40ch;color:var(--ink-secondary);font-size:var(--t-body-l)}
.threshold-word .lede em{font-style:italic}
.threshold .plate{aspect-ratio:3/4;width:100%;max-height:84vh}
.scrollcue{position:absolute;left:var(--margin);bottom:var(--space-6);display:flex;align-items:center;gap:12px}
.scrollcue .line{width:64px;height:1px;background:var(--accent);opacity:.5;transform-origin:left;animation:breathe 3.4s var(--ease-out) infinite}
.scrollcue .label{color:var(--ink-muted)}
@keyframes breathe{0%,100%{transform:scaleX(.4);opacity:.3}50%{transform:scaleX(1);opacity:.6}}

.firstimage{position:relative}
.firstimage .plate{width:100vw;height:100svh}
.firstimage .caption{position:absolute;left:var(--margin);bottom:var(--space-6);z-index:3;color:rgba(255,255,255,.82);max-width:34ch}
/* scrim so captions over imagery always pass contrast */
.firstimage .plate::before{content:"";position:absolute;inset:auto 0 0 0;height:40%;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(15,12,9,.5),transparent)}

.maker{padding:var(--space-10) var(--margin);display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,120px);align-items:center;max-width:var(--container-max);margin:0 auto}
.maker .plate{aspect-ratio:4/5}
.maker .maker-text{max-width:40ch}
.maker .maker-text h2{font-family:var(--font-display);font-weight:300;font-size:var(--t-headline);
  line-height:var(--lh-heading);letter-spacing:-.01em;margin-bottom:var(--space-5)}
.maker .maker-text p{color:var(--ink-secondary);margin-bottom:var(--space-5);max-width:var(--reading-max)}
.maker .kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--space-6)}
.maker .kicker::before{content:"";width:26px;height:1px;background:var(--accent)}

.artefact{padding:var(--space-9) var(--margin)}
.artefact .arte-inner{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(40px,6vw,110px);
  align-items:center;max-width:var(--container-max);margin:0 auto}
.artefact .plate{aspect-ratio:4/5}
.arte-name{font-family:var(--font-display);font-weight:300;font-size:var(--t-title);margin-bottom:var(--space-6);line-height:1.2}
.arte-kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:var(--space-6)}
.arte-kicker::before{content:"";width:26px;height:1px;background:var(--accent)}

.culture{padding:var(--space-9) var(--margin);max-width:var(--container-max);margin:0 auto}
.culture .plate{aspect-ratio:3/2;margin-bottom:var(--space-7)}
.culture .cul-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);align-items:end}
.culture h2{font-family:var(--font-display);font-weight:300;font-size:var(--t-display-l);line-height:1.08;letter-spacing:-.015em}
.culture .cul-meta{margin-bottom:var(--space-5)}
.culture p{color:var(--ink-secondary);max-width:46ch;margin:var(--space-5) 0}

.invitation{padding:var(--space-10) var(--margin);text-align:center;display:flex;flex-direction:column;align-items:center}
.invitation .inv-lead{font-family:var(--font-display);font-weight:300;font-size:var(--t-display-l);
  line-height:1.1;letter-spacing:-.015em;max-width:18ch;margin-bottom:var(--space-6)}
.invitation .inv-lead em{font-style:italic;color:var(--accent)}
.invitation h2{font-family:var(--font-display);font-weight:300;font-size:var(--t-headline);
  line-height:var(--lh-heading);max-width:20ch;margin-bottom:var(--space-7)}
.invitation em{font-style:italic}
.inv-paths{margin-top:var(--space-8);display:flex;gap:var(--space-7);flex-wrap:wrap;justify-content:center}

/* ============================================================
   COLOPHON — now a real sitemap
   ============================================================ */
.colophon{padding:var(--space-9) var(--margin) var(--space-7);border-top:1px solid var(--hairline);position:relative;z-index:2}
.colophon .col-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-7);align-items:start}
.colophon .wordmark{font-size:1.125rem;display:inline-block;margin-bottom:var(--space-6)}
.colophon .col-say{color:var(--ink-secondary);max-width:32ch;font-size:var(--t-body)}
.colophon .col-col h4{font-family:var(--font-micro);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--ink-muted);font-weight:500;margin-bottom:var(--space-5)}
.colophon .col-col a{display:block;padding:7px 0;font-family:var(--font-micro);font-size:var(--t-caption);
  letter-spacing:.02em;color:var(--ink-secondary);position:relative;width:max-content}
.colophon .col-col a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--accent);transition:width var(--dur-micro) var(--ease-out)}
.colophon .col-col a:hover::after,.colophon .col-col a:focus-visible::after{width:100%}
.colophon .col-bottom{display:flex;justify-content:space-between;margin-top:var(--space-9);flex-wrap:wrap;gap:16px;align-items:baseline}
.colophon .col-bottom [lang="ar"]{opacity:.8}

/* ============================================================
   404
   ============================================================ */
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--margin);position:relative}
.notfound .plate{position:absolute;inset:0;z-index:-1}
.notfound .plate::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,17,14,.4),rgba(20,17,14,.65))}
.notfound .plate img{filter:grayscale(.2) brightness(.85)}
.notfound .nf-inner{position:relative;z-index:2;color:#fff}
.notfound h1{font-family:var(--font-display);font-weight:300;font-size:var(--t-display-l);line-height:1.1;margin-bottom:var(--space-7)}
.notfound .enter-link{color:#fff}
.notfound .enter-link::after{background:rgba(255,255,255,.4)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .archive-grid{grid-template-columns:repeat(3,1fr)}
  .colophon .col-top{grid-template-columns:1fr 1fr}
  .colophon .col-say{grid-column:1 / -1;margin-bottom:var(--space-6)}
}
@media (max-width:900px){
  .threshold{grid-template-columns:1fr;padding-top:22vh;gap:var(--space-7);min-height:auto}
  .threshold-word h1{font-size:clamp(2.75rem,12vw,4rem)}
  .threshold-word{max-width:22ch}
  .threshold .plate{aspect-ratio:4/5;max-width:none;max-height:none}
  .maker,.artefact .arte-inner,.culture .cul-grid,.split,.split.reverse,.piece-row,.cul-grid{grid-template-columns:1fr !important;gap:var(--space-7)}
  .maker .plate,.artefact .plate{max-width:78vw}
  .piece-row:nth-child(even) .piece-media{order:0}
  .split .col-text,.maker .maker-text{max-width:none}
  .g-l,.g-r,.g-offset,.g-half{grid-column:1 / -1}
  .archive-grid{grid-template-columns:repeat(2,1fr)}
  .pagehead{padding-top:26vh}
  .index nav a{font-size:clamp(1.75rem,7vw,2.5rem)}
  /* On small screens the header always carries its scrim — no blend collisions. */
  .header{mix-blend-mode:normal}
  .header::before{opacity:1}
  .ornament{padding:var(--space-7) 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .plate.settle img{transform:none;transition:none}
  .scrollcue .line{animation:none}
  .film-play:hover .disc{transform:none}
}