/* ==========================================================================
   Keno Brechlin — editorial travel-journal aesthetic
   Navy ink · rare amber accent · olive tags · paper base · sky tint
   ========================================================================== */

:root {
  /* Brand palette (client-provided) */
  --paper: #ffffff;
  --sky: #77bdd3;
  --navy: #001c47;
  --gold: #e4a359;
  --olive: #506546;

  /* Derived surfaces / states, tinted toward navy */
  --paper-2: #ffffff;
  --paper-3: #ffffff;
  --ink: var(--navy);
  --ink-70: rgba(0, 28, 71, 0.7);
  --ink-45: rgba(0, 28, 71, 0.45);
  --ink-15: rgba(0, 28, 71, 0.15);
  --ink-08: rgba(0, 28, 71, 0.08);
  --sky-soft: #eef9fe;
  --gold-deep: #c9843b;
  --olive-deep: #3f5138;
  --on-navy: #f4f6fb;

  /* Type */
  --font-title: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Times New Roman", Times, Georgia, serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale (~1.28 ratio) */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --step-5: clamp(3.4rem, 2.2rem + 6vw, 8.5rem);

  /* Spacing scale (4pt) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: clamp(4rem, 2rem + 9vw, 9rem);

  --measure: 68ch;
  --radius: 2px;
  --radius-lg: 6px;
  --border: 1px solid var(--ink-15);
  --shadow-soft: 0 20px 50px -30px rgba(0, 28, 71, 0.5);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 4.5rem;
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
}

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

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

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul {
  list-style: none;
  padding: 0;
}

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

/* ------------------------------------------------------------- typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-title);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}

.kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  letter-spacing: 0.01em;
  color: var(--olive);
}

.serif-quote {
  font-family: var(--font-serif);
  font-style: italic;
}

.eyebrow {
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-45);
}

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

.section {
  padding-block: var(--space-5xl);
}

.section--tint {
  background: var(--sky-soft);
}

.section--navy {
  background: var(--navy);
  color: var(--on-navy);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--on-navy);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
}

.section-head h2 {
  font-size: var(--step-4);
  max-width: 20ch;
}

.section-lede,
.section-head > p {
  max-width: var(--measure);
  color: var(--ink-70);
}

/* --------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--on-navy);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease-out), background 0.3s, color 0.3s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: var(--navy);
}

.btn--gold:hover {
  --btn-bg: var(--gold-deep);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border: 1.5px solid var(--navy);
}

.btn--ghost:hover {
  --btn-bg: var(--navy);
  --btn-fg: var(--on-navy);
}

.section--navy .btn--ghost {
  --btn-fg: var(--on-navy);
  border-color: rgba(244, 246, 251, 0.5);
}

.section--navy .btn--ghost:hover {
  --btn-bg: var(--on-navy);
  --btn-fg: var(--navy);
}

.link-underline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-bottom: 2px;
  border: none;
  border-bottom: 1.5px solid currentColor;
  background: none;
  cursor: pointer;
  transition: color 0.3s;
}

.link-underline:hover {
  color: var(--olive);
}

/* ------------------------------------------------- editorial primitives */
/* Shared Swiss-editorial section language: a technical code line over a fine
   rule, an assertive asymmetric heading, and an optional measured lede. Used
   across the lower page so every section speaks the hero's viewfinder dialect. */
.ed-head {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-3xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-15);
}

/* Title-only headers (no kicker line): carry the gold tick that used to live
   on .ed-code so the ruled header keeps its viewfinder accent and hierarchy. */
.ed-head:not(:has(.ed-code)) {
  gap: var(--space-sm);
  padding-top: var(--space-lg);
}

.ed-head:not(:has(.ed-code))::before {
  content: "";
  width: clamp(1.4rem, 4vw, 2.4rem);
  height: 2px;
  background: var(--gold);
}

.section--navy .ed-head:not(:has(.ed-code))::before {
  background: var(--gold);
}

.ed-code {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-45);
  font-variant-numeric: tabular-nums;
}

.ed-code::before {
  content: "";
  width: clamp(1.4rem, 4vw, 2.4rem);
  height: 1px;
  background: var(--gold);
}

.ed-title {
  font-size: var(--step-4);
  max-width: 18ch;
  letter-spacing: -0.03em;
  line-height: 0.98;
}

.ed-lede {
  max-width: var(--measure);
  color: var(--ink-70);
}

.section--navy .ed-head {
  border-top-color: rgba(244, 246, 251, 0.22);
}

.section--navy .ed-code {
  color: rgba(244, 246, 251, 0.6);
}

.section--navy .ed-code::before {
  background: var(--gold);
}

.section--navy .ed-lede {
  color: rgba(244, 246, 251, 0.78);
}

/* --------------------------------------------------------------- header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 201;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.45s var(--ease-out), opacity 0.3s ease,
    background 0.4s, box-shadow 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  background: rgba(248, 248, 248, 0.86);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--ink-08);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - (2 * var(--page-gutter)));
  max-width: none;
}

.brand {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand span {
  color: var(--navy);
}

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

.nav-links a {
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-70);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.3s;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--navy);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  transform: scaleX(1);
}

.nav-toggle {
  display: none;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  touch-action: manipulation;
}

.nav-toggle span {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 2px;
  background: var(--navy);
  transform: translate3d(-50%, 0, 0);
  transform-origin: center;
  transition: transform 0.42s var(--ease-out), opacity 0.22s, width 0.3s var(--ease-out);
  will-change: transform;
}

.nav-toggle span:nth-child(1) {
  top: 15px;
}

.nav-toggle span:nth-child(2) {
  top: 21px;
  width: 18px;
}

.nav-toggle span:nth-child(3) {
  top: 27px;
}

body.nav-open .nav-toggle span:nth-child(1) {
  transform: translate3d(-50%, 6px, 0) rotate(45deg);
  width: 24px;
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
  transform: translate3d(-50%, 0, 0) scaleX(0.2);
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translate3d(-50%, -6px, 0) rotate(-45deg);
  width: 24px;
}

/* --------------------------------------------------------- opening statement */
.portfolio-intro {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + clamp(2rem, 6vh, 5rem)) var(--page-gutter)
    clamp(2rem, 6vh, 4.5rem);
  background: var(--paper);
}

.portfolio-intro__inner {
  --intro-content-width: min(82vw, 68rem);
  width: 100%;
}

.portfolio-intro__inner.has-photo {
  --intro-content-width: min(72vw, 76svh, 58rem);
}

.portfolio-intro.has-photo {
  display: block;
  min-height: 175svh;
  padding: 0;
}

.portfolio-intro__inner.has-photo {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100svh;
  padding: 0;
  overflow: hidden;
}

.portfolio-intro__photo {
  width: var(--intro-content-width);
  height: var(--intro-photo-height, calc(100svh - 2rem));
  margin: 0 auto;
}
.portfolio-intro__photo img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border: 0;
}

.portfolio-intro__progress {
  display: none;
}
.intro-playing .portfolio-intro__progress::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--gold-deep);
  transform-origin: left;
  animation: introProgress 3.1s linear both;
}
.intro-playing .portfolio-intro__name span {
  animation: introName 1.15s var(--ease-out) both;
}
.intro-playing .portfolio-intro__name span:last-child { animation-delay: 0.22s; }
.intro-playing .portfolio-intro__footer { animation: introName 1s 0.55s var(--ease-out) both; }
@keyframes introName {
  from { opacity: 0; transform: translateY(0.3em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes introProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
body.overlay-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.portfolio-intro__name {
  position: absolute;
  left: 50%;
  top: var(--intro-name-top, calc(50% + 1rem));
  bottom: auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.16em;
  width: var(--intro-content-width);
  margin: 0;
  font-size: clamp(3rem, 8vw, 7.5rem);
  font-weight: 800;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--intro-copy-opacity, 0);
  transform: translateX(-50%) translateY(var(--intro-copy-translate, 18px));
  transition: opacity 0.12s linear;
}

.portfolio-intro__name span:last-child {
  align-self: baseline;
}

.portfolio-intro__name span {
  display: inline-block;
  font-style: normal;
  line-height: inherit;
}

.portfolio-intro__inner.has-photo .portfolio-intro__name {
  font-size: clamp(2.5rem, 7svh, 6rem);
}

.portfolio-intro__footer {
  position: absolute;
  left: 50%;
  top: var(--intro-footer-top, calc(50% + 5rem));
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--intro-content-width);
  margin: 0;
  padding-top: 0;
  border-top: 0;
  color: var(--sky);
  font-family: var(--font-title);
  font-size: clamp(0.68rem, 1vw, 0.78rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
  opacity: var(--intro-copy-opacity, 0);
  transform: translateX(-50%) translateY(var(--intro-copy-translate, 18px));
  transition: opacity 0.12s linear;
}

.portfolio-intro__footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  transition: color 0.25s ease;
}

.portfolio-intro__footer a span:last-child {
  color: var(--gold-deep);
  font-size: 1.25rem;
  transition: transform 0.35s var(--ease-out);
}

.portfolio-intro__footer a:hover {
  color: var(--gold-deep);
}

.portfolio-intro__footer a:hover span:last-child {
  transform: translateY(0.3rem);
}

/* ------------------------------------------------------ visual portfolio index */
.portfolio-index {
  position: relative;
  --portfolio-top-gap: clamp(1.25rem, 3vw, 2.75rem);
  --portfolio-bottom-gap: clamp(1.25rem, 2.5vw, 2.25rem);
  height: 100svh;
  padding: calc(var(--nav-h) + var(--portfolio-top-gap)) var(--page-gutter)
    var(--portfolio-bottom-gap);
  background: var(--paper);
  overflow: hidden;
}

.portfolio-browser {
  display: grid;
  grid-template-columns: clamp(8.5rem, 12vw, 11rem) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  height: 100%;
  min-height: 0;
}

.portfolio-scroll-controls {
  position: absolute;
  left: calc(
    var(--page-gutter) + clamp(8.5rem, 12vw, 11rem) +
      clamp(1.5rem, 4vw, 4.5rem)
  );
  right: var(--page-gutter);
  top: calc(var(--nav-h) + var(--portfolio-top-gap));
  bottom: calc(var(--portfolio-bottom-gap) + var(--nav-h));
  z-index: 2;
  display: block;
  pointer-events: none;
}

.portfolio-scroll-button {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ink-15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.portfolio-scroll-button[data-gallery-prev] {
  left: 0;
}

.portfolio-scroll-button[data-gallery-next] {
  right: 0;
}

.portfolio-scroll-button:hover,
.portfolio-scroll-button:focus-visible {
  border-color: var(--gold);
  color: var(--gold-deep);
}

.portfolio-scroll-button:disabled {
  opacity: 0.52;
  cursor: default;
}

.portfolio-scroll-count {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  min-width: 3.3rem;
  padding: 0.3rem 0.55rem;
  background: rgba(255, 255, 255, 0.94);
  font-family: var(--font-title);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  pointer-events: none;
}

.portfolio-categories {
  min-width: 0;
}

.portfolio-categories__label {
  display: block;
  margin-bottom: var(--space-md);
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.portfolio-categories .filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  border: 0;
  overflow: visible;
}

.portfolio-categories .filter-btn {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0.55rem 0 0.55rem 0.85rem;
  border: 0;
  border-left: 2px solid var(--ink-08);
  text-align: left;
}

.portfolio-categories .filter-btn.is-active {
  border-left-color: var(--gold);
}

.portfolio-index__intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: clamp(2.5rem, 6vw, 5.5rem);
}

.portfolio-index__intro h1 {
  max-width: 16ch;
  margin-top: 0.35rem;
  font-size: clamp(1.35rem, 2.2vw, 2.4rem);
  line-height: 1.02;
}

.portfolio-index__eyebrow,
.portfolio-index__intro > p {
  font-family: var(--font-title);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink-45);
}

.portfolio-index__intro > p {
  max-width: 28ch;
  text-align: right;
}

.portfolio-masonry {
  height: 100%;
  min-width: 0;
  column-width: clamp(12rem, 17vw, 17rem);
  column-count: auto;
  column-fill: auto;
  column-gap: clamp(1.25rem, 3.2vw, 3.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-15) transparent;
  padding-bottom: 0.7rem;
}

.portfolio-masonry > * {
  width: 100%;
  margin: 0 0 clamp(1.1rem, 2vw, 2rem);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.portfolio-masonry::-webkit-scrollbar {
  height: 4px;
}

.portfolio-masonry::-webkit-scrollbar-thumb {
  background: var(--ink-15);
  border-radius: 999px;
}

.portfolio-masonry .gallery-item {
  display: block;
  width: 100%;
  text-align: left;
}

/* Images always use their intrinsic ratio. There is deliberately no fixed
   height, aspect-ratio, object-fit: cover, or clipping in this layout. */
.portfolio-masonry .gallery-media,
.portfolio-masonry .gallery-media img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  overflow: visible;
}

.portfolio-masonry .gallery-media img {
  max-height: calc(
    100svh - var(--nav-h) - var(--portfolio-top-gap) -
      var(--portfolio-bottom-gap) - 1rem
  );
  margin-inline: auto;
  transition: opacity 0.3s ease;
}

.portfolio-masonry .gallery-item:hover .gallery-media img,
.portfolio-masonry .gallery-item:focus-visible .gallery-media img {
  filter: none;
  transform: none;
  opacity: 0.82;
}

.portfolio-masonry .g-meta {
  margin-top: 0.65rem;
  padding-top: 0.5rem;
}

/* Desktop is a single photographic ribbon. Every image receives the same
   available height, so wide landscape work stays large and cinematic while
   its natural aspect ratio remains untouched. */
@media (min-width: 821px) {
  .portfolio-masonry {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3.2vw, 3.5rem);
    column-width: auto;
    column-count: initial;
    padding-bottom: 4.5rem;
  }

  .portfolio-masonry > *,
  .portfolio-masonry .gallery-item {
    flex: 0 0 auto;
    width: auto;
    height: min(calc(100% - 5.2rem), 61vh);
    margin: 0;
  }

  .portfolio-masonry .gallery-media,
  .portfolio-masonry .gallery-media img {
    width: auto;
    height: 100%;
    max-width: none;
    max-height: 100%;
  }

  .portfolio-masonry .portfolio-empty {
    width: 100%;
    min-width: 100%;
  }
}

.portfolio-directory,
.portfolio-empty {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(13rem, 24vw, 21rem);
  padding: clamp(1rem, 2vw, 1.6rem);
  overflow: hidden;
  color: var(--navy);
}

.course-launch-empty {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--ink-15);
  border-bottom: 1px solid var(--ink-15);
}

.course-launch-empty p {
  max-width: 34ch;
  font-size: var(--step-1);
  color: var(--olive);
}

.portfolio-directory {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.portfolio-directory:hover,
.portfolio-directory:focus-visible {
  transform: translateY(-0.35rem);
  box-shadow: 0 24px 42px -30px rgba(0, 28, 71, 0.75);
}

.portfolio-directory span,
.portfolio-empty span,
.portfolio-directory small,
.portfolio-empty small {
  font-family: var(--font-title);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.portfolio-directory strong,
.portfolio-empty strong {
  margin-block: auto;
  font-family: var(--font-title);
  font-size: clamp(1.55rem, 2.5vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.portfolio-directory small,
.portfolio-empty small {
  max-width: 22ch;
  letter-spacing: 0.08em;
}

.portfolio-directory--booking {
  min-height: clamp(17rem, 31vw, 27rem);
  background: var(--navy);
  color: var(--on-navy);
}

.portfolio-directory--courses {
  background: var(--gold);
}

.portfolio-directory--about {
  min-height: clamp(11rem, 19vw, 17rem);
  background: var(--sky-soft);
}

.portfolio-directory--contact {
  min-height: clamp(15rem, 26vw, 23rem);
  background: var(--olive);
  color: var(--on-navy);
}

.portfolio-empty {
  min-height: clamp(18rem, 34vw, 30rem);
  border: 1px solid var(--ink-15);
  background:
    linear-gradient(135deg, transparent 0 49.8%, var(--ink-08) 50%, transparent 50.2%),
    var(--paper);
}

@media (max-width: 820px) {
  .portfolio-scroll-controls {
    display: none;
  }

  .portfolio-index {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .portfolio-browser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-lg);
    height: auto;
  }

  .portfolio-categories {
    min-height: 0;
  }

  .portfolio-categories__label {
    margin-bottom: var(--space-xs);
  }

  .portfolio-categories .filters {
    flex-direction: row;
    border-bottom: 1px solid var(--ink-15);
    overflow-x: auto;
  }

  .portfolio-categories .filter-btn {
    width: auto;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-left: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
  }

  .portfolio-categories .filter-btn.is-active {
    border-bottom-color: var(--gold);
  }

  .portfolio-masonry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    height: auto;
    overflow: visible;
    padding-bottom: 0;
  }

  .portfolio-masonry > *,
  .portfolio-masonry .gallery-item {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .portfolio-masonry .gallery-media,
  .portfolio-masonry .gallery-media img {
    width: 100%;
    height: auto;
  }

  .portfolio-masonry .gallery-media img {
    max-height: none;
  }
}

@media (max-width: 620px) {
  :root {
    --page-gutter: 1.1rem;
  }

  .portfolio-intro {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }

  .portfolio-intro.has-photo {
    min-height: 135svh;
    padding: 0;
  }

  .portfolio-intro__inner,
  .portfolio-intro__inner.has-photo {
    --intro-content-width: 100%;
  }

  .portfolio-intro__inner.has-photo {
    justify-content: flex-start;
    height: 100svh;
    padding: 0.75rem 0 0;
  }

  .portfolio-intro__photo {
    flex: 0 0 auto;
  }

  .portfolio-intro__name {
    gap: 0.13em;
    font-size: clamp(1.75rem, 8.2vw, 3.5rem);
    line-height: 0.92;
    letter-spacing: -0.065em;
  }

  .portfolio-intro__inner.has-photo .portfolio-intro__name {
    font-size: clamp(1.75rem, 8.2vw, 3.5rem);
  }

  .portfolio-intro__footer {
    margin-top: 0.65rem;
    padding-top: 0;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  .portfolio-intro__footer p {
    max-width: none;
    white-space: nowrap;
    font-size: inherit;
    letter-spacing: inherit;
  }

  .portfolio-intro__progress { width: 1.5rem; flex-shrink: 0; }
  .portfolio-intro__photo {
    width: 100%;
    margin-bottom: clamp(1.25rem, 3svh, 2rem);
  }

  .portfolio-intro__photo img {
    height: 100%;
    max-height: none;
  }

  .portfolio-intro__footer a span:first-child {
    display: none;
  }

  .portfolio-index {
    --portfolio-top-gap: 1rem;
    --portfolio-bottom-gap: 1rem;
    padding-top: var(--portfolio-top-gap);
  }

  .portfolio-index__intro {
    align-items: start;
    margin-bottom: var(--space-2xl);
  }

  .portfolio-index__intro > p {
    max-width: 16ch;
    text-align: right;
  }

  .portfolio-masonry {
    gap: 0.9rem;
  }

  .portfolio-masonry > * {
    margin-bottom: 0;
  }

  .portfolio-directory,
  .portfolio-empty {
    min-height: 13.5rem;
    padding: 0.85rem;
  }

  .portfolio-directory--booking,
  .portfolio-empty {
    min-height: 18rem;
  }

  .portfolio-directory strong,
  .portfolio-empty strong {
    font-size: clamp(1.35rem, 7vw, 1.9rem);
  }

  .portfolio-masonry .g-meta {
    display: block;
  }

  .portfolio-masonry .g-cat,
  .portfolio-masonry .gallery-index {
    display: none;
  }

  .portfolio-masonry .g-title {
    font-size: 0.78rem;
  }

  .course-launch-empty {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 1023px) {
  .site-header:not(.is-scrolled) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-110%);
  }
}

/* --------------------------------------------------------------- about */
.about-grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}

.about-heading {
  max-width: 16ch;
}

/* When no portrait is uploaded, the copy carries the section on its own —
   keep it to a comfortable measure instead of stretching full width. */
.about-grid--textonly .about-copy {
  max-width: var(--measure);
}

.about-copy p + p {
  margin-top: var(--space-md);
}

.about-copy p {
  max-width: var(--measure);
  color: var(--ink-70);
}

.about-figure {
  border-radius: 0;
  overflow: hidden;
  background: var(--paper-3);
}

/* Show the portrait in full — never crop a photograph. */
.about-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--border);
}

