/* ==========================================================================
   SoGoCode homepage: one workday, 7:00 AM to 10:00 PM. The sky tells the time.
   Story sky, clock (HUD), hero, scroll chapters, the promise, and the apps.
   Shared tokens and components are in site.css; demo UIs in demos.css.
   ========================================================================== */

:root { --hud-h: 62px; --slot: 86vh; }

html.home {
  transition: --ink .7s, --ink-2 .7s, --ink-3 .7s, --accent .7s, --scrim .7s, --scrim-strong .7s, --hair .7s, --paper .7s;
  background: linear-gradient(180deg, #cdb8ff 0 50%, #05070f 50% 100%);
}
/* While a device stage is pinned, iOS Safari fills the area behind its floating toolbar from the page
   canvas instead of the edge strip (see .edge-tint in site.css), so there the canvas follows the sky. */
@supports (-webkit-touch-callout: none) {
  html.home.live { background: var(--edge, #05070f); }
}

/* Re-resolve the ink per section so per-section (no-JS) night themes apply to inherited text. */
.hero, .chapter, .night, .apps { color: var(--ink); }

/* --------------------------------------------------------------------------
   Story sky: seven layers cross-faded by the story clock (home.js)
   -------------------------------------------------------------------------- */
html:not(.live) .sky--story { display: none; }
.sky--story .sky-layer { opacity: 0; will-change: opacity; }
.sky--story .sky--dawn { opacity: 1; }
.sky--story .stars { opacity: 0; will-change: opacity; }
.sky--story .sun, .sky--story .moon { opacity: 0; will-change: transform, opacity; }

/* --------------------------------------------------------------------------
   HUD: story clock, day rail, and chapter stops
   -------------------------------------------------------------------------- */
.hud {
  position: fixed; z-index: 40;
  --hud-w: clamp(460px, calc(100vw - 360px), 800px);
  left: 50%; bottom: 18px;
  width: var(--hud-w);
  height: var(--hud-h);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px;
  padding: 0 28px 0 24px;
  border-radius: 999px;
  background: var(--scrim-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--hair);
  box-shadow: 0 18px 44px -26px rgba(40, 20, 60, .55);
  color: var(--ink);
}
html:not(.live) .hud { display: none; }
.hud-now { flex: none; display: flex; align-items: baseline; gap: 6px; min-width: 128px; }
.hud-clock .n { font-variant-numeric: tabular-nums; }
.hud-clock .c { display: inline-block; margin: 0 .01em; transform: translateY(-.05em); }
.hud-clock { font-size: 31px; font-weight: 640; letter-spacing: -.035em; line-height: 1; }
.hud-ampm { font-size: 13px; font-weight: 720; letter-spacing: .08em; color: var(--ink-2); }
.hud-track { position: relative; flex: 1; align-self: stretch; }
.hud-rail { position: absolute; left: 0; right: 0; top: 22px; height: 2px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.hud-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #f0a46e 0%, #f2b36a 30%, #e5774d 68%, #9a5a9a 84%, #6f78c9 100%);
  transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}
.hud-marker { position: absolute; left: -8px; top: 15px; width: 16px; height: 16px; will-change: transform; z-index: 1; }
.hud-sun {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff8de, #ffc35f 72%);
  box-shadow: 0 0 0 3px rgba(255, 190, 90, .28), 0 0 14px 2px rgba(255, 168, 70, .55);
  transition: opacity .4s;
}
.hud-moon { position: absolute; inset: -1px; width: 18px; height: 18px; color: #f4efdf; opacity: 0; transition: opacity .4s; filter: drop-shadow(0 0 5px rgba(220, 225, 255, .7)); }
.hud.is-night .hud-sun { opacity: 0; }
.hud.is-night .hud-moon { opacity: 1; }
.hud-stops li { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); }
.hud-stops a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 34px; padding: 17px 5px 6px;
  border-radius: 10px; text-decoration: none;
  font-size: 12px; font-weight: 640; line-height: 1;
  color: var(--ink-2);
}
.hud-stops a:hover { color: var(--ink); }
.hud-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-3); transition: background-color .3s, border-color .3s, transform .3s; }
.hud-stops a:hover .hud-dot { transform: scale(1.25); }
.hud-stops a[aria-current] { color: var(--ink); }
.hud-stops a[aria-current] .hud-dot { background: var(--accent); border-color: var(--accent); }
.hud-stops a.is-past .hud-dot { border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Hero, 7:00 AM
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + 4vh) var(--gutter) 0;
}
.hero-inner {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  max-width: 1100px; margin: 0 auto; padding-bottom: 3vh; text-align: center;
}
.hero h1 { margin-top: 22px; }
.h1-sans {
  display: block; max-width: 13.5em; margin: 0 auto;
  font-size: clamp(40px, 5.9vw, 86px); font-weight: 720; line-height: 1; letter-spacing: -.048em;
  text-wrap: balance;
}
.h1-serif {
  display: block; margin-top: .08em;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(50px, 7.4vw, 110px); line-height: 1; letter-spacing: -.015em;
  color: #74283d;
}
.hero-lede { max-width: 36em; margin-top: 26px; font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); text-wrap: balance; }
.hero-fine { margin-top: 10px; font-size: 15px; color: var(--ink-3); }
.hero-cue { margin-top: 30px; }
.cue-arrow { display: inline-block; animation: bob 2.6s var(--ease) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

.horizon { position: relative; margin: 0 calc(-1 * var(--gutter)); padding-bottom: calc(var(--hud-h) + 46px); }
.horizon-apps { position: relative; z-index: 1; display: flex; justify-content: center; gap: clamp(28px, 7vw, 120px); }
.horizon-apps a { display: grid; justify-items: center; text-decoration: none; border-radius: 16px; padding: 0 6px 4px; }
.tile-wrap { display: block; width: clamp(56px, 5.4vw, 78px); transition: transform .35s var(--ease); }
.horizon-apps a:hover .tile-wrap { transform: translateY(-5px); }
.horizon .tile { -webkit-box-reflect: below 2px linear-gradient(transparent 70%, rgba(255, 255, 255, .16)); }
.h-name { margin-top: 30px; font-size: 14px; font-weight: 680; }
.h-time { font-size: 12.5px; color: var(--ink-2); }
.horizon-line {
  position: absolute; left: 0; right: 0; top: calc(clamp(56px, 5.4vw, 78px) + 1px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58, 30, 70, .28) 14%, rgba(58, 30, 70, .28) 86%, transparent);
}

