/* ==========================================================================
   Fonts — self-hosted, so the site makes no third-party requests and keeps
   working offline. Files live in assets/fonts/.
   ========================================================================== */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Jess Latham — site styles
   Mobile-first. Edit the tokens in :root to restyle the whole site.
   ========================================================================== */

:root {
  /* Colour */
  --ink:        #17120E;
  --ink-2:      #3B322B;
  --ink-3:      #6B5F56;
  --cream:      #FBF7F1;
  --sand:       #F2E9DD;
  --sand-2:     #E5D8C7;
  --rust:       #B0502F;
  --rust-deep:  #8C3D22;
  --gold:       #C68A3E;
  --white:      #FFFFFF;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem);
  --step-4:  clamp(2.2rem, 1.6rem + 3vw, 4.2rem);

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;

  --wrap: 1140px;
  --wrap-narrow: 720px;
  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(23,18,14,.06), 0 8px 28px rgba(23,18,14,.09);
  --shadow-lg: 0 2px 6px rgba(23,18,14,.08), 0 24px 60px rgba(23,18,14,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rust-deep); text-underline-offset: 3px; }
a:hover { color: var(--rust); }
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 600;
  margin: 0 0 var(--sp-3);
  letter-spacing: -0.015em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
  background: var(--ink); color: var(--cream); padding: .7rem 1.2rem;
  z-index: 200; border-radius: 0 0 var(--radius) var(--radius); font-size: var(--step--1);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--cream); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-3); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--sp-6); }
.section--tight { padding-block: var(--sp-5); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: var(--sand-2); }
.section--ink h2, .section--ink h3 { color: var(--cream); }
.section--ink a { color: var(--gold); }

.eyebrow {
  font-family: var(--body);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rust-deep);
  margin: 0 0 var(--sp-2);
}
.section--ink .eyebrow { color: var(--gold); }
.lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
.section--ink .lede { color: var(--sand-2); }
.measure { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .95em 1.7em; border-radius: var(--radius);
  border: 1.5px solid var(--rust); background: var(--rust); color: var(--white);
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--rust-deep); border-color: var(--rust-deep); color: var(--white); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.btn--light { background: transparent; color: var(--cream); border-color: rgba(251,247,241,.5); }
.btn--light:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn--wide { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Header / nav ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,247,241,.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--sand-2);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 62px;
}
.brand {
  font-family: var(--display); font-size: 1.22rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap;
}
.brand:hover { color: var(--rust-deep); }
.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; margin-right: -10px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); border-bottom: 1px solid var(--sand-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow);
}
.nav.is-open { display: block; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li + li { border-top: 1px solid var(--sand-2); }
.nav a {
  display: block; padding: .85rem .25rem;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--rust-deep); }
.nav .nav__cta { margin-top: var(--sp-3); }
.nav .nav__cta a { color: var(--white); text-align: center; }
.nav li.nav__cta { border-top: 0; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .nav {
    display: block; position: static; padding: 0; box-shadow: none;
    border: 0; background: none;
  }
  .nav ul { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.35rem); }
  .nav li + li { border-top: 0; }
  .nav a { padding: .4rem 0; font-size: .74rem; letter-spacing: .1em; }
  .nav a[aria-current="page"] { border-bottom: 2px solid var(--rust); }
  .nav .nav__cta { margin-top: 0; margin-left: .4rem; }
  .nav .nav__cta a { padding: .7em 1.3em; border-bottom: 0 !important; }
}

