/* ============================================================================
   Shellmark - marketing homepage, redesign variant B: "First light"
   Concept: 5 a.m. on the water the morning a season opens. The season
   countdown is the hero; the accent is the app's own "verify" colour, drawn
   as the sunrise line through the type.

   No JavaScript. No external network requests - fonts are self-hosted in
   assets/fonts/ (SIL Open Font License; see the OFL-*.txt files there).
   Every palette hex below is traced to a sampled region of assets/hero-shore.jpg.
   ========================================================================= */

/* ---------- Self-hosted faces ---------- */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bigshouldersdisplay-700.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/bigshouldersdisplay-800.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-400.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/newsreader-600.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/martianmono-500.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Grounds, dark half - sampled from the seagrass shadow (#1C2B20) and
     darkened; deliberately green-black with a teal cast, never neutral #000. */
  --abyss: #061311;
  --tideline: #0C211D;
  --seagrass: #1D3A33;
  --seagrass-line: #2A4C43;

  /* Water and sky, lifted to legibility */
  --shoal: #8FBDB6;        /* most-teal region #75A6AA */
  --haze: #EFE7DB;         /* open-water mirror #D5CCBB, warm bone */
  --oyster: #B4C6C2;       /* sand channel, desaturated - the CLOSED colour */

  /* The one signal accent: the horizon glow (#F7C49C) held at its own
     measured hue (26 deg) and saturated until it signals. */
  --first-light: #F2913F;
  --first-light-deep: #8A4A12;

  /* Legal-state colours. Muted on purpose so the accent stays the only
     thing on the page that raises its voice. CLOSED is never red. */
  --open: #94C79C;
  --notake: #E0736A;

  /* Grounds, light half - the turquoise shallow (#91ABAF) lifted.
     A sea-glass grey-green, explicitly not a warm cream. */
  --flat: #D6E1DC;
  --flat-raised: #E9F0EC;
  --flat-line: #B6C8C1;
  --ink: #0E211C;
  --ink-soft: #2F4C44;
  --ink-mute: #3C5A51;

  --open-ink: #24543A;
  --verify-ink: #7B3F0C;
  --notake-ink: #96291F;
  --closed-ink: #33514B;

  /* Type roles */
  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow Bold",
             "Impact", sans-serif;
  --body: "Newsreader", Charter, "Iowan Old Style", Georgia,
          "Times New Roman", serif;
  --util: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas,
          "Liberation Mono", monospace;

  --shell: 78rem;
  --gut: clamp(1.25rem, 4.5vw, 3.25rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--abyss);
  color: var(--haze);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--first-light);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-light :focus-visible { outline-color: var(--first-light-deep); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gut);
}
/* A reading-measure cap that never breaks the page's single left edge: every
   band starts at the same gutter, only the line length is shortened. */
.measure { max-width: 58rem; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  background: var(--first-light);
  color: #22140A;
  font-family: var(--util);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.7em 1.1em;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* Shared utility label - the page's "instrument" voice */
.tag {
  display: block;
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--shoal);
  margin: 0 0 1.1rem;
}
.on-light .tag { color: var(--closed-ink); }

.fine {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--oyster);
  max-width: 52rem;
}
.on-light .fine { color: var(--ink-mute); }
.fine-gap { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* The in-frame honesty stamp that rides every depiction of app data. */
.stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  margin: 0;
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--oyster);
}
.stamp span { white-space: nowrap; }
.stamp span::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 1px;
  margin-right: 0.45rem;
  vertical-align: 0.3em;
  background: var(--first-light);
}
.on-light .stamp { color: var(--verify-ink); }

/* ---------- Top notice (locked text) ---------- */
.notice {
  background: var(--tideline);
  border-bottom: 1px solid var(--seagrass);
  padding: 0.85rem 0;
}
.notice p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--oyster);
}
.notice strong {
  color: var(--haze);
  font-weight: 600;
}

/* ---------- Masthead ---------- */
.masthead {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(143, 189, 182, 0.16);
}
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding-block: 0.9rem;
}
.masthead img { width: 132px; height: auto; }
.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.35rem;
}
.masthead nav a {
  font-family: var(--util);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--shoal);
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.masthead nav a:hover,
.masthead nav a:focus-visible {
  color: var(--haze);
  border-bottom-color: var(--first-light);
}

