/* ==========================================================================
   HECTOR'S EYE — Design System
   Photography / Video / Visual Storytelling
   ========================================================================== */

/* Fraunces + Work Sans, self-hosted (previously loaded via a CSS @import to
   fonts.googleapis.com — that chained 2-3 extra cross-origin round trips
   before any text could paint, which was the main driver of a poor mobile
   FCP/LCP in PageSpeed Insights. Self-hosting removes that dependency
   entirely. Files are static per-weight instances of the same variable
   fonts Google Fonts serves (SOFT/WONK axes pinned to Google's own API
   defaults, opsz left variable to preserve Fraunces' optical-size behaviour
   between headings and body text), subset to Latin, sourced from Google's
   own open-source font repo (OFL-licensed — see fonts/OFL-*.txt). */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:300;font-display:optional;
  src:url('../fonts/fraunces-roman-300.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400;font-display:optional;
  src:url('../fonts/fraunces-roman-400.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:500;font-display:optional;
  src:url('../fonts/fraunces-roman-500.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400;font-display:optional;
  src:url('../fonts/fraunces-italic-400.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:300;font-display:optional;
  src:url('../fonts/worksans-roman-300.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:400;font-display:optional;
  src:url('../fonts/worksans-roman-400.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:500;font-display:optional;
  src:url('../fonts/worksans-roman-500.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:600;font-display:optional;
  src:url('../fonts/worksans-roman-600.woff2') format('woff2');
}

:root{
  --black:#000000;
  --near-black:#0a0a0a;
  --panel:#111111;
  --line:rgba(255,255,255,0.12);
  --white:#f7f6f3;
  --body:#e2e1dc;
  --grey:#c7c6c1;
  --grey-dim:#8a8a84;
  --orange:#ec8027;
  --orange-dim:#8a4d18;
  --blue:#1265a5;
  --blue-dim:#0b3f68;
  --blue-bright:#4fa3e3;

  --serif:'Fraunces', Georgia, serif;
  --sans:'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --edge: clamp(1.25rem, 5vw, 5rem);
  --max: 1600px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  margin:0;
  letter-spacing:0.01em;
}
p{margin:0;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}

::selection{background:var(--orange);color:var(--black);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.7rem;
  font-family:var(--sans);
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--grey);
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:1.6rem;
  height:2px;
  background:currentColor;
  flex:none;
}
.eyebrow.accent-orange{color:var(--orange);}
.eyebrow.accent-blue{color:var(--blue-bright);}
.hero-kicker .eyebrow::before{display:none;}

/* ---------- Layout helpers ---------- */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}
.bleed{width:100%;}

/* ---------- Nav ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.4rem var(--edge);
  mix-blend-mode:normal;
  transition:padding .4s ease;
}
/* Background/blur lives on a ::before instead of directly on .site-header.
   backdrop-filter (like transform) creates a new containing block for any
   position:fixed descendant — and .main-nav's slide-in mobile panel is a
   fixed-position child of this element. Put the filter on .site-header
   itself and the mobile menu becomes fixed relative to the header's own
   (short) box the moment you scroll past 40px, instead of the viewport,
   which is exactly the "menu breaks after a short scroll" bug. Isolating
   the visual effect on a pseudo-element keeps .site-header filter-free. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0));
  transition:background .4s ease;
}
.site-header.scrolled{
  padding:0.9rem var(--edge);
  border-bottom:1px solid var(--line);
}
.site-header.scrolled::before{
  background:rgba(0,0,0,0.86);
  backdrop-filter:blur(10px);
}
.logo-mark{
  display:flex;
  align-items:center;
}
.logo-mark img{
  height:116px;
  width:auto;
  max-width:none;
  object-fit:contain;
  flex:none;
  display:block;
  transition:height .4s ease;
}
.site-header.scrolled .logo-mark img{height:92px;}
.footer-brand{display:flex;align-items:center;gap:0.7rem;margin-bottom:1rem;}
.footer-brand img{height:24px;width:auto;max-width:none;object-fit:contain;flex:none;}
.footer-grid .footer-brand h3{
  margin:0 !important;
  font-family:'Avenir Next','Avenir',var(--sans);
  font-weight:300;
  font-size:1.25rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:inherit;
}

.main-nav{display:flex;align-items:center;gap:2.4rem;}
.main-nav a{
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--white);
  position:relative;
  padding-bottom:4px;
  transition:color .25s ease;
}
.main-nav a::after{
  content:'';
  position:absolute;left:0;bottom:0;
  width:0;height:1px;
  background:var(--orange);
  transition:width .3s ease, background .25s ease;
}
.main-nav a:hover{color:var(--orange);}
.main-nav a:hover::after{width:100%;background:var(--orange);}
.main-nav a.is-active{color:var(--blue);}
.main-nav a.is-active::after{width:100%;background:var(--blue);}
.nav-cta{
  border:1px solid var(--orange);
  color:var(--orange) !important;
  padding:0.55rem 1.2rem !important;
  border-radius:999px;
  font-size:0.75rem !important;
  /* Symmetric padding above keeps "Enquire" centred within the pill itself.
     The plain nav links reserve 4px of padding-bottom only (for the underline
     indicator), which pulls their own text about 2px above the true center of
     their flex-row box — this nudges the whole pill up by that same amount so
     it lines up with the rest of the nav without throwing off its own
     internal centering. */
  position:relative;
  top:-2px;
  /* Bold in both states (not just :hover) so the rendered text width never
     changes between them — a weight-only change on :hover was making the
     pill widen and shove the earlier nav items sideways. */
  font-weight:600;
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--orange);color:var(--black) !important;}

.nav-toggle{display:none;}

/* Portfolio nav dropdown — desktop: hover/focus reveal, positioned under the
   "Portfolio" link. Keeps the hub page as the primary destination while
   giving one-click access to each gallery from anywhere on the site. */
.nav-item{position:relative;}
/* The Portfolio link is wrapped in this div for the dropdown, so unlike its
   sibling nav links it isn't a direct flex child of .main-nav and never gets
   auto-blockified — it stays display:inline by default, which makes its
   padding-bottom (used for the underline/active-state spacing on every other
   link) collapse to nothing. That misaligned it vertically against Home,
   About, etc. Forcing block here matches it back up with its siblings. */
.nav-item > a{display:block;}
.nav-dropdown{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%, 6px);
  min-width:160px;
  padding:0.7rem 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:120;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%, 2px);
}
.nav-dropdown a{
  display:block;
  padding:0.55rem 1.3rem !important;
  font-size:0.76rem !important;
  white-space:nowrap;
}
.nav-dropdown a::after{display:none;}
.nav-dropdown a:hover{background:rgba(255,255,255,0.06);}
.nav-dropdown a:first-child{
  border-bottom:1px solid var(--line);
  margin-bottom:0.35rem;
  padding-bottom:0.75rem !important;
  color:var(--grey-dim);
  font-size:0.7rem !important;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.dropdown-arrow{
  display:inline-block;
  font-size:0.95rem;
  margin-left:0.35rem;
  position:relative;top:1px;
  line-height:1;
  transition:transform .2s ease;
}
.nav-item:hover .dropdown-arrow,
.nav-item:focus-within .dropdown-arrow{transform:rotate(180deg);}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.9rem 1.9rem;
  border-radius:999px;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border:1px solid var(--white);
  transition:all .3s ease;
}
.btn:hover{background:var(--white);color:var(--black);}
.btn.solid{background:var(--orange);border-color:var(--orange);color:var(--black);font-weight:600;}
.btn.solid:hover{background:transparent;color:var(--orange);}
.btn.ghost-blue{border-color:var(--blue);}
.btn.ghost-blue:hover{background:var(--blue);color:var(--white);}

.text-link{
  position:relative;
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  border-bottom:1px solid var(--grey-dim);
  padding-bottom:3px;
}
.text-link:hover{border-color:var(--orange);color:var(--orange);}

/* ---------- Hero ----------
   Home now uses the shared .page-hero component (see below) instead of its
   own side-panel layout, to match the full-bleed centred treatment on Work
   and the Musings galleries. */

/* ---------- Section rhythm (no boxed cards) ---------- */
section{
  position:relative;
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:clamp(2.4rem, 6vw, 4.5rem);
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  max-width:16ch;
}
.section-head .desc{
  max-width:38ch;
  color:var(--body);
  font-size:0.98rem;
}
/* Richer section intro: a short bold lead-in line plus a fuller paragraph,
   used where a category needs more than the usual one-line .desc — wider
   column since the paragraph runs longer. */
.section-head .desc-block{max-width:46ch;}
.section-head .desc-block .desc-intro{
  color:var(--white);
  font-weight:600;
  font-size:1.02rem;
  margin-bottom:0.7rem;
}
.section-head .desc-block .desc{max-width:none;}
.divider{
  height:1px;
  background:linear-gradient(90deg, var(--line), transparent 70%);
  margin: 0 var(--edge);
}

/* ---------- Asymmetric editorial grid (the "no blocks" system) ---------- */
.frame-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(0.9rem, 2vw, 1.6rem);
}

/* Intro section: text column (both paragraphs, then the business-description
   caption, all stacked) on the left, a directly-stacked pair of visuals on
   the right — replaces an earlier absolutely-positioned photo that floated
   into the gap between the two paragraphs and ended up overlapping real text
   (read as a layout bug). The two columns can never collide since they're
   just side by side. The visuals are cropped to a wider-than-16:9 ratio
   (10% off the top and bottom of the original frame) and the column is 15%
   narrower than the initial version, so the pair reads as its own compact,
   cinematic strip rather than a tall block that dwarfs the text column's
   height and reads as tied to it. */
.intro-layered{
  display:flex;
  align-items:flex-start;
  gap:clamp(2rem, 4vw, 4rem);
}
.intro-text-col{
  flex:0 0 38%;
  display:flex;
  flex-direction:column;
  gap:1.8rem;
}
.intro-media{
  flex:0 0 52.2%;
  display:flex;
  flex-direction:column;
  gap:1rem;
  /* Pulled up to start level with the h2 above (measured: section-head's own
     height plus its margin-bottom, ~19.8rem at this type scale) — the empty
     space to the right of the short, left-aligned heading was going spare,
     and lifting the media column into it also happens to land its bottom
     edge much closer to the text column's, instead of well past it. This is
     an estimate tied to the current heading's two fixed lines and type
     scale; nudge if the heading copy or sizing changes meaningfully. */
  margin-top:-19.8rem;
}
.intro-caption-block{
  display:flex;
  flex-direction:column;
}
.intro-caption-rule{
  width:2.6rem;
  height:1px;
  background:var(--line);
  margin-bottom:1rem;
}
.intro-caption{
  max-width:60ch;
  color:var(--grey-dim);
  font-size:0.85rem;
  line-height:1.6;
}
.intro-visual{
  position:relative;
  overflow:hidden;
  /* 16:9 with 10% trimmed off the top and bottom of the height (16/9 ÷ 0.8
     simplifies exactly to 20/9) — a wider, more cinematic crop of the same
     shot rather than a new aspect ratio pulled from nowhere. */
  aspect-ratio:20/9;
}
.intro-visual img,
.intro-visual video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(0.15) contrast(1.05);
}
.intro-visual::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.22) 100%);
}
.frame{
  position:relative;
  overflow:hidden;
  background:#101010;
  aspect-ratio:4/5;
}
.frame.tone-blue{background:linear-gradient(155deg, rgba(18,101,165,0.65), rgba(9,9,9,0.9) 65%);}
.frame.tone-orange{background:linear-gradient(200deg, rgba(236,128,39,0.55), rgba(9,9,9,0.92) 65%);}
.frame.tone-mixed{background:linear-gradient(135deg, rgba(18,101,165,0.5), rgba(9,9,9,0.85) 45%, rgba(236,128,39,0.35));}
.frame.tone-neutral{background:linear-gradient(160deg, #1c1c1c, #050505 70%);}
.frame img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.frame-grain{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(60deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
}
.frame::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg, rgba(0,0,0,0.5), transparent);
  pointer-events:none;
  z-index:1;
}
.frame::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:40%;
  background:linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
  z-index:1;
}
.frame:hover::after{opacity:1;}
.frame-tag{
  position:absolute;left:1.1rem;bottom:1rem;right:1.1rem;
  display:flex;justify-content:space-between;align-items:flex-end;
  font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
  opacity:0;
  transform:translateY(6px);
  transition:all .35s ease;
  z-index:2;
}
.frame:hover .frame-tag{opacity:1;transform:translateY(0);}
.frame:hover{outline:1px solid rgba(255,255,255,0.25);}
.frame-index{
  position:absolute;top:1rem;left:1.1rem;
  font-family:var(--serif);font-style:italic;
  font-size:0.85rem;color:rgba(255,255,255,0.75);
  z-index:2;
}

/* span helpers — deliberately uneven, avoids uniform "card wall" */
.s-7{grid-column:span 7;}
.s-5{grid-column:span 5;}
.s-6{grid-column:span 6;}
.s-4{grid-column:span 4;}
.s-3{grid-column:span 3;}
.s-8{grid-column:span 8;}
.s-12{grid-column:span 12;}
.tall{aspect-ratio:3/4.4;}
.wide{aspect-ratio:16/9;}
.short{aspect-ratio:5/3;}
.offset-up{transform:translateY(-2.4rem);}
.offset-down{transform:translateY(2.4rem);}

/* ---------- Page hero (full-bleed image, centred content) ----------
   Shared by every page-opening hero that leads with one big image and
   centred title — Home, Portfolio and the Musings gallery pages. One
   definition so they never drift apart. */
.page-hero{
  position:relative;
  height:88vh;
  height:88svh;
  min-height:480px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.page-hero img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.page-hero::after{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,0.45), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.8) 100%);
}
.page-hero-content{position:relative;z-index:1;}
.page-hero-content .eyebrow{
  color:var(--body);
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
}
.page-hero-content h1{
  font-size:clamp(2.6rem,7vw,5.4rem);
  margin-top:1rem;
  color:var(--white);
  text-shadow:0 4px 24px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.9);
}
.page-hero-back{
  display:inline-block;
  margin-top:1.6rem;
  font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.85);text-decoration:none;
  text-shadow:0 2px 10px rgba(0,0,0,0.8);
}
.page-hero-back:hover{color:var(--orange);}
.page-hero-content h1 em{font-style:italic;color:var(--blue);}
.page-hero-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.2rem;
  margin-top:2.2rem;
}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;
  right:1.6rem;bottom:1.6rem;
  z-index:200;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.3);
  background:rgba(10,10,10,0.7);
  backdrop-filter:blur(6px);
  color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease, border-color .2s ease, visibility 0s linear .3s;
}
.back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, border-color .2s ease;
}
.back-to-top:hover{border-color:var(--orange);color:var(--orange);}
@media (max-width:600px){
  .back-to-top{right:1rem;bottom:1rem;width:42px;height:42px;}
}

/* ---------- Marquee strip ---------- */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.1rem 0;
}
.marquee-track{
  display:flex;
  width:max-content;
  gap:3rem;
  animation:scroll-x 32s linear infinite;
}
.marquee-track span{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  color:var(--grey-dim);
  white-space:nowrap;
}
.marquee-track span em{color:var(--orange);font-style:italic;}
@keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(var(--marquee-distance, -50%));}}

/* ---------- Filmstrip (image marquee, replaces the text-only version above) ---------- */
.filmstrip{
  position:relative;
  height:clamp(42px, 5vw, 62px);
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#000;
  /* Fade the whole strip into the page at both ends, same trick as the hero image. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.filmstrip-track{
  align-items:center;
  height:100%;
  gap:0;
  animation:scroll-x 62s linear infinite;
}
.filmstrip-track img{
  height:100%;
  width:auto;
  flex:none;
  display:block;
  filter:grayscale(0.4) brightness(0.88) contrast(1.05);
  /* No per-image fade/gap here — photos sit flush against each other like a
     real contact sheet. Only the outer edges of the whole strip (see
     .filmstrip's mask, above) fade into the page. */
  transition:filter .4s ease;
}
.filmstrip:hover .filmstrip-track img{filter:grayscale(0) brightness(1) contrast(1);}
@media (max-width:1200px){
  .filmstrip{height:clamp(28px, 7.5vw, 40px);}
}

/* ---------- Quotes / Testimonials ---------- */
.quote-block{
  display:grid;
  grid-template-columns:1fr;
  gap:1.2rem;
}
.quote-block blockquote{
  font-family:var(--serif);
  font-size:clamp(1.5rem, 3.2vw, 2.6rem);
  line-height:1.25;
  max-width:22ch;
  font-style:italic;
}
.quote-block blockquote em{color:var(--blue);font-style:italic;}
.quote-attr{
  display:flex;align-items:center;gap:0.9rem;
  color:var(--body);
  font-size:0.85rem;
  margin-top:0.4rem;
}
.quote-attr .dash{width:2rem;height:1px;background:var(--orange);}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding: clamp(3rem, 6vw, 5rem) 0 2.4rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:3rem;
}
.footer-grid h3{
  font-family:var(--sans);
  font-size:0.75rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--grey);
  margin-bottom:1.1rem;
}
.footer-grid a,.footer-grid li{
  display:block;
  padding:0.3rem 0;
  color:var(--body);
  font-size:0.95rem;
}
.footer-grid a:hover{color:var(--orange);}
.footer-grid p{color:var(--body);}
.footer-base{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:3.2rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  color:var(--grey-dim);
  font-size:0.75rem;
  flex-wrap:wrap;
  gap:1rem;
}

/* ---------- Forms ---------- */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem 2rem;
}
.field{
  display:flex;flex-direction:column;gap:0.5rem;
  border-bottom:1px solid var(--line);
  padding-bottom:0.7rem;
}
.field.full{grid-column:1/-1;}
.field label{
  font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);
}
.field input,.field select,.field textarea{
  background:transparent;
  border:none;
  color:var(--white);
  font-family:var(--sans);
  font-size:1.05rem;
  font-weight:300;
  padding:0.3rem 0;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;}
.field textarea{resize:vertical;min-height:90px;}
.field select option{background:#111;color:#fff;}
.form-note{color:var(--grey-dim);font-size:0.82rem;margin-top:1rem;}
#form-status{margin-top:1rem;font-size:0.9rem;}
#form-status.ok{color:var(--blue);}
#form-status.err{color:var(--orange);}

/* ---------- Utility ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.center-copy{max-width:60ch;}
.big-index{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(3rem, 9vw, 7rem);
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.18);
  line-height:1;
}

/* ---------- Responsive ---------- */
.nav-backdrop{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,0.5);
  z-index:99;
  opacity:0;
  transition:opacity .3s ease;
}
.nav-backdrop.open{display:block;opacity:1;}

