/* Nick Sandu: the showcase.
   One left edge, one repeated project module, real screenshots large in
   soft tiles with a plain caption beneath. No accent colour: the
   screenshots carry the colour, the page stays ink on a neutral ground. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}

:root {
  --ground: #EEEEEC;
  --tile: #E3E3DF;
  --ink: #141414;
  --ink-2: #64625C;
  --rule: rgba(20, 20, 20, 0.12);
  --shell: 1240px;
  --pad: clamp(20px, 4vw, 40px);
  --gap: clamp(14px, 1.8vw, 24px);
  --section: clamp(88px, 12vw, 160px);
  --radius: 14px;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #B9B8B2 var(--ground); scrollbar-width: thin; }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--ground); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p, dd { text-wrap: pretty; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: var(--ground); padding: 10px 14px; }
.skip:focus { left: 0; }

.shell { max-width: calc(var(--shell) + var(--pad) * 2); margin: 0 auto; padding-inline: var(--pad); }

/* text links: one quiet style everywhere */
.links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.links a, .links button, .top-nav a, .foot a, .contact-mail {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 0.2s;
}
.links a:hover, .links button:hover, .top-nav a:hover, .foot a:hover, .contact-mail:hover { text-decoration-color: currentColor; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90;
  transform: translate(-50%, 12px); opacity: 0; visibility: hidden;
  background: var(--ink); color: var(--ground); padding: 10px 16px; font-size: 14px; border-radius: 10px;
  transition: opacity 0.2s, transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.2s, transform 0.3s var(--ease); }

/* ── header ─────────────────────────────────────────── */
.top { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; font-size: 15px; }
.top-name { font-weight: 500; }
.top-nav { display: flex; gap: 22px; }
.top-nav a { text-decoration-color: transparent; }
/* bigger hit areas for the small header and footer links, without moving them */
.top a, .foot a { padding-block: 11px; margin-block: -11px; }

/* ── intro + film ───────────────────────────────────── */
.intro { padding: clamp(64px, 12vh, 136px) 0 clamp(36px, 6vh, 56px); }
.intro h1 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -0.03em; max-width: 16ch; }
.intro-facts { margin-top: 22px; max-width: 52ch; font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.intro .links { margin-top: 20px; }

/* The orbit. At rest (no JS, reduced motion) it is the still tile on the
   shell edge. Live, the section breaks out to the viewport, its stage pins
   for the length of the turn, and main.js draws the frame on a canvas inside
   a rounded rect that grows from the tile to the whole screen. */
html, body { overflow-x: clip; }
.orbit-still img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: #0B0D0D; }
.orbit-canvas, .orbit-ui { display: none; }
.orbit.live { width: 100vw; margin-left: calc(50% - 50vw); height: calc(100svh + var(--turn, 190svh)); }
.orbit.live .orbit-stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.orbit.live .orbit-still { display: none; }
.orbit.live .orbit-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit.live .orbit-ui {
  display: block; position: absolute; left: 0; top: 0; pointer-events: none;
  color: rgba(238, 238, 236, 0.86); font-size: 13px;
}
.orbit-hint { position: absolute; left: 22px; bottom: 20px; transition: opacity 0.5s var(--ease); }
.orbit-hint.gone { opacity: 0; }

/* ── sections ───────────────────────────────────────── */
.section { padding-top: var(--section); }
.section-title { font-size: clamp(1.9rem, 3.2vw, 2.7rem); letter-spacing: -0.03em; line-height: 1.08; padding-top: 18px; border-top: 1px solid var(--rule); margin-bottom: clamp(36px, 5vw, 64px); }

/* ── project module ─────────────────────────────────── */
.project + .project { margin-top: var(--section); }
.project-head { margin-bottom: clamp(24px, 3vw, 36px); }
.project-head h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.08; }
.project-sum { margin-top: 12px; max-width: 56ch; font-size: 18px; line-height: 1.5; }
.meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--ink-2); font-size: 15px; }
.meta span + span::before { content: "·"; margin: 0 10px; }

.tile { background: var(--tile); border-radius: var(--radius); overflow: hidden; position: relative; }
.shot { border-radius: 8px; outline: 1px solid var(--rule); outline-offset: -1px; }

.tile-hero { aspect-ratio: 16 / 9; padding: clamp(14px, 4.4vw, 64px) clamp(14px, 4.4vw, 64px) 0; }
.tile-hero .shot { width: 100%; border-radius: 10px 10px 0 0; }

/* one annotated shot: numbered pins on the capture, the same numbers in the notes beneath */
.shot-wrap { position: relative; }
.pin {
  position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ground); color: var(--ink);
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: 0 0 0 5px rgba(238, 238, 236, 0.16);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pin.on { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 9px rgba(238, 238, 236, 0.22); }
.notes { list-style: none; margin-top: clamp(20px, 2.4vw, 28px); }
.notes li { color: var(--ink-2); font-size: 15px; line-height: 1.5; max-width: 42ch; transition: color 0.2s; }
.notes li::before {
  content: attr(data-pin); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px;
  border-radius: 50%; background: var(--ink); color: var(--ground); font-size: 12px; font-weight: 500; vertical-align: 1px;
}
.notes strong { color: var(--ink); font-weight: 500; }
.phone-only { display: none; }

