/* stayuphill.com. Loads after ds/tokens.css and ds/uphill.css.
   Colours are tokens. Sizes come from the golden ratio, φ = 1.618 (SITE_05 Step 3): type steps up by φ from body
   text (17, 27, 44, 72, 116), spacing uses Fibonacci steps only (8, 13, 21, 34, 55, 89, 144), the sky band is 1/φ⁴
   of the screen's height, and the reading column is 880 / φ. These named values are the site's own and are listed
   in the SITE_05 report as overrides of the style guide. */

:root {
  --phi: 1.618;
  /* Type, stepping up by φ from body text */
  --type-17: 17px; --type-27: 27px; --type-44: 44px; --type-72: 72px; --type-116: 116px;
  /* Fibonacci spacing */
  --fib-8: 8px; --fib-13: 13px; --fib-21: 21px; --fib-34: 34px; --fib-55: 55px; --fib-89: 89px; --fib-144: 144px;
  --gap-head: var(--fib-21);                      /* headline to its text */
  --gap-visual: var(--fib-34);                    /* text to visual: 34 on phones, 55 on wide screens */
  --gap-section: var(--fib-89);                   /* between sections: 89 on phones, 144 on wide screens */
  --gutter: var(--fib-21);                        /* the page's side margins: 21 on phones, 34 on wide screens */
  /* Widths */
  --col-visual: 880px;
  --col-read: 544px;                              /* 880 / φ */
  /* The sky band: 1/φ⁴ of the screen's height (14.6%), at least 144 (see the report) and at most 180 */
  --band-h: clamp(144px, 14.6vh, 180px);
  --band-h: clamp(144px, 14.6svh, 180px);
  --land-h: calc(var(--band-h) * 0.382);          /* the hills: 38.2% of the band; the sky is the other 61.8% */
  --sun-size: calc(var(--band-h) * 0.236);        /* the sun and moon: 23.6% of the band */
  --gutter-left: max(var(--gutter), env(safe-area-inset-left));
  --gutter-right: max(var(--gutter), env(safe-area-inset-right));
  --edge-left: max(var(--gutter-left), calc((100% - var(--size-page-max)) / 2));
  --edge-right: max(var(--gutter-right), calc((100% - var(--size-page-max)) / 2));
}
@media (min-width: 880px) {
  :root { --gap-visual: var(--fib-55); --gap-section: var(--fib-144); --gutter: var(--fib-34); }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --band-h: max(90px, 14.6svh); }        /* a phone held sideways */
}

[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.up-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-wrap: break-word; background: var(--bg); }
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-inner); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter-left); top: var(--fib-8); z-index: 20; transform: translateY(-200%); background: var(--card); color: var(--accent); padding: var(--fib-13) var(--fib-21); border-radius: var(--radius-pill); }
.skip-link:focus { transform: none; }
.wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--size-page-max) + var(--gutter-left) + var(--gutter-right)); margin-inline: auto; padding-left: var(--gutter-left); padding-right: var(--gutter-right); }
p, li { text-wrap: pretty; }

/* Headlines: bold and tightly spaced. Each sentence sits on its own line, as large as the size allows while it
   still fits (container units); below the smallest size it may wrap rather than become unreadable. */
.type-hero, .type-section, .type-title { --ls: -0.03em; font-family: var(--font-sans); font-weight: 700; letter-spacing: var(--ls); text-wrap: balance; }
.type-hero { --cap: var(--type-44); --floor: var(--type-27); font-size: var(--cap); line-height: 1.04; }
.type-section { --cap: var(--type-44); --floor: 20px; font-size: var(--cap); line-height: 1.06; }
.type-title { --cap: var(--type-44); --floor: var(--type-27); font-size: var(--cap); line-height: 1.06; }
@media (min-width: 880px) {
  .type-hero { --cap: var(--type-116); }
  .type-section, .type-title { --cap: var(--type-72); }
}
.fit { display: block; font-size: clamp(var(--floor), 100cqi / var(--fit), var(--cap)); letter-spacing: var(--ls, -0.03em); }   /* spacing in ems of the fitted size */
.fit .line { display: block; }
.line { display: block; }
.nowrap { display: inline-block; }