/* ============================================================================
   HERO - the countdown is the page's thesis.
   ========================================================================= */
.hero {
  /* Directional scrim. The type column sits in the shadow of the frame and the
     light stays out on the water, which is both how the photograph reads at
     first light and how every hero string clears AA over a moving background.
     Measured against the rendered pixels, not estimated. */
  --hscrim: linear-gradient(90deg, rgba(4, 13, 11, 0.32) 0%,
      rgba(4, 13, 11, 0.28) 55%, rgba(4, 13, 11, 0.22) 100%);
  position: relative;
  isolation: isolate;
  min-height: clamp(33rem, 86svh, 52rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

/* Layer 1: the photograph. 440x880 source. On phones it renders at roughly
   1x and stays close to sharp; on wide screens it is pushed well past its
   pixels on purpose and blurred, so the upscale reads as dawn haze. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(0.92) contrast(1.05) brightness(0.56) blur(2px);
  z-index: -3;
}
@media (min-width: 34rem) {
  .hero-photo {
    object-position: 50% 26%;
    filter: saturate(0.95) contrast(1.06) brightness(0.6) blur(4px);
  }
}
@media (min-width: 60rem) {
  .hero-photo {
    object-position: 50% 28%;
    filter: saturate(0.98) contrast(1.07) brightness(0.62) blur(6px);
  }
  /* Wide screens put the type in one column, so the shadow can be a real
     side-light: heavy at the left edge, gone by two-thirds across. */
  .hero {
    --hscrim: linear-gradient(90deg, rgba(4, 13, 11, 0.62) 0%,
        rgba(4, 13, 11, 0.52) 26%, rgba(4, 13, 11, 0.30) 46%,
        rgba(4, 13, 11, 0.08) 66%, rgba(4, 13, 11, 0) 80%);
  }
}

/* Layer 2: sunrise. Real warm light put back into the darkened frame, so the
   dark ground is a photograph rather than a fill. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 34% at 50% 46%, rgba(242, 145, 63, 0.30) 0%, rgba(242, 145, 63, 0) 72%),
    radial-gradient(120% 50% at 50% 40%, rgba(247, 196, 156, 0.16) 0%, rgba(247, 196, 156, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Layer 3: scrim + cool grade. The grade holds the sky haze and the water at
   the palette's green-black and opens up across the horizon band, so the only
   warmth left in the frame is the real dawn light where the sun actually is.
   Below it, the scrim is heaviest at the bottom so the hero joins the next band. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--hscrim),
    linear-gradient(180deg, rgba(20, 48, 42, 0) 0%, rgba(20, 48, 42, 0.50) 12%,
                    rgba(20, 48, 42, 0.42) 26%, rgba(20, 48, 42, 0.06) 37%,
                    rgba(20, 48, 42, 0.08) 50%, rgba(20, 48, 42, 0.44) 70%,
                    rgba(20, 48, 42, 0.26) 100%),
    linear-gradient(180deg, rgba(6, 19, 17, 0.86) 0%, rgba(6, 19, 17, 0.30) 22%,
                    rgba(6, 19, 17, 0.18) 42%, rgba(6, 19, 17, 0.74) 74%,
                    var(--abyss) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  width: 100%;
}

.hero-h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.1vw, 2.2rem);
  line-height: 1;
  letter-spacing: 0.015em;
  color: var(--haze);
  max-width: 19ch;
  margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(239, 231, 219, 0.22);
  display: inline-block;
}

.hero-place {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0 0 0.6rem;
  font-family: var(--util);
  font-weight: 500;
  font-size: clamp(0.6875rem, 1.3vw, 0.8125rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--haze);
}
/* The separator stays in the text colour at full strength. The accent is
   reserved for the verdict and the store status; a divider is neither, and a
   dimmed glyph over a photograph is a contrast problem waiting to happen. */
.hero-place .sep { color: inherit; }

/* The countdown slab. Reading order gives exactly "Opens in 62 days". */
.count {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: clamp(0.75rem, 2vw, 1.75rem);
}
.count-pre {
  grid-column: 1 / -1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 3.25rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--haze);
  opacity: 0.88;
  margin-bottom: 0.15rem;
}
.count-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(7.5rem, 34vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--haze);
  font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 0.06em 0.5em rgba(6, 19, 17, 0.55);
}
.count-unit {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--haze);
  padding-bottom: clamp(0.35rem, 1.4vw, 1.1rem);
}

