/* =====================================================================
   Tech Talk Ideas — Slate & Teal
   No webfonts. Every family below is already on the reader's machine,
   which means no render delay, no external request, and none of the
   uniform look that a Google Fonts stack gives a site.
   ===================================================================== */

:root{
  color-scheme: light dark;

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;

  /* ink */
  --ink:        #10161a;
  --ink-2:      #38434a;
  --ink-3:      #5f6c74;
  --ink-faint:  #8a959c;

  /* ground */
  --paper:      #f7f7f5;
  --surface:    #ffffff;
  --sunk:       #eef0ee;
  --rule:       #e2e4e1;
  --rule-strong:#c7ccc8;

  /* brand */
  --deep:       #10302e;   /* masthead, footer, active chip */
  --deep-ink:   #dfeae7;   /* text on --deep */
  --deep-faint: #93aeaa;

  /* accent */
  --accent:     #0e7c72;
  --accent-soft:#e4f2ef;
  --accent-line:#a8d5ce;

  /* semantic */
  --amber:      #8a6a18;
  --amber-soft: #faf2de;
  --amber-line: #e2ce96;
  --danger:     #a3352b;
  --danger-soft:#fbedeb;
  --danger-line:#e8b4ac;
  --safe:       #0e7c72;

  --radius: 6px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:        #e6eae9;
    --ink-2:      #b2bebc;
    --ink-3:      #8b9997;
    --ink-faint:  #6e7c7a;

    --paper:      #0e1214;
    --surface:    #151b1d;
    --sunk:       #10171a;
    --rule:       #263033;
    --rule-strong:#3a4649;

    --deep:       #08201f;
    --deep-ink:   #d8e6e3;
    --deep-faint: #7fa09b;

    --accent:     #4fbfb1;
    --accent-soft:#102e2b;
    --accent-line:#1e5750;

    --amber:      #d9b15c;
    --amber-soft: #2a2415;
    --amber-line: #55492a;
    --danger:     #e8837a;
    --danger-soft:#2b1614;
    --danger-line:#5a2b26;
    --safe:       #4fbfb1;
  }
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* Every size below this line is in rem, so the root size is the one dial that
   scales the whole page — headings, nav, chips, kickers, captions together.
   17.5px is a 9% bump on the browser default. */
html{ font-size:17.5px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--serif);
  font-size:1.15rem; line-height:1.62;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{ max-width:720px; margin:0 auto; padding:0 22px; }
.wide{ max-width:1120px; margin:0 auto; padding:0 22px; }

a{ color:var(--accent); text-underline-offset:2px; }
a:hover{ color:var(--ink); }

/* 1. MASTHEAD ------------------------------------------------------------ */
header.site{ background:var(--deep); border-bottom:3px solid var(--accent); }
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:16px 0;
}
.brand{
  font-family:var(--serif); font-size:1.3rem; font-weight:700;
  letter-spacing:-.015em; color:#fff; text-decoration:none;
}
.brand .slash{ color:var(--accent); margin:0 .05em; }
nav.mainnav{
  display:flex; gap:17px; flex-wrap:wrap;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.01em;
}
nav.mainnav a{ color:var(--deep-faint); text-decoration:none; }
nav.mainnav a:hover, nav.mainnav a[aria-current]{ color:#fff; }

/* 2. LABELS AND KICKERS -------------------------------------------------- */
.kicker{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--pc,var(--accent)); margin:2.4rem 0 .7rem;
}
.eyebrow{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}

/* 3. HEADINGS ------------------------------------------------------------ */
h1.post{
  font-family:var(--serif);
  font-size:clamp(1.95rem,4.4vw,2.9rem); line-height:1.12;
  letter-spacing:-.018em; font-weight:700; margin:.1rem 0 .9rem;
}
h2{
  font-family:var(--serif);
  font-size:1.42rem; line-height:1.25; letter-spacing:-.012em;
  font-weight:700; margin:2.5rem 0 .8rem;
  padding-top:1.5rem; border-top:1px solid var(--rule);
}
h3{
  font-family:var(--serif);
  font-size:1.1rem; font-weight:700; margin:1.9rem 0 .55rem;
}
h2 + h3{ margin-top:1.1rem; }

/* 4. PROSE --------------------------------------------------------------- */
p{ margin:0 0 1.15rem; }
p.lede{
  font-size:1.2rem; line-height:1.55; color:var(--ink-2);
  margin-bottom:1.5rem;
}
ul, ol{ margin:0 0 1.2rem 1.25rem; }
li{ margin:.4rem 0; }
li::marker{ color:var(--accent); }
strong{ font-weight:700; }
blockquote{
  margin:1.5rem 0; padding-left:1.1rem;
  border-left:3px solid var(--accent-line); color:var(--ink-2);
}
hr{ border:0; border-top:1px solid var(--rule); margin:2.4rem 0; }

/* 5. CODE ---------------------------------------------------------------- */
code{
  font-family:var(--mono); font-size:.86em;
  background:var(--sunk); border:1px solid var(--rule);
  border-radius:4px; padding:.08em .32em;
}
pre{
  background:var(--sunk); border:1px solid var(--rule);
  border-radius:var(--radius); padding:.95rem 1rem;
  overflow-x:auto; margin:0 0 1.3rem;
}
pre code{
  font-size:.79rem; line-height:1.55;
  background:none; border:0; padding:0;
}
figure.listing{ margin:0 0 1.3rem; }
figure.listing::before{
  content:attr(data-label);
  display:block; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  border:1px solid var(--rule); border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  background:var(--surface); padding:.4rem .8rem;
}
figure.listing pre{ margin:0; border-radius:0 0 var(--radius) var(--radius); }

/* 6. META BAR ------------------------------------------------------------ */
.meta{
  font-family:var(--sans); font-size:.78rem; color:var(--ink-3);
  display:flex; gap:.45rem; flex-wrap:wrap; align-items:center;
  margin-bottom:1.4rem;
}
.meta .dot{ color:var(--rule-strong); }

/* 7. TAGS ---------------------------------------------------------------- */
.tagrow{ display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 2.2rem; }
.seriesnav{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin:0 0 2.2rem; padding:1rem 1.1rem; border:1px solid var(--rule);
  border-left:4px solid var(--pc, #8a3f6d); background:var(--paper2);
}
.seriesnav strong{ display:block; margin-top:.2rem; }
.serieslinks{ display:flex; justify-content:flex-end; gap:1rem; flex-wrap:wrap; font-size:.88rem; }
.serieslinks a{ max-width:20rem; }
.seriesblock{ margin:0 0 3.5rem; }
.seriesblock.archive{ padding-top:1rem; border-top:1px solid var(--rule); }
@media (max-width:700px){
  .seriesnav{ align-items:flex-start; flex-direction:column; }
  .serieslinks{ justify-content:flex-start; }
}
.tag{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.03em; color:var(--ink-3);
  background:var(--surface); border:1px solid var(--rule);
  border-radius:999px; padding:.22rem .6rem;
}
.tag:hover{ border-color:var(--accent-line); color:var(--accent); }

/* 7b. HORIZONTAL SCROLLER ------------------------------------------------
   Shared by the topic chip row and the subnav strip: a track that scrolls
   sideways, an arrow at each end, and a fade that only appears on a side
   with more row behind it. Arrows are hidden until the script confirms the
   track overflows, so a short row stays clean.
   --------------------------------------------------------------------- */
.scroller{ position:relative; }
.scroller .track{ scroll-behavior:smooth; }
.scroller::before,
.scroller::after{
  content:""; position:absolute; top:0; bottom:0; width:52px;
  pointer-events:none; opacity:0; transition:opacity .15s; z-index:1;
}
.scroller::before{
  left:0; background:linear-gradient(to left, transparent, var(--surface));
}
.scroller::after{
  right:0; background:linear-gradient(to right, transparent, var(--surface));
}
.scroller.can-prev::before{ opacity:1; }
.scroller.can-next::after{ opacity:1; }

.scroll-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0;
  border-radius:999px; border:1px solid var(--rule-strong);
  background:var(--surface); color:var(--ink-2);
  cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,.12);
  transition:color .12s, border-color .12s, background .12s;
}
.scroll-arrow:hover{ color:var(--accent); border-color:var(--accent); }
.scroll-arrow:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.scroll-arrow[hidden]{ display:none; }
.scroll-arrow.prev{ left:-7px; }
.scroll-arrow.next{ right:-7px; }
.scroll-arrow svg{ width:11px; height:11px; display:block; }
@media (prefers-reduced-motion: reduce){
  .scroller .track{ scroll-behavior:auto; }
}

