/* ============================================================
   SECOND BELL STUDIO — Resources / Field Manuals
   Re-skins the three guide layouts in the workbench palette:
   mahogany masthead, cream paper, brass + red ink. Reuses the
   tokens, base type, buttons, grain and reveal from styles.css;
   adds the guide-specific components (TOC, cards, callouts,
   tables, code blocks, recipes, diagrams, meters, ladders).
   Loaded after styles.css + polish.css so night mode still wins.
   ============================================================ */

/* local accents, scoped to resource pages, flipped for night mode */
.guide-page {
  --g-line:      rgba(44,29,20,.14);
  --g-line-2:    rgba(44,29,20,.24);
  --g-green:     #3f6b54;
  --g-green-bg:  #e8efe6;
  --g-green-bd:  #bcd3c3;
  --g-warn-bg:   #f8e6db;
  --g-warn-bd:   #ecc3ab;
  --g-note-bg:   #f5ecd4;
  --g-note-bd:   #e3cf9f;
  --g-card:      var(--cream);
  --g-code-bg:   #1c0e08;
  --g-code-fg:   #f3e9d6;
  --g-code-cmt:  #b79a72;
  --g-code-cmd:  var(--brass-bright);
}
html[data-theme="night"] .guide-page {
  --g-line:      rgba(239,227,207,.14);
  --g-line-2:    rgba(239,227,207,.22);
  --g-green:     #8fc1a3;
  --g-green-bg:  rgba(74,107,84,.20);
  --g-green-bd:  rgba(140,190,160,.30);
  --g-warn-bg:   rgba(150,60,45,.20);
  --g-warn-bd:   rgba(200,90,70,.32);
  --g-note-bg:   rgba(150,120,50,.16);
  --g-note-bd:   rgba(210,170,90,.30);
  --g-card:      #241a13;
  --g-code-bg:   #140a06;
}

/* ============================================================
   MASTHEAD — a short mahogany bar carrying the site nav, then a
   field-manual title block. Shares the look of the home hero.
   ============================================================ */
.page-head {
  position: relative; background: var(--wood-900); color: var(--on-wood);
  overflow: hidden;
  background-image:
    radial-gradient(1100px 460px at 82% -30%, rgba(227,184,100,.12), transparent 60%);
}
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -1px 0 rgba(243,233,214,.10);
}

/* nav — a trimmed copy of the home nav so the two pages feel like one site */
.page-head .nav {
  position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter); gap: 20px;
}
.page-head .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-wood); }
.page-head .brand-mark {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, #f6dd98, #c2873a 55%, #7c531f 100%);
  color: #6f4a1c; box-shadow: inset 0 1px 3px rgba(255,245,210,.6), 0 3px 8px rgba(0,0,0,.35);
  flex: none;
}
.page-head .brand-name { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; font-size: 19px; }
.page-head .brand-name small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-bright); margin-top: -2px; }
.page-head .nav-links { display: flex; align-items: center; gap: 30px; }
.page-head .nav-links a { text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 15px; color: rgba(243,233,214,.82); transition: color .2s; }
.page-head .nav-links a:hover,
.page-head .nav-links a.here { color: var(--brass-bright); }
.page-head .nav-pill {
  font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .04em;
  padding: 9px 16px; border: 1.5px solid rgba(227,184,100,.45); border-radius: 100px;
  color: var(--brass-bright); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  text-decoration: none; transition: background .2s, border-color .2s;
}
.page-head .nav-pill:hover { background: rgba(227,184,100,.1); border-color: var(--brass-bright); }
.page-head .nav-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-bright); box-shadow: 0 0 0 0 rgba(227,184,100,.7); animation: bellPulse 2.4s infinite; }
@keyframes bellPulse { 0% { box-shadow: 0 0 0 0 rgba(227,184,100,.5); } 70%,100% { box-shadow: 0 0 0 16px rgba(227,184,100,0); } }

