/* Kala Reserve: site styles. Tokens from Brand Book, Edition One (identity 5B). */
@font-face{font-family:"Jost";src:url("fonts/jost-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Jost";src:url("fonts/jost-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Jost";src:url("fonts/jost-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

:root{
  --gold:#C8963E;          /* Reserve Gold: marks, rules, buds. Never small text on cream. */
  --charcoal:#2B2B2B;      /* Kala Charcoal */
  --cream:#FAF7F1;         /* Paper Cream */
  --linen:#EDE7DC;         /* Raw Linen */
  --ink-2:rgba(43,43,43,.74);
  --ink-3:rgba(43,43,43,.56);
  --cream-2:rgba(250,247,241,.78);
  --cream-3:rgba(250,247,241,.56);
  --rule:rgba(43,43,43,.16);
  --rule-dark:rgba(250,247,241,.18);
  --measure:34rem;
  --gutter:clamp(1.25rem,5vw,4rem);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--charcoal);font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;font-size:1.0625rem;line-height:1.6;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-weight:300;letter-spacing:-.012em;line-height:1.12;margin:0;}
p{margin:0;}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px;}
.on-dark :focus-visible{outline-color:var(--gold);}
.skip{position:absolute;left:-9999px;top:0;background:var(--charcoal);color:var(--cream);padding:.75rem 1rem;z-index:10;}
.skip:focus{left:1rem;top:1rem;}

.frame{max-width:74rem;margin:0 auto;padding-inline:var(--gutter);}

/* small caps headings, per brand book: Semibold 600 caps at 0.18em */
.caps{font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;}

/* ---------- header: horizontal lockup, brand book assigns it to website headers ---------- */
.site-head{border-bottom:1px solid var(--rule);}
.site-head .frame{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.1rem;}
.site-head .lockup-h{width:260px;min-width:236px;}           /* drawn lockup is ~78% of the viewBox: keeps it above the 180 px screen minimum */
.head-link{font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.7rem 0;border-bottom:1px solid var(--charcoal);}
.head-link:hover{border-bottom-color:var(--gold);}

/* ---------- hero ---------- */
.hero .frame{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2.5rem,6vw,6rem);align-items:center;padding-block:clamp(4rem,10vw,8.5rem);}
.hero h1{font-size:clamp(2.75rem,6.4vw,5.5rem);max-width:11ch;}
.hero .lede{margin-top:1.75rem;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--ink-2);max-width:var(--measure);}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin:3rem 0 2.75rem;padding-top:1.5rem;border-top:1px solid var(--gold);max-width:40rem;}
.facts dt{color:var(--ink-3);font-size:.875rem;margin-bottom:.35rem;}
.facts dd{margin:0;font-size:1.0625rem;line-height:1.35;}
.btn{display:inline-block;font:600 .8125rem/1 "Jost",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:1.15rem 2rem;background:var(--charcoal);color:var(--cream);border:1px solid var(--charcoal);cursor:pointer;transition:background .25s ease,color .25s ease;}
.btn:hover{background:transparent;color:var(--charcoal);}
.on-dark .btn{background:var(--cream);color:var(--charcoal);border-color:var(--cream);}
.on-dark .btn:hover{background:transparent;color:var(--cream);}