/* ---------- The four-species rotation ----------
   Every frame is placed in the SAME grid cell (grid-area: 1 / 1), which is
   what makes this shift-proof: the row is sized by the tallest frame and the
   column by the widest, at every viewport width, computed by the browser
   rather than guessed at with a fixed height. A 3-digit numeral replacing a
   2-digit one therefore cannot move the horizon rule or anything below it.
   Frames are bottom-aligned so the numeral's baseline stays pinned to that
   rule; any slack a shorter frame leaves opens above the eyebrow, where it is
   just sky. Opacity is the only animated property - nothing translates, so
   nothing fights the hero's pre-dawn calm. */
.count-stack {
  display: grid;
}
.count-frame {
  grid-area: 1 / 1;
  align-self: end;
  min-width: 0;
  opacity: 0;
}
/* Static fallback for anywhere the rotation does not run - reduced motion, or
   a browser that never starts the animation: bay scallop alone, as shipped. */
.count-frame:first-of-type { opacity: 1; }

/* SIGNATURE: the horizon rule. It starts at the baseline of the numeral and
   runs to both page edges - the sun line coming up through the type. It is
   the app's "verify" colour, which is the one idea the whole product rests on. */
.horizon {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 2px;
  margin-top: 0.9rem;
  margin-bottom: 1.1rem;
  background: linear-gradient(90deg,
      rgba(242, 145, 63, 0) 0%,
      rgba(242, 145, 63, 0.55) 14%,
      var(--first-light) 50%,
      rgba(242, 145, 63, 0.55) 86%,
      rgba(242, 145, 63, 0) 100%);
}
.horizon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 28px;
  background: radial-gradient(60% 100% at 50% 50%, rgba(242, 145, 63, 0.24), rgba(242, 145, 63, 0) 70%);
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.1rem 2.5rem;
}
.hero-say {
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  color: var(--haze);
  max-width: 26ch;
  margin: 0;
  flex: 1 1 18rem;
}
.hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 0 1 auto;
}
.hero-status {
  display: inline-block;
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--first-light);
  border: 1px solid rgba(242, 145, 63, 0.55);
  padding: 0.5em 0.9em;
  margin: 0;
}

/* One orchestrated load moment, then the countdown rotation is the only thing
   still moving on the page - and it moves nothing, it only fades. */
@media (prefers-reduced-motion: no-preference) {
  .horizon {
    transform: scaleX(0);
    transform-origin: 50% 50%;
    animation: draw-horizon 1200ms cubic-bezier(0.16, 0.9, 0.24, 1) 260ms both;
  }
  .hero-place, .count { animation: rise 900ms cubic-bezier(0.16, 0.9, 0.24, 1) both; }
  .count { animation-delay: 90ms; }
  .hero-foot {
    animation: rise 900ms cubic-bezier(0.16, 0.9, 0.24, 1) 620ms both;
  }

  /* 20s round trip over four species: each frame holds fully opaque for 4.4s,
     then hands over in 600ms - one keyframe set, four delays, 5s per species.
     The delays are spaced exactly 5000ms apart and offset so that each frame
     reaches zero on the very instant the next one starts to rise (see the
     keyframe note below for why that exactness is the whole point).
     Frame 1 carries a -300ms delay so it is already at full opacity on the
     first painted frame, which is where the shipped hero started. */
  .count-frame {
    animation: species-cycle 20s ease-in-out infinite both;
  }
  .count-frame:nth-of-type(1) { animation-delay: -300ms; }
  .count-frame:nth-of-type(2) { animation-delay: 4700ms; }
  .count-frame:nth-of-type(3) { animation-delay: 9700ms; }
  .count-frame:nth-of-type(4) { animation-delay: 14700ms; }
}
@keyframes draw-horizon { to { transform: scaleX(1); } }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* 20s = 100%, so 1% = 200ms. Fade OUT over 1.5% (300ms), then the next frame
   fades IN over 1.5% (300ms): a 600ms hand-over in which the two frames are
   NEVER painted at the same time.

   This is a dissolve to empty and back, not a cross-fade, and the difference
   is not stylistic. Two stacked frames that both ramp through partial opacity
   must cross somewhere - and wherever they cross, two different countdowns are
   superimposed in the same grid cell. Rendering it proves the point: a 50/50
   cross-fade put "62" on top of "35" and the eyebrow read
   "SPINYCLOBSTER/ /GUATLANTIC2ZONE 1"; making the ramps unequal only moved the
   crossing down to 1/3 each, where the numeral read "303" and the unit read
   "DAYS DAYS". Garbled type is unacceptable on a page whose whole claim is
   that it tells you plainly what is open - a countdown that cannot be misread
   is the product.

   So the ramps are butt-joined instead of overlapped: frame N hits opacity 0
   at exactly 25% of its own cycle, and frame N+1's delay is exactly 5000ms
   later, so it leaves 0 at the same instant. The slot is empty for one
   instant and never shows two species at once. The seam closes the same way:
   frame 4 clears at t=19700ms and frame 1's next cycle starts rising at
   t=19700ms. Still 5s per species, still 20s round trip, still nothing but
   opacity moving. */
