/* skyhue.app — the app's own world on the web (DESIGN.md tokens): warm
   charcoal ground, cream Figtree ink at three strengths, hairlines not
   boxes, the scene palette kept for the scene. */
@font-face { font-family: "Figtree"; src: url("fonts/figtree_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree_extrabold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --charcoal: #1A1821;
  --panel-tint: #27242E;
  --paper: #F3EEE8;
  --ink: rgba(243, 238, 232, 0.95);
  --ink-soft: rgba(243, 238, 232, 0.70);
  --ink-faint: rgba(243, 238, 232, 0.55);
  --hairline: rgba(243, 238, 232, 0.09);
  --head-rule: rgba(243, 238, 232, 0.22);
  --panel-edge: rgba(243, 238, 232, 0.08);
  --sage: #9FB79B;
  --lavender: #B7A6E6;
  --sun-gold: #FFD54F;
  /* The clear-day scene (ScenePalettes.clearDay), untouched. */
  --sky-top: #FDE0C4;
  --sky-mid: #F9C89A;
  --sky-bottom: #7AB5EC;
  --ridge-far: #B8A6C8;
  --ridge-mid: #8F6B7D;
  --ridge-near: #3D2E42;
  --scene-ink: #16181D;
  --measure: 36rem;
  --col: 68rem;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--ink);
  font-family: "Figtree", -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
::selection { background: rgba(183, 166, 230, 0.35); color: var(--paper); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--sun-gold); outline-offset: 3px; border-radius: 8px; }
img { display: block; max-width: 100%; height: auto; }

.col { width: min(var(--col), 100% - 2.5rem); margin: 0 auto; }

/* Header: over the sky on the home page, over charcoal elsewhere. */
.top {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.5rem;
}
.mark { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1.125rem; text-decoration: none; }
.mark svg { width: 1.25rem; height: 1.25rem; }
.top nav { display: flex; gap: 1.6rem; }
.top nav a { text-decoration: none; font-weight: 500; opacity: 0.72; }
.top nav a:hover, .top nav a[aria-current="page"] { opacity: 1; }

/* The scene: the first viewport on the home page. */
.scene {
  position: relative; overflow: hidden; color: var(--scene-ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-bottom) 100%);
  /* The first viewport, but never a wall: capped so a tall monitor (or a
     full-page capture) does not stretch the sky into thousands of pixels. */
  min-height: min(100svh, 56rem);
  display: flex; flex-direction: column;
}
.scene .col { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }
.scene .mark, .scene nav a { color: var(--scene-ink); }
/* The page's sun is anchored to the phone and hidden wholly behind its
   top-right corner: only the halo spills past the body, so the app's own
   drawn sun on the screen is the one disc the viewport shows. */
.sun {
  position: absolute; z-index: 0; right: 1.2rem; top: 3rem;
  width: 8.5rem; aspect-ratio: 1; border-radius: 50%;
  background: var(--sun-gold);
  will-change: transform;
}
/* The glow the app draws: soft, not stepped rings. */
.sun::after {
  content: ""; position: absolute; inset: -70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 213, 79, 0.45) 0%, rgba(255, 213, 79, 0.18) 38%, rgba(255, 213, 79, 0) 70%);
  filter: blur(6px); z-index: -1;
}
.ridges { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem; align-items: end;
  flex: 1; padding-top: clamp(2rem, 7vh, 5rem);
}
.hero .copy { align-self: center; padding-bottom: clamp(4rem, 18vh, 12rem); max-width: 34rem; }
h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(3rem, 7.2vw, 6rem);
  font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance;
}
.lede { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; line-height: 1.45; color: rgba(22, 24, 29, 0.78); max-width: 30rem; text-wrap: pretty; }
.price { margin: 0.9rem 0 0; font-size: 1rem; color: rgba(22, 24, 29, 0.7); }
.actions { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pill {
  display: inline-block; padding: 0.8rem 1.25rem; border-radius: 999px;
  background: var(--scene-ink); color: var(--paper); font-weight: 600; text-decoration: none;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), background-color 160ms;
}
.pill:hover { opacity: 0.88; }
.pill:active { transform: scale(0.97); }
.scene .pill { background: var(--scene-ink); color: var(--paper); }
.hero .shot { position: relative; justify-self: end; width: min(100%, 24rem); min-width: 0; margin-bottom: -1px; }
/* The hero's phone is an actual iPhone, whole, as a product shot (user
   2026-10-25, Impeccable live round, variant "floating" accepted): a
   silver titanium rail, a thin black bezel, the screen's continuous
   corner, the Dynamic Island and the side keys, drawn in CSS rather than
   a stock mockup. It floats, leaning a few degrees with its left rail
   turned toward the reader, on one soft offset shadow. */
