/* Home Year: a well-kept household binder. Green bookcloth outside, ruled paper inside,
   month tabs that shift through the seasons. See DESIGN.md. */
@font-face { font-family: "Besley"; src: url("/assets/fonts/besley.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Metric-matched fallbacks, so the swap does not move the rules or the text on them. */
@font-face { font-family: "Besley Fallback"; src: local("Georgia"); size-adjust: 112%; ascent-override: 84%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 98%; ascent-override: 100%; descent-override: 29%; line-gap-override: 0%; }

:root {
  --sans: "Hanken Grotesk", "Hanken Fallback", system-ui, sans-serif; --serif: "Besley", "Besley Fallback", Georgia, serif;
  --t-small: .9375rem; --t-body: 1.0625rem; --t-h3: 1.25rem; --t-h2: 1.375rem; --t-section: clamp(1.75rem, 3vw, 2.5rem); --t-title: clamp(2.25rem, 5vw, 3.25rem); --t-cover: clamp(3.5rem, 8vw, 6rem);
  --ink: #1d2a2a; --muted: #3b4a48; --accent: #1e5244; --paper: #f8f4e8; --paper-2: #fffdf6;
  --cloth: #255648; --cloth-deep: #1a3f35; --on-cloth: #f5efdc; --on-cloth-2: #cfdccf;
  --rule: #c9d6cd; --rust: #a84a24;
  --winter: #3f5f7d; --spring: #4a7430; --summer: #c98f1e; --fall: #b0522a;
  --line: 1.75rem; --hole: 1.05rem; --margin: 4.5rem;
}
.winter { --season: var(--winter); --season-ink: var(--winter); } .spring { --season: var(--spring); --season-ink: var(--spring); }
.summer { --season: var(--summer); --season-ink: #7a560a; } .fall { --season: var(--fall); --season-ink: var(--fall); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { margin: 0; font: 400 var(--t-body)/var(--line) var(--sans); color: var(--ink);
  background: var(--cloth) url("/assets/cloth.webp"); }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; text-wrap: balance; }
p, li { text-wrap: pretty; }
td, th, .steps li::before, .month-rail { font-variant-numeric: tabular-nums lining-nums; }
strong, th { font-weight: 700; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 9; background: var(--paper-2); padding: .5rem 1rem; }
.ai-banner { line-height: 1.5; margin: 0; padding: .4rem 1rem; background: var(--cloth-deep); color: var(--on-cloth); font-size: .875rem; text-align: center; }
.ai-banner p { margin: 0; }
.ai-banner a { color: inherit; }

/* Header: brand stamped on the cloth, help pages as divider tabs standing on the sheet */
.head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .5rem 1.5rem;
  max-width: 76rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 3rem) 0; }
.brand { display: inline-flex; align-items: center; gap: .6rem; padding-bottom: .6rem; color: var(--on-cloth); font: 700 1.5rem/1 var(--serif); text-decoration: none; }
.house { width: 1.7rem; height: 1.7rem; }
.tabs { display: flex; gap: .3rem; }
.tab { padding: .55rem 1.1rem .5rem; border-radius: .5rem .5rem 0 0; background: var(--season); color: #fff; font-weight: 700; font-size: var(--t-small); letter-spacing: .01em; text-decoration: none; }
.tab.summer { color: var(--ink); }
.tab { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -.4rem .4rem -.3rem rgb(0 0 0 / .22); }
.tab[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 3px 0 var(--season); }

/* The sheet: ruled paper with punched holes down the left margin */
.sheet { position: relative; max-width: 76rem; margin: 0 auto; background-color: var(--paper);
  background-image:
    radial-gradient(circle at 50% 50%, #12302a 0 calc(var(--hole) / 2 - 1.5px), #b9b39f calc(var(--hole) / 2 - 1px), #fffdf6 calc(var(--hole) / 2 + .5px), transparent calc(var(--hole) / 2 + 1.5px)),
    linear-gradient(90deg, transparent calc(var(--margin) - 1px), #d9a79a calc(var(--margin) - 1px) var(--margin), transparent var(--margin)),
    repeating-linear-gradient(transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
  background-size: var(--margin) 21rem, auto, auto; background-repeat: repeat-y, no-repeat, repeat;
  background-position: left 8rem, 0 0, 0 -4px; box-shadow: 1px 1px 0 #e7e1cd, 2px 2px 0 #fbf8ee, 3px 3px 0 #d8d1bb, 4px 4px 0 #f4f0e2, 5px 5px 0 #cbc4ad, 0 .75rem 2.5rem .25rem rgb(8 28 23 / .45); }

.page { max-width: 58rem; padding: var(--line) clamp(1rem, 5vw, 3.5rem) calc(var(--line) * 2) calc(var(--margin) + 1.5rem); }
.head:has(+ .page), .page ~ footer { max-width: 58rem; }
.page h1 { margin: var(--line) 0; font-size: var(--t-title); letter-spacing: -.01em; line-height: calc(var(--line) * 2); font-weight: 700; color: var(--season-ink, var(--ink)); }
.page h2 { margin: calc(var(--line) * 2) 0 var(--line); font-size: var(--t-h2); font-weight: 700; line-height: var(--line); }
p, ul, ol { margin: 0 0 var(--line); }
.page > p, .page li { max-width: 68ch; }
blockquote { margin: var(--line) 0; padding: var(--line) 1.25rem; background: #f6e4d8; box-shadow: 0 1px 3px rgb(90 40 15 / .2); }
blockquote p { margin: 0; }
::selection { background: #e7c774; color: var(--ink); }
html { scrollbar-color: var(--on-cloth-2) var(--cloth-deep); }
input { caret-color: var(--accent); }
* { -webkit-tap-highlight-color: rgb(42 101 84 / .2); }
main, footer { overflow-wrap: anywhere; }
table { width: 100%; border-collapse: collapse; margin: var(--line) 0; background: var(--paper-2); }
/* No borders or vertical padding: rows stay whole multiples of the rule line. */
th, td { padding: 0 .6rem; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 var(--rule); }
code { font: .9em ui-monospace, Consolas, monospace; }
.small { font-size: var(--t-small); color: var(--muted); }
.ok { color: var(--accent); font-weight: 700; }
em { font-style: normal; }
label { font-weight: 600; }
input[type="email"] { width: min(100%, 26rem); height: calc(var(--line) * 2); vertical-align: top; padding: 0 .75rem; font: inherit; color: inherit; background: var(--paper-2); border: 1px solid var(--muted); border-radius: .25rem; }
/* Tall line boxes center the text; this drops any size of display type onto its rule. */
.page h1, .home h2 { position: relative; top: calc(var(--line) * .75 - .35em); }

.button { display: inline-block; min-height: calc(var(--line) * 2); padding: calc((var(--line) * 2 - 1.2em) / 2) 1.75rem; vertical-align: top; border: 0; border-radius: .3rem; background: var(--accent); color: #fff; font: 700 1.125rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }

.button:hover { background: var(--cloth-deep); }
.cover .button:hover, .close .button:hover { background: #fff; }
.button:active { transform: translateY(1px); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cover :focus-visible, .close :focus-visible, .head :focus-visible, .ai-banner :focus-visible, footer :focus-visible, .cta :focus-visible { outline-color: #f2c14e; }

/* Checklist: real drawn boxes */
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 2.25rem; }
.checklist li::before { content: ""; position: absolute; left: .25rem; top: .32rem; width: 1.05rem; height: 1.05rem; border: 2px solid var(--ink); background: var(--paper-2); }

/* Home: the binder cover opened onto its November page */
.cover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start;
  max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem) 0; color: var(--on-cloth); }
.cover h1 { margin: 0 0 1.5rem; font-size: var(--t-cover); font-weight: 800; letter-spacing: -.02em; line-height: .98; text-shadow: 0 1px 0 rgb(0 0 0 / .4), 0 -1px 0 rgb(255 255 255 / .08); }
.formats { font-weight: 600; }
.lead { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; }
.price { color: var(--on-cloth-2); }
.cover .button, .close .button { background: var(--on-cloth); color: var(--cloth-deep); margin-bottom: 1rem; box-shadow: 0 .15rem .1rem rgb(0 0 0 / .3), 0 .5rem 1rem rgb(5 20 16 / .3); }
.cover .small, .close .small { color: var(--on-cloth-2); margin-bottom: .35rem; }
.cover a { color: inherit; }
.binder-page { position: relative; margin: 0 0 -9rem; z-index: 1; padding-right: 2.4rem; }
.binder-page img { background: #fff; box-shadow: 1px 1px 0 #ddd, 3px 3px 0 #f2f2f2, 4px 4px 0 #cfcfcf, 0 1.25rem 3rem rgb(5 20 16 / .55); }
.month-rail { position: absolute; top: 1rem; right: 0; bottom: 1rem; display: flex; flex-direction: column; gap: 2px; width: 2.4rem; }
.month-rail label { flex: 1; display: grid; place-items: center; border-radius: 0 .35rem .35rem 0; background: var(--season); color: #fff; font-size: .75rem; font-weight: 700; cursor: pointer; }
.month-rail .summer { color: var(--ink); }
.month-rail label { position: relative; }
.month-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pages { position: relative; }
.pages img { display: none; width: 100%; }
/* Three punched holes in the page's left margin */
.pages::after { content: ""; position: absolute; inset: 0 auto 0 .6rem; width: 1rem; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #1b4439 0 .36rem, #bdb9ab .4rem, transparent .46rem) 0 12% / 1rem 1rem no-repeat,
    radial-gradient(circle at 50% 50%, #1b4439 0 .36rem, #bdb9ab .4rem, transparent .46rem) 0 50% / 1rem 1rem no-repeat,
    radial-gradient(circle at 50% 50%, #1b4439 0 .36rem, #bdb9ab .4rem, transparent .46rem) 0 88% / 1rem 1rem no-repeat; }
.pages .november { display: block; }
.binder-page:has(.month-input:checked) .november { display: none; }
.binder-page:has(#m-jan:checked) .january,
.binder-page:has(#m-feb:checked) .february,
.binder-page:has(#m-mar:checked) .march,
.binder-page:has(#m-apr:checked) .april,
.binder-page:has(#m-may:checked) .may,
.binder-page:has(#m-jun:checked) .june,
.binder-page:has(#m-jul:checked) .july,
.binder-page:has(#m-aug:checked) .august,
.binder-page:has(#m-sep:checked) .september,
.binder-page:has(#m-oct:checked) .october,
.binder-page:has(#m-nov:checked) .november,
.binder-page:has(#m-dec:checked) .december { display: block; }
.month-rail label:has(:focus-visible) { outline: 3px solid #f2c14e; outline-offset: 1px; z-index: 1; }
.month-rail label:has(:checked) { background: var(--paper); color: var(--ink); box-shadow: inset -.25rem 0 0 var(--season); }
/* A contact sheet of real pages */
.contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 var(--line); }
.contact figure { margin: 0; }
.contact a { display: block; }
.contact figcaption { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.contact img { background: #fff; box-shadow: 1px 1px 0 #ddd, 3px 3px 0 #f2f2f2, 4px 4px 0 #cfcfcf, 0 .4rem 1rem rgb(20 40 35 / .3); }
.contact figcaption { margin-top: .75rem; font-size: var(--t-small); line-height: 1.3; }
.ok { display: flex; align-items: center; gap: .6rem; }
.ok::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; border: 2px solid var(--ink); background: var(--paper-2) url("/assets/tick.svg") center / 130% no-repeat; }
.home .sheet { --pad-r: clamp(1rem, 5vw, 4rem); --pad-l: calc(var(--margin) + 1.5rem); padding: calc(var(--line) * 6) 0 calc(var(--line) * 2); }
.home .sheet > section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--line) 3rem; padding: calc(var(--line) * 2) var(--pad-r) var(--line) var(--pad-l); background: linear-gradient(90deg, transparent, var(--wash) 30%); box-shadow: inset 0 .35rem 0 var(--season); }
.home .spring { --wash: rgb(112 158 72 / .14); } .home .summer { --wash: rgb(226 170 50 / .17); } .home .fall { --wash: rgb(190 95 50 / .13); } .home .winter { --wash: rgb(70 110 150 / .13); }
.home h2 { margin: 0; color: var(--season-ink); font-size: var(--t-section); letter-spacing: -.01em; line-height: calc(var(--line) * 2); font-weight: 700; }
.prose { max-width: 68ch; }
.ledger { list-style: none; padding: 0; }
.ledger li + li { margin-top: var(--line); }
.preview { background: var(--paper-2); padding: var(--line) 1.5rem 0; box-shadow: 0 1px 4px rgb(20 40 35 / .25); }
.preview h3 { margin: 0 0 var(--line); font-size: 1.75rem; line-height: var(--line); }
.preview li:last-child { background: #f6e4d8; color: #6e2c10; }
.preview li:last-child::before { border-color: var(--rust); }
.close { max-width: 76rem; margin: 0 auto; padding: calc(var(--line) * 3) clamp(1rem, 4vw, 3rem); color: var(--on-cloth); text-align: center; }
.close-line { font: 700 clamp(1.75rem, 4vw, 3rem)/1.15 var(--serif); }

.head:has(+ .home) { box-shadow: inset 0 -.25rem 0 var(--paper); }
.home .summer .prose p { font-size: var(--t-h2); }
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: var(--line); }
.steps li::before { content: counter(step); position: absolute; left: 0; font: 700 1.75rem/var(--line) var(--serif); color: var(--season-ink); }

/* Articles: season labels as small tabs; the close is a piece of the cover */
.season-label { margin: var(--line) 0 0; color: var(--season-ink); }
.season-label strong { font: 700 1.25rem/var(--line) var(--serif); }
.cta { margin: calc(var(--line) * 2) 0 0; padding: var(--line) 1.5rem; background: var(--cloth) url("/assets/cloth.webp"); color: var(--on-cloth); }
.cta h2 { margin: 0 0 var(--line); color: inherit; }
.cta p:last-child { margin: 0; }
.cta a { display: inline-block; min-height: calc(var(--line) * 2); padding: calc((var(--line) * 2 - 1.2em) / 2) 1.75rem; border-radius: .3rem; background: var(--on-cloth); color: var(--cloth-deep); font-weight: 700; line-height: 1.2; text-decoration: none; }
.cta a:hover { background: #fff; }

footer { max-width: 76rem; margin: 0 auto; padding: var(--line) clamp(1rem, 4vw, 3rem); font-size: var(--t-small); line-height: 1.5; color: var(--on-cloth-2); }
footer p { margin: 0 0 .5rem; }
footer a { color: var(--on-cloth); }

@media (max-width: 760px) {
  :root { --margin: 2.25rem; --hole: .8rem; }
  .brand { font-size: 1.3rem; }
  .tabs { width: 100%; }
  .tab { flex: 1; text-align: center; padding-inline: .25rem; }
  .cover { grid-template-columns: minmax(0, 1fr); padding-top: 1.5rem; }
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: center; }
  .contact figcaption { margin: 0; }
  .home .sheet { --pad-r: 1rem; --pad-l: calc(var(--margin) + .5rem); }
  .home .sheet > section { grid-template-columns: minmax(0, 1fr); }
  .page { padding-left: calc(var(--margin) + .5rem); padding-right: 1rem; }
  .tab { min-height: 2.75rem; display: grid; place-items: center; }
  .cover form .button, .close form .button { width: 100%; }
  .cover-copy form { max-width: 26rem; }
  footer { line-height: 2; }
  footer a, .ai-banner a { display: inline-block; }
}

/* Phones, upright or on their side: month tabs drop below the page as two thumb-sized rows */
@media (max-width: 760px), (max-width: 1000px) and (pointer: coarse) {
  .binder-page { padding-right: 0; margin-bottom: var(--line); }
  .month-rail { position: static; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; width: auto; margin-top: .75rem; }
  .month-rail label { min-height: 2.75rem; border-radius: .3rem; font-size: .8125rem; }
  .pages::after { left: .25rem; transform: scale(.7); }
}
@media (max-width: 760px) { .home .sheet { padding-top: 0; } }
@media (min-width: 761px) and (max-width: 1000px) and (pointer: coarse) { .home .sheet { padding-top: 0; } }

@media (forced-colors: active) {
  .tab, .month-rail label, .button, .cta a { border: 1px solid; }
  .month-rail label:has(:checked), .tab[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Motion: one idea, a page turning in a binder. Everything else is a small reply to the hand. */
.cover { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 160ms ease-in both fade-out; }
  ::view-transition-new(root) { animation: 280ms cubic-bezier(.16, 1, .3, 1) both fade-in; }
  .pages { perspective: 1600px; }
  .pages img { transform-origin: left center; animation: page-turn 520ms cubic-bezier(.16, 1, .3, 1); }
  .month-rail label { transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
  .month-rail label:hover { transform: translateX(.25rem); }
  .tab { transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }
  .tab:hover:not([aria-current]) { transform: translateY(-.2rem); }
  .button { transition: background-color 150ms, transform 120ms; }
  .contact img { transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
  .contact a:hover img { transform: translateY(-.3rem); }
  .ok::before { animation: tick-in 500ms 200ms cubic-bezier(.16, 1, .3, 1) backwards; }
  /* Waiting on Stripe: a pen moving along the rule. The page itself reloads every 3 seconds. */
  html:has(meta[http-equiv="refresh"]) main::after { animation: pen 2.4s cubic-bezier(.45, 0, .55, 1) infinite; }
}
html:has(meta[http-equiv="refresh"]) main::after { content: ""; display: block; height: 3px; width: 40%; background: var(--accent); }
@keyframes page-turn { from { transform: rotateY(-22deg); opacity: 0; } }
@keyframes tick-in { from { background-size: 0; } }
@keyframes pen { 0% { transform: translateX(0); } 50% { transform: translateX(150%); } 100% { transform: translateX(0); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* The binder spine, on screens wide enough to spare it */
@media (min-width: 1100px) {
  body { position: relative; }
  body::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 1.5rem; background: linear-gradient(90deg, rgb(0 0 0 / .4), rgb(0 0 0 / .12) 70%, rgb(255 255 255 / .06)); pointer-events: none; }
}