/* ============================================================
   EricSpencer.us / design-skill
   A specimen page. Set in Fraunces and Inter.
   ============================================================ */

/* --- Tokens -------------------------------------------------- */
:root {
  /* Color: OKLCH, all tinted toward warm ochre. No #000, no #fff. */
  --paper:       oklch(97.5% 0.012 75);
  --paper-2:     oklch(95.5% 0.014 75);
  --paper-3:     oklch(92.8% 0.018 72);
  --ink:         oklch(18% 0.012 65);
  --ink-2:       oklch(38% 0.012 65);
  --ink-3:       oklch(54% 0.010 65);
  --rule:        oklch(82% 0.012 65);
  --rule-strong: oklch(70% 0.012 65);
  --ochre:       oklch(58% 0.140 65);
  --ochre-dark:  oklch(46% 0.142 60);
  --ochre-soft:  oklch(90% 0.062 75);
  --ochre-wash:  oklch(94% 0.034 75);

  /* Type scale: ratio 1.333 */
  --step--2: 0.703rem;
  --step--1: 0.937rem;
  --step-0:  1.125rem;   /* 18px @ root 16px */
  --step-1:  1.500rem;
  --step-2:  2.000rem;
  --step-3:  2.667rem;
  --step-4:  3.556rem;
  --step-5:  5.000rem;
  --step-6:  clamp(3.25rem, 1rem + 9vw, 7.5rem);

  /* Fluid edge padding */
  --edge: clamp(20px, 5vw, 96px);
  --max:  1440px;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Type families */
  --serif: "Fraunces", "Iowan Old Style", "Charter", "Georgia", serif;
  --sans:  "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, "JetBrains Mono", "SF Mono", Consolas, monospace;
}

/* --- Reset (minimal, deliberate) ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; border-radius: 2px; }

/* --- Document base ------------------------------------------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.55;
  font-feature-settings: "ss01", "ss02", "kern", "liga", "calt";
  font-optical-sizing: auto;
  letter-spacing: -0.005em;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Skip link for keyboards */
.skip-link {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out-quart);
  z-index: 100;
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Selection ----------------------------------------------- */
::selection { background: var(--ochre-soft); color: var(--ink); }

/* --- Left margin scroll rule --------------------------------- */
.scroll-rule {
  position: fixed;
  left: max(12px, calc(var(--edge) / 4));
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
  z-index: 50;
  pointer-events: none;
}
.scroll-rule__fill {
  display: block;
  width: 100%;
  height: 0%;
  background: var(--ochre);
  transform-origin: top;
  will-change: height;
}
@media (max-width: 720px) {
  .scroll-rule { display: none; }
}

/* --- Masthead ------------------------------------------------ */
.masthead {
  padding: var(--s-7) var(--edge) var(--s-6);
  max-width: var(--max);
  margin: 0 auto;
}
.masthead__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.masthead__title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--serif);
  font-weight: 350;
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  letter-spacing: -0.012em;
  color: var(--ink);
}
.masthead__title-sep {
  font-style: normal;
  color: var(--ink-3);
  font-weight: 300;
  font-size: 0.85em;
}
.masthead__title-tag {
  font-family: var(--sans);
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6em;
  padding: 4px 8px 3px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  transform: translateY(-0.18em);
}
.masthead__meta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.masthead__dot { color: var(--ink-3); }
.masthead__kicker {
  padding-top: var(--s-3);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* --- Hero ---------------------------------------------------- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s-9) var(--edge) var(--s-9);
}
.hero__kicker {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ochre-dark);
  margin-bottom: var(--s-6);
}
.hero__headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-6);
  line-height: 0.96;
  letter-spacing: -0.030em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
  font-variation-settings: "opsz" 144;
}
.hero__keyword {
  font-style: italic;
  font-weight: 500;
  position: relative;
  white-space: nowrap;
}
.hero__keyword::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 0.28em;
  background: var(--ochre-soft);
  z-index: -1;
  transform-origin: left;
}
.hero__subhead {
  margin-top: var(--s-7);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 56ch;
  font-variation-settings: "opsz" 28;
}
.hero__skill {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 2px 8px 1px;
  background: var(--paper-3);
  color: var(--ink);
  border-radius: 2px;
  white-space: nowrap;
}
.hero__link {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 200ms var(--ease-out-quart);
}
.hero__link:hover { text-decoration-thickness: 2px; }
.hero__byline {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.hero__byline-dot { color: var(--rule-strong); }
.hero__byline-link {
  color: var(--ink-2);
  transition: color 160ms var(--ease-out-quart);
}
.hero__byline-link:hover { color: var(--ochre-dark); }

/* --- Sections ------------------------------------------------ */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s-9) var(--edge);
  position: relative;
}
.section + .section {
  border-top: 1px solid var(--rule);
}
.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-9);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.section__number {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ochre-dark);
  font-variant-numeric: tabular-nums;
}
.section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variation-settings: "opsz" 96;
  max-width: 18ch;
}
.section__lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 56ch;
  font-variation-settings: "opsz" 24;
  margin-top: var(--s-3);
}

