/* ============================================================
   FLAVOR ARRAY — theme stylesheet
   Homepage (Flood / Coral) + reading page + archive index.
   Fonts: Archivo (display/ui), JetBrains Mono (meta), Newsreader (reading)
   ============================================================ */
:root{
  --acc:oklch(0.62 0.185 34);      /* coral */
  --acc-deep:oklch(0.5 0.16 32);
  --cream:#f3ead9;
  --ink:#1c0f09;
  --paper:#f1ece0;
  --paper-line:#dcd4c2;
  --muted:#8a8275;
  --measure:42rem;
}
*{ box-sizing:border-box; margin:0; }
html{ height:100%; }
body{ min-height:100%; font-family:'Archivo',sans-serif; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; }
a{ color:inherit; text-decoration:none; }

/* ============================================================
   HOMEPAGE — full-bleed coral "Flood" with motion
   ============================================================ */
body.home{ background:var(--acc); color:var(--cream); overflow:hidden; height:100%; }
.stage{ height:100vh; display:flex; flex-direction:column; position:relative; overflow:hidden; }

.ghost{ position:absolute; top:-7vh; right:-2vw; font-weight:900; font-stretch:125%;
  font-size:clamp(360px,46vw,760px); line-height:1; color:rgba(243,234,217,.1);
  letter-spacing:-.04em; pointer-events:none; z-index:0; will-change:transform,opacity;
  opacity:0; transition:opacity 1.1s ease; }
.ghost .floater{ display:block; animation:float 11s ease-in-out infinite alternate; }
@keyframes float{ from{ transform:translateY(-1.4vh); } to{ transform:translateY(1.8vh); } }
.shown .ghost{ opacity:1; }

.top{ display:flex; justify-content:space-between; align-items:center; padding:22px 40px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  border-bottom:1.5px solid rgba(243,234,217,.32); position:relative; z-index:3;
  opacity:0; transform:translateY(-14px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.shown .top{ opacity:1; transform:none; }
.top nav{ display:flex; gap:26px; }
.top nav a{ transition:opacity .2s; }
.top nav a:hover{ opacity:.6; }

.well{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 38px;
  position:relative; z-index:2; }
.word{ font-weight:900; font-stretch:125%; text-transform:uppercase; letter-spacing:-.035em;
  line-height:.78; font-size:clamp(86px,15.5vw,232px); will-change:transform,clip-path; }
.l1{ clip-path:inset(0 0 110% 0); transform:translateY(26px);
  transition:clip-path .9s cubic-bezier(.2,.78,.2,1) .18s, transform .9s cubic-bezier(.2,.78,.2,1) .18s; }
.shown .l1{ clip-path:inset(0 0 -10% 0); transform:none; }
.l2{ text-align:right; clip-path:inset(0 110% 0 0);
  transition:clip-path .95s cubic-bezier(.2,.78,.2,1) .44s; }
.shown .l2{ clip-path:inset(0 -8% 0 0); }
.l2 .hollow{ -webkit-text-stroke:clamp(1.5px,.18vw,3px) var(--cream); color:transparent; }

.between{ display:flex; justify-content:space-between; align-items:center; padding:18px 4px;
  opacity:0; transform:translateY(16px); transition:opacity .7s ease .74s, transform .7s ease .74s; }
.shown .between{ opacity:1; transform:none; }
.between .lede{ max-width:440px; font-size:clamp(14px,1.15vw,17px); line-height:1.45; font-weight:500; }
.between .meta{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; text-align:right; color:rgba(243,234,217,.72); line-height:1.7; }

.ticker{ display:flex; border-top:1.5px solid rgba(243,234,217,.32); position:relative; z-index:3;
  font-family:'JetBrains Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.tg{ padding:16px 24px; border-right:1px solid rgba(243,234,217,.2); display:flex; align-items:center;
  cursor:pointer; opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease, background .18s, color .18s; }
.shown .tg{ opacity:1; transform:translateY(0); }
.shown .tg:nth-child(1){ transition-delay:.80s,.80s,0s,0s; }
.shown .tg:nth-child(2){ transition-delay:.88s,.88s,0s,0s; }
.shown .tg:nth-child(3){ transition-delay:.96s,.96s,0s,0s; }
.shown .tg:nth-child(4){ transition-delay:1.04s,1.04s,0s,0s; }
.shown .tg:nth-child(5){ transition-delay:1.12s,1.12s,0s,0s; }
.tg.lead{ background:var(--cream); color:var(--ink); letter-spacing:.18em; font-weight:700; }
.tg:not(.lead):hover{ background:var(--ink); color:var(--cream); }
.tg .star{ color:rgba(243,234,217,.55); margin-right:9px; }
.tg:not(.lead):hover .star{ color:rgba(243,234,217,.8); }
.tg.lead .arrow{ display:inline-block; margin-left:6px; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(2px,-2px); } }

@media (prefers-reduced-motion: reduce){ .ghost .floater,.tg.lead .arrow{ animation:none !important; } }

/* ============================================================
   INNER PAGES — shared header / footer on paper
   ============================================================ */
body.inner{ background:var(--paper); color:var(--ink); }
.inner-wrap{ min-height:100vh; display:flex; flex-direction:column; }
.site-head{ display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px; border-bottom:1.5px solid var(--ink); position:sticky; top:0;
  background:var(--paper); z-index:5; }
.site-head .brand{ font-weight:800; font-size:20px; letter-spacing:-.01em; }
.site-head .brand b{ color:var(--acc); }
.site-head nav{ display:flex; gap:24px; font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; }
.site-head nav a{ color:var(--muted); transition:color .18s; }
.site-head nav a:hover{ color:var(--ink); }

.site-foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 26px;
  padding:26px 40px; border-top:1.5px solid var(--ink); font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.site-foot a:hover{ color:var(--ink); }

/* social links — inline SVG icons, restyled per context */
.social{ list-style:none; display:flex; align-items:center; gap:16px; margin:0; padding:0; }
.social a{ display:inline-flex; align-items:center; justify-content:center; transition:color .18s,background .18s,border-color .18s; }
.social svg{ width:17px; height:17px; display:block; fill:currentColor; }
.social .social-text{ font-size:11px; }       /* fallback for platforms without an icon */
.site-foot .social a{ color:var(--muted); }
.site-foot .social a:hover{ color:var(--ink); }

/* ============================================================
   READING PAGE (single)
   ============================================================ */
.read{ width:100%; max-width:var(--measure); margin:0 auto; padding:74px 24px 90px; }
.read .kicker{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--acc); margin-bottom:22px; }
.read h1{ font-weight:800; font-size:clamp(40px,5.2vw,62px); line-height:1.0; letter-spacing:-.022em;
  text-wrap:balance; }
