/* talaan.net content pages (Guides, Blog, News). Built only from the design-system tokens in home/ds/.
   Nav, footer, .wrap, .over, .geo and .btn match the home page (www/talaan.html). */
body { background: var(--surface-card); }  /* white reading surface; cards keep their borders */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.over { font: var(--type-overline); letter-spacing: var(--ls-mono-caps); text-transform: uppercase; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; }
.over::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.geo { font-family: var(--font-display); font-weight: var(--fw-black); letter-spacing: var(--ls-display); line-height: 1; }
h1.geo { font-size: clamp(36px, 5vw, 60px); margin: 14px 0 16px; text-wrap: balance; }
.lede { font: var(--type-body-lg); font-size: 18px; color: var(--text-secondary); max-width: 680px; margin: 0; text-wrap: pretty; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-xs); font: var(--fw-medium) 15px var(--font-sans); text-decoration: none; border: 0; cursor: pointer; }
.btn.p { background: var(--brand-primary); color: var(--text-on-brand); } .btn.p:hover { background: var(--brand-primary-hover); color: var(--text-on-brand); }

nav.top { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--surface-sunken) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-default); }
nav.top .wrap { height: 68px; display: flex; align-items: center; gap: 28px; }
.logo { display: flex; align-items: center; gap: .32em; text-decoration: none; color: var(--text-primary); font: var(--fw-black) 24px/1 var(--font-display); letter-spacing: -.03em; }
.logo svg { height: .78em; width: auto; }
nav.top .links { display: flex; gap: 22px; font-size: 14px; } nav.top .links a { color: var(--text-primary); text-decoration: none; } nav.top .links a:hover { color: var(--text-link-hover); }

