/* Tally site: the torn pile (#52). A tear-off calendar pad on a desk, light only.
   Fonts are self-hosted Latin subsets (fonts/, OFL); body text uses the system stack. */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --desk: #E2DCD0;
  --paper: #FBF9F4;
  --ink: #1E1B18;
  --brick: #B53A22;
  --mute: #6F675B;
  --binding: #1E1B18;
  --teal: oklch(0.5 0.13 200);
  --rule: #D9D2C4;
  /* One artboard pixel; the landing scales it, Privacy and Support draw the pad at 1:1. */
  --u: 1px;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", var(--sans);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* The pad's thickness: the sheets under today's, then its shadow on the desk. */
  --thickness: 0 3px 0 -1px #F1EDE4, 0 6px 0 -2px #E9E4D9, 0 9px 0 -3px #F1EDE4, 0 12px 0 -4px #E5DFD3, 0 24px 36px -12px rgba(30, 27, 24, .35);
}

* { box-sizing: border-box; }

html { background: var(--desk); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 17px/1.55 var(--sans);
  overflow-wrap: anywhere;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

main { flex: 1; width: 100%; margin: 0 auto; }

a { color: var(--brick); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; border-radius: 2px; }

h1, h2 { font-family: var(--display); line-height: 1.05; margin: 0; }
p { margin: 0 0 12px; }

footer { width: 100%; max-width: 868px; margin: 0 auto; padding: 4px 20px 32px; font: 12px/1.5 var(--mono); color: var(--mute); }
footer p { margin: 0; }
footer a { color: var(--mute); }
footer a:hover { color: var(--ink); }

/* ---------- Privacy and Support ----------
   One long sheet torn from the pad: the binding strip with the Tally mark (the landing's, at --u = 1px),
   the perforation under it, the text on paper with numbered sections, a torn bottom edge and the pad's
   thickness under it. About 820px wide on desktop, full width on a phone. */
.docs { max-width: 868px; padding: 20px 0 32px; }
@media (min-width: 600px) { .docs { padding: 48px 24px 40px; } }
.doc { position: relative; }
/* The ragged bottom edge, where it tore off the pad; the sheets under it show through. */
.doc::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(100% - 1px);
  height: 8px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 96% 20%, 91% 75%, 86% 30%, 80% 85%, 74% 25%, 69% 70%, 63% 15%, 57% 80%, 51% 35%, 45% 90%, 39% 25%, 33% 70%, 27% 20%, 21% 85%, 15% 30%, 9% 75%, 4% 20%, 0 65%);
}
.page { padding: 36px 20px 28px; }
.doc h1 { font-size: clamp(48px, 14vw, 96px); font-weight: 800; line-height: .95; letter-spacing: -.01em; }
.doc .mono { margin: 10px 0 0; font: 500 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--brick); }
.summary, .contact { margin: 24px 0 0; font-size: 19px; line-height: 1.5; }
.contact a { font-weight: 600; }
/* Each section: its number in the margin (hidden from assistive tech), then the heading and the text. */
.doc section { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--rule); }
.doc section + section { margin-top: 10px; }
.num { padding-top: 6px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--brick); }
.doc section > :not(.num) { grid-column: 2; }
.doc h2 { margin-bottom: 8px; font-size: 26px; font-weight: 700; }
@media (min-width: 600px) {
  .page { padding: 56px 72px 52px; }
  .doc section { grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; }
  .num { padding-top: 7px; font-size: 13px; }
  .doc h2 { font-size: 30px; }
  footer { padding: 4px 24px 40px; }
}

/* ---------- Landing ----------
   Laid out in the reference artboards' pixels: --u is one artboard pixel, 390 × 844 below 1024px wide and
   1440 × 900 from there. Where the viewport is tall enough the page scales to fit it with no scroll;
   otherwise it scales by width only and scrolls. */
.home { --u: min(100vw / 390, 1.25px); }
@media (orientation: portrait) and (min-width: 360px) and (min-height: 640px) {
  .home { --u: min(100vw / 390, 100vh / 844, 1.5px); }
  @supports (height: 100dvh) { .home { --u: min(100vw / 390, 100dvh / 844, 1.5px); } }
}
@media (min-width: 1024px) { .home { --u: min(100vw / 1440, 600px / 900); } }
@media (min-width: 1024px) and (min-height: 600px) {
  .home { --u: min(100vw / 1440, 100vh / 900); }
  @supports (height: 100dvh) { .home { --u: min(100vw / 1440, 100dvh / 900); } }
}

.landing {
  --w: calc(var(--u) * 132);
  display: grid;
  align-content: center;
  gap: calc(var(--u) * 22);
  max-width: calc(var(--u) * 430);
  padding: calc(var(--u) * 16) 20px calc(var(--u) * 8);
}
.home footer { max-width: calc(var(--u) * 430); padding: 10px 20px max(14px, env(safe-area-inset-bottom)); font-size: 11px; }

/* The pad: the binding strip, today's sheet and, taped on its corner, the Countdown widget. */
.pad { position: relative; }
.sheet { background: var(--paper); border-radius: 3px; box-shadow: var(--thickness); }
.binding {
  position: relative;
  height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 18);
  display: flex;
  align-items: center;
  background: var(--binding);
  border-radius: 3px 3px 0 0;
}
/* The perforation the next sheet tears along. */
.binding::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--u) * -9);
  height: calc(var(--u) * 4);
  background: radial-gradient(circle, var(--rule) 45%, transparent 55%) 0 0 / calc(var(--u) * 9) 100% repeat-x;
}
.mark { font: 800 calc(var(--u) * 24)/1 var(--display); letter-spacing: .02em; color: var(--paper); text-decoration: none; }
.mark:hover { color: var(--desk); }
.mark:focus-visible { outline-color: var(--paper); }

