/* ============================================================
   mayhemehyam — Immersive video-forward system
   Font: Clash Display, used everywhere (wordmark, headings,
   body, UI/meta) for a single unified typographic voice.
   Self-hosted (assets/fonts/) rather than loaded from Fontshare's
   live API — that API intermittently rate-limits/restricts and
   silently serves an empty stylesheet when it does, which made
   the font "randomly" fall back to the browser default serif.
   ============================================================ */

@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/ClashDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:        #050505;
  --bg-soft:   #0b0b0d;
  --ink:       #f4f2ee;
  --ink-dim:   rgba(244, 242, 238, 0.58);
  --ink-faint: rgba(244, 242, 238, 0.34);
  --line:      rgba(255, 255, 255, 0.1);
  --line-2:    rgba(255, 255, 255, 0.16);
  --blue:      #2f6bff;
  --blue-2:    #7aa2ff;
  --red:       #ff2247;
  --red-2:     #ff5f77;
  --shadow-red:   #b3122c;
  --shadow-red-2: #ff3350;

  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* "Cast shadow" text treatment — a solid offset near the glyphs plus
     a softer glow further down, like light thrown from below. Reused
     verbatim on the wordmark, nav links, active gallery caption,
     contact links and the form submit button. */
  --cast-shadow:
    0 0.03em 0 var(--shadow-red),
    0 0.07em 0 rgba(179,18,44,0.85),
    0 0.15em 0.26em rgba(179,18,44,0.55),
    0 0.34em 0.6em rgba(179,18,44,0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Clash Display", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--blue); color: #050505; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Visually hidden but present for screen readers / SEO — used for
   page <h1>s whose visible text has been intentionally removed. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.grain {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Typography helpers ---------------- */
.eyebrow {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  text-align: center;
  max-width: min(90vw, 620px);
  line-height: 1.6;
}

h1, h2 { font-family: "Clash Display", sans-serif; font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; }

/* ---------------- Buttons / links ---------------- */
.btn__icon {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-grid; place-items: center;
  background: rgba(255,255,255,0.08);
  transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.btn__icon svg { width: 15px; height: 15px; }

/* ---------------- Navigation ---------------- */
.nav {
  position: fixed; z-index: 40;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.3rem clamp(1.25rem, 4vw, 3rem);
  transition: transform 0.6s var(--ease), background 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
}
.nav.is-scrolled { background: rgba(5,5,5,0.55); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav.is-hidden { transform: translateY(-120%); }

.nav__brand { display: flex; align-items: center; gap: 0.6rem; }
.nav__logo { width: 26px; height: 26px; object-fit: contain; }
.nav__word { font-size: 16px; }

.nav__links { margin-left: auto; display: flex; gap: 2.2rem; font-size: 13px; color: var(--ink-dim); font-family: "Clash Display", sans-serif; font-weight: 700; }
.nav__links a {
  position: relative;
  transition: color 0.4s var(--ease);
  text-shadow: var(--cast-shadow);
}
.nav__links a::after { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background: var(--ink); transition: width 0.4s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; }

.nav__burger { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,0.04); position: relative; cursor: pointer; }
.nav__burger span { position: absolute; left: 50%; top: 50%; width: 15px; height: 1.5px; background: var(--ink); transition: transform 0.5s var(--ease), opacity 0.4s var(--ease); }
.nav__burger span:nth-child(1) { transform: translate(-50%, -4px); }
.nav__burger span:nth-child(2) { transform: translate(-50%, 4px); }
.nav.is-open .nav__burger span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { transform: translate(-50%, 0) rotate(-45deg); }

/* ---------------- Full-screen menu ---------------- */
.menu {
  position: fixed; inset: 0; z-index: 35;
  background: rgba(5,5,6,0.86);
  backdrop-filter: blur(34px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem 2rem 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__inner { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__link {
  font-family: "Clash Display", sans-serif; font-size: clamp(2.6rem, 12vw, 6rem); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05;
  display: flex; align-items: baseline; gap: 1.2rem;
  opacity: 0; transform: translateY(40px);
  transition: color 0.4s var(--ease);
  color: var(--ink);
}
.menu.is-open .menu__link { animation: rise 0.8s var(--ease) forwards; }
.menu.is-open .menu__link:nth-child(1) { animation-delay: 0.10s; }
.menu.is-open .menu__link:nth-child(2) { animation-delay: 0.16s; }
.menu.is-open .menu__link:nth-child(3) { animation-delay: 0.22s; }
.menu__link:hover { color: var(--shadow-red-2); }
.menu__idx { font-family: "Clash Display", sans-serif; font-size: 0.85rem; color: var(--ink-faint); letter-spacing: 0.1em; }
.menu__foot { margin-top: 3rem; display: flex; justify-content: space-between; color: var(--ink-dim); font-size: 13px; font-family: "Clash Display", sans-serif; }
.menu__wordmark { margin-top: 2.6rem; font-size: clamp(1.7rem, 7vw, 3.4rem); }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ---------------- Page background video (Work / About / Contact) ----
   Fixed, stays put behind scrolling content. Dimmed harder than the
   hero since it's a backdrop for dense body text, not the focal
   element. */
.page-bg {
  position: fixed; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95) brightness(0.58);
}
.page-bg-scrim {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(65% 55% at 50% 38%, rgba(5,5,5,0.32) 0%, rgba(5,5,5,0.58) 65%, rgba(5,5,5,0.85) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.4) 0%, rgba(5,5,5,0.5) 100%);
}
.particles-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ---------------- HERO (fullscreen video) ---------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: clamp(5rem, 9vw, 6rem) clamp(1.5rem, 5vw, 5rem) 4rem;
}
.hero__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.7) contrast(1.02) brightness(0.62);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 52% at 50% 54%, rgba(5,5,5,0.78) 0%, rgba(5,5,5,0.5) 48%, rgba(5,5,5,0.15) 74%, transparent 100%),
    linear-gradient(180deg, rgba(5,5,5,0.5) 0%, transparent 26%, transparent 68%, var(--bg) 100%);
}

.hero__content { max-width: min(1120px, 100%); display: flex; flex-direction: column; align-items: center; }

/* Hero is visible at load, not scroll-triggered — animate in directly,
   independent of the below-the-fold IntersectionObserver reveal system. */
@keyframes heroReveal { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.hero .eyebrow, .hero__mark, .hero__controls { animation: heroReveal 0.9s var(--ease-soft) both; }
.hero .eyebrow { animation-delay: 0.1s; }
.hero__mark { animation-delay: 0.2s; }
.hero__controls { animation-delay: 0.5s; }

.hero__mark { margin: 1.8rem 0 0; font-size: clamp(2.3rem, 12vw, 9rem); line-height: 0.92; display: flex; justify-content: center; }
.wm-group { display: inline-flex; }
.wm-group--r { transform: scaleX(-1); }
.wm-l { display: inline-block; will-change: transform, opacity; }

/* Mirror sits flush at the foot of the title, same size — a literal
   reflection, not a decorative echo. Interaction: water ripple via
   SVG feTurbulence/feDisplacementMap, driven from main.js. */
.hero__mirror {
  display: block;
  font-size: clamp(2.3rem, 12vw, 9rem);
  line-height: 0.92;
  margin-top: 0;
  transform: scaleY(-1);
  opacity: 0.5;
  filter: url(#waterRipple);
  transition: opacity 0.5s var(--ease);
  cursor: default;
}
.hero__mirror:hover, .hero__mirror.is-active { opacity: 0.72; }

.hero__controls { position: absolute; left: clamp(1.25rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 2.4rem); display: flex; gap: 0.6rem; z-index: 2; }
.hero__ctrl {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(8,8,10,0.6);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.hero__ctrl:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.hero__ctrl svg { width: 16px; height: 16px; }

/* ---------------- Sections & index numerals ---------------- */
.section { position: relative; padding: clamp(5rem, 11vw, 9rem) clamp(1.5rem, 5vw, 5rem); max-width: 1280px; margin: 0 auto; }
.section--page { padding-top: clamp(8rem, 13vw, 11rem); min-height: 100dvh; }
.section__head { display: flex; align-items: baseline; gap: 1.4rem; margin-bottom: 3rem; padding-top: 1.6rem; }
.section__head--split { justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.6rem 3rem; }
.section__head--split > div { display: flex; align-items: baseline; gap: 1.4rem; }
.section__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.section__lead { max-width: 36ch; color: var(--ink-dim); font-size: 0.98rem; }

/* ---------------- Work: Carousel gallery ----------------
   One slide is "active" (large image + name + year, the whole card
   wrapped in a single .gallery__link); neighbors show only their
   name, peeking in from the edges. Each slide is positioned
   individually by main.js based on its circular distance from the
   active index (not DOM order), so the peek wraps seamlessly at both
   ends — slide 5 sits just left of slide 1, etc. See "Work carousel"
   in main.js. */
.gallery {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  touch-action: pan-y;
}
.gallery__track {
  position: relative;
  width: 100%; height: 100%;
}
/* Slide position/size/opacity are all one continuous function of
   distance-from-active (delta), computed and applied inline by
   main.js's render(). There's no separate "peek thumbnail" element —
   a neighbor slide (delta ±1) IS the small peek image either side of
   centre, at reduced scale/opacity; slides two or more away are
   scaled further down and invisible. Because it's one CSS transition
   on the same element across every delta, stepping the carousel
   visibly grows the incoming peek into full size at centre and
   shrinks the outgoing centre slide down into the opposite peek slot
   — rather than the old model of a static peek thumbnail plus a
   separate slide that faded in/out of existence at centre. */
.gallery__slide {
  position: absolute; top: 50%; left: 50%;
  width: clamp(280px, 74vw, 880px);
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease);
}
.gallery__link {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  pointer-events: none;
}
.gallery__slide.is-active .gallery__link,
.gallery__slide.is-peek .gallery__link { pointer-events: auto; cursor: pointer; }
.gallery__link:focus-visible { outline: 2px solid var(--red-2); outline-offset: 6px; }
.gallery__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid rgba(255,255,255,0.08);
  /* Layered, increasing offset/blur/opacity (elevation technique) so
     it reads as a real object casting a shadow onto the surface
     behind it, rather than one flat ambient blur. */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 16px rgba(0,0,0,0.32),
    0 24px 48px rgba(0,0,0,0.38),
    0 48px 96px rgba(0,0,0,0.42);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05); transition: filter 0.5s var(--ease); }
.gallery__slide.is-peek .gallery__frame img { filter: saturate(0.6) brightness(0.72) contrast(1.05); }

.gallery__slide.is-active .gallery__frame:hover {
  transform: scale(1.055);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.3),
    0 8px 16px rgba(0,0,0,0.32),
    0 24px 48px rgba(0,0,0,0.38),
    0 0 70px 14px rgba(179,18,44,0.5),
    0 48px 96px rgba(0,0,0,0.45);
}

.gallery__caption { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0; transition: opacity 0.5s var(--ease); }
.gallery__slide.is-active .gallery__caption { opacity: 1; }
.gallery__name {
  font-family: "Clash Display", sans-serif; font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--ink-faint);
  transition: font-size 0.6s var(--ease), color 0.6s var(--ease), text-shadow 0.4s var(--ease);
}
.gallery__slide.is-active .gallery__name {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  color: var(--ink);
  text-shadow: var(--cast-shadow);
}
.gallery__year {
  opacity: 0; height: 0; overflow: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease), text-shadow 0.4s var(--ease), color 0.4s var(--ease);
  font-family: "Clash Display", sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.gallery__slide.is-active .gallery__year {
  opacity: 1; height: auto; pointer-events: auto;
  transition: opacity 0.5s var(--ease) 0.25s, text-shadow 0.4s var(--ease), color 0.4s var(--ease);
}

/* Title and description glow together as one unit on hover, same red
   bloom language as the image's hover glow — triggered off the
   shared .gallery__caption rather than each element separately, so
   hovering anywhere over the pair lights both up at once. */
.gallery__slide.is-active .gallery__caption:hover .gallery__name {
  text-shadow:
    0 0.03em 0 var(--shadow-red),
    0 0.07em 0 rgba(179,18,44,0.9),
    0 0 30px rgba(255,51,80,0.85),
    0 0 60px rgba(179,18,44,0.6);
}
.gallery__slide.is-active .gallery__caption:hover .gallery__year {
  color: var(--ink);
  text-shadow: 0 0 16px rgba(255,51,80,0.85), 0 0 32px rgba(179,18,44,0.55);
}

