/* ==========================================================================
   Ventura Studio
   Built from Figma "Daily pic" — desktop frame 93:974 (1440px),
   mobile frame 99:1251 (402px).

   Sizes that differ between the two frames interpolate linearly between them
   with clamp(min, calc(intercept + slope), max), so the layout matches each
   Figma frame exactly at 402px and 1440px and moves smoothly in between.

   The prose pages (privacy, about) use frames 104:1411 (1440px) and 104:1493 (402px).
   ========================================================================== */

:root {
  /* Surface */
  --bg-top:    #2C2A28;
  --bg-bottom: #1A1816;

  /* Ink */
  --ink:        #FFFFFF;
  --ink-muted:  rgba(255, 255, 255, 0.72);
  --ink-subtle: rgba(255, 255, 255, 0.5);

  /* Band */
  --circle-magenta: #D73CEC;
  --circle-blue:    #3C94EC;
  --circle-orange:  #EC6E3C;
  --circle-yellow:  #ECD73C;
  --circle-overlap: 50px;                                   /* constant in both frames */
  --band-nudge:     9px;                                    /* band sits just below the wordmark's centre */

  /* Fluid scale: mobile value @402px  ->  desktop value @1440px */
  --hero-size:   clamp(100px,    calc(61.272px  +  9.634vw), 200px);   /* 100  -> 200  */
  --hero-height: clamp(400px,    calc(338.034px + 15.414vw), 560px);   /* 400  -> 560  */
  --circle-size: clamp(219.25px, calc(110.133px + 27.144vw), 501px);   /* 219.25 -> 501 */
  --icon-size:   clamp(100px,    calc(70.566px  +  7.322vw), 176px);   /* 100  -> 176  */
  --title-size:  clamp(28px,     calc(17.156px  +  2.698vw), 56px);    /* 28   -> 56   */
  --section-gap: clamp(40px,     calc(16.763px  +  5.780vw), 100px);   /* 40   -> 100  */
  --gutter:      clamp(24px,     calc(17.804px  +  1.541vw), 40px);    /* 24   -> 40   */

  /* Prose pages */
  --prose-title:   clamp(56px,  calc(38.960px  +  4.239vw), 100px);   /* 56   -> 100  */
  --graphic-height: clamp(320px, calc(172.833px + 36.609vw), 700px);   /* 320  -> 700  */

  /* Fixed across both frames */
  --body-size:    16px;
  --content-max:  800px;
  --text-col-max: 589px;
}

/* Below the narrowest Figma frame the fluid scale bottoms out, which would leave
   "Ventura" wider than the screen and clipped by the hero. Keep scaling it by the
   viewport instead, sized so the wordmark still fits with a small gutter. */
@media (max-width: 401px) {
  :root {
    --hero-size: calc(26.67vw - 8.53px);
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;                    /* full-bleed decoration is wider than the viewport */
  background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%) no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--body-size);
  line-height: 1.19;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p {
  margin: 0;
  font-weight: inherit;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  display: flex;
  justify-content: center;
  padding: 20px var(--gutter);
}

.nav {
  display: flex;
  align-items: flex-start;               /* the frame tops the logo out with the link text */
  gap: 10px;
}

.nav__link,
.nav__logo {
  color: var(--ink);
  transition: opacity 0.15s ease;
}

.nav__link:hover,
.nav__logo:hover {
  opacity: 0.72;
}

.nav__logo img {
  width: 22px;
  height: 17px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--hero-height);
  overflow: hidden;                      /* the band is wider than the viewport by design */
}

/* Band of four overlapping circles, centred on the viewport in both frames.
   The overlap is a fixed 50px in the design, so it is expressed as a negative
   margin between siblings — CSS has no non-negative primitive for overlapping
   flex items, and this keeps the band width self-computing (4 x d - 3 x 50)
   with no hard-coded x offsets. */
.band {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--band-nudge)));
  display: flex;
  justify-content: center;
}

.band__circle {
  flex: none;
  width: var(--circle-size);
  aspect-ratio: 1;
  border-radius: 50%;
}

.band__circle + .band__circle {
  margin-left: calc(var(--circle-overlap) * -1);
}

.band__circle--magenta { background: var(--circle-magenta); }
.band__circle--blue    { background: var(--circle-blue); }
.band__circle--orange  { background: var(--circle-orange); }
.band__circle--yellow  { background: var(--circle-yellow); }

/* The wordmark is a deliberate overlap of two words, so "Studio" is an overlay
   on "Ventura" rather than a sibling in flow. Every offset is a ratio of
   --hero-size taken straight from the Figma frame, so the lockup scales intact. */
.wordmark {
  position: relative;
  z-index: 1;
  width: fit-content;
  font-size: var(--hero-size);
}

.wordmark__primary {
  display: block;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
}

