/* =====================================================================
   Sunset Country Fishing Notes  ·  assets-src/style.css
   Skeleton reused: galerie-visuelle. Rehoused for this site.
   Class prefix: snd- (sounding, the depth reading taken from a boat).
   Direction: an iron charcoal wall where the photographs hang, and a
   birch cream sheet under the reading column. Condensed sans for the
   headings, old style serif for the text: the reverse of the donor.
   No external request, no web font, no script.
   ===================================================================== */

:root {
  /* --- ink and ground ------------------------------------------------ */
  --snd-iron:        #1b1f23;   /* iron charcoal: the wall              */
  --snd-iron-deep:   #121518;   /* the bottom of the page               */
  --snd-iron-soft:   #252b31;   /* raised panel on the wall             */
  --snd-iron-line:   #39424a;   /* hairline on the wall                 */
  --snd-birch:       #ece4d5;   /* birch cream: text on the wall        */
  --snd-birch-mute:  #b0a898;   /* secondary text on the wall           */
  --snd-paper:       #efe9dc;   /* the reading sheet                    */
  --snd-paper-edge:  #d8cfbd;   /* hairline on the sheet                */
  --snd-ink:         #21252a;   /* text on the sheet                    */
  --snd-ink-mute:    #545c64;   /* secondary text on the sheet          */
  --snd-slate:       #7fb0cc;   /* slate lake blue, links on the wall   */
  --snd-slate-deep:  #205572;   /* slate lake blue, links on the sheet  */
  --snd-slate-band:  #2b4a5c;   /* slate band behind a plate            */
  --snd-ember:       #c25c31;   /* ember rust: rules, numerals          */
  --snd-ember-hi:    #e2895d;   /* ember rust, readable on the wall     */

  /* --- type ---------------------------------------------------------- */
  --snd-face-title: "Avenir Next Condensed", "Roboto Condensed", "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --snd-face-text:  "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --snd-track:      0.16em;      /* tracking of the small capitals      */

  /* --- rhythm -------------------------------------------------------- */
  --snd-rail:    1320px;
  --snd-read:    38rem;
  --snd-edge:    clamp(1.1rem, 4.5vw, 3.6rem);
  --snd-gap:     clamp(0.85rem, 1.9vw, 1.75rem);
  --snd-band:    clamp(3rem, 6.5vw, 6rem);
  --snd-corner:  0;              /* square corners, like a contact sheet */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--snd-iron);
  color: var(--snd-birch);
  font-family: var(--snd-face-text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.66;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--snd-face-title);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0.005em;
  margin: 0;
}
h1 { font-size: clamp(2.15rem, 1.25rem + 3.5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem); }
h3 { font-size: clamp(1.12rem, 1rem + 0.55vw, 1.38rem); }
h4 { font-size: 1.02rem; }

p, ul, ol { margin: 0 0 1.1em; }
a { color: var(--snd-slate); text-decoration-thickness: 1px; text-underline-offset: 0.17em; }
a:hover { color: var(--snd-ember-hi); }
:focus-visible { outline: 2px solid var(--snd-ember-hi); outline-offset: 3px; }

.snd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--snd-birch); color: var(--snd-iron);
  padding: 0.65rem 1.05rem; font-family: var(--snd-face-title);
}
.snd-skip:focus { left: 0.6rem; top: 0.6rem; }

.snd-rail {
  width: 100%; max-width: var(--snd-rail);
  margin-inline: auto; padding-inline: var(--snd-edge);
}

/* =====================================================================
   MASTHEAD
   ===================================================================== */
.snd-mast {
  border-bottom: 1px solid var(--snd-iron-line);
  background: var(--snd-iron-deep);
}
.snd-mast__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.85rem; flex-wrap: wrap;
}
.snd-mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--snd-birch); text-decoration: none;
  font-family: var(--snd-face-title);
}
.snd-mark:hover { color: var(--snd-birch); }
.snd-mark__name {
  display: block; font-size: 1.16rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.1;
}
.snd-mark__line {
  display: block; font-family: var(--snd-face-text);
  font-size: 0.78rem; font-style: italic; color: var(--snd-birch-mute);
  letter-spacing: 0; text-transform: none;
}
.snd-motif { display: block; color: var(--snd-ember); flex: none; }

