/* Gulf of Cleveland Catch Book: "angler's field journal" (SPEC 6). Own system; no shared kit CSS. */
@font-face { font-family: "Brygada"; src: url("fonts/brygada-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Brygada"; src: url("fonts/brygada-var-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --lake: #0E3B36; --lake-2: #15524B; --paper: #F4EFE3; --paper-2: #EAE2D0; --ink: #1C2422; --ink-2: #4A5552;
  --rust: #B4532A; --rust-2: #93421F; --gold: #D9A632; --mist: #DCE6E1; --rule: #CFC5AE;
  --serif: "Brygada", Georgia, "Times New Roman", serif; --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shell: 1180px; --r: 3px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); font-variant-numeric: tabular-nums; }
img, svg { max-width: 100%; }
a { color: var(--lake-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rust); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 9; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
.narrow { max-width: 760px; }

/* masthead */
.top { background: var(--paper); border-bottom: 1px solid var(--rule); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
.mark { display: flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.mark__fish { width: 46px; height: 23px; color: var(--rust); flex: none; }
.mark__words { display: flex; flex-direction: column; line-height: 1.05; }
.mark__gulf { font: 700 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--lake-2); }
.mark__book { font: italic 600 1.55rem/1.1 var(--serif); }
.menu { display: flex; gap: .25rem 1.5rem; flex-wrap: wrap; }
.menu a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .98rem; padding: .35rem 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current] { border-bottom-color: var(--rust); color: var(--ink); }

/* type */
.kicker { font: 700 .74rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rust); margin: 0 0 .8rem; }
.display { font: 600 clamp(2.4rem, 5.4vw, 4.4rem)/1.04 var(--serif); letter-spacing: -.015em; margin: 0 0 1.25rem; }
.display em, .h1 em { font-style: italic; font-weight: 500; color: var(--lake-2); }
.h1 { font: 600 clamp(2rem, 4vw, 3rem)/1.08 var(--serif); letter-spacing: -.01em; margin: 0 0 1rem; overflow-wrap: anywhere; }
.h2 { font: 600 clamp(1.55rem, 2.6vw, 2.1rem)/1.15 var(--serif); margin: 0 0 1.2rem; }
.h2__sub { font: 500 1rem var(--sans); color: var(--ink-2); margin-left: .5rem; }
.h3 { font: 600 1.3rem/1.2 var(--serif); margin: 1.6rem 0 .8rem; }
.lede { font-size: 1.18rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.fine { font-size: .9rem; color: var(--ink-2); max-width: 70ch; }
.fine--light { color: var(--mist); }
.prose { max-width: 820px; }
.prose li { margin-bottom: .5rem; }

/* buttons */
.btn { display: inline-block; font: 700 1rem/1 var(--sans); padding: .95rem 1.4rem; border-radius: var(--r); text-decoration: none; border: 2px solid transparent; cursor: pointer; margin: 0 .5rem .5rem 0; }
.btn--rust { background: var(--rust); color: #fff; }
.btn--rust:hover { background: var(--rust-2); color: #fff; }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--danger { background: #8E2A1E; color: #fff; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--rust-2); font: 600 .9rem var(--sans); text-decoration: underline; cursor: pointer; }
.free { display: inline-block; background: var(--gold); color: var(--ink); font: 700 .82rem/1.2 var(--sans); padding: .35rem .6rem; border-radius: var(--r); }
p.free { margin: .8rem 0 0; }

/* hero */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero__art { border: 1px solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: 10px 10px 0 var(--lake); }
.horizon { display: block; width: 100%; height: auto; }
.cta { margin: 1.6rem 0 1rem; }

/* bands */
.band { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band--tight { padding: clamp(1.6rem, 4vw, 2.6rem) 0 1rem; }
.band--paper { background: var(--paper-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band--lake { background: var(--lake); color: var(--paper); }
.band--lake .lede { color: var(--mist); }

/* ledger list (how it works) */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.ledger li { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); font-size: 1.08rem; }
.ledger__n { font: italic 600 2.4rem/1 var(--serif); color: var(--rust); }

/* tally */
.tally { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); margin: 0 0 1.5rem; }
.tally > div { padding: 1rem .8rem 1.1rem 0; border-right: 1px solid var(--rule); }
.tally > div:last-child { border-right: 0; }
.tally > div + div { padding-left: 1rem; }
.tally__v { display: block; font: 600 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--serif); }
.tally__k { display: block; font-size: .85rem; color: var(--ink-2); margin-top: .35rem; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.two--wide { grid-template-columns: 1.1fr .9fr; }

/* ruled tables */
.rule { width: 100%; border-collapse: collapse; font-size: .97rem; margin: 0 0 1.2rem; }
.rule th { text-align: left; font: 700 .72rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding: .5rem .5rem .5rem 0; }
.rule td { border-bottom: 1px solid var(--rule); padding: .6rem .5rem .6rem 0; vertical-align: top; overflow-wrap: anywhere; }

/* shore slam */
.slam { list-style: none; padding: 0; margin: 1.5rem 0 1rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.slam__i { border: 1px dashed rgba(244, 239, 227, .45); border-radius: var(--r); padding: .9rem .7rem; text-align: center; font-size: .9rem; line-height: 1.3; }
.slam__i svg { display: block; width: 56px; height: 28px; margin: 0 auto .5rem; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .6; }
.slam__i.is-on { border: 1px solid var(--gold); background: rgba(217, 166, 50, .14); }
.slam__i.is-on svg { fill: var(--gold); stroke: var(--gold); opacity: 1; }
.slam--book .slam__i { border-color: var(--rule); color: var(--ink-2); }
.slam--book .slam__i.is-on { border-color: var(--rust); background: #F2E3D2; color: var(--ink); }
.slam--book .slam__i.is-on svg { fill: var(--rust); stroke: var(--rust); }

/* tiers (pricing) */
.tiers { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0; border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper); margin: 1rem 0 2rem; }
.tier { padding: 1.6rem 1.5rem; border-right: 1px solid var(--rule); }
.tier:last-child { border-right: 0; }
.tier--plus { background: var(--lake); color: var(--paper); }
.tier--plus .tier__note { color: var(--mist); }
.tier__name { font: 600 1.35rem var(--serif); margin: 0 0 .6rem; }
.tier__price { font: 600 2.6rem/1 var(--serif); margin: 0; }
.tier__price small { font: 500 1rem var(--sans); }
.tier__note { font-size: .9rem; color: var(--ink-2); margin: .4rem 0 1rem; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: .35rem 0 .35rem 1.4rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .85rem; width: .7rem; height: 2px; background: var(--rust); }
.tier--plus .ticks li::before { background: var(--gold); }

.qa dt { font: 600 1.2rem var(--serif); margin-top: 1.4rem; }
.qa dd { margin: .4rem 0 0; color: var(--ink-2); }

/* book */
.bookhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; }
.code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: var(--paper-2); padding: .1rem .35rem; overflow-wrap: anywhere; }
.seasons { display: flex; gap: .4rem; flex-wrap: wrap; }
.seasons a { border: 1px solid var(--ink); padding: .35rem .7rem; border-radius: var(--r); text-decoration: none; color: var(--ink); font-weight: 600; }
.seasons a[aria-current] { background: var(--ink); color: var(--paper); }
.plan-line { font-size: .92rem; color: var(--ink-2); border-left: 3px solid var(--gold); padding-left: .8rem; margin: 1.2rem 0 0; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.lockline { font-size: .92rem; color: var(--ink-2); }
.crumbs { font-size: .95rem; margin: 0 0 1rem; }

.sheet { background: var(--paper); border: 1px solid var(--ink); border-radius: var(--r); padding: clamp(1rem, 3vw, 1.6rem); box-shadow: 6px 6px 0 var(--rule); }
.field { display: block; margin: 0 0 1rem; border: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; padding: 0; }
.field small { font-weight: 400; color: var(--ink-2); }
input, select { width: 100%; font: 400 1rem var(--sans); padding: .7rem .75rem; border: 1px solid var(--ink-2); border-radius: var(--r); background: #FFFDF8; color: var(--ink); }
input[type="radio"] { width: auto; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span { display: inline-block; border: 1px solid var(--ink-2); border-radius: 999px; padding: .45rem .9rem; font-size: .93rem; cursor: pointer; background: #FFFDF8; }
.chip input:checked + span { background: var(--lake); color: var(--paper); border-color: var(--lake); }
.chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.errs { border-left: 4px solid #8E2A1E; background: #F6E1DA; padding: .6rem 1rem; margin: 0 0 1rem; }
.errs ul { margin: .3rem 0 .4rem; padding-left: 1.2rem; }
.empty { color: var(--ink-2); font-style: italic; }

.trips { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.trips a { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .8rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.trips a:hover { background: var(--paper); }
.trips__d { font: italic 600 1.05rem var(--serif); color: var(--rust); }
.trips__s { font-weight: 600; overflow-wrap: anywhere; }
.trips__s small { display: block; font-weight: 400; color: var(--ink-2); font-size: .85rem; }
.trips__f { font: 600 1.3rem var(--serif); }
.trips__f small { font: 400 .8rem var(--sans); color: var(--ink-2); }

.fishlist { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 2px solid var(--ink); }
.fishlist li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.fishlist__n { font: 600 1.1rem var(--serif); }
.fishlist__m { grid-column: 1; color: var(--ink-2); font-size: .92rem; overflow-wrap: anywhere; }
.fishlist form { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.facts { padding-left: 1.1rem; }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; align-items: end; height: 150px; border-bottom: 2px solid var(--ink); }
.months__c { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.months__b { width: 100%; background: var(--lake-2); height: 0; }
.months__b.m1 { height: 10%; } .months__b.m2 { height: 20%; } .months__b.m3 { height: 30%; } .months__b.m4 { height: 40%; } .months__b.m5 { height: 50%; }
.months__b.m6 { height: 60%; } .months__b.m7 { height: 70%; } .months__b.m8 { height: 80%; } .months__b.m9 { height: 90%; } .months__b.m10 { height: 100%; }
.months__b.m0 { height: 2px; background: var(--rule); }
.months__l { font-size: .7rem; color: var(--ink-2); margin-top: .25rem; }
.months__n { font-size: .75rem; font-weight: 700; }

.danger { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.danger summary { cursor: pointer; color: #8E2A1E; font-weight: 600; }

/* footer */
.base { background: var(--ink); color: #D8D2C4; padding: 3rem 0 1.5rem; margin-top: 0; font-size: .93rem; }
.base a { color: var(--paper); }
.base__cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; }
.base__name { font: 600 1.35rem var(--serif); color: var(--paper); margin: 0 0 .6rem; }
.base__h { font: 700 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
.base__line { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid #3A4441; margin-top: 2rem; padding-top: 1rem; }

/* report */
.report { padding: 2rem 0 3rem; }
.report__head { border-bottom: 2px solid var(--ink); margin-bottom: 1.2rem; }

@media (max-width: 900px) {
  .hero__grid, .two, .two--wide, .base__cols { grid-template-columns: 1fr; }
  .hero__art { box-shadow: 6px 6px 0 var(--lake); }
  .tiers { grid-template-columns: 1fr; }
  .tier { border-right: 0; border-bottom: 1px solid var(--rule); }
  .slam { grid-template-columns: repeat(3, 1fr); }
  .tally { grid-template-columns: repeat(2, 1fr); }
  .tally > div { border-right: 0; border-bottom: 1px solid var(--rule); padding-left: 0 !important; }
}
@media (max-width: 480px) {
  .row2 { grid-template-columns: 1fr; }
  .slam { grid-template-columns: repeat(2, 1fr); }
  .rule { font-size: .88rem; }
  .ledger li { grid-template-columns: 2.6rem 1fr; }
  .menu { gap: .25rem 1.1rem; }
}
@media print {
  .top, .base, .noprint, .btn, form, .danger { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .tally { grid-template-columns: repeat(5, 1fr); }
  .rule { page-break-inside: auto; } .rule tr { page-break-inside: avoid; }
}
/* ---------- v1.1.0: AdEngine banner (adengine.us) ----------
   One labelled slot between the main content and the footer, on public pages only (the controllers opt in). The label, the
   reserved height and the vertical space are all on the <ins>, so when tag.js (or ae-size.js) hides a slot it cannot fill, the
   label and the space go with it. 110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250). vertical-align:top on
   the link keeps the line box at the banner's own height. display stays in this file and is never !important: tag.js hides a
   slot with style.display='none'. */
.ae-slot { padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: clamp(2rem, 4vw, 3rem) auto; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 700 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; } }
@media print { .ae-slot { display: none; } }