/* ============================================================
   v6 — TYPE SYSTEM + GLASS
   Albert Sans (display · body · labels) + Newsreader italic accent.
   Replaces the Gloock/Lora/Geist-Mono/Work-Sans stack: no display
   serif, no monospace labels — a single humanist-geometric family
   with tight display tracking and tracked small-cap labels.
   Glass rule: glass surfaces are rounded; paper surfaces stay sharp.
   Loads after v5-polish.css.
   ============================================================ */

/* ---------- Type: display & body ---------- */
body { font-family: var(--font-body); font-size: 1.04rem; line-height: 1.68; font-feature-settings: "kern", "liga", "calt"; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.028em; line-height: 1.06; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
.hero-vital h1 { font-size: clamp(2.7rem, 6vw, 4.8rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; margin-bottom: 1rem; }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-weight: 600; letter-spacing: -0.005em; }
.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -0.01em; }
.dek { font-weight: 400; line-height: 1.7; letter-spacing: -0.005em; }
.quote { font-family: var(--font-accent); font-style: italic; font-size: 1.25rem; line-height: 1.55; letter-spacing: -0.005em; }
.brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.2rem; }
strong { font-weight: 600; }

/* ---------- Type: labels (former monospace voice) ---------- */
.kicker, .brand small, .card-link, .read, .cat, .review-line, .quote-attr, .breadcrumb,
.article-meta, .toc h4, .footer-grid h4, .sources strong, .cat-nav a, .nav-toggle,
figcaption, .video-caption, .embed-caption, th, .award-strip, .book-bar a, .takeaways .kicker,
.hero-dots button, .in-practice .kicker, .author-box .kicker, .post-card .cat {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.kicker { font-size: .72rem; letter-spacing: .15em; margin-bottom: .9rem; }
.brand small { font-size: .58rem; letter-spacing: .18em; font-weight: 500; }
.card-link, .read { font-size: .72rem; }
.cat, .post-card .cat, .review-line, .article-meta, .breadcrumb { font-size: .68rem; letter-spacing: .12em; }
figcaption, .video-caption, .embed-caption { font-size: .68rem; letter-spacing: .1em; font-weight: 500; }
th { font-size: .68rem; letter-spacing: .1em; }
.award-strip { font-size: .66rem; letter-spacing: .14em; font-weight: 600; }
.quote-attr { font-size: .7rem; letter-spacing: .14em; }
.footer-grid h4 { font-size: .68rem; letter-spacing: .14em; }
.btn { font-family: var(--font-mono); font-weight: 600; font-size: .78rem; letter-spacing: .1em; }
.nav-menu a { font-weight: 500; font-size: .9rem; letter-spacing: -0.005em; }
.stat b { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: .35rem; }
.stat span { font-size: .86rem; line-height: 1.5; }
.card .kicker, .post-card .cat { letter-spacing: .13em; }
.small { letter-spacing: 0; }
.cur-ring, .cur-dot { font: inherit; }
html.sc-on [data-sc="kicker"] { letter-spacing: calc(.15em + (1 - min(var(--sc, 0) * 2.5, 1)) * .2em); }
html.sc-on [data-sc="attr"] { letter-spacing: calc(.14em + (1 - var(--e)) * .12em); }
html.sc-on [data-sc="award"] { letter-spacing: calc(.14em + (1 - var(--e)) * .08em); }
@media (prefers-reduced-motion: no-preference) {
  .hero-vital .kicker { letter-spacing: .4em; }
  @keyframes hv-kicker { to { opacity: 1; transform: none; letter-spacing: .15em; } }
}

/* ---------- Service directory (home) ---------- */
.svc-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: 2.2rem; align-items: start; }
@media (max-width: 960px) { .svc-groups { grid-template-columns: 1fr; } }
.svc-group h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.svc-group .kicker { margin-bottom: .5rem; }
.svc-list { list-style: none; margin: 0; }
.svc-list li { border-top: 1px solid var(--hairline); }
.svc-list li:last-child { border-bottom: 1px solid var(--hairline); }
.svc-list a { display: block; padding: .85rem .6rem .85rem 0; text-decoration: none; color: var(--ink); background: none; position: relative; transition: padding-left var(--t-fast) var(--e-out), color var(--t-fast) ease; }
.svc-list a strong { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -0.01em; }
.svc-list a span { display: block; font-size: .86rem; opacity: .72; line-height: 1.5; margin-top: .15rem; }
.svc-list a::after { content: "→"; position: absolute; right: .2rem; top: .95rem; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--e-out); }
.svc-list a:hover { padding-left: .5rem; color: var(--navy); }
.svc-list a:hover::after { opacity: 1; transform: none; }
.svc-note { margin-top: 1.2rem; }

