@import url("../fonts/fonts.css");

/* ============================================================
   Lord Skippy LLC — lordskippy.group
   ============================================================ */

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  --ink:       #05070c;
  --ink-2:     #0a0e16;
  --line:      #1a2130;
  --line-soft: #111722;
  --gold:      #e9a828;
  --gold-soft: #f7d27e;
  --cyan:      #3fbdf0;
  --navy:      #1e50b4;
  --paper:     #f3f5f9;
  --muted:     #808c9f;   /* 5.9:1 on the page, 5.2:1 on a card — WCAG AA */
  --muted-dim: #7e8898;   /* was #586274: only 2.9:1 on a card, which failed AA */

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1120px;
  --pad: clamp(1.25rem, 5vw, 2.75rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* keep the footer pinned to the bottom on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }

/* ============================================================
   BACKGROUND STACK — grid, aurora, stars, grain.
   Four quiet layers. None of them announce themselves;
   together they stop the page from reading as flat black.
   ============================================================ */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 1. the column rules — a hint of structure under everything */
.bg__grid {
  position: absolute;
  inset: 0;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
  background-image: linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 4) 100%;
  background-origin: content-box;
  background-clip: content-box;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 55%, transparent 92%);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 55%, transparent 92%);
  opacity: 0.55;
}

/* 2. two slow aurora blooms.

   NB: these used to carry filter: blur(90px) + will-change: transform, which
   allocated two enormous GPU textures and re-rasterised them every frame. On a
   phone that was a large part of a renderer out-of-memory crash. A radial
   gradient is already perfectly soft — the blur bought nothing and cost
   everything. No filter, no will-change, no promotion. */
.bg__glow {
  position: absolute;
  border-radius: 50%;
}

.bg__glow--navy {
  top: -22vh;
  right: -12vw;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(closest-side, rgba(30, 80, 180, 0.30), rgba(30, 80, 180, 0.10) 45%, transparent 72%);
  animation: drift-a 26s ease-in-out infinite;
}

.bg__glow--gold {
  bottom: -30vh;
  left: -18vw;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(closest-side, rgba(233, 168, 40, 0.10), rgba(233, 168, 40, 0.04) 45%, transparent 70%);
  animation: drift-b 32s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-4vw, 4vh, 0) scale(1.1); }
}

@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5vw, -3vh, 0) scale(1.12); }
}

#stars { position: absolute; inset: 0; opacity: 0.55; }

/* 3. film grain.

   This used to be inset:-50% — four times the viewport — with mix-blend-mode
   dragging the whole page into a blending stack, animated forever. It is now
   exactly one screen, no blend mode, and it drifts by moving its background
   rather than transforming a giant layer. */
.bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  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='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(4) infinite;
}

@keyframes grain {
  0%, 100% { background-position: 0 0; }
  25%      { background-position: -12px 8px; }
  50%      { background-position: 10px -10px; }
  75%      { background-position: -8px -6px; }
}

header, main, footer { position: relative; z-index: 1; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- type ---------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

h1 { font-size: clamp(2.5rem, 5.8vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); letter-spacing: -0.035em; }
h3 { font-size: 1.3rem; letter-spacing: -0.028em; }

/* card titles are h2 for a correct document outline, but must not inherit
   the page-level h2 size */
.project h2,
.panel__body h2 { font-size: 1.3rem; letter-spacing: -0.028em; }

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }

.lead {
  font-size: clamp(1rem, 1.35vw, 1.1rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 42ch;
}

/* the gold wash from "made properly." — the thread that runs through the site.
   Used on the closing word of every page heading. */
.grad {
  background: linear-gradient(96deg, var(--gold-soft), var(--gold) 55%, #b9791a);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* section label: 01 — PROJECTS */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 1.5rem;
}

/* the number is a flat gold — a gradient across two characters just reads
   as a smudge */
.eyebrow .grad {
  background: none;
  color: var(--gold);
}

/* the live dot */
.pip {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.pip::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: ping 2.6s var(--ease) infinite;
}

@keyframes ping {
  0%   { opacity: 0.8; transform: scale(0.6); }
  70%, 100% { opacity: 0; transform: scale(1.8); }
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 12, 0.55);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.nav.is-stuck {
  background: rgba(5, 7, 12, 0.9);
  border-bottom-color: var(--line-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 70px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* the emblem is wide, not square — no circle, no crop, no ring */
.brand img {
  width: auto;
  height: 32px;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}

.brand:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 10px rgba(63, 189, 240, 0.45));
}

.brand b {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
  margin-left: -0.15rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.nav__links a { position: relative; color: var(--muted); transition: color 0.22s var(--ease); }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}

.nav__links a:hover { color: var(--paper); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__links a[aria-current="page"] { color: var(--paper); }

.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  background: var(--gold);
}

/* ---------- the hamburger ---------- */

.nav__toggle {
  display: none;
  position: relative;
  width: 44px;                 /* a real 44px tap target, not a 20px icon */
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper);
  cursor: pointer;
}

.nav__toggle span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.5s var(--ease), opacity 0.35s var(--ease);
}

.nav__toggle span:nth-child(1) { top: 18px; }
.nav__toggle span:nth-child(2) { top: 25px; }

/* the two bars fold into a cross */
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 760px) {
  .nav__toggle { display: block; }

  /* the links leave the bar and become a proper sheet under it */
  .nav__links {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--pad) 1.5rem;
    background: var(--ink);   /* fully opaque — nothing reads through a menu */
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease),
                visibility 0s linear 0.4s;
  }

  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease),
                visibility 0s;
  }

  .nav__links a {
    padding: 1.05rem 0;
    font-size: 1.0625rem;
    color: var(--paper);
    border-bottom: 1px solid var(--line-soft);
  }

  .nav__links a:last-child { border-bottom: 0; }

  /* the sliding underline makes no sense in a stacked sheet */
  .nav__links a::after { display: none; }

  .nav__links a[aria-current="page"] { color: var(--gold); }

  /* don't let the page scroll behind the open sheet */
  body.is-locked { overflow: hidden; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 46px;
  padding: 0 1.4rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--line);
  color: var(--paper);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
  border-color: #2f3b50;
  background: rgba(255, 255, 255, 0.035);
}