/* --- Projects (Featured Work) -------------------------------- */
.project {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-9);
  align-items: start;
  padding: var(--s-8) 0;
  position: relative;
}
.project + .project { border-top: 1px solid var(--rule); }
.project--left {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.project--left .project__plate { order: -1; }
.project--left .project__body,
.project--left .project__meta { order: 0; }
.project__meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-6);
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.project__index { color: var(--ochre-dark); }
.project__date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.project__body { padding-right: var(--s-4); }
.project__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 1rem + 3vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin-bottom: var(--s-6);
  font-variation-settings: "opsz" 110;
  text-wrap: balance;
}
.project__title a {
  background-image: linear-gradient(var(--ochre), var(--ochre));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 360ms var(--ease-out-quart), font-weight 200ms var(--ease-out-quart);
}
.project__title a:hover {
  background-size: 100% 2px;
  font-weight: 700;
}
.project__lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--ink-2);
  max-width: 38ch;
  font-variation-settings: "opsz" 28;
  margin-bottom: var(--s-6);
}
.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.project__tags li::before {
  content: "+";
  margin-right: 6px;
  color: var(--ochre-dark);
  font-weight: 600;
}
.project__plate {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: 2px;
}
.project__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transform-origin: center;
  transition: transform 600ms var(--ease-out-quart), filter 600ms var(--ease-out-quart);
  will-change: transform;
}
.project__plate:hover img,
.project__plate:focus-visible img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.04);
}
.project__plate-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s-2);
  background:
    radial-gradient(circle at 30% 30%, var(--paper) 0%, var(--paper-3) 100%);
  color: var(--ink);
  text-align: center;
}
.project__plate-placeholder--dark {
  background:
    repeating-linear-gradient(
      135deg,
      var(--ink) 0,
      var(--ink) 1px,
      var(--ink-2) 1px,
      var(--ink-2) 14px
    );
  color: var(--paper);
}
.project__plate-glyph {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(3.5rem, 2rem + 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.project__plate-glyph--mono {
  font-family: var(--mono);
  font-style: normal;
  font-size: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  letter-spacing: -0.02em;
}
.project__plate-caption {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.8;
}

@media (max-width: 880px) {
  .project,
  .project--left {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .project--left .project__plate { order: 0; }
  .project__plate { aspect-ratio: 16 / 10; }
}

/* --- Studio -------------------------------------------------- */
.section--studio { background: var(--ochre-wash); border-top: 1px solid var(--rule); }
.section--studio .section__number { color: var(--ochre-dark); }
.studio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.studio-card {
  grid-column: span 4;
  background: var(--paper);
  padding: var(--s-7);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-5);
  min-height: 240px;
  transition: background 200ms var(--ease-out-quart);
}
.studio-card:hover { background: var(--paper-2); }
.studio-card--parent {
  grid-column: span 12;
  background: var(--ink);
  color: var(--paper);
}
.studio-card--parent:hover { background: oklch(22% 0.012 65); }
.studio-card__tag {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ochre-dark);
}
.studio-card--parent .studio-card__tag { color: var(--ochre-soft); }
.studio-card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.022em;
  font-variation-settings: "opsz" 96;
}
.studio-card--parent .studio-card__title {
  font-size: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  font-weight: 400;
  font-style: italic;
}
.studio-card--parent .studio-card__title small {
  font-style: normal;
  font-weight: 400;
  font-size: 0.42em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  vertical-align: 0.55em;
  margin-left: 0.4em;
  color: var(--ochre-soft);
}
.studio-card__lede {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-2);
  font-variation-settings: "opsz" 28;
}
.studio-card--parent .studio-card__lede {
  color: oklch(82% 0.015 75);
  font-style: italic;
  font-size: var(--step-1);
  max-width: 38ch;
}
.studio-card__url {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ochre-dark);
  position: relative;
}
.studio-card--parent .studio-card__url { color: var(--ochre-soft); }
.studio-card__url::before {
  content: "→ ";
  margin-right: 4px;
}

