/* =========================================================================
   North Pacific Strategy Initiative
   Site stylesheet  ·  v1.0  ·  April 2026
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ---------- Tokens ---------- */
:root {
  --navy:        #0E2B47;
  --navy-deep:   #081C30;
  --bronze:      #A47148;
  --bronze-soft: #BC8B62;
  --teal:        #3D6A78;
  --cream:       #F4EFE3;
  --paper:       #FBF8EF;
  --paper-warm:  #F8F2E2;
  --ink:         #1A1A1A;
  --ink-soft:    #3A3A3A;
  --rule:        #C4B79B;
  --rule-soft:   #D8CFB6;

  --font-serif:  'Source Serif 4', 'Source Serif Pro', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:   'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-kr:     'Noto Serif KR', 'Source Serif 4', serif;

  --max-w:       760px;
  --max-w-wide:  1020px;
  --pad-x:       56px;
  --pad-x-mob:   24px;
}

/* ---------- Body ---------- */
html, body { height: 100%; }
body {
  font-family: var(--font-serif);
  color: var(--ink);
  background: var(--cream);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  display: flex;
  flex-direction: column;
}

/* ---------- Selection ---------- */
::selection { background: var(--bronze); color: var(--cream); }

/* ============ MASTHEAD / NAVIGATION ============ */
.masthead {
  border-bottom: 0.5px solid var(--bronze);
  padding: 24px var(--pad-x) 14px;
  background: rgba(244, 239, 227, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
}
.masthead-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
}
.masthead-mark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.masthead-mark:hover { color: var(--navy-deep); }

.nav {
  display: flex;
  align-items: baseline;
  gap: 28px;
}
.nav a {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
.nav a:hover, .nav a.active {
  color: var(--navy);
}
.nav a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--bronze);
}
.nav-volume {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--teal);
  white-space: nowrap;
}

/* ============ MAIN ============ */
main {
  flex: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px var(--pad-x) 48px;
  width: 100%;
}
main.wide {
  max-width: var(--max-w-wide);
}

/* ============ HERO / PAGE OPENERS ============ */
.opener { margin-bottom: 64px; }
.meridian {
  height: 1px;
  background: var(--bronze);
  width: 100%;
  margin-bottom: 28px;
  position: relative;
}
.meridian::before, .meridian::after, .meridian span {
  content: '';
  position: absolute;
  width: 1px;
  height: 7px;
  background: var(--bronze);
  top: -3px;
}
.meridian::before { left: 0; }
.meridian::after { right: 0; }
.meridian span {
  left: 50%;
  height: 5px;
  top: -2px;
}

.doc-class {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--bronze);
  margin-bottom: 16px;
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.08;
  color: var(--navy);
  letter-spacing: -0.012em;
  margin-bottom: 16px;
}
h1.large { font-size: 52px; }

.subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--bronze);
  line-height: 1.32;
  margin-bottom: 32px;
}

.lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 18px;
}
.lede + .lede { margin-top: 14px; }

/* ============ BODY TEXT ============ */
section { margin-bottom: 56px; }
section:last-child { margin-bottom: 0; }

h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--rule);
}
h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--navy);
  margin-top: 24px;
  margin-bottom: 8px;
  line-height: 1.3;
}
h3:first-child { margin-top: 0; }
h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  color: var(--bronze);
  margin-top: 16px;
  margin-bottom: 6px;
}

p { margin-bottom: 14px; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration: none; border-bottom: 0.5px dotted var(--bronze); transition: background 0.12s ease; }
a:hover { background: var(--bronze); color: var(--cream); border-bottom-color: var(--bronze); }
a.plain { border-bottom: none; }
a.plain:hover { background: transparent; color: var(--bronze); }

em { font-style: italic; color: var(--ink); }
em.term { font-style: italic; color: var(--navy); }
strong { font-weight: 600; color: var(--navy); }

ul, ol { margin: 0 0 14px 22px; }
li { margin-bottom: 6px; line-height: 1.5; }

blockquote {
  margin: 18px 0;
  padding-left: 18px;
  border-left: 2px solid var(--bronze);
  font-style: italic;
  font-size: 17px;
  color: var(--navy);
  line-height: 1.5;
}

/* Mono inline code */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--navy);
  background: var(--paper-warm);
  padding: 1px 5px;
  border-radius: 1px;
}

hr {
  border: none;
  border-top: 0.5px solid var(--rule);
  margin: 32px 0;
}

/* ============ COMPONENTS ============ */

/* Card — used for working paper listing */
.wp-card {
  background: var(--paper);
  border: 0.75px solid var(--rule);
  padding: 28px 32px;
  margin: 8px 0;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.wp-card:hover { border-color: var(--bronze); }
.wp-card-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.wp-card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--navy);
  line-height: 1.18;
  margin-bottom: 6px;
}
.wp-card-subtitle {
  font-style: italic;
  font-size: 16px;
  color: var(--bronze);
  margin-bottom: 16px;
}
.wp-card-summary {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
}
.wp-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--navy);
  text-decoration: none;
  padding: 8px 16px;
  border: 0.75px solid var(--navy);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.btn:hover { background: var(--navy); color: var(--cream); border-bottom-color: var(--navy); }
.btn.btn-bronze { color: var(--bronze); border-color: var(--bronze); }
.btn.btn-bronze:hover { background: var(--bronze); color: var(--cream); }
.btn.btn-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Two-column grid (used in About) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
}
.grid-2 > div p { font-size: 15.5px; line-height: 1.5; }

/* Ledger (used in Working Paper for at-a-glance) */
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 36px;
  padding: 22px 26px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  margin: 8px 0;
}
.ledger-item h4 { margin-top: 0; margin-bottom: 4px; }
.ledger-item p { font-size: 15px; line-height: 1.45; margin-bottom: 0; }
.ledger-num {
  font-family: var(--font-mono);
  color: var(--navy);
  font-weight: 500;
}

/* Editorial standards / labeled blocks */
.standard {
  border-left: 2px solid var(--bronze);
  padding: 4px 0 4px 18px;
  margin: 14px 0;
}
.standard h4 { margin-top: 0; }

/* Pull quote */
.pull {
  border-left: 2px solid var(--bronze);
  padding: 6px 0 6px 18px;
  margin: 18px 0;
  font-style: italic;
  font-size: 17.5px;
  color: var(--navy);
  line-height: 1.45;
}
.pull cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--teal);
  text-transform: uppercase;
}

/* Working paper full-text styling */
.wp-prose { margin-top: 8px; }
.wp-prose p { font-size: 17px; line-height: 1.65; margin-bottom: 14px; color: var(--ink); }
.wp-prose h2 {
  margin-top: 48px;
  font-size: 12px;
  letter-spacing: 0.22em;
}
.wp-prose h3 {
  margin-top: 28px;
  font-size: 22px;
  color: var(--navy);
  font-weight: 600;
}
.wp-prose h4 {
  margin-top: 18px;
  font-size: 17px;
  color: var(--bronze);
  font-style: italic;
}
.wp-prose ul, .wp-prose ol { margin-bottom: 18px; }
.wp-prose li { margin-bottom: 8px; }

/* Inline figure */
figure {
  margin: 28px 0;
  padding: 18px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
}
figure img, figure svg { width: 100%; height: auto; display: block; }
figure figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--teal);
  text-transform: uppercase;
}

/* Sidebar metadata for working paper */
.wp-meta-block {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  padding: 18px 22px;
  margin-bottom: 36px;
  font-size: 14px;
  line-height: 1.55;
}
.wp-meta-block dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 22px;
  margin: 0;
}
.wp-meta-block dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--teal);
  text-transform: uppercase;
  padding-top: 2px;
}
.wp-meta-block dd { font-size: 14.5px; color: var(--ink); }

/* Section anchor TOC */
.toc {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  padding: 18px 24px;
  margin: 24px 0 32px 0;
}
.toc h2 {
  margin-top: 0;
  margin-bottom: 12px;
  border-bottom: none;
  padding-bottom: 0;
}
.toc ol { margin: 0; padding-left: 18px; counter-reset: toc-i; list-style: none; }
.toc li {
  font-size: 14.5px;
  margin-bottom: 4px;
  position: relative;
  counter-increment: toc-i;
}
.toc li::before {
  content: counter(toc-i, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--bronze);
  margin-right: 10px;
  letter-spacing: 0.05em;
}
.toc a { border-bottom: none; color: var(--navy); }
.toc a:hover { color: var(--bronze); background: transparent; }

/* Badge for status */
.status-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--bronze);
  text-transform: uppercase;
  padding: 3px 10px;
  border: 0.5px solid var(--bronze);
}

/* ============ FOOTER / COLOPHON ============ */
.site-footer {
  border-top: 0.5px solid var(--bronze);
  padding: 32px var(--pad-x);
  margin-top: 56px;
  background: var(--cream);
}
.colophon {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.colophon-left { flex: 1; min-width: 260px; }
.colophon-right {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--teal);
  text-transform: uppercase;
  line-height: 1.7;
}
.colophon-mark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--navy);
  margin-bottom: 4px;
}
.colophon-tag {
  font-style: italic;
  font-size: 13px;
  color: var(--bronze);
  margin-bottom: 14px;
}
.colophon-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
}
.colophon-text a {
  color: var(--navy);
  border-bottom: 0.5px dotted var(--bronze);
}
.colophon-right a {
  color: var(--teal);
  border-bottom: 0.5px dotted var(--teal);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 820px) {
  .masthead {
    padding: 18px var(--pad-x-mob) 12px;
  }
  .masthead-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .nav { gap: 18px; flex-wrap: wrap; }
  .nav-volume { display: none; }
  main { padding: 48px var(--pad-x-mob) 32px; }
  h1 { font-size: 32px; }
  h1.large { font-size: 38px; }
  .subtitle { font-size: 18px; }
  .lede { font-size: 17px; }
  .grid-2, .ledger { grid-template-columns: 1fr; }
  .wp-prose p { font-size: 16px; }
  .wp-prose h3 { font-size: 19px; }
  .site-footer { padding: 24px var(--pad-x-mob); }
}

/* ============ PRINT ============ */
@media print {
  .masthead, .site-footer, .nav { display: none; }
  body { background: white; color: black; }
  main { max-width: 100%; padding: 0; }
}