@media (max-width:1200px){
  body.nav-open{overflow:hidden;}
  .main-nav{
    position:fixed;inset:0 0 0 auto;
    width:min(78vw,340px);
    background:#050505;
    border-left:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2rem;
    padding:2rem var(--edge);
    transform:translateX(100%);
    transition:transform .4s ease;
  }
  .main-nav.open{transform:translateX(0);}
  /* Dropdown becomes a static indented sub-list in the slide-in panel —
     no hover on touch, so just show it inline rather than adding a second
     tap-to-expand interaction. */
  .nav-item{width:100%;}
  .nav-dropdown{
    position:static;transform:none;
    opacity:1;visibility:visible;pointer-events:auto;
    background:none;border:none;box-shadow:none;
    padding:0.4rem 0 0 1rem;
    margin-top:0.6rem;
    display:flex;flex-direction:column;gap:1.1rem;
  }
  .nav-dropdown a{padding:0 !important;font-size:0.75rem !important;color:var(--grey);}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;
    margin:-10px;
    z-index:110;
  }
  .nav-toggle span{height:1px;background:var(--white);width:22px;transition:transform .25s ease, opacity .2s ease;}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle.is-open span:nth-child(2){opacity:0;}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .footer-grid{grid-template-columns:1fr;gap:2rem;}
  .form-grid{grid-template-columns:1fr;}
  .s-7,.s-5,.s-6,.s-4,.s-8{grid-column:span 12 !important;}
  .offset-up,.offset-down{transform:none;}
  /* Text column and media column stack full width instead of sitting side
     by side; the video+photo pair inside .intro-media was already a column,
     so it just carries straight on below the two paragraphs. flex-basis
     switches to meaning height once flex-direction is column, so both need
     an explicit width:100% here rather than inheriting the desktop %. */
  .intro-layered{flex-direction:column;}
  .intro-text-col{flex:none;width:100%;}
  .intro-media{flex:none;width:100%;margin-top:2rem;}
  .cat-nav{top:100px;}
}

@media (max-width:480px){
  :root{--edge:1.1rem;}
  .btn{padding:0.8rem 1.4rem;font-size:0.76rem;}
  .marquee-track span{font-size:1.1rem;}
  .quote-block blockquote{font-size:clamp(1.3rem, 6vw, 1.8rem);}
  .logo-mark img{height:76px;}
  .site-header.scrolled .logo-mark img{height:64px;}
  .cat-nav{top:88px;}
}

/* Cookie consent banner */
.cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:500;
  background:var(--near-black);
  border-top:1px solid var(--line);
  padding:1.4rem var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  transform:translateY(100%);
  opacity:0;
  transition:transform .4s ease, opacity .4s ease;
}
.cookie-banner.in{transform:translateY(0);opacity:1;}
.cookie-banner p{
  color:var(--body);
  font-size:0.88rem;
  max-width:60ch;
  flex:1 1 320px;
}
.cookie-banner-actions{
  display:flex;
  gap:0.8rem;
  flex-shrink:0;
}
.cookie-banner-actions .btn{padding:0.7rem 1.5rem;font-size:0.72rem;}
@media (max-width:600px){
  .cookie-banner{padding:1.2rem 1.1rem;}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn{flex:1;justify-content:center;}
}

/* ---------- Journal (blog) ---------- */
.article-meta{
  display:flex;
  gap:1rem;
  align-items:center;
  color:var(--grey);
  font-size:0.8rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-top:1rem;
}
.article-body{
  max-width:64ch;
  margin:0 auto;
  font-size:1.08rem;
  color:var(--body);
  line-height:1.75;
}
.article-body p + p{margin-top:1.4rem;}
.article-back{
  max-width:64ch;
  margin:2.8rem auto 0;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.journal-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
.journal-card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:clamp(1.6rem, 3vw, 2.2rem);
  display:flex;
  flex-direction:column;
  gap:0.9rem;
  transition:border-color .2s ease;
}
.journal-card:hover{border-color:var(--orange);}
.journal-card h3{font-size:clamp(1.3rem, 2.4vw, 1.7rem);}
.journal-card p{color:var(--body);font-size:0.98rem;}
.journal-card .text-link{margin-top:auto;}
@media (max-width:800px){
  .journal-grid{grid-template-columns:1fr;}
}