/* ==========================================================================
   Public secondary pages · assets/css/public-page.css · v3 (POLISH-REVIEW #2, PSB autopilot 5:44am ET)
   v1: the 404 (body.pub-nf). v2: legal.html (body.pub-legal), visual only, same header + cover; reading panel below.
   v3: 404 chat lane at 769-1199px (PSB autopilot 6:21am ET).
   The 404 in the approved Front Door design: sand page, the homepage's cobalt cover + cobalt glass header,
   type D (display 560 for the title, UI 500 for buttons), gold edges. Scoped to body.pub-nf (404.html) and body.pub-legal (legal.html).
   Paint, type and the card's outer margin only. No new motion (the balloon's existing drift is untouched),
   nothing animates blur. The footer keeps front-door-footer.css; the résumé modal and its form are not
   selected by anything here. Tokens: design-system/tokens.css (not forked); --nl-* come from system.css.
   ========================================================================== */
html body:is(.pub-nf, .pub-legal) { background: var(--sand-200); }

/* header: the homepage's cobalt glass (front-door.css U1), cobalt fill once scrolled over sand */
html body:is(.pub-nf, .pub-legal) #main-navbar .container {
  background: var(--pub-glass-cobalt), rgb(7 24 154 / .78);
  -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%);
  border: 0; border-radius: var(--pub-r-card);
  box-shadow: var(--pub-e3), inset 0 0 0 1px rgb(255 255 255 / .2), inset 0 1px 0 var(--nl-gold-edge);
}
html body:is(.pub-nf, .pub-legal) #main-navbar .container::before { opacity: 0; }
html body:is(.pub-nf, .pub-legal) #main-navbar .container::after { background: var(--pub-sheen); opacity: .16; }
html body:is(.pub-nf, .pub-legal) #main-navbar.scrolled .container { background: var(--pub-glass-cobalt), rgb(7 24 154 / .84); }
html body:is(.pub-nf, .pub-legal) #main-navbar :focus-visible { outline: var(--pub-focus-ring-inverse); outline-offset: var(--pub-focus-offset); }
html body:is(.pub-nf, .pub-legal) #main-navbar .nav-dropdown-menu :focus-visible { outline: var(--pub-focus-ring); }
html.glass-lite body:is(.pub-nf, .pub-legal) #main-navbar .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cobalt-900); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html body:is(.pub-nf, .pub-legal) #main-navbar .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cobalt-900); }
}

/* the card: /work's cobalt cover material, as wide as the footer under it, gold foot hairline */
html body.pub-nf #not-found-header,
html body.pub-legal #legal-header {
  position: relative; isolation: isolate; overflow: hidden;
  width: auto; max-width: none; margin: 12px; border-radius: var(--pub-r-panel);
  background: url("/assets/images/grain-soft.png") 0 0 / 64px 64px, var(--pub-light-key),
              linear-gradient(180deg, var(--cobalt-800), var(--cobalt-900));
  box-shadow: var(--pub-e3);
}
html body.pub-nf #not-found-header::after,
html body.pub-legal #legal-header::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent); opacity: .7;
}
html body.pub-nf #not-found-title,
html body.pub-legal #legal-title {
  font-family: var(--pub-font-display); font-weight: 560; letter-spacing: -.025em;
  font-size: clamp(2.375rem, 1.86rem + 2.1vw, 3.75rem); line-height: 1.04;   /* the homepage name step, 38 -> 60 */
  max-width: 15.5em; margin-inline: auto; text-wrap: balance; color: var(--pub-inverse-text);
}

/* buttons: the homepage hero pair (48px, 24px sides, UI 15/500). Primary = sand face + ink text; the rest = cobalt glass */
/* v3 · chat lane, 769-1199px. The chat preview card is parked at top:112px, right:32px, 150px wide (404.html, bf5439d), and the
   page scrolls ~95-140px, so the one-line title and the "Chat with Shah Ai" button ran under it. Reserve the card's column on
   both sides (symmetric, so the copy stays centred): 182px card + 16px clear - 12px cover margin = 186px. The title and buttons
   wrap inside; nothing else moves. From 1200px the title clears the card by itself (21px at 1200). Layout only, no motion. */
@media (min-width: 769px) and (max-width: 1199.98px) {
  html body.pub-nf #not-found-header > .container { padding-inline: 186px; }
}
html body.pub-nf .nf-links { gap: 12px 16px; }
html body.pub-nf .nf-links .btn {
  box-sizing: border-box; height: 48px; min-height: 48px; min-width: 0; width: auto; padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pub-r-chip);
  font-family: var(--pub-font-ui); font-size: var(--pub-t-ui); font-weight: 500; line-height: 1;
  letter-spacing: -.005em; text-transform: none; white-space: nowrap; text-shadow: none;
}
html body.pub-nf .nf-links .btn-primary {
  background: var(--nl-sand-mat); background-image: none; border: 1px solid var(--nl-sand-rule); color: var(--pub-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px var(--nl-gold-edge), 0 6px 18px -6px rgb(3 11 90 / .45);
}
html body.pub-nf .nf-links .btn-white-outline {
  background: rgb(255 255 255 / .12); background-image: none; border: 1px solid rgb(255 255 255 / .35); color: var(--pub-inverse-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28);
}
html body.pub-nf .nf-links .btn:focus-visible { outline: var(--pub-focus-ring-inverse); outline-offset: var(--pub-focus-offset); }
@media (hover: hover) and (pointer: fine) {   /* colour only, same 320ms ease as the homepage buttons */
  html body.pub-nf .nf-links .btn { transition: background-color var(--pub-dur-hover) var(--pub-ease), border-color var(--pub-dur-hover) var(--pub-ease); }
  html body.pub-nf .nf-links .btn-primary:hover { background: var(--white); border-color: rgb(194 164 140 / .7); color: var(--pub-text); }
  html body.pub-nf .nf-links .btn-white-outline:hover { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .5); color: var(--pub-inverse-text); }
}
@media (max-width: 600px) {
  html body.pub-nf .nf-links { flex-direction: column; align-items: center; }
  html body.pub-nf .nf-links .btn { width: min(100%, 240px); }
}

/* ---------- legal.html (v2): visual only, every word unchanged ---------- */
html body.pub-legal #legal-subtitle {
  font-family: var(--pub-font-ui); font-weight: 400; font-size: clamp(1.0625rem, .95rem + .35vw, 1.25rem); line-height: 1.45;
  color: var(--pub-inverse-muted);
}
/* reading panel: sand paper on the sand page, as wide as the cover and footer, hairline + e1 */
html body.pub-legal .legal-section {
  width: auto; max-width: none; margin: 12px; border-radius: var(--pub-r-panel);
  background: var(--sand-50); box-shadow: var(--pub-e1), inset 0 0 0 1px var(--nl-sand-rule);
}
/* batch AJ (Shah 3:27pm): header-to-content gap 152 -> 96px at 390, 192 -> 120px at 1440 (cover bottom padding 96 -> 64,
   reading panel top padding 56/96 -> 32/56, linear in between). Legal only: the 404 cover is a 702px min-height card with
   centred copy, so the same trim there would only nudge the text 16px. */
html body.pub-legal #legal-header { padding-bottom: 64px; }
html body.pub-legal .legal-section { padding-top: clamp(2rem, 1.443rem + 2.286vw, 3.5rem); }
html body.pub-legal .legal-container { max-width: calc(var(--pub-measure) + 2 * var(--pub-gutter)); padding-inline: var(--pub-gutter); }
html body.pub-legal .legal-title {
  font-family: var(--pub-font-display); font-weight: 560; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);   /* the homepage H2 step, 28 -> 40 */
  color: var(--pub-text); padding-bottom: 12px; border-bottom: 1px solid var(--nl-sand-rule);
}
html body.pub-legal .legal-h2 {
  font-family: var(--pub-font-display); font-weight: 560; letter-spacing: -.01em; line-height: 1.25;
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);      /* H3 step, 20 -> 24 */
  color: var(--pub-text); margin: 0 0 12px;
}
html body.pub-legal .legal-p {
  font-family: var(--pub-font-ui); font-weight: 400; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.65;
  color: var(--pub-muted); margin: 0 0 40px; text-wrap: pretty;
}
/* batch AJ (Shah 3:27pm): a modest trim. "Terms of Service" sat 64px under the last policy paragraph (subsections: 40px) -> 48px;
   the panel's last paragraph kept its 40px margin on top of the panel's bottom padding -> 16px. */
html body.pub-legal .legal-title--spaced { margin-top: 3rem; }
html body.pub-legal .legal-container > .legal-p:last-child { margin-bottom: 16px; }
html body.pub-legal .legal-section ::selection { background: var(--gold-300); color: var(--ink-cobalt); }