/* =========================================================================
   NORTH MINCH SHORE WATCH — design system, prefix loch-
   Vocabulary: the shore naturalist's journal and the sea itself, in
   English as a signature: strand (the shingle bank you stand on =
   width), watch (the watch hut = header), kist (the gear box = nav),
   headland (the point you watch from = hero), tide (numbered register =
   section), label (specimen label = caption), logbook/session (the
   sighting log = dated feed), opener (entry head), plate (photographic
   plate = lead image), stack (reading column), survey (measurement
   table), post (data post, dark box), margin (field margin box), drift
   (what drifts past = read next), ledger (back of the book = footer),
   glyph (inline SVG glyphs: fluke, dorsal, swell, lens), tangle (rule
   separator: drifting weed).
   Palette: cold Minch haze (grey-green sea light) + sea ink + thrift
   pink. The thrift is the only warm note on the page, the way it is the
   only warm flower on the machair.
   No blue, no remote font, no gradient device, no card grid anywhere:
   the home is a title page followed by dated lists, like a watch hut
   clipboard. Dark mode is automatic. ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · la brume du Minch, l'encre de mer, la thrift ------ */
  --sea:        #d4e2de;  /* cold Minch haze: the paper                  */
  --sea-hollow:  #c6d6d2;  /* reserves, alternated sections              */
  --sea-bright:    #e3edea;  /* lightest reserve, margins, even table rows */
  --ink:         #17211f;  /* sea ink: text                              */
  --ink-night:    #14201e;  /* night water: header, footer, posts         */
  --ink-soft:   #556660;  /* haulm grey: captions, meta, standfirst     */
  --wrack:         #2e5f5c;  /* wrack green: links, strong (5.4:1)         */
  --wrack-deep:   #1f4744;  /* pressed / hover (7.7:1)                    */
  --thrift:          #8e3f55;  /* thrift pink: accent, lettrines, panels     */
  --thrift-pale:    #d9a2b0;  /* thrift on night grounds                    */
  --shingle:         #7e8c87;  /* shingle: quiet captions                    */
  --rule:         #c2d1cc;  /* hairline on haze                           */
  --rule-night:    #33453f;  /* hairline on night water                    */

  /* Dark mode: the same shore after dark, watching for blows. */
  --night-sea:   #14201e;
  --night-hollow:    #1b2825;
  --night-bright:      #22312d;
  --night-text:    #e4eae7;
  --night-soft:     #a3b2ac;

  /* ---- 2. TYPE · system stacks, nothing fetched ------------------------ */
  --display-face: Kefa, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --reading-face: Geneva, "Lucida Grande", Verdana, "DejaVu Sans", Arial, sans-serif;

  --display-weight: 600;
  --display-tracking: 0.006em;
  --caps-tracking: 0.2em;

  --body-size: clamp(1.01rem, 0.96rem + 0.22vw, 1.12rem);
  --body-leading: 1.7;
  --scale-h1: clamp(2.15rem, 1.05rem + 3.8vw, 4.2rem);
  --scale-h2: clamp(1.45rem, 1.08rem + 1.4vw, 2.2rem);
  --scale-h3: clamp(1.1rem, 1rem + 0.5vw, 1.38rem);
  --scale-h4: 1.03rem;

  /* ---- 3. RYTHME --------------------------------------------------------- */
  --measure:        60ch;
  --measure-broad:  1320px;
  --page-margin:    clamp(1.1rem, 4vw, 4rem);
  --gutter:     clamp(0.9rem, 2.2vw, 2rem);
  --breath:       clamp(2.4rem, 5.5vw, 5.2rem);
  --eddy-w:      clamp(1.2rem, 3vw, 3.2rem);

  /* ---- 4. DETAILS --------------------------------------------------------- */
  --slant:       1px;
  --rule-thin:   1px solid var(--rule);
  --pace:     150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sea:       var(--night-sea);
    --sea-hollow: var(--night-hollow);
    --sea-bright:   var(--night-bright);
    --ink:        var(--night-text);
    --ink-soft:  var(--night-soft);
    --wrack:        #8fc2bc;
    --wrack-deep:  #a9d6d0;
    --thrift:         var(--thrift-pale);
    --shingle:        #6f807a;
    --rule:        var(--rule-night);
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sea);
  color: var(--ink);
  font-family: var(--reading-face);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; display: block; }
svg.loch-glyph { display: inline-block; vertical-align: -0.12em; }

h1, h2, h3, h4 {
  font-family: var(--display-face);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1.16;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }
h4 { font-size: var(--scale-h4); }

p, ul, ol { margin: 0 0 1.12em; }
a {
  color: var(--wrack);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--pace);
}
a:hover { color: var(--wrack-deep); }
:focus-visible {
  outline: 2px solid var(--thrift);
  outline-offset: 3px;
  border-radius: 1px;
}
hr { border: 0; border-top: var(--rule-thin); margin: var(--breath) 0; }

::selection { background: var(--thrift); color: #fdf6f7; }

/* Dates, tallies and sea states read in tabular numerals. */
.loch-survey, .loch-post, .loch-margin, .loch-when, .loch-byline,
.loch-tide__tally, .loch-headland__issue {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   SCAFFOLD
   ========================================================================= */

/* Skip link. Never remove. */
.loch-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-night); color: var(--night-text);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.loch-skip:focus { left: 0.6rem; top: 0.6rem; }

/* The strand: the shingle you stand on, useful width of every zone. */
.loch-strand {
  width: 100%;
  max-width: var(--measure-broad);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.loch-vista { display: block; }

/* --- Watch (the watch hut, header) ---------------------------------- */
.loch-watch {
  background: var(--ink-night);
  color: var(--night-text);
  border-bottom: 3px solid var(--thrift);
  padding-block: clamp(0.8rem, 1.7vw, 1.2rem);
}
.loch-watch__line {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.6rem;
}
.loch-watch__word {
  font-family: var(--display-face);
  font-size: clamp(1.3rem, 1.08rem + 0.95vw, 1.9rem);
  color: var(--night-text);
  text-decoration: none;
  letter-spacing: 0.012em;
}
.loch-watch__word:hover { color: #fff; }
.loch-watch__word span {
  display: block;
  font-family: var(--reading-face);
  font-size: 0.62rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--thrift-pale);
  margin-top: 0.34rem;
}
.loch-kist ul {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  list-style: none; margin: 0; padding: 0;
}
.loch-kist a {
  color: var(--night-soft);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding-block: 0.25rem;
  transition: color var(--pace);
}
.loch-kist a:hover { color: var(--thrift-pale); }

/* --- Trail (breadcrumb) ------------------------------------------------------ */
.loch-trail { padding-block: clamp(0.85rem, 1.8vw, 1.3rem); }
.loch-trail ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none;
  /* The trail sits in the same container as everything else. The shorthands
     must stay above the longhands, or they reset them. */
  margin: 0 auto;
  padding: 0 var(--page-margin);
  width: 100%;
  max-width: var(--measure-broad);
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.loch-trail li + li::before {
  content: "·";
  margin-right: 0.55rem;
  color: var(--thrift);
}
.loch-trail a { color: var(--ink-soft); }
.loch-trail a:hover { color: var(--wrack); }
.loch-trail [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* =========================================================================
   HEADLAND · the home hero. Where the donor set its title page centered
   between two double rules, this one stands the way a watcher does at
   the top of a headland: hard left, one thrift rule on the left edge,
   nothing centered on the page.
   ========================================================================= */

.loch-headland { border-bottom: var(--rule-thin); }
.loch-headland__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.4rem, 3.4vw, 2.8rem);
}
.loch-headland__plate { margin: 0; }
.loch-headland__plate .loch-plate__view {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.loch-headland__frame {
  border-left: 3px solid var(--thrift);
  padding: clamp(2rem, 4.6vw, 3.4rem) 0 clamp(1.8rem, 4.2vw, 3rem) clamp(1.1rem, 2.6vw, 2rem);
}
.loch-headland__kicker {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0.8rem;
  font-size: 0.74rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--thrift);
  margin: 0 0 1.1rem;
}
.loch-headland__kicker::before {
  content: "";
  width: clamp(2rem, 6vw, 4.5rem);
  border-top: 1px solid currentColor;
  opacity: 0.65;
}
.loch-headland__kicker .loch-glyph { color: var(--shingle); }
.loch-headland h1 {
  max-width: 19ch;
  color: var(--ink);
}
.loch-headland__lede {
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.19rem);
  line-height: 1.6;
  max-width: 56ch;
  margin: 1.05rem 0 0;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.loch-headland__issue {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 0.55rem 1.1rem;
  margin: 1.5rem 0 0;
  max-width: 46rem;
  border-top: var(--rule-thin);
  padding-top: 0.85rem;
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--shingle);
}
.loch-headland__issue .loch-glyph { color: var(--thrift); }
.loch-headland__issue em {
  font-style: normal;
  color: var(--ink);
  letter-spacing: 0.08em;
}

/* =========================================================================
   TIDE (sections), numbered 01 to 03
   ========================================================================= */

