/* =============================================================== lc-kite.css ==
   /kite-report/ — a planning instrument on a magazine.

   What this replaces: eight `uk-card uk-card-default` boxes, an empty 460px
   Windy iframe, and a paragraph of rules set in tracked uppercase because it
   was written as `uk-text-meta`. No imagery, no hierarchy, and four identical
   grey pills all reading TOO LIGHT — which is what the page shows on most days,
   so the commonest state was also the least useful one.

   The direction. This is Operate, not Persuade: somebody opens it at 6.40am,
   with one hand, deciding whether to load a car. So it takes the department-rule
   system already set by lc-guide.css and lc-golf-finder.css — hairlines with an
   accent tick, square edges, ink on paper, Playfair for names and Montserrat 500
   for labels — and spends the whole page on one drawn object (the dial) plus one
   chart (the strip). Nothing else is invented.

   Why the sections do not look alike. The verdict is a dark full-bleed panel
   because it is the only thing on the page that must work at arm's length. The
   spots are ruled rows because they are a comparison. The forecast is a chart.
   The cams are photographs. The guide is editorial. A card would have flattened
   all five into the same object, which is exactly what it did before.

   Tokens are the theme's own. --gd-* belongs to lc-guide.css, which is not
   enqueued on this slug, so every variable is read through its literal fallback
   and this file stands up alone.

   Condition colour was validated, not chosen: the dataviz palette validator was
   run against both surfaces (paper #f7f6f4 and well #14161a) for lightness band,
   chroma floor, CVD separation and contrast. It rejected the first, obvious
   green/amber/orange/red set — amber and orange came out at deltaE 2.4 under
   deuteranopia and 7.7 under normal vision, i.e. indistinguishable. So there are
   only TWO hues here: one green and one red. "Marginal" is the green at a 45
   degree hatch and "offshore" is the red at 135, which puts the sub-states on
   texture rather than on a hue nobody can separate. Every mark also carries its
   word, so nothing is encoded in colour alone.
   ========================================================================== */

#lc-kite {
  --k-ink:    var(--gd-ink,    #2d2e33);
  --k-muted:  var(--gd-muted,  #6c6d74);
  --k-line:   var(--gd-line,   #e5e5e7);
  --k-accent: var(--gd-accent, #e44e56);
  --k-well:   var(--gd-well,   #14161a);   /* never #000 */
  --k-paper:  var(--gd-paper,  #f7f6f4);
  --k-ease:   var(--gd-ease,   cubic-bezier(.22,.72,0,1));
  --k-serif:  'Playfair Display', 'PT Serif', Georgia, serif;
  --k-sans:   'Montserrat', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Validated condition steps. Paper first, then the well. */
  --k-go:      #00795a;
  --k-no:      #c02f37;
  --k-quiet:   #8a8b92;
  --k-go-d:    #1f9b73;
  --k-no-d:    #e35862;

  /* A hairline is right between rules but falls under 3:1 as the sole boundary
     of a control group, so a frame is the ink at low alpha rather than a sixth
     grey invented for the job. */
  --k-frame:  rgba(45, 46, 51, .17);

  color: var(--k-ink);
}

/* Only the 500 face of Montserrat is served on this site. Anything heavier in
   this file would be a synthesised bold, so small labels earn emphasis from
   caps and tracking instead of weight. */
#lc-kite .lck-label,
#lc-kite .lck-kicker {
  font: 500 11px/1.5 var(--k-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--k-muted);
}

#lc-kite :focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; }

/* ============================================================ the bleed rule ==
   The builder layout wraps this element in the theme's own `.uk-container`,
   which is content-box, 1200px, with 40px gutters. The two dark bands have to
   reach the window edge, and they cannot do that from inside it — so the
   ancestor container is unwound once, here, and every band restates the site
   measure with a plain `.uk-container` of its own.

   Done this way rather than with `width:100vw`, which on this site extends past
   the scrollbar, creates horizontal overflow and loops the sticky header.

   The explicit box-sizing is load-bearing: the theme's `.uk-container` ties a
   `*` reset on specificity and loads later, so without it this rule silently
   falls back to content-box and adds 40px of gutter back onto a 100% width. */
.uk-container:has(#lc-kite) {
  box-sizing: border-box;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* The section's own vertical padding would leave a band of white above the
   verdict, which is the one place on the page nothing may sit. The builder's
   padding:remove prop does not reach this wrapper. */
.uk-section:has(#lc-kite) { padding-top: 0; padding-bottom: 0; }
/* The measure, restated by each band rather than borrowed from `.uk-container`.
   Borrowing it was wrong twice over: the reset above is written with :has(), and
   an inner `.uk-container` sitting inside #lc-kite matched it too, so every band
   lost its gutters and the type ran to the window edge on a phone. A class this
   file owns cannot be caught by a rule this file writes about someone else's.

   1280 minus the 40px gutters is the theme's own 1200px measure, so the page
   still lines up with every other page on the site — it just arrives at it
   without depending on a shared class. box-sizing is explicit because the
   theme's `*` reset loads later and would otherwise put the gutters back on
   the outside. */
#lc-kite .lck-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 959px) { #lc-kite .lck-wrap { padding: 0 20px; } }
@media (max-width: 639px) { #lc-kite .lck-wrap { padding: 0 15px; } }

#lc-kite .lck-bleed {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* Visually hidden, still read aloud. The channel inputs carry a placeholder and
   a chip above them, but a placeholder is not a label. */
#lc-kite .lck-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================================================================ the verdict ==
   The half-second read. Everything above the fold is here: what to do, why, and
   when the next chance is — plus the dial, which answers "is the angle any good
   HERE" in geometry rather than in a compass bearing nobody can hold against a
   beach's orientation while standing in a kitchen. */
.lck-mastband {
  position: relative;
  background: var(--k-well);
  color: #fff;
  padding: 0;
}
.lck-mastband::after {
  /* Texture. A flat dark rectangle is the one thing that always reads as a CSS
     block rather than a printed panel; the grain is 2% and does the same job a
     press screen does. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 3px 3px;
}
.lck-mast {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 26px 0 0;
  font: 500 11px/1 var(--k-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.lck-mast__tick {
  display: inline-block;
  width: 30px;
  height: 3px;
  margin-right: 12px;
  vertical-align: 2px;
  background: var(--k-accent);
}
#lck-stamp { color: rgba(255,255,255,.42); }
#lck-stamp::before { content: '·'; margin: 0 .6em; }

.lck-verdict {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  gap: 40px;
  padding: 30px 0 54px;
  min-height: 300px;
}
.lck-verdict__line {
  margin: 0;
  font-family: var(--k-serif);
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
}
/* The verdict word is the thing being read, so the state tints the headline
   itself rather than adding a pill next to it. Never colour alone — the sentence
   says it too. */
.lck-verdict[data-tone="go"]     .lck-verdict__line { color: var(--k-go-d); }
.lck-verdict[data-tone="danger"] .lck-verdict__line { color: var(--k-no-d); }
.lck-verdict__why {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
}

/* --------------------------------------------------------- the next window ==
   Present in every state, not only the calm one. On a windy day it says when
   this ends; on a flat one it is the entire reason to open the page. */
.lck-next {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 22px;
  row-gap: 2px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  max-width: 620px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.lck-next__l {
  grid-row: 1 / span 2;
  align-self: center;
  font: 500 10px/1.4 var(--k-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--k-accent);
}
.lck-next__v {
  grid-column: 2;
  margin: 0;
  font-family: var(--k-serif);
  font-size: 22px;
  line-height: 1.2;
  color: #fff;
}
.lck-next__m {
  grid-column: 2;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.62);
}
.lck-next__go {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  flex: none;
  padding: 11px 20px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: 500 10px/1 var(--k-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lck-next__go:hover { background: #fff; border-color: #fff; color: var(--k-ink); }

/* ------------------------------------------------------------- the hero dial ==*/
.lck-hero-dial {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
}
.lck-hero-dial .lck-dial { width: 300px; height: 300px; }
.lck-hero-dial__read {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}
.lck-hero-dial__kt {
  font-family: var(--k-serif);
  font-size: 62px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.lck-hero-dial[data-st="peak"]     .lck-hero-dial__kt { color: var(--k-go-d); }
.lck-hero-dial[data-st="offshore"] .lck-hero-dial__kt,
.lck-hero-dial[data-st="strong"]   .lck-hero-dial__kt { color: var(--k-no-d); }
.lck-hero-dial__u {
  margin-top: 2px;
  font: 500 10px/1 var(--k-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.lck-hero-dial__g {
  margin-top: 10px;
  font: 500 11px/1.4 var(--k-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: rgba(255,255,255,.66);
}
.lck-hero-dial__n {
  margin-top: 3px;
  max-width: 130px;
  font: 500 9.5px/1.4 var(--k-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* ==================================================================== the dial ==
   Shoreline, safe arc, the two side-onshore sweet spots, the offshore half
   hatched, and a needle. Colours resolve against whichever surface the dial is
   sitting on, so the same SVG serves the dark band and the paper sections. */
.lck-dial { display: block; overflow: visible; }
.lck-dial__land       { fill: rgba(255,255,255,.05); }
.lck-dial__rim        { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; }
.lck-dial__shore      { stroke: rgba(255,255,255,.34); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lck-dial__arc        { fill: none; stroke: rgba(255,255,255,.24); stroke-width: 15; }
.lck-dial__sweet      { fill: var(--k-go-d); opacity: .9; }
.lck-dial__offshore   { opacity: .95; }
.lck-dial__hatchline  { stroke: var(--k-no-d); stroke-width: 2; }
.lck-dial__offshoreline { fill: none; stroke: var(--k-no-d); stroke-width: 15; opacity: .16; }
.lck-dial__card       { fill: rgba(255,255,255,.38); font: 500 11px var(--k-sans); text-anchor: middle; letter-spacing: .1em; }
.lck-dial__needle line { stroke: #fff; stroke-width: 3.5; stroke-linecap: round; }
.lck-dial__needle path { fill: #fff; }

/* On paper the same object inverts. */
.lck-onpaper .lck-dial__land     { fill: rgba(45,46,51,.045); }
.lck-onpaper .lck-dial__rim      { stroke: var(--k-line); }
.lck-onpaper .lck-dial__shore    { stroke: rgba(45,46,51,.42); }
.lck-onpaper .lck-dial__arc      { stroke: rgba(45,46,51,.11); }
.lck-onpaper .lck-dial__sweet    { fill: var(--k-go); opacity: .85; }
.lck-onpaper .lck-dial__hatchline { stroke: var(--k-no); }
.lck-onpaper .lck-dial__offshoreline { stroke: var(--k-no); opacity: .14; }
.lck-onpaper .lck-dial__card     { fill: var(--k-muted); }
.lck-onpaper .lck-dial__needle line { stroke: var(--k-ink); }
.lck-onpaper .lck-dial__needle path { fill: var(--k-ink); }

/* ==================================================== the department rule ==
   Same object lc-guide.css sets on the three guide fronts: a hairline with the
   accent tick on it, the name in the display serif, the note as a small label on
   the same baseline. Repeated here so the page reads as part of the site rather
   than as a widget dropped into it. */
.lck-head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  margin: 0 0 22px;
  padding-top: 16px;
  border-top: 1px solid var(--k-line);
}
.lck-head::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 3px;
  background: var(--k-accent);
}
.lck-head__t {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--k-serif);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--k-ink);
}
.lck-head__m {
  flex: 0 1 auto;
  max-width: 42%;
  text-align: right;
  font: 500 11px/1.55 var(--k-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-muted);
  text-wrap: balance;
}
.lck-sec { margin: 0 0 62px; }
/* The first section after a dark band needs the gap the band's own padding
   would otherwise have to carry. */
.lck-sec--first { padding-top: 54px; }
.lck-note--tight { margin-top: 12px; max-width: 74ch; }
.lck-standfirst {
  margin: 0 0 26px;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--k-ink);
}
.lck-mast--sec { padding-bottom: 22px; }
.lck-camnote {
  margin: 16px 0 34px;
  max-width: 64ch;
  font: 500 11.5px/1.65 var(--k-sans);
  color: rgba(255,255,255,.5);
}

/* =========================================================== the spot rows ==
   Four beaches as a comparison, so they are a ruled table rather than four
   boxes: one grid, 1px gaps, the container colour showing through as the rules.
   Nothing inside has to draw a border, and the whole block reads as one
   instrument the way lc-golf-finder.css's control bar does. */
.lck-rows {
  display: grid;
  gap: 1px;
  border: 1px solid var(--k-frame);
  background: var(--k-line);
}
.lck-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto 54px 62px 96px 92px;
  align-items: center;
  gap: 0 16px;
  width: 100%;
  margin: 0;
  padding: 13px 18px;
  border: 0;
  border-radius: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--k-ease);
}
.lck-row:hover { background: var(--k-paper); }
.lck-row[aria-pressed="true"] { background: var(--k-paper); box-shadow: inset 3px 0 0 var(--k-accent); }
.lck-row:focus-visible { outline: 2px solid var(--k-accent); outline-offset: -4px; }
.lck-row__dial { display: block; line-height: 0; }
.lck-row__dial .lck-dial__land     { fill: rgba(45,46,51,.05); }
.lck-row__dial .lck-dial__rim      { stroke: var(--k-line); }
.lck-row__dial .lck-dial__shore    { stroke: rgba(45,46,51,.4); stroke-dasharray: 2 2; }
.lck-row__dial .lck-dial__arc      { stroke: rgba(45,46,51,.1); stroke-width: 22; }
.lck-row__dial .lck-dial__sweet,
/* At 46px the 15-unit ring is four screen pixels. Widened so the two
   sweet spots and the offshore half survive the reduction. */
.lck-row__dial .lck-dial__offshore { transform-box: fill-box; }
.lck-row__dial .lck-dial__offshoreline { stroke-width: 22; }
.lck-row__dial .lck-dial__sweet    { fill: var(--k-go); }
.lck-row__dial .lck-dial__hatchline { stroke: var(--k-no); }
.lck-row__dial .lck-dial__offshoreline { stroke: var(--k-no); opacity: .2; }
.lck-row__dial .lck-dial__needle line { stroke: var(--k-ink); stroke-width: 5; }
.lck-row__dial .lck-dial__needle path { fill: var(--k-ink); }

.lck-row__name { display: grid; min-width: 0; }
.lck-row__name strong {
  font-family: var(--k-serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--k-ink);
}
.lck-row__detail { font: 500 10.5px/1.5 var(--k-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--k-muted); }
.lck-row__kt {
  justify-self: end;
  font-family: var(--k-serif);
  font-size: 30px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--k-ink);
}
.lck-row__meta { display: grid; font: 500 10px/1.5 var(--k-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--k-muted); }
.lck-row__gust { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.lck-row__dir { display: grid; text-align: right; }
.lck-row__dir strong { font: 500 13px/1.3 var(--k-sans); letter-spacing: .08em; color: var(--k-ink); }
.lck-row__dir span { font: 500 10.5px/1.3 var(--k-sans); font-variant-numeric: tabular-nums; color: var(--k-muted); }

/* Angle as a bar. "0.72" is not readable; two thirds of a bar next to a quarter
   of a bar is. */
.lck-row__q { display: block; height: 6px; background: var(--k-line); }
.lck-row__qfill { display: block; height: 100%; background: var(--k-quiet); transition: width .3s var(--k-ease); }
.lck-row[data-st="peak"]     .lck-row__qfill { background: var(--k-go); }
.lck-row[data-st="marginal"] .lck-row__qfill { background: var(--k-go); opacity: .5; }
.lck-row[data-st="offshore"] .lck-row__qfill,
.lck-row[data-st="strong"]   .lck-row__qfill { background: var(--k-no); }

.lck-row__word {
  justify-self: end;
  padding: 4px 0 4px 12px;
  border-left: 3px solid var(--k-quiet);
  font: 500 10px/1.4 var(--k-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-muted);
  white-space: nowrap;
}
.lck-row[data-st="peak"]     .lck-row__word { border-color: var(--k-go); color: var(--k-go); }
.lck-row[data-st="marginal"] .lck-row__word { border-color: var(--k-go); }
.lck-row[data-st="offshore"] .lck-row__word,
.lck-row[data-st="strong"]   .lck-row__word { border-color: var(--k-no); color: var(--k-no); }

/* ============================================================== the forecast ==
   Four small multiples on one axis. Speed is bar height, state is fill, the
   14-24 knot band is drawn behind so a bar can be read against the band instead
   of against a number, night is washed out, and a run of qualifying daylight
   hours gets a bracket and its times spelled out underneath — because the whole
   point of the section is that a window should be findable without reading an
   axis at all. */
.lck-forecast { display: grid; gap: 0; }
.lck-axis {
  position: relative;
  height: 22px;
  margin: 0 0 2px;
  border-bottom: 1px solid var(--k-line);
}
.lck-axis__d {
  position: absolute;
  bottom: 5px;
  padding-left: 7px;
  border-left: 1px solid var(--k-line);
  font: 500 10px/1 var(--k-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-muted);
  white-space: nowrap;
}
.lck-strip { padding: 14px 0 16px; border-bottom: 1px solid var(--k-line); }
.lck-strip[data-sel="true"] { background: var(--k-paper); }
.lck-strip__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.lck-strip__n { font-family: var(--k-serif); font-size: 18px; color: var(--k-ink); }
.lck-strip__s { font: 500 10px/1 var(--k-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--k-muted); }
.lck-strip[data-sel="true"] .lck-strip__s { color: var(--k-accent); }
.lck-strip__svg { display: block; width: 100%; height: 96px; }

.lck-strip__night     { fill: rgba(45,46,51,.055); }
.lck-strip__band      { fill: var(--k-go); opacity: .07; }
.lck-strip__bandline  { stroke: var(--k-go); stroke-width: 1; opacity: .3; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.lck-strip__day       { stroke: var(--k-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lck-strip__base      { stroke: var(--k-frame); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lck-strip__gust      { stroke: var(--k-quiet); stroke-width: 1.5; opacity: .55; }
.lck-strip__bracket   { fill: none; stroke: var(--k-go); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.lck-strip__bar { fill: var(--k-quiet); opacity: .5; transition: opacity .15s ease; }
.lck-strip__bar:hover { opacity: 1; }
.lck-strip__bar[data-st="peak"]           { fill: var(--k-go); opacity: 1; }
.lck-strip__bar[data-st="peak-night"]     { fill: var(--k-go); opacity: .3; }
.lck-strip__bar[data-st="marginal-night"] { opacity: .28; }
.lck-strip__bar[data-st="strong"]         { fill: var(--k-no); opacity: .9; }
.lck-strip__bar[data-st="light"]          { fill: var(--k-quiet); opacity: .38; }
.lck-strip__bar[data-st="sideshore"]      { fill: var(--k-quiet); opacity: .55; }
.lck-h-peak { stroke: var(--k-go); stroke-width: 2.4; }
.lck-h-off  { stroke: var(--k-no); stroke-width: 2.4; }

.lck-strip__wins { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 9px 0 0; }
.lck-strip__win {
  padding: 4px 10px;
  background: var(--k-go);
  color: #fff;
  font: 500 10.5px/1.4 var(--k-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.lck-strip__win--none {
  padding-left: 0;
  background: none;
  color: var(--k-muted);
  letter-spacing: .04em;
  text-transform: none;
  font-size: 12.5px;
}

/* --------------------------------------------------------------- the legend ==
   Always present: two hues carry six states, so the words are what actually
   separate them and the swatches only speed the lookup up. */
.lck-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; }
.lck-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 10.5px/1.5 var(--k-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--k-muted);
}
.lck-legend i {
  width: 14px;
  height: 14px;
  border: 0;
}
.lck-sw-peak { background: var(--k-go); }
.lck-sw-marg { background: repeating-linear-gradient(45deg, var(--k-go) 0 2px, transparent 2px 4px); }
.lck-sw-off  { background: repeating-linear-gradient(135deg, var(--k-no) 0 2px, transparent 2px 4px); }
.lck-sw-out  { background: var(--k-quiet); opacity: .45; }
.lck-sw-band { background: var(--k-go); opacity: .16; box-shadow: inset 0 1px 0 var(--k-go), inset 0 -1px 0 var(--k-go); }

/* ------------------------------------------------------------------ tooltip ==*/
.lck-tip {
  position: absolute;
  z-index: 980;
  display: none;
  min-width: 190px;
  padding: 10px 13px;
  background: var(--k-well);
  color: #fff;
  font: 500 11.5px/1.55 var(--k-sans);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(20,22,26,.28);
}
.lck-tip strong { display: block; font-weight: 500; letter-spacing: .04em; }
.lck-tip span { display: block; color: rgba(255,255,255,.66); }
.lck-tip__v { margin-top: 5px; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
.lck-tip__v[data-st="peak"] { color: var(--k-go-d) !important; }
.lck-tip__v[data-st="offshore"],
.lck-tip__v[data-st="strong"] { color: var(--k-no-d) !important; }

/* ------------------------------------------------------------- table view ==*/
.lck-details { margin: 22px 0 0; }
.lck-details > summary {
  cursor: pointer;
  font: 500 10.5px/1.5 var(--k-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--k-muted);
}
.lck-details > summary:hover { color: var(--k-accent); }
.lck-table { width: 100%; margin: 14px 0 0; border-collapse: collapse; }
.lck-table caption {
  padding: 0 0 10px;
  text-align: left;
  font: 500 10.5px/1.5 var(--k-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-muted);
}
.lck-table th, .lck-table td {
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--k-line);
  text-align: left;
  font: 500 12.5px/1.4 var(--k-sans);
  color: var(--k-ink);
}
.lck-table th { color: var(--k-muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.lck-num { font-variant-numeric: tabular-nums; }

/* =================================================================== tide ==
   Its own chart on the same time axis, never a second scale on the wind chart.
   The curve is context; the named turning points are the content, because a
   height above mean sea level in metres is not what anybody came for. */
.lck-tide__svg { display: block; width: 100%; height: 46px; }
.lck-tide__line { fill: none; stroke: var(--k-ink); stroke-width: 1.5; opacity: .5; vector-effect: non-scaling-stroke; }
.lck-tide__fill { fill: var(--k-ink); opacity: .05; }
.lck-tide__marks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; }
.lck-tide__mark {
  font: 500 10.5px/1.5 var(--k-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--k-muted);
  font-variant-numeric: tabular-nums;
}
.lck-tide__mark[data-k="High"] { color: var(--k-ink); }
.lck-tide__mark::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  background: var(--k-quiet);
}
.lck-tide__mark[data-k="High"]::before { background: var(--k-ink); }

/* ============================================================== the spots ==
   Editorial, so it is set as editorial: the dial, the wind window, the local
   note, and the hazard. Not four boxes. */
.lck-spot {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 34px;
  padding: 30px 0;
  border-top: 1px solid var(--k-line);
}
.lck-spot:first-of-type { border-top: 0; padding-top: 6px; }
.lck-spot__fig { margin: 0; }
.lck-spot__fig .lck-dial { width: 152px; height: 152px; }
.lck-spot__win {
  margin: 12px 0 0;
  font: 500 10px/1.5 var(--k-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-muted);
  text-align: center;
}
.lck-spot__t {
  margin: 0;
  font-family: var(--k-serif);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--k-ink);
}
.lck-spot__m {
  margin: 5px 0 0;
  font: 500 10.5px/1.5 var(--k-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--k-muted);
}
.lck-spot__p { margin: 14px 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.66; color: var(--k-ink); }

/* The hazard is not decoration. It is set as its own object, above the fold of
   the paragraph, with the word in the danger red and a hatched rule over it —
   the same 135-degree hatch the strip and the dial use for offshore, so the one
   texture on the page always means the same thing. */
.lck-hazard { margin: 16px 0 0; padding: 13px 0 0; border-top: 1px solid transparent; }
.lck-hazard::before {
  content: '';
  display: block;
  height: 4px;
  margin: 0 0 11px;
  background: repeating-linear-gradient(135deg, var(--k-no) 0 3px, transparent 3px 6px);
}
.lck-hazard__l {
  display: block;
  margin: 0 0 5px;
  font: 500 10px/1.4 var(--k-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--k-no);
}
.lck-hazard p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.62; color: var(--k-ink); }

/* ================================================================== cams ==
   The page's photography, and it is the actual beach rather than a stock
   picture of one. Each cam rests as a live still and goes to video on request,
   so the band is useful before anything is pressed and a phone on cellular is
   never made to open three streams.

   The credit is part of the component: it is always present, always a link to
   that camera's own page, and it is what a refused iframe degrades to. */
.lck-cams {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.12);
}
.lck-cam { position: relative; display: flex; flex-direction: column; background: var(--k-well); }
.lck-cam__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    linear-gradient(180deg, #1b1f24 0%, #14161a 58%, #191c21 100%);
}
.lck-cam__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.04);
}
.lck-cam[data-still-ok="false"] .lck-cam__still { display: none; }
.lck-cam__frame iframe,
.lck-cam__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  object-fit: cover;
}
/* The drawn plate, for the cam that publishes no still. A horizon, not an error:
   the same well the rest of the site fades photographs into, with one hairline
   where the water would be. */
.lck-cam__plate {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 20px;
  text-align: center;
}
.lck-cam__plate::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 18%, rgba(255,255,255,.22) 82%, transparent);
}
.lck-cam__plate span {
  position: relative;
  font: 500 10px/1.6 var(--k-sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.lck-cam[data-live="true"] .lck-cam__plate,
.lck-cam[data-live="true"] .lck-cam__still { display: none; }

.lck-cam__play {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: 14px;
  padding: 9px 16px;
  border: 0;
  border-radius: 0;
  background: rgba(20,22,26,.82);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 500 10px/1 var(--k-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.lck-cam__play:hover { background: var(--k-accent); }
.lck-cam__play:disabled { cursor: default; opacity: .8; }
.lck-cam[data-live="true"] .lck-cam__play { background: rgba(20,22,26,.62); }
.lck-cam[data-live="true"] .lck-cam__play::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--k-no-d);
  vertical-align: 1px;
}
.lck-cam__fail {
  position: absolute;
  z-index: 4;
  inset: auto 14px 52px 14px;
  margin: 0;
  font: 500 11px/1.5 var(--k-sans);
  color: rgba(255,255,255,.8);
  text-align: left;
}
.lck-cam:not([data-live="failed"]) .lck-cam__fail { display: none; }
.lck-cam[data-live="failed"] .lck-cam__plate { display: grid; }

.lck-cam__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 13px 16px 15px;
}
.lck-cam__what { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.72); }
.lck-cam__what strong { display: block; font-family: var(--k-serif); font-size: 17px; font-weight: 400; color: #fff; }
.lck-cam__src {
  flex: none;
  font: 500 10px/1.5 var(--k-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.24);
  transition: color .2s ease, border-color .2s ease;
}
.lck-cam__src:hover { color: #fff; border-bottom-color: var(--k-accent); }

/* ================================================================= alerts ==*/
.lck-alertband { position: relative; background: var(--k-well); color: #fff; }
.lck-alert {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  padding: 54px 0 58px;
}
.lck-alert__t {
  margin: 0;
  font-family: var(--k-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}
.lck-alert__p { margin: 14px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.68); }
.lck-alert__held {
  margin: 18px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  max-width: 40ch;
  font: 500 11.5px/1.6 var(--k-sans);
  color: rgba(255,255,255,.52);
}

.lck-field { margin: 0 0 22px; }
.lck-field > .lck-label { display: block; margin: 0 0 9px; color: rgba(255,255,255,.5); }
.lck-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lck-chip {
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.76);
  font: 500 11px/1 var(--k-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.lck-chip:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.lck-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--k-ink); }

.lck-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  margin: 10px 0 0;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 0;
  background: rgba(255,255,255,.05);
  color: #fff;
  font: 500 14.5px/1.4 var(--k-sans);
}
.lck-input::placeholder { color: rgba(255,255,255,.36); opacity: 1; }
.lck-input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.1); }
.lck-consent {
  margin: 9px 0 0;
  max-width: 52ch;
  font: 500 11px/1.6 var(--k-sans);
  color: rgba(255,255,255,.46);
}

.lck-alert__go {
  padding: 15px 30px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--k-ink);
  font: 500 11px/1 var(--k-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lck-alert__go:hover { background: var(--k-accent); color: #fff; }
.lck-alert__go:disabled { background: rgba(255,255,255,.34); color: var(--k-well); cursor: default; }
.lck-alert__go[data-busy] { position: relative; color: transparent; }
.lck-alert__go[data-busy]::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(20,22,26,.3);
  border-top-color: var(--k-well);
  border-radius: 50%;
  animation: lck-spin .7s linear infinite;
}
@keyframes lck-spin { to { transform: rotate(360deg); } }

#lck-alert-msg { margin: 14px 0 0; font: 500 13px/1.6 var(--k-sans); min-height: 1.6em; }
#lck-alert-msg[data-kind="error"] { color: var(--k-no-d); }
#lck-alert-msg[data-kind="ok"] { color: var(--k-go-d); }
.lck-alert[data-done="true"] .lck-alert__form { opacity: .45; pointer-events: none; }

/* ================================================================== tail ==*/
.lck-calm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 34px;
  padding: 26px 30px;
  background: var(--k-paper);
  border: 1px solid var(--k-frame);
}
.lck-calm__t { margin: 0; font-family: var(--k-serif); font-size: 23px; font-weight: 400; line-height: 1.2; color: var(--k-ink); }
.lck-calm__p { margin: 7px 0 0; max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--k-muted); }
.lck-calm__b {
  flex: none;
  padding: 14px 26px;
  background: var(--k-well);
  color: #fff;
  font: 500 10.5px/1 var(--k-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.lck-calm__b:hover { background: var(--k-accent); color: #fff; }

.lck-links { margin: 0; padding: 0; list-style: none; }
.lck-links li { border-bottom: 1px solid var(--k-line); }
.lck-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  font-family: var(--k-serif);
  font-size: 19px;
  color: var(--k-ink);
  text-decoration: none;
  transition: color .2s ease;
}
.lck-links a:hover { color: var(--k-accent); }
.lck-links em {
  flex: 0 1 auto;
  text-align: right;
  font: 500 10.5px/1.5 var(--k-sans);
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--k-muted);
}
.lck-colophon { margin: 30px 0 0; font: 500 11px/1.7 var(--k-sans); color: var(--k-muted); }
.lck-colophon a { color: var(--k-muted); border-bottom: 1px solid var(--k-line); text-decoration: none; }
.lck-colophon a:hover { color: var(--k-accent); }
.lck-note { margin: 0; font: 500 12px/1.6 var(--k-sans); color: var(--k-muted); }

/* ============================================================== skeletons ==
   The shape of the answer, not a spinner in the middle of it: a wait under a
   second should show the layout it is about to fill. */
#lc-kite[data-loaded="loading"] #lck-verdict { min-height: 260px; }
#lc-kite[data-loaded="loading"] #lck-rows::after,
#lc-kite[data-loaded="loading"] #lck-strips::after {
  content: '';
  display: block;
  height: 260px;
  background:
    linear-gradient(90deg, rgba(45,46,51,.05) 0 30%, rgba(45,46,51,.09) 45%, rgba(45,46,51,.05) 60%);
  background-size: 220% 100%;
  animation: lck-sweep 1.25s linear infinite;
}
#lc-kite[data-loaded="loading"] #lck-strips::after { height: 420px; }
@keyframes lck-sweep { to { background-position: -120% 0; } }
#lc-kite[data-loaded="loading"] .lck-legend,
#lc-kite[data-loaded="loading"] .lck-details { visibility: hidden; }

/* ============================================================= breakpoints ==*/
@media (max-width: 1199px) {
  .lck-verdict { grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; }
  .lck-hero-dial .lck-dial { width: 250px; height: 250px; }
  .lck-hero-dial__kt { font-size: 52px; }
  .lck-row { grid-template-columns: 40px minmax(0, 1fr) auto 48px 58px 74px 86px; gap: 0 12px; }
  .lck-head__t { font-size: 24px; }
}

@media (max-width: 959px) {
  .lck-verdict { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-bottom: 44px; }
  /* The dial leads on a narrow screen: it is the part that works without being
     read, and on a phone it is what the thumb lands under. */
  .lck-hero-dial { order: -1; }
  .lck-alert { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lck-cams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lck-spot { grid-template-columns: 132px minmax(0, 1fr); gap: 24px; }
  .lck-spot__fig .lck-dial { width: 124px; height: 124px; }
}

@media (max-width: 767px) {
  /* The row stops being a table and becomes a two-line record. Same DOM order,
     so the tab order never jumps backwards. */
  .lck-row {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    grid-template-areas:
      'dial name kt meta'
      'dial dir  q  word';
    gap: 6px 12px;
    padding: 12px 14px;
  }
  .lck-row__dial { grid-area: dial; align-self: center; }
  .lck-row__name { grid-area: name; }
  .lck-row__kt   { grid-area: kt; font-size: 26px; }
  .lck-row__meta { grid-area: meta; }
  .lck-row__dir  { grid-area: dir; text-align: left; }
  .lck-row__q    { grid-area: q; align-self: center; min-width: 46px; }
  .lck-row__word { grid-area: word; }

  .lck-cams { grid-template-columns: minmax(0, 1fr); }
  .lck-spot { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .lck-spot__fig { display: flex; align-items: center; gap: 18px; }
  .lck-spot__fig .lck-dial { width: 96px; height: 96px; flex: none; }
  .lck-spot__win { margin: 0; text-align: left; }
  .lck-calm { grid-template-columns: minmax(0, 1fr); }
  .lck-calm__b { text-align: center; }
  .lck-next { grid-template-columns: auto 1fr; }
  .lck-next__go { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 12px; }
}

@media (max-width: 639px) {
  .lck-head { flex-wrap: wrap; gap: 4px; }
  .lck-head__t { font-size: 21px; width: 100%; }
  .lck-head__m { max-width: none; text-align: left; font-size: 10px; letter-spacing: .14em; }
  .lck-mast { font-size: 10px; letter-spacing: .2em; padding-top: 20px; }
  .lck-verdict { padding: 22px 0 38px; min-height: 0; }
  .lck-verdict__why { font-size: 15px; }
  .lck-hero-dial .lck-dial { width: 218px; height: 218px; }
  .lck-hero-dial__kt { font-size: 46px; }
  .lck-alert__t { font-size: 27px; }
  .lck-spot__t { font-size: 21px; }
  .lck-strip__svg { height: 84px; }
  .lck-links a { font-size: 16.5px; gap: 12px; }
  .lck-links em { font-size: 9.5px; letter-spacing: .1em; }
  .lck-sec { margin-bottom: 46px; }
  .lck-input { max-width: none; }
  .lck-alert__go { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #lc-kite *,
  #lc-kite *::before,
  #lc-kite *::after { transition: none !important; animation: none !important; }
  #lc-kite[data-loaded="loading"] #lck-rows::after,
  #lc-kite[data-loaded="loading"] #lck-strips::after { background: rgba(45,46,51,.06); }
}

@media (forced-colors: active) {
  /* Two hues carrying six states cannot survive a forced palette, so the words
     and the hatching are what remain — which is why they were never optional. */
  .lck-row, .lck-strip, .lck-cam { forced-color-adjust: none; }
  .lck-strip__bar { fill: CanvasText; }
  .lck-strip__bar[data-st="peak"] { fill: Highlight; }
}