.wordmark__secondary {
  position: absolute;
  font-size: 0.5em;
  font-weight: 400;
  line-height: 1.19;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   Work
   -------------------------------------------------------------------------- */

.work {
  margin-top: var(--section-gap);
  padding-inline: var(--gutter);
}

.work__label,
.project {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.work__label {
  font-size: var(--body-size);
  font-weight: 500;
  line-height: 1.19;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.project {
  display: flex;
  margin-top: 10px;
}

.project__icon {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 20px;
}

.project__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.project__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.project__title {
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1.19;
  color: var(--ink);
}

.project__description {
  font-size: var(--body-size);
  line-height: 1.19;
  color: var(--ink-muted);
}

.project__badge {
  display: block;
  transition: opacity 0.15s ease;
}

.project__badge:hover {
  opacity: 0.8;
}

.project__badge img {
  height: 40px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Prose pages — shared by /privacy and /about
   -------------------------------------------------------------------------- */

.prose {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;                     /* fixed in the frame; grows with real content */
  padding: 40px var(--gutter);
}

.prose__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.prose__header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prose__title {
  font-size: var(--prose-title);
  font-weight: 700;
  line-height: 1.22;
  color: var(--ink);
}

/* not in the frame: a policy needs a visible effective date */
.prose__meta {
  font-size: var(--body-size);
  line-height: 24px;
  color: var(--ink-subtle);
}

.prose__sections {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.prose__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prose__heading {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink);
}

.prose__section p {
  font-size: var(--body-size);
  line-height: 24px;
  color: var(--ink-muted);
}

.prose__section p + p {
  margin-top: 16px;
}

.prose__section ul {
  margin: 16px 0 0;
  padding-left: 20px;
  font-size: var(--body-size);
  line-height: 24px;
  color: var(--ink-muted);
}

.prose__section li + li {
  margin-top: 10px;
}

.prose__section li::marker {
  color: var(--ink-subtle);
}

.prose__section strong {
  font-weight: 500;
  color: var(--ink);
}

.prose__section ul + p {
  margin-top: 16px;
}

.prose__section a {
  text-decoration: underline;
  transition: color 0.15s ease;
}

.prose__section a:hover {
  color: var(--ink);
}

/* Decorative wave. The artwork is deliberately bigger than its layout box
   (1883x887 on a 1440 frame, 503x320 on 402), so it has to be a real element:
   a background image is clipped to its box and would slice the top and bottom
   off the wave. As an overflowing element it stays whole, centred, and bleeds
   past the box on every side.

   `overflow-x: clip` contains the sideways bleed so it never produces a
   scrollbar. It has to be `clip` rather than `hidden`: `hidden` would force the
   other axis into a scroll container and cut the wave's top and bottom off
   again, whereas `clip` allows `overflow-y: visible` alongside it.

   Centring is done with position rather than grid/flex alignment, because those
   clamp an item larger than its container to the start edge, which pinned the
   wave to the top of the box and threw the whole overhang below it. */
.prose__graphic {
  position: relative;
  height: var(--graphic-height);
  overflow-x: clip;
  overflow-y: visible;
}

.prose__graphic img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 125.12vw;                       /* 503 / 402 */
  max-width: none;                       /* overrides the global img cap */
  height: auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  justify-content: center;
  gap: 10px;                             /* the frame's footer row gap */
  padding: 80px var(--gutter) 20px;
}

.site-footer__text,
.site-footer__link {
  font-size: 12px;
  line-height: 1.19;
  color: var(--ink-muted);
}

/* not in the frame: the policy has to be reachable from the site */
.site-footer__link {
  text-decoration: underline;
  transition: color 0.15s ease;
}

.site-footer__link:hover {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Compositions
   The two frames are not the same layout scaled — the wordmark lockup and the
   project card are arranged differently — so each gets its own composition.
   -------------------------------------------------------------------------- */

/* Mobile: "Studio" centred beneath "Ventura"; project stacks. */
@media (max-width: 767px) {
  /* the phone frame carries a 10px gap between its root sections, and closes
     the work section with 40px of padding — the desktop frame does neither */
  .hero,
  .site-footer {
    margin-top: 10px;
  }

  .work {
    padding-bottom: 40px;
  }

  .wordmark {
    /* reserve the space "Studio" occupies outside the "Ventura" line box */
    padding-bottom: calc(var(--hero-size) * 0.255);
  }

  .wordmark__secondary {
    top: calc(var(--hero-size) * 0.88);
    left: 0;
    right: 0;
    text-align: center;
  }

  .project {
    flex-direction: column;
    gap: 10px;
  }

  /* the phone frame spaces the graphic off the sections above and below,
     and sets the policy title left rather than centred */
  .prose__graphic {
    margin-block: 10px;
  }
}

/* Desktop: "Studio" offset into the lower right of "Ventura"; project is a row. */
@media (min-width: 768px) {
  .wordmark {
    padding-bottom: calc(var(--hero-size) * 0.365);
  }

  .wordmark__secondary {
    top: calc(var(--hero-size) * 0.99);
    left: calc(var(--hero-size) * 1.1);
  }

  .project {
    flex-direction: row;
    gap: 20px;
  }

  .project__body {
    max-width: var(--text-col-max);
  }

  .prose {
    padding-inline: 0;
  }

  .prose__header {
    text-align: center;
  }

  .prose__graphic img {
    width: 130.76vw;                     /* 1883 / 1440 */
  }
}

/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}