footer { background: var(--ink-900); color: var(--bone); padding: 48px 0 56px; margin-top: 80px; }
footer .ft-sub { color: var(--ink-400); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
footer .ft-sub a { color: var(--bone); }
footer .ft-addr { margin-top: 14px; }
footer .g { display: grid; grid-template-columns: 3fr 2fr 2fr 2fr; gap: 28px; font-size: 14px; }
footer .g > div:first-child { padding-right: 24px; }
footer .g > div:first-child a { display: inline; margin: 0; }
footer .g b { display: block; font: var(--type-overline); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
footer .g a { display: block; color: var(--bone); text-decoration: none; margin-bottom: 6px; }
footer .g a:hover { color: var(--mustard-400); }

/* page */
.page { padding-top: 56px; }
.crumbs { font: var(--type-label-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.crumbs a { color: var(--text-secondary); }
.byline { font: var(--type-overline); letter-spacing: .06em; color: var(--text-tertiary); margin: 18px 0 0; padding-top: 14px; border-top: var(--rule-w) solid var(--border-heavy); max-width: 820px; }
.draft { display: inline-block; margin-top: 14px; padding: 4px 10px; background: var(--status-pending-bg); color: var(--status-pending-fg); border-radius: var(--radius-sm); font: var(--type-label-caps); letter-spacing: .08em; text-transform: uppercase; }
.note { margin-top: 32px; font: var(--type-caption); color: var(--text-tertiary); }

/* guide list */
.glist { margin-top: 44px; }
.glist h2 { font: var(--type-section); letter-spacing: .32em; text-transform: uppercase; margin: 0 0 12px; padding-top: 12px; border-top: var(--rule-w) solid var(--border-heavy); }
.glist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.glist a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 20px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); text-decoration: none; color: var(--text-primary); }
.glist a:hover { border-color: var(--border-heavy); }
.glist b { font: var(--fw-bold) 19px/1.25 var(--font-display); letter-spacing: -.01em; }
.glist span { color: var(--text-secondary); font-size: 14px; }
.glist em { align-self: flex-start; font: var(--type-label-caps); font-style: normal; text-transform: uppercase; color: var(--status-pending-fg); background: var(--status-pending-bg); padding: 2px 8px; border-radius: var(--radius-sm); }

/* article */
.art { display: grid; grid-template-columns: 220px minmax(0, 820px); gap: 48px; margin-top: 36px; align-items: start; }
.toc { position: sticky; top: 96px; font-size: 13px; }
.toc summary { list-style: none; cursor: default; } .toc summary::-webkit-details-marker { display: none; }
.toc b { display: block; font: var(--type-label-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; } .toc ul ul { padding-left: 12px; }
.toc li { margin: 2px 0; }
.toc a { display: block; padding: 4px 10px; margin-left: -12px; border-left: 2px solid transparent; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast), background var(--dur-fast); }
.toc a:hover { color: var(--text-primary); }
/* current section while scrolling: selected style from the design system (bone fill + vermilion marker) */
.toc a.on { color: var(--text-primary); font-weight: 600; background: var(--surface-card); border-left-color: var(--marker); }
.toc a.in { color: var(--text-primary); }
.prose { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: 32px 36px; font: var(--type-body-lg); font-size: 16px; color: var(--text-primary); }
.prose h2 { font: var(--fw-bold) 26px/1.2 var(--font-display); letter-spacing: -.02em; margin: 40px 0 12px; scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: var(--fw-semibold) 18px/1.3 var(--font-display); margin: 28px 0 8px; scroll-margin-top: 90px; }
.prose p, .prose li { line-height: 1.65; } .prose li { margin: 4px 0; }
.prose a { color: var(--text-link); }
.prose code { font: var(--type-mono); background: var(--surface-sunken); padding: 1px 5px; border-radius: var(--radius-xs); }
.prose blockquote { margin: 18px 0; padding: 12px 16px; background: var(--status-info-bg); color: var(--status-info-fg); border-left: 3px solid var(--status-info-solid); border-radius: var(--radius-xs); }
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font: var(--type-ui); font-size: 14px; display: block; overflow-x: auto; }
.prose th { text-align: left; background: var(--surface-sunken); font: var(--type-label-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); padding: 8px 10px; white-space: nowrap; }
.prose td { padding: 9px 10px; border-top: 1px solid var(--border-default); vertical-align: top; }
.prose td:first-child { white-space: nowrap; font-weight: 500; }
.sources { font-size: 14px; }

@media (max-width: 900px) {
  .art { grid-template-columns: minmax(0, 1fr); gap: 20px; } .toc { position: static; }
  .toc details { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 14px; background: var(--surface-card); }
  .toc summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .toc summary b { margin: 0; }
  .toc summary::after { content: "+"; font-size: 18px; color: var(--text-secondary); }
  .toc details[open] summary::after { content: "–"; }
  .toc details[open] summary { margin-bottom: 8px; }
  .glist ul { grid-template-columns: 1fr; }
  .prose { padding: 22px 18px; }
  nav.top .links { display: none; }
  footer .g { grid-template-columns: 1fr 1fr; } footer .g > div:first-child { grid-column: 1 / -1; padding-right: 0; }
}

/* news: a ledger on a white reading surface — time column in bone, topic tags, approved summaries, key dates */
.news .lede { margin-bottom: 28px; }
.ngrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.ntag { display: inline-block; font: var(--type-label-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); background: var(--surface-sunken); padding: 2px 7px; border-radius: var(--radius-sm); }
.nmeta { display: flex; align-items: center; gap: 6px; font: var(--type-label-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.nmeta img { width: 14px; height: 14px; border-radius: 2px; filter: grayscale(1); opacity: .75; }
.nsum { margin: 6px 0 0; color: var(--text-primary); font-size: 15px; line-height: 1.55; }
.nfor { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.nfor b { font: var(--type-label-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--status-accepted-fg); margin-right: 6px; }

.ntop { background: var(--surface-card); border: 1px solid var(--border-default); border-top: var(--rule-w) solid var(--brand-primary); border-radius: var(--radius-2xl); padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; }
.ntop-k { display: flex; gap: 12px; align-items: center; font: var(--type-label-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.ntop h2 { margin: 0; font: var(--fw-bold) clamp(22px, 2.4vw, 30px)/1.2 var(--font-display); letter-spacing: -.02em; }
.ntop h2 a { color: var(--text-primary); text-decoration: none; } .ntop h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ntop .nsum { font-size: 17px; }

.ntabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 10px; }
.ntabs a { font: var(--fw-medium) 13px var(--font-sans); color: var(--text-secondary); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; }
.ntabs a i { font-style: normal; font: var(--type-label-caps); color: var(--text-tertiary); margin-left: 3px; }
.ntabs a:hover { background: var(--surface-card); }
.ntabs a.on { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--surface-inverse); }
.ntabs a.on i { color: var(--text-inverse); opacity: .7; }

.ledger { list-style: none; margin: 0; padding: 0; background: var(--surface-card); border: 1px solid var(--border-default); border-top: var(--rule-w) solid var(--border-heavy); border-radius: var(--radius-xs); }
.ledger li { display: grid; grid-template-columns: 92px minmax(0, 1fr); border-top: 1px solid var(--border-default); }
.ledger li:first-child { border-top: 0; }
.ledger time { background: var(--surface-sunken); padding: 14px 12px; font: var(--type-label-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); border-right: 1px solid var(--border-default); }
.ledger li > div { padding: 13px 18px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ledger .nh { font: var(--fw-semibold) 16px/1.4 var(--font-sans); color: var(--text-primary); text-decoration: none; }
.ledger .nh:hover { text-decoration: underline; text-underline-offset: 3px; }

.nside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.nside section { background: var(--surface-card); border: 1px solid var(--border-default); border-top: var(--rule-w) solid var(--border-heavy); border-radius: var(--radius-xs); }
.nside h2 { margin: 0; padding: 12px 16px; font: var(--type-section); letter-spacing: .32em; text-transform: uppercase; border-bottom: 1px solid var(--border-default); }
.nside ul { list-style: none; margin: 0; padding: 0; }
.nside li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; padding: 12px 16px; border-top: 1px solid var(--border-subtle); column-gap: 10px; }
.nside li:first-child { border-top: 0; }
.nside li b { grid-row: 1; font: 900 32px/1 var(--font-numeral); color: var(--brand-primary); }
.nside li span { grid-row: 2; grid-column: 1; font: var(--type-label-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.nside li div { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; }
.nside li strong { font-weight: 600; }
.nside li em { font-style: normal; font: var(--type-label-caps); letter-spacing: .06em; color: var(--text-tertiary); }
.nall { display: block; padding: 11px 16px; border-top: 1px solid var(--border-default); font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: none; }
.nall:hover { background: var(--surface-sunken); }
.nguide { display: block; padding: 12px 16px; background: var(--surface-inverse); color: var(--text-inverse); text-decoration: none; border-radius: var(--radius-xs); font-weight: 600; }

@media (max-width: 900px) { .ngrid { grid-template-columns: 1fr; } .nside { position: static; order: -1; } }
@media (max-width: 560px) { .ledger li { grid-template-columns: 1fr; } .ledger time { border-right: 0; border-bottom: 1px solid var(--border-default); padding: 6px 12px; } }

/* news pages */
.ntabs a { text-decoration: none; display: inline-block; }
.npager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font: var(--fw-medium) 14px var(--font-sans); }
.npager > a, .npager > span { padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; }
.npager > span { color: var(--text-disabled); border-color: var(--border-default); }
.npager > a:hover { background: var(--surface-sunken); }
.npager .nums { display: flex; flex-wrap: wrap; gap: 4px; border: 0; padding: 0; }
.npager .nums a, .npager .nums b { min-width: 34px; text-align: center; padding: 6px 8px; border-radius: var(--radius-sm); font: var(--fw-medium) 13px var(--font-mono); text-decoration: none; color: var(--text-secondary); }
.npager .nums a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.npager .nums em { font-style: normal; padding: 6px 2px; color: var(--text-tertiary); }
.npager .nums b { background: var(--surface-inverse); color: var(--text-inverse); }

/* news: outlet icons under the disclaimer, greyscale, name on hover */
.nsrc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.nsrc span { font: var(--type-label-caps); letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); margin-right: 4px; }
.nsrc img { width: 18px; height: 18px; border-radius: 3px; filter: grayscale(1); opacity: .6; transition: opacity var(--dur-fast), filter var(--dur-fast); }
.nsrc img:hover { filter: none; opacity: 1; }

/* phones: 20px gutters; guide tables stack each row (date, then what's due) instead of running off the screen */
@media (max-width: 600px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .prose { padding: 20px 16px; }
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: auto; }
  .prose thead { display: none; }
  .prose tr { border-top: 1px solid var(--border-default); padding: 10px 0; }
  .prose td { border-top: 0; padding: 2px 4px; }
  .prose td:first-child { white-space: normal; font-weight: 600; }
  .prose td[data-label]::before { content: attr(data-label); display: block; margin-top: 4px; font: var(--type-label-caps); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
}