/* VESPERA coming soon (v2). Builds on styles.css tokens. No inline styles anywhere (CSP style-src 'self'). */
.cs-top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5)}
.cs-nav{display:flex;gap:var(--s4);align-items:center;font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase}
.cs-nav a{color:var(--bone);opacity:.8}.cs-nav a:hover{opacity:1;text-decoration:none}
.cs-cta-sm{border:1px solid var(--gold-faint);padding:var(--s2) var(--s3);opacity:1!important}
.cs-cta-sm:hover{border-color:var(--gold-line)}
main{display:block}
.cs-hero{min-height:100svh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s4);align-items:center;padding:var(--s7) var(--s5) var(--s6);max-width:1440px;margin:0 auto;
  background:radial-gradient(60% 70% at 72% 55%,rgba(42,11,20,.55),rgba(7,4,10,0) 70%)}
.cs-hero-text{grid-column:1 / span 6;position:relative;z-index:2}
.cs-kicker,.cs-num{font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cs-h1{font-family:"Cinzel",serif;font-weight:400;font-size:clamp(40px,5.6vw,84px);line-height:1.08;letter-spacing:.06em;color:var(--bone);margin:var(--s4) 0 var(--s4)}
.cs-lede{font-size:var(--t-lead);line-height:1.45;max-width:34ch;color:var(--bone);opacity:.9}
.cs-when{margin-top:var(--s5);font-style:italic;color:var(--gold);font-size:var(--t-body)}
.cs-when span{font-style:normal;font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase;margin-right:var(--s2)}
.cs-actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;margin-top:var(--s5)}
.cs-quiet-link{font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--bone);border-bottom:1px solid var(--gold-faint);padding-bottom:3px}
.cs-quiet-link:hover{text-decoration:none;border-color:var(--gold)}
/* the case: a lamp comes on once, then a single highlight crosses the glass */
.cs-case{grid-column:7 / span 6;position:relative;margin:0;aspect-ratio:600/660;max-height:80svh;justify-self:center;width:100%;max-width:640px;overflow:hidden}
.cs-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cs-case .on{opacity:1}
.cs-case::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 62% at 50% 52%,rgba(7,4,10,0) 52%,rgba(7,4,10,.9) 100%)}
.cs-case figcaption{position:absolute;left:0;right:0;bottom:var(--s2);text-align:center;font-style:italic;color:var(--gold);font-size:var(--t-small);z-index:3}
.sweep{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(105deg,rgba(243,230,208,0) 40%,rgba(243,230,208,.16) 50%,rgba(243,230,208,0) 60%);transform:translateX(-60%)}
@media (prefers-reduced-motion:no-preference){
  .cs-case .on{animation:lamp 1.6s var(--ease) .9s both}
  .cs-case .sweep{animation:sweep 1.8s var(--ease) 2.4s 1 both}
  .cs-hero-text{animation:dark 1.4s var(--ease) .1s both}
  .cs-d.in .sweep{animation:sweep 1.8s var(--ease) .6s 1 both}
}
@keyframes lamp{from{opacity:0}to{opacity:1}}
@keyframes dark{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sweep{0%{opacity:0;transform:translateX(-60%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
/* sections */
.cs-sec{max-width:1440px;margin:0 auto;padding:var(--s7) var(--s5);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s4);border-top:1px solid rgba(212,180,131,.12)}
.cs-sec>.cs-num{grid-column:1 / span 2;padding-top:6px}
.cs-sec>.h2{grid-column:3 / span 10;margin-bottom:var(--s4)}
.cs-sec>.cs-sub,.cs-sec>.cs-fine,.cs-sec>.cs-more{grid-column:3 / span 7;margin-bottom:var(--s5)}
.cs-sub{font-style:italic;color:var(--bone);opacity:.85}
.cs-big{font-size:clamp(26px,2.6vw,36px);line-height:1.3;color:var(--bone);margin-bottom:var(--s4)}
.cs-story-body{grid-column:3 / span 7}
.cs-story-body p+p{margin-top:var(--s3)}
.cs-fine{font-size:var(--t-small);color:var(--bone);opacity:.75}
/* details: one large, two stacked */
.cs-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--s4);row-gap:var(--s5)}
.cs-d{margin:0;position:relative}
.cs-d img{display:block;width:100%;height:auto;background:#050307}
.cs-d .sweep{bottom:auto;aspect-ratio:4/3}
.cs-d figcaption{margin-top:var(--s3);font-size:17px;color:var(--bone);opacity:.9;max-width:44ch}
.cs-d figcaption b{display:block;font-family:"Cinzel",serif;font-weight:400;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--gold);margin-bottom:var(--s1)}
.cs-d1{grid-column:1 / span 7;grid-row:1 / span 2}
.cs-d2{grid-column:9 / span 4}
.cs-d3{grid-column:9 / span 4}
.cs-d3 img{aspect-ratio:4/3;object-fit:cover;object-position:50% 45%}
/* editions */
.cs-hero-ed{grid-column:3 / span 10;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--gold-faint)}
.cs-h3{font-family:"Cinzel",serif;font-weight:400;font-size:var(--t-h2);letter-spacing:.12em;text-transform:uppercase;margin:var(--s2) 0 var(--s1)}
.cs-ed-p{margin:var(--s3) 0}
.cs-spec{font-size:17px}
.cs-spec div{display:grid;grid-template-columns:9em 1fr;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid rgba(212,180,131,.14)}
.cs-spec dt{font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--gold);padding-top:4px}
.cs-later{grid-column:3 / span 10;list-style:none;margin-top:var(--s5)}
.cs-later li{display:grid;grid-template-columns:9em 14em 1fr;column-gap:var(--s4);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid rgba(212,180,131,.12)}
.cs-later .cs-h3{font-size:var(--t-h3);margin:0}
.cs-later .line{grid-column:2}
.cs-later li>p:last-child{grid-column:3;grid-row:1 / span 2;font-size:18px}
/* timeline */
.cs-steps{grid-column:3 / span 8;list-style:none;margin-bottom:var(--s4)}
.cs-steps li{display:grid;grid-template-columns:14em 1fr;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid rgba(212,180,131,.12)}
.cs-steps b{font-family:"Cinzel",serif;font-weight:400;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--gold);padding-top:5px}
/* faq */
.cs-qa{grid-column:3 / span 8}
.cs-qa details{border-bottom:1px solid rgba(212,180,131,.14)}
.cs-qa summary{cursor:pointer;list-style:none;padding:var(--s3) 0;font-size:var(--t-lead);display:flex;justify-content:space-between;gap:var(--s3)}
.cs-qa summary::-webkit-details-marker{display:none}
.cs-qa summary::after{content:"+";font-family:"Cinzel",serif;color:var(--gold)}
.cs-qa details[open] summary::after{content:"\2212"}
.cs-qa details p{padding:0 0 var(--s3);max-width:60ch;opacity:.9}
.cs-more{margin-top:var(--s4);font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase}
/* form */
.cs-form form,.cs-thanks{grid-column:3 / span 8;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.cs-f{display:flex;flex-direction:column;gap:var(--s2)}
.cs-f-wide{grid-column:1 / -1}
.cs-f label{font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--gold)}
.cs-f label i{font-family:"Cormorant Garamond",serif;text-transform:none;letter-spacing:0;font-size:15px;color:var(--bone);opacity:.75}
.cs-f input[type=text],.cs-f input[type=email],.cs-f select,.cs-f textarea{background:rgba(42,11,20,.35);border:0;border-bottom:1px solid var(--gold-input);color:var(--bone);font:inherit;font-size:20px;padding:10px 12px;border-radius:0;width:100%}
.cs-f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#d4b483 50%),linear-gradient(135deg,#d4b483 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.cs-f select option{background:#2a0b14;color:#f3e6d0}
.cs-f textarea{resize:vertical;min-height:7em}
.cs-f input:focus,.cs-f select:focus,.cs-f textarea:focus{outline:1px solid var(--gold);outline-offset:2px}
.cs-f [aria-invalid=true]{border-bottom-color:var(--petal)}
.cs-count{font-size:var(--t-small);opacity:.7;align-self:flex-end}
.cs-consent{flex-direction:row;align-items:flex-start;gap:var(--s3)}
.cs-consent input{appearance:none;width:22px;height:22px;flex:0 0 22px;border:1px solid var(--gold-input);background:transparent;margin-top:4px;cursor:pointer;display:grid;place-content:center}
.cs-consent input:checked::before{content:"";width:12px;height:12px;background:var(--gold)}
.cs-consent label{font-family:"Cormorant Garamond",serif;text-transform:none;letter-spacing:0;font-size:19px;color:var(--bone)}
.cs-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.cs-ts:empty{display:none}
.cs-submit{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cs-submit .btn[disabled]{opacity:.6;cursor:wait}
.cs-status{font-style:italic;color:var(--gold);min-height:1.5em}
.cs-status.err{color:#e7a3ad}
.cs-privacy{font-size:var(--t-small);line-height:1.6;opacity:.8;max-width:70ch}
.cs-thanks{display:block}
.cs-thanks[hidden]{display:none}
.cs-thanks:focus{outline:none}
.cs-form>noscript{grid-column:3 / span 8}
/* reveal */
[data-reveal]{opacity:1;transform:none}
.js [data-reveal]:not(.in){opacity:0;transform:translateY(16px)}
@media (prefers-reduced-motion:reduce){.js [data-reveal]:not(.in){opacity:1;transform:none}}
/* tablet */
@media (max-width:1024px){
  .cs-hero{grid-template-columns:1fr;padding-top:var(--s7);row-gap:var(--s5)}
  .cs-hero-text,.cs-case{grid-column:1}
  .cs-case{max-width:520px;max-height:none}
  .cs-sec>.cs-num{grid-column:1 / -1;margin-bottom:var(--s2)}
  .cs-sec>.h2,.cs-sec>.cs-sub,.cs-sec>.cs-fine,.cs-sec>.cs-more,.cs-story-body,.cs-hero-ed,.cs-later,.cs-steps,.cs-qa,.cs-form form,.cs-thanks,.cs-form>noscript{grid-column:1 / -1}
  .cs-d1{grid-column:1 / -1;grid-row:auto}.cs-d2{grid-column:1 / span 6}.cs-d3{grid-column:7 / span 6}
}
/* phone */
@media (max-width:640px){
  .cs-top{padding:var(--s3) var(--s3)}
  .cs-nav a:not(.cs-cta-sm){display:none}
  .cs-hero{padding:96px var(--s3) var(--s5);min-height:auto}
  .cs-h1{font-size:clamp(36px,10.5vw,48px)}
  .cs-lede{font-size:21px}
  .cs-sec{padding:var(--s6) var(--s3)}
  .cs-d2,.cs-d3{grid-column:1 / -1}
  .cs-hero-ed{grid-template-columns:1fr;gap:var(--s4)}
  .cs-spec div{grid-template-columns:7.5em 1fr}
  .cs-later li{grid-template-columns:1fr}
  .cs-later .line,.cs-later li>p:last-child{grid-column:1;grid-row:auto}
  .cs-later .line:empty,.cs-later .line{margin-bottom:var(--s2)}
  .cs-steps li{grid-template-columns:1fr;gap:var(--s1)}
  .cs-form form{grid-template-columns:1fr}
  .cs-qa summary{font-size:21px}
}
/* footer alignment shared with guides */
.foot{max-width:1440px;margin:0 auto;padding-inline:var(--s5);border-top:1px solid rgba(212,180,131,.12)}
@media (max-width:640px){.foot{padding-inline:var(--s3)}.foot .legal{line-height:2.2}}
.cs-form form[hidden]{display:none}
.skip:not(:focus){clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0}
main .cs-actions a,main .cs-actions a:hover{text-decoration:none}
@media (max-width:640px){.cs-hero{padding-top:120px}}
/* closer look, desktop: the lid image fills the full height of the right column so both captions end on one line */
@media (min-width:1025px){
  .cs-grid{align-items:stretch}
  .cs-d1{display:flex;flex-direction:column}
  .cs-d1 img{flex:1 1 0;min-height:0;height:0;object-fit:cover;object-position:40% 40%}
  .cs-d1 .sweep{aspect-ratio:auto;bottom:96px}
  .cs-d1 figcaption{min-height:72px}
  .cs-d3 figcaption{min-height:72px}
}
/* plain facts (replaces the close-ups, 20 Oct 16:09) */
.cs-facts{grid-column:3 / span 8}
.cs-facts div{display:grid;grid-template-columns:14em 1fr;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid rgba(212,180,131,.12)}
.cs-facts dt{font-family:"Cinzel",serif;font-size:var(--t-label);letter-spacing:var(--track-cap);text-transform:uppercase;color:var(--gold);padding-top:5px}
@media (max-width:1024px){.cs-facts{grid-column:1 / -1}}
@media (max-width:640px){.cs-facts div{grid-template-columns:1fr;gap:var(--s1)}}
