/* ==========================================================================
   Winsora Capital — The Art of Structured Returns
   Design system derived from the Lovart mockups + brand kit.
   --------------------------------------------------------------------------
   Type roles
     Jost       — display headlines (geometric light sans, matches mockups)
     Montserrat — wordmark + letterspaced caps (brand kit primary)
     Inter      — body prose (brand kit body)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  /* Surfaces — mockups sit at near-black, deeper than brand charcoal */
  --ink:            #0A0A0B;
  --ink-raised:     #121213;
  --charcoal:       #1C1C1E;   /* brand: Charcoal Black */
  --navy:           #0A1628;   /* brand: Deep Navy */

  /* Light surface — the Journal inversion */
  --paper:          #F4F1E8;
  --paper-deep:     #EBE7DA;
  --paper-ink:      #16161A;

  /* Neutrals */
  --white:          #FFFFFF;   /* brand: Pure White */
  --platinum:       #E8E8E8;   /* brand: Platinum */
  --silver:         #C0C0C0;   /* brand: Silver */

  /* Warm accent — the champagne seen on display type in the mockups */
  --champagne:      #E9DCC7;
  --champagne-dim:  #C4B49A;

  /* Semantic */
  --text-hi:        #F2F0EC;
  --text:           #B9B5AE;
  --text-dim:       #8A8781;
  --rule:           rgba(232, 232, 232, 0.14);
  --rule-strong:    rgba(232, 232, 232, 0.28);

  /* Type */
  --font-display: 'Jost', 'Century Gothic', ui-sans-serif, system-ui, sans-serif;
  --font-caps:    'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Section titles — serif caps, tracked wide */
  --font-title:   'Cinzel', 'Times New Roman', serif;

  --track-caps:   0.3em;   /* brand kit: letter spacing 300 */
  --track-sub:    0.2em;   /* brand kit: letter spacing 200 */

  /* Space — spacious editorial scale */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  6rem;
  --space-2xl: 9rem;

  --gutter: clamp(1.5rem, 5vw, 6rem);
  --measure: 62ch;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  560ms;
}

/* ---------- 2. Reset & base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;         /* guard: never scroll sideways */
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--champagne); color: var(--ink); }

/* Visible, on-brand focus ring — never remove it */
:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-sm) var(--space-md);
  background: var(--champagne);
  color: var(--ink);
  font-family: var(--font-caps);
  font-size: 0.7rem;
  letter-spacing: var(--track-sub);
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Type primitives ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}

/* Section titles. Cinzel — a serif caps face that echoes the serif W in the
   mark — tracked wide. Applied site-wide so every section label matches. */
.eyebrow {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(0.7rem, 1.05vw, 0.88rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--silver);
}

.prose p + p { margin-top: 1.35em; }
.prose { max-width: var(--measure); }

/* Warm second clause, per the mockups */
.warm { color: var(--champagne); }

/* ---------- 4. Layout ---------- */

.shell {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4.5rem, 11vw, var(--space-2xl)); }


.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Full-bleed rule pulled back to the shell's measure */
.shell-rule {
  width: min(100% - var(--gutter) * 2, 1560px - var(--gutter) * 2);
  margin-inline: auto;
}

/* Available to screen readers, absent from the visual layout */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Masthead ---------- */

/* Three tracks so the nav sits optically centred in the viewport,
   independent of how wide the brand or the Journal button happen to be. */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  padding: clamp(1.1rem, 2.2vw, 1.9rem) var(--gutter);
  transition: background-color 400ms var(--ease), backdrop-filter 400ms var(--ease);
}

