/* Tackleleaf. Local assets, system typography and ordinary document flow. */
:root {
  --white:#FFFFFF;
  --warm:#F6F6F2;
  --slate:#2D3637;
  --muted:#697473;
  --petrol:#3E686D;
  --rule:#DFE5E3;
  --edge:clamp(20px,4.5vw,70px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--white); color:var(--slate); font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.shell { width:min(1180px,calc(100% - var(--edge)*2)); margin-inline:auto; }
a { color:var(--petrol); text-underline-offset:.24em; text-decoration-thickness:1px; }
a:hover { color:var(--slate); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.7; cursor:wait; }
:focus-visible { outline:3px solid var(--petrol); outline-offset:5px; }
[hidden] { display:none!important; }
img { display:block; width:100%; max-width:100%; height:auto; }
figure { margin:0; }
figcaption,.small,.source-note { color:var(--muted); font-size:.76rem; line-height:1.6; }
figcaption { margin-top:10px; }
p { margin:0 0 1.15rem; }
h1,h2,h3 { margin:0 0 1rem; line-height:1.2; font-weight:500; letter-spacing:-.035em; }
h1 { font-size:clamp(2.1rem,3.3vw,2.85rem); }
h2 { font:400 clamp(1.65rem,2.7vw,2.2rem)/1.2 Georgia,"Times New Roman",serif; letter-spacing:-.03em; }
h3 { font-size:1.22rem; }
ul,ol { padding-left:1.2rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; color:var(--muted); font-size:.65rem; font-weight:600; line-height:1.8; }
.text-link { font-size:.82rem; font-weight:500; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:16px; padding:11px 17px; background:var(--petrol); border:1px solid var(--petrol); text-decoration:none; color:white; font-size:.78rem; line-height:1.5; }
.button:hover { color:white; background:var(--slate); border-color:var(--slate); }
.skip-link { position:absolute; top:10px; left:10px; transform:translateY(-180%); background:white; padding:10px 14px; z-index:5; }
.skip-link:focus { transform:translateY(0); }

/* Brand: a leaf that continues into a fishing line and hook. */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:25px 0; border-bottom:1px solid var(--rule); }
.wordmark { display:flex; align-items:center; gap:9px; color:var(--slate); text-decoration:none; font-size:1.65rem; font-weight:650; letter-spacing:-.05em; line-height:1.1; }
.wordmark small { display:block; font-size:.52rem; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; font-weight:500; margin-top:8px; }
.leaf-line { width:37px; height:42px; flex:none; color:var(--petrol); }
.site-header nav { display:flex; gap:30px; }
.site-header nav a { color:var(--slate); text-decoration:none; font-size:.8rem; padding:10px 0; border-bottom:2px solid transparent; }
.site-header nav a:hover,.site-header nav a[aria-current="page"] { border-bottom-color:var(--petrol); color:var(--petrol); }
.menu-toggle { display:none; padding:8px 13px; border:1px solid var(--rule); background:white; color:var(--slate); }

/* Opening: a compact introduction, then a photographic editorial lead. */
.home-opening { padding:40px 0 35px; }
.home-opening>.eyebrow { padding-bottom:16px; border-bottom:1px solid var(--rule); margin-bottom:24px; }
.opening-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:70px; }
.opening-grid h1 { max-width:18ch; }
.intro-copy { font-size:.93rem; max-width:62ch; }
.opening-links { display:flex; gap:25px; flex-wrap:wrap; }
.editorial-lead { display:grid; grid-template-columns:1.7fr 1fr; align-items:center; background:var(--warm); }
.editorial-lead figure { align-self:start; background:white; }
.editorial-lead figcaption { padding-bottom:12px; margin-bottom:0; }
.lead-note { padding:25px 32px; }
.lead-note h2 { font-size:2rem; }
.lead-note p:not(.eyebrow) { font-size:.88rem; }
.lead-note .eyebrow { margin-bottom:18px; }
.directory { margin-top:50px; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:30px; margin-bottom:15px; }
.section-heading h2 { font-size:1.7rem; }
.section-heading .eyebrow { margin:0; }
.directory-row { display:grid; grid-template-columns:1fr 1.6fr 1fr; gap:35px; border-top:1px solid var(--rule); padding:30px 0; }
.entry-number { display:block; color:var(--petrol); font-size:.67rem; margin-bottom:16px; }
.directory-row h3 { font-size:1.5rem; font-weight:500; max-width:20ch; }
.developer { font-size:.74rem; color:var(--muted); }
.directory-row figure { padding-top:5px; }
.directory-row figcaption { font-size:.66rem; }
.home-game-copy { font-size:.88rem; }
.suitability { font-size:.78rem; color:var(--muted); margin:18px 0; }
.row-actions { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.row-actions .button { padding:10px 14px; }
.download-checks { background:var(--warm); padding:30px; margin-top:24px; }
.download-checks>div { display:flex; justify-content:space-between; gap:30px; align-items:baseline; }
.download-checks h2 { font-size:1.7rem; }
.download-checks ul { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; list-style:none; padding:0; margin:12px 0 0; }
.download-checks li { border-top:1px solid var(--rule); padding-top:18px; }
.download-checks h3 { font-size:.94rem; letter-spacing:-.01em; }
.download-checks li p { font-size:.83rem; margin:0; }
.first-cast-preview { display:grid; grid-template-columns:1fr 1.7fr; gap:70px; padding:45px 0 30px; }
.first-cast-preview ol { counter-reset:cast; list-style:none; padding:0; margin:0; }
.first-cast-preview li { counter-increment:cast; border-top:1px solid var(--rule); position:relative; padding:17px 0 0 42px; }
.first-cast-preview li:before { content:"0" counter(cast); position:absolute; left:0; top:21px; font-size:.66rem; color:var(--petrol); }
.first-cast-preview strong { font-size:.9rem; font-weight:500; }
.first-cast-preview li p { font-size:.85rem; margin-top:5px; }
.practical-close { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:24px 0 35px; border-top:1px solid var(--rule); margin-top:15px; }
.practical-close>p { margin:0; font-size:1.15rem; }
.practical-close>div { display:flex; gap:25px; }
.practical-close a { font-size:.83rem; }

/* Comparison and the two substantial anchored entries. */
.page-heading { padding:43px 0 30px; max-width:800px; }
.page-heading h1 { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.page-deck { margin:18px 0 0; color:var(--muted); max-width:65ch; }
.comparison { scroll-margin-top:30px; }
table { border-collapse:collapse; width:100%; font-size:.84rem; text-align:left; }
caption { text-align:left; color:var(--muted); font-size:.72rem; padding:0 0 15px; }
th,td { padding:17px 20px; vertical-align:top; border-bottom:1px solid var(--rule); }
thead th { background:var(--warm); font-weight:500; font-size:.79rem; border-top:1px solid var(--rule); }
tbody th { font-size:.77rem; font-weight:500; width:24%; padding-left:20px; }
td { width:38%; }
.jump-links { display:flex; gap:30px; flex-wrap:wrap; margin:20px 0 40px; font-size:.8rem; }
.game-section { border-top:1px solid var(--slate); padding:28px 0 35px; margin-top:25px; scroll-margin-top:28px; }
.game-section-heading { display:flex; justify-content:space-between; gap:35px; align-items:baseline; margin-bottom:24px; }
.game-section-heading h2 { margin:0; font-size:2rem; }
.game-section-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:55px; }
.game-description { font-size:.94rem; }
.feature-list { padding:0; list-style:none; margin:23px 0 0; }
.feature-list li { border-top:1px solid var(--rule); padding:12px 0 12px 17px; position:relative; font-size:.8rem; }
.feature-list li:before { content:"—"; position:absolute; left:0; color:var(--petrol); }
.game-practical { border-top:1px solid var(--rule); margin-top:24px; padding:20px 0 10px; }
.game-practical h3 { font-size:.9rem; letter-spacing:0; }
.game-practical p { font-size:.84rem; color:var(--muted); }
.source-note { margin:23px 0 0; max-width:95ch; }

/* Reading pages: generous text measure and useful, quiet side information. */
.guide-layout { display:grid; grid-template-columns:1fr 2.6fr; gap:65px; }
.guide-layout aside { font-size:.83rem; color:var(--muted); padding-top:20px; }
.guide-layout aside p:not(.eyebrow) { line-height:2; }
.guide-copy section { display:grid; grid-template-columns:30px 1fr; gap:20px; border-top:1px solid var(--rule); padding:25px 0 10px; }
.guide-number { font-size:.68rem; color:var(--petrol); padding-top:7px; }
.guide-copy h2 { font-size:1.45rem; }
.guide-copy p { max-width:68ch; font-size:.94rem; }
.guide-layout+.source-note { margin-bottom:45px; }
.faq-layout { display:grid; grid-template-columns:2.3fr 1fr; gap:65px; padding:10px 0 55px; }
.faq-list { border-top:1px solid var(--rule); }
details { border-bottom:1px solid var(--rule); }
summary { list-style:none; cursor:pointer; position:relative; padding:21px 35px 21px 0; font-size:1rem; }
summary::-webkit-details-marker { display:none; }
summary:after { content:"+"; position:absolute; right:4px; top:21px; color:var(--petrol); }
details[open] summary:after { content:"−"; }
details>div { padding:0 30px 10px 0; font-size:.9rem; }
.faq-layout aside { padding-top:25px; }
.faq-layout aside h2 { font-size:1.4rem; }
.faq-layout aside p,.faq-layout aside a { font-size:.84rem; }
.contact-layout { display:grid; grid-template-columns:1fr 2.2fr; gap:65px; padding:10px 0 55px; }
.contact-layout aside { max-width:30ch; font-size:.85rem; padding-top:7px; }
.contact-layout aside h2 { font-size:1.5rem; margin-top:32px; }
.form-fields { 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; border:1px solid #98AAA7; border-radius:0; background:white; color:var(--slate); padding:12px; font-size:16px; margin-bottom:25px; }
textarea { resize:vertical; }
.form-status { font-size:.83rem; color:var(--muted); 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); color:var(--slate); background:white; }
dialog::backdrop { background:rgba(45,54,55,.45); }
.dialog-close { display:block; padding:5px; background:none; border:0; color:var(--petrol); text-decoration:underline; margin:0 0 22px auto; }
.dialog-done { margin-top:12px; }
.policy { max-width:76ch; padding:0 0 50px; font-size:.94rem; }
.policy h2 { font-size:1.4rem; margin:32px 0 15px; }
.policy li { margin-bottom:10px; }

/* Footer tiers separate navigation, independent-publication note and legal data. */
.site-footer { background:var(--warm); border-top:1px solid var(--rule); }
.footer-navline { display:flex; align-items:center; justify-content:space-between; gap:35px; padding:30px 0 25px; border-bottom:1px solid var(--rule); }
.footer-logo { font-size:1.6rem; font-weight:650; letter-spacing:-.05em; color:var(--slate); text-decoration:none; }
.footer-navline nav { display:flex; gap:18px; flex-wrap:wrap; }
.footer-navline nav a { font-size:.74rem; }
.footer-body { display:grid; grid-template-columns:1fr 2fr; gap:65px; padding:25px 0; }
.publication-note { max-width:36ch; font-size:.74rem; color:var(--muted); }
.publication-note p:last-child { font-size:.68rem; }
.legal-data { margin:0; display:grid; grid-template-columns:1fr 1.4fr; gap:22px 35px; }
.legal-data dt { text-transform:uppercase; letter-spacing:.08em; font-size:.59rem; color:var(--muted); margin-bottom:5px; }
.legal-data dd { margin:0; font-size:.73rem; line-height:1.65; overflow-wrap:anywhere; }
.copyright { margin:0; padding:18px 0 23px; border-top:1px solid var(--rule); font-size:.67rem; color:var(--muted); }

@media(max-width:1000px) {
  .opening-grid { gap:40px; }
  .editorial-lead { grid-template-columns:1.4fr 1fr; }
  .lead-note { padding:22px; }
  .lead-note h2 { font-size:1.7rem; }
  .directory-row { grid-template-columns:1fr 1.5fr .9fr; gap:25px; }
  .directory-row h3 { font-size:1.3rem; }
  .footer-navline { align-items:flex-start; }
  .footer-navline nav { max-width:65%; }
  .game-section-grid,.contact-layout,.faq-layout,.guide-layout { gap:35px; }
  .footer-body { gap:35px; }
}
@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(--warm); }
  .opening-grid { grid-template-columns:1fr 1.1fr; gap:30px; }
  .editorial-lead { align-items:start; }
  .lead-note { padding:20px; }
  .lead-note h2 br { display:none; }
  .lead-note p:not(.eyebrow) { font-size:.82rem; }
  .directory-row { grid-template-columns:1fr 1.7fr; gap:20px 30px; }
  .directory-row header { grid-column:1; grid-row:1; }
  .directory-row figure { grid-column:1; grid-row:2; padding-top:0; }
  .directory-copy { grid-column:2; grid-row:1/3; }
  .download-checks { padding:25px; }
  .download-checks ul { gap:23px; }
  .game-section-heading { display:block; }
  .game-section-grid { gap:30px; }
  .form-fields { grid-template-columns:1fr; gap:0; }
  .legal-data { gap:20px 25px; }
}
@media(max-width:600px) {
  .site-header { padding:21px 0; }
  .home-opening { padding-top:28px; }
  .opening-grid { display:block; }
  .opening-grid h1 { font-size:2.2rem; max-width:none; margin-bottom:23px; }
  .opening-grid h1 br { display:none; }
  .editorial-lead { display:block; }
  .editorial-lead figcaption { padding-bottom:10px; font-size:.7rem; }
  .lead-note { padding:25px 21px; }
  .lead-note p:not(.eyebrow) { font-size:.9rem; }
  .directory { margin-top:35px; }
  .section-heading { display:block; }
  .section-heading h2 { margin-top:12px; }
  .directory-row { display:block; padding:25px 0; }
  .directory-row header { display:grid; grid-template-columns:25px 1fr; gap:0 13px; }
  .entry-number { padding-top:6px; }
  .directory-row h3 { font-size:1.45rem; max-width:none; margin-bottom:8px; }
  .directory-row .developer { grid-column:2; }
  .directory-row figure { margin-top:23px; }
  .directory-row figcaption { font-size:.72rem; }
  .home-game-copy { font-size:.92rem; }
  .directory-copy { margin-top:15px; }
  .row-actions { gap:20px; }
  .download-checks { padding:24px 20px; }
  .download-checks>div { display:block; }
  .download-checks ul { display:block; }
  .download-checks li { padding-top:18px; margin-top:18px; }
  .download-checks h3 { margin-bottom:8px; }
  .first-cast-preview { display:block; padding-top:34px; }
  .first-cast-preview h2 br { display:none; }
  .first-cast-preview ol { margin-top:25px; }
  .practical-close { display:block; padding:24px 0 30px; }
  .practical-close>div { margin-top:18px; flex-wrap:wrap; gap:18px; }
  .practical-close>a { display:inline-block; margin-top:18px; }
  .page-heading { padding:32px 0 28px; }
  .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%; border:0; padding:16px 0 8px; font-size:.92rem; }
  td { border:0; padding:8px 0 12px; }
  td:before { content:attr(data-game); display:block; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--petrol); margin-bottom:5px; }
  tr { border-top:1px solid var(--rule); padding-bottom:8px; }
  .jump-links { gap:18px; margin-bottom:30px; }
  .game-section { padding-top:24px; }
  .game-section-heading h2 { font-size:1.9rem; }
  .game-section-grid { display:block; }
  .game-visual { margin-bottom:25px; }
  .game-description { font-size:.94rem; }
  .guide-layout,.faq-layout,.contact-layout { display:block; }
  .guide-layout aside { border-top:1px solid var(--rule); padding:20px 0 25px; }
  .guide-layout aside p:not(.eyebrow) { display:none; }
  .guide-copy section { gap:13px; grid-template-columns:25px 1fr; }
  .guide-copy h2 { font-size:1.35rem; }
  .faq-layout aside { padding-top:32px; }
  .contact-layout aside { max-width:none; padding-bottom:25px; }
  .contact-layout aside h2 br { display:none; }
  .contact-layout aside h2 { margin-top:25px; }
  dialog { padding:25px; }
  .footer-navline { display:block; }
  .footer-navline nav { margin-top:20px; max-width:none; gap:12px 22px; }
  .footer-body { display:block; }
  .publication-note { max-width:none; margin-bottom:25px; }
  .legal-data { grid-template-columns:1fr; gap:18px; }
  .legal-data dt { font-size:.62rem; }
  .legal-data dd { font-size:.76rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}