/* greenvillefishing.com
   Four colours from the brand doc, never eyedropped. Lora for headings, Inter for
   body, Roboto Condensed for eyebrows and hero type, matching the newsletter and
   the carousels so the brand reads as one thing across surfaces. Mobile first. */

@font-face { font-family: "Lora"; font-weight: 700; font-display: swap; src: url("/static/fonts/lora-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 700; font-display: swap; src: url("/static/fonts/roboto-condensed-700.woff2") format("woff2"); }

:root {
  --olive: #525D3B; --sage: #A1A992; --amber: #FCBD53; --white: #FFFFFF;
  --ink: #2B2F22; --canvas: #EDEFE8; --mist: #F6F7F3; --sage40: #D9DCD3; --muted: #6B7062;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cond: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 68rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--olive); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--olive); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.2vw, 2rem); margin-top: 1.6em; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.1rem; }
.section { padding: 2rem 1.1rem 1rem; }
.lead { font-size: 1.15rem; line-height: 1.55; }
.small { font-size: .92rem; }
.muted, .quiet { color: var(--muted); }
.quiet { font-size: .92rem; }
.more a { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; }
.eyebrow { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; color: var(--olive); margin: 0 0 .4em; }
.eyebrow-light { color: var(--amber); }
.tag { display: inline-block; background: var(--amber); color: var(--ink); font-family: var(--cond); font-size: .75rem; letter-spacing: .1em; padding: .1em .5em; border-radius: 2px; vertical-align: middle; margin-left: .4em; }
.skip { position: absolute; left: -999px; top: 0; background: var(--amber); padding: .5rem 1rem; }
.skip:focus { left: .5rem; z-index: 10; }

/* header */
.site-header { background: var(--sage); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.brand img { width: 118px; height: auto; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.nav a { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; text-decoration: none; color: var(--ink); padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--amber); }

/* hero: full bleed photo, white condensed caps, two-pass drop shadow, no scrim */
.hero { position: relative; background: var(--olive); color: var(--white); min-height: 42vh; display: grid; align-items: end; overflow: hidden; }
.hero-home { min-height: 46vh; }
@media (min-width: 760px) { .hero-home { min-height: max(62vh, 45vw); } }  /* 45vw caps the band at about 2.2:1 so a 3:2 hero keeps the head and the fish */
@media (min-width: 760px) { .hero:not(.hero-home) { min-height: max(42vh, min(40vw, 64vh)); } }  /* 42vh alone was a 3.8:1 band at 1440x900 and cut heads; 40vw makes it about 2.5:1, 64vh stops it filling a short laptop screen */
.hero .hero-img, .hero picture { position: absolute; inset: 0; }
.hero picture img { width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: relative; padding: 2.2rem 1.1rem 1.8rem; max-width: var(--wrap); margin: 0 auto; width: 100%; }
.hero h1 { font-family: var(--cond); color: var(--white); text-transform: uppercase; letter-spacing: .02em; font-size: clamp(2rem, 6.5vw, 4rem); line-height: 1; text-wrap: balance; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 8px 28px rgba(0,0,0,.45); margin: 0; }
.hero .eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* placeholders until photos exist */
.ph { background: var(--sage); color: var(--olive); display: grid; place-items: center; font-family: var(--cond); text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; }
.ph-hero { position: absolute; inset: 0; }
.ph-gallery, .card-img.ph, .trip-img.ph { aspect-ratio: 4 / 3; width: 100%; }
.ph span { opacity: .85; }
.draft-note { border-left: 4px solid var(--amber); padding-left: .8rem; }

/* prose */
.prose { padding-top: 2rem; padding-bottom: 1rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5em; }
.answer { padding-top: 2.2rem; }

/* cards */
.grid { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--white); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(43,47,34,.08); }
.card-img img, .card-img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.card-body { padding: 1rem 1.1rem 1.2rem; }
.card h3 a { text-decoration: none; }
.price { font-family: var(--cond); font-weight: 700; letter-spacing: .03em; color: var(--olive); }

/* bands */
.band { padding: 2.4rem 0; margin-top: 1.5rem; }
.band-sage { background: var(--sage40); }
.review { background: var(--white); border-left: 4px solid var(--amber); margin: 0; padding: 1rem 1.1rem; border-radius: 0 4px 4px 0; }
.review p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; }
.review footer { font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--muted); }
.review-inline { margin-top: 1rem; }
.review-list { display: grid; gap: 1.2rem; }
.review-full { display: grid; gap: 1rem; }
@media (min-width: 760px) { .review-full { grid-template-columns: 1fr 2fr; align-items: start; } }
.review-full blockquote { margin: 0; }

/* seasons */
.season-teaser .season-chip { background: var(--white); padding: .9rem 1rem; border-radius: 4px; text-decoration: none; display: grid; }
.season-chip strong { font-family: var(--serif); color: var(--olive); font-size: 1.1rem; }
.season-chip span { color: var(--muted); font-size: .9rem; }
.season { padding: 1.2rem 0; border-top: 1px solid var(--sage40); }
.season h2 { margin-top: 0; }
.species-list div, .ring-list div { margin-bottom: 1rem; }
dt { font-weight: 600; color: var(--olive); }
dd { margin: 0; }

/* where */
.rings-row { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 720px) { .rings-row { grid-template-columns: 1fr 1fr; } }
.rings { width: 100%; max-width: 420px; margin: 0 auto; }
.water-list li { margin-bottom: .6em; }

/* trips */
.trip { display: grid; gap: 1.2rem; background: var(--white); border-radius: 4px; padding: 1.2rem; margin-bottom: 1.5rem; }
@media (min-width: 820px) { .trip { grid-template-columns: 5fr 7fr; } }
.trip-img img, .trip-img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 3px; }
.trip h2 { margin-top: 0; }
table.prices { border-collapse: collapse; width: 100%; max-width: 30rem; margin: 1rem 0; font-variant-numeric: tabular-nums; }
table.prices caption { text-align: left; font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--muted); padding-bottom: .3rem; }
table.prices th, table.prices td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--sage40); }
table.prices thead th { font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--muted); }
table.prices td { font-weight: 600; color: var(--olive); }

