@layer reset, tokens, base, layout, components, blueprint, motion, utilities;

/* Self-hosted Inter (latin variable) — avoids Google Fonts critical-path latency */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("assets/fonts/inter-latin-var.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;
}

/* ─── reset ─── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

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

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

  body {
    min-height: 100vh;
    overflow-x: hidden;
  }

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

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

  ul {
    list-style: none;
  }

  button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }
}

/* ─── tokens ─── */
@layer tokens {
  :root {
    --bg: #000a1b;
    --bg-elevated: #071225;
    --bg-hover: #0b172b;
    --bg-soft: #141c2c;

    --text: #fafafb;
    --text-soft: #c2c7cb;
    --muted: #8f95a2;
    --muted-2: #646974;

    --accent: #1e7af8;
    --accent-hover: #3c8cff;

    --line: rgba(194, 199, 203, 0.16);
    --line-medium: rgba(194, 199, 203, 0.24);
    --line-strong: rgba(194, 199, 203, 0.34);

    --selection-bg: rgba(30, 122, 248, 0.25);

    --container: 1240px;
    --pad-x: 48px;
    --pad-x-mobile: 20px;

    --fast: 160ms;
    --normal: 280ms;
    --slow: 700ms;
    --reveal: 280ms;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-move: cubic-bezier(0.77, 0, 0.175, 1);

    --header-height: 72px;
  }
}

/* ─── base ─── */
@layer base {
  body {
    font-family:
      Inter,
      "SF Pro Display",
      "SF Pro Text",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    letter-spacing: -0.01em;
    color: var(--muted);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::selection {
    background: var(--selection-bg);
    color: var(--text);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
}

/* ─── layout ─── */
@layer layout {
  .page-shell {
    position: relative;
    isolation: isolate;
  }

  .page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(
        900px 520px at 50% 42%,
        rgba(17, 40, 74, 0.15),
        transparent 65%
      ),
      var(--bg);
    box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.28);
    pointer-events: none;
  }


  .container {
    width: min(calc(100% - var(--pad-x) * 2), var(--container));
    margin-inline: auto;
  }
}