/* --------------------------------------------------------------------------
   Chapters: a sticky stage beside scrolling daybook entries
   -------------------------------------------------------------------------- */
.chapter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(24px, 4vw, 72px);
  padding: 0 var(--gutter);
}
.chapter--mac { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.stage {
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: 0; z-index: 1;
  height: 100vh; height: 100svh;
  padding: calc(var(--header-h) + 14px) 0 calc(var(--hud-h) + 38px);
}
.stage-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; container: stage / inline-size; }
.chapter--phone .stage-inner { --pw: min(318px, calc((100svh - 236px) * .486)); }
/* Margin notes beside the phone need room; on narrow stages the demo speaks for itself. */
@container stage (max-width: 620px) {
  .chapter--phone .callout { display: none; }
}
.steps { grid-column: 1; grid-row: 1; position: relative; z-index: 2; padding-bottom: 26vh; }
.step { min-height: var(--slot); display: flex; align-items: center; padding: 5vh 0; }
/* The first entry of a chapter reaches the reading line exactly as the stage sticks. */
.step:first-child { min-height: 100vh; min-height: 100svh; }

.entry {
  position: relative; width: 100%; max-width: 31rem;
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: 26px;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
  will-change: opacity;
}
.entry-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
}
.entry-meta time { font-size: 14px; letter-spacing: .05em; color: var(--accent); }
.entry-title {
  margin: 14px 0 16px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(46px, 4.7vw, 76px); line-height: .96; letter-spacing: -.012em;
  text-wrap: balance;
}
.entry-title:focus-visible, .night-title:focus-visible { outline-offset: 8px; border-radius: 10px; }
.chapter--mac .entry-title { font-size: clamp(40px, 3.7vw, 60px); line-height: 1; }
.entry h3 { margin: 12px 0 10px; font-size: clamp(22px, 1.75vw, 26px); font-weight: 660; line-height: 1.16; letter-spacing: -.024em; text-wrap: balance; }
.entry p { color: var(--ink-2); }
.entry > * + p, .entry > p + ul, .entry > * + .entry-example { margin-top: 14px; }
.entry strong { color: var(--ink); }
.entry-note { font-size: 15px; color: var(--ink-3); }
.entry-list li { position: relative; margin-top: 8px; padding-left: 22px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.entry-list li::before { content: ""; position: absolute; left: 2px; top: .66em; width: 10px; height: 2px; border-radius: 2px; background: var(--accent); }
.entry-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px;
  font-weight: 660; font-size: 15.5px; text-decoration: none; color: var(--ink);
}
.entry-link svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.entry-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.entry-link:hover svg { transform: translateX(3px); }
.entry-example {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--hair);
  font-family: var(--font-mono); font-size: 14px; color: var(--ink);
}
.entry-example svg { width: 16px; height: 16px; color: var(--accent); }
.entry-sum {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair);
  font-size: 15px; color: var(--ink-2);
}
.entry-sum b { font-size: 20px; color: var(--ink); letter-spacing: -.01em; }