.masthead__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.masthead.is-stuck {
  background: rgba(10, 10, 11, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 44px;          /* touch target */
  color: var(--text-hi);
}

/* Masked rather than inlined: one cached file, inherits the theme colour,
   stays crisp at any size. Ratio is the traced mark's own 1.7678:1. */
.brand__mark {
  height: clamp(19px, 2.3vw, 25px);
  aspect-ratio: 176.78 / 100;
  background-color: currentColor;
  -webkit-mask: url('../img/logo-w.svg') no-repeat center / contain;
          mask: url('../img/logo-w.svg') no-repeat center / contain;
  transition: opacity 320ms var(--ease);
}

.brand:hover .brand__mark { opacity: 0.72; }

.brand__word {
  margin-left: 0.85rem;
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: clamp(0.62rem, 0.85vw, 0.74rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Home hero shows the mark alone, as drawn. The wordmark then slides out
   beside it once the page is scrolled, matching the other pages. */
.brand--mark-only .brand__word {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-width 620ms var(--ease),
    margin-left 620ms var(--ease),
    opacity 420ms var(--ease);
}

.masthead.is-stuck .brand--mark-only .brand__word {
  max-width: 16rem;
  margin-left: 0.85rem;
  opacity: 1;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
}

/* Journal sits apart from the primary three, as a framed control */
.nav-journal {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem clamp(0.9rem, 1.6vw, 1.4rem);
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-hi);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: rgba(232, 232, 232, 0.06);
  transition: background-color 380ms var(--ease), border-color 380ms var(--ease),
              color 380ms var(--ease);
}

.nav-journal:hover {
  background: rgba(232, 232, 232, 0.12);
  border-color: var(--champagne);
  color: var(--champagne);
}

.nav-journal[aria-current='page'] {
  background: rgba(233, 220, 199, 0.14);
  border-color: var(--champagne);
  color: var(--champagne);
}

.theme-paper .nav-journal {
  color: var(--paper-ink);
  border-color: rgba(22, 22, 26, 0.3);
  background: rgba(22, 22, 26, 0.04);
}

.theme-paper .nav-journal:hover,
.theme-paper .nav-journal[aria-current='page'] {
  border-color: #755C2E;
  color: #755C2E;
  background: rgba(117, 92, 46, 0.1);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(0.62rem, 0.82vw, 0.72rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text);
  transition: color 320ms var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 28%;
  height: 1px;
  background: currentColor;
  transition: right 420ms var(--ease);
}

.nav__link:hover { color: var(--text-hi); }
.nav__link:hover::after { right: 0; }

.nav__link[aria-current='page'] {
  color: var(--text-hi);
}
.nav__link[aria-current='page']::after { right: 0; opacity: 0.5; }

/* Interpunct separators, as drawn in the mockups */
.nav__sep {
  color: var(--text-dim);
  font-size: 0.6rem;
  user-select: none;
}

/* ---------- 6. Mobile menu ---------- */

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text-hi);
}

.menu-toggle__bars {
  display: block;
  position: relative;
  width: 22px;
  height: 1px;
  background: currentColor;
}
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 360ms var(--ease);
}
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after  { top: 7px; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  gap: var(--space-sm);
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease), visibility 420ms;
}

.drawer.is-open { opacity: 1; visibility: visible; }

.drawer__link {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.5;
  text-align: center;
  color: var(--text-hi);
}

/* ---------- 7. Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

/* The architectural light, held to the right as in the mockup */
.hero__light {
  position: absolute;
  inset: 0 0 0 auto;
  width: 68%;
  z-index: -2;
  background-image: url('../img/hero-corridor.jpg');
  background-size: cover;
  background-position: center left;
  /* Feather the plate's own left edge so it dissolves into the ink
     instead of showing a seam where the element begins. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
          mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  /* A single opacity fade, nothing else. Opacity is GPU-composited so it
     stays smooth, and the page sits on near-black, so fading the plate in
     *is* the rise from dark to bright. No scale drift — it read as the
     image lurching just as the fade settled. */
  animation: dawn 2.6s cubic-bezier(0.25, 0.55, 0.25, 1) both;
}

@keyframes dawn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The hero copy arrives after the light has begun to lift */
/* Copy follows just behind the light rather than waiting on it */
.js-anim .hero__inner .reveal { transition-delay: 180ms; }

/* Scrim: solid ink on the left, clearing as it moves right */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      var(--ink) 0%,
      var(--ink) 26%,
      rgba(10, 10, 11, 0.92) 38%,
      rgba(10, 10, 11, 0.55) 50%,
      rgba(10, 10, 11, 0.12) 64%,
      rgba(10, 10, 11, 0) 76%),
    linear-gradient(to top, rgba(10, 10, 11, 0.75) 0%, rgba(10, 10, 11, 0) 42%);
}

.hero__inner {
  width: 100%;
  padding-bottom: clamp(4.5rem, 11vh, 8.5rem);
  padding-top: 8rem;
}

/* Set in the wordmark's own face, not the section-label serif — this line is
   the brand name, so it should read as the logotype does in the masthead. */
.hero__eyebrow {
  margin-bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: clamp(0.66rem, 0.95vw, 0.82rem);
  color: var(--silver);
}

/* Hands the wordmark over: as the masthead's "WINSORA CAPITAL" slides out,
   the hero's own eyebrow releases, so the name only ever reads once.

   The fade is applied to an inner span rather than the <p> itself. The <p>
   carries .reveal, and `.js-anim .reveal.is-in` sets opacity:1 at a higher
   specificity — it would win every time and pin this line visible. Moving
   the transition one level down keeps the two systems off each other. */
.hero__eyebrow > span {
  display: inline-block;
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}

.is-scrolled .hero__eyebrow > span {
  opacity: 0;
  transform: translateY(-6px);
}

/* Weight lifted off the hairline 200 — it read too thin at this size */
.hero__title {
  font-size: clamp(2.3rem, 6.1vw, 5.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.8rem);
}

.hero__sub { font-weight: 400; }

/* Break is set in the markup, not left to wrapping:
   line 1 "The Art of" / line 2 "Structured Returns." */
.hero__title span { display: block; }

.hero__sub { margin-bottom: clamp(2.2rem, 4.6vw, 3.6rem); }

/* ---------- 7b. The Premise ---------- */

.premise {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 92svh;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Oversized W sitting behind the copy. Masked from the same traced logo, so
   it stays crisp at any size and needs no extra asset.
   Deliberately quiet: a dim silver at 30%, brought up over five seconds so
   it emerges rather than appears, with a slow sheen passing through it. It
   must never compete with the sentence sitting on top of it. */
.premise__ghost {
  position: absolute;
  /* Sized so the top serifs rise behind the opening sentence, then dropped
     just far enough that the section label above still sits on clean ink. */
  top: 60%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  width: min(68rem, 88vw);
  aspect-ratio: 176.78 / 100;
  overflow: hidden;
  /* The dimness lives in the colour's own alpha, not the element's opacity.
     That leaves element opacity free for the fade-in — and means the sheen
     below isn't multiplied down to nothing by a 0.07 parent. */
  background-color: rgba(192, 192, 192, 0.042);
  -webkit-mask: url('../img/logo-w.svg') no-repeat center / contain;
          mask: url('../img/logo-w.svg') no-repeat center / contain;
  opacity: 0;
  transition: opacity 3000ms cubic-bezier(0.32, 0, 0.4, 1) 200ms;
}

/* Full opacity here — the mark's dimness is set by the alpha on its
   background-colour above (0.068). Tune that value, not this one. */
.premise.is-in .premise__ghost { opacity: 1; }

/* The sheen. Clipped by the parent's mask, so it only ever shows inside the
   letterform. Transform-driven, so it composites rather than repaints. */
.premise__ghost::after {
  content: '';
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    104deg,
    transparent 40%,
    rgba(255, 255, 255, 0.11) 50%,
    transparent 60%);
  transform: translateX(-70%);
}

.premise.is-in .premise__ghost::after {
  animation: sheen 7s cubic-bezier(0.4, 0, 0.3, 1) 3.2s infinite;
}