.snd-nav { position: relative; }
.snd-nav ul {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; list-style: none;
  margin: 0; padding: 0;
}
.snd-nav__toggle { position: absolute; opacity: 0; pointer-events: none; }
.snd-nav ul a {
  display: block; padding: 0.25rem 0;
  font-family: var(--snd-face-title); font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--snd-birch); text-decoration: none;
}
.snd-nav ul a:hover { color: var(--snd-ember-hi); }
.snd-nav ul a[aria-current="page"],
.snd-nav ul a[aria-current="true"] { color: var(--snd-ember-hi); box-shadow: inset 0 -2px 0 var(--snd-ember); }

@media (min-width: 54rem) {
  .snd-nav__handle { display: none; }
}
@media (max-width: 53.99rem) {
  .snd-nav__handle {
    display: inline-block; cursor: pointer;
    font-family: var(--snd-face-title); font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: var(--snd-track);
    color: var(--snd-birch); padding: 0.5rem 0.85rem;
    border: 1px solid var(--snd-iron-line);
  }
  .snd-nav ul { display: none; }
  .snd-nav__toggle:checked ~ ul { display: grid; gap: 0.5rem; padding-top: 0.8rem; }
  .snd-nav ul a { padding: 0.45rem 0; font-size: 0.94rem; border-bottom: 1px solid var(--snd-iron-line); box-shadow: none; }
}

/* =====================================================================
   BREADCRUMB
   ===================================================================== */
.snd-trail { padding-block: 1rem 0.2rem; }
.snd-trail ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--snd-face-title); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: var(--snd-track);
  color: var(--snd-birch-mute);
}
.snd-trail li + li::before { content: "/"; color: var(--snd-ember); margin-right: 0.5rem; }
.snd-trail a { color: var(--snd-birch-mute); text-decoration: none; }
.snd-trail a:hover { color: var(--snd-ember-hi); }

/* =====================================================================
   HOME: the chart, photograph beside the title
   ===================================================================== */
.snd-chart { padding-block: clamp(1.6rem, 4vw, 3.4rem) 0; }
.snd-chart__grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: end; }
@media (min-width: 900px) {
  .snd-chart__grid { grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); }
}
.snd-chart__kicker {
  font-family: var(--snd-face-title); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: var(--snd-track);
  color: var(--snd-ember-hi); margin: 0 0 0.9rem;
}
.snd-chart__deck {
  font-size: 1.12rem; color: var(--snd-birch-mute);
  max-width: 30rem; margin: 1rem 0 1.4rem;
}
.snd-chart__plate { margin: 0; }
.snd-chart__plate img { width: 100%; }
.snd-chart__caption {
  margin: 0.55rem 0 0; font-family: var(--snd-face-title);
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--snd-track); color: var(--snd-birch-mute);
}
.snd-cta {
  display: inline-block; background: var(--snd-ember); color: #fff;
  font-family: var(--snd-face-title); font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.75rem 1.4rem; text-decoration: none;
}
.snd-cta:hover { background: #a24a24; color: #fff; }

/* =====================================================================
   BANDS
   ===================================================================== */
.snd-reach { padding-block: var(--snd-band); }
.snd-reach--sunk { background: var(--snd-iron-deep); }
.snd-reach__head {
  display: grid; gap: 0.5rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
  border-top: 2px solid var(--snd-ember); padding-top: 1rem;
}
@media (min-width: 900px) {
  .snd-reach__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
}
.snd-reach__kicker {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--snd-face-title); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: var(--snd-track);
  color: var(--snd-ember-hi);
}
.snd-reach__note { margin: 0; color: var(--snd-birch-mute); }