.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.03);
  color: var(--ink); display: grid; place-items: center;
  cursor: pointer; z-index: 3;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.gallery__arrow:hover { background: rgba(255,255,255,0.1); border-color: var(--line-2); }
.gallery__arrow--prev { left: clamp(0.75rem, 3vw, 2.5rem); }
.gallery__arrow--next { right: clamp(0.75rem, 3vw, 2.5rem); }
.gallery__arrow svg { width: 18px; height: 18px; }

/* ---------------- Specimen (Work detail / "Field Guide Entry") ----
   Each artwork treated as a catalogued specimen: a field number, a
   binomial, a "vitals" index card, then three field-note entries
   (Habitat / Behavioral Traits / Ecological Impact). Deliberately
   not a scroll-hijacked story page — a calmer, document-like read,
   distinct from the carousel's motion. */
.specimen__hero {
  position: relative;
  height: 82vh; min-height: 480px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.specimen__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) contrast(1.05) brightness(0.72); }
.specimen__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,0.15) 0%, rgba(5,5,5,0.35) 55%, var(--bg) 100%); }
.specimen__hero-content { position: relative; z-index: 1; padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(2.5rem, 6vw, 4rem); max-width: 1280px; margin: 0 auto; width: 100%; }
.specimen__no {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: "Clash Display", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.45rem 0.95rem;
  margin-bottom: 1.2rem;
  background: rgba(5,5,5,0.4);
  backdrop-filter: blur(6px);
}
.specimen__title { font-size: clamp(2.2rem, 6vw, 4.2rem); }
.specimen__binomial { display: block; margin-top: 0.5rem; font-family: "Clash Display", sans-serif; font-style: italic; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--ink-dim); }

.specimen__body { padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 5vw, 5rem); max-width: 1440px; margin: 0 auto; }

/* Two-column read: field-guide copy on the left, a packed mixed-size
   image grid on the right (in the spirit of hardwork.party's project
   grids, adapted to this site's darker/quieter register — no hover
   chaos, just varied tile sizes). Stacks to one column on tablet. */
.specimen__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.specimen__text { min-width: 0; }
.specimen__lede { font-family: "Clash Display", sans-serif; font-weight: 500; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.5; max-width: 46ch; }

/* 4-column masonry grid, hardwork.party-style: each image gets its
   own independent column AND row span (set inline per-image in each
   work-*.html rather than nth-child here, so every artwork has its
   own arrangement). Row spans are deliberately NOT matched within a
   "row" — each column fills to a different height, so the grid ends
   in a jagged bottom edge with a few images protruding, rather than
   flat, uniform-height bands. grid-auto-flow:dense pulls later items
   up into whatever pockets that leaves, so gaps stay small/scattered
   rather than one glaring hole next to a single odd-sized tile (the
   thing to avoid — occasional small gaps are fine, one lone stark
   protrusion isn't). See any work-*.html gallery for the pattern. */
.specimen__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: dense;
  gap: 0.75rem;
  position: sticky;
  top: clamp(6rem, 10vw, 8rem);
}
.specimen__gallery-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.08);
  filter: saturate(0.85) contrast(1.05);
}

.specimen__vitals {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line-2); border-radius: 1rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,0.02);
}
.specimen__stat { padding: 1.4rem 1.5rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; }
.specimen__stat:first-child { border-left: none; }
.specimen__stat span { font-family: "Clash Display", sans-serif; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.specimen__stat b { font-family: "Clash Display", sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--ink); line-height: 1.35; }

