/*
 * CastDepth field guide homepage.
 *
 * Scoped to .fg-home so it cannot reach the rest of the site. The theme's own
 * tokens, palette, and radius stay untouched: the home page carries its own,
 * the same way the app version did.
 *
 * Two themes, one token set. The page follows the visitor's system preference,
 * and the tokens below are the only place colour is declared for this surface.
 */

.fg-home {
  --fg-paper: #f4f6f4;
  --fg-raise: #ffffff;
  --fg-ink: #0b1628;
  --fg-ink-soft: #40525f;
  --fg-muted: #5b6b76;
  --fg-rule: rgba(11, 22, 40, 0.16);
  --fg-rule-2: rgba(11, 22, 40, 0.36);
  --fg-water: #12556f;
  --fg-on-water: #ffffff;
  --fg-soft: #e3edf0;
  --fg-panel: #0e2135;
  --fg-panel-ink: #f2f7fa;
  --fg-panel-soft: #a9c0cf;
  --fg-panel-rule: rgba(242, 247, 250, 0.18);
  --fg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fg-sans: Inter, Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fg-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--fg-paper);
  color: var(--fg-ink);
  font-family: var(--fg-sans);
  font-size: 17px;
  line-height: 1.62;
}

@media (prefers-color-scheme: dark) {
  .fg-home {
    --fg-paper: #070f1a;
    --fg-raise: #0c1725;
    --fg-ink: #e9eff4;
    --fg-ink-soft: #b3c4d1;
    --fg-muted: #93a8b6;
    --fg-rule: rgba(233, 239, 244, 0.24);
    --fg-rule-2: rgba(233, 239, 244, 0.46);
    --fg-water: #7cc4e8;
    --fg-on-water: #071019;
    --fg-soft: #12293a;
  }
}

/* The theme paints the page ground; the home page paints its own. */
.fg-home,
.fg-home * {
  box-sizing: border-box;
}

.fg-home h1,
.fg-home h2,
.fg-home h3 {
  margin: 0;
  font-family: var(--fg-sans);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--fg-ink);
}

.fg-home p {
  margin: 0;
}

.fg-home img {
  display: block;
  max-width: 100%;
  height: auto;
  /* The theme rounds every image in the content area. This surface is all
     sharp, so the field guide opts its own images out. */
  border-radius: 0;
  box-shadow: none;
}

.fg-home a {
  color: inherit;
  text-decoration: none;
}

.fg-home a:hover,
.fg-home a:focus {
  color: var(--fg-water);
}

.fg-home :focus-visible {
  outline: 2px solid var(--fg-water);
  outline-offset: 3px;
}

/* The theme's content column is narrower than this design wants, so the home
   page sets its own shell and gutters. */
.fg-home {
  --fg-shell: 1200px;
  --fg-gutter: clamp(20px, 4.6vw, 44px);
  --fg-block: clamp(64px, 8vw, 120px);
}

.fg-hero,
.fg-block,
.fg-band > * {
  width: min(100% - (var(--fg-gutter) * 2), var(--fg-shell));
  margin-inline: auto;
}

/* --- buttons ------------------------------------------------------------ */

.fg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s var(--fg-ease), border-color 0.2s var(--fg-ease),
    color 0.2s var(--fg-ease), transform 0.2s var(--fg-ease);
}

.fg-btn:hover {
  transform: translateY(-1px);
}

.fg-btn--fill {
  background: var(--fg-water);
  color: var(--fg-on-water);
}

.fg-btn--fill:hover,
.fg-btn--fill:focus {
  background: var(--fg-ink);
  color: var(--fg-paper);
}

.fg-btn--line {
  border-color: var(--fg-rule-2);
  color: var(--fg-ink);
}

.fg-btn--line:hover,
.fg-btn--line:focus {
  border-color: var(--fg-water);
  color: var(--fg-water);
}

/* --- hero --------------------------------------------------------------- */

.fg-hero {
  padding-block: clamp(40px, 5vw, 76px) clamp(52px, 6vw, 88px);
}

.fg-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
}