@media (max-width: 960px) {
  .studio-card { grid-column: span 6; }
}
@media (max-width: 640px) {
  .studio-card, .studio-card--parent { grid-column: span 12; min-height: auto; padding: var(--s-6); }
}

/* --- CV ------------------------------------------------------ */
.cv-cluster + .cv-cluster {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.cv-cluster__title {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ochre-dark);
  margin-bottom: var(--s-6);
}
.cv-list { display: grid; gap: var(--s-7); }
.cv-list--compact { gap: var(--s-5); }
.cv-entry {
  display: grid;
  grid-template-columns: 14ch 1fr;
  gap: var(--s-6);
  align-items: baseline;
}
.cv-entry--featured .cv-entry__role {
  font-weight: 600;
  font-size: var(--step-2);
}
.cv-entry__dates {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding-top: 0.42em;
}
.cv-entry__role {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
  font-variation-settings: "opsz" 36;
  margin-bottom: var(--s-2);
}
.cv-entry__org {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
}
.cv-entry__note {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
  font-variation-settings: "opsz" 28;
}
.cv-entry__note a {
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
.cv-entry__note a:hover { text-decoration-thickness: 2px; }

@media (max-width: 720px) {
  .cv-entry {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* --- About --------------------------------------------------- */
.about__lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--ink);
  max-width: 28ch;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
  margin-bottom: var(--s-7);
}
.about__points {
  display: grid;
  gap: var(--s-4);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 64ch;
}
.about__points li {
  position: relative;
  padding-left: var(--s-5);
}
.about__points li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ochre-dark);
  font-weight: 500;
}

/* --- Colophon ------------------------------------------------ */
.colophon {
  background: var(--ink);
  color: var(--paper);
  margin-top: var(--s-10);
}
.colophon__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--s-9) var(--edge) var(--s-8);
}
.colophon__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid oklch(32% 0.012 65);
}
.colophon__label {
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ochre-soft);
  margin-bottom: var(--s-3);
}
.colophon__value {
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.5;
  color: oklch(85% 0.014 75);
  font-variation-settings: "opsz" 28;
}
.colophon__value a {
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  color: var(--paper);
  transition: text-decoration-thickness 200ms var(--ease-out-quart);
}
.colophon__value a:hover { text-decoration-thickness: 2px; }
.colophon__value em {
  font-style: italic;
  font-weight: 500;
  color: var(--paper);
}
.colophon__sign {
  margin-top: var(--s-6);
  font-family: var(--sans);
  font-size: var(--step--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: oklch(60% 0.012 65);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
}
.colophon__sign a { color: oklch(80% 0.014 75); }
.colophon__sign a:hover { color: var(--paper); }
.colophon__sign-sep { color: oklch(38% 0.012 65); }

/* --- Reveal initial state (Motion will animate to final) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
}
[data-split] .split-word {
  display: inline-block;
  white-space: nowrap;
}
[data-split] .split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
}

/* If no JS or reduced motion, show everything immediately */
.no-js [data-reveal],
.no-js [data-split] .split-char,
[data-reveal].is-revealed,
[data-split] .split-char.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-split] .split-char {
    opacity: 1 !important;
    transform: none !important;
  }
  .project__plate img,
  .project__title a,
  .hero__keyword::after {
    transition: none !important;
  }
  .scroll-rule { display: none; }
}

/* --- Print --------------------------------------------------- */
@media print {
  body { background: white; color: black; }
  .scroll-rule, .skip-link { display: none; }
  .colophon { background: white; color: black; border-top: 1px solid #ccc; }
}