@keyframes species-cycle {
  0%     { opacity: 0; }
  1.5%   { opacity: 1; }
  23.5%  { opacity: 1; }
  25%    { opacity: 0; }
  100%   { opacity: 0; }
}
/* Same rotation with the fades taken out: the 1.5% ramps collapse to 0.001%,
   which at 20s is 0.2ms - a cut, not a dissolve. Nothing is ever painted at a
   partial opacity, so the garbled-type failure the fades were shaped to avoid
   cannot occur here either. The butt-joint is kept for the same reason it
   exists above: frame N cuts to 0 at exactly 25% of its own cycle and frame
   N+1 cuts in 0.001% later, so the slot is empty for one instant rather than
   holding two countdowns at once. Used by the motion opt-out at the foot of
   this file. */
@keyframes species-cycle-cut {
  0%      { opacity: 0; }
  0.001%  { opacity: 1; }
  24.999% { opacity: 1; }
  25%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* ============================================================================
   BANDS
   ========================================================================= */
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band-dark { background: var(--abyss); }
.band-deep { background: var(--tideline); }
.band-light { background: var(--flat); color: var(--ink); }
.band-raised { background: var(--flat-raised); color: var(--ink); }

.band-light h1, .band-light h2, .band-light h3,
.band-raised h1, .band-raised h2, .band-raised h3 { color: var(--ink); }

.band h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.25rem);
  max-width: 21ch;
  margin-bottom: 0.7rem;
}
.band h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1;
  margin-bottom: 0.55rem;
}
.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--haze);
  max-width: 46rem;
  margin-bottom: 0;
}
.band-light .lede, .band-raised .lede { color: var(--ink-soft); }

.band-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---------- Species countdown rail ---------- */
/* One column on the smallest phones so the countdown string never breaks across
   a line: "Opens in 62 days" has to read as one phrase. */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-bottom: 1.5rem;
}
@media (min-width: 26rem) {
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 58rem) {
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ticket {
  display: flex;
  flex-direction: column;
  background: var(--tideline);
  border: 1px solid var(--seagrass);
  overflow: hidden;
}
.band-deep .ticket { background: #081916; }
.ticket img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.8) contrast(1.05);
}
.ticket-body {
  padding: 0.85rem 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
}
.ticket h3 {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  margin: 0;
  color: var(--haze);
}
.state {
  align-self: flex-start;
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.42em 0.6em;
  border: 1px solid currentColor;
}
.state-open { color: var(--open); }
/* CLOSED is neutral oyster, never red: a closed season and a no-take rule are
   different legal facts and the app colours them differently. */
.state-closed { color: var(--oyster); }
/* In one column the ticket turns on its side, so four species stay a short
   scroll instead of four full-width photographs. Declared after the base
   .ticket rules on purpose: same specificity, so source order decides. */
@media (max-width: 25.99rem) {
  .ticket { flex-direction: row; align-items: stretch; }
  .ticket img { flex: 0 0 38%; width: 38%; height: auto; aspect-ratio: 1 / 1; }
  .ticket-body { justify-content: center; }
}

