/* ==========================================================================
   SolunarKit — solunarkit.com
   System inherited from wedgetimer.com: editorial display face, one decisive
   accent, mono for anything that is a measurement, paper-thin rules instead of
   boxes. Re-skinned for an app that lives at night.

   Wedge Timer is a physical classroom object, so its site is laid out like
   paper. This app is read before dawn on a boat, so the site is dark first and
   the light theme is the override.

   Every colour below is lifted from SolunarKit/Views/Theme.swift, not invented:
     --accent  Theme.major        #F5AA2E
     --bg      Theme.background   #101621 (bottom stop)
     --band    Theme.background   #161D2B (top stop)
     --card    Theme.card         #1B2332
   Light-mode amber is darkened to #8f5c07 because #F5AA2E on white is 1.9:1 and
   would be unreadable body-link text.

   Motion contract: one sweep of the hero day-rail on load, and the "now" marker
   sits where now actually is. Nothing else moves. All of it is disabled under
   prefers-reduced-motion.
   ========================================================================== */

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

:root {
  --accent: #F5AA2E;
  --accent-2: #ffc25c;
  --accent-wash: rgba(245, 170, 46, 0.10);
  --minor: #6f9bd1;

  --bg: #101621;
  --band: #161D2B;
  --card: #1B2332;
  --line: #26314a;
  --line-2: #3a4762;

  --ink: #F2F5F9;
  --ink-2: #A3AFBF;
  --ink-3: #7d8a9b;

  --f-display: "Clash Display", "Avenir Next", "Helvetica Neue", sans-serif;
  --f-body: "Switzer", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --f-mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w: 1140px;
  --pad: clamp(20px, 5vw, 40px);
  --r: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.reduce { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }

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

.wrap { max-width: var(--w); margin: 0 auto; padding-inline: var(--pad); }
.narrow { max-width: 700px; }

/* A measurement label. Used anywhere the page states a fact about the thing
   rather than talking to the reader. */
.tag {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 300;
  background: var(--accent); color: #101621; padding: 10px 18px;
  border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 14px; color: #101621; }

/* ==========================  nav  ========================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  height: 68px;
  padding-inline: var(--pad);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--line); }
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-weight: 600; font-size: 18px;
  letter-spacing: -0.01em;
}
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-right { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); }
.nav-right a:not(.btn) {
  color: var(--ink-2); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: color 0.2s;
}
.nav-right a:not(.btn):hover { color: var(--ink); }
@media (max-width: 760px) { .nav-link-hide { display: none; } }

/* ==========================  buttons  ========================== */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: #101621;
  font-weight: 600; font-size: 16px;
  padding: 14px 26px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 20px -6px rgba(245, 170, 46, 0.45);
  transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.btn:hover {
  background: var(--accent-2); color: #101621;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(245, 170, 46, 0.5);
}
.btn-sm { padding: 10px 18px; font-size: 14.5px; }
.badge img { height: 46px; width: auto; }

/* ==========================  hero  ========================== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(44px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.3rem);
  margin: 16px 0 18px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede {
  font-size: clamp(1.06rem, 1.9vw, 1.24rem);
  color: var(--ink-2);
  max-width: 36ch;
}
.hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; }
.hero-note { margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }
.hero-note b { color: var(--ink-2); font-weight: 600; }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; text-align: left; padding-top: 34px; }
  .hero-art { order: -1; }
}

/* ==========================  the day rail  ========================== */
/* The hero art is the product, not a picture of it: a real day laid out from
   midnight to midnight, with the two major windows (Moon overhead and
   underfoot) and the two minor ones (moonrise, moonset) in their real places
   for the date named in the card. It is a fixed sample day, computed and
   cross-checked, so the card names its date rather than implying "today". */
.rail-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.75);
}
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.rail-place { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; }
.rail-rating { display: inline-flex; gap: 4px; align-items: center; }
.rail-fish { width: 15px; height: 15px; }
.rail-fish-on { color: var(--accent); }
.rail-fish-off { color: var(--line-2); }
.rail-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 20px; }

.rail { width: 100%; height: auto; display: block; overflow: visible; }
.rail-track { fill: var(--band); stroke: var(--line); stroke-width: 1; }
.rail-major { fill: var(--accent); }
.rail-minor { fill: var(--minor); }
.rail-hour { stroke: var(--line-2); stroke-width: 1; }
.rail-hour-major { stroke: var(--ink-3); stroke-width: 1.4; }
.rail-label { font-family: var(--f-mono); font-size: 9px; fill: var(--ink-3); text-anchor: middle; }

.rail-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 18px; font-size: 13.5px; color: var(--ink-2);
}
.rail-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rail-key { width: 11px; height: 11px; border-radius: 3px; }

.rail-next {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.rail-next-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); }
.rail-next-time {
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.5rem; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ==========================  claim strip  ========================== */
.strip {
  border-block: 1px solid var(--line);
  background: var(--band);
}
.strip-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.strip-item {
  padding: 26px 0;
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.strip-item:first-child { border-left: 0; padding-left: 0; }
.strip-item b {
  display: block;
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.22rem; letter-spacing: -0.01em;
  margin: 7px 0 3px;
}
.strip-item span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 620px) {
  .strip-item { border-left: 0; padding-left: 0; padding-block: 18px; border-top: 1px solid var(--line); }
  .strip-item:first-child { border-top: 0; }
}

/* ==========================  sections  ========================== */
section { padding: clamp(56px, 8vw, 104px) 0; }
section.band { background: var(--band); border-block: 1px solid var(--line); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-bottom: 16px; }
h3 { font-size: 1.16rem; letter-spacing: -0.008em; }
.sec-head { max-width: 620px; margin-bottom: clamp(30px, 4.5vw, 52px); }
.sec-head p { color: var(--ink-2); font-size: 1.06rem; margin-top: 12px; }
p + p { margin-top: 14px; }
.muted { color: var(--ink-2); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 76px);
  align-items: center;
}
.split + .split { margin-top: clamp(52px, 8vw, 104px); }
.split.flip .split-art { order: -1; }
.split-text h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.split-text p { color: var(--ink-2); margin-top: 14px; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.flip .split-art { order: 0; }
}

