/* ─────────────────────────────────────────────────────────────────────────
   Intorian editorial stylesheet — /resources hub and article pages.

   Shared across every article so a piece is ~150 lines of HTML rather than a
   700-line self-contained clone. Loaded as an external file, which the strict
   `/*` CSP in web/public/_headers permits under style-src 'self'.

   Same design tokens as the brochure pages (home.html, /for/*, /media-training)
   but a READING layout: normal document flow, no scroll-snap, no fixed panels.
   ───────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/eb-garamond-400.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/eb-garamond-400-italic.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/figtree-300.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/figtree-400.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/figtree-500.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-400.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-500.woff2') format('woff2');}

:root {
  --bg:        #F6F3EC;
  --bg-card:   rgba(255,255,255,0.5);
  --ink:       #0B0F14;
  --ink-body:  rgba(17,21,26,0.78);
  --ink-muted: rgba(17,21,26,0.56);
  --ink-faint: rgba(17,21,26,0.40);
  --gold:      #B08A46;
  --gold-text: #866324;
  --gold-soft: rgba(176,138,70,0.14);
  --border:    rgba(17,21,26,0.14);
  --hair:      rgba(17,21,26,0.10);
  --on-gold:   #F6F3EC;
  --f-display: 'EB Garamond', Georgia, serif;
  --f-body:    'Figtree', system-ui, sans-serif;
  --f-mono:    'DM Mono', monospace;
  --ease:      cubic-bezier(0.16,1,0.3,1);
  --measure:   68ch;
  /* Side gutter. The 1.5rem floor is deliberate: below it the clamp
     resolves to ~19px on a 375px screen, which reads edge-to-edge on mobile.
     Matches the horizontal floor used by the brochure pages. */
}

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

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--bg);
  color:var(--ink-body);
  font-family:var(--f-body);
  font-size:clamp(1rem,1.05vw,1.09rem);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.skip {
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--on-gold);
  padding:0.6em 1em; z-index:200;
}
.skip:focus { left:1rem; top:1rem; }

/* ── MASTHEAD ── */
.masthead {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:0.45rem 1rem;
  padding:0.85rem clamp(1.5rem,6vw,3.5rem);
  background:rgba(246,243,236,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hair);
}
.masthead img { height:19px; width:auto; opacity:0.9; }
.masthead nav { display:flex; align-items:center; gap:clamp(0.9rem,2vw,1.7rem); }
.masthead nav a {
  font-family:var(--f-mono); font-size:0.66rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-muted); text-decoration:none; white-space:nowrap;
  transition:color 0.2s ease;
}
.masthead nav a:hover { color:var(--gold-text); }

/* Mobile: drop the top menu entirely and let the bar scroll away.
   These are reading pages — a sticky two-row header was permanent chrome on the
   one page type that least benefits from it, and it duplicated navigation the
   four-column footer already carries. The wordmark stays as brand and a link
   home. Desktop keeps the links, where there is room for them on one row. */
@media (max-width:640px) {
  .masthead { position:static; padding-top:1rem; padding-bottom:1rem; }
  .masthead nav { display:none; }
}

/* ── SHELL ── */
.wrap { width:100%; max-width:var(--measure); margin:0 auto; padding:0 clamp(1.5rem,6vw,2.5rem); }
.wrap-wide { width:100%; max-width:1080px; margin:0 auto; padding:0 clamp(1.5rem,6vw,2.5rem); }

/* ── ARTICLE HEADER ── */
/* Vertical padding must be LONGHAND. The shorthand with a 0 horizontal value
   overrides .wrap's gutter and pins this block to the viewport edge on mobile. */
.art-head { padding-top:clamp(2.6rem,7vh,5rem); padding-bottom:clamp(1.4rem,3vh,2.2rem); }
.kicker {
  font-family:var(--f-mono); font-size:0.66rem;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-text);
  display:block; margin-bottom:1rem;
}
h1 {
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.08;
  letter-spacing:-0.01em; color:var(--ink);
  margin-bottom:1rem;
}
h1 em { font-style:italic; color:var(--gold-text); }
.dek {
  font-size:clamp(1.08rem,1.5vw,1.3rem); font-weight:300;
  line-height:1.55; color:var(--ink-muted);
  margin-bottom:1.6rem;
}
.byline {
  display:flex; flex-wrap:wrap; gap:0.5rem 1.1rem; align-items:baseline;
  font-family:var(--f-mono); font-size:0.66rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
  padding-top:1.1rem; border-top:1px solid var(--hair);
}
.byline .who { color:var(--gold-text); }

