/* ==========================================================================
   Clara Almeida — portfolio
   Direction A: "Editorial Thread"
   ========================================================================== */

:root {
  /* Palette */
  --paper:      #F7F4EF;
  --paper-2:    #EFE7DC;
  --paper-3:    #E7E4DE;
  --paper-4:    #E3E0D8;
  --ink:        #191614;
  --ink-2:      #3A342E;
  --ink-3:      #5C544B;
  --ink-4:      #8A8076;
  --rule:       #E4DCD1;
  --rule-2:     #DDD5CA;
  --accent:     #A0563A;
  --accent-dim: #D98E5F;

  /* Type */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:  'Instrument Sans', 'Helvetica Neue', -apple-system, system-ui, sans-serif;

  /* Rhythm */
  --gutter: clamp(20px, 8.33vw, 120px);
  --section: clamp(56px, 8vw, 112px);
  --maxw: 1440px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 0; color: var(--paper); }

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

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */

.serif { font-family: var(--serif); }

.label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.lead {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 620px;
  text-wrap: pretty;
}

.prose {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 720px;
  text-wrap: pretty;
}
.prose + .prose { margin-top: 1.4em; }
.prose strong { font-weight: 500; }

/* Placeholders you still have to fill in. Highlighted so they can't ship by
   accident — delete this rule once the real content is in. */
.todo {
  background: rgba(160, 86, 58, 0.10);
  box-shadow: 0 0 0 2px rgba(160, 86, 58, 0.10);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(18px, 2.2vw, 32px);
}

.wordmark {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: clamp(20px, 2.8vw, 40px);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav a[aria-current="page"] { color: var(--accent); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 24px;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: 14px; border-bottom: 1px solid var(--rule); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 40px);
  padding-block: clamp(64px, 8.5vw, 128px) clamp(56px, 7.5vw, 112px);
}

.status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 86px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  max-width: 1020px;
  text-wrap: pretty;
}
.hero h1 em { font-style: italic; color: var(--accent); }

.page-head {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
  padding-block: clamp(56px, 7.5vw, 112px) clamp(32px, 4vw, 56px);
}
.page-head h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  margin-top: 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 2px;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: background 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--accent); color: var(--paper); }
.btn svg { flex: none; }

.link-u {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.link-u:hover { border-color: var(--accent); }
.link-u--accent { color: var(--accent); border-bottom-color: transparent; }
.link-u--accent:hover { color: var(--ink); }

.link-arrow svg { transition: transform 0.18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.rule-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  padding: 7px 12px;
  border-radius: 2px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Featured projects (home)
   -------------------------------------------------------------------------- */

.projects {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 96px);
  padding-block: clamp(48px, 5vw, 72px) clamp(64px, 8vw, 120px);
}

/* Two columns: the work on the left, what it is on the right. Collapses to
   a single column on narrow screens. */
.project {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.project__media {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
}
.project__media svg,
.project__media img,
.project__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.project:hover .project__media svg,
.project:hover .project__media img,
.project:hover .project__media video { transform: scale(1.02); }

.project__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
}
.project__text { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.project__text h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.1;
}
.project__text p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--ink-3); }

.project__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex: none;
}

/* A card that runs full width instead: what it is on top, the work beneath.
   Suits landscape media, where two columns would only shrink it. */
.project--stacked {
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
}
/* Match the media box to the footage, so nothing is cropped off the sides. */
.project--stacked .project__media { aspect-ratio: 1280 / 1000; }
.project--stacked .project__meta {
  order: 1;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
}
.project--stacked .project__media { order: 2; }
.project--stacked .project__side { align-items: flex-end; }

@media (max-width: 900px) {
  .project { grid-template-columns: 1fr; gap: 28px; }
  .project--stacked .project__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .project--stacked .project__side { align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Work index
   -------------------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 40px; }
.filter {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-2);
  background: none;
  padding: 10px 16px;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.filter:hover { border-color: var(--ink-4); }
.filter[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.index { display: flex; flex-direction: column; padding-bottom: 40px; }

.index__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) minmax(200px, 220px) 40px;
  gap: clamp(16px, 2.2vw, 32px);
  align-items: center;
  border-top: 1px solid var(--rule);
  padding-block: 30px;
  transition: background 0.18s ease;
}
.index__row:first-child { border-top-color: var(--ink); }
.index__row:last-child { border-bottom: 1px solid var(--rule); }
.index__row:hover { background: rgba(160, 86, 58, 0.035); }
.index__row[hidden] { display: none; }

.index__no { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-4); }
.index__row h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.15;
}
.index__row p { font-size: 15px; line-height: 1.55; color: var(--ink-3); }
.index__go { justify-self: end; color: var(--accent); }
.index__go svg { transition: transform 0.18s ease; }
.index__row:hover .index__go svg { transform: translate(2px, -2px); }

