/* allways — archive, 2024–2026 */
:root{
  --cream:#F5EFE5; --ink:#1B1814; --ink-2:#2A2520; --muted:#5E554B; --muted-2:#4A433B;
  --olive:#4F5A2E; --tan:#B5874F; --oxford:#A9C4DE; --paper:#FBF8F2;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--ink)}a:hover{color:var(--olive)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wmA{position:absolute;display:block;height:auto;opacity:.04;pointer-events:none;user-select:none;z-index:0}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;max-height:1080px;overflow:hidden;background:#2E2622}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s ease}
.slide.on{opacity:1}
.slide picture{display:block;width:100%;height:100%}
.slide img,.ph-hero{width:100%;height:100%;object-fit:cover;display:block;object-position:var(--pm,50% 50%)}
@media (min-aspect-ratio:1/1){.slide img{object-position:var(--pd,50% 50%)}}
.ph-hero{position:relative}
.t1{background:#4A3B30}.t2{background:#4F5A2E}.t3{background:#3E4A5A}.t4{background:#2E2622}.t5{background:#5E4632}
.ph-label{position:absolute;top:28px;right:28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,239,229,.9);border:1px solid rgba(245,239,229,.45);padding:8px 12px;max-width:60%}
.scrim{position:absolute;left:0;right:0;bottom:0;height:50%;background:linear-gradient(to top,rgba(27,24,20,.34),rgba(27,24,20,0));pointer-events:none}
.ov{position:absolute;left:56px;bottom:112px;color:#fff;text-shadow:0 1px 20px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.25);max-width:680px}
.ov .logo{margin:0;line-height:0}
.ov .logo img{display:block;width:clamp(240px,36vw,540px);height:auto;filter:drop-shadow(0 1px 14px rgba(0,0,0,.28)) drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.ov .yrs{font-size:13px;letter-spacing:.26em;margin:22px 0 10px;font-weight:500}
.ov .line{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2vw,24px);margin:0}
.ctrls{position:absolute;right:40px;bottom:28px;display:flex;align-items:center;gap:6px;color:#fff}
.count{font-size:12px;letter-spacing:.16em;margin-right:10px;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.ib{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(27,24,20,.2);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .3s}
.ib:hover{background:rgba(27,24,20,.45)}
.ib svg[hidden]{display:none}
.ib:focus-visible,.dot:focus-visible,.cue:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dots{display:flex;margin:0 4px}
.dot{width:36px;height:44px;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dot span{display:block;width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.6);transition:width .4s,background .4s;box-shadow:0 0 6px rgba(0,0,0,.25)}
.dot[aria-current="true"] span{background:#fff;width:20px}
.cue{position:absolute;left:50%;bottom:24px;margin-left:-22px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;filter:drop-shadow(0 1px 6px rgba(0,0,0,.4))}
.cue:hover{color:#fff}
.cue svg{animation:cuePulse 2.4s ease-in-out infinite}
@keyframes cuePulse{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(5px);opacity:1}}

/* ---------- LETTER ---------- */
.letter{position:relative;padding:168px 24px 96px}
.letter .wmA{width:clamp(300px,44vw,660px);top:56px;left:-4vw}
.col{max-width:640px;margin:0 auto;position:relative;z-index:1}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 44px;display:flex;align-items:center;gap:14px}
.kicker .rule{width:40px;height:1px;background:var(--tan)}
.lede{font-family:var(--serif);font-size:clamp(24px,2.6vw,31px);line-height:1.45;margin:0 0 24px;font-weight:400}
.col h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.2;margin:72px 0 22px}
.b{font-size:18px;line-height:1.75;margin:0 0 24px;color:var(--ink-2)}
.fig-wide{position:relative;z-index:1;max-width:1240px;margin:96px auto 24px}
.fig-wide img,.fig-wide .wph{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.wph{background:#E4D9C6}
.fcap{font-size:13px;color:var(--muted-2);margin:12px 0 0}
.pq{position:relative;z-index:1;max-width:900px;margin:112px auto 40px;text-align:center;padding:0 8px}
.pq .rule{width:56px;height:1px;background:var(--tan);margin:0 auto 36px}
.pq p{font-family:var(--serif);font-style:italic;font-size:clamp(34px,4.6vw,62px);line-height:1.14;color:var(--olive);margin:0;letter-spacing:-.005em}
.sign{margin-top:72px}
.sign p{margin:0;font-size:18px;line-height:1.6}
.sign .nm{font-family:var(--serif);font-style:italic;font-size:46px;line-height:1.2;margin:10px 0 2px}

/* ---------- SECTION HEADS ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;border-top:1px solid rgba(27,24,20,.2);padding-top:28px;margin-bottom:72px;gap:16px 24px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,88px);line-height:1;margin:0;letter-spacing:-.015em}
.sec-head .meta{font-size:12px;color:var(--muted);letter-spacing:.22em;text-transform:uppercase;margin:0}

/* ---------- GALLERY ---------- */
.gal{padding:128px 56px 144px;max-width:1440px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:40px;column-gap:24px;row-gap:24px}
.gi{margin:0;display:flex;flex-direction:column;gap:10px;min-height:0}
.gbtn{flex:1;min-height:0;padding:0;border:0;background:none;cursor:zoom-in;display:block;width:100%;overflow:hidden}
.gbtn:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.gbtn img,.gph{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s ease}
.gbtn:hover img,.gbtn:hover .gph{transform:scale(1.025)}
.gph,.wph,.lb-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px}
.phl{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#3B342D;line-height:1.7;max-width:260px}
.p-peach{background:#EBD3BE}.p-cream{background:#E4D9C6}.p-olive{background:#D3D4BA}.p-blue{background:#D5E1EC}.p-tan{background:#E2C8A6}
.gcap{font-size:13px;color:var(--muted-2);margin:0;line-height:1.4}
.gcap .n{font-variant-numeric:tabular-nums;margin-right:2px;color:var(--olive)}
.gi{grid-column:var(--c);grid-row:var(--r)}
.chapter + .chapter{margin-top:96px}
.ch-head{display:flex;align-items:baseline;gap:16px;font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(26px,2.6vw,34px);margin:0 0 40px;color:var(--ink)}
.ch-n{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.22em;color:var(--olive);min-width:28px}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:50;background:#14110E;color:var(--cream);display:flex;flex-direction:column;padding:20px 24px 28px}
.lb[hidden]{display:none}
.lb-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 0}
.lb-fig{flex:1;min-width:0;height:100%;max-width:1100px;margin:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center}
.lb-media{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.lb-media img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lb-ph{width:min(100%,880px);height:100%}
.lb-cap{font-size:14px;margin:0;color:var(--cream)}
.lb .ib{border-color:rgba(245,239,229,.55);background:transparent;flex:none}
.lb .ib:hover{background:rgba(245,239,229,.12)}
body.lb-open{overflow:hidden}

/* ---------- YOUR WORDS ---------- */
.words{padding:128px 0 0;overflow:hidden}
.words .sec-head{margin:0 56px 64px}
.mrow{overflow:hidden;padding:10px 0}
.set{display:flex;gap:20px;align-items:stretch;flex-wrap:wrap;justify-content:center;padding:0 24px 20px}
.mq-on .mrow{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding:10px 0}
.mq-on .track{display:flex;width:max-content;animation-timing-function:linear;animation-iteration-count:infinite}
.mq-on .track.left{animation-name:mqLeft}
.mq-on .track.right{animation-name:mqRight}
.mq-on .set{flex-wrap:nowrap;justify-content:flex-start;padding:0 20px 0 0}
.mq-on .mrow:hover .track,.mq-on .mrow:focus-within .track{animation-play-state:paused}
@keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.card{margin:0;flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.card.rv{width:400px;padding:32px 32px 28px;background:var(--paper);border:1px solid rgba(27,24,20,.08)}
.card.ig{width:300px;padding:24px 26px;background:rgba(169,196,222,.34);border:1px solid rgba(169,196,222,.6)}
.card.ph{background:transparent;border:1px dashed rgba(27,24,20,.42);color:var(--muted)}
.card blockquote{margin:0}
.q-serif{font-family:var(--serif);font-size:21px;line-height:1.45}
.q-sans{font-size:17px;line-height:1.55}
.card figcaption{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.4}
.card .nm{font-weight:500;color:var(--ink)}
.card.ph .nm{color:var(--muted)}
.card .pd{color:var(--muted)}
.card .via{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#4A4F57}

/* ---------- CLOSING ---------- */
.closing{position:relative;text-align:center;padding:152px 24px 0;overflow:hidden}
.closing .ask{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);margin:0 0 14px;position:relative;z-index:1}
.closing .mail{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3.6vw,46px);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:10px;color:var(--ink);position:relative;z-index:1;display:inline-block;padding:6px 0}
.closing .mail:hover{color:var(--olive)}
.base{position:relative;margin-top:144px;height:340px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:40px}
.base .wmA{width:400px;left:50%;margin-left:-200px;bottom:-90px}
.base p{position:relative;z-index:1;font-size:13px;letter-spacing:.12em;color:var(--muted);margin:0}

/* ---------- PHONE ---------- */
@media (max-width:760px){
  .ov{left:20px;right:20px;bottom:116px}
  .scrim{height:60%;background:linear-gradient(to top,rgba(27,24,20,.46),rgba(27,24,20,0))}
  .ctrls{left:12px;right:auto;bottom:16px;gap:2px}
  .count{display:none}
  .dot{width:30px}
  .cue{left:auto;right:12px;margin-left:0;bottom:16px}
  .ph-label{top:16px;right:16px;left:16px;max-width:none}
  .letter{padding:112px 20px 72px}
  .col h2{font-size:26px;margin-top:56px}
  .fig-wide{margin:64px -20px 16px}
  .fig-wide .fcap{padding:0 20px}
  .pq{margin:80px auto 24px}
  .gal{padding:88px 16px 96px}
  .sec-head{margin-bottom:44px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;column-gap:12px;row-gap:28px}
  .grid .gi{grid-column:auto;grid-row:auto}
  .chapter + .chapter{margin-top:80px}
  .ch-head{margin-bottom:24px}
  .grid .gbtn{flex:none;aspect-ratio:2/3}
  .grid .gi.wide{grid-column:1/-1}
  .grid .gi.wide .gbtn{aspect-ratio:3/2}
  .words{padding-top:88px}
  .words .sec-head{margin:0 16px 40px}
  .card.rv{width:300px;padding:24px}
  .card.ig{width:240px;padding:20px}
  .q-serif{font-size:19px}
  .lb{padding:12px 12px 20px}
  .lb-stage{gap:8px}
  .closing{padding-top:104px}
  .base{margin-top:96px;height:260px}
  .base .wmA{width:300px;margin-left:-150px;bottom:-70px}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slide,.dot span,.gbtn img,.gph{transition:none}
  .cue svg{animation:none;opacity:.9}
  .card.rv,.card.ig{width:min(100%,400px)}
}

/* ---------- WALL OF LOVE ---------- */
.wall{max-width:1440px;margin:0 auto;padding:0 56px}
.wall-src{columns:4 260px;column-gap:20px}
.wall-src .wl{break-inside:avoid;margin-bottom:20px}
.wall-js .wall-src{display:none}
.wall-cols{position:relative}
.wall-cols > .wl{position:absolute;top:0;left:0;box-sizing:border-box}
.wall-sentinel{height:1px}
.wl{margin:0;background:var(--paper);border:1px solid rgba(27,24,20,.08);border-radius:16px;padding:22px 22px 18px;box-shadow:0 1px 2px rgba(27,24,20,.04)}
.wl-stars{display:flex;gap:2px;color:#86602F;margin-bottom:14px}
.wl-stars .st{display:inline-flex}
.wl-stars .st.off{color:rgba(27,24,20,.22)}
.wl-q{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.wl.open .wl-q{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.wl-more{background:none;border:0;padding:10px 0 4px;min-height:40px;font:500 13px/1 var(--sans);color:var(--olive);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.wl-more[hidden]{display:none}
.wl-more:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wl-rv figcaption{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:3px 10px;font-size:13px;line-height:1.4}
.wl-nm{font-weight:500;color:var(--ink);font-size:14px}
.wl-vb{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.wl-pd,.wl-dt{flex-basis:100%;color:var(--muted)}
.wl-dt{font-size:12px;letter-spacing:.04em}
.wl-shot{padding:12px 12px 14px;background:#fff}
.wl-img{overflow:hidden;border-radius:10px}
.wl-shot img{display:block;width:100%;max-width:var(--w);height:auto;margin:0 auto}
.wl-dm .wl-img{background:#fff}
/* single column: wide DM screenshots keep a readable size and scroll sideways */
.wall-one .wl-dm .wl-img{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wall-one .wl-dm img{width:calc(var(--w) * .78);max-width:none;margin:0}
.wl-shot figcaption{display:flex;align-items:baseline;gap:10px;padding:12px 6px 0}
.wl-lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){
  .wall{padding:0 16px}
  .wl{padding:18px 18px 14px}
  .wl-q{font-size:17px}
}