/* Lumina Designed. Inner pages.
   Loaded after home.css and extends it: same tokens, type roles, buttons, header, menu, reveal
   system, contact section and footer. This file only adds what Home does not have: the light page
   hero, the centred project opening, the gallery rows, the portfolio grid, ledgers, the process
   stages, questions, and legal prose. Nothing here redefines a Home rule. */

/* ---------- breadcrumbs ---------- */
.crumbs{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft)}
.crumbs li+li::before{content:"/";margin-right:.6rem;color:var(--line);opacity:1}
.crumbs a{transition:color .3s ease}
.crumbs [aria-current]{color:var(--ink)}
.on-dark .crumbs{color:rgba(255,255,255,.62)}
.on-dark .crumbs [aria-current]{color:#fff}
.on-dark .crumbs li+li::before{color:rgba(255,255,255,.3)}

/* ---------- page hero (light) ---------- */
/* Sits under the solid bar, so it clears --nav-h itself. Copy enters on load the way the Home hero
   does, without a loader: the class `ready` lands at once on these pages. */
.page-hero{padding:calc(var(--nav-h) + clamp(4rem,8vw,7rem)) 0 clamp(3rem,6vw,5.5rem)}
.page-hero .ph-a{grid-column:1/9}
.page-hero .ph-b{grid-column:9/13;align-self:end;padding-bottom:.35rem}
.page-hero h1{max-width:13ch}
.page-hero .lede{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.35;color:var(--ink-70);max-width:34ch;margin-top:1.75rem;text-wrap:pretty}
.page-hero .hero-cta{justify-content:flex-start;margin-top:2.25rem}
.page-hero .ph-note{font-size:.8125rem;line-height:1.8;color:var(--ink-70);max-width:30ch}
.page-hero .ph-note .label{display:block;margin-bottom:.75rem}
.up{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.2s var(--ease)}
/* the title and the lede of a page opening rise without fading, so the largest paint is the first paint */
.page-top h1.up,.page-hero h1.up,.page-top .lede.up,.page-hero .lede.up{opacity:1;transform:translateY(14px);transition:transform 1s var(--ease)}
html.ready .up{opacity:1;transform:none}
html:not(.js) .up{opacity:1;transform:none}

/* a full-width photograph under the hero copy, drifting */
.plate-wide{padding:0 0 calc(var(--sec) * .55)}
.plate-wide+.sec{padding-top:calc(var(--sec) * .55)}
.plate-wide .frame{aspect-ratio:16/9;overflow:hidden;background:var(--ground-2)}
.plate-wide .frame img{width:100%;height:100%;object-fit:cover}
.plate-wide.tall .frame{aspect-ratio:16/10}
.plate-wide.natural .frame{aspect-ratio:3/2}
.plate-wide .g-note{text-align:center}
.plate-pair{padding:0 0 calc(var(--sec) * .55)}
.plate-pair+.sec{padding-top:calc(var(--sec) * .55)}
.plate-pair .frame{aspect-ratio:4/5;overflow:hidden;background:var(--ground-2)}
.plate-pair .frame img,.plate-pair .frame video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- the portfolio pages open on a title alone ---------- */
/* Centred: crumbs, a small label, the name, one line. Nothing laid over a photograph. */
.page-top{padding:calc(var(--nav-h) + clamp(3.5rem,7vw,6rem)) 0 clamp(2.5rem,4.5vw,3.75rem);text-align:center}
.page-top .crumbs{justify-content:center;margin-bottom:2.25rem}
.page-top h1{margin:1.25rem auto 0;max-width:14ch}
.page-top .lede{font-family:var(--serif);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.4;color:var(--ink-70);max-width:40ch;margin:1.25rem auto 0;text-wrap:pretty}

/* ---------- gallery ---------- */
/* Every photograph before a word of copy. One row the width of the measure, then pairs of equal
   frames, tops and bottoms level, one gap everywhere. A landscape source ('land') keeps a wider
   frame; a portrait source is cropped less so the room is still the room. No captions. */
.gallery{padding:0 0 clamp(1rem,2.4vw,2.5rem)}
.gallery .g{margin-bottom:clamp(1rem,2.4vw,2.5rem)}
.gallery .frame{overflow:hidden;background:var(--ground-2);position:relative}
.gallery .frame img,.gallery .frame video{width:100%;height:100%;object-fit:cover;display:block}
.g-wide .frame{aspect-ratio:4/3}
.g-wide .frame.land{aspect-ratio:16/10}
.g-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2.5rem)}
.g-pair .frame{aspect-ratio:4/5}
.g-pair.sq .frame{aspect-ratio:1}
.g-note{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft);margin-top:.9rem}