/* ---------- Services dropdown → two-column glass panel ---------- */
@media (min-width: 901px) {
  .sub-menu { min-width: 600px; padding: .8rem .6rem; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 .6rem; left: -1.2rem; }
  .has-sub .sub-menu { opacity: 0; transform: translateY(8px); pointer-events: none; }
  .has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity: 1; transform: none; pointer-events: auto; }
  .sub-menu a { padding: .55rem .9rem; font-size: .88rem; border-radius: 8px; transition: background var(--t-fast) ease, color var(--t-fast) ease; }
  .sub-menu a:hover { background: rgba(255,255,255,.07); color: var(--gold-light); }
}

/* ============================================================
   GLASS — Apple-adjacent frosted surfaces, used where there is
   something to see through: over imagery, over navy gradients,
   and for floating UI. Paper cards stay sharp and opaque.
   ============================================================ */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  /* floating chrome */
  .site-header {
    background: rgba(12,23,40,.72);
    -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .site-header.scrolled { background: rgba(12,23,40,.82); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
  .sub-menu {
    background: rgba(17,31,52,.78);
    -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px);
    border: 1px solid rgba(255,255,255,.1); border-top-color: rgba(255,255,255,.18);
    border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45);
  }
  @media (max-width: 900px) {
    .nav-menu { background: rgba(12,23,40,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
    .sub-menu { background: transparent; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }
  .book-bar {
    background: rgba(12,23,40,.78);
    -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
    border-top-color: rgba(255,255,255,.1);
  }

  /* surfaces on navy */
  .dark .card, .dark .guide-box, .dark .post-card {
    background: rgba(244,237,222,.045);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(244,237,222,.13); border-top-color: rgba(255,255,255,.22);
    border-radius: 12px;
  }
  .dark .card:hover { border-color: rgba(201,167,112,.7); background: rgba(244,237,222,.07); }
  .dark .answer, .takeaways {
    background: rgba(244,237,222,.05);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(244,237,222,.12); border-left: 3px solid var(--gold-light); border-radius: 12px;
  }
  .award-strip { background: rgba(12,23,40,.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: .8rem 0; }
  .award-strip span {
    display: inline-block; padding: .42rem .95rem; border-radius: 999px;
    background: rgba(255,255,255,.045); border: 1px solid rgba(201,167,112,.32);
  }
  .award-strip .wrap { gap: .5rem .7rem; }

  /* secondary buttons on dark heroes become glass */
  .hero .btn--gold, .hero-vital .btn--gold, .hero-slideshow .btn--gold, .dark .btn--gold {
    background: rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(201,167,112,.7);
  }
  .video .play {
    background: rgba(17,31,52,.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: 12px;
  }
  .video:hover .play { background: rgba(176,133,58,.85); }

  /* soft frost on paper — restrained */
  .answer { background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(33,36,42,.07); border-left: 3px solid var(--navy); border-radius: 10px; }
  .toc { background: rgba(255,255,255,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(33,36,42,.08); border-radius: 12px; padding: 1rem 1.1rem; }
  .cat-nav a { border-radius: 999px; background: rgba(255,255,255,.4); }
  .cat-nav a:hover { background: var(--navy); }
  .v5-veil { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* buttons: hairline refinement (Albert Sans is wider than mono — a touch more room) */
.btn { padding: .95rem 1.75rem; }
.nav-menu .btn { padding: .55rem 1.05rem; }