/* ==========================================================================
   Self-hosted EB Garamond — per the design brief's explicit
   no-third-party-cookie / no-Google-Fonts-CDN-in-production stance (the
   prototype loads it from fonts.googleapis.com for convenience only).
   Only the two styles actually used (regular + italic, weight 400) and
   the latin/latin-ext subsets (covers English + French) — fetched once
   from Google's own CDN, the standard way to self-host these, and
   committed under assets/fonts/.
   ========================================================================== */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Design tokens — see _design-reference/README.md "Design Tokens".
   Sharp corners and no shadows anywhere, deliberately, throughout.
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-ink: #141414;
  --color-grey: #6c6c6c;
  --color-muted: #a0a0a0;
  --color-hairline: #e6e6e6;
  --color-bg-alt: #fafafa;
  --placeholder-gradient: linear-gradient(135deg, #ececec, #e2e2e2);

  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;

  --sidebar-width: 264px;
  --pad-h: clamp(20px, 4vw, 56px);
  --pad-section-v: clamp(36px, 5vw, 76px);
  --pad-hero-v-top: clamp(52px, 8vh, 110px);
  --pad-hero-v-bottom: clamp(40px, 6vw, 80px);
  --subpage-pad-top: 53px;

  --row-gap: 18px;

  /* Client logos are supplied as solid black on transparent PNGs — this
     is the one number to tune for a lighter/darker grey (see
     .hero__logos img). 0 = invisible, 1 = solid black. */
  --logo-opacity: 0.35;
}

@media (max-width: 899px) {
  :root {
    --row-gap: 3px;
  }
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

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

button {
  font-family: inherit;
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ==========================================================================
   Sidebar / mobile topbar / scrim
   ========================================================================== */

.wordmark {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.05;
  padding: 0 26px 24px;
  cursor: pointer;
  display: block;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: 55;
  background: var(--color-bg);
  border-right: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  padding: 26px 0 20px;
  overflow-y: auto;
}

.sidebar__nav {
  flex: 1;
  padding: 0 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__nav-item {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 4px 0;
  font-size: 12.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition: color 0.18s;
  color: var(--color-grey);
  display: block;
}

.sidebar__nav-item:hover,
.sidebar__nav-item.is-active {
  color: var(--color-ink);
}

.sidebar__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 26px 0;
  margin-top: 12px;
  border-top: 1px solid var(--color-hairline);
}

.lang-switch {
  display: flex;
}

.lang-switch a {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  color: var(--color-muted);
}

.lang-switch a + a {
  border-left: 1px solid var(--color-hairline);
}

.lang-switch a.is-active {
  color: var(--color-ink);
}

.socials {
  display: flex;
  gap: 12px;
  align-items: center;
}

.socials a {
  color: var(--color-muted);
  transition: color 0.18s;
}

.socials a:hover {
  color: var(--color-ink);
}

.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-hairline);
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad-h);
}

.topbar .wordmark {
  padding: 0;
  font-size: 19px;
}

.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.hamburger span {
  width: 22px;
  height: 1px;
  background: var(--color-ink);
  display: block;
}

.scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: 54;
}

.content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

@media (max-width: 899px) {
  .topbar {
    display: flex;
  }

  .sidebar {
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  body.menu-open .sidebar {
    transform: translateX(0);
  }

  body.menu-open .scrim {
    display: block;
  }

  .content {
    margin-left: 0;
  }
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.1;
  margin: 0 0 20px;
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0;
}

.h2--lg {
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.12;
}

.h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 12px;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-grey);
  font-weight: 500;
  margin-bottom: 14px;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--color-ink);
  margin: 0 0 28px;
}

.body-copy p {
  font-size: 14.5px;
  line-height: 1.85;
  margin: 0 0 18px;
  color: var(--color-ink);
}

.body-copy p:last-child {
  margin-bottom: 0;
}

.caption {
  font-size: 12px;
  color: var(--color-grey);
  margin-top: 8px;
}

/* ==========================================================================
   Links & buttons
   ========================================================================== */

.link-underline {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 3px;
  transition: opacity 0.18s;
}

.link-underline:hover {
  opacity: 0.6;
  color: var(--color-ink);
}

.btn-outline {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: none;
  border: 1px solid var(--color-ink);
  padding: 13px 22px;
  transition: all 0.18s;
  cursor: pointer;
  font-family: inherit;
}

.btn-outline:hover {
  background: var(--color-ink);
  color: var(--color-bg);
}

/* ==========================================================================
   Placeholder images
   ========================================================================== */

.placeholder-image {
  background: var(--placeholder-gradient);
  position: relative;
  overflow: hidden;
  width: 100%;
}

.placeholder-image--portrait {
  aspect-ratio: 4 / 5;
}

.placeholder-image--wide {
  aspect-ratio: 16 / 9;
}

.placeholder-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.placeholder-image__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.6vw, 40px);
  color: #fff;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
  padding: var(--pad-hero-v-top) var(--pad-h) var(--pad-hero-v-bottom);
}

.hero__copy {
  max-width: 560px;
}

.hero__subtitle {
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-grey);
  margin: 0 0 26px;
  max-width: 460px;
}

.hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 104px;
}

.hero__logos img {
  height: 30px;
  width: auto;
  /* grayscale(1) is a no-op on true black/transparent PNGs, kept as a
     guard in case a future logo isn't perfectly monochrome — opacity
     (--logo-opacity, in :root) is what actually turns black into grey. */
  filter: grayscale(1);
  opacity: var(--logo-opacity);
}

.hero__logo-placeholder {
  height: 30px;
  width: 104px;
  background: var(--placeholder-gradient);
  filter: grayscale(1);
  opacity: 0.75;
}

@media (max-width: 899px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero__logos {
    margin-top: 40px;
    margin-bottom: 16px;
  }
}

/* ==========================================================================
   Home — parity section
   ========================================================================== */

.parity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--color-hairline);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}

.parity-grid__col {
  background: var(--color-bg);
  padding: clamp(34px, 4.5vw, 60px) var(--pad-h);
}

.parity-grid__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 32px);
  margin: 0 0 14px;
}

.parity-grid__desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-grey);
  margin: 0 0 22px;
  max-width: 420px;
}

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

/* ==========================================================================
   Section header (title + trailing link)
   ========================================================================== */

.section-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 14px;
}

.section-header--no-border {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 22px;
}

section {
  padding: var(--pad-section-v) var(--pad-h);
}

/* A section directly following another spacing-contributing block (a
   plain <section>, or a div that already carries its own bottom
   padding) would otherwise stack its own top padding on top of that
   block's bottom padding — visibly too much dead space between them.
   Applied on a case-by-case basis to the specific elements that follow
   such a block, not globally (some sections deliberately do want their
   full top padding, e.g. the first one after a full-bleed grid). */
.section--tight-top {
  padding-top: clamp(20px, 3vw, 32px);
}

/* ==========================================================================
   Services teaser grid (home)
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
}

.service-card {
  padding: 30px 26px 34px 0;
  cursor: pointer;
}

.service-card__number {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: 16px;
}

.service-card__desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-grey);
  margin: 0;
}

@media (max-width: 899px) {
  .services-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .service-card {
    padding: 0;
  }
}

/* ==========================================================================
   3-column row format — press / research / essay rows.
   Critical detail (see README): real grid columns that never wrap into
   flowing text. field/category col · year col (own column) · title col.
   ========================================================================== */

.row-3col {
  display: grid;
  grid-template-columns: 120px 56px 1fr;
  gap: var(--row-gap);
  padding: 11px 0;
  border-top: 1px solid var(--color-hairline);
  font-size: 14px;
  align-items: baseline;
}

.row-3col--press-teaser {
  grid-template-columns: 104px 40px 60px 1fr;
}

.row-3col--press-full {
  grid-template-columns: 110px 40px 1fr;
}

@media (max-width: 899px) {
  .row-3col,
  .row-3col--press-teaser,
  .row-3col--press-full {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 4px;
  }

  .row-3col__main {
    flex-basis: 100%;
  }
}