/* Margin notes around the chapter stages. */
.callout--tap { left: calc(50% + var(--pw) * .5 + 22px); bottom: 15%; }
.callout--tap::before { right: 100%; }
.callout--lunch::before, .callout--total::before, .callout--share::before { left: 100%; }
.callout--lunch { right: calc(50% + var(--pw) * .5 + 22px); top: 30%; }
.callout--total { right: calc(50% + var(--pw) * .5 + 22px); top: 29%; }
.callout--share { right: calc(50% + var(--pw) * .5 + 22px); top: 18%; }
.chapter--mac .callout { padding: 6px 13px 7px; font-size: 20px; max-width: none; white-space: nowrap; }
.callout--why { left: 46%; top: 0; }
.callout--keep { left: 33%; bottom: 0; }
.callout--only { right: 4%; bottom: 0; }
.callout--once { right: 3%; top: 0; }
.callout--words { left: 5%; bottom: 0; }
.callout--score { right: 2%; top: 0; }
.callout--drag { left: 5%; bottom: 0; }
.callout--why::before, .callout--keep::before, .callout--only::before, .callout--once::before,
.callout--words::before, .callout--score::before, .callout--drag::before { display: none; }

/* Home Screen widget beside the morning phone. */
.stage .widget { right: calc(50% + var(--pw) * .5 + 26px); top: 42%; }

/* --------------------------------------------------------------------------
   10:00 PM: the promise, under the stars
   -------------------------------------------------------------------------- */