@keyframes sheen {
  0%        { transform: translateX(-70%); }
  55%, 100% { transform: translateX(70%); }
}

@media (prefers-reduced-motion: reduce) {
  .premise.is-in .premise__ghost::after { animation: none; }
}

.premise__inner {
  display: grid;
  justify-items: center;
  gap: 0;
  max-width: 60rem;
}

.premise .eyebrow { margin-bottom: clamp(1.6rem, 3.4vw, 2.6rem); }

/* Inter Light, generously leaded — matches the reference exactly */
.premise__title {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.55rem, 3.6vw, 3rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--text-hi);
}

.premise__rule {
  width: clamp(120px, 18vw, 250px);
  height: 1px;
  background: var(--rule-strong);
  margin-block: clamp(1.8rem, 4vw, 3rem);
}

.premise__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.95rem, 1.32vw, 1.12rem);
  line-height: 2.1;
  letter-spacing: 0.03em;
  color: var(--champagne);
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}

/* Breaks are set in the markup so the lines land as drawn. On narrow
   screens the fixed breaks would overflow, so let the text wrap instead. */
@media (max-width: 720px) {
  .premise__title br,
  .premise__sub br { display: none; }

  .premise__title { text-wrap: balance; max-width: 20ch; }
  .premise__sub { text-wrap: balance; max-width: 40ch; }
}

/* ---------- 8. Link affordances ---------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 52px;
  padding: 0.9rem clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--font-caps);
  font-size: clamp(0.63rem, 0.85vw, 0.72rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-hi);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  transition: border-color 420ms var(--ease), color 420ms var(--ease),
              background-color 420ms var(--ease);
}

.btn-pill svg { transition: transform 420ms var(--ease); }

.btn-pill:hover {
  border-color: var(--champagne);
  color: var(--champagne);
  background: rgba(233, 220, 199, 0.07);
}

.btn-pill:hover svg { transform: translateX(6px); }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 44px;
  padding-block: 0.35rem;
  font-family: var(--font-caps);
  font-size: clamp(0.63rem, 0.85vw, 0.72rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-hi);
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color 380ms var(--ease), color 380ms var(--ease);
}

.link-underline svg { transition: transform 420ms var(--ease); }
.link-underline:hover { border-color: var(--champagne); color: var(--champagne); }
.link-underline:hover svg { transform: translateX(7px); }

/* ---------- 9. Pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: 0;
}

/* Subgrid keeps the rule and body copy on shared baselines even when a
   name wraps to two lines ("Risk Management"). Degrades safely without it. */
.pillar {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  padding-inline: clamp(1.2rem, 2.6vw, 2.6rem);
  border-left: 1px solid var(--rule);
}
.pillar:first-child { padding-left: 0; border-left: 0; }
.pillar:last-child  { padding-right: 0; }

/* Bottom-aligned inside its subgrid row. The row is sized by the tallest
   name ("Risk Management" wraps to two lines), so top-aligning left the
   single-line names floating with an uneven gap above their rule. Sitting
   them on the bottom edge puts every name on one shared baseline and keeps
   the distance to each rule identical. */
.pillar__name {
  align-self: end;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  line-height: 1.1;
  color: var(--text-hi);
  margin-bottom: 1.4rem;
}

/* Two short lines, each its own thought */
.pillar__copy span { display: block; }
.pillar__copy span + span { color: var(--text-dim); }

.pillar__rule {
  width: 46px;
  height: 1px;
  background: var(--rule-strong);
  margin-bottom: 1.6rem;
}

.pillar__copy { font-size: 0.94rem; line-height: 1.8; }

/* ---------- 9b. Philosophy: opening line ---------- */

/* Exactly one screen. It was 190svh with a sticky, scroll-faded line, which
   left half a screen of empty black between this and the creed — one scroll
   to dissolve the text, another before anything replaced it. Now the two
   sections sit back to back and a single scroll carries you from one to the
   next. */