.ticket-count {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--haze);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ticket-src {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  color: var(--oyster);
  margin: 0;
}

/* ---------- Dockline: the same morning, in focus ---------- */
.dockline {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .dockline { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}
.dockline-plate {
  width: 100%;
  max-width: 17rem;
  height: auto;
  border: 1px solid var(--seagrass-line);
}
.dockline-say {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  line-height: 0.95;
  color: var(--haze);
  margin: 0 0 1rem;
  max-width: 16ch;
}
.dockline-say em {
  font-style: normal;
  color: var(--first-light);
}
.dockline p.fine { margin-bottom: 0; }

/* ---------- Phone plates ---------- */
.plates {
  display: grid;
  gap: clamp(2rem, 4vw, 2.25rem);
  justify-items: center;
}
@media (min-width: 62rem) {
  .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.plate { margin: 0; width: 100%; max-width: 22rem; }
.phone {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 19rem;
  margin: 0 auto;
  aspect-ratio: 9 / 15;
  padding: 0.5rem;
  background: #04100E;
  border: 1px solid var(--seagrass-line);
  border-radius: 1.75rem;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
}
.phone::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  width: 22%;
  height: 0.4rem;
  border-radius: 999px;
  background: #04100E;
  z-index: 2;
}
.screen {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 0.6rem 0.5rem;
  background: var(--tideline);
  border-radius: 1.3rem;
  overflow: hidden;
}
.screen-title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1;
  color: var(--haze);
  margin: 0.15rem 0 0.15rem;
}
.screen-sub {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--shoal);
  margin: 0.2rem 0 0;
}
.screen-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.srow {
  border: 1px solid var(--seagrass);
  background: #081916;
  padding: 0.4rem 0.5rem;
}
.srow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.srow-name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--haze);
}
.srow .state { font-size: 0.5rem; padding: 0.35em 0.45em; }
.srow-meta {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.5625rem;
  letter-spacing: 0.02em;
  color: var(--haze);
  margin: 0.3rem 0 0;
  font-variant-numeric: tabular-nums;
}
.srow-src {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: var(--oyster);
  margin: 0.18rem 0 0;
}

.szone {
  display: flex;
  gap: 0.5rem;
  border: 1px solid var(--seagrass);
  background: #081916;
  padding: 0.4rem 0.5rem;
}
.szone-bar { flex: 0 0 3px; align-self: stretch; background: currentColor; }
.szone-open { color: var(--open); }
.szone-verify { color: var(--first-light); }
.szone-notake { color: var(--notake); }
.szone-body { min-width: 0; }
.szone-name {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--haze);
  margin: 0;
}
.szone-state {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0.28rem 0 0;
  color: currentColor;
}
.szone-dist {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.5625rem;
  color: var(--haze);
  margin: 0.2rem 0 0;
  font-variant-numeric: tabular-nums;
}

.sverdict {
  border: 1px solid currentColor;
  padding: 0.5rem 0.55rem;
  color: var(--first-light);
}
.sverdict-open { color: var(--open); }
.sverdict-label {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1;
  margin: 0 0 0.35rem;
  color: currentColor;
}
.sverdict-line, .sverdict li {
  font-size: 0.625rem;
  line-height: 1.4;
  color: var(--haze);
  margin: 0;
}
.sverdict ul { display: flex; flex-direction: column; gap: 0.2rem; }
.sverdict li { padding-left: 0.7rem; position: relative; }
.sverdict li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 1px;
  background: currentColor;
}
.snote {
  font-size: 0.625rem;
  line-height: 1.4;
  color: var(--oyster);
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: 1px dashed var(--seagrass-line);
}
.screen-foot {
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 1px solid var(--seagrass);
}
.screen-foot p {
  font-size: 0.5625rem;
  line-height: 1.4;
  color: var(--oyster);
  margin: 0 0 0.25rem;
}
.screen-foot .screen-sample {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--shoal);
  margin: 0;
}
.plate figcaption {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--oyster);
  margin-top: 1rem;
}

/* ---------- Verdict trio ---------- */
.verdicts {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-bottom: 1.5rem;
}
@media (min-width: 52rem) {
  .verdicts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.verdict {
  border: 1px solid var(--seagrass-line);
  border-top-width: 3px;
  padding: 1.25rem 1.25rem 1.4rem;
  background: var(--abyss);
}
.band-dark .verdict { background: var(--tideline); }
.verdict h3 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin-bottom: 0.5rem;
}
.verdict p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--haze); }
.v-go { border-top-color: var(--open); }
.v-go h3 { color: var(--open); }
.v-caution { border-top-color: var(--first-light); }
.v-caution h3 { color: var(--first-light); }
.v-stay { border-top-color: var(--notake); }
.v-stay h3 { color: var(--notake); }

/* ---------- Features ---------- */
.features {
  display: grid;
  gap: clamp(1px, 0.15vw, 2px);
  background: var(--flat-line);
  border: 1px solid var(--flat-line);
}
@media (min-width: 46rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 70rem) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feature {
  background: var(--flat-raised);
  padding: clamp(1.4rem, 2.4vw, 2rem);
}
.feature p { margin: 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; }
.feature-lead { grid-column: 1 / -1; }
.feature-lead h3 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.feature-lead p { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); max-width: 52rem; color: var(--ink-soft); }

/* ---------- Privacy ---------- */
.privacy {
  display: grid;
  gap: 1rem 3rem;
}
@media (min-width: 58rem) {
  .privacy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.privacy li {
  padding-left: 1.1rem;
  border-left: 2px solid var(--shoal);
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.band-light .privacy li { border-left-color: var(--closed-ink); }
.privacy a { color: var(--verify-ink); }

/* ---------- Pricing ---------- */
.prices {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}
@media (min-width: 52rem) {
  .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}
.price {
  background: var(--flat-raised);
  border: 1px solid var(--flat-line);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
}
.price h3 { color: var(--ink); }
.price-amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 0.85;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0.4rem 0 0.2rem;
  font-variant-numeric: tabular-nums;
}
.price-term {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
}
.price p:last-child { margin: 0; font-size: 0.9375rem; color: var(--ink-soft); }
/* The Pro card inverts to the dark half of the page rather than borrowing
   the accent - the accent stays on verdict and status only. */
.price-pro {
  background: var(--abyss);
  border-color: var(--abyss);
  color: var(--haze);
}
.price-pro h3, .price-pro .price-amount { color: var(--haze); }
.price-pro .price-term { color: var(--shoal); }
.price-pro p:last-child { color: var(--haze); }
.price-pro :focus-visible { outline-color: var(--first-light); }

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--flat-line);
  max-width: 58rem;
}
.faq details {
  border-bottom: 1px solid var(--flat-line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.1;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--util);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: var(--verify-ink);
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p {
  margin: 0 0 1.2rem;
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* ---------- Footer ---------- */
.site-foot {
  background: var(--abyss);
  border-top: 1px solid var(--seagrass);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  color: var(--haze);
}
.foot-grid {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 52rem) {
  .foot-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 1fr); }
}
.foot-grid img { width: 132px; height: auto; margin-bottom: 1.1rem; }
.foot-legal {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--oyster);
  max-width: 36rem;
  margin: 0;
}
.foot-nav { display: flex; flex-direction: column; gap: 0.7rem; }
.foot-nav a {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--shoal);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: color 160ms ease, border-color 160ms ease;
}
.foot-nav a:hover, .foot-nav a:focus-visible {
  color: var(--haze);
  border-bottom-color: var(--first-light);
}
.foot-contact p { font-size: 0.9375rem; margin: 0 0 0.5em; color: var(--haze); }
.foot-contact .foot-org { font-weight: 600; }
.foot-contact a { color: var(--haze); text-decoration-color: rgba(242, 145, 63, 0.6); }
.foot-contact a:hover, .foot-contact a:focus-visible { color: var(--first-light); }
.foot-copy {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--oyster);
  margin-top: 1.2rem;
}

/* ============================================================================
   REGULATIONS PAGE (regulations.html)
   ----------------------------------------------------------------------------
   Page-scoped, all namespaced .regs-* so nothing here can reach the homepage.
   Reuses the v4 "First light" frame verbatim: same .band grounds, same .shell
   gutter, same .tag / .lede / .fine voices, same masthead and footer.

   Two shared rules are touched below and both are ADDITIVE:
     .state-notake   a legal state the homepage ALSO renders since 2026-10-31
                     (the three never-species cards: queen conch, horseshoe
                     crab, Bahama starfish)
     .ticket-link    the homepage species cards, now links to this page
   ========================================================================= */