/* ==========================  device frame  ========================== */
/* The screenshots are real captures, so the status bar is real pixels — this
   frame only supplies the bezel around them. */
.phone {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(160deg, #3b4457, #1a202c00 45%, #0a0e16);
  background-color: #171d28;
  box-shadow:
    0 2px 3px rgba(255, 255, 255, 0.16) inset,
    0 30px 60px -24px rgba(0, 0, 0, 0.7),
    0 8px 18px -10px rgba(0, 0, 0, 0.6);
}
.phone img { border-radius: 32px; width: 100%; }
.phone-lg { width: min(100%, 340px); }

/* A screenshot that is already a card and does not want a bezel around it —
   widgets, mostly. Same footprint as .phone so the grid still lines up. */
.bare {
  width: min(100%, 300px);
  margin-inline: auto;
}
.bare img { border-radius: 18px; width: 100%; }
/* In a split column the cards can take the full width rather than the phone's. */
.bare-wide { width: 100%; max-width: 520px; }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 4vw, 46px);
  align-items: start;
}
.shot figcaption { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.shot figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; }

/* ==========================  spec table  ========================== */
.spec { border-top: 1px solid var(--line); }
.spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  gap: 16px clamp(20px, 4vw, 48px);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec-row dd { color: var(--ink-2); font-size: 16px; }
@media (max-width: 560px) {
  .spec-row { grid-template-columns: 1fr; gap: 4px; padding: 15px 0; }
}

/* ==========================  reasons  ========================== */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(26px, 3.6vw, 44px);
}
.reason { border-top: 2px solid var(--ink-2); padding-top: 18px; }
.reason:nth-child(1) { border-top-color: var(--accent); }
.reason h3 { margin-bottom: 8px; }
.reason p { color: var(--ink-2); font-size: 15.5px; }

/* ==========================  faq  ========================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--f-display); font-weight: 600;
  font-size: 1.06rem; letter-spacing: -0.008em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { color: var(--ink-2); padding-bottom: 20px; max-width: 66ch; font-size: 16px; }

/* ==========================  closing cta  ========================== */
.close-cta { text-align: center; }
.close-cta .icon-lg {
  width: 82px; height: 82px; border-radius: 19px; margin: 0 auto 22px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}

/* ==========================  footer  ========================== */
footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 60px;
  font-size: 15px; color: var(--ink-2);
}
.foot-grid {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  justify-content: space-between; align-items: flex-start;
}
footer nav { display: flex; flex-wrap: wrap; gap: 12px 26px; }
footer nav a { color: var(--ink-2); text-decoration: none; }
footer nav a:hover { color: var(--accent); }
.foot-legal { margin-top: 26px; font-size: 13.5px; color: var(--ink-3); max-width: 66ch; }

/* ==========================  long-form docs  ========================== */
.doc { padding: clamp(38px, 6vw, 66px) 0 clamp(50px, 7vw, 80px); }
.doc h1 { font-size: clamp(2rem, 4.6vw, 2.7rem); margin-bottom: 10px; }
.doc .updated { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); margin-bottom: 34px; letter-spacing: 0.03em; }
.doc h2 { font-size: 1.5rem; margin: 44px 0 14px; }
.doc h3 { font-size: 1.1rem; margin: 30px 0 8px; }
.doc p, .doc li { color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 20px; list-style: disc; }
.doc li { margin-bottom: 8px; }
.doc .callout {
  background: var(--card);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 20px 24px;
  margin: 26px 0;
}
.doc .callout p { color: var(--ink); }

/* ==========================  light  ========================== */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fa;
    --band: #eef1f5;
    --card: #ffffff;
    --line: #dde2ea;
    --line-2: #c3cbd8;
    --ink: #101621;
    --ink-2: #4a5566;
    --ink-3: #6d7887;
    /* #F5AA2E on white is 1.9:1. Links and small type need a real amber. */
    --accent: #8f5c07;
    --accent-2: #6f4605;
    --accent-wash: rgba(143, 92, 7, 0.08);
    --minor: #3f6da3;
  }
  .btn { color: #fff; box-shadow: 0 6px 20px -8px rgba(143, 92, 7, 0.4); }
  .btn:hover { color: #fff; }
  .skip-link { color: #fff; }
  /* The rail is the app's own colouring, so it keeps the app's amber even on
     paper — it is a chart, not text, and the contrast rule is different. */
  .rail-major { fill: #F5AA2E; }
  .rail-fish-on { color: #d98c07; }
  .rail-next-time { color: #8f5c07; }
  .phone {
    background: linear-gradient(160deg, #2c313c, #16191f00 45%, #0d0f14);
    background-color: #1d212a;
    box-shadow:
      0 2px 3px rgba(255, 255, 255, 0.28) inset,
      0 30px 60px -24px rgba(16, 22, 33, 0.42),
      0 8px 18px -10px rgba(16, 22, 33, 0.3);
  }
  .close-cta .icon-lg { box-shadow: 0 12px 30px -10px rgba(16, 22, 33, 0.32); }
  .badge img { filter: none; }
}

/* The badge art ships as the dark-background variant, so invert it on paper. */
@media (prefers-color-scheme: light) {
  .badge img { filter: invert(1); }
}