.hero .shot-floating { width: min(100%, 16.5rem); justify-self: end; align-self: center; margin: 0 2.5rem 3.5rem 0; }
.shot-floating .sun { right: 1.2rem; top: 3rem; }
.tphone {
  position: relative; z-index: 1; padding: 0.3rem; border-radius: 3.9rem;
  background: linear-gradient(160deg, #F4F4F6 0%, #C7C8CD 22%, #E8E8EB 46%, #A6A7AD 72%, #D8D9DD 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), inset 0 0 0 2px rgba(58, 58, 64, 0.35);
  transform-origin: 50% 50%;
  transform: perspective(1400px) rotateY(12deg) rotateZ(6deg) translateY(-0.5rem);
  filter: drop-shadow(-0.6rem 2.6rem 2.2rem rgba(56, 34, 52, 0.36));
  will-change: transform;
}
/* Left: the two volume keys (the second is the first's shadow); right: the side button. */
.tphone::before, .tphone::after {
  content: ""; position: absolute; width: 4px; border-radius: 2px;
  background: linear-gradient(90deg, #9C9DA3, #E2E3E6 55%, #B5B6BB);
  box-shadow: 0 0 0 1px rgba(58, 58, 64, 0.35);
}
.tphone::before { left: -4px; top: 8.4rem; height: 2.3rem; box-shadow: 0 0 0 1px rgba(58, 58, 64, 0.35), 0 3rem 0 0 #C9CACF; }
.tphone::after  { right: -4px; top: 9.9rem; height: 3.6rem; }
.tphone-bezel { padding: 0.5rem; border-radius: 3.6rem; background: #0B0B0E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.tphone-screen { position: relative; overflow: hidden; border-radius: 3.1rem; background: #000; }
.tphone-screen img { display: block; width: 100%; height: auto; }
/* Sized as a share of the screen so it sits exactly over the island already
   in the screenshot at every width (measured 187 × 50 at 598 × 1300). */
.phone-island {
  position: absolute; left: 50%; top: 1.6%; transform: translateX(-50%);
  width: 32%; aspect-ratio: 187 / 50; border-radius: 999px; background: #000;
}
/* (The bare framed shot the hero used before the phone body: kept for the
   feature sections' .frame only.) */
.frame { border-radius: 28px; overflow: hidden; outline: 1px solid var(--panel-edge); outline-offset: -1px; background: var(--panel-tint); }
.frame img { display: block; }

/* Sections: Acme's rhythm, Skyhue's grammar. */
main { padding-top: 1rem; }
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center;
  padding: 5.5rem 0; border-top: 1px solid var(--hairline);
}
.feature:first-of-type { border-top: 0; }
.feature .text { max-width: 28rem; }
.feature h2 { margin: 0 0 0.7rem; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
.feature p { margin: 0 0 0.8rem; color: var(--ink-soft); font-size: 1.0625rem; text-wrap: pretty; }
.feature p:last-child { margin-bottom: 0; }
.feature .shot { width: min(100%, 21rem); min-width: 0; justify-self: center; }
.feature:nth-of-type(even) .shot { order: -1; }
.note { color: var(--ink-faint); font-size: 0.9375rem; }
.note a { color: var(--ink-soft); }

/* Closing action. */
.close {
  border-top: 1px solid var(--head-rule); padding: 5.5rem 0 4.5rem;
  text-align: left;
}
.close h2 { margin: 0 0 0.6rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.02em; }
.close p { margin: 0 0 1.4rem; color: var(--ink-soft); max-width: 30rem; }
.badge img { height: 3.25rem; width: auto; }

/* Read pages. */
.page { padding: 1rem 0 4rem; }
.page .prose { max-width: var(--measure); }
.page h1 { font-size: clamp(2.25rem, 4vw, 3rem); margin-bottom: 0.4rem; }
.page .dated { color: var(--ink-faint); margin: 0 0 2rem; }
.page h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin: 2.4rem 0 0.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.page h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.page p, .page li { color: var(--ink-soft); }
.page p { margin: 0 0 0.9rem; }
.page ul { padding-left: 1.1em; margin: 0 0 0.9rem; }
.page li { margin-bottom: 0.5rem; }
.page strong { color: var(--ink); font-weight: 600; }
.sources { margin: 0; }
.sources div { padding: 0.8rem 0; border-top: 1px solid var(--hairline); }
.sources dt { font-weight: 600; color: var(--ink); margin-bottom: 0.15rem; }
.sources dd { margin: 0; color: var(--ink-soft); }
.terms { font-size: 0.9375rem; }

footer { border-top: 1px solid var(--hairline); padding: 1.4rem 0 3rem; color: var(--ink-faint); font-size: 0.9375rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 0.6rem; }
footer a { text-decoration: none; color: var(--ink-soft); }
footer a:hover { color: var(--ink); }

@media (max-width: 760px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr lets the screenshot's intrinsic
     width push the column past the viewport. */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero .copy { padding-bottom: 0; }
  .hero .shot { justify-self: center; width: min(100%, 18rem); }
  .hero .shot-floating { width: min(100%, 14.5rem); justify-self: center; margin: 0.5rem 0 2.5rem; }
  .tphone::before { top: 7rem; height: 2rem; box-shadow: 0 0 0 1px rgba(58, 58, 64, 0.35), 0 2.5rem 0 0 #C9CACF; }
  .tphone::after { top: 8.2rem; height: 3rem; }
  /* On a phone the sun sits above the headline at the edge, so the
     headline never has to read against it. */
  .sun { top: 2rem; right: 0.9rem; width: 5.5rem; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 3.5rem 0; }
  .feature:nth-of-type(even) .shot { order: 0; }
  .feature .shot { width: min(100%, 17rem); }
  .close { padding: 3.5rem 0 3rem; }
  .top nav { gap: 1rem; }
}