/* Good Company Fitness public pages, in the app's identity (docs/design/identity, Native/Identity/GCPalette.swift,
   GCType.swift). By day the scene is in icon order: the icon's cobalt sky over its cream hill, and pages are read
   on the cream ground. Night is one look: navy sky glowing at the horizon over a dark hill. Cobalt family only.
   Chillax for headlines and small labels (D100's face), the system face for reading. No scripts, no images:
   the scene is inline SVG and CSS. */

/* Chillax (Indian Type Foundry, ITF Free Font License): the official woff2 files, unmodified, as the licence requires. */
@font-face {
  font-family: "Chillax";
  src: url("/assets/fonts/Chillax-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Chillax";
  src: url("/assets/fonts/Chillax-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Cobalt family, icon order by day (GCPalette: home light, inverted). */
  --gc-sky: #2340B8;            /* the icon's field */
  --gc-sky-low: #1B339F;        /* toward the horizon */
  --gc-sky-text: #F6E8CC;       /* cream on the sky */
  --gc-sky-muted: rgba(246, 232, 204, 0.74);
  --gc-shade: rgba(7, 15, 68, 0.55);   /* the hill's shade on the sky */
  --gc-ground: #F6E8CC;         /* the cream hill: where pages are read */
  --gc-ground-deep: #A9B8F0;    /* the hill's lower ramp, at the very bottom */
  --gc-crest: #FFF7E6;          /* the lit edge, light from the top left */
  --gc-eye: #FCF6EC;            /* the eyes: white as the icon's read, shaded toward cool ink (GCEyes) */
  --gc-eye-shade: #D3CCC5;
  --gc-pupil: #0E1650;
  --gc-ink: #0E1650;            /* text on the ground */
  --gc-muted: #4A5182;
  --gc-line: rgba(14, 22, 80, 0.14);
  --gc-accent: #FF9E66;
  --gc-accent-text: #A8441A;    /* the accent as text on the cream ground */
  --gc-glow: #FFA36E;           /* the coach's light along the ridge */
  --gc-note: rgba(255, 158, 102, 0.24);
  --gc-fill: rgba(255, 158, 102, 0.5);

  --gc-display: "Chillax", ui-rounded, -apple-system, system-ui, sans-serif;
  --gc-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --gc-size: 1.0625rem;
  --gc-size-small: 0.9375rem;
  --gc-leading: 1.45;
  --gc-measure: 38rem;
  --gc-gutter: 1.25rem;
}

/* Night: navy sky, dark hill (GCPalette nights.home). */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --gc-sky: #0B1339;
    --gc-sky-low: #2A44B0;
    --gc-sky-text: #F6E8CC;
    --gc-sky-muted: rgba(246, 232, 204, 0.7);
    --gc-shade: rgba(3, 6, 24, 0.6);
    --gc-ground: #0D1646;
    --gc-ground-deep: #050A26;
    --gc-crest: #3550C8;
    --gc-eye: #FCF6EC;
    --gc-eye-shade: #D3CCC5;
    --gc-ink: #F6E8CC;
    --gc-muted: rgba(246, 232, 204, 0.72);
    --gc-line: rgba(246, 232, 204, 0.16);
    --gc-accent-text: #FF9E66;
    --gc-note: rgba(255, 158, 102, 0.16);
    --gc-fill: rgba(255, 158, 102, 0.36);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--gc-ground); }

body {
  margin: 0;
  background: linear-gradient(to bottom, var(--gc-ground) calc(100% - 22rem), var(--gc-ground-deep) 140%);
  color: var(--gc-ink);
  font: var(--gc-size)/var(--gc-leading) var(--gc-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: calc(var(--gc-measure) + 2 * var(--gc-gutter));
  margin: 0 auto;
  padding: 0 var(--gc-gutter);
}

a { color: inherit; text-decoration-color: var(--gc-accent-text); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2.5px; }
a:focus-visible { outline: 2px solid var(--gc-accent); outline-offset: 3px; border-radius: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gc-gutter); top: 0.5rem; z-index: 2; background: var(--gc-ground); color: var(--gc-ink); padding: 0.25rem 0.5rem; }

