/* ==========================================================================
   The Resource Balance — shared stylesheet
   Aesthetic: sober English analysis review / resource-security observatory.
   Ink slate + cool paper + single muted teal accent.
   Editorial serif (Newsreader) + institutional sans (IBM Plex Sans).
   ========================================================================== */

:root {
  --ink:        #1c2b33;   /* deep slate — primary text & dark UI            */
  --ink-2:      #46555c;   /* secondary text                                */
  --ink-3:      #6d7a80;   /* metadata / muted                              */
  --paper:      #f2f3f0;   /* page background — cool off-white              */
  --surface:    #fbfbf9;   /* cards / raised areas                           */
  --hairline:   #d7dad3;   /* rules & borders                               */
  --hairline-2: #e6e8e2;
  --accent:     #1f6e60;   /* muted deep teal — water / resource / balance  */
  --accent-deep:#124c42;
  --danger:     #8a3b34;   /* reserved editorial red (kickers, sparingly)   */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --measure: 40rem;        /* reading measure for article body              */
  --gutter: clamp(1.15rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection { background: rgba(31,110,96,0.18); }

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

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: var(--gutter); }
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* ---- Utility / language bar -------------------------------------------- */

.util {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--ink);
  color: #c9cec9;
}
.util .wrap { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.util a { color: #c9cec9; }
.util a:hover { color: #fff; }
.util .lang span[aria-current="true"] { color: #fff; font-weight: 600; }
.util .lang span { padding-inline: 0.35rem; }

/* ---- Masthead ----------------------------------------------------------- */

.masthead { background: var(--paper); padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.masthead .wrap { text-align: center; }

.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.wordmark a { color: inherit; }
.wordmark a:hover { text-decoration: none; }
.wordmark .the {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.tagline {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin: 0.7rem auto 0;
  max-width: 34rem;
}

/* balance-beam signature rule */
.beam { margin: 1.1rem auto 0; width: min(100%, 30rem); height: 16px; color: var(--hairline); }
.beam svg { width: 100%; height: 16px; display: block; }

/* ---- Primary nav -------------------------------------------------------- */

.nav {
  font-family: var(--sans);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 1.1rem;
}
.nav .wrap {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem;
  justify-content: center; align-items: center;
  min-height: 46px;
}
.nav a {
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.55rem 0;
}
.nav a:hover { color: var(--accent-deep); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent-deep); border-bottom: 2px solid var(--accent); }

/* ---- Kickers / eyebrows ------------------------------------------------- */

.kicker {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.kicker.danger { color: var(--danger); }

/* ---- Lead / featured article on home ------------------------------------ */

.lead { padding: clamp(1.8rem, 5vw, 3.4rem) 0 clamp(1.4rem,3vw,2.2rem); }
.lead .wrap { max-width: 54rem; text-align: center; }
.lead h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.2vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0.2rem 0 0.7rem;
}
.lead .dek {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--ink-2);
  font-style: italic;
  max-width: 42rem;
  margin: 0 auto 1rem;
}
.byline {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.byline strong { color: var(--ink); font-weight: 600; }

/* ---- Article grid ------------------------------------------------------- */

.grid-head {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 1.4rem 0 0.2rem;
  border-top: 1px solid var(--hairline);
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding-bottom: 2.5rem;
}
.card {
  padding: 1.6rem 1.6rem 1.9rem;
  border-top: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}
.card:nth-child(3n) { border-right: 0; }
.card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.16;
  margin: 0.15rem 0 0.5rem;
}
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent-deep); text-decoration: none; }
.card .dek { font-size: 0.98rem; color: var(--ink-2); margin: 0 0 0.9rem; }
.card .byline { display: block; }

@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
  .card { border-right: 0; }
}

/* ---- Article page ------------------------------------------------------- */

.article { padding: clamp(1.6rem, 4vw, 2.8rem) 0 1rem; }
.article-head { max-width: var(--measure); margin: 0 auto; text-align: left; }
.article-head h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0.3rem 0 0.7rem;
}
.article-head .dek {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-style: italic;
  color: var(--ink-2);
  margin: 0 0 1.1rem;
}
.article-meta {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  padding: 0.8rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
}
.article-meta strong { color: var(--ink); font-weight: 600; }

.article-body { max-width: var(--measure); margin: 1.7rem auto 0; }
.article-body p { margin: 0 0 1.15rem; }
.article-body h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 2rem 0 0.6rem;
}
.article-body .lede-cap::first-letter {
  font-size: 3.1rem;
  line-height: 0.8;
  font-weight: 500;
  float: left;
  padding: 0.18rem 0.5rem 0 0;
  color: var(--accent-deep);
}
.article-body blockquote {
  margin: 1.6rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--ink);
  font-size: 1.15rem;
}
.article-body cite { color: var(--ink-3); font-style: normal; font-family: var(--sans); font-size: 0.85rem; }

/* thin author box — deliberately sparse */
.authorbox {
  max-width: var(--measure);
  margin: 2.2rem auto 0;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-2);
}
.authorbox strong { color: var(--ink); }

.related { max-width: var(--measure); margin: 2.2rem auto 0; border-top: 1px solid var(--hairline); padding-top: 1rem; }
.related .grid-head { border: 0; padding-top: 0; }
.related ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.related li { padding: 0.5rem 0; border-bottom: 1px solid var(--hairline-2); }
.related a { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }

/* ---- Generic page (about / legal / privacy) ----------------------------- */

.page { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.page .wrap { max-width: var(--measure); }
.page h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.12; margin: 0 0 0.4rem;
}
.page h2 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 1.9rem 0 0.5rem; }
.page h3 { font-family: var(--sans); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin: 1.4rem 0 0.3rem; }
.page p, .page li { margin: 0 0 1rem; }
.page ul { padding-left: 1.1rem; }
.page .lede { font-size: 1.2rem; color: var(--ink-2); font-style: italic; }
.page .meta-block { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-2); }
.page .meta-block b { color: var(--ink); }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 0.6rem; }
.board .person { border-top: 1px solid var(--hairline); padding-top: 0.8rem; }
.board .person .nm { font-weight: 600; }
.board .person .rl { font-family: var(--sans); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.02em; }
.board .person p { font-size: 0.95rem; color: var(--ink-2); margin-top: 0.35rem; }
@media (max-width: 620px){ .board { grid-template-columns: 1fr; } }

/* ---- Footer ------------------------------------------------------------- */

.foot { background: var(--ink); color: #c7cdc8; margin-top: 2rem; }
.foot .wrap { padding-top: 2.2rem; padding-bottom: 2.2rem; }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.6rem; }
.foot .fm { font-family: var(--serif); font-size: 1.25rem; color: #fff; margin: 0 0 0.4rem; }
.foot .fm .the { font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.4em; text-transform: uppercase; color: #7fb3a8; display:block; margin-bottom: 0.3rem; }
.foot p { font-size: 0.86rem; line-height: 1.55; margin: 0 0 0.6rem; }
.foot h4 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8f9a94; margin: 0 0 0.6rem; }
.foot ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); font-size: 0.86rem; }
.foot ul li { margin-bottom: 0.4rem; }
.foot a { color: #c7cdc8; }
.foot a:hover { color: #fff; }
.foot .legal-line { border-top: 1px solid #33454d; margin-top: 1.6rem; padding-top: 1rem; font-family: var(--sans); font-size: 0.78rem; color: #8f9a94; }

@media (max-width: 720px){ .foot .cols { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ---- CTF / fictional-content disclaimer (every page) -------------------- */

.ctf-note {
  background: #16232a;
  color: #9fb0aa;
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.ctf-note .wrap { padding-top: 1rem; padding-bottom: 1.1rem; }
.ctf-note b { color: #cdd6d1; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem; }

/* ---- Focus visibility (a11y floor) ------------------------------------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .card { transition: background-color 0.2s ease; }
  .card:hover { background: var(--surface); }
}