/* title block */
.page-head-body { padding: clamp(40px, 7vw, 86px) 0 clamp(44px, 7vw, 78px); position: relative; z-index: 2; }
.page-head .crumb {
  font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(243,233,214,.6); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.page-head .crumb a { color: var(--brass-bright); text-decoration: none; }
.page-head .crumb a:hover { text-decoration: underline; }
.page-head .crumb .sep { opacity: .5; }
.page-head .kicker {
  font-family: var(--display); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  font-size: 13px; color: var(--brass-bright); display: inline-flex; align-items: center; gap: 10px;
}
.page-head .kicker::before { content: ""; width: 28px; height: 2px; background: var(--brass-bright); display: inline-block; }
.page-head h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(38px, 6.6vw, 78px);
  line-height: 1.0; letter-spacing: -.035em; margin: 20px 0 0; max-width: 18ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.page-head h1 em { font-style: normal; color: var(--brass-bright); }
.page-head .dek { font-size: clamp(18px, 2.1vw, 22px); color: rgba(243,233,214,.82); max-width: 64ch; margin: 22px 0 0; line-height: 1.55; }
.page-head .brandline {
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .03em;
  color: rgba(243,233,214,.62); margin-top: 30px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.page-head .brandline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-bright); display: inline-block; }

/* ============================================================
   SHELL — sticky TOC + content column (guides only)
   ============================================================ */
.shell { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; padding: clamp(46px, 6vw, 76px) 0 40px; }
nav.toc {
  position: sticky; top: 24px; align-self: start;
  font-family: var(--display); font-size: 13.5px; line-height: 1.5; font-weight: 600;
  padding: 6px 0;
}
nav.toc .tlabel { font-weight: 800; text-transform: uppercase; letter-spacing: .18em; color: var(--red); font-size: 11.5px; margin-bottom: 14px; }
nav.toc a {
  display: block; color: var(--ink-soft); text-decoration: none; padding: 6px 0 6px 14px;
  border-left: 2px solid var(--g-line-2); transition: color .18s, border-color .18s, transform .18s;
}
nav.toc a:hover { color: var(--ink); border-left-color: var(--red); transform: translateX(2px); }
main.guide { min-width: 0; padding-bottom: 80px; }

/* ============================================================
   GUIDE TYPOGRAPHY
   ============================================================ */
main.guide section { margin: 0 0 64px; scroll-margin-top: 24px; }
main.guide .num { font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--red); letter-spacing: .18em; }
main.guide h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 42px);
  line-height: 1.04; letter-spacing: -.025em; margin: 6px 0 18px; color: var(--ink);
}
main.guide h3 { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.6vw, 26px); letter-spacing: -.01em; margin: 34px 0 10px; color: var(--ink); }
main.guide h4 { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 22px 0 6px; color: var(--ink); }
main.guide p { margin: 0 0 16px; }
main.guide a { color: var(--red-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
main.guide a:hover { color: var(--red); }
html[data-theme="night"] main.guide a { color: var(--red-bright); }
main.guide strong { font-weight: 700; color: var(--ink); }
main.guide em { font-style: italic; }
main.guide .lead { font-size: clamp(19px, 2.1vw, 22px); color: var(--ink-soft); line-height: 1.55; }
main.guide ul, main.guide ol { margin: 0 0 18px; padding-left: 22px; }
main.guide li { margin: 0 0 8px; }
main.guide li::marker { color: var(--red); }
main.guide hr.rule { border: none; border-top: 1px solid var(--g-line-2); margin: 46px 0; }
main.guide code {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  font-size: .82em; background: rgba(192,138,62,.16); padding: 2px 6px; border-radius: 5px; color: var(--red-deep);
}
html[data-theme="night"] main.guide code { color: var(--brass-bright); background: rgba(227,184,100,.14); }

/* ============================================================
   CARDS (hosting guide platform cards)
   ============================================================ */
.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .g2 { grid-template-columns: 1fr; } }
.card {
  background: var(--g-card); border: 1px solid var(--g-line-2); border-radius: 8px;
  padding: 26px 26px 22px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.card h3 { margin-top: 0; }
.card .price { font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--ink-soft); margin: -2px 0 14px; }
.card ul { font-size: 16px; }
.card .tag {
  font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  display: inline-block; padding: 5px 11px; border-radius: 100px; margin-bottom: 13px;
}
.t-web    { background: rgba(178,58,42,.12);  color: var(--red-deep); }
.t-server { background: var(--g-green-bg);     color: var(--g-green); }
.t-edge   { background: rgba(192,138,62,.16); color: var(--brass-deep); }
html[data-theme="night"] .t-web { color: var(--red-bright); }
html[data-theme="night"] .t-edge { color: var(--brass-bright); }
.bestfor { font-size: 15.5px; border-top: 1px dashed var(--g-line-2); padding-top: 13px; margin-top: 8px; color: var(--ink-soft); }
.bestfor b { color: var(--ink); }

/* ============================================================
   CALLOUTS
   ============================================================ */
.callout { border-radius: 8px; padding: 20px 22px; margin: 24px 0; border: 1px solid; font-size: 17px; }
.callout .ch { font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 7px; }
.callout p:last-child { margin-bottom: 0; }
.c-tip  { background: var(--g-green-bg); border-color: var(--g-green-bd); }
.c-tip .ch { color: var(--g-green); }
.c-warn { background: var(--g-warn-bg); border-color: var(--g-warn-bd); }
.c-warn .ch { color: var(--red-deep); }
html[data-theme="night"] .c-warn .ch { color: var(--red-bright); }
.c-note { background: var(--g-note-bg); border-color: var(--g-note-bd); }
.c-note .ch { color: var(--brass-deep); }
html[data-theme="night"] .c-note .ch { color: var(--brass-bright); }

/* ============================================================
   CODE BLOCKS
   ============================================================ */
main.guide pre {
  background: var(--g-code-bg); color: var(--g-code-fg); border-radius: 8px;
  padding: 20px 22px; overflow-x: auto; margin: 18px 0;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 14px; line-height: 1.7;
  box-shadow: var(--shadow-md);
}
main.guide pre .cmt { color: var(--g-code-cmt); }
main.guide pre .cmd { color: var(--g-code-cmd); }
main.guide pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ============================================================
   TABLES
   ============================================================ */
.tablewrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--g-line-2); border-radius: 8px; }
main.guide table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
main.guide th, main.guide td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--g-line); vertical-align: top; }
main.guide th {
  font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red-deep); background: rgba(192,138,62,.14);
}
html[data-theme="night"] main.guide th { color: var(--brass-bright); }
main.guide tr:last-child td { border-bottom: none; }
main.guide td b { color: var(--ink); }

