/* Portfolio site — design system from design/design-system.md
   Tones, type, depth, glyph, spacing. No borders, no boxes; space is tone and shadow. */

:root {
  /* Tones */
  --paper: #F4F2EE;
  --ink: #141311;
  --shade: #E9E6E0;
  --quiet: #6B6862;
  --signal: #C8372D;

  /* Families */
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Bodoni Moda', Didot, serif;

  /* Depth */
  --rest: 0 1px 2px rgba(20,19,17,0.08), 0 12px 24px -12px rgba(20,19,17,0.25);
  --lift: 0 2px 4px rgba(20,19,17,0.06), 0 40px 80px -30px rgba(20,19,17,0.45);

  /* Page frame */
  --page-max: 1280px;
  --pad-x: 56px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}
a:hover { border-bottom-color: transparent; }

/* Screen-reader only */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Page shell -------------------------------------------------------- */
.page {
  position: relative;
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
}

/* Grain: fractal noise, 7% multiply, over the whole page */
.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Content sits above the grain; the glyph sits below it */
.layer { position: relative; z-index: 2; }

/* ---- Type -------------------------------------------------------------- */
.statement {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
.statement--hero { font-size: clamp(56px, 8.5vw, 88px); }
.statement--sm { font-size: clamp(40px, 5vw, 56px); line-height: 0.95; }
.statement--md { font-size: clamp(44px, 6vw, 64px); line-height: 0.95; }
.statement--about { font-size: clamp(44px, 6vw, 72px); line-height: 0.95; }

.sentence {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  text-wrap: pretty;
  margin: 0;
}
.sentence--sm { font-size: clamp(20px, 2vw, 24px); }
.sentence--lead { max-width: 480px; font-size: clamp(20px, 2.2vw, 26px); }

.body { font-weight: 400; font-size: 18px; line-height: 1.5; max-width: 560px; margin: 0; }
.caption { font-weight: 400; font-size: 16px; line-height: 1.5; margin: 0; }

.label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}
.label--secondary { letter-spacing: 0.14em; }
.label--quiet { color: var(--quiet); }
.label--tiny { font-size: 10px; letter-spacing: 0.14em; }

.figure {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 72px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.figure--row { font-size: 40px; }
.figure--group { font-size: 64px; }

.meta {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--quiet);
}

/* ---- Glyph (cut out of the sheet) -------------------------------------- */
.glyph {
  position: absolute;
  font-family: var(--display);
  font-weight: 900;
  line-height: 1;
  color: var(--paper);           /* letter colour equals its ground */
  filter: url(#cut);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.glyph--on-shade { color: var(--shade); }

/* ---- Nav & footer ------------------------------------------------------ */
.nav, .foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 32px var(--pad-x);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav a, .foot a { border: none; }
.nav__brand { color: var(--ink); }
.nav__items { display: flex; gap: 32px; }
.nav__items a { color: var(--quiet); }
.nav__items a.is-active { color: var(--ink); }
.foot { color: var(--quiet); }
.foot a { color: var(--quiet); }

/* ---- Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 740px;
  display: flex;
}
.hero--product { min-height: 680px; }
.hero__col {
  position: absolute;
  left: var(--pad-x);
  bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 600px;
  z-index: 2;
}
.hero--product .hero__col { bottom: 80px; }
.glyph--hero { right: -40px; bottom: -270px; font-size: 1300px; }
.glyph--product { right: -30px; bottom: -190px; font-size: 1100px; }

/* ---- Bands & frames ---------------------------------------------------- */
.band {
  position: relative;
  background: var(--shade);
}
.band--dots {
  background-image: radial-gradient(rgba(20,19,17,0.16) 0.6px, transparent 0.7px);
  background-size: 14px 14px;
}

.frame { padding: 72px var(--pad-x) 80px; display: flex; flex-direction: column; gap: 20px; }
.frame__caption {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.frame__caption .dims { color: var(--quiet); }

/* A print: paper, lift shadow, placeholder until a real screenshot lands */
.print {
  background: var(--paper);
  box-shadow: var(--lift);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--quiet);
}
.shots { display: grid; gap: 40px; }

/* ---- Home: product grid ------------------------------------------------ */
.products {
  background: var(--shade);
  padding: 96px var(--pad-x) 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px 80px;
}
.product { display: flex; flex-direction: column; gap: 24px; }
.product__line { font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.3; text-wrap: pretty; max-width: 480px; }
.product__figs { display: flex; gap: 48px; padding-top: 8px; }
.figpair { display: flex; flex-direction: column; gap: 8px; }
.product a { align-self: flex-start; font-size: 16px; }

/* ---- Job Finder: facets + thread -------------------------------------- */
.facets {
  padding: 120px var(--pad-x) 0;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.facet {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--quiet);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.facet.is-active { font-weight: 500; color: var(--ink); }

.thread { display: flex; flex-direction: column; }
.thread-step { display: flex; flex-direction: column; }
.thread-step__text { padding: 96px var(--pad-x) 40px; max-width: 640px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; text-wrap: pretty; }
.thread-close { padding: 160px var(--pad-x) 120px; max-width: 720px; display: flex; flex-direction: column; gap: 40px; }
.thread-close .sentence { max-width: 560px; }

/* ---- Live figures ------------------------------------------------------ */
.figures {
  background: var(--shade);
  padding: 96px var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: 96px;
}
.live-figure { display: flex; flex-direction: column; gap: 20px; }

/* ---- Next ------------------------------------------------------------- */
.next {
  padding: 96px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.next__link { display: flex; flex-direction: column; gap: 16px; }
.next__link a {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  border-bottom-width: 2px;
}
.next > a { font-size: 16px; white-space: nowrap; }

/* ---- About ------------------------------------------------------------ */
.about-top {
  padding: 140px var(--pad-x) 120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 80px;
  align-items: start;
}
.about-top__col { display: flex; flex-direction: column; gap: 56px; padding-top: 24px; }
.portrait {
  aspect-ratio: 4 / 5;
  background: var(--shade);
  box-shadow: var(--lift);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--quiet);
}
.about-band {
  position: relative;
  overflow: hidden;
  background: var(--shade);
  padding: 120px var(--pad-x) 120px 520px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.glyph--about { left: -60px; top: -120px; font-size: 900px; }
.about-band p { position: relative; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; text-wrap: pretty; max-width: 640px; margin: 0; }
.about-close { padding: 160px var(--pad-x) 120px; display: flex; flex-direction: column; gap: 56px; max-width: 800px; }
.links { display: flex; gap: 40px; font-size: 18px; }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --pad-x: 24px; }
  .nav { flex-direction: column; gap: 16px; align-items: flex-start; }
  .nav__items { gap: 20px; flex-wrap: wrap; }
  .hero, .hero--product { min-height: 560px; }
  .hero__col { position: static; padding: 120px 0 80px; max-width: none; }
  .glyph--hero { font-size: 620px; right: -30px; bottom: -120px; }
  .glyph--product { font-size: 520px; right: -20px; bottom: -90px; }
  .glyph--about { font-size: 420px; }
  .products { grid-template-columns: 1fr; gap: 64px; }
  .about-top { grid-template-columns: 1fr; gap: 48px; padding-top: 80px; }
  .about-band { padding: 80px var(--pad-x); }
  .facets { padding-top: 72px; gap: 28px; }
  .next { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}