/* ---------- the writing, after the room ---------- */
.story{padding:calc(var(--sec) * .7) 0 var(--sec);border-top:1px solid var(--line)}
.story-head{grid-column:1/-1;margin-bottom:clamp(2.5rem,5vw,4rem)}
.story-head h2{max-width:16ch}
.story-copy{grid-column:1/8}
.story-copy .serif-lede{margin-bottom:1.75rem;max-width:26ch}
.story-copy .body{max-width:56ch}
.story-facts{grid-column:9/13;align-self:start}
.story-links{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:2.25rem}
.facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.facts li{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.8125rem;line-height:1.7;color:var(--ink-70)}
.facts b{font-weight:500;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft);padding-top:.2rem}
.facts a{color:var(--ink);border-bottom:1px solid var(--brass-rule)}

/* other projects: a head, then three level frames in a row, each named and each saying it opens */
.others-head{margin-bottom:clamp(2rem,4vw,3rem);display:flex;flex-direction:column;align-items:flex-start}
.others-head h2{max-width:14ch}
.others-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.4vw,2.5rem)}
.others .frame{aspect-ratio:4/5}
.others .frame img{width:100%;height:100%;object-fit:cover}

/* ---------- portfolio ---------- */
.tabs{display:flex;justify-content:center;gap:2.75rem;border-bottom:1px solid var(--line);margin-bottom:clamp(2.5rem,5vw,4rem);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;padding:.9rem 0 1.1rem;font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);white-space:nowrap;transition:color .3s ease}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.folio{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.25rem,2.4vw,2.5rem);row-gap:clamp(2.5rem,4.5vw,4.5rem);padding-bottom:var(--sec)}
.folio-card{display:block;color:var(--ink)}
.folio-card .frame{aspect-ratio:4/5;overflow:hidden;background:var(--ground-2)}
.folio-card .frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.folio-name{margin-top:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.folio-name h2{font-size:clamp(1.5rem,2vw,1.95rem);line-height:1.15;text-wrap:balance}
.folio-name .label{font-size:.6875rem}
.folio-card:focus-visible .frame img{transform:scale(1.035)}
.folio-card[hidden]{display:none}
.folio-empty{grid-column:1/-1;font-family:var(--serif);font-size:1.5rem;color:var(--plum-soft);padding:3rem 0}

/* ---------- ledgers ---------- */
/* Editorial ledger: serif name left, quiet description right, hairline dividers. Nothing boxed. */
.defs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.defs li{display:grid;grid-template-columns:3.25rem 4fr 7fr;column-gap:clamp(1rem,2.4vw,2.5rem);padding:clamp(1.5rem,2.6vw,2.25rem) 0;border-bottom:1px solid var(--line);align-items:start}
.defs.plain li{grid-template-columns:4fr 7fr}
.defs .n{font-family:var(--serif);font-size:1.05rem;color:var(--brass);padding-top:.45rem}
.defs h3,.defs .name{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.1vw,2.1rem);line-height:1.1;color:var(--ink);letter-spacing:-.005em;margin:0}
.defs h3 em,.defs .name em{display:block;font-style:italic;font-size:.6em;color:var(--plum-soft);margin-top:.35rem}
.defs p{font-size:.9rem;line-height:1.8;color:var(--ink-70);max-width:52ch;margin:0}
.defs p+p{margin-top:.9rem}
.defs ul{margin:1rem 0 0;padding:0;list-style:none}
.defs ul li{display:block;padding:.35rem 0;border:0;font-size:.8125rem;color:var(--ink-70)}
.defs ul li::before{content:"";display:inline-block;width:1.25rem;height:1px;background:var(--brass-rule);vertical-align:middle;margin-right:.75rem}
.on-dark .defs{border-color:var(--line-dark)}
.on-dark .defs li{border-color:var(--line-dark)}
.on-dark .defs h3,.on-dark .defs .name{color:#fff}
.on-dark .defs p,.on-dark .defs ul li{color:var(--silver)}

/* a section head that sits beside its ledger */
.sec{padding:var(--sec) 0}
.sec.tight{padding-top:0}
.sec-head{grid-column:1/5;align-self:start}
.sec-head h2{margin-top:1rem;max-width:12ch}
.sec-head .body{margin-top:1.5rem}
.sec-body{grid-column:6/13}
.sec-body .serif-lede{max-width:28ch;margin-bottom:1.75rem}
.sec-body .body{max-width:58ch}
.sec-body .arrow{margin-top:2rem}
.sec-body .defs{margin-top:.5rem}
.sec-full{grid-column:1/-1}
/* head above, body full width: for a pair of photographs that deserve the whole measure */
.sec.stack .sec-head{grid-column:1/8;margin-bottom:clamp(2rem,4vw,3rem)}
.sec.stack .sec-body{grid-column:1/-1}
/* head centred over a narrower column of copy */
.sec.centre .sec-head{grid-column:3/11;text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.sec.centre .sec-head h2{margin-inline:auto;max-width:16ch}
.sec.centre .sec-head .body{margin-inline:auto}
.sec.centre .sec-body{grid-column:4/10}
.sec.stack .g-pair .frame{aspect-ratio:4/5}

/* ---------- diptych / plates on inner pages ---------- */
.diptych{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem);padding-top:0;padding-bottom:var(--sec)}
.diptych .d-a{grid-column:1/8}
.diptych .d-b{grid-column:8/13}
.diptych .frame{overflow:hidden;background:var(--ground-2)}
.diptych .d-a .frame{aspect-ratio:7/6}
.diptych .d-b .frame{aspect-ratio:5/6}
.diptych .frame img{width:100%;height:100%;object-fit:cover}
.diptych.flip .d-a{grid-column:6/13;grid-row:1}
.diptych.flip .d-b{grid-column:1/6;grid-row:1}

/* ---------- studio movements (about) ---------- */
.moves{padding:0 0 var(--sec)}
.moves-plate{grid-column:1/6;align-self:start;position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.moves-list{grid-column:7/13}
.move{padding:clamp(2.5rem,5vw,4.5rem) 0;border-top:1px solid var(--line)}
.move:first-child{padding-top:0;border-top:0}
.move .n{font-family:var(--serif);font-size:1.05rem;color:var(--brass);display:block;margin-bottom:1.25rem}
.move h2{font-size:clamp(1.9rem,3vw,3rem);max-width:16ch;margin-bottom:1.5rem}
.move .body{max-width:52ch}
.refuse{list-style:none;margin:1.5rem 0 0;padding:0}
.refuse li{padding:1.1rem 0;border-top:1px solid var(--line);font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.3;color:var(--ink)}
.refuse li:last-child{border-bottom:1px solid var(--line)}
.refuse li span{display:block;font-family:var(--sans);font-size:.8125rem;line-height:1.75;color:var(--ink-70);margin-top:.5rem;max-width:52ch}

/* ---------- process stages ---------- */
.stages{padding:0 0 var(--sec)}
.stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem);padding:clamp(3rem,6vw,5.5rem) 0;border-top:1px solid var(--line)}
.stage .n{grid-column:1/2;font-family:var(--serif);font-size:clamp(3rem,6vw,6rem);line-height:.9;color:var(--brass);letter-spacing:-.02em}
.stage-copy{grid-column:2/7;padding-left:clamp(0rem,2vw,2rem)}
.stage-copy h2{font-size:clamp(1.9rem,3.2vw,3.2rem);margin-bottom:1.25rem}
.stage-copy .body{max-width:50ch}
.stage-copy .label{display:block;margin:2rem 0 .75rem}
.stage-plate{grid-column:8/13;align-self:start}
.stage-plate .frame{aspect-ratio:4/5;overflow:hidden;background:var(--ground-2)}
.stage-plate .frame.land{aspect-ratio:4/3}
.stage-plate .frame img{width:100%;height:100%;object-fit:cover}
.sees{list-style:none;margin:0;padding:0}
.sees li{padding:.5rem 0;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-70)}
.sees li:last-child{border-bottom:1px solid var(--line)}

/* ---------- questions ---------- */
.faq{grid-column:6/13;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.5rem 0;font-family:var(--serif);font-size:clamp(1.3rem,1.8vw,1.75rem);line-height:1.2;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--sans);font-size:1.25rem;color:var(--plum-soft);transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{color:var(--ink)}
.faq .a{padding:0 0 1.75rem;max-width:56ch}
.faq .a p{font-size:.9rem;line-height:1.8;color:var(--ink-70)}
.faq .a p+p{margin-top:.9rem}
.faq .a a{color:var(--ink);border-bottom:1px solid var(--brass-rule)}

/* ---------- contact page ---------- */
.contact-lead{height:0}
.page-hero:has(+ .contact-lead){padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.page-hero+.contact-lead+.contact{padding-top:calc(var(--sec) * .6)}

/* ---------- legal prose ---------- */
.doc{padding:calc(var(--nav-h) + clamp(4rem,8vw,7rem)) 0 var(--sec)}
.doc .doc-in{grid-column:2/11}
.doc h1{max-width:14ch}
.doc .doc-meta{margin-top:1.5rem;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-soft)}
.doc .lede{font-family:var(--serif);font-size:clamp(1.2rem,1.6vw,1.5rem);line-height:1.4;color:var(--ink-70);max-width:38ch;margin-top:1.5rem}
.prose{margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--line);padding-top:2.5rem}
.prose h2{font-size:clamp(1.5rem,2.2vw,2.1rem);margin:2.75rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-weight:500;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);margin:1.75rem 0 .5rem}
.prose p,.prose li{font-size:.9375rem;line-height:1.85;color:var(--ink-70);max-width:66ch}
.prose p+p{margin-top:1rem}
.prose ul{padding-left:1.25rem;margin:1rem 0}
.prose li+li{margin-top:.5rem}
.prose a{color:var(--ink);border-bottom:1px solid var(--brass-rule)}
.prose strong{font-weight:500;color:var(--ink)}