/* ---------- Hero ---------- */
.hero { background: var(--sand); overflow: hidden; }
.hero__inner { display: grid; gap: var(--sp-4); padding-block: var(--sp-5) var(--sp-6); align-items: center; }
.hero__name { font-size: var(--step-4); margin-bottom: var(--sp-2); }
.hero__tagline {
  font-family: var(--body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--rust-deep);
  margin: 0 0 var(--sp-3);
}
.hero__text p { max-width: 46ch; }
.hero__media { position: relative; max-width: 460px; margin-inline: auto; width: 100%; }
.hero__media picture, .hero__media img { position: relative; z-index: 1; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }
.hero__media::after {
  content: ""; position: absolute; z-index: 0;
  right: -14px; bottom: -14px; width: 58%; height: 58%;
  border: 1.5px solid var(--gold); border-radius: var(--radius-lg);
}
/* Three buttons side by side get cramped on a narrow phone, so stack them. */
@media (max-width: 27rem) {
  .hero .btn-row .btn { flex: 1 1 100%; }
}
/* The offset frame runs off the edge on a phone, so it only shows from tablet up. */
@media (max-width: 34rem) { .hero__media::after { display: none; } }
@media (min-width: 52rem) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); padding-block: var(--sp-6) var(--sp-7); }
  .hero__media { margin-inline: 0 auto; }
}

/* ---------- Page header (inner pages) ---------- */
.page-head { background: var(--ink); color: var(--sand-2); padding-block: var(--sp-5); }
.page-head h1 { color: var(--cream); margin-bottom: var(--sp-2); }
.page-head p { color: var(--sand-2); max-width: 56ch; margin: 0; }
.page-head .eyebrow { color: var(--gold); }

/* ---------- Cards / quick nav ---------- */
.grid { display: grid; gap: var(--sp-3); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--white); border: 1px solid var(--sand-2);
  border-radius: var(--radius-lg); padding: var(--sp-3);
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sand-2); }
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { font-size: var(--step--1); color: var(--ink-3); margin: 0; }
.card__q {
  font-family: var(--display); font-style: italic; color: var(--rust-deep);
  font-size: var(--step--1); margin: 0;
}
.card__more {
  margin-top: auto; font-size: var(--step--1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rust-deep);
}

/* ---------- Story blocks (About) ---------- */
.story { display: grid; gap: var(--sp-4); align-items: start; }
@media (min-width: 52rem) {
  .story { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .story--flip .story__media { order: -1; }
}
.story__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.story__media figcaption {
  font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-2); font-style: italic;
}
.story__media { margin: 0; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 1.5px; background: var(--sand-2);
}
.timeline li { position: relative; padding: 0 0 var(--sp-4) var(--sp-4); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cream); border: 2.5px solid var(--rust);
}
.timeline .t-year {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rust-deep); display: block; margin-bottom: 2px;
}
.timeline h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.timeline p { font-size: var(--step--1); color: var(--ink-3); margin: 0; }

/* ---------- Video ---------- */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: var(--ink); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-frame--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center; padding: var(--sp-3); color: var(--sand-2);
  border: 1.5px dashed rgba(242,233,221,.35);
}
.video-frame--placeholder strong { font-family: var(--display); color: var(--cream); font-size: var(--step-1); font-weight: 600; }
.video-frame--placeholder span { font-size: var(--step--1); max-width: 34ch; }
.video-card h3 { margin-top: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--step-1); }
.video-card p { font-size: var(--step--1); color: var(--ink-3); margin: 0; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 52rem) { .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); } }
.gallery button {
  padding: 0; border: 0; background: var(--sand-2); cursor: zoom-in;
  border-radius: var(--radius-lg); overflow: hidden; display: block; width: 100%;
}
.gallery img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.gallery button:hover img { transform: scale(1.045); opacity: .92; }

.lightbox {
  position: fixed; inset: 0; z-index: 150; display: none;
  align-items: center; justify-content: center; padding: var(--sp-3);
  background: rgba(23,18,14,.93);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox__close {
  position: absolute; top: .75rem; right: .75rem; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: rgba(251,247,241,.14); color: var(--cream);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: rgba(251,247,241,.26); }

/* ---------- Gigs ---------- */
.gig-list { list-style: none; margin: 0; padding: 0; }
.gig {
  display: grid; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0;
  border-top: 1px solid var(--sand-2);
}
.gig:last-child { border-bottom: 1px solid var(--sand-2); }
.gig__date {
  font-family: var(--display); font-size: var(--step-1); color: var(--rust-deep); font-weight: 600;
}
.gig__title { font-family: var(--display); font-size: var(--step-1); color: var(--ink); margin: 0; font-weight: 600; }
.gig__meta { font-size: var(--step--1); color: var(--ink-3); margin: 0; }
@media (min-width: 46rem) {
  .gig { grid-template-columns: 190px 1fr; align-items: baseline; }
}
.gig-empty { color: var(--ink-3); font-style: italic; }

/* ---------- CV table ---------- */
.cv-block + .cv-block { margin-top: var(--sp-5); }
.cv-block h3 {
  font-size: var(--step-1); padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--rust); margin-bottom: var(--sp-3);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cv { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 34rem; }
table.cv th {
  text-align: left; font-family: var(--body); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; font-size: .72rem;
  color: var(--ink-3); padding: 0 var(--sp-3) var(--sp-2) 0;
  border-bottom: 1px solid var(--sand-2); white-space: nowrap;
}
table.cv td { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--sand-2); vertical-align: top; }
table.cv td:first-child { font-weight: 600; color: var(--ink); }
table.cv em { color: var(--ink); font-style: italic; }

.pill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Liquid-glass chips — the actual glass-button look AND motion ported onto the
   <li>: translucent glass, masked gradient border ring that sweeps on hover,
   a sheen that sweeps across, scale on hover and a press tilt. */
.pill-list li {
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  --border-width: clamp(1px, .0625em, 3px);
  --anim-time: .4s;
  --anim-ease: cubic-bezier(.25, 1, .5, 1);
  --angle-1: -75deg;
  --angle-2: -45deg;
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  border: 0;
  border-radius: 9999px;
  padding: .55em 1.15em;
  font-size: var(--step--1);
  color: oklch(from var(--foreground) l c h / 90%);
  -webkit-backdrop-filter: blur(clamp(1px, .125em, 4px));
  backdrop-filter: blur(clamp(1px, .125em, 4px));
  background: linear-gradient(-75deg,
    oklch(from var(--background) l c h / 5%),
    oklch(from var(--background) l c h / 20%),
    oklch(from var(--background) l c h / 5%));
  box-shadow:
    inset 0 .125em .125em oklch(from var(--foreground) l c h / 5%),
    inset 0 -.125em .125em oklch(from var(--background) l c h / 50%),
    0 .25em .125em -.125em oklch(from var(--foreground) l c h / 20%),
    0 0 .1em .25em inset oklch(from var(--background) l c h / 20%),
    0 .3em .5em -.22em oklch(from var(--foreground) l c h / 22%);
  transition:
    transform var(--anim-time) var(--anim-ease),
    box-shadow var(--anim-time) var(--anim-ease),
    -webkit-backdrop-filter var(--anim-time) var(--anim-ease),
    backdrop-filter var(--anim-time) var(--anim-ease);
}
/* Sheen sweep across the face. */
.pill-list li::before {
  content: "";
  position: absolute; inset: var(--border-width);
  z-index: 1; pointer-events: none;
  border-radius: 9999px;
  background: linear-gradient(var(--angle-2),
    transparent 0%, oklch(from var(--background) l c h / 55%) 40% 50%, transparent 55%);
  background-size: 200% 200%;
  background-position: 0%;
  mix-blend-mode: screen;
  transition: background-position calc(var(--anim-time) * 1.25) var(--anim-ease),
              --angle-2 calc(var(--anim-time) * 1.25) var(--anim-ease);
}
/* Gradient border ring that rotates on hover. */
.pill-list li::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2; pointer-events: none;
  border-radius: 9999px;
  padding: var(--border-width);
  background:
    conic-gradient(from var(--angle-1) at 50% 50%,
      oklch(from var(--foreground) l c h / 50%) 0%, transparent 5% 40%,
      oklch(from var(--foreground) l c h / 50%) 50%, transparent 60% 95%,
      oklch(from var(--foreground) l c h / 50%) 100%),
    linear-gradient(180deg,
      oklch(from var(--background) l c h / 50%),
      oklch(from var(--background) l c h / 50%));
  -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: --angle-1 .5s ease;
}
.pill-list li:hover {
  transform: scale(.975);
  -webkit-backdrop-filter: blur(.01em);
  backdrop-filter: blur(.01em);
  box-shadow:
    inset 0 .125em .125em oklch(from var(--foreground) l c h / 5%),
    inset 0 -.125em .125em oklch(from var(--background) l c h / 50%),
    0 .15em .05em -.1em oklch(from var(--foreground) l c h / 25%),
    0 0 .05em .1em inset oklch(from var(--background) l c h / 50%),
    0 .4em .6em -.2em oklch(from var(--foreground) l c h / 24%);
}
.pill-list li:hover::before { background-position: 25%; }
.pill-list li:hover::after  { --angle-1: -125deg; }
.pill-list li:active { transform: perspective(600px) rotateX(20deg); }
.pill-list li:active::before { --angle-2: -15deg; background-position: 50% 15%; }
.pill-list li:active::after  { --angle-1: -75deg; }
@media (prefers-reduced-motion: reduce) {
  .pill-list li, .pill-list li::before, .pill-list li::after { transition: none; }
}
.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li { position: relative; padding-left: 1.65rem; margin-bottom: var(--sp-2); }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--rust);
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--white); border: 1px solid var(--sand-2);
  border-radius: var(--radius-lg); padding: var(--sp-3); box-shadow: var(--shadow);
}
@media (min-width: 46rem) { .form-card { padding: var(--sp-4); } }
.field { margin-bottom: var(--sp-3); }
.field label { display: block; font-size: var(--step--1); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-1); }
.field .hint { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--body); font-size: var(--step-0); color: var(--ink);
  background: var(--cream); border: 1px solid var(--sand-2); border-radius: var(--radius);
  padding: .75em .85em; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(176,80,47,.14);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field-row { display: grid; gap: var(--sp-3); }
