/* Rillio website: docs/design/website.md, from its mockup in docs/design/explorations/2026-10-18-website/.
   Tokens first; rules below use only tokens. */

/* ---------- Fonts: self-hosted Latin subsets, as Google serves them (website.md §6) ---------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-600-latin.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: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-latin.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: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-italic-latin.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;
}
/* Georgia stretched to the web fonts' metrics, so text does not jump when they arrive.
   Computed from the font files with fontTools (average width of English text, hhea ascent and descent). */
@font-face {
  font-family: "Fraunces fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 600;
  size-adjust: 94.3%;
  ascent-override: 103.7%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 fallback";
  src: local("Georgia");
  size-adjust: 101.5%;
  ascent-override: 102%;
  descent-override: 33%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Colour: mapped from the app palette, docs/design/design-system.md §2. Ratios in website.md §5. */
  --canvas: #F5F6F5;        /* page */
  --surface: #FFFFFF;       /* the lede panel */
  --ink: #29363C;           /* text, headings */
  --muted: #59666B;         /* date line, references, secondary text */
  --accent: #AE5038;        /* links, buttons, focus. Never decoration of content */
  --rule: #D5DADB;          /* hairlines (decorative) */
  --rill: #68757A;          /* the line between lede and detail (non-text, 4.4:1) */
  --target: #FBEDE8;        /* a reference jumped to */

  /* Type: docs/design/typography.md §3. 1rem = 19px at the browser default. */
  --font-heading: "Fraunces", "Fraunces fallback", Georgia, serif;
  --font-lede: "Source Serif 4", "Source Serif 4 fallback", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step-hero:    clamp(2rem, 1.4rem + 3vw, 3.25rem);
  --step-title:   clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --step-heading: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-lede:    clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --step-body:    1rem;
  --step-small:   0.9rem;

  --measure: 32rem;          /* 608px: 64-68 characters of the system sans */
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #171F23;
    --surface: #232E33;
    --ink: #E5E5DF;
    --muted: #B1BBC0;
    --accent: #E8A18B;
    --rule: #3A474D;
    --rill: #8E999E;
    --target: #3A2C28;
  }
}

/* ---------- Base ---------- */

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

html {
  font-size: 118.75%;           /* 19px from the browser's 16px; follows the reader's own setting */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration-line: underline;      /* always: terracotta against slate text is only 2.4:1 */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

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

img, video { display: block; max-width: 100%; }

.skip {
  position: absolute; left: var(--gutter); top: -10rem;
  background: var(--surface); padding: 0.5rem 0.75rem; z-index: 10;
}
.skip:focus { top: 0.5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The wordmark: an SVG image, never text. The night version is swapped by <picture>. */
.wordmark img { height: 100%; width: auto; }

/* ---------- Home ---------- */

.home {
  min-height: 100vh;
  min-height: 100svh;
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) var(--gutter);
  display: grid;
  grid-template-areas: "mark" "water" "text";
  align-content: center;
  row-gap: 1.5rem;
}

.home .wordmark { grid-area: mark; margin: 0; height: clamp(3.25rem, 2.6rem + 3vw, 5rem); }
.home .wordmark a { display: inline-block; height: 100%; }

.home-text { grid-area: text; max-width: 24rem; }

.tagline {
  font-family: var(--font-lede);
  font-size: var(--step-lede);
  line-height: 1.45;
  margin: 0 0 1.75rem;
}

.tagline:has(+ .status) { margin-bottom: 0.5rem; }
.status { margin: 0 0 1.75rem; font-size: var(--step-small); color: var(--muted); }

.latest { margin: 0; }
.latest .label {
  display: block;
  font-size: var(--step-small);
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.15rem;
}
.latest a { font-size: var(--step-body); line-height: 1.4; }

/* The water: a still, graded darker at night by its own file. Never large: capped by
   width and by viewport height. */
.water { grid-area: water; margin: 0; }
.water-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;              /* square corners: a photograph, not a card (owner, 2026-10-19) */
  background: #8b8a83;
}
.water-frame img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 30% 50%;    /* keep the open water on the left, drop stones on the right */
}

/* Phone portrait: the wordmark sits on the picture, with nothing behind it (owner, 2026-10-19).
   It shares the picture's grid cell, so the h1 still comes first in the page. website.md §0a. */
@media (max-width: 40rem) and (orientation: portrait) {
  .home { grid-template-areas: "water" "text"; }
  .home .wordmark {
    grid-area: water;
    z-index: 1;
    align-self: start;
    justify-self: start;
    margin: 1rem 0 0 1rem;
    max-width: calc(100% - 2rem);  /* at large text sizes the name never spills off the picture */
    pointer-events: none;
  }
  .home .wordmark img { max-width: 100%; object-fit: contain; object-position: left top; }
}

@media (min-width: 48rem) {     /* 912px and up: two columns */
  .home {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.35fr);
    grid-template-areas: "mark water" "text water";
    align-content: center;
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 2.25rem;
  }
  .home .wordmark { align-self: end; }
  .water { align-self: center; width: min(100%, 34rem, calc(56vh * 1.5)); justify-self: end; }
  .water-frame { aspect-ratio: 3 / 2; }
}

