/* ==========================================================================
   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 privacy page uses 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   */

  /* Privacy page */
  --policy-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;
  gap: 10px;
}

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

.nav__link:hover {
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   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;
}

/* --------------------------------------------------------------------------
   Privacy page
   -------------------------------------------------------------------------- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Decorative wave. Sized from its own artwork rather than its layout box: the
   vector is 1883x887 on a 1440 frame (503x320 on 402), so it is set in vw and
   centred, deliberately bleeding past the box on all sides as in the design. */
.policy__graphic {
  height: var(--graphic-height);
  background-image: url("assets/privacy-graphic-mobile.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 125.12vw auto;        /* 503 / 402 */
}

/* --------------------------------------------------------------------------
   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 */
  .policy__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);
  }

  .policy {
    padding-inline: 0;
  }

  .policy__header {
    text-align: center;
  }

  .policy__graphic {
    background-image: url("assets/privacy-graphic.svg");
    background-size: 130.76vw auto;      /* 1883 / 1440 */
  }
}

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

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