/* ---------- journal ----------
   An article opens like a project (centred title, one photograph), then reads in the prose measure.
   The index is a ledger: date, title, one line, a way in. */
.plate-wide+.jdoc{padding-top:0}
.jdoc .prose{margin-top:0;border-top:0;padding-top:0}
.jdoc .prose h2{font-size:clamp(1.6rem,2.4vw,2.25rem);margin:2.75rem 0 1rem;max-width:24ch;text-wrap:balance}
.jdoc .prose h2:first-child{margin-top:0}
.jdoc .prose p,.jdoc .prose li{font-size:1rem;line-height:1.85;color:var(--ink);max-width:66ch}
.jdoc .prose ul,.jdoc .prose ol{padding-left:1.25rem;margin:1rem 0}
.jdoc .prose li+li{margin-top:.6rem}
.jdoc .prose strong{font-weight:500}
.sources{margin-top:3rem;border-top:1px solid var(--line);padding-top:1.75rem}
.sources h3{font-family:var(--sans);font-weight:500;font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);margin:0 0 .75rem}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{font-size:.875rem;line-height:1.7}
.sources li+li{margin-top:.4rem}
.sources a{color:var(--ink);border-bottom:1px solid var(--brass-rule)}
.sources .body{margin-top:1rem;font-size:.8125rem}
.jl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.jl li{display:grid;grid-template-columns:10rem 1fr;column-gap:clamp(1rem,2.4vw,2.5rem);padding:clamp(2rem,3.5vw,3rem) 0;border-bottom:1px solid var(--line)}
.jl-date{font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);padding-top:.6rem}
.jl h2{font-size:clamp(1.6rem,2.6vw,2.5rem);max-width:22ch;text-wrap:balance}
.jl h2 a{transition:color .35s ease}
.jl .body{margin-top:1rem;max-width:58ch}
.jl .arrow{margin-top:1.5rem}

/* ---------- 404 ---------- */
.lost{min-height:100vh;min-height:100dvh;display:flex;align-items:center;background:var(--plum-deep);color:#fff;padding:calc(var(--nav-h) + 4rem) 0 6rem}
.lost .lost-in{grid-column:1/9}
.lost h1{font-size:clamp(3rem,9vw,8rem)}
.lost .serif-lede{color:var(--silver);margin-top:1.5rem}
.lost .hero-cta{justify-content:flex-start;margin-top:2.5rem}

/* ---------- services index ----------
   Five groups, each opening on its name in the middle of the page with a short brass rule, then its
   services one after another: a photograph on one side, the name, two sentences and a way in on the
   other, the sides alternating down the page. Plenty of air, nothing pinned, nothing swapping. */
.svc-overview{padding:0 0 calc(var(--sec) * .5)}
.svc-group{padding-top:clamp(3rem,6vw,5.5rem)}
.svc-group+.svc-group{border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3.5rem)}
.svc-group-head{text-align:center;max-width:34ch;margin:0 auto}
.svc-group-head h2{font-size:clamp(2.6rem,5vw,4.6rem)}
.svc-group-head .line{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.3;color:var(--ink-70);margin:1.1rem auto 0;max-width:30ch;text-wrap:balance}
.svc-group-head .line em{font-style:italic;color:var(--plum-soft)}
.svc-group-head .rule{width:4rem;margin:1.75rem auto 0;background:var(--brass-rule);transform-origin:center}
.svc-item{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.4vw,2.5rem);align-items:center;padding:clamp(2.5rem,5vw,4.5rem) 0 0}
.svc-item .svc-media{grid-column:1/6;grid-row:1}
.svc-item .svc-copy{grid-column:7/13;grid-row:1}
.svc-item.flip .svc-media{grid-column:8/13}
.svc-item.flip .svc-copy{grid-column:1/7}
.svc-media .frame{aspect-ratio:5/6;overflow:hidden;background:var(--ground-2)}
.svc-media .frame.land{aspect-ratio:4/3}
.svc-media .frame img{width:100%;height:100%;object-fit:cover}
.svc-copy .n{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--brass);margin-bottom:1rem}
.svc-copy h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.2vw,3.1rem);line-height:1.05;letter-spacing:-.005em;color:var(--ink);margin:0;text-wrap:balance}
.svc-copy h3 a{transition:color .35s ease}
.svc-copy h3 em{display:block;font-style:italic;font-size:.5em;color:var(--plum-soft);margin-top:.6rem;letter-spacing:0}
.svc-copy .body{margin-top:1.5rem;max-width:46ch}
.svc-copy .arrow{margin-top:2rem}
/* the questions page is grouped; a group label sits between runs of questions */
.faq .faq-group{display:block;font-size:.625rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);padding:2.75rem 0 .75rem;margin:0}
.faq .faq-group:first-child{padding-top:1.5rem}

