/* research.css — FROZEN CONTRACT. Lead-created, lead-owned. No lane edits this file.
   Ships to trilocore-site/assets/css/research.css and is linked BEFORE <style> in every
   /research/ page (measured: linking after </style> changes NAV_MD5 e073c709f1 -> 007818dc58
   and fails the gate).

   Adapted from research/anthropic-research-page-design.md. What is adopted is the IA and the
   editorial restraint: an archive-as-register, metadata rationed to date + category, hairlines
   and whitespace instead of cards and shadows, accent colour absent from chrome. What is NOT
   adopted is Anthropic's brand skin — their fonts, their ivory/clay palette, their illustration
   style. This is the Trilocore light skin.

   CONTRAST: text orange is --orange-text #B34700 (measured 5.50 on white / 5.22 on gray-50 /
   4.95 on tint). --orange #E85D04 is the MARK only and measures 3.50 — never use it for text.
   #B34700 measures 3.25 on --navy and 3.1 on the dark console surface, so it is barred there;
   the console uses its own --d-* tokens. */

:root{
  --d-bg:#0d1117; --d-line:#1f2733; --d-txt:#d7dde5; --d-dim:#8b949e;
  --hair:#e6e4dd;
  --reg-idle:#6b7280;
}

/* ---- shared page rhythm ---- */
.rs-wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.rs-rule{border:0;border-top:1px solid var(--hair);margin:0}
.rs-sec{padding:56px 0}

/* ---- hero: title left, lede right. No imagery, no CTA. ---- */
.rs-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:72px 0 40px}
.rs-hero h1{font-size:52px;line-height:1.05;letter-spacing:-.02em;margin:0;font-weight:600}
.rs-hero p{font-size:19px;line-height:1.6;color:var(--ink-50,#4b5563);margin:0;max-width:52ch}
@media(max-width:820px){
  .rs-hero{grid-template-columns:1fr;gap:20px;padding:48px 0 32px}
  .rs-hero h1{font-size:36px}
}

/* ---- ONE featured item. 6 items is too few for a 1+4 grid — a 1+4 would reprint
       5 of 6 rows immediately below. Register excludes the featured slug. ---- */
.rs-feat{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start;padding:40px 0}
.rs-feat .meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--reg-idle);margin:0 0 12px}
.rs-feat h2{font-size:32px;line-height:1.2;letter-spacing:-.015em;margin:0 0 14px;font-weight:600}
.rs-feat h2 a{color:inherit;text-decoration:none}
.rs-feat h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.rs-feat p{font-size:17px;line-height:1.65;color:var(--ink-50,#4b5563);margin:0;max-width:56ch}
.rs-feat img{width:100%;height:auto;border:1px solid var(--hair);border-radius:6px;display:block}
@media(max-width:820px){.rs-feat{grid-template-columns:1fr;gap:20px}.rs-feat h2{font-size:26px}}

/* ---- the register: date | category | title. The core adopted pattern.
       No thumbnails, no summaries, no authors, no reading time, no engagement furniture. ---- */
.rs-reg{margin:0;border-top:1px solid var(--hair)}
.rs-reg-head,.reg-row{display:grid;grid-template-columns:2fr 2fr 5fr;gap:24px;align-items:baseline}
.rs-reg-head{padding:14px 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--reg-idle);border-bottom:1px solid var(--hair)}
.reg-row{padding:20px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--reg-idle)}
.reg-row:hover{color:var(--ink,#111827)}
.reg-row:hover .reg-title{text-decoration:underline;text-underline-offset:3px}
.reg-date,.reg-cat{font-size:14px;white-space:nowrap}
.reg-title{font-size:17px;line-height:1.45;color:var(--ink,#111827)}
.reg-row:focus-visible{outline:2px solid var(--orange-text,#B34700);outline-offset:3px}
@media(max-width:720px){
  .rs-reg-head{display:none}
  .reg-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .reg-date,.reg-cat{display:inline;font-size:13px}
  .reg-cat::before{content:"· "}
}

/* ---- article page: centred title block, then a narrow reading measure ---- */
.rs-art{max-width:720px;margin:0 auto;padding:0 24px}
.rs-art-head{padding:64px 0 8px;text-align:center}
.rs-art-head .cat{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--reg-idle);margin:0 0 16px}
.rs-art-head h1{font-size:44px;line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;font-weight:600}
.rs-art-head .date{font-size:15px;color:var(--reg-idle);margin:0}
.rs-art .lead{font-size:20px;line-height:1.6;color:var(--ink-50,#4b5563);margin:32px 0 0}
@media(max-width:720px){.rs-art-head{padding:40px 0 4px}.rs-art-head h1{font-size:30px}}

.rs-art .prose{font-size:17px;line-height:1.75;max-width:66ch;margin:0 auto}
.rs-art .prose h2{font-size:26px;line-height:1.25;letter-spacing:-.01em;margin:44px 0 14px;font-weight:600}
.rs-art .prose h3{font-size:20px;margin:32px 0 10px;font-weight:600}
.rs-art .prose p{margin:0 0 18px}
.rs-art .prose ul,.rs-art .prose ol{margin:0 0 18px;padding-left:22px}
.rs-art .prose li{margin:0 0 8px}
.rs-art .prose a{color:var(--ink,#111827);text-decoration:underline;text-underline-offset:3px}
.rs-art .prose a:hover{color:var(--orange-text,#B34700)}
.rs-art .prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--hair);
  background:#fafaf8;color:var(--ink-50,#4b5563)}
.rs-art .prose blockquote p:last-child{margin:0}
.rs-art .prose hr{border:0;border-top:1px solid var(--hair);margin:36px 0}
.rs-art .prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.rs-art .prose th,.rs-art .prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.rs-art .prose th{font-weight:600;color:var(--ink,#111827)}
.rs-art .prose img{max-width:100%;height:auto}

/* ---- dark console cards, ported from trilocore-blogs/static/assets/blog.css.
       NOTE: this is a deliberate visual change to the three pre-existing articles, which
       previously rendered code on the light surface with no card. Recorded in PLAN §C. ---- */
.rs-art .prose pre{background:var(--d-bg);border:1px solid var(--d-line);border-radius:10px;
  padding:16px 18px;overflow-x:auto;max-width:100%;margin:0 0 22px;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.65;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06)}
.rs-art .prose pre code{background:none;color:var(--d-txt);padding:0;font-size:inherit}
.rs-art .prose code{background:#f3f4f6;border-radius:4px;padding:.12em .38em;font-size:.92em;
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
/* Legacy terminal spans from the pre-existing articles. They shipped with NO rules at all
   (measured), so they rendered inert. Given a dark surface they now need explicit colours;
   all four are checked against --d-bg #0d1117. */
.rs-art .prose pre .c{color:var(--d-dim)}
.rs-art .prose pre .k{color:#79c0ff}
.rs-art .prose pre .g{color:#7ee787}
.rs-art .prose pre .hi{color:#e3b341}
.rs-art .prose pre .crit{color:#ff7b72}

@media(prefers-reduced-motion:reduce){
  .reg-row,.rs-feat h2 a{transition:none}
}