/* Kaizen Men's Weekend - the single brand layer (theme_v2).
   Linked by every page AFTER /assets/site.css, so it re-pins site.css's tokens and adds the
   handful of per-client rules the tokens cannot express.

   Palette source: the LIVE site's own values, sampled from source-inventory/index.html.
   Ground was pure #000 and the REGISTER button #E0240F. Ground is warmed one step off absolute
   black so large fields do not crush; the accent is kept exactly. */

:root {
  /* --- ground + type ------------------------------------------------------ */
  --surface: #0B0B0C;          /* body background */
  --bg: #141417;               /* .bg-soft bands */
  --ink: #EDEBE7;              /* body text: warm off-white, not #fff */
  --muted: #9C978F;
  --line: #2B2B2F;

  /* --- band colors -------------------------------------------------------- */
  --navy: #17161A;             /* .bg-navy bands */
  --navy-deep: #0B0B0C;
  --navy-2: #232227;
  --on-navy: #EDEBE7;

  /* --- accent: the real REGISTER red -------------------------------------- */
  --accent: #E0240F;
  --accent-deep: #B31B09;
  --amber: #E0240F;            /* site.css drives .btn-amber (the primary CTA) off --amber */
  --amber-deep: #B31B09;

  /* --- shape: this brand is not soft -------------------------------------- */
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: none;
  --shadow-card: none;
  --btn-shadow: none;

  /* --- type --------------------------------------------------------------- */
  --head: "Archivo", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

/* The primary CTA. site.css computes the label as color-mix(--amber 26%, #000), which on a red
   button is dark-red-on-red and does not clear WCAG AA. Force white. */
.btn-amber { color: #fff; font-weight: 700; letter-spacing: .01em; }
.btn-amber:hover { background: var(--amber-deep); color: #fff; }

/* Ghost button on a dark ground: site.css assumes a light page behind it. */
.btn-ghost { color: var(--ink); border-color: #3A393F; }
.btn-ghost:hover { background: #1D1C21; border-color: #55535B; color: #fff; }

/* Headings: Archivo carries the existing heavy KAIZEN DOJO wordmark weight.
   site.css sets `h1,h2,h3,h4 { color: var(--navy) }`, and --navy is ALSO the .bg-navy band color.
   On a dark site that resolves to near-black headings on a near-black ground, i.e. invisible.
   Headings take --ink explicitly; --navy stays free to be the band color. */
h1, h2, h3, h4, .logo { font-family: var(--head); letter-spacing: -0.015em; color: var(--ink); }
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }
.section-head p, .section-sub { color: var(--muted); }

/* Header. site.css hardcodes `header.site { background:#fff }`. */
header.site { background: rgba(11, 11, 12, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header.site .wordmark, header.site .monogram { color: var(--ink); }
header.site nav.main a { color: #C9C5BE; font-weight: 500; }
header.site nav.main a:hover, header.site nav.main a[aria-current="page"] { color: #fff; }
header.site nav.main a.btn { color: #fff; }

/* Legal and post-submit pages are top-level URLs (the rebrand preserves /privacy-policy/ and
   /terms-of-service/ exactly), and navModel puts every top-level page in the menu. They belong in
   the footer, which already links them, and in sitemap.html. display:none also drops them from the
   accessibility tree, so this is a real removal rather than a visual-only hide. */
header.site nav.main > a[href="/privacy-policy/"],
header.site nav.main > a[href="/terms-of-service/"],
header.site nav.main > a[href="/thank-you/"] { display: none; }

/* Footer sits on --navy-deep, which is the same value as the page ground. Give it an edge. */
footer.site { border-top: 1px solid var(--line); }

/* The footer template renders one column per nav hub: an <h3> for the hub, then its children, or a
   repeat of the hub link when it has none. This site is deliberately flat (8 top-level pages, no
   hub/child tree), so every column came out as a heading above an identical link: "WHAT TO EXPECT /
   What to Expect", eight times. Drop the redundant headings and let the links flow as one list. */
footer.site .cols { display: flex; flex-wrap: wrap; gap: .35rem 2.75rem; }
footer.site .cols > div:first-child { flex: 0 0 100%; margin-bottom: 1.75rem; }
footer.site .cols h3 { display: none; }
footer.site .cols > div:not(:first-child) a { padding: .3rem 0; }

/* Value-prop check marks default to a pale tint circle, which is the one bright object on a dark
   page and pulls the eye off the copy. */
.value .vmark {
  background: rgba(224, 36, 15, .14);
  border: 1px solid rgba(224, 36, 15, .38);
  color: var(--accent);
}

/* Surfaces that site.css paints white by default. */
.card, .value, .step, .quote, .compare__col {
  background: #141417;
  border-color: var(--line);
  color: var(--ink);
}

/* FAQ accordion. site.css colours `.faq summary` with --navy, the same near-black as the band
   token, so every collapsed question was invisible and the section read as a stack of empty rows. */
.faq { border-top-color: var(--line); }
.faq details { border-bottom-color: var(--line); }
.faq summary { color: var(--ink); }
.faq summary:hover { color: #fff; }
.faq details p { color: #C3BFB8; }
.card h3, .value h3, .step h3, .compare__col h3 { color: var(--ink); }
.card p, .value p, .step p { color: var(--muted); }

/* The final CTA band earns the accent; everything above it stays quiet. */
.cta-band {
  background: linear-gradient(100deg, #2A0805, #0B0B0C 70%);
  border-top: 3px solid var(--accent);
}

/* Long-form reading surface. /what-to-expect/, /faq/ and the legal pages are genuinely long, and
   long reversed-out body copy is measurably harder work. Widen the measure and lift the line. */
.prose, .prose--longform { color: var(--ink); }
.prose p, .prose li { color: #D8D5CF; }
.prose strong { color: #FFF; font-weight: 650; }
/* Section dividers belong to LONG-FORM bodies only. `.prose` is also used by the contact page's
   "what happens next" column, where a rule above the heading reads as a stray line. */
.prose--longform h2 { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); }
.prose--longform h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose a { color: #FF7A63; text-underline-offset: .18em; }
.prose a:hover { color: #FFA793; }

/* Trust strip: the four hard facts under the hero. */
.trust .num { font-family: var(--head); font-weight: 800; color: var(--ink); }
.trust .lbl { color: var(--muted); }

/* The "what it is NOT" column should not read as a second recommendation. */
.compare__col:last-child .checks li::before { color: var(--muted); }

/* IMAGE SAFETY (the always-on veto). Global rule plus a real per-slot rule, so no image slot
   ever ships as a bare unstyled <img>. */
img { max-width: 100%; height: auto; }
.hero > img.bg { object-fit: cover; width: 100%; height: 100%; }
.split img,
.mcard img,
.svc-media img,
.gallery img,
.ba__item img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  display: block;
}

/* The hero photograph. Round 1 buried it at 38% under a flat scrim because it was a picture of
   empty chairs. The round 2 frame is twenty five men with their arms around each other and is worth
   actually seeing, so the image runs near full strength and the scrim is weighted LEFT: it protects
   the copy column and lets the right side of the photograph stay legible. */
.hero { position: relative; }
.hero > img.bg { opacity: .82; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,12,.94) 0%, rgba(11,11,12,.86) 38%, rgba(11,11,12,.36) 72%, rgba(11,11,12,.30) 100%),
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.20) 45%, rgba(11,11,12,.72) 100%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .hero > img.bg { opacity: .55; }
  .hero::after { background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.90) 100%); }
}
.hero .wrap { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hero .lede { color: #D8D5CF; }

/* Header + footer on a dark ground. */
.site-header, .site-footer { background: #0B0B0C; border-color: var(--line); }
.site-footer, .site-footer p, .site-footer li { color: var(--muted); }
.site-footer a { color: #C9C5BE; }
.site-footer a:hover { color: #fff; }

/* EVENT PANEL — the single block that carries the facts, the deadline and the CTA together.
   Built as one bordered card so it reads as a discrete object on the page: the thing a man
   screenshots and forwards to his wife, rather than three sections he has to scroll between. */
.eventpanel { background: var(--bg); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.eventpanel__card {
  max-width: 940px;
  margin: 0 auto;
  background: #0E0E10;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.eventpanel__eyebrow {
  margin: 0 0 .55rem;
  font-family: var(--head); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.eventpanel h2 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.eventpanel__intro { margin: 0 auto 2.25rem; max-width: 56ch; color: var(--muted); }

/* Facts: a real <dl>, three across, each fact its own labelled cell. */
.eventpanel__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem; margin: 0 0 2.25rem; text-align: left;
}
.eventpanel__fact {
  padding: 1.15rem 1.25rem;
  background: #141417;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.eventpanel__fact dt {
  font-family: var(--head); font-weight: 600; font-size: .7rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.eventpanel__fact dd {
  margin: 0;
  font-family: var(--head); font-weight: 700; font-size: 1.06rem;
  color: var(--ink); line-height: 1.3;
}
.eventpanel__factnote {
  display: block; margin-top: .4rem;
  font-family: var(--body); font-weight: 400; font-size: .86rem;
  line-height: 1.5; color: var(--muted);
}

/* Day-by-day schedule. The hours are the single thing a man has to arrange his life around, so
   they get their own block with real hierarchy rather than a sub-note on a fact cell. A day whose
   start time is not yet published is visibly marked, because stating the gap is more useful than
   guessing and it is the whole argument of this site in miniature. */
.eventsched {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  margin-bottom: 2rem;
  text-align: left;
}
.eventsched__heading {
  margin: 0 0 1.1rem;
  font-family: var(--head); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  text-align: center;
}
.eventsched__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.eventsched__day {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 10rem) minmax(0, 1fr);
  gap: .35rem 1.25rem;
  align-items: baseline;
  padding: .9rem 1.15rem;
  background: #141417;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.eventsched__date { font-family: var(--head); font-weight: 700; color: var(--ink); font-size: 1rem; }
.eventsched__time {
  font-family: var(--head); font-weight: 700; font-size: 1rem;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.eventsched__note { font-size: .88rem; line-height: 1.5; color: var(--muted); }

/* A day we cannot yet state honestly is muted rather than dressed up as confirmed. */
.eventsched__day--tbc { border-left-color: #4A4A50; }
.eventsched__day--tbc .eventsched__time {
  color: var(--muted); font-weight: 600; font-style: italic;
  font-family: var(--body); font-size: .92rem;
}
.eventsched__foot {
  margin: 1.1rem 0 0;
  font-size: .86rem; line-height: 1.6; color: var(--muted);
  text-align: center;
}

@media (max-width: 720px) {
  .eventsched__day { grid-template-columns: 1fr; gap: .3rem; }
  .eventsched__heading, .eventsched__foot { text-align: left; }
}

/* Deadline: words first, clock underneath as support. */
.eventpanel__deadline {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0; margin-bottom: 2rem;
}
.eventpanel__deadlinelabel {
  margin: 0 0 .8rem;
  font-family: var(--head); font-weight: 700; font-size: 1.02rem; color: var(--ink);
}
.countdown__clock { display: flex; justify-content: center; gap: 2.25rem; }
.countdown__unit { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.countdown__unit b {
  font-family: var(--head); font-weight: 800; font-size: 1.55rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.countdown__unit i {
  font-style: normal; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: #6E6A64; margin-top: .2rem;
}
.eventpanel__deadlinenote { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); }

.eventpanel__actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.eventpanel__fine {
  margin: 1.5rem auto 0; max-width: 62ch;
  font-size: .82rem; line-height: 1.6; color: #7C7871;
}

@media (max-width: 860px) {
  .eventpanel__facts { grid-template-columns: 1fr; gap: .8rem; }
  .countdown__clock { gap: 1.6rem; }
}

/* ============================================================================
   ROUND 2: layout corrections (operator review)
   ========================================================================= */

/* ONE card padding for every boxed element. site.css ships four different values because these were
   never meant to be the same object: .card 1.5rem, .compare__col 1.6rem, .value 0.5rem, .step none.
   The brand layer gave .value and .step a card background and border, which exposed the mismatch as
   visibly cramped boxes next to roomy ones. Pin one token and apply it everywhere. */
:root { --card-pad: 1.75rem; }
.card,
.compare__col,
.value,
.step { padding: var(--card-pad); }

/* Process steps ("How the three days are shaped") were left-aligned while every other card grid on
   the page is centered. Center the copy and the numbered badge with it. */
.step { text-align: center; display: flex; flex-direction: column; align-items: center; }
.step .n { margin-left: auto; margin-right: auto; }
.step h3 { font-size: 1.08rem; }
.step p { text-align: center; }

/* Three days = three steps, but .steps is a hard 4-column grid, so they stretched across an unused
   fourth track. Let the grid size to its content and center the row. */
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }

/* Location chips ("Men come from across Los Angeles"): same problem, plus site.css hardcodes
   `background:#fff` on the chip, which was a white pill on a black page. */
.areas {
  grid-template-columns: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
.areas .city {
  background: #141417;
  border-color: var(--line);
  color: var(--ink);
  padding: .8rem 1.15rem;
}
.areas .city .pin { color: var(--accent); }

/* Value cards: the mark is a real object now that the card has room around it. */
.value { justify-content: flex-start; gap: .55rem; }
.value .vmark { width: 52px; height: 52px; }
.value .vmark svg { width: 26px; height: 26px; }

/* Comparison columns read tighter than the cards beside them. */
.compare__col h3 { color: var(--ink); }

/* ---- Wordmark -----------------------------------------------------------
   Operator: drop the "K" monogram chip, set the wordmark in full capitals, give it more presence.
   The brandmark is the no-logo fallback, so this IS the logo until a real asset lands in
   client-assets/logo/. */
.brandmark .monogram { display: none; }
.brandmark { gap: 0; }
.brandmark .wordmark {
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.28rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  line-height: 1;
}
footer.site .foot-logo {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.35rem;
}
@media (max-width: 520px) { .brandmark .wordmark { font-size: 1.02rem; letter-spacing: .03em; } }

/* Benefit strip (replaces the event-facts trust bar). Same markup, a different job, so most of the
   stat styling has to be undone: site.css builds a 5-column grid of big tabular NUMBERS with a tiny
   ALL-CAPS label under each. Here the big slot holds a short phrase and the label holds a full
   sentence, and uppercasing a sentence makes it unreadable. */
.trust { border-top: 3px solid var(--accent); }
.trust .wrap {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding: 2.75rem var(--space);
  align-items: start;
}
.trust .stat { max-width: 34ch; margin: 0 auto; }
.trust .num {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  font-variant-numeric: normal;
  margin-bottom: .55rem;
}
.trust .lbl {
  font-size: .95rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-top: 0;
}
@media (max-width: 860px) {
  .trust .wrap { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.25rem var(--space); }
}

/* ============================================================================
   ROUND 3: symbol imagery
   ========================================================================= */

/* About band with the Kaizen glyph. The brand's name IS a symbol, so 改善 is set as LIVE TYPE
   rather than generated as an image: image models render CJK unreliably, and my own photo brief
   bans text in images. As type it is correct, crisp at any size, and free to load. It sits behind
   the copy as a watermark and is aria-hidden, because the meaning is in the prose.

   site.css sets `.about-band { max-width:760px; text-align:center }`, which is right for a single
   centered paragraph and wrong for a two-column band: it squeezed the heading to three lines and
   centre-set body copy beside an image. The media variant overrides both. */
.about-band--media {
  max-width: 1080px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
}
.about-band--media .about-band__copy { position: relative; }
.about-band--media h2 { margin-bottom: .7rem; }
.about-band--media p { margin: 0; }

/* The glyph is a watermark, not a graphic element: it must never fight the words in front of it.
   Anchored to the top-left of the copy column, sized off the container, and low enough in contrast
   that it reads as texture. */
.about-band__glyph {
  position: absolute;
  top: -.34em;
  left: -.16em;
  z-index: 0;
  font-size: clamp(6rem, 11vw, 10rem);
  line-height: 1;
  font-weight: 700;
  color: var(--accent);
  opacity: .07;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.about-band--media h2,
.about-band--media p { position: relative; z-index: 1; }

.about-band__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

@media (max-width: 860px) {
  .about-band--media { grid-template-columns: 1fr; gap: 1.75rem; }
  .about-band__glyph { font-size: 6.5rem; opacity: .06; }
}

/* Symbol frames are shot dark on purpose so they sit on the page rather than punching a bright
   hole in it. Give them a little more contrast and a hairline so they read as deliberate objects
   rather than as underexposed photographs. */
.split img, .about-band__img {
  border: 1px solid var(--line);
  filter: saturate(1.04) contrast(1.03);
}