/* ==========================================================================
   1. TOKENS
   Palette: the seven colours supplied for the redesign, nothing else.
   Roles: what each colour does. Restyle by re-pointing a role, not by
   editing rules further down.
   ========================================================================== */
:root {
  /* Palette: the original mypholyo.com colours, mapped one-to-one onto the same
     eight roles as the olive version (same range, original tones). Light to dark;
     orange (signal) is defined below. */
  --bone:   #F1EEE7;   /* balance: headings */
  --linen:  #DED9CD;   /* warmth: body copy */
  --stone:  #A49484;   /* earth: secondary text */
  --lichen: #797370;   /* the original's muted ink (night at 62% on balance) */
  --gold:   #E8423B;   /* the original's red (gradient start, peer-gap figures): warm accent */
  --olive:  #33150F;   /* wine: deep tint, labels on light */
  --char:   #302827;   /* night: the page */

  /* Surfaces */
  --bg:        var(--char);                                         /* page */
  --surface:   color-mix(in srgb, var(--char) 90%, var(--olive));    /* raised cards: char nudged toward olive */
  --surface-2: color-mix(in srgb, var(--char) 85%, #000);            /* footer: char, one step deeper */

  /* Text on dark (contrast on night: 12.4 / 10.2 / 4.9) */
  --ink:      var(--bone);   /* headings */
  --ink-soft: var(--linen);    /* body copy */
  --ink-mute: var(--stone);   /* labels, secondary copy */

  /* Accent: red. 3.6:1 on night, so large type, bars and marks only, never small text. */
  --accent:     var(--gold);
  --on-accent:  var(--char);  /* 4.6:1 on gold */
  --gradient:   linear-gradient(100deg, var(--gold), var(--lime));   /* the original red -> orange */

  /* Signal: the original's orange (energy). 5.4:1 on night, and night text on it is 5.4:1:
     buttons, active states, hovers, as on the original site. */
  --lime:       #FC7934;   /* energy (token name kept so every rule below is untouched) */
  --signal:     var(--lime);
  --on-signal:  var(--char);

  /* Lines */
  --line-dark:  color-mix(in srgb, var(--linen) 14%, transparent);
  --line-mid:   color-mix(in srgb, var(--linen) 28%, transparent);

  /* Type: three families, three jobs.
     Questrial = titles and figures, DM Sans = body and UI, Roboto Mono = labels. */
  --display: 'Questrial', 'DM Sans', 'Helvetica Neue', sans-serif;  /* titles: h1, h2, h3 (single weight, no italic) */
  --display-tracking: -.03em;                         /* -3% on every title (Urbanist is already tightly spaced; -6% made letters touch) */
  --sans:  'DM Sans', 'Helvetica Neue', sans-serif;
  --mono:  'Roboto Mono', 'SFMono-Regular', monospace;

  /* Layout */
  --maxw:   1180px;
  --r-card: 22px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1.1em; color: var(--ink-soft); }
[id] { scroll-margin-top: 40px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .4em;
  letter-spacing: var(--display-tracking);
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 4.8vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
h1 em, h2 em { font-style: normal; font-weight: 400; color: var(--signal); }   /* orange, as on the original site */
h1, h2, h3 { font-synthesis: none; }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.2em;
}
.eyebrow.quiet { color: var(--ink-mute); }

.rule { height: 1px; background: var(--line-dark); }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 26px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .98rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform .15s, opacity .15s;
}
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn-primary { background: var(--signal); color: var(--on-signal); }
.btn-ghost  { background: transparent; color: var(--ink); border-color: var(--line-mid); }
.btn-ghost:hover { border-color: var(--ink); opacity: 1; }
.btn-night  { background: var(--char); color: var(--ink); }

/* ==========================================================================
   4. HEADER
   ========================================================================== */
/* Logo: height sets the size; width follows from the artwork's proportions. */
.logo { display: inline-flex; align-items: center; color: var(--ink); line-height: 0; }
.logo svg { height: var(--logo-h, 22px); width: auto; }

.logo-home {
  display: inline-flex;
  align-items: center;
  height: 44px;
  text-decoration: none;
  --logo-h: 30px;
  --logo-knock: var(--bg);
}
.logo-home:hover .logo { color: var(--signal); }

/* The header floats over the hero so the texture runs edge to edge behind it */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 10; background: transparent; color: var(--ink); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 44px;
  padding: 0 28px;
  border: 1px solid var(--line-mid);
  border-radius: 999px;
}
.site-nav a {
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--signal); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .btn { height: 44px; padding: 0 22px; font-size: .92rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-mid);
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.home-hero {
  position: relative;
  isolation: isolate;
  padding: 212px 0 120px;          /* 92px of header + the original 120px */
  text-align: center;
  overflow: hidden;
}
/* Layer 1: the Olive motion blur texture */
.home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--tex-hero) center / cover no-repeat;
}
/* Layer 2: shading so text and nav stay readable, and the texture melts into the page.
   Top: darkens the light streak behind the nav.  Centre: a soft pocket behind the
   headline.  Bottom: fades to the page colour so there's no hard edge. */
.home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--char) 70%, transparent) 0%, transparent 26%),
    linear-gradient(to bottom, transparent 66%, var(--bg) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--char) 50%, transparent) 0%, transparent 32%, transparent 68%, color-mix(in srgb, var(--char) 50%, transparent) 100%);
}
.home-hero .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.home-hero h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.12; max-width: 16em; margin: 0; }
.home-hero .sub { font-size: 1.12rem; max-width: 34em; margin: 0; }
.home-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.scroll-cue {
  margin-top: 80px;
  color: var(--ink-mute);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.scroll-cue:hover { color: var(--signal); }

/* Hero: the bust at centre ------------------------------------------------------
   --ph is the portrait's height and the unit for everything here. Her head's centre
   sits on the screen's centre line (47.7% of --ph in from the image's left edge).
   The headline block ends just before her profile, at eye level, which her gaze points at;
   its lines are left-aligned.
   The copy starts just past the back of her head, a step lower, so the eye travels
   headline -> face -> copy on a slight downward diagonal, like the streaks. */
.home-hero {
  --ph: clamp(560px, min(52vw, 100vh - 170px), 760px);
  --shift: calc(var(--ph) * .2);              /* bust sits right of centre, giving the headline room */
  --pad: max(28px, 50vw - 562px);             /* the page's content edge: .wrap is 1180px with 28px padding, so the logo and nav sit 562px either side of centre */
  padding: 92px 0 110px;           /* header height / room for the arrow */
  text-align: left;
}
.hero-stage { position: relative; height: var(--ph); }
.hero-figure {
  position: absolute; top: 0; height: 100%;
  left: calc(50% + var(--shift) - var(--ph) * .477);
  aspect-ratio: 1320 / 943;
  pointer-events: none; user-select: none;
}
.hero-portrait { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

.home-hero .hero-title {
  position: absolute; margin: 0;
  left: max(28px, calc(50% - 562px)); top: 13%;   /* same edge as the nav (--pad, in %) */
  width: max-content; text-align: left;
  /* As large as possible: 11% of the bust's height, but capped so the longest line
     (6.6em wide with its indent) still stops 4% short of her profile, which sits
     20.7% of --ph left of the bust's centre line. */
  font-size: min(calc(var(--ph) * .11),
                 calc((50vw + var(--shift) - var(--ph) * .247 - var(--pad)) / 6.6));
  line-height: 1.04;
}
/* cascade: each line steps in, falling toward her the way the streaks fall */
.hero-title span { display: block; }
.hero-title span:nth-child(2) { padding-left: 1.1em; }
.hero-title span:nth-child(3) { padding-left: 2.2em; }

/* Logo belt ---------------------------------------------------------------------
   Lives inside .hero-figure, so it sits behind the portrait. 300vw wide and centred on
   the screen; the mask fades it out at the screen's edges. */
.logo-belt {
  position: absolute; z-index: 0;
  top: 54%; left: calc(var(--ph) * .477); width: 300vw; transform: translate(-50%, -50%);   /* centred on the screen (= her head's centre line) */
  height: calc(var(--ph, 600px) * .075);
  mix-blend-mode: screen; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 33.4%, #000 38%, #000 62%, transparent 66.6%);
          mask-image: linear-gradient(90deg, transparent 33.4%, #000 38%, #000 62%, transparent 66.6%);
}
.logo-track { display: flex; width: max-content; height: 100%; animation: logo-belt 90s linear infinite; }
.logo-set { display: flex; align-items: center; gap: calc(var(--ph, 600px) * .09); padding-right: calc(var(--ph, 600px) * .09); height: 100%; }
.logo-set img { height: 100%; width: auto; flex: 0 0 auto; }
@keyframes logo-belt { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
.hero-portrait { z-index: 1; }
.home-hero .hero-title, .hero-copy { z-index: 2; }   /* text above the portrait */

/* Description bottom-left, buttons beside it on the same line */
.hero-copy {
  position: absolute; left: max(28px, calc(50% - 562px)); bottom: 2%;
  display: flex; flex-direction: row; align-items: center; gap: 32px;
}
.hero-copy::before {                 /* faint shadow pool so copy reads over the streaks */
  content: ""; position: absolute; inset: -40px -60px; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--char) 55%, transparent), transparent);
}
.hero-copy .sub { width: 310px; font-size: 1rem; line-height: 1.55; margin: 0; text-wrap: balance; }
.hero-copy .actions { display: flex; flex-wrap: nowrap; gap: 10px; margin: 0; justify-content: flex-start; }

.home-hero .scroll-cue {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  margin: 0; color: var(--stone);
  animation: cue-bob 2.4s ease-in-out infinite;
}
.home-hero .scroll-cue:hover { color: var(--signal); }
@keyframes cue-bob { 50% { transform: translate(-50%, 5px); } }
@media (prefers-reduced-motion: reduce) { .home-hero .scroll-cue { animation: none; } }

/* Mobile: headline, the bust, then the copy */
@media (max-width: 900px) {
  .home-hero { --ph: 92vw; padding: 108px 0 64px; text-align: center; }
  .hero-stage { height: auto; display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
  .home-hero .hero-title {
    order: 1; position: static; width: max-content; text-align: left;
    font-size: clamp(2.1rem, 9.5vw, 3.2rem);
  }
  .hero-figure {
    order: 2; position: relative; left: auto; top: auto;
    height: auto; width: 140%; max-width: 780px; margin: 8px 0 0 16%;
  }
  .hero-copy {
    order: 3; position: relative; top: auto; left: auto; bottom: auto;
    flex-direction: column; gap: 20px;
    width: min(360px, 100%); margin-top: -18%; align-items: center; text-align: center;
  }
  .hero-copy .sub { width: auto; }
  .hero-copy .actions { justify-content: center; flex-wrap: wrap; }
  .home-hero .scroll-cue { bottom: 18px; }
  .logo-belt { left: 40%; -webkit-mask-image: none; mask-image: none; }   /* section clips the edges */
}

/* Section step marker: a circle with the number, flush against a pill with the
   label, both exactly the same height (--step-h). Same quiet treatment on both:
   the page's mid hairline and muted label text, like the other rules and labels. */
.step {
  --step-h: 30px;
  display: inline-flex; align-items: stretch; margin: 0;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  color: var(--ink-mute);
}
.step-n, .step-t {
  height: var(--step-h);
  border: 1px solid var(--line-mid);
  border-radius: 999px;
}
.step-n {
  width: var(--step-h); flex: 0 0 auto;
  display: grid; place-items: center;
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.step-t { display: inline-flex; align-items: center; padding: 0 16px 0 14px; }
.home-feature .copy .step, .home-list .head .step, .home-brief .copy .step { align-self: flex-start; }

/* ==========================================================================
   6. 01 · FEATURE (phone mockup + copy)
   ========================================================================== */
.home-feature { padding: 70px 0 130px; }
.home-feature .wrap { display: flex; align-items: center; gap: 80px; }
.home-feature .copy { flex: 1 1 0%; display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.home-feature .copy h2 { font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.2; margin: 0; }
.home-feature .copy p { margin: 0; }
.private { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--ink-mute); }
.private svg { flex: 0 0 auto; margin-top: 3px; }

/* Phone as a solid slab: the screen's rounded rectangle extruded toward the
   bottom-left, its sides cut from the same Olive motion blur as the hero. The slab is
   one pre-rendered image; the screen sits on its front face. Geometry from the
   reference: box 1976x3602, front face inset 10.83% / 0.94%, 87.75% x 94.28%. */
.phone-stage { flex: 0 0 380px; display: flex; justify-content: center; position: relative; }
.phone-shell {
  --pw: 300px;                                  /* screen width */
  position: relative;
  width: calc(var(--pw) / .8775);
  aspect-ratio: 1976 / 3602;
  background: none;
}
.phone-screen {
  position: absolute;
  left: 10.83%; top: .94%; width: 87.75%; height: 94.28%;
  border-radius: calc(var(--pw) * .035);
  background: #F1EEE7;
  color: var(--char);
  padding: 14px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.phone-screen .avatar {            /* profile, as the last tab */
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--stone); color: var(--char); font-size: .42rem !important;   /* same tone as the inactive tab icons */
  font-family: var(--display);
  display: flex; align-items: center; justify-content: center;
}
.phone-screen .m { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .4rem; color: var(--olive); }
.phone-screen .m.mute { color: var(--lichen); }
.phone-screen .pcard { border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.phone-screen .pcard.dark { background: var(--char); color: var(--bone); }
.phone-screen .name { font-family: var(--display); font-size: 1.02rem; font-weight: 400; letter-spacing: var(--display-tracking); }
.phone-screen .small { font-size: .5rem; color: var(--stone); }

/* Archetype card on the Olive motion blur, darkened on the left for the text */
.phone-screen .arch { flex-direction: row; align-items: center; gap: 10px; }
.phone-screen .arch.tex {
  color: var(--bone);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--char) 72%, transparent), color-mix(in srgb, var(--char) 15%, transparent)),
    var(--tex-event) 70% 50% / cover no-repeat;
}
.phone-screen .arch.tex .m { color: var(--stone); }
.phone-screen .arch .ic { width: 34px; height: auto; flex: 0 0 auto; }   /* brushed mark, no container */
.phone-screen .arch .tag { font-size: .5rem; color: var(--linen); }

/* Income by stream: one series, so one colour and no legend; bars grow left to right
   when the card reveals; values in text colour beside each bar */
.phone-screen .streams { display: grid; gap: 4px; margin-top: 9px; }
.phone-screen .srow { display: grid; grid-template-columns: 58px 1fr 34px; align-items: center; gap: 6px; }
.phone-screen .sl { font-size: .44rem; color: var(--stone); white-space: nowrap; }
.phone-screen .sv { font-size: .44rem; color: var(--linen); text-align: right; font-variant-numeric: tabular-nums; }
.phone-screen .st { height: 7px; position: relative; }
.phone-screen .st i {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--w);
  background: var(--signal); border-radius: 0 4px 4px 0;   /* orange, matching the accents */
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.phone-screen .srow:nth-child(2) .st i { transition-delay: .12s; }
.phone-screen .srow:nth-child(3) .st i { transition-delay: .24s; }
.phone-screen .srow:nth-child(4) .st i { transition-delay: .36s; }
.phone-screen .profile.in .st i { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .phone-screen .st i { transform: none; transition: none; } }
.phone-screen .total {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--linen) 16%, transparent);
}
.phone-screen .total > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.phone-screen .num { font-family: var(--display); font-size: 1.12rem; letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.phone-screen .gapline { display: flex; align-items: center; gap: 4px; font-size: .44rem; color: var(--linen); padding-bottom: 3px; }
.phone-screen .gapline b { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: 0 0 auto; }

/* Matches: cards keep going below the screen edge; the tab bar floats over them */
.phone-screen .matches { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; padding-top: 2px; }
.phone-screen .mcard {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--bone); border-radius: 10px; padding: 9px 11px;
}
.phone-screen .role { font-family: var(--display); font-size: .78rem; letter-spacing: var(--display-tracking); }
.phone-screen .mmeta { font-size: .44rem; color: var(--lichen); margin-top: 1px; }
.phone-screen .fit {
  font-family: var(--mono); font-size: .4rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--char); background: var(--signal); border-radius: 999px; padding: 3px 6px; white-space: nowrap;
}
.phone-screen .tabs {
  /* square bar docked flush to the screen's bottom edge; match cards run underneath */
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--char);
  border-radius: 0;
  padding: 9px 10px 12px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  text-align: center;
}
.phone-screen .tabs div { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--stone); font-size: .36rem; line-height: 1.1; }
.phone-screen .tabs div.on { color: var(--signal); }