.fg-hero h1 {
  font-size: clamp(34px, 3.5vw, 45px);
  line-height: 1.02;
}

.fg-hero__lede {
  margin-top: 20px;
  max-width: 46ch;
  color: var(--fg-ink-soft);
  font-size: clamp(17px, 1.5vw, 18.6px);
}

.fg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.fg-hero__figure {
  margin: 0;
}

/* The frame clips the curtain animation; the caption sits outside the clip so
   the label stays seamed to the picture rather than to the animation. */
.fg-hero__frame {
  position: relative;
  overflow: hidden;
  background: var(--fg-soft);
  aspect-ratio: 16 / 9;
}

.fg-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fg-hero__caption {
  margin-top: 10px;
  font-family: var(--fg-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* The depth scale, as a measured instrument rather than a legend. */
.fg-scale {
  max-width: 440px;
  margin-top: 46px;
  padding-top: 14px;
  border-top: 1px solid var(--fg-rule-2);
}

.fg-scale__rail {
  display: flex;
  gap: 5px;
  height: 20px;
  margin-bottom: 10px;
}

.fg-scale__rail span { flex: 1; background: var(--fg-ink); }
.fg-scale__rail span:nth-child(2) { opacity: 0.72; }
.fg-scale__rail span:nth-child(3) { opacity: 0.48; }
.fg-scale__rail span:nth-child(4) { opacity: 0.26; }

.fg-scale__marks {
  display: flex;
  justify-content: space-between;
}

.fg-scale__marks span,
.fg-scale__caption {
  font-family: var(--fg-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fg-scale__caption { margin-top: 9px; }

/* --- sections ----------------------------------------------------------- */

.fg-block {
  padding-block: var(--fg-block);
  border-top: 1px solid var(--fg-rule);
}

.fg-head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(30px, 4vw, 50px);
}

.fg-head h2 {
  font-size: clamp(26px, 2.7vw, 35px);
  max-width: 24ch;
}

.fg-head p {
  max-width: 58ch;
  color: var(--fg-ink-soft);
}

/* --- the depth shelves -------------------------------------------------- */

.fg-shelf-scroll {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.fg-column {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 16px;
}

.fg-column-track { height: calc(264px + 15vh); }

.fg-column-scale {
  position: relative;
  height: 264px;
  border: 1px solid var(--fg-rule-2);
  overflow: hidden;
  background: var(--fg-raise);
}

.fg-column-water {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #85afc1, var(--fg-water));
  transform-origin: top center;
  transform: scaleY(0.62);
}

.fg-column-marks {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fg-column-mark {
  position: relative;
  display: grid;
  gap: 1px;
  padding-left: 15px;
  color: var(--fg-muted);
  transition: color 0.3s var(--fg-ease);
}

.fg-column-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 1px;
  background: var(--fg-rule-2);
  transition: background-color 0.3s var(--fg-ease), width 0.3s var(--fg-ease);
}

.fg-column-band {
  font-family: var(--fg-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}

.fg-column-name { font-size: 0.78rem; font-weight: 600; }

.fg-column-mark.is-current { color: var(--fg-ink); }
.fg-column-mark.is-current::before { width: 11px; background: var(--fg-water); }

.fg-shelf-rows { border-top: 1px solid var(--fg-rule); }

.fg-shelf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  border-bottom: 1px solid var(--fg-rule);
  transition: background-color 0.22s var(--fg-ease);
}

.fg-shelf[data-t="0"] { background: color-mix(in srgb, var(--fg-water) 16%, transparent); }
.fg-shelf[data-t="1"] { background: color-mix(in srgb, var(--fg-water) 9%, transparent); }
.fg-shelf[data-t="2"] { background: color-mix(in srgb, var(--fg-water) 4%, transparent); }
.fg-shelf[data-t="3"] { background: transparent; }
.fg-shelf:hover { background: color-mix(in srgb, var(--fg-water) 20%, transparent); }

.fg-shelf__head {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: baseline;
}

.fg-shelf__band {
  font-family: var(--fg-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.fg-shelf h3 { font-size: 1.2rem; line-height: 1.08; letter-spacing: -0.018em; }

.fg-shelf p {
  max-width: 68ch;
  color: var(--fg-ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

.fg-shelf__go {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  font-family: var(--fg-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-water);
}

/* --- the ink band ------------------------------------------------------- */

.fg-band {
  padding-block: var(--fg-block);
  background: var(--fg-panel);
}

.fg-band h2 { color: var(--fg-panel-ink); }
.fg-band .fg-head p { color: var(--fg-panel-soft); }

.fg-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.fg-band__figure { margin: 0; }

.fg-plate { overflow: hidden; background: #5c8ea6; aspect-ratio: 3 / 2; }

.fg-plate img { width: 100%; height: 100%; object-fit: cover; }

.fg-band__figure figcaption {
  margin-top: 14px;
  max-width: 34ch;
  color: var(--fg-panel-soft);
  font-size: 0.9rem;
}

.fg-band__picks { color: var(--fg-panel-ink); }
.fg-band__picks .fg-track { display: none; }

.fg-picks { display: grid; gap: clamp(22px, 3vw, 34px); }

.fg-pick {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 22px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--fg-panel-rule);
}

.fg-pick__num {
  font-family: var(--fg-sans);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--fg-panel-soft);
}

.fg-pick__title { font-size: 1.16rem; line-height: 1.22; letter-spacing: -0.02em; }
.fg-pick__title a { color: var(--fg-panel-ink); }
.fg-pick__title a:hover,
.fg-pick__title a:focus { color: var(--fg-panel-soft); }

.fg-pick__note { margin-top: 6px; max-width: 56ch; color: var(--fg-panel-soft); font-size: 0.95rem; }

.fg-pick__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--fg-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-panel-soft);
}

.fg-pick__sep { width: 14px; height: 1px; background: var(--fg-panel-rule); }

.fg-pick__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* A standalone link, not one inside a sentence, so it takes the site's 24px
     floor rather than the line box it happens to sit in. */
  min-height: 24px;
  margin-top: 16px;
  font-family: var(--fg-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-panel-ink);
}

.fg-pick__go:hover,
.fg-pick__go:focus { color: var(--fg-panel-soft); }

/* --- the guide index ---------------------------------------------------- */

.fg-index {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.fg-tracks { border-top: 1px solid var(--fg-rule); }

.fg-track {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding: 19px 10px;
  border-bottom: 1px solid var(--fg-rule);
  transition: color 0.2s var(--fg-ease), padding-left 0.2s var(--fg-ease);
}

.fg-track:hover,
.fg-track:focus { color: var(--fg-water); padding-left: 16px; }

.fg-track__idx {
  font-family: var(--fg-mono);
  font-size: 0.72rem;
  color: var(--fg-muted);
}

.fg-track__title { font-size: clamp(16px, 1.15vw, 18.9px); font-weight: 600; }

.fg-track__meta {
  font-family: var(--fg-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}

.fg-index__note {
  margin-top: 22px;
  font-family: var(--fg-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fg-index__figure { margin: 0; overflow: hidden; background: var(--fg-soft); aspect-ratio: 3 / 2; }
.fg-index__figure img { width: 100%; height: 100%; object-fit: cover; }

.fg-head-link { color: inherit; }
.fg-head-link:hover,
.fg-head-link:focus { color: var(--fg-water); text-decoration: underline; text-underline-offset: 6px; }

/* --- the tools, before the closing argument ----------------------------- */

/* The tools are a second reading of the guides, so they are drawn as the same
   hairline rows the rest of the page uses rather than as a second grid of
   cards. Each row names what the tool returns, because a visitor does not
   arrive wanting a "lure selector", they arrive wanting to know what to throw. */
.fg-tools { border-top: 1px solid var(--fg-rule-2); }

.fg-tool {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.55fr) auto;
  align-items: baseline;
  gap: 6px clamp(18px, 3vw, 44px);
  padding: 20px 10px;
  border-bottom: 1px solid var(--fg-rule);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s var(--fg-ease);
}

.fg-tool:hover,
.fg-tool:focus-visible { background: var(--fg-soft); }

.fg-tool__name { font-weight: 700; letter-spacing: -0.012em; }

.fg-tool__answers { color: var(--fg-ink-soft); font-size: 0.95rem; line-height: 1.55; }

.fg-tool__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  white-space: nowrap;
  font-family: var(--fg-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.fg-tool:hover .fg-tool__go,
.fg-tool:focus-visible .fg-tool__go { color: var(--fg-ink); }

.fg-tools__all { margin-top: 30px; }

/* --- closing ------------------------------------------------------------ */

.fg-closing__title { font-size: clamp(26px, 2.7vw, 35px); max-width: 24ch; }

.fg-closing__lede { margin-top: 16px; max-width: 50ch; color: var(--fg-ink-soft); }

.fg-points {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(34px, 4.5vw, 56px);
}

/* The three points step down like the depth ramp, so the closing argument does
   not read as three identical columns. The step goes when they stack. */
.fg-point:nth-child(2) { margin-top: 28px; }
.fg-point:nth-child(3) { margin-top: 56px; }

.fg-point { padding-top: 20px; border-top: 1px solid var(--fg-rule); }
.fg-point h3 { font-size: 1.02rem; line-height: 1.24; letter-spacing: -0.018em; }
.fg-point p { margin-top: 8px; max-width: 52ch; color: var(--fg-ink-soft); font-size: 0.96rem; }

.fg-closing__cta { margin-top: 28px; }

/* --- motion ------------------------------------------------------------- */

@keyframes fg-curtain-open {
  from { clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); }
}

@keyframes fg-curtain-seam {
  0% { top: 0; opacity: 0; }
  12% { opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The hero photograph opens from its top edge, once, on arrival. */
  .fg-hero__frame img {
    animation: fg-curtain-open 1.15s var(--fg-ease) 0.25s both;
  }

  .fg-hero__frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    pointer-events: none;
    animation: fg-curtain-seam 1.15s var(--fg-ease) 0.25s both;
  }

  /* The water column fills from the surface down as the shelves pass it. */
  @supports (animation-timeline: scroll()) {
    .fg-column-water {
      animation: fg-fill-column linear both;
      animation-timeline: scroll(root block);
      animation-range: var(--fg-range-start, 0px) var(--fg-range-end, 100vh);
      transform: scaleY(0.04);
    }
  }
}

@keyframes fg-fill-column {
  from { transform: scaleY(0.04); }
  to { transform: scaleY(1); }
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 880px) {
  .fg-hero__grid { grid-template-columns: 1fr; gap: 30px; }
  /* The water column needs a second column to sit in; below this it retires
     and the shelves keep their ordered tints on their own. */
  .fg-shelf-scroll { grid-template-columns: 1fr; }
  .fg-column { display: none; }
  .fg-band__grid { grid-template-columns: 1fr; }
  .fg-index { grid-template-columns: 1fr; }
  .fg-pick { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .fg-pick__num { font-size: 1.9rem; }
  /* Three columns of prose is a cramped row on a narrow screen, so the tool
     rows stack and the action keeps its own line. */
  .fg-tool { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fg-tool__go { margin-top: 6px; }
}

@media (max-width: 639px) {
  .fg-hero { padding-block: 34px 62px; }
  .fg-hero__actions { flex-direction: column; align-items: stretch; }
  .fg-hero__actions .fg-btn { width: 100%; }
  .fg-scale { margin-top: 32px; }
  .fg-shelf__head { grid-template-columns: 1fr; gap: 2px; }
  .fg-shelf { padding: 18px 16px 22px; }
  .fg-track { grid-template-columns: 22px minmax(0, 1fr); }
  .fg-track__meta { grid-column: 2; margin-top: 6px; white-space: normal; line-height: 1.7; }
  .fg-points { grid-template-columns: 1fr; }
  .fg-point:nth-child(2),
  .fg-point:nth-child(3) { margin-top: 0; }
}