/* ===========================
   MODULES.CSS — components
   =========================== */

/* ── Blocks & seams ───────────────────────────────────── */
.block{
  border-right: var(--stroke) solid var(--ink);
  border-top: 0;
  background: transparent;
  width: 100%;
  box-shadow: inset 0 -1px var(--ink);  /* bottom seam inside */
}
.content > .block:first-child{ border-top: var(--stroke) solid var(--ink); }
.project .block{ border-top: 0 !important; }
.block + .block{ border-top: 0 !important; }
.block--padded{ padding: 20px; }
/* ── Sticky Catalogue bar ─────────────────────────────── */
#block-1.block{
  position: sticky;
  z-index: 9;
  background: var(--bg-main);
  top: 0;
}

/* Mobile / Tablet: stick under the intro, not over it */
@media (max-width: 1199px){
  #block-1.block{
    top: var(--sheet-top, 0px);
  }
}
.block__inner{ width: 100%; }
.block--image-host{ padding: 0; }

/* ── Horizontal gallery (FRAMED: padding inside black bars) ───────── */
.image-host{
  margin: 0;
  width: 100%;
  --media-h: clamp(30px, 60vh, 640px);
  overflow: hidden;
}

.media-track{
  display: flex;
  gap: 5px;
  padding: 10px 5px;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.media-track::-webkit-scrollbar{ display: none; }

.media-item{
  flex: 0 0 auto;
  height: calc(var(--media-h) - 5px);
  width: auto;
  object-fit: contain;
  background: transparent;
  scroll-snap-align: start;
  display: block;
}

/* ── Flex utils ───────────────────────────────────────── */
.row{ display:flex; align-items:center; }
.row--between{ justify-content:space-between; }
.row--right{ justify-content:flex-end; }
.row--wrap{ flex-wrap:wrap; }
.gap-s{ gap:10px; }

/* ── Catalogue filters ────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:12px; }
.filter-link{
  position:relative; background:none; border:none; padding:0;
  font:inherit; line-height:1.1; cursor:pointer;

  color: var(--ink);              /* forces #0D0D0D text on iOS */
  -webkit-appearance: none;       /* stops iOS “link-blue button” styling */
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.filter-link::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:100%; height:1px; background:var(--ink);
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.filter-link:hover::after,
.filter-link:focus-visible::after{ transform: scaleX(1); }
.filter-link.is-active::after{ transform: scaleX(1); }

/* Roles (visual chips) */
.role-tag{
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  line-height: 1.1;
  cursor: default;

  color: var(--ink);              /* forces #0D0D0D */
  -webkit-appearance: none;       /* stops iOS “blue button” styling */
  appearance: none;
}

/* Body copy */
.bodytext{ margin:0; font-size:1rem; line-height:1.5; }

/* Footer alignment */
#footer-top .block__inner{ display:flex; justify-content:flex-end; }
#footer-info .footer-text{ margin:0; }

/* Project wrapper */
.project{ display:block; }

/* Swipe helper (force Roboto Light) */
#block-3, .swipe{
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-weight: 300;
  font-style: normal !important;
  font-optical-sizing: auto;
}
.swipe{ display:inline-block; animation: swipe-bounce 1.8s ease-in-out infinite; }
@keyframes swipe-bounce{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}

/* ── Sticky Nav content (left column) ─────────────────── */
.nav-intro{
  font-family: var(--font-display);
  font-size: clamp(25px, 2.1vw, 35px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 40px;
}
.nav-intro *{ color: var(--ink); }
.nav-name{ font-weight: 300; }
.nav-role, .nav-cityname{ font-family: var(--font-display-italic); font-style: normal; }

.nav-links{
  margin: 150px 0; display:grid; gap:8px; justify-items:start;
}
.nav-link, .nav-link:visited{
  font-family: var(--font-display);
  font-size: clamp(25px, 2.1vw, 35px);
  color: var(--ink); font-weight:400; text-decoration:none;
}
/* Desktop hover: ONLY change color — keep everything else unchanged */
@media (min-width: 1200px){
  .nav-link:hover,
  .nav-link:focus-visible{
    color: #CC0000;         /* or use var(--accent) if that’s your red */
    /* no font-family */
    /* no font-style */
    /* no text-decoration */
  }
}

.nav-times{
  margin-top:auto; display:flex; gap:60px; align-items:flex-end;
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
}
.time-block{ display:flex; flex-direction:column; gap:4px; }
.time-label, .time-val{ font-family: var(--font-body); font-weight: var(--font-body-weight); color:var(--ink); font-size: clamp(10px,1.2vw,14px); }

/* ── About panel (desktop slide-out / mobile bottom sheet) ───────── */
.sidenav{
  position: fixed; top:0; left:0; height:100vh; width: var(--nav-w);
  background:#0D0D0D; color:#fff; z-index:10000;
  overflow-y:auto; overflow-x:hidden;
  padding:20px; font-family:var(--font-body); font-weight: var(--font-body-weight);
  transform: translate3d(-100%,0,0);
  will-change: transform;
  transition: transform .80s cubic-bezier(0.25,1,0.5,1);

  /* 🔧 ABOUT TYPOGRAPHY — master controls */
  --about-fs-headline: clamp(15px, 6.2vw, 25px);
  --about-lh-headline: 1.5;
  --about-fs-email:    clamp(20px, 7.5vw, 25px);
  --about-lh-email:    1.5;
  --about-fs-h3:       clamp(10px, 4.2vw, 15px);
  --about-lh-h3:       1.5;
  --about-fs-body:     clamp(10px, 4.2vw, 13px);
  --about-lh-body:     1.5;
}

/* About links — restore hover style (email + socials) */
/* GENERAL: About links hover = Roboto Mono (Light) + red */
.sidenav__section a:hover,
.sidenav__section a:focus-visible{
  color: var(--accent) !important;
  font-family: var(--font-body) !important;                 /* Roboto Mono */
  font-weight: var(--font-body-weight, 300) !important;     /* Light */
  font-style: normal !important;
  text-decoration: none !important;
}

/* EXCEPTION: Email stays italic Junicode (default + hover) */
.sidenav__email a{
  font-family: var(--font-display-italic) !important; /* junicode-italic.woff2 */
  font-weight: 400 !important;
  font-style: italic !important;                      /* forces the actual italic face to be used */
  color: #fff;
  transition: color .2s ease;
}
.sidenav__email a:hover,
.sidenav__email a:focus-visible{
  color: var(--accent) !important;                          /* turn red on hover */
  font-family: var(--font-display-italic) !important;       /* keep Junicode italic */
  font-weight: 400 !important;
}

.sidenav.is-open{ transform: translate3d(0,0,0); }
.sidenav::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:0;
  border-right: var(--stroke) solid var(--ink); pointer-events:none;
}
.sidenav__scroll{ height:100%; padding:0 0 120px 0; }
.sidenav__section{ padding:8px 0; border-bottom:0; }
.sidenav__close{
  position:absolute; top:12px; right:12px; background:transparent; color:#fff;
  border:none; padding:4px 8px; cursor:pointer;
  font-family:var(--font-body); font-size: clamp(15px,1.5vw,20px); font-weight: 100 !important;
}
@media (prefers-reduced-motion: reduce){ .sidenav{ transition:none; } }

/* Headline + headings/body inside About */
.sidenav__headline{
  font-family: var(--font-display);
  font-weight:400; font-style:normal;
  margin:0 0 -5px 0;
  font-size: var(--about-fs-headline);
  line-height: var(--about-lh-headline);
}
.sidenav__section h3{
  font-family: var(--font-body);
  font-weight:400; font-style:normal;
  margin:0 0 -5px 0;
  font-size: var(--about-fs-h3);
  line-height: var(--about-lh-h3);
  text-decoration: none;             /* 🔸 remove underline */
}
.sidenav__section h3 u{
  text-decoration: none; border: 0;  /* 🔸 kill <u> underline */
}
.sidenav__section p,
.sidenav__section a{
  font:inherit; color:#fff; text-decoration:none; margin-bottom:0;
  font-size: var(--about-fs-body);
  line-height: var(--about-lh-body);
}

/* Email line */
.sidenav__email,
.sidenav__email a{
  font-family: var(--font-display-italic);
  font-weight:400; font-style:normal;
  color:#fff; text-decoration:none; margin:0 0 12px 0;
  font-size: var(--about-fs-email);
  line-height: var(--about-lh-email);
}

.sidenav__logo{ position:absolute; right:20px; bottom:20px; width:96px; z-index:1; pointer-events:none; }
.sidenav__logo img{ display:block; width:100%; height:auto; }

/* Avoid double right border in content column */
.content .block{ border-right:0; }

/* Content scrollbar (desktop) */
.content::-webkit-scrollbar{ width:12px; }
.content::-webkit-scrollbar-track{ background:#F0F0F0; border-left:1px solid var(--ink); }
.content::-webkit-scrollbar-thumb{ background:#0D0D0D; }

/* Hard stop at bottom */
#content{ padding-bottom:0 !important; margin-bottom:0 !important; overscroll-behavior: contain; }
#content > .block:last-of-type{ margin-bottom:0 !important; border-bottom:1px solid var(--ink); padding-bottom:20px; }
#content > .block:last-of-type *:last-child{ margin-bottom:0 !important; }

/* Back to Top: single stroke (desktop overrides added later) */
#footer-top.block{ box-shadow:none; border-bottom:1px solid var(--ink); }
#footer-top + .block{ border-top:0 !important; }

/* ── Mobile fine-tuning ───────────────────────────────── */
@media (max-width: 767px){
  /* Catalogue row: one line */
  #block-1 .block__inner > .row{
    display:grid !important; grid-template-columns:max-content 1fr;
    align-items:center; column-gap:30px;
  }
  #block-1 .label{
    font-family:var(--font-display); font-weight:400;
    font-size: clamp(16px, 4.6vw, 20px); line-height:1.2; white-space:nowrap;
  }
  #block-1 .filters{
    justify-self:end; display:flex; flex-wrap:nowrap; gap:16px;
    overflow-x:auto; overflow-y:visible; white-space:nowrap;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    min-width:0; max-width:100%;
  }
  #block-1 .filters::-webkit-scrollbar{ display:none; }
  #block-1 .filter-link{ font-family:var(--font-body); font-size:clamp(13px,3.6vw,15px); line-height:1.1; }

  .project-title{ font-size: clamp(22px, 7vw, 32px); line-height:1.15; }

  /* Bottom sheet (About) */
  .sidenav{
    left:0; right:0; width:100% !important;
    top: calc(var(--sheet-top,64px) - 1px); bottom:0; height:auto;
    background:#0D0D0D; color:#FFFFFF; border-right:0;
    padding: 0 20px 0 20px !important;
    transform: translateY(calc(100% - var(--peek,56px)));
    transition: transform .50s cubic-bezier(.25,1,.5,1);
    overflow:hidden !important;

    /* 🔧 Mobile bump: override the About typography variables */
    --about-fs-headline: clamp(20px, 7.2vw, 23px);
    --about-lh-headline: 1.3;
    --about-fs-email:    clamp(20px, 9vw, 23px);
    --about-lh-email:    1.3;
    --about-fs-h3:       clamp(12px, 4.8vw, 12px);
    --about-lh-h3:       1.3;
    --about-fs-body:     clamp(10px, 4.8vw, 12px);
    --about-lh-body:     1.3;              /* ✅ correct var name */
  }
  .sidenav.is-open{ transform: translateY(0); }
  .sidenav__sheetbar{
    display:flex; align-items:center; justify-content:center; gap:.4em;
    min-height:56px; height:auto; padding:20px 20px; text-align:center; box-sizing:border-box;
    position:sticky; top:0; z-index:2; background:#0D0D0D; color:#FFFFFF; border-bottom:0;
    font-family:var(--font-display); font-weight:400; font-size:clamp(20px,5vw,25px); line-height:1.1;
    -webkit-tap-highlight-color:transparent; user-select:none; cursor:pointer;
  }
  .sidenav__close{ top: calc(var(--peek,56px) + 8px) !important; right:12px; background:transparent; z-index:3;  font-size: clamp(15px, 8vw, 20px);}
  .sidenav__scroll{
  height: calc(100% - var(--peek,56px));   /* space left after the “About | Contact” bar */
  overflow-y: auto;                        /* scroll INSIDE the sheet */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;       /* smooth iOS scrolling */
  padding-top: 8px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* keeps last lines above home bar */
}


  /* Reserve only a slim cushion under the peeking bar */
  #content{
    padding-bottom: calc(var(--peek, 56px) + 6px + env(safe-area-inset-bottom)) !important;
  }

  #mobile-bottombar{ display:none !important; }
}

/* Header visibility: hidden on desktop, shown on small screens */
.sidenav__sheetbar{ display:none; }
@media (max-width: 767px){ .sidenav__sheetbar{ display:flex; } }

/* iOS focus ring off on mobile close button */
@media (max-width: 767px) and (hover:none) and (pointer:coarse){
  .sidenav__close{
    background:transparent !important; border:0 !important;
    outline:none !important; box-shadow:none !important; -webkit-appearance:none; appearance:none;
  }
  .sidenav__close:focus, .sidenav__close:focus-visible, .sidenav__close:active{
    outline:none !important; box-shadow:none !important;
  }
}

/* ── Tablet additions (768–1199) ─────────────────────── */
@media (min-width: 768px) and (max-width: 1199px){
  #block-1 .block__inner > .row{
    display:grid !important; grid-template-columns:max-content 1fr; align-items:center; column-gap:36px;
  }
  #block-1 .label{ font-family:var(--font-display); font-weight:400; font-size:clamp(18px,3.2vw,22px); line-height:1.2; white-space:nowrap; }
  #block-1 .filters{
    justify-self:end; display:flex; flex-wrap:nowrap; gap:18px;
    overflow-x:auto; overflow-y:visible; white-space:nowrap; min-width:0; max-width:100%;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  #block-1 .filters::-webkit-scrollbar{ display:none; }
  #block-1 .filter-link{ font-family:var(--font-body); font-size:clamp(14px,2.6vw,16px); line-height:1.1; }
  #block-1 .filter-link::after{ bottom:0; }
  .image-host{ --media-h: clamp(300px, 62vh, 720px); }

  /* Bottom sheet on tablet */
  .sidenav{
    left:0; right:0; width:100% !important;
    top: var(--sheet-top,72px); bottom:0; height:auto;
    background:#0D0D0D; color:#FFFFFF; border-right:0;
    padding: 0 20px 0 20px !important;
    transform: translateY(calc(100% - var(--peek,56px))); transition: transform .50s cubic-bezier(.25,1,.5,1);
    overflow:hidden !important;
  }
  .sidenav.is-open{ transform: translateY(0); }
  .sidenav__sheetbar{ display:flex; position:sticky; top:0; z-index:2; justify-content:center; align-items:center; gap:.4em;
    min-height:56px; padding:12px 20px; background:#0D0D0D; color:#FFFFFF; border-bottom:0;
    font-family:var(--font-display); font-weight:400; font-size:clamp(18px,2.6vw,22px); cursor:pointer;
  }
  .sidenav__close{ position:absolute; 
    top: calc(var(--peek,56px) + 8px); 
    right:12px; background:transparent; 
    z-index:3; }
  .sidenav__scroll{
  height: calc(100% - var(--peek,56px));   /* space left after the “About | Contact” bar */
  overflow-y: auto;                        /* scroll INSIDE the sheet */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;       /* smooth iOS scrolling */
  padding-top: 8px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* keeps last lines above home bar */
}

  #content{ padding-bottom: calc(var(--peek,56px) + 6px + env(safe-area-inset-bottom)) !important; }
}

/* Back To Top: remove any bottom stroke when the bottom sheet is present */
@media (max-width: 1199px){
  #footer-top.block{
    box-shadow: none !important;
    border-bottom: 0 !important;
  }
  #content > .block:last-of-type{
    box-shadow: none !important;
    border-bottom: 0 !important;
  }
}

/* 🖥️ Desktop — ensure a single divider above Back To Top */
@media (min-width: 1200px){
  #footer-info.block{ box-shadow: none !important; }
  #footer-top.block{
    box-shadow: none !important;
    border-top: 1px solid var(--ink) !important;
    border-bottom: 0 !important;
  }
}

/* ── Snap helper (temporarily disable transitions) ───── */
:root.no-anim *, :root.no-anim *::before, :root.no-anim *::after{
  transition: none !important;
  animation: none !important;
}


/* =========================================
   Filters underline behavior by breakpoint
   ========================================= */

/* 🖥️ Desktop (≥1200px): keep hover underline only; no "active" underline */
@media (min-width: 1200px){
  #block-1 .filter-link:hover::after,
  #block-1 .filter-link:focus-visible::after{
    transform: scaleX(1);
  }
  #block-1 .filter-link.is-active::after{
    transform: none;   /* don't show click underline on desktop */
  }
}

/* 📱 Tablet & Mobile (≤1199px): underline only when selected (clicked) */
@media (max-width: 1199px){
  /* iOS can "stick" :hover after a tap.
     Force hover/focus to NOT show an underline. */
  #block-1 .filter-link:hover::after,
  #block-1 .filter-link:focus::after,
  #block-1 .filter-link:focus-visible::after{
    transform: scaleX(0);
  }

  /* underline only when the filter is actually active */
  #block-1 .filter-link.is-active::after{
    transform: scaleX(1);
  }
}

/* Prevent category text from being cut off on mobile/tablet */
@media (max-width: 1199px){
  /* let underline/descenders render below the row */
  #block-1 .filters{
    overflow-x: auto;
    overflow-y: visible;      /* was hidden; causes clipping */
    padding-bottom: 2px;      /* small buffer for underline */
  }

  /* loosen the line box so mono descenders aren't cropped */
  #block-1 .filter-link{
    line-height: 1.25;        /* was ~1.1; too tight for Roboto Mono */
    padding-bottom: 2px;      /* extra safety */
  }

  /* (optional) nudge underline a touch lower if needed */
  #block-1 .filter-link::after{
    bottom: -2px;
  }
}

@media (max-width: 1199px){
  .sidenav__logo--bottom{
    position: static;          /* stays inside the scroll flow */
    width: 96px;
    margin: -1.2em 0 0 auto;   /* pulls it up to align with “Resume” */
    pointer-events: none;
  }

  .sidenav__logo--bottom img{
    display: block;            /* removes inline-image baseline weirdness */
  }
}

/* === Brand video (desktop left + mobile inline) =================== */
/* Shared wrapper styles + tuning knobs */
#brandFx,
#brandFxMobile{
  display:inline-block;
  line-height:inherit;
  white-space:normal;

  --brand-height: 1.3em;         /* desktop size */
  --brand-height-mobile: 1.1em; /* mobile/tablet size */
  --brand-valign: -0.3em;        /* raise/lower inline baseline */
  --brand-gap: -0.3em;           /* space after the logo word */
  --brand-blend: multiply;

  vertical-align: var(--brand-valign);
  margin-right: var(--brand-gap);
}

/* Inline (mobile/tablet) instance inside the intro */
.brandFx-inline{
  display:none;                  /* hidden on desktop */
  line-height:0;                 /* remove extra whitespace around inline video */
  vertical-align:baseline;
}

/* Video element styling (all instances) */
#brandFx .brandFx__video,
#brandFxMobile .brandFx__video,
.brandFx-inline .brandFx__video{
  display:block;
  height:var(--brand-height);
  width:auto;
  object-fit:contain;
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* Visually hidden text fallback (accessible) */
#brandFx .brandFx__sr,
#brandFxMobile .brandFx__sr,
.brandFx-inline .brandFx__sr{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  border:0 !important; white-space:nowrap !important;
mix-blend-mode: multiply;
}

/* Mobile/Tablet: show inline brand video, hide duplicate text,
   and size videos a touch smaller for the intro line-height */
@media (max-width:1199px){
  .brandFx-inline{ display:inline-block; }
  .jm-text{ display:none; }
  #brandFxMobile .brandFx__video,
  .brandFx-inline .brandFx__video{ height:var(--brand-height-mobile); }
}

/* Mobile-only: make the text AFTER the "JAMIE MARS" logo smaller */
@media (max-width: 1199px){
  /* If you used <span id="brandFxMobile">… */
  #intro-mobile .intro #brandFxMobile ~ .regular,
  #intro-mobile .intro #brandFxMobile ~ .italic,
  /* If you used <span class="brandFx-inline">… */
  #intro-mobile .intro .brandFx-inline ~ .regular,
  #intro-mobile .intro .brandFx-inline ~ .italic{
    font-size: 0.90em;     /* tweak: try 0.85–0.95em to taste */
    line-height: 1.25;     /* keeps it tidy at smaller size */
  }
}

/* Mobile: align "Catalogue" with categories by baseline + slight size bump */
@media (max-width: 767px){
  /* Make the row baseline-align instead of center-align */
  #block-1 .block__inner > .row{
    align-items: baseline !important;
  }

  /* Slightly larger label so serif cap-height matches Roboto Mono */
  #block-1 .label{
    font-size: clamp(18px, 5.2vw, 22px); /* was ~16–20px */
    line-height: 1.15;
  }

  /* Keep chips comfy so their baseline is predictable */
  #block-1 .filter-link{
    line-height: 1.25;       /* already in your mobile rules; keep it */
    padding-bottom: 2px;      /* ensures underline doesn't push the box */
  }
}

/* Collapse the double line between title and gallery */
.block--padded + .block--image-host{
  margin-top: -1px;         /* pulls the media block up by 1px */
}