/* the badge, drawn once on load (the page's one piece of motion) */
.seal{justify-self:center;width:min(100%,24rem);padding:12%;}  /* 0.5X clear space is honoured by the grid gap and padding */
.seal svg{width:100%;height:auto;overflow:visible;}
.draw .frame-rule,.draw .stem,.draw .branch{stroke-dasharray:1;stroke-dashoffset:1;}
.draw .frame-rule{animation:draw 1.3s cubic-bezier(.6,0,.3,1) .15s forwards,solid 0s linear 1.45s forwards;}  /* once drawn, the frame becomes a plain stroke so all four corners join cleanly */
.draw .stem{animation:draw .9s ease-out 1.05s forwards;}
.draw .branch.low{animation:draw .8s ease-out 1.6s forwards;}
.draw .branch.high{animation:draw .8s ease-out 1.9s forwards;}
.draw .bud{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:bud .5s cubic-bezier(.3,1.4,.5,1) forwards;}
.draw .bud.b1{animation-delay:2.25s}.draw .bud.b2{animation-delay:2.35s}.draw .bud.b3{animation-delay:2.5s}.draw .bud.b4{animation-delay:2.6s}.draw .bud.crown{animation-delay:2.85s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes bud{to{transform:scale(1)}}
@keyframes solid{to{stroke-dasharray:none}}

/* ---------- linen band: what is withheld ---------- */
.withheld{background:var(--linen);}
.withheld .frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);padding-block:clamp(4rem,9vw,7rem);align-items:start;}
.withheld h2{font-size:clamp(1.9rem,3.4vw,2.9rem);max-width:16ch;}
.withheld p{color:var(--ink-2);max-width:var(--measure);}
.withheld p + p{margin-top:1.1rem;}

/* ---------- the word ---------- */
.word .frame{padding-block:clamp(4rem,9vw,7rem);}
.word h2{font-size:clamp(1.9rem,3.4vw,2.9rem);max-width:26ch;margin-bottom:3rem;}
.senses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);}
.senses h3{font-size:1.5rem;margin-bottom:.75rem;}
.senses h3::before{content:"";display:block;width:2.25rem;height:1px;background:var(--gold);margin-bottom:1.25rem;}
.senses p{color:var(--ink-2);font-size:1rem;}

/* ---------- request form (reversed ground) ---------- */
.on-dark{background:var(--charcoal);color:var(--cream);}
.request .frame{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,6rem);padding-block:clamp(4.5rem,10vw,8rem);}
.request h2{font-size:clamp(2rem,3.8vw,3.2rem);max-width:12ch;}
.request .intro p{max-width:28rem;margin-top:1.4rem;}
.request .intro .small{font-size:.9375rem;}
form{display:grid;gap:1.6rem;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}
label{display:block;font-size:.875rem;color:var(--cream-2);margin-bottom:.45rem;}
label .opt{color:var(--cream-3);}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-dark);border-radius:0;padding:.55rem 0 .7rem;font:400 1.0625rem/1.4 "Jost",sans-serif;color:var(--cream);}
input::placeholder,textarea::placeholder{color:rgba(250,247,241,.4);}
input:focus,textarea:focus{outline:none;border-bottom-color:var(--gold);box-shadow:0 1px 0 0 var(--gold);}
textarea{resize:vertical;min-height:6.5rem;}
input:user-invalid,textarea:user-invalid{border-bottom-color:#E0A868;}
.consent{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:.8rem;align-items:start;font-size:.9375rem;color:var(--cream-2);}
.consent input{width:1.1rem;height:1.1rem;margin:.2rem 0 0;accent-color:var(--gold);}
.consent a{color:var(--cream);text-underline-offset:3px;}
.hp{position:absolute;left:-9999px;}
.submit{margin-top:.4rem;}
.request .intro p{color:var(--cream-2);}
.request .intro .small{color:var(--cream-3);}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule-dark);}
.site-foot .frame{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;padding-block:3.5rem;}
.site-foot .lockup-s{width:180px;min-width:160px;}      /* drawn lockup is ~93% of the widened viewBox: stays above the 120 px screen minimum */
.foot-meta{display:flex;flex-wrap:wrap;gap:1.75rem;font-size:.9375rem;color:var(--cream-3);}
.foot-meta a{color:var(--cream-2);text-decoration:none;border-bottom:1px solid var(--rule-dark);}
.foot-meta a:hover{border-bottom-color:var(--gold);}
.foot-info{display:grid;gap:1.25rem;justify-items:start;}
.foot-addr{font-style:normal;font-size:.9375rem;line-height:1.6;color:var(--cream-2);}
.linklike{font:inherit;color:var(--cream-2);background:none;border:0;border-bottom:1px solid var(--rule-dark);padding:0;cursor:pointer;}
.linklike:hover{border-bottom-color:var(--gold);}

/* ---------- cookie choice ---------- */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--charcoal);color:var(--cream);border-top:1px solid var(--gold);}
.cookie-bar[hidden]{display:none;}
.cookie-bar .frame{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.35rem;}
.cookie-bar p{max-width:44rem;font-size:.9375rem;color:var(--cream-2);}
.cookie-bar a{color:var(--cream);text-underline-offset:3px;}
.cookie-actions{display:flex;gap:.75rem;}
.cookie-bar .btn{background:var(--cream);color:var(--charcoal);border-color:var(--cream);padding:.9rem 1.6rem;}
.cookie-bar .btn:hover{background:transparent;color:var(--cream);}
.cookie-bar .btn-quiet{background:transparent;color:var(--cream);border-color:rgba(250,247,241,.45);}
.cookie-bar .btn-quiet:hover{background:var(--cream);color:var(--charcoal);border-color:var(--cream);}
@media (max-width:560px){.cookie-bar .frame{padding-block:1.1rem;}.cookie-actions{width:100%;}.cookie-bar .btn{flex:1;text-align:center;}}

/* ---------- plain pages (privacy, thank you) ---------- */
.plain main .frame{max-width:46rem;padding-block:clamp(3.5rem,8vw,6rem);}
.plain h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.5rem;}
.plain h2{font-size:1.5rem;font-weight:400;margin:2.5rem 0 .75rem;letter-spacing:0;}
.plain p,.plain li{color:var(--ink-2);}
.plain p + p{margin-top:1rem;}
.plain ul{padding-left:1.1rem;margin:.75rem 0 0;}
.plain li + li{margin-top:.4rem;}
.plain .meta{color:var(--ink-3);font-size:.9375rem;margin-bottom:2rem;}
.plain .back{margin-top:2.5rem;}
.plain main address{font-style:normal;color:var(--ink-2);line-height:1.6;margin-top:1rem;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero .frame,.withheld .frame,.request .frame{grid-template-columns:1fr;}
  .seal{order:-1;width:min(62%,15rem);justify-self:start;padding:0;margin-bottom:.5rem;}
  .senses{grid-template-columns:1fr;gap:2.5rem;}
}
@media (max-width:560px){
  .facts{grid-template-columns:1fr;gap:1.1rem;}
  .row{grid-template-columns:1fr;}
  .site-head .lockup-h{width:252px;min-width:252px;}  /* holds the 180 px minimum on phones */
  .site-head .head-link{display:none;}                  /* the hero button sits directly below */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .draw .frame-rule,.draw .stem,.draw .branch{animation:none;stroke-dashoffset:0;stroke-dasharray:none;}
  .draw .bud{animation:none;transform:none;}
}



/* ---------- piece page ---------- */
.hero.single .frame{grid-template-columns:minmax(0,1fr);}
.hero.single h1{max-width:16ch;}
.ledger .frame{padding-block:clamp(3rem,7vw,5rem);}
.ledger dl{margin:0;max-width:52rem;border-top:1px solid var(--gold);}
.ledger dl > div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1.5rem;padding:.95rem 0;border-bottom:1px solid var(--rule);}
.ledger dt{color:var(--ink-3);font-size:.875rem;}
.ledger dd{margin:0;color:var(--ink-2);}
@media (max-width:560px){
  .ledger dl > div{grid-template-columns:1fr;gap:.25rem;}
}
.withheld .more{margin-top:1.6rem;}
.withheld .more a{color:var(--charcoal);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold);}
.head-nav{display:flex;align-items:center;gap:clamp(1.1rem,2.5vw,2rem);}

/* ---------- verse and stanza figures ---------- */
.verse .frame{padding-block:clamp(4rem,9vw,7rem);}
.verse h2{font-size:clamp(1.9rem,3.4vw,2.9rem);}
.verse-intro{color:var(--ink-3);margin-top:.9rem;max-width:var(--measure);}
.stanza{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(3rem,6vw,5rem);}
.stanza.reverse .stanza-text{order:2;}
.stanza.reverse .stanza-fig{order:1;}
.stanza-text p{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.85;color:var(--ink-2);max-width:40rem;}
.stanza-fig{margin:0;}
.stanza-fig img{display:block;width:100%;height:auto;}
.stanza-fig figcaption{margin-top:.9rem;font-size:.875rem;color:var(--ink-3);}
.fig-note{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-3);max-width:var(--measure);}

/* ---------- currently held ---------- */
.held{background:var(--cream);border-top:1px solid var(--rule);}
.held .frame{padding-block:clamp(4rem,9vw,7rem);}
.held-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--rule);}
.held-head p{color:var(--ink-3);max-width:26rem;font-size:.9375rem;}
.held-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:clamp(2rem,5vw,4rem);}
.held-item{padding-top:2.5rem;max-width:26rem;}
.held-place{display:block;font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;}
.held-item h3{font-size:1.9rem;}
.held-deva{display:block;font-size:1.0625rem;color:var(--ink-3);margin-top:.35rem;letter-spacing:0;}
.held-item dl{margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid var(--rule);}
.held-item dl > div{display:flex;justify-content:space-between;gap:1.5rem;padding:.55rem 0;}
.held-item dt{color:var(--ink-3);font-size:.875rem;}
.held-item dd{margin:0;text-align:right;font-size:.9375rem;}
.held-foot{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;margin-top:1.75rem;}
.held-status{font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);max-width:12rem;}
.held-enq{font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--gold);padding-bottom:.25rem;}

@media (max-width:860px){
  .stanza{grid-template-columns:1fr;gap:1.75rem;}
  .stanza.reverse .stanza-text{order:1;}
  .stanza.reverse .stanza-fig{order:2;}
}

/* ---------- header navigation: three entries, stacks on phones ---------- */
.head-link{white-space:nowrap;}
@media (max-width:760px){
  .site-head .frame{flex-wrap:wrap;gap:.9rem 1.25rem;padding-block:1rem .25rem;}
  .site-head .head-nav{order:3;flex:1 0 100%;gap:1.25rem;border-top:1px solid var(--rule);padding-block:.85rem;margin-top:.25rem;}
  .site-head .head-link{display:inline-block;font-size:.6875rem;letter-spacing:.12em;padding:0;border-bottom:1px solid transparent;}
  .site-head .head-link[aria-current]{border-bottom-color:var(--gold);}
}
@media (max-width:560px){
  .site-head .head-link{display:inline-block;}   /* restores the links hidden by the earlier single-link rule */
  .site-head .head-nav{gap:1rem;}
  .site-head .head-link{font-size:.625rem;letter-spacing:.1em;}
}

/* ---------- this season's reserve: three columns divided by rules ---------- */
.held-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
.held-item{max-width:none;padding:2.5rem clamp(1.25rem,2.5vw,2.5rem) 0;}
.held-item:first-child{padding-left:0;}
.held-item:last-child{padding-right:0;}
.held-item + .held-item{border-left:1px solid var(--rule);}
.held-item h3 a{text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:.1rem;}
.held-item h3 a:hover{border-bottom-color:var(--charcoal);}
.held-item--withheld{color:var(--ink-3);}
.held-item--withheld .held-place{color:var(--ink-3);}
.held-item--withheld h3{color:var(--ink-3);font-weight:300;}
.held-item--withheld dd{color:var(--ink-3);}
.held-item--withheld .held-foot{justify-content:flex-start;}
@media (max-width:860px){
  .held-list{grid-template-columns:1fr;}
  .held-item{padding:2.25rem 0 0;max-width:30rem;}
  .held-item + .held-item{border-left:0;border-top:1px solid var(--rule);padding-top:2.25rem;}
}

/* ---------- how a private preview works ---------- */
.steps-wrap{background:var(--linen);}
.steps-wrap .frame{padding-block:clamp(4rem,9vw,7rem);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start;}
.steps-wrap h2{font-size:clamp(1.9rem,3.4vw,2.9rem);max-width:12ch;}
.steps-intro{margin-top:1.1rem;color:var(--ink-3);font-size:.9375rem;max-width:26rem;}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;}
.steps li{counter-increment:s;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding:1.6rem 0;border-bottom:1px solid var(--rule);}
.steps li:first-child{padding-top:0;}
.steps li::before{content:counter(s);font-weight:300;font-size:1.9rem;line-height:1;color:var(--gold);}
.steps h3{font-size:1.25rem;font-weight:400;margin-bottom:.4rem;letter-spacing:0;}
.steps p{color:var(--ink-2);font-size:1rem;max-width:var(--measure);}

/* ---------- what passes with the work ---------- */
.custody .frame{padding-block:clamp(4rem,9vw,7rem);}
.custody h2{font-size:clamp(1.9rem,3.4vw,2.9rem);max-width:20ch;margin-bottom:2.75rem;}
.custody-list{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(2rem,5vw,4.5rem);border-top:1px solid var(--gold);}
.custody-list > div{padding:1.75rem 0;border-bottom:1px solid var(--rule);}
.custody dt{font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.6rem;}
.custody dd{margin:0;color:var(--ink-2);max-width:30rem;}
@media (max-width:860px){
  .steps-wrap .frame{grid-template-columns:1fr;}
  .custody-list{grid-template-columns:1fr;}
}

/* phones: the nav keeps the two destinations; the request link is redundant beside the hero button */
@media (max-width:620px){
  .site-head .head-nav{flex-wrap:wrap;row-gap:.5rem;}
  .site-head .head-nav .head-link:last-child{display:none;}
}

/* the hero's call to action must clear the cookie bar on a short desktop viewport (1440x900 and similar) */
@media (min-width:861px){
  .hero .frame{padding-block:clamp(4rem,8vw,7rem);}
}
.cookie-bar .frame{padding-block:1.1rem;}
.cookie-bar .btn{padding:.95rem 1.5rem;}

/* ---------- piece page: edition line, figures, and the jump bar ---------- */
.eyebrow{font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem;}
.hero h1#piece-title{max-width:15ch;}
.piece-fig{margin:0;}
.piece-fig img{display:block;width:100%;height:auto;}
.piece-fig figcaption{margin-top:.9rem;font-size:.875rem;line-height:1.55;color:var(--ink-3);max-width:34rem;}
.piece-fig--hero{align-self:center;}

.piece-nav{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--cream);}
.piece-nav .frame{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);padding-block:1.1rem;}
.piece-nav a{font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink-3);border-bottom:1px solid transparent;padding-bottom:.25rem;transition:color .2s ease,border-color .2s ease;}
.piece-nav a:hover{color:var(--charcoal);border-bottom-color:var(--gold);}

/* verse: the silk figure sits left, the whole verse runs beside it */
.verse-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2.5rem,5vw,4rem);}
.verse-text p{font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.85;color:var(--ink-2);max-width:40rem;}
.verse-text p + p{margin-top:1.75rem;}

/* the maker section carries the stitch figure on the right */
.withheld.with-fig .frame{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start;}
.withheld.with-fig h2{margin-bottom:1.5rem;max-width:18ch;}

@media (max-width:860px){
  .piece-fig--hero{order:-1;margin-bottom:1.5rem;}
  .verse-body{grid-template-columns:1fr;}
  .verse-body .piece-fig{order:2;margin-top:.5rem;}
  .verse-text{order:1;}
  .withheld.with-fig .frame{grid-template-columns:1fr;}
}

/* ---------- Details reads as a control, not a footnote ---------- */
.held-enq{display:inline-block;border:1px solid var(--charcoal);padding:.7rem 1.35rem;color:var(--charcoal);text-decoration:none;transition:background .25s ease,color .25s ease;}
.held-enq:hover,.held-enq:focus-visible{background:var(--charcoal);color:var(--cream);}
.held-foot{align-items:center;}

/* ---------- mobile corrections ---------- */
@media (max-width:860px){
  /* the piece page must open on its headline, not on a process photograph */
  .piece-fig--hero{order:0;margin:2rem 0 0;}
  /* the mark is the logo, so it still leads on the home page, but smaller so the headline clears the fold */
  .seal{width:min(52%,13rem);}
}
/* touch targets: 44 px minimum on the two text navigations and the Details control */
@media (max-width:760px){
  .site-head .head-link{display:inline-flex;align-items:center;min-height:44px;}
  .site-head .head-nav{padding-block:0;}
}
.piece-nav a{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;box-shadow:inset 0 -1px 0 0 transparent;}
.piece-nav a:hover{box-shadow:inset 0 -1px 0 0 var(--gold);}
.piece-nav .frame{padding-block:.35rem;}
.held-enq{padding:.85rem 1.35rem;}

/* ================= plate: the stills are video frames, so they are treated
   as plates rather than photographs. A warm desaturation pulls them onto the
   Paper Cream / Kala Charcoal palette, a fine grain hides the softness that
   comes with showing them larger, and a gold hairline sets them in the page. */
.plate{position:relative;display:block;}
.plate img{display:block;width:100%;height:auto;filter:saturate(.68) sepia(.16) contrast(1.06) brightness(1.03);}
.plate::before,.plate::after{content:"";position:absolute;inset:0;pointer-events:none;}
.plate::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.26;}
.plate::after{box-shadow:inset 0 0 0 1px rgba(200,150,62,.55),inset 0 0 70px rgba(250,247,241,.3);}
@media (prefers-reduced-transparency:reduce){.plate::before{opacity:0;}}

/* ================= larger plates ================= */
.verse-body{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);}
.withheld.with-fig .frame{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);}

/* ================= the piece hero: two lines, and the button above the fold */
.hero h1#piece-title{font-size:clamp(2rem,3.9vw,3.4rem);max-width:19ch;}
.hero--piece .frame{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);padding-block:clamp(2rem,4vw,3.25rem);}
.hero--piece .lede{margin-top:1.1rem;font-size:clamp(1rem,1.15vw,1.0625rem);}
.hero--piece .facts{margin:1.75rem 0 1.6rem;padding-top:1.1rem;}
.hero--piece .eyebrow{margin-bottom:1rem;}
.hero--piece .piece-fig figcaption{font-size:.8125rem;margin-top:.7rem;}

/* ================= the home hero: the button above the fold ================= */
.hero--home .frame{padding-block:clamp(2rem,4.5vw,4rem);}
.hero--home h1{font-size:clamp(2.5rem,5.4vw,4.75rem);}
.hero--home .lede{margin-top:1.25rem;}
.hero--home .facts{margin:2rem 0 1.9rem;padding-top:1.2rem;}
.hero--home .seal{width:min(100%,19rem);padding:6%;}

@media (max-width:860px){
  .hero--piece .frame,.hero--home .frame{padding-block:1.5rem 2rem;}
  .hero--home .seal{width:min(34%,8.5rem);margin-bottom:1.25rem;}
  .hero--home h1{font-size:clamp(2.1rem,8.6vw,3rem);}
  .hero h1#piece-title{font-size:clamp(1.8rem,7.4vw,2.6rem);max-width:none;}
  .hero--piece .lede,.hero--home .lede{margin-top:1rem;}
  .hero--piece .facts,.hero--home .facts{margin:1.4rem 0 1.4rem;padding-top:1rem;gap:.85rem;}
  .hero--piece .piece-fig{margin-top:1.75rem;}
}

/* ================= the cookie bar should not eat the first screen ========= */
.cookie-bar p{font-size:.875rem;max-width:40rem;}
@media (max-width:760px){
  .cookie-bar .frame{padding-block:.9rem;gap:.85rem;}
  .cookie-bar p{font-size:.8125rem;line-height:1.5;}
  .cookie-bar .btn{padding:.8rem 1rem;font-size:.75rem;min-height:44px;}
}

/* anchors land clear of the top of the viewport */
#piece,#maker,#provenance,#request,#season{scroll-margin-top:1rem;}

/* ================= phones: message, then action, then the detail rail =====
   The facts list is reference, not persuasion, so below 860 px it moves under
   the button and the call to action comes straight after the opening lines. */
@media (max-width:860px){
  .hero--home .frame > div:first-child,
  .hero--piece .frame > div:first-child{display:flex;flex-direction:column;}
  .hero--home .eyebrow,.hero--piece .eyebrow{order:1;}
  .hero--home h1,.hero--piece h1{order:2;}
  .hero--home .lede,.hero--piece .lede{order:3;}
  .hero--home .btn,.hero--piece .btn{order:4;align-self:flex-start;margin-top:1.5rem;}
  .hero--home .facts,.hero--piece .facts{order:5;margin:1.9rem 0 0;}

  .hero--home .lede,.hero--piece .lede{font-size:1rem;line-height:1.55;}
  .hero--home .seal{width:min(28%,7rem);margin-bottom:1rem;}
  .hero--home h1{font-size:clamp(2rem,8vw,2.75rem);}
  .hero h1#piece-title{font-size:clamp(1.7rem,6.8vw,2.4rem);}

  /* one scrolling row of section links keeps the header to two rows */
  .site-head .head-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .site-head .head-nav::-webkit-scrollbar{display:none;}
  .site-head .head-nav .head-link:last-child{display:inline-flex;}
  .site-head .head-link{font-size:.6875rem;letter-spacing:.1em;}
}
@media (max-width:760px){
  .cookie-bar .frame{padding-block:.75rem;gap:.7rem;}
  .cookie-bar p{font-size:.78125rem;line-height:1.45;}
  .cookie-bar .btn{padding:.7rem .9rem;}
}

.lede-more{margin-top:1rem;}
@media (max-width:860px){
  /* the second half of the opening falls below the button, with the detail rail */
  .hero--home .lede-more,.hero--piece .lede-more{order:6;margin-top:1.6rem;}
  .site-head .frame{padding-block:.7rem .2rem;}
  .site-head .head-nav{padding-block:.6rem;margin-top:.15rem;}
  .hero--home .frame,.hero--piece .frame{padding-block:1.2rem 2rem;}
  .hero--piece .eyebrow{font-size:.6875rem;letter-spacing:.14em;margin-bottom:.8rem;}
}

/* ================= short phones: the fold sits only ~660 px down, so the
   opening is compressed further rather than letting the button fall below it */
@media (max-width:860px){
  .site-head .frame{padding-block:.6rem .1rem;}
  .site-head .head-nav{padding-block:.25rem;margin-top:.1rem;}
  .lockup-h .kr-badge{width:42px;height:42px;}
  .lockup-h .kr-word{font-size:11px;letter-spacing:.3em;}
}
@media (max-width:860px) and (max-height:730px){
  .site-head .frame{padding-block:.45rem 0;}
  .lockup-h .kr-badge{width:36px;height:36px;}
  .lockup-h .kr-word{font-size:10px;}
  .hero--home .frame,.hero--piece .frame{padding-block:.9rem 1.5rem;}
  .hero--home .seal{width:min(22%,5rem);margin-bottom:.75rem;}
  .hero--home h1{font-size:clamp(1.6rem,6.6vw,2rem);}
  .hero h1#piece-title{font-size:clamp(1.45rem,5.6vw,1.8rem);}
  .hero--home .lede,.hero--piece .lede{font-size:.9375rem;line-height:1.5;margin-top:.8rem;}
  .hero--piece .eyebrow{margin-bottom:.6rem;}
  .hero--home .btn,.hero--piece .btn{margin-top:1.15rem;padding:.95rem 1.5rem;}
  .cookie-bar .frame{padding-block:.6rem;}
}

/* On a short phone the piece opening is reduced to the edition line, the
   headline and the button. The description follows immediately below it. */
@media (max-width:860px) and (max-height:730px){
  .hero--piece .lede{order:6;margin-top:1.6rem;}
  .hero--piece .lede-more{order:7;}
}

/* short desktop screens (1366x768 and similar) */
@media (min-width:861px) and (max-height:800px){
  .hero--home .frame,.hero--piece .frame{padding-block:1.75rem;}
  .hero--home h1{font-size:clamp(2.4rem,4.4vw,3.6rem);}
  .hero--home .lede{margin-top:1rem;}
  .hero--home .facts{margin:1.5rem 0 1.4rem;padding-top:1rem;}
  .lede-more{margin-top:.7rem;}
}

/* ================= the opening holds the whole first screen ================
   The hero grows to the viewport so the next band never peeks above the fold,
   while the content stays anchored near the top so the button keeps clearing
   the cookie bar on short screens. */
@media (min-width:861px){
  .hero--home .frame,.hero--piece .frame{min-height:calc(100svh - var(--head-h, 82px));align-items:start;align-content:center;gap:clamp(2.5rem,5vw,5rem);}
  .hero--home .frame{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);}
  .hero--piece .frame{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);}
}
@media (min-width:861px) and (max-height:820px){
  .hero--home .frame,.hero--piece .frame{align-content:start;}
}
@media (max-width:860px){
  .hero--home .frame,.hero--piece .frame{min-height:calc(100svh - var(--head-h, 158px));}
}

/* the protocol line, set quietly at the foot of the verse */
.fig-note{margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.875rem;color:var(--ink-3);max-width:34rem;}

/* the piece opening no longer carries a detail rail, so it breathes */
.hero--piece .lede-more{margin-top:1.1rem;}
.hero--piece .btn{margin-top:2.25rem;}
.hero--piece .piece-fig figcaption{max-width:28rem;}

/* jumps land exactly on the section edge, with none of the band above showing */
#piece,#maker,#provenance,#request,#season{scroll-margin-top:0;}

/* the text column centres against the plate so the opening sits balanced */
@media (min-width:861px){
  .hero--home .frame,.hero--piece .frame{align-items:center;}
}
@media (min-width:861px) and (max-height:820px){
  .hero--home .frame,.hero--piece .frame{align-items:start;}
}

/* on tall screens the opening sits in the upper middle rather than dead centre,
   so the band of empty cream above the edition line is not larger than the one below */
@media (min-width:861px) and (min-height:821px){
  .hero--home .frame,.hero--piece .frame{padding-bottom:calc(3.25rem + 10vh);}
}

/* A jump lands on the section's heading, not on the empty band of padding above it.
   The negative margin scrolls past most of that padding, so the previous section is
   further off screen, not nearer. */
#piece,#maker,#provenance,#request,#season{scroll-margin-top:calc(-1 * clamp(2.25rem,5.5vw,4.25rem));}
.verse-text em{font-style:italic;}

/* The verse is set as written: the column is sized so the longest line holds on one
   line at desktop widths, and a hanging indent marks any line that must wrap below that. */
@media (min-width:861px){
  .verse-body{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(1.75rem,3.5vw,3rem);}
}
.verse-text p{font-size:clamp(.9375rem,1.18vw,1.0625rem);line-height:1.8;max-width:none;text-indent:-1.3em;padding-left:1.3em;}
/* the verse takes a wider measure than the rest of the page so its lines hold */
@media (min-width:1200px){ .verse .frame{max-width:84rem;} }

/* phones: every two-column band collapses (re-asserted after the later overrides) */
@media (max-width:860px){
  .verse-body{grid-template-columns:1fr;}
  .withheld.with-fig .frame{grid-template-columns:1fr;}
  .hero .frame,.hero--home .frame,.hero--piece .frame,.withheld .frame,.request .frame,.steps-wrap .frame{grid-template-columns:1fr;}
  .held-list{grid-template-columns:1fr;}
  .custody-list{grid-template-columns:1fr;}
  .senses{grid-template-columns:1fr;}
  .verse .frame{max-width:74rem;}
}