/* The header: the same solid pills on every page. */
.site-head { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fib-8);
  padding: max(5px, env(safe-area-inset-top)) var(--edge-right) var(--fib-8) var(--edge-left); pointer-events: none; }   /* 5: a Fibonacci step, so the sun can climb high enough */
.site-head > * { pointer-events: auto; }
.header-right { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.solid-pill { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--fib-8); min-height: var(--size-touch);
  padding: 0 var(--fib-13); flex: none; border: 1px solid var(--stroke); border-radius: var(--radius-pill); background: var(--card);
  color: var(--text); text-decoration: none; white-space: nowrap; }
a.solid-pill.is-link, .solid-pill.is-link span { color: var(--accent); }
.solid-pill.is-link[aria-current="page"] { background: var(--accent-tint); border-color: var(--accent-tint); }
.solid-pill img { flex: none; }
.solid-pill--soon { color: var(--text-secondary); }
/* The header (SITE_09): the Uphill mark on the left and the menu button on the right, on every page at every width.
   Nothing else. The menu holds the links: full screen on phones, a panel about 320 wide from the top right on wide
   screens. A language version that is not public yet adds its "Preview" line above (css below). */
/* The Uphill mark and word (SITE_10): no pill or chip behind them. A soft shadow in the opposite tone lets them read against
   every sky, day to night: a light glow behind dark letters by day, a dark one behind light letters at night. */
.site-head > a.solid-pill { background: none; border: 0; padding: 0 var(--fib-8) 0 0; box-shadow: none; min-width: var(--size-touch); color: var(--text); }
.site-head > a.solid-pill .body-strong { font-size: 19px; text-shadow: 0 0 8px var(--mark-glow), 0 0 3px var(--mark-glow), 0 1px 2px var(--mark-glow); }
.site-head > a.solid-pill img { filter: drop-shadow(0 0 4px var(--mark-glow)) drop-shadow(0 1px 2px var(--mark-glow)); }
.site-head { --mark-glow: rgba(255, 255, 255, 0.95); }
.site-head[data-theme="dark"] { --mark-glow: rgba(4, 8, 24, 0.9); }
.menu { position: relative; }
.menu-button { position: relative; z-index: 2; justify-content: center; width: var(--size-touch); padding: 0 !important; cursor: pointer; list-style: none; color: var(--text); }
.menu-button::-webkit-details-marker { display: none; }
.menu-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-x, .menu[open] .menu-lines { display: none; }
.menu[open] .menu-x { display: inline; }
.menu-panel { position: fixed; inset: 0; z-index: 1; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--size-touch) + var(--fib-55)) var(--gutter-right) var(--fib-55) var(--gutter-left); background: var(--bg); color: var(--text); }
@media (min-width: 640px) {   /* wide screens: a panel from the top right, about 320 wide, with soft shadow */
  .menu-panel { inset: calc(max(5px, env(safe-area-inset-top)) + var(--size-touch) + 4px) var(--edge-right) auto auto; width: 320px; max-width: calc(100vw - 2 * var(--gutter));
    padding: var(--fib-13) var(--fib-21) var(--fib-21); border-radius: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10), 0 24px 48px -12px rgba(0, 0, 0, 0.35); border: 1px solid var(--stroke); }
  .menu-links a { min-height: var(--fib-55); font-size: 22px !important; }
}
.menu[open] .menu-panel { animation: menu-in 0.22s ease-out; }
.menu.is-closing .menu-panel { animation: menu-out 0.18s ease-in forwards; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-13px); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-13px); } }
@media (prefers-reduced-motion: reduce) { .menu[open] .menu-panel, .menu.is-closing .menu-panel { animation: none; } }
.menu-links { list-style: none; padding: 0; margin: 0 auto; max-width: var(--col-read); }
.menu-links a { display: flex; align-items: center; min-height: var(--fib-55); padding: var(--fib-8) 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-sans); font-size: var(--type-27); line-height: 1.2; font-weight: 600; color: var(--accent); text-decoration: none; }
.menu-links li:last-child a { border-bottom: 0; }
.menu-links a[aria-current] { color: var(--text); }
html.menu-open:not(.menu-wide), html.menu-open:not(.menu-wide) body { overflow: hidden; }
@media (max-width: 359px) { :root { --gutter: var(--fib-13); } }

