/* Tokens, type, nav, section rhythm, controls, the planner, details, order and the photo viewer.
   Each page keeps only its own opening and photo section in its inline styles. */

/* ------------------------------------------------------------ tokens */
:root {
  --paper: #f4f1ea;
  --sheet: #faf8f4;                 /* the calendar's own paper, for raised panels */
  --ink: #1a1814;
  --ink-2: #45403a;
  --muted: #6a645a;
  --line: #dcd5c8;
  --track: #888276;                 /* inactive progress lines (3:1) */
  --bronze: #76592f;                /* bronze for text */
  --bronze-line: #8a6a3c;           /* bronze for strokes */
  --pen: #2a4a9a;                   /* handwriting only */
  --ivory: #ede7dc;
  --ivory-2: #aaa396;
  --gold: #c2a477;
  --sans: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --gutter-r: max(24px, env(safe-area-inset-right, 0px));
  --nav: 56px;
  --sec: 96px;
  --ease: cubic-bezier(.2, .75, .2, 1);
  color-scheme: light;
}
@media (min-width: 900px) { :root { --sec: 150px; } }

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; letter-spacing: .005em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: #e6d9c2; color: var(--ink); }
.on-dark :focus-visible { outline-color: var(--ivory); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter-r) 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ type: one style per role */
.display { font-weight: 600; font-size: clamp(44px, 11.5vw, 112px); line-height: .95; letter-spacing: -.035em; }
@media (min-width: 900px) { .display { font-size: min(8.4vw, 112px); } }
h2, .h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 10.5vw, 88px); line-height: 1; letter-spacing: -.01em; }
h2 em { font-style: italic; }
h3, .h3 { font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.lead { font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.label { font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.title-i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: 0; }
@media (min-width: 900px) {
  h3, .h3 { font-size: 26px; }
  .lead { font-size: 19px; }
}

/* ------------------------------------------------------------ section rhythm */
.sec { padding: var(--sec) 0; }
.head { display: grid; gap: 14px; margin-bottom: 28px; }
@media (min-width: 900px) { .head { gap: 18px; margin-bottom: 44px; } }

/* ------------------------------------------------------------ nav: an opaque bar whose colour follows the section under it */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav); background: var(--nav-bg, var(--paper)); color: var(--nav-fg, var(--ink)); transition: background-color .5s, color .5s, box-shadow .5s; }
.nav.line { box-shadow: 0 1px 0 var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 600; font-size: 15px; letter-spacing: -.02em; text-decoration: none; }
.nav-order { position: relative; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid currentColor; font-size: 14px; font-weight: 500; text-decoration: none; }
.nav-order::before { content: ""; position: absolute; inset: -6px -4px; }
.nav-order:active { opacity: .6; }

/* ------------------------------------------------------------ pinned stages */
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; }
.scroll-cue svg { width: 12px; height: 12px; animation: nudge-y 1.8s ease-in-out infinite; }
@keyframes nudge-y { 50% { transform: translateY(3px); } }

/* ------------------------------------------------------------ controls: hint, arrows, progress */
.hint { display: inline-flex; align-items: center; gap: 10px; transition: opacity .6s; }
.hint svg { width: 24px; height: 10px; animation: nudge-x 2s var(--ease) infinite; }
@keyframes nudge-x { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.hint.done { opacity: 0; }
/* a mouse gets arrows; a finger gets the hint */
.arrows { display: none; }
@media (hover: hover) and (pointer: fine) { .hint { display: none; } .arrows { display: flex; } }
.arrows { gap: 8px; }
.arrows button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid currentColor; transition: opacity .3s; }
.arrows button:active { opacity: .5; }
.arrows button:disabled { opacity: .22; cursor: default; }
.arrows svg { width: 16px; height: 16px; }
.prog { display: flex; gap: 4px; }
.prog button { flex: 1; height: 28px; position: relative; }
.prog button::after { content: ""; position: absolute; inset: -8px 0; }
.prog button::before, .prog button b { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; }
.prog button::before { background: var(--track); }
.prog button b { background: var(--ink); transform: scaleX(0); transform-origin: 0 0; }
.on-dark .prog button::before { background: rgba(237,231,220,.42); }
.on-dark .prog button b { background: var(--gold); }

/* ------------------------------------------------------------ tinted backgrounds: two layers crossfade, so nothing repaints */
.tinted { position: relative; isolation: isolate; }
.tint { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tint i { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); will-change: opacity; }
.tint i.on { opacity: 1; }
.tint i.top { z-index: 1; }