.dots { display: none; }

.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.tile-phone { padding: 6% 0; display: grid; place-items: center; }
.tile-phone .shot { width: 80%; border-radius: 14px; }

.cap { margin-top: 14px; max-width: 46ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.cap strong { color: var(--ink); font-weight: 500; }

.story { margin-top: clamp(48px, 6vw, 80px); }
.lead { max-width: 58ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; letter-spacing: -0.005em; }

/* one three-column grid for every list on the page */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gap); }
.story .grid-3 { margin-top: clamp(32px, 4vw, 48px); }
.grid-3 > * { padding-top: 16px; border-top: 1px solid var(--rule); }
.grid-3 dt { font-weight: 500; }
.grid-3 dd { margin-top: 6px; color: var(--ink-2); max-width: 42ch; }
.grid-3 dd.tools { margin-top: 10px; font-size: 14px; color: var(--ink); }
.facts dd { color: var(--ink); margin-top: 4px; }
.facts dt { color: var(--ink-2); font-weight: 400; }
.caps summary { font-weight: 500; list-style: none; }
.caps summary::-webkit-details-marker { display: none; }
.caps p { margin-top: 6px; color: var(--ink-2); max-width: 42ch; }
.caps p.tools { margin-top: 10px; font-size: 14px; color: var(--ink); }

/* ── about + contact ────────────────────────────────── */
.prose { max-width: 62ch; font-size: 18px; line-height: 1.6; }
.prose p + p { margin-top: 1em; }
.prose + .facts { margin-top: clamp(40px, 5vw, 56px); }

.contact-line { max-width: 40ch; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.35; letter-spacing: -0.015em; }
.contact-mail { display: inline-block; margin-top: 28px; font-size: clamp(1.6rem, 4.4vw, 3.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; text-underline-offset: 8px; text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.contact .links { margin-top: 24px; }

.dock { display: none; }

.foot { display: flex; justify-content: space-between; gap: 16px; margin-top: var(--section); padding: 22px 0 28px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 14px; }

/* ── one quiet rise as each module enters ───────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .rv.pre { opacity: 0; transform: translateY(16px); }
  .js .rv { transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }
}

/* ── responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .top { padding: 18px 0; }
  .top-nav { gap: 16px; }
  .intro { padding-top: 56px; }
  .intro-facts, .project-sum, .prose { font-size: 16px; }

  /* thumb-sized actions: two pills up top, the copy link beneath */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
    border: 1px solid rgba(20, 20, 20, 0.2); border-radius: 999px; text-decoration: none; font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s;
  }
  .btn:active { background: var(--tile); }
  .btn-solid { background: var(--ink); color: var(--ground); border-color: var(--ink); }
  .btn-solid:active { background: #000; }
  .links { gap: 10px; }
  .links .btn { flex: 1 1 0; text-decoration: none; }
  .intro .links { margin-top: 24px; }

  .orbit-still img { aspect-ratio: 1 / 1; }
  .orbit.live { --turn: 150svh; }
  .orbit-hint { left: 18px; bottom: 16px; }
  .meta { flex-direction: column; }
  .meta span + span::before { content: none; }

  /* every project becomes one swipe gallery: the next card peeks, dots track position */
  .gallery {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery > figure { scroll-snap-align: start; }
  /* phones: a desktop dashboard shrunk to 350px is unreadable, so the
     annotated shot gives way to Radar's own phone screens of the same three
     regions, in the swipe row Taper uses, captioned with the same notes */
  .annotated .tile-hero, .annotated .notes { display: none; }
  .phone-only { display: grid; }
  .tile-phone { padding: 5% 0; }
  .tile-phone .shot { width: 90%; }
  .cap { margin-top: 12px; font-size: 14px; }
  .dots { display: flex; gap: 6px; margin-top: 18px; }
  .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(20, 20, 20, 0.2); transition: width 0.3s var(--ease), background-color 0.3s; }
  .dots i.on { width: 20px; background: var(--ink); }

  .story { margin-top: 44px; }
  .grid-3 { grid-template-columns: 1fr; gap: 24px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* capabilities fold into rows: the heading is the tap target */
  .caps { gap: 0; }
  .caps details { padding-top: 0; }
  .caps details:last-child { border-bottom: 1px solid var(--rule); }
  .caps summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; }
  .caps summary::after {
    content: ""; width: 12px; height: 12px; flex: none;
    background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 12px no-repeat;
    transition: transform 0.3s var(--ease);
  }
  .caps details[open] summary::after { transform: rotate(45deg); }
  .caps details > p:last-child { padding-bottom: 18px; }

  .contact-mail { font-size: 1.55rem; }
  .contact .links { margin-top: 22px; }

  /* sticky contact: appears once the top buttons scroll away, leaves at the contact close */
  .dock {
    display: flex; align-items: center; justify-content: center;
    position: fixed; z-index: 60; left: var(--pad); right: var(--pad); bottom: calc(14px + env(safe-area-inset-bottom));
    min-height: 52px; border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 500;
    transform: translateY(calc(100% + 28px)); transition: transform 0.45s var(--ease);
  }
  .dock.show { transform: none; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .foot { flex-direction: column; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}