/* The "Preview. Not yet reviewed." line on a language version that is not yet public (Thai, Russian). */
.preview-note { flex-basis: 100%; margin: 0 0 4px; text-align: center; pointer-events: auto; }
.preview-note span { display: inline-block; padding: 2px var(--fib-13); border-radius: var(--radius-pill); background: var(--card); color: var(--text); border: 1px solid var(--stroke); }

/* A public language version of this page, suggested only to visitors whose browser asks for it (js/lang.js). */
.lang-suggest { flex-basis: 100%; margin: 0 0 4px; display: flex; justify-content: center; align-items: center; gap: 4px; pointer-events: auto; }
.lang-suggest a, .lang-close { display: inline-flex; align-items: center; min-height: var(--size-touch); border-radius: var(--radius-pill);
  background: var(--card); border: 1px solid var(--stroke); color: var(--accent); font: inherit; }
.lang-suggest a { padding: 0 var(--fib-13); }
.lang-close { justify-content: center; min-width: var(--size-touch); padding: 0; color: var(--text); cursor: pointer; font-size: 20px; }
.lang-chooser { margin-top: var(--fib-13); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--fib-13); }
.lang-chooser a { display: inline-flex; align-items: center; min-height: var(--size-touch); color: var(--accent); }
.lang-chooser a[aria-current] { color: var(--text); text-decoration: none; }

/* The App Store line or badge. Both hold the same height, so nothing moves when one replaces the other. */
.store { display: flex; align-items: center; min-height: var(--size-button); }
.store-badge { display: inline-flex; align-items: center; min-height: var(--size-touch); border-radius: var(--radius-inner); }
.store-badge img { display: block; height: var(--size-button); width: auto; }
.store-pill { display: block; width: 100%; text-align: center; color: var(--text); }   /* plain text, not a button (SITE_09) */
.button-pill { display: inline-flex; align-items: center; justify-content: center; min-height: var(--size-button); padding: 0 var(--fib-21);
  border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); text-decoration: none; }

/* One phone frame drawn around every phone screen: a rim in the dark card colour, about 3% of the phone's width,
   corners that follow the screen, a hairline lighter edge and a soft shadow. Any screenshot of the same shape fits. */
.frame-fig { --w: var(--phone-single); margin-inline: auto; width: var(--w); max-width: 100%; }
.frame { box-sizing: border-box; width: 100%; padding: calc(var(--w) * 0.03); background: var(--card); border: 1px solid var(--stroke);
  border-radius: calc(var(--w) * 0.135); box-shadow: var(--soft-shadow); }
.frame img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * 0.105); }
:root { --soft-shadow: 0 2px 6px rgba(0, 0, 0, 0.10), 0 16px 32px -12px rgba(0, 0, 0, 0.36); }


/* The scene's sky, used by the home page and by the strip at the top of other pages. */
.sky { position: absolute; inset: 0;
  --sky-start: calc(100% - var(--band-h)); --sky-end: calc(100% - var(--land-h) * 0.62);
  background: linear-gradient(var(--sky-top) 0, var(--sky-top) var(--sky-start), var(--sky-bottom) var(--sky-end)); }
.land .far-1 { fill: var(--far-1); } .land .far-2 { fill: var(--far-2); }
.land .ridge-1 { fill: var(--ridge-1); } .land .ridge-2 { fill: var(--ridge-2); }

/* Kosciuszko (SITE_07 Step 2), as the app draws it: a broad, rounded dome with three small patches of snow. Its
   summit is 82% of the band's height above the band's foot, scaled evenly, so it is exactly as broad and gentle as
   the app's. It stands in the widest gap between the header pills (js/mountain.js sets --summit-x; this fallback
   is an average place). The sun and moon pass behind it. The app's Kosciuszko colours: by day its darker rock tone
   (the app's body colour, #B9C2DA, nearly matches the day sky), in the evening and at night its dark land colours,
   with the app's evening snow. */
:root { --mtn-h: calc(var(--band-h) * 0.8); }   /* the summit: 80% of the band's height */
.mountain { position: absolute; bottom: 0; height: var(--mtn-h); width: calc(var(--mtn-h) * 3); max-width: none;   /* the base: 3 times the height */
  left: calc(var(--summit-x, 50%) - var(--mtn-h) * 1.5); display: block; overflow: visible; }
.mtn-day { --m-lit: #8E9CC4; --m-snow: #FFFFFF; }
.mtn-evening { --m-lit: #46558C; --m-snow: #FFD9C8; }
.mtn-night { --m-lit: #46558C; --m-snow: #DCE4F6; }
.mountain .mtn { fill: var(--m-lit); } .mountain .mtn-snow { fill: var(--m-snow); }
.scene-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Support, Privacy, Terms, 404 and How Datum decides: a still strip of the scene in the Day look at the band
   height, the header in its sky, a big title, then a centred reading column with left-aligned text. */
.top { position: relative; }
.top .site-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.strip { position: relative; height: var(--band-h); overflow: hidden; }
.strip .sky { --sky-start: 0%; --sky-end: calc(100% - var(--land-h) * 0.62); }
.strip .land { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--land-h); display: block; max-width: none; }
.strip .strip-cut { fill: var(--bg); }
.strip-sun { position: absolute; width: var(--sun-size); height: var(--sun-size); left: calc(var(--summit-x, 50%) - var(--mtn-h) * 1.05 - var(--sun-size) / 2); top: calc(var(--band-h) * 0.55 - var(--sun-size) / 2); }   /* in clear sky left of Kosciuszko, below the mark */
.strip-sun svg { display: block; width: 100%; height: 100%; overflow: visible; }
.strip [data-fade] { display: none; }
/* Datum's own band (SITE_09), on /datum/ and How Datum decides: the same height and header, Datum's light ground with a
   soft teal glow, the top of Datum's ring of 42 ticks, one amber. It melts into the page below, with no hard line. */
.strip--datum { background: #F3F4F1 radial-gradient(closest-side at 50% 118%, rgba(69, 200, 180, 0.30), rgba(69, 200, 180, 0) 100%) no-repeat; }
.strip--datum::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fib-34); background: linear-gradient(rgba(243, 244, 241, 0), #F3F4F1); }
.datum-ring { position: absolute; left: 50%; top: 0; width: 420px; height: 144px; margin-left: -210px; max-width: none; }
.datum-ring .amber { stroke: #E8962A; }
/* The still evening strip (SITE_06 Step 4.8): the evening sun only. */
.strip.strip--evening .sun-morning, .strip.strip--evening .sun-day { display: none; }
.strip.strip--evening .sun-evening { display: inline !important; }
.doc { box-sizing: border-box; width: 100%; padding: var(--fib-34) var(--gutter-right) var(--gap-section) var(--gutter-left); }
.doc-head { max-width: var(--col-visual); margin: 0 auto; text-align: center; container-type: inline-size; }
.doc-lead { max-width: var(--col-read); margin: var(--gap-head) auto 0; }
.doc-col { box-sizing: border-box; max-width: var(--col-read); margin: var(--gap-visual) auto 0; text-align: left; }
.doc-col > * + * { margin-top: var(--fib-13); }
.doc-col .doc-h2 { font-family: var(--font-sans); font-size: var(--type-27); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin-top: var(--fib-55); scroll-margin-top: var(--fib-21); }
.doc-col .doc-h2 + * { margin-top: var(--gap-head); }
.doc-col ul, .doc-col ol { padding-left: var(--fib-21); }
.doc-col li + li { margin-top: var(--fib-8); }
.doc-button { text-align: center; }
.toc { padding: var(--fib-13) var(--fib-21); background: var(--card); border-radius: var(--radius-card); }
.toc ul { list-style: none; padding: 0 !important; }
.toc li + li { margin-top: 0 !important; }
.toc a { display: flex; align-items: center; min-height: var(--size-touch); }
.updated { margin-top: var(--fib-55) !important; }

/* Support: the questions, each a row that opens on a tap, in one card. */
.qa-card { background: var(--card); border-radius: var(--radius-card); padding: 0 var(--fib-21); }
.qa + .qa { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: var(--fib-13); min-height: var(--size-row); padding: var(--fib-13) 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h2 { margin: 0; }
.qa .chevron, .refs .chevron { flex: none; width: var(--fib-21); height: var(--fib-21); color: var(--text-tertiary); }
.qa[open] .chevron, .refs[open] .chevron { transform: rotate(180deg); }
.qa .answer { padding-bottom: var(--fib-21); }
.qa .answer > * + * { margin-top: var(--fib-13); }
.qa .answer ul { padding-left: var(--fib-21); }
.qa .answer li + li { margin-top: var(--fib-8); }

/* The footer: the same on every page, on its own ground in the night foothill colour. */
.site-footer { position: relative; z-index: 1; background: var(--ridge-2); color: var(--text); text-align: center;
  padding-top: var(--fib-55); padding-bottom: max(var(--fib-55), env(safe-area-inset-bottom)); }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--fib-21); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--size-touch); }
.site-footer p { margin-top: var(--fib-8); }
.site-footer .small-print { color: var(--text-secondary); max-width: 65ch; margin-inline: auto; }
.site-footer .small-print + .small-print { margin-top: var(--fib-8); }
/* The references: a left-aligned block centred in the column. On phones they fold behind "References". */
.refs { box-sizing: border-box; max-width: var(--col-visual); margin: var(--fib-21) auto 0; text-align: left; }
.refs-summary { display: flex; align-items: center; justify-content: center; gap: var(--fib-8); min-height: var(--size-touch); list-style: none; cursor: pointer; }
.refs-summary::-webkit-details-marker { display: none; }
.refs-summary .references-title { margin: 0; }
.refs .references { margin-top: var(--fib-8); padding-left: var(--fib-21); }
.references li + li { margin-top: var(--fib-8); }
.references li { scroll-margin-top: var(--fib-89); }
.references a { padding-block: 16px; }   /* an invisible tap area, 44 high, that does not move the text */
.ref-back { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; min-width: var(--size-touch); min-height: var(--size-touch); margin: -13px 0; padding: 0 !important; }
.ref-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 700px) {   /* open on wide screens, with nothing to tap */
  .refs-summary { cursor: default; pointer-events: none; }
  .refs-summary .chevron { display: none; }
}

/* Links inside sentences: a taller invisible tap area, so each is at least 44 high without moving the text. */
main p a, main li a { padding-block: var(--fib-13); }
/* In the reading column a short link is never split across two lines, so each stays a full 44-point target. */
.doc-col p a { display: inline-block; padding-block: 13px; margin-block: -13px; }
/* Footnote numbers: small and raised, each with a 44 point tap area that does not move the text. */
.fn { font-size: 0.6em; line-height: 0; vertical-align: super; }
.fn a, .doc-col p .fn a { display: inline-block; line-height: 12px; padding: 16px 20px; margin: -16px -20px; text-decoration: none; font-weight: 600; scroll-margin-top: 50vh; }


.toc a { padding-block: 0; }

/* Increase Contrast: no scenery, plain bg, and the strongest text and border tokens. */
@media (prefers-contrast: more) {
  body { --text-secondary: var(--text); --text-tertiary: var(--text); --stroke: var(--text-secondary); --line: var(--text-secondary); }
  a { text-decoration-thickness: 2px; }
  .strip { display: none; }
  .top .site-head { position: static; background: var(--bg); border-bottom: 1px solid var(--line); }
  .site-footer { background: var(--bg); }
}

/* A gentle fade as the page first appears, and none with Reduce Motion. */
@media (prefers-reduced-motion: no-preference) {
  .fade-in { animation: up-fade-in 0.6s ease-out both; }
  @keyframes up-fade-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Paper: black on white, no header or footer links, and every link's address written out. */
@media print {
  :root, body { /* Paper is white with near-black ink in either theme: two tokens that never change with the theme. */
    --text: var(--on-live-just-above-strong); --text-secondary: var(--on-live-just-above-strong); --accent: var(--on-live-just-above-strong);
    --bg: var(--on-live); --card: var(--on-live); --line: var(--on-live-just-above-strong); color-scheme: light; }
  body.up-page { background: none; display: block; min-height: 0; }
  .skip-link, .site-head, .site-footer .footer-links, .strip, .toc { display: none; }
  .site-footer { background: none; }
  .doc { padding-top: var(--fib-21); }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; }
  h1, h2 { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .fade-in { animation: none; }
}