.row-3col__field,
.row-3col__year,
.row-3col__language {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.row-3col__year {
  font-variant-numeric: tabular-nums;
}

.row-3col--press-teaser .row-3col__field,
.row-3col--press-teaser .row-3col__year,
.row-3col--press-full .row-3col__field {
  font-size: 11px;
}

.row-3col--press-teaser .row-3col__year {
  font-variant-numeric: tabular-nums;
}

.row-3col__main {
  line-height: 1.5;
}

.row-3col__title {
  color: var(--color-ink);
  font-size: 15px;
}

.row-3col__venue {
  color: var(--color-grey);
  font-style: italic;
}

.row-3col__outlet {
  color: var(--color-ink);
}

.row-3col__press-title {
  color: var(--color-grey);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 15px;
}

.row-3col__earlier-year {
  color: var(--color-muted);
}

/* ==========================================================================
   Press page — year groups
   ========================================================================== */

.press-group {
  margin-bottom: 30px;
}

.press-group__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* ==========================================================================
   CTA band / footer note (home)
   ========================================================================== */

.cta-band {
  padding: clamp(52px, 8vw, 120px) var(--pad-h);
  border-top: 1px solid var(--color-hairline);
}

.cta-band__line {
  margin: 0 0 24px;
  max-width: 640px;
}

.footer-note {
  padding: 24px var(--pad-h);
  border-top: 1px solid var(--color-hairline);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ==========================================================================
   Subpage heading offset
   ========================================================================== */

.subpage-head {
  padding: var(--subpage-pad-top) var(--pad-h) 0;
}

@media (max-width: 899px) {
  .subpage-head {
    padding-top: clamp(48px, 6vw, 88px);
  }
}

.subpage-head .h2 {
  margin: 0 0 clamp(20px, 3vw, 34px);
}

/* The generic `section` rule below adds its own top padding, which
   stacked on top of the h2's own bottom margin above left too much dead
   space between a subpage's title and its body content. The title's
   own spacing already does that job here. */
.subpage-head + section {
  padding-top: 0;
}

/* ==========================================================================
   Profile
   ========================================================================== */

.profile-media {
  margin: 44px 0 40px;
}

.testimonial {
  padding: 26px 0;
  border-top: 1px solid var(--color-hairline);
}

.testimonial:last-of-type {
  border-bottom: 1px solid var(--color-hairline);
}

.testimonial__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 12px;
}

.testimonial__by {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-grey);
}

/* ==========================================================================
   Services page
   ========================================================================== */

.service-block {
  padding: 28px 0;
  border-top: 1px solid var(--color-hairline);
}

.service-block:last-of-type {
  border-bottom: 1px solid var(--color-hairline);
}

.service-block__number {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin-bottom: 10px;
}

.service-block__desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-grey);
  margin: 0 0 16px;
}

.service-block__mission {
  font-size: 13px;
  color: var(--color-grey);
  margin-bottom: 16px;
}

.service-block__mission b {
  color: var(--color-ink);
  font-weight: 600;
}


.talk-block {
  padding: 0 0 26px;
}

.talk-block__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-grey);
  margin: 0;
}

.talk-block__yt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-grey);
  border-bottom: 1px solid var(--color-hairline);
  padding-bottom: 2px;
  margin-top: 12px;
  display: inline-block;
  transition: color 0.18s;
}

.talk-block__yt:hover {
  color: var(--color-ink);
}

.custom-note {
  font-size: 13px;
  color: var(--color-grey);
  max-width: 660px;
  margin-top: 6px;
}

.custom-note b {
  color: var(--color-ink);
  font-weight: 600;
}

/* ==========================================================================
   Essay detail
   ========================================================================== */

.essay-head {
  padding: var(--subpage-pad-top) var(--pad-h) 0;
}

@media (max-width: 899px) {
  .essay-head {
    padding-top: clamp(48px, 6vw, 88px);
  }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-grey);
  transition: color 0.18s;
}

.back-link:hover {
  color: var(--color-ink);
}

.back-link__arrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
}

.essay-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.essay-meta {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 26px;
}

.essay-meta span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.essay-meta .essay-meta__year {
  font-variant-numeric: tabular-nums;
}

.essay-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-ink);
  margin: 0 0 28px;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-field {
  display: block;
  width: 100%;
  border: 1px solid var(--color-hairline);
  padding: 13px 14px;
  font-size: 14px;
  color: var(--color-ink);
  margin-bottom: 2px;
  background: var(--color-bg);
  font-family: inherit;
}

.contact-field::placeholder {
  color: var(--color-muted);
}

.contact-field:focus {
  outline: none;
  border-color: var(--color-ink);
}

textarea.contact-field {
  resize: vertical;
  min-height: 140px;
}

.contact-form {
  max-width: 660px;
}

.contact-notice {
  font-size: 13px;
  padding: 13px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--color-hairline);
}

.contact-notice--success {
  border-color: var(--color-ink);
}

.contact-legal {
  max-width: 660px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 22px;
  border-top: 1px solid var(--color-hairline);
}

.contact-legal p {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--color-grey);
  margin: 0;
}

/* Honeypot spam-trap field — hidden from sighted/mouse users, but still
   in the DOM and tab order removed, unlike display:none which some bots
   already know to skip. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Generic content width helpers
   ========================================================================== */

.measure-narrow {
  max-width: 660px;
}

.measure-wide {
  max-width: 960px;
}

.measure-media {
  max-width: 820px;
}