/* Lone Wolves Clothing — shell and design tokens.
   Ground and accent are sampled from the wolf-and-moon logo, not invented:
   #08070C is the logo plate, #C8272B is the tongue. The intake's stated
   brand colour was #111111, which is the same call one notch lighter.

   Type: Anton for display, because the brand's own wordmark is a heavy
   condensed script and a light grotesque under it reads like a different
   company. Inter for everything a person has to actually read. */

:root {
  --ground:      #0A0A0C;
  --ground-lift: #131317;
  --ground-card: #17171C;
  --line:        #26262E;
  --ink:         #F2EFE9;
  --ink-dim:     #B6B3AE;
  --ink-mute:    #8C8A87;
  --accent:      #C8272B;
  --accent-lit:  #E4413F;
  /* --accent-lit lands at 4.36:1 on the card plate, just under AA for text
     this size. The price is a number somebody has to read, so it gets a red
     lifted far enough to clear it on the darkest ground it sits on. */
  --accent-read: #EC5A57;
  --moon:        #C9C6D6;

  --font-display: Anton, "Arial Narrow", Impact, sans-serif;
  --font-body: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter: clamp(20px, 5vw, 64px);
  --shell: 1280px;
  --header-h: 80px;
  --radius: 4px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchors land under the sticky header without it. */
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-lit);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  /* Side padding lives here and nowhere else. A band that forgets it is the
     recurring bug: content touching the viewport edge on a phone. */
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 12px 20px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ------------------------------------------------------------- type scale --- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .92;
  /* Tracking comes DOWN as size goes up, or a wide-tracked headline just
     gets longer and starts wrapping one word per line. */
  letter-spacing: -.01em;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-lit);
  margin: 0;
}

.lede {
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 58ch;
  margin: 0;
}

.band {
  padding-block: clamp(64px, 8vw, 104px) clamp(56px, 6.5vw, 84px);
}
.band--tight { padding-block: clamp(48px, 5vw, 72px); }
.band--lift { background: var(--ground-lift); }

.band__head { display: grid; gap: var(--s-5); max-width: 62ch; }
.band__head + * { margin-top: clamp(36px, 4.5vw, 56px); }

/* ----------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; }
/* Hover LIFTS to #DB3236, not to --accent-lit: white on --accent-lit is
   4.10:1, which drops the label under AA for the moment the pointer is on
   the one button the whole page is built around. #DB3236 is 4.64:1 and still
   reads as a lift. */
