/* ============================================================
   NLR — Northline Robotics
   Brand system: "chic subway map × stylish NYT"
   Light editorial · paper & ink · transit-line accents
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Paper & ink */
  --paper:    #F6F4EF;
  --paper-2:  #FCFBF8;   /* raised cards */
  --paper-3:  #EEEBE3;   /* sunken bands */
  --ink:      #16140F;
  --ink-2:    #45433B;
  --ink-3:    #6F6B60;
  --ink-4:    #9C9789;

  /* Hairlines */
  --rule:     rgba(22,20,15,.16);
  --rule-2:   rgba(22,20,15,.30);
  --rule-soft:rgba(22,20,15,.08);

  /* Transit line palette */
  --l-red:    #C0392B;   /* the North Line — signature */
  --l-blue:   #2C5AA0;
  --l-green:  #2E7D52;
  --l-amber:  #C9871F;
  --l-purple: #6B4A95;
  --l-teal:   #1F8A8A;
  --signal:   var(--l-red);

  /* Type */
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --f-sans:   "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Metrics */
  --maxw:   1240px;
  --gutter: clamp(20px, 5vw, 60px);
  --nav-h:  66px;
  --ease:   cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body {
  font-family: var(--f-serif);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul { list-style:none; }
em,i { font-style: italic; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- Top transit tape ---------- */
.tape { display:flex; height:4px; }
.tape > i { flex:1; }
.tape .t-red{background:var(--l-red)} .tape .t-blue{background:var(--l-blue)}
.tape .t-green{background:var(--l-green)} .tape .t-amber{background:var(--l-amber)}
.tape .t-purple{background:var(--l-purple)} .tape .t-ink{background:var(--ink)}

/* ============================================================
   Layout
   ============================================================ */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 124px); position:relative; }
.section--tight { padding-block: clamp(40px,5vw,72px); }
.band { background: var(--paper-3); border-block:1px solid var(--rule); }
.rule { height:1px; background:var(--rule); border:0; }
.rule-2 { height:2px; background:var(--ink); border:0; }
.grid { display:grid; gap: clamp(20px,3vw,40px); }
.cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .cols-3,.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .cols-2,.cols-3,.cols-4{grid-template-columns:1fr} }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.split--wl{grid-template-columns:1.25fr .75fr} .split--wr{grid-template-columns:.85fr 1.15fr}
@media (max-width:880px){ .split,.split--wl,.split--wr{grid-template-columns:1fr; gap:40px} }

/* ============================================================
   Typography
   ============================================================ */
.display { font-family:var(--f-display); font-weight:400; line-height:1.0; letter-spacing:-.02em; font-optical-sizing:auto; }
.d-xl { font-size: clamp(2.9rem, 6.6vw, 5.7rem); }
.d-l  { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
h1,.h1 { font-family:var(--f-display); font-weight:400; font-size:clamp(2.1rem,4.2vw,3.3rem); line-height:1.04; letter-spacing:-.018em; }
h2,.h2 { font-family:var(--f-display); font-weight:400; font-size:clamp(1.7rem,3.1vw,2.5rem); line-height:1.08; letter-spacing:-.015em; }
h3,.h3 { font-family:var(--f-display); font-weight:500; font-size:clamp(1.2rem,1.7vw,1.45rem); line-height:1.2; letter-spacing:-.01em; }
.display em, h1 em, h2 em, .d-xl em, .d-l em { font-style:italic; }
.lede { font-family:var(--f-serif); font-weight:380; font-size:clamp(1.16rem,1.55vw,1.42rem); line-height:1.5; color:var(--ink-2); }
.body-serif p { margin-bottom: 1.05em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.measure { max-width: 64ch; } .measure-sm { max-width: 48ch; }
.balance { text-wrap: balance; }
.sans { font-family: var(--f-sans); }
strong,b { font-weight:600; }

/* eyebrow / section label — sans with a route tick */
.eyebrow { font-family:var(--f-sans); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:11px; }
.eyebrow::before { content:""; width:22px; height:3px; border-radius:2px; background:var(--signal); }
.eyebrow.b::before{background:var(--l-blue)} .eyebrow.g::before{background:var(--l-green)} .eyebrow.a::before{background:var(--l-amber)} .eyebrow.p::before{background:var(--l-purple)}
.eyebrow .num { color:var(--ink); font-variant-numeric:tabular-nums; }

.kicker { font-family:var(--f-sans); font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.section-head { margin-bottom: clamp(32px,5vw,60px); }
.section-head .h2 { margin-top:18px; }
.section-head--split { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; }

.dropcap::first-letter { font-family:var(--f-display); font-weight:500; float:left; font-size:3.6em; line-height:.78; padding:6px 10px 0 0; color:var(--ink); }

/* ============================================================
   Masthead / nav
   ============================================================ */
.masthead-strip { border-bottom:1px solid var(--rule); background:var(--paper); }
.masthead-strip .row { max-width:var(--maxw); margin-inline:auto; padding:7px var(--gutter); display:flex; justify-content:space-between; gap:16px;
  font-family:var(--f-sans); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.masthead-strip .row b { color:var(--ink-2); font-weight:600; }
@media (max-width:680px){ .masthead-strip{display:none} }

.site-nav { position:sticky; top:0; z-index:100; height:var(--nav-h); display:flex; align-items:center;
  background:var(--paper); border-bottom:1px solid var(--rule); transition:box-shadow .3s var(--ease), background .3s; }
.site-nav.is-stuck { box-shadow:0 1px 0 var(--rule), 0 8px 24px rgba(22,20,15,.05); background:rgba(246,244,239,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.nav-inner { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand__roundel { width:38px; height:38px; flex-shrink:0; }
.brand__name { display:flex; flex-direction:column; line-height:1; }
.brand__name b { font-family:var(--f-display); font-weight:600; font-size:1.18rem; letter-spacing:.02em; }
.brand__name span { font-family:var(--f-sans); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a { font-family:var(--f-sans); font-size:.78rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2);
  padding:9px 13px; position:relative; transition:color .2s var(--ease); }
.nav-links a:hover { color:var(--ink); }
.nav-links a.is-active { color:var(--ink); }
.nav-links a.is-active::after { content:""; position:absolute; left:13px; right:13px; bottom:0; height:3px; border-radius:2px; background:var(--signal); }
.nav-cta { display:flex; align-items:center; gap:10px; }
.nav-toggle { display:none; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--rule-2); border-radius:3px; }
.nav-toggle span { display:block; width:18px; height:2px; background:var(--ink); position:relative; transition:.25s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:.25s var(--ease); }
.nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:rotate(45deg) translate(4px,4px)}
body.nav-open .nav-toggle span::after{transform:rotate(-45deg) translate(4px,-4px)}
@media (max-width:1000px){
  .nav-toggle{display:flex}
  .nav-links{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper);
    border-bottom:1px solid var(--rule); padding:8px var(--gutter) 24px; transform:translateY(-10px); opacity:0; pointer-events:none; transition:.3s var(--ease); }
  body.nav-open .nav-links{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:15px 2px; border-bottom:1px solid var(--rule); font-size:.92rem; }
  .nav-cta .btn--ghost{display:none}
}

/* ============================================================
   Buttons & links
   ============================================================ */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--f-sans); font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding:13px 22px; border:1px solid var(--ink); border-radius:3px; transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease); white-space:nowrap; line-height:1; }
.btn .arrow{ transition:transform .3s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:#000; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule-2); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--red{ background:var(--signal); border-color:var(--signal); color:#fff; }
.btn--red:hover{ filter:brightness(.94); }
.btn--sm{ padding:9px 15px; font-size:.72rem; }
.btn--block{ display:flex; width:100%; justify-content:center; }
.link-arrow{ font-family:var(--f-sans); font-size:.8rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px; border-bottom:2px solid var(--signal); padding-bottom:3px; transition:gap .2s var(--ease); }
.link-arrow:hover{ gap:12px; }
a.inline-link{ color:var(--ink); border-bottom:1px solid var(--rule-2); transition:border-color .2s; }
a.inline-link:hover{ border-color:var(--ink); }

/* ============================================================
   Transit-map components
   ============================================================ */
.route-figure { position:relative; }
.route-figure svg { width:100%; height:auto; }
.legend { display:flex; flex-wrap:wrap; gap:14px 24px; font-family:var(--f-sans); font-size:.74rem; letter-spacing:.05em; color:var(--ink-2); }
.legend span{ display:inline-flex; align-items:center; gap:9px; text-transform:uppercase; font-weight:500; }
.legend span::before{ content:""; width:18px; height:4px; border-radius:2px; background:var(--ink); }
.legend .red::before{background:var(--l-red)} .legend .blue::before{background:var(--l-blue)} .legend .green::before{background:var(--l-green)} .legend .amber::before{background:var(--l-amber)} .legend .hollow::before{background:transparent; border:2px solid var(--ink-3); height:14px; width:14px; border-radius:50%}

/* station list (vertical transit line through content) */
.line-list { position:relative; padding-left:38px; }
.line-list::before { content:""; position:absolute; left:11px; top:8px; bottom:8px; width:4px; border-radius:3px; background:var(--signal); }
.line-list .stop { position:relative; padding:18px 0; border-bottom:1px solid var(--rule); }
.line-list .stop:last-child{ border-bottom:0; }
.line-list .stop::before { content:""; position:absolute; left:-32px; top:24px; width:16px; height:16px; border-radius:50%; background:var(--paper); border:4px solid var(--signal); }
.line-list .stop.future::before { border-color:var(--ink-3); }
.line-list .stop.now::before { background:var(--signal); box-shadow:0 0 0 4px rgba(192,57,43,.16); }
.line-list .stop h3{ margin-bottom:6px; }
.line-list .stop .when{ font-family:var(--f-sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; }
.line-list .stop p{ color:var(--ink-2); max-width:62ch; }

/* ============================================================
   Cards / editorial blocks
   ============================================================ */
.card { position:relative; background:var(--paper-2); border:1px solid var(--rule); border-radius:4px; padding:clamp(22px,2.4vw,30px); transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover{ border-color:var(--rule-2); transform:translateY(-3px); box-shadow:0 14px 34px rgba(22,20,15,.07); }
.card__tick{ width:30px; height:4px; border-radius:2px; background:var(--signal); margin-bottom:18px; }
.card__tick.b{background:var(--l-blue)} .card__tick.g{background:var(--l-green)} .card__tick.a{background:var(--l-amber)} .card__tick.p{background:var(--l-purple)}
.card h3{ margin-bottom:10px; }
.card p{ color:var(--ink-2); font-size:1rem; }
.card--link::after{ content:"→"; position:absolute; top:24px; right:24px; font-family:var(--f-sans); color:var(--ink-3); transition:transform .25s var(--ease), color .25s; }
.card--link:hover::after{ transform:translateX(3px); color:var(--ink); }

.feature{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding:24px 0; border-top:1px solid var(--rule); }
.feature .bullet{ width:14px; height:14px; border-radius:50%; border:4px solid var(--signal); background:var(--paper); margin-top:6px; }
.feature .bullet.b{border-color:var(--l-blue)} .feature .bullet.g{border-color:var(--l-green)} .feature .bullet.a{border-color:var(--l-amber)}
.feature h3{ margin-bottom:6px; } .feature p{ color:var(--ink-2); max-width:60ch; }

/* ============================================================
   By-the-numbers
   ============================================================ */
.numbers{ display:grid; grid-template-columns:repeat(4,1fr); }
.numbers > div{ padding:8px clamp(14px,2vw,28px); border-left:1px solid var(--rule); }
.numbers > div:first-child{ border-left:0; padding-left:0; }
.stat__num{ font-family:var(--f-display); font-weight:400; font-size:clamp(2.4rem,4.6vw,3.7rem); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__num .unit{ font-size:.36em; color:var(--ink-3); margin-left:.12em; font-family:var(--f-sans); font-weight:600; letter-spacing:0; vertical-align:.4em; }
.stat__label{ font-family:var(--f-sans); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:14px; }
@media (max-width:760px){ .numbers{grid-template-columns:1fr 1fr; gap:28px 0} .numbers>div{border-left:0; padding-left:0} .numbers>div:nth-child(even){border-left:1px solid var(--rule); padding-left:clamp(14px,4vw,24px)} }

/* ============================================================
   Tags / pills
   ============================================================ */
.tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-sans); font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--rule-2); border-radius:100px; padding:6px 13px; color:var(--ink-2); }
.tag::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--signal); }
.tag.b::before{background:var(--l-blue)} .tag.g::before{background:var(--l-green)} .tag.a::before{background:var(--l-amber)} .tag.p::before{background:var(--l-purple)}
.tag--plain::before{ display:none; }
.pill{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-sans); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--rule-2); border-radius:100px; padding:7px 14px; }
.pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--l-green); }

/* ============================================================
   Figures / captions / pull quotes (editorial)
   ============================================================ */
.figure{ border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); overflow:hidden; }
.figcap{ font-family:var(--f-sans); font-size:.74rem; letter-spacing:.04em; color:var(--ink-3); padding:14px 18px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pull{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.22; letter-spacing:-.01em; border-top:2px solid var(--ink); border-bottom:1px solid var(--rule); padding:28px 0; }
.pull em{ font-style:italic; }

/* placeholder media slot */
.ph{ position:relative; width:100%; height:100%; background:
   repeating-linear-gradient(135deg, var(--paper-3) 0 14px, #E7E3D9 14px 28px); }
.ph::after{ content:"IMAGE SLOT"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-sans); font-size:.7rem; letter-spacing:.18em; color:var(--ink-4); }
.aspect-16-9{aspect-ratio:16/9} .aspect-4-3{aspect-ratio:4/3} .aspect-1-1{aspect-ratio:1/1}

/* ============================================================
   Forms
   ============================================================ */
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--f-sans); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.input,.select,.textarea{ width:100%; background:var(--paper-2); border:1px solid var(--rule-2); border-radius:3px; padding:13px 14px; color:var(--ink); font-family:var(--f-serif); font-size:1rem; transition:border-color .2s; }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--ink); }
.textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .field-row{grid-template-columns:1fr} }
.form-note{ font-family:var(--f-sans); font-size:.76rem; color:var(--ink-3); }
.form-success{ border:1px solid var(--l-green); border-radius:4px; padding:22px; background:rgba(46,125,82,.06); }
.form-success .ok{ font-family:var(--f-sans); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--l-green); }

