/* salishsee.life — home, variant A: "the map is the page".

   Everything here sits on top of theme.css and shell.css. The shared chrome
   is reused, not edited; the overrides at the top exist because this page
   has no affiliation band, no fixed coverage line, and a header that has to
   sit over a photograph-sized map render rather than over paper.

   The first viewport IS the map. The title and the two actions are set into
   the water — bottom of the tall frame on a phone, the open Pacific on the
   left of the wide frame on a desktop — over a gradient scrim of the page's
   own ground colour so the ink keeps its contrast in both themes. Below the
   fold everything is short and rests on hairlines, not cards. */

/* ── chrome overrides ──────────────────────────────────────────────────── */

:root {
  --home-w: 1180px;               /* one measure for every section below the hero */
}

body { padding: 0; }

html {
  scroll-padding-top: calc(var(--header-h) + var(--s4));
  scroll-padding-bottom: var(--s4);
}

/* The header floats over the hero: translucent surface, blurred behind, so
   the map reads through it without stealing the nav's legibility. */
.site-header {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: color-mix(in srgb, var(--rule-strong) 40%, transparent);
}

.wrap--home { max-width: var(--home-w); }

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 1100px;
  overflow: hidden;
  background: var(--ground);
}

.hero__map { position: absolute; inset: 0; display: block; color: inherit; }
.hero__map:focus-visible { outline-offset: -4px; }
.hero__map picture, .hero__map img {
  display: block; width: 100%; height: 100%;
}
.hero__map img {
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--ground);
}

/* A scrim of the page's own ground, rising from the foot of the frame. The
   text sits in its lower two thirds; the middle of the map — Victoria and
   the lettered sea — stays clear. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to top,
    var(--ground) 0%,
    color-mix(in srgb, var(--ground) 92%, transparent) 16%,
    color-mix(in srgb, var(--ground) 74%, transparent) 30%,
    color-mix(in srgb, var(--ground) 34%, transparent) 45%,
    color-mix(in srgb, var(--ground) 0%, transparent) 58%
  );
}

/* The text block is NOT a pass-through. It used to be (pointer-events:
   none), so a tap on the title went to the map link underneath and left the
   page. Only the map above the text is the link now. */
.hero__text {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--s7) + env(safe-area-inset-bottom));
  max-width: 34rem;
}
.hero__map { position: absolute; inset: 0; display: block; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 144;
  font-size: clamp(38px, 10.6vw, 78px);
  line-height: 1.0;
  letter-spacing: -0.012em; /* -0.028 ran "atlas of" together at 41px */
  color: var(--ink);
  margin: 0 0 var(--s4);
  max-width: 8.6em;
  text-wrap: balance;
}

.hero__lede {
  font: var(--wt-regular) clamp(16px, 4.1vw, 19px)/1.45 var(--font-ui);
  color: var(--ink);
  margin: 0 0 var(--s5);
  max-width: 28em;
  text-wrap: pretty;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__actions .btn {
  pointer-events: auto;
  height: 46px; padding: 0 22px;
  font-size: 14.5px; font-weight: var(--wt-medium);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.hero__actions .btn:not(.btn--primary) {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero__credit {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(7px + env(safe-area-inset-bottom));
  margin: 0; max-width: none;
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono);
  color: var(--ink-3);
}
.hero__credit a { padding: 6px 0; } /* a 14px link 13px under the primary button was a mis-tap waiting */
/* The text block needs room above the credit so the buttons do not sit on it. */
.hero__text { bottom: calc(var(--s7) + 22px + env(safe-area-inset-bottom)); }
.hero__credit a { color: inherit; pointer-events: auto; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }

/* Desktop: the wide frame. The open Pacific fills the left third, so the
   text moves there and the scrim turns sideways. object-position keeps the
   Salish Sea itself right of centre and the water on the left clear. */
@media (min-width: 900px) {
  .hero__map img { object-position: 50% 50%; }
  .hero__scrim {
    background:
      linear-gradient(
        to right,
        color-mix(in srgb, var(--ground) 78%, transparent) 0%,
        color-mix(in srgb, var(--ground) 62%, transparent) 24%,
        color-mix(in srgb, var(--ground) 30%, transparent) 44%,
        color-mix(in srgb, var(--ground) 0%, transparent) 60%
      ),
      linear-gradient(to top, var(--ground) 0%, color-mix(in srgb, var(--ground) 0%, transparent) 14%);
  }
  .hero__text {
    left: max(var(--gutter), calc((100vw - var(--home-w)) / 2));
    right: auto; bottom: auto;
    top: 50%; transform: translateY(-50%);
    max-width: 620px;
  }
  .hero__title { font-size: clamp(56px, 5.4vw, 80px); margin-bottom: var(--s5); }
  .hero__lede { font-size: 19px; margin-bottom: var(--s6); max-width: 25em; }
  .hero__credit {
    left: auto; right: var(--gutter); text-align: right;
  }
}

/* ── the sections below the fold ───────────────────────────────────────── */

.ask, .ways, .people, .connect { padding-block: var(--s7); }
@media (min-width: 900px) {
  .ask, .ways, .people, .connect { padding-block: var(--s8); }
}
.ways, .connect { border-top: 1px solid var(--rule); }

/* A section title is Fraunces, plain, not huge, and does exactly one job. */
.ask__title, .connect__title {
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 32;
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: -0.012em;
  margin: 0 0 var(--s4);
  max-width: 22em;
  text-wrap: pretty;
}

/* ── ask ─────────────────────────────────────────────────────────────── */

/* Octo sits above the invitation, not beside it: at 400px a 46px drawing and
   a three-line display heading on one row leaves the heading 6em of measure.
   The wrapper carries no spacing of its own — .ask__title still owns the gap
   below, so the desktop grid rule can zero it in one place as before. */
.octo {
  display: block;
  margin-bottom: var(--s2);
  color: var(--ink-accent);          /* every part of the drawing keys off this */
  overflow: visible;                  /* the outer arms' round caps sit on the edge */
}
/* The mantle is the accent at low strength over whatever ground the page is
   on, so it works in both themes without a second palette. */
.octo__body {
  fill: color-mix(in srgb, currentColor 17%, transparent);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.octo__arm {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
}
/* Drawn in the ground colour rather than white: on paper it is a pale
   highlight, in dark water it is a dark one, and both are what the light
   would actually do. */
.octo__shine {
  fill: none;
  stroke: var(--ground);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .7;
}
/* Eye white is the page's own ground — light paper in light, deep water in
   dark — and the pupil is the accent, so the slit reads either way round. */
.octo__eye { fill: var(--ground); }
.octo__pupil { fill: currentColor; }

.ask__form { display: flex; gap: var(--s2); }
.ask__input {
  flex: 1; min-width: 0; height: 48px; padding: 0 var(--s4);
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: var(--wt-regular) 16px/1 var(--font-ui);   /* 16px: no iOS zoom on focus */
}
.ask__input::placeholder { color: var(--ink-3); }
.ask__go { height: 48px; padding: 0 22px; font-size: 14px; flex: none; }

.ask__examples { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.chip {
  font: var(--wt-regular) var(--fs-ui)/1.35 var(--font-ui);
  text-align: left; cursor: pointer;
  color: var(--ink-2); background: var(--surface-sunk);
  border: 1px solid transparent; border-radius: 14px;
  padding: 8px 13px;
  transition: background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.chip:hover { background: var(--surface); border-color: var(--rule-strong); color: var(--ink); }

.ask__fine {
  margin: var(--s4) 0 0; max-width: 60ch;
  font: var(--wt-regular) var(--fs-fine)/1.45 var(--font-ui); color: var(--ink-3);
}

/* the answer */
.answer { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s4); }
.answer[hidden] { display: none !important; }
.answer__by {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font: var(--wt-regular) var(--fs-fine)/1.4 var(--font-mono); color: var(--ink-3);
  margin-bottom: var(--s3);
}
.answer__by strong { color: var(--ink-2); font-weight: var(--wt-medium); }
.answer__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.answer__by[data-path="agent"] .answer__dot { background: var(--ink-confirm); }
.answer__by[data-path="fallback"] .answer__dot { background: var(--ink-pin); }
.answer__by[data-path="error"] .answer__dot { background: var(--ink-reject); }
.answer__by[data-path="thinking"] .answer__dot { background: var(--ink-accent); animation: pulse 1.1s ease-in-out infinite; }
/* On a restored answer only: the way to a fresh question without scrolling
   back up to clear the box. Styled as the byline's own text, not a button. */
.answer__again {
  margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink-accent); text-decoration: underline; text-underline-offset: 2px;
}
.answer__again:hover { color: var(--ink); }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .answer__by[data-path="thinking"] .answer__dot { animation: none; } }

.answer__body p { font-size: var(--fs-lede); line-height: 1.55; margin-bottom: var(--s3); max-width: var(--measure); }
.answer__body p:last-child { margin-bottom: 0; }
.answer__body a.rec { color: var(--ink-accent); text-decoration-thickness: 1px; }
.cite {
  display: inline-block; min-width: 17px; padding: 0 4px; margin-left: 2px;
  border-radius: var(--r-pill); vertical-align: 3px; text-align: center;
  font: var(--wt-medium) 10px/16px var(--font-mono);
  background: var(--surface-sunk); color: var(--ink-2); text-decoration: none;
}
.cite:hover { background: var(--ink-accent); color: var(--surface); }

.answer__note { margin: var(--s3) 0 0; font-size: var(--fs-ui); color: var(--ink-2); max-width: var(--measure); }
.answer__sources { margin-top: var(--s5); }
.answer__sources .eyebrow { margin-bottom: 0; }
.src {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 var(--s2);
  padding: var(--s3) 0; border-top: 1px solid var(--rule); font-size: var(--fs-ui);
}
.src:first-of-type { border-top: 0; }
.src__n { font: var(--wt-regular) var(--fs-fine)/1.5 var(--font-mono); color: var(--ink-3); }
.src__name { font-family: var(--font-display); font-weight: var(--wt-medium); font-size: var(--fs-body);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 16; }
.src__name a { color: var(--ink); }
.src__meta { font: var(--wt-regular) var(--fs-fine)/1.4 var(--font-mono); color: var(--ink-3); margin-top: 2px; }
.src__quote { color: var(--ink-2); margin: var(--s1) 0 0; font-size: var(--fs-ui); max-width: var(--measure); }
.src__open { display: inline-block; margin-top: var(--s1); font-size: var(--fs-fine); }

/* ── three ways in ───────────────────────────────────────────────────── */

.way {
  display: block; padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
}
.way:first-child { border-top: 1px solid var(--rule); }
.way__name {
  display: block;
  font-family: var(--font-display); font-weight: var(--wt-medium);
  font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 32;
  font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: -0.012em;
}
.way__name::after { content: "\00a0→"; color: var(--ink-accent); font-weight: var(--wt-regular); }
.way:hover .way__name { color: var(--ink-accent); }
.way__what { display: block; margin-top: var(--s1); color: var(--ink-2); font-size: var(--fs-body); max-width: 38em; }

/* ── people ──────────────────────────────────────────────────────────── */

.people__text {
  font-family: var(--font-display);
  font-weight: var(--wt-regular);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 20;
  font-size: clamp(17px, 0.8vw + 14px, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36em; margin: 0;
  text-wrap: pretty;
}
.people__text a { color: var(--ink); text-decoration-color: var(--ink-accent); }
.people__text a:hover { color: var(--ink-accent); }

/* Resources: the writing and the two bodies of work this one is done within,
   as things to open. Hairlines, like every other list on this page — a card
   would make four links look like a fifth section. */
.reading {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  max-width: 36em;
}
.reading li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
.reading li:last-child { border-bottom: 1px solid var(--rule); }
.reading a {
  font: var(--wt-medium) var(--fs-body)/1.4 var(--font-ui);
  color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}
.reading a:hover { color: var(--ink-accent); text-decoration-color: var(--ink-accent); }
.reading__what {
  display: block; margin-top: 2px;
  font: var(--wt-regular) var(--fs-ui)/1.45 var(--font-ui); color: var(--ink-3);
}

/* ── keep me posted ──────────────────────────────────────────────────── */

.connect__grid { display: grid; gap: var(--s5); }
.connect__what { color: var(--ink-2); margin-bottom: var(--s3); max-width: 30em; }
.connect__direct { font-size: var(--fs-ui); color: var(--ink-2); margin: 0; }

.connect__form { display: grid; gap: var(--s3); max-width: 440px; }
.field { display: grid; gap: 5px; }
.field__label { font: var(--wt-medium) var(--fs-fine)/1 var(--font-ui); color: var(--ink-2); }
.field input {
  width: 100%; height: 44px; padding: 0 var(--s3);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font: var(--wt-regular) 16px/1 var(--font-ui);
}
.field input::placeholder { color: var(--ink-3); }

/* Honeypot: off-canvas, never display:none. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.connect__row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.connect__status { font-size: var(--fs-ui); color: var(--ink-2); max-width: 40ch; }
.connect__status:empty { display: none; }
.connect__status[data-state="saved"], .connect__status[data-state="already"] { color: var(--ink-confirm); }
.connect__status[data-state="invalid"], .connect__status[data-state="failed"] { color: var(--ink-reject); }
.connect__status[data-state="sending"] { color: var(--ink-3); }

/* ── foot ────────────────────────────────────────────────────────────── */

/* ── desktop rhythm: a 5/7 split under the hero, the four ways in a row ── */
@media (min-width: 900px) {
  .ask .wrap--home, .people .wrap--home, .connect__grid {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--s9); row-gap: 0; align-items: start;
  }
  /* Spanning two rows, not one: column 1 holds a drawing and a display
     heading and column 2's first row holds a 48px input, so a single-row
     head left a band of empty page between the input and the examples. The
     span lets the field and the chips close up against each other and the
     head sit beside both. */
  .ask__head { grid-column: 1; grid-row: 1 / span 2; }
  .ask__title { margin-bottom: 0; }
  .ask__form, .ask__examples, .answer, .ask__fine, .ask__where { grid-column: 2; }
  .people .wrap--home > .people__text { grid-column: 2; }
  /* The resources follow the paragraph in the same column: they are that
     paragraph's references, not a second column of their own. */
  .people .wrap--home > .reading { grid-column: 2; }
  .connect__form { max-width: 520px; }

  .ways .wrap--home { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s5); }
  .way, .way:first-child { border-bottom: 0; border-top: 1px solid var(--rule-strong); padding: var(--s4) 0 0; }
}

/* ── the smallest phones (320–360) ────────────────────────────────────
   The shared nav does not fit beside the wordmark at 320px; this page has
   its own Ask Octo button in the hero, so the nav's Ask link gives way. */
@media (max-width: 360px) {
  .site-nav a[href="/#ask"] { display: none; }
  .site-header { padding: 0 14px; }
  .site-brand__name { font-size: 16px; }
  .site-nav a { padding: 0 5px; font-size: 11px; }
  .hero { min-height: 520px; }
  .hero__text { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .hero__title { font-size: 34px; margin-bottom: var(--s3); }
  .hero__lede { font-size: 15px; margin-bottom: var(--s4); }
  .hero__actions { gap: var(--s2); }
  .hero__actions .btn { height: 42px; padding: 0 16px; font-size: 14px; }
  .ask__form { flex-direction: column; }
  .ask__go { width: 100%; }
}


/* ── where your question goes ─────────────────────────────────────────────
   The closed line names the model that answers — that much a visitor reads
   without deciding to; what is sent, and where, is one tap under it. Both
   strings come from the gateway (site/src/ask-where.js), never from markup.
   min-height on the summary: it is the row's tap target. */
.ask__where { margin-top: var(--s3); font: var(--wt-regular) var(--fs-fine)/1.45 var(--font-ui); color: var(--ink-3); }
.ask__where summary { cursor: pointer; color: var(--ink-2); min-height: 28px; line-height: 28px; }
.ask__where p { margin: var(--s2) 0 0; max-width: 40em; }

/* Citation chips were 17×16px — a thumb cannot hit that. */
.answer a.cite, .answer .cite { display: inline-block; min-width: 28px; min-height: 28px; line-height: 28px; text-align: center; margin: 0 1px; }
.answer .sources a { display: inline-block; padding: 6px 0; }
.answer .sources__more { margin-top: var(--s2); }
.answer__searched, .sources__more { font: var(--wt-regular) var(--fs-fine)/1.45 var(--font-ui); color: var(--ink-3); margin-top: var(--s3); }
.answer__searched summary, .sources__more summary { cursor: pointer; color: var(--ink-2); }
.answer__searched p { margin: var(--s2) 0 0; max-width: 40em; }

/* "Also in the collection": records the packet left out, as links. Quiet,
   under the sources, never a banner — it is a courtesy to the reader who
   wants to check an absence, not an apology under every answer. */
.also { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--rule); font: var(--wt-regular) var(--fs-fine)/1.45 var(--font-ui); color: var(--ink-3); }
.also__head { color: var(--ink-2); }
.also__caution { margin: var(--s1) 0 0; max-width: 40em; color: var(--ink-2); }
.also__list { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s1); align-items: baseline; }
.also__rec { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.also__pages { color: var(--ink-3); }

/* One MapView composition supplies the home and full Atlas. The poster stays
   sharp while the map loads and is the fallback when scripts or WebGL fail. */
.hero__live-map{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;pointer-events:none;opacity:0;transition:none}.hero__live-map.is-ready{opacity:1}.hero__map{view-transition-name:salish-map}.hero__map picture{position:relative;z-index:0}@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){.hero__live-map{transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}