/* Driftfin — quiet blue editorial guide. All fonts and assets stay local. */
:root { --paper:#FFFFFF; --pale:#F2F6FA; --ink:#283847; --muted:#687785; --blue:#476D92; --line:#DCE5ED; --edge:clamp(20px,4vw,65px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.wrap { width:min(1140px,calc(100% - var(--edge)*2)); margin-inline:auto; }
img { display:block; width:100%; max-width:100%; height:auto; }
figure { margin:0; }
figcaption,.small,.source-note { font-size:.76rem; color:var(--muted); line-height:1.6; }
figcaption { margin-top:10px; }
a { color:var(--blue); 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; }
p { margin:0 0 1.2rem; }
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.15rem,3.5vw,3.05rem); }
h2 { font-size:clamp(1.7rem,2.6vw,2.2rem); }
h3 { font-size:1.08rem; font-weight:500; letter-spacing:-.015em; }
ul,ol { padding-left:1.2rem; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
.skip-link { position:absolute; left:10px; top:10px; padding:10px 15px; background:white; z-index:5; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.eyebrow { font-size:.65rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.13em; line-height:1.8; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:16px; padding:11px 17px; background:var(--blue); border:1px solid var(--blue); color:white; text-decoration:none; font-size:.78rem; line-height:1.5; }
.button:hover { background:var(--ink); border-color:var(--ink); color:white; }
.text-link { font-size:.83rem; font-weight:500; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }

/* The compact six-link header has two deliberate rows on desktop. */
.site-header { display:flex; justify-content:space-between; align-items:center; gap:35px; border-bottom:1px solid var(--line); padding:25px 0; }
.wordmark { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:2rem; font-weight:500; letter-spacing:-.06em; line-height:1; text-decoration:none; }
.wordmark small { display:block; margin-top:10px; font-size:.52rem; line-height:1.5; font-weight:400; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.tail-symbol { width:35px; height:40px; color:var(--blue); flex:none; }
.site-header nav { display:grid; grid-template-columns:repeat(3,1fr); gap:4px 30px; }
.site-header nav a { font-size:.76rem; padding:5px 0; color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; }
.site-header nav a:hover,.site-header nav a[aria-current="page"] { color:var(--blue); border-bottom-color:var(--blue); }
.menu-toggle { display:none; background:white; color:var(--ink); border:1px solid var(--line); padding:8px 13px; }

/* A narrow text opening and an intact, modest supplied image strip. */
.home-opening { max-width:780px; margin:0 auto; padding:45px 0 30px; }
.home-opening h1 { margin:20px 0; }
.intro-copy { max-width:74ch; font-size:.94rem; }
.opening-strip { max-width:850px; margin:0 auto 50px; }
.game-summary { border-top:1px solid var(--line); padding:34px 0; display:grid; gap:45px; align-items:start; }
.wide-image { grid-template-columns:1.2fr 1fr; }
.wide-copy { grid-template-columns:1.5fr .85fr; padding-top:40px; }
.wide-copy .summary-copy { grid-column:1; grid-row:1; }
.wide-copy .summary-image { grid-column:2; grid-row:1; padding-top:8px; }
.summary-copy .eyebrow { margin-bottom:12px; }
.summary-copy h2 { font-size:1.9rem; }
.home-game-copy { font-size:.9rem; }
.facts { padding:0; list-style:none; margin:20px 0 24px; }
.facts li { padding:10px 0 10px 17px; border-top:1px solid var(--line); position:relative; font-size:.8rem; }
.facts li:before { content:"—"; position:absolute; left:0; color:var(--blue); }
.install-notes { margin-top:28px; background:var(--pale); padding:30px; }
.install-notes header { display:flex; align-items:baseline; justify-content:space-between; gap:35px; margin-bottom:20px; }
.install-notes h2 { font-size:1.7rem; margin:0; }
.three-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.three-notes section { border-top:1px solid var(--line); padding-top:18px; }
.three-notes h3 { font-size:.94rem; }
.three-notes p { font-size:.85rem; margin:0; }
.beginner-preview { display:grid; grid-template-columns:1fr 1.3fr; gap:70px; padding:40px 0; }
.beginner-preview>div+div section { border-top:1px solid var(--line); padding:20px 0 0; }
.beginner-preview h3 { font-size:1rem; }
.beginner-preview section p { font-size:.87rem; }
.closing { display:flex; gap:25px; align-items:center; flex-wrap:wrap; padding:23px 0 35px; margin-top:18px; border-top:1px solid var(--line); font-size:.84rem; }
.closing p { font-size:1.1rem; margin:0 auto 0 0; }

/* Interior reading pages and comparison. */
.page-heading { padding:42px 0 30px; max-width:800px; }
.page-heading .eyebrow { margin-bottom:20px; }
.deck { margin:20px 0 0; max-width:65ch; color:var(--muted); }
.comparison table { border-collapse:collapse; width:100%; text-align:left; font-size:.85rem; }
caption { text-align:left; font-size:.72rem; color:var(--muted); padding-bottom:14px; }
th,td { padding:18px 20px; border-bottom:1px solid var(--line); vertical-align:top; }
thead th { background:var(--pale); font-size:.76rem; font-weight:500; border-top:1px solid var(--line); }
tbody th { font-weight:500; font-size:.77rem; width:24%; }
td { width:38%; }
.choice-section { display:grid; grid-template-columns:1fr 2fr; gap:65px; padding:35px 0 5px; }
.choice-section h2 { font-size:1.6rem; max-width:18ch; }
.choice-copy { max-width:70ch; font-size:.94rem; }
.source-note { margin:20px 0 30px; max-width:95ch; }
.breadcrumbs { display:flex; gap:12px; font-size:.73rem; padding-top:25px; }
.breadcrumbs+.page-heading { padding-top:25px; }
.detail-lead { display:grid; grid-template-columns:1.6fr 1fr; align-items:start; gap:40px; border-bottom:1px solid var(--line); padding-bottom:30px; }
.detail-lead .facts { margin-top:0; }
.store-note { margin-top:12px; }
.detail-reading { display:grid; grid-template-columns:1fr 2.3fr; gap:65px; padding-top:35px; }
.detail-reading>.eyebrow { max-width:21ch; }
.game-description { font-size:.95rem; max-width:70ch; }
.detail-notes { display:grid; grid-template-columns:1fr 1fr; gap:45px; background:var(--pale); padding:27px; margin:15px 0; }
.detail-notes h2 { font-size:1.4rem; }
.detail-notes p { font-size:.86rem; margin:0; }
.beginner-copy { max-width:850px; margin-left:auto; }
.beginner-copy section { border-top:1px solid var(--line); padding:25px 0 10px; display:grid; grid-template-columns:45px 1fr; gap:25px; }
.step-number { font-size:.69rem; color:var(--blue); padding-top:6px; }
.beginner-copy h2 { font-size:1.45rem; }
.beginner-copy p { max-width:70ch; font-size:.94rem; }
.faq-layout { display:grid; grid-template-columns:1fr 2fr; gap:65px; padding:5px 0 50px; }
.faq-layout>div:first-child { padding-top:20px; max-width:27ch; font-size:.86rem; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { position:relative; cursor:pointer; list-style:none; padding:21px 32px 21px 0; font-size:1rem; }
summary::-webkit-details-marker { display:none; }
summary:after { content:"+"; position:absolute; right:4px; top:21px; color:var(--blue); }
details[open] summary:after { content:"−"; }
details>div { padding:0 25px 10px 0; font-size:.9rem; }
.contact-layout { display:grid; grid-template-columns:1.8fr 1fr; gap:65px; padding:5px 0 50px; }
.contact-layout aside { border-left:1px solid var(--line); padding:25px 0 0 30px; font-size:.85rem; }
.contact-layout aside>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; color:var(--ink); background:white; border:1px solid #99AAB8; border-radius:0; font-size:16px; margin-bottom:25px; }
textarea { resize:vertical; }
.form-status { font-size:.83rem; color:var(--muted); margin:18px 0 0; max-width:65ch; }
.form-status.error { color:#8A3434; }
dialog { width:min(510px,calc(100% - 40px)); border:1px solid var(--line); padding:30px; color:var(--ink); background:white; }
dialog::backdrop { background:rgba(40,56,71,.45); }
.dialog-close { display:block; padding:5px; margin:0 0 20px auto; color:var(--blue); background:none; border:0; text-decoration:underline; }
.dialog-done { margin-top:12px; }
.policy { max-width:75ch; font-size:.94rem; padding-bottom:40px; }
.policy h2 { font-size:1.4rem; margin:30px 0 15px; }
.policy li { margin-bottom:9px; }

/* Footer: information and navigation first, then a four-field legal line. */
.site-footer { background:var(--pale); border-top:1px solid var(--line); margin-top:20px; }
.footer-top { display:grid; grid-template-columns:1fr 1.2fr; gap:50px; padding:32px 0 26px; }
.footer-brand { font:1.8rem Georgia,serif; color:var(--ink); text-decoration:none; letter-spacing:-.04em; }
.footer-top p { max-width:46ch; font-size:.75rem; color:var(--muted); margin:15px 0 0; }
.footer-top p+p { font-size:.66rem; }
.footer-top nav { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 23px; align-content:start; padding-top:8px; }
.footer-top nav a { font-size:.73rem; }
.legal { display:grid; grid-template-columns:1fr 1.6fr 1fr 1fr; gap:25px; border-top:1px solid var(--line); padding:25px 0; }
.legal p { font-size:.72rem; margin:0; overflow-wrap:anywhere; }
.legal p>span:first-child { display:block; text-transform:uppercase; color:var(--muted); font-size:.58rem; letter-spacing:.08em; margin-bottom:5px; }
.copyright { border-top:1px solid var(--line); margin:0; padding:18px 0 22px; color:var(--muted); font-size:.66rem; }

@media(max-width:1000px) {
  .site-header nav { gap:4px 22px; }
  .game-summary { gap:30px; }
  .wide-copy { grid-template-columns:1.3fr 1fr; }
  .summary-copy h2 { font-size:1.7rem; }
  .home-game-copy { font-size:.86rem; }
  .detail-lead { gap:30px; }
  .choice-section,.detail-reading,.faq-layout,.contact-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%; }
  .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(--pale); }
  .game-summary { gap:25px; }
  .wide-image { grid-template-columns:1fr 1.1fr; }
  .wide-copy { grid-template-columns:1.2fr 1fr; }
  .install-notes header { display:block; }
  .install-notes h2 br { display:none; }
  .three-notes { gap:23px; }
  .beginner-preview { gap:35px; }
  .detail-lead { grid-template-columns:1.2fr 1fr; }
  .field-pair { grid-template-columns:1fr; gap:0; }
  .footer-top nav { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px) {
  .site-header { padding:22px 0; }
  .wordmark { font-size:1.85rem; }
  .home-opening { padding:30px 0 25px; }
  .home-opening h1 { font-size:2.35rem; }
  .opening-strip { margin-bottom:35px; }
  .game-summary,.wide-copy { display:block; padding:25px 0; }
  .wide-copy .summary-image { padding-top:0; }
  .summary-image { margin-bottom:24px; }
  .summary-copy h2 { font-size:1.8rem; }
  .home-game-copy { font-size:.94rem; }
  .install-notes { padding:24px 20px; margin-top:20px; }
  .three-notes { display:block; }
  .three-notes section { margin-top:20px; }
  .three-notes h3 { margin-bottom:8px; }
  .beginner-preview { display:block; padding:32px 0 15px; }
  .beginner-preview h2 br { display:none; }
  .beginner-preview>div+div { margin-top:25px; }
  .closing { gap:17px 25px; }
  .closing p { flex-basis:100%; }
  .page-heading { padding:33px 0 27px; }
  .page-heading h1 { font-size:2.2rem; }
  table,tbody,tr,td,tbody th { display:block; width:100%; }
  thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  tbody th { width:100%; padding:16px 0 8px; border:0; font-size:.93rem; }
  td { padding:8px 0 12px; border:0; }
  td:before { content:attr(data-game); display:block; color:var(--blue); text-transform:uppercase; font-size:.62rem; letter-spacing:.1em; margin-bottom:5px; }
  tr { border-top:1px solid var(--line); padding-bottom:7px; }
  .choice-section { display:block; padding-top:30px; }
  .choice-section h2 { max-width:none; }
  .detail-lead { display:block; }
  .detail-lead>div { margin-top:25px; }
  .detail-reading { display:block; padding-top:28px; }
  .detail-reading>.eyebrow { max-width:none; }
  .detail-notes { display:block; padding:24px; }
  .detail-notes section+section { margin-top:25px; }
  .beginner-copy section { grid-template-columns:25px 1fr; gap:15px; }
  .beginner-copy h2 { font-size:1.35rem; }
  .faq-layout,.contact-layout { display:block; }
  .faq-layout>div:first-child { max-width:none; padding-top:0; padding-bottom:12px; }
  .contact-layout aside { border-left:0; border-top:1px solid var(--line); padding:25px 0 0; margin-top:30px; }
  dialog { padding:25px; }
  .footer-top { display:block; }
  .footer-top nav { margin-top:25px; gap:12px 25px; }
  .legal { grid-template-columns:1fr; gap:18px; }
  .legal p { font-size:.76rem; }
  .legal p>span:first-child { font-size:.62rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }