/* Type, spacing and layout system on a 4px grid.
   Loaded last on every page, so it overrides per-page sizes.
   Every size, line height, gap and padding below is a multiple of 4px.
   Steps: phone (base) → tablet (761px+) → desktop (1025px+) → wide (1280px+). */

:root {
  /* Display type: tight leading, negative tracking */
  --fs-hero: 64px;      --lh-hero: 56px;
  --fs-display: 52px;   --lh-display: 48px;
  --fs-h1: 40px;        --lh-h1: 44px;
  --fs-cta: 36px;       --lh-cta: 40px;
  --fs-next: 32px;      --lh-next: 36px;
  --fs-marquee: 48px;   --lh-marquee: 56px;

  /* Text */
  --fs-h3: 24px;        --lh-h3: 28px;
  --fs-lead: 20px;      --lh-lead: 28px;
  --fs-statement: 20px; --lh-statement: 28px;
  --fs-body: 16px;      --lh-body: 24px;
  --fs-link: 20px;      --lh-link: 24px;
  --fs-label: 12px;     --lh-label: 16px;

  --ls-display: -0.06em;
  --ls-heading: -0.045em;
  --ls-text: -0.02em;
  --ls-label: 0.08em;

  /* Spacing */
  --space-section: 96px;  /* between sections */
  --space-block: 48px;    /* section title to its content */
  --space-heading: 32px;  /* heading row to the media below it */
  --space-text: 16px;     /* heading to paragraph, label to value */
  --gutter: 16px;         /* 12-column grid gutter */
}

@media (max-width: 400px) {
  :root {
    --fs-hero: 52px;    --lh-hero: 48px;
    --fs-display: 44px; --lh-display: 44px;
    --fs-h1: 36px;      --lh-h1: 40px;
  }
}

@media (min-width: 761px) {
  :root {
    --fs-hero: 112px;     --lh-hero: 100px;
    --fs-display: 88px;   --lh-display: 84px;
    --fs-h1: 88px;        --lh-h1: 80px;
    --fs-cta: 56px;       --lh-cta: 56px;
    --fs-next: 48px;      --lh-next: 52px;
    --fs-marquee: 88px;   --lh-marquee: 96px;
    --fs-h3: 28px;        --lh-h3: 32px;
    --fs-lead: 28px;      --lh-lead: 36px;
    --fs-statement: 24px; --lh-statement: 32px;
    --fs-body: 20px;      --lh-body: 28px;
    --fs-link: 24px;      --lh-link: 28px;
    --space-section: 128px;
    --space-block: 64px;
    --space-heading: 40px;
    --space-text: 24px;
    --gutter: 24px;
  }
}

@media (min-width: 1025px) {
  :root {
    --fs-hero: 144px;     --lh-hero: 128px;
    --fs-display: 120px;  --lh-display: 112px;
    --fs-h1: 112px;       --lh-h1: 104px;
    --fs-cta: 80px;       --lh-cta: 80px;
    --fs-next: 64px;      --lh-next: 64px;
    --fs-marquee: 104px;  --lh-marquee: 112px;
    --fs-h3: 32px;        --lh-h3: 36px;
    --fs-lead: 32px;      --lh-lead: 40px;
    --fs-statement: 28px; --lh-statement: 36px;
    --space-section: 160px;
    --space-block: 96px;
    --space-heading: 48px;
  }
}

@media (min-width: 1280px) {
  :root {
    --fs-hero: 192px;     --lh-hero: 168px;
    --fs-display: 144px;  --lh-display: 136px;
    --fs-h1: 160px;       --lh-h1: 144px;
    --fs-cta: 96px;       --lh-cta: 96px;
    --fs-next: 80px;      --lh-next: 80px;
    --fs-marquee: 128px;  --lh-marquee: 136px;
  }
}

/* ---------- Shared ---------- */
.section-index,
.case .eyebrow,
.case .case-meta > span,
.boltwagon-page :is(.bw-details dt, .bw-section-heading h2, .bw-next-project > p) {
  font-family: "Inter", "Inter Fallback", Arial, sans-serif;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: #6F6F6F;
}

.desktop-nav a, .quiet-link { line-height: 16px; padding-block: 12px; } /* 40px pills */

/* ---------- Home: hero ---------- */
.hero-copy { margin-top: var(--space-block); }
.hero-copy h1 { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--ls-display); }
.hero-copy p { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-text); margin-top: var(--space-heading); }

/* ---------- Home: About ---------- */
.intro { padding-block: var(--space-section); }
.section-index { margin: 0 auto var(--space-text); text-align: center; }
.intro h2,
.section-title,
.work .section-title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.intro p { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-text); margin-top: var(--space-heading); }

/* ---------- Home: Work ---------- */
.work { padding-top: var(--space-section); }
.section-title { margin-bottom: var(--space-section); }
.case { padding-bottom: var(--space-section); }

.project-marquee { font-size: var(--fs-marquee); line-height: var(--lh-marquee); letter-spacing: -0.04em; margin-bottom: var(--space-heading); }
.project-marquee-group { gap: var(--space-block); padding-right: var(--space-block); }

.case .case-intro {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-heading);
  padding-bottom: var(--space-heading);
}
.case .case-intro > .eyebrow { grid-column: 1 / 7; }
.case .case-intro > .case-brief { grid-column: 7 / -1; }
.case .case-intro > .case-meta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-text);
  align-items: start;
}
.case .case-meta > span { grid-column: 1 / 7; }
.case .case-meta > div { grid-column: 7 / -1; gap: 8px 24px; }
.case .case-intro + * { margin-top: var(--space-heading); }

.case .case-copy h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.02em; margin-bottom: var(--space-text); }
.case .case-copy p { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-text); max-width: 36em; }
.case .case-meta div > span { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-underline-offset: 4px; }

/* ---------- Case studies ---------- */
.boltwagon-page .boltwagon-content { --bw-section-before: var(--space-section); --bw-section-after: var(--space-heading); }
.boltwagon-page .bw-challenge > .bw-section-heading,
.boltwagon-content .bw-section[aria-labelledby$="-wireframes"] > .bw-section-heading { padding-bottom: var(--space-heading); }

/* Title spans the full width; intro sits in the right half; details run in a row beneath */
.boltwagon-page .bw-introduction,
.boltwagon-page #boltwagon .bw-introduction {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-block);
}
.boltwagon-page .bw-introduction h1 { grid-column: 1 / -1; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-display); font-weight: 600; }
.boltwagon-page .bw-introduction-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-block);
}
.boltwagon-page .bw-introduction-details > p { grid-column: 7 / -1; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--ls-text); }
.boltwagon-page .bw-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-heading);
  margin: 0;
  padding-top: var(--space-text);
  border-top: 1px solid #dcdcdc;
}
.boltwagon-page .bw-details > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; padding: 0; border: 0; }
.boltwagon-page .bw-details dd { text-align: left; font-size: var(--fs-body); line-height: var(--lh-body); color: #262626; }

.boltwagon-page .bw-section-heading {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-text);
}
.boltwagon-page .bw-section-heading h2 { grid-column: 1 / 7; align-items: center; align-self: start; }
.boltwagon-page .bw-section-heading p { grid-column: 7 / -1; font-size: var(--fs-statement); line-height: var(--lh-statement); letter-spacing: var(--ls-text); }
.bw-section-heading h2::before { flex-basis: 8px; width: 8px; height: 8px; align-self: center; margin-top: 0; }

/* ---------- Footer ---------- */
.portfolio-footer { padding-top: var(--space-block); }
.footer-top h2 { font-size: var(--fs-cta); line-height: var(--lh-cta); letter-spacing: var(--ls-heading); }
.footer-cta-link { display: block; width: fit-content; color: inherit; text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; transition: color 225ms ease; }
.footer-cta-link:hover { color: #BDBDBD; }
.footer-socials a { font-size: var(--fs-link); line-height: var(--lh-link); }
.footer-bottom { margin-top: var(--space-block); }
.footer-bottom p { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; }

/* ---------- Single column below tablet ---------- */
@media (max-width: 760px) {
  .hero-copy p { max-width: 20em; }
  .case .case-intro > :is(.eyebrow, .case-brief, .case-meta),
  .case .case-meta > :is(span, div),
  .boltwagon-page .bw-introduction-details > p,
  .boltwagon-page .bw-section-heading :is(h2, p) { grid-column: 1 / -1; }
  .boltwagon-page .bw-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Grid snapping for legacy values ---------- */
/* Topbar: 62px → 64px desktop, 58px → 56px phone, plus everything that offsets against it */
.topbar { height: 64px; }
.hero { padding-top: 64px; }
.boltwagon-page .topbar,
.konfidi-page .topbar { margin-bottom: -64px; }
.hero + .intro { padding-top: var(--space-section); }
.case .case-brief { gap: var(--gutter); }
.topbar .menu-toggle { gap: 4px; }
@media (min-width: 761px) {
  .intro .hero-word-mask { padding-bottom: 16px; margin-bottom: -16px; }
}
@media (max-width: 760px) {
  .topbar { height: 56px; }
  .hero { padding-top: 56px; }
  .topbar .desktop-nav { top: 56px; padding: 8px; }
  .boltwagon-page .topbar,
  .konfidi-page .topbar { margin-bottom: -56px; }
  .fuctureshit-page .fn-mobile-header { height: 56px; }
  .work-title-content { gap: 8px; }
  .boltwagon-operations__message { font-size: 48px; line-height: 56px; }
}

/* The About index label is a <p> inside .intro, so it must beat `.intro p` */
.intro p.section-index { font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); color: #6F6F6F; max-width: none; margin: 0 auto var(--space-text); animation-delay: 0ms; }

/* Home projects: no divider under the intro; the media keeps the heading gap above it */
.case .case-intro { border-bottom: 0; padding-bottom: 0; }

/* Hero cards: the tilted end cards extend past the 1360px strip, so let them show,
   and scale the whole composition to fit desktops narrower than 1460px + margins */
@media (min-width: 1025px) {
  .hero-cards { overflow: visible; transform: scale(var(--desktop-card-scale, 1)); transform-origin: center top; margin-bottom: calc(280px * (var(--desktop-card-scale, 1) - 1)); }
}

/* Hero cards: smaller, closer, gently tilted, rounded (after the spencergabor.com proportions).
   script.js measures the card spacing for the scroll spread, so these sizes can change freely. */
.hero-card--konfidi { --card-tilt: 2deg;  --card-offset: 8px; }
.hero-card--bolt    { --card-tilt: -3deg; --card-offset: -12px; }
.hero-card--brio    { --card-tilt: 6deg;  --card-offset: 8px; }
.hero-card--future  { --card-tilt: -2deg; --card-offset: -8px; }
.hero-card--bellows { --card-tilt: 4deg;  --card-offset: 8px; }
.hero-cards .hero-card { border-radius: 16px; }
.hero-cards .hero-card > img { border-radius: inherit; object-fit: cover; }
.hero-cards .hero-card::before { border-radius: inherit; }
@media (min-width: 761px) {
  .hero-cards { height: 280px; }
  .hero-cards .hero-card { width: 208px; height: 212px; flex: 0 0 208px; margin-left: -24px; }
  .hero-cards .hero-card:first-child { margin-left: 0; }
  /* Pile positions before script.js takes over: each card sits over the middle one (184px spacing) */
  .hero-cards:not(.is-spread) .hero-card--konfidi { --spread-x: 368px; }
  .hero-cards:not(.is-spread) .hero-card--bolt { --spread-x: 184px; }
  .hero-cards:not(.is-spread) .hero-card--future { --spread-x: -184px; }
  .hero-cards:not(.is-spread) .hero-card--bellows { --spread-x: -368px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .hero-cards { margin-bottom: calc(280px * (var(--tablet-card-scale, .7) - 1)); transform: scale(var(--tablet-card-scale, .7)); }
}

/* Phones: the same small-card row as desktop (replaces the auto-cycling carousel), matching
   spencergabor.com on mobile. The strip claims touch so a finger swipe shoves the cards. */
@media (max-width: 760px) {
  .hero-cards {
    position: relative;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 128px;
    gap: 0;
    margin: 40px 0 0;
    overflow: visible;
    transform: none;
    touch-action: none;
  }
  .hero-cards .hero-card {
    position: relative;
    top: auto;
    left: auto;
    width: 84px;
    height: 84px;
    flex: 0 0 84px;
    margin: 0 0 0 -20px;
    aspect-ratio: auto;
    border-radius: 12px;
    opacity: 1;
    pointer-events: auto;
    animation: none;
    transform: translateX(var(--spread-x)) translateY(calc(var(--card-offset) / 2)) rotate(var(--card-tilt));
    transition: none;
    will-change: transform;
  }
  .hero-cards .hero-card:first-child { margin-left: 0; }
  /* Phones show the row straight away (no pile), like the reference */
  .hero-cards .hero-card:is(.hero-card--konfidi, .hero-card--bolt, .hero-card--brio, .hero-card--future, .hero-card--bellows) { --spread-x: 0px; }
  .hero { min-height: 0; padding-bottom: var(--space-heading); }
}

/* Phones: a tighter step from the hero cards into About, and a left-aligned About paragraph */
@media (max-width: 760px) {
  .hero { padding-bottom: 0; }
  .hero + .intro { padding-top: var(--space-block); }
  .intro p:not(.section-index) { text-align: left; padding-inline: 16px; } /* the 16px page margin, aligned with the logo */
}

/* ---------- Phone menu: a bottom sheet ----------
   Every page toggles .desktop-nav.is-open (script.js plus the Brio/Fuctureshit page scripts).
   On phones that nav becomes a floating sheet with plain text links: no pills, no black box;
   the current section is marked by a dot. script.js adds the backdrop and drag-to-dismiss.
   !important beats the home page's #home .topbar pill styles. */
@media (max-width: 760px) {
  :root { --sheet-ease: cubic-bezier(.32, .72, 0, 1); }
  .topbar .desktop-nav,
  .fn-mobile-header .desktop-nav {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 40px 24px calc(24px + env(safe-area-inset-bottom));
    background: #fff;
    border: 0;
    border-radius: 28px !important;
    box-shadow: 0 -8px 48px rgba(0, 0, 0, .14);
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(calc(100% + 16px));
    transition: transform 360ms var(--sheet-ease), visibility 0s linear 360ms;
    touch-action: none;
  }
  .topbar .desktop-nav.is-open,
  .fn-mobile-header .desktop-nav.is-open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(var(--sheet-drag, 0px));
    transition: transform 560ms var(--sheet-ease), visibility 0s;
  }
  .desktop-nav.is-dragging { transition: none !important; }
  /* Grab handle */
  .topbar .desktop-nav::before,
  .fn-mobile-header .desktop-nav::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 4px;
    background: #D4D4D4;
  }
  .desktop-nav .nav-indicator { display: none; }
  /* Links: plain text, staggered in when the sheet opens */
  .topbar .desktop-nav a,
  .fn-mobile-header .desktop-nav a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--ink) !important;
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    letter-spacing: -.04em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 200ms linear, transform 200ms var(--sheet-ease);
  }
  .desktop-nav.is-open a {
    opacity: 1;
    transform: none;
    transition: opacity 360ms linear, transform 560ms var(--sheet-ease);
  }
  .desktop-nav.is-open a:nth-of-type(1) { transition-delay: 60ms; }
  .desktop-nav.is-open a:nth-of-type(2) { transition-delay: 100ms; }
  .desktop-nav.is-open a:nth-of-type(3) { transition-delay: 140ms; }
  .desktop-nav.is-open a:nth-of-type(4) { transition-delay: 180ms; }
  .desktop-nav.is-open a:nth-of-type(5) { transition-delay: 220ms; }
  .desktop-nav.is-open a:nth-of-type(6) { transition-delay: 260ms; }
  /* Current section: a dot instead of a filled box */
  .desktop-nav a.is-active::after,
  .desktop-nav a[aria-current="page"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }
  /* Resume and Email: secondary, under a hairline */
  .topbar .desktop-nav a.mobile-nav-action,
  .fn-mobile-header .desktop-nav a.mobile-nav-action {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    color: #737373 !important;
  }
  .desktop-nav a:not(.mobile-nav-action) + a.mobile-nav-action { margin-top: 16px; padding-top: 24px !important; border-top: 1px solid #E5E5E5; }
  /* Backdrop (added by script.js) */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms var(--sheet-ease);
  }
  html.menu-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  html.menu-open { overflow: hidden; }
  /* Hamburger becomes a close cross */
  .menu-toggle i { transition: transform 360ms var(--sheet-ease); }
  .menu-toggle[aria-expanded="true"] i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i:last-child { transform: translateY(-3px) rotate(-45deg); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .topbar .desktop-nav, .fn-mobile-header .desktop-nav, .desktop-nav a, .nav-backdrop, .menu-toggle i { transition: none !important; }
}

/* Brio centres its topbar with a transform, which would trap the fixed menu sheet inside it */
@media (max-width: 760px) {
  .brio-page .topbar { left: 0; right: 0; transform: none; }
}