/* 8. TOPIC FILTER -------------------------------------------------------- */
.topicbar{
  background:var(--surface);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:14px 0; margin:0 0 .5rem;
  position:sticky; top:0; z-index:20;
}
.filters-inner{
  display:flex; gap:8px; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.filters-inner::-webkit-scrollbar{ display:none; }
.filter{
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  white-space:nowrap; padding:.42rem .85rem;
  border-radius:999px; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink-2);
  cursor:pointer; transition:border-color .12s, color .12s, background .12s;
}
.filter:hover{ border-color:var(--accent); color:var(--accent); }
.filter:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.filter[aria-pressed="true"]{
  background:var(--deep); border-color:var(--deep); color:#fff;
}
@media (prefers-color-scheme: dark){
  /* --deep sits almost on top of the dark page colour, so the selected chip
     needs the accent to read as selected at all. */
  .filter[aria-pressed="true"]{
    background:var(--accent); border-color:var(--accent); color:#062522;
  }
}
.filter .n{ opacity:.6; font-weight:500; margin-left:.35em; }
.card.hidden{ display:none; }
.emptynote{
  font-family:var(--sans); font-size:.85rem; color:var(--ink-3);
  padding:2rem 0;
}

/* 9. CALLOUTS ------------------------------------------------------------ */
.note, .warn, .ok{
  border:1px solid var(--rule); border-left-width:3px;
  border-radius:var(--radius); padding:.85rem 1rem;
  margin:1.5rem 0; font-size:.94rem;
}
.note{ background:var(--amber-soft);  border-left-color:var(--amber);  border-color:var(--amber-line); }
.warn{ background:var(--danger-soft); border-left-color:var(--danger); border-color:var(--danger-line); }
.ok  { background:var(--accent-soft); border-left-color:var(--accent); border-color:var(--accent-line); }
.note p:last-child, .warn p:last-child, .ok p:last-child{ margin-bottom:0; }
.note .lbl, .warn .lbl, .ok .lbl{
  display:block; font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:.35rem;
}
.note .lbl{ color:var(--amber); }
.warn .lbl{ color:var(--danger); }
.ok   .lbl{ color:var(--accent); }

/* 10. TABLES ------------------------------------------------------------- */
.tablewrap{ overflow-x:auto; margin:0 0 1.6rem; }
table{ border-collapse:collapse; width:100%; font-size:.9rem; }
th, td{
  text-align:left; padding:.55rem .7rem;
  border-bottom:1px solid var(--rule); vertical-align:top;
}
th{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--rule-strong);
}
tbody tr:last-child td{ border-bottom:0; }
td code{ font-size:.8rem; }
table.rowlinks tr{ transition:background .1s; }
table.rowlinks td{ padding:.62rem .7rem; }
table.rowlinks tbody tr:hover td,
table.rowlinks tbody tr:focus-within td{ background:var(--accent-soft); }
table.rowlinks td a{ text-decoration:none; font-weight:600; }
table.rowlinks td a::after{ content:""; }

/* 11. CARDS -------------------------------------------------------------- */
.cardgrid{
  display:grid; gap:14px; margin:0 0 2rem;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
}
/* A pillar hub runs its card grid the full width of the page but keeps its
   heading and standfirst at a readable measure. */