.btn--gold {
  color: #1b1408;
  font-weight: 600;
  border-color: transparent;
  background: linear-gradient(180deg, var(--gold-soft) -20%, var(--gold) 60%);
  box-shadow: 0 12px 40px -16px rgba(233, 168, 40, 0.85),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* must restate background + border: .btn:hover has equal specificity and
   would otherwise strip the gold and leave the button looking black. */
.btn--gold:hover {
  background: linear-gradient(180deg, #ffdf9a -20%, var(--gold-soft) 70%);
  border-color: transparent;
  color: #1b1408;
  box-shadow: 0 18px 52px -16px rgba(233, 168, 40, 0.95),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn svg { width: 14px; height: 14px; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(2px); }

/* ---------- hero ---------- */

.hero { padding: clamp(3.5rem, 11vh, 7.5rem) 0 clamp(3rem, 8vh, 5rem); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero h1 { margin-bottom: 1.5rem; }

.hero h1 .l {
  display: block;
  overflow: hidden;
}

/* the headline lifts into place, line by line */
.hero h1 .l > span {
  display: block;
  animation: rise 1.1s var(--ease) both;
}

.hero h1 .l:nth-child(2) > span { animation-delay: 0.09s; }

@keyframes rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* "made properly." — gold, but only just */
.hero h1 .l:nth-child(2) span {
  white-space: nowrap;
  background: linear-gradient(96deg, var(--gold-soft), var(--gold) 55%, #b9791a);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero .lead, .hero__cta { animation: fade-up 1s var(--ease) both 0.35s; }
.hero__cta { animation-delay: 0.45s; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.4rem;
}

/* ---------- the medallion ---------- */

.medal {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  animation: fade-up 1.4s var(--ease) both 0.2s;
}

/* pooled light behind him */
.medal::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(63, 189, 240, 0.20),
              rgba(30, 80, 180, 0.14) 55%,
              transparent 72%);
  animation: breathe 8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/* two rings, turning against each other. this is the wow, and it whispers. */
.medal__rings {
  position: absolute;
  inset: 0;
  color: var(--line);
}

.medal__rings circle { fill: none; }

/* The rings are turned by main.js, which writes transform straight onto each
   circle. transform-box:fill-box is what makes transform-origin:center mean
   "the middle of this circle" rather than the middle of the SVG viewport. */
.medal__rings circle {
  transform-box: fill-box;
  transform-origin: center;
}

.medal__rings .r1 {
  stroke: rgba(63, 189, 240, 0.28);
  stroke-width: 0.35;
  stroke-dasharray: 1 3;
}

.medal__rings .r2 {
  stroke: rgba(233, 168, 40, 0.32);
  stroke-width: 0.45;
  stroke-dasharray: 16 240;
  stroke-linecap: round;
}

.medal__rings .r3 {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 0.3;
}

/* the admiral holds still — only the rings move.
   he sits a little left of the rings' centre, which reads better than
   dead-centre: his thumb and the gold arc get room on the right. */
.medal picture {
  position: relative;
  display: block;
  width: 76%;
  transform: translateX(-7%);
}

.medal img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.6));
}

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__grid .lead { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .hero .eyebrow { justify-content: center; }
  .medal { order: -1; width: min(78%, 340px); margin-inline: auto; }
}

/* ---------- sections ---------- */

.section { padding: clamp(4.5rem, 11vh, 7.5rem) 0; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.section__head > div { min-width: 0; }
.section__head p { margin: 0; }

.count {
  font-size: 0.75rem;
  color: var(--muted-dim);
  white-space: nowrap;
}

/* ---------- projects ---------- */

.projects {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 1rem;
}

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

.project {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: clamp(1.5rem, 2.8vw, 2rem);
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(30, 80, 180, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(18, 24, 38, 0.9), rgba(8, 11, 18, 0.6));
  overflow: hidden;
}

/* NB: a.project, not .project — these cards also carry .reveal, whose
   transition shorthand would otherwise override this one. */
a.project {
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}

/* a light that follows the cursor across the card */
.project__spot {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(63, 189, 240, 0.11), transparent 65%);
  transition: opacity 0.35s var(--ease);
}

/* and a gold seam that traces the border while you hover */
.project__edge {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(from var(--angle),
              transparent 55%, rgba(233, 168, 40, 0.9) 78%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity 0.45s var(--ease);
}

a.project:hover {
  transform: translateY(-2px);
  border-color: rgba(63, 189, 240, 0.28);
  box-shadow: 0 40px 80px -50px rgba(63, 189, 240, 0.65);
}

a.project:hover .project__spot { opacity: 1; }

a.project:hover .project__edge {
  opacity: 1;
  animation: trace 4s linear infinite;
}

@keyframes trace { to { --angle: 360deg; } }

.project__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: auto;
}

.project__logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}

a.project:hover .project__logo {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 8px 16px rgba(63, 189, 240, 0.22));
}

.project__go {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: all 0.3s var(--ease);
}

.project__go svg { width: 13px; height: 13px; }

a.project:hover .project__go {
  color: #1b1408;
  background: var(--gold);
  border-color: var(--gold);
}

/* the arrow slips out along its own diagonal */
.project__go svg { transition: transform 0.35s var(--ease); }
a.project:hover .project__go svg { transform: translate(1.5px, -1.5px); }

.project__body { margin-top: 2rem; }

.project h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.project p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 44ch;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.5875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.24rem 0.55rem;
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(63, 189, 240, 0.09);
  border: 1px solid rgba(63, 189, 240, 0.22);
}

.tag .pip { width: 5px; height: 5px; background: var(--cyan); }
.tag .pip::after { border-color: var(--cyan); }

/* the empty berth */
.project--soon {
  border-style: dashed;
  border-color: var(--line-soft);
  background: none;
}

.project--soon h2 { color: var(--muted-dim); }
.project--soon p  { color: var(--muted-dim); font-size: 0.875rem; }

.dots { display: flex; gap: 5px; }

.dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line);
  animation: blink 2.4s ease-in-out infinite;
}

.dots i:nth-child(2) { animation-delay: 0.3s; }
.dots i:nth-child(3) { animation-delay: 0.6s; }

@keyframes blink {
  0%, 100% { background: var(--line); }
  50%      { background: var(--muted-dim); }
}

/* ---------- page header (inner pages) ---------- */

/* NB: this is a .wrap too — constrain the children, not the box itself,
   or margin-inline:auto will centre the whole header. */
.page-head { padding: clamp(3.5rem, 9vh, 6rem) 0 clamp(2.5rem, 5vh, 3.5rem); }
.page-head > * { max-width: 20ch; }
.page-head h1 { margin-bottom: 1.1rem; }
.page-head .lead, .page-head .eyebrow { max-width: 46ch; }

/* ---------- capability cards (studio) ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(18, 24, 38, 0.75), rgba(8, 11, 18, 0.45));
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.card:hover { transform: translateY(-2px); border-color: #2a3446; }

.card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1.3rem;
  border-radius: 11px;
  color: var(--gold);
  background: rgba(233, 168, 40, 0.07);
  border: 1px solid rgba(233, 168, 40, 0.16);
}

.card__icon svg { width: 19px; height: 19px; }

.card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }

.card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- company facts ---------- */

.facts {
  position: relative;
  margin: 0;
  max-width: 640px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}

.facts a {
  color: var(--paper);
  border-bottom: 1px solid rgba(233, 168, 40, 0.4);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.facts a:hover { color: var(--gold-soft); border-color: var(--gold); }

.fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1rem 1.35rem;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--line-soft);
}

.fact:last-child { border-bottom: 0; }

.fact dt {
  color: var(--muted-dim);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.fact dd { margin: 0; text-align: right; color: var(--paper); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.split p { color: var(--muted); }

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

/* ---------- two-up layout (studio, contact) ----------
   Same 1.65 / 1 split as the projects grid, so every content page sits on
   the same skeleton and fills the width the same way. */

.duo {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 1rem;
  align-items: stretch;
}

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

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: clamp(1.5rem, 2.8vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(30, 80, 180, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(18, 24, 38, 0.9), rgba(8, 11, 18, 0.6));
}

/* the same light that follows the cursor across the VerseGuide card —
   and nothing else: these cards don't lift, glow at the border, or move. */
.panel::before,
.facts::before,
.project--soon::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(63, 189, 240, 0.11), transparent 65%);
  transition: opacity 0.35s var(--ease);
}

.panel:hover::before,
.facts:hover::before,
.project--soon:hover::before { opacity: 1; }

.panel__label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 auto;
}

.panel__body { margin-top: 2rem; }
.panel__body h2 { margin-bottom: 0.6rem; }

.panel__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 44ch;
}

/* what we make — three chips, no prose */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--paper);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}

/* the contact panel's details */
.deets {
  display: grid;
  gap: 1.4rem;
  margin-top: 2rem;
}

.deets dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 0.3rem;
}

.deets dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--paper);
}

.deets a { color: var(--paper); transition: color 0.25s var(--ease); }
.deets a:hover { color: var(--gold-soft); }

/* ---------- contact ---------- */

.contact__mail {
  display: inline-block;
  /* small enough at 320px that the address never has to break mid-word */
  font-size: clamp(1.15rem, 4.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.15;
  padding-bottom: 0.08em;
  background-image: linear-gradient(90deg, var(--gold-soft), var(--gold));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  word-break: break-word;
}

a.contact__mail {
  transition: background-size 0.55s var(--ease), color 0.25s var(--ease);
}

.contact__mail:hover { color: var(--gold-soft); background-size: 100% 1px; }

.contact__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: 2.25rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.contact__meta a { color: var(--muted); transition: color 0.25s var(--ease); }
.contact__meta a:hover { color: var(--gold-soft); }
.contact__meta span { display: inline-flex; align-items: center; gap: 0.5rem; }
.contact__meta svg { width: 14px; height: 14px; color: var(--muted-dim); flex-shrink: 0; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding: 3rem 0 2.5rem;
  font-size: 0.8125rem;
  color: var(--muted-dim);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.footer__links a { color: var(--muted); transition: color 0.25s var(--ease); }
.footer__links a:hover { color: var(--gold-soft); }

.footer__fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  line-height: 1.55;
}

.footer__fine p { margin: 0; max-width: 62ch; }

/* On a phone a six-across link row cannot fit, so stop pretending it can:
   two clean columns, with the long email given a row of its own. */
@media (max-width: 760px) {
  .footer { padding-top: 2.5rem; }

  .footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.25rem;
    width: 100%;
  }

  .footer__links a { padding: 0.15rem 0; }

  .footer__links a[href^="mailto:"] {
    grid-column: 1 / -1;
    word-break: break-word;
  }

  .footer__fine { gap: 1rem; }
  .footer__fine p { max-width: none; }
}

/* ---------- legal pages ---------- */

.legal {
  padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(4rem, 10vh, 7rem);
  max-width: 720px;
}

.legal h1 { font-size: clamp(2.25rem, 5vw, 3.1rem); margin-bottom: 0.75rem; }

.legal .updated {
  color: var(--muted-dim);
  font-size: 0.8125rem;
  margin-bottom: 3rem;
}

.legal h2 {
  font-size: 1.35rem;
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}

.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.5rem;
}

.legal p, .legal li {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.legal ul { padding-left: 1.1rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.45rem; }

.legal a {
  color: var(--paper);
  border-bottom: 1px solid rgba(233, 168, 40, 0.45);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.legal a:hover { color: var(--gold-soft); border-color: var(--gold); }

.legal address {
  font-style: normal;
  color: var(--paper);
  font-size: 0.9375rem;
  line-height: 1.75;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(18, 24, 38, 0.7), rgba(8, 11, 18, 0.4));
  margin-bottom: 1.25rem;
}

.legal .back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  border: 0;
}

.legal .back:hover { color: var(--gold-soft); }
.legal .back svg { width: 13px; height: 13px; }

.legal .note {
  font-size: 0.875rem;
  color: var(--muted-dim);
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--gold);
  background: rgba(233, 168, 40, 0.035);
  border-radius: 0 10px 10px 0;
}

.legal .note p:last-child { margin-bottom: 0; }

/* ---------- 404 ---------- */

.oops {
  min-height: 68vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 0;
}

.oops img {
  width: 210px;
  margin-bottom: 2rem;
  animation: float 9s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

.oops .lead { margin: 1rem auto 2.25rem; }

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

/* ---------- a11y ---------- */

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

/* visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 100;
  padding: 0.65rem 1.1rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 0 0 10px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: top 0.3s var(--ease);
}

.skip:focus { top: 0; }

/* ---------- reduced motion ----------

   The usual blanket reset (transition-duration: 0.01ms on *) is too blunt.
   It also flattens hover feedback, so buttons snap between states with no
   transition and the whole thing feels cheap.

   What the setting is actually asking us to drop is motion the user did not
   ask for: things that autoplay, loop, drift, or fly in. Hover and focus
   feedback is user-initiated, tiny (a 1–2px lift, a 1.03 scale) and never
   vestibular — so it stays, and stays smooth.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* 1. ambient, looping, autoplaying — all of it goes */
  .bg__grain,
  #stars { display: none; }

  .bg__glow,
  .pip::after,
  .dots i,
  .medal::before,
  .project__edge { animation: none !important; }

  /* 2. entrance animations: show the content, just don't fly it in.
        (They start at opacity:0, so they must be neutralised, not merely
        shortened — otherwise the content never becomes visible at all.) */
  .hero h1 .l > span,
  .hero .lead,
  .hero__cta,
  .medal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  /* 3. hover/focus transitions are deliberately left alone. */
}

/* ============================================================
   PHONE PERFORMANCE

   Must live at the end of the file: these override .nav and friends,
   which are declared later than the background stack, so an earlier
   media block would lose the cascade and silently do nothing.

   The decorative layers are the first thing to go, because they are
   decorative. The page must not crash.
   ============================================================ */
@media (max-width: 760px), (pointer: coarse) {
  .bg__grain,
  #stars { display: none; }

  /* keep the colour, drop the motion: a still gradient costs nothing */
  .bg__glow--navy,
  .bg__glow--gold { animation: none; }

  .bg__grid { opacity: 0.35; }

  /* backdrop-filter recomposites the whole viewport on every scroll frame */
  .nav,
  .nav.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(5, 7, 12, 0.94);
  }

  .nav__links {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* a filter on a large image forces its own rasterised layer */
  .medal img { filter: none; }
  .medal::before { animation: none; }
  .pip::after { animation: none; }
}