/* ---------- design and build: two columns compared ---------- */
.compare{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1rem,2.4vw,2.5rem);border-top:1px solid var(--line)}
.compare>div{padding:2rem 0 0}
.compare>div+div{border-left:1px solid var(--line);padding-left:clamp(1rem,2.4vw,2.5rem)}
.compare h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,1.9vw,1.9rem);margin:0 0 1.25rem}
.compare ul{list-style:none;margin:0;padding:0}
.compare li{padding:.75rem 0;border-top:1px solid var(--line);font-size:.875rem;line-height:1.7;color:var(--ink-70)}

/* ---------- inner page: aria-current on the bar ---------- */
.nav a[aria-current="page"]{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .page-hero .ph-a{grid-column:1/10}.page-hero .ph-b{grid-column:10/13}
  .story-copy{grid-column:1/8}.story-facts{grid-column:9/13}
  .sec-head{grid-column:1/5}.sec-body{grid-column:6/13}
  .moves-plate{grid-column:1/6}.moves-list{grid-column:7/13}
  .faq{grid-column:6/13}
}
@media (max-width:900px){
  .stage .n{grid-column:1/-1;margin-bottom:1rem}
  .stage-copy{grid-column:1/8;padding-left:0}
  .stage-plate{grid-column:8/13}
  .sec.centre .sec-head{grid-column:2/12}.sec.centre .sec-body{grid-column:2/12}
}
@media (max-width:760px){
  .page-hero{padding-top:calc(var(--nav-h) + 3rem)}
  .page-hero .ph-a,.page-hero .ph-b,.story-copy,.story-facts,.sec-head,.sec-body,.sec.centre .sec-head,.sec.centre .sec-body,.sec.stack .sec-head,.sec.stack .sec-body,.moves-plate,.moves-list,.faq,.doc .doc-in,.lost .lost-in{grid-column:1/-1}
  .page-top{padding-top:calc(var(--nav-h) + 2.5rem)}
  .page-top .crumbs{margin-bottom:1.5rem}
  .page-hero .ph-b{margin-top:2rem}
  .page-hero .hero-cta{width:100%;flex-direction:column;gap:.75rem}
  .page-hero .hero-cta .btn{width:100%}
  .gallery .g{margin-bottom:1rem}
  .g-pair{grid-template-columns:1fr;gap:1rem}
  .story-facts{margin-top:2.5rem}
  .others-grid{grid-template-columns:1fr;gap:2rem}
  .tabs{gap:1.5rem}
  .folio{grid-template-columns:1fr;row-gap:2.25rem}
  .folio-name h2{font-size:1.5rem}
  .defs li,.defs.plain li{grid-template-columns:1fr;row-gap:.6rem}
  .defs .n{padding-top:0}
  .sec-head{position:static;margin-bottom:2rem}
  .diptych .d-a,.diptych .d-b,.diptych.flip .d-a,.diptych.flip .d-b{grid-column:1/-1;grid-row:auto}
  .diptych .d-a .frame,.diptych .d-b .frame{aspect-ratio:4/5}
  .diptych .d-b{margin-top:1rem}
  .moves-plate{position:static;margin-bottom:2.5rem}
  .stage{padding:2.5rem 0}
  .stage-copy,.stage-plate{grid-column:1/-1}
  .stage-plate{margin-top:1.5rem}
  .compare{grid-template-columns:1fr}
  .compare>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:1rem}
  .svc-item .svc-media,.svc-item .svc-copy,.svc-item.flip .svc-media,.svc-item.flip .svc-copy{grid-column:1/-1;grid-row:auto}
  .svc-item .svc-copy{margin-top:1.75rem}
  .svc-group-head{max-width:none}
  .jl li{grid-template-columns:1fr;row-gap:.75rem}
  .jl-date{padding-top:0}
  .plate-pair .g-pair{grid-template-columns:1fr;gap:1rem}
}