/* ---------- Home navigation and the footer on every page ---------- */

/* One place for each link (owner, 2026-10-18): the main navigation at the top
   of every page, and only the small print, with Privacy, in the footer. */
.home-head {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.5rem var(--gutter) 0;
  display: flex;
  justify-content: flex-end;
}
.home-head nav, .site-head nav { display: flex; gap: 1.25rem; }
.site-foot p { margin: 0; font-size: var(--step-small); line-height: 44px; color: var(--muted); }
.home-head nav a {
  font-size: var(--step-small);
  display: inline-flex; align-items: center; min-height: 44px;
}
.home { min-height: calc(100svh - 7rem); }

.site-foot {
  border-top: 1px solid var(--rule);
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.5rem var(--gutter) 1.5rem;
}
.post + .site-foot, .page + .site-foot { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.placeholder { color: var(--muted); font-style: italic; }

/* ---------- Contact form ---------- */
/* Borders in --rill (4.8:1 on the surface, day and night; SC 1.4.11 asks 3:1).
   The button is white on terracotta by day (5.2:1) and the canvas on light
   terracotta at night (7.9:1). Every control is at least 44px tall. */

.contact { display: grid; gap: 0.35rem; margin-top: 1.5rem; }
.contact label { font-weight: 600; margin-top: 0.75rem; }
.contact input, .contact textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rill);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  min-height: 44px;
  width: 100%;
}
.contact textarea { resize: vertical; }
.contact button {
  justify-self: start;
  margin-top: 1.25rem;
  font: inherit;
  font-weight: 600;
  color: #FFFFFF;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  min-height: 44px;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .contact button { color: var(--canvas); }
}

/* ---------- Site header (postings, index) ---------- */

.site-head {
  border-bottom: 1px solid var(--rule);
}
.site-head .bar {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-head .wordmark { display: block; height: 1.4rem; }
.site-head nav a {
  font-size: var(--step-small);
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ---------- A posting ---------- */

.post {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}

.post h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-size: var(--step-title);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  margin: 2.5rem 0 0.6rem;
}

.post .meta {
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 2rem;
}

/* The lede: the plain-language opening, for the reader who stops there. */
.lede {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 0.4rem;
  margin: 0 -1.5rem;            /* text aligns with the column; the panel hangs outside it */
}
.lede p {
  font-family: var(--font-lede);
  font-size: var(--step-lede);
  line-height: 1.5;
  margin: 0 0 0.9em;
}
.lede em { font-style: italic; }

/* Between the lede and the detail: a short straight line, nothing else (owner, 2026-10-19). */
.boundary {
  width: 7.5rem;
  margin: 3rem 0 0;
  border: 0;
  border-top: 2px solid var(--rill);
}

.post h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-size: var(--step-heading);
  line-height: 1.25;
  text-wrap: balance;
  margin: 2.75rem 0 0.6rem;
}
.post .boundary + .detail > h2:first-child { margin-top: 2rem; }

.post .detail p { margin: 0 0 1.1em; }
.post strong { font-weight: 600; }

/* Footnote markers: inline links, exempt from the 24px target (WCAG 2.5.8), so padded a little. */
/* Raised by position, not vertical-align, so a marker never opens up its line. */
.post sup { line-height: 0; font-size: 0.75em; vertical-align: baseline; position: relative; top: -0.5em; }
.post sup a {
  text-decoration: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 0.15em;
}
.post sup a:hover { text-decoration: underline; }
.post sup a::before { content: "\2060["; }   /* word joiner: never break before the marker */
.post sup a::after { content: "]"; }

/* References */
.references {
  margin-top: 3.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
}
.references h2 { margin-top: 1.5rem; }
.references ol {
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--muted);
  padding-left: 2.1em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.references li { margin: 0 0 0.8rem; padding: 0.15rem 0.4rem; border-radius: 6px; scroll-margin-top: 2rem; }
.references li::marker { color: var(--muted); }
.references li p { margin: 0; }
.references li:target { background: var(--target); color: var(--ink); }
.references a { overflow-wrap: anywhere; }
.references .backref { text-decoration: none; margin-left: 0.25em; white-space: nowrap; }
.references .backref:hover { text-decoration: underline; }
[id^="fnref"] { scroll-margin-top: 30vh; }

.post-foot {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
}
.post-foot a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 40rem) {     /* phones: the lede panel runs edge to edge */
  .lede {
    margin: 0 calc(-1 * var(--gutter));
    padding: 1.2rem var(--gutter) 0.3rem;
    border-radius: 0;
    border-width: 1px 0;
  }
}

@media print {
  .site-head, .water, .post-foot, .skip { display: none; }
  .lede { border: 1px solid #999; }
}

/* ---------- Writing index (website.md §4: restyled, not designed, until there are three postings) ---------- */

.posts { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.posts li { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.posts h2 { margin: 0 0 0.4rem; }
.posts .summary { margin: 0 0 0.3rem; color: var(--muted); }
.posts .meta { margin: 0; font-size: var(--step-small); color: var(--muted); }