/* Sonara site.
   Dark first, the way the app and the studio brands are. Barlow Condensed
   for display type, Inter for reading, JetBrains Mono for figures and
   labels. One accent (blue), used sparingly. The corner-dotted frame is
   kept for the hero image only, as a nod to the plan the app draws. */

:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px; --s32: 128px;
  --max-width: 1200px;
  --radius: 6px;

  --bg: #0b0b0c;
  --bg-2: #121214;
  --bg-3: #1a1a1d;
  --ink: #f3f3f0;
  --ink-2: #a9a9a2;
  --ink-3: #6f6f69;
  --line: #232326;
  --line-2: #2e2e32;
  --accent: #2f6bff;
  --accent-hover: #5486ff;
  --accent-ink: #fff;
  --header-bg: rgba(11, 11, 12, 0.82);
  --shot-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f4f4f1;
  --bg-2: #ffffff;
  --bg-3: #ebebe7;
  --ink: #101012;
  --ink-2: #55554f;
  --ink-3: #8a8a83;
  --line: #e2e2dd;
  --line-2: #d2d2cc;
  --accent: #0044cc;
  --accent-hover: #0036a3;
  --accent-ink: #fff;
  --header-bg: rgba(244, 244, 241, 0.86);
  --shot-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.55;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--s6); }

.display {
  font-family: "Barlow Condensed", "Inter", sans-serif;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.92;
}
.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 10;
  background: var(--header-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); opacity: 0; transition: opacity 300ms ease; }
header.scrolled .brand { opacity: 1; }
.brand svg { width: 22px; height: 22px; color: var(--ink); }
.brand .name { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: var(--s6); }
.nav-links a.nav-link { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.nav-links a.nav-link:hover { color: var(--ink); }
.theme-btn { background: transparent; border: 0; padding: 4px; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; }
.theme-btn:hover { color: var(--ink); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: "Inter", sans-serif; font-size: 15px; font-weight: 600; line-height: 20px;
  padding: 12px 20px; border-radius: var(--radius); border: 0;
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 24px rgba(47, 107, 255, 0.25);
  transition: background-color 160ms ease;
}
.button:hover { background: var(--accent-hover); }
.button--static { cursor: default; }
.button--static:hover { background: var(--accent); }

/* ---------- Hero ---------- */
.hero { padding: var(--s16) 0 0; }
.hero .mono { margin: 0 0 var(--s5); display: block; }
.masthead { display: flex; align-items: baseline; gap: var(--s8); flex-wrap: wrap; margin: 0 0 var(--s12); }
.masthead .mono { margin: 0; padding-bottom: 0.18em; }
.wordmark {
  display: flex; align-items: center; gap: 0.08em;
  font-size: clamp(64px, 10.5vw, 148px); line-height: 1;
  margin: 0; letter-spacing: 0.01em;
}
.wordmark svg { width: 0.72em; height: 0.72em; flex: none; color: var(--ink); }
.hero h1 {
  font-size: clamp(48px, 7.5vw, 104px);
  margin: 0 0 var(--s8); max-width: 24ch;
}
.hero h1 em { font-style: normal; color: var(--ink-3); }
.hero-row { display: flex; align-items: flex-end; justify-content: flex-start; gap: var(--s10); flex-wrap: wrap; margin-bottom: var(--s12); }
.hero-row p { margin: 0; max-width: 46ch; font-size: 18px; color: var(--ink-2); }

/* The screenshot bleeds off the bottom of the first screen and fades into
   the page; the corner dots are the plan-drawing motif. */
.hero-shot {
  position: relative; overflow: hidden; aspect-ratio: 16 / 8.2;
  border: 1px solid var(--line-2); background: var(--bg-2);
  box-shadow: var(--shot-shadow);
}
.hero-shot img { width: 106%; max-width: none; margin: -1.5% 0 0 -3%; }
.hero-shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; z-index: 2;
  background: var(--bg); box-shadow: 0 0 0 1px var(--ink-3), 0 0 0 4px var(--bg);
}
.dot--tl { top: -4px; left: -4px; } .dot--tr { top: -4px; right: -4px; }
.dot--bl { bottom: -4px; left: -4px; } .dot--br { bottom: -4px; right: -4px; }

/* ---------- Spec strip ---------- */
.spec { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: var(--s20); }
.spec-grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.spec-cell { padding: var(--s6) var(--s5); border-right: 1px dashed var(--line-2); }
.spec-cell:last-child { border-right: 0; }
.spec-cell .mono { display: block; margin-bottom: var(--s2); }
.spec-cell strong { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
.spec-cell strong small { font-size: 16px; color: var(--ink-2); font-weight: 500; margin-left: 4px; }

/* ---------- Scroll story ----------
   The copy for each step scrolls in the left column; the frame on the right
   is sticky and crossfades between the step's screenshots. The two pages
   taller than a screen pan through the frame as their step scrolls, so the
   report is read by scrolling the page. Under 900px the frame is dropped and
   each step shows its own media inline. */
.story { padding: var(--s16) 0 0; }
.story-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s16); align-items: start; }
.step { min-height: 100vh; display: flex; align-items: center; padding: var(--s10) 0; }
.step--long { min-height: 220vh; }
.step-copy .mono { display: block; margin-bottom: var(--s4); }
.step-copy .mono b { color: var(--accent); font-weight: 400; margin-right: var(--s3); }
.step-copy h2 { font-size: clamp(44px, 5vw, 68px); margin: 0 0 var(--s5); max-width: 15ch; }
.step-copy p { margin: 0; color: var(--ink-2); font-size: 17px; max-width: 42ch; }
.step-media { display: none; }

/* Frame height is two thirds of its column width; centre it in the viewport. */
.stage { position: sticky; top: max(80px, calc(50vh - (7 / 12 * min(var(--max-width), 100vw - 48px) - 37px) / 3)); }
.stage-frame {
  position: relative; aspect-ratio: 3 / 2;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-2); box-shadow: var(--shot-shadow); overflow: hidden;
}
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.layer.active { opacity: 1; pointer-events: auto; }
.layer .crop { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.layer--tall img.pan { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.layer--compare .compare { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: var(--s3); }
.layer--compare .compare .crop { position: relative; inset: auto; }

/* A zoomed crop of a screenshot: the image is scaled past the frame and
   offset so the detail that sells the view is what shows. */
.crop {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-2); box-shadow: var(--shot-shadow); cursor: zoom-in;
}
.crop img {
  position: absolute; max-width: none;
  width: calc(100% * var(--zoom, 1.4));
  left: var(--x, -20%); top: var(--y, -20%);
  will-change: transform;
}

/* A page taller than any screen, shown at width and scrolled in place
   (the narrow-screen fallback for the panning layers). */
.tall {
  position: relative; overflow-y: auto; overflow-x: hidden; aspect-ratio: 3 / 2;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-2); box-shadow: var(--shot-shadow);
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.tall img { width: 100%; display: block; }
.tall-hint {
  position: sticky; bottom: var(--s3); left: 100%; transform: translateX(calc(-100% - var(--s3)));
  display: inline-block; padding: 4px 8px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--ink-2); font-size: 11px;
}

/* Before and after: two wide crops of the same figures, stacked. */
.compare { display: grid; gap: var(--s3); }
.crop--wide { aspect-ratio: 3 / 1; }
.crop-label {
  position: absolute; z-index: 2; bottom: var(--s3); left: var(--s3);
  padding: 4px 8px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--ink); font-size: 11px;
}

/* Full-width breaker: the 3D view */
.breaker { padding: var(--s16) 0; border-top: 1px solid var(--line); margin-top: var(--s16); }
.breaker-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s8); margin-bottom: var(--s8); flex-wrap: wrap; }
.breaker-head h2 { font-size: clamp(44px, 5vw, 68px); margin: 0; }
.breaker-head p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.breaker .crop { aspect-ratio: 16 / 7; }

/* ---------- Closing ---------- */
.closing { padding: var(--s32) 0; border-top: 1px solid var(--line); text-align: center; }
.closing h2 { font-size: clamp(56px, 9vw, 128px); margin: 0 0 var(--s8); }
.closing h2 em { font-style: normal; color: var(--ink-3); }

/* ---------- Footer ---------- */
footer { padding: var(--s8) 0 var(--s10); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--ink); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.92); padding: var(--s8);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 30px 100px rgba(0,0,0,0.7); }
.lb-btn { position: absolute; background: rgba(255,255,255,0.08); color: #fff; border: 0; border-radius: 999px; width: 44px; height: 44px; font-size: 22px; cursor: pointer; }
.lb-btn:hover { background: rgba(255,255,255,0.18); }
.lb-close { top: var(--s5); right: var(--s5); }
.lb-prev { left: var(--s5); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--s5); top: 50%; transform: translateY(-50%); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .spec-grid { grid-template-columns: repeat(3, 1fr); }
  .spec-cell:nth-child(3) { border-right: 0; }
  .spec-cell { border-bottom: 1px dashed var(--line-2); }
  .spec-cell:nth-child(n+4) { border-bottom: 0; }
  .story-grid { grid-template-columns: 1fr; gap: 0; }
  .stage { display: none; }
  .step { min-height: 0; display: block; padding: var(--s12) 0; border-top: 1px solid var(--line); }
  .step--long { min-height: 0; }
  .step-media { display: block; margin-top: var(--s8); }
  .hero-row { margin-bottom: var(--s8); }
}
@media (max-width: 560px) {
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-cell:nth-child(3) { border-right: 1px dashed var(--line-2); }
  .spec-cell:nth-child(even) { border-right: 0; }
  .spec-cell:nth-child(n+4) { border-bottom: 1px dashed var(--line-2); }
  .spec-cell:nth-child(n+5) { border-bottom: 0; }
}