:root {
  /* Brand tokens, not the old cool greys. --bg was #f4f4f2, which read
     grey against the rest of the site. The surface stays near-white so
     the clock card keeps its contrast against the cream page. */
  --bg: var(--color-cream);
  --surface: #fffcf7;
  --ink: var(--color-cocoa);
  --muted: #6b6259;
  --faint: #8a7f74;
  --line: #ece0d4;
  --line-strong: #dbcab8;
  --radius: 14px;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { background: var(--bg); }
body {
  margin: 0;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--ink);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

a.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 0.6rem 1rem; z-index: 20;
  border-radius: 0 0 8px 0;
}
a.skip:focus { left: 0; }

/* The clock is the page. It fills the screen below the sticky header, and the
   footer sits under it rather than competing with it.

   100svh, not 100vh: on mobile the small viewport unit accounts for the browser
   chrome that comes and goes, so the grid never gets clipped behind it. The
   header is 108px below 640px and 124px above, matching coco.css. */
.wrap {
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2rem;
  flex: 1;
  min-height: calc(100svh - 108px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .wrap { min-height: calc(100svh - 124px); }
}

/* The heading and description still carry the page's search terms, so they stay
   in the document. They just stop being the loudest thing on it. */
#tool {
  text-align: center;
  max-width: 54ch;
}
h1 {
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
  font-weight: 600;
}
/* The lede sits below the clock, so it never competes for height and does not
   need hiding on short screens. */
.lede {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  max-width: 54ch;
}

/* ---- The clock ---- */
.clock-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(0.75rem, 2vw, 1.5rem);
  width: max-content;
  max-width: 100%;
}

/* The grid is 11 columns of square cells, so it is square overall. Sizing it off
   the smaller of the two viewport axes is what makes it as big as it can be
   without ever needing to scroll. Everything else, gaps and letter size, derives
   from that one number so the proportions hold at every screen size. */
.letters {
  /* Subtracting a fixed allowance, rather than taking a flat percentage of the
     height, is what keeps the whole grid on screen. The allowance covers the
     sticky header, the heading block and the card padding. max() stops the grid
     collapsing to nothing on very short windows. */
  --grid: max(230px, min(92vw, calc(100svh - 235px)));
  width: var(--grid);
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: calc(var(--grid) / 150);
  font-family: var(--mono);
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 640px) {
  /* The clock is the point of the page, so it takes as much of the viewport as
     it can while still showing all eleven rows. The reading, the controls and
     the privacy line sit below it and scroll into view. */
  .letters { --grid: max(260px, min(86vw, calc(100svh - 275px))); }
}
.letter {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  /* A cell is --grid/11, so this is roughly 62% of the cell, which keeps the
     letters large without them touching their neighbours. */
  font-size: calc(var(--grid) / 17.5);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--faint); /* decorative, aria-hidden, the one place faint is fine */
}
.letter.on { color: var(--ink); }
.letters.smooth .letter { transition: color 0.6s ease; }

.plain-time {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.plain-date {
  margin: 0.3rem 0 0;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
}

.noscript-note {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Full screen: the card becomes the whole display */
.fs-hint { display: none; }
.clock-card:fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  padding: 5vmin;
}
.clock-card:fullscreen .letters { width: min(82vmin, 62rem); }
.clock-card:fullscreen .letter { font-size: min(5vmin, 3.2rem); }
.clock-card:fullscreen .plain-time {
  border-top: 0;
  padding-top: 0;
  margin-top: 3.5vmin;
  font-size: min(2.8vmin, 1.15rem);
}
.clock-card:fullscreen .fs-hint {
  display: block;
  margin: 2.5vmin 0 0;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---- Controls ---- */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: 1.1rem;
}
label.ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}
label.ctl input { width: 15px; height: 15px; }
label.ctl input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.btn-fs {
  appearance: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.15s;
}
.btn-fs:hover { border-color: var(--ink); }
.btn-fs:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-fs[hidden] { display: none; }

.foot {
  text-align: center; padding: 0.5rem 1rem 1.5rem;
  font-size: 0.8rem; color: var(--muted);
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .letters .letter { transition: none !important; }
  .btn-fs { transition: none; }
}

@media (max-width: 480px) {
  /* No h1 override here any more. It used to force 1.6rem, which fought the
     compact clamp above and stole height the clock now uses. */
  .wrap { padding-top: 1rem; }
  .controls { gap: 0.8rem 1.2rem; margin-top: 0; }
}