/* DeepRegatta guides — shares the landing page's nautical-chart design tokens. */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/InstrumentSerif-400.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/InstrumentSerif-400i.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/Inter-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('/fonts/JetBrainsMono-500.woff2') format('woff2'); }

:root {
  --sea:        #E9F0EF;
  --sea-deep:   #DDE8E7;
  --ink:        #14293C;
  --ink-soft:   #4E6A80;
  --hairline:   rgba(20, 41, 60, 0.14);
  --hairline-2: rgba(20, 41, 60, 0.08);
  --magenta:    #BE2F72;
  --teal:       #0E7490;
  --teal-deep:  #0B5C73;
  --chart-teal: #0C7C9C;
  --buff:       #EDE3C6;
  --card:       #F4F8F7;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--sea);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 2px; }

.serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
.mono  { font-family: 'JetBrains Mono', monospace; }
.wrap  { max-width: 1140px; margin: 0 auto; padding: 0 28px; }

/* NAV (always solid on inner pages) */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(233, 240, 239, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: 0.01em; color: var(--ink); line-height: 1.15; }
.brand-tag  { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--ink-soft); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.3; }
.nav-right { display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; cursor: pointer; border: none;
  border-radius: 8px; letter-spacing: -0.01em; white-space: nowrap;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s, color 0.15s;
}
.btn-solid { background: var(--teal); color: #fff; }
.btn-solid:hover { background: var(--teal-deep); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(14, 116, 144, 0.35); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-nav  { font-size: 13px; padding: 9px 18px; }
.btn-card { font-size: 14.5px; padding: 12px 24px; border-radius: 9px; }

/* ARTICLE */
.article { max-width: 820px; margin: 0 auto; padding: 64px 28px 40px; }
.crumbs { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; margin-bottom: 34px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--magenta); }
.crumbs .sep { color: var(--magenta); margin: 0 7px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; color: var(--magenta); margin-bottom: 18px; text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 26px; height: 1.5px; background: var(--magenta); }

.article h1 {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance;
}
.article h1 em { font-style: italic; color: var(--magenta); }
.lede {
  margin-top: 24px; font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.65;
  color: var(--ink); text-wrap: pretty;
}
.lede strong { font-weight: 600; }
.article > p, .article section > p { margin-top: 18px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; text-wrap: pretty; }
.article section > p strong, .article > p strong { color: var(--ink); font-weight: 600; }
.article h2 {
  margin-top: 52px;
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(25px, 2.8vw, 32px); line-height: 1.12;
}
.article a:not(.btn) { color: var(--teal-deep); text-decoration: underline; text-decoration-color: rgba(14, 116, 144, 0.35); text-underline-offset: 3px; }
.article a:not(.btn):hover { text-decoration-color: var(--teal-deep); }

/* EVIDENCE FIGURE */
.evidence {
  margin: 44px 0 8px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--card); overflow: hidden;
}
.evidence .fig-head {
  padding: 14px 20px 0;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta);
}
.evidence .fig-title { padding: 3px 20px 0; font-weight: 600; font-size: 15px; color: var(--ink); }
.evidence svg { display: block; width: 100%; height: auto; padding: 10px 12px 2px; }
.evidence figcaption {
  padding: 10px 20px 16px; border-top: 1px solid var(--hairline-2); margin-top: 8px;
  color: var(--ink-soft); font-size: 13px; line-height: 1.6;
}
.evidence figcaption .src { display: block; margin-top: 5px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.03em; }
.evidence details { border-top: 1px solid var(--hairline-2); }
.evidence summary {
  cursor: pointer; padding: 9px 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.evidence summary:hover { color: var(--ink); }
.evidence table { width: 100%; border-collapse: collapse; font-size: 13px; }
.evidence th, .evidence td { text-align: left; padding: 7px 20px; border-top: 1px solid var(--hairline-2); }
.evidence th { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; }
.evidence td.num { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

/* chart text */
.c-lab  { font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; fill: var(--ink); }
.c-val  { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: var(--ink-soft); }
.c-axis { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--ink-soft); }
.c-note { font-family: 'JetBrains Mono', monospace; font-size: 10px; fill: var(--magenta); }

/* METHOD / LIMITS */
.method {
  margin-top: 52px; padding: 26px 0 26px 30px; position: relative;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.method::before { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 2px; background: var(--magenta); }
.method h2 { margin-top: 0; font-size: 23px; }
.method h2 + p { margin-top: 10px; }
.method h2:nth-of-type(2) { margin-top: 30px; }
.method p { font-size: 14.5px; }

/* CTA */
.cta-row { margin: 44px 0 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-soft); }

/* RELATED */
.related { margin-top: 56px; padding-bottom: 26px; }
.related h2 { font-size: 23px; margin-top: 0; }
.related ul { list-style: none; margin-top: 18px; }
.related li { border-top: 1px solid var(--hairline-2); padding: 13px 0; }
.related li:last-child { border-bottom: 1px solid var(--hairline-2); }
.related .rel-kind { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--magenta); letter-spacing: 0.12em; text-transform: uppercase; display: block; }
.related li a { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.related li a:hover { color: var(--teal-deep); }
.related .rel-why { display: block; color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; }

/* GUIDES INDEX */
.guides-list { list-style: none; margin-top: 44px; }
.guides-list li { border-top: 1px solid var(--hairline); padding: 26px 0; }
.guides-list li:last-child { border-bottom: 1px solid var(--hairline); }
.g-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--magenta); letter-spacing: 0.14em; text-transform: uppercase; }
.guides-list h2 { margin-top: 6px; font-size: clamp(22px, 2.6vw, 28px); }
.article .guides-list h2 a { text-decoration: none; color: var(--ink); }
.article .guides-list h2 a:hover { color: var(--teal-deep); }
.g-sum { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; max-width: 640px; }

/* FOOTER */
footer { border-top: 1px solid var(--hairline); background: var(--sea); padding: 34px 28px; margin-top: 40px; }
.foot-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.foot-left { display: flex; align-items: center; gap: 10px; }
.foot-left .name { font-weight: 600; font-size: 13px; }
.foot-left .sep { color: var(--ink-soft); font-size: 12.5px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a, .foot-links span { font-size: 12px; color: var(--ink-soft); text-decoration: none; transition: color 0.15s; }
.foot-links a:hover { color: var(--magenta); }

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .brand-tag { display: none; }
  .btn-nav { padding: 8px 10px; font-size: 12px; }
  .btn-nav svg { display: none; }
  .article { padding: 44px 20px 24px; }
  .method { padding-left: 20px; }
  .evidence th, .evidence td { padding: 7px 12px; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
  .brand { gap: 0; }
  .nav-right { gap: 6px; }
}