/* forgeyear.com — the Quiet Workshop world (see DESIGN.md), as a single page. */

:root{
  --bg:#14110f; --panel:#1e1a17; --panel2:#272220; --line:#3a332e; --text:#f2ece6; --muted:#a59a90;
  --ember:#e0782f; --ember2:#f4a259; --flame:#ef7a22; --ash-bg:#1b1816; --ash-line:#2e2925; --ash-text:#958b82;
  --ember-bg:#2a1c12; --on-ember:#1a0f07; --anvil:#efe4d2;
  --font-display:Oswald,'Arial Narrow',sans-serif; --font-body:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --font-scripture:'Source Serif 4',Georgia,serif;
  --gutter:20px; --wide:1120px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f1ea; --panel:#fffdf9; --panel2:#f0e8de; --line:#e0d5c7; --text:#231d18; --muted:#6b5f55;
    --ember2:#9a4614; --anvil:#3b302a; --ash-bg:#ece5dc; --ash-line:#ddd2c4; --ash-text:#625649; --ember-bg:#fff4ea;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--ember) 35%,transparent);color:var(--text)}
img,svg.mark{display:block}
a{color:inherit}
h1,h2{font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin:0;text-wrap:balance}
p,li,dd{text-wrap:pretty}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:8px}

.skip{position:absolute;left:-999px;top:8px;padding:10px 14px;background:var(--panel);border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* ---------- Bar ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;max-width:var(--wide);margin:0 auto;
  padding:calc(14px + env(safe-area-inset-top)) var(--gutter) 6px}
.brand{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;
  font:600 16px var(--font-display);letter-spacing:.24em;text-transform:uppercase}
.bar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--muted);text-decoration:none;font-size:16px}
.bar nav a:hover{color:var(--text)}

main > section{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}

/* ---------- 1. The fork ---------- */
main > .fork{padding-top:18px}
.fork h1{font-size:clamp(36px,10.4vw,84px);line-height:1;max-width:14ch}
.fork-split{display:grid;gap:12px;margin-top:22px}
.year{border-radius:14px;padding:18px 18px 16px}
.year h2{font-size:16px;letter-spacing:.16em;margin-bottom:10px}
.year ul{list-style:none;margin:0;padding:0}
.year li{padding:6px 0;font-size:16px}
.ash{background:var(--ash-bg);border:1px solid var(--ash-line);color:var(--ash-text)}
.ash h2{color:var(--ash-text)}
.ash li{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--ash-text) 55%,transparent);text-decoration-thickness:1.5px}
.year-end{margin:12px 0 0;font-size:16px}
.year-end span{margin-right:6px;font:600 12px var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.ember .year-end{color:var(--ember2)}
.seam{display:none}
.ember{background:var(--ember-bg);border:1px solid var(--ember);box-shadow:0 18px 40px -20px rgb(0 0 0 / .6)}
.ember h2{color:var(--ember2)}
.ember li{display:flex;align-items:center;gap:12px}
.ember li::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--flame);
  box-shadow:0 0 0 0 transparent;transition:box-shadow .9s cubic-bezier(.16,1,.3,1)}
.ember li.lit::before{box-shadow:0 0 10px 1px var(--flame)}
.cta{display:block;margin-top:16px;padding:17px 20px;border-radius:14px;background:var(--ember);color:var(--on-ember);
  text-align:center;text-decoration:none;font:600 16px var(--font-display);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .15s ease-out,filter .2s}
.cta:hover{filter:brightness(1.07)}
.cta:active{transform:scale(.98)}
.cta-alt{display:block;margin-top:6px;min-height:44px;line-height:44px;text-align:center;color:var(--muted);font-size:16px;
  text-decoration:underline;text-underline-offset:3px}
.cta-alt:hover{color:var(--text)}
.fork-note{margin:16px 0 0;font:600 18px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Ember lines ignite once, in order, when the page opens. Visible by default without script or motion. */
.js .ember li{opacity:.35;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.js .ember li.lit{opacity:1}
@media (prefers-reduced-motion: reduce){.js .ember li{opacity:1}}

/* ---------- Shared section rhythm ---------- */
main > :is(.turn,.fires,.anvil,.miss,.year-map,.close){margin-top:88px}
main section h2:not(.year h2){font-size:clamp(28px,7.4vw,52px);line-height:1.04}
.section-lead,.turn-lead{margin:14px 0 0;max-width:36rem;font-size:18px;color:var(--muted)}

/* ---------- 2. The turn ---------- */
.turn-lead{color:var(--text)}
.aim{margin:20px 0 0;max-width:36rem;font-size:18px;color:var(--muted)}
.aim strong{color:var(--text);font-weight:600}
.verse{margin:30px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.verse p{margin:0;font:italic 400 clamp(24px,6vw,40px)/1.3 var(--font-scripture);text-wrap:balance}
.verse cite{display:block;margin-top:14px;font:600 12px var(--font-display);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--ember2)}

/* ---------- 3. Today's fires ---------- */
.fires-copy p{margin:14px 0 0;max-width:32rem;font-size:18px;color:var(--muted)}
.today-card{margin-top:24px;max-width:420px;padding:18px 16px 10px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
  transition:border-color .6s cubic-bezier(.16,1,.3,1),background .6s cubic-bezier(.16,1,.3,1)}
.today-card.all-lit{border-color:var(--ember);background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--flame) 16%,var(--panel)),var(--panel))}
.today-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 8px}
.today-head span:first-child{font:600 16px var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.count{font-size:14px;color:var(--muted)}
.fire-list{list-style:none;margin:0;padding:0}
.fire-list button{display:grid;grid-template-columns:22px 56px 1fr;align-items:center;gap:12px;width:100%;min-height:52px;
  padding:10px 4px;background:none;border:none;border-bottom:1px solid var(--line);color:var(--text);text-align:left;font:inherit;cursor:pointer}
.fire-list li:last-child button{border-bottom:none}
.fire-list i{justify-self:center;width:14px;height:14px;border-radius:50%;border:2px solid transparent;background:color-mix(in srgb,var(--flame) 30%,var(--panel));
  transition:background .5s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .9s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1)}
.fire-list b{font:600 16px var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.fire-list span{font-size:14px;color:var(--muted)}
.fire-list button[aria-pressed=true] i{background:var(--flame);border-color:var(--flame);box-shadow:0 0 12px 2px var(--flame);transform:scale(1.15)}
.fire-list button[aria-pressed=true] b{color:var(--ember2)}
@media (prefers-reduced-motion: reduce){.fire-list i,.today-card{transition:none}}
.today-done{margin:8px 4px 6px;font:600 16px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ember2)}