.loch-tide { padding-block: clamp(1.9rem, 4.4vw, 3.6rem); }
.loch-tide--hollow { background: var(--sea-hollow); }
.loch-tide__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: var(--rule-thin);
  padding-bottom: 0.6rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.loch-tide__tally {
  font-family: var(--reading-face);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--thrift);
  margin-right: 0.7rem;
}
.loch-tide__heading { font-size: var(--scale-h2); }
.loch-tide__margin {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 42ch;
}

/* Tangle: drifting weed, a rule separator between the great sections. */
.loch-tangle {
  display: flex;
  justify-content: flex-start;
  padding-block: clamp(0.4rem, 1.2vw, 1rem);
  color: var(--shingle);
}

/* Panel: small-caps kicker above titles. */
.loch-panel {
  font-size: 0.73rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--thrift);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   THE LOG · every list on this site is one column of dated rows, the
   way a watch hut clipboard is kept. No card grid exists here.
   ========================================================================= */

.loch-logbook {
  list-style: none; margin: 0; padding: 0;
  display: block;
  max-width: 74rem;
}
.loch-session {
  display: grid;
  /* A log thumbnail reads as a picture, not as a stamp: at least a quarter
     of the row on a desktop width. */
  grid-template-columns: minmax(0, 27%) 1fr;
  gap: 1.15rem;
  padding-block: 1.15rem;
  border-bottom: var(--rule-thin);
  margin: 0;
}
.loch-logbook .loch-session:last-child { border-bottom: 0; }
.loch-session__view {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--slant);
  border: var(--rule-thin);
  background: var(--sea-hollow);
}
.loch-when {
  margin: 0 0 0.3rem;
  font-size: 0.73rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--thrift);
}
.loch-session h3 { margin: 0 0 0.35rem; }
.loch-session h3 a { color: var(--ink); text-decoration: none; }
.loch-session h3 a:hover { color: var(--wrack); text-decoration: underline; }
.loch-session p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }
.loch-session .loch-label {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--shingle);
  border: 1px solid currentColor;
  border-radius: var(--slant);
  padding: 0.1rem 0.45rem;
}

/* =========================================================================
   ARTICLES · opener, plate, stack
   ========================================================================= */

.loch-opener {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2.1rem);
  max-width: 56rem;
}
.loch-opener__standfirst {
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.56;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0.9rem 0 0;
}
.loch-byline {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  font-size: 0.81rem;
  color: var(--ink-soft);
  border-top: var(--rule-thin);
  padding-top: 0.8rem;
}
.loch-byline a { color: var(--ink-soft); }
.loch-byline a:hover { color: var(--wrack); }

.loch-plate { margin: 0; }
.loch-plate__view {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--slant);
  border: var(--rule-thin);
  background: var(--sea-hollow);
}
.loch-plate__note {
  margin: .55rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--shingle);
  letter-spacing: .01em;
}

.loch-stack {
  max-width: var(--measure);
  padding-block: clamp(1.5rem, 3.4vw, 2.5rem) clamp(1.9rem, 4.4vw, 3.2rem);
}
.loch-stack > * + * { margin-top: 0.9em; }
.loch-stack h2 {
  margin-top: 1.75em;
  padding-bottom: 0.26rem;
  border-bottom: var(--rule-thin);
}
.loch-stack h3 { margin-top: 1.35em; }
.loch-stack ul, .loch-stack ol { padding-left: 1.4rem; }
.loch-stack li + li { margin-top: 0.45em; }
.loch-stack strong { color: var(--wrack-deep); }

/* Lettrine: the opening letter of an entry, in thrift pink. */
.loch-stack > p:first-of-type::first-letter {
  font-family: var(--display-face);
  font-weight: 600;
  float: left;
  font-size: 3.05em;
  line-height: 0.82;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--thrift);
}

/* Margin: a field margin boxed on lighter paper. */
.loch-margin {
  margin: 1.7em 0;
  background: var(--sea-bright);
  border: var(--rule-thin);
  border-left: 3px solid var(--wrack);
  border-radius: var(--slant);
  padding: 1rem 1.25rem;
  font-size: 0.96em;
}
.loch-margin h4 {
  font-family: var(--reading-face);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--wrack);
  margin: 0 0 0.5rem;
}
.loch-margin p, .loch-margin ul { margin: 0; }
.loch-margin p + p, .loch-margin ul { margin-top: 0.5rem; }
.loch-margin strong { color: var(--wrack-deep); }

/* Post: the data post, night water ground, thrift heading, tabular data. */
.loch-post {
  margin: 1.7em 0;
  background: var(--ink-night);
  color: var(--night-text);
  border-radius: var(--slant);
  padding: 1.15rem 1.3rem 1.25rem;
  border: 1px solid var(--rule-night);
}
.loch-post h2, .loch-post h3, .loch-post h4 {
  font-family: var(--reading-face);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--thrift-pale);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.loch-post p, .loch-post ul { margin: 0; font-size: 0.95rem; color: var(--night-text); }