.night { position: relative; padding: 16vh var(--gutter) 12vh; }
.night-inner { max-width: 1060px; margin: 0 auto; text-align: center; }
.night-title {
  margin-top: 22px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(62px, 10vw, 156px); line-height: .9; letter-spacing: -.02em;
}
.night-title em { font-style: italic; color: #ffd0a2; }
.night-sub { margin-top: 26px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 620; letter-spacing: -.012em; }
.night-body { max-width: 40em; margin: 18px auto 0; font-size: 18px; color: var(--ink-2); }
.night .values { margin-top: 64px; }
.night .value-i { color: #ffd0a2; }

/* The apps, at the end of the day */
.apps { position: relative; padding: 10vh var(--gutter) 8vh; }
.apps-inner { max-width: 1200px; margin: 0 auto; }
.apps-title { margin-top: 14px; font-family: var(--font-serif); font-weight: 400; font-size: clamp(46px, 5.6vw, 84px); line-height: .98; letter-spacing: -.015em; }
.apps-sub { margin-top: 12px; color: var(--ink-2); }
.app-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.app-card {
  display: flex; flex-direction: column;
  padding: 26px; border-radius: 26px;
  background: rgba(255, 255, 255, .055); border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.app-head { display: flex; align-items: center; gap: 16px; }
.app-head .tile { width: 64px; flex: none; }
.app-head h3 { font-size: 22px; font-weight: 720; letter-spacing: -.022em; line-height: 1.15; }
.app-kind { margin-top: 2px; font-size: 14.5px; color: var(--ink-2); }
.app-desc { margin-top: 18px; font-size: 15.5px; color: var(--ink-2); }
.app-facts { display: grid; gap: 12px; margin: 18px 0 24px; font-size: 14px; }
.app-facts div { display: grid; gap: 2px; }
.app-facts dt { font-size: 11.5px; font-weight: 720; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.app-facts dd { margin: 0; color: var(--ink-2); }
.app-facts b { color: var(--ink); }
.app-ctas { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

.home .copy { padding-bottom: 104px; }

/* Older links to the previous homepage's sections keep working. */
.anchor-alias { display: block; position: relative; top: calc(-1 * var(--header-h)); height: 0; }

/* --------------------------------------------------------------------------
   Static skies when the live sky is off (no JavaScript, or before it starts)
   -------------------------------------------------------------------------- */
html:not(.live) .hero { background: linear-gradient(180deg, #cdb8ff 0%, #e6c3e3 55%, #ffe0c2 100%); }
html:not(.live) #morning { background: linear-gradient(180deg, #ffe0c2 0%, #fff6e5 16%, #e4f0ff 56%, #f5f9ff 100%); }
html:not(.live) #afternoon { background: linear-gradient(180deg, #f5f9ff 0%, #fff1d6 30%, #ffe2b0 100%); }
html:not(.live) #evening { background: linear-gradient(180deg, #ffe2b0 0%, #ffcf98 55%, #ffbf80 100%); }
html:not(.live) #dusk { background: linear-gradient(180deg, #ffbf80 0%, #b8627a 9%, #4a3470 20%, #2a2750 55%, #1b1f3b 100%); }
html:not(.live) .night {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 30%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 79% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, #fff 50%, transparent 51%),
    linear-gradient(180deg, #1b1f3b 0%, #0b1026 40%, #070a16 100%);
}
html:not(.live) .apps, html:not(.live) .home .site-footer { background: #05070f; }

@media (prefers-reduced-motion: reduce) {
  .rm-fade .sky-layer, .rm-fade .moon, .rm-fade .stars { transition: opacity .8s ease !important; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .app-cards { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
}

/* Shorter desktop viewports: keep the hero's horizon clear of the HUD. */
@media (min-width: 761px) and (max-height: 860px) {
  .hero { padding-top: calc(var(--header-h) + 2vh); }
  .h1-sans { font-size: clamp(40px, min(5.9vw, 8.6vh), 86px); }
  .h1-serif { font-size: clamp(48px, min(7.4vw, 10.6vh), 110px); }
  .hero h1 { margin-top: 16px; }
  .hero-lede { margin-top: 18px; }
  .hero-cue { margin-top: 20px; }
  .horizon { padding-bottom: calc(var(--hud-h) + 34px); }
  .h-name { margin-top: 24px; }
}

@media (max-width: 760px) {
  :root { --hud-h: 42px; --top-h: calc(var(--header-h) + var(--hud-h)); --stage-h: calc(58svh - var(--top-h)); }

  .hud {
    top: var(--header-h); bottom: auto; left: 0; width: 100%; --hud-w: 100%;
    transform: none; border-radius: 0; border-width: 0 0 1px;
    height: var(--hud-h); padding: 0 18px 0 16px; gap: 14px;
    box-shadow: none;
  }
  .hud-now { min-width: 76px; gap: 4px; }
  .hud-clock { font-size: 18px; letter-spacing: -.02em; }
  .hud-ampm { font-size: 10.5px; }
  .hud-rail { top: 14px; }
  .hud-marker { top: 8px; left: -7px; width: 14px; height: 14px; }
  .hud-moon { width: 16px; height: 16px; }
  .hud-stops a { min-width: 34px; min-height: 42px; padding: 10px 2px 4px; gap: 3px; font-size: 9.5px; justify-content: flex-start; }
  .hud-dot { width: 8px; height: 8px; border-width: 2px; }

  .hero { padding-top: calc(var(--top-h) + 3vh); }
  .hero h1 { margin-top: 16px; }
  .hero-lede { margin-top: 18px; }
  .hero-cue { margin-top: 22px; }
  .horizon { padding-bottom: 64px; }
  .h-name { margin-top: 24px; font-size: 12.5px; }
  .h-time { font-size: 11.5px; }

  .chapter, .chapter--mac { display: block; padding: 0 12px; }
  .stage {
    position: sticky; top: var(--top-h); z-index: 3;
    height: var(--stage-h);
    padding: 8px 0;
    pointer-events: none;
  }
  .chapter--phone .stage-inner { --pw: min(236px, calc((var(--stage-h) - 16px) * .514)); }
  .stage .phone { aspect-ratio: 9 / 17.5; }
  .stage .mac { width: min(100%, 440px, calc((var(--stage-h) - 16px) * .9)); }
  .stage .ls.mac { width: min(100%, 440px, calc((var(--stage-h) - 16px) * .72)); }
  .steps { margin-top: calc(-1 * var(--stage-h)); padding-bottom: 16svh; }
  .step { min-height: 84svh; align-items: flex-end; padding: 0 0 6svh; }
  .step:first-child { min-height: 84svh; padding-top: calc(var(--stage-h) + 40px); }
  .entry { max-width: none; padding: 16px 18px 18px; border-radius: 20px; background: var(--scrim-strong); }
  .entry-meta { font-size: 11px; gap: 4px 12px; }
  .entry-meta time { font-size: 12.5px; }
  .entry-title { font-size: clamp(34px, 9.6vw, 40px); margin: 8px 0 10px; }
  .chapter--mac .entry-title { font-size: clamp(29px, 8.2vw, 34px); }
  .entry h3 { font-size: 19.5px; margin: 6px 0 6px; }
  .entry p { font-size: 15px; line-height: 1.45; }
  .entry > * + p, .entry > p + ul, .entry > * + .entry-example { margin-top: 9px; }
  .entry-note { font-size: 13.5px; }
  .entry-list li { font-size: 14px; margin-top: 4px; line-height: 1.4; }
  .entry-link { margin-top: 4px; font-size: 15px; }
  .entry-example { font-size: 12.5px; padding: 6px 10px; }
  .entry-sum { margin-top: 10px; padding-top: 10px; font-size: 13.5px; }
  .entry-sum b { font-size: 17px; }

  .stage .widget { top: auto; bottom: 4%; right: calc(50% + var(--pw) * .5 - var(--pw) * .26); width: calc(var(--pw) * .5); }
  .stage .widget-cap { font-size: 11px; margin-top: 6px; padding: 2px 8px; }
  .stage .widget-card { background: #fbfbfd; }
  .stage .widget.is-dark .widget-card { background: #1c1c22; }
  .callout { display: none; }

  .night { padding: 18vh 18px 10vh; }
  .night-body { font-size: 16.5px; }
  .night .values { margin-top: 44px; }
  .apps { padding: 8vh 18px 6vh; }
  .app-cards { grid-template-columns: 1fr; }
  .app-card { padding: 22px; }
  .home .copy { padding-bottom: 80px; }
}

@media print {
  .hud { display: none !important; }
  .stage { position: static; height: auto; }
}