/* The year in books page (year.html), where a shared year-in-books picture
   sends people: the hero with the picture as the apps make it; the year
   page, its numbers large and its parts as the iOS app draws them, free,
   then what Plus adds; every year before it, Plus; what is free and what is
   Plus; the three steps; and the closing. It sits on landing.css (the nav,
   the hero, the closing, the footer) and kabook.css (the theme's tokens).
   No script of its own: the picture's Square or Story and Light or Dark
   are radios, read with :has(). */

/* The hero: the tag over a short headline, set larger than the landing's.
   Its foot clears the fade under it (.hero-foot, 70 px over the hero's
   end), which takes no taps, so the picture's choices are never under it. */
.yh .x { padding-bottom: 76px; }
.yh + .hero-foot { pointer-events: none; }
.yh .tag { margin-bottom: 14px; }
.yh .hl { font-size: clamp(54px, 15vw, 112px); }
@media (min-width: 961px) { .yh .hl { font-size: clamp(64px, 9vw, 112px); } }
.yh .hl em { padding-right: 0; }
/* The section headings, balanced so no word is left on a line alone. */
.yy h2.big, .ya h2.big, .ysteps h2.big, .get h2.big { text-wrap: balance; }

/* The picture: the apps' own share image of the sample library's year
   (assets/year/), in a square frame so that a pick never moves the page:
   the square fills it, the story stands in it at its full height. Light or
   dark follows the page until one is picked. Only the one showing is
   fetched (the others are lazy and not displayed). */
.yshare { --y-sq: block; --y-st: none; --y-l: block; --y-d: none; display: flex; flex-direction: column; align-items: center; gap: 18px; }
html[data-theme="dark"] .yshare { --y-l: none; --y-d: block; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .yshare { --y-l: none; --y-d: block; } }
.yshare:has(input[value="story"]:checked) { --y-sq: none; --y-st: block; }
.yshare:has(input[value="light"]:checked) { --y-l: block; --y-d: none; }
.yshare:has(input[value="dark"]:checked) { --y-l: none; --y-d: block; }
.ypic { position: relative; display: grid; place-items: center; width: min(100%, 460px); aspect-ratio: 1; }
.ypic::before { content: ''; position: absolute; z-index: -1; inset: -12% -18%; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--glow-v) / .16), rgb(var(--glow-v) / .05) 60%, transparent); pointer-events: none; }
.ypic > span { display: var(--y-sq); grid-area: 1 / 1; overflow: hidden; border-radius: 24px; box-shadow: 0 0 0 1px var(--s-line), 0 40px 70px -40px rgb(var(--sh-deep) / .55), 0 12px 24px -16px rgb(var(--sh) / .3); }
.ypic > .ysq { width: 100%; }
.ypic > .yst { display: var(--y-st); position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0; aspect-ratio: 405 / 720; border-radius: 18px; }
.ypic img { width: 100%; height: 100%; }
.ypic img.yl { display: var(--y-l); }
.ypic img.yd { display: var(--y-d); }

/* Square or Story, Light or Dark: the share sheet's two choices, drawn as
   the footer's theme switch is. A browser without :has() shows the
   square in the page's colours and no choices. */
.ypick { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; }
@supports selector(:has(*)) { .ypick { display: flex; } }
.ypick fieldset { display: inline-flex; gap: 2px; margin: 0; padding: 3px; min-inline-size: 0; border: 0; border-radius: 99px; background: var(--s-pick); box-shadow: inset 0 0 0 1px var(--s-line); }
.ypick label { position: relative; display: block; cursor: pointer; }
.ypick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ypick span { display: block; padding: 8px 15px; border-radius: 99px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--s-mute); transition: background .2s, color .2s, box-shadow .2s; }
.ypick label:hover span { color: var(--s-ink); }
.ypick input:focus-visible + span { outline: 2.5px solid var(--s-acc); outline-offset: 2px; }
/* Picked; and, before Light or Dark is, the page's own. */
.ypick input:checked + span,
.yshare:not(:has(input[name="ylook"]:checked)) .ypl span { background: var(--s-pick-on); color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-line), 0 1px 3px rgb(var(--sh) / .12); }
html[data-theme="dark"] .yshare:not(:has(input[name="ylook"]:checked)) .ypl span { background: none; color: var(--s-mute); box-shadow: none; }
html[data-theme="dark"] .yshare:not(:has(input[name="ylook"]:checked)) .ypd span { background: var(--s-pick-on); color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-line), 0 1px 3px rgb(var(--sh) / .12); }
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .yshare:not(:has(input[name="ylook"]:checked)) .ypl span { background: none; color: var(--s-mute); box-shadow: none; }
  html[data-theme="system"] .yshare:not(:has(input[name="ylook"]:checked)) .ypd span { background: var(--s-pick-on); color: var(--s-ink); box-shadow: 0 0 0 1px var(--s-line), 0 1px 3px rgb(var(--sh) / .12); }
}
@media (max-width: 960px) { .yshare { margin-top: 26px; } }