/* NO TAKE is the one place red belongs: harvest is prohibited in the area
   whatever the season. It is a different legal fact from a closed season,
   which stays neutral oyster above. */
.state-notake { color: var(--notake); }

/* ---------- Intro ---------- */
.regs-intro h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.25rem);
  max-width: 21ch;
  margin-bottom: 0.7rem;
  color: var(--haze);
}

/* The sanctioned recency line and the locked sentence, set as instruments
   rather than prose so they read as a stamp on the page, not a claim in it. */
.regs-recency,
.regs-locked {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.6;
  margin: 0;
}
.regs-recency {
  color: var(--haze);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.regs-recency::before,
.regs-locked::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 1px;
  margin-right: 0.45rem;
  vertical-align: 0.3em;
  background: var(--first-light);
}
.regs-locked {
  color: var(--first-light);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* Standing emergency-closure caveat. Accent hairline on the leading edge -
   the same restraint the rest of the page uses, one notch louder. */
.regs-alert {
  border: 1px solid var(--seagrass-line);
  border-left: 3px solid var(--first-light);
  background: var(--tideline);
  padding: clamp(0.95rem, 2.2vw, 1.35rem) clamp(1rem, 2.5vw, 1.5rem);
  max-width: 52rem;
}
.band-deep .regs-alert { background: #081916; }
.regs-alert p { margin: 0 0 0.6em; font-size: 0.9375rem; line-height: 1.6; color: var(--oyster); }
.regs-alert p:last-child { margin-bottom: 0; }
.regs-alert p.regs-alert-head {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--first-light);
  line-height: 1.5;
}
.regs-alert a,
.regs-pointer a,
.regs-source a {
  color: var(--haze);
  text-decoration-color: rgba(242, 145, 63, 0.6);
  text-underline-offset: 0.18em;
}
.regs-alert a:hover,
.regs-alert a:focus-visible,
.regs-pointer a:hover,
.regs-pointer a:focus-visible,
.regs-source a:hover,
.regs-source a:focus-visible {
  color: var(--first-light);
  text-decoration-color: var(--first-light);
}
/* The "not published" pointer is already accent-coloured; its link keeps that
   colour and carries the underline instead. */
.regs-missing a {
  color: inherit;
  text-decoration-color: currentColor;
  text-underline-offset: 0.18em;
}
.regs-missing a:hover,
.regs-missing a:focus-visible { color: var(--haze); }

/* ---------- Species block header ---------- */
.regs-source {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--oyster);
  margin: 0.9rem 0 0.35rem;
  overflow-wrap: anywhere;
}
.regs-retrieved {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--oyster);
  margin: 0;
}

/* ---------- One zone / rule-topic card ---------- */
.regs-zone {
  border: 1px solid var(--seagrass);
  background: var(--tideline);
  padding: clamp(1rem, 2.5vw, 1.6rem);
  margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
}
.band-deep .regs-zone { background: #081916; }
.regs-zone:last-of-type { margin-bottom: 0; }

.regs-zone-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
}
.regs-zone-head h3 {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  margin: 0;
  color: var(--haze);
  max-width: 34ch;
}
.regs-zone-head .state { align-self: center; }

.regs-zone-detail {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--oyster);
  margin: 0.55rem 0 0;
  max-width: 62ch;
}
.regs-topic {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--shoal);
  margin: 0.55rem 0 0;
}

/* ---------- The fact rows ----------
   A definition list, not a table: at 500px each row has to stack label over
   value and still read as a pair, which is what <dl> already means. */
.regs-facts {
  margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
  border-top: 1px solid var(--seagrass);
}
.regs-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--seagrass);
}
@media (min-width: 38rem) {
  .regs-fact { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0 1.5rem; }
}
.regs-fact dt {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--shoal);
  padding-top: 0.1rem;
}
.regs-fact dd {
  margin: 0;
  min-width: 0;
}
.regs-fact dd p {
  margin: 0 0 0.5em;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--haze);
  max-width: 68ch;
}
.regs-fact dd p:last-child { margin-bottom: 0; }

/* A field the FWC page only partly confirmed: the excerpt marker explains why
   the sentence above it may read as a fragment. */
.regs-fact dd p.regs-excerpt,
.regs-fact dd p.regs-missing {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  line-height: 1.65;
  text-transform: uppercase;
}
.regs-fact dd p.regs-excerpt {
  color: var(--shoal);
  margin-top: 0.45rem;
}
/* Not published at all - the page points at FWC rather than guessing. */
.regs-fact dd p.regs-missing {
  color: var(--first-light);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* ---------- What we could not confirm ---------- */
.regs-unconfirmed {
  margin-top: clamp(0.9rem, 2vw, 1.25rem);
  border-left: 2px solid var(--seagrass-line);
  padding-left: clamp(0.75rem, 2vw, 1.1rem);
}
.regs-unconfirmed-head {
  font-family: var(--util);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--shoal);
  margin: 0 0 0.5rem;
}
.regs-unconfirmed ul { display: flex; flex-direction: column; gap: 0.5rem; }
.regs-unconfirmed li {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--oyster);
  max-width: 72ch;
}
.regs-unconfirmed li::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 1px;
  margin-right: 0.5rem;
  vertical-align: 0.32em;
  background: var(--seagrass-line);
}

.regs-pointer {
  margin: clamp(0.9rem, 2vw, 1.25rem) 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--oyster);
}

/* ============================================================================
   HOMEPAGE SPECIES CARDS -> regulations.html
   ----------------------------------------------------------------------------
   The card stays an <article>; only the species name is the link, so the
   accessible name is "Bay scallop" and not the whole card read aloud. The
   link's ::after overlay makes the whole ticket clickable without nesting a
   second interactive element inside the first.
   ========================================================================= */
.ticket { position: relative; }
.ticket h3 a {
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 145, 63, 0.45);
  transition: border-color 160ms ease, color 160ms ease;
}
.ticket h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ticket h3 a:hover,
.ticket h3 a:focus-visible {
  color: var(--first-light);
  border-bottom-color: var(--first-light);
}
.ticket:has(h3 a:hover) { border-color: var(--seagrass-line); }
/* The focus ring belongs to the whole card, not to two words inside a photo
   frame that clips it. */
.ticket:has(h3 a:focus-visible) {
  outline: 3px solid var(--first-light);
  outline-offset: 3px;
}

/* ---------- Motion opt-out ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .horizon { transform: none !important; }

  /* The hero has one job: say how many days stand between today and each of
     the four openings. A visitor who asks for less motion is asking for less
     movement, not for less of the page - pinning the hero to one species and
     dropping the other three would answer a motion preference by withholding
     three quarters of the answer. So the rotation stays and only its motion
     goes: each species holds fully opaque for its 5s slot and is then replaced
     by the next in a 0.2ms cut. Nothing travels, nothing scales, nothing
     dissolves, and there is no in-between frame for the eye to follow, which
     is what the preference actually asks to be spared.

     The cuts are butt-joined exactly as the fades are in the no-preference
     variant, so two countdowns are never superimposed in the same grid cell -
     the slot is empty for one instant instead.

     !important is load-bearing on every declaration below. The blanket rule
     above sets animation-duration and animation-iteration-count as !important
     longhands; at equal importance it takes this class selector (0,1,0)
     out-specifying the universal one (0,0,0) to win the cascade back. The
     shorthand resets animation-delay to 0, so the per-frame delays have to be
     separate declarations. Frame 1 starts at -100ms so it is already inside
     its opaque window on the first painted frame; every later delay is the
     instant the previous frame cuts out.

     Nothing is display:none here. All four species do appear on screen, so
     hiding three from the accessibility tree would describe a hero that is not
     the one being rendered; reader and screen carry the same four countdowns. */
  .count-frame {
    animation: species-cycle-cut 20s linear infinite both !important;
  }
  .count-frame:nth-of-type(1) { animation-delay: -100ms !important; }
  .count-frame:nth-of-type(2) { animation-delay: 4900ms !important; }
  .count-frame:nth-of-type(3) { animation-delay: 9900ms !important; }
  .count-frame:nth-of-type(4) { animation-delay: 14900ms !important; }
}