/* Hazel — hazelpuzzle.com
 *
 * Every token below is lifted from the shipped app: the colors and radii
 * from docs/design/design_handoff_home_view/README.md and
 * Joinery/Home/HomeTray.swift, the accent from the asset catalog's
 * AccentColor (Marigold, one value for both appearances). The two papers
 * are the app's Ground colorset moved in lightness only, and the secondary
 * text is raised to clear AA on them; each says so where it's set. Nothing
 * else was picked to look good on a web page in isolation.
 *
 * No @font-face, no @import, no external anything. The privacy page says this
 * site loads nothing from another domain, and that has to stay true.
 */

:root {
  /* The paper is the app's table, Ground #B0A28C, lifted to OKLCH L 0.96 and
   * C 0.02 at its own hue (79°): the same warm tan, pale enough to read on. */
  --paper: #F9F1E3;
  --ink: #191712;            /* Ink, primary */
  /* The app's secondary ink is 0.45, which is 2.8:1 on this paper. These are
   * raised until both tiers clear AA for body text: 6.3:1 and 4.8:1. */
  --ink-2: rgba(25, 23, 18, 0.70);
  --ink-3: rgba(25, 23, 18, 0.62); /* Ink, secondary */
  --rule: rgba(25, 23, 18, 0.14);  /* Rule */
  --panel: #F2F0EB;          /* TrayPalette.panelPaper */
  --line: rgba(25, 23, 18, 0.62);  /* the cut, drawn */
  --underline: rgba(25, 23, 18, 0.3);
  --accent: #E8A200;         /* AccentColor, Marigold */
  --wordmark-ink-start: rgba(187, 120, 0, 0.8);  /* WordmarkInkStart */
  --wordmark-ink-end: rgba(106, 52, 28, 0.8);    /* WordmarkInkEnd */

  --measure: 36rem;
  --inset: 0rem;             /* the cut's breakout; 0 until there's room for it */
  --radius-image: 3px;       /* board card radius */

  --stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Ground's dark value, #9A8E7B, taken down to OKLCH L 0.21 at the same
     * hue. Primary text on it is 15.6:1, the tiers below 6.4:1 and 4.8:1. */
    --paper: #1B1812;
    --ink: #F4F1E9;          /* Text on felt, primary */
    --ink-2: rgba(244, 241, 233, 0.6);
    --ink-3: rgba(244, 241, 233, 0.5); /* Text on felt, secondary */
    --rule: rgba(255, 255, 255, 0.13); /* Hairline on felt */
    --panel: #332E28;        /* Felt base */
    --line: rgba(244, 241, 233, 0.55);
    --underline: rgba(244, 241, 233, 0.35);
    --wordmark-ink-start: #A36200;
    --wordmark-ink-end: #6A341C;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--stack);
  font-size: 1.0625rem;      /* 17px, the app's body size */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* One column. `text` is the reading measure; `wide` is the small breakout the
 * cut gets, because it is the one thing on the page worth looking at closely.
 * The outer minmax keeps the margins wide on a large screen instead of letting
 * the column drift toward the edges.
 *
 * `--inset` stays 0 until the viewport can hold the measure plus the breakout.
 * Below that the breakout would come out of the reading column instead of out
 * of the margins, which squeezes the text to about a third of the screen. */
.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.5rem, 1fr)
    [wide-start] minmax(0, var(--inset))
    [text-start] minmax(0, var(--measure)) [text-end]
    minmax(0, var(--inset)) [wide-end]
    minmax(1.5rem, 1fr) [full-end];
  padding: 5rem 0 6rem;
}

.page > * { grid-column: text; }
.page > .wide { grid-column: wide; }

@media (min-width: 52rem) {
  .page { --inset: 5rem; }
}

@media (min-width: 60rem) {
  .page { padding-top: 7.5rem; }
}

/* Type ------------------------------------------------------------------ */

h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* The app's wordmark, outlined. Not the system face plus a `letter-spacing`:
 * the logotype's kerning is a per-pair table (a→z and z→e close hardest
 * around the z's open diagonals, the stem-facing H→a and e→l ease), which one
 * tracking value can't express — and outlines mean it looks the same on a
 * machine that has never had SF Pro on it. The ink is the app's gold-to-
 * chestnut gradient, stops per appearance in the tokens above. */
.wordmark {
  --wordmark-width: 11.25rem;
  /* The H's height: its stems run the full 35.32 units of the 116.44-wide
   * outline, while the round letters overshoot below it. */
  --cap-height: calc(var(--wordmark-width) * 35.32 / 116.44);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--cap-height) * 0.3);
  margin: 0;
  line-height: 0;
}

.wordmark svg {
  display: block;
  width: var(--wordmark-width);
  height: auto;
}

/* The app icon, cap height, top-aligned with the H so the two share a top
 * and bottom edge. The export is full-bleed square; the radius stands in for
 * the Home Screen mask. */
.wordmark .icon {
  display: block;
  width: var(--cap-height);
  height: var(--cap-height);
  border-radius: 22.5%;
}