/* ---------- 4. The Anvil ---------- */
.order{list-style:none;margin:28px 0 0;padding:0;counter-reset:turn;border-top:1px solid var(--line)}
.order li{counter-increment:turn;display:grid;grid-template-columns:36px 1fr;align-items:baseline;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.order li::before{content:counter(turn);grid-row:span 2;font:600 14px var(--font-display);color:var(--muted)}
.order b{font:600 clamp(28px,7vw,44px)/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase}
.order span{font-size:16px;color:var(--muted)}
.rule{margin:22px 0 0;font-size:18px}
.rule::before{content:"";display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:var(--flame);vertical-align:1px}

/* ---------- 5. When you miss ---------- */
.miss h2 span{color:var(--ember2)}
.week{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:26px 0 0;padding:0;max-width:30rem}
.week li{display:grid;grid-template-rows:auto auto 1.4em;justify-items:center;align-content:start;gap:6px;font:600 12px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.week i{width:100%;aspect-ratio:1;max-width:46px;border-radius:50%;border:2px solid var(--line)}
.week .d-lit i{background:var(--ember);border-color:var(--ember)}
.week .d-min i{background:color-mix(in srgb,var(--ember) 40%,transparent);border-color:var(--ember)}
.week .d-miss i{border-style:dashed}
.week em{font-style:normal;font-size:12px;letter-spacing:.1em;color:var(--ember2);white-space:nowrap}
.week .d-miss em{color:var(--muted)}
.minimums-card{margin-top:28px;padding:22px 22px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);max-width:30rem}
.minimums-card h3{margin:0;font:600 16px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ember2)}
.ember-note{margin:4px 0 8px;font-size:14px;color:var(--muted)}
.minimums{list-style:none;margin:0;padding:0}
.minimums li{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px}
.minimums li:last-child{border-bottom:none}
.minimums b{flex:none;width:64px;font:600 16px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- 6. The year ---------- */
.strip{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
.strip li{position:relative;display:grid;gap:2px;padding-top:14px}
.strip li::before{content:"";position:absolute;left:0;top:0;width:48px;height:4px;background:var(--c)}
.strip b{font:600 24px var(--font-display);letter-spacing:.06em;text-transform:uppercase}
.strip span{font-size:16px;color:var(--muted)}
.strip-end{display:none}

/* ---------- 7. The close ---------- */
main > .close{padding-bottom:20px}
.close h2{max-width:18ch}
.two-men{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}
.two-men li{font:600 clamp(20px,5vw,28px)/1.2 var(--font-display);letter-spacing:.03em;text-transform:uppercase}
.two-men .meant{color:var(--ash-text);text-decoration:line-through;text-decoration-thickness:2px}
.two-men .did{color:var(--ember2)}
.close .cta{max-width:400px;margin-top:28px}
.close-fine{margin:12px 0 0;font-size:14px;color:var(--muted)}

/* ---------- Footer ---------- */
.foot{max-width:var(--wide);margin:72px auto 0;padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;text-decoration:none}
.foot nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.niv{margin:10px 0 0;max-width:40rem;font-size:12px;line-height:1.5;color:var(--muted)}

/* ---------- Wider screens ---------- */
@media (min-width: 760px){
  :root{--gutter:40px}
  .fork h1{max-width:none}
  .fork-split{position:relative;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;margin-top:40px}
  .year{padding:30px 32px 26px;border-radius:14px}
  .year h2{font-size:16px;margin-bottom:14px}
  .year li{font-size:clamp(18px,1.6vw,20px);padding:9px 0}
  .ash{background:transparent;border-color:var(--ash-line)}
  .seam{display:grid;place-items:center;position:absolute;left:50%;top:0;bottom:0;width:56px;margin-left:-28px;
    font:600 12px var(--font-display);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .seam::before{content:"";position:absolute;top:12px;bottom:12px;left:50%;width:1px;
    background:linear-gradient(var(--ash-line),var(--ember) 85%);opacity:.7}
  .seam{background:none}
  .seam{z-index:0}
  .seam::after{content:"";position:absolute;width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--line);z-index:-1}
  .fork-note{text-align:center;margin-top:28px}
  .ash,.ember{display:flex;flex-direction:column}
  .ash .year-end{margin-top:auto}
  .ember .cta{margin-top:auto}
  .ember ul{margin-bottom:20px}
  main > :is(.turn,.fires,.anvil,.miss,.year-map,.close){margin-top:144px}
  /* Fires: the working card is the centerpiece, copy above it */
  .fires{display:grid;justify-items:center;text-align:center}
  .fires-copy p{margin-inline:auto}
  .today-card{width:min(520px,100%);max-width:none;margin-top:40px;text-align:left;padding:22px 22px 12px}
  /* The turn: words left, the verse as the centerpiece right */
  .turn{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
  .verse{margin:0;padding:0 0 0 40px;border-top:none;border-left:1px solid var(--line)}
  /* The Anvil: the running order across the page */
  .anvil-head{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:end}
  .anvil-head .section-lead{margin:0}
  .order{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin-top:40px}
  .order li{grid-template-columns:1fr;padding:22px 20px 22px 0;border-bottom:none;border-right:1px solid var(--line)}
  .order li + li{padding-left:20px}
  .order li:last-child{border-right:none}
  .order li::before{grid-row:auto}
  .order b{font-size:clamp(30px,3.2vw,46px)}
  /* Miss: a full-width week; the Ember Day hangs from Thursday */
  .miss{display:grid;grid-template-columns:repeat(7,1fr);column-gap:16px}
  .miss-copy{display:contents}
  .miss h2,.miss .section-lead{grid-column:1/-1}
  .week{grid-column:1/-1;max-width:none;gap:16px;margin-top:40px}
  .week i{max-width:76px}
  .minimums-card{position:relative;grid-column:4/span 4;max-width:none;margin-top:36px}
  .minimums-card::before{content:"";position:absolute;top:-36px;left:calc((100% - 48px)/8 - 1px);width:2px;height:36px;background:var(--ember)}
  /* The year: one 52-week bar */
  .strip{grid-template-columns:repeat(52,1fr);border-left:none;margin-top:40px;column-gap:0}
  .strip{gap:0}
  .strip li{grid-column:span var(--w);padding:20px 14px 0 0}
  .strip li::before{width:100%;height:6px;border-radius:0}
  .strip li + li{margin-left:3px}
  .strip .end{padding-right:0}
  .strip .end :is(b,span){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .strip span{font-size:14px}
  .strip-end{display:block;margin:22px 0 0;font-size:16px;color:var(--muted)}
  .strip-end b{color:var(--text);font-weight:600}
  /* The close: centered bookend */
  .close{text-align:center;display:grid;justify-items:center}
  .close h2{max-width:22ch}
  .two-men{justify-items:center}
  .close .cta{width:100%}
}