/* ordinary-pages: 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); }
/* Table Talk retains the live article's deliberate changes of scale: a calm
   reading measure for prose, then figures and modules that step out wider. */
.table-talk-breadcrumb { display:flex; flex-wrap:wrap; gap:7px; padding-top:25px; color:var(--quiet); font-size:12px; font-weight:750; } .table-talk-breadcrumb a { color:var(--muted); } .table-talk-breadcrumb a:hover { color:var(--purple); } .table-talk-breadcrumb span[aria-hidden="true"] { color:#aab3b2; }
.article-page .prose { --dd-wide:min(1088px,calc(100vw - 48px)); --article-measure:760px; } .article-page .article-opening > :not(.dd-breakout),.article-page .article-section > :not(.dd-breakout) { width:min(var(--article-measure),100%); margin-left:auto; margin-right:auto; } .article-page .article-opening > .dd-figure-crest { margin-right:0; } .article-page .dd-opening { margin-bottom:clamp(42px,6vw,72px); } .article-page .dd-opening > p { margin-block:16px; } .article-page .dd-opening-lead { color:var(--ink); font-size:clamp(19px,2vw,23px); font-weight:750; line-height:1.55; } .article-page .dd-section { position:relative; margin-top:clamp(60px,8vw,96px); } .article-page .dd-section > h2 { margin:0 0 22px; color:var(--ink); font-size:clamp(28px,3vw,38px); line-height:1.15; } .article-page .dd-section > p { margin:.95rem auto 0; } .article-page .dd-section > p + p { margin-top:1.08rem; } .article-page .dd-section::before { display:block; width:54px; height:3px; margin:0 auto 25px; background:var(--teal); content:""; } .article-page .dd-section:nth-of-type(4n+2)::before { background:var(--purple); } .article-page .dd-section:nth-of-type(4n+3)::before { background:var(--gold); } .article-page .dd-section:nth-of-type(4n+4)::before { background:var(--terracotta); }
.article-page .dd-breakout { width:var(--dd-wide); max-width:none; margin-left:50%; margin-right:0; transform:translateX(-50%); } .article-page .dd-pullquote { margin-top:clamp(36px,5vw,56px); margin-bottom:clamp(36px,5vw,56px); padding:clamp(24px,4vw,37px); border:0; border-left:6px solid var(--purple); border-radius:0 16px 16px 0; background:#eef2ee; } .article-page .dd-pullquote p { width:auto; margin:0; color:var(--ink); font:700 clamp(22px,2.6vw,32px)/1.35 "Disrupt Comfortaa",sans-serif; letter-spacing:-.05em; } .article-page .dd-figure { margin-top:clamp(36px,5vw,59px); margin-bottom:clamp(36px,5vw,59px); } .article-page .dd-figure > a.dd-image-link { display:block; overflow:hidden; border-radius:16px; background:#10151a; box-shadow:0 18px 40px rgba(23,32,39,.14); } .article-page .dd-figure img { display:block; width:100%; height:auto; max-height:none; margin:0; border-radius:0; background:transparent; } .article-page .dd-figure figcaption { width:auto; max-width:928px; margin:12px auto 0; color:var(--muted); font-size:13px; line-height:1.5; } .article-page .dd-history-figure img { max-height:672px; object-fit:cover; } .article-page .dd-figure-crest { float:right; width:min(240px,38%); margin:16px -70px 22px 32px; } .article-page .dd-figure-crest > a.dd-image-link { padding:16px; background:#f8f7f4; box-shadow:none; } .article-page .dd-figure-crest img { max-height:320px; object-fit:contain; } .article-page .dd-figure-crest figcaption { font-size:12px; } .article-page .dd-brooch-figure > a.dd-image-link { background:#090d10; } .article-page .dd-brooch-figure img { max-height:512px; object-fit:contain; } .article-page .dd-document-figure { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.7fr); gap:24px; align-items:center; padding:22px; border-radius:16px; background:#eef2ee; } .article-page .dd-document-figure > a.dd-image-link { max-width:512px; margin:auto; background:#fff; } .article-page .dd-document-figure img { max-height:704px; object-fit:contain; } .article-page .dd-document-figure figcaption { margin:0; font-size:15px; line-height:1.6; }
.article-page .dd-game-feature { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,56px); align-items:center; margin-top:32px; margin-bottom:48px; padding:clamp(20px,4vw,38px); border-radius:19px; background:#eef2ee; } .article-page .dd-game-media { overflow:hidden; border-radius:14px; background:#f8f7f4; box-shadow:0 12px 30px rgba(23,32,39,.12); } .article-page .dd-game-media img { display:block; width:100%; height:auto; max-height:496px; margin:0; object-fit:contain; border-radius:0; } .article-page .dd-game-copy h3 { margin:3px 0 13px; color:var(--ink); font-size:clamp(26px,3vw,38px); line-height:1.15; } .article-page .dd-game-copy > p:not(.eyebrow) { margin:0 0 19px; color:var(--ink); font-size:16px; line-height:1.65; } .article-page .dd-game-copy .button { display:inline-flex; color:#fff; text-decoration:none; } .article-page .dd-game-gylen { border-top:5px solid var(--purple); } .article-page .dd-game-dalrymple { border-top:5px solid var(--gold); }
.article-page .dd-mechanic-grid,.article-page .dd-triad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:32px; margin-bottom:40px; } .article-page .dd-mechanic-card { display:grid; gap:5px; padding:21px; border-radius:16px; background:#eef2ee; } .article-page .dd-mechanic-card .dd-suit { color:var(--purple); font:700 35px/1 "Disrupt Comfortaa",sans-serif; } .article-page .dd-mechanic-card strong { color:var(--ink); font-size:17px; } .article-page .dd-mechanic-card p { width:auto; margin:0; color:var(--muted); font-size:15px; line-height:1.5; } .article-page .dd-triad > div { padding:20px; border-top:4px solid var(--teal); border-radius:13px; background:#eef2ee; } .article-page .dd-triad > div:nth-child(2) { border-color:var(--gold); } .article-page .dd-triad > div:nth-child(3) { border-color:var(--purple); } .article-page .dd-triad h3 { margin:0 0 9px; color:var(--ink); font-size:17px; } .article-page .dd-triad p { width:auto; margin:0; color:var(--muted); font-size:15px; line-height:1.55; } .article-page .dd-nine-callout { display:grid; grid-template-columns:144px minmax(0,1fr); gap:27px; align-items:center; margin-top:40px; margin-bottom:40px; padding:24px; border-radius:18px; background:#eef2ee; } .article-page .dd-nine-card { display:grid; grid-template-rows:auto 1fr auto; min-height:192px; padding:13px; border:2px solid var(--ink); border-radius:11px; background:#fff; color:#a51f2b; font-family:Georgia,serif; } .article-page .dd-nine-card > span:first-child { justify-self:start; font-size:26px; } .article-page .dd-nine-card > span:last-child { justify-self:end; align-self:end; font-size:26px; transform:rotate(180deg); } .article-page .dd-nine-card strong { place-self:center; font-size:64px; } .article-page .dd-nine-callout h3 { margin:3px 0 8px; color:var(--ink); font-size:clamp(22px,2.5vw,30px); } .article-page .dd-nine-callout p:last-child { width:auto; margin:0; color:var(--muted); } .article-page .dd-reversal { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:40px; margin-bottom:40px; } .article-page .dd-reversal > div { padding:23px; border-radius:16px; background:#eef2ee; } .article-page .dd-reversal span { display:block; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .article-page .dd-reversal strong { display:block; margin:6px 0; color:var(--purple); font:700 clamp(32px,5vw,56px)/1 "Disrupt Comfortaa",sans-serif; } .article-page .dd-reversal p { width:auto; margin:0; color:var(--ink); font-weight:750; } .article-page .dd-reversal .dd-reversal-curse { background:var(--purple); color:#fff; } .article-page .dd-reversal .dd-reversal-curse span { color:#ffffffbf; } .article-page .dd-reversal .dd-reversal-curse strong { color:#fff; } .article-page .dd-closing { padding:clamp(32px,5vw,54px); border-radius:19px; background:#eef2ee; } .article-page .dd-closing::before { display:none; } .article-page .dd-closing > h2 { max-width:none; } .article-page .dd-source-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:32px; padding:0; list-style:none; } .article-page .dd-source-card { width:auto; margin:0; padding:17px 18px; border-radius:14px; background:#eef2ee; font-size:15px; line-height:1.55; } .article-page .dd-source-card strong { display:block; margin-bottom:3px; color:var(--ink); } .article-page .dd-image-credits { margin-top:24px; border-radius:16px; background:#eef2ee; } .article-page .dd-image-credits summary { min-height:52px; padding:14px 18px; font-weight:800; } .article-page .dd-image-credits > p,.article-page .dd-image-credits > ul { width:auto; margin-left:18px; margin-right:18px; } .article-page .dd-image-credits > ul { padding-bottom:16px; } .article-page .dd-image-credits li { font-size:15px; line-height:1.55; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:74px; } .split p { color:var(--muted); } .section { padding:68px 0; } .section.soft { background:#f0f3ef; } .section-heading { max-width:640px; margin-bottom:30px; } .principles { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .principle { padding:22px; border-radius:var(--radius); background:var(--surface); } .principle h3 { margin-bottom:9px; } .principle p { margin:0; color:var(--muted); font-size:14px; }
.publisher-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:35px; } .publisher-game { display:block; min-height:215px; padding:26px; border-radius:var(--radius); background:var(--surface); color:var(--ink); transition:background-color .16s ease,transform .16s ease; } .publisher-game:hover { background:#f5f8f5; color:var(--ink); transform:translateY(-2px); } .publisher-game .status { display:inline-flex; padding:4px 9px; border-radius:999px; background:var(--teal); color:#fff; font-size:11px; font-weight:850; } .publisher-game h2 { margin:15px 0 10px; font-size:27px; } .publisher-game p { margin:0; color:var(--muted); font-size:14px; } .publisher-cta { display:inline-block; margin-top:16px; color:var(--terracotta); font-size:14px; font-weight:850; }
.form-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:86px; align-items:start; } .form-intro { color:var(--muted); } .form-intro h2 { margin:10px 0 14px; color:var(--ink); } form { padding:30px; border-radius:var(--radius); background:var(--surface); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:19px; } label,.field-label { display:grid; gap:7px; color:#3d4c51; font-size:13px; font-weight:800; } label.full,.full { grid-column:1 / -1; } input,select,textarea { width:100%; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink); font:400 16px/1.4 "Disrupt Cabin",ui-rounded,sans-serif; } input,select { min-height:43px; padding:9px 11px; } textarea { min-height:112px; padding:11px; resize:vertical; } fieldset { margin:0; padding:0; border:0; } legend { margin-bottom:8px; color:#3d4c51; font-size:13px; font-weight:800; } .radio-group { display:flex; flex-wrap:wrap; gap:8px; } .radio-group label { display:flex; align-items:center; gap:6px; min-height:32px; padding:3px 9px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px; } .radio-group input { width:14px; min-height:0; padding:0; } form .button { margin-top:24px; } .form-note { margin:13px 0 0; color:var(--quiet); font-size:12px; }
.faq { margin-top:34px; } details { padding:13px 0; } summary { position:relative; padding-right:32px; color:var(--ink); cursor:pointer; font-weight:850; list-style:none; } summary::-webkit-details-marker { display:none; } summary::after { position:absolute; right:4px; top:50%; color:var(--terracotta); content:"+"; font-size:23px; font-weight:400; transform:translateY(-50%); } details[open] summary::after { content:"–"; } details p { margin:12px 0 0; color:var(--muted); }
.site-footer { border-top:1px solid var(--border); padding:42px 0 24px; } .footer-top { display:flex; justify-content:space-between; gap:42px; } .footer-brand { max-width:286px; } .footer-brand p { margin:9px 0 0; color:var(--purple); font-size:13px; font-weight:850; } .footer-brand small { display:block; margin-top:9px; color:var(--muted); font-size:12px; line-height:1.55; } .footer-links { display:flex; flex-wrap:wrap; gap:12px 23px; max-width:570px; } .footer-links a { color:var(--muted); font-size:12px; font-weight:750; } .site-footer blockquote { margin:33px 0 0; padding:17px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--ink); font:700 15px/1.4 "Disrupt Comfortaa",sans-serif; letter-spacing:-.035em; text-align:center; } .site-footer cite { display:block; margin-top:7px; color:var(--purple); font:800 10px "Disrupt Cabin",sans-serif; letter-spacing:.05em; text-transform:uppercase; } .copyright { margin-top:17px; color:#849093; font-size:11px; text-align:center; }
@media (max-width:880px) { .shell { width:min(100% - 36px,720px); } .primary-nav { display:none; } .mobile-nav { position:relative; display:block; } .mobile-nav summary { min-height:40px; padding:9px 15px; border:1px solid var(--border); border-radius:999px; color:var(--ink); cursor:pointer; font-size:14px; font-weight:850; list-style:none; } .mobile-nav summary::-webkit-details-marker { display:none; } .mobile-nav nav { position:absolute; z-index:4; top:calc(100% + 9px); right:0; display:grid; width:min(260px,calc(100vw - 36px)); padding:10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:0 16px 34px rgba(23,32,39,.12); } .mobile-nav nav a { padding:10px 11px; border-radius:8px; color:var(--ink); font-size:14px; font-weight:800; } .mobile-nav nav a:hover { background:#eef2ee; color:var(--purple); } .reading-rail,.prose { width:100%; margin-left:0; } .page-hero { padding-top:57px; } .form-layout { grid-template-columns:1fr; gap:28px; } .split { gap:36px; } .article-callout,.article-grid,.article-game-link { grid-template-columns:1fr; } .article-callout img { max-width:280px; } .article-game-link > span:first-child { justify-content:flex-start; } .prose blockquote { margin-left:0; margin-right:0; } .footer-top { display:block; } .footer-links { margin-top:26px; } }
@media (max-width:780px) { .article-page .prose { --dd-wide:calc(100vw - 36px); --article-measure:100%; } .article-page .article-opening > :not(.dd-breakout),.article-page .article-section > :not(.dd-breakout) { width:100%; } .article-page .dd-breakout { width:var(--dd-wide); } .article-page .dd-figure-crest { float:none; width:min(256px,75%); margin:32px auto; } .article-page .dd-game-feature,.article-page .dd-document-figure,.article-page .dd-nine-callout,.article-page .dd-triad,.article-page .dd-source-grid,.article-page .dd-mechanic-grid { grid-template-columns:1fr; } .article-page .dd-game-feature { padding:16px; } .article-page .dd-game-media { max-width:432px; margin:auto; } .article-page .dd-document-figure figcaption { margin:3px 0 0; } .article-page .dd-reversal { grid-template-columns:1fr 1fr; } }
@media (max-width:580px) { .shell { width:min(100% - 32px,720px); } .brand { font-size:16px; } .brand img { width:26px; height:26px; } h1 { font-size:47px; } .page-hero { padding:50px 0 23px; } .page-content { padding-bottom:60px; } .split,.principles,.publisher-grid,.form-grid { grid-template-columns:1fr; } .story { grid-template-columns:42px 1fr; gap:13px; } .prose h2 { margin-top:43px; } form { padding:21px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* v12 keyboard baseline */
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:11px 15px; border-radius:8px; background:#172027; color:#fff; font-weight:850; transform:translateY(-160%); transition:transform .16s ease; }
.skip-link:focus { transform:translateY(0); }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #006f77; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .skip-link { transition:none; } }

/* v16 spacing-led content rhythm */
main .section-head,main .section-soft,main .journal-list,main .journal-item { border-top:0; border-bottom:0; }
.site-footer,.site-footer blockquote { border-top:0; border-bottom:0; }
.article-page .status-guide-section,.article-page .rights-guide-cc,.article-page .rights-guide-choice,.article-page .rights-guide-permissions,.article-page .rights-guide-notice { border-top:0; padding-top:0; }
.article-page .dd-section::before,.article-page .dd-game-gylen,.article-page .dd-game-dalrymple,.article-page .dd-triad>div { border-top:0; content:none; }