:root {
  --paper: #f2efe7;
  --white: #fcfbf7;
  --ink: #10211f;
  --muted: #58635f;
  --line: rgba(16, 33, 31, 0.14);
  --sea: #103c38;
  --deep-sea: #071d1b;
  --aqua: #65d4bf;
  --coral: #b34b3c;
  --sun: #efd88b;
  --danger: #a63d2f;
  --serif: "Iowan Old Style", Baskerville, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 28px 80px rgba(16, 33, 31, 0.14);
  --content: 1240px;
  --dock-space: calc(92px + env(safe-area-inset-bottom));
  --topbar-height: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.exhibiting, body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { color: inherit; }
button { touch-action: manipulation; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
.hidden, [hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #147d70;
  outline-offset: 3px;
}
:where(.select-panel, .atlas-panel, .exhibit, .lead, .workflow) :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--sun);
}

.primary, .ghost, .text-button, .danger-button, .dock button, .filter-chips button {
  min-height: 44px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
}
.primary, .ghost, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none;
}
.primary { background: var(--ink); color: #fff; }
.primary:hover { background: #25433f; }
.primary.large { min-height: 50px; padding-inline: 22px; }
.primary:disabled { cursor: not-allowed; opacity: 0.5; }
.ghost { border: 1px solid var(--line); background: transparent; }
.ghost:hover { background: rgba(16, 33, 31, 0.06); }
.ghost.compact { padding-inline: 14px; }
.ghost.light { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.text-button {
  display: inline-flex;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  padding: 8px 3px;
  background: transparent;
}
.text-button span { margin-left: 7px; }
.danger-text { color: var(--danger); }
.danger-button { background: var(--danger); color: #fff; }

.eyebrow {
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.view-panel { min-height: calc(100svh - 92px); padding-bottom: var(--dock-space); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 12px;
  min-height: calc(var(--topbar-height) + env(safe-area-inset-top));
  padding: calc(7px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-left)) 7px max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  background: rgba(242, 239, 231, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}
.wordmark {
  grid-column: 1;
  grid-row: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.045em;
  text-decoration: none;
}
.wordmark img { flex: 0 0 28px; width: 28px; height: 28px; }
.wordmark span { display: block; }
.privacy-pill {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}
.privacy-pill i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #439b76;
  box-shadow: 0 0 0 4px rgba(67, 155, 118, 0.13);
}
.top-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; justify-self: end; }
.top-actions .primary { white-space: nowrap; }
.storage-alert {
  position: sticky;
  top: calc(var(--topbar-height) + env(safe-area-inset-top));
  z-index: 39;
  display: none;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(166, 61, 47, 0.22);
  background: #f8e8e3;
}
.storage-alert:has(button:not(.hidden)) { display: block; }
.storage-recovery {
  width: min(100%, var(--content));
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-panel {
  display: grid;
  align-items: center;
  gap: 30px;
  padding: clamp(42px, 11vw, 72px) 18px var(--dock-space);
}
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-copy h1 {
  max-width: 760px;
  margin: 17px 0 24px;
  font: 500 clamp(54px, 17vw, 88px) / 0.88 var(--serif);
  letter-spacing: -0.07em;
}
.hero-copy > p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 4.8vw, 21px);
  line-height: 1.55;
}
.hero-actions { display: grid; gap: 8px; margin: 30px 0 38px; }
.hero-actions > * { width: 100%; }
.hero-metrics, .passport-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.hero-metrics div, .passport-metrics div {
  min-width: 0;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.hero-metrics dt, .passport-metrics dt {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
}
.hero-metrics dd, .passport-metrics dd {
  margin: 5px 0 0;
  font: 500 32px var(--serif);
}
.recent-outing {
  max-width: 600px;
  margin-top: 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(252, 251, 247, 0.66);
}
.collage { position: relative; min-height: 330px; display: grid; place-items: center; overflow: clip; }
.art-halo {
  position: absolute;
  width: min(100%, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #e7e4d8 48%, transparent 70%);
}
.collage > .hero-plate {
  position: relative;
  width: min(100%, 650px);
  height: 350px;
}
.collage > .hero-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 26px rgba(28, 48, 45, 0.1));
  animation: drift 8s ease-in-out infinite;
}
.plate-note {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 180px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  background: rgba(252, 251, 247, 0.84);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.plate-note span { color: var(--coral); font-size: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.plate-note strong { display: block; margin-top: 7px; font: 500 18px/1.08 var(--serif); }
@keyframes drift { 50% { transform: translateY(-10px) rotate(0.35deg); } }

.journal-panel, .passport-panel, .trip-panel { padding: 48px 16px var(--dock-space); background: var(--white); }
.panel-header {
  width: min(100%, var(--content));
  margin: 0 auto 32px;
  display: grid;
  gap: 20px;
}
.panel-header h2, .passport-header h2, .trip-detail-header h2, .workflow > h2, .lead h2, .faq > h2 {
  margin: 10px 0 0;
  font: 500 clamp(43px, 13vw, 76px) / 0.92 var(--serif);
  letter-spacing: -0.06em;
}
.panel-header p { max-width: 550px; margin: 0; color: var(--muted); line-height: 1.6; }
.panel-header > .primary { justify-self: start; }
.journal-layout {
  width: min(100%, var(--content));
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
.journal-panel[data-form-mode="idle"] .journal-layout { grid-template-columns: minmax(0, 1fr); }
.journal-panel[data-form-mode="idle"] .trip-ledger { width: min(100%, 880px); }
body[data-viewer="journal"]:is([data-form-mode="create"], [data-form-mode="edit"]) :is(.top-actions, .dock),
.journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) > .panel-header,
.journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) #start-new-trip,
.journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) .trip-ledger { display: none; }
.journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) .journal-layout { grid-template-columns: minmax(0, 720px); justify-content: center; }
.trip-entry {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.trip-entry :where(input, select, textarea, summary, [tabindex]), #outing-step { scroll-margin-top: calc(var(--topbar-height) + 24px); }
.trip-entry label, .lead label, .search-field, .sort-field {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.trip-entry label > b { color: var(--coral); }
.trip-entry em, .lead em { float: right; color: var(--muted); font-weight: 400; }
.lead em { color: #b9cdc8; }
.trip-entry input:not([type="radio"]), .trip-entry select, .trip-entry textarea,
.lead input:not([type="checkbox"]), .lead select, .lead textarea,
.search-field input, .sort-field select {
  width: 100%;
  min-height: 48px;
  margin-top: 7px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #aeb7b3;
  border-radius: 0;
  outline-offset: 2px;
  background: transparent;
  color: inherit;
}
.field-shell { min-width: 0; }
.field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 12px; font-weight: 700; }
.field-label b, .field-shell label > b { color: var(--coral); }
.field-help, .field-error { display: block; margin-top: 7px; font-size: 11px; font-weight: 500; line-height: 1.4; }
.field-help { color: var(--muted); }
.field-error { color: var(--danger); }
.field-error:empty { display: none; }
.trip-entry [aria-invalid="true"] { border-bottom-color: var(--danger) !important; background: linear-gradient(180deg, transparent 72%, rgba(166, 61, 47, 0.07)); }
.recent-places, .date-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.recent-places { margin-top: -10px; }
.recent-places > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.recent-places .ghost, .date-shortcuts .ghost { min-height: 38px; padding-block: 6px; font-size: 11px; }
.date-field > label { display: block; color: var(--ink); font-size: 12px; font-weight: 700; }
.date-shortcuts { margin-top: 9px; }
.date-shortcuts [aria-pressed="true"] { border-color: var(--sea); background: rgba(16, 60, 56, 0.08); }
.trip-entry textarea, .lead textarea { min-height: 104px; resize: vertical; }
.wide { grid-column: 1 / -1; }
.form-intro { padding-bottom: 3px; }
.form-intro h3 { margin: 8px 0 5px; font: 500 36px var(--serif); letter-spacing: -0.04em; }
.form-intro p { margin: 0; color: var(--muted); line-height: 1.5; }
.activity-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.activity-field legend { width: 100%; margin-bottom: 8px; font-size: 12px; font-weight: 700; }
.activity-field legend em { float: none; margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 400; }
.activity-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.activity-options label { position: relative; }
.activity-options input { position: absolute; opacity: 0; }
.activity-options span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.activity-options input:checked + span { border-color: var(--sea); background: var(--sea); color: #fff; }
.activity-options input:focus-visible + span { outline: 3px solid #147d70; outline-offset: 3px; }
.outing-more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.outing-more summary { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 700; }
.outing-more summary small { color: var(--muted); font-size: 10px; font-weight: 500; text-align: right; }
.details-grid { display: grid; gap: 20px; padding: 10px 0 22px; }
.form-error { min-height: 1.3em; margin: 0; color: var(--danger); font-size: 13px; }
.trip-form-actions { display: grid; gap: 8px; }
.form-action-note { align-self: center; color: var(--muted); font-size: 11px; line-height: 1.4; }
.trip-ledger { min-width: 0; min-height: 420px; padding: 20px; border-radius: 24px; background: var(--paper); }
.ledger-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.ledger-head h3 { margin: 5px 0 0; font: 500 26px var(--serif); }
.trip-card { position: relative; padding: 8px 0; border-bottom: 1px solid var(--line); }
.trip-select {
  width: 100%;
  min-height: 96px;
  padding: 15px 55px 15px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.trip-card.active .trip-select { background: #fff; box-shadow: 0 9px 25px rgba(16, 33, 31, 0.07); }
.trip-select > span { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.trip-select h3 { margin: 5px 0; font: 500 21px var(--serif); }
.trip-select p { margin: 0 0 7px; color: var(--muted); font-size: 12px; }
.trip-select strong { font-size: 10px; text-transform: uppercase; }
.trip-edit, .trip-more { position: absolute; top: 23px; right: 5px; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.unfiled-card { margin: 16px 0 8px; padding: 18px; border: 1px solid rgba(233, 111, 87, 0.3); border-radius: 16px; background: rgba(252, 251, 247, 0.72); }
.unfiled-card h4 { margin: 8px 0; font: 500 23px var(--serif); }
.unfiled-card p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.journal-empty { padding: 56px 10px 20px; color: var(--muted); }
.journal-empty > div { color: #ced2cc; font: 500 72px var(--serif); }
.journal-empty strong { display: block; margin-bottom: 8px; color: var(--ink); font: 500 25px var(--serif); }
.journal-empty p { line-height: 1.6; }

.select-panel { padding: 0 14px calc(132px + env(safe-area-inset-bottom)); background: var(--sea); color: #fff; }
.select-header {
  position: relative;
  top: auto;
  z-index: 25;
  margin-inline: -14px;
  padding: 12px 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(16, 60, 56, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.select-header .ghost { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.select-title { margin-top: 18px; }
.select-title h2 { margin: 7px 0 3px; font: 500 clamp(42px, 12vw, 66px)/0.94 var(--serif); letter-spacing: -0.055em; }
.select-title p { margin: 0; color: #bfd0cc; }
.species-tools { display: grid; gap: 12px; margin-top: 20px; }
.select-panel .search-field { color: #fff; }
.select-panel .search-field input { padding-inline: 13px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 14px; background: rgba(255, 255, 255, 0.07); color: #fff; }
.select-panel .search-field input::placeholder { color: #aec5c0; }
.filter-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 5px; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips button { flex: 0 0 auto; padding: 8px 15px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: transparent; color: #fff; }
.filter-chips button[aria-pressed="true"] { border-color: var(--aqua); background: var(--aqua); color: var(--ink); }
.catalog-note { margin: 20px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.select-panel > .catalog-note { color: #b8cdc8; }
.species-grid, .passport-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.species-card, .species-toggle, .species-more { scroll-margin-top: calc(var(--topbar-height) + 24px); }
.species-card {
  position: relative;
  min-width: 0;
  min-height: 252px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}
button.species-card { display: flex; width: 100%; flex-direction: column; text-align: left; cursor: pointer; }
.species-card[data-status="seen"], .species-card.seen { background: #f7f3e9; color: var(--ink); }
.species-card[data-status="maybe"], .species-card.maybe { background: #2a5751; color: #fff; }
.species-toggle {
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.species-more {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 29, 27, 0.7);
  color: #fff;
  cursor: pointer;
}
.species-card[data-status="seen"] .species-more { background: rgba(16, 33, 31, 0.82); }
.fish-photo { height: 112px; margin-bottom: 15px; overflow: hidden; border: 1px solid rgba(16, 33, 31, 0.13); border-radius: 6px; background: #f6f2e8; }
.fish-photo picture, .passport-art picture, .trip-species-art picture, .species-detail-plate picture, .exhibit-art picture,
.fish-photo img, .passport-art img, .trip-species-art img, .species-detail-plate img, .exhibit-art img { display: block; width: 100%; height: 100%; }
.fish-photo img, .passport-art img, .trip-species-art img, .species-detail-plate img, .exhibit-art img { object-fit: contain; }
.specimen-plate img { padding: 5%; filter: drop-shadow(0 7px 7px rgba(16, 33, 31, 0.14)); }
.fish-photo[data-art-state="fallback"], .passport-art[data-art-state="fallback"], .trip-species-art[data-art-state="fallback"], .species-detail-plate[data-art-state="fallback"], .exhibit-art[data-art-state="fallback"] { display: grid; place-items: center; }
.fish { position: relative; display: block; width: 74px; height: 41px; margin: 46px auto 48px; border-radius: 55%; background: linear-gradient(135deg, var(--a), var(--b)); }
.fish::after { content: ""; position: absolute; top: 7px; right: -21px; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 23px solid var(--b); }
[data-art-state="fallback"] .fish { margin: 0; }
.taxonomy-line { display: block; min-width: 0; color: var(--muted); font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: 0.11em; line-height: 1.35; text-transform: uppercase; }
.species-toggle > .taxonomy-line { min-height: 11px; margin-bottom: 7px; padding-right: 44px; color: #b8cdc8; }
.species-card[data-status="seen"] .taxonomy-line { color: #55736d; }
.species-card h3 { margin: 7px 0 3px; font: 500 clamp(18px, 5.4vw, 23px)/1 var(--serif); }
.species-card > i, .species-toggle > i { color: var(--aqua); font: italic 12px var(--serif); }
.species-card.seen > i, .species-card[data-status="seen"] i { color: #467b72; }
.species-card p { margin: 8px 0; font-size: 11px; line-height: 1.4; opacity: 0.78; }
.status-copy, .species-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.selection-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 38;
  display: grid;
  gap: 7px;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 29, 27, 0.96);
}
.selection-bar p { margin: 0; color: #b8cdc8; font-size: 11px; text-align: center; }
.selection-bar .primary { background: var(--aqua); color: var(--ink); }
body[data-viewer="select"] .dock { display: none; }
body[data-viewer="select"] .top-actions { visibility: hidden; }

.passport-panel { background: linear-gradient(180deg, #f5f1e6 0, var(--white) 300px); }
.passport-header, .passport-tools, .result-status, .passport-panel > .passport-grid, .passport-panel > .catalog-note, .maybe-collection, .passport-empty {
  width: min(100%, var(--content));
  margin-inline: auto;
}
.passport-header > p { max-width: 560px; color: var(--muted); line-height: 1.6; }
.passport-metrics { margin-top: 30px; }
.passport-tools { display: grid; gap: 14px; margin-top: 35px; }
.passport-tools .search-field input, .passport-tools .sort-field select { padding-inline: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.result-status { min-height: 22px; margin-top: 12px; margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.passport-grid { margin-top: 18px; }
.passport-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 13px 32px rgba(16, 33, 31, 0.06);
}
.passport-card button { width: 100%; min-height: 100%; padding: 12px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.passport-art, .trip-species-art { width: 100%; height: 130px; overflow: hidden; border: 1px solid rgba(16, 33, 31, 0.13); border-radius: 6px; background: #f6f2e8; }
.passport-meta { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.passport-meta .taxonomy-line { flex: 1 1 auto; }
.passport-meta .passport-stamp { flex: 0 0 auto; margin-top: 0; }
.passport-card h3 { margin: 11px 0 3px; font: 500 21px/1 var(--serif); }
.passport-card i { color: var(--muted); font: italic 12px var(--serif); }
.passport-card p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.passport-stamp { display: inline-flex; min-height: 24px; align-items: center; margin-top: 10px; color: #176f63; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.passport-empty { padding: 54px 15px; text-align: center; }
.passport-empty h3 { margin: 14px 0 7px; font: 500 30px var(--serif); }
.passport-empty p { max-width: 430px; margin: 0 auto 20px; color: var(--muted); line-height: 1.55; }
.stamp-outline { display: grid; width: 78px; height: 78px; margin: auto; place-items: center; border: 2px dashed #9fb0aa; border-radius: 50%; color: #6e847e; font: 500 22px var(--serif); transform: rotate(-7deg); }
.maybe-collection { margin-top: 55px; padding-top: 35px; border-top: 1px solid var(--line); }
.maybe-collection h3, .trip-maybe-section h3, .outing-life h3, .trip-notes h3 { margin: 8px 0; font: 500 34px var(--serif); }
.maybe-collection p, .trip-maybe-section > p { color: var(--muted); }
.maybe-grid > button, .outing-grid > button {
  min-width: 0;
  min-height: 220px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.maybe-grid > button strong, .outing-grid > button strong { display: block; margin-top: 13px; font: 500 20px/1.05 var(--serif); }
.maybe-grid .species-scientific, .outing-grid .species-scientific { display: block; margin-top: 5px; color: var(--muted); font: italic 12px var(--serif); }
.maybe-grid > button > span, .outing-grid > button > span { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }

.trip-panel { width: 100%; }
.trip-panel > * { width: min(100%, var(--content)); margin-inline: auto; }
.back-button { margin-bottom: 24px; }
.trip-detail-header { display: grid; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.trip-date, .trip-place { color: var(--muted); }
.trip-detail-header h2 { margin-top: 7px; }
.trip-detail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: end; }
.trip-detail-actions .primary, .trip-detail-actions .ghost { grid-column: span 2; }
.trip-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.trip-facts div { min-width: 110px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; }
.trip-facts dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.trip-facts dd { margin: 5px 0 0; font: 500 17px var(--serif); }
.trip-notes, .outing-life, .trip-maybe-section, .media-future { margin-top: 42px; }
.trip-notes > p { max-width: 720px; color: var(--muted); line-height: 1.7; white-space: pre-wrap; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.outing-empty { padding: 40px 0; }
.outing-empty h4 { margin: 0 0 8px; font: 500 29px var(--serif); }
.outing-empty p { color: var(--muted); }
.media-future { padding: 26px; border: 1px dashed #9baba5; border-radius: 22px; background: #f2efe7; }
.media-future h3 { margin: 10px 0; font: 500 31px var(--serif); }
.media-future p { max-width: 720px; margin-bottom: 0; color: var(--muted); line-height: 1.65; }

.recommendations, .workflow, .lead, .faq { padding: 58px 16px calc(70px + env(safe-area-inset-bottom)); }
.recommendations, .faq { background: var(--white); }
.pick-grid { display: grid; gap: 12px; width: min(100%, var(--content)); margin: auto; }
.pick-card { min-height: 270px; display: flex; flex-direction: column; padding: 25px; border: 1px solid var(--line); border-radius: 21px; }
.pick-card > span { color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.pick-card h3 { margin: 40px 0 10px; font: 500 31px var(--serif); }
.pick-card p { color: var(--muted); line-height: 1.55; }
.pick-card a { min-height: 44px; display: inline-flex; align-items: center; margin-top: auto; font-weight: 700; text-decoration: none; }
.compare-wrap { width: min(100%, var(--content)); margin: 40px auto 0; overflow-x: auto; border-radius: 14px; }
table { width: 100%; min-width: 680px; border-collapse: collapse; }
th, td { padding: 17px; border-bottom: 1px solid var(--line); text-align: left; }
th { font-size: 10px; text-transform: uppercase; }
.disclosure { width: min(100%, var(--content)); margin: 16px auto 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.workflow { background: var(--coral); color: #fff; }
.workflow > h2, .workflow ol { width: min(100%, var(--content)); margin-inline: auto; }
.workflow ol { display: grid; margin-top: 45px; padding: 0; list-style: none; }
.workflow li { min-height: 220px; padding: 25px 0; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.workflow li b { font: 500 46px var(--serif); }
.workflow h3 { margin: 40px 0 8px; font: 500 25px var(--serif); }
.lead { display: grid; gap: 34px; background: var(--sea); color: #fff; }
.lead > div, .lead > form { width: min(100%, 620px); }
.lead > div p { color: #b9cdc8; line-height: 1.6; }
.lead form { display: grid; gap: 20px; }
.lead label { color: #fff; }
.lead label > b { float: right; color: var(--sun); }
.lead input:not([type="checkbox"]), .lead select, .lead textarea { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.lead select option { color: var(--ink); }
.lead-more { border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.lead-more summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 700; }
.lead-more summary small { color: #b9cdc8; font-size: 10px; font-weight: 500; }
.lead-details { display: grid; gap: 20px; padding: 10px 0 22px; }
.lead-privacy, #form-note { min-height: 1.4em; margin: 0; color: #b9cdc8; font-size: 11px; line-height: 1.5; }
.lead-privacy a { color: #fff; text-underline-offset: 0.2em; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.lead form[aria-busy="true"] :where(input, select, textarea, summary) { opacity: 0.72; }
.consent { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.consent input { width: 22px; height: 22px; }
.faq > * { width: min(100%, var(--content)); margin-inline: auto; }
.faq details { padding: 20px 0; border-top: 1px solid var(--line); }
.faq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 500 21px var(--serif); }
.faq details p { color: var(--muted); line-height: 1.6; }
.sources { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.sources a { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; text-decoration: none; }

.dock {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  max-width: 540px;
  margin: auto;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  background: rgba(252, 251, 247, 0.9);
  box-shadow: 0 12px 40px rgba(16, 33, 31, 0.16);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.dock button { min-width: 0; min-height: 52px; display: grid; place-items: center; gap: 1px; padding: 5px 2px; border-radius: 17px; background: transparent; color: var(--muted); font-size: 10px; }
.dock button span { font-size: 14px; line-height: 1; }
.dock button.active, .dock button[aria-current="page"] { background: var(--ink); color: #fff; }
footer { display: grid; gap: 14px; justify-items: center; padding: 45px 16px calc(104px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 9px; letter-spacing: 0.13em; text-align: center; text-transform: uppercase; }
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
footer a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; color: inherit; text-underline-offset: 0.25em; }
.visit-pixel { position: absolute; left: -10000px; width: 1px; height: 1px; }
.legal-page { min-height: 100vh; background: var(--paper); color: var(--ink); }
.legal-shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 80px; }
.legal-shell .wordmark { display: inline-flex; margin-bottom: 64px; }
.legal-shell h1 { max-width: 680px; margin: 0 0 18px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(44px, 8vw, 78px); font-weight: 400; letter-spacing: -0.055em; line-height: 0.95; }
.legal-shell h2 { margin: 42px 0 12px; font-size: 19px; }
.legal-shell p, .legal-shell li { color: var(--muted); font-size: 16px; line-height: 1.75; }
.legal-shell a { color: var(--sea); text-underline-offset: 0.2em; }
.legal-shell .legal-meta { margin-bottom: 42px; font-size: 12px; }
.legal-shell address { color: var(--muted); font-style: normal; line-height: 1.75; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; }

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: end;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow-y: auto;
  background: rgba(4, 20, 18, 0.7);
}
.dialog-card {
  position: relative;
  width: min(100%, 620px);
  max-height: calc(100svh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin-inline: auto;
  padding: 30px 20px 24px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 26px 26px 16px 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.dialog-handle { position: absolute; top: 9px; left: 50%; width: 42px; height: 4px; border-radius: 99px; background: #c5ccc8; transform: translateX(-50%); }
.dialog-card h2 { margin: 9px 0 12px; font: 500 clamp(38px, 11vw, 56px)/0.95 var(--serif); letter-spacing: -0.05em; }
.dialog-close { position: sticky; top: 0; z-index: 2; float: right; background: var(--white); }
.species-dialog { width: min(100%, 980px); padding-top: 20px; }
.species-detail-art { min-height: 240px; display: grid; place-items: center; margin: 55px -10px 25px; overflow: hidden; border: 1px solid rgba(16, 33, 31, 0.14); border-radius: 8px; background: #f3eee3; }
.species-detail-plate { width: 100%; height: 100%; min-height: 240px; }
.species-detail-art img { max-height: 390px; }
.species-detail-copy > i { color: var(--muted); font: italic 17px var(--serif); }
.field-mark { padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.65; }
.field-mark-label { display: block; margin-bottom: 5px; color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.encounter-summary { display: grid; gap: 10px; margin: 22px 0 32px; }
.encounter-summary div { padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.encounter-summary dt { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.encounter-summary dd { margin: 5px 0 0; }
.species-detail-copy section h3 { margin: 28px 0 10px; font: 500 28px var(--serif); }
.history-list { display: grid; gap: 8px; }
.history-row, .history-list > button { min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: transparent; text-align: left; }
.maybe-history { padding-top: 8px; }
.maybe-history > p { color: var(--muted); font-size: 12px; }
.sheet-actions { display: grid; gap: 8px; margin-top: 22px; }
.action-sheet .sheet-actions button, .completion-card .sheet-actions button, .share-dialog .sheet-actions button { width: 100%; }
.completion-card { text-align: center; }
.completion-stamp { display: grid; width: 70px; height: 70px; margin: 0 auto 18px; place-items: center; border-radius: 50%; background: var(--aqua); font-size: 30px; }
.confirm-card p, .privacy-note { color: var(--muted); line-height: 1.6; }
.dialog-actions { display: grid; gap: 8px; margin-top: 24px; }
.share-preview { min-height: 260px; display: flex; flex-direction: column; margin-top: 20px; padding: 24px; border-radius: 20px; background: var(--sea); color: #fff; }
.share-preview > span { color: var(--aqua); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.share-preview h3 { margin: auto 0 9px; font: 500 36px/0.95 var(--serif); }
.share-preview p { color: #c2d5d1; line-height: 1.5; }
.share-preview .share-preview-species { margin-top: 0; font-size: 13px; }
.share-preview small { margin-top: auto; }
#share-status { min-height: 20px; color: var(--muted); font-size: 12px; }
.share-canvas { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); pointer-events: none; }
body[data-share-support="fallback"] #share-native { display: none; }

.exhibit {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--deep-sea);
  color: #fff;
}
.exhibit-chrome { display: grid; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.exhibit-chrome > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.exhibit-chrome button, .exhibit-prev, .exhibit-next { min-width: 44px; min-height: 44px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #fff; cursor: pointer; }
.specimen-stage { position: relative; min-height: 0; display: grid; overflow: hidden; }
.specimen-art { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.62; background: radial-gradient(circle, #1c534d, var(--deep-sea) 68%); }
.specimen-art > img, .specimen-art > picture, .specimen-art > .exhibit-art { width: 82%; height: 74%; }
.specimen-art .exhibit-art { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.specimen-art .exhibit-art img { padding: 0; }
.specimen-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.28)); }
.specimen-card { position: relative; align-self: end; max-height: 72svh; margin: 44px 16px 18px; padding: 23px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.specimen-card > span { color: var(--aqua); font-size: 9px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.specimen-card h2 { margin: 13px 0 5px; font: 500 clamp(42px, 14vw, 78px)/0.87 var(--serif); letter-spacing: -0.06em; }
.specimen-card > i { color: #b7cfca; font: italic 17px var(--serif); }
.specimen-card > p { line-height: 1.6; }
.specimen-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 21px; padding-top: 17px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.specimen-card dt { color: var(--aqua); font-size: 8px; text-transform: uppercase; }
.specimen-card dd { margin: 5px 0 0; font-size: 11px; }
.specimen-number { position: absolute; top: 16px; left: 16px; z-index: 3; font-size: 10px; }
.exhibit-prev, .exhibit-next { position: absolute; z-index: 5; top: 50%; width: 46px; height: 46px; }
.exhibit-prev { left: 5px; }
.exhibit-next { right: 5px; }
.exhibit-progress { display: flex; min-height: calc(58px + env(safe-area-inset-bottom)); justify-content: flex-start; gap: 2px; padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); overflow-x: auto; }
.exhibit-progress button { position: relative; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.exhibit-progress button::before { content: ""; position: absolute; inset: 20px 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.25); }
.exhibit-progress button.active::before { background: var(--coral); }
.exhibit-progress button:first-child { margin-left: auto; }
.exhibit-progress button:last-child { margin-right: auto; }
.story-closing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

@media (max-width: 599px) {
  body[data-viewer="journal"]:is([data-form-mode="create"], [data-form-mode="edit"]) .top-actions,
  body[data-viewer="journal"]:is([data-form-mode="create"], [data-form-mode="edit"]) .dock,
  .journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) > .panel-header,
  .journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) .trip-ledger { display: none; }
  body[data-viewer="select"] .topbar { display: none; }
  body[data-viewer="select"] .storage-alert { top: 0; }
  .journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) { padding-top: 26px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .journal-panel:is([data-form-mode="create"], [data-form-mode="edit"]) .journal-layout { display: block; }
  .trip-entry { gap: 15px; }
  .form-intro h3 { font-size: 33px; }
  .form-intro p { font-size: 13px; }
  .activity-options span { min-height: 44px; font-size: 11px; }
  .trip-form-actions .primary, .trip-form-actions .ghost { width: 100%; }
  .trip-form-actions .form-action-note { order: 2; text-align: center; }
  .trip-form-actions .ghost { order: 3; }
  .select-panel { padding-top: env(safe-area-inset-top); }
  .select-header { padding-top: 14px; }
  .select-title { margin-top: 12px; }
  .select-title h2 { font-size: 42px; }
  .species-tools { margin-top: 15px; }
  .species-card { min-height: 210px; }
  .species-toggle { display: flex; flex-direction: column; }
  .fish-photo { height: 98px; margin-bottom: 10px; }
  .species-card h3 { margin-top: 5px; font-size: 18px; }
  .species-toggle > i, .species-card p { display: none; }
  .species-toggle > i { display: block; font-size: 10px; line-height: 1.2; }
  .status-copy { margin-top: auto; padding-top: 8px; }
  .specimen-stage[data-story-slide="species"] .specimen-art { align-items: start; padding-top: 76px; opacity: 0.88; }
  .specimen-stage[data-story-slide="species"] .specimen-art > .exhibit-art { width: 92%; height: 34svh; }
  .specimen-stage[data-story-slide="species"] .specimen-card { margin-top: 40svh; }
}

@media (min-width: 600px) {
  :root { --topbar-height: 76px; }
  .topbar { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto; gap: 12px; min-height: calc(var(--topbar-height) + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) clamp(20px, 5vw, 72px) 10px; }
  .wordmark { grid-column: 1; grid-row: 1; min-height: 44px; }
  .privacy-pill { grid-column: 2; grid-row: 1; justify-self: center; }
  .top-actions { grid-column: 3; grid-row: 1; }
  .hero-actions { display: flex; align-items: center; }
  .hero-actions > * { width: auto; }
  .panel-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .trip-entry, .details-grid, .lead form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trip-form-actions { display: flex; }
  .species-grid, .passport-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fish-photo { height: 145px; }
  .passport-tools { grid-template-columns: minmax(0, 1fr) minmax(190px, 0.35fr); align-items: end; }
  .trip-detail-actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  .trip-detail-actions .primary, .trip-detail-actions .ghost { grid-column: auto; }
  .encounter-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workflow li { padding: 25px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.35); }
  .workflow li:first-child { border-left: 0; }
  .lead { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .lead-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dialog-layer { align-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .sheet-layer { align-items: end; }
  .dialog-card { border-radius: 27px; padding: 34px; }
  .dialog-actions { grid-template-columns: auto auto; justify-content: end; }
  .exhibit-chrome { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding-inline: 20px; }
}

@media (min-width: 900px) {
  .home-panel { min-height: calc(100svh - 76px); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding: clamp(60px, 7vw, 100px) clamp(28px, 5vw, 72px) var(--dock-space); }
  .hero-copy h1 { font-size: clamp(72px, 7vw, 112px); }
  .collage { min-height: 610px; }
  .collage > .hero-plate { width: min(52vw, 750px); height: 610px; }
  .plate-note { right: 2%; bottom: 8%; max-width: 220px; padding: 21px; }
  .plate-note strong { font-size: 24px; }
  .journal-panel, .passport-panel, .trip-panel { padding: 75px clamp(28px, 6vw, 90px) var(--dock-space); }
  .journal-layout { grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr); gap: 55px; }
  .trip-ledger { padding: 27px; }
  .select-panel { padding-inline: clamp(28px, 6vw, 90px); }
  .select-header { margin-inline: clamp(-90px, -6vw, -28px); padding-inline: clamp(28px, 6vw, 90px); }
  .species-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .species-card { min-height: 335px; padding: 14px; }
  .fish-photo { height: 155px; }
  .species-card h3 { font-size: 23px; }
  .selection-bar { left: 50%; right: auto; width: min(720px, calc(100% - 32px)); transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 0; border-radius: 22px 22px 0 0; }
  .passport-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .passport-art, .trip-species-art { height: 170px; }
  .trip-detail-header { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .trip-detail-actions { justify-content: end; }
  .species-dialog { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 34px; }
  .species-detail-art { position: sticky; top: 35px; min-height: 540px; margin: 45px 0 0; align-self: start; }
  .species-detail-copy { padding-top: 55px; }
  .sheet-layer { align-items: center; }
  .specimen-stage { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr); }
  .specimen-art { position: relative; opacity: 1; }
  .specimen-card { align-self: center; margin: 36px; padding: 42px; }
  .specimen-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .exhibit-prev { left: 16px; }
  .exhibit-next { right: 16px; }
}

@media (min-width: 1200px) {
  .select-header { display: grid; grid-template-columns: auto minmax(260px, 0.75fr) minmax(360px, 1fr); align-items: end; gap: 24px; }
  .select-title, .species-tools { margin-top: 0; }
}

@media (max-width: 359px) {
  .topbar { padding-inline: 12px; }
  .wordmark { font-size: 18px; }
  .top-actions .primary { padding-inline: 13px; font-size: 12px; }
  .home-panel { padding-inline: 14px; }
  .hero-copy h1 { font-size: 50px; }
  .hero-metrics dt, .passport-metrics dt { font-size: 8px; }
  .dock { right: 6px; left: 6px; }
  .dock button { font-size: 9px; }
  .species-grid, .passport-grid { gap: 7px; }
  .species-card { min-height: 238px; padding: 8px; }
  .fish-photo { height: 100px; }
  .species-card h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .collage > .hero-plate img { animation: none; }
}