.specimen__notes { margin-top: clamp(3rem, 6vw, 4.5rem); display: flex; flex-direction: column; gap: clamp(2.2rem, 5vw, 3rem); }
.specimen__note { display: grid; grid-template-columns: 13ch 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-top: clamp(2.2rem, 5vw, 3rem); border-top: 1px solid var(--line); }
.specimen__note:first-child { padding-top: 0; border-top: none; }
.specimen__note h2 { font-family: "Clash Display", sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.specimen__note p { color: var(--ink-dim); font-size: 1.05rem; max-width: 58ch; }
.specimen__note p + p { margin-top: 1em; }

.specimen__pager {
  margin-top: clamp(3.5rem, 7vw, 5rem);
  padding-top: 2rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.specimen__pager-link { font-family: "Clash Display", sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--ink-dim); transition: color 0.4s var(--ease); }
.specimen__pager-link:hover { color: var(--ink); }
.specimen__pager-link--index { font-family: "Clash Display", sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------------- About ---------------- */
.about__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
  gap: clamp(3rem, 6vw, 6rem); align-items: start; max-width: 1180px;
}
.about__text-col { min-width: 0; max-width: 62ch; display: flex; flex-direction: column; gap: 1.5rem; }
.about__lede { font-family: "Clash Display", sans-serif; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.about__text { display: flex; flex-direction: column; gap: 1.3em; color: var(--ink-dim); font-size: 1.05rem; font-family: "Clash Display", sans-serif; font-weight: 500; }

/* Portrait: the whole photo perimeter fades to transparent through a
   single radial-gradient mask on the img itself, letting the real
   page background (video + scrim) show through underneath rather
   than compositing a separate solid-color patch on top — a flat
   color patch mismatches the textured video behind it, and masking
   only the 4 corners (an earlier attempt) still left long hard-edged
   straight lines along the middle of each side. The ellipse is sized
   so the face/eyes stay fully opaque while all 4 edges (not just
   corners) dissolve. */
.about__portrait { justify-self: end; min-width: 0; width: 100%; max-width: 380px; position: sticky; top: clamp(6rem, 10vw, 8rem); }
.about__portrait-img {
  display: block; width: 100%; aspect-ratio: 896 / 1200; object-fit: cover;
  filter: brightness(0.7);
  -webkit-mask-image: radial-gradient(ellipse 60% 56% at 50% 42%, #000 0%, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 56% at 50% 42%, #000 0%, #000 48%, transparent 100%);
}

/* ---------------- Contact ---------------- */
.form-wrap { max-width: 980px; }
.form-intro {
  color: var(--ink); font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.01em;
  max-width: 46ch; margin-bottom: 2.4rem;
}

/* Form on the left, the mailto/Instagram alternative sitting beside it
   on the right rather than stacked underneath. Stacks to one column
   on tablet/mobile (contact-alt drops below, same as before). */
.contact__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 3rem; }
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 242, 238, 0.72);
}
.form-field input, .form-field textarea {
  font-family: "Clash Display", sans-serif; font-weight: 500; font-size: 1rem;
  color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line-2);
  padding: 0.6rem 0.1rem; border-radius: 0; resize: vertical;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.form-field textarea { min-height: 140px; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); }
.form-field input:focus, .form-field textarea:focus {
  outline: none; border-color: var(--shadow-red-2); background: rgba(255,255,255,0.03);
}

.contact-form__submit {
  display: inline-flex; align-items: center; gap: 0.9rem; width: fit-content;
  font-family: "Clash Display", sans-serif; font-weight: 700; font-size: 1rem;
  color: var(--ink); background: none; border: none; cursor: pointer;
  margin-top: 0.4rem;
  text-shadow: var(--cast-shadow);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.contact-form__submit:hover { color: var(--shadow-red-2); border-color: var(--shadow-red-2); }
.contact-form__submit .btn__icon { background: rgba(255,255,255,0.08); }
.contact-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.contact-form__note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.9rem; max-width: 46ch; }
.contact-form__status { font-size: 0.9rem; color: var(--ink-dim); margin-top: 0.6rem; max-width: 46ch; min-height: 1.3em; }
.contact-form__status.is-error { color: var(--red-2); }

.contact-alt { display: flex; flex-direction: column; gap: 0; padding-top: 0.6rem; }
.contact-alt__or {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.contact__email {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: "Clash Display", sans-serif; font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.9rem);
  color: var(--ink);
  text-shadow: var(--cast-shadow);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.contact__email:hover { color: var(--shadow-red-2); border-color: var(--shadow-red-2); }
.contact__email .btn__icon { background: rgba(255,255,255,0.08); }

.contact__social {
  display: flex; width: fit-content; align-items: center; gap: 0.6rem;
  margin-top: 1.6rem;
  font-family: "Clash Display", sans-serif; font-weight: 700; font-size: 0.95rem;
  color: var(--ink);
  text-shadow: var(--cast-shadow);
  transition: color 0.4s var(--ease);
}
.contact__social:hover { color: var(--shadow-red-2); }
.contact__social svg { width: 15px; height: 15px; }

/* ---------------- Wordmark (mayhemehyam titles) ----------------
   White fill with a deep-red cast shadow — a solid offset near the
   glyphs plus a softer glow further down, like light thrown from
   below. Clash Display: bold geometric sans, scales with em units
   so nav/footer/menu instances stay proportional.

   Structure everywhere the wordmark appears:
     .wm-half        — literal glyphs "mayhe"
     .wm-pivot       — the shared centre "m"
     .wm-half--flip  — the SAME "mayhe" markup, mirrored via
                       scaleX(-1) — a true duplicate-and-flip, not
                       the coincidentally-palindromic "ehyam" spelling.
*/
.wordmark {
  position: relative;
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  display: inline-block;
  white-space: nowrap;
  color: #fff;
  text-shadow: var(--cast-shadow);
}
.wm-half, .wm-pivot { display: inline-block; }
.wm-half--flip { transform: scaleX(-1); }
.wm-axis {
  position: absolute; left: 50%; top: -0.16em; bottom: -0.16em;
  width: 1px; transform: translateX(-50%) scaleY(0.4);
  transform-origin: center;
  background: linear-gradient(to bottom, transparent, var(--shadow-red-2), transparent);
  opacity: 0; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.wordmark:hover .wm-axis, .hero__mark:hover .wm-axis { opacity: 0.9; transform: translateX(-50%) scaleY(1); }
.hero__mark .wm-axis { top: -0.05em; bottom: -0.05em; }

/* Small reflection echo (nav/footer/menu) — a real duplicated copy,
   vertically flipped and faded, so it matches the mirrored primary
   exactly (a CSS attr()-generated pseudo-element couldn't clone the
   nested flip structure above). */
.wm-stack { display: inline-flex; flex-direction: column; }
.wm-echo { margin-top: 0.06em; transform: scaleY(-1); opacity: 0.16; -webkit-mask-image: linear-gradient(to bottom, transparent 8%, black 85%); mask-image: linear-gradient(to bottom, transparent 8%, black 85%); pointer-events: none; }

/* ---------------- Reveal states ---------------- */
.reveal { opacity: 0; transform: translateY(36px); filter: blur(6px); }
.reveal.is-in { opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft), filter 0.9s var(--ease-soft); }

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; margin-left: auto; }
  .section { padding: 4rem 1.25rem; }
  .section--page { padding-top: 7rem; }
  .hero { padding-bottom: 6rem; }
  .gallery__arrow { width: 38px; height: 38px; }
  .gallery__arrow svg { width: 15px; height: 15px; }
  .specimen__vitals { grid-template-columns: repeat(2, 1fr); }
  .specimen__stat:nth-child(3) { border-left: none; }
  .specimen__stat:nth-child(3), .specimen__stat:nth-child(4) { border-top: 1px solid var(--line); }
  .specimen__note { grid-template-columns: 1fr; gap: 0.8rem; }
  .specimen__layout { grid-template-columns: 1fr; }
  .specimen__gallery { position: static; margin-top: 1rem; grid-auto-rows: 70px; }
  .about__body { grid-template-columns: 1fr; }
  .about__portrait { justify-self: center; position: static; max-width: 320px; margin-top: 1rem; }
  .contact__layout { grid-template-columns: 1fr; }
  .contact-alt { padding-top: 2.4rem; }
}
@media (max-width: 480px) {
  .hero__controls { bottom: 1.2rem; }
  .gallery__slide { width: 78vw; }
  .gallery__arrow--prev { left: 0.5rem; }
  .gallery__arrow--next { right: 0.5rem; }
  .specimen__vitals { grid-template-columns: 1fr; }
  .specimen__stat { border-left: none !important; border-top: 1px solid var(--line); }
  .specimen__stat:first-child { border-top: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}