/* ── BODY COPY ── */
.art-body { padding-bottom:clamp(2.5rem,6vh,4rem); }
.art-body > * + * { margin-top:1.15rem; }
.art-body h2 {
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.2;
  color:var(--ink); margin-top:2.6rem; margin-bottom:0.2rem;
}
.art-body h3 {
  font-family:var(--f-body); font-weight:500;
  font-size:clamp(1.02rem,1.4vw,1.15rem);
  color:var(--ink); margin-top:1.8rem; margin-bottom:0.1rem;
}
.art-body a { color:var(--gold-text); text-decoration:underline; text-underline-offset:2px; }
.art-body a:hover { color:var(--ink); }
.art-body strong { color:var(--ink); font-weight:500; }
.art-body ul, .art-body ol { padding-left:1.3rem; }
.art-body li { margin-bottom:0.5rem; }
.art-body li::marker { color:var(--gold); }
blockquote {
  border-left:2px solid var(--gold);
  padding:0.2rem 0 0.2rem 1.2rem;
  font-family:var(--f-display); font-size:clamp(1.15rem,1.9vw,1.45rem);
  font-style:italic; line-height:1.4; color:var(--ink);
}

/* Key-takeaways box — doubles as the answer block for AI/answer engines. */
.takeaway {
  background:var(--gold-soft); border:1px solid var(--border);
  border-radius:3px; padding:clamp(1.1rem,2.2vw,1.6rem);
  margin-top:2rem;
}
.takeaway h2 {
  font-family:var(--f-mono) !important; font-size:0.66rem !important;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-text);
  margin:0 0 0.7rem !important;
}
.takeaway ul { margin:0; padding-left:1.1rem; }
.takeaway li { font-size:0.97rem; }

/* Inline CTA card. */
.cta-card {
  border:1px solid var(--border); border-radius:3px;
  background:var(--bg-card); padding:clamp(1.2rem,2.5vw,1.8rem);
  margin-top:2.4rem;
}
.cta-card p { margin-bottom:1rem; color:var(--ink-body); }
.cta-card .cta {
  display:inline-block; font-family:var(--f-body); font-weight:500;
  font-size:0.92rem; letter-spacing:0.04em;
  color:var(--on-gold); background:var(--ink);
  padding:0.75em 1.7em; border-radius:2px; text-decoration:none;
  transition:opacity 0.2s ease;
}
.cta-card .cta:hover { opacity:0.86; text-decoration:none; }

/* ── RELATED ── */
.related { border-top:1px solid var(--hair); padding-top:clamp(2rem,5vh,3rem); padding-bottom:clamp(2rem,5vh,3rem); }
.related h2 {
  font-family:var(--f-mono); font-size:0.66rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-text);
  margin-bottom:1.1rem;
}
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; }
.card {
  display:block; border:1px solid var(--border); border-radius:3px;
  background:var(--bg-card); padding:1.1rem;
  text-decoration:none; transition:border-color 0.2s ease;
}
.card:hover { border-color:var(--gold); }
.card .c-kick {
  font-family:var(--f-mono); font-size:0.58rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-text);
  display:block; margin-bottom:0.45rem;
}
.card .c-title {
  font-family:var(--f-display); font-size:1.16rem; line-height:1.25;
  color:var(--ink); margin-bottom:0.4rem;
}
.card .c-desc { font-size:0.9rem; line-height:1.5; color:var(--ink-muted); }

/* ── HUB ── */
.hub-head { padding-top:clamp(2.6rem,7vh,5rem); padding-bottom:clamp(1.6rem,4vh,2.6rem); }
.cluster { padding-bottom:clamp(2rem,5vh,3.2rem); }
.cluster-head {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-bottom:0.8rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--hair);
}
.cluster-head h2 {
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink);
}
.cluster-head a {
  font-family:var(--f-mono); font-size:0.66rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-text); text-decoration:none; white-space:nowrap;
}
.cluster-head a:hover { color:var(--ink); }

/* ── SITE FOOTER (multi-column) ──
   Replaces the single horizontal row. Groups links by taxonomy so readers and
   crawlers both get the site's shape: capabilities, audiences, resources. */
/* Column labels are navigation labels, NOT content headings — using <h2> here
   would inject four extra entries into every article's document outline. */