/* book */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding-left: 3.2rem; margin-bottom: 1.4rem; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: .1rem; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--amber); color: var(--ink); font-family: var(--cond); font-weight: 700; font-size: 1.2rem; display: grid; place-items: center; }
.steps h2 { font-size: 1.35rem; margin-top: 0; }

/* faq */
.faq { padding: 1rem 0; border-top: 1px solid var(--sage40); }
.faq h2 { font-size: 1.3rem; margin-top: 0; }

/* gallery */
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { margin: 0; background: var(--white); border-radius: 4px; overflow: hidden; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery-item figcaption { padding: .6rem .8rem .8rem; font-size: .92rem; }

/* buttons */
.btn { display: inline-block; font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; padding: .8rem 1.3rem; border-radius: 3px; border: 2px solid var(--olive); }
.btn-primary { background: var(--olive); color: var(--white); }
.btn-primary:hover { background: #3f4a2d; border-color: #3f4a2d; }
.btn-secondary { background: transparent; color: var(--olive); }
.btn-secondary:hover { background: var(--white); }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }

/* booking block */
.booking { background: var(--white); border-top: 4px solid var(--amber); margin-top: 2.5rem; padding: 2.4rem 0 2rem; }
.booking h2 { margin-top: 0; }

/* footer */
.site-footer { background: var(--olive); color: var(--white); padding: 2rem 0 2.4rem; font-size: .95rem; }
.site-footer a { color: var(--white); text-decoration-color: var(--amber); }
.footer-links a { margin-right: 1rem; }
.site-footer .quiet { color: var(--sage40); }

/* about portrait */
.portrait { margin: 0 0 1.2rem; max-width: 320px; }
@media (min-width: 760px) { .portrait { float: right; margin: .4rem 0 1rem 1.6rem; } }
.portrait img, .portrait .ph { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 4px; }
.portrait figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; }
.prose::after { content: ""; display: block; clear: both; }