/* ============================================================
   Phibon v4 — base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--phi-surface-page);
  color: var(--phi-text-primary);
  font-family: var(--phi-font-text);
  font-size: var(--phi-size-0);
  line-height: var(--phi-leading-body);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--phi-font-display);
  font-optical-sizing: auto;
  font-weight: var(--phi-weight-display);
  color: var(--phi-text-heading);
  line-height: var(--phi-leading-heading);
  letter-spacing: var(--phi-tracking-display);
  margin: 0 0 var(--phi-s3);
  text-wrap: balance;
}
h1 { font-size: var(--phi-display-1); line-height: var(--phi-leading-display); }
h2 { font-size: var(--phi-display-2); line-height: 1.06; }
h3 { font-size: var(--phi-display-3); }
h4 { font-size: var(--phi-display-4); }

p { margin: 0 0 var(--phi-s3); max-width: var(--phi-measure); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--phi-s3); padding-left: var(--phi-s4); }
li { margin-bottom: var(--phi-s2); }
li:last-child { margin-bottom: 0; }

a { color: var(--phi-text-link); text-decoration-thickness: 1px; text-underline-offset: .18em;
    transition: color var(--phi-dur-1) var(--phi-ease); }
a:hover { color: var(--phi-ink); }

:focus-visible { outline: none; box-shadow: var(--phi-focus); }
.phi-dark :focus-visible { box-shadow: var(--phi-focus-dark); }

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--phi-rule); margin: var(--phi-s5) 0; }
::selection { background: var(--phi-mint-200); color: var(--phi-ink); }

.phi-skip {
  position: absolute; left: var(--phi-s3); top: -4rem; z-index: var(--phi-z-overlay);
  background: var(--phi-paper); color: var(--phi-ink);
  padding: var(--phi-s2) var(--phi-s3); font-size: var(--phi-size--1); font-weight: 600;
  letter-spacing: .04em; transition: transform var(--phi-dur-1) var(--phi-ease);
}
.phi-skip:focus { transform: translateY(5.5rem); color: var(--phi-ink); }

/* ---------- Layout ---------- */

.phi-wrap { width: 100%; max-width: var(--phi-container); margin-inline: auto; padding-inline: var(--phi-gutter); }
.phi-wrap--narrow { max-width: 62rem; }

.phi-section { padding-block: var(--phi-section); }
.phi-section--tight { padding-block: var(--phi-section-tight); }

.phi-golden { display: grid; grid-template-columns: var(--phi-major-fr) var(--phi-minor-fr);
              gap: var(--phi-s6); align-items: start; }
.phi-golden--flip { grid-template-columns: var(--phi-minor-fr) var(--phi-major-fr); }
@media (max-width: 62rem) {
  .phi-golden, .phi-golden--flip { grid-template-columns: 1fr; gap: var(--phi-s5); }
}

.phi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem,100%),1fr)); gap: var(--phi-s5); }
.phi-stack > * + * { margin-top: var(--phi-s3); }

/* ---------- Grounds ----------
   .phi-dark is the brand's default state: chrome, hero, evidence
   bands and the footer. .phi-paper is where long reading happens. */

.phi-dark { background: var(--phi-abyss); color: var(--phi-on-dark-2); position: relative; }
.phi-dark--slate { background: var(--phi-slate); }
.phi-dark h1, .phi-dark h2, .phi-dark h3, .phi-dark h4 { color: var(--phi-on-dark); }
.phi-dark a { color: var(--phi-on-dark); }
.phi-dark a:hover { color: var(--phi-on-dark-accent); }
.phi-dark hr { border-top-color: var(--phi-rule-dark); }
.phi-sunken { background: var(--phi-surface-sunken); }

/* ---------- Type utilities ---------- */

.phi-label {
  font-family: var(--phi-font-text);
  font-size: var(--phi-size--1); font-weight: 600;
  letter-spacing: var(--phi-tracking-label); text-transform: uppercase;
  color: var(--phi-text-tertiary); margin: 0 0 var(--phi-s3);
  display: block;
}
.phi-dark .phi-label { color: var(--phi-on-dark-accent); }

/* A label with a rule running out from it, used to open a section. */
.phi-label--rule { display: flex; align-items: center; gap: var(--phi-s3); }
.phi-label--rule::after { content: ""; height: 1px; flex: 1; background: var(--phi-rule); }
.phi-dark .phi-label--rule::after { background: var(--phi-rule-dark); }

.phi-lede { font-size: var(--phi-display-4); line-height: 1.45; color: var(--phi-text-secondary);
            max-width: var(--phi-measure); font-weight: 400; }
.phi-dark .phi-lede { color: var(--phi-on-dark-2); }

.phi-serif { font-family: var(--phi-font-display); }
.phi-small { font-size: var(--phi-size--1); color: var(--phi-text-tertiary); }
.phi-dark .phi-small { color: var(--phi-on-dark-3); }
.phi-measure-tight { max-width: var(--phi-measure-tight); }

.js .phi-reveal { opacity: 0; transform: translateY(1.25rem); }
.js .phi-reveal.is-in { opacity: 1; transform: none;
  transition: opacity var(--phi-dur-3) var(--phi-ease-out), transform var(--phi-dur-3) var(--phi-ease-out); }
@media (prefers-reduced-motion: reduce) { .js .phi-reveal { opacity: 1; transform: none; } }

.phi-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Background scroll lock while a dialog owns the screen. */
html.is-locked, html.is-locked body { overflow: hidden; }