/* ─── layout-defence.css overrides ──────────────────────────────────────────
   layout-defence.css (linked last) matches on class-name substrings:
   [class*="section"], [class*="card"], [class*="nav"], [class*="row"]. On this
   site those also catch pieces that are not sections, cards or navs in its
   sense (.section-head, the .pcard-* parts of the bench mock-up, .btn-nav-cta),
   and it was turning rows into columns and adding 80px of padding to headings.
   These put each one back. `body` raises the specificity above the defence's,
   which is what lets this file load before it. Measured by diffing computed
   styles with the defence on and off: add a line here if that diff grows. */

/* Sections keep the site's own rhythm (still symmetric, as the defence wants). */
.section { --section-pad: 92px; }
@media (max-width: 600px) { .section { --section-pad: 64px; } }

/* A heading block and its intro are not sections. */
body .section-head,
body .section-sub { padding-block: 0; }

/* The sign-up page clears the fixed nav with its top padding. */
body .signup-section { padding-top: calc(var(--nav-h) + 56px); }
@media (max-width: 600px) { body .signup-section { padding-top: calc(var(--nav-h) + 28px); } }

/* The bench mock-up's profile card is built from rows, not a column stack. */
body .pcard-top,
body .pcard-skills,
body .pcard-cv,
body .pcard-actions,
body .pcard-btn { flex-direction: row; }
body .pcard-avatar,
body .pcard-rows { display: grid; }
body .pcard-rows { align-items: normal; }
body .pcard-name,
body .pcard-meta,
body .pcard-status { display: block; }
body .bv-row { align-items: center; }

/* These cards are plain blocks. */
body .form-card,
body .problem-card { display: block; }

/* Nav buttons keep their own padding (the defence's safe-area rule is for the
   nav bar itself, and zeroed these). */
body .btn-nav-cta { padding-block-start: 10px; }
body .nav-burger { padding-block-start: 8px; }

/* ─── YACHTDESK REGISTER (16 Oct 2026) ───────────────────────────────
   One family: Geist at medium weight with tight tracking for headings, in
   place of the serif. Phones get bigger buttons, a 24px gutter and more
   air between sections. */
:root { --serif: 'Geist', 'Geist Fallback', system-ui, -apple-system, sans-serif; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; }
.hero h1, .page-hero h1 { letter-spacing: -0.045em; line-height: 0.98; }
.brand-name { font-weight: 600; letter-spacing: -0.03em; }
.kicker { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.02em; }

/* Menu control in caps. */
.nav-burger::after { text-transform: uppercase; letter-spacing: 0.06em; font-size: 13.5px; }

/* FAQ: every closed box at least the same height; a long question wraps
   to a second line rather than being cut off. */
.faq-item summary {
  white-space: normal; overflow: visible;
  min-height: 64px; display: flex; align-items: center;
  padding: 10px 48px 10px 20px;
}

@media (max-width: 600px) {
  .hero { padding-left: 24px; padding-right: 24px; padding-top: calc(var(--nav-h) + 72px); }
  .hero h1 { font-size: clamp(35px, 9.4vw, 50px); }
  .hero-sub { font-size: 17px; line-height: 1.6; }
  .section { padding: 88px 24px; }
  .section-head { margin-bottom: 44px; }
  .section-head h2 { font-size: clamp(32px, 9vw, 40px); }
  /* The FAQ headings are the longest on the site; one line at phone widths. */
  #faq .section-head h2 { font-size: clamp(28px, 7.7vw, 40px); }
  html body .btn-primary, html body .btn-ghost { min-height: 56px; font-size: 16px; padding: 0 24px; }
  .hero-cta { gap: 12px; }
  .faq-item summary { font-size: 15.5px; }
}

/* Bigger buttons on desktop too. */
html body .hero-cta .btn-primary, html body .hero-cta .btn-ghost { min-height: 56px; padding: 0 30px; font-size: 16.5px; border-radius: 12px; }
html body .btn-nav-cta, html body .btn-nav-cta:hover, html body .btn-login, html body .btn-login:hover { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
@media (max-width: 600px) {
  html body .hero-cta .btn-primary, html body .hero-cta .btn-ghost { min-height: 60px; font-size: 17px; border-radius: 12px; padding: 0 24px; }
}

/* Even line lengths so the intro never ends on a stub. */
.hero-sub { text-wrap: balance; }

/* FAQ list stays a readable column on every page, not the full section. */
html body .faq { max-width: 800px; margin-inline: auto; }

/* Layout gate, 23 Oct 2026. Long section intros at phone width run past
   Chromium's six-line balance limit, so the measure is trimmed a touch and
   the closing line fills out. Checked on every section intro, all pages. */
@media (max-width: 600px) {
  /* Trim on the right only, so left-aligned intros keep the heading's edge;
     centred intros (alt sections) take the trim on both sides. */
  body .section-sub { padding-inline-end: 8px; }
  body .section-alt .section-sub { padding-inline: 4px; }
  /* One FAQ answer (for-specialists, "What counts as a Microsoft specialist?")
     needs the same; a blanket rule on FAQ answers re-orphans a longer one. */
  body .faq-item[data-measure="tight"] > p { padding-inline-end: 32px; }
}

/* Footer: the mark's ink starts 23/140 of its box in (viewBox -17 -11 140 110),
   about 6px at 38px wide; pull it back so the ink sits on the text edge. */
.footer-brand .icon-mark { margin-inline-start: -6px; }

/* Hero work-type chips on phones: two per row instead of three and a stray. */
@media (max-width: 600px) {
  .work-types { max-width: 280px; margin-inline: auto; }
}

/* FAQ heading box below the two-column breakpoint: the head is a 700px box
   with centred text, so the box itself must be centred too. */
@media (max-width: 1099.98px) {
  #faq .faq-layout .section-head { margin-inline: auto; }
}