/* The heading's real text. The outlines carry the look; this carries the
 * word, so the page still has a readable <h1> for anything that reads text
 * rather than the accessibility tree, and the name stays selectable. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.subtitle {
  margin: 0.5rem 0 0;
  font-size: 1.125rem;
  color: var(--ink-2);
}

/* Section heads take the app's tray section label exactly: 12/15, weight 600,
 * 0.13em, uppercase — the catalog register, and already the app's. */
h2 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.35;
}

p { margin: 1.15rem 0 0; }
p:first-child { margin-top: 0; }

.meta {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.subtitle + p,
.meta + p { margin-top: 2rem; }

/* The closing fact, stated flatly, the way a catalog states materials — its
 * own line and its own air, but full ink. Knocked back it read as fine print,
 * which is the opposite of what the sentence is doing. */
.spec {
  margin-top: 1.75rem;
}

/* The closer after it gets the same air, so the spec line keeps a clear
 * margin on both sides instead of reading as the top of a pair. */
.spec + p { margin-top: 1.75rem; }

/* Sections --------------------------------------------------------------- */

section {
  margin-top: 4.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

section > h2 + p { margin-top: 1.25rem; }

/* Links ------------------------------------------------------------------ */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--underline);
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-color: var(--accent); }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* The single action on the page: Apple's App Store badge, used as supplied —
 * no recolouring, no resizing below 40px tall, and a quarter of its height in
 * clear space all round (the margin and padding here more than cover it). The
 * footer keeps the same href as a plain link; there is one badge on the page,
 * or it stops being the action. */
.action {
  margin-top: 2.25rem;
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 12px;
  line-height: 0;
}

.badge img {
  display: block;
  width: auto;
  height: 48px;
}

.badge:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-radius: 8px;
}

/* Figures ---------------------------------------------------------------- */

figure { margin: 0; }

/* The cut: a real cut from the engine at a fixed seed, drawn rather than
 * pictured, so it is sharp at any size and themed by CSS. It sits in the
 * reading column with the paragraph that explains it, not in the breakout —
 * it is evidence for the text beside it now, not the thing you land on. */
.cut {
  margin: 2.5rem 0 2rem;
  color: var(--line);
}

.cut svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The same label the section heads use, one notch quieter — the app's tray
 * section label, which is a system face, not the mono fact line. */
figcaption {
  margin-top: 0.9rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The shots are whole screens, uncropped, which makes them tall: one at the
 * full reading measure runs past 1200px, and a reader scrolls a phone's length
 * to get past a single picture. So a screen is shown at a phone's width, not
 * the column's, and centered — the text is ranged left and a tall centered
 * plate sits in it the way a plate sits in a book.
 *
 * `.shot` is one screen, `.shots` a pair side by side at the same width, for
 * the two that only argue together: the presets, and the three dials behind
 * them. The pair stays two-up all the way down; a single column would only
 * make each one taller.
 *
 * An iPad screen is squarer than a phone's. `.ipad` gives a single one the
 * width that brings it to a phone shot's height, so it reads as the bigger
 * screen it is rather than a smaller one. `.devices` is the phone-and-iPad
 * pair: the columns are in the ratio of the two screens' aspect ratios
 * (660/1433 and 1064/1419), which puts both at the same height. The phone keeps
 * the 17rem every other phone shot has, so the iPad beside it comes out at
 * that full height too, and the pair takes the wide column to fit: the point
 * of the pair is how much more room the iPad gives you. */
.shot,
.shots {
  margin-top: 2.5rem;
  text-align: center;
}

.shot picture,
.shots {
  display: block;
  max-width: 17rem;
  margin-left: auto;
  margin-right: auto;
}

.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 35rem;
}

.shots figcaption { grid-column: 1 / -1; }

.shot.ipad picture { max-width: 27.7rem; }

.shots.devices {
  grid-template-columns: 46fr 75fr;
  max-width: 45.7rem;
}

/* The recording is that same screen, at that same width. */
.clip { margin-top: 2.25rem; }

.clip video {
  max-width: 17rem;
}

.clip video,
.shot img,
.shots img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background: var(--panel);
  /* A hairline, not a shadow. The board shots carry the app's own ground and
   * separate from the page on their own; the create sheet is white to its
   * edges and would otherwise dissolve into the paper. */
  border: 1px solid var(--rule);
  border-radius: var(--radius-image);
}

.clip figcaption,
.shot figcaption,
.shots figcaption { text-align: center; }

/* Support: the questions that actually arrive ---------------------------- */

dl { margin: 1.75rem 0 0; }

dt {
  margin-top: 1.75rem;
  font-weight: 600;
}

dt:first-child { margin-top: 0; }

dd { margin: 0.3rem 0 0; }

/* Footer ----------------------------------------------------------------- */

footer {
  margin-top: 4.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-2);
}

footer p { margin: 0.4rem 0 0; }
footer p:first-child { margin-top: 0; }