@media (min-width: 40rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.req { color: var(--rust); }
.form-note { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius); display: none; font-size: var(--step--1); }
.form-status.is-error { display: block; background: #FBEAE4; border: 1px solid #E2B6A4; color: #7A3319; }
.form-status.is-ok { display: block; background: #E9F1E7; border: 1px solid #B8CDB2; color: #35512C; }
.form-setup {
  background: #FFF6E2; border: 1px solid #E8CE93; border-radius: var(--radius);
  padding: var(--sp-3); font-size: var(--step--1); margin-bottom: var(--sp-4);
}
.form-setup strong { color: #7A5A16; }

/* ---------- Socials ---------- */
.social-row { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .social-row { grid-template-columns: repeat(2, 1fr); } }
.social {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid rgba(242,233,221,.22); border-radius: var(--radius-lg);
  text-decoration: none; color: var(--sand-2);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.social:hover { background: rgba(251,247,241,.07); border-color: rgba(242,233,221,.42); color: var(--cream); }
.social svg { flex: 0 0 auto; width: 26px; height: 26px; fill: var(--gold); }
.social strong { display: block; font-family: var(--display); font-size: var(--step-1); color: var(--cream); font-weight: 600; }
.social span { font-size: var(--step--1); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--rust); color: var(--white); }
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,.92); max-width: 50ch; }
.cta-band .btn { background: var(--white); border-color: var(--white); color: var(--rust-deep); }
.cta-band .btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--sand-2); padding-block: var(--sp-5) var(--sp-4); font-size: var(--step--1); }
.footer__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-5); } }
.footer h4 {
  color: var(--cream); font-family: var(--body); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--sp-2);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--sp-1); }
.footer a { color: var(--sand-2); text-decoration: none; }
.footer a:hover { color: var(--gold); text-decoration: underline; }
.footer__brand { font-family: var(--display); font-size: var(--step-2); color: var(--cream); margin: 0 0 var(--sp-2); }
.footer__legal {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid rgba(242,233,221,.16); color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); justify-content: space-between;
}
.footer__legal p { margin: 0; color: rgba(229,216,199,.62); font-size: .78rem; }

/* ---------- Print (CV page) ---------- */
@media print {
  .header, .footer, .cta-band, .no-print, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .page-head { background: #fff; color: #000; padding-block: 0 1rem; }
  .page-head h1, .page-head p, .page-head .eyebrow { color: #000; }
  .section { padding-block: .75rem; }
  table.cv { min-width: 0; font-size: 9.5pt; }
  .cv-block h3 { border-bottom-color: #000; }
  a { color: #000; text-decoration: none; }
}

/* ==========================================================================
   Motion
   The animation itself is driven by Motion (motion.dev), the vanilla build of
   Framer Motion, in assets/js/motion.min.js.

   CSS's only job here is to hide the elements Motion is about to animate, so
   there is no flash of content before the animation starts. The .js-motion
   class is set by a tiny inline script in each page's <head>, and only when
   the visitor has NOT asked for reduced motion. So with JavaScript off, or
   with reduced motion on, nothing below applies and the page is simply there.
   ========================================================================== */

.js-motion .section > .wrap > *,
.js-motion .hero__text > *,
.js-motion .hero__media,
.js-motion .grid > *,
.js-motion .gallery > *,
.js-motion .timeline > li,
.js-motion .social-row > * { opacity: 0; }

/* Safety net: if Motion fails to load for any reason, everything appears. */
.js-motion.motion-failed .section > .wrap > *,
.js-motion.motion-failed .hero__text > *,
.js-motion.motion-failed .hero__media,
.js-motion.motion-failed .grid > *,
.js-motion.motion-failed .gallery > *,
.js-motion.motion-failed .timeline > li,
.js-motion.motion-failed .social-row > * { opacity: 1 !important; transform: none !important; }

/* ---------- Hover and state, handled in CSS because it is cheaper ---------- */

/* Underline that draws in on hover */
.card__more { position: relative; display: inline-block; }
.card__more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--rust); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
a.card:hover .card__more::after { transform: scaleX(1); }

/* Buttons: gentle press */
.btn:active { transform: translateY(1px); }

/* Header shadow once the page scrolls */
.header { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.header.is-stuck { box-shadow: 0 1px 0 var(--sand-2), 0 6px 22px rgba(23,18,14,.07); }

/* Timeline markers fill as they arrive */
.timeline li::before { transition: background .45s var(--ease); }

/* ==========================================================================
   Single-page additions
   - Offset anchored sections so they clear the sticky header
   - Glass hero buttons — the real "Glass Button" component by Hossain Jahed
     (EaseMize UI Registry, 21st.dev), ported verbatim from its compiled CSS.
     The component needs the wrap > button > text + separate shadow layers,
     so the hero markup uses that structure with these exact class names.
   ========================================================================== */
main [id] { scroll-margin-top: 78px; }

/* Registered so the animated gradient angles can transition (from source). */
@property --angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --angle-2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }

/* --- Geometry + reset that the component's Tailwind classes provided --- */
.glass-button-wrap {
  /* colour tokens the component reads (demo values: white glass on dark ink) */
  --background: oklch(100% 0 0);
  --foreground: oklch(14.5% 0 0);
  display: inline-flex;
  border-radius: 9999px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.glass-button-wrap:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.glass-button {
  display: block;
  box-sizing: border-box;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 1rem;      /* text-base */
  font-weight: 500;     /* font-medium */
}
.glass-button-text {
  display: block;
  position: relative;
  padding: 0.875rem 1.5rem;   /* py-3.5 px-6 */
  letter-spacing: -0.05em;    /* tracking-tighter */
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
/* Three CTAs stack on very narrow phones, matching the old buttons. */
@media (max-width: 34rem) {
  .hero .btn-row .glass-button-wrap { flex: 1 1 100%; }
  .hero .btn-row .glass-button { width: 100%; }
  .hero .btn-row .glass-button-text { text-align: center; }
}

/* --- Verbatim component CSS (cdn.21st.dev/easemize/glass-button) --- */
.glass-button-wrap{--anim-time:.4s;--anim-ease:cubic-bezier(.25,1,.5,1);--border-width:clamp(1px,.0625em,4px);z-index:2;transform-style:preserve-3d;transition:transform var(--anim-time)var(--anim-ease);position:relative}.glass-button-wrap:has(.glass-button:active){transform:rotateX(25deg)}.glass-button-shadow{--shadow-cutoff-fix:2em;width:calc(100% + var(--shadow-cutoff-fix));height:calc(100% + var(--shadow-cutoff-fix));top:calc(0% - var(--shadow-cutoff-fix)/2);left:calc(0% - var(--shadow-cutoff-fix)/2);filter:blur(clamp(2px,.125em,12px));transition:filter var(--anim-time)var(--anim-ease);pointer-events:none;position:absolute}.glass-button-shadow:after{content:"";background:linear-gradient(180deg,oklch(from var(--foreground)l c h/20%),oklch(from var(--foreground)l c h/10%));width:calc(100% - var(--shadow-cutoff-fix) - .25em);height:calc(100% - var(--shadow-cutoff-fix) - .25em);top:0;right:0;bottom:0;left:0;top:calc(var(--shadow-cutoff-fix) - .5em);left:calc(var(--shadow-cutoff-fix) - .875em);box-sizing:border-box;transition:all var(--anim-time)var(--anim-ease);opacity:1;border-radius:9999px;padding:.125em;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0,#000 0),linear-gradient(#000 0,#000 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.glass-button{-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim-time)var(--anim-ease);background:linear-gradient(-75deg,oklch(from var(--background)l c h/5%),oklch(from var(--background)l c h/20%),oklch(from var(--background)l c h/5%));box-shadow:inset 0 .125em .125em oklch(from var(--foreground)l c h/5%),inset 0 -.125em .125em oklch(from var(--background)l c h/50%),0 .25em .125em -.125em oklch(from var(--foreground)l c h/20%),0 0 .1em .25em inset oklch(from var(--background)l c h/20%),0 0 oklch(from var(--background)l c h)}.glass-button:hover{-webkit-backdrop-filter:blur(.01em);backdrop-filter:blur(.01em);box-shadow:inset 0 .125em .125em oklch(from var(--foreground)l c h/5%),inset 0 -.125em .125em oklch(from var(--background)l c h/50%),0 .15em .05em -.1em oklch(from var(--foreground)l c h/25%),0 0 .05em .1em inset oklch(from var(--background)l c h/50%),0 0 oklch(from var(--background)l c h);transform:scale(.975)}.glass-button-text{color:oklch(from var(--foreground)l c h/90%);text-shadow:0em .25em .05em oklch(from var(--foreground)l c h/10%);transition:all var(--anim-time)var(--anim-ease)}.glass-button:hover .glass-button-text{text-shadow:.025em .025em .025em oklch(from var(--foreground)l c h/12%)}.glass-button-text:after{content:"";width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width)/2);left:calc(0% + var(--border-width)/2);box-sizing:border-box;background:linear-gradient(var(--angle-2),transparent 0%,oklch(from var(--background)l c h/50%)40% 50%,transparent 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;transition:background-position calc(var(--anim-time)*1.25)var(--anim-ease),--angle-2 calc(var(--anim-time)*1.25)var(--anim-ease);background-position:0%;background-size:200% 200%;border-radius:9999px;display:block;position:absolute;overflow:clip}.glass-button:hover .glass-button-text:after{background-position:25%}.glass-button:active .glass-button-text:after{--angle-2:-15deg;background-position:50% 15%}.glass-button:after{content:"";z-index:1;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:0;right:0;bottom:0;left:0;top:calc(0% - var(--border-width)/2);left:calc(0% - var(--border-width)/2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1)at 50% 50%,oklch(from var(--foreground)l c h/50%)0%,transparent 5% 40%,oklch(from var(--foreground)l c h/50%)50%,transparent 60% 95%,oklch(from var(--foreground)l c h/50%)100%),linear-gradient(180deg,oklch(from var(--background)l c h/50%),oklch(from var(--background)l c h/50%));transition:all var(--anim-time)var(--anim-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width)/2) oklch(from var(--background)l c h/50%);border-radius:9999px;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0,#000 0),linear-gradient(#000 0,#000 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.glass-button:hover:after{--angle-1:-125deg}.glass-button:active:after{--angle-1:-75deg}.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow{filter:blur(clamp(2px,.0625em,6px))}.glass-button-wrap:has(.glass-button:hover) .glass-button-shadow:after{top:calc(var(--shadow-cutoff-fix) - .875em);opacity:1}.glass-button-wrap:has(.glass-button:active) .glass-button-shadow{filter:blur(clamp(2px,.125em,12px))}.glass-button-wrap:has(.glass-button:active) .glass-button-shadow:after{top:calc(var(--shadow-cutoff-fix) - .5em);opacity:.75}.glass-button-wrap:has(.glass-button:active) .glass-button-text{text-shadow:.025em .25em .05em oklch(from var(--foreground)l c h/12%)}.glass-button-wrap:has(.glass-button:active) .glass-button{box-shadow:inset 0 .125em .125em oklch(from var(--foreground)l c h/5%),inset 0 -.125em .125em oklch(from var(--background)l c h/50%),0 .125em .125em -.125em oklch(from var(--foreground)l c h/20%),0 0 .1em .25em inset oklch(from var(--background)l c h/20%),0 .225em .05em oklch(from var(--foreground)l c h/5%),0 .25em oklch(from var(--background)l c h/75%),inset 0 .25em .05em oklch(from var(--foreground)l c h/15%)}@media (hover:none) and (pointer:coarse){.glass-button:after,.glass-button:hover:after,.glass-button:active:after{--angle-1:-75deg}.glass-button .glass-button-text:after,.glass-button:active .glass-button-text:after{--angle-2:-45deg}}

/* --- Nav "Enquire" glass CTA: a smaller glass pill sized for the header --- */
.glass-button-text { text-transform: none; }           /* keep normal case everywhere */
.glass-button-wrap--sm .glass-button { font-size: .8rem; }
.glass-button-wrap--sm .glass-button-text { padding: .55rem 1.15rem; letter-spacing: normal; }
/* Stop the generic ".nav a" rules from flattening the glass structure. */
.nav .nav__cta a.glass-button-wrap { display: inline-flex; padding: 0; color: inherit; }
.nav .nav__cta a.glass-button-wrap .glass-button-text { text-align: center; }

/* ==========================================================================
   Hero with the Mesh Drift shader background
   ========================================================================== */
.hero { position: relative; background: #1b140f; }   /* warm-dark fallback under/around the shader */
.hero-shader {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; border: 0;
}
/* Legibility scrim: a flat darken everywhere + a stronger wash on the text side */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,13,9,.68) 0%, rgba(20,13,9,.42) 42%, rgba(20,13,9,.10) 75%, rgba(20,13,9,0) 100%),
    linear-gradient(rgba(20,13,9,.16), rgba(20,13,9,.16));
}
.hero .hero__inner { position: relative; z-index: 2; }
.hero .hero__name   { color: var(--cream); }
.hero .hero__tagline{ color: var(--gold); }
.hero .lede         { color: rgba(251,247,241,.92); }

/* --- Glass submit buttons on the enquiry forms (full-width) --- */
/* Make the wrap usable as a <button> element too, not just an <a>. */
button.glass-button-wrap { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.glass-button-wrap--wide { display: flex; width: 100%; }
.glass-button-wrap--wide .glass-button { width: 100%; }
.glass-button-wrap--wide .glass-button-text { text-align: center; white-space: normal; }
.glass-button-wrap[disabled] { cursor: default; opacity: .85; }

/* Hero glass buttons over the dark shader: keep the glass translucent (no
   brightened backdrop) and use light, bolder text so the labels stay legible. */
.hero .glass-button .glass-button-text {
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.4);
}