/* --- the three gates: tall portrait plates, numbered ------------------ */
.snd-gates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--snd-gap); }
@media (min-width: 720px) { .snd-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.snd-gate { position: relative; }
.snd-gate__plate { position: relative; overflow: hidden; background: var(--snd-slate-band); }
.snd-gate__plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.snd-gate__no {
  position: absolute; left: 0; top: 0; z-index: 2;
  background: var(--snd-ember); color: #fff;
  font-family: var(--snd-face-title); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.08em; padding: 0.3rem 0.65rem;
}
.snd-gate__title { margin: 0.75rem 0 0.35rem; }
.snd-gate__link { color: var(--snd-birch); text-decoration: none; }
.snd-gate__link::after { content: ""; position: absolute; inset: 0; }
.snd-gate:hover .snd-gate__link { color: var(--snd-ember-hi); }
.snd-gate__note { margin: 0; font-size: 0.94rem; color: var(--snd-birch-mute); }

/* --- the filmstrip: square crops, kept addresses ---------------------- */
.snd-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--snd-gap); }
@media (min-width: 560px) { .snd-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .snd-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.snd-frame { position: relative; }
.snd-frame__plate { background: var(--snd-slate-band); }
.snd-frame__plate img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.snd-frame__tag {
  margin: 0.6rem 0 0.25rem; font-family: var(--snd-face-title);
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: var(--snd-track); color: var(--snd-ember-hi);
}
.snd-frame__title { font-size: 1.02rem; margin: 0; }
.snd-frame__link { color: var(--snd-birch); text-decoration: none; }
.snd-frame__link::after { content: ""; position: absolute; inset: 0; }
.snd-frame:hover .snd-frame__link { color: var(--snd-ember-hi); }

/* --- the section band: one lead plate, then a ruled list -------------- */
.snd-split { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 940px) { .snd-split { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); align-items: start; } }
.snd-lead { position: relative; }
@media (min-width: 940px) { .snd-lead { position: sticky; top: 1.6rem; } }
.snd-lead__plate { background: var(--snd-slate-band); }
.snd-lead__plate img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.snd-lead__tag {
  margin: 0.7rem 0 0.3rem; font-family: var(--snd-face-title);
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--snd-track); color: var(--snd-ember-hi);
}
.snd-lead__title { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); }
.snd-lead__link { color: var(--snd-birch); text-decoration: none; }
.snd-lead__link::after { content: ""; position: absolute; inset: 0; }
.snd-lead:hover .snd-lead__link { color: var(--snd-ember-hi); }
.snd-lead__note { margin: 0 0 1rem; color: var(--snd-birch-mute); }
.snd-lead__more {
  display: inline-block; margin: 0;
  font-family: var(--snd-face-title); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: var(--snd-track);
}
.snd-lead__more a { color: var(--snd-ember-hi); text-decoration: none; position: relative; z-index: 2; }
.snd-lead__more a:hover { text-decoration: underline; }

.snd-list { list-style: none; margin: 0; padding: 0; }
.snd-item {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  gap: 0.9rem; align-items: start;
  padding-block: 0.95rem; border-top: 1px solid var(--snd-iron-line);
}
.snd-item:first-child { border-top: 0; padding-top: 0; }
.snd-item__plate { background: var(--snd-slate-band); }
.snd-item__plate img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.snd-item__title { font-size: 1.02rem; margin: 0 0 0.2rem; }
.snd-item__link { color: var(--snd-birch); text-decoration: none; }
.snd-item__link::after { content: ""; position: absolute; inset: 0; }
.snd-item:hover .snd-item__link { color: var(--snd-ember-hi); }
.snd-item__note { margin: 0; font-size: 0.9rem; color: var(--snd-birch-mute); }
/* A section that holds only two or three pages gets wider plates, so the column
   next to the lead photograph fills instead of trailing off. */
.snd-list--wide .snd-item { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); padding-block: 1.5rem; }
.snd-list--wide .snd-item__title { font-size: 1.14rem; }
.snd-list--wide .snd-item__note { font-size: 0.95rem; }