/* ============================================================
   STACK / LAYERS DIAGRAM (hosting + editors guides)
   ============================================================ */
.stack, .layers { display: flex; flex-direction: column; gap: 11px; margin: 24px 0; }
.layer, .lay {
  display: flex; align-items: center; gap: 16px; background: var(--g-card);
  border: 1px solid var(--g-line-2); border-radius: 9px; padding: 15px 18px;
}
.lay { align-items: flex-start; }
.layer .ln, .lay .badge {
  font-family: var(--display); font-weight: 800; font-size: 12px; color: #fff; background: var(--red);
  min-width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 0 9px; letter-spacing: .04em;
}
.layer:nth-child(2) .ln { background: var(--g-green); }
.layer:nth-child(3) .ln { background: var(--brass-deep); }
.layer:nth-child(4) .ln { background: #7a5cab; }
.layer:nth-child(5) .ln { background: #3f6d8c; }
.lay:nth-child(1) .badge { background: var(--g-green); }
.lay:nth-child(2) .badge { background: var(--red); }
.lay:nth-child(3) .badge { background: var(--brass-deep); }
.layer .lt, .lay .lt { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.layer .ld, .lay .ld { font-size: 15.5px; color: var(--ink-soft); margin-top: 2px; }
.lay .ld b, .layer .ld b { color: var(--ink); }

/* ============================================================
   RECIPE / STACK BOX
   ============================================================ */
.recipe {
  background: linear-gradient(180deg, var(--cream), var(--paper-2));
  border: 1px solid var(--g-line-2); border-radius: 10px; padding: 24px; margin: 18px 0;
}
.recipe h4 { margin-top: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recipe .pill {
  font-family: var(--display); font-weight: 700; font-size: 11px; background: var(--wood-800); color: var(--on-wood);
  padding: 4px 9px; border-radius: 5px; letter-spacing: .06em;
}
html[data-theme="night"] .recipe .pill { background: var(--brass-deep); color: var(--wood-900); }
.chain { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--red-deep); margin: 10px 0 12px; }
html[data-theme="night"] .chain { color: var(--brass-bright); }

/* ============================================================
   PLATFORM CARDS + PORTABILITY METER (platforms + editors guides)
   ============================================================ */
.pcard {
  background: var(--g-card); border: 1px solid var(--g-line-2); border-radius: 10px;
  padding: 26px 28px 24px; margin: 22px 0; box-shadow: var(--shadow-sm); position: relative;
}
.pcard .top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pcard h3 { margin: 0; font-size: 27px; }
.owner { font-family: var(--display); font-weight: 600; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .05em; }
.oneline { font-style: italic; color: var(--ink-soft); font-size: 18px; margin: 6px 0 16px; }
.metarow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.chip {
  font-family: var(--display); font-weight: 600; font-size: 12px; padding: 5px 12px; border-radius: 100px;
  border: 1px solid var(--g-line-2); background: rgba(192,138,62,.08); color: var(--ink-soft);
}
.chip b { color: var(--ink); font-weight: 700; }
.chip.lvl-beg, .chip.free { background: var(--g-green-bg); border-color: var(--g-green-bd); color: var(--g-green); }
.chip.lvl-mid { background: rgba(192,138,62,.16); border-color: rgba(192,138,62,.4); color: var(--brass-deep); }
html[data-theme="night"] .chip.lvl-mid { color: var(--brass-bright); }
.pcard .body { display: grid; grid-template-columns: 1fr 210px; gap: 26px; align-items: start; }
@media (max-width: 760px) { .pcard .body { grid-template-columns: 1fr; gap: 16px; } }
.pcard .body p { margin: 0 0 10px; font-size: 17px; }
.pp { font-size: 15.5px; }
.pp b { color: var(--ink); }
.pp.good { color: var(--g-green); }
.pp.bad { color: var(--red-deep); }
html[data-theme="night"] .pp.bad { color: var(--red-bright); }

.meter { background: rgba(192,138,62,.08); border: 1px solid var(--g-line-2); border-radius: 9px; padding: 15px 16px; }
.meter .ml { font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 9px; }
.bars { display: flex; gap: 5px; margin-bottom: 9px; }
.bars span { height: 11px; flex: 1; border-radius: 3px; background: var(--g-line-2); }
.bars span.on { background: var(--red); }
.bars.g span.on { background: var(--g-green); }
.meter .mscore { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--ink); }
.meter .mnote { font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 4px; }

/* ============================================================
   SPECTRUM (platforms guide)
   ============================================================ */
.spectrum { background: var(--g-card); border: 1px solid var(--g-line-2); border-radius: 10px; padding: 24px 26px; margin: 22px 0; }
.spectrum .axis { display: flex; justify-content: space-between; font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.spectrum .track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--red), var(--brass), var(--g-green)); margin: 8px 0 20px; }
.specrow { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: start; padding: 12px 0; border-top: 1px dashed var(--g-line-2); }
.specrow:first-of-type { border-top: none; }
.specrow .name { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); }
.specrow .name small { display: block; font-family: var(--display); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; margin-top: 3px; }
.specrow .desc { font-size: 16px; color: var(--ink-soft); }
.specrow .desc b { color: var(--ink); }
@media (max-width: 760px) { .specrow { grid-template-columns: 1fr; gap: 3px; } }

/* ============================================================
   SCENARIO CARDS (platforms guide)
   ============================================================ */
.scenarios { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
@media (max-width: 760px) { .scenarios { grid-template-columns: 1fr; } }
.scen { background: var(--g-card); border: 1px solid var(--g-line-2); border-radius: 9px; padding: 20px 22px; }
.scen .q { font-family: var(--display); font-weight: 800; font-size: 18px; margin-bottom: 6px; color: var(--ink); letter-spacing: -.01em; }
.scen .a { font-size: 16px; color: var(--ink-soft); }
.scen .a b { color: var(--red-deep); }
html[data-theme="night"] .scen .a b { color: var(--red-bright); }

/* ============================================================
   PRICING LADDER (editors guide)
   ============================================================ */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
@media (max-width: 760px) { .ladder { grid-template-columns: 1fr; } }
.rung { background: var(--g-card); border: 1px solid var(--g-line-2); border-radius: 10px; padding: 20px; }
.rung .rt { font-family: var(--display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.rung .rp { font-family: var(--display); font-weight: 800; font-size: 30px; margin: 4px 0 2px; color: var(--ink); letter-spacing: -.02em; }
.rung .rp small { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.rung .rd { font-size: 15.5px; color: var(--ink-soft); margin-top: 6px; }
.rung.hot { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.rung.hot .rt { color: var(--red); }

/* ============================================================
   EXAMPLE TIMELINE (editors guide)
   ============================================================ */
.ex { background: linear-gradient(180deg, var(--cream), var(--paper-2)); border: 1px solid var(--g-line-2); border-radius: 10px; padding: 24px 26px; margin: 22px 0; }
.ex h4 { margin: 0 0 14px; font-family: var(--display); font-weight: 800; font-size: 21px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex .pill { font-family: var(--display); font-weight: 700; font-size: 11px; background: var(--wood-800); color: var(--on-wood); padding: 4px 9px; border-radius: 5px; letter-spacing: .05em; }
html[data-theme="night"] .ex .pill { background: var(--brass-deep); color: var(--wood-900); }
.tl { border-left: 2px solid var(--g-line-2); padding-left: 18px; margin: 0; }
.tl .step { position: relative; padding: 0 0 16px; }
.tl .step:last-child { padding-bottom: 0; }
.tl .step::before { content: ""; position: absolute; left: -25px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); border: 2px solid var(--paper); }
.tl .t { font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--red-deep); letter-spacing: .04em; }
html[data-theme="night"] .tl .t { color: var(--brass-bright); }
.tl .s { font-size: 16.5px; }
.tl .s b { color: var(--ink); }

/* ============================================================
   RESOURCES INDEX — the booklet cards
   ============================================================ */
.res-intro { padding: clamp(46px, 6vw, 72px) 0 8px; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 30px 0 10px; }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr; max-width: 560px; } }
.res-card {
  display: flex; flex-direction: column; background: var(--cream);
  border: 1px solid var(--g-line-2); border-radius: 10px; padding: 28px 26px 24px;
  text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-theme="night"] .res-card { background: #241a13; }
.res-card::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--red); }
.res-card.a2::before { background: var(--g-green); }
.res-card.a3::before { background: var(--brass); }
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--g-line-2); }
.res-card .res-n { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .18em; color: var(--brass-deep); }
html[data-theme="night"] .res-card .res-n { color: var(--brass-bright); }
.res-card .res-tag {
  font-family: var(--display); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-deep); background: rgba(178,58,42,.1); padding: 4px 10px; border-radius: 100px; align-self: flex-start;
  margin: 14px 0 0;
}
.res-card.a2 .res-tag { color: var(--g-green); background: var(--g-green-bg); }
.res-card.a3 .res-tag { color: var(--brass-deep); background: rgba(192,138,62,.16); }
html[data-theme="night"] .res-card.a3 .res-tag { color: var(--brass-bright); }
.res-card h3 { font-family: var(--display); font-weight: 800; font-size: 25px; letter-spacing: -.02em; margin: 14px 0 0; line-height: 1.1; }
.res-card p { color: var(--ink-soft); font-size: 16px; margin: 10px 0 0; }
.res-card .res-inside { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--g-line-2); display: flex; flex-direction: column; gap: 8px; }
.res-card .res-inside li { font-size: 14px; display: flex; gap: 9px; align-items: flex-start; color: var(--ink); }
.res-card .res-inside li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); margin-top: 7px; flex: none; }
.res-card .res-go {
  margin-top: 20px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--red);
  display: inline-flex; align-items: center; gap: 8px;
}
html[data-theme="night"] .res-card .res-go { color: var(--red-bright); }
.res-card .res-go svg { transition: transform .2s ease; }
.res-card:hover .res-go svg { transform: translateX(4px); }

.res-note { margin: 30px 0 0; }

/* ============================================================
   LITE FOOTER for resource pages
   ============================================================ */
.foot-lite { background: var(--wood-900); color: rgba(243,233,214,.62); position: relative; overflow: hidden; }
.foot-lite::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(227,184,100,.12), transparent 55%); }
.foot-lite .wrap { position: relative; z-index: 1; padding: 40px var(--gutter) 48px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-lite .fl-brand { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--on-wood); }
.foot-lite .fl-brand small { display: block; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-bright); margin-top: 1px; }
.foot-lite a { color: var(--brass-bright); text-decoration: none; font-family: var(--display); font-weight: 700; }
.foot-lite a:hover { text-decoration: underline; }
.foot-lite .fl-note { font-size: 13px; max-width: 52ch; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; gap: 0; }
  nav.toc { display: none; }
}
@media (max-width: 760px) {
  .page-head .nav-links { display: none; }
}