.stat-value {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 1;
  color: var(--navy);
}

.stat-label {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-70);
  font-size: var(--step-0);
}

/* --------------------------------------------------------------- gallery */
/* Filters read as ruled index tabs; the active tab is marked by a precise amber
   underline rather than a filled pill. The row scrolls horizontally on phones. */
.filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  /* Tight gap so filters + controls read as one editorial header block. */
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--ink-15);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.filters::-webkit-scrollbar {
  display: none;
}

.filter-btn {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s;
}

.filter-btn:hover {
  color: var(--navy);
}

.filter-btn.is-active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

/* Stage: a narrow left column for the prev chevron (outside the roll), then
   the filmstrip which bleeds off the right edge. */
.gallery-stage {
  --rail-bleed: max(1.25rem, (100vw - 1240px) / 2);
  --rail-h: clamp(14rem, 42vh, 28rem);
  --gallery-prev-col: 2.75rem;
  display: grid;
  grid-template-columns: var(--gallery-prev-col) minmax(0, 1fr);
  align-items: start;
  column-gap: 0;
  /* Pull the prev column into the page margin so the photos keep shell align. */
  margin-left: calc(-1 * var(--gallery-prev-col));
  width: calc(100% + var(--gallery-prev-col));
}

/* Prev sits in its own column — never overlays a photograph. */
.gallery-btn--prev {
  grid-column: 1;
  justify-self: center;
  margin-top: calc((var(--rail-h) - 44px) / 2);
}

.gallery-btn--prev[hidden],
.gallery-btn--next[hidden] {
  display: none;
}

/* Horizontal editorial filmstrip: one shared image height across the whole
   strip, every photograph shown whole at its own aspect ratio. Width is driven
   by the image, never by arbitrary rules, so the row reads as an even contact
   sheet instead of a random small/big jumble. The strip bleeds off the right
   edge so it feels like it continues past the page. */
.gallery-rail {
  position: relative;
  grid-column: 2;
  margin-right: calc(-1 * var(--rail-bleed));
}

/* Soft sky fade at the trailing edge. Fade the sky tint's own RGB from 0→1
   alpha (never via `transparent`, which is black and muddies the blend). */
.gallery-fade {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: clamp(7rem, 20vw, 12rem);
  height: var(--rail-h);
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgb(238 249 254 / 0) 0%,
    rgb(238 249 254 / 0.28) 42%,
    rgb(238 249 254 / 0.78) 78%,
    var(--sky-soft) 100%
  );
  opacity: 1;
  transition: opacity 0.45s var(--ease-out);
}

.gallery-stage.is-at-end .gallery-fade {
  opacity: 0;
}

/* Next sits in the vertical middle of the photo band, inside the end fade. */
.gallery-btn--next {
  position: absolute;
  top: calc(var(--rail-h) / 2);
  right: clamp(0.35rem, 1.5vw, 0.85rem);
  z-index: 3;
  transform: translateY(-50%);
}

/* Phones and iPads swipe the strip — hide step controls and collapse the
   outside prev column (including iPad Pro landscape via coarse pointer). */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .gallery-stage {
    --gallery-prev-col: 0px;
    margin-left: 0;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery-rail {
    grid-column: 1;
  }
  .gallery-btn--prev,
  .gallery-btn--next {
    display: none !important;
  }
}

.gallery-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--navy);
  line-height: 1;
  transition: opacity 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}

.gallery-chevron {
  width: 0.72rem;
  height: 1.2rem;
  display: block;
}

.gallery-btn:hover:not(:disabled) {
  color: var(--gold-deep);
  transform: scale(1.08);
}

.gallery-btn--next:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.08);
}

.gallery-btn:disabled {
  opacity: 0.22;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-fade,
  .gallery-btn {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   Mobile hero: deliberately simple and static.
   The photograph keeps its intrinsic landscape ratio, is centred inside an
   even white frame, with the mobile navigation visible from the start.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: var(--paper);
    border-bottom: 1px solid var(--ink-08);
    transition: none;
  }

  .portfolio-intro.has-photo {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .portfolio-intro__inner.has-photo {
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0.75rem 0.75rem 1.5rem;
    overflow: visible;
  }

  .portfolio-intro__photo {
    width: 100%;
    height: auto !important;
    margin: 0 auto;
  }

  .portfolio-intro__photo img {
    width: 100%;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  .portfolio-intro__name,
  .portfolio-intro__inner.has-photo .portfolio-intro__name {
    position: static;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1.15rem 0 0;
    font-size: clamp(1.85rem, 9.5vw, 3rem);
    line-height: 1;
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .portfolio-intro__name span,
  .intro-playing .portfolio-intro__name span {
    animation: none;
    transform: none;
  }

  .portfolio-intro__footer,
  .intro-playing .portfolio-intro__footer {
    position: static;
    display: block;
    width: 100%;
    margin: 0.45rem 0 0;
    padding: 0;
    font-size: 0.66rem;
    line-height: 1.35;
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .portfolio-intro__footer p {
    white-space: normal;
  }
}

.gallery-grid {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-md);
  padding-right: var(--rail-bleed);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-15) transparent;
  -webkit-overflow-scrolling: touch;
}

.gallery-grid:focus-visible {
  outline-offset: -2px;
}

.gallery-grid::-webkit-scrollbar {
  height: 6px;
}

.gallery-grid::-webkit-scrollbar-thumb {
  background: var(--ink-15);
}

.gallery-item {
  flex: 0 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  scroll-snap-align: start;
}

.gallery-item.is-hidden {
  display: none;
}

/* Uniform height + the image's own ratio = width that fits the photo exactly.
   Rare ultra-wide frames cap their width and letterbox on paper rather than
   crop, so no photograph is ever cut off. */
.gallery-media {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--rail-h);
  max-width: min(88vw, 46rem);
  overflow: hidden;
  background: var(--paper-3);
}

.gallery-item:has(.g-placeholder) .gallery-media {
  width: clamp(14rem, 60vw, 20rem);
}

.gallery-media img {
  height: var(--rail-h);
  width: auto;
  max-width: min(88vw, 46rem);
  object-fit: contain;
  display: block;
  transition: filter 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

.gallery-item:hover .gallery-media img,
.gallery-item:focus-visible .gallery-media img {
  filter: brightness(0.92);
  transform: scale(1.03);
}

/* Photographs stay completely clean: no crop marks or decorative frames. */
.gallery-media::before,
.gallery-media::after {
  content: none;
  display: none;
}

/* Caption block: a ruled index line (number + category) with the title beneath,
   bounded to the photo's own width. */
.g-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--space-sm);
  row-gap: var(--space-2xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--ink-15);
  width: 100%;
}

.gallery-index {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.g-meta .g-cat {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.g-meta .g-title {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: var(--navy);
}

.gallery-item .g-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  text-align: center;
  color: var(--ink-45);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step--1);
}

.gallery-empty {
  padding: var(--space-xl) 0;
}

@media (max-width: 720px) {
  .gallery-stage {
    --rail-h: clamp(12.5rem, 48vh, 22rem);
  }
  .gallery-grid {
    gap: var(--space-md);
  }
  .gallery-fade {
    display: none;
  }
}

@media (max-width: 560px) {
  .gallery-media img {
    max-width: 86vw;
  }
  .gallery-media {
    max-width: 86vw;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* lightbox — a photographic viewing frame with square technical controls */
.lightbox {
  position: fixed;
  inset: 0;
  /* Must sit above the sticky site header (z-index 201); otherwise the header
     overlaps the top of the photo and its close button, so a perfectly
     centered image reads as pushed-down / off-centre. */
  z-index: 300;
  display: none;
  place-items: center;
  padding: max(0.5rem, env(safe-area-inset-top))
    max(0.5rem, env(safe-area-inset-right))
    max(0.5rem, env(safe-area-inset-bottom))
    max(0.5rem, env(safe-area-inset-left));
  background: #000c20;
}

.lightbox.is-open {
  display: grid;
}

.lightbox > div {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding-inline: 4.5rem;
}

.lightbox img {
  width: 100%;
  height: 100%;
  max-width: calc(100vw - 9rem);
  max-height: calc(100dvh - 1rem);
  object-fit: contain;
  border-radius: 0;
}

.lightbox.is-open img {
  animation: lightbox-focus-in 0.42s var(--ease-out) both;
}

@keyframes lightbox-focus-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-caption {
  color: rgba(244, 246, 251, 0.85);
  text-align: center;
  margin-top: var(--space-md);
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  color: var(--on-navy);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  border: 1px solid rgba(244, 246, 251, 0.3);
  border-radius: 50%;
  background: rgba(0, 12, 32, 0.7);
  transition: background 0.3s, border-color 0.3s;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--gold);
}

.lightbox-close {
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  font-size: 0;
  background: rgba(0, 12, 32, 0.78);
}

.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 1.5px;
  background: var(--on-navy);
  border-radius: 999px;
}

.lightbox-close::before {
  transform: rotate(45deg);
}

.lightbox-close::after {
  transform: rotate(-45deg);
}

.lightbox-nav.prev {
  left: max(0.5rem, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-nav.next {
  right: max(0.5rem, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-nav {
  z-index: 3;
  width: 3.5rem;
  height: 4.5rem;
  border: 0;
  border-radius: 0;
  background: #000c20;
  font-family: var(--font-title);
  font-size: 1.75rem;
  font-weight: 400;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  color: var(--gold);
  background: #000c20;
}

@media (max-width: 620px) {
  .lightbox > div {
    padding-inline: 2.5rem;
  }

  .lightbox img {
    max-width: calc(100vw - 5rem);
    max-height: calc(100dvh - 1rem);
  }

  .lightbox-nav {
    width: 2.5rem;
    height: 4rem;
    font-size: 1.45rem;
  }

  .lightbox-nav.prev {
    left: max(0.15rem, env(safe-area-inset-left));
  }

  .lightbox-nav.next {
    right: max(0.15rem, env(safe-area-inset-right));
  }
}

/* --------------------------------------------------------------- services */
.services-list {
  display: grid;
  gap: 0;
}

.service-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-xl);
  align-items: baseline;
  padding-block: var(--space-2xl);
  border-top: var(--border);
}

.service-row:last-child {
  border-bottom: var(--border);
}

.service-num {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--step-2);
  color: var(--gold-deep);
}

.service-body h3 {
  font-size: var(--step-3);
  margin-bottom: var(--space-sm);
}

.service-body p {
  color: var(--ink-70);
  max-width: 52ch;
}

.service-aside {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: flex-end;
}

.service-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--ink-70);
}

