/* table-talk-article: generated from the legacy page template; edit this external module only. */
:root { --canvas:#f8f9f7; --surface:#fff; --ink:#172027; --muted:#56636b; --quiet:#758287; --border:#d9e1df; --purple:#6e44a6; --teal:#006f77; --green:#2e7d52; --gold:#f4b942; --terracotta:#a24b2e; --radius:14px; --page-width:1160px; --content-width:990px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font:16px/1.62 "Disrupt Cabin",ui-rounded,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; } a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--purple); outline-offset:3px; }
.shell { width:min(var(--page-width),calc(100% - 48px)); margin:0 auto; } .site-header { min-height:66px; border-bottom:1px solid var(--border); background:var(--canvas); } .header-inner { display:flex; min-height:66px; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font:700 18px "Disrupt Comfortaa",sans-serif; letter-spacing:-.045em; } .brand img { width:29px; height:29px; object-fit:contain; } .primary-nav { display:flex; align-items:center; gap:25px; color:var(--muted); font-size:14px; font-weight:700; } .primary-nav a:hover,.primary-nav a[aria-current="page"] { color:var(--purple); } .nav-action,.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 18px; border:0; border-radius:999px; background:var(--purple); color:#fff; cursor:pointer; font:800 14px "Disrupt Cabin",ui-rounded,sans-serif; } .button:hover,.nav-action:hover { background:#5e368f; color:#fff; } .button.secondary { border:1px solid var(--border); background:var(--surface); color:var(--ink); } .mobile-nav { display:none; }
.page-hero { padding:80px 0 37px; } .reading-rail { width:min(var(--content-width),100%); margin:0 auto; } .eyebrow { margin:0 0 13px; color:var(--purple); font-size:12px; font-weight:850; letter-spacing:.075em; text-transform:uppercase; } h1,h2,h3 { margin:0; font-family:"Disrupt Comfortaa",sans-serif; letter-spacing:-.06em; line-height:1.14; } h1 { max-width:900px; font-size:clamp(47px,6.3vw,74px); } h2 { font-size:clamp(26px,3vw,39px); } h3 { font-size:20px; } .lede { max-width:820px; margin:18px 0 0; color:var(--muted); font-size:18px; }
.page-content { padding:22px 0 96px; } .prose { width:min(var(--content-width),100%); margin:0 auto; color:#3d4c51; } .prose > * { max-width:100%; } .prose p { margin:0 0 18px; } .prose h2 { margin:56px 0 18px; color:var(--ink); } .prose h3 { margin:34px 0 12px; color:var(--ink); } .prose ul,.prose ol { margin:0 0 22px; padding-left:23px; } .prose li { margin:6px 0; } .prose a { color:var(--purple); font-weight:750; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; } .prose blockquote { max-width:100%; margin:42px 0; padding:2px 0 2px 23px; border-left:3px solid #d8c5f3; color:var(--ink); font:700 clamp(21px,2.8vw,31px)/1.24 "Disrupt Comfortaa",sans-serif; letter-spacing:-.045em; } .prose aside { max-width:100%; margin:34px 0; padding:24px; border-radius:var(--radius); background:#eef2ee; color:var(--ink); } .prose section { margin:0 0 42px; } .prose img { display:block; width:100%; height:auto; margin:30px 0; border-radius:12px; }
.article-page .prose section { margin-bottom:58px; } .article-page .prose p,.article-page .prose li { overflow-wrap:break-word; } .article-page .article-opening > p:first-child { color:var(--ink); font-size:clamp(19px,2.2vw,23px); line-height:1.5; } .article-page .article-section > h2 { max-width:860px; } .article-page .article-section > h2 + p { max-width:850px; font-size:17px; } .article-figure { max-width:100%; margin:34px 0 38px; } .article-figure img { width:100%; max-height:490px; margin:0; object-fit:contain; background:#eef2ee; } .article-caption { margin-top:10px; color:var(--muted); font-size:13px; line-height:1.5; } .article-callout { display:grid; grid-template-columns:minmax(150px,240px) minmax(0,1fr); gap:24px; align-items:center; } .article-callout img { max-height:210px; margin:0; } .article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:28px 0 31px; } .article-grid-item > :first-child { margin-top:0; } .article-grid-item span,.article-grid-item strong { display:block; color:var(--ink); } .article-actions { display:flex; flex-wrap:wrap; gap:14px 22px; margin:29px 0; } .article-actions a { display:grid; gap:3px; color:var(--terracotta); font-weight:850; } .article-actions a span { color:var(--muted); font-size:13px; font-weight:700; } .article-game-link { display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr); gap:22px; align-items:center; margin:26px 0; padding:22px; border-radius:var(--radius); background:#eef2ee; color:var(--ink); text-decoration:none; } .article-game-link:hover { background:#e5ece9; color:var(--ink); } .article-game-link > span:first-child { display:flex; align-items:center; justify-content:center; min-height:100px; } .article-game-link img { width:100%; max-width:160px; max-height:106px; margin:0; object-fit:contain; } .article-game-link > span:last-child { display:grid; gap:7px; } .article-game-link > span:last-child > span { display:block; color:var(--muted); } .article-game-link strong { color:var(--ink); font-size:20px; } .article-game-link > span:last-child > span:last-child { color:var(--terracotta); font-weight:850; } .story-list { display:grid; gap:12px; margin-top:38px; } .story { display:grid; grid-template-columns:58px minmax(0,1fr); gap:20px; padding:25px 0; } .story-number { padding-top:4px; color:var(--terracotta); font-size:12px; font-weight:850; } .story h2 { font-size:clamp(25px,3vw,37px); } .story h2 a { display:block; color:inherit; } .story h2 a:hover { color:var(--purple); } .story p { max-width:820px; margin:11px 0; color:var(--muted); }