.hubintro{ max-width:760px; }
.card{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:1rem 1.05rem;
  transition:border-color .12s, transform .12s;
}
.card:hover{ border-color:var(--accent-line); transform:translateY(-1px); }
.card .cardnum{
  display:block; font-family:var(--sans); font-size:.62rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--pc,var(--accent)); margin-bottom:.4rem;
}
.card h3{ font-size:1.02rem; line-height:1.3; margin:0 0 .4rem; }
.card h3 a{ text-decoration:none; color:var(--ink); }
.card h3 a:hover{ color:var(--accent); }
.card h3 a::after{ content:""; }
.card p{ font-size:.86rem; line-height:1.5; color:var(--ink-3); margin:0; }

/* 12. PILLAR BANNER ------------------------------------------------------ */
.pillar{
  border:1px solid var(--rule); border-top:3px solid var(--pc,var(--accent));
  background:var(--surface); border-radius:var(--radius);
  padding:1.1rem 1.2rem; margin:0 0 1.8rem;
}
.pillar h2{ border-top:0; margin:.2rem 0 .5rem; padding-top:0; font-size:1.15rem; }
.pillar p{ margin:0; color:var(--ink-2); font-size:.94rem; }

/* 13. KEEP READING ------------------------------------------------------- */
.readnext{ margin:3rem 0 0; padding-top:1.6rem; border-top:1px solid var(--rule); }
.readnext .eyebrow{ display:block; margin-bottom:1rem; }

/* 14. FOOTER ------------------------------------------------------------- */
footer.site{
  background:var(--deep); color:var(--deep-faint);
  margin-top:4rem; padding:2.2rem 0 2.6rem;
  font-size:.86rem;
}
footer.site nav{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:1rem;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
}
footer.site a{ color:var(--deep-ink); text-decoration:none; }
footer.site a:hover{ color:#fff; text-decoration:underline; }

.disclosure{
  font-size:.82rem; color:var(--ink-3); border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--surface);
  padding:.8rem .95rem; margin:2.2rem 0 0;
}

/* 15. AD UNITS ----------------------------------------------------------- */
.adunit{ margin:2rem auto; text-align:center; }
.adunit[data-pos="top"]{ min-height:100px; }
.adunit[data-pos="in_article"]{ min-height:280px; }
.adunit[data-pos="below_content"]{ min-height:280px; }
@media (max-width:720px){
  .adunit[data-pos="in_article"],
  .adunit[data-pos="below_content"]{ min-height:250px; }
}
.adunit .adlabel{
  display:block; font-family:var(--sans); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.4rem;
}
.adunit ins.adsbygoogle{ display:block; margin:0 auto; }