/* ─── components ─── */
@layer components {
  /* Header */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--header-height);
    opacity: 0;
    transition:
      opacity var(--slow) var(--ease),
      background var(--normal) var(--ease),
      border-color var(--normal) var(--ease),
      backdrop-filter var(--normal) var(--ease);
  }

  .site-header.is-visible {
    opacity: 1;
  }

  .site-header.is-scrolled {
    background: rgba(0, 10, 27, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }

  .site-brand {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    transition:
      color var(--fast) ease,
      transform 120ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .site-brand:hover {
      color: var(--text);
    }
  }

  .site-brand:active {
    transform: scale(0.97);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
  }

  .site-nav a {
    position: relative;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted);
    transition:
      color var(--fast) ease,
      transform 120ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .site-nav a:hover {
      color: var(--text);
    }

    .site-nav a:hover::after {
      transform: scaleX(1);
    }
  }

  .site-nav a:active {
    transform: scale(0.97);
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--fast) var(--ease-out);
  }

  /* Hero */
  .hero {
    position: relative;
    min-height: 92svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--header-height);
  }

  .hero__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    min-height: calc(92svh - var(--header-height));
  }

  .hero__content {
    grid-column: 2 / span 9;
    padding-left: clamp(0px, 2vw, 24px);
  }

  .hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 2rem;
  }

  .hero__title {
    font-size: clamp(3.55rem, 6.35vw, 7rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.055em;
    color: var(--text);
    /* +8px optical breathing room before supporting copy */
    margin-bottom: calc(1.75rem + 8px);
  }

  .hero__line {
    display: block;
  }

  .hero__line--lock {
    white-space: nowrap;
  }

  .hero__accent {
    color: var(--accent);
    font-style: normal;
    /* ~4% optical reduction so // stays signature without competing with “matters” */
    font-size: 0.96em;
  }

  .hero__support {
    max-width: 38ch;
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--text-soft);
    margin-bottom: 2.5rem;
  }

  .hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
  }

  .hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    left: var(--pad-x);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .hero__scroll-line {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--line-medium), transparent);
    animation: scrollPulse 2.8s ease-in-out infinite;
  }

  @keyframes scrollPulse {
    0%,
    100% {
      opacity: 0.35;
      transform: scaleY(0.55);
      transform-origin: top;
    }
    50% {
      opacity: 1;
      transform: scaleY(1);
      transform-origin: top;
    }
  }

  /* Text links */
  .text-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-soft);
    transition:
      color var(--fast) ease,
      transform 120ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .text-link:hover {
      color: var(--text);
    }

    .text-link:hover::after {
      transform: scaleX(1);
    }
  }

  .text-link:active {
    transform: scale(0.97);
  }

  .text-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 180ms var(--ease-out);
  }

  /* Sections */
  .section {
    padding-block: clamp(96px, 12vw, 180px);
    border-top: 1px solid var(--line);
  }

  .section__header {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
  }

  .section__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 1rem;
  }

  .section__title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text);
    max-width: 18ch;
  }

  /* Project rows */
  .project-list {
    display: flex;
    flex-direction: column;
  }

  .project-row {
    padding-block: 2rem;
    border-bottom: 1px solid var(--line);
    transition:
      border-color var(--normal) var(--ease-out),
      transform var(--normal) var(--ease-out);
    cursor: default;
  }

  .project-row:first-child {
    border-top: 1px solid var(--line);
  }

  @media (hover: hover) and (pointer: fine) {
    .project-row:hover {
      border-color: var(--line-medium);
      transform: translateX(6px);
    }

    .project-row:hover .project-row__arrow {
      color: var(--accent);
      transform: translate(2px, -2px);
    }
  }

  .project-row__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }

  .project-row__name {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
  }

  .project-row__year:empty {
    display: none;
  }

  .project-row__year {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
  }

  .project-row__desc {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 1rem;
    max-width: 52ch;
  }

  .project-row__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .project-row__tags {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-2);
    letter-spacing: 0.02em;
  }

  .project-row__arrow {
    font-size: 1.125rem;
    color: var(--muted-2);
    transition:
      color var(--fast) ease,
      transform var(--normal) var(--ease-out);
  }

  /* Writing */
  .writing__support {
    margin-top: 1.25rem;
    max-width: 42ch;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--muted);
  }

  .writing__empty {
    max-width: 52ch;
  }

  .writing__status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .writing__status-marker {
    display: block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    flex-shrink: 0;
    animation: statusPulse 3.2s ease-in-out infinite;
  }

  @keyframes statusPulse {
    0%,
    100% {
      opacity: 0.45;
    }
    50% {
      opacity: 1;
    }
  }

  .writing__status-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-2);
  }

  .writing__rule {
    height: 1px;
    margin-bottom: 0;
    background: linear-gradient(
      90deg,
      var(--line-medium) 0%,
      var(--line-medium) 50%,
      transparent 50%,
      transparent 100%
    );
    background-size: 8px 1px;
    background-repeat: repeat-x;
    transform-origin: left;
  }

  .article-list {
    display: flex;
    flex-direction: column;
  }

  .article-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    border-bottom: 1px dashed var(--line);
  }

  .article-row:first-child {
    border-top: 1px dashed var(--line);
  }

  .article-row.is-placeholder {
    pointer-events: none;
    cursor: default;
  }

  .article-row__title {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--muted-2);
  }

  .article-row__meta {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted-2);
    font-variant-numeric: tabular-nums;
  }

  /* About */
  .about__body {
    max-width: 58ch;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .about__body p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--muted);
  }

  /* Focus */
  .focus-list {
    display: flex;
    flex-direction: column;
  }

  .focus-row {
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-soft);
    transition:
      color var(--fast) ease,
      transform var(--normal) var(--ease-out),
      border-color var(--normal) var(--ease-out);
  }

  .focus-row:first-child {
    border-top: 1px solid var(--line);
  }

  @media (hover: hover) and (pointer: fine) {
    .focus-row:hover {
      color: var(--text);
      transform: translateX(6px);
      border-color: var(--line-medium);
    }
  }

  /* Contact */
  .contact__intro {
    font-size: 1.0625rem;
    color: var(--muted);
    margin-bottom: 2rem;
    max-width: 42ch;
  }

  .contact__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
  }

  /* Footer */
  .site-footer {
    padding-block: 3rem 2rem;
    border-top: 1px solid var(--line);
  }

  .site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--muted-2);
  }

}