/* ==========================================================================
   7. 02 · LIST
   ========================================================================== */
.home-list { padding: 110px 0; }
.home-list .wrap { display: flex; gap: 80px; }
.home-list .head { flex: 0 0 400px; display: flex; flex-direction: column; gap: 16px; }
.home-list .wrap { align-items: flex-start; }
.home-list .head .eyebrow { margin: 0; }
.home-list .head h2 { font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.2; margin: 0; }
.feature-list { list-style: none; margin: 0; padding: 0; flex: 1 1 0%; }
.feature-list li { display: flex; gap: 28px; padding: 24px 0; border-top: 1px solid var(--line-dark); }
.feature-list li:last-child { border-bottom: 1px solid var(--line-dark); }
.feature-list li .k { font-family: var(--mono); font-size: .7rem; color: var(--ink-mute); width: 16px; flex: 0 0 auto; padding-top: 7px; }
.feature-list li h3 { font-size: 1.15rem; line-height: 1.3; margin: 0; }
.feature-list li p { font-size: .9rem; color: var(--ink-mute); margin: 4px 0 0; }

/* Orbit visual (02 section) ------------------------------------------------
   Geometry uses container units (cqw) so the ring, photo and marks stay in
   proportion at any width. The ring of marks turns once a minute; each mark
   turns back the other way at the same speed, so it stays upright. */