/* 16. RESPONSIVE --------------------------------------------------------- */
@media (max-width:720px){
  body{ font-size:17px; }
  h1.post{ font-size:1.68rem; }
  h2{ font-size:1.26rem; }
  p.lede{ font-size:1.08rem; }
  .masthead{ padding:13px 0; }
  nav.mainnav{ gap:13px; font-size:.72rem; }
  pre code{ font-size:.74rem; }
  .cardgrid{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
  .card:hover{ transform:none; }
}

@media print{
  header.site, footer.site, .adunit, .readnext, nav.mainnav, .topicbar{ display:none; }
  body{ background:#fff; color:#000; font-size:11pt; }
  a{ color:#000; }
}

/* =====================================================================
   17. SECTION MASTHEAD — five tabs and a per-section subsection strip
   ===================================================================== */
.masthead{ padding:14px 0 10px; align-items:baseline; }
nav.utility{
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--sans); font-size:.76rem; font-weight:600;
}
nav.utility a{ color:var(--deep-faint); text-decoration:none; }
nav.utility a:hover, nav.utility a[aria-current]{ color:#fff; }

nav.tabs{ display:flex; gap:0; flex-wrap:wrap; }
nav.tabs .tab{
  position:relative;
  font-family:var(--serif); font-size:1.16rem; font-weight:700;
  letter-spacing:-.01em; color:#fff; text-decoration:none;
  padding:.35rem 1.05rem .6rem; border-left:1px solid rgba(255,255,255,.18);
}
nav.tabs .tab:first-child{ border-left:0; padding-left:0; }
nav.tabs .tab::after{
  content:""; position:absolute; left:1.05rem; right:1.05rem; bottom:0;
  height:4px; background:var(--pc); opacity:0; transition:opacity .12s;
}
nav.tabs .tab:first-child::after{ left:0; }
nav.tabs .tab:hover::after{ opacity:.55; }
nav.tabs .tab[aria-current]::after{ opacity:1; }

.subnav{
  background:var(--surface);
  border-bottom:1px solid var(--rule);
}
.subnav .wide{ position:relative; }
.subnav-in{
  display:flex; gap:18px; overflow-x:auto; padding:9px 0;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  scrollbar-width:none; -ms-overflow-style:none;
}
.subnav-in::-webkit-scrollbar{ display:none; }
.subnav-in a{ color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.subnav-in a:hover{ color:var(--accent); text-decoration:underline; }

/* =====================================================================
   18. FRONT-PAGE CONTAINERS
   ===================================================================== */
.container{ margin:0 0 2.4rem; }
.container-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  border-top:3px solid var(--pc); padding:.55rem 0 .8rem;
}
.container-head h2{
  font-size:1.34rem; margin:0; padding:0; border:0; line-height:1.2;
}
.container-head h2 a{ color:var(--ink); text-decoration:none; }
.container-head h2 a:hover{ color:var(--pc); }
.viewall{
  font-family:var(--sans); font-size:.76rem; font-weight:600;
  color:var(--ink-3); text-decoration:none; white-space:nowrap;
}
a.viewall:hover{ color:var(--pc); }

.ctgrid{
  display:grid; gap:0;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
}
.story{
  padding:.9rem 1rem 1.1rem;
  border-left:1px solid var(--rule);   /* the column rules */
}
.story:first-child{ border-left:0; padding-left:0; }
.story .kick{
  display:block; font-family:var(--sans); font-size:.64rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--pc); text-decoration:none; margin-bottom:.35rem;
}
.story .kick:hover{ text-decoration:underline; }
.story h3{
  font-size:1.02rem; line-height:1.26; margin:0 0 .4rem; font-weight:700;
}
.story h3 a{ color:var(--ink); text-decoration:none; }
.story h3 a:hover{ color:var(--pc); }
.story p{ font-size:.84rem; line-height:1.48; color:var(--ink-3); margin:0; }
.story.lead h3{ font-size:1.34rem; line-height:1.18; }
.story.lead p{ font-size:.9rem; }

/* =====================================================================
   19. FOOTER COLUMNS
   ===================================================================== */
.footcols{
  display:grid; gap:1.6rem 2rem; margin-bottom:1.8rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.foothead{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; margin:0 0 .6rem; padding:0; border:0;
}
.footcol ul{ list-style:none; margin:0; padding:0; }
.footcol li{ margin:.34rem 0; }
.footcol a{ font-family:var(--sans); font-size:.82rem; }

@media (max-width:900px){
  .ctgrid{ grid-template-columns:repeat(2,1fr); }
  .story:nth-child(odd){ border-left:0; padding-left:0; }
}
@media (max-width:620px){
  nav.tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  nav.tabs::-webkit-scrollbar{ display:none; }
  nav.tabs .tab{ font-size:1rem; padding:.3rem .7rem .5rem; white-space:nowrap; }
  nav.tabs .tab::after{ left:.7rem; right:.7rem; }
  .ctgrid{ grid-template-columns:1fr; }
  .story{ border-left:0; padding-left:0; border-top:1px solid var(--rule); }
  .story:first-child{ border-top:0; }
  .story.lead h3{ font-size:1.18rem; }
}