/* ------------------------------------------------------------ planner */
.p-grid { display: grid; }
.p-grid > * { min-width: 0; }
.p-grid .head { margin-bottom: 24px; }
.p-view { position: relative; overflow: hidden; aspect-ratio: 4 / 3.8; max-height: 58svh; background: #e8e3d8; -webkit-user-select: none; user-select: none; }
.tour-frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; container-type: inline-size; box-shadow: 0 1px 2px rgba(26,24,20,.06), 0 18px 40px -24px rgba(26,24,20,.3); }
.tour-frame > img { width: 100%; aspect-ratio: 700 / 999; -webkit-user-drag: none; }
.own-page { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 700 / 999; opacity: 0; transition: opacity .2s; pointer-events: none; }
.own-page.on { opacity: 1; transition: opacity .55s .25s; }
.mark { position: absolute; opacity: 0; pointer-events: none; }
.mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mark rect { fill: none; stroke: var(--bronze-line); stroke-dasharray: 1; stroke-dashoffset: 1; }
/* the note written beside the square: on the page, so your eyes never leave it */
.p-note { position: absolute; left: 0; top: 0; z-index: 1; padding: 1px 7px 2px; background: rgba(255,255,255,.93); font-family: var(--hand); font-weight: 600; font-size: 24px; line-height: 1.1; white-space: nowrap; color: var(--bronze); clip-path: inset(0 100% 0 0); pointer-events: none; }
.p-note.on { clip-path: inset(0 0 0 0); transition: clip-path .75s .3s cubic-bezier(.45, .05, .35, 1); }
/* a clear layer over the page: it takes the swipe, so the page follows your finger with the phone's own feel */
.cards { position: absolute; inset: 0; z-index: 2; display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: pointer; }
.cards::-webkit-scrollbar { display: none; }
.cards:focus-visible { outline-offset: -3px; }
.card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.p-panel { padding-top: 12px; }
.p-foot { display: flex; justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) { .p-foot { padding-top: 12px; } }

/* ------------------------------------------------------------ order */
.order { background: var(--sheet); }
.order-grid { display: grid; gap: 28px; scroll-margin-top: calc(var(--nav) + 24px); }
.order-copy, .order-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.order h2 { margin-bottom: 4px; }
/* the two versions, side by side: each row's name sits above its two answers */
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 0 12px 0 0; font-weight: 400; }
.compare th + th, .compare td + td { padding: 0 0 0 12px; border-left: 1px solid var(--line); }
.compare thead th { padding-bottom: 14px; }
.compare thead b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.compare thead span { display: block; margin-top: 2px; font-size: 28px; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; }
.compare .crops td { padding-bottom: 16px; }
.compare .rowname th { padding: 10px 0 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.compare td { padding-bottom: 14px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.compare td b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
/* Thursday and Friday, 1 to 8 January, cropped from the planner artwork (page units: 700 x 999; crop: x 392.8, y 211.6, 170.1 x 224.8) */
.v-crop { position: relative; aspect-ratio: 170.1 / 224.8; overflow: hidden; container-type: inline-size; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.v-crop img { position: absolute; width: 411.5%; max-width: none; height: auto; left: -230.9%; top: -94.13%; }
.deal { font-size: 15px; font-weight: 500; }
.btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; max-width: 420px; padding: 0 22px; background: var(--ink); color: var(--sheet); text-decoration: none; font-weight: 500; font-size: 17px; letter-spacing: -.01em; transition: transform .25s var(--ease); }
.btn svg { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.btn:active { transform: scale(.975); transition-duration: .08s; }
@media (hover: hover) { .btn:hover svg { transform: translateX(4px); } }
.order-note { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 32em; }
.order-note:empty { display: none; }
.after { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: -8px; max-width: 32em; }
.facts { margin: 0; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { margin: 0; font-size: 14px; line-height: 1.45; }
footer { background: var(--sheet); padding: 0 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; color: var(--muted); font-size: 13px; }

@media (min-width: 900px) {
  .p-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "view head" "view panel"; column-gap: 64px; }
  .p-grid .head { grid-area: head; align-self: end; }
  .p-view { grid-area: view; }
  .p-panel { grid-area: panel; }
  .p-note { font-size: 30px; }
  .p-view { max-height: 76svh; aspect-ratio: 4 / 4.2; }
  .p-panel { padding-top: 0; }
  .order-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; align-items: start; }
}

/* ------------------------------------------------------------ photo viewer */
.lb { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(13,13,14,.97); color: var(--ivory); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; touch-action: pinch-zoom; overscroll-behavior: contain; }
.lb.open { opacity: 1; visibility: visible; transition: opacity .3s; }
.lb-top { display: flex; align-items: center; justify-content: space-between; padding: calc(6px + env(safe-area-inset-top, 0px)) var(--gutter-r) 6px var(--gutter); }
.lb-top .label { color: var(--ivory-2); }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 4px var(--gutter-r) 4px var(--gutter); cursor: grab; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; box-shadow: 0 30px 80px -24px rgba(0,0,0,.8); will-change: transform; -webkit-user-drag: none; }
.lb-foot { display: flex; align-items: center; gap: 16px; padding: 10px var(--gutter-r) calc(14px + env(safe-area-inset-bottom, 0px)) var(--gutter); }
.lb-cap { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lb-cap .label { color: var(--ivory-2); }
.lb-cap .title-i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(237,231,220,.5); color: var(--ivory); }
.lb button:active { opacity: .5; }
.lb svg { width: 16px; height: 16px; }

/* phones on their side: everything a size smaller, so a heading never fills the screen */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --sec: 64px; }
  h2, .h2 { font-size: clamp(32px, 10svh, 52px); }
  .head { gap: 10px; margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg, .hint svg { animation: none; }
  .tint i { transition: none; }
}