.manifesto {
  min-height: 100svh;
  display: grid;
  place-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(4rem, 9vh, 6rem);
  text-align: center;
}

.manifesto__line {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--text-hi);
}

.manifesto__line span { display: block; }
.manifesto__line span + span { color: var(--champagne); }

/* ---------- 9c. Philosophy: the creed sequence ---------- */

/* A single screen that advances on a timer. It deliberately does NOT pin or
   consume scroll — an earlier version was seven viewports tall and hijacked
   the page, making it near-impossible to scroll past or back up. The section
   now behaves like any other, and the dots below give direct control. */
.creed {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-content: center;
  padding: clamp(6rem, 14vh, 9rem) var(--gutter) clamp(4rem, 9vh, 6rem);
}

.creed__stage {
  display: grid;
  justify-items: center;
  gap: clamp(3rem, 8vh, 5.5rem);
}

.creed__line {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2rem, 7vw, 5.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-hi);
  text-wrap: balance;
}

/* The pivot word holds still while the terms either side change */
.creed__over {
  display: inline-block;
  color: var(--text-dim);
  font-size: 0.6em;
  font-style: italic;
  padding-inline: 0.3em;
  vertical-align: baseline;
}

.creed__b { color: var(--champagne); }

/* Per-character tiles. JS assigns each a random delay so the word resolves
   in scattered fragments rather than a uniform sweep. */
.creed__word { display: inline-block; white-space: nowrap; }

.tile {
  display: inline-block;
  opacity: 0;
  transform: scale(0.62) translateY(0.14em);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.tile.is-set { opacity: 1; transform: none; }

/* Preserve word spaces, which collapse once each character is a span */
.tile--space { width: 0.3em; }

.creed__progress {
  display: flex;
  gap: 0.25rem;
}

/* Real buttons so the sequence can be driven by hand. The visible mark is a
   hairline; the button itself is a full 44px touch target around it. */
.creed__dot {
  appearance: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.creed__dot::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--rule-strong);
  transition: background-color 420ms var(--ease), transform 420ms var(--ease);
}

.creed__dot:hover::before { background: var(--silver); transform: scaleY(2); }

.creed__dot[aria-current='true']::before {
  background: var(--champagne);
  transform: scaleY(2);
}

.creed__dot:focus-visible { outline: 1px solid var(--champagne); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tile { opacity: 1; transform: none; }
  .manifesto__stage { opacity: 1; }
}

/* ---------- 10. Full-screen statement (404) ---------- */

.statement {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-content: center;
  padding: 7rem var(--gutter) 6rem;
}

.statement__text {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.1rem, 7.6vw, 6.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--text-hi);
  text-wrap: balance;
}

.statement__text .over {
  color: var(--text-dim);
  font-size: 0.62em;
  font-style: italic;
  padding-inline: 0.12em;
}

/* ---------- 11. About ---------- */

/* -- 11a. Opening panel: the premise, split by a full-height rule -- */

.about-premise {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  min-height: 88svh;
  padding-block: clamp(7rem, 15vh, 11rem) clamp(4rem, 9vh, 7rem);
  isolation: isolate;
}

/* The mark sits inside the left column, pushed to its right edge against the
   divider, dropped below centre. `clip-path` trims the right 40% so only 60%
   of the letterform shows; the matching translate puts that visible edge
   flush to the column's right, not floating short of it. */
.about-premise__watermark {
  position: absolute;
  right: 0;
  top: 22%;
  z-index: -1;
  width: min(30rem, 40vw);
  aspect-ratio: 176.78 / 100;
  background-color: rgba(192, 192, 192, 0.075);
  -webkit-mask: url('../img/logo-w.svg') no-repeat center / contain;
          mask: url('../img/logo-w.svg') no-repeat center / contain;
  /* 40% would land the cut edge on the column boundary, leaving the grid
     gutter as dead space before the divider. The extra 18% carries it
     across most of that gap so the crop sits close to the line. */
  transform: translateX(58%);
  -webkit-clip-path: inset(0 40% 0 0);
          clip-path: inset(0 40% 0 0);
  opacity: 0;
  transition: opacity 3000ms cubic-bezier(0.32, 0, 0.4, 1) 200ms;
  pointer-events: none;
}

