/* Zaib home: "the year at one window". The film fills the whole screen and stays put while the chapters scroll over it
   as ink cards; the film rests on a sharp still while each card is read, and moves only between them. Each card sits
   on the side away from the action: over the window in the desk shots, over the houses in the window shots, so the
   tree (the season) is never covered. */

/* ---------- The year ---------- */
.year { position: relative; background: var(--bg); }
.year-film { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; }
.film-box { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.film-poster, .film-canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.film-poster { object-fit: cover; object-position: 55% 50%; }
@media (max-aspect-ratio: 9/10) { .film-poster { object-position: 80% 50%; } }
.film-canvas { opacity: 0; transition: opacity .6s; }
.film-canvas.on { opacity: 1; }
/* No boxes: the words sit straight on the film. A soft fall of the room's own white on the side the words are on keeps
   them readable (the left side in the desk shots, the right in the window shots); it follows the chapter */
.film-box::before, .film-box::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .9s var(--expo); }
.film-box::before { background: linear-gradient(90deg, rgba(246, 244, 239, .94) 0, rgba(246, 244, 239, .86) 28%, rgba(246, 244, 239, .45) 42%, rgba(246, 244, 239, 0) 56%); }
.film-box::after { background: linear-gradient(270deg, rgba(246, 244, 239, .94) 0, rgba(246, 244, 239, .86) 28%, rgba(246, 244, 239, .45) 42%, rgba(246, 244, 239, 0) 56%); }
/* no fade at all now (the user: "make the text transparent"); the words carry their own soft glow instead */

/* the months: a quiet index along the foot of the film, lit as the year passes */
.film-months { position: absolute; z-index: 3; left: 50%; bottom: clamp(18px, 3vh, 34px); transform: translateX(-50%); display: flex; gap: clamp(14px, 2vw, 30px); margin: 0; padding: 12px 20px; list-style: none; border-radius: 999px; background: rgba(246, 244, 239, .92); box-shadow: inset 0 0 0 1px var(--line); width: max-content; max-width: calc(100% - 32px); font: 500 13.5px/1 var(--sans); color: var(--ink-3); }
.film-months li { position: relative; transition: color .5s var(--expo); white-space: nowrap; }
.film-months li.on { color: var(--ink); }
.film-months li.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--gold); }

/* the chapters scroll over the film: the column is pulled up by one screen so it starts on top of it */
.year-text { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; padding: 0 clamp(20px, 3vw, 56px) 30vh; pointer-events: none; }
.ch { pointer-events: auto; width: min(560px, 38vw); margin: 0; padding: 0; }
.ch[data-ch="0"] { width: min(760px, 48vw); }
.ch[data-side="right"] { margin-left: auto; }
.ch:first-child { margin-top: max(108px, 14vh); }
.ch + .ch { margin-top: 110vh; }
/* the season changes get the most scroll, so the leaves and blossom grow a little with every turn of the wheel */
.ch[data-ch="2"], .ch[data-ch="3"], .ch[data-ch="4"], .ch[data-ch="5"] { margin-top: 170vh; }
.ch h1 { font-size: clamp(48px, 4.6vw, 74px); line-height: 1; }
.ch h2 { font-size: clamp(36px, 3.2vw, 54px); }
.ch .lead { max-width: 42ch; font-size: clamp(19px, 1.4vw, 22px); line-height: 1.55; }
.ch .ask-q { font-size: 17px; font-weight: 600; color: var(--ink); }
.ch .pill { font-size: 16px; min-height: 46px; padding: 0 18px; }
.ch-date { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; color: var(--ink-3); font-size: 15px; }
.ch-date b { font: 700 clamp(56px, 4.6vw, 80px)/.86 var(--serif); letter-spacing: -.04em; color: var(--gold); font-variant-numeric: lining-nums; }
.ch .ask { max-width: 100%; }
.ch .answer { background: var(--bg-2); }
.ch .facts { margin-top: 30px; }
/* the hero facts sit on light pills, like the chooser, so they read over the photograph */
.ch[data-ch="0"] .facts { gap: 10px; }
.ch[data-ch="0"] .facts li { padding: 9px 16px; border-radius: 999px; background: rgba(246, 244, 239, .9); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; color: var(--ink); text-shadow: none; }

/* tools sit on cobalt-edged ink panels (the 30%) */
.tool { margin-top: 28px; padding: clamp(22px, 2vw, 30px); border-radius: var(--r); background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px var(--line); }
.tool h3 { font-size: clamp(20px, 1.6vw, 24px); }
.t-label { display: block; margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.tool .val { margin-top: 8px; color: var(--gold); }
.tool .verdict { background: var(--bg-3); }
.tool .verdict h3 { font-size: 19px; }
.tool .verdict p { margin-top: 6px; font-size: 15px; }

/* Making Tax Digital quarters */
.quarters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.quarters li { padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px var(--line); }
.quarters li.next { background: var(--cobalt); box-shadow: none; }
.quarters .q-d { display: block; font: 700 26px/1.1 var(--serif); color: var(--ink); }
.quarters .q-n { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.quarters li.next .q-d, .quarters li.next .q-n { color: #fff; }
.quarters .q-k { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--gold); }
.quarters li.next .q-k { color: var(--gold-2); }

/* payments on account */
.money { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0 18px; min-height: 58px; border-radius: 12px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); font: 700 28px/1 var(--serif); color: var(--gold); }
.money:focus-within { box-shadow: inset 0 0 0 2px var(--gold); }
.money input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); outline: none; -moz-appearance: textfield; }
.money input::-webkit-outer-spin-button, .money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.poa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.poa .p { padding: 14px 16px; border-radius: 12px; background: var(--bg-3); }
.poa .p b { display: block; font: 700 28px/1.1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.poa .p span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-2); }
.poa .p.next { background: var(--cobalt); }
.poa .p.next b, .poa .p.next span { color: #fff; }
.poa .none { grid-column: 1 / -1; padding: 14px 16px; border-radius: 12px; background: var(--bg-3); font-size: 15px; color: var(--ink-2); }

/* January countdown */
.count { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.count > div { padding: 18px 16px 14px; border-radius: 14px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.count > div:first-child { background: var(--cobalt); box-shadow: none; }
.count b { display: block; font: 700 clamp(46px, 4.4vw, 70px)/.9 var(--serif); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.count span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.count > div:first-child b, .count > div:first-child span { color: #fff; }
.count-cap { grid-column: 1 / -1; margin-top: 4px; font-size: 14.5px; color: var(--ink-3); }

.ready-row { margin-top: 30px; }
.ch .status { margin-top: 26px; }

/* Phones and narrow screens: the film still fills the screen; the words sit in its lower part, over a fall of white from the foot */
@media (max-width: 959px) {
  .film-box::before { opacity: 0 !important; }
  .film-box::after { opacity: 1; background: linear-gradient(0deg, rgba(246, 244, 239, .96) 0, rgba(246, 244, 239, .9) 38%, rgba(246, 244, 239, 0) 62%); }
  .ch { width: auto; padding: 0 6px; }
  .ch[data-side="right"] { margin-left: 0; }
  .ch:first-child { margin-top: 60svh; }
  .ch + .ch { margin-top: 100svh; }
  .year-text { padding: 0 12px 30svh; }
  .ch[data-ch="0"] { width: auto; }
  .ch h1 { font-size: clamp(40px, 11vw, 52px); }
  .ch .lead { font-size: 18px; }
  .ch-date b { font-size: 52px; }
  .quarters { grid-template-columns: 1fr 1fr; }
  .count b { font-size: 38px; }
  .film-months { bottom: 10px; gap: 12px; padding: 9px 14px; font-size: 12px; }
}

/* Without the film (no script, reduced motion or a failed load) the stills stand in, one per chapter */
.no-film .film-canvas { display: none; }

/* ---------- In clients' own words: the pen draws the line, the reviews land where it passes ---------- */
.ink-path { padding: clamp(110px, 12vw, 180px) 0 clamp(80px, 10vw, 140px); overflow: hidden; background: var(--bg); }
.rv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }
.rv-head .score { display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.rv-head .score b { color: var(--ink); }
.path-body { position: relative; margin-top: clamp(60px, 7vw, 110px); }
.path-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.path-line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* the hint of a line, ruled faintly in cobalt; the ink drawn over it is the pen's own cobalt, darkening to gold
   only at the nib (blue to gold passes through the teal waypoint, never grey) */
.path-line .ghost { stroke: rgba(46, 107, 79, .22); stroke-width: 2; stroke-dasharray: 2 10; }
.path-line .draw { stroke: var(--cobalt-2); stroke-width: 4; }
.nib { position: absolute; left: 0; top: 0; z-index: 2; width: 26px; height: 42px; margin: -40px 0 0 -13px; transform-origin: 50% 95%; pointer-events: none; opacity: 0; transition: opacity .4s; }
.nib.on { opacity: 1; }
.nib path { fill: var(--gold); stroke: none; }
.nib .slit { fill: none; stroke: var(--bg); stroke-width: 2.4; stroke-linecap: round; }
.nib .breather { fill: var(--bg); }
.stops { position: relative; display: grid; gap: clamp(100px, 12vw, 180px); margin: 0; padding: 0; list-style: none; }
.stop { position: relative; width: max-content; max-width: 100%; }
.stop:nth-child(1) { margin-left: 3%; }
.stop:nth-child(2) { margin-left: auto; margin-right: 5%; }
.stop:nth-child(3) { margin-left: 12%; }
.stop:nth-child(4) { margin-left: auto; margin-right: 2%; }
.stop:nth-child(5) { margin-left: 6%; }
.stop-title { display: flex; align-items: center; gap: .2em; margin: 0; font: 700 clamp(46px, 6.6vw, 110px)/.95 var(--serif); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; }
.stop-title .av { font: inherit; position: relative; display: inline-grid; place-items: center; flex: none; width: 0; height: .86em; overflow: hidden; border-radius: 999px; background: var(--cobalt); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--gold); transition: width .9s var(--back); }
.stop-title .av b { font: 600 .36em/1 var(--sans); font-style: normal; letter-spacing: 0; color: var(--ink); opacity: 0; transition: opacity .5s .3s; }
.stop-title .av img { position: absolute; inset: 0; width: .86em; height: .86em; max-width: none; object-fit: cover; transform: scale(.6); opacity: 0; transition: transform .9s var(--back), opacity .5s; }
.stop.on .av { width: .86em; }
.stop.on .av b { opacity: 1; }
.stop.on .av img { transform: none; opacity: 1; }
.stop .quote { width: min(460px, 86vw); margin: 22px 0 0 clamp(18px, 5vw, 90px); padding: 22px 24px 18px; border-radius: 18px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(18px) rotate(0deg); transition: opacity .6s var(--expo), transform .9s var(--back); }
.stop.on .quote { opacity: 1; transform: rotate(var(--tilt, -2deg)); }
.stop .quote blockquote { margin: 0; font: 500 clamp(19px, 1.5vw, 22px)/1.45 var(--serif); color: var(--ink); }
.stop .quote figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.stop .quote figcaption b { color: var(--gold); font-weight: 600; }
.path-cta { margin-top: clamp(72px, 9vw, 120px); display: flex; justify-content: center; }
@media (max-width: 759px) {
  .stop:nth-child(n) { margin-left: 0; margin-right: 0; }
  .stop-title { font-size: clamp(40px, 12vw, 60px); }
  .stop .quote { margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .stop .av { width: .86em; transition: none; } .stop .av b, .stop .av img { opacity: 1; transform: none; transition: none; }
  .stop .quote { opacity: 1; transform: none; transition: none; }
}

/* ---------- The monitor: a live screen laid onto the photographed one ---------- */
/* Drawn at 1000 x 562 and carried onto the screen's four corners by a projective transform (home.js), so it stays
   crisp at any size. It shows only while the camera rests on the desk. */
.monitor { position: absolute; left: 0; top: 0; z-index: 1; width: 1000px; height: 562px; transform-origin: 0 0; opacity: 0; pointer-events: none; overflow: hidden; border-radius: 6px; transition: opacity .35s; }
.monitor.on { opacity: 1; }
.monitor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 38%); pointer-events: none; }
.app { display: grid; grid-template-columns: 150px 1fr; height: 100%; background: #FBFAF6; font: 400 15px/1.3 var(--sans); color: #16241D; }
.app-side { display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; background: #1F4A37; color: #C9DCCF; font-size: 13.5px; }
.app-side span { padding: 8px 10px; border-radius: 7px; }
.app-side span.on { background: #2E6B4F; color: #fff; }
.app-logo { display: block; width: 76px; height: 16px; margin: 2px 10px 18px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.app-main { display: grid; grid-template-rows: auto auto 1fr; gap: 14px; padding: 18px 22px; min-height: 0; }
.app-head { display: flex; align-items: center; gap: 14px; }
.app-head b { font: 700 22px/1 var(--serif); }
.app-who { margin-left: auto; font-size: 13px; color: #66796E; }
.app-status { padding: 5px 11px; border-radius: 999px; background: #FBEBD2; color: #9A5F12; font-size: 12.5px; font-weight: 600; transition: background-color .5s, color .5s; }
.app-status.done { background: #DDF1E4; color: #1E7A4C; }
.app-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app-cards > div { padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E3E6DD; }
.app-cards small { display: block; font-size: 11.5px; color: #66796E; }
.app-cards b { display: block; margin-top: 4px; font: 600 23px/1 var(--sans); font-variant-numeric: tabular-nums; }
.app-cards i { display: block; height: 4px; margin-top: 10px; border-radius: 4px; background: #E8EBE3; overflow: hidden; }
.app-cards em { display: block; width: 0; height: 100%; background: #2E6B4F; transition: width 1.4s cubic-bezier(.19, 1, .22, 1); }
.monitor.run .app-cards em { width: var(--w); }
.monitor.done .app-cards em { width: 100%; }
.app-lower { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; min-height: 0; }
.app-chart, .app-tx { position: relative; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #E3E6DD; min-height: 0; overflow: hidden; }
.app-chart small, .app-tx small { font-size: 12px; font-weight: 600; color: #3D5046; }
.bars { position: absolute; left: 14px; right: 14px; bottom: 14px; top: 38px; display: flex; align-items: flex-end; gap: 6px; }
.bars i { flex: 1; height: 0; border-radius: 3px 3px 0 0; background: #2E6B4F; transition: height 1.2s cubic-bezier(.19, 1, .22, 1); }
.bars i.e { background: #D9E6DC; }
.bars i.now { background: #D99A3E; }
.app-tx ul { margin: 8px 0 0; padding: 0; list-style: none; }
.app-tx li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #EEF0EA; font-size: 12.5px; animation: tx-in .6s cubic-bezier(.19, 1, .22, 1) both; }
.app-tx li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.app-tx li b.out { color: #9A5F12; }
@keyframes tx-in { from { opacity: 0; transform: translateY(-8px); background: #F3F8F4; } }
.app-done { position: absolute; left: 14px; right: 14px; bottom: 12px; margin: 0; padding: 9px 12px; border-radius: 8px; background: #DDF1E4; color: #1E7A4C; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.monitor.done .app-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .app-cards em, .bars i, .app-tx li, .app-done { transition: none; animation: none; } }

/* the month index follows the season */
.year[data-season="spring"] .film-months li.on::after { background: #C94F86; }
.year[data-season="summer"] .film-months li.on::after { background: #2E8A4E; }
.year[data-season="autumn"] .film-months li.on::after { background: #D9641E; }
.year[data-season="winter"] .film-months li.on::after { background: #8DB7F0; }
.year[data-season="bare"] .film-months li.on::after { background: #8A6A48; }
/* without the film (save-data or a failed load) the season chapters stay in the page as cream plaques over the stills,
   the date and heading in the same Alfa Slab as the signwriting, in ink */
.no-film .ch[data-season] { padding: 28px 30px; border-radius: 18px; background: #FBF7EF; box-shadow: 0 18px 36px -18px rgba(60, 30, 20, .55); }
.no-film .ch[data-season] :is(h2, .ch-date b) { font-family: "Alfa Slab", Georgia, serif; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.no-film .ch[data-season] .ch-date b { color: #B07A1E; }

/* the nav floats on a pill of the room's white over the film, so its words never sit straight on the photograph */
body[data-page="home"] .nav .nav-in { max-width: 1240px; padding: 0 8px 0 28px; background: rgba(246, 244, 239, .92); border-color: var(--line); box-shadow: 0 12px 30px -20px rgba(22, 36, 29, .35); }

/* The desk chapters (the opening and Ready): bold and minimal (the user's pick, 2026-10-26, replacing the white glow).
   The room is dimmed like a film still, deepest on the words' side, and the words are cream on it: one big Gloock
   heading, the rest plain. The dimming fades away as the camera turns to the window. */
.year:not([data-season]) .film-box::before, .year[data-season=""] .film-box::before { opacity: 1; background: linear-gradient(90deg, rgba(12, 20, 16, .64), rgba(12, 20, 16, .4) 55%, rgba(12, 20, 16, .24)); }
.ch:not([data-season]) :is(h1, h2) { font: 400 clamp(56px, 5.4vw, 104px)/1.04 "Gloock", Georgia, serif; letter-spacing: -.005em; color: #FBF6EC; text-wrap: balance; }
.ch:not([data-season]) :is(.lead, .ask-q, .status) { color: #EFE9DC; font-weight: 500; }
.ch[data-ch="0"] .lead { max-width: 36ch; }
.ch[data-ch="0"] .facts { gap: 6px 24px; margin-top: 24px; }
.ch[data-ch="0"] .facts li { padding: 0; background: none; box-shadow: none; color: #EFE9DC; font-size: 14.5px; }
.ch[data-ch="0"] .pill { background: rgba(251, 246, 236, .1); color: #FBF6EC; box-shadow: inset 0 0 0 1px rgba(251, 246, 236, .45); }
.ch[data-ch="0"] .pill .ico { color: #F2C46F; }

/* ---------- The season words, signwritten on the window (the user's pick, 2026-10-26) ----------
   home.js lifts the five season chapters into .year-signs, a fixed layer over the film, and gives it the glass as the
   film draws it (--gl left, --gw width, --gt top, --gb gap below). The date and heading are gold leaf on the glass in
   Alfa Slab One with a dark edge and a block shade, as a signwriter would paint them; the explanation and the tool sit
   on a cream plaque hung from a brass rail along the foot of the glass. Each shows only while the film rests on its
   season: the leaf is laid left to right as you arrive, then the plaque drops into place. */
@font-face { font-family: "Alfa Slab"; src: url(../fonts/AlfaSlabOne-normal-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
.year-signs { position: fixed; inset: 0; z-index: 20; pointer-events: none; --leaf: #E6B65A; --leaf-edge: #7A4E14; --shade: #2A1906; }
.year-signs .ch[data-season] { position: absolute; inset: 0; width: auto; margin: 0; padding: 0; visibility: hidden; transition: visibility 0s .6s; }
.year-signs .ch[data-season].on { visibility: visible; transition: none; }

.year-signs .sign { position: absolute; left: calc(var(--gl) + var(--gw) * .5); width: calc(var(--gw) * .49); top: calc(var(--gt) + 4vh); text-align: center; clip-path: inset(-30% 104% -30% -6%); transition: clip-path .45s var(--expo); }
.year-signs .ch.on .sign { clip-path: inset(-30% -6% -30% -6%); transition: clip-path 1.2s .1s cubic-bezier(.65, .05, .3, 1); }
.year-signs .ch-date { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 0; }
.year-signs .ch[data-season] .ch-date b, .year-signs .ch[data-season] h2 {
  background: none; color: var(--leaf); -webkit-text-fill-color: var(--leaf); -webkit-text-stroke: 1px var(--leaf-edge); filter: none;
  font-family: "Alfa Slab", Georgia, serif; font-weight: 400; letter-spacing: 0;
  text-shadow: 1px 1px 0 var(--shade), 2px 2px 0 var(--shade), 3px 3px 0 var(--shade), 4px 4px 0 var(--shade), 0 0 22px rgba(0, 0, 0, .3);
}
.year-signs .ch[data-season] .ch-date b { font-size: clamp(64px, 6.2vw, 120px); line-height: .86; }
.year-signs .ch[data-season] h2 { margin-top: 12px; font-size: clamp(30px, 2.75vw, 54px); line-height: 1.06; }
.year-signs .ch[data-season] .ch-date span { color: #FFF4DC; font: 400 clamp(17px, 1.2vw, 22px)/1.1 "Alfa Slab", Georgia, serif; text-shadow: 1px 1px 0 var(--shade), 2px 2px 0 var(--shade), 0 0 10px rgba(0, 0, 0, .5); }

.year-signs .plaque { position: absolute; left: calc(var(--gl) + 12px); width: calc(var(--gw) - 24px); bottom: calc(var(--gb) + 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(22px, 2.4vw, 40px); align-items: center; padding: 22px 30px; border-radius: 18px; background: #FBF7EF; box-shadow: 0 1px 1px rgba(60, 30, 20, .18), 0 18px 36px -18px rgba(60, 30, 20, .55); pointer-events: auto; opacity: 0; transform: translateY(-10px); transition: opacity .35s var(--expo), transform .45s var(--expo); }
/* the brass rail it hangs from: a slim rounded bar, a little wider than the plaque, with a soft shadow on the glass */
.year-signs .plaque::before { content: ""; position: absolute; left: -10px; right: -10px; top: -13px; height: 7px; border-radius: 4px; background: #C9A04A; box-shadow: inset 0 1px 0 rgba(255, 240, 200, .7), inset 0 -2px 0 #8A6A22, 0 3px 4px rgba(40, 20, 0, .35); }
.year-signs .ch.on .plaque { opacity: 1; transform: none; transition: opacity .5s .35s var(--expo), transform .7s .35s var(--back); }
.year-signs .ch[data-season] .lead { margin: 0; max-width: none; font-size: clamp(16px, 1.1vw, 19px); font-weight: 500; color: var(--ink); text-shadow: none; }
.year-signs .ch[data-season] .fine, .year-signs .ch[data-season] .count-cap { color: var(--ink-3); text-shadow: none; }
.year-signs .plaque > .tool, .year-signs .plaque > .quarters, .year-signs .plaque > .count { margin-top: 0; }
.year-signs .tool { padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 18px; align-items: start; background: #fff; }
.year-signs .tool > * { grid-column: 1; }
.year-signs .tool > h3 { grid-column: 1 / -1; font-size: clamp(17px, 1.2vw, 20px); }
.year-signs .tool .val { font-size: clamp(30px, 2.3vw, 44px); }
.year-signs .t-label { margin-top: 8px; font-size: 13.5px; }
.year-signs .tool > .verdict { grid-column: 2; grid-row: 2 / span 4; margin-top: 10px; }
.year-signs .tool > .poa { grid-column: 2; grid-row: 2 / span 2; margin-top: 10px; }
.year-signs .tool > .fine { grid-column: 1 / -1; margin-top: 10px; }
.year-signs .tool > .w-label { grid-row: 2; margin-top: 10px; }
.year-signs .tool > .w-cap { grid-column: 2; grid-row: 2; align-self: center; margin: 10px 0 0; }
.year-signs .tool > .w-rows { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.year-signs .w-row { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 10px 14px; font-size: 13.5px; }
.year-signs .tool > .w-bar { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; }
.year-signs .quarters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.year-signs .quarters li { padding: 12px 14px; }
.year-signs .quarters .q-d { font-size: 20px; }
.year-signs .count { margin-top: 0; }
.year-signs .count b { font-size: clamp(36px, 3vw, 54px); }

/* the marker that keeps each lifted chapter's place in the page (1px, so empty boxes can't collapse their margins) */
.ch-mark { height: 1px; }

/* the nav steps aside inside the year, and the month index takes its place at the top */
body[data-page="home"] .nav { transition: transform .55s var(--expo); }
body.in-year .nav { transform: translateY(-140%); }
.year .film-months { top: 16px; bottom: auto; opacity: 0; transform: translate(-50%, -16px); transition: opacity .4s var(--expo), transform .55s var(--expo); }
body.in-year .year .film-months { opacity: 1; transform: translateX(-50%); }

@media (max-width: 959px) {
  .year-signs .sign { left: 16px; width: calc(100% - 32px); top: 70px; }
  .year-signs .ch[data-season] .ch-date b { font-size: 60px; }
  .year-signs .ch[data-season] h2 { font-size: clamp(26px, 7.4vw, 32px); }
  .year-signs .plaque { left: 12px; width: calc(100% - 24px); bottom: 14px; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 18px; }
  .year-signs .tool { grid-template-columns: minmax(0, 1fr); }
  .year-signs .tool > *, .year-signs .tool > .verdict, .year-signs .tool > .poa, .year-signs .tool > .w-cap, .year-signs .tool > .w-label, .year-signs .tool > .w-rows, .year-signs .tool > .w-bar { grid-column: 1; grid-row: auto; }
  .year-signs .quarters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .year .film-months { top: 10px; }
}
/* a compact plaque, so the view shows: it overlaps the window's bottom rail, the explanation takes less width, and
   the tool is set tighter */
.year-signs .plaque { bottom: calc(var(--gb) - 14px); grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); gap: clamp(20px, 2vw, 32px); padding: 18px 24px; }
.year-signs .tool { padding: 14px 18px; }
.year-signs .tool .verdict p { font-size: 13.5px; }
.year-signs .tool .verdict h3 { font-size: 16px; }
.year-signs .w-row { padding: 8px 12px; font-size: 12.5px; }
@media (max-width: 959px) {
  .year-signs .sign { top: 60px; }
  .year-signs .ch[data-season] .ch-date b { font-size: 50px; }
  .year-signs .ch[data-season] h2 { margin-top: 8px; font-size: clamp(22px, 6.4vw, 27px); }
  .year-signs .plaque { bottom: 84px; gap: 10px; padding: 14px 16px; border-radius: 16px; }
  .year-signs .ch[data-season] .lead { font-size: 15px; line-height: 1.45; }
  .year-signs .tool { padding: 12px 14px; }
  .year-signs .tool > h3 { font-size: 16px; }
  .year-signs .t-label { margin-top: 4px; font-size: 12.5px; }
  .year-signs .tool .val { margin-top: 2px; font-size: 28px; }
  .year-signs .tool .range { margin-top: 2px; }
  .year-signs .tool > .verdict { margin-top: 8px; padding: 10px 12px; }
  .year-signs .tool > .verdict p { font-size: 13px; }
  .year-signs .money { min-height: 46px; font-size: 22px; }
  .year-signs .poa .p { padding: 10px 12px; } .year-signs .poa .p b { font-size: 22px; }
  .year-signs .tool > .fine { font-size: 12px; }
  .year-signs .w-select select { height: 38px; }
  .year-signs .count > div { padding: 12px; } .year-signs .count b { font-size: 34px; }
}
/* desktop: the plaque hangs lower, over the window's bottom rail and sill, so more of the view shows (the user:
   "lower the information panel a bit") */
@media (min-width: 960px) { .year-signs .plaque { bottom: max(14px, calc(var(--gb) - 52px)); } }
/* phones: one column (the explanation above the tool), set tight, clear of the Call bar */
@media (max-width: 959px) {
  .year-signs .plaque { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 16px; bottom: 84px; }
  .year-signs .quarters { gap: 8px; }
  .year-signs .quarters li { padding: 8px 10px; }
  .year-signs .quarters .q-d { font-size: 17px; }
  .year-signs .quarters .q-n { font-size: 12px; margin-top: 2px; }
  .year-signs .quarters .q-k { margin-top: 4px; font-size: 12px; }
  .year-signs .count { gap: 8px; }
  .year-signs .count-cap { margin-top: 0; font-size: 13px; }
}
@media (max-width: 959px) {
  /* the company dates as a short list on phones (label left, date right), so no date is cut off */
  .year-signs .tool > .w-rows { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .year-signs .w-row { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 8px 12px; }
  /* the season words have their plaque, so the white fall at the foot of the film is only for the desk chapters */
  .year[data-season]:not([data-season=""]) .film-box::after { opacity: 0; }
}

/* phones (the user: "rather than a white solid block add a tint, the picture should be visible, and reduce the text
   to give a better view of the scenery; only on Android"): the plaque becomes a see-through tint of the room's deep
   green with cream words, and the explanation is left to the heading and the tool (still in the page for screen
   readers and search) */
@media (max-width: 959px) {
  .year-signs .plaque {
    --ink: #FBF6EC; --ink-2: #E6E0D2; --ink-3: #D2CBBB; --bg-2: rgba(255, 255, 255, .1); --bg-3: rgba(255, 255, 255, .13); --line: rgba(255, 255, 255, .2); --line-2: rgba(255, 255, 255, .28);
    background: rgba(14, 27, 20, .6); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6); color: var(--ink);
  }
  .year-signs .ch[data-season] .lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .year-signs .tool { padding: 0; background: none; box-shadow: none; }
  .year-signs .tool h3, .year-signs .tool .verdict h3 { color: var(--ink); }
  .year-signs .tool .verdict, .year-signs .poa .p, .year-signs .poa .none, .year-signs .money, .year-signs .w-row, .year-signs .quarters li, .year-signs .count > div { background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
  .year-signs .money input, .year-signs .w-row b, .year-signs .quarters .q-d, .year-signs .count b, .year-signs .poa .p b { color: #FBF6EC; }
  .year-signs .w-select select { background: rgba(255, 255, 255, .14); color: #FBF6EC; border-color: rgba(255, 255, 255, .3); }
  .year-signs .w-select select option { color: #16241D; }
  .year-signs .quarters li.next, .year-signs .poa .p.next, .year-signs .count > div:first-child { background: #2E6B4F; box-shadow: none; }
}

/* phones: the desk chapters' words sit low, over a deep fall of the room's shadow from the foot (no white) */
@media (max-width: 959px) {
  .year:not([data-season]) .film-box::after, .year[data-season=""] .film-box::after { opacity: 1; background: linear-gradient(0deg, rgba(12, 20, 16, .9) 0, rgba(12, 20, 16, .72) 50%, rgba(12, 20, 16, 0) 80%); }
  .year .film-box::before { opacity: 0 !important; }
  .ch:not([data-season]) :is(h1, h2) { font-size: clamp(44px, 12.4vw, 56px); }
}
/* the opening's heading sets in two lines on desktop, so everything sits above the fold; phones start it higher */
.ch[data-ch="0"] { width: min(1000px, 58vw); }
.ch:not([data-season]) :is(h1, h2) { line-height: 1.06; }
@media (max-width: 959px) { .ch[data-ch="0"] { width: auto; } .ch:first-child { margin-top: 36svh; } }
.ch:not([data-season]) .facts b, .ch:not([data-season]) .status b { color: #FBF6EC; }
.ch:not([data-season]) > .row .link, .ch:not([data-season]) .ready-row .link { color: #FBF6EC; }
.ch:not([data-season]) > .row .link .ico, .ch:not([data-season]) .ready-row .link .ico { color: #F2C46F; }

/* ---------- Finish review fixes (2026-10-26) ---------- */
/* the plaque is one layer, as in the approved comp: the tool sits straight on the cream, no card inside a card */
.year-signs .tool { padding: 0; background: none; box-shadow: none; }
/* the gold reads as leaf, not paint: a fine burnished light on the letters' upper left edge above the block shade */
.year-signs .ch[data-season] .ch-date b, .year-signs .ch[data-season] h2 {
  text-shadow: -1px -1px 0 rgba(255, 236, 178, .75), 1px 1px 0 var(--shade), 2px 2px 0 var(--shade), 3px 3px 0 var(--shade), 4px 4px 0 var(--shade), 0 0 22px rgba(0, 0, 0, .3);
}
/* the plaque hangs: two short brass hooks from the rail to its top edge */
.year-signs .plaque::after { content: ""; position: absolute; left: 10%; right: 10%; top: -8px; height: 9px; pointer-events: none; background: linear-gradient(90deg, #A9832F 0 5px, transparent 5px calc(100% - 5px), #A9832F calc(100% - 5px)); }
/* the chapter button rows: the call button and its link side by side, on one baseline */
.ch .row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
/* the season chapters stay in the page (for keyboards and screen readers); the ones not showing are simply invisible
   and can't be clicked */
.year-signs .ch[data-season] { visibility: visible; }
.year-signs .ch:not(.on) .plaque { pointer-events: none; }
/* the month index is a row of buttons that jump to each chapter; it sits fixed where the nav was */
.year .film-months { position: fixed; z-index: 45; }
.film-months ol { display: flex; gap: inherit; margin: 0; padding: 0; list-style: none; }
.film-months button { padding: 2px 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.film-months button:hover { color: var(--ink); }
.film-months button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
/* desktop: a call button at the top right while the nav is away */
.year-call { position: fixed; z-index: 45; top: 14px; right: 18px; min-height: 46px; padding: 0 20px; font-size: 15px; opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity .4s var(--expo), transform .55s var(--expo); }
body.in-year .year-call { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) { .year-call { display: none; } }
/* the nav comes back if a keyboard reaches it */
body.in-year .nav:focus-within { transform: none; }
/* phones: the room's shadow under the opening and Ready words starts higher, so the heading holds over the bright
   monitor */
@media (max-width: 959px) {
  .year:not([data-season]) .film-box::after, .year[data-season=""] .film-box::after { background: linear-gradient(0deg, rgba(12, 20, 16, .92) 0, rgba(12, 20, 16, .82) 42%, rgba(12, 20, 16, .58) 64%, rgba(12, 20, 16, 0) 90%); }
}
/* on narrow desktops the month index moves to the left so it never runs into the call button */
@media (min-width: 761px) and (max-width: 1180px) {
  .year .film-months { left: 18px; transform: translateY(-16px); }
  body.in-year .year .film-months { transform: none; }
}

/* ---------- One room from the film to the footer (the user: "going from the hero to the other sections feels like a
   completely different file") ---------- */
/* the film fades into the page's ground (the wall's light peach) as you scroll past Ready, instead of a hard edge;
   the year runs a little longer so the fade starts only after the Ready words have been read */
.year::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 60vh; pointer-events: none; background: linear-gradient(180deg, rgba(246, 233, 226, 0), rgba(246, 233, 226, .85) 70%, var(--bg)); }
.year-text { padding-bottom: 80vh; padding-bottom: 80svh; }
/* the reviews speak the same language as the year: Gloock names, a brass line drawn by the gold nib, and each quote on
   a cream plaque hung from a brass rail */
.stop-title { font-family: var(--display); font-weight: 400; letter-spacing: -.005em; }
.path-line .ghost { stroke: rgba(176, 122, 30, .32); }
.path-line .draw { stroke: #B8862E; }
.stop .quote { position: relative; border-radius: 18px; background: #FBF4EF; box-shadow: 0 1px 1px rgba(60, 30, 20, .14), 0 18px 36px -20px rgba(60, 30, 20, .45); }
.stop .quote::before { content: ""; position: absolute; left: -8px; right: -8px; top: -12px; height: 6px; border-radius: 4px; background: #C9A04A; box-shadow: inset 0 1px 0 rgba(255, 240, 200, .7), inset 0 -2px 0 #8A6A22, 0 3px 4px rgba(40, 20, 0, .3); }
.stop .quote::after { content: ""; position: absolute; left: 12%; right: 12%; top: -8px; height: 8px; pointer-events: none; background: linear-gradient(90deg, #A9832F 0 4px, transparent 4px calc(100% - 4px), #A9832F calc(100% - 4px)); }