.today { padding: calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 16); }
.stamp { display: flex; flex-wrap: wrap; gap: 0 1.6em; margin: 0; font: 400 calc(var(--u) * 11)/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.today h1 { margin: calc(var(--u) * 4) 0 calc(var(--u) * 10); font-size: inherit; line-height: 1; }
.big { display: block; font: 800 calc(var(--u) * 210)/.8 var(--display); letter-spacing: -.02em; color: var(--brick); padding-top: calc(var(--u) * 10); }
.title { display: block; font: 700 calc(var(--u) * 40)/1 var(--display); color: var(--ink); margin-top: calc(var(--u) * 6); }
.trip { text-transform: none; letter-spacing: .02em; }

/* A widget stuck on paper, its tape and its caption. */
.stuck { position: absolute; margin: 0; width: var(--w); transform: rotate(var(--tilt)); }
.tape {
  position: absolute;
  z-index: 1;
  top: calc(var(--w) * -.07);
  left: 30%;
  width: 40%;
  height: calc(var(--w) * .14);
  background: rgba(236, 226, 196, .78);
  box-shadow: 0 1px 2px rgba(30, 27, 24, .12);
  transform: rotate(-4deg);
}
.caption { margin-top: calc(var(--u) * 8); text-align: center; font: 500 calc(var(--u) * 10)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.countdown { --tilt: 4deg; top: calc(var(--u) * 60); right: calc(var(--u) * -4); }
.countdown .caption { color: var(--brick); }
.countup { --tilt: -3deg; bottom: calc(var(--u) * 2); right: calc(var(--u) * 2); }
.countup .caption { color: var(--teal); }

/* The copy and the badge; below 1024px the pile sits beside the free line, badge and requirements. */
.side { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "lead lead" "desk get"; gap: calc(var(--u) * 14) calc(var(--u) * 12); align-items: center; }
.lead { grid-area: lead; margin: 0; font-size: max(14px, calc(var(--u) * 16)); line-height: 1.4; }
.get { grid-area: get; }
.free { margin: 0 0 calc(var(--u) * 10); font-size: max(13px, calc(var(--u) * 14)); font-weight: 600; line-height: 1.35; }
.badge { display: inline-block; line-height: 0; border-radius: 9px; }
.badge img { display: block; width: calc(var(--u) * 135); height: auto; }
.req { margin: calc(var(--u) * 10) 0 0; font: 400 max(10px, calc(var(--u) * 10.5))/1.4 var(--mono); color: var(--mute); }

/* The sheets already torn off, each at its own angle. */
.desk { grid-area: desk; position: relative; height: calc(var(--w) * 1.62); }
.pile { position: absolute; inset: 0; }
.torn {
  position: absolute;
  width: calc(var(--w) * .82);
  height: calc(var(--w) * .92);
  padding-top: calc(var(--w) * .1);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(30, 27, 24, .18);
  text-align: center;
  font: 800 calc(var(--w) * .52)/1 var(--display);
  color: var(--mute);
  transform: rotate(var(--tilt));
  /* The ragged top edge, where it tore along the perforation. */
  clip-path: polygon(0 4%, 6% 1%, 12% 4%, 19% 0, 26% 3%, 33% 1%, 40% 4%, 47% 0, 54% 3%, 61% 1%, 68% 4%, 75% 0, 82% 3%, 89% 1%, 95% 4%, 100% 2%, 100% 100%, 0 100%);
}
.torn:nth-child(1) { --tilt: -9deg; left: -4%; top: 0; }
.torn:nth-child(2) { --tilt: 6deg; left: 30%; top: 2%; }
.torn:nth-child(3) { --tilt: -4deg; left: -2%; top: 34%; }
.torn:nth-child(4) { --tilt: 10deg; left: 16%; top: 40%; }

/* The Small Hero + then widget as Ledger draws it in dark, sized by --w (170pt = --w). */
.widget {
  --k: calc(var(--w) / 170);
  position: relative;
  width: var(--w);
  height: var(--w);
  border-radius: calc(var(--k) * 22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #141412;
  color: #f2f1ed;
  font-family: Roboto, var(--sans);
  box-shadow: 0 calc(var(--k) * 10) calc(var(--k) * 24) rgba(30, 27, 24, .3);
}
.widget .hero { flex: 1; display: flex; flex-direction: column; gap: calc(var(--k) * 6); padding: calc(var(--k) * 15.5) calc(var(--k) * 14) calc(var(--k) * 12); background: #22211E; }
.widget .head { display: flex; justify-content: space-between; margin-bottom: auto; font: 400 calc(var(--k) * 10)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9a9890; }
.widget .days { font-size: calc(var(--k) * 52); font-weight: 600; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.widget .days small { margin-left: calc(var(--k) * 2); font-size: .32em; font-weight: 400; letter-spacing: 0; color: #9a9890; }
.widget .name { font-size: calc(var(--k) * 13); font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget .track { height: calc(var(--k) * 4); border-radius: calc(var(--k) * 2); background: #363533; }
.widget .fill { width: 75%; height: 100%; border-radius: inherit; background: currentColor; }
.widget .detail { font: 400 calc(var(--k) * 10)/1.2 var(--mono); color: #9a9890; }
.widget .then { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--k) * 6); height: calc(var(--k) * 40); padding: 0 calc(var(--k) * 14) calc(var(--k) * 18); font: 400 calc(var(--k) * 10)/1 var(--mono); color: #9a9890; white-space: nowrap; }
.widget .then span { overflow: hidden; text-overflow: ellipsis; }
/* Ledger scales a footer that doesn't fit down to 0.8 before it truncates. */
.widget .then .scaled { font-size: .86em; }
.widget .then b { font-weight: 500; }
.orange { color: oklch(0.78 0.14 60); }
.green { color: oklch(0.78 0.14 160); }
.teal { color: oklch(0.78 0.14 200); }
.purple { color: oklch(0.78 0.14 290); }

/* The landing loop (video/, 600 × 1304) on an iPhone lying on the desk, its bezel and Dynamic Island drawn
   here; the Lock Screen scenes carry their own island, which this one covers exactly. From 1024px only:
   a phone visitor is holding one already. Under Reduce Motion the poster stands in for the video. */
.phone { display: none; }
.phone video, .phone img { display: block; width: 100%; aspect-ratio: 600 / 1304; object-fit: cover; border-radius: calc(var(--u) * 33); background: #141412; }
.phone img { display: none; }
@media (prefers-reduced-motion: reduce) {
  .phone video { display: none; }
  .phone img { display: block; }
}

/* From 1024px: the pad on the left, the phone beside it, then the copy and badge above the pile. */
@media (min-width: 1024px) {
  .landing {
    --w: calc(var(--u) * 190);
    grid-template-columns: calc(var(--u) * 480) calc(var(--u) * 270) minmax(0, calc(var(--u) * 432));
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 72);
    max-width: none;
    padding: calc(var(--u) * 48) calc(var(--u) * 56) calc(var(--u) * 16);
  }
  .home footer { max-width: calc(var(--u) * 1318); padding: 12px 0 max(20px, env(safe-area-inset-bottom)); font-size: 12px; }

  .binding { height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 29); }
  .binding::after { bottom: calc(var(--u) * -11); height: calc(var(--u) * 5); background-size: calc(var(--u) * 11) 100%; }
  .mark { font-size: calc(var(--u) * 28); }
  .today { padding: calc(var(--u) * 26) calc(var(--u) * 29) calc(var(--u) * 24); }
  .stamp { font-size: calc(var(--u) * 12); }
  .today h1 { margin: calc(var(--u) * 6) 0 calc(var(--u) * 13); }
  .big { font-size: calc(var(--u) * 320); padding-top: calc(var(--u) * 13); }
  .title { font-size: calc(var(--u) * 61); margin-top: calc(var(--u) * 8); }
  .countdown { --w: calc(var(--u) * 160); --tilt: 5deg; top: calc(var(--u) * 83); right: calc(var(--u) * -32); }
  .caption { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 13); }

  .phone {
    --tilt: -2deg;
    display: block;
    position: relative;
    padding: calc(var(--u) * 8);
    border-radius: calc(var(--u) * 41);
    background: #141412;
    box-shadow: inset 0 0 0 calc(var(--u) * 1.5) #2E2C28, 0 calc(var(--u) * 24) calc(var(--u) * 40) calc(var(--u) * -10) rgba(30, 27, 24, .45);
    transform: rotate(var(--tilt));
  }
  .phone::after {
    content: "";
    position: absolute;
    top: calc(var(--u) * 16.5);
    left: 50%;
    width: calc(var(--u) * 72);
    height: calc(var(--u) * 20.5);
    margin-left: calc(var(--u) * -36);
    border-radius: calc(var(--u) * 10.25);
    background: #000;
  }

  .side { grid-template-columns: 1fr; grid-template-areas: "lead" "get" "desk"; gap: calc(var(--u) * 28); align-items: start; }
  .lead { font-size: calc(var(--u) * 24); line-height: 1.35; }
  .free { margin-bottom: calc(var(--u) * 16); font-size: calc(var(--u) * 18); }
  .badge img { width: calc(var(--u) * 170); }
  .req { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 13); }
  .desk { height: calc(var(--w) * 1.5); width: calc(var(--u) * 432); }
  .torn { width: calc(var(--w) * .8); height: calc(var(--w) * .9); }
  .torn:nth-child(1) { left: 0; top: 4%; }
  .torn:nth-child(2) { left: 30%; top: 0; }
  .torn:nth-child(3) { left: 10%; top: 38%; }
  .torn:nth-child(4) { left: 38%; top: 40%; }
  .countup { bottom: calc(var(--u) * 4); right: calc(var(--u) * 8); }
}

/* ---------- The entrance ----------
   Played once on load, about 2.5s: today's sheet drops onto the pad, the Countdown widget swings onto its
   corner, the phone lands beside the pad, the torn sheets fall onto the pile one after another, the Count-up widget sticks on the same way,
   then Lisbon's Progress bar fills. Every resting style above is the finished page, and each animation holds
   its first frame only through its delay (backwards), so with reduced motion, or no animation at all,
   the page is simply complete. The motion only moves things up and turns them, never wider or lower,
   so it adds no scroll. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes drop {
    from { opacity: 0; transform: translateY(calc(var(--u) * -28)); }
    40% { opacity: 1; }
    to { transform: translateY(0); }
  }
  /* A widget comes from a little higher, a few degrees steeper, and settles at its tilt. */
  @keyframes stick {
    from { opacity: 0; transform: translateY(calc(var(--u) * -36)) rotate(calc(var(--tilt) * 2.5)); }
    35% { opacity: 1; }
    to { transform: translateY(0) rotate(var(--tilt)); }
  }
  /* A torn sheet keeps its own angle as it falls. */
  @keyframes fall {
    from { opacity: 0; transform: translateY(calc(var(--u) * -40)) rotate(var(--tilt)); }
    40% { opacity: 1; }
    to { transform: translateY(0) rotate(var(--tilt)); }
  }
  @keyframes fill {
    from { transform: scaleX(0); }
  }

  .sheet { animation: drop 0.5s cubic-bezier(.22, 1, .36, 1) 0s backwards; }
  .countdown { animation: stick 0.6s cubic-bezier(.22, 1, .36, 1) 0.4s backwards; }
  .phone { animation: fall 0.5s cubic-bezier(.33, 1, .68, 1) 0.7s backwards; }
  .torn:nth-child(1) { animation: fall 0.4s cubic-bezier(.33, 1, .68, 1) 0.95s backwards; }
  .torn:nth-child(2) { animation: fall 0.4s cubic-bezier(.33, 1, .68, 1) 1.1s backwards; }
  .torn:nth-child(3) { animation: fall 0.4s cubic-bezier(.33, 1, .68, 1) 1.25s backwards; }
  .torn:nth-child(4) { animation: fall 0.4s cubic-bezier(.33, 1, .68, 1) 1.4s backwards; }
  .countup { animation: stick 0.6s cubic-bezier(.22, 1, .36, 1) 1.6s backwards; }
  .fill { transform-origin: left; animation: fill 0.6s cubic-bezier(.65, 0, .35, 1) 1.9s backwards; }
}