.about-premise.is-in .about-premise__watermark { opacity: 1; }

.about-premise__lead {
  position: relative;
  isolation: isolate;
}

.about-premise__lead .eyebrow { margin-bottom: clamp(1.4rem, 2.8vw, 2rem); }

/* The name set as the wordmark — no mark, just the letterforms, large */
/* Held on one line — the size is sized to the column rather than the other
   way round, so the tracking can stay wide without forcing a wrap. */
.about-premise__wordmark {
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.9vw, 2.45rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.3;
  color: var(--champagne);
  /* The tracking adds a trailing gap after the last letter; pull it back so
     the block still reads as flush-left against the eyebrow above. */
  margin-right: -0.18em;
}

.about-premise__rule {
  width: clamp(150px, 22vw, 320px);
  height: 1px;
  background: var(--rule-strong);
  margin-top: clamp(1.8rem, 4vw, 3rem);
}

/* The dividing rule runs the full height of the panel, as drawn */
.about-premise__body {
  border-left: 1px solid var(--rule);
  padding-left: clamp(2rem, 5vw, 5rem);
  align-self: stretch;
  display: grid;
  align-content: center;
}

.about-premise__body .prose { max-width: 54ch; }

/* -- 11b. Founders -- */

.founders__head {
  display: grid;
  justify-items: start;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.founders__head .founders__rule {
  width: 46px;
  height: 1px;
  background: var(--rule-strong);
  margin-top: 1.1rem;
}

.founders__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

/* Framed, not feathered. A hairline rule sits inset from a second offset
   rule behind it — a passe-partout, the way a print is mounted. The picture
   keeps its full colour and its full rectangle. */
.portrait {
  position: relative;
  padding: clamp(0.7rem, 1.5vw, 1.1rem);
  border: 1px solid var(--rule-strong);
  transition: border-color 520ms var(--ease);
}

/* The offset rule, sitting behind and down-right */
.portrait::before {
  content: '';
  position: absolute;
  inset: clamp(0.85rem, 1.9vw, 1.5rem) calc(-1 * clamp(0.85rem, 1.9vw, 1.5rem))
          calc(-1 * clamp(0.85rem, 1.9vw, 1.5rem)) clamp(0.85rem, 1.9vw, 1.5rem);
  border: 1px solid var(--rule);
  z-index: -1;
  pointer-events: none;
  transition: border-color 520ms var(--ease);
}

.portrait:hover { border-color: var(--champagne-dim); }
.portrait:hover::before { border-color: var(--rule-strong); }

.portrait__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  filter: contrast(1.05) saturate(1.02);
}

/* A whisper of shading into the lower corners so the print sits on the page
   rather than floating as a bright rectangle. Nothing touches his face. */
.portrait__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0) 55%, rgba(10, 10, 11, 0.35) 100%);
  pointer-events: none;
}

.founder__name {
  font-family: var(--font-caps);
  font-weight: 500;
  font-size: clamp(0.82rem, 1.35vw, 1.05rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--champagne);
}

.founder__rule {
  width: 62px;
  height: 1px;
  background: var(--rule-strong);
  margin-block: 1.1rem 1.3rem;
}

.founder__role {
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: var(--track-sub);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: clamp(1.8rem, 3.4vw, 2.4rem);
}

.founder__pull {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--champagne);
  line-height: 1.75;
}

/* Footer signature line: PRIVATE · DISCIPLINED · PURPOSEFUL */
.creed-line {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
}