/* --- the seasons row: five panoramas ---------------------------------- */
.snd-season { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--snd-gap); }
@media (min-width: 620px) { .snd-season { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .snd-season { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.snd-pane { position: relative; }
.snd-pane__plate { background: var(--snd-slate-band); }
.snd-pane__plate img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.snd-pane__title { font-size: 0.98rem; margin: 0.55rem 0 0; }
.snd-pane__link { color: var(--snd-birch); text-decoration: none; }
.snd-pane__link::after { content: ""; position: absolute; inset: 0; }
.snd-pane:hover .snd-pane__link { color: var(--snd-ember-hi); }

/* --- the closing note ------------------------------------------------- */
.snd-note { background: var(--snd-iron-soft); padding: clamp(1.4rem, 3vw, 2.4rem); }
.snd-note h2 { margin-bottom: 0.7rem; }
.snd-note p { max-width: 44rem; color: var(--snd-birch-mute); }
.snd-note p:last-child { margin-bottom: 0; }

/* =====================================================================
   ARTICLE AND SECTION PAGES
   ===================================================================== */
.snd-open { padding-block: 0.4rem clamp(1.4rem, 3vw, 2.4rem); }
.snd-open__kicker {
  font-family: var(--snd-face-title); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: var(--snd-track);
  color: var(--snd-ember-hi); margin: 0 0 0.8rem;
}
.snd-open__lede {
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.24rem);
  color: var(--snd-birch-mute); max-width: 44rem; margin: 1rem 0 0;
}
.snd-open__meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: 1.2rem;
  margin: 1.1rem 0 0; padding: 0;
  font-family: var(--snd-face-title); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: var(--snd-track);
  color: var(--snd-birch-mute);
}
.snd-open__meta a { color: var(--snd-birch-mute); }

.snd-plate { margin: 0; }
.snd-plate img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.snd-plate figcaption {
  margin-top: 0.5rem; font-family: var(--snd-face-title);
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: var(--snd-track); color: var(--snd-birch-mute);
}

/* the reading sheet: birch cream under the body text */
.snd-sheet { background: var(--snd-paper); color: var(--snd-ink); margin-top: var(--snd-band); }
.snd-column {
  max-width: var(--snd-read); margin-inline: auto;
  padding-block: clamp(2.2rem, 5vw, 4rem);
}
.snd-column h2 {
  margin: 2.1rem 0 0.7rem; color: var(--snd-ink);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  border-top: 1px solid var(--snd-paper-edge); padding-top: 1.1rem;
}
.snd-column h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.snd-column h3 { margin: 1.5rem 0 0.5rem; color: var(--snd-ink); }
.snd-column p { color: var(--snd-ink); }
.snd-column a { color: var(--snd-slate-deep); }
.snd-column a:hover { color: #8a3d18; }
.snd-column ul, .snd-column ol { padding-left: 1.15rem; }
.snd-column li { margin-bottom: 0.4rem; }
.snd-column strong { color: var(--snd-ink); }
.snd-column blockquote {
  margin: 1.5rem 0; padding-left: 1rem;
  border-left: 3px solid var(--snd-ember); color: var(--snd-ink-mute);
  font-style: italic;
}
.snd-column table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.snd-column th, .snd-column td {
  border-bottom: 1px solid var(--snd-paper-edge);
  padding: 0.5rem 0.6rem; text-align: left;
}

/* the list of pages under a section hub, on the sheet */
.snd-shelf { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.snd-shelf__row {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  gap: 0.9rem; align-items: start;
  padding-block: 1rem; border-top: 1px solid var(--snd-paper-edge);
}
.snd-shelf__plate { background: var(--snd-slate-band); }
.snd-shelf__plate img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.snd-shelf__title { margin: 0 0 0.25rem; font-size: 1.06rem; }
.snd-shelf__link { color: var(--snd-ink); text-decoration: none; }
.snd-shelf__link::after { content: ""; position: absolute; inset: 0; }
.snd-shelf__row:hover .snd-shelf__link { color: var(--snd-slate-deep); }
.snd-shelf__note { margin: 0; font-size: 0.92rem; color: var(--snd-ink-mute); }

/* read onward */
.snd-onward { border-top: 2px solid var(--snd-ember); margin-top: 2.4rem; padding-top: 1.1rem; }
.snd-onward h2 {
  border-top: 0; padding-top: 0; margin: 0 0 0.8rem;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: var(--snd-track);
}
.snd-onward ul { list-style: none; margin: 0; padding: 0; }
.snd-onward li { margin-bottom: 0.5rem; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.snd-anchor {
  background: var(--snd-iron-deep); color: var(--snd-birch);
  border-top: 1px solid var(--snd-iron-line); margin-top: var(--snd-band);
}
.snd-anchor__grid {
  display: grid; gap: 1.8rem; padding-block: clamp(2.2rem, 4vw, 3.2rem);
}
@media (min-width: 760px) { .snd-anchor__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.snd-anchor h2 {
  font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: var(--snd-track); color: var(--snd-ember-hi);
  margin-bottom: 0.8rem;
}
.snd-anchor ul { list-style: none; margin: 0; padding: 0; }
.snd-anchor li { margin-bottom: 0.4rem; }
.snd-anchor a { color: var(--snd-birch); text-decoration: none; }
.snd-anchor a:hover { color: var(--snd-ember-hi); text-decoration: underline; }
.snd-anchor__sign {
  border-top: 1px solid var(--snd-iron-line);
  padding-block: 1.1rem; display: flex; flex-wrap: wrap;
  gap: 0.6rem 1.2rem; align-items: center;
  font-family: var(--snd-face-title); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: var(--snd-track);
  color: var(--snd-birch-mute);
}
.snd-anchor__sign a { color: var(--snd-birch-mute); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}