/* ─── blueprint ─── */
@layer blueprint {
  .blueprint-svg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms var(--ease-out);
  }

  .blueprint-svg .bp-line {
    stroke: rgba(185, 190, 201, 0.16);
  }

  .blueprint-svg .bp-line--medium {
    stroke: rgba(185, 190, 201, 0.22);
  }

  /* Primary geometry only — ~7% relative lift vs previous strong */
  .blueprint-svg .bp-line--strong {
    stroke: rgba(185, 190, 201, 0.30);
  }

  .blueprint-svg .bp-line--soft {
    stroke: rgba(185, 190, 201, 0.11);
  }

  .blueprint-svg .bp-dot {
    fill: rgba(185, 190, 201, 0.44);
  }

  .blueprint-svg .bp-square {
    stroke: rgba(185, 190, 201, 0.24);
  }

  .blueprint-svg.is-visible {
    opacity: 1;
  }

  /* Path draw — delay/duration set per element via --bp-delay / --bp-dur */
  .blueprint-svg.is-visible .bp-draw {
    animation: bpDraw var(--bp-dur, 480ms) var(--ease-out) forwards;
    animation-delay: var(--bp-delay, 0ms);
  }

  /* Arcs/circles: slightly more linear, precise construction feel */
  .blueprint-svg.is-visible .bp-draw--arc {
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* Nodes: extremely subtle opacity + scale (GPU-friendly) */
  .bp-node {
    opacity: 0;
    transform: scale(0.9);
    transform-box: fill-box;
    transform-origin: center;
  }

  .blueprint-svg.is-visible .bp-node {
    animation: bpNodeIn 280ms var(--ease-out) forwards;
    animation-delay: var(--bp-delay, 0ms);
  }

  @keyframes bpDraw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes bpNodeIn {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Responsive geometry tiers:
     --lg  ≥1024 full composition
     --md  ≥768  mid detail (circle crosshair etc.)
     --sm  ≥768  secondary guides (hidden on mobile)
  */
  .blueprint-parallax,
  .blueprint-lines {
    transform-box: view-box;
    transform-origin: center;
  }

  /* After construction: nearly static — barely-perceptible breathe */
  .blueprint-svg.is-alive .blueprint-lines {
    animation: bpAmbient 22s ease-in-out infinite;
  }

  @keyframes bpAmbient {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.96;
    }
  }
}

/* ─── motion ─── */
@layer motion {
  /*
    LCP is the hero title text. Keep title lines fully painted in their final
    position from first paint (opacity:0 and late transform both delay LCP).
    Soft copy (eyebrow / support / links) and the // accent still fade in.
  */
  .hero__reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--slow) var(--ease-out),
      transform var(--slow) var(--ease-out);
  }

  .hero__title .hero__line.hero__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__support.hero__reveal,
  .hero__eyebrow.hero__reveal,
  .hero__links.hero__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .hero__title .hero__line.hero__reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .hero__accent.hero__reveal {
    display: inline;
    opacity: 0;
    transform: none;
    transition: opacity 400ms var(--ease-out);
  }

  .hero__accent.hero__reveal.is-visible {
    opacity: 1;
  }

  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity var(--reveal) var(--ease-out),
      transform var(--reveal) var(--ease-out);
  }

  [data-reveal][data-reveal-variant="header"] {
    transform: translateY(16px);
  }

  [data-reveal][data-reveal-variant="soft"] {
    transform: translateY(8px);
  }

  [data-reveal][data-reveal-variant="rule"] {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: none;
    transition:
      clip-path var(--normal) var(--ease-out),
      opacity var(--normal) var(--ease-out);
  }

  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal][data-reveal-variant="rule"].is-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }

  [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity var(--reveal) var(--ease-out),
      transform var(--reveal) var(--ease-out);
  }

  [data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  [data-reveal-stagger].is-visible > *:nth-child(1) {
    transition-delay: 0ms;
  }

  [data-reveal-stagger].is-visible > *:nth-child(2) {
    transition-delay: 50ms;
  }

  [data-reveal-stagger].is-visible > *:nth-child(3) {
    transition-delay: 100ms;
  }

  [data-reveal-stagger].is-visible > *:nth-child(4) {
    transition-delay: 150ms;
  }

  [data-reveal-stagger].is-visible > *:nth-child(5) {
    transition-delay: 200ms;
  }

  [data-reveal-stagger].is-visible > *:nth-child(n + 6) {
    transition-delay: 250ms;
  }

  /* No-JS: keep content readable without the reveal choreography */
  @media (scripting: none) {
    .site-header,
    .hero__reveal,
    .hero__title .hero__line.hero__reveal,
    .hero__support.hero__reveal,
    .hero__accent.hero__reveal,
    .blueprint-svg,
    [data-reveal],
    [data-reveal-stagger] > * {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header {
      opacity: 1;
      transition: none;
    }

    .hero__reveal,
    .hero__title .hero__line.hero__reveal,
    .hero__support.hero__reveal,
    [data-reveal],
    [data-reveal-stagger] > * {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .hero__scroll-line {
      animation: none;
      opacity: 0.5;
    }

    .writing__status-marker {
      animation: none;
      opacity: 0.7;
    }

    .writing__rule[data-reveal].is-visible {
      clip-path: inset(0 0 0 0);
      opacity: 1;
      transform: none;
    }

    .blueprint-svg {
      opacity: 1;
      transition: none;
    }

    .blueprint-svg.is-visible .bp-draw {
      animation: none;
      stroke-dashoffset: 0;
    }

    .blueprint-svg.is-visible .bp-node {
      animation: none;
      opacity: 1;
      transform: none;
    }

    .blueprint-svg.is-alive .blueprint-lines {
      animation: none;
      opacity: 1;
    }

    .project-row:hover,
    .focus-row:hover {
      transform: none;
    }
  }
}

/* ─── utilities + responsive ─── */
@layer utilities {
  /* Tablet: reduce secondary blueprint (~30%) so content stays primary */
  @media (max-width: 1023px) {
    :root {
      --pad-x: 36px;
    }

    .hero__content {
      grid-column: 2 / span 10;
      padding-left: clamp(0px, 1vw, 12px);
    }

    .blueprint-detail--lg {
      display: none;
    }
  }

  /* Portrait tablets: nudge slice so BR + circle stay in-frame */
  @media (max-width: 1023px) and (orientation: portrait) {
    .blueprint-svg {
      width: 155%;
      max-width: none;
      left: -38%;
      right: auto;
    }
  }

  @media (max-width: 767px) {
    :root {
      --pad-x: var(--pad-x-mobile);
      --header-height: 64px;
    }

    .hero {
      min-height: 88svh;
    }

    .hero__inner {
      min-height: calc(88svh - var(--header-height));
    }

    .hero__content {
      grid-column: 1 / -1;
      padding-left: 0;
      /* Optical lift — true shift (margin is neutralized by vertical centering) */
      transform: translateY(clamp(-56px, -6.5vh, -40px));
    }

    .hero__title {
      /* Sized so “where it matters //” stays on one line without clipping */
      font-size: clamp(2.45rem, 11.2vw, 4.15rem);
      line-height: 0.96;
      margin-bottom: calc(1.5rem + 6px);
      letter-spacing: -0.05em;
    }

    .hero__eyebrow {
      margin-bottom: 1.5rem;
    }

    .hero__support {
      max-width: 36ch;
      margin-bottom: 2rem;
    }

    /* Prefer a single comfortable row; avoid accidental 3+1 wrap */
    .hero__links {
      flex-wrap: nowrap;
      gap: 0.7rem 0.9rem;
    }

    .hero__links .text-link {
      font-size: 0.8125rem;
      white-space: nowrap;
    }

    .hero__scroll {
      left: var(--pad-x-mobile);
      bottom: 1.5rem;
    }

    .hero__scroll-line {
      height: 32px;
    }

    .site-nav {
      gap: 0.875rem;
    }

    .site-nav a {
      font-size: 0.75rem;
    }

    .site-brand {
      font-size: 0.75rem;
    }

    .blueprint-detail--lg,
    .blueprint-detail--md,
    .blueprint-detail--sm {
      display: none;
    }

    /*
      Portrait slice crops landscape anchors off-screen. Frame a lower band
      biased toward BR/circle so identity survives without crossing the headline.
    */
    .blueprint-svg {
      inset: auto auto 0 0;
      top: auto;
      left: -58%;
      width: 210%;
      max-width: none;
      height: 50%;
    }

    .blueprint-svg.is-visible {
      opacity: 1;
    }

    /* Mobile: geometry is present immediately (no entrance fade / stroke draw). */
    .blueprint-svg {
      opacity: 1;
      transition: none;
    }

    .blueprint-svg .bp-draw {
      stroke-dashoffset: 0;
      animation: none;
    }

    .bp-node {
      opacity: 1;
      transform: none;
      animation: none;
    }

    /* Slight mobile-only contrast lift — still clearly secondary */
    .blueprint-svg .bp-line {
      stroke: rgba(185, 190, 201, 0.22);
    }

    .blueprint-svg .bp-line--medium {
      stroke: rgba(185, 190, 201, 0.3);
    }

    .blueprint-svg .bp-line--strong {
      stroke: rgba(185, 190, 201, 0.36);
    }

    .blueprint-svg .bp-line--soft {
      stroke: rgba(185, 190, 201, 0.16);
    }

    .blueprint-svg .bp-square {
      stroke: rgba(185, 190, 201, 0.32);
    }

    .blueprint-svg .bp-dot {
      fill: rgba(185, 190, 201, 0.55);
    }

    @media (hover: hover) and (pointer: fine) {
      .project-row:hover,
      .focus-row:hover {
        transform: translateX(4px);
      }
    }

    .site-footer__inner {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (max-width: 390px) {
    .contact__links {
      flex-direction: column;
      gap: 1rem;
    }

    .hero__support {
      font-size: 1rem;
    }
  }

  /* Narrowest phones: intentional balanced 2×2 when one row won’t fit */
  @media (max-width: 360px) {
    .hero__links {
      display: grid;
      grid-template-columns: max-content max-content;
      justify-content: start;
      column-gap: 1.1rem;
      row-gap: 0.7rem;
      flex-wrap: unset;
    }

    .hero__links .text-link {
      font-size: 0.8125rem;
    }
  }

  @media (max-width: 320px) {
    :root {
      --pad-x-mobile: 16px;
    }

    .hero__title {
      font-size: clamp(2.15rem, 10.8vw, 2.85rem);
      letter-spacing: -0.045em;
    }

    .hero__eyebrow {
      font-size: 0.65rem;
      letter-spacing: 0.1em;
    }

    .hero__links {
      column-gap: 0.95rem;
      row-gap: 0.65rem;
    }

    .hero__links .text-link {
      font-size: 0.75rem;
    }

    .site-nav {
      gap: 0.625rem;
    }

    .site-nav a {
      font-size: 0.6875rem;
    }
  }

  @media (min-width: 1440px) {
    .hero__content {
      grid-column: 2 / span 10;
    }
  }

  /* Temporary: hero-only landing until full content is ready */
  .site-mode--hero-only {
    overflow: hidden;
    height: 100svh;
  }

  .site-mode--hero-only .page-shell {
    height: 100svh;
    overflow: hidden;
  }

  .site-mode--hero-only main > .section:not(.hero),
  .site-mode--hero-only .site-footer {
    display: none;
  }

  .site-mode--hero-only .site-nav {
    display: none;
  }

  .site-mode--hero-only .hero {
    min-height: 100svh;
    padding-top: var(--header-height);
  }

  .site-mode--hero-only .hero__inner {
    min-height: calc(100svh - var(--header-height));
  }

  .site-mode--hero-only .hero__scroll {
    display: none;
  }

  .site-mode--hero-only .site-header {
    opacity: 1;
  }
}