/* Lurehaven: independent fishing-game guide. No external font dependencies. */
:root {
  --white: #FFFFFF;
  --stone: #F5F5F1;
  --ink: #29332E;
  --muted: #667168;
  --forest: #345C48;
  --border: #DFE5DF;
  --gutter: clamp(20px, 4vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 30px; }
body { margin: 0; color: var(--ink); background: var(--white); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
a { color: var(--forest); 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; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption, .small, .source-note { color: var(--muted); font-size: .76rem; line-height: 1.6; }
figcaption { padding-top: 9px; }
p { margin: 0 0 1.2rem; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.18; letter-spacing: -.035em; margin: 0 0 1rem; }
h1 { font-size: clamp(2.2rem, 3.5vw, 3.2rem); }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.3rem); }
h3 { font-size: 1.5rem; }
ul, ol { padding-left: 1.15rem; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 5px; }
.container { width: min(1160px, calc(100% - var(--gutter)*2)); margin-inline: auto; }
.skip-link { position: absolute; top: 10px; left: 10px; padding: 10px 15px; background: white; transform: translateY(-180%); z-index: 5; }
.skip-link:focus { transform: translateY(0); }
.kicker { text-transform: uppercase; letter-spacing: .13em; font-size: .66rem; font-weight: 600; color: var(--muted); line-height: 1.8; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 15px; padding: 11px 17px; background: var(--forest); border: 1px solid var(--forest); color: white; text-decoration: none; font-size: .78rem; line-height: 1.5; }
.button:hover { color: white; background: var(--ink); border-color: var(--ink); }
.underlined { font-size: .82rem; font-weight: 500; }

/* A single quiet masthead, with the lure as an editable line drawing. */
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.wordmark { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); font: 2rem/1 Georgia, serif; letter-spacing: -.045em; }
.wordmark small { display: block; margin-top: 9px; font: .55rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lure-symbol { width: 43px; height: 43px; color: var(--forest); flex: none; }
.site-header nav { display: flex; gap: 24px; align-items: center; }
.site-header nav a { font-size: .76rem; color: var(--ink); padding: 8px 0; text-decoration: none; border-bottom: 1px solid transparent; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--forest); border-bottom-color: var(--forest); }
.menu-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--ink); padding: 8px 13px; }

/* Cover: a short title and a separate, comfortable text measure. */
.cover { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 56px 0 48px; }
.cover .kicker { margin-bottom: 22px; }
.cover h1 { max-width: 15ch; margin-bottom: 0; }
.cover-copy { padding-top: 7px; max-width: 60ch; }
.intro-copy { font-size: .94rem; }
.section-label { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; border-top: 1px solid var(--ink); padding-top: 20px; margin-bottom: 26px; }
.section-label h2 { font-size: 1.35rem; margin: 0; letter-spacing: -.02em; }
.section-label p { color: var(--muted); font-size: .77rem; margin: 0; }
.comparison-spread { scroll-margin-top: 28px; }
.game-columns { display: grid; grid-template-columns: 1fr 1fr; }
.game-column { min-width: 0; padding: 0 35px 5px 0; }
.game-column + .game-column { border-left: 1px solid var(--border); padding: 0 0 5px 35px; }
.column-heading { display: flex; align-items: flex-start; gap: 17px; min-height: 90px; }
.column-heading h3 { font-size: 1.7rem; margin-bottom: 7px; }
.issue-number { font-size: .64rem; border: 1px solid var(--border); padding: 4px 7px; color: var(--forest); margin-top: 4px; }
.developer { color: var(--muted); font-size: .75rem; margin-bottom: 0; }
.game-column figure { margin-bottom: 25px; }
.game-column img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.home-game-copy { font-size: .9rem; }
.feature-list { list-style: none; padding: 0; margin: 20px 0 26px; }
.feature-list li { border-bottom: 1px solid var(--border); padding: 11px 0 11px 18px; position: relative; font-size: .8rem; }
.feature-list li:first-child { border-top: 1px solid var(--border); }
.feature-list li::before { content: "—"; position: absolute; left: 0; color: var(--forest); }
.game-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }

/* The comparison stays a real table; small screens get labelled cells. */
.comparison-table-section { display: grid; grid-template-columns: .8fr 2.2fr; gap: 45px; background: var(--stone); padding: 32px; margin-top: 55px; }
.table-title h2 { font-size: 1.75rem; }
.comparison-table-section table { width: 100%; border-collapse: collapse; font-size: .8rem; text-align: left; }
caption { text-align: left; color: var(--muted); font-size: .68rem; margin-bottom: 15px; }
th, td { border-bottom: 1px solid var(--border); padding: 14px 12px 14px 0; vertical-align: top; }
thead th { border-top: 1px solid var(--border); font-size: .7rem; color: var(--forest); }
tbody th { width: 24%; font-size: .74rem; font-weight: 500; }
td { width: 38%; }
.source-note { margin: 22px 0 0; max-width: 95ch; }
.field-notes { margin-top: 55px; }
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.notes-grid article { padding-left: 22px; border-left: 1px solid var(--border); }
.note-number { display: block; color: var(--forest); font-size: .67rem; margin-bottom: 16px; letter-spacing: .1em; }
.notes-grid h3 { font-size: 1.25rem; max-width: 20ch; }
.notes-grid p { font-size: .85rem; }
.independent-note { display: grid; grid-template-columns: 1.2fr 1fr; gap: 55px; align-items: center; border-top: 1px solid var(--border); padding-top: 35px; margin: 35px 0 55px; }
.independent-note p { font-size: .9rem; max-width: 50ch; }
.independent-note .kicker { font-size: .66rem; }
.plain-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: .8rem; }

