/* Shared journal article chrome (AUDIT.D). Rules here are identical in
   every article; page-specific rules stay inline after the link, so the
   cascade order is unchanged. */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--fb); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 16px 44px; background: rgba(245,243,239,0.85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand-mark { width: 30px; height: 30px; }
.brand-word { font-family: var(--fd); font-size: 18px; font-weight: 600; letter-spacing: 0.10em; }
.brand-sub { font-family: var(--fm); font-size: 9px; letter-spacing: 0.30em; text-transform: uppercase; color: var(--ink); display: block; margin-top: 3px; }
.btn { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: all var(--t); white-space: nowrap; }
/* LOOK.1 (2026-10-31): one pill in the bar (the studio); the article's "All articles" keeps its .btn-ghost markup and reads as a text link. */
.btn-ghost { border-color: transparent; border-radius: 0; padding: 8px 0; margin-right: 12px; font-size: 14.5px; color: var(--text-mid); border-bottom: 1px solid transparent; }
.btn-ghost:hover { border-color: transparent; border-bottom-color: var(--border-hi); color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-dim); }
article { max-width: 740px; margin: 0 auto; padding: 56px 24px 40px; }
.kicker { font-family: var(--fm); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.kicker::before { content: ''; width: 22px; height: 1px; background: var(--gold); }
h1 { font-family: var(--fd); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.015em; margin-bottom: 20px; text-wrap: balance; }
h1 em { font-style: normal; font-weight: 600; color: var(--ink); }
.standfirst { font-size: clamp(18px, 1.5vw, 20px); font-weight: 400; color: var(--text-mid); line-height: 1.55; margin-bottom: 36px; }
h2 { font-family: var(--fd); font-size: 27px; font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; margin: 52px 0 14px; }
article p { color: var(--text-mid); line-height: 1.75; margin-bottom: 18px; }
article p b, article p strong { color: var(--text); font-weight: 600; }
article a[href] { border-bottom: 1px solid var(--border-hi); transition: border-color var(--t); }
article a[href]:hover { border-color: var(--ink); }
figure { margin: 36px 0; }
/* LOOK.3 (2026-10-31): the figure is the object, so its frame takes the
   site's 12px corner and its caption reads at body size. Each article
   still sets .fig-frame inline (6px, after this sheet); `article .fig-frame`
   outranks it by specificity, so no article needed editing. */
article .fig-frame { border-radius: 12px; }
.fig-frame canvas { width: 100%; height: 100%; }
figcaption { font-family: var(--fb); font-size: 13.5px; letter-spacing: 0; color: var(--text-dim); margin-top: 12px; line-height: 1.5; }
.note { font-family: var(--fb); font-size: 14px; letter-spacing: 0; color: var(--text-mid); background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: 10px; padding: 18px 22px; margin: 28px 0; line-height: 1.6; }
.faq { border-top: 1px solid var(--border); margin-top: 56px; }
.faq h2 { margin-top: 32px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { cursor: pointer; padding: 18px 36px 18px 0; list-style: none; position: relative; font-family: var(--fd); font-size: 18px; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { font-size: 15.5px; padding-bottom: 18px; }
article .cta { border-radius: 14px; padding: 40px 36px; }   /* LOOK.3: the band's corner, over each article's inline .cta */
.cta h2 { margin: 0 0 8px; color: var(--paper); }
.cta p { color: rgba(245,243,239,0.78); margin-bottom: 22px; }
.cta .btn { background: var(--paper); color: var(--ink); }
.cta .btn:hover { background: rgba(245,243,239,0.88); }
.backrow { max-width: 740px; margin: 0 auto; padding: 24px; font-family: var(--fm); font-size: 13px; }
.backrow a { color: var(--text-dim); }
.backrow a:hover { color: var(--ink); }
footer { padding: 40px 44px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12.5px; color: var(--text-dim); }
.foot-links { display: flex; gap: 22px; }
.foot-links a:hover { color: var(--ink); }
/* Phones (FE.1, 2026-10-21): brand and both nav buttons ran 30 to 74 px
   past a 390 px screen on every article, and the footer links past 320 px.
   The secondary button goes and the footer links wrap; `body > nav` and
   `footer .foot-links` outrank the inline 800 px rules that follow. */
@media (max-width: 480px) {
  body > nav { gap: 12px; padding: 10px 16px; }
  body > nav .btn-ghost { display: none; }
  footer .foot-links { flex-wrap: wrap; gap: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }