/* Fintrail — table-led editorial guide; no external font or layout dependencies. */
:root { --white:#FFFFFF; --stone:#F6F6F2; --ink:#293431; --muted:#697570; --moss:#52694C; --rule:#E0E5DD; --edge:clamp(20px,4vw,65px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--white); color:var(--ink); font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.shell { width:min(1160px,calc(100% - var(--edge)*2)); margin-inline:auto; }
a { color:var(--moss); text-underline-offset:.25em; text-decoration-thickness:1px; }
a:hover { color:var(--ink); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.7; }
img { display:block; width:100%; max-width:100%; height:auto; }
figure { margin:0; }
figcaption,.small,.source-note { color:var(--muted); font-size:.75rem; line-height:1.6; }
figcaption { margin-top:9px; }
p { margin:0 0 1.15rem; }
h1,h2,h3 { margin:0 0 1rem; font-weight:400; line-height:1.2; letter-spacing:-.035em; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; }
h1 { font-size:clamp(2.1rem,3.4vw,3rem); }
h2 { font-size:clamp(1.65rem,2.5vw,2.1rem); }
h3 { font-size:1.1rem; font-weight:500; letter-spacing:-.02em; }
ul,ol { padding-left:1.2rem; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--moss); outline-offset:5px; }
.skip-link { position:absolute; left:10px; top:10px; z-index:5; background:white; padding:10px 14px; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.eyebrow { font-size:.65rem; color:var(--muted); font-weight:600; letter-spacing:.13em; text-transform:uppercase; line-height:1.8; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:16px; padding:11px 17px; font-size:.78rem; line-height:1.5; background:var(--moss); border:1px solid var(--moss); color:white; text-decoration:none; }
.button:hover { background:var(--ink); border-color:var(--ink); color:white; }
.text-link { font-size:.82rem; font-weight:500; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }

/* Brand and navigation. */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:25px 0; border-bottom:1px solid var(--rule); }
.wordmark { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:1.48rem; font-weight:550; letter-spacing:.13em; line-height:1.1; }
.wordmark small { display:block; margin-top:9px; color:var(--muted); font-size:.51rem; font-weight:400; letter-spacing:.1em; text-transform:none; }
.fish-path { width:39px; height:43px; flex:none; color:var(--moss); }
.site-header nav { display:flex; gap:28px; }
.site-header nav a { font-size:.8rem; padding:10px 0; color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; }
.site-header nav a:hover,.site-header nav a[aria-current="page"] { color:var(--moss); border-bottom-color:var(--moss); }
.menu-toggle { display:none; padding:8px 13px; background:white; border:1px solid var(--rule); color:var(--ink); }

/* The compact opening is followed immediately by a real comparison table. */
.page-heading { display:grid; grid-template-columns:1fr 2.6fr; gap:50px; padding:42px 0 24px; }
.page-heading>.eyebrow { max-width:22ch; padding-top:8px; }
.page-heading h1 { margin:0; }
.deck { margin:20px 0 0; max-width:65ch; color:var(--muted); }
.intro-body { margin-left:calc((100% - 50px)/3.6 + 50px); padding-bottom:30px; }
.intro-copy { max-width:74ch; font-size:.94rem; }
.at-a-glance { padding:22px 28px; background:var(--stone); }
.at-a-glance h2 { font-size:1.25rem; margin-bottom:20px; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:.82rem; }
caption { text-align:left; font-size:.69rem; color:var(--muted); margin-bottom:12px; }
th,td { padding:15px 18px 15px 0; border-top:1px solid var(--rule); vertical-align:top; }
thead th { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
tbody th { font-weight:500; width:20%; }
td:last-child { min-width:100px; }
.editorial-spread { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:45px; padding:40px 0; }
.editorial-spread>div { padding-bottom:24px; }
.editorial-spread h2 { font-size:1.85rem; }
.editorial-spread p:not(.eyebrow) { font-size:.89rem; }
.previews { margin-top:8px; }
.section-title { display:flex; justify-content:space-between; align-items:baseline; gap:30px; border-top:1px solid var(--ink); padding-top:22px; }
.section-title h2 { font-size:1.65rem; }
.preview-row { display:grid; grid-template-columns:.9fr 1fr 1.5fr; gap:30px; border-top:1px solid var(--rule); padding:28px 0; }
.preview-heading h3 { font-size:1.3rem; }
.developer { font-size:.73rem; color:var(--muted); }
.preview-row figcaption { font-size:.67rem; }
.home-game-copy { font-size:.88rem; }
.preview-copy .actions { gap:18px; }
.preview-copy .button { padding:10px 13px; }
.first-cast { display:grid; grid-template-columns:1fr 1.6fr; gap:65px; padding:32px 28px; background:var(--stone); margin-top:20px; }
.first-cast h2 { font-size:1.8rem; }
.first-cast ol { list-style:none; padding:0; margin:0; counter-reset:cast; }
.first-cast li { counter-increment:cast; border-top:1px solid var(--rule); padding:17px 0 5px 40px; position:relative; }
.first-cast li:before { content:"0" counter(cast); position:absolute; left:0; top:20px; font-size:.67rem; color:var(--moss); }
.first-cast h3 { font-size:.98rem; margin-bottom:8px; }
.first-cast li p { font-size:.85rem; }
.closing { display:flex; align-items:center; flex-wrap:wrap; gap:25px; border-top:1px solid var(--rule); padding:23px 0 35px; margin-top:35px; font-size:.83rem; }
.closing p { margin:0 auto 0 0; font-size:1.1rem; }

/* Anchored game entries use copy first and an illustrated fact column. */
.jump-links { display:flex; gap:30px; flex-wrap:wrap; font-size:.82rem; padding:5px 0 23px; }
.game-entry { border-top:1px solid var(--ink); padding:27px 0 30px; margin-top:20px; scroll-margin-top:28px; }
.entry-header { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:25px; }
.entry-header .eyebrow { margin-bottom:10px; }
.entry-header h2 { margin:0; font-size:2rem; }
.entry-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:55px; }
.game-description { font-size:.95rem; max-width:69ch; }
.practical-notes { border-top:1px solid var(--rule); margin-top:24px; padding-top:20px; }
.practical-notes h3 { font-size:.92rem; }
.practical-notes p { font-size:.85rem; color:var(--muted); }
.facts-title { font-size:.75rem; margin:24px 0 12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.game-facts { padding:0; margin:0; list-style:none; }
.game-facts li { padding:12px 0 12px 17px; border-top:1px solid var(--rule); font-size:.81rem; position:relative; }
.game-facts li:before { content:"—"; position:absolute; left:0; color:var(--moss); }
.source-note { margin:23px 0 0; max-width:95ch; }
.guide-layout { display:grid; grid-template-columns:1fr 2.6fr; gap:50px; padding-top:15px; }
.guide-layout aside { padding-top:5px; }
.guide-layout nav a { display:block; font-size:.77rem; padding:11px 0; border-top:1px solid var(--rule); }
.guide-copy section { border-top:1px solid var(--rule); padding:24px 0 14px; scroll-margin-top:25px; }
.guide-copy h2 { font-size:1.45rem; }
.guide-copy p { max-width:68ch; font-size:.94rem; }
.faq-list { max-width:820px; margin-left:auto; border-top:1px solid var(--rule); }
details { border-bottom:1px solid var(--rule); }
summary { position:relative; cursor:pointer; padding:21px 35px 21px 0; list-style:none; font-size:1rem; }
summary::-webkit-details-marker { display:none; }
summary:after { content:"+"; position:absolute; right:4px; top:21px; color:var(--moss); }
details[open] summary:after { content:"−"; }
details>div { padding:0 28px 10px 0; font-size:.9rem; }
.contact-layout { display:grid; grid-template-columns:1fr 2.6fr; gap:50px; padding:15px 0 45px; }
.contact-note { max-width:30ch; font-size:.84rem; }
.contact-note>a { display:inline-block; margin-bottom:25px; }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:25px; }
label { display:block; font-size:.8rem; font-weight:600; margin-bottom:8px; }
input,textarea { display:block; width:100%; min-width:0; padding:12px; background:white; color:var(--ink); border:1px solid #99A791; border-radius:0; margin-bottom:25px; font-size:16px; }
textarea { resize:vertical; }
.form-status { color:var(--muted); font-size:.83rem; margin:18px 0 0; max-width:68ch; }
.form-status.error { color:#8A3434; }
dialog { width:min(510px,calc(100% - 40px)); padding:30px; border:1px solid var(--rule); background:white; color:var(--ink); }
dialog::backdrop { background:rgba(41,52,49,.45); }
.dialog-close { display:block; padding:5px; margin:0 0 20px auto; background:none; border:0; color:var(--moss); text-decoration:underline; }
.dialog-done { margin-top:12px; }
.policy { max-width:74ch; margin-left:calc((100% - 50px)/3.6 + 50px); padding-bottom:45px; font-size:.94rem; }
.policy h2 { font-size:1.4rem; margin:30px 0 15px; }
.policy li { margin-bottom:9px; }

/* Legal information is a separate readable block, not hidden in small print. */
.site-footer { background:var(--stone); border-top:1px solid var(--rule); margin-top:20px; }
.footer-heading { display:flex; justify-content:space-between; gap:30px; padding:30px 0 20px; }
.footer-brand { color:var(--ink); font:1.8rem Georgia,serif; text-decoration:none; letter-spacing:-.03em; }
.footer-heading p { font-size:.75rem; color:var(--muted); margin:0; }
.footer-nav { display:flex; flex-wrap:wrap; gap:14px 25px; border-top:1px solid var(--rule); padding:18px 0; font-size:.75rem; }
.legal { display:grid; grid-template-columns:1fr 1.7fr 1fr 1fr; gap:25px; border-top:1px solid var(--rule); padding:25px 0; margin:0; }
.legal dt { text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-size:.59rem; margin-bottom:5px; }
.legal dd { margin:0; font-size:.73rem; overflow-wrap:anywhere; }
.footer-bottom { display:flex; justify-content:space-between; gap:25px; border-top:1px solid var(--rule); padding:18px 0 22px; }
.footer-bottom p { margin:0; color:var(--muted); font-size:.65rem; }

@media(max-width:1000px) {
  .page-heading,.guide-layout,.contact-layout { gap:30px; }
  .intro-body,.policy { margin-left:calc((100% - 30px)/3.6 + 30px); }
  .preview-row { grid-template-columns:.8fr 1fr 1.6fr; gap:23px; }
  .editorial-spread { gap:30px; }
  .entry-layout { gap:35px; }
  .legal { grid-template-columns:1fr 1.5fr; }
}
@media(max-width:900px) {
  .site-header { flex-wrap:wrap; }
  .js .menu-toggle { display:block; margin-left:auto; }
  .site-header nav { flex-basis:100%; flex-wrap:wrap; }
  .js .site-header nav { display:none; }
  .js .site-header nav.open { display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .js .site-header nav a { padding:12px 10px; border:0; }
  .js .site-header nav a[aria-current="page"] { background:var(--stone); }
  .editorial-spread { grid-template-columns:1.3fr 1fr; }
  .editorial-spread h2 { font-size:1.6rem; }
  .preview-row { grid-template-columns:1fr 1.7fr; gap:20px 30px; }
  .preview-heading { grid-column:1; grid-row:1; }
  .preview-row figure { grid-column:1; grid-row:2; }
  .preview-copy { grid-column:2; grid-row:1/3; }
  .first-cast { gap:35px; }
  .field-pair { grid-template-columns:1fr; gap:0; }
}
@media(max-width:600px) {
  .site-header { padding:22px 0; }
  .wordmark { font-size:1.35rem; }
  .wordmark small { font-size:.46rem; }
  .fish-path { width:34px; }
  .page-heading { display:block; padding:30px 0 23px; }
  .page-heading>.eyebrow { max-width:none; padding:0; margin-bottom:18px; }
  .page-heading h1 { font-size:2.35rem; }
  .page-heading h1 br { display:none; }
  .intro-body { margin-left:0; }
  .actions { gap:18px; }
  .at-a-glance { padding:22px 18px; }
  table,tbody,tr,td,tbody th { display:block; width:100%; }
  caption { display:block; width:100%; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  tbody th { width:100%; padding:15px 0 8px; border:0; font-size:1rem; }
  td { border:0; padding:7px 0 11px; }
  td:before { content:attr(data-label); display:block; color:var(--muted); font-size:.61rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
  tr { border-top:1px solid var(--rule); padding-bottom:8px; }
  .editorial-spread { display:block; padding:30px 0; }
  .editorial-spread>div { margin-top:25px; padding:0; }
  .editorial-spread h2 br { display:none; }
  .section-title { display:block; }
  .section-title h2 { margin-top:12px; }
  .preview-row { display:block; padding:24px 0; }
  .preview-heading h3 { font-size:1.45rem; }
  .preview-row figure { margin:20px 0; }
  .preview-row figcaption { font-size:.73rem; }
  .home-game-copy { font-size:.94rem; }
  .first-cast { display:block; padding:25px 20px; }
  .first-cast h2 br { display:none; }
  .first-cast ol { margin-top:25px; }
  .closing { gap:17px 25px; }
  .closing p { flex-basis:100%; }
  .entry-header { display:block; }
  .entry-header .button { margin-top:20px; }
  .entry-header h2 { font-size:1.85rem; }
  .entry-layout { display:block; }
  .entry-layout aside { margin-top:25px; }
  .guide-layout,.contact-layout { display:block; }
  .guide-layout aside { padding:0 0 25px; }
  .guide-copy h2 { font-size:1.35rem; }
  .contact-note { max-width:none; padding-bottom:20px; }
  dialog { padding:25px; }
  .policy { margin-left:0; }
  .footer-heading { display:block; }
  .footer-heading p { margin-top:18px; }
  .footer-nav { gap:12px 22px; }
  .legal { grid-template-columns:1fr; gap:18px; }
  .legal dt { font-size:.62rem; }
  .legal dd { font-size:.76rem; }
  .footer-bottom { display:block; }
  .footer-bottom p+p { margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }