/* ---------------------------------------------------------------------------
   GEAR.

   The brand argument in one line: GEAR is FLTH inverted. FLTH is acid on black,
   nocturnal, a dance floor in the dark. GEAR takes the same family and flips it
   to black on a hot poster yellow, because the whole premise is gear brought
   OUT of the dark and into the light where it can be looked at. Same family,
   opposite arrangement.

   Yellow is #F6FA00, sampled off the poster. It is hotter and greener than
   FLTH's #EFFF0F, which is what stops the two reading as the same brand.

   Single visual world by choice: this is a poster, not a document, so there is
   no light/dark pair. Every colour is stated outright so the page holds
   whatever ground the host paints behind it.
   --------------------------------------------------------------------------- */

:root{
  --g-yellow:#34FC34;
  --g-yellow-deep:#2FE42F;   /* for edges and rules on the yellow ground */
  --g-ink:#0B0B04;           /* warm near-black, never pure #000 */
  --g-ink-soft:#123D15;      /* green-shifted grey: reads as ink, not as grey */
  --g-white:#FFFFFF;
  --g-grey:#D8D8CD;          /* warm light grey. Deeper than a hair off white,
                                or it does not read as its own block next to the
                                white sections either side of it. */
  --g-black:#101008;         /* the dark sections */
  --g-black-2:#1A1A10;
  --g-line-dark:#2E2E1C;

  --g-display:"Alfa Slab One", Rockwell, "Courier Bold", Georgia, serif;
  /* Norwester stand-in. See the note in the build summary: Norwester is not on
     Google Fonts, so this is the closest widely available condensed face.
     Swapping the real file in is a change to this one line. */
  --g-caps:"Oswald", "Norwester", "Arial Narrow", sans-serif;
  --g-body:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --g-measure:62ch;

  /* One rule scale. heavy = a section edge, base = a component edge,
     thin = a separator inside a component. Nothing else. */
  --g-rule-heavy:6px;
  --g-rule:3px;
  --g-rule-thin:2px;

  /* Halftone, straight off the poster. Two offset dot grids so it reads as
     printed screen rather than a CSS pattern. */
  --g-dots:radial-gradient(circle at 1px 1px, rgba(11,11,4,.5) 1px, transparent 1.6px);

  --g-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.gear-page{
  background:var(--g-yellow);
  color:var(--g-ink);
  font-family:var(--g-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Print grain over the whole thing, at the strength the poster has it. */
.gear-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:3;
  background-image:var(--g-grain);opacity:.10;mix-blend-mode:multiply;
}

/* Matches the FLTH shell exactly (style.css .flth-wrap: 1080px, 18px gutter),
   so the GEAR content sits on the same left and right margins as the header
   and footer wrapped around it. Any other value and the page reads as a
   different site bolted into the middle of this one. */
.g-wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:18px}

.gear-page section{position:relative;z-index:1}

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

.g-h{
  font-family:var(--g-display);
  font-size:clamp(2rem,7vw,4rem);
  line-height:1.02;
  letter-spacing:-.005em;
  margin:0 0 24px;
  text-wrap:balance;
  color:var(--g-ink);
}
.g-h--light{color:var(--g-yellow)}

.g-h3{
  font-family:var(--g-caps);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1.1rem;
  margin:36px 0 12px;
  color:var(--g-ink);
}

.g-eyebrow{
  font-family:var(--g-caps);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.72rem;
  margin:0 0 14px;
  color:var(--g-ink-soft);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.g-eyebrow--light{color:rgba(52,252,52,.7)}

/* The four verbs in the hero ARE the four sections that follow, so numbering
   them is structure, not decoration. */
.g-num{
  font-family:var(--g-display);
  font-size:.9rem;letter-spacing:0;
  background:var(--g-ink);color:var(--g-yellow);
  padding:3px 9px 4px;
}

.gear-page p{margin:0 0 16px;max-width:var(--g-measure)}
.gear-page p:last-child{margin-bottom:0}

.g-big{
  font-family:var(--g-caps);
  font-weight:600;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.25rem,4vw,2rem);
  line-height:1.15;
  margin:0 0 20px;
  color:var(--g-ink);
}

.g-stamp{
  font-family:var(--g-display);
  font-size:clamp(1.3rem,4.6vw,2.2rem);
  line-height:1.08;
  margin:34px 0 0;
  padding-top:22px;
  border-top:var(--g-rule) solid var(--g-ink);
  max-width:none;
}
.g-stamp--sm{font-size:clamp(1rem,3vw,1.3rem);border-top-width:var(--g-rule-thin);margin-top:22px;padding-top:16px}

.g-note{font-size:.9rem;color:var(--g-ink-soft);font-style:italic}

/* Prose links only. A blanket `.gear-page a` rule is (0,1,1) and outranks
   `.g-btn` at (0,1,0), which paints the button's ink the same colour as its
   own fill and leaves an unreadable black box. Same trap as the FLTH nav.
   Scope it, and give every button a selector that cannot be outranked. */
.gear-page a:not([class]){color:inherit}

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

.gear-page .g-btn{
  display:inline-block;
  font-family:var(--g-caps);
  font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.82rem;
  padding:15px 28px;
  text-decoration:none;
  background:var(--g-ink);
  color:var(--g-yellow);
  border:var(--g-rule-thin) solid var(--g-ink);
}
.gear-page .g-btn:hover,.gear-page .g-btn:focus-visible{background:var(--g-yellow);color:var(--g-ink)}

.gear-page .g-btn--ghost{background:transparent;color:var(--g-ink)}
.gear-page .g-btn--ghost:hover,.gear-page .g-btn--ghost:focus-visible{background:var(--g-ink);color:var(--g-yellow)}

/* On the dark sections the polarity swaps, so the fill still takes the
   opposite ink and never lands yellow on yellow. */
.gear-page .g-btn--light{background:var(--g-yellow);color:var(--g-ink);border-color:var(--g-yellow)}
.gear-page .g-btn--light:hover,.gear-page .g-btn--light:focus-visible{background:transparent;color:var(--g-yellow)}

:focus-visible{outline:3px solid var(--g-ink);outline-offset:3px}
.g-part--dark :focus-visible,.g-know :focus-visible{outline-color:var(--g-yellow)}

/* ---------- hero ---------- */

.g-hero{
  /* The wordmark carries "presented by FLTH" in the artwork now, so the kicker
     line above it went. Less top padding, because the mark is the opener. */
  padding-block:30px 54px;
  border-bottom:var(--g-rule-heavy) solid var(--g-ink);
  background:var(--g-yellow);
}

.g-presents{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;
  margin:0 0 20px;color:var(--g-ink-soft);
}
.g-presents span{
  font-family:var(--g-display);letter-spacing:.04em;font-size:.95rem;color:var(--g-ink);
}

.g-hero__mark{margin:0 0 26px;line-height:0}
.g-hero__mark img{display:block;width:100%;max-width:100%;height:auto}

.g-spine{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:2px}
.g-spine li{
  font-family:var(--g-caps);
  font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.05rem,4.2vw,1.7rem);
  line-height:1.12;
}
@media(min-width:760px){.g-spine{grid-template-columns:1fr 1fr;gap:4px 28px}}

.g-when{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  border-top:var(--g-rule) solid var(--g-ink);border-bottom:var(--g-rule) solid var(--g-ink);
  padding:16px 0;margin:0 0 18px;max-width:none;
}
.g-when__date{
  font-family:var(--g-display);
  font-size:clamp(1.3rem,5vw,2.1rem);line-height:1;
}
.g-when__city{
  font-family:var(--g-caps);text-transform:uppercase;letter-spacing:.2em;
  font-size:.86rem;color:var(--g-ink-soft);
}

.g-facts{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;
  margin:0 0 26px;color:var(--g-ink-soft);max-width:none;
}

.g-hero__cta{margin:0}

/* ---------- narrative sections ---------- */

.g-sec{padding-block:54px}
.g-part{border-top:var(--g-rule-thin) solid var(--g-yellow-deep)}
.g-part:first-of-type{border-top:0}

.g-lede p{
  font-size:clamp(1.05rem,2.6vw,1.22rem);
  max-width:56ch;
}

/* The gear vocabulary, set as a rack of tags rather than a sentence, because
   the list IS the subject matter. */
.g-kinds{
  list-style:none;margin:26px 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.g-kinds li{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:500;
  border:var(--g-rule-thin) solid var(--g-ink);padding:6px 11px;
}

.g-cols{display:grid;gap:18px}
@media(min-width:800px){.g-cols{grid-template-columns:1fr 1fr;gap:32px}.g-cols p{max-width:none}}

.g-sec--what{padding-bottom:58px}

.g-nots{
  border-left:var(--g-rule) solid var(--g-yellow);
  padding-left:18px;margin:24px 0;
}
.g-nots p{margin:0 0 6px}

.g-dont{list-style:none;margin:20px 0;padding:0;display:grid;gap:8px}
.g-dont li{
  padding-left:26px;position:relative;
}
.g-dont li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:14px;height:3px;background:currentColor;
}

.g-come{list-style:none;margin:22px 0;padding:0;display:grid;gap:4px}
.g-come li{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.04em;font-weight:500;
  font-size:clamp(.95rem,3vw,1.2rem);
}

.g-steps{
  margin:18px 0 22px;padding:0;list-style:none;counter-reset:s;
  display:grid;gap:14px;
}
.g-steps li{
  counter-increment:s;padding-left:46px;position:relative;max-width:var(--g-measure);
}
.g-steps li::before{
  content:counter(s);position:absolute;left:0;top:-2px;
  font-family:var(--g-display);font-size:1.1rem;
  width:32px;height:32px;display:grid;place-items:center;
  background:var(--g-ink);color:var(--g-yellow);
}

.g-box{
  border:var(--g-rule) solid var(--g-ink);
  padding:24px 22px;margin-top:34px;
  background:rgba(11,11,4,.05);
}
.g-box .g-h3{margin-top:0}

/* The one section that flips to black inside the narrative: the competition,
   because it is the moment the room goes quiet and the lights point at you. */
.g-part--dark{
  background:var(--g-black);
  color:#EDEDD8;
  border-top:0;
  margin-block:0;
  padding-block:54px;
}
.g-part--dark .g-h{color:var(--g-yellow)}
.g-part--dark .g-h3{color:var(--g-yellow)}
.g-part--dark .g-big{color:var(--g-yellow)}
.g-part--dark .g-eyebrow{color:rgba(237,237,216,.62)}
.g-part--dark .g-num{background:var(--g-yellow);color:var(--g-ink)}
.g-part--dark .g-nots{border-left-color:var(--g-yellow)}
.g-part--dark .g-steps li::before{background:var(--g-yellow);color:var(--g-ink)}
.g-part--dark .g-note{color:rgba(237,237,216,.62)}
.g-part--dark .g-stamp{border-top-color:var(--g-yellow);color:var(--g-yellow)}

/* ---------- know before you come ---------- */

.g-know{
  background:var(--g-black);
  color:#EDEDD8;
  padding-block:56px 60px;
  border-top:var(--g-rule-heavy) solid var(--g-yellow);
}

.g-grid{display:grid;gap:2px;margin-top:30px}
@media(min-width:780px){.g-grid{grid-template-columns:1fr 1fr}}

.g-card{
  background:var(--g-black-2);
  padding:24px 22px;
  border-top:var(--g-rule) solid var(--g-yellow);
}
.g-card h3{
  font-family:var(--g-display);
  font-size:1.2rem;line-height:1.1;margin:0 0 10px;color:var(--g-yellow);
}
.g-card__lead{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.06em;font-weight:500;
  font-size:.92rem;margin:0 0 14px;color:#EDEDD8;
}
.g-card p{font-size:.94rem;color:rgba(237,237,216,.82);max-width:none}
.g-card__stamp{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  font-size:.86rem;color:var(--g-yellow)!important;
  margin-top:16px;padding-top:14px;border-top:var(--g-rule-thin) solid var(--g-line-dark);
}

/* ---------- faq ---------- */

.g-faq{padding-block:54px;border-top:var(--g-rule-thin) solid var(--g-yellow-deep)}

.g-acc{margin-top:26px;border-top:var(--g-rule) solid var(--g-ink)}
.g-acc details{border-bottom:var(--g-rule-thin) solid var(--g-ink)}
.g-acc summary{
  cursor:pointer;list-style:none;
  font-family:var(--g-caps);
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.92rem,2.6vw,1.05rem);
  padding:16px 44px 16px 0;position:relative;
}
.g-acc summary::-webkit-details-marker{display:none}
.g-acc summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:16px;height:3px;background:var(--g-ink);
}
.g-acc summary::before{
  content:"";position:absolute;right:14.5px;top:50%;margin-top:-6.5px;
  width:3px;height:16px;background:var(--g-ink);transition:transform .18s ease;
}
.g-acc details[open] summary::before{transform:scaleY(0)}
.g-acc details > div{padding:0 0 18px}
.g-acc details p{margin:0;font-size:.96rem}

/* ---------- end ---------- */

.g-end{
  background:var(--g-ink);
  color:var(--g-yellow);
  padding-block:56px 60px;
  background-image:var(--g-dots);
  background-size:11px 11px;
}
.g-end .g-spine li{color:var(--g-yellow)}
.g-end__list{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;
  color:rgba(52,252,52,.7);margin:22px 0 28px;max-width:none;
}
.g-end__ask{color:rgba(52,252,52,.7);margin:0 0 6px}
.g-end__shout{
  font-family:var(--g-display);
  font-size:clamp(2.4rem,12vw,6rem);line-height:.95;margin:0 0 30px;
  color:var(--g-yellow);max-width:none;
}
.g-end__cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;max-width:none}
.gear-page .g-end .g-btn{background:var(--g-yellow);color:var(--g-ink);border-color:var(--g-yellow)}
.gear-page .g-end .g-btn:hover,.gear-page .g-end .g-btn:focus-visible{background:transparent;color:var(--g-yellow)}
.gear-page .g-end .g-btn--ghost{background:transparent;color:var(--g-yellow)}
.gear-page .g-end .g-btn--ghost:hover,.gear-page .g-end .g-btn--ghost:focus-visible{background:var(--g-yellow);color:var(--g-ink)}
.g-end .g-facts{color:rgba(52,252,52,.6)}
.g-presents--end{color:rgba(52,252,52,.6);margin:0}
.g-presents--end span{color:var(--g-yellow)}

@media (prefers-reduced-motion:reduce){
  .gear-page *{animation:none!important;transition:none!important}
}

/* The date, repeated at the close. */
.g-end__when{
  font-family:var(--g-display);
  font-size:clamp(1.05rem,3.6vw,1.5rem);line-height:1.1;
  color:var(--g-yellow);margin:0 0 10px;max-width:none;
}

/* ---------------------------------------------------------------------------
   Section grounds.

   Ink stays black on yellow, white and grey, so only the ground changes and
   every component keeps working across all three. The colour change is itself
   the divider, which is why these grounds drop the rule between sections.
   --------------------------------------------------------------------------- */

.gear-page .g-bg-yellow{background:var(--g-yellow)}
.gear-page .g-bg-white{background:var(--g-white)}
.gear-page .g-bg-grey{background:var(--g-grey)}

.gear-page .g-bg-white,
.gear-page .g-bg-grey,
.gear-page .g-bg-yellow{border-top:0}

/* On white the 5% ink wash used for the maker box disappears, so it gets a
   real edge instead. */
.gear-page .g-bg-white .g-box{background:var(--g-grey);border-color:var(--g-ink)}
.gear-page .g-bg-grey .g-box{background:var(--g-white);border-color:var(--g-ink)}

/* The FAQ rules read heavy on white; on yellow they were fighting the ground. */
.gear-page .g-bg-white .g-acc,
.gear-page .g-bg-white .g-acc details{border-color:var(--g-ink)}

/* ---------------------------------------------------------------------------
   Categories.

   The point JJ is making is structural, not decorative: an entrant picks the
   lens their presentation gets judged through. So the principle gets stated
   before the six boxes, rather than being a footnote under them.

   SKIN and AVANT-GEAR carry an extra note because both are open to being
   misread: SKIN as a body competition, AVANT-GEAR as a leftovers bin. Those
   notes are the whole reason those two categories can exist safely, so they are
   marked rather than buried in the paragraph.
   --------------------------------------------------------------------------- */

.gear-page .g-principle{
  border-left:var(--g-rule) solid var(--g-ink);
  padding:4px 0 4px 20px;
  margin:0 0 36px;
  max-width:64ch;
}
.gear-page .g-principle p{margin:0 0 12px}
.gear-page .g-principle__stamp{
  font-family:var(--g-caps);
  font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(.95rem,2.8vw,1.15rem);
  margin:16px 0 0!important;
}

.gear-page .g-cats{
  display:grid;gap:2px;grid-template-columns:1fr;margin:0 0 44px;
}
@media(min-width:700px){.gear-page .g-cats{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.gear-page .g-cats{grid-template-columns:repeat(3,1fr)}}

.gear-page .g-cat{
  background:var(--g-white);
  border-top:var(--g-rule) solid var(--g-ink);
  padding:22px 20px;
}
.gear-page .g-cat h3{
  font-family:var(--g-display);
  font-size:1.35rem;line-height:1.05;margin:0 0 10px;
  text-transform:uppercase;color:var(--g-ink);
}
.gear-page .g-cat p{font-size:.94rem;max-width:none;color:var(--g-ink)}

/* The two that need guarding against being misread. */
.gear-page .g-cat__note{
  margin-top:12px!important;padding-top:12px;
  /* Ink, not yellow: yellow on white is too faint for the one paragraph on
     this page that exists to stop a category being misread. */
  border-top:var(--g-rule-thin) solid var(--g-ink);
  font-size:.88rem!important;
}
.gear-page .g-cat--flag{border-top-color:var(--g-yellow);box-shadow:inset 0 0 0 var(--g-rule-thin) var(--g-ink)}

.gear-page .g-titles-h{
  font-family:var(--g-caps);
  font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(.9rem,2.6vw,1.05rem);
  margin:0 0 16px;padding-bottom:12px;
  border-bottom:var(--g-rule) solid var(--g-ink);
}

.gear-page .g-titles{display:grid;gap:2px;grid-template-columns:1fr;margin:0 0 30px}
@media(min-width:760px){.gear-page .g-titles{grid-template-columns:1fr 1fr}}

.gear-page .g-title{
  background:var(--g-ink);
  padding:26px 24px;
}
.gear-page .g-title__kind{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.22em;font-size:.66rem;
  color:rgba(52,252,52,.7);margin:0 0 8px;
}
.gear-page .g-title h4{
  font-family:var(--g-display);
  font-size:clamp(1.5rem,5vw,2.2rem);line-height:1;
  margin:0 0 12px;color:var(--g-yellow);text-transform:uppercase;
}
.gear-page .g-title p{color:#EDEDD8;font-size:.94rem;max-width:none}

.gear-page .g-cats-foot{
  font-size:.9rem;font-style:italic;max-width:64ch;margin:0 0 24px;
  color:var(--g-ink-soft);
}

/* ---------------------------------------------------------------------------
   Prizes and judges.
   --------------------------------------------------------------------------- */

.gear-page .g-prizes{
  list-style:none;margin:28px 0 20px;padding:0;
  display:grid;gap:2px;grid-template-columns:1fr;
}
@media(min-width:640px){.gear-page .g-prizes{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.gear-page .g-prizes{grid-template-columns:repeat(4,1fr)}}

.gear-page .g-prizes li{
  background:var(--g-grey);
  border-top:var(--g-rule) solid var(--g-ink);
  padding:20px 18px;
}
.gear-page .g-prizes h3{
  font-family:var(--g-display);
  font-size:1.05rem;line-height:1.1;margin:0 0 8px;
  text-transform:uppercase;color:var(--g-ink);
}
.gear-page .g-prizes p{font-size:.9rem;margin:0;max-width:none}

/* Judges. The slots are deliberately empty rather than filled with stand-in
   faces: an obviously blank frame reads as "not announced yet", where a stock
   portrait reads as a person nobody recognises. */
.gear-page .g-judges{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;gap:2px;grid-template-columns:1fr 1fr;
}
@media(min-width:760px){.gear-page .g-judges{grid-template-columns:repeat(4,1fr)}}

.gear-page .g-judges li{display:flex;flex-direction:column}

.gear-page .g-judge__slot{
  aspect-ratio:4 / 5;width:100%;
  background:var(--g-white);
  border:var(--g-rule) solid var(--g-ink);
  position:relative;
}
/* A single diagonal, so an empty frame looks intended rather than broken. */
.gear-page .g-judge__slot::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 11px,var(--g-ink) 11px 12px);
  opacity:.14;
}
.gear-page .g-judge__name{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:500;
  padding:10px 2px 0;color:var(--g-ink-soft);
}

/* ---------------------------------------------------------------------------
   Clean blocks.

   Every card grid had a heavy rule across its top and a 2px gap, so the ground
   showed through as thin lines and the whole grid read as a table drawn in
   black bars. Cards are now plain blocks with real space between them: the gap
   separates, nothing needs an edge drawn round it.

   The rules that stay are typographic, not structural: the stamp underline,
   the hero date, the callout edges.
   --------------------------------------------------------------------------- */

.gear-page .g-cats,
.gear-page .g-prizes,
.gear-page .g-judges,
.gear-page .g-grid,
.gear-page .g-titles{gap:14px}

.gear-page .g-cat,
.gear-page .g-prizes li,
.gear-page .g-card{border-top:0}

.gear-page .g-cat{background:var(--g-white);padding:24px 22px}

/* No ring, no coloured edge. These two are marked by their note, which is the
   only thing that actually needed marking. */
.gear-page .g-cat--flag{box-shadow:none;border-top:0}

/* The note separator was ink and read as another bar. It only needs to say
   "a second thought starts here". */
.gear-page .g-cat__note{border-top:var(--g-rule-thin) solid rgba(11,11,4,.16)}

/* Prizes sit on white, so the blocks take the grey to stay visible. */
.gear-page .g-prizes li{background:var(--g-grey)}

/* Judge frames: no outline, just a flat block with the hatch inside it. */
.gear-page .g-judge__slot{border:0;background:var(--g-white)}

/* The dark cards lose their yellow bar too. */
.gear-page .g-card{background:var(--g-black-2)}
.gear-page .g-card__stamp{border-top:var(--g-rule-thin) solid rgba(52,252,52,.22)}

/* The maker box was a boxed-in rectangle. Same treatment. */
.gear-page .g-box{border:0;background:var(--g-white);padding:24px 22px}
.gear-page .g-bg-white .g-box{background:var(--g-grey)}

/* Section edges: the colour change already divides them. */
.gear-page .g-hero{border-bottom:0}
.gear-page .g-know{border-top:0}

/* Accordion: hairlines rather than bars. */
.gear-page .g-acc{border-top:var(--g-rule-thin) solid rgba(11,11,4,.18)}
.gear-page .g-acc details{border-bottom:var(--g-rule-thin) solid rgba(11,11,4,.18)}

/* ---------------------------------------------------------------------------
   No accent rails.

   The vertical bar down the side of a callout is one of the most obviously
   generated design habits going, and it was doing no work here: the principle
   block and the "not a bodybuilding competition" block already read as set
   apart through their own typography. Space and weight separate them instead.
   --------------------------------------------------------------------------- */

.gear-page .g-principle,
.gear-page .g-nots,
.gear-page .g-part--dark .g-nots{
  border-left:0;
  padding-left:0;
}

.gear-page .g-principle{margin:0 0 40px}

/* The "not a bodybuilding competition" lines carry the point, so they take the
   emphasis the rail used to imply. */
.gear-page .g-nots{margin:26px 0}
.gear-page .g-nots p{
  font-family:var(--g-caps);
  font-weight:500;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1rem,2.8vw,1.2rem);
  line-height:1.25;margin:0 0 4px;
}
.gear-page .g-nots p strong{font-weight:700;color:var(--g-yellow)}

/* ---------------------------------------------------------------------------
   Tickets, and buttons with nowhere to go yet.

   Every call to action is a real disabled <button> until the ticket, entry and
   stall links exist. It keeps the shape and position of the button so the page
   still reads correctly, but it cannot be clicked, screen readers announce it
   as unavailable, and it is visibly muted rather than looking live and failing
   silently.
   --------------------------------------------------------------------------- */

.gear-page .g-btn--off,
.gear-page .g-btn--off:hover,
.gear-page .g-btn--off:focus-visible{
  background:transparent;
  color:var(--g-ink-soft);
  border:var(--g-rule-thin) dashed rgba(11,11,4,.35);
  cursor:not-allowed;
  font-family:var(--g-caps);
}

/* On the dark sections the same button has to mute against black instead. */
.gear-page .g-part--dark .g-btn--off,
.gear-page .g-part--dark .g-btn--off:hover,
.gear-page .g-end .g-btn--off,
.gear-page .g-end .g-btn--off:hover{
  background:transparent;
  color:rgba(52,252,52,.55);
  border-color:rgba(52,252,52,.35);
}

.gear-page .g-tix{
  list-style:none;margin:28px 0 22px;padding:0;
  display:grid;gap:14px;grid-template-columns:1fr;
}
@media(min-width:760px){.gear-page .g-tix{grid-template-columns:repeat(3,1fr)}}

.gear-page .g-tix li{background:var(--g-grey);padding:22px 20px}
.gear-page .g-tix h3{
  font-family:var(--g-display);
  font-size:1.2rem;line-height:1.05;margin:0 0 8px;
  text-transform:uppercase;color:var(--g-ink);
}
.gear-page .g-tix p{font-size:.94rem;margin:0;max-width:none}

.gear-page .g-tix__note{
  font-family:var(--g-caps);
  text-transform:uppercase;letter-spacing:.02em;font-weight:500;
  font-size:clamp(.92rem,2.6vw,1.05rem);line-height:1.35;
  max-width:60ch;margin:0 0 24px;
}

/* ---------------------------------------------------------------------------
   Photographs.

   One treatment, applied here rather than baked into the files, so every image
   on the page matches by definition and anything added later matches too
   without being re-processed.

   High-contrast black and white with a faint warm cast: colour photographs
   would fight a page already running hot yellow against black, and straight
   greyscale sits slightly cold next to it. The images read as a separate
   material from the flat colour, which is the point of having them.
   --------------------------------------------------------------------------- */

.gear-page .g-shot{margin:0;position:relative;overflow:hidden;background:var(--g-black)}
.gear-page .g-shot img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.22) brightness(.94);
}
/* The warm cast, kept low enough that the picture still reads as black and
   white rather than as a tint. */
.gear-page .g-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--g-yellow);opacity:.09;mix-blend-mode:overlay;
}

/* Full-bleed bands between sections. They run the whole width because the page
   is built from edge-to-edge colour blocks, and a boxed-in photograph in the
   middle of that reads as an afterthought. */
.gear-page .g-shot--band{
  aspect-ratio:21 / 9;
  border-block:0;
}
@media(max-width:700px){.gear-page .g-shot--band{aspect-ratio:3 / 2}}

/* The pair inside Meet the makers. */
.gear-page .g-shots{
  display:grid;gap:14px;grid-template-columns:1fr;margin:28px 0 8px;
}
@media(min-width:640px){.gear-page .g-shots{grid-template-columns:1fr 1fr}}
.gear-page .g-shots .g-shot{aspect-ratio:4 / 3}

@media (prefers-reduced-motion:reduce){
  .gear-page .g-shot img{transition:none}
}

/* ---------------------------------------------------------------------------
   Photographs carrying sections.

   Three placements, each doing a different job:
     --bg    the photograph IS the section, copy sits on top of it
     --side  the photograph sits beside the copy
     (pair)  two photographs inside Meet the makers

   The scrim on a background photograph is not decoration. Copy over an
   uncontrolled photograph is the easiest way to end up with an unreadable page,
   so the darkening is heavy and deliberate, and the type switches to the light
   set to match. Everything stays legible whatever the picture turns out to be.
   --------------------------------------------------------------------------- */

.gear-page .g-sec--photo{
  position:relative;
  isolation:isolate;
  background:var(--g-black);
  padding-block:72px;
}

.gear-page .g-shot--bg{
  position:absolute;inset:0;z-index:-1;margin:0;aspect-ratio:auto;
}
.gear-page .g-shot--bg img{width:100%;height:100%;object-fit:cover}

/* Heavier at the top where the heading lands, so the picture still reads at the
   bottom of the block rather than being flattened evenly. */
.gear-page .g-shot--bg::after{
  background:linear-gradient(180deg,rgba(11,11,4,.90) 0%,rgba(11,11,4,.78) 55%,rgba(11,11,4,.86) 100%);
  opacity:1;mix-blend-mode:normal;
}

.gear-page .g-sec--photo .g-wrap{position:relative;z-index:1}