/* --------------------------------------------------------------- booking */
/* Lock the page behind the booking dialog (iOS Safari needs position:fixed,
   not just overflow:hidden). JS stores the scroll offset in `top`. */
body.booking-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.booking-lede {
  color: var(--ink-70);
  max-width: 44ch;
  margin-bottom: var(--space-lg);
}

/* Booking popup — a square-edged editorial dialog. The date picker never
   appears until "Book now" is pressed, and it opens as a focused modal. */
.booking-dialog {
  width: min(860px, calc(100vw - 2 * var(--space-lg)));
  max-height: min(92dvh, 940px);
  padding: 0;
  border: 1px solid var(--ink-15);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 12, 32, 0.28);
  /* The global `* { margin: 0 }` reset overrides the UA dialog centering, so
     restore it explicitly: inset 0 + margin auto centers a modal dialog. */
  inset: 0;
  margin: auto;
}

.booking-dialog::backdrop {
  background: rgba(0, 28, 71, 0.55);
  backdrop-filter: blur(4px);
}

.booking-dialog__inner {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: 0;
  max-height: inherit;
  overflow-y: auto;
  padding: 0;
  overscroll-behavior: contain;
}

.booking-main { padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.booking-summary { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem; background: #f3f3f0; border-right: 1px solid var(--ink-08); }
.booking-summary__brand { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4rem; }
.booking-summary__label { font-size: 0.75rem; color: var(--ink-70); margin-bottom: 0.75rem; }
.booking-summary h3 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.04em; font-weight: 600; }
.booking-summary__date { display: grid; gap: 0.4rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-15); width: 100%; }
.booking-summary__date span { font-size: 0.75rem; color: var(--ink-70); }
.booking-summary__date strong { font-size: 0.95rem; line-height: 1.5; font-weight: 500; }
.booking-summary__note { margin-top: auto; padding-top: 3rem; font-size: 0.85rem; color: var(--ink-70); }
.booking-summary__fine { font-size: 0.75rem; color: var(--ink-45); margin-top: 0.75rem; }
.booking-dialog .booking-lede { font-size: 0.9rem; margin-bottom: 0; max-width: none; }
.booking-dialog .calendar { border-top: 0; padding-top: 0; }
.booking-dialog .calendar-head h3 { font-size: 1rem; letter-spacing: -0.02em; }
.booking-dialog .cal-nav { border: 0; }
.booking-dialog .cal-dow { font-size: 0.7rem; font-weight: 500; }
.booking-dialog .cal-day { border-radius: 3px; height: 46px; min-height: 44px; aspect-ratio: auto; font-size: 0.85rem; }
.booking-dialog .cal-day.is-past, .booking-dialog .cal-day.is-unavailable { color: var(--ink-45); }
.booking-dialog .cal-day.is-available { background: transparent; border-color: var(--ink-15); color: var(--navy); }
.booking-dialog .cal-day.is-available:hover { background: var(--paper-3); }
.booking-dialog .cal-day.is-selected,
.booking-dialog .cal-day.is-selected:hover { background: var(--navy); border-color: var(--navy); color: white; }
.booking-dialog .dot.free { width: 8px; height: 8px; border: 1px solid var(--ink-45); background: transparent; }
.booking-dialog .cal-legend { font-size: 0.75rem; margin-top: 0.75rem; }
.booking-dialog .btn--gold { background: var(--navy); border-color: var(--navy); color: white; }
.booking-dialog .btn--gold:hover { background: #203758; }
.booking-dialog .btn { font-size: 0.75rem; letter-spacing: 0.04em; }
.booking-dialog .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.booking-dialog .field-selected-date { font-family: var(--font-body); font-style: normal; font-size: 0.75rem; color: var(--ink-70); max-width: 21ch; }
.booking-dialog .field label { font-size: 0.7rem; letter-spacing: 0.06em; }
.booking-dialog .field-optional { font-weight: 400; color: var(--ink-45); text-transform: none; letter-spacing: 0; }
.booking-dialog .form-note { font-family: var(--font-body); font-style: normal; font-size: 0.75rem; }
.booking-dialog .booking-step { font-size: 0.7rem; letter-spacing: 0.06em; font-weight: 500; }
.booking-dialog .booking-step.is-current { font-weight: 700; }
.booking-dialog[data-step="complete"] .booking-steps { display: none; }

.booking-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: 0;
  border-top: 0;
}

.booking-dialog__eyebrow {
  display: block;
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.booking-dialog__title {
  font-size: 2rem;
  max-width: none;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-top: 0;
}
.booking-dialog__description { color: var(--ink-70); margin-top: 1rem; max-width: 36ch; font-size: 0.95rem; }
.booking-dialog__title:focus { outline: none; }
.calendar-status { padding: 1rem; background: var(--paper-3); line-height: 1.6; }
.booking-retry { align-self: flex-start; text-decoration: underline; min-height: 44px; }
.booking-dialog [hidden] { display: none !important; }
.booking-calendar[aria-busy="true"] { opacity: 0.5; pointer-events: none; }
.booking-dialog .form-feedback.ok { padding: 1.5rem; background: #eef2ed; color: var(--olive-deep); }
.booking-dialog textarea { min-height: 110px; }
.booking-dialog .field input, .booking-dialog .field select, .booking-dialog .field textarea { font-size: 16px; }

.booking-dialog__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--navy);
  background: none;
  border: none;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.booking-dialog__close:hover {
  border-color: var(--gold);
  background: var(--paper-3);
}

.booking-steps {
  display: flex;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.booking-step {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.booking-step__num {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--ink-15);
  font-variant-numeric: tabular-nums;
  border-radius: 50%;
}

.booking-step.is-current {
  color: var(--navy);
}

.booking-step.is-current .booking-step__num {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy);
}

.booking-step.is-done .booking-step__num {
  border-color: var(--navy);
  color: var(--navy);
}

.booking-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.booking-panel[hidden] {
  display: none;
}

.booking-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}

/* The date carries into step 2 as a confirmed, read-only value. */
.booking-field--date input[readonly] {
  color: var(--ink-70);
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  .booking-dialog[open] {
    animation: bookingDialogIn 0.28s var(--ease-out);
  }
}

@keyframes bookingDialogIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* An open ruled instrument panel rather than a floating card. */
.calendar {
  background: none;
  border: none;
  border-top: 2px solid var(--navy);
  border-radius: 0;
  padding: var(--space-md) 0 0;
  color: var(--navy);
}

.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.calendar-head h4 {
  font-size: var(--step-1);
}

.cal-nav {
  width: 44px;
  height: 44px;
  border-radius: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-15);
  transition: background 0.3s, color 0.3s;
}

.cal-nav:hover:not(:disabled) {
  background: var(--navy);
  color: var(--on-navy);
}

.cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  text-align: center;
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-45);
  padding-block: var(--space-xs);
}

.cal-day {
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--step--1);
  border: 1px solid transparent;
  transition: background 0.2s, color 0.2s;
}

.cal-day.is-empty {
  visibility: hidden;
}

.cal-day.is-available {
  background: rgba(80, 101, 70, 0.12);
  color: var(--olive-deep);
  font-weight: 600;
}

.cal-day.is-available:hover {
  background: var(--olive);
  color: var(--on-navy);
}

.cal-day.is-unavailable {
  color: var(--ink-15);
  cursor: not-allowed;
}

.cal-day.is-past {
  color: var(--ink-15);
  cursor: not-allowed;
}

.cal-day.is-selected {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--step--1);
  color: var(--ink-70);
}

.cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 0;
}

.dot.free {
  background: rgba(80, 101, 70, 0.4);
}

.dot.busy {
  background: var(--ink-15);
}

.dot.pick {
  background: var(--gold);
}

.cal-loading {
  text-align: center;
  padding: var(--space-lg);
  color: var(--ink-45);
  font-family: var(--font-serif);
  font-style: italic;
}

/* --------------------------------------------------------------- forms */
.form {
  display: grid;
  gap: var(--space-md);
}

.form-row {
  display: grid;
  gap: var(--space-md);
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field label {
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-70);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border: 1.5px solid var(--ink-15);
  border-radius: var(--radius);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.section--navy .field input,
.section--navy .field select,
.section--navy .field textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(244, 246, 251, 0.22);
  color: var(--on-navy);
}

.section--navy .field label {
  color: rgba(244, 246, 251, 0.7);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(228, 163, 89, 0.2);
}

.field-selected-date {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-deep);
}

.form-note {
  font-size: var(--step--1);
  color: var(--ink-45);
}

.section--navy .form-note {
  color: rgba(244, 246, 251, 0.6);
}

/* flash / feedback */
.form-feedback {
  padding: var(--space-md);
  border-radius: var(--radius);
  font-size: var(--step-0);
  display: none;
}

.form-feedback.is-visible {
  display: block;
}

.form-feedback.ok {
  background: rgba(80, 101, 70, 0.14);
  color: var(--olive-deep);
}

.form-feedback.err {
  background: rgba(201, 132, 59, 0.16);
  color: var(--gold-deep);
}

.contact-form__body {
  display: grid;
  gap: var(--space-md);
}

.contact-feedback {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid transparent;
  border-radius: 0;
}

.contact-feedback.is-visible {
  display: grid;
}

.contact-feedback__mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.contact-feedback__copy {
  display: grid;
  gap: 0.4rem;
  line-height: 1.55;
}

.contact-feedback__copy strong {
  font-family: var(--font-title);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}

.contact-feedback__copy > span {
  max-width: 48ch;
}

.contact-feedback__reset {
  display: none;
  grid-column: 2;
  justify-self: start;
  padding: 0.35rem 0 0.2rem;
  color: inherit;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.section--navy .contact-feedback.ok {
  background: var(--paper);
  border-color: rgba(228, 163, 89, 0.65);
  color: var(--navy);
  box-shadow: inset 0.3rem 0 0 var(--gold);
}

.section--navy .contact-feedback.err {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(228, 163, 89, 0.7);
  color: var(--on-navy);
}

.contact-form.is-complete {
  min-height: 24rem;
  align-content: center;
}

.contact-form.is-complete .contact-form__body {
  display: none;
}

.contact-form.is-complete .contact-feedback__reset {
  display: inline-block;
}

/* --------------------------------------------------------------- courses */
/* Indexed ruled blocks — flat paper, hairline separators, no lift or shadow. */
.course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-bottom: 1px solid var(--ink-15);
}

.course-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-block: var(--space-2xl);
  background: none;
  border: none;
  border-top: 1px solid var(--ink-15);
}

.course-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.course-index {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.course-status {
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.course-kicker {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--olive);
}

.course-card h3 {
  font-size: var(--step-2);
}

.course-card p {
  color: var(--ink-70);
  flex: 1;
}

.course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: var(--border);
  flex-wrap: wrap;
}

.course-meta {
  font-size: var(--step--1);
  color: var(--ink-45);
}

.waitlist-form {
  display: flex;
  gap: var(--space-xs);
  width: 100%;
  margin-top: var(--space-xs);
}

.waitlist-form input {
  flex: 1;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  border: 1.5px solid var(--ink-15);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.waitlist-form input:focus {
  outline: none;
  border-color: var(--gold);
}

@media (max-width: 480px) {
  .waitlist-form {
    flex-direction: column;
  }
  .waitlist-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------- reviews */
.review-list {
  display: grid;
  gap: 0 var(--space-3xl);
}

/* Quote-first typographic entries, ruled rather than boxed. */
.review-card {
  padding-block: var(--space-xl);
  background: none;
  border: none;
  border-top: 1px solid var(--ink-15);
}

.review-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--ink);
  line-height: 1.4;
  max-width: 40ch;
}

.review-byline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-md);
}

.review-stars {
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: var(--step-0);
  line-height: 1;
}

.review-stars .star-off {
  color: var(--ink-15);
}

.review-meta {
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.review-empty {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--ink-15);
  border-bottom: 1px solid var(--ink-15);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-45);
}

@media (min-width: 768px) {
  .review-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------- contact */
.contact-grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}

/* A technical metadata line echoing the hero cover. */
.contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(244, 246, 251, 0.22);
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 246, 251, 0.6);
  font-variant-numeric: tabular-nums;
}

.contact-meta span {
  color: var(--gold);
}

.contact-aside p {
  color: rgba(244, 246, 251, 0.75);
  max-width: 42ch;
  margin-bottom: var(--space-lg);
}

/* Typographic contact links — a technical label over the value, no emoji. */
.contact-links {
  display: grid;
  gap: 0;
  margin-top: var(--space-lg);
  border-top: 1px solid rgba(244, 246, 251, 0.22);
}

.contact-links a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-height: 44px;
  padding-block: var(--space-md);
  border-bottom: 1px solid rgba(244, 246, 251, 0.22);
  transition: color 0.3s;
}

.contact-links .cl-label {
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 246, 251, 0.55);
}

.contact-links .cl-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--gold);
  transition: color 0.3s;
}

.contact-links a:hover .cl-value {
  color: var(--on-navy);
}

@media (max-width: 620px) {
  .contact-form.is-complete {
    min-height: 20rem;
  }

  .contact-feedback {
    align-items: start;
    gap: var(--space-sm);
    padding: 1.25rem;
  }

  .contact-feedback__mark {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.05rem;
  }

  .contact-feedback__reset {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------- footer */
.site-footer {
  background: var(--navy);
  color: rgba(244, 246, 251, 0.7);
  padding-block: var(--space-2xl);
}

.site-footer .shell {
  display: grid;
  gap: var(--space-lg);
}

/* Technical metadata line over a fine rule — echoes the hero cover. */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(244, 246, 251, 0.22);
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 246, 251, 0.55);
  font-variant-numeric: tabular-nums;
}

.footer-meta .footer-brand {
  color: var(--on-navy);
}

.footer-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-2xl);
  align-items: baseline;
  justify-content: space-between;
}

.footer-intro {
  display: grid;
  gap: var(--space-xs);
}

.site-footer .serif-quote {
  margin: 0;
  color: var(--gold);
  font-size: var(--step-1);
}

.footer-credit {
  margin: 0;
  color: rgba(244, 246, 251, 0.56);
  font-size: var(--step--1);
}

.footer-nav {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.3s;
}

.footer-nav a:hover {
  color: var(--gold);
}

@media (max-width: 640px) {
  .footer-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
  .footer-nav a {
    min-height: 44px;
    width: 100%;
  }
}

/* --------------------------------------------------------- reveal motion */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

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

.reveal[data-delay="1"] {
  transition-delay: 0.08s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.16s;
}
.reveal[data-delay="3"] {
  transition-delay: 0.24s;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 300;
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--space-sm) var(--space-md);
}

.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
}

/* ------------------------------------------------------- responsive tiers */
@media (min-width: 768px) {
  .form-row.two {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .about-grid:not(.about-grid--textonly) {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
  }

  /* Make the portrait column follow the copy's height. Positioning the image
     out of flow keeps its intrinsic aspect ratio from making the grid row
     taller than the text; object-fit preserves its proportions. */
  .about-figure {
    position: relative;
    min-height: 0;
  }

  .about-figure img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }

  .contact-grid {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* nav collapses for phones + iPad portrait — fullscreen glass overlay */
@media (max-width: 1023px) {
  .site-header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }
  body.nav-open .site-header { background: var(--paper); }
  html.nav-open,
  body.nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 201;
  }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 2.5rem);
    padding: var(--nav-h) var(--space-xl) var(--space-xl);
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, 0.985);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    transition: opacity 0.22s ease, transform 0.28s var(--ease-out), visibility 0s linear 0.28s;
    will-change: transform;
  }

  body.nav-open .nav-links {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }

  .nav-links li {
    width: auto;
    text-align: center;
    opacity: 0;
    transform: translate3d(0, -0.85rem, 0);
    transition: opacity 0.3s ease, transform 0.45s var(--ease-out);
  }

  body.nav-open .nav-links li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.nav-open .nav-links li:nth-child(1) { transition-delay: 0.04s; }
  body.nav-open .nav-links li:nth-child(2) { transition-delay: 0.07s; }
  body.nav-open .nav-links li:nth-child(3) { transition-delay: 0.1s; }
  body.nav-open .nav-links li:nth-child(4) { transition-delay: 0.13s; }
  body.nav-open .nav-links li:nth-child(5) { transition-delay: 0.16s; }

  .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    font-size: var(--step-3);
    letter-spacing: 0.06em;
    color: var(--navy);
  }

  .nav-links a::after {
    height: 2px;
  }
}

@media (max-width: 640px) {
  .service-row {
    grid-template-columns: auto 1fr;
    gap: var(--space-md) var(--space-lg);
  }
  .service-aside {
    grid-column: 2 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
  }

  /* Full-bleed booking dialog on phones with the panel scrolling internally. */
  .booking-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border: none;
  }

  /* Tighter side padding reclaims room for the calendar so day cells clear the
     44px touch-target minimum; the header block is also trimmed so the picker
     isn't pushed below the fold on small phones. */
  .booking-dialog__inner {
    display: block;
    padding: 0;
  }
  .booking-main { padding: 1.5rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .booking-summary { padding: max(1.25rem, env(safe-area-inset-top)) 4rem 1.25rem 1rem; border-right: none; border-bottom: 1px solid var(--ink-08); }
  .booking-summary h3 { font-size: 1rem; letter-spacing: -0.015em; }
  .booking-summary__brand, .booking-summary__label, .booking-summary__note, .booking-summary__fine { display: none; }
  .booking-summary__date { display: none; border: none; margin-top: 0.6rem; padding: 0; }
  .booking-summary__date span { display: none; }
  .booking-dialog[data-step="2"] .booking-summary__date,
  .booking-dialog[data-step="complete"] .booking-summary__date { display: grid; }
  .booking-dialog__close { position: absolute; top: max(0.5rem, env(safe-area-inset-top)); right: 0.5rem; }
  .booking-dialog__title {
    font-size: 1.8rem;
  }
  .booking-panel {
    gap: var(--space-md);
    flex: 1 1 auto;
  }
  .booking-lede {
    margin-bottom: 0;
  }
  .calendar {
    padding-top: var(--space-sm);
  }
  .calendar-grid {
    gap: 3px;
  }
  .cal-day {
    min-height: 44px;
    font-size: var(--step-0);
  }

  /* Keep the primary action reachable without hunting: pin the step footer to
     the bottom of the scrolling dialog on phones. */
  .booking-dialog__foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: auto;
    padding-block: var(--space-md) var(--space-xs);
    background: var(--paper);
    box-shadow: 0 -1px 0 var(--ink-15);
  }
  .booking-dialog__foot .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .booking-dialog .form-row.two { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .booking-dialog .field-selected-date { max-width: none; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   LANDING STORY — interactive world map, 3D camera + stat circles,
   scroll-driven story with staggered photos.
   ========================================================================= */

/* ----------------------------------------------------------- hero landing */
.hero-landing {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hero-landing--photographic::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  pointer-events: none;
}

/* Loose prints are real objects on the page, not hero decoration: they may
   hang past the section edges and cover whatever sits beneath, so the hero
   stops clipping and rises above its neighbouring sections (nav stays higher). */
.hero-landing--photographic {
  z-index: 20;
  overflow: visible;
}

/* Editorial cover: the metadata stays precise while the central composition
   behaves like a photographer's working contact sheet. */
.hero-landing-name {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, 1240px);
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-xl);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-xl);
}

.hero-landing--photographic .hero-landing-name {
  width: 100%;
  padding: calc(var(--nav-h) + var(--space-md)) clamp(1rem, 2.5vw, 2.5rem)
    var(--space-md);
  display: block;
}

/* The cover meta shares the wordmark's intrinsic width, so its two blocks
   start and end on the exact same edges as “KENO BRECHLIN”. */
.hero-landing--photographic .hero-cover-meta {
  z-index: 9;
  position: absolute;
  top: calc(100% - var(--meta-height));
  left: 0;
  width: 100%;
  margin: 0;
  grid-template-columns: auto auto;
  justify-content: space-between;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  text-align: left;
  pointer-events: none;
}

.hero-landing--photographic .hero-cover-meta p {
  width: fit-content;
  padding: 0.25rem 0.5rem;
  background: var(--paper);
}

.hero-landing--photographic .hero-cover-meta p:first-child {
  justify-self: start;
  text-align: left;
}

.hero-landing--photographic .hero-cover-meta p:last-child {
  justify-self: end;
  text-align: right;
}

.hero-cover-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink-70);
}

.hero-cover-meta p {
  margin: 0;
}

.hero-cover-meta p:last-child {
  text-align: right;
}

.hero-cover-meta span {
  color: var(--navy);
}

.hero-wordmark-frame {
  position: relative;
  align-self: center;
  width: 100%;
  padding: clamp(1.1rem, 3vw, 2.4rem);
  isolation: isolate;
}

.hero-brand {
  width: 100%;
  font-size: clamp(4rem, 13.5vw, 11rem);
  line-height: 1;
  letter-spacing: -0.065em;
  margin: 0;
  color: var(--navy);
}

/* Photo-free launch cover: a graphic editorial composition that remains
   distinctive before the first portfolio images are uploaded. */
.hero-landing--textual {
  color: var(--on-navy);
  background: linear-gradient(
    to bottom,
    var(--paper) 0 var(--nav-h),
    var(--navy) var(--nav-h) 100%
  );
}

.hero-landing--textual::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--nav-h) + 1rem);
  right: clamp(1.25rem, 5vw, 5rem);
  width: 2px;
  height: clamp(5rem, 14vh, 8rem);
  background: var(--gold);
}

.hero-landing--textual .hero-wordmark-frame {
  z-index: 1;
  padding-inline: clamp(0rem, 3vw, 2.4rem);
}

.hero-landing--textual .hero-name-lockup {
  position: relative;
  z-index: 2;
}

.hero-landing--textual .hero-brand {
  max-width: 10ch;
  font-size: clamp(5rem, 13.8vw, 12.5rem);
  line-height: 0.83;
  color: var(--on-navy);
}

.hero-landing--textual .brand-line:nth-child(2) {
  margin-left: clamp(0rem, 7vw, 6.5rem);
}

.hero-statement {
  width: fit-content;
  max-width: 28ch;
  margin: clamp(1.4rem, 3vw, 2.5rem) 0 0 clamp(0rem, 7vw, 6.5rem);
  padding: 0;
  color: var(--gold);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: 1.15;
}

.hero-landing--textual .hero-cover-meta {
  color: rgba(244, 246, 251, 0.64);
}

.hero-landing--textual .hero-cover-meta span {
  color: var(--on-navy);
}

.hero-landing--textual .frame-label {
  color: rgba(244, 246, 251, 0.48);
}

.hero-landing--textual .frame-label--top,
.hero-landing--textual .frame-label--side {
  background: var(--navy);
}

.hero-landing--textual .focus-corner {
  border-color: var(--gold);
  opacity: 0.72;
}

.hero-landing--textual .focus-reticle {
  border-color: rgba(228, 163, 89, 0.55);
}

.hero-landing--textual .focus-reticle::before,
.hero-landing--textual .focus-reticle::after {
  background: rgba(228, 163, 89, 0.55);
}

.hero-landing--textual .hero-cover-foot {
  position: relative;
  z-index: 2;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(244, 246, 251, 0.2);
}

.hero-landing--textual .hero-cover-foot p {
  color: var(--gold);
}

.hero-landing--textual .hero-work-link {
  color: var(--on-navy);
}

@media (max-width: 720px) {
  .hero-landing--textual {
    background: linear-gradient(
      to bottom,
      var(--paper) 0 var(--nav-h),
      var(--navy) var(--nav-h) 100%
    );
  }

  .hero-landing--textual::before {
    top: calc(var(--nav-h) + 1.25rem);
    right: 1.25rem;
    width: 2px;
    height: 4.5rem;
  }

  .hero-landing--textual .hero-landing-name {
    padding-top: calc(var(--nav-h) + var(--space-md));
    padding-bottom: var(--space-lg);
    gap: var(--space-lg);
  }

  .hero-landing--textual .hero-cover-meta {
    gap: 0.35rem;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .hero-landing--textual .hero-wordmark-frame {
    padding-inline: 0;
  }

  .hero-landing--textual .hero-brand {
    max-width: none;
    font-size: clamp(4rem, 17.5vw, 5.2rem);
    line-height: 0.86;
  }

  .hero-landing--textual .brand-line:nth-child(2) {
    margin-left: 0;
  }

  .hero-statement {
    max-width: 21ch;
    margin: var(--space-lg) 0 0;
    padding: 0;
    font-size: clamp(1.2rem, 6vw, 1.55rem);
  }

  .hero-landing--textual .hero-cover-foot {
    flex-direction: row;
    align-items: end;
    gap: var(--space-md);
  }

  .hero-landing--textual .hero-cover-foot p {
    max-width: 19ch;
    font-size: 0.92rem;
    line-height: 1.3;
  }

  .hero-landing--textual .hero-work-link {
    flex-shrink: 0;
    font-size: 0.65rem;
    text-align: right;
  }
}

.brand-line {
  display: block;
  overflow: hidden;
  /* The negative tracking on .hero-brand makes the final glyph paint past
     the text box; pad the clip box so overflow:hidden can't shave it off,
     and pull the padding back out of the layout with a matching margin. */
  padding-right: 0.08em;
  margin-right: -0.08em;
  transition: transform 0.55s var(--ease-out);
}

.brand-line > span {
  display: block;
  animation: wordmarkReveal 1.05s var(--ease-out) both;
  will-change: transform;
}

.brand-line:nth-child(2) > span {
  animation-delay: 0.12s;
}

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

/* Viewfinder details: technical rather than decorative, with the restraint of
   crop marks on a photographic contact sheet. */
.focus-corner {
  position: absolute;
  z-index: 2;
  width: clamp(1.15rem, 2vw, 1.8rem);
  height: clamp(1.15rem, 2vw, 1.8rem);
  opacity: 0.42;
  animation: focusMark 7s var(--ease-out) infinite;
}

.focus-corner--tl {
  top: 0;
  left: 0;
  border-top: 1px solid var(--navy);
  border-left: 1px solid var(--navy);
}
.focus-corner--tr {
  top: 0;
  right: 0;
  border-top: 1px solid var(--navy);
  border-right: 1px solid var(--navy);
  animation-delay: 0.12s;
}
.focus-corner--bl {
  bottom: 0;
  left: 0;
  border-bottom: 1px solid var(--navy);
  border-left: 1px solid var(--navy);
  animation-delay: 0.24s;
}
.focus-corner--br {
  right: 0;
  bottom: 0;
  border-right: 1px solid var(--navy);
  border-bottom: 1px solid var(--navy);
  animation-delay: 0.36s;
}

@keyframes focusMark {
  0%,
  84%,
  100% {
    opacity: 0.42;
    transform: scale(1);
  }
  88% {
    opacity: 1;
    transform: scale(1.14);
  }
  92% {
    opacity: 0.62;
    transform: scale(0.96);
  }
}

.frame-label {
  position: absolute;
  z-index: 2;
  color: var(--ink-45);
  font-family: var(--font-title);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.frame-label--top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding-inline: 0.7rem;
}

.frame-label--side {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%) rotate(90deg);
  background: var(--paper);
  padding-inline: 0.7rem;
}

.focus-reticle {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid rgba(0, 28, 71, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.focus-reticle::before,
.focus-reticle::after {
  content: "";
  position: absolute;
  background: rgba(0, 28, 71, 0.4);
}

.focus-reticle::before {
  left: 50%;
  top: -0.35rem;
  width: 1px;
  height: calc(100% + 0.7rem);
}

.focus-reticle::after {
  top: 50%;
  left: -0.35rem;
  width: calc(100% + 0.7rem);
  height: 1px;
}

.hero-wordmark-frame--photographic {
  position: absolute;
  z-index: 2;
  inset: var(--nav-h) 0 0;
  align-self: stretch;
  justify-self: stretch;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
}

/* A desk of scattered portrait prints. They boot laid over the wordmark,
   then glide out to their spots so the name appears from beneath. */
.hero-print-pile {
  position: absolute;
  z-index: 8;
  inset: clamp(0.5rem, 1.2vw, 1rem);
  pointer-events: none;
}

.hero-drag-print {
  position: absolute;
  width: clamp(6.75rem, 10.5vw, 10rem);
  margin: 0;
  padding: clamp(0.3rem, 0.55vw, 0.5rem);
  padding-bottom: clamp(1.3rem, 2.1vw, 1.9rem);
  background: var(--paper);
  box-shadow: 0 22px 44px -26px rgba(0, 28, 71, 0.75);
  rotate: var(--print-tilt, -2deg);
  transition: transform 2.1s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}

.hero-drag-print img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  pointer-events: none;
}

.hero-drag-print figcaption {
  position: absolute;
  inset: auto clamp(0.3rem, 0.55vw, 0.5rem) clamp(0.36rem, 0.6vw, 0.55rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs);
  color: var(--ink-70);
  font-size: clamp(0.52rem, 0.65vw, 0.68rem);
  line-height: 1;
}

.hero-drag-print figcaption span:first-child {
  font-family: var(--font-title);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-drag-print figcaption span:last-child {
  overflow: hidden;
  font-family: var(--font-serif);
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rest positions ring the frame so the centre stays clear for the name.
   The top row rests a fixed distance below the corner texts (portfolio
   label left, location right), so neither text is ever covered at rest and
   the row still clears the name beneath it; only the bottom row hangs past
   the section edge into the next section. */
.hero-drag-print:nth-child(1) { left: 2%; top: 1.85rem; --print-tilt: -3.5deg; }
.hero-drag-print:nth-child(2) { left: 22.5%; top: 1.35rem; --print-tilt: 2deg; }
.hero-drag-print:nth-child(3) { left: 43%; top: 2.15rem; --print-tilt: -1deg; }
.hero-drag-print:nth-child(4) { left: 63%; top: 1.45rem; --print-tilt: 3deg; }
.hero-drag-print:nth-child(5) { right: 1%; top: 2.85rem; --print-tilt: -2.5deg; }
.hero-drag-print:nth-child(6) { left: 1%; top: 50%; --print-tilt: 2.5deg; }
.hero-drag-print:nth-child(7) { left: 22%; bottom: 0%; --print-tilt: -2deg; }
.hero-drag-print:nth-child(8) { left: 44%; bottom: -3%; --print-tilt: 1.5deg; }
.hero-drag-print:nth-child(9) { left: 66%; bottom: 1%; --print-tilt: -3deg; }
.hero-drag-print:nth-child(10) { right: 2%; bottom: 10%; --print-tilt: 2deg; }

.hero-issue-mark {
  position: absolute;
  z-index: 0;
  top: 6%;
  left: -0.03em;
  color: var(--paper);
  font-family: var(--font-title);
  font-size: clamp(12rem, 26vw, 23rem);
  font-weight: 800;
  letter-spacing: -0.09em;
  line-height: 0.75;
  user-select: none;
}

.hero-wordmark-frame--photographic .hero-brand {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: baseline;
  gap: 0.16em;
  padding: 0.08em 0.15em 0.11em;
  background: var(--paper);
  font-size: clamp(3.8rem, 8.6vw, 7.75rem);
  line-height: 1;
  pointer-events: none;
}

.hero-wordmark-frame--photographic .hero-name-lockup {
  --meta-gap: clamp(0.9rem, 2.4vh, 1.8rem);
  --meta-height: 3rem;
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 1rem);
  padding-bottom: calc(var(--meta-gap) + var(--meta-height));
  transform: translate(-50%, -50%);
  transition: opacity 1.2s var(--ease-out);
}

.hero-wordmark-frame--photographic .brand-line {
  width: auto;
  max-width: none;
}

.hero-wordmark-frame--photographic .brand-line:first-child {
  align-self: auto;
  rotate: none;
}

.hero-wordmark-frame--photographic .brand-line:nth-child(2) {
  align-self: auto;
  margin-top: 0;
  rotate: none;
}

.hero-wordmark-frame--photographic .brand-line:first-child > span {
  padding: 0;
  background: transparent;
  color: var(--navy);
}

.hero-wordmark-frame--photographic .brand-line:nth-child(2) > span {
  padding: 0;
  background: transparent;
  color: var(--navy);
}

/* The viewfinder uses the lockup's dimensions, tightly framing the name and
   its metadata instead of the full hero composition. */
.hero-wordmark-frame--photographic .focus-corner {
  z-index: 1;
  opacity: 0.8;
}

.hero-wordmark-frame--photographic .focus-corner--tl {
  top: -0.55rem;
  left: -0.55rem;
}

.hero-wordmark-frame--photographic .focus-corner--tr {
  top: -0.55rem;
  right: -0.55rem;
}

.hero-wordmark-frame--photographic .focus-corner--bl {
  bottom: -0.55rem;
  left: -0.55rem;
}

.hero-wordmark-frame--photographic .focus-corner--br {
  right: -0.55rem;
  bottom: -0.55rem;
}

/* Unlike the corners, the film label is desk-level: prints can cover it. */
.hero-wordmark-frame--photographic .frame-label {
  z-index: 3;
}

.hero-wordmark-frame--photographic .frame-label--top {
  top: 30%;
}

/* The name stays put; it only fades up once the prints have sorted away. */
.hero-wordmark-frame--photographic .hero-brand {
  transition: opacity 1.2s var(--ease-out);
}

.hero-wordmark-frame--photographic.is-name-hidden .hero-brand {
  opacity: 0;
}

.hero-wordmark-frame--photographic.is-name-hidden .hero-name-lockup {
  opacity: 0;
}

.hero-cover-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-xl);
}

.hero-landing--photographic .hero-cover-foot {
  position: absolute;
  z-index: 11;
  right: clamp(1rem, 2.5vw, 2.5rem);
  bottom: var(--space-md);
  left: clamp(1rem, 2.5vw, 2.5rem);
  pointer-events: none;
}

.hero-landing--photographic .hero-cover-foot > * {
  padding: 0.2rem 0.45rem;
  background: var(--paper);
  pointer-events: auto;
}

.hero-cover-foot p {
  max-width: 28ch;
  margin: 0;
  color: var(--gold-deep);
  font-size: var(--step-1);
}

.hero-work-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: 44px;
  color: var(--navy);
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-work-link span {
  font-size: 1.35em;
  transition: transform 0.35s var(--ease-out);
}

.hero-work-link:hover span {
  transform: translateY(0.25em);
}

/* Italic cover line — only surfaced on the photo-free phone cover. */
.hero-cover-line {
  display: none;
}

@media (max-width: 720px) {
  .hero-landing-name {
    padding-block: calc(var(--nav-h) + var(--space-lg)) var(--space-lg);
    gap: var(--space-lg);
  }
  .hero-cover-meta {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
  .hero-cover-meta p:last-child {
    text-align: left;
  }
  .hero-cover-foot {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-wordmark-frame {
    padding: 1rem 0.65rem;
  }
  .frame-label--side,
  .focus-reticle {
    display: none;
  }
}

/* Short landscape phones use a two-column poster instead of a squeezed
   portrait composition. This keeps the full cover within one viewport. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 1023px) {
  .hero-landing-name {
    min-height: 100svh;
    padding-block: calc(var(--nav-h) + var(--space-xs)) var(--space-sm);
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-sm) var(--space-xl);
  }
  .hero-cover-meta {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    font-size: 0.62rem;
  }
  .hero-cover-meta p:last-child {
    text-align: left;
  }
  .hero-wordmark-frame {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding: 1rem;
  }
  .hero-brand {
    font-size: clamp(3.5rem, 8.8vw, 5.4rem);
  }
  .hero-cover-foot {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .hero-cover-foot p {
    font-size: var(--step-0);
  }
  .frame-label--side,
  .focus-reticle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Touch / narrow screens (phones + iPad, portrait and landscape).
   The scattered "desk of prints" only reads with a wide pointer, so below
   1080px the photographic hero becomes a calm magazine cover: the wordmark
   and meta stack on top, and the prints reflow into a horizontal, swipeable
   filmstrip beneath. Everything sits in normal flow, so nothing overlaps the
   name or overhangs into the next section.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-landing--photographic .hero-landing-name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xl);
    min-height: 100svh;
    padding: calc(var(--nav-h) + var(--space-lg)) clamp(1rem, 4vw, 2rem)
      var(--space-xl);
  }

  .hero-landing--photographic .hero-wordmark-frame--photographic {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .hero-landing--photographic
    .hero-wordmark-frame--photographic
    .hero-name-lockup {
    position: relative;
    order: 0;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    padding-bottom: 0;
    justify-items: center;
    transform: none;
    text-align: center;
  }

  .hero-landing--photographic
    .hero-wordmark-frame--photographic
    .hero-brand {
    justify-content: center;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(2.6rem, 12vw, 6rem);
  }

  /* The name shows at once on touch; there is no print pile to settle. */
  .hero-wordmark-frame--photographic.is-name-hidden .hero-brand,
  .hero-wordmark-frame--photographic.is-name-hidden .hero-name-lockup {
    opacity: 1;
  }

  .hero-landing--photographic .hero-cover-meta {
    position: static;
    inset: auto;
    width: 100%;
    max-width: 34rem;
    margin: var(--space-sm) auto 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-2xs);
    text-align: center;
  }

  .hero-landing--photographic .hero-cover-meta p,
  .hero-landing--photographic .hero-cover-meta p:first-child,
  .hero-landing--photographic .hero-cover-meta p:last-child {
    justify-self: center;
    text-align: center;
  }

  .hero-landing--photographic .hero-print-pile {
    position: relative;
    inset: auto;
    order: 1;
    display: flex;
    width: auto;
    gap: clamp(0.85rem, 3vw, 1.5rem);
    padding: 1.5rem clamp(0.75rem, 8vw, 4rem);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(0.75rem, 8vw, 4rem);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    pointer-events: auto;
  }

  .hero-landing--photographic .hero-print-pile::-webkit-scrollbar {
    display: none;
  }

  .hero-landing--photographic .hero-print-pile .hero-drag-print {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    width: clamp(9rem, 42vw, 13rem);
    padding: clamp(0.35rem, 1vw, 0.6rem);
    padding-bottom: clamp(1.4rem, 4vw, 2rem);
    scroll-snap-align: center;
    transition: box-shadow 0.3s;
  }

  .hero-landing--photographic .hero-print-pile .hero-drag-print:nth-child(odd) {
    --print-tilt: -2.5deg;
  }

  .hero-landing--photographic .hero-print-pile .hero-drag-print:nth-child(even) {
    --print-tilt: 2.5deg;
  }

  .hero-landing--photographic .hero-print-pile .hero-drag-print figcaption {
    inset: auto clamp(0.35rem, 1vw, 0.6rem) clamp(0.45rem, 1.2vw, 0.6rem);
  }

  /* Desktop-only viewfinder flourishes that don't fit the stacked cover. */
  .hero-landing--photographic .hero-issue-mark,
  .hero-wordmark-frame--photographic .frame-label,
  .hero-wordmark-frame--photographic .focus-reticle {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   iPhone: a photo-free editorial cover. One strong type composition, one
   solid golden-hour accent, and no floating frame pieces or text panels.
   Placed after the filmstrip block so iPad keeps the swipeable strip.
   -------------------------------------------------------------------------- */
@media (max-width: 720px), (orientation: landscape) and (max-height: 560px) {
  .hero-landing--photographic {
    overflow: hidden;
  }

  .hero-landing--photographic .hero-print-pile {
    display: none;
  }

  .hero-landing--photographic .hero-landing-name {
    align-items: flex-start;
    justify-content: center;
    padding-bottom: var(--space-xl);
  }

  .hero-landing--photographic .hero-wordmark-frame--photographic {
    gap: 0;
  }

  .hero-landing--photographic
    .hero-wordmark-frame--photographic
    .hero-name-lockup {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    text-align: left;
  }

  .hero-landing--photographic
    .hero-wordmark-frame--photographic
    .hero-brand {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin-inline: 0;
    background: transparent;
    font-size: clamp(3.25rem, 16vw, 5.25rem);
    line-height: 0.86;
  }

  .hero-wordmark-frame--photographic .brand-line,
  .hero-wordmark-frame--photographic .brand-line:nth-child(2) {
    margin-top: 0;
  }

  .hero-wordmark-frame--photographic .focus-corner {
    display: none;
  }

  .hero-landing--photographic .hero-cover-meta {
    margin: clamp(1.75rem, 7vh, 3rem) 0 0;
    max-width: none;
    justify-items: start;
    gap: 0.65rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.4;
    opacity: 1;
    transform: none;
  }

  .hero-landing--photographic .hero-cover-meta p,
  .hero-landing--photographic .hero-cover-meta p:first-child,
  .hero-landing--photographic .hero-cover-meta p:last-child {
    justify-self: start;
    width: auto;
    padding: 0;
    background: transparent;
    text-align: left;
  }

  /* A single solid sun: memorable, restrained, and unmistakably golden hour. */
  .hero-landing--photographic .hero-name-lockup::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.25rem;
    right: -1.5rem;
    width: clamp(5.5rem, 25vw, 7rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    animation: heroGolden 9s var(--ease-out) infinite alternate;
  }

  .hero-landing--photographic .hero-name-lockup::after {
    content: "01 / ZRH";
    position: absolute;
    z-index: 1;
    top: -0.7rem;
    right: 0.15rem;
    color: var(--navy);
    font-family: var(--font-title);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.16em;
  }

  .hero-landing--photographic .hero-cover-line {
    display: block;
    position: relative;
    width: fit-content;
    max-width: 26ch;
    margin: var(--space-xl) 0 0;
    padding-bottom: 0.75rem;
    color: var(--navy);
    font-size: clamp(1.4rem, 6.8vw, 1.9rem);
    line-height: 1.12;
  }

  .hero-landing--photographic .hero-cover-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(5rem, 30vw, 8rem);
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    animation: heroRule 1.1s var(--ease-out) 0.55s both;
  }
}

@keyframes heroGolden {
  from {
    transform: translate3d(0, -0.2rem, 0) scale(1);
    opacity: 0.82;
  }
  to {
    transform: translate3d(-0.35rem, 0.35rem, 0) scale(1.06);
    opacity: 1;
  }
}

@keyframes heroRule {
  to {
    transform: scaleX(1);
  }
}

/* Touch-specific affordances: no interaction relies on hover and all primary
   hero/navigation targets meet the 44px tap target. */
@media (hover: none), (pointer: coarse) {
  .hero-work-link {
    min-height: 44px;
  }
  .hero-work-link span {
    transform: none;
  }
  .service-aside .link-underline {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Respect iPhone notches in landscape while keeping the editorial grid intact. */
@supports (padding: max(0px)) {
  .site-header,
  .hero-landing {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-line > span {
    animation: none;
    transform: none;
  }
  .brand-line {
    transition: none;
  }
  .focus-corner {
    animation: none;
  }
  .hero-drag-print {
    transition: box-shadow 0.3s;
  }
  .hero-name-lockup::before {
    animation: none;
  }
  .hero-cover-line::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* ============================================================
   FEATURED WORK — pinned, scroll-driven photo story.
   Scroll into the section and it locks: each featured photo
   reveals in three beats — image, then title, then a Times
   New Roman note on why it was taken — before advancing.
   ============================================================ */
.pinned-story {
  /* Give each photo enough scroll distance for its three beats to settle. */
  --pin-unit: 150svh;
  padding-block: var(--space-5xl) 0;
}

.pinned-story .ed-kicker {
  font-size: var(--step-1);
  color: var(--gold-deep);
  letter-spacing: 0.01em;
}

/* -------- Fallback / no-JS / reduced-motion: a plain readable stack. -------- */
.pinned-track {
  width: min(100% - 2.5rem, 1240px);
  margin-inline: auto;
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

.pinned-progress {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pin-slide {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pin-figure {
  overflow: hidden;
  background: var(--paper-3);
}

.pin-figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(380px, 60vh, 600px);
}

.pin-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.pin-num {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--step-0);
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

.pin-title {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
}

.pin-place {
  font-family: var(--font-title);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-top: var(--space-2xs);
}

/* The note is intentionally set in Times New Roman — the photographer's voice. */
.pin-story {
  margin-top: var(--space-sm);
  max-width: 46ch;
}

.pin-story p {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.42;
  color: var(--ink-70);
}

.pin-story p + p {
  margin-top: var(--space-sm);
}

/* -------- Pinned mode (added by JS when motion is allowed). -------- */
.pinned-story.is-pinned .pinned-track {
  position: relative;
  width: 100%;
  margin: 0;
  display: block;
  height: calc((var(--slide-count) + 1) * var(--pin-unit));
}

.pinned-story.is-pinned .pinned-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.pinned-story.is-pinned .pin-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--space-lg);
  width: min(100% - 2.5rem, 1240px);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--space-lg)) 0 var(--space-2xl);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-out);
}

.pinned-story.is-pinned .pin-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Beat 1 — the picture arrives first. */
.pinned-story.is-pinned .pin-figure {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out),
    clip-path 1s var(--ease-out);
}

.pinned-story.is-pinned .pin-slide.is-active .pin-figure {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

.pinned-story.is-pinned .pin-figure img {
  max-height: min(58svh, 620px);
}

/* Beat 2 — the title. Beat 3 — the note. Both wait their turn. */
.pinned-story.is-pinned .pin-num,
.pinned-story.is-pinned .pin-title,
.pinned-story.is-pinned .pin-place,
.pinned-story.is-pinned .pin-story {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.pinned-story.is-pinned .pin-slide.show-title .pin-num,
.pinned-story.is-pinned .pin-slide.show-title .pin-title,
.pinned-story.is-pinned .pin-slide.show-title .pin-place {
  opacity: 1;
  transform: none;
}

.pinned-story.is-pinned .pin-slide.show-story .pin-story {
  opacity: 1;
  transform: none;
}

.pinned-story.is-pinned .pin-copy {
  align-items: center;
}

.pinned-story.is-pinned .pin-story {
  margin-inline: auto;
}

/* Progress rail — a quiet index of where you are in the story. */
.pinned-story.is-pinned .pinned-progress {
  position: absolute;
  z-index: 3;
  left: clamp(0.9rem, 2.5vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.pinned-progress-dot {
  width: 2px;
  height: clamp(14px, 3vh, 26px);
  background: var(--ink-15);
  transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  transform-origin: center;
}

.pinned-progress-dot.is-done {
  background: var(--ink-45);
}

.pinned-progress-dot.is-current {
  background: var(--gold-deep);
  transform: scaleX(2.4);
}

/* -------- Two-column composition on wider screens. -------- */
@media (min-width: 900px) {
  .pinned-story.is-pinned .pin-slide {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    justify-items: stretch;
    text-align: left;
    gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
    padding-inline: clamp(var(--space-xl), 6vw, 5rem);
  }

  .pinned-story.is-pinned .pin-figure {
    justify-self: center;
  }

  .pinned-story.is-pinned .pin-figure img {
    max-height: min(72svh, 720px);
  }

  .pinned-story.is-pinned .pin-copy {
    align-items: flex-start;
  }

  .pinned-story.is-pinned .pin-story {
    margin-inline: 0;
  }

  /* Landscapes read better with the note tucked beneath a wider frame. */
  .pinned-story.is-pinned .pin-slide.is-landscape,
  .pinned-story.is-pinned .pin-slide.is-wide {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  }

  .pinned-story .pin-title {
    font-size: var(--step-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pinned-story.is-pinned .pin-slide,
  .pinned-story.is-pinned .pin-figure,
  .pinned-story.is-pinned .pin-num,
  .pinned-story.is-pinned .pin-title,
  .pinned-story.is-pinned .pin-place,
  .pinned-story.is-pinned .pin-story {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Final phone layout overrides. Keep these last so the mobile composition is
   not affected by the older experimental hero and gallery rules above. */
@media (max-width: 767px) {
  html {
    scroll-behavior: auto;
    scroll-padding-top: 0;
  }

  .site-header,
  .site-header:not(.is-scrolled),
  .site-header.is-scrolled {
    display: flex !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: var(--paper);
    border-bottom: 1px solid var(--ink-08);
    transition: none;
  }

  .portfolio-intro.has-photo {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .portfolio-intro__inner.has-photo {
    position: relative;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: calc(var(--nav-h) + 0.75rem) 0.75rem 1.4rem;
    overflow: visible;
  }

  .portfolio-intro__photo {
    width: 100%;
    height: auto !important;
    margin: 0 auto;
  }

  .portfolio-intro__photo img {
    width: 100%;
    height: auto !important;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  .portfolio-intro__name,
  .portfolio-intro__inner.has-photo .portfolio-intro__name {
    position: static;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1rem 0 0;
    font-size: clamp(1.85rem, 9.5vw, 3rem);
    line-height: 1;
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .portfolio-intro__name span,
  .intro-playing .portfolio-intro__name span {
    animation: none;
    transform: none;
  }

  .portfolio-intro__footer,
  .intro-playing .portfolio-intro__footer {
    position: static;
    display: block;
    width: 100%;
    margin: 0.45rem 0 0;
    padding: 0;
    font-size: 0.66rem;
    line-height: 1.35;
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .portfolio-intro__footer p {
    white-space: normal;
  }

  .portfolio-index {
    min-height: 0;
    padding-top: 1rem;
  }

  .portfolio-masonry {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 4px;
    gap: 0.65rem;
    height: auto;
    column-count: initial;
    overflow: visible;
    padding: 0;
  }

  .portfolio-masonry > *,
  .portfolio-masonry .gallery-item {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    align-self: start;
  }

  .portfolio-masonry .gallery-media,
  .portfolio-masonry .gallery-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
  }

  .portfolio-mobile-more {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 0.5rem;
    border: 1px solid var(--navy);
    background: var(--paper);
    color: var(--navy);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .portfolio-mobile-more[hidden],
  .portfolio-masonry .gallery-item.is-hidden,
  .gallery-item.is-mobile-collapsed {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .portfolio-mobile-more {
    display: none !important;
  }
}