/* ---- tokens ---- */
:root {
  --paper:    #FBFAF6;
  --vellum:   #F4F1E9;
  --ink:      #1C2230;
  --muted:    #6B7488;
  --teal:     #2FA39B;
  --lavender: #9C7DF0;
  --hairline: #E4E1D8;
  --measure: 38rem;            /* readable column width */
  --pad: clamp(1.5rem, 5vw, 6rem);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- type ---- */
h1, h2, .display { font-family: "Fraunces", Georgia, serif; font-weight: 600; line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 6vw, 4rem); margin: 0; }
.wordmark { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.25rem; letter-spacing: .01em; }
.sub { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.pull { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.15; }

/* ---- layout primitives (bands + hairlines + whitespace; NO boxes) ---- */
.band { padding: clamp(3rem, 8vw, 7rem) var(--pad); }
.band--vellum { background: var(--vellum); }      /* tonal separation, not a box */
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }  /* divider, not a border */
.bleed { width: 100%; }                            /* full-bleed media, no frame */

/* ---- links: quiet text + teal hairline underline, never pills ---- */
a.link { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s; }
a.link:hover { border-color: var(--teal); }
.status { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.status--live { color: var(--teal); }
.status--dev  { color: var(--lavender); }
.hero { position: relative; min-height: 82vh; display: grid; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* soft gradient scrim — transparent to warm cream, NO hard edge, NOT a box */
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(251,250,246,0) 35%, rgba(251,250,246,.92) 100%); }
.hero__inner { position: relative; align-self: end; padding: var(--pad); max-width: 46rem; }
.hero__wordrule { border-top-color: var(--teal); width: 3.5rem; margin: .4rem 0 2rem; }
.hero h1 { margin-bottom: .6rem; }
.thesis { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .thesis { grid-template-columns: 1.1fr 1fr; align-items: start; }  /* two columns by whitespace, no rule/box */
}
.thesis__body { max-width: var(--measure); color: var(--ink); }
.thesis__body p { margin: 0 0 1rem; }
.work__eyebrow { color: var(--muted); margin: 0 0 2rem; }
.work__row { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; align-items: baseline; padding: 1.5rem 0; position: relative; }
.work__name { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 .3rem; }
.work__meta { justify-self: end; }
.work__img { width: min(38vw, 22rem); aspect-ratio: 16/9; object-fit: cover; justify-self: end; grid-column: 1 / -1;
  /* mask-fade into paper at the left so it reads as a bleed, not a framed tile */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
@media (min-width: 48rem) {
  .work__img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: calc(var(--pad) * -1); }
}
.principles__eyebrow, .traction { color: var(--muted); }
.principles__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .principles__grid { grid-template-columns: repeat(3, 1fr); } }
.principle__n { color: var(--teal); font-size: 1.4rem; margin: 0 0 .4rem; }
.principle__head { font-family: "Outfit"; font-weight: 600; font-size: 1.15rem; margin: 0 0 .3rem; }
.traction__line { max-width: 50rem; color: var(--ink); }
.founder__text { max-width: var(--measure); }
.founder__eyebrow, .founder__role { color: var(--muted); }
.founder__line { margin-top: .6rem; }
.founder__name { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .4rem 0 .2rem; }
.company__legal { margin: 0 0 .6rem; }
.company__contacts { color: var(--muted); margin: 0 0 1.5rem; }
.company__mark { color: var(--ink); }