/* ===================================================================
   SESSION · shared design layer
   Loaded after each page's own <style> blocks, so it wins.
   Tokens are re-pointed by restyle.py; this file adds the system.
   =================================================================== */
:root{
  --s-ink:#0C0C0E; --s-ink2:#141417;
  --s-burnt:#BF512E; --s-burnt-lt:#E7A483; --s-burnt-deep:#A33D1E;
  --s-paper:#FFFFFF; --s-paper-alt:#F7F2EA; --s-sand:#F0E7DA;
  --s-rule:#E9E4DC; --s-rule-dark:#2A2A2E;
  --s-muted:#6E6A66; --s-muted-dark:#A5A09A;
  --s-serif:'Playfair Display',Georgia,serif;
  --s-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --s-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

/* ── type ─────────────────────────────────────────────────────── */
body{font-family:var(--s-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--s-serif);font-weight:400;letter-spacing:-.015em}
h1{line-height:.96}
h2{line-height:1.05}
h3{line-height:1.18}
em{font-style:italic}

/* ── the cue label, the signature of the system ──────────────── */
.s-cue{display:flex;align-items:center;gap:.9rem;font-family:var(--s-sans);
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--s-burnt);margin-bottom:1.4rem}
.s-cue::before{content:"";width:38px;height:1px;background:var(--s-burnt);flex:none}
.s-dark .s-cue,.s-cue.on-dark{color:var(--s-burnt-lt)}
.s-dark .s-cue::before,.s-cue.on-dark::before{background:var(--s-burnt-lt)}

/* ── buttons ─────────────────────────────────────────────────── */
.s-btn{display:inline-block;text-align:center;font-family:var(--s-sans);
  font-size:.93rem;font-weight:500;letter-spacing:normal;text-transform:none;
  padding:.92rem 1.7rem;border-radius:100px;background:var(--s-burnt);color:#fff;
  text-decoration:none;border:1px solid var(--s-burnt);cursor:pointer;
  transition:.25s;width:auto}
.s-btn:hover{background:var(--s-burnt-deep);border-color:var(--s-burnt-deep);color:#fff}
.s-btn.ghost{background:transparent;color:inherit;border-color:currentColor;opacity:.92}
.s-btn.ghost:hover{background:rgba(255,255,255,.1);color:inherit}
.s-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}

/* ── bands ───────────────────────────────────────────────────── */
.s-band{padding:clamp(3.4rem,7vw,7rem) 0}
.s-paper{background:var(--s-paper);color:var(--s-ink)}
.s-paper h1,.s-paper h2,.s-paper h3{color:var(--s-ink)}
.s-paper p{color:var(--s-muted)}
.s-tint{background:var(--s-paper-alt);color:var(--s-ink)}
.s-tint h1,.s-tint h2,.s-tint h3{color:var(--s-ink)}
.s-sandy{background:var(--s-sand);color:var(--s-ink)}
.s-dark{background:var(--s-ink);color:#F3F0EC}
.s-dark h1,.s-dark h2,.s-dark h3{color:#fff}
.s-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.s-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}

/* ── photographic hero band ──────────────────────────────────── */
.s-hero{position:relative;overflow:hidden;background:var(--s-ink);
  padding:clamp(5rem,10vw,9rem) 0;isolation:isolate}
.s-hero>img,.s-hero>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;opacity:.34}
.s-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(12,12,14,.93) 0%,rgba(12,12,14,.74) 45%,rgba(12,12,14,.42) 100%)}
.s-hero h1{color:#fff;font-size:clamp(2.6rem,7vw,6.2rem)}
.s-hero h1 em{color:var(--s-burnt-lt)}
.s-hero p{color:#DBD5CE;max-width:44ch}

/* ── photo rows ──────────────────────────────────────────────── */
.s-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.5rem);margin-top:2.6rem}
.s-fig{margin:0;border-radius:13px;overflow:hidden;position:relative;background:var(--s-ink2)}
.s-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .7s ease}
.s-fig:hover img{transform:scale(1.05)}
.s-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.1rem;
  font-family:var(--s-sans);font-size:.85rem;color:#fff;
  background:linear-gradient(transparent,rgba(12,12,14,.9))}

/* ── spec list ───────────────────────────────────────────────── */
.s-spec{list-style:none;margin:1.6rem 0 0;padding:0}
.s-spec li{position:relative;padding:.62rem 0 .62rem 1.5rem;
  border-bottom:1px solid var(--s-rule);font-size:.97rem}
.s-spec li::before{content:"";position:absolute;left:0;top:1.28em;width:8px;height:1px;background:var(--s-burnt)}
.s-dark .s-spec li{border-bottom-color:var(--s-rule-dark);color:#DCD7D0}

/* ── quote band ──────────────────────────────────────────────── */
.s-quote{background:var(--s-burnt);color:#fff;padding:clamp(3rem,6vw,5.6rem) 0}
.s-quote blockquote{font-family:var(--s-serif);font-size:clamp(1.5rem,3.2vw,2.8rem);
  line-height:1.2;margin:0;max-width:22ch}
.s-quote .s-at{font-family:var(--s-sans);font-size:.76rem;letter-spacing:.17em;
  text-transform:uppercase;margin-top:1.5rem;opacity:.85}

/* ── reveal ──────────────────────────────────────────────────── */
.s-rv{opacity:0;transform:translateY(24px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.s-rv.in{opacity:1;transform:none}

@media(max-width:900px){
  .s-two{grid-template-columns:1fr}
  .s-row{grid-template-columns:1fr}
}