/* Light type over the photograph. */
.gear-page .g-sec--photo{color:#EDEDD8}
.gear-page .g-sec--photo .g-h{color:var(--g-yellow)}
.gear-page .g-sec--photo .g-eyebrow{color:rgba(237,237,216,.62)}
.gear-page .g-sec--photo .g-big{color:var(--g-yellow)}
.gear-page .g-sec--photo p{color:#EDEDD8}
.gear-page .g-sec--photo .g-lede p{color:#FFFFFF}
.gear-page .g-sec--photo strong{color:var(--g-yellow)}

/* Ticket blocks on the photograph: translucent so the picture shows through
   rather than three flat grey slabs pasted over it. */
.gear-page .g-sec--photo .g-tix li{
  background:rgba(11,11,4,.62);
  backdrop-filter:blur(2px);
}
.gear-page .g-sec--photo .g-tix h3{color:var(--g-yellow)}
.gear-page .g-sec--photo .g-tix p{color:rgba(237,237,216,.88)}
.gear-page .g-sec--photo .g-tix__note{color:#FFFFFF}
.gear-page .g-sec--photo .g-btn--off{
  color:rgba(52,252,52,.6);border-color:rgba(52,252,52,.4);
}

/* --- the photograph beside the copy ------------------------------------- */

.gear-page .g-split{display:grid;gap:28px;grid-template-columns:1fr}
@media(min-width:920px){
  .gear-page .g-split{grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
  /* Sticks alongside while the long competition copy scrolls past it. */
  .gear-page .g-shot--side{position:sticky;top:90px}
}
.gear-page .g-shot--side{aspect-ratio:3 / 4;margin:0}
@media(max-width:919px){.gear-page .g-shot--side{aspect-ratio:16 / 9}}

/* --- accordions: categories (light ground) and rules (over photograph) --- */

/* More than one paragraph inside a panel needs breathing room; the base rule
   zeroes margins for the single-paragraph case. */
.gear-page .g-acc details > div > * + *{margin-top:12px}
.gear-page .g-acc details > div{max-width:64ch}

/* The category list carries the display face, since these are the six names
   people scan for. */
.gear-page .g-acc--cats{margin-top:30px;border-top:var(--g-rule) solid var(--g-ink)}
.gear-page .g-acc--cats summary{
  font-family:var(--g-display);
  font-weight:400;letter-spacing:0;
  font-size:clamp(1.15rem,4.2vw,1.6rem);
  line-height:1.12;
  padding:18px 52px 18px 0;
}
.gear-page .g-acc--cats details{border-bottom:var(--g-rule-thin) solid rgba(11,11,4,.22)}
.gear-page .g-acc--cats details:last-child{border-bottom:0}
.gear-page .g-acc--cats summary:hover{color:var(--g-ink)}
.gear-page .g-acc--cats .g-cat__note{
  border-top:var(--g-rule-thin) solid rgba(11,11,4,.16);
  padding-top:12px;font-size:.88rem;
}

/* The four non-negotiables sit above the accordion, always open, because a
   rule hidden behind a click is a rule nobody read. */
.gear-page .g-rules{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;gap:12px;grid-template-columns:1fr;
}
@media(min-width:760px){.gear-page .g-rules{grid-template-columns:1fr 1fr;gap:14px}}
.gear-page .g-rules li{
  background:rgba(11,11,4,.62);
  backdrop-filter:blur(2px);
  padding:16px 18px;min-width:0;
  font-size:.95rem;color:#EDEDD8;
}
.gear-page .g-rules strong{
  display:block;font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:.8rem;color:var(--g-yellow);margin-bottom:4px;
}

/* Over the photograph the whole accordion flips to the light set: ink-coloured
   rules and markers would disappear into the scrim. */
.gear-page .g-acc--light{
  margin-top:30px;
  border-top:var(--g-rule) solid rgba(52,252,52,.75);
}
.gear-page .g-acc--light details{border-bottom:var(--g-rule-thin) solid rgba(237,237,216,.3)}
.gear-page .g-acc--light details:last-child{border-bottom:0}
.gear-page .g-acc--light summary{color:var(--g-yellow)}
.gear-page .g-acc--light summary::after,
.gear-page .g-acc--light summary::before{background:var(--g-yellow)}
.gear-page .g-acc--light details > div{
  max-width:none;
  background:rgba(11,11,4,.55);
  backdrop-filter:blur(2px);
  padding:14px 18px 16px;
  margin-bottom:16px;
}
.gear-page .g-acc--light details p{max-width:64ch}
.gear-page .g-acc--light details p{color:#EDEDD8}
.gear-page .g-acc--light details strong{color:var(--g-yellow)}

/* --- how it works: numbered steps with their own labels ----------------- */

.gear-page .g-steps--named{gap:18px}
.gear-page .g-steps--named li{padding-left:46px;min-height:30px}
.gear-page .g-steps--named li::before{
  content:counter(s,decimal-leading-zero);
  width:auto;height:auto;background:none;
  color:var(--g-yellow);
  font-size:clamp(.95rem,2.6vw,1.1rem);line-height:1.3;top:1px;
  display:block;letter-spacing:-.02em;
}
.gear-page .g-steps--named strong{
  display:block;font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:.86rem;margin-bottom:3px;
}
.gear-page .g-steps--named span{display:block;font-size:.96rem}
/* On a light ground the outline number needs the ink colour instead. */
.gear-page .g-bg-white .g-steps--named li::before,
.gear-page .g-bg-grey .g-steps--named li::before,
.gear-page .g-bg-yellow .g-steps--named li::before{color:var(--g-ink)}

/* ---------------------------------------------------------------------------
   The judging subpage (template-gear-judging.php).

   Same design system, three components it needs that the main page does not:
   a definition list of the categories, a weighted scorecard, and a plain
   prose list for the rules.
   --------------------------------------------------------------------------- */

.gear-page .g-h--page{margin-bottom:18px}
.gear-page .g-judge-top .g-eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}

.gear-page .g-defs{margin:26px 0 0;display:grid;gap:0}
.gear-page .g-defs > div{
  display:grid;gap:2px 24px;grid-template-columns:1fr;
  padding:16px 0;border-bottom:var(--g-rule-thin) solid rgba(11,11,4,.18);
}
.gear-page .g-defs > div:last-child{border-bottom:0}
@media(min-width:720px){
  .gear-page .g-defs > div{grid-template-columns:200px 1fr;align-items:baseline}
}
.gear-page .g-defs dt{
  font-family:var(--g-display);font-weight:400;
  font-size:clamp(1.1rem,3.4vw,1.4rem);line-height:1.1;
  text-transform:uppercase;
}
.gear-page .g-defs dd{margin:0;font-size:.96rem;max-width:56ch}

/* The weight leads, because the weight is the information. */
.gear-page .g-score{
  list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px;
}
.gear-page .g-score li{
  display:grid;gap:2px 20px;grid-template-columns:1fr;
  padding-bottom:16px;border-bottom:var(--g-rule-thin) solid rgba(237,237,216,.22);
}
.gear-page .g-score li:last-child{border-bottom:0;padding-bottom:0}
@media(min-width:620px){
  .gear-page .g-score li{grid-template-columns:96px 1fr;align-items:baseline}
}
.gear-page .g-score__pct{
  margin:0;font-family:var(--g-display);
  font-size:clamp(1.4rem,4.6vw,1.9rem);line-height:1;
  color:var(--g-yellow);max-width:none;
}
.gear-page .g-score strong{
  display:block;font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;font-size:.86rem;margin-bottom:3px;
}
.gear-page .g-score span{display:block;font-size:.96rem}

.gear-page .g-list{margin:24px 0 0;padding:0 0 0 20px;display:grid;gap:14px}
.gear-page .g-list li{max-width:var(--g-measure);font-size:.98rem}
.gear-page .g-list li::marker{color:rgba(11,11,4,.45)}

/* One long line rather than the main page's two-word shout. */
.gear-page .g-end__shout--line{
  font-size:clamp(1.5rem,5vw,2.4rem);line-height:1.08;
  max-width:22ch;margin-bottom:22px;
}
.gear-page .g-presents--end a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}

/* Link out to the judging rules from the categories section. */
.gear-page .g-note--link{margin-top:22px;font-style:normal}
.gear-page .g-note--link a{
  color:inherit;font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:.86rem;
  text-decoration:none;border-bottom:var(--g-rule-thin) solid currentColor;
  padding-bottom:2px;
}

/* Step numbers now live in the markup, not in a CSS counter: a screen reader
   and a search engine both read the page's text, and a counter is in neither. */
.gear-page .g-steps--named li::before{content:none}
.gear-page .g-steps__n{
  position:absolute;left:0;top:1px;
  font-family:var(--g-display);
  font-size:clamp(.95rem,2.6vw,1.1rem);line-height:1.3;
  color:var(--g-yellow);letter-spacing:-.02em;
}
.gear-page .g-bg-white .g-steps__n,
.gear-page .g-bg-grey .g-steps__n,
.gear-page .g-bg-yellow .g-steps__n{color:var(--g-ink)}

/* "Venue and door time announced soon": present, quieter than the date. */
.gear-page .g-facts--soon{opacity:.72;margin-top:4px}

/* The photograph behind "What is GEAR?" is dark at the top, so the scrim was
   burying it exactly where the eye lands. Lighter at the top, heavier where the
   body copy runs, so the picture is visible AND the text stays legible. */
.gear-page #what .g-shot--bg::after{
  background:linear-gradient(
    to bottom,
    rgba(11,11,4,.55) 0%,
    rgba(11,11,4,.72) 38%,
    rgba(11,11,4,.88) 100%
  );
}

/* A link in the quiet note line under the steps. */
.gear-page .g-note--light a{color:var(--g-yellow)}

/* ---------------------------------------------------------------------------
   "What is happening" — the bill for the night.

   People decide whether to buy on what they will actually DO once they are
   inside. A tag column lets the eye find Market, Stage, Competition without
   reading, and the meta line answers the question each block raises: is this
   included, do I have to do anything first.
   --------------------------------------------------------------------------- */

.gear-page .g-bill{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.gear-page .g-bill li{
  display:grid;gap:4px 24px;grid-template-columns:1fr;
  padding:20px 0;border-bottom:var(--g-rule-thin) solid rgba(11,11,4,.18);
}
.gear-page .g-bill li:last-child{border-bottom:0}
@media(min-width:760px){
  .gear-page .g-bill li{grid-template-columns:160px 1fr;align-items:baseline}
}
.gear-page .g-bill__tag{
  margin:0;font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;
  max-width:none;
}
.gear-page .g-bill h3{
  font-family:var(--g-display);font-weight:400;
  font-size:clamp(1.1rem,3.4vw,1.4rem);line-height:1.1;
  text-transform:uppercase;margin:0 0 8px;
}
.gear-page .g-bill p{font-size:.96rem;max-width:58ch;margin:0}
.gear-page .g-bill__meta{
  margin-top:8px !important;
  font-family:var(--g-caps);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
  font-size:.76rem;opacity:.7;
}

/* ---------------------------------------------------------------------------
   Editorial two-column sections.

   Every section used to stack a heading over a column of prose capped at 62
   characters, which on a desktop left the right half of the screen empty and
   made the copy look as if it had slid into the corner. The magazine answer:
   the heading holds the left column and stays put while its own section's copy
   runs past it on the right. Nothing is centred, nothing is stretched to the
   full width, and the measure stays readable because the column, not the
   paragraph, now sets it.

   Below 1040px it collapses back to one column and reads exactly as before.
   --------------------------------------------------------------------------- */

@media(min-width:1040px){
  .gear-page .g-wrap--cols{
    display:grid;
    grid-template-columns:minmax(260px,0.78fr) minmax(0,1.22fr);
    column-gap:64px;
    align-items:start;
  }
  /* Follows its section and stops at the end of it, so a long accordion does
     not leave the heading stranded at the top of a screen of its own. */
  .gear-page .g-head{position:sticky;top:96px}
  .gear-page .g-head .g-h{margin-bottom:0}
  .gear-page .g-body > *:first-child{margin-top:0}
  /* The column is the measure now. */
  .gear-page .g-body p{max-width:64ch}
  .gear-page .g-body .g-lede p{max-width:34ch}
}

/* The lede is the one paragraph that should look like a statement rather than
   body copy, on every width. */
.gear-page .g-lede p{font-size:clamp(1.08rem,2.5vw,1.3rem);line-height:1.35}

@media(max-width:1039px){
  .gear-page .g-head{margin-bottom:6px}
}

/* Components that were already grids keep their own columns inside the body
   column, which is now narrower — so the wide ones step down a column. */
@media(min-width:1040px){
  .gear-page .g-wrap--cols .g-prizes{grid-template-columns:1fr 1fr}
  .gear-page .g-wrap--cols .g-judges{grid-template-columns:1fr 1fr}
  .gear-page .g-wrap--cols .g-bill li{grid-template-columns:130px 1fr}
  .gear-page .g-wrap--cols .g-defs > div{grid-template-columns:170px 1fr}
}

/* The scorecard in one line on the main page. The full breakdown lives on the
   judging page; this is here so nobody has to leave to find out what is being
   judged before deciding whether to enter. */
.gear-page .g-score-line{
  display:flex;flex-wrap:wrap;gap:6px 10px;
  margin:14px 0 16px;max-width:none;
  font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;
}
.gear-page .g-score-line span{
  border:var(--g-rule-thin) solid currentColor;
  padding:6px 10px;
}
.gear-page .g-part--dark .g-score-line span{color:var(--g-yellow)}

/* --- Compete: tighter rhythm, and a second real button ------------------- */

/* The steps carried the section's spacing twice: their own gap plus the
   paragraph margins around them. */
.gear-page #compete .g-steps--named{margin:14px 0 20px;gap:14px}
.gear-page #compete .g-h3{margin-top:26px;margin-bottom:0}
.gear-page #compete p{margin-bottom:12px}
.gear-page #compete .g-note{margin:18px 0 16px}

.gear-page .g-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0;max-width:none}

/* The judging rules are a destination, not a footnote, so they get a button
   rather than an underlined line of small print. Outlined, so the disabled
   primary button next to it still reads as the main action. */
.gear-page .g-btn--ghost-light{
  background:transparent;color:var(--g-yellow);
  border:var(--g-rule-thin) solid var(--g-yellow);
  text-decoration:none;
}
.gear-page .g-btn--ghost-light:hover,
.gear-page .g-btn--ghost-light:focus-visible{
  background:var(--g-yellow);color:var(--g-ink);
}

/* --- Compete: the photograph runs the height of the section ------------- */

@media(min-width:920px){
  /* Stretch rather than start, so the picture column can take the height the
     copy column sets. */
  .gear-page .g-split{align-items:stretch}
  .gear-page .g-shot--side{
    position:static;        /* was sticky, which needs a fixed height */
    height:100%;
    aspect-ratio:auto;
    min-height:100%;
  }
  .gear-page .g-shot--side img{height:100%;width:100%;object-fit:cover}
}

/* --- Hero: one line of promises, then centred details ------------------- */

@media(min-width:1000px){
  /* Four short lines in two columns left a hole in the middle of the hero.
     On a wide screen they fit on one line and read as a single statement. */
  .gear-page .g-hero .g-spine--hero{
    display:flex;flex-wrap:nowrap;justify-content:space-between;
    gap:0 18px;margin-bottom:30px;
  }
  .gear-page .g-hero .g-spine--hero li{
    font-size:clamp(.95rem,1.45vw,1.3rem);
    white-space:nowrap;
  }

  /* Everything under the rule is event detail rather than a pitch, so it
     centres as a block: date, city, facts and the ticket button on one axis. */
  .gear-page .g-hero .g-when{justify-content:center;text-align:center}
  .gear-page .g-hero .g-facts{text-align:center}
  .gear-page .g-hero .g-hero__cta{display:flex;justify-content:center}
}

/* Cascade trap, fourth of its kind on this project: .g-when and .g-facts are
   paragraphs, so `.gear-page p{max-width:62ch}` (0,1,1) outranked their own
   `max-width:none` (0,1,0) and the hero rule stopped two thirds across. */
.gear-page .g-when,
.gear-page .g-facts,
.gear-page .g-hero__cta{max-width:none}

/* The stall route from the market line in "What is happening". */
.gear-page .g-bill__meta a{color:inherit;border-bottom:1px solid currentColor;text-decoration:none}
.gear-page .g-bill__meta a:hover{color:var(--g-ink)}

/* A button inside an accordion panel needs air above it. */
.gear-page .g-acc--light .g-btn{margin-top:4px}

/* --- Venue, run of show, and times on the bill -------------------------- */

.gear-page .g-venue{
  font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;
  margin:0 0 14px;max-width:none;
}
@media(min-width:1000px){.gear-page .g-hero .g-venue{text-align:center}}

/* The time leads the tag, because "when" is the question the bill answers. */
.gear-page .g-bill__tag{display:block}
.gear-page .g-bill__tag span{
  display:block;margin-top:3px;
  font-size:.74rem;letter-spacing:.1em;opacity:.62;
}

.gear-page .g-run{
  list-style:none;margin:22px 0 0;padding:0;
  border-top:var(--g-rule) solid var(--g-ink);
}
.gear-page .g-run li{
  display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline;
  padding:13px 0;border-bottom:var(--g-rule-thin) solid rgba(11,11,4,.18);
  font-size:.98rem;
}
.gear-page .g-run li:last-child{border-bottom:0}
.gear-page .g-run span{
  font-family:var(--g-display);font-size:1.05rem;line-height:1;
  min-width:76px;
}

.gear-page .g-end__where{
  font-family:var(--g-caps);text-transform:uppercase;letter-spacing:.14em;
  font-size:.86rem;color:rgba(52,252,52,.7);margin:4px 0 0;max-width:none;
}

/* Prices, in the closing block. Three numbers people scan before they decide. */
.gear-page .g-price{
  list-style:none;margin:0 0 26px;padding:0;
  display:grid;gap:12px;grid-template-columns:1fr;max-width:none;
}
@media(min-width:760px){.gear-page .g-price{grid-template-columns:repeat(3,1fr);gap:16px}}
.gear-page .g-price li{
  border-top:var(--g-rule-thin) solid rgba(52,252,52,.45);
  padding-top:12px;color:#EDEDD8;font-size:.92rem;
  font-family:var(--g-caps);text-transform:uppercase;letter-spacing:.06em;
}
.gear-page .g-price strong{
  display:block;font-family:var(--g-display);font-weight:400;
  letter-spacing:0;font-size:clamp(1.5rem,4.5vw,2rem);line-height:1;
  color:var(--g-yellow);margin-bottom:5px;
}
.gear-page .g-price span{display:block;opacity:.66;letter-spacing:.04em;font-size:.78rem;margin-top:3px}

/* In the closing block `.gear-page .g-end .g-btn` (0,3,0) outranks
   `.gear-page .g-btn--ghost-light` (0,2,0), so the live stall button came out
   as a filled slab among two outlined ones. Match the specificity. */
.gear-page .g-end .g-btn--ghost-light{
  background:transparent;color:var(--g-yellow);
  border:var(--g-rule-thin) solid var(--g-yellow);
}
.gear-page .g-end .g-btn--ghost-light:hover,
.gear-page .g-end .g-btn--ghost-light:focus-visible{
  background:var(--g-yellow);color:var(--g-ink);
}

/* Same trap again: .g-end__cta is a <p>, so the 62ch measure capped the button
   row at about 500px and pushed the third button onto its own line. */
.gear-page .g-end__cta,
.gear-page .g-cta-row,
.gear-page .g-price{max-width:none}

/* A button row straight after an accordion needs air, or it reads as another
   row of the list. */
.gear-page .g-acc + .g-cta-row{margin-top:28px}
.gear-page .g-cta-row + .g-note{margin-top:12px}

/* The prices moved up into "What is happening", which is a light ground: the
   closing block's yellow-on-black treatment had to become ink-on-light. */
.gear-page #whats-on .g-price{margin:22px 0 10px}
.gear-page #whats-on .g-price li{
  border-top:var(--g-rule) solid var(--g-ink);
  color:var(--g-ink);
}
.gear-page #whats-on .g-price strong{color:var(--g-ink)}
.gear-page #whats-on .g-price span{opacity:.6}

/* --- Price strip, straight under the hero ------------------------------- */

/* The prices are the thing people scroll looking for, so they sit one screen
   from the top rather than at the foot of the page. A thin band, not a
   section: it answers a question and gets out of the way. */
.gear-page .g-strip{
  background:var(--g-ink);
  padding-block:26px;
}
.gear-page .g-strip .g-price{margin:0}
.gear-page .g-strip .g-price li{border-top-color:rgba(52,252,52,.5)}

/* --- GEAR Swap terms ---------------------------------------------------- */

.gear-page .g-terms{list-style:none;margin:0;padding:0;counter-reset:t}
.gear-page .g-terms > li{
  padding:26px 0;
  border-bottom:var(--g-rule-thin) solid rgba(11,11,4,.18);
  max-width:72ch;
}
.gear-page .g-terms > li:first-child{padding-top:0}
.gear-page .g-terms > li:last-child{border-bottom:0}
.gear-page .g-term__h{
  font-family:var(--g-caps);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(.95rem,2.6vw,1.1rem);line-height:1.2;
  margin:0 0 10px;display:flex;gap:14px;align-items:baseline;
}
.gear-page .g-term__h span{
  font-family:var(--g-display);font-weight:400;letter-spacing:0;
  font-size:1rem;opacity:.5;flex:0 0 auto;min-width:30px;
}
.gear-page .g-terms p{font-size:.96rem;margin:0 0 8px;max-width:none}
.gear-page .g-terms p:last-child{margin-bottom:0}

/* The swap section runs over a photograph, so its steps take the light set. */
.gear-page #swap .g-steps__n{color:var(--g-yellow)}
.gear-page #swap .g-stamp{border-top-color:var(--g-yellow);color:var(--g-yellow)}

/* Sub-heads over a photograph were inheriting ink on ink: the photo sections
   set .g-h but never .g-h3, which only showed up once a photo section had one. */
.gear-page .g-sec--photo .g-h3{color:var(--g-yellow)}
.gear-page .g-sec--photo .g-lede{margin-bottom:16px}

/* Legal links in the closing block. */
.gear-page .g-legal{
  font-family:var(--g-caps);text-transform:uppercase;letter-spacing:.1em;
  font-size:.72rem;margin:0 0 10px;color:rgba(52,252,52,.55);max-width:none;
}
.gear-page .g-legal a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.gear-page .g-legal a:hover{color:var(--g-yellow)}