.read .byline{ margin-top:20px; font-family:'JetBrains Mono',monospace; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.read .rule{ height:1.5px; background:var(--ink); margin:30px 0 6px; }

.read .body{ font-family:'Newsreader',serif; font-size:20px; line-height:1.62; color:#2c2620; }
.read .body > p{ margin-top:1.15em; }
.read .body > p:first-of-type{ margin-top:1.4em; }
.read .body > p:first-of-type::first-letter{ font-family:'Archivo',sans-serif; font-weight:900;
  float:left; font-size:78px; line-height:.72; padding:7px 12px 0 0; color:var(--acc); }
.read .body h2{ font-family:'Archivo',sans-serif; font-weight:800; font-size:30px; letter-spacing:-.01em;
  margin:1.6em 0 .1em; line-height:1.1; }
.read .body h3{ font-family:'Archivo',sans-serif; font-weight:700; font-size:22px; margin:1.4em 0 0; }
.read .body a{ color:var(--acc); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; }
.read .body blockquote{ margin:1.5em 0; padding:0 8px; font-size:27px; line-height:1.32;
  font-style:italic; color:var(--ink); text-wrap:balance; }
.read .body blockquote p{ margin:0; }
.read .body em{ font-style:italic; }
.read .body strong{ font-weight:600; }
.read .body hr{ border:none; height:1px; background:var(--paper-line); margin:2em 0; }
.read .body code{ font-family:'JetBrains Mono',monospace; font-size:.86em; background:#e7e0d0;
  padding:1px 5px; border-radius:3px; }
.read .body ul,.read .body ol{ margin:1.1em 0; padding-left:1.3em; }
.read .body li{ margin:.4em 0; }

/* "Elsewhere" social block on About/colophon pages */
.read .elsewhere{ margin-top:40px; padding-top:26px; border-top:1.5px solid var(--ink); }
.read .elsewhere .lbl{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--acc); margin-bottom:18px; }
.read .elsewhere .social{ flex-wrap:wrap; gap:14px; }
.read .elsewhere .social a{ width:52px; height:52px; border:1.5px solid var(--ink); color:var(--ink); }
.read .elsewhere .social svg{ width:22px; height:22px; }
.read .elsewhere .social a:hover{ background:var(--ink); color:var(--paper); }
.read .elsewhere .social .social-text{ font-family:'Archivo',sans-serif; font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; padding:0 10px; }

.read .back{ display:inline-block; margin-top:54px; font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc);
  border-bottom:1px solid var(--acc); padding-bottom:2px; }
.read .back:hover{ color:var(--acc-deep); border-color:var(--acc-deep); }

/* ============================================================
   ARCHIVE INDEX (list) — brutalist numbered rows
   ============================================================ */
.archive{ flex:1; }
.archive-head{ padding:64px 40px 30px; border-bottom:1.5px solid var(--ink); }
.archive-head h1{ font-weight:900; font-stretch:120%; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(56px,9vw,116px); line-height:.86; }
.archive-head p{ margin-top:18px; max-width:540px; font-size:18px; line-height:1.45; font-weight:500; }
.archive .row{ display:grid; grid-template-columns:66px 1fr auto; align-items:center; gap:28px;
  padding:24px 40px; border-bottom:1px solid rgba(28,15,9,.16); transition:background .15s,color .15s; }
.archive .row:hover{ background:var(--ink); color:var(--paper); }
.archive .row .num{ font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.1em;
  color:var(--muted); }
.archive .row:hover .num{ color:rgba(241,236,224,.8); }
.archive .row .title{ font-weight:800; font-stretch:110%; font-size:clamp(22px,3vw,34px);
  letter-spacing:-.015em; }
.archive .row .info{ display:flex; gap:22px; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.archive .row:hover .info{ color:rgba(241,236,224,.8); }

@media (max-width:680px){
  .top{ padding:16px 20px; font-size:10px; letter-spacing:.12em; }
  .top nav{ gap:14px; }
  .well{ padding:0 20px; }
  .word{ font-size:clamp(52px,17vw,86px); }
  .between{ flex-direction:column; gap:10px; }
  .between .meta{ text-align:left; }
  .ticker{ flex-direction:column; }
  .tg{ font-size:10px; padding:14px 20px; width:100%; border-right:none; border-bottom:1px solid rgba(243,234,217,.2); }
  .site-head,.site-foot{ padding-left:20px; padding-right:20px; }
  .archive-head,.archive .row{ padding-left:20px; padding-right:20px; }
  .archive .row .info{ display:none; }
}