/* shipscale.org — editorial design system
   Register: Brand (portfolio). Design carries voice; restraint carries craft.
   Palette derived in DESIGN_NOTES.md. 4pt spacing grid. WCAG 2.2 AA. */

:root{
  /* neutrals — cool-neutral near-white, deliberately NOT warm cream */
  --bg:          oklch(0.988 0.002 265);   /* #FAFAFB */
  --bg-2:        oklch(0.966 0.003 265);   /* #F3F3F6 */
  --surf:        oklch(0.945 0.004 265);   /* #EDEDF1 */
  --elev:        oklch(0.922 0.004 265);
  --bd:          #E1E1E7;                  /* decorative dividers only */
  --bd-br:       #8F919A;                  /* 3.01:1 on bg — computed, AA non-text */

  /* ink */
  --tx:          #16171B;                  /* 17.17:1 on bg */
  --tx-2:        oklch(0.455 0.008 265);   /* #5B5E66 —  7.2:1 on bg */
  --tx-3:        oklch(0.590 0.008 265);   /* #83868F —  4.6:1 on bg */

  /* one accent: muted garnet */
  --acc:         #95323F;                  /* 7.17:1 on bg */
  --acc-2:       oklch(0.385 0.110 18);
  --acc-bg:      oklch(0.960 0.014 18);
  --teal:        oklch(0.450 0.055 190);
  --amber:       oklch(0.490 0.075 75);
  --amber-bg:    oklch(0.963 0.016 75);
  --rose:        var(--acc); --violet:var(--acc-2); --teal-bg:var(--bg-2);

  /* type */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* 4pt spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  --s8:32px; --s12:48px; --s16:64px; --s24:96px;

  --r-sm:6px; --r:10px; --r-lg:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --mw:1080px; --measure:70ch;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--serif);font-size:19px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc-bg)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
h1,h2,h3,.a-title,.ni-t{text-wrap:balance}
p,li{text-wrap:pretty}

.wrap{max-width:var(--mw);margin:0 auto;padding:0 var(--s6)}
.read{max-width:calc(var(--measure) + var(--s12));margin:0 auto;padding:0 var(--s6)}

/* ── masthead ─────────────────────────────────────────────── */
nav{border-bottom:1px solid var(--bd);background:var(--bg)}
.nav-in{max-width:var(--mw);margin:0 auto;padding:var(--s4) var(--s6);display:flex;align-items:baseline;justify-content:space-between;gap:var(--s6)}
.brand{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:-.015em;color:var(--tx)}
.brand .mk{display:none}
.nav-l{display:flex;gap:var(--s6);align-items:baseline}
.nav-l a{font-family:var(--sans);font-size:14px;font-weight:450;color:var(--tx-2);letter-spacing:-.005em;padding:var(--s2) 0;transition:color .15s var(--ease)}
.nav-l a:hover{color:var(--tx)}
.nav-l a.on{color:var(--tx);font-weight:550;box-shadow:inset 0 -1px 0 var(--acc)}
.nav-l a.cta{color:var(--acc)}

/* ── type scale (fluid — brand register) ──────────────────── */
h1{font-family:var(--serif);font-size:clamp(40px,5.2vw,62px);font-weight:500;letter-spacing:-.028em;line-height:1.06;color:var(--tx)}
h2{font-family:var(--serif);font-size:clamp(28px,3.2vw,36px);font-weight:500;letter-spacing:-.022em;line-height:1.18}
.s-kick{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);margin-bottom:var(--s3)}
.s-head{margin-bottom:var(--s8);max-width:62ch}
.s-sub{font-size:18px;color:var(--tx-2);line-height:1.65;margin-top:var(--s3)}
.s-sub b{color:var(--tx);font-weight:600}
section.blk{padding:var(--s16) 0;border-top:1px solid var(--bd)}

/* ── actions ──────────────────────────────────────────────── */
.btns{display:flex;gap:var(--s6);flex-wrap:wrap;align-items:center}
.btn{font-family:var(--sans);font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;transition:.15s var(--ease)}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.btn.p{background:var(--tx);color:var(--bg);padding:0 var(--s6);border-radius:var(--r-sm)}
.btn.p:hover{background:#000}
.btn.s{color:var(--tx-2);box-shadow:inset 0 -1px 0 var(--bd-br)}
.btn.s:hover{color:var(--tx);box-shadow:inset 0 -1px 0 var(--tx)}

/* ── article ──────────────────────────────────────────────── */
article{padding:var(--s16) 0 var(--s12)}
.a-back{font-family:var(--sans);font-size:13.5px;color:var(--tx-3);margin-bottom:var(--s8);display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;transition:color .15s var(--ease)}
.a-back:hover{color:var(--tx)}
.a-back svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.a-meta{font-family:var(--sans);font-size:13.5px;color:var(--tx-3);margin-bottom:var(--s4);display:flex;gap:var(--s3);flex-wrap:wrap;font-variant-numeric:tabular-nums}
.a-meta > *:not(:last-child)::after{content:'·';margin-left:var(--s3);color:var(--bd-br)}
.a-tag{color:var(--acc);font-weight:550;transition:opacity .15s var(--ease)}
.a-tag:hover{opacity:.7}
.a-meta a.a-tag + a.a-tag::before{content:", ";color:var(--tx-3);font-weight:400}
.a-title{font-family:var(--serif);font-size:clamp(34px,4.2vw,48px);font-weight:500;letter-spacing:-.026em;line-height:1.1;margin-bottom:var(--s4);color:var(--tx)}
.a-lede{font-size:21px;color:var(--tx-2);line-height:1.6;padding-bottom:var(--s8);margin-bottom:var(--s8);border-bottom:1px solid var(--bd);max-width:64ch}
.a-lede b{color:var(--tx);font-weight:600}

article p{font-size:19px;color:var(--tx);line-height:1.75;margin-bottom:var(--s6);max-width:var(--measure)}
article p b,article li b{font-weight:650}
article h3{font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.02em;color:var(--tx);margin:var(--s12) 0 var(--s4);line-height:1.22}
article ul,article ol{margin:0 0 var(--s6);padding:0;list-style:none;max-width:var(--measure)}
article li{position:relative;padding-left:var(--s6);margin-bottom:var(--s3);font-size:19px;color:var(--tx);line-height:1.7}
article ul li::before{content:'';position:absolute;left:var(--s1);top:13px;width:5px;height:5px;border-radius:50%;background:var(--bd-br)}
article ol{counter-reset:n}
article ol li{counter-increment:n}
article ol li::before{content:counter(n) '.';position:absolute;left:0;top:1px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--acc);font-variant-numeric:tabular-nums}
article code{font-family:var(--mono);font-size:.8em;background:var(--bg-2);padding:2px 6px;border-radius:4px;color:var(--tx)}
article a[href]{color:var(--tx);box-shadow:inset 0 -1px 0 var(--bd-br);transition:box-shadow .15s var(--ease)}
article a[href]:hover{box-shadow:inset 0 -1px 0 var(--acc)}

/* quotes: indent + scale, no side stripe */
blockquote{margin:var(--s8) 0;padding:0;max-width:62ch}
blockquote p{margin:0;font-size:25px;font-weight:400;line-height:1.4;color:var(--tx);letter-spacing:-.016em;font-style:italic}

.pullbox{margin:var(--s8) 0;padding:var(--s6) var(--s8);background:var(--bg-2);border-radius:var(--r);max-width:var(--measure)}
.pullbox .pb-l{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);margin-bottom:var(--s2)}
.pullbox p{margin:0;font-size:18px;line-height:1.65;color:var(--tx);max-width:none}
.pullbox p + p{margin-top:var(--s3)}
.pullbox.warn{background:var(--amber-bg)}
.pullbox.warn .pb-l{color:var(--amber)}

.steps{margin:var(--s8) 0;max-width:var(--measure)}
.step{display:flex;gap:var(--s6);padding:var(--s4) 0;border-bottom:1px solid var(--bd)}
.step:first-child{border-top:1px solid var(--bd)}
.step-n{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--acc);flex:none;width:24px;padding-top:5px;font-variant-numeric:tabular-nums}
.step-b{font-size:18px;color:var(--tx);line-height:1.65}
.step-b b{font-weight:650}

.a-end{margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid var(--bd);display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;align-items:center}
.a-end .ae-t{font-family:var(--sans);font-size:14px;color:var(--tx-3);max-width:52ch;line-height:1.6}
.a-end .ae-t b{color:var(--tx-2);font-weight:550}

/* ── writing list ─────────────────────────────────────────── */
.nl{display:flex;flex-direction:column}
.ni{display:block;padding:var(--s6) 0;border-bottom:1px solid var(--bd);transition:.15s var(--ease)}
.ni:first-child{border-top:1px solid var(--bd)}
.ni:hover .ni-t{color:var(--acc)}
.ni-d{font-family:var(--sans);font-size:13px;color:var(--tx-3);display:block;margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
.ni-t{font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:-.02em;line-height:1.22;color:var(--tx);display:block;margin-bottom:var(--s2);transition:color .15s var(--ease)}
.ni-tag{display:none}
.ni-x{font-size:17px;color:var(--tx-2);line-height:1.6;display:block;max-width:64ch}

/* ── footer ───────────────────────────────────────────────── */
footer{border-top:1px solid var(--bd);padding:var(--s12) 0 var(--s16);margin-top:var(--s4)}
.f-in{display:flex;justify-content:space-between;gap:var(--s12);flex-wrap:wrap}
.f-b{font-family:var(--serif);font-size:20px;font-weight:600;margin-bottom:var(--s2);letter-spacing:-.015em}
.f-t{font-size:16px;color:var(--tx-2);max-width:46ch;line-height:1.6}
.f-l{display:flex;flex-direction:column;gap:var(--s2)}
.f-l a{font-family:var(--sans);font-size:14px;color:var(--tx-2);transition:color .15s var(--ease);min-height:32px;display:flex;align-items:center}
.f-l a:hover{color:var(--acc)}
.f-l svg{display:none}
.f-bot{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--bd);font-family:var(--sans);font-size:13px;color:var(--tx-3);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}

.reveal{opacity:1;transform:none}

@media (max-width:760px){
  body{font-size:18px}
  section.blk{padding:var(--s12) 0}
  article p,article li{font-size:18px}
  .a-lede{font-size:19px}
  .ni-t{font-size:22px}
  .nav-l{gap:var(--s4)}
  blockquote p{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  @page{margin:14mm}
  nav,footer,.a-back,.a-end,.btns{display:none!important}
  body{background:#fff;font-size:11pt}
  .pullbox{background:#f3f3f6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}