/* Small labels, as the app now sets them (c73d3f0): Chillax Semibold in normal case, a touch larger than caps would be. */
.label {
  font-family: var(--gc-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* ---- The sky: masthead on every page ---- */

.sky {
  position: relative;
  background: linear-gradient(to bottom, var(--gc-sky) 35%, var(--gc-sky-low));
  color: var(--gc-sky-text);
}
.sky a { text-decoration-color: var(--gc-accent); }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
}
.home {
  font-family: var(--gc-display);
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.home img { display: block; height: 1.75rem; width: auto; }
.landing .home img { height: 2rem; }
.mark-note { width: 100%; }
.bar nav { display: flex; gap: 1.25rem; font-size: var(--gc-size-small); }
.bar nav a { color: var(--gc-sky-muted); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--gc-sky-text); }

h1, h2, h3 { font-family: var(--gc-display); font-weight: 600; line-height: 1.12; text-wrap: balance; }
h3 { font-weight: 500; }
h1 { font-size: clamp(2.25rem, 7vw, 3.25rem); letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin: 3rem 0 0.75rem; }
h3 { font-size: 1.1875rem; margin: 2rem 0 0.4rem; }

.masthead-title { padding: 3.5rem var(--gc-gutter) 0.5rem; }
.masthead-title .label { display: block; color: var(--gc-sky-muted); margin-top: 0.85rem; }

/* The ridge: the icon's rolling line, where the sky meets the ground. */
.ridge { display: block; position: relative; z-index: 1; width: 100%; height: clamp(56px, 9vw, 110px); margin: -1px 0 -3px; }
.ridge .shade { fill: none; stroke: var(--gc-shade); stroke-width: 14; filter: url(#gc-soft); }
.ridge .hill { fill: var(--gc-ground); }
.ridge .crest { fill: none; stroke: var(--gc-crest); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

/* ---- The ground: where pages are read ---- */

main { flex: 1; padding: 1.5rem 0 4rem; }
p, ul, ol { margin: 0 0 1rem; text-wrap: pretty; }
ul, ol { padding-left: 1.2rem; }
li { padding-left: 0.15rem; }
li + li { margin-top: 0.45rem; }
li::marker { color: var(--gc-accent-text); }
strong { font-weight: 600; }
.muted { color: var(--gc-muted); }

.draft {
  margin: 0.5rem 0 2.5rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: 14px;
  background: var(--gc-note);
  font-size: var(--gc-size-small);
}
.draft .label { display: block; color: var(--gc-accent-text); margin-bottom: 0.3rem; }
.draft p { margin: 0; }
mark.fill { background: var(--gc-fill); color: inherit; padding: 0 0.15em; border-radius: 3px; }

dl.rows { margin: 0 0 1rem; }
dl.rows > div { padding: 1.1rem 0; border-top: 1px solid var(--gc-line); }
dl.rows > div:last-child { border-bottom: 1px solid var(--gc-line); }
dl.rows dt { font-family: var(--gc-display); font-weight: 500; font-size: 1.1875rem; margin-bottom: 0.35rem; }
dl.rows dd { margin: 0; }
dl.rows dd + dd { margin-top: 0.5rem; }
dl.rows .label { display: block; color: var(--gc-muted); margin-bottom: 0.1rem; }

.callout { font-weight: 600; }

footer.site { padding: 1.5rem 0 2.5rem; font-size: var(--gc-size-small); color: var(--gc-muted); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
footer.site a { color: var(--gc-muted); text-decoration-color: var(--gc-line); }
footer.site a:hover { color: var(--gc-ink); text-decoration-color: var(--gc-accent-text); }

/* ---- Landing: the icon's scene, as Today wears it ---- */

/* The first view holds the whole scene, eyes and smile included, on short laptop screens too: sizes follow the
   window's height as well as its width. */
.landing { background: var(--gc-ground); --scene-h: clamp(190px, min(32vw, 34vh), 360px); }
.landing .sky { flex: 1; display: flex; flex-direction: column; }
.landing .pitch { padding-top: clamp(1.5rem, 7vh, 8rem); padding-bottom: calc(var(--scene-h) * 0.42); }
.landing h1 { font-size: clamp(2.25rem, min(9.5vw, 9vh), 5rem); letter-spacing: -0.02em; line-height: 1.02; max-width: 12ch; }
.landing .lede { font-size: clamp(1rem, 2.3vh, 1.1875rem); color: var(--gc-sky-text); max-width: 32rem; margin: clamp(0.75rem, 2.5vh, 1.5rem) 0 0; }

.scene { position: relative; z-index: 1; margin-top: auto; margin-bottom: -3px; height: var(--scene-h, clamp(240px, 32vw, 360px)); }
.scene svg { position: absolute; display: block; }
.scene .land { inset: 0; width: 100%; height: 100%; }
.scene .land .hill { fill: var(--gc-ground); }
.scene .land .shade { fill: none; stroke: var(--gc-shade); stroke-width: 26; filter: url(#gc-soft-wide); }
.scene .land .crest { fill: none; stroke: var(--gc-crest); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.scene .land .glow { fill: none; stroke: var(--gc-glow); stroke-width: 7; filter: url(#gc-glow); opacity: 0.55; }
/* The eyes float over the smile, the right one higher, as on the icon. Sized by the scene's height so they keep their shape. */
.scene .eyes { height: 60.3%; aspect-ratio: 400 / 292; left: 54.4%; top: -38%; transform: translateX(-50%); overflow: visible; }
.scene .eyes .lit { stop-color: #FFFFFF; }
.scene .eyes .mid { stop-color: var(--gc-eye); }
.scene .eyes .dim { stop-color: var(--gc-eye-shade); }
.scene .eyes .pupil { fill: var(--gc-pupil); }
.scene .eyes .glint { fill: #FFFFFF; fill-opacity: 0.85; }
.scene .eyes g { transform-box: fill-box; transform-origin: center; }

.landing .facts { margin: 0; padding: 1.5rem 0 0.5rem; color: var(--gc-muted); }
.landing footer.site { padding-top: 0.75rem; }

/* Live light (assets/atmosphere.js adds .gl once WebGL2 runs): the canvas draws sky, hill and light behind the page,
   and the script draws the eyes, so the static scene steps aside. */
.stage { position: relative; display: flex; flex-direction: column; min-height: 100svh; }
.atmo { display: none; }
.face { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.face .gloss { fill: #FFFFFF; }
.gl .atmo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.gl .landing .sky { background: none; }
.gl .landing .scene .land, .gl .landing .scene .eyes { visibility: hidden; }
.gl .landing .bar, .gl .landing .pitch, .gl .landing .facts, .gl .landing footer.site { position: relative; z-index: 2; }
/* With the live scene the hill is the icon at its own proportions, scaled to the window's width (assets/atmosphere.js),
   so the page reserves room by width: on landscape screens the words sit to the left above the hill's low bump, on
   portrait screens above the whole hill and the eyes. */
.gl .landing .pitch { padding-bottom: 0; }
@media (min-aspect-ratio: 1/1) {
  .gl .landing .wrap { max-width: none; padding-left: clamp(1.25rem, 6vw, 7.5rem); padding-right: clamp(1.25rem, 6vw, 7.5rem); }
  .gl .landing .scene { height: calc(13vw + 2.5rem); }
}
@media (max-aspect-ratio: 1/1) {
  .gl .landing .scene { height: calc(52vw + 2rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .scene .land .glow { animation: gc-breathe 7s ease-in-out infinite; }
  .scene .eyes g { animation: gc-blink 6.5s infinite; }
  .scene .eyes g + g { animation-delay: 0.04s; }
}
@keyframes gc-breathe { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.8; } }
@keyframes gc-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }

@media print {
  .sky { background: none; color: #000; }
  .ridge, .scene, .bar nav, footer.site nav, .skip { display: none; }
  body { background: #fff; color: #000; }
}