.orbit {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1;
  margin: 36px 0 0;
}
.orbit-glow {
  position: absolute; inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 35%, transparent), transparent 70%);
  filter: blur(10px);
}
.orbit-ring {
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px dashed var(--line-mid);
}
/* Pipe: front face = the photo (56% wide at 22%,22%). The extrusion image is
   1.175 x 1.14 face-diameters, with the face in its top-right corner. */
.orbit-pipe {
  position: absolute;
  left: calc(22% - 56% * .175); top: 22%;
  width: calc(56% * 1.175); height: auto;
}
.orbit-photo {
  position: absolute; inset: 22%;
  width: 56%; height: 56%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  border: 2px solid color-mix(in srgb, var(--bone) 40%, transparent);   /* lit rim where the face meets the pipe */
  filter: saturate(.85) sepia(.12);   /* warms the photo toward the palette */
}
.orbit-marks {
  list-style: none; margin: 0; padding: 0;
  position: absolute; inset: 0;
  animation: orbit-spin 60s linear infinite;
}
.orbit-marks li {
  --angle: calc(var(--i) * 45deg - 90deg);
  position: absolute; top: 50%; left: 50%;
  width: 13.5cqw; height: 13.5cqw;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(42cqw) rotate(calc(-1 * var(--angle)));
}
.orbit-marks .mark {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-mid);
  color: var(--ink-soft);
  animation: orbit-spin 60s linear infinite reverse;
}
.orbit-marks .mark svg, .orbit-marks .mark img { width: 46%; height: 46%; object-fit: contain; }
.orbit-marks li.hot .mark { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .orbit-marks, .orbit-marks .mark { animation: none; }
}

/* ==========================================================================
   8. 03 · MONDAY BRIEF
   ========================================================================== */
.home-brief { padding: 40px 0 130px; }
.home-brief .wrap { display: flex; align-items: flex-start; gap: 80px; }   /* top-aligned so the 03 marker and the Example pill share a line */
.home-brief .copy { flex: 0 0 400px; display: flex; flex-direction: column; gap: 20px; }
.home-brief .copy .eyebrow { margin: 0; }
.home-brief .copy h2 { font-size: clamp(1.6rem, 2.7vw, 2.15rem); line-height: 1.2; margin: 0; }
.home-brief .copy p { margin: 0; }
.brief-card {
  border-radius: 20px;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  /* cream card, same cream as the phone screen; everything inside switches to dark ink */
  --card-ink: var(--char);
  --card-mute: var(--lichen);
  --card-line: color-mix(in srgb, var(--char) 14%, transparent);
  background: #F1EEE7;
  color: var(--card-ink);
}
.brief-card .lede { text-wrap: balance; font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; letter-spacing: var(--display-tracking); color: var(--card-ink); margin: 0; }
.brief-card .rows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--card-line); font-size: .9rem; color: var(--card-ink); }
.brief-card .rows div:last-child { border-bottom: 1px solid var(--card-line); }
.brief-card .rows .m { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--card-mute); white-space: nowrap; }
.brief-card .rows .m.hot { color: var(--card-ink); font-weight: 500; }   /* lime is unreadable on cream; weight carries the emphasis */

/* Right column of section 03 */
.brief-col { flex: 1 1 0%; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.brief-tag { align-self: flex-end; }

/* Card extruded like the phone: the card's rectangle swept toward the bottom-left
   by (--dx, --dy), same direction and thickness as the phone slab. The side faces
   are the hull of front and back faces, drawn as one polygon behind the card. */
.brief-slab {
  --dx: 40px; --dy: 32px;
  position: relative; width: 100%;
  padding: 0 0 var(--dy) var(--dx);
}
.brief-slab::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 20px;                     /* rounds the back face's outer corner */
  clip-path: polygon(var(--dx) 0, 100% 0, 100% calc(100% - var(--dy)), calc(100% - var(--dx)) 100%, 0 100%, 0 var(--dy));
  background:
    linear-gradient(to bottom left, transparent 45%, color-mix(in srgb, var(--char) 28%, transparent)),
    var(--tex-slab) 0 100% / cover no-repeat;   /* own render, light low-left so the visible side faces catch it */
}
.brief-slab .brief-card { position: relative; }
.brief-card .rl { display: inline-flex; align-items: center; gap: 10px; }
.brief-card .ri { width: 16px; height: 16px; flex: 0 0 auto; color: var(--lichen); }

/* ==========================================================================
   9. PROOF STATS
   ========================================================================== */
.home-proof { padding: 72px 0; }
.home-proof .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.home-proof .num { font-family: var(--display); font-size: clamp(2.6rem, 4vw, 3.5rem); line-height: 1; letter-spacing: var(--display-tracking); color: var(--ink); }
.home-proof .lbl { font-size: .9rem; color: var(--ink-mute); margin-top: 10px; }

/* ==========================================================================
   10. EVENT CARD
   ========================================================================== */
.home-event { padding: 90px 0 60px; }
.event-card {
  border-radius: 24px; overflow: hidden;
  /* the texture under a heavy wash: a dark, warm ground for the details */
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--char) 88%, transparent), color-mix(in srgb, var(--char) 62%, transparent)),
    var(--tex-event) center / cover no-repeat, var(--char);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  color: var(--bone);
}
.ev-body { padding: 52px 48px; display: flex; flex-direction: column; gap: 22px; }

/* Title: the logo mark set as a word, then "Playground" in the title face.
   The mark's height is matched to the capitals so the two read as one name. */
.pg-title { display: flex; align-items: center; gap: .28em; margin: 0; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; color: var(--bone); }
.pg-logo { height: .95em; width: auto; color: var(--bone); flex: 0 0 auto; transform: translateY(-.04em); }

.ev-lede { font-size: 1.05rem; color: var(--linen); margin: 0; }

/* Details: label column + large value, hairlines between */
.ev-details { margin: 4px 0 0; display: grid; }
.ev-details > div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--line-dark); }
.ev-details > div:last-child { border-bottom: 1px solid var(--line-dark); }
.ev-details dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.ev-details dd { margin: 0; font-family: var(--display); font-size: 1.32rem; line-height: 1.25; letter-spacing: var(--display-tracking); color: var(--bone); }
.ev-details > div:nth-child(3) dd { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; color: var(--linen); }  /* the longer line reads as body text */

.event-card .acts { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.event-card .more { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--linen); text-decoration: none; white-space: nowrap; }
.event-card .more:hover { color: var(--signal); }

/* Photo: full bleed on the right, graded toward the palette like the other photos */
.ev-photo { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.8) sepia(.14) contrast(1.04); }

/* ==========================================================================
   11. CLOSING CTA
   ========================================================================== */
.home-close { padding: 60px 0 140px; text-align: center; }
.home-close .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.home-close h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.15; max-width: 22em; margin: 0; text-wrap: balance; }
@media (min-width: 720px) { .home-close h2 em { white-space: nowrap; } }   /* second sentence on one line where it fits */
.home-close p { max-width: 32em; margin: 0; }

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer { background: var(--surface-2); color: var(--ink); padding: 72px 0 48px; border-top: 1px solid var(--line-dark); }
.site-footer a { text-decoration: none; }
.foot-grid { display: flex; gap: 64px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-brand .logo { --logo-h: 34px; --logo-knock: var(--surface-2); }
.foot-brand .line { font-family: var(--display); font-size: 1.15rem; letter-spacing: var(--display-tracking); color: var(--ink-mute); margin: 0; }
.foot-col { display: flex; flex-direction: column; gap: 12px; min-width: 150px; }
.foot-col .h { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.foot-col a { font-size: .92rem; color: var(--ink-soft); }
.foot-col a:hover, .fine .social a:hover { color: var(--signal); }
.fine {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: var(--ink-mute);
}
.fine .social { display: flex; gap: 20px; }
.fine .social a { color: var(--ink-soft); }

/* ==========================================================================
   13. SCROLL REVEAL
   ========================================================================== */
[data-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
[data-rv].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 1320px) {
  .site-nav { gap: 18px; }
}
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .site-nav.open {
    display: flex;
    position: absolute;
    top: 84px; left: 28px; right: 28px;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
    border-radius: var(--r-card);
    background: var(--surface);
    z-index: 40;
  }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-primary { display: none; }
}
@media (max-width: 900px) {
  .home-feature .wrap, .home-list .wrap, .home-brief .wrap { flex-direction: column; align-items: flex-start; gap: 40px; }
  .phone-stage { flex: 0 0 auto; width: 100%; }
  .home-list .head, .home-brief .copy { flex: 0 0 auto; }
  .home-brief .wrap { align-items: stretch; }
  .home-proof .wrap { grid-template-columns: 1fr; gap: 28px; }
  .event-card { grid-template-columns: 1fr; }
  .ev-photo { order: -1; aspect-ratio: 3 / 2; height: auto; }
  .ev-body { padding: 32px 24px; }
  .ev-details > div { grid-template-columns: 1fr; gap: 4px; }
  .home-feature { padding: 30px 0 80px; }
  .home-list, .home-brief { padding: 70px 0; }
  .foot-grid { gap: 36px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  main .btn, .home-hero .actions { width: 100%; justify-content: center; }
  .brief-card { padding: 24px; }
  .brief-col { width: 100%; }
  .brief-slab { --dx: 22px; --dy: 18px; }
  .brief-card .rows div { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   16. GRAIN
   One static film-grain layer over the whole page. Generated by the browser
   from a ~0.7KB SVG noise filter (no image file). Light and dark specks are
   balanced, so it adds texture without lifting or muddying the colours.
   Normal blending (no blend mode) keeps scrolling cheap. Tune with --grain.
   ========================================================================== */
:root { --grain: .16; }
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  2.4 0 0 0 -1.2'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.4 0 0 0 1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23l%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23d%29'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat;   /* 240px tile drawn at half size: 1-device-pixel specks on retina */
  opacity: var(--grain);
}


/* Original MyPholyo wordmark, as on the live site */
.wm{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:6px;line-height:1;color:var(--bone);white-space:nowrap}
.wm::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:0 0 auto}
.logo-home .wm{font-size:25.6px;height:44px;padding:0 18px;border:1px solid color-mix(in srgb,var(--linen) 25%,transparent);border-radius:999px;transition:color .2s}
.logo-home:hover .wm{color:var(--signal)}
.foot-brand .wm{font-size:28px}
.pg-title .wm{font-size:1.05em;gap:.18em}
.pg-title .wm::after{width:.22em;height:.22em}

/* ==========================================================================
   TEXTURE ASSETS: "Olive motion blur" shader, pre-rendered at each slot's shape.
   Rendered with the shader's own defaults except light position/spread/seed
   (desktop hero: light at 50%/38%, a backlight behind her head),
   and grain = 0 (the page-wide grain layer handles grain).
   ========================================================================== */
:root {
  --tex-hero:  url("../home/2a7205c8.webp");
  --tex-event: url("../home/d0ad24c8.webp");
  --tex-slab:  url("../home/9d0591d4.webp");
}
@media (max-width: 700px) {
  :root { --tex-hero: url("../home/9cb55477.webp"); }
}
/* Focused changes: no-person hero, labelled logo strip, tighter mobile hero */
.belt-label { position: absolute; z-index: 2; left: max(28px, calc(50% - 562px)); bottom: calc(32% + var(--ph) * .0375 + 18px); display: flex; flex-direction: column; gap: 4px; text-align: left; }
.belt-title { font-family: var(--display); font-size: 1.15rem; letter-spacing: var(--display-tracking); color: var(--bone); margin: 0; }
.belt-note { font-size: .8rem; color: var(--stone); margin: 0; }
.logo-belt { top: 68%; }
@media (max-width: 900px) {
  .home-hero { padding: 100px 0 64px; }
  .home-hero .hero-title { order: 1; }
  .belt-label { order: 2; position: static; align-items: center; text-align: center; margin-top: 32px; }
  .hero-figure { order: 3; width: 100%; max-width: none; aspect-ratio: auto; height: 44px; margin: 14px 0 0; }
  .logo-belt { top: 50%; left: 50%; height: 100%; }
  .hero-copy { order: 4; margin-top: 36px; }
}

/* No person in the orbit: the centre disc shows the hero texture instead of a portrait */
.orbit-tex { background: var(--tex-hero) 60% 45% / 260% auto no-repeat, var(--char); filter: none; }