.loch-post strong { color: #fff; font-variant-numeric: tabular-nums; }
.loch-post p + p, .loch-post ul { margin-top: 0.5rem; }

/* Survey: the measurement table, clipboard style. */
.loch-survey {
  overflow-x: auto;
  margin: 1.5em 0;
  border: var(--rule-thin);
  border-radius: var(--slant);
}
.loch-survey table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92em;
}
.loch-survey th, .loch-survey td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.loch-survey caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.76rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--thrift);
  border-bottom: 1px solid var(--rule);
}
.loch-survey thead th {
  background: var(--ink-night);
  color: var(--night-text);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--reading-face);
}
.loch-survey tr:last-child td { border-bottom: 0; }
.loch-survey tbody tr:nth-child(even) { background: var(--sea-bright); }

/* Epigraph: a quotation set off by the thrift rule. */
.loch-epigraph {
  margin: 1.6em 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--thrift);
  font-family: var(--display-face);
  font-size: 1.15em;
  color: var(--wrack-deep);
}

/* Drift: read next, what drifts past the headland. */
.loch-drift {
  margin-top: 2.3em;
  padding-top: 1.15rem;
  border-top: 3px double var(--rule);
}
.loch-drift h2 {
  font-size: 1.18rem;
  border-bottom: 0;
  margin: 0 0 0.55rem;
}
.loch-drift ul { list-style: none; margin: 0; padding: 0; }
.loch-drift li { padding: 0.3rem 0; }
.loch-drift li::before {
  content: "·";
  color: var(--thrift);
  margin-right: 0.55rem;
  font-weight: 700;
}

/* =========================================================================
   THE LEDGER (footer)
   ========================================================================= */

.loch-ledger {
  margin-top: var(--breath);
  background: var(--ink-night);
  color: var(--night-text);
  border-top: 3px solid var(--thrift);
}
.loch-ledger__line {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: calc(var(--gutter) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.loch-ledger h2 {
  font-family: var(--reading-face);
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--thrift-pale);
  margin-bottom: 0.7rem;
}
.loch-ledger ul { list-style: none; margin: 0; padding: 0; }
.loch-ledger li { padding-block: 0.22rem; }
.loch-ledger a { color: var(--night-soft); text-decoration: none; transition: color var(--pace); }
.loch-ledger a:hover { color: var(--thrift-pale); text-decoration: underline; }
.loch-ledger__foot {
  border-top: 1px solid var(--rule-night);
  padding-block: 1.05rem;
  font-size: 0.79rem;
  color: var(--night-soft);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.55rem 0.9rem;
}
.loch-ledger__foot .loch-glyph { color: var(--thrift-pale); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .loch-ledger__line { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .loch-logbook { max-width: none; }
  .loch-session { grid-template-columns: minmax(0, 32%) 1fr; }
  .loch-ledger__line { grid-template-columns: 1fr; }
  .loch-tide__head { flex-direction: column; gap: 0.3rem; }
  .loch-headland h1 { max-width: 22ch; }
  .loch-stack > p:first-of-type::first-letter {
    font-size: 2.7em;
    float: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
  }
}

@media (max-width: 480px) {
  .loch-session { grid-template-columns: 1fr; }
  .loch-kist ul { gap: 0.35rem 0.95rem; }
}

/* The register menu folds on a narrow screen. A closed <details> hides its
   content through content-visibility, which an author display rule cannot
   override, so the fold is a checkbox: the list is simply visible above
   640px, where the label is hidden. */
.loch-kist__switch { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.loch-kist__summary {
  display: none;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--night-text);
  padding: 0.35rem 0;
}
.loch-kist__summary::after { content: " +"; color: var(--thrift-pale); }
.loch-kist__switch:focus-visible + .loch-kist__summary { outline: 2px solid var(--thrift); outline-offset: 3px; }

@media (max-width: 640px) {
  .loch-headland__grid { grid-template-columns: 1fr; }
  .loch-kist { width: 100%; }
  .loch-kist__summary { display: inline-block; }
  .loch-kist__switch:checked + .loch-kist__summary::after { content: " -"; }
  .loch-kist__switch:not(:checked) ~ ul { display: none; }
}

/* Motion courtesy. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Print: the logbook on paper. */
@media print {
  .loch-watch, .loch-ledger, .loch-skip, .loch-trail, .loch-tangle { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .loch-stack { max-width: none; }
  .loch-post { background: #fff; color: #000; border: 1pt solid #000; }
  .loch-headland__frame { border-color: #000; }
}