.btn--primary:hover { background: #DB3236; transform: translateY(-1px); }
.btn--ghost { border-color: #3A3A44; color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(242, 239, 233, .06); }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 13px; }

/* ------------------------------------------------------------------ header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 12, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header[data-stuck] { border-bottom-color: var(--line); background: rgba(10, 10, 12, .95); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.site-header__brand { display: flex; align-items: center; text-decoration: none; }
.wordmark img { width: auto; }
.wordmark--sm img { height: 42px; }
.site-footer .wordmark img { height: 56px; }

.site-nav { display: flex; align-items: center; gap: var(--s-5); }
.site-nav__links { display: flex; gap: var(--s-5); }
.site-nav__links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding-block: 6px;
  transition: color .2s var(--ease);
}
.site-nav__links a:hover { color: var(--ink); }
.site-nav__shop { background: var(--accent); color: #fff; }
.site-nav__shop:hover { background: #DB3236; }

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
.nav-panel { display: none; }

@media (max-width: 860px) {
  .site-nav__links, .site-nav__shop { display: none; }
  .nav-burger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-burger__bars { display: grid; gap: 4px; width: 22px; }
  .nav-burger__bars i { height: 2px; background: var(--ink); border-radius: 2px; }
  .nav-panel {
    display: grid;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--ground-lift);
    border-block: 1px solid var(--line);
    padding: var(--s-4) var(--gutter) var(--s-6);
    gap: 2px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s var(--ease), visibility .3s;
  }
  /* 70vh clipped the LAST item, which is the shop button, on a short phone:
     six rows plus the button overflow it and overflow:hidden hid the one CTA
     the menu exists for. Tall enough for the whole list, and scrollable if a
     viewport is shorter still. */
  .nav-toggle:checked ~ .nav-panel {
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    visibility: visible;
  }
  .nav-panel a {
    display: block;
    padding: 15px 0;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
  }
  .nav-panel a:last-child { border-bottom: 0; }
  .nav-panel__shop {
    margin-top: var(--s-5);
    background: var(--accent);
    color: #fff;
    text-align: center;
    border-radius: var(--radius);
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
}

/* ------------------------------------------------------------------- clips --- */
/* Muted autoplay when the clip scrolls into view, with an explicit sound
   control. The control sits INSIDE the frame, so on a small tile it is slim
   on purpose: at 390px a chunky pill covers most of the picture. */

.clip {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ground-card);
}
.clip__v { width: 100%; height: 100%; object-fit: cover; }

.clip__sound {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 10, 12, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.clip__sound:hover { background: rgba(200, 39, 43, .9); }
.clip__ico {
  width: 13px; height: 13px;
  background: currentColor;
  /* Speaker, muted. The slash is removed by the [aria-pressed=true] rule. */
  -webkit-mask: var(--ico-off) center / contain no-repeat;
  mask: var(--ico-off) center / contain no-repeat;
}
.clip__sound[aria-pressed="true"] .clip__ico {
  -webkit-mask-image: var(--ico-on);
  mask-image: var(--ico-on);
}
:root {
  --ico-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='m16 9 5 6M21 9l-5 6' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  --ico-on:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ figure --- */

.shot { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--ground-card); }
.shot img { width: 100%; height: 100%; object-fit: cover; }

.cap {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mute);
  letter-spacing: .02em;
}

/* ------------------------------------------------------------------ reveal --- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ footer --- */

.site-footer {
  background: #07070A;
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 6vw, 80px) 28px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
.site-footer__brand { display: grid; justify-items: start; gap: var(--s-5); }
.site-footer__blurb {
  margin: 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-dim);
}
.site-footer h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-4);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* :not(.btn) is load-bearing. `.site-footer a` is (0,2,0), `.btn--primary` is
   (0,1,0) and this rule comes later in the sheet, so without it the shop
   button in the footer rendered dim grey on red at 2.66:1. Measured, not
   guessed. */
.site-footer li,
.site-footer a:not(.btn) { font-size: 15px; color: var(--ink-dim); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--ink); }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.site-footer__legal a { font-size: 14px; color: var(--ink-dim); text-decoration: none; }
.site-footer__legal a:hover { color: var(--ink); text-decoration: underline; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
  font-size: 13px;
  color: var(--ink-mute);
}
.site-footer__base a { font-size: 13px; color: var(--ink-mute); text-decoration: none; }
.site-footer__base a:hover { color: var(--ink-dim); text-decoration: underline; }

@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ---- section: hero ---- */
/* The hero clip is a 720x1280 PORTRAIT source. Stretching it across a
   landscape viewport with object-fit:cover shows a narrow centre slice of a
   man walking out of frame, so on desktop it keeps its own aspect in a column
   beside the type. On a phone the viewport IS portrait, so there it goes
   full-bleed, which is what the footage was shot for.

   The copy, the buttons and the clip are three SIBLINGS in one grid rather
   than the buttons living inside the copy. That is what lets the phone put the
   clip first with the buttons over it and the words below, while the desktop
   keeps the buttons under the words in the left column. Named grid areas do
   the rearranging, so nothing is duplicated and no CTA is hidden at one
   breakpoint, which would fork the analytics labels. */

#hero {
  position: relative;
  background: var(--ground);
  /* clip, not hidden: the full-bleed stage is pulled out past the shell's
     gutter on a phone and must not create a sideways scroll. */
  overflow: clip;
}

#hero .hero__grid {
  display: grid;
  /* The copy column carries the widest line of the shirt phrase and the clip
     is portrait, so the split is weighted to the words. At an even split
     "Catch your own food" wrapped at every desktop width and no font size in
     range fixed it, because the COLUMN was the constraint, not the type. */
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-areas:
    "copy  stage"
    "cta   stage"
    "meta  stage";
  align-content: center;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: var(--s-5);
  /* svh, never vh. 100vh on a phone is the LARGE viewport, so anything
     budgeted against it sits under the browser chrome until the bars hide. */
  min-height: calc(100svh - var(--header-h));
  padding-block: clamp(48px, 6vw, 88px);
}

#hero .hero__copy {
  grid-area: copy;
  display: grid;
  gap: var(--s-5);
  justify-items: start;
  position: relative;
  z-index: 2;
}

#hero .hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
#hero .hero__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }

/* The four lines off the back of the hoodie, in the order they are printed
   there, a few points down from where the headline was so all four fit.
   No ch measure. These four lines are fixed copy off a garment, and the job
     is to keep each one whole, not to hold a reading measure. Sizes below are
     the largest that keep "Catch your own food" on one line, measured at 1440,
     1280, 1000 and 390 rather than guessed. */
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: .95;
  color: var(--ink);
}
#hero .hero__h1 span { display: block; }
#hero .hero__h1 .is-accent { color: var(--accent-lit); }

#hero .hero__lede { max-width: 46ch; }

#hero .hero__cta {
  grid-area: cta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  position: relative;
  z-index: 3;
}

#hero .hero__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
  z-index: 2;
}
#hero .hero__meta li { display: flex; align-items: center; gap: var(--s-5); }
#hero .hero__meta li + li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
}

#hero .hero__plate { display: none; }
#hero .hero__stage { grid-area: stage; position: relative; z-index: 1; }
#hero .clip { aspect-ratio: 9 / 16; max-height: min(76svh, 720px); margin-inline: auto; }
#hero .hero__scrim { display: none; }

@media (max-width: 900px) {
  /* Antonio's call, September 25, 2026: on a phone the clip is the first
     thing, the buttons sit on top of it, and the words are below the fold.
     The clip row is budgeted against svh minus the header so the buttons land
     inside the first screen with the browser bars still showing. */
  #hero .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "copy"
      "meta";
    grid-template-rows: calc(100svh - var(--header-h)) auto auto;
    align-content: start;
    padding-block: 0 clamp(40px, 8vw, 64px);
    row-gap: 0;
  }

  /* ABSOLUTE, not just full bleed. src/visual-checks.mjs isBackgroundLayer
     only treats media as a background when it is positioned AND covers >=60%
     of its section; in ordinary flow the clip was neither, so render-check
     reported the buttons sitting on it as an OVERLAP defect four times over.
     Positioned here it covers 62.1% and the layering reads as what it is.
     The grid row keeps its height because the row is sized explicitly, so
     taking the stage out of flow collapses nothing. */
  #hero .hero__grid { position: relative; }
  #hero .hero__stage {
    position: absolute;
    top: 0;
    /* 0, not a negative gutter. An absolutely positioned child resolves
       against the containing block's PADDING box, which for .shell is already
       the full viewport width, so pulling it out by the gutter again pushed
       40px past the edge. #hero hides its overflow, so nothing scrolled and
       only CLIPPED-TEXT noticed. */
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    height: calc(100svh - var(--header-h));
  }
  #hero .clip {
    aspect-ratio: auto;
    max-height: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  #hero .clip__sound {
    right: 12px; left: auto; bottom: auto; top: 12px;
    min-height: 30px; padding: 5px 10px; font-size: 12px; gap: 5px; letter-spacing: .05em;
  }
  #hero .clip__ico { width: 11px; height: 11px; }

  /* The brand line and the buttons share the clip's grid cell instead of
     following it, which is what puts them ON the video rather than under it.
     The heading is here because render-check refuses a hero taller than the
     fold unless BOTH a heading and a CTA are visible on first paint, and it
     is right to: a full-bleed clip with two buttons and no words does not
     tell a visitor whose site they are on. Kept to the name and one line, so
     the four lines off the hoodie are still the statement below. */
  #hero .hero__plate {
    display: grid;
    gap: 6px;
    grid-area: stage;
    align-self: end;
    justify-items: start;
    z-index: 3;
    padding-bottom: calc(clamp(28px, 7vw, 48px) + 124px);
  }
  #hero .hero__brand {
    font-size: clamp(34px, 11vw, 46px);
    line-height: .95;
    color: var(--ink);
  }
  #hero .hero__brand-sub {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }

  #hero .hero__cta {
    grid-area: stage;
    align-self: end;
    padding: 0 0 clamp(28px, 7vw, 48px);
  }
  #hero .hero__cta .btn { flex: 1 1 100%; }
  /* The ghost button is transparent, and the new hero footage has near-white
     frames (a lit loft ceiling) that put white-on-white behind its label at
     1.00:1. A scrim cannot be relied on for this: it would have to be heavy
     enough for the brightest frame of a 57-second clip, which would bury the
     footage. The button carries its own plate instead. */
  #hero .hero__cta .btn--ghost {
    background: rgba(10, 10, 12, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(242, 239, 233, .38);
  }

  #hero .hero__scrim {
    display: block;
    position: absolute;
    /* grid-area is load-bearing, not decoration. An absolutely positioned
       child of a grid container resolves against the GRID AREA when it has
       one and against the container's padding box when it does not. The stage
       has an area, so its -gutter offsets land it at 0..390 and it is exactly
       full bleed; the scrim had the identical offsets and no area, so it
       resolved against the padding box and came out 430px wide against a
       390px screen. Same declarations, different containing block. Naming the
       area makes the two boxes identical by construction. */
    grid-area: stage;
    top: 0;
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    height: calc(100svh - var(--header-h));
    z-index: 2;
    pointer-events: none;
    /* Weighted to the bottom now. The headline moved below the clip, so the
       only type sitting over footage is the button row. */
    background: linear-gradient(180deg,
      rgba(10,10,12,.55) 0%,
      rgba(10,10,12,.05) 22%,
      rgba(10,10,12,.30) 55%,
      rgba(10,10,12,.86) 84%,
      rgba(10,10,12,.97) 100%);
  }

  #hero .hero__copy { padding-top: clamp(32px, 8vw, 52px); }
  #hero .hero__h1 { font-size: clamp(30px, 10.4vw, 44px); margin: 0; }
  #hero .hero__meta { padding-top: var(--s-5); }
}

@media (max-width: 420px) {
  #hero .hero__meta { font-size: 12px; gap: var(--s-1) var(--s-4); }
  #hero .hero__meta li { gap: var(--s-4); }
}

/* ---- section: the-code ---- */
/* The manifesto. His own words off the shoot caption and the intake, set big
   enough to be the thing you read, with the clothing beside it. A literal wolf
   sat here first; Antonio's call on September 25, 2026 was that the animal did
   not belong on the page even though it is the brand's mark, and that somebody
   wearing the line says the same thing better.

   The photograph that replaced the wolf was a solo profile portrait, and it
   was the SAME frame the hero used as its poster, so the page showed one shot
   twice and Antonio read the second one as a video that had frozen. It is now
   two men greeting each other, which is also what the copy beside it claims:
   the section is about a community, and a lone figure was arguing the
   opposite. */

#the-code { background: var(--ground-lift); border-block: 1px solid var(--line); }

#the-code .code__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

#the-code .code__words { display: grid; gap: var(--s-5); }

#the-code .code__h2 {
  max-width: 18ch;
  font-size: clamp(34px, 4.6vw, 56px);
  color: var(--ink);
}

#the-code .code__body { display: grid; gap: var(--s-4); max-width: 54ch; }
#the-code .code__body p {
  margin: 0;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.65;
  /* 400 minimum on a dark ground. 300 blooms and reads thinner than its
     contrast ratio predicts. */
  font-weight: 400;
  color: var(--ink-dim);
}
#the-code .code__body strong { color: var(--ink); font-weight: 600; }

#the-code .code__rule {
  margin: var(--s-2) 0 0;
  padding-left: var(--s-5);
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--ink);
}

#the-code .code__stage { display: grid; gap: var(--s-4); }
#the-code .code__shot { aspect-ratio: 4 / 5; }
#the-code .code__shot img { filter: contrast(1.06) saturate(.92); }

@media (max-width: 900px) {
  #the-code .code__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  #the-code .code__stage { order: -1; }
  /* 1/1, not 16/10. The shot is a 4:5 portrait of two standing figures; a
     16:10 cover crop takes a 450px band out of the middle of 900 and cuts both
     faces off at the forehead. A square crop keeps the heads and the handshake
     in frame. */
  #the-code .code__shot { aspect-ratio: 1 / 1; }
}

/* ---- section: the-look ---- */
/* Lookbook. The full montage runs down the left as a tall portrait film and
   the street photography stacks beside it, so the eye gets motion and stills
   in the same band without either one being a thumbnail. */

#the-look { background: var(--ground); }

#the-look .look__grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

#the-look .look__film { position: sticky; top: calc(var(--header-h) + 24px); }
#the-look .look__film .clip { aspect-ratio: 9 / 16; max-height: calc(100svh - var(--header-h) - 96px); }
#the-look .look__film .cap { padding-inline: 2px; }

#the-look .look__stills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
#the-look .look__shot { aspect-ratio: 3 / 4; }
#the-look .look__shot--tall { aspect-ratio: 3 / 4; }
#the-look .look__shot--wide { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
#the-look figure img { transition: transform .8s var(--ease); }
#the-look .look__fig:hover img { transform: scale(1.03); }

#the-look .look__tail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
#the-look .look__tail p { margin: 0; max-width: 46ch; color: var(--ink-dim); font-size: 16px; }

@media (max-width: 900px) {
  #the-look .look__grid { grid-template-columns: 1fr; }
  #the-look .look__film { position: static; }
  #the-look .look__film .clip { aspect-ratio: 4 / 5; }
  #the-look .look__tail .btn { width: 100%; }
}

@media (max-width: 560px) {
  /* Nothing 3-across on a phone, and at 390px even 2-across portrait tiles
     put the sound control over most of the picture. */
  #the-look .look__stills { grid-template-columns: 1fr; }
  #the-look .look__shot--wide { aspect-ratio: 3 / 4; }
}

/* ---- section: shop ---- */
/* The catalogue, grouped by piece. Every card is a link straight to that
   product on Shopify, which stays the checkout. Nothing here takes payment
   and nothing here pretends to: no cart icon, no quantity, no add button. */

#shop { background: var(--ground-lift); border-block: 1px solid var(--line); }

#shop .shop__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
}
#shop .shop__note::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

#shop .shop__groups { display: grid; gap: clamp(44px, 5vw, 68px); }

#shop .shop__group-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--ink);
}
#shop .shop__count {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-mute);
}

#shop .shop__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: clamp(20px, 2.2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}

#shop .card__link {
  display: grid;
  gap: var(--s-3);
  height: 100%;
  padding: 14px 14px 18px;
  background: var(--ground-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
#shop .card__link:hover {
  border-color: #46464F;
  background: #1C1C22;
  transform: translateY(-3px);
}

/* No plate. Every product image is a transparent cut-out now, so the garment
   sits straight on the card. The white box this used to draw was the thing
   that read as unprofessional: 22 product shots each carrying its own slightly
   different off-white and its own corner vignette, boxed on a dark page. */
#shop .card__shot {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: visible;
}
#shop .card__shot img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* A cut-out with no plate has nothing to sit on, so it gets its own shadow.
     Two stacked: a tight one for the edge, a wide soft one for the weight. */
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 14px 26px rgba(0,0,0,.45));
  transition: transform .5s var(--ease);
}
#shop .card__link:hover .card__shot img { transform: scale(1.04); }

#shop .card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
#shop .card__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
#shop .card__price {
  flex: none;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .01em;
  color: var(--accent-read);
}
#shop .card__sizes {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

#shop .shop__tail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
#shop .shop__tail p { margin: 0; max-width: 44ch; color: var(--ink-dim); font-size: 16px; }

@media (max-width: 560px) {
  #shop .shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #shop .card__link { padding: 10px 10px 14px; gap: 10px; }
  #shop .card__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  #shop .card__name { font-size: 14px; }
  #shop .shop__tail .btn { width: 100%; }
}

/* ---- section: the-pack ---- */
/* The community half of the brand, which is the differentiator the intake
   named and the thing a product grid cannot carry. Studio cutouts sit on a
   near-white plate because they were shot on white: dropping them on the dark
   ground would show a grey box around every person. */

#the-pack { background: var(--ground); }

/* center, not end: the group photo is far taller than the copy, and aligning
   to the bottom left roughly 400px of empty ground above the heading. */
#the-pack .pack__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
/* Not .shot: a cut-out has no edges to frame, and object-fit:cover would
   crop the people out of their own group photo. */
#the-pack .pack__hero { margin: 0; }
#the-pack .pack__hero img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)) drop-shadow(0 24px 44px rgba(0,0,0,.5));
}

/* The bone plate existed to hide that these were shot on a white cyclorama,
   and mix-blend-mode:multiply was hiding the vignette. Both are gone: the
   people are cut out, so they stand on the page's own ground. */
#the-pack .pack__rail {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(20px, 2.4vw, 32px) 0 clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
#the-pack .pack__rail-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: clamp(12px, 1.6vw, 24px);
  padding-inline: clamp(20px, 3vw, 44px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#the-pack .pack__rail-inner::-webkit-scrollbar { display: none; }
#the-pack .pack__person { scroll-snap-align: center; margin: 0; }
#the-pack .pack__person img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  object-position: bottom;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)) drop-shadow(0 20px 34px rgba(0,0,0,.5));
}
/* Restored September 25, 2026 at Antonio's request after being cut earlier the
   same day. Changes to this block are coming, so it is back in its original
   shape rather than re-invented. */
#the-pack .pack__bts {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(48px, 5.5vw, 76px);
  padding-top: clamp(40px, 5vw, 60px);
  border-top: 1px solid var(--line);
}
#the-pack .pack__bts .clip { aspect-ratio: 9 / 16; max-height: 620px; }
#the-pack .pack__words { display: grid; gap: var(--s-5); }
#the-pack .pack__words h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 38px);
  text-transform: uppercase;
  line-height: 1.02;
  max-width: 16ch;
}
#the-pack .pack__words p { margin: 0; max-width: 50ch; color: var(--ink-dim); font-size: 17px; line-height: 1.65; }

#the-pack .pack__person figcaption {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-mute);
}

@media (max-width: 900px) {
  #the-pack .pack__lead { grid-template-columns: 1fr; align-items: start; }
  #the-pack .pack__bts { grid-template-columns: 1fr; }
  #the-pack .pack__bts .clip { aspect-ratio: 4 / 5; max-height: none; }
  #the-pack .pack__bts > div:first-child { order: 2; }
  #the-pack .pack__hero { aspect-ratio: 3 / 4; }
}

@media (max-width: 560px) {
  #the-pack .pack__rail-inner { grid-auto-columns: minmax(154px, 66%); }
}

/* ---- section: the-founder ---- */
/* Christopher in his own voice. The four clips are cuts from one sit-down
   interview and they carry burned-in captions, so they read with the sound
   off, which is how most of this section will be watched. */

#the-founder { background: var(--ground-lift); border-block: 1px solid var(--line); }

#the-founder .fdr__top {
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
/* Cut out like everyone else on this page. Left as a framed photo it was the
   only light box on a page where every other person now stands on the ground,
   which read as an oversight rather than a choice. */
#the-founder .fdr__portrait { margin: 0; }
#the-founder .fdr__portrait img {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)) drop-shadow(0 22px 40px rgba(0,0,0,.5));
}
#the-founder .fdr__words { display: grid; gap: var(--s-5); }
#the-founder .fdr__h2 { max-width: 16ch; font-size: clamp(34px, 4.6vw, 56px); }
#the-founder .fdr__name {
  display: grid;
  gap: 2px;
  padding-left: var(--s-5);
  border-left: 3px solid var(--accent);
}
#the-founder .fdr__name b { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
#the-founder .fdr__name span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
#the-founder .fdr__words p { margin: 0; max-width: 52ch; color: var(--ink-dim); font-size: 17px; line-height: 1.65; }
/* `#the-founder .fdr__words p` is (1,1,1) and .eyebrow is (0,1,0), so the
   paragraph rule above was repainting the red kicker grey. Every section that
   styles a bare `p` has to hand the kicker back. */
#the-founder .fdr__words p.eyebrow { color: var(--accent-lit); font-size: 13px; }

#the-founder .fdr__clips-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: clamp(48px, 5.5vw, 76px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
#the-founder .fdr__clips-head h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  text-transform: uppercase;
}
#the-founder .fdr__hint { margin: 0; font-size: 14px; color: var(--ink-mute); }

#the-founder .fdr__clips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: var(--s-6);
}
#the-founder .fdr__clip .clip { aspect-ratio: 9 / 16; }
#the-founder .fdr__clip .cap { padding-inline: 2px; }

@media (max-width: 1100px) {
  #the-founder .fdr__clips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  #the-founder .fdr__top { grid-template-columns: 1fr; }
  #the-founder .fdr__portrait img { max-height: 480px; margin-inline: auto; }
}
@media (max-width: 560px) {
  /* At 390px a two-across portrait tile is about 165px wide and the sound
     control covers a third of the picture. One per row. */
  #the-founder .fdr__clips { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ---- section: contact ---- */
/* The requested primary CTA on the intake was a form, so the form is the
   section and the direct channels sit beside it rather than replacing it.
   The honeypot, the JSON submit and the success state all belong to
   platform/v1.js; this markup only has to give it the right field names. */

#contact { background: var(--ground); }

#contact .ct__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

#contact .ct__words { display: grid; gap: var(--s-5); }
#contact .ct__h2 { max-width: 15ch; font-size: clamp(34px, 4.6vw, 56px); }

#contact .ct__direct {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-2);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
#contact .ct__row {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-size: 16px;
  text-decoration: none;
  color: var(--ink);
}
#contact .ct__row span {
  flex: none;
  width: 92px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
#contact .ct__row b { font-weight: 500; overflow-wrap: anywhere; }
#contact a.ct__row:hover b { color: var(--accent-lit); text-decoration: underline; }

#contact .ct__card {
  padding: clamp(24px, 3vw, 34px);
  background: var(--ground-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#contact .ct__form { display: grid; gap: var(--s-5); }

#contact .field { display: grid; gap: 8px; }
#contact .field label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
#contact .field__input {
  width: 100%;
  padding: 14px 15px;
  background: #0E0E12;
  border: 1px solid #33333C;
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .2s var(--ease);
}
#contact .field__input::placeholder { color: #6E6C69; }
#contact .field__input:focus { border-color: var(--accent); }
#contact textarea.field__input { resize: vertical; min-height: 128px; }

#contact .field--pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

#contact .ct__submit { width: 100%; margin-top: var(--s-1); }
#contact .ct__small { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-mute); }

@media (max-width: 900px) {
  #contact .ct__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  #contact .field--pair { grid-template-columns: 1fr; }
  #contact .ct__row { flex-direction: column; gap: 2px; }
  #contact .ct__row span { width: auto; }
}