/* ============================================================
   ΑΝΤΩΝΙΟΥ & ΑΝΑΓΝΩΣΤΟΠΟΥΛΟΥ
   Tokens — light is the base; dark overrides tokens only.
   ============================================================ */

    /* Self-hosted fonts (were Google Fonts, see README). Commissioner is
       variable, so one file covers weights 300-600. */
    @font-face {
      font-family: "Commissioner";
      font-style: normal;
      font-weight: 300 600;
      font-display: swap;
      src: url("../fonts/commissioner-greek.woff2") format("woff2");
      unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    }

    @font-face {
      font-family: "Commissioner";
      font-style: normal;
      font-weight: 300 600;
      font-display: swap;
      src: url("../fonts/commissioner-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: "GFS Didot";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("../fonts/gfsdidot-greek.woff2") format("woff2");
      unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
    }

    @font-face {
      font-family: "GFS Didot";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("../fonts/gfsdidot-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      /* Palette: cream/teal/beige (#F1EEDC/#BED7DC/#E5DDC5/#B3C8CF).
         ink/ink-soft/muted/accent are darker shades of the teal, tuned
         for WCAG AA on the cream ground (accent/ground 4.92:1). */
      --ground: #F1EEDC;
      --paper: #F6F4E8;
      --paper-2: #E5DDC5;
      --ink: #272C2E;
      --ink-soft: #3F4648;
      --muted: #515A5D;
      --line: #BED7DC;
      --line-soft: #DAE4DC;
      --accent: #5D686C;
      --accent-ink: #F6F4E8;
      --accent-wash: #E9E3CD;
      --grain: .05;
      --grain-blend: multiply;
      --shadow: 0 1px 2px rgba(42, 35, 33, .05), 0 12px 40px -18px rgba(42, 35, 33, .24);
      --mark: url("../images/mark-512.png");
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        /* Dark base #CAD1CA (teal + beige mix), darkened via color-mix. */
        --ground: color-mix(in srgb, #CAD1CA 35%, black);
        --paper: color-mix(in srgb, #CAD1CA 55%, black);
        --paper-2: #CAD1CA;
        --ink: #F6F4E8;
        --ink-soft: #EBEBE0;
        --muted: #BED7DC;
        --line: color-mix(in srgb, #CAD1CA 45%, black);
        --line-soft: color-mix(in srgb, #CAD1CA 60%, black);
        --accent: #B6BBBD;
        --accent-ink: color-mix(in srgb, #CAD1CA 20%, black);
        --accent-wash: color-mix(in srgb, #B6BBBD 30%, black);
        --grain: .055;
        --grain-blend: screen;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 50px -22px rgba(0, 0, 0, .75);
      }
    }

    :root[data-theme="dark"] {
      --ground: color-mix(in srgb, #CAD1CA 35%, black);
      --paper: color-mix(in srgb, #CAD1CA 55%, black);
      --paper-2: #CAD1CA;
      --ink: #F6F4E8;
      --ink-soft: #EBEBE0;
      --muted: #BED7DC;
      --line: color-mix(in srgb, #CAD1CA 45%, black);
      --line-soft: color-mix(in srgb, #CAD1CA 60%, black);
      --accent: #B6BBBD;
      --accent-ink: color-mix(in srgb, #CAD1CA 20%, black);
      --accent-wash: color-mix(in srgb, #B6BBBD 30%, black);
      --grain: .055;
      --grain-blend: screen;
      --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 50px -22px rgba(0, 0, 0, .75);
    }

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

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

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto
      }
    }

    body {
      margin: 0;
      background: var(--ground);
      color: var(--ink);
      font-family: "Commissioner", "Helvetica Neue", Arial, sans-serif;
      font-size: clamp(1rem, .97rem + .18vw, 1.0625rem);
      font-weight: 300;
      line-height: 1.72;
      letter-spacing: .004em;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* material: fine grain over the whole page */
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: var(--grain);
      mix-blend-mode: var(--grain-blend);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    }

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

    a {
      color: inherit
    }

    :where(a, button, summary, input, textarea, select):focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 2px;
    }

    ::selection {
      background: var(--accent);
      color: var(--accent-ink)
    }

    /* ---------- type roles ---------- */
    .display {
      font-family: "GFS Didot", "Didot", "Iowan Old Style", Georgia, serif;
      font-weight: 400;
      line-height: .94;
      letter-spacing: -.005em;
      text-wrap: balance;
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0;
      font-weight: 400;
      text-wrap: balance
    }

    h2.display {
      font-size: clamp(2rem, 1.2rem + 3.4vw, 3.35rem);
      line-height: 1.02
    }

    h3 {
      font-size: 1.0625rem;
      font-weight: 500;
      letter-spacing: .005em;
      line-height: 1.45
    }

    p {
      margin: 0
    }

    .lede {
      font-size: clamp(1.15rem, 1.02rem + .62vw, 1.5rem);
      line-height: 1.55;
      font-weight: 300;
      color: var(--ink-soft);
      letter-spacing: -.005em;
    }

    .label {
      font-size: .6875rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: var(--muted);
      line-height: 1.4;
    }

    .prose {
      max-width: 63ch;
      display: flex;
      flex-direction: column;
      gap: 1.15em;
      color: var(--ink-soft)
    }

    .prose strong {
      font-weight: 500;
      color: var(--ink)
    }

    /* ---------- layout ---------- */
    .wrap {
      width: min(1180px, 100% - 2.5rem);
      margin-inline: auto
    }

    @media (min-width:900px) {
      .wrap {
        width: min(1180px, 100% - 6rem)
      }
    }

    section {
      position: relative
    }

    .band {
      padding-block: clamp(4.5rem, 10vw, 8.5rem);
      border-top: 1px solid var(--line-soft)
    }

    .split {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.25rem
    }

    @media (min-width:900px) {
      .split {
        grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
        gap: clamp(2.5rem, 5vw, 5rem)
      }

      .split>.gutter {
        position: sticky;
        top: calc(var(--nav-h) + 2.5rem);
        align-self: start
      }
    }

    .stack {
      display: flex;
      flex-direction: column
    }

    .gutter {
      display: flex;
      flex-direction: column;
      gap: .6rem
    }

    .gutter .rule {
      width: 2.25rem;
      height: 1px;
      background: var(--accent);
      opacity: .55
    }

    /* ---------- nav ---------- */
    :root {
      --nav-h: 68px
    }

    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 100;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      background: color-mix(in srgb, var(--ground) 82%, transparent);
      backdrop-filter: blur(14px) saturate(1.1);
      -webkit-backdrop-filter: blur(14px) saturate(1.1);
      border-bottom: 1px solid transparent;
      transition: border-color .4s ease, background .4s ease;
    }

    .nav[data-scrolled="true"] {
      border-bottom-color: var(--line-soft)
    }

    /* ---------- reading-progress line under the nav (see js/main.js) ---------- */
    .nav__progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: 0 50%;
      opacity: .85;
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .nav__progress {
        display: none
      }
    }

    .nav__inner {
      display: flex;
      align-items: center;
      gap: 1.5rem
    }

    @media (min-width:1240px) {
      .nav__inner {
        /* 3 equal-ish columns: logo stays left, center group (tagline +
           menu + button) centers on the full nav width via the invisible
           3rd column, independent of logo width */
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1rem
      }
    }

    .nav__mark {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      /* nudge toward the edge, as is conventional for logos */
      margin-left: -.5rem;
      text-decoration: none
    }

    @media (min-width:1240px) {
      .nav__mark {
        grid-column: 1;
        justify-self: start
      }
    }

    /* ---------- center group: tagline + menu + button ---------- */
    .nav__center {
      display: flex;
      align-items: center;
      gap: 2rem;
      min-width: 0;
      /* pushed right on mobile/tablet, next to the logo which stays left */
      margin-left: auto;
    }

    @media (min-width:1240px) {
      .nav__center {
        grid-column: 2;
        justify-self: center;
        margin-left: 0
      }
    }

    .nav__mark-text {
      display: none;
      /* Didot is cut for Greek; Latin uses Commissioner (body font) instead,
         as a quiet caption next to the mark. Links to home, like the logo. */
      font-family: "Commissioner", "Helvetica Neue", Arial, sans-serif;
      font-weight: 400;
      font-size: .9375rem;
      letter-spacing: .01em;
      color: var(--ink-soft);
      white-space: nowrap;
      text-decoration: none;
      transition: color .25s ease;
    }

    .nav__mark-text:hover {
      color: var(--ink)
    }

    @media (min-width:560px) {
      .nav__mark-text {
        display: inline
      }
    }

    .nav__mark .amp {
      color: var(--accent);
      padding-inline: .12em
    }

    /* ---------- logo mark ---------- */
    .logo {
      height: 2.6rem;
      aspect-ratio: 1;
      flex: 0 0 auto;
      display: block;
      background: var(--mark) center/contain no-repeat;
      /* slight lift for optical alignment with the rest of the nav */
      transform: translateY(-3px);
    }

    .logo--ghost {
      height: 3.1rem;
      opacity: .3
    }

    /* footer watermark */
    .footer {
      position: relative;
      overflow: hidden
    }

    .footer__watermark {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      right: -5rem;
      bottom: -6rem;
      width: min(28rem, 60vw);
      aspect-ratio: 1;
      display: block;
      background: var(--mark) center/contain no-repeat;
      opacity: .07;
    }

    @media (min-width:900px) {
      .footer__watermark {
        right: -5rem;
        bottom: -7rem
      }
    }

    .footer .wrap {
      position: relative;
      z-index: 1
    }

    .nav__links {
      display: none;
      gap: 2rem;
      align-items: center
    }

    @media (min-width:1240px) {
      .nav__links {
        display: flex
      }
    }

    .nav__links a {
      text-decoration: none;
      font-size: .8125rem;
      letter-spacing: .09em;
      text-transform: uppercase;
      font-weight: 400;
      color: var(--muted);
      position: relative;
      padding-block: .35rem;
      /* optical nudge: Commissioner caps sit taller than Didot's */
      top: 2px;
      white-space: nowrap;
      transition: color .25s ease;
    }

    .nav__links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: .1rem;
      height: 1px;
      background: var(--accent);
      transition: right .35s cubic-bezier(.2, .7, .2, 1);
    }

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

    .nav__links a:hover::after {
      right: 0
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      font-family: inherit;
      font-size: .8125rem;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: .85rem 1.4rem;
      border-radius: 999px;
      text-decoration: none;
      cursor: pointer;
      border: 1px solid var(--accent);
      background: var(--accent);
      color: var(--accent-ink);
      transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, background .25s ease, color .25s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 70%, transparent)
    }

    .btn:active {
      transform: translateY(0) scale(.97);
      transition-duration: .12s
    }

    .btn--ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line)
    }

    .btn--ghost:hover {
      border-color: var(--accent);
      color: var(--accent);
      box-shadow: none
    }

    .btn--sm {
      padding: .7rem 1.15rem;
      font-size: .75rem
    }

    .menu-btn {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 44px;
      height: 38px;
      padding: 0 9px;
      background: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      cursor: pointer;
      transition: transform .15s ease;
    }

    @media (min-width:1240px) {
      .menu-btn {
        display: none
      }
    }

    .menu-btn span {
      display: block;
      height: 1px;
      background: var(--ink);
      transition: transform .35s ease, opacity .25s ease
    }

    .menu-btn[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(3px) rotate(45deg)
    }

    .menu-btn[aria-expanded="true"] span:nth-child(2) {
      opacity: 0
    }

    .menu-btn[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-3px) rotate(-45deg)
    }

    .drawer {
      position: fixed;
      inset: var(--nav-h) 0 auto 0;
      z-index: 99;
      background: var(--paper);
      border-bottom: 1px solid var(--line-soft);
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
    }

    .drawer[data-open="true"] {
      grid-template-rows: 1fr
    }

    .drawer__inner {
      overflow: hidden
    }

    .drawer nav {
      display: flex;
      flex-direction: column;
      padding-block: 1.25rem 2rem
    }

    .drawer a {
      text-decoration: none;
      padding-block: .85rem;
      border-bottom: 1px solid var(--line-soft);
      font-size: 1.05rem;
      letter-spacing: .01em;
    }

    .drawer a:last-child {
      border-bottom: 0
    }

    /* ---------- hero ---------- */
    .hero {
      min-height: 100svh;
      padding-top: calc(var(--nav-h) + 3rem);
      padding-bottom: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    @media (max-width:640px) {
      .hero {
        min-height: 92svh;
        padding-top: calc(var(--nav-h) + 1.5rem);
        padding-bottom: 2rem
      }
    }

    /* ---------- soft mouse-follow glow ---------- */
    .glow-layer {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .glow-layer i {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 40rem;
      aspect-ratio: 1;
      margin: -20rem 0 0 -20rem;
      border-radius: 50%;
      background: radial-gradient(closest-side,
          color-mix(in srgb, var(--accent) 9%, transparent),
          transparent 70%);
      filter: blur(2px);
      opacity: 0;
      transition: opacity 1.1s ease;
      will-change: transform;
    }

    .glow-layer.on i {
      opacity: 1
    }

    @media (pointer: coarse) {
      .glow-layer {
        display: none
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .glow-layer {
        display: none
      }
    }

    .hero__glow {
      position: absolute;
      z-index: 0;
      pointer-events: none;
      width: min(120vw, 1400px);
      aspect-ratio: 1;
      left: 50%;
      top: 38%;
      transform: translate(-50%, -50%);
      background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
      opacity: .6;
      filter: blur(6px);
    }

    .hero__inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: clamp(2rem, 5vw, 3.5rem)
    }

    .wordmark {
      font-size: clamp(1.6rem, .2rem + 7.4vw, 7rem);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .wordmark .row {
      display: block
    }

    .wordmark .amp {
      color: var(--accent);
      padding-left: .16em
    }

    .hero__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: .75rem 1.5rem;
      padding-top: 1.4rem;
      border-top: 1px solid var(--line);
    }

    .hero__meta .dot {
      color: var(--accent);
      opacity: .7
    }

    /* ---------- title reveal: ink wipes in from the left ---------- */
    .js .wordmark {
      opacity: 0
    }

    .js .wordmark.ready {
      opacity: 1
    }

    .js .wordmark.ready .row {
      -webkit-mask-image: linear-gradient(95deg, #000 34%, rgba(0, 0, 0, .55) 52%, transparent 66%);
      mask-image: linear-gradient(95deg, #000 34%, rgba(0, 0, 0, .55) 52%, transparent 66%);
      -webkit-mask-size: 260% 100%;
      mask-size: 260% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      animation: inkIn 1.15s cubic-bezier(.22, .75, .2, 1) both;
    }

    .js .wordmark.ready .row:nth-child(2) {
      animation-delay: .19s
    }

    @keyframes inkIn {
      from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
        transform: translateY(.14em);
      }

      to {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
        transform: none;
      }
    }

    /* the & shifts to accent color after the ink wipes past it */
    .js .wordmark.ready .amp {
      animation: ampHue .7s ease .62s both
    }

    @keyframes ampHue {
      from {
        color: var(--ink)
      }

      to {
        color: var(--accent)
      }
    }

    /* the rest of the hero enters after the name */
    .js .hero .reveal.d2.in {
      transition-delay: .95s
    }

    .js .hero .reveal.d3.in {
      transition-delay: 1.1s
    }

    @media (max-width:640px) {
      .hero__meta {
        flex-direction: column;
        gap: .45rem
      }

      .hero__meta .dot {
        display: none
      }
    }

    .hero__bottom {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      align-items: end;
    }

    @media (min-width:820px) {
      .hero__bottom {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3rem
      }
    }

    .hero__claim {
      max-width: 58ch
    }

    .hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem
    }

    /* ---------- statement ---------- */
    .statement {
      font-size: clamp(1.4rem, .9rem + 2.1vw, 2.35rem);
      line-height: 1.32;
      letter-spacing: -.012em;
      font-weight: 300;
      max-width: 22ch
    }

    .statement em {
      font-family: "GFS Didot", "Didot", Georgia, serif;
      font-style: normal;
      color: var(--accent)
    }

    /* ---------- services ---------- */
    .services {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--line-soft)
    }

    .service {
      display: grid;
      grid-template-columns: 1fr;
      gap: .5rem 2rem;
      padding-block: 1.6rem;
      border-bottom: 1px solid var(--line-soft);
      position: relative;
    }

    @media (min-width:760px) {
      .service {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: baseline;
        padding-block: 1.9rem;
        /* fixed indent: hover no longer shifts the text */
        padding-left: 1rem
      }
    }

    .service::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--accent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .45s cubic-bezier(.2, .7, .2, 1);
    }

    .service:hover::before {
      transform: scaleY(1)
    }

    .service h3 {
      font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
      font-weight: 400;
      font-family: "GFS Didot", "Didot", Georgia, serif;
      letter-spacing: .005em
    }

    .service p {
      color: var(--muted);
      font-size: .9875rem;
      line-height: 1.65
    }

    /* ---------- people ---------- */
    .people {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(2.5rem, 5vw, 3.5rem)
    }

    .person {
      display: flex;
      flex-direction: column;
      gap: 1.5rem
    }

    @media (min-width:820px) {
      .people {
        grid-template-columns: 1fr 1fr
      }

      @supports (grid-template-rows: subgrid) {
        .people {
          grid-template-rows: auto auto auto auto;
          align-items: stretch
        }

        .person {
          display: grid;
          grid-row: span 4;
          grid-template-rows: subgrid
        }
      }
    }

    /* plate spans the full column so photo and name share the same
       left edge and center */
    .person .plate {
      width: 100%;
      align-self: start;
    }

    .plate {
      margin: 0;
      /* figure has a default 1em 40px margin from the browser */
      position: relative;
      aspect-ratio: 4/5;
      border-radius: 2px;
      overflow: hidden;
      background:
        radial-gradient(110% 80% at 22% 8%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 65%),
        linear-gradient(158deg,
          color-mix(in srgb, var(--accent) 20%, var(--paper)) 0%,
          color-mix(in srgb, var(--accent) 7%, var(--paper-2)) 58%,
          var(--paper-2) 100%);
      border: 1px solid var(--line-soft);
      display: grid;
      place-items: center;
    }

    .plate picture {
      display: contents
    }

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

    .plate .ini {
      font-family: "GFS Didot", "Didot", Georgia, serif;
      font-size: clamp(4.5rem, 11vw, 8rem);
      color: color-mix(in srgb, var(--accent) 72%, var(--ink));
      opacity: .5;
      line-height: 1;
      user-select: none;
    }

    .plate figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: .7rem .9rem;
      font-size: .6875rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      background: linear-gradient(transparent, color-mix(in srgb, var(--paper) 92%, transparent));
    }

    /* ---------- photo is a button: click opens the full bio in a dialog ---------- */
    .person-plate {
      appearance: none;
      -webkit-appearance: none;
      font: inherit;
      text-align: inherit;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .person-plate .bio-hint {
      position: absolute;
      right: .7rem;
      bottom: .7rem;
      padding: .4rem .75rem;
      font-size: .625rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--paper);
      background: color-mix(in srgb, var(--ink) 55%, transparent);
      border-radius: 999px;
      transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s ease;
    }

    .person-plate:hover .bio-hint,
    .person-plate:focus-visible .bio-hint {
      background: var(--accent);
      transform: translateY(-2px);
    }

    @media (prefers-reduced-motion: reduce) {
      .person-plate .bio-hint {
        transition: none
      }
    }

    .person__more {
      align-self: flex-start;
      margin: .2rem 0 0;
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      font-size: .8125rem;
      font-weight: 500;
      color: var(--accent);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: .2em;
    }

    .person__more:hover {
      color: var(--ink)
    }

    /* ---------- full bio dialog ---------- */
    .bio-dialog {
      width: min(640px, 100% - 2.5rem);
      max-height: min(82vh, 760px);
      margin: auto;
      padding: 0;
      border: 1px solid var(--line-soft);
      border-radius: 4px;
      background: var(--paper);
      color: var(--ink);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(16px) scale(.98);
      transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1);
    }

    .bio-dialog::backdrop {
      background: color-mix(in srgb, var(--ink) 50%, transparent);
      opacity: 0;
      transition: opacity .3s ease;
    }

    .bio-dialog.is-open {
      opacity: 1;
      transform: none;
    }

    .bio-dialog.is-open::backdrop {
      opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {

      .bio-dialog,
      .bio-dialog::backdrop {
        transition: none
      }
    }

    .bio-dialog__inner {
      position: relative;
      max-height: inherit;
      overflow-y: auto;
      padding: clamp(1.5rem, 4vw, 2.5rem);
    }

    .bio-dialog__close {
      position: absolute;
      top: 0;
      right: 0;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink-soft);
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: color .2s ease, border-color .2s ease;
    }

    .bio-dialog__close:hover {
      color: var(--accent);
      border-color: var(--accent);
    }

    .bio-dialog__name {
      font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
      margin: .35rem 2.5rem 1.25rem 0;
    }

    .bio-dialog__body {
      font-size: .9375rem;
    }

    /* ---------- bios page (viografika.html) ---------- */
    .bios-intro {
      padding-top: calc(var(--nav-h) + clamp(3.5rem, 9vw, 7rem));
      padding-bottom: clamp(3rem, 7vw, 5.5rem);
    }

    .bios-intro__title {
      font-size: clamp(2.6rem, 1.4rem + 5.6vw, 5.75rem);
      line-height: .98;
    }

    .bios-intro__lede {
      max-width: 46ch;
      margin-top: clamp(1.25rem, 3vw, 2rem);
    }

    .bios-intro__jump {
      display: flex;
      flex-wrap: wrap;
      gap: .6rem 2rem;
      margin-top: clamp(1.75rem, 4vw, 2.75rem);
      padding-top: 1.25rem;
      border-top: 1px solid var(--line);
    }

    .bios-intro__jump a {
      font-family: "GFS Didot", "Didot", Georgia, serif;
      font-size: 1.2rem;
      text-decoration: none;
      color: var(--ink-soft);
      background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
      transition: background-size .35s cubic-bezier(.2, .7, .2, 1), color .25s ease;
    }

    .bios-intro__jump a:hover,
    .bios-intro__jump a:focus-visible {
      color: var(--ink);
      background-size: 100% 1px;
    }

    .profile__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(2rem, 5vw, 3rem);
    }

    .profile__portrait {
      width: 100%;
      max-width: 30rem;
    }

    @media (min-width:900px) {
      .profile__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(3rem, 6vw, 6rem);
        align-items: start;
      }

      /* the portrait stays beside the text while the (long) bio is read */
      .profile__portrait {
        position: sticky;
        top: calc(var(--nav-h) + 2rem);
        max-width: none;
      }

      .profile--flip .profile__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      }

      .profile--flip .profile__portrait {
        order: 2;
      }
    }

    .profile__head {
      padding-bottom: clamp(1.5rem, 3vw, 2rem);
    }

    .profile__name {
      font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
      line-height: 1;
    }

    .profile__role {
      margin-top: .85rem;
      font-size: 1.0625rem;
      color: var(--muted);
    }

    .facts {
      margin: 0 0 clamp(2rem, 4vw, 2.75rem);
      border-top: 1px solid var(--line);
    }

    .facts__row {
      display: grid;
      grid-template-columns: 1fr;
      gap: .3rem;
      padding-block: .95rem;
      border-bottom: 1px solid var(--line-soft);
    }

    @media (min-width:600px) {
      .facts__row {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 1.5rem;
        align-items: baseline;
      }
    }

    .facts dt {
      margin: 0;
    }

    .facts dd {
      margin: 0;
      color: var(--ink);
      font-size: .9875rem;
      line-height: 1.55;
    }

    .facts__num {
      font-variant-numeric: tabular-nums;
      letter-spacing: .02em;
    }

    .profile__bio {
      max-width: 62ch;
    }

    .bios-cta__inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .bios-cta__title {
      font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem);
      line-height: 1.08;
      max-width: 20ch;
    }

    .bios-cta__text {
      max-width: 52ch;
      color: var(--ink-soft);
    }

    /* current page (bios) or current section (homepage, set by js/main.js) */
    .nav__links a[aria-current] {
      color: var(--ink);
    }

    .nav__links a[aria-current]::after {
      right: 0;
    }

    .drawer a[aria-current="page"],
    .footer__nav a[aria-current="page"] {
      color: var(--accent);
    }

    .person__name {
      font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem);
      line-height: 1.05
    }

    @media (min-width:820px) {
      .person__name {
        min-height: 2.1em
      }
    }

    /* keeps both roles on one baseline when one name wraps */
    .person__role {
      margin-top: .5rem
    }

    .person__body {
      display: flex;
      flex-direction: column;
      gap: .9em;
      color: var(--ink-soft);
      font-size: .9875rem
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      padding-top: .3rem;
      align-items: flex-start;
      align-content: flex-start;
      align-self: start
    }

    .tag {
      font-size: .6875rem;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: var(--accent);
      border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
      background: color-mix(in srgb, var(--accent-wash) 60%, transparent);
      padding: .34rem .68rem;
      border-radius: 999px;
    }

    /* ---------- contact ---------- */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(2.5rem, 5vw, 4rem)
    }

    @media (min-width:900px) {
      .contact-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr)
      }

      /* the two-column layout already separates details from the form,
         so this intro label is only needed on the stacked mobile view */
      .form-intro {
        display: none
      }
    }

    .detail {
      display: flex;
      flex-direction: column;
      gap: .3rem;
      padding-block: 1.1rem;
      border-bottom: 1px solid var(--line-soft)
    }

    .detail:last-of-type {
      border-bottom: 0
    }

    .detail:first-of-type {
      /* without this the left column starts ~13px lower than the form,
         since padding-block also adds padding-top on the first item */
      padding-top: 0
    }

    /* fills the leftover space below the (shorter) details column on
       desktop, where the form's own column runs taller */
    .map-embed {
      margin-top: 1.5rem;
      aspect-ratio: 4/3;
      border: 1px solid var(--line-soft);
      border-radius: 2px;
      overflow: hidden;
    }

    .map-embed iframe {
      width: 100%;
      height: 100%;
      border: 0;
      filter: grayscale(.25) contrast(1.05) saturate(1.1);
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) .map-embed iframe {
        filter: grayscale(.35) invert(.9) contrast(.9) hue-rotate(180deg)
      }
    }

    :root[data-theme="dark"] .map-embed iframe {
      filter: grayscale(.35) invert(.9) contrast(.9) hue-rotate(180deg)
    }

    .detail a {
      text-decoration: none;
      font-size: 1.0625rem;
      transition: color .25s ease
    }

    .detail a:hover {
      color: var(--accent)
    }

    .detail .val {
      font-size: 1.0625rem
    }

    /* hidden honeypot field — only bots fill this in */
    .hp {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .counter {
      font-size: .75rem;
      color: var(--muted);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .counter.near {
      color: var(--accent)
    }

    .form-status {
      font-size: .9375rem;
      line-height: 1.6;
      padding: .9rem 1.1rem;
      border-left: 2px solid var(--accent);
      background: color-mix(in srgb, var(--accent-wash) 55%, transparent);
      border-radius: 0 3px 3px 0;
    }

    .form-status:empty {
      display: none
    }

    .form-status.err {
      border-left-color: #a8503f;
      background: color-mix(in srgb, #a8503f 12%, transparent);
    }

    .note {
      font-size: .8125rem;
      color: var(--muted);
      line-height: 1.65;
      max-width: 62ch
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 1.15rem
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: .45rem
    }

    .field label {
      font-size: .6875rem;
      text-transform: uppercase;
      letter-spacing: .16em;
      color: var(--muted)
    }

    .field input,
    .field textarea {
      font-family: inherit;
      font-size: 1rem;
      font-weight: 300;
      color: var(--ink);
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--line);
      padding: .65rem 0;
      transition: border-color .3s ease;
    }

    .field input:focus,
    .field textarea:focus {
      outline: none;
      border-bottom-color: var(--accent)
    }

    .field textarea {
      resize: vertical;
      min-height: 110px;
      line-height: 1.6
    }

    /* ---------- office photos: one full-width main shot + a pair of
       smaller ones below, not three equal tiles ---------- */
    .space-gallery {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .space-photo {
      margin: 0
    }

    .space-photo--main {
      aspect-ratio: 4/3
    }

    .space-gallery__aside {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    @media (min-width:600px) {
      .space-gallery__aside {
        flex-direction: row;
        gap: clamp(1.25rem, 3vw, 2rem);
      }
    }

    .space-photo--detail {
      aspect-ratio: 3/4;
    }

    @media (min-width:600px) {
      .space-photo--detail {
        flex: 1;
        /* box narrows here, so 3:4 no longer reads as too tall next to its pair */
      }
    }

    .space-photo figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: .7rem .95rem;
      font-size: .625rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ---------- FAQ ---------- */
    .faq {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--line-soft)
    }

    .faq details {
      border-bottom: 1px solid var(--line-soft)
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      padding-block: 1.3rem;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
      font-size: 1.0625rem;
      font-weight: 400;
      transition: color .25s ease;
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq summary:hover {
      color: var(--accent)
    }

    .faq summary .plus {
      position: relative;
      flex: 0 0 14px;
      height: 14px;
      margin-top: .5rem
    }

    .faq summary .plus::before,
    .faq summary .plus::after {
      content: "";
      position: absolute;
      inset: 50% 0 auto 0;
      height: 1px;
      background: var(--accent);
    }

    .faq summary .plus::after {
      transform: rotate(90deg);
      transition: transform .35s cubic-bezier(.2, .7, .2, 1)
    }

    .faq details[open] summary .plus::after {
      transform: rotate(0)
    }

    .faq .answer {
      padding-bottom: 1.45rem;
      max-width: 70ch;
      color: var(--muted);
      font-size: .9875rem
    }

    /* ---------- footer ---------- */
    .footer {
      border-top: 1px solid var(--line);
      padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
      background: var(--paper)
    }

    .footer__top {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem
    }


    .footer__mark {
      font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
      line-height: 1.05
    }

    .footer__nav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .55rem 3rem;
    }

    .footer__nav a {
      text-decoration: none;
      color: var(--muted);
      font-size: .9375rem;
      transition: color .25s ease
    }

    .footer__nav a:hover {
      color: var(--accent)
    }

    .footer__mid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      margin-top: 3.25rem;
    }

    @media (min-width:900px) {
      .footer__mid {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4rem;
        align-items: start;
      }
    }

    .urgent {
      max-width: 72ch;
      border-left: 2px solid var(--accent);
      background: color-mix(in srgb, var(--accent-wash) 55%, transparent);
      padding: 1.4rem 1.5rem;
      border-radius: 0 3px 3px 0;
      display: flex;
      flex-direction: column;
      gap: .9rem;
    }

    .urgent__label {
      color: var(--accent);
      font-weight: 600
    }

    .urgent p {
      font-size: .9rem;
      color: var(--ink-soft);
      line-height: 1.6
    }

    .urgent__lines {
      display: grid;
      grid-template-columns: 1fr;
      gap: .5rem
    }

    @media (min-width:640px) {
      .urgent__lines {
        grid-template-columns: 1fr 1fr;
        gap: .75rem
      }
    }

    .urgent__lines a {
      display: flex;
      flex-direction: column;
      gap: .15rem;
      text-decoration: none;
      padding: .75rem .9rem;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: var(--paper);
      transition: border-color .25s ease, transform .25s ease;
    }

    .urgent__lines a:hover {
      border-color: var(--accent);
      transform: translateY(-1px)
    }

    .urgent__lines strong {
      font-family: "GFS Didot", "Didot", Georgia, serif;
      font-size: 1.5rem;
      font-weight: 400;
      color: var(--accent);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .urgent__lines span {
      font-size: .75rem;
      color: var(--muted);
      line-height: 1.45
    }

    .urgent__foot {
      font-size: .8125rem !important;
      color: var(--muted) !important
    }

    .footer__base {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--line-soft);
      display: flex;
      flex-wrap: wrap;
      gap: .75rem 2rem;
      justify-content: space-between;
      font-size: .8125rem;
      color: var(--muted);
    }

    /* ---------- theme toggle ---------- */
    .theme-btn {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: color .25s ease, border-color .25s ease, transform .15s ease;
      flex: 0 0 auto;
    }

    .theme-btn:hover {
      color: var(--accent);
      border-color: var(--accent)
    }

    .theme-btn:active,
    .menu-btn:active {
      transform: scale(.92)
    }

    .theme-btn svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.4
    }

    .nav__end {
      display: flex;
      align-items: center;
      gap: .6rem;
    }

    @media (min-width:1240px) {
      .nav__end {
        /* own grid item (not inside .nav__center), pinned right on
           column 3 so it doesn't sit flush against the links */
        grid-column: 3;
        justify-self: end;
        margin-left: 0
      }
    }

    .nav__cta {
      display: none
    }

    @media (min-width:700px) {
      .nav__cta {
        display: inline-flex
      }
    }

    /* ---------- skip link ---------- */
    .skip {
      position: absolute;
      left: -9999px;
      top: .5rem;
      z-index: 200;
      background: var(--accent);
      color: var(--accent-ink);
      padding: .6rem 1rem;
      border-radius: 999px;
      font-size: .8125rem;
      text-decoration: none;
    }

    .skip:focus {
      left: 1rem
    }

    /* ---------- reveal ---------- */
    .js .reveal {
      opacity: 0;
      transform: translateY(18px);
    }

    /* ---------- per-item stagger, GSAP-driven (see js/main.js) ----------
       Same idea as .js .reveal above: hidden only under .js, so it stays
       visible without JS. Final state comes from GSAP, not a CSS transition. */
    .js [data-stagger]>* {
      opacity: 0;
      transform: translateY(16px);
    }

    .js .reveal.in {
      opacity: 1;
      transform: none;
      transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1)
    }

    .js .reveal.d1.in {
      transition-delay: .08s
    }

    .js .reveal.d2.in {
      transition-delay: .16s
    }

    .js .reveal.d3.in {
      transition-delay: .24s
    }

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

      .js [data-stagger]>* {
        opacity: 1 !important;
        transform: none !important
      }

      .js .wordmark {
        opacity: 1 !important
      }

      .js .wordmark.ready .row,
      .js .wordmark.ready .amp {
        animation: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        transform: none !important
      }

      * {
        transition-duration: .01ms !important
      }
    }