/* pages.css: the About, Book, Insights, Article and Draws pages as the redesign artboards draw them
   (docs/SPEC_20261004_site-redesign-pages_v1.md, ADR-0016). Loaded after registry.css by components/site/Pages.js and
   components/tools/Draws.js. Rules from System.dc: hairlines and a 2px ink rule, navy carries authority, gold marks what
   matters now, figures in mono, icons beside words. Choice tiles and chips as System.dc specifies; the System hovers for buttons, source lines and list
   rows live in registry.css (design parity round 2, D6). */
.rg [hidden]{display:none!important}
.rg .eb{display:inline-flex;gap:8px;align-items:center}
.rg .serif{font-family:var(--serif);font-weight:700}
/* choice tile and chip (System.dc "Hover, focus and selection"); the buttons, source lines, icon box and list rows are in
   registry.css, which every page loads (design parity round 2, D6) */
.rg .tile:hover .ico{background:var(--navy);border-color:var(--navy);color:var(--white)}
.rg .tile{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--rule);background:var(--white);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s;cursor:pointer;font-size:15px;font-weight:400;text-align:left;position:relative}
.rg .tile:hover{border-color:var(--navy);color:var(--ink)}
.rg .tile .sub{color:var(--slate)}
.rg .tile:has(input:checked){border-color:var(--night);background:var(--night);color:var(--white)}
.rg .tile:has(input:checked) .ico{background:var(--gold);border-color:var(--gold);color:var(--night)}
.rg .tile:has(input:checked) .sub{color:var(--on-night)}
.rg .chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--rule);background:var(--white);color:var(--ink);font-size:14px;font-weight:400;cursor:pointer;transition:border-color .15s,background .15s;position:relative}
.rg .chip:hover{border-color:var(--navy)}
.rg .chip:has(input:checked){background:var(--night);border-color:var(--night);color:var(--white)}
.rg .tile:has(input:focus-visible),.rg .chip:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.rg .sr{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.rg .chips{display:flex;flex-wrap:wrap;gap:8px}
.rg .wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:8px}
.rg .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
/* figure cells on night */
.rg .fig{display:flex;gap:14px;align-items:flex-start;padding:20px 20px 20px 0;border-top:1px solid var(--night-line)}
.rg .fig .v{font-family:var(--mono);font-size:30px;line-height:1.1;color:var(--gold)}
.rg .fig .k{font-size:14px;color:var(--on-night)}.rg .fig .m{font-family:var(--mono);font-size:12px;color:var(--on-night-2)}
.rg .fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:0 24px}
/* section headers: title, English eyebrow, 2px rule */
.rg .shead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.rg .shead h2{display:flex;align-items:center;gap:12px;font-size:clamp(24px,3vw,30px)}
.rg .shead h2 svg{color:var(--navy)}
/* bands */
.rg .band{background:var(--night);color:var(--white)}
.rg .band .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.rg .band h2{font-size:clamp(24px,3vw,30px)}
.rg .band .line{color:var(--on-night)}
/* the booking form */
.rg .bk legend{width:100%;padding:0}
.rg .bk fieldset{border-top:0;padding:0;gap:16px;display:flex;flex-direction:column}
.rg .lg{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.rg .lg .mono{font-size:13px;color:var(--navy);font-family:var(--mono)}
.rg .lg .serif{font-size:24px}
.rg .lg .end{margin-left:auto;color:#5B6B82;display:inline-flex}
.rg .bk .field{display:grid;gap:6px;font-size:14px;font-weight:500}
.rg .bk input[type=text]:hover,.rg .bk input[type=email]:hover,.rg .bk select:hover,.rg .bk textarea:hover{border-color:var(--navy)}
.rg .bk input[type=text]:focus,.rg .bk input[type=email]:focus,.rg .bk select:focus,.rg .bk textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--gold)}
.rg .done{background:var(--night);color:var(--white);padding:40px;display:flex;flex-direction:column;gap:18px}
.rg .done[hidden]{display:none}
.rg .done dl{margin:0;display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);border-top:1px solid var(--night-line)}
.rg .done dt,.rg .done dd{margin:0;padding:12px 0;border-bottom:1px solid var(--night-line)}
.rg .done dt{color:var(--on-night-2)}
.rg .faq details{border-bottom:1px solid var(--rule)}
.rg .faq summary{display:flex;gap:12px;align-items:center;padding:18px 0;cursor:pointer;font-size:17px;font-weight:600;list-style:none}
.rg .faq summary::-webkit-details-marker{display:none}
.rg .faq summary .q{color:var(--navy);display:inline-flex}
.rg .faq summary .chev{margin-left:auto;color:var(--navy);display:inline-flex;transition:transform .15s}
.rg .faq details[open] summary .chev{transform:rotate(90deg)}
.rg .faq details p{padding:0 0 18px 32px;font-size:15px;line-height:1.7;color:var(--slate)}
.rg .side-h{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);padding-bottom:8px;border-bottom:2px solid var(--ink);display:block}
.rg .side-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px}
.rg .cicc{display:flex;gap:12px;align-items:flex-start;padding:16px;background:var(--mist);font-size:14px;line-height:1.6}
.rg .sticky{position:sticky;top:24px;align-self:start}
.rg .split2{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(300px,1fr);gap:56px;align-items:start}
/* the article: contents, prose, sources */
.rg .split3{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:48px;align-items:start}
.rg .toc{display:flex;flex-direction:column;gap:2px}
.rg .toc a{display:flex;gap:10px;align-items:baseline;padding:8px 0 8px 12px;border-left:2px solid var(--rule);color:var(--slate);text-decoration:none;font-size:14px;transition:border-color .15s,color .15s}
.rg .toc a:hover{border-left-color:var(--gold);color:var(--navy)}
.rg .toc a[aria-current]{border-left-color:var(--navy);color:var(--ink);font-weight:600}
.rg .prose h2{scroll-margin-top:24px}
.rg .prose tr:hover td{background:var(--mist)}
.rg .srcrow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--navy)}
@media (max-width:1100px){.rg .split3{grid-template-columns:minmax(0,1fr) 280px}.rg .split3 .toc{display:none}}
@media (max-width:960px){.rg .split2,.rg .split3{grid-template-columns:minmax(0,1fr)}.rg .split2 .sticky,.rg .split3 .sticky{position:static}}
@media (max-width:860px){.rg .hide-s{display:none}}
/* the draw tracker */
.rg .tabs{display:flex;flex-wrap:wrap}
.rg .tab{min-height:44px;padding:0 18px;border:1px solid var(--rule);background:var(--white);font:inherit;font-size:14px;cursor:pointer;color:var(--ink)}
.rg .tab:hover{border-color:var(--navy)}
.rg .tab[aria-pressed="true"]{background:var(--navy);color:var(--white);border-color:var(--navy)}
.rg .vbars{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px}
.rg .vbars .y{display:flex;flex-direction:column;justify-content:space-between;height:280px;font-family:var(--mono);font-size:11px;color:var(--slate);text-align:right}
.rg .vbars .plot{display:flex;align-items:flex-end;gap:32px;height:280px;border-bottom:1px solid var(--ink);border-left:1px solid var(--ink);padding:0 24px;background:repeating-linear-gradient(to top,#FFFFFF 0,#FFFFFF 69px,#E6EAF0 69px,#E6EAF0 70px)}
.rg .vbars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.rg .vbars .col span{font-family:var(--mono);font-size:15px;font-weight:500}
.rg .vbars .bar{display:block;width:100%;max-width:96px;background:var(--navy)}
.rg .vbars .x{display:flex;gap:32px;padding:0 24px}
.rg .vbars .x span{flex:1;text-align:center;font-family:var(--mono);font-size:12px;color:var(--slate)}
@media (max-width:640px){.rg .vbars .plot,.rg .vbars .x{gap:10px;padding:0 8px}.rg .vbars .x span{font-size:10px}}
.rg .ee-rows{display:flex;flex-direction:column;border-top:2px solid var(--ink);background:var(--white)}
.rg .ee-rows>div{display:grid;grid-template-columns:72px 110px minmax(0,1.6fr) minmax(0,2fr) 80px;gap:16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--rule);font-size:14px}
.rg .ee-rows .crs{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px}
.rg .ee-rows .crs i{display:block;height:12px;background:var(--navy)}
@media (max-width:760px){.rg .ee-rows>div{grid-template-columns:56px 52px minmax(0,1fr) 64px;gap:10px}.rg .ee-rows>div>.crs{grid-column:1 / -1}}
.rg table.ledger td.mono{white-space:nowrap}
/* the insights as a blog (docs/SPEC_20261005_insights-blog_v1.md; Insights.dc and Article.dc): covers, cards, the
   featured article, topic chips as links, the breadcrumb and the meta line on night. Full borders only, no coloured edge. */
.rg .cover{display:block;width:100%;height:auto}
.rg .card{display:flex;flex-direction:column;gap:18px;min-width:0}
.rg .card .cv{display:block;border:1px solid var(--rule);line-height:0;transition:border-color .15s}
.rg .card:hover .cv{border-color:var(--navy)}
.rg .card .cb{display:flex;flex-direction:column;gap:10px;min-width:0}
.rg .ctop{display:inline-flex;align-self:flex-start;gap:8px;align-items:center;font-size:13px;font-weight:500;color:var(--navy);text-decoration:none}
.rg .ctop:hover{color:var(--night);text-decoration:underline;text-underline-offset:4px}
.rg .ct{margin:0;font-size:21px;line-height:1.4;text-wrap:pretty}
.rg .ct a{color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;text-decoration-thickness:2px;transition:text-decoration-color .15s}
.rg .card:hover .ct a,.rg .ct a:hover{color:var(--ink);text-decoration-color:var(--gold)}
.rg .cd{margin:0;font-size:15px;line-height:1.65;color:var(--slate);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rg .cm{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--slate)}
.rg .cm span{display:inline-flex;gap:6px;align-items:center}
.rg .cm svg{color:#8A94A3}
.rg .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:48px 32px}
.rg a.chip{text-decoration:none}.rg a.chip .n{font-size:12px;color:var(--slate)}
.rg a.chip:hover{color:var(--ink)}
.rg a.chip.sel{background:var(--night);border-color:var(--night);color:var(--white)}
.rg a.chip.sel .n{color:var(--on-night-2)}.rg a.chip.sel:hover{color:var(--white)}
.rg .feat{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:center}
.rg .feat .cv{display:block;border:1px solid var(--night-line);line-height:0;transition:border-color .15s}
.rg .feat .cv:hover{border-color:var(--gold)}
.rg .feat h2 a{color:var(--white);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:2px;transition:text-decoration-color .15s}
.rg .feat h2 a:hover{color:var(--white);text-decoration-color:var(--gold)}
.rg .meta{margin:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--on-night-2)}
.rg .meta span{display:inline-flex;gap:8px;align-items:center}
.rg .hero-cv{border:1px solid var(--night-line);line-height:0;margin:6px 0 14px}
.rg .crumb ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12px}
.rg .crumb li{display:inline-flex;gap:8px;align-items:center;color:var(--on-night-2)}
.rg .crumb li svg{color:#5B6B82}
.rg .crumb a{color:var(--on-night-2);text-decoration:none}.rg .crumb a:hover{color:var(--gold)}
.rg .crumb [aria-current]{color:var(--white)}
@media (max-width:960px){.rg .feat{grid-template-columns:minmax(0,1fr)}}