/* Interior pages use clear reading columns rather than repeating the cover. */
.page-heading { max-width: 760px; padding: 52px 0 38px; }
.page-heading .kicker { margin-bottom: 20px; }
.standfirst { color: var(--muted); max-width: 60ch; margin: 20px 0 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .72rem; padding-top: 25px; }
.game-title { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 28px 0 34px; }
.game-title h1 { font-size: clamp(2rem, 3vw, 2.8rem); max-width: 22ch; }
.game-title .small { margin: 9px 0 0; }
.game-opening { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 35px; }
.game-opening img { width: 100%; }
.game-opening aside h2 { font-size: 1.9rem; }
.game-reading { display: grid; grid-template-columns: .7fr 1.7fr; gap: 70px; padding-top: 45px; }
.reading-label p:not(.kicker) { font: 1.25rem/1.5 Georgia, serif; }
.game-description { max-width: 71ch; font-size: .97rem; }
.game-checks { margin-top: 28px; padding: 30px; background: var(--stone); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.game-checks h2 { font-size: 1.3rem; }
.game-checks p { font-size: .87rem; margin: 0; }
.page-closing { display: flex; flex-wrap: wrap; gap: 20px 40px; padding: 27px 0 40px; border-top: 1px solid var(--border); margin-top: 35px; font-size: .85rem; }
.guide-layout { display: grid; grid-template-columns: 1fr 2.1fr; gap: 80px; }
.guide-index { padding-top: 4px; }
.guide-index a { display: block; font-size: .8rem; padding: 12px 0; border-top: 1px solid var(--border); }
.beginner-copy section { scroll-margin-top: 25px; border-top: 1px solid var(--border); padding: 23px 0 20px; }
.beginner-copy h2 { font-size: 1.5rem; }
.beginner-copy p { max-width: 65ch; }
.beginner-copy .note-number { margin-bottom: 10px; }
.questions-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; padding-bottom: 60px; }
.questions-intro { padding-top: 25px; max-width: 29ch; }
.questions-intro h2 { font-size: 1.4rem; }
.questions-intro p { font-size: .87rem; }
.questions { border-top: 1px solid var(--border); }
details { border-bottom: 1px solid var(--border); }
summary { position: relative; cursor: pointer; list-style: none; font-size: 1rem; padding: 21px 30px 21px 0; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 3px; top: 21px; color: var(--forest); }
details[open] summary::after { content: "−"; }
details > div { padding: 0 30px 10px 0; font-size: .9rem; }
.contact-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 75px; padding: 12px 0 65px; }
.contact-layout aside { padding: 25px 0 0 32px; border-left: 1px solid var(--border); }
.contact-layout aside h2 { font-size: 1.4rem; margin-top: 35px; }
.contact-layout aside p { font-size: .86rem; }
.form-line { 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; border: 1px solid #96A69B; background: white; color: var(--ink); border-radius: 0; margin-bottom: 25px; font-size: 16px; }
textarea { resize: vertical; }
.form-status { color: var(--muted); font-size: .82rem; margin: 18px 0 0; max-width: 65ch; }
.form-status.error { color: #8A3434; }
dialog { width: min(500px, calc(100% - 40px)); border: 1px solid var(--border); padding: 32px; color: var(--ink); background: white; }
dialog::backdrop { background: rgba(41, 51, 46, .45); }
.dialog-close { display: block; margin-left: auto; margin-bottom: 20px; padding: 5px; border: 0; background: transparent; color: var(--forest); text-decoration: underline; }
.dialog-done { margin-top: 10px; }
.policy { max-width: 760px; padding-bottom: 40px; }
.policy section { border-top: 1px solid var(--border); padding: 25px 0 15px; }
.policy h2 { font-size: 1.45rem; }
.policy p, .policy li { font-size: .93rem; }
.policy li { margin-bottom: 8px; }

/* Legal information has its own readable tier on every page. */
.site-footer { background: var(--stone); border-top: 1px solid var(--border); }
.footer-top { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; padding: 35px 0 25px; }
.footer-wordmark { font: 1.75rem Georgia, serif; color: var(--ink); text-decoration: none; letter-spacing: -.04em; }
.footer-top p { font-size: .75rem; color: var(--muted); margin: 12px 0 0; }
.footer-top nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; align-content: start; padding-top: 8px; }
.footer-top nav a { font-size: .74rem; }
.company-details { display: grid; grid-template-columns: 1fr 1.6fr 1fr 1fr; gap: 25px; border-top: 1px solid var(--border); padding: 25px 0; margin: 0; }
.company-details dt { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: .58rem; margin-bottom: 7px; }
.company-details dd { font-size: .72rem; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.footer-bottom { border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 25px; padding: 18px 0 22px; }
.footer-bottom p { font-size: .65rem; color: var(--muted); margin: 0; }

@media (max-width: 1000px) {
  .site-header nav { gap: 16px; }
  .cover { gap: 40px; }
  .game-column { padding-right: 25px; }
  .game-column + .game-column { padding-left: 25px; }
  .column-heading h3 { font-size: 1.5rem; }
  .comparison-table-section { display: block; }
  .table-title { display: flex; gap: 30px; justify-content: space-between; }
  .table-title h2 { font-size: 1.6rem; }
  .table-title br { display: none; }
  .guide-layout, .questions-layout { gap: 40px; }
  .contact-layout { gap: 40px; }
  .game-opening { gap: 35px; }
  .company-details { grid-template-columns: 1fr 1.5fr; }
}
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; gap: 20px; }
  .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; padding-top: 8px; }
  .js .site-header nav a { padding: 12px 10px; border-bottom: none; }
  .js .site-header nav a[aria-current="page"] { background: var(--stone); }
  .cover { padding-top: 38px; }
  .cover h1 { font-size: 2.6rem; }
  .cover-copy { padding-top: 0; }
  .game-actions { align-items: flex-start; flex-direction: column; }
  .column-heading { min-height: 102px; }
  .column-heading h3 { font-size: 1.4rem; }
  .column-heading { gap: 10px; }
  .independent-note { gap: 30px; }
  .notes-grid { gap: 25px; }
  .notes-grid article { padding-left: 15px; }
  .game-title { display: block; }
  .game-title > div + div { margin-top: 24px; }
  .game-opening { grid-template-columns: 1.2fr 1fr; gap: 25px; }
  .game-opening aside h2 { font-size: 1.5rem; }
  .game-reading { grid-template-columns: .65fr 1.7fr; gap: 35px; }
  .game-checks { gap: 30px; }
  .form-line { 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.9rem; }
  .lure-symbol { width: 36px; height: 36px; }
  .wordmark small { font-size: .48rem; }
  .cover { display: block; padding: 32px 0; }
  .cover h1 { font-size: 2.45rem; margin-bottom: 22px; }
  .cover-copy { max-width: none; }
  .intro-copy { font-size: .94rem; }
  .section-label { display: block; }
  .section-label h2 { margin-bottom: 8px; }
  .game-columns { display: block; }
  .game-column, .game-column + .game-column { padding: 0; border-left: none; }
  .game-column + .game-column { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 30px; }
  .column-heading { min-height: auto; padding-bottom: 18px; gap: 15px; }
  .column-heading h3 { font-size: 1.6rem; }
  .game-actions { flex-direction: row; align-items: center; }
  .home-game-copy { font-size: .93rem; }
  .comparison-table-section { margin-top: 38px; padding: 23px 18px; }
  .table-title { display: block; }
  .comparison-table-section table, .comparison-table-section tbody, .comparison-table-section tr, .comparison-table-section td, .comparison-table-section tbody th { display: block; width: 100%; }
  .comparison-table-section thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comparison-table-section tbody th { padding: 16px 0 8px; border: 0; font-size: .9rem; }
  .comparison-table-section td { border: 0; padding: 7px 0 12px; font-size: .86rem; }
  .comparison-table-section td::before { content: attr(data-game); display: block; font-size: .62rem; color: var(--forest); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
  .comparison-table-section tr { border-top: 1px solid var(--border); padding-bottom: 6px; }
  .field-notes { margin-top: 38px; }
  .notes-grid { display: block; }
  .notes-grid article { display: grid; grid-template-columns: 25px 1fr; gap: 0 15px; padding: 20px 0 5px; border-left: none; border-bottom: 1px solid var(--border); }
  .notes-grid h3 { max-width: none; }
  .notes-grid p { grid-column: 2; font-size: .9rem; }
  .notes-grid .note-number { padding-top: 5px; }
  .independent-note { display: block; margin-bottom: 38px; }
  .independent-note > div { margin-top: 25px; }
  .independent-note h2 br { display: none; }
  .page-heading { padding: 35px 0 30px; }
  .game-title h1 { font-size: 2.3rem; }
  .game-opening { display: block; }
  .game-opening aside { padding-top: 25px; }
  .game-opening aside h2 br { display: none; }
  .game-reading { display: block; padding-top: 28px; }
  .reading-label { display: none; }
  .game-description { font-size: .95rem; }
  .game-checks { display: block; padding: 22px; }
  .game-checks section + section { margin-top: 28px; }
  .page-closing { gap: 18px; flex-direction: column; }
  .guide-layout, .questions-layout, .contact-layout { display: block; }
  .guide-index { margin-bottom: 30px; }
  .beginner-copy h2 { font-size: 1.4rem; }
  .questions-intro { max-width: none; padding-top: 0; }
  .questions-layout { padding-bottom: 40px; }
  summary { font-size: .96rem; }
  .contact-layout { padding-bottom: 38px; }
  .contact-layout aside { padding: 25px 0 0; margin-top: 35px; border-top: 1px solid var(--border); border-left: 0; }
  .contact-layout aside h2 br { display: none; }
  dialog { padding: 25px; }
  .footer-top { display: block; padding-top: 28px; }
  .footer-top nav { margin-top: 25px; gap: 13px 25px; }
  .company-details { grid-template-columns: 1fr; gap: 20px; }
  .company-details dt { font-size: .62rem; }
  .company-details dd { font-size: .76rem; }
  .footer-bottom { display: block; }
  .footer-bottom p + p { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