.creed-line li {
  font-family: var(--font-caps);
  font-size: clamp(0.58rem, 0.82vw, 0.68rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

.creed-line li:not(:last-child)::after {
  content: '\00b7';
  margin-left: clamp(0.8rem, 2vw, 1.6rem);
  color: var(--rule-strong);
}

/* ---------- 12. Journal — the light inversion ---------- */

.theme-paper {
  background: var(--paper);
  color: #4A4741;
}

.theme-paper .masthead.is-stuck {
  background: rgba(244, 241, 232, 0.86);
}

.theme-paper .brand,
.theme-paper .nav__link[aria-current='page'] { color: var(--paper-ink); }

.theme-paper .nav__link { color: #5A574F; }
.theme-paper .nav__link:hover { color: var(--paper-ink); }
.theme-paper .nav__sep { color: #9A968C; }
.theme-paper .eyebrow { color: #6E6A61; }
.theme-paper .rule { background: rgba(22, 22, 26, 0.16); }
.theme-paper .link-underline {
  color: var(--paper-ink);
  border-color: rgba(22, 22, 26, 0.28);
}
.theme-paper .link-underline:hover { color: #755C2E; border-color: #755C2E; }
.theme-paper :focus-visible { outline-color: #755C2E; }
.theme-paper .drawer { background: var(--paper); }
.theme-paper .drawer__link { color: var(--paper-ink); }
.theme-paper .menu-toggle { color: var(--paper-ink); }
.theme-paper .site-footer { border-color: rgba(22, 22, 26, 0.16); }
.theme-paper .site-footer__line { color: #6E6A61; }
.theme-paper ::selection { background: var(--paper-ink); color: var(--paper); }

.journal-grid {
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  align-items: stretch;
}

/* Featured entry — the dark block set into the cream page */
.feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: clamp(2rem, 4.4vw, 4rem);
  background: var(--charcoal);
  color: var(--text);
  min-height: 30rem;
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease);
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px -30px rgba(22, 22, 26, 0.55);
}

.feature__kicker { color: var(--silver); }

.feature__rule {
  width: 46px;
  height: 1px;
  background: var(--rule-strong);
  margin-block: 1.1rem 2rem;
}

.feature__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.12;
  color: var(--text-hi);
  margin-bottom: 1.6rem;
  text-wrap: balance;
}

.feature__excerpt { max-width: 34ch; line-height: 1.85; }

/* Flex column would otherwise stretch the rule across the whole card */
.feature .link-underline { align-self: flex-start; }

.entries { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); }

.entry {
  display: block;
  padding: clamp(1.5rem, 2.8vw, 2.3rem);
  border: 1px solid rgba(22, 22, 26, 0.22);
  transition: border-color 420ms var(--ease), background-color 420ms var(--ease),
              transform 420ms var(--ease);
}

.entry:hover {
  border-color: rgba(22, 22, 26, 0.55);
  background: var(--paper-deep);
  transform: translateY(-3px);
}

/* Same role as .eyebrow, so same face */
.entry__kicker {
  font-family: var(--font-title);
  font-size: 0.62rem;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: #6E6A61;
}

.entry__rule {
  width: 26px;
  height: 1px;
  background: rgba(22, 22, 26, 0.4);
  margin-block: 0.85rem 1.1rem;
}

.entry__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.28;
  color: var(--paper-ink);
  text-wrap: balance;
}

/* ---------- 13. Teasers (home) ---------- */

.teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.2rem);
}

.teaser {
  display: block;
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border: 1px solid var(--rule);
  transition: border-color 420ms var(--ease), background-color 420ms var(--ease),
              transform 420ms var(--ease);
}

.teaser:hover {
  border-color: var(--rule-strong);
  background: var(--ink-raised);
  transform: translateY(-3px);
}

.teaser__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.3;
  color: var(--text-hi);
  margin-block: 1rem 0.9rem;
  text-wrap: balance;
}

/* ---------- 14. Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 4vw, 3.2rem);
  text-align: center;
}

.site-footer__line {
  font-family: var(--font-caps);
  font-size: clamp(0.58rem, 0.82vw, 0.68rem);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- 15. Reveal on scroll ---------- */

/* The hidden state is scoped to .js-anim, which main.js only sets once it has
   a working IntersectionObserver in hand. If the script never runs, errors,
   or the observer never fires, this rule simply never applies and the content
   renders normally — copy can't be stranded invisible. */

.js-anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}

.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* Staggered children, capped well under the ~8-item comfort limit */
.js-anim .reveal-group > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js-anim .reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group.is-in > :nth-child(1) { transition-delay: 0ms; }
.reveal-group.is-in > :nth-child(2) { transition-delay: 90ms; }
.reveal-group.is-in > :nth-child(3) { transition-delay: 180ms; }
.reveal-group.is-in > :nth-child(4) { transition-delay: 270ms; }
.reveal-group.is-in > :nth-child(5) { transition-delay: 360ms; }
.reveal-group.is-in > :nth-child(6) { transition-delay: 450ms; }

/* .js-anim is never set without JS, so no separate no-JS fallback is needed. */

/* ---------- 16. Responsive ---------- */

@media (max-width: 1080px) {
  .founders__grid { grid-template-columns: 0.95fr 1.05fr; }
  /* row-gap must stay 0. Each pillar spans three subgrid rows, so a row-gap
     lands between every one of them — including inside a pillar, between its
     name, rule and copy. Separate the two pillar rows with margin instead,
     which grows the row without touching what's inside it. */
  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
  .pillar:nth-child(n+3) { margin-top: var(--space-xl); }
  .pillar:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(2) { padding-right: 0; }
  .teaser-grid { grid-template-columns: 1fr 1fr; }
  .teaser-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav, .nav__sep, .nav-journal { display: none; }
  .menu-toggle { display: inline-flex; }

  /* Middle track collapses; brand and toggle hold the two edges */
  .masthead { grid-template-columns: 1fr auto; }

  /* No hover state to reveal it on touch — show the wordmark from the start */
  .brand--mark-only .brand__word {
    max-width: 16rem;
    margin-left: 0.85rem;
    opacity: 1;
  }

  .journal-grid { grid-template-columns: 1fr; }
  .feature { min-height: 0; }

  .hero { align-items: flex-end; }
  .hero__light {
    width: 100%;
    inset: 0;
    /* Frame the lit wall rather than the shadowed corner — a right-edge
       crop on a portrait viewport lands entirely in shadow. */
    background-position: 44% 64%;
    opacity: 0.9;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hero__scrim {
    background:
      linear-gradient(to top,
        var(--ink) 6%,
        rgba(10, 10, 11, 0.86) 30%,
        rgba(10, 10, 11, 0.4) 60%,
        rgba(10, 10, 11, 0.2) 100%);
  }
  .hero__title { max-width: 100%; }
}

@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-md);
  }

  /* Even spacing once stacked — overrides the two-column rule, which only
     separated rows 3 and 4. Both selectors carry the same value so it makes
     no difference which of them the cascade picks. */
  .pillar:nth-child(n+2),
  .pillar:nth-child(n+3) { margin-top: var(--space-md); }

  .pillar:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .teaser-grid { grid-template-columns: 1fr; }
  .teaser-grid > :last-child { grid-column: auto; }
  .about-premise,
  .founders__grid { grid-template-columns: 1fr; }

  .about-premise { min-height: 0; row-gap: clamp(2rem, 6vw, 3rem); }

  /* The full-height divider becomes a horizontal rule when stacked */
  .about-premise__body {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: clamp(2rem, 6vw, 3rem);
  }

  .portrait { max-width: 340px; margin-inline: auto; }

  /* Too little room for a cropped watermark to read as anything but noise */
  .about-premise__watermark { display: none; }
}

/* ---------- 17. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-group > * { opacity: 1; transform: none; }
  .hero__light { animation: none; }
}

/* ---------- 18. Print ---------- */

@media print {
  .masthead, .drawer, .creed__progress { display: none; }
  body { background: #fff; color: #000; }
}