/* The app's own screens, cut from the iOS app (assets/year/, made by
   tools/year-shots.sh): light or dark with the page, the other never
   fetched; on the app's background while they come. At most the phone's
   own width, so they stay as sharp as the phone draws them. */
.ypanel { --p-l: block; --p-d: none; display: block; width: 100%; max-width: 420px; overflow: hidden; border-radius: 22px; background: var(--bg); box-shadow: 0 0 0 1px var(--s-line), 0 30px 60px -36px rgb(var(--sh-deep) / .45), 0 10px 22px -16px rgb(var(--sh) / .25); }
html[data-theme="dark"] .ypanel { --p-l: none; --p-d: block; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .ypanel { --p-l: none; --p-d: block; } }
.ypanel img { width: 100%; height: auto; }
.ypanel img.yl { display: var(--p-l); }
.ypanel img.yd { display: var(--p-d); }
/* The top of the year page, as the phone opens it: a light frame round the
   screen's rounded corners, cut off under the numbers. */
.yframe { border-radius: clamp(38px, 11vw, 50px) clamp(38px, 11vw, 50px) 22px 22px; box-shadow: 0 0 0 1px var(--s-line), 0 0 0 7px var(--s-card), 0 0 0 8px var(--s-line), 0 40px 70px -40px rgb(var(--sh-deep) / .5), 0 12px 24px -16px rgb(var(--sh) / .28); }

/* The numbers, large, as the app sets them (Fraunces over a one-word
   caption): each as the pictures beside them say it. Two across on a
   phone, four from 900 px. */
.yn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin: 30px 0 0; }
.yn > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.yn dd { margin: 0; font: 600 clamp(40px, 12vw, 64px)/.95 var(--f-book); font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 96; letter-spacing: -.025em; color: var(--s-ink); white-space: nowrap; }
.yn dt { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--s-mute); }

/* Free, or Kabook Plus: a check on Finished's green, or the bang on the
   violet tile the app's own Plus line has. */
.ych { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 13px 6px 7px; border-radius: 99px; background: color-mix(in srgb, var(--done) 14%, var(--s-card)); color: color-mix(in oklab, var(--done) 72%, var(--s-st-mix)); font-size: 14px; font-weight: 650; line-height: 1.3; }
.ych .ic { flex: none; width: 21px; height: 21px; padding: 3.5px; border-radius: 50%; background: var(--done); color: var(--done-on); stroke-width: 3.2; }
.ych-p { background: color-mix(in srgb, var(--s-acc) 14%, var(--s-card)); color: color-mix(in oklab, var(--s-acc) 78%, var(--s-st-mix)); }
.ych .bang { flex: none; width: 21px; height: 21px; padding: 2.5px; border-radius: 6px; background: var(--s-acc); fill: var(--s-on-ink); }

/* Your year, in full: the numbers, the top of the year page, then its
   parts, each a heading, a line and the app's own; then Plus's. */
.yy { padding: 34px 0 20px; }
.yy-head { max-width: 640px; }
.yy-lead, .ya-lead { margin-top: 16px; max-width: 600px; font-size: 17px; line-height: 1.55; color: var(--s-body); }
.yy-grid { display: grid; gap: 44px; margin-top: 34px; }
.yy-phone { padding: 8px; }
.yy-parts { display: grid; gap: 44px; }
.yy-parts h3, .ylist h3 { font-size: clamp(23px, 2.4vw, 28px); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.yy-parts li > p { margin-top: 6px; max-width: 460px; color: var(--s-body); font-size: 16.5px; line-height: 1.5; }
.yy-parts .ypanel { margin-top: 16px; }
/* Plus, on a soft violet card of its own. */
.yy-plus { display: grid; gap: 28px; margin-top: 60px; padding: 24px 16px 16px; border-radius: 30px; background: radial-gradient(90% 60% at 0% 0%, rgb(var(--glow-v) / .12), transparent 70%), var(--s-soft); }
.yy-ptxt .ych { margin-top: 0; }
.yy-plus h3 { margin-top: 16px; font-size: clamp(36px, 10vw, 52px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.yy-plus h3 em { font-size: 1.1em; }
.yy-ptxt > p:not(.ych) { margin-top: 12px; max-width: 440px; color: var(--s-body); font-size: 16.5px; line-height: 1.5; }
.yn-s { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin-top: 26px; }
.yn-s dd { font-size: clamp(28px, 8vw, 50px); }
.yn-s dt { font-size: 13.5px; line-height: 1.3; }
.yy-plus > .ypanel { justify-self: center; }

/* And every year before it: a violet band across the page, fading in and
   out at its edges, its numbers in the accent, the two parts of Your
   reading under them. */
.ya { margin-top: 64px; padding: 64px 0 70px; background: radial-gradient(50% 26% at 82% 20%, rgb(var(--glow-v) / .14), transparent 72%), radial-gradient(40% 20% at 10% 84%, rgb(var(--glow-p) / .06), transparent 72%), linear-gradient(rgb(var(--glow-v) / 0), rgb(var(--glow-v) / .07) 140px, rgb(var(--glow-v) / .07) calc(100% - 140px), rgb(var(--glow-v) / 0)); }
.ya-head .ych { margin: 0 0 14px; }
.ya-since { margin-top: 38px; font-size: 14px; font-weight: 650; color: var(--s-acc); }
.yn-a { margin-top: 12px; }
.yn-a dd { font-size: clamp(40px, 12vw, 96px); color: var(--s-acc); }
.ya-grid { display: grid; gap: 48px; margin-top: 48px; }
.ya-grid figure { min-width: 0; }
.ya-grid figcaption { max-width: 420px; margin-bottom: 18px; font-size: 16.5px; line-height: 1.45; color: var(--s-body); }
.ya-grid figcaption b { display: block; margin-bottom: 6px; font: 600 clamp(34px, 9.5vw, 46px)/1 var(--f-book); font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 72; letter-spacing: -.02em; color: var(--s-ink); }

/* What is free and what is Plus, side by side from 900 px. */
.yfp { display: grid; gap: 14px; margin-top: 56px; }
.yfp > div { padding: 18px 18px 20px; border-radius: 22px; background: var(--s-card); box-shadow: 0 0 0 1px var(--s-line); }
.yfp .ych { margin-top: 0; }
.yfp > div > p:not(.ych) { margin-top: 12px; color: var(--s-prose); font-size: 16px; line-height: 1.55; }

/* How it works: three steps, a number and two lines each. */
.ysteps { padding-top: 64px; }
.ylist { display: grid; gap: 28px; margin-top: 30px; }
.ylist > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; column-gap: 12px; min-width: 0; }
.ylist .n { grid-row: 1 / span 3; font: italic 400 42px/.9 var(--f-serif); color: var(--s-acc); }
.ylist li > p { margin-top: 8px; max-width: 460px; color: var(--s-body); font-size: 16.5px; line-height: 1.55; }
.ylist strong { font-weight: 650; color: var(--s-ink); }
.ylist li > p.more { margin-top: 10px; font-size: 15.5px; font-weight: 600; }

/* The closing: the rest of Kabook, as the app's statuses, then the badges. */
.ychips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.ychips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px 7px 11px; border-radius: 99px; background: color-mix(in srgb, var(--st) 13%, var(--s-card)); color: color-mix(in oklab, var(--st) 72%, var(--s-st-mix)); font-size: 14px; font-weight: 650; }
.ychips .gl { width: 15px; height: 15px; color: var(--st); }
.get p.yhome { margin-top: 26px; font-size: 15.5px; font-weight: 600; }
.yhome a { color: var(--s-acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.yhome a:hover { text-decoration-thickness: 2px; }

@media (min-width: 900px) {
  .yn { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  /* As large as "10,462" and "77,476" fit a quarter of the width. */
  .yn dd { font-size: clamp(52px, 6vw, 80px); }
  .yy-lead, .ya-lead { font-size: 18px; }
  /* The phone stays while its parts go by beside it. */
  .yy-grid { grid-template-columns: minmax(0, 436px) minmax(0, 1fr); gap: 72px; align-items: start; margin-top: 48px; }
  .yy-phone { position: sticky; top: 92px; }
  .yy-parts { gap: 60px; padding-top: 8px; }
  .yy-plus { margin-top: 90px; padding: 44px 40px 40px; border-radius: 36px; }
  .yn-s { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
  .yn-s dd { font-size: clamp(40px, 4.4vw, 54px); }
  .yn-a { margin-top: 14px; }
  .ya { margin-top: 90px; padding: 84px 0 90px; }
  .ya-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; justify-items: center; margin-top: 64px; }
  .ya-grid figure { width: 100%; max-width: 420px; }
  .yfp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 72px; }
  .yfp > div { padding: 24px 26px 26px; }
  .ysteps { padding: 80px 0 56px; }
  .ylist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 44px; }
  .ylist > li { grid-template-columns: minmax(0, 1fr); }
  .ylist .n { grid-row: auto; margin-bottom: 10px; font-size: 50px; }
  .ylist li > p { font-size: 17px; }
}

@media (min-width: 1120px) {
  .ypic { width: 480px; }
  /* Plus's copy beside its screen. */
  .yy-plus { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: center; padding: 48px 48px 48px 56px; }
}

@media (prefers-reduced-motion: reduce) { .ypick span { transition: none; } }