@media (max-width: 1024px) {
  .index__row {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    row-gap: 12px;
    align-items: start;
  }
  .index__no { grid-row: 1; }
  .index__row h2 { grid-column: 2; }
  .index__row p { grid-column: 2; }
  .index__row .tags { grid-column: 2; }
  .index__go { grid-column: 3; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   Dark bands
   -------------------------------------------------------------------------- */

.band-dark {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(56px, 7vw, 96px);
}
.band-dark .label { color: var(--ink-4); }
.band-dark a { color: var(--paper); }
.band-dark a:hover { color: var(--accent-dim); }

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.col { display: flex; flex-direction: column; gap: 12px; }
.col p { font-size: clamp(16px, 1.2vw, 17px); line-height: 1.55; }

@media (max-width: 860px) {
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Case study
   -------------------------------------------------------------------------- */

.cs-head { padding-block: clamp(64px, 7vw, 104px) clamp(32px, 4vw, 56px); }
.cs-head h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-block: 24px;
}
.cs-head p {
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 780px;
  text-wrap: pretty;
}

.cs-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 40px);
  border-top: 1px solid var(--rule);
  padding-block: 40px clamp(48px, 5vw, 72px);
}
.cs-meta div { display: flex; flex-direction: column; gap: 8px; }
.cs-meta p { font-size: 16px; line-height: 1.5; }

@media (max-width: 720px) {
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cs-hero {
  width: 100%;
  aspect-ratio: 20 / 11;
  background: var(--paper-2);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.cs-hero svg,
.cs-hero img,
.cs-hero video { width: 100%; height: 100%; object-fit: cover; }

/* Hero as a row of real screens rather than one cropped image. The middle
   one stands tallest; on a narrow screen three phones would be unreadable,
   so only that one stays. */
.cs-hero--screens {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 48px);
  padding: clamp(16px, 3vw, 40px);
}
/* These are transparent PNGs cut off their black ground, so they need no
   clipping — width follows the image's own shape. */
.cs-hero--screens img { height: 72%; width: auto; flex: none; object-fit: contain; }
.cs-hero--screens img.is-lead { height: 96%; }

@media (max-width: 700px) {
  .cs-hero--screens { aspect-ratio: 4 / 5; }
  .cs-hero--screens img:not(.is-lead) { display: none; }
  .cs-hero--screens img.is-lead { height: 92%; }
}

.cs-section {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  padding-bottom: clamp(56px, 6.5vw, 88px);
}
.cs-section__no { display: flex; flex-direction: column; gap: 10px; }
.cs-section__no span {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.cs-section__no h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.12;
}
.cs-section__body { display: flex; flex-direction: column; gap: 28px; }
/* This is a flex column with its own gap, so the adjacent-sibling margin on
   .prose stacks on top of it and double-spaces the paragraphs. */
.cs-section__body .prose + .prose { margin-top: 0; }

@media (max-width: 860px) {
  .cs-section { grid-template-columns: 1fr; }
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}
.stat { display: flex; flex-direction: column; gap: 6px; max-width: 200px; }
.stat b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 3.4vw, 46px);
  line-height: 1.1;
  color: var(--accent);
}
.stat span { font-size: 13px; line-height: 1.5; color: var(--ink-4); }
.stats--plain .stat b { color: var(--ink); }

.findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}

/* Four findings read better as two pairs than as a row of three and an
   orphan. Declared before the narrow-screen rule so that still wins. */
.findings--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.finding {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper-2);
  padding: clamp(20px, 2.2vw, 28px);
}
.finding span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.finding p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 860px) { .findings { grid-template-columns: 1fr; } }

.note { font-size: 14px; line-height: 1.6; color: var(--ink-4); max-width: 720px; }

.pullquote__quote {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.2;
  max-width: 940px;
  text-wrap: pretty;
}

.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.screen { display: flex; flex-direction: column; gap: 20px; }
.screen__frame {
  aspect-ratio: 5 / 6;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.screen:nth-child(2) .screen__frame { background: var(--paper-3); }
.screen:nth-child(3) .screen__frame { background: var(--paper-4); }
.screen__frame svg { width: auto; height: 100%; }
.screen__frame img,
.screen__frame video { width: 100%; height: 100%; object-fit: contain; }
.screen__cap { display: flex; flex-direction: column; gap: 8px; }
.screen__cap span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.screen__cap p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 860px) { .screens { grid-template-columns: 1fr; } }

/* Wide variant, for desktop-app screens that would be cropped by the
   portrait phone frame. */
.screens--wide .screen__frame { aspect-ratio: 16 / 10; padding: clamp(16px, 1.6vw, 24px); }
.screens--wide .screen__frame svg { width: 100%; height: auto; }

/* A portrait demo inside a landscape card. The recording is a phone mockup
   on a black ground; .phone matches the mockup's aspect and corner radius so
   the black corners are clipped and the card's own paper shows through.
   pointer-events lets the click reach the link underneath. */
.project__media--stage {
  /* portrait content — a tall box wastes far less room than a wide one */
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  /* let the phone sit in the band rather than fill it edge to edge */
  padding: clamp(20px, 3.5vw, 48px);
}
.project__media--stage .phone {
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.project:hover .project__media--stage .phone { transform: scale(1.02); }
.project:hover .project__media--stage video { transform: none; }
.project__media video { pointer-events: none; }

.phone {
  display: block;
  aspect-ratio: 480 / 1002;
  border-radius: 16.5% / 7.9%;
  overflow: hidden;
}
.phone video,
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* the case-study screen frames hold a phone still rather than a wireframe */
.screen__frame .phone { height: 100%; }

/* Standalone demo figure in a case study. */
.demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding-bottom: clamp(56px, 7vw, 96px);
}
.demo__frame {
  width: min(300px, 74%);
  aspect-ratio: 480 / 1002;
  border-radius: 16.5% / 7.9%;
  overflow: hidden;
}
.demo__frame video { width: 100%; height: 100%; object-fit: cover; }

/* Sound control for demos that carry audio. Autoplay is only allowed while
   muted, so the video starts silent and this is the way in. */
.demo__frame { position: relative; }
.sound-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(25, 22, 20, 0.72);
  color: var(--paper);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease;
}
.sound-toggle:hover { background: rgba(25, 22, 20, 0.92); }
.sound-toggle svg { flex: none; }
.demo__cap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  text-align: center;
}
.demo__cap span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.demo__cap p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Desktop screenshots shown at a size you can actually read, one per row,
   with no frame around them — the app already has its own edges. */
.shots {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.shot { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  background: var(--paper-2);
}
.shot__cap { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.shot__cap span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.shot__cap p { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* A landscape demo (a desktop app) rather than a phone. */
.demo--wide .demo__frame {
  width: min(880px, 100%);
  aspect-ratio: 1280 / 1000;
  border-radius: 8px;
}

/* Demos shot on a camera rather than captured from a screen. */
.demo--wide.demo--16x9 .demo__frame { aspect-ratio: 16 / 9; }

/* A hero that is one wide screenshot, shown whole on the band rather than
   cropped to fill it. */
.cs-hero--shot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 48px);
}
.cs-hero--shot img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(25, 22, 20, 0.10);
}

.next-project {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--paper-2);
  padding-block: clamp(40px, 4.5vw, 64px);
}
.next-project h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(56px, 7.5vw, 112px) clamp(56px, 6.5vw, 96px);
}
.about-top h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
  text-wrap: pretty;
}
.portrait { display: flex; flex-direction: column; gap: 20px; }
.portrait__frame { aspect-ratio: 23 / 28; background: var(--paper-2); }
.portrait__frame svg,
.portrait__frame img,
.portrait__frame video { width: 100%; height: 100%; object-fit: cover; }
.portrait p { font-size: 13px; line-height: 1.6; color: var(--ink-4); }

@media (max-width: 900px) {
  .about-top { grid-template-columns: 1fr; }
  .portrait__frame { max-width: 420px; }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 5vw, 80px);
  padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px);
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 20px; } }

.pillars h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
}
.band-dark .pillars p { color: #D6CCBE; }

.toolkit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.2vw, 48px); }
.toolkit .col span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.toolkit .col p { font-size: 16px; line-height: 1.8; color: var(--ink-2); }
@media (max-width: 860px) { .toolkit { grid-template-columns: 1fr; } }

.timeline { display: flex; flex-direction: column; }
.timeline__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-block: 22px;
}
.timeline__row:last-child { border-bottom: 1px solid var(--rule); }
.timeline__row p { font-size: 17px; line-height: 1.5; }
.timeline__row span { font-size: 15px; color: var(--ink-4); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { padding-block: clamp(56px, 7vw, 96px) 32px; }
.site-footer .wrap > .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 64px);
}
.footer-cta { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.footer-cta h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.05;
  text-wrap: pretty;
}
.footer-cta a { font-size: clamp(16px, 1.3vw, 17px); color: var(--accent); }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 32px);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.colophon {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

/* Scoped to .js so content is never hidden when scripting is off. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

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

/* the header is sticky, so anchored targets need clearance under it */
:target { scroll-margin-top: 100px; }

/* Digital content: the phone composite is 2259x1332, so match the box to it
   rather than letting a 3:2 crop shave the outer two phones. */
.project__media--phones { aspect-ratio: 2259 / 1332; background: #fff; }
.project__media--phones img { object-fit: contain; }