/* ============================================================
   CTA
   ============================================================ */
.cta{ border:2px solid var(--ink); border-radius:6px; padding:clamp(34px,6vw,68px); text-align:center; background:var(--paper-2); position:relative; overflow:hidden; }
.cta .tape{ position:absolute; top:0; left:0; right:0; }
.cta .btns{ margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ border-top:2px solid var(--ink); background:var(--paper); padding-block:clamp(44px,6vw,72px) 28px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr; gap:32px} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand p{ color:var(--ink-2); margin-top:16px; }
.footer-col h4{ font-family:var(--f-sans); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.footer-col a{ display:block; color:var(--ink-2); font-size:.98rem; padding:6px 0; transition:color .2s; }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid var(--rule);
  font-family:var(--f-sans); font-size:.72rem; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; }
.footer-status{ display:flex; align-items:center; gap:9px; }
.footer-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--l-green); }

/* ============================================================
   Reveal + utilities
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{transition-delay:.08s} [data-reveal][data-d="2"]{transition-delay:.16s} [data-reveal][data-d="3"]{transition-delay:.24s}
.mt-s{margin-top:12px} .mt-m{margin-top:24px} .mt-l{margin-top:40px} .mt-xl{margin-top:64px}
.mb-m{margin-bottom:24px} .mb-l{margin-bottom:40px}
.center{text-align:center} .mx-auto{margin-inline:auto}
.flex{display:flex} .wrap-gap{gap:14px;flex-wrap:wrap} .items-center{align-items:center} .between{justify-content:space-between}
.num{font-variant-numeric:tabular-nums} .nowrap{white-space:nowrap}
@media (max-width:680px){ .hide-mob{display:none!important} }

/* ============================================================
   Long-form articles (Research)
   ============================================================ */
:root{ --f-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; }

.article-hero{ border-bottom:1px solid var(--rule); padding-bottom:clamp(28px,4vw,44px); }
.article-cat{ font-family:var(--f-sans); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
  display:inline-flex; align-items:center; gap:10px; }
.article-cat::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--signal); }
.article-cat.b{color:var(--l-blue)} .article-cat.b::before{background:var(--l-blue)}
.article-cat.g{color:var(--l-green)} .article-cat.g::before{background:var(--l-green)}
.article-cat.a{color:var(--l-amber)} .article-cat.a::before{background:var(--l-amber)}
.article-cat.p{color:var(--l-purple)} .article-cat.p::before{background:var(--l-purple)}
.article-cat.t{color:var(--l-teal)} .article-cat.t::before{background:var(--l-teal)}
.article-title{ font-family:var(--f-display); font-weight:400; font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.05; letter-spacing:-.02em; margin-top:18px; max-width:20ch; }
.article-dek{ font-family:var(--f-serif); font-size:clamp(1.16rem,1.6vw,1.4rem); line-height:1.5; color:var(--ink-2); margin-top:18px; max-width:60ch; }
.article-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; font-family:var(--f-sans); font-size:.76rem; letter-spacing:.04em; color:var(--ink-3); text-transform:uppercase; }
.article-meta b{ color:var(--ink-2); font-weight:600; }

.article-wrap{ max-width:74ch; margin-inline:auto; }
.toc{ border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); padding:20px 24px; margin:36px 0; }
.toc h4{ font-family:var(--f-sans); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.toc ol{ list-style:none; counter-reset:toc; display:grid; gap:8px; }
.toc li{ counter-increment:toc; }
.toc a{ font-family:var(--f-sans); font-size:.92rem; color:var(--ink-2); display:flex; gap:12px; transition:color .2s; }
.toc a::before{ content:counter(toc,decimal-leading-zero); color:var(--signal); font-weight:600; }
.toc a:hover{ color:var(--ink); }

/* Prose */
.prose{ font-family:var(--f-serif); font-size:1.16rem; line-height:1.72; color:var(--ink); }
.prose > p{ margin:0 0 1.15em; }
.prose > p:first-of-type{ font-size:1.04em; }
.prose h2{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.15; letter-spacing:-.015em; margin:1.9em 0 .5em; padding-top:.4em; }
.prose h3{ font-family:var(--f-display); font-weight:500; font-size:1.3rem; margin:1.6em 0 .4em; }
.prose h2 .secnum{ font-family:var(--f-sans); font-size:.8rem; font-weight:700; letter-spacing:.1em; color:var(--signal); display:block; margin-bottom:8px; }
.prose a{ color:var(--ink); border-bottom:1px solid var(--rule-2); transition:border-color .2s; }
.prose a:hover{ border-color:var(--ink); }
.prose strong{ font-weight:600; }
.prose em{ font-style:italic; }
.prose ul, .prose ol{ margin:0 0 1.15em 1.3em; display:grid; gap:.5em; }
.prose ul{ list-style:none; margin-left:0; }
.prose ul > li{ position:relative; padding-left:1.5em; }
.prose ul > li::before{ content:""; position:absolute; left:0; top:.65em; width:9px; height:9px; border-radius:50%; border:3px solid var(--signal); }
.prose ol{ list-style:decimal; }
.prose li{ padding-left:.2em; }
.prose blockquote{ border-left:3px solid var(--ink); margin:1.5em 0; padding:.2em 0 .2em 1.2em; font-style:italic; color:var(--ink-2); font-size:1.1em; }
.prose hr{ border:0; height:1px; background:var(--rule); margin:2.2em 0; }
.prose figure{ margin:1.8em 0; }
.prose figure img, .prose figure svg{ width:100%; border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); }
.prose figcaption{ font-family:var(--f-sans); font-size:.8rem; color:var(--ink-3); margin-top:10px; padding-left:2px; }
.prose table{ width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.96rem; }
.prose th, .prose td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:top; }
.prose th{ font-family:var(--f-sans); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* inline + block code */
.prose code{ font-family:var(--f-code); font-size:.88em; background:var(--paper-3); border:1px solid var(--rule); border-radius:3px; padding:.08em .4em; }
.prose pre{ background:#14130F; color:#E9E5DC; border-radius:5px; padding:20px 22px; overflow:auto; margin:1.6em 0; font-size:.86rem; line-height:1.6; position:relative; }
.prose pre code{ font-family:var(--f-code); background:none; border:0; padding:0; color:inherit; font-size:inherit; }
.prose pre .c-cm{ color:#8C887E; font-style:italic; }   /* comment */
.prose pre .c-kw{ color:#E6A86B; }                       /* keyword */
.prose pre .c-fn{ color:#9DBE8D; }                       /* function */
.codecap{ font-family:var(--f-sans); font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:1.6em 0 -1em; }

/* callouts */
.callout{ border:1px solid var(--rule); border-left:4px solid var(--ink); border-radius:4px; background:var(--paper-2); padding:20px 24px; margin:1.8em 0; }
.callout .clabel{ font-family:var(--f-sans); font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px; display:flex; align-items:center; gap:9px; }
.callout p:last-child{ margin-bottom:0; }
.callout--drone{ border-left-color:var(--l-blue); background:rgba(44,90,160,.05); }
.callout--drone .clabel{ color:var(--l-blue); }
.callout--key{ border-left-color:var(--l-amber); background:rgba(201,135,31,.06); }
.callout--key .clabel{ color:var(--c9871f,#9a6a14); }
.callout--math{ border-left-color:var(--l-purple); background:var(--paper-2); }

/* math spacing */
mjx-container[display="true"]{ margin:1.4em 0 !important; overflow-x:auto; overflow-y:hidden; }
.math-fallback{ font-family:var(--f-code); font-size:.92em; background:var(--paper-3); border:1px solid var(--rule); border-radius:4px; padding:14px 16px; margin:1.4em 0; overflow-x:auto; color:var(--ink-2); }

/* sources */
.sources{ border-top:2px solid var(--ink); margin-top:3em; padding-top:1.4em; }
.sources h2{ font-family:var(--f-display); font-weight:500; font-size:1.4rem; margin-bottom:.7em; }
.sources ol{ list-style:none; counter-reset:src; display:grid; gap:14px; }
.sources li{ counter-increment:src; position:relative; padding-left:38px; font-family:var(--f-sans); font-size:.9rem; line-height:1.5; color:var(--ink-2); }
.sources li::before{ content:"["counter(src)"]"; position:absolute; left:0; top:0; font-weight:600; color:var(--signal); font-variant-numeric:tabular-nums; }
.sources a{ color:var(--ink); border-bottom:1px solid var(--rule-2); }
.sources a:hover{ border-color:var(--ink); }
.cite{ font-family:var(--f-sans); font-size:.7em; font-weight:600; vertical-align:super; color:var(--signal); text-decoration:none; padding:0 1px; }

/* article footer nav */
.article-foot{ border-top:1px solid var(--rule); margin-top:3em; padding-top:1.6em; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }

/* research index — post rows */
.postlist{ border-top:2px solid var(--ink); }
.post{ display:grid; grid-template-columns:54px 1fr auto; gap:24px; align-items:baseline; padding:30px 0; border-bottom:1px solid var(--rule); transition:background .2s var(--ease); }
.post:hover{ background:rgba(22,20,15,.022); }
.post__no{ font-family:var(--f-sans); font-size:.84rem; font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.post__cat{ font-family:var(--f-sans); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; color:var(--ink-3); margin-bottom:10px; }
.post__cat::before{ content:""; width:18px; height:4px; border-radius:2px; background:var(--signal); }
.post__cat.b::before{background:var(--l-blue)} .post__cat.g::before{background:var(--l-green)} .post__cat.a::before{background:var(--l-amber)} .post__cat.p::before{background:var(--l-purple)} .post__cat.t::before{background:var(--l-teal)}
.post h3{ font-size:clamp(1.3rem,2vw,1.6rem); margin-bottom:8px; transition:color .2s; }
.post:hover h3{ color:#000; }
.post p{ color:var(--ink-2); max-width:64ch; }
.post__meta{ font-family:var(--f-sans); font-size:.74rem; color:var(--ink-3); white-space:nowrap; text-transform:uppercase; letter-spacing:.05em; text-align:right; }
.post__meta .go{ display:block; color:var(--ink); font-weight:600; margin-top:8px; }
.post:hover .post__meta .go{ color:var(--signal); }
@media(max-width:720px){ .post{ grid-template-columns:1fr; gap:10px; } .post__no{display:none} .post__meta{text-align:left} }

/* ============================================================
   Inner-page components (light)
   ============================================================ */
.page-hero{ padding-top:clamp(28px,4vw,52px); padding-bottom:clamp(28px,4vw,48px); border-bottom:1px solid var(--rule); }
.page-hero__grid{ display:grid; grid-template-columns:1.5fr .9fr; gap:clamp(28px,5vw,64px); align-items:end; }
@media(max-width:880px){ .page-hero__grid{ grid-template-columns:1fr; gap:28px } }
.page-crumb{ font-family:var(--f-sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.page-crumb a{ color:var(--ink-3) } .page-crumb a:hover{ color:var(--ink) }

.readout-card{ border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); overflow:hidden; }
.readout-card .row{ display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--rule); font-family:var(--f-sans); font-size:.78rem; }
.readout-card .row:last-child{ border-bottom:0 }
.readout-card .k{ color:var(--ink-3); letter-spacing:.05em; text-transform:uppercase }
.readout-card .v{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums }
.readout-card .v.ok{ color:var(--l-green) }

.spec{ width:100%; border-collapse:collapse; }
.spec tr{ border-top:1px solid var(--rule) } .spec tr:last-child{ border-bottom:1px solid var(--rule) }
.spec th{ text-align:left; font-family:var(--f-sans); font-weight:600; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:14px 16px 14px 0; vertical-align:top; width:46%; }
.spec td{ padding:14px 0; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }

.panel{ border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); overflow:hidden; }
.panel__bar{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--paper-3); }
.panel__bar .ttl{ font-family:var(--f-sans); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.panel__bar .meta{ font-family:var(--f-sans); font-size:.7rem; color:var(--ink-3); letter-spacing:.04em; }
.panel__body{ padding:clamp(16px,2vw,24px); }
.readout{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden; }
.readout > div{ background:var(--paper-2); padding:14px; }
.readout .k{ font-family:var(--f-sans); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.readout .v{ font-family:var(--f-display); font-size:1.4rem; margin-top:6px; font-variant-numeric:tabular-nums; }
.readout .v small{ font-size:.58em; color:var(--ink-3); }

.diagram{ border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); padding:clamp(16px,2.4vw,30px); }
.diagram svg{ width:100%; height:auto; display:block; }
.diagram__cap{ font-family:var(--f-sans); font-size:.72rem; letter-spacing:.04em; color:var(--ink-3); margin-top:14px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; text-transform:uppercase; }

.deflist{ border-top:1px solid var(--rule); }
.deflist > div{ display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--rule); }
.deflist dt{ font-family:var(--f-display); font-weight:500; font-size:1.1rem; }
.deflist dt span{ display:block; font-family:var(--f-sans); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--signal); margin-top:6px; font-weight:600; }
.deflist dd{ color:var(--ink-2); }
@media(max-width:680px){ .deflist>div{ grid-template-columns:1fr; gap:8px } }

.app{ border:1px solid var(--rule); border-radius:4px; background:var(--paper-2); padding:clamp(22px,2.6vw,30px); position:relative; transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s; }
.app:hover{ border-color:var(--rule-2); transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,20,15,.06); }
.app__ico{ width:38px; height:38px; color:var(--ink); margin-bottom:18px; }
.app__tag{ position:absolute; top:20px; right:22px; }
.app h3{ margin-bottom:10px; }
.app > p{ color:var(--ink-2); }
.checks{ margin-top:16px; display:grid; gap:8px; }
.checks li{ display:flex; gap:10px; font-family:var(--f-sans); font-size:.84rem; color:var(--ink-2); }
.checks li::before{ content:"→"; color:var(--signal); }

.benefit{ border-top:1px solid var(--rule); padding-top:18px; }
.benefit .n{ font-family:var(--f-sans); font-size:.72rem; font-weight:600; color:var(--ink-3); letter-spacing:.06em; }
.benefit h3{ font-size:1.05rem; margin:10px 0 8px; font-family:var(--f-display); font-weight:500; }
.benefit p{ color:var(--ink-2); font-size:.95rem; }

.offer{ border:2px solid var(--ink); border-radius:6px; background:var(--paper-2); padding:clamp(26px,3vw,40px); position:relative; overflow:hidden; }
.offer__price{ font-family:var(--f-display); font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1; margin:14px 0; }
.offer__price small{ font-size:.34em; color:var(--ink-3); font-family:var(--f-sans); letter-spacing:.04em; }
.offer ul{ display:grid; gap:13px; margin:22px 0; }
.offer ul li{ display:flex; gap:12px; color:var(--ink-2); align-items:flex-start; }
.offer ul li svg{ width:18px; height:18px; color:var(--l-green); flex-shrink:0; margin-top:3px; }

.media-grid{ display:grid; gap:clamp(12px,1.6vw,20px); grid-template-columns:repeat(12,1fr); }
.media-grid > *{ min-width:0 }
.col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-6{grid-column:span 6} .col-8{grid-column:span 8} .col-12{grid-column:span 12}
@media(max-width:760px){ .col-3,.col-4,.col-6,.col-8{grid-column:span 12} }
.media-frame{ position:relative; border:1px solid var(--rule); border-radius:4px; overflow:hidden; background:var(--paper-3); }
.media-frame .label{ position:absolute; left:12px; bottom:12px; z-index:3; font-family:var(--f-sans); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); background:rgba(246,244,239,.86); border:1px solid var(--rule); padding:5px 9px; border-radius:3px; }
.media-frame .corner-tr{ position:absolute; right:10px; top:10px; z-index:3; font-family:var(--f-sans); font-size:.62rem; color:var(--ink-3); letter-spacing:.06em; }
.aspect-3-4{ aspect-ratio:3/4 }

.select{ width:100%; background:var(--paper-2); border:1px solid var(--rule-2); border-radius:3px; padding:13px 14px; color:var(--ink); font-family:var(--f-serif); font-size:1rem; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2316140F' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.check{ display:flex; gap:12px; align-items:flex-start; font-family:var(--f-serif); font-size:.96rem; color:var(--ink-2); }
.check input{ margin-top:4px; accent-color:var(--signal); }

/* cookie consent */
.consent{ position:fixed; left:16px; right:16px; bottom:16px; z-index:1000; max-width:560px; margin-inline:auto;
  background:var(--paper-2); border:1px solid var(--rule-2); border-radius:6px; box-shadow:0 18px 50px rgba(22,20,15,.16); overflow:hidden; }
.consent__tape{ height:4px; background:linear-gradient(90deg,var(--l-red) 0 20%,var(--l-blue) 20% 40%,var(--l-green) 40% 60%,var(--l-amber) 60% 80%,var(--l-purple) 80% 100%); }
.consent__in{ padding:18px 20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.consent__txt{ font-family:var(--f-sans); font-size:.84rem; color:var(--ink-2); line-height:1.5; flex:1; min-width:240px; }
.consent__btns{ display:flex; gap:10px; }
@media(max-width:520px){ .consent__in{ flex-direction:column; align-items:stretch } .consent__btns{ justify-content:flex-end } }