/* September 2026 editorial storefront. Loaded after the legacy component sheet.
   Catalog artwork, routes and behavior are unchanged.
   2026-09-05, owner call: the layout stays, the neutrals go WARM. The first
   cut sat on pure white with green-grey rules; these tokens move the paper,
   bone, rules and muted inks onto the brand cream's hue instead. Every text
   pairing was measured before shipping; nothing here is below the old
   system's worst ratio (muted text on ground: 6.72:1 warm vs 6.43:1 cool). */
:root {
  --ed-white: #FDFBF6;
  --ed-gray: #F3EEE3;
  --ed-ink: #102722;
  --ed-muted: #5C5A4C;
  --ed-rule: #E2DBCA;
  --ed-space: clamp(3.5rem, 6.5vw, 6rem);
  --ed-title: clamp(2.25rem, 4.5vw, 4rem);
  /* section titles (h2), V20 2026-10-10: the display scale is the h1's */
  --ed-h2: clamp(2rem, 3.2vw, 2.75rem);
  --ed-small: .8125rem;
  --ff-display: var(--ff-body);
  --ff-mono: var(--ff-body);
  --ink: var(--ed-ink);
  --cream: #F5F1E7;
  --cream-lit: #FDFBF6;
  --cream-deep: #E7E0CF;
  --c-surface-0: var(--ed-white);
  --c-surface: var(--ed-white);
  --c-surface-2: var(--ed-white);
  --c-surface-3: var(--ed-gray);
  --c-text: var(--ed-ink);
  --c-text-soft: #45503F;
  --c-text-mute: var(--ed-muted);
  --c-night: var(--ed-ink);
  --c-on-night: #F5F1E7;
  --c-on-night-soft: #E7E0CF;
  --c-on-night-mute: #BDB5A1;
  --c-border: var(--ed-rule);
  --c-border-str: #A49D8A;
  --c-action: var(--ed-ink);
  --c-action-lit: #23483D;
  --c-action-deep: #081B15;
  --c-on-action: var(--ed-white);
  --c-accent: var(--ed-ink);
  --c-accent-lit: #EAE4D2;
  --c-accent-ink: var(--ed-ink);
  --c-primary: var(--ed-ink);
  --c-info: #24483D;
  --bw-line: 1px;
  --bw-rule: 1px;
  --offreg: none;
  --btn-shadow: 0px;
  --btn-shadow-hover: 0px;
  --btn-shadow-active: 0px;
  --shadow-hard: none;
  --btn-lift: 0px;
  --bar: 80px;
  --gut: clamp(1.5rem, 3.34vw, 3rem);
  --wrap-wide: 1536px;
  --wrap: 1380px;
  --rhythm: var(--ed-space);
  --pad-y: var(--ed-space);
  --ty-title: var(--ed-title);
  --ty-title-lh: 1.04;
  --ty-title-tr: -.045em;
  --ty-display-sm: clamp(2.125rem, 3.4vw, 3rem);
  --ty-card: clamp(1.25rem, 1.7vw, 1.625rem);
  --ty-card-sm: clamp(1rem, 1.3vw, 1.1875rem);
  --ty-price: 1.5rem;
  --radius-1: 0px;
  /* 2026-10-08: the two smallest rungs of the legacy ladder were 10 and 11px
     and they carried the size upcharge, captions, the related-card meta and
     the Size and Breed labels: text people read to decide (06 #6). 12 and 13
     are the floor for that. Display steps are untouched. */
  --ty-micro: .75rem;
  --ty-label: .8125rem;
}
body { background: var(--ed-white); }
/* The Archivo @font-face lives in style.css section 0 only, as "TBC Archivo"
   with font-display: optional. A second declaration here overrode the inline
   one with a different display value (05 P2-5). */
.grain, .progress, .halftone { display: none; }
h1, h2, h3 { text-shadow: none; }
:is(.section__title, .h-display, .h-title, .why-title, .why-q__ask,
    .faq__title, .story__title, .chero__title, .list__title, .why-cta h2,
    .pagehead__title) {
  font-family: var(--ff-body);
  font-weight: 800;
  text-shadow: none;
  letter-spacing: -.045em;
  /* the tracking also closes the word spaces: "For the whole crew" read as
     "Forthe" at 64px (01 P2-9). This gives the spaces back alone. */
  word-spacing: .08em;
  line-height: 1.05;
}
:is(.section__title, .why-title, .chero__title, .pagehead__title) b { color: inherit; font-weight: inherit; }
.eyebrow { letter-spacing: .05em; font-weight: 600; }
.ed-arrow { display: inline-block; width: 22px; height: 22px; flex: none; vertical-align: middle; }

/* A stable white navigation bar, including during scroll and menu expansion. */
.masthead { background: var(--ed-white); color: var(--ed-ink); border-bottom: 1px solid var(--ed-rule); }
.masthead .masthead__plate { display: none; }
.masthead .masthead__wrap, .masthead .brand--mark { animation: none; transform: none; }
.masthead__wrap { height: var(--bar); padding-block: 0; gap: 1.5rem; }
.masthead .brand__lockup { width: clamp(190px, 22vw, 295px); height: auto; max-height: 48px; }
/* the logo's alt text when the lockup cannot load: ink on the white bar, not
   style.css's cream (1.09:1, invisible). Inline, so it holds when every
   stylesheet and image is blocked (05 P1-1). */
.masthead .brand { color: var(--ed-ink); text-shadow: none; font: 700 1.125rem/1 var(--ff-body); }
.brand__lockup { color: inherit; font: inherit; }
/* the light lockup's two colours, for an inline <svg><use href="#tbc-lockup">
   whose symbol paints with var(--lockup-word) and var(--lockup-lake) */
.drawer .brand__lockup, .sitefoot .brand__lockup { --lockup-word: #F4E9D6; --lockup-lake: #5AA0C8; }
.masthead .mainnav { gap: clamp(1rem, 2.4vw, 2.5rem); }
.masthead .mainnav a { color: var(--ed-ink); font-size: .9375rem; font-weight: 500; letter-spacing: 0; }
.masthead :is(.searchbtn, .burger, .cartbtn) { width: 48px; height: 48px; color: var(--ed-ink); border: 0; }
.masthead :is(.searchbtn, .burger, .cartbtn):hover { background: var(--ed-gray); }
.masthead :focus-visible { outline-color: var(--c-focus-ink); }
.masthead .mega { animation: none; transform: none; border-top: 1px solid var(--ed-rule); }
.mega, .drawer { --c-accent: #EAE4D2; --c-accent-lit: #EAE4D2; }
.sfind, .sfind__panel, .drawer, .mega { background-image: none; }
.mega__row { letter-spacing: 0; }
.megafeat__thumb { border-width: 1px; }

/* Shared controls keep existing focus, busy, error and disabled semantics. */
.btn, .buy, .signup__btn, .notifybox__go, .stickybar__go {
  font-family: var(--ff-body); font-size: .9375rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; border-radius: 0; box-shadow: none;
  min-height: 48px;
}
.btn { gap: 1.25rem; padding: .875rem 1.5rem; transform: none; }
.btn::after { display: none; }
.btn--primary { background: var(--ed-ink); color: var(--ed-white); border-color: var(--ed-ink); }
.btn--primary:hover, .btn--primary:focus-visible { background: #254B3F; color: var(--ed-white); box-shadow: none; transform: none; }
/* the drawer's ground IS --ed-ink, so the ink button had no edge at all */
.drawer .btn--primary { background: var(--ed-white); color: var(--ed-ink); border-color: var(--ed-white); }
.drawer .btn--primary:hover, .drawer .btn--primary:focus-visible { background: #EAE4D2; color: var(--ed-ink); border-color: #EAE4D2; }
.buy, .buy--big { background: var(--ed-ink); color: var(--ed-white); box-shadow: none; border: 1px solid var(--ed-ink); }
.buy:hover, .buy:focus-visible, .buy--big:active { background: #254B3F; color: var(--ed-white); box-shadow: none; transform: none; }
.notify { background: var(--ed-white); color: var(--ed-ink); border: 1px solid var(--c-border-str); box-shadow: none; }
.stickybar__go { background: var(--ed-white); color: var(--ed-ink); }
.stickybar__go:hover { background: #DEE5E1; color: var(--ed-ink); }
.btn--ghost { box-shadow: none; }
.text-link { font-family: var(--ff-body); font-size: .9375rem; letter-spacing: 0; text-transform: none; }
.ed-link { display: inline-flex; align-items: center; gap: 1.5rem; width: fit-content; min-height: 44px; color: var(--ed-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ed-link:hover { color: var(--c-water-deep); }
.ed-link .ed-arrow, .ed-category h3 .ed-arrow, .ed-guides__list .ed-arrow { transition: transform .24s ease; }
.ed-link:hover .ed-arrow, .ed-category h3 a:hover .ed-arrow, .ed-guides__list a:hover .ed-arrow { transform: translateX(4px); }

/* The opening's photograph is a separate full-bleed plane with no scrim. */
.ed-opening { background: var(--ed-white); }
.ed-opening__copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(245px, .31fr); align-items: center; gap: 3rem; padding-block: clamp(2.5rem, 3.75vw, 3.75rem); }
.ed-opening h1 { font: 800 clamp(3.5rem, 6vw, 5.75rem)/.94 var(--ff-body); letter-spacing: -.04em; word-spacing: .025em; margin: 0; color: var(--ed-ink); white-space: nowrap; }
.ed-opening__aside { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.ed-opening__aside p { font-size: clamp(1rem, 1.42vw, 1.25rem); line-height: 1.45; max-width: 27ch; margin-bottom: .5rem; }
.ed-opening__aside .btn { width: 100%; padding-inline: 1.125rem; gap: .75rem; }
.ed-opening__photo { height: 38svh; min-height: 220px; max-height: 420px; overflow: hidden; margin: 0; background: #A39E8C; background-size: cover; background-position: 50% 52%; }
.ed-opening__photo picture, .ed-opening__photo img { display: block; height: 100%; width: 100%; }
.ed-opening__photo img { object-fit: cover; object-position: 50% 52%; filter: none; }
/* When the photo cannot load, the figure's inline preview IS the picture:
   the alt text stays in the accessibility tree and nothing paints over the
   preview. Without site.js: transparent alt text, and the ::after (drawn
   only on a broken image) repaints the preview over the broken-image glyph.
   With site.js: .is-missing hides the image box outright. */
.ed-opening__photo picture { background: inherit; }
.ed-opening__photo img { position: relative; color: transparent; background: inherit; }
.ed-opening__photo img::after { content: ""; position: absolute; inset: 0; background: inherit; }
.ed-opening__photo img.is-missing { opacity: 0; }

/* The same product family appears here and on every collection. */
.ed-drop { border-top: 1px solid var(--ed-rule); padding-block: 2.5rem var(--ed-space); }
.ed-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.ed-home h2 { font: 800 var(--ed-title)/1.06 var(--ff-body); letter-spacing: -.045em; word-spacing: .08em; }
.ed-heading p { color: var(--ed-muted); font-size: 1rem; }
.ed-heading h2 + p { margin-top: 1rem; }
.ed-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.125rem; }
.pcard { border: 0; box-shadow: none; background: transparent; }
.pcard:hover, .pcard:focus-within { box-shadow: none; transform: none; }
.pcard__stage { border: 0; background: var(--ed-gray); }
.pcard > .pcard__flip {
  position: relative; inset: auto; flex: none; width: 100%; min-height: 44px;
  margin: 0; padding: .625rem .5rem; border: 0; border-bottom: 1px solid var(--ed-rule);
  background: var(--ed-white); color: var(--ed-ink); font-family: var(--ff-body);
  font-size: .8125rem; font-weight: 500; line-height: 1.35; letter-spacing: 0;
  white-space: normal; overflow-wrap: anywhere; transform: none;
}
.pcard > .pcard__flip:active { background: var(--ed-gray); transform: none; }
.pcard > .pcard__flip:focus-visible { outline-offset: -3px; }
.pcard__body { padding: 1rem 0 .5rem; gap: .375rem; flex: 1 1 auto; }
.pcard__name { font-weight: 600; letter-spacing: -.015em; text-wrap: pretty; }
.pcard__meta { padding-top: .25rem; gap: .75rem; }
.pcard__price { font: 500 1rem/1.5 var(--ff-body); letter-spacing: 0; }
.pcard__type { font-size: var(--ed-small); font-weight: 400; letter-spacing: 0; }
.pcard__foot { padding: .25rem 0 1rem; }
.pcard .state { font-size: .75rem; letter-spacing: 0; }
.ed-section-link { margin-top: 1.75rem; }
.ed-line { padding-block: var(--ed-space); border-top: 1px solid var(--ed-rule); }
.ed-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.ed-category { min-width: 0; }
.ed-category__image { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ed-gray); }
.ed-category__image picture, .ed-category__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ed-category h3 { margin-block: 1.25rem .75rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.ed-category h3 a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; text-decoration: none; color: inherit; }
.ed-category__links { list-style: none; margin: 0; padding: 0; }
.ed-category__links a { display: flex; align-items: center; min-height: 52px; gap: .5rem; padding-block: .5rem; border-bottom: 1px solid var(--ed-rule); text-decoration: none; color: inherit; font-size: .9375rem; }
.ed-category__links a:hover { color: var(--c-water-deep); }
.ed-category__links .state { margin-left: auto; font-size: .75rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; color: var(--ed-muted); }
.ed-category__links .state i { display: none; }
.ed-category__links .ed-arrow { width: 18px; }

/* ONE OCEAN BAND, 2026-10-10 (V07): the story and the Dogs of Tahoe wall in
   one band, the one photograph with its name under it (not a chip on it,
   V19), the two doors beside it. The full-bleed interlude and the second
   Ocean band are gone. */
.ed-story { background: var(--ed-gray); padding-block: var(--ed-space); }
.ed-story__grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.ed-story__copy { max-width: 36rem; }
.ed-story__copy h2 { text-wrap: balance; }
.ed-story__copy .ed-link { margin-top: 1.25rem; }
.ed-story__wall { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--c-border-str); }
.ed-story__wall h3 { margin: 0; font: 700 1.25rem/1.3 var(--ff-body); letter-spacing: -.02em; color: var(--ed-ink); }
.ed-story__wall p { margin-top: .5rem; max-width: 40ch; font-size: 1rem; line-height: 1.6; }
.ed-story__wall .ed-link { margin-top: .75rem; }
.ed-story__photo { margin: 0; }
.ed-story__photo > a { display: block; }
.ed-story__photo picture, .ed-story__photo img { display: block; width: 100%; }
.ed-story__photo img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ed-story__photo figcaption { margin-top: .625rem; font-size: var(--ed-small); color: var(--ed-muted); }
/* THE GUIDES AS A LIST (V07): each link with one fact its guide prints. */
.ed-guides { padding-block: var(--ed-space); }
.ed-guides__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.ed-guides__grid > div > p { margin-top: 1rem; max-width: 36ch; }
.ed-guides__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ed-rule); }
.ed-guides__list li { padding-block: 1rem 1.125rem; border-bottom: 1px solid var(--ed-rule); }
.ed-guides__list a { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; color: var(--ed-ink); font-weight: 600; font-size: 1.125rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.ed-guides__list a:hover { color: var(--c-water-deep); }
.ed-guides__list p { margin-top: .25rem; max-width: 56ch; color: var(--ed-muted); font-size: 1rem; line-height: 1.55; }
/* 2026-10-15: one of Thomas's East Shore frames under the block's one line
   (build-site.py home_guides_photo). The guide figure is centred in its read;
   here it hangs from the heading's left edge and stops at a 34rem measure. */
.ed-guides .ed-guides__photo { margin: 1.75rem 0 0; max-width: 34rem; }

/* FAQ and signup are functional shared components, not separate facsimiles. */
.faq { border-top: 1px solid var(--ed-rule); background: var(--ed-white); }
.faq__inner { max-width: var(--wrap-wide); grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 7rem); }
.faq__title { font-size: var(--ed-title); max-width: 100%; }
.faq__aside { font-size: 1rem; max-width: 32ch; margin-top: 1.5rem; }
.faq__aside a { overflow-wrap: anywhere; }
.faq__item { border-bottom: 1px solid var(--ed-rule); }
.faq__item summary { font-size: 1.125rem; font-weight: 600; padding-block: 1.5rem; }
.faq__item p { font-size: 1rem; line-height: 1.65; padding-bottom: 1.5rem; }
.faq__item summary::after { color: var(--ed-ink); }
.list { background: var(--ed-gray); color: var(--ed-ink); border-top: 1px solid var(--ed-rule); border-bottom: 0; padding-block: 4rem; }
.list__inner { display: grid; max-width: 1440px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 4rem; text-align: left; }
.list__title { font-size: clamp(2rem, 3.2vw, 3rem); grid-column: 1; }
.list__sub { grid-column: 1; margin: 1rem 0 0; max-width: 40ch; font-size: 1rem; }
.list .signup { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; align-self: center; max-width: none; }
.signup__row { display: flex; gap: .75rem; }
.signup__input { background: var(--ed-white); color: var(--ed-ink); border: 1px solid var(--c-border-str); font: 400 1rem/1.5 var(--ff-body); min-width: 0; min-height: 54px; box-shadow: none; }
.signup__input::placeholder { color: var(--ed-muted); }
.signup__btn { background: var(--ed-ink); color: var(--ed-white); border: 1px solid var(--ed-ink); min-height: 54px; padding: .875rem 1.25rem; transform: none; }
.signup__btn:hover, .signup__btn:focus-visible { background: #254B3F; color: white; box-shadow: none; transform: none; --lx: 0px; --ly: 0px; }
.signup__btn:active { box-shadow: none; transform: none; --lx: 0px; --ly: 0px; }
.signup__msg { color: var(--ed-ink); text-align: left; }
.stamp { transform: none; box-shadow: none; }
.sitefoot { background: var(--ed-ink); background-image: none; border-top: 0; }
.sitefoot .brand { font-family: var(--ff-body); font-weight: 700; }
.sitefoot .brand__word { font-family: inherit; }
.sitefoot .brand__lockup { width: 265px; max-width: 100%; height: auto; }
.sitefoot__label { font-size: .9375rem; letter-spacing: .025em; font-weight: 600; }
.sitefoot__links a, .sitefoot__mail { font-size: .9375rem; letter-spacing: 0; font-weight: 400; }
.sitefoot__base { font-size: var(--ed-small); letter-spacing: 0; }

/* Inner pages share the type, light surfaces, and product treatment. */
.chero { margin-top: 0; padding-top: 0; background: var(--ed-gray); color: var(--ed-ink); min-height: 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--ed-rule); }
.chero > .ph { position: relative; inset: auto; grid-column: 2; grid-row: 1; height: clamp(360px, 32vw, 480px); min-height: 0; z-index: 0; background: var(--ed-gray); }
.chero > .ph > picture, .chero > .ph > picture > img, .chero > .ph > img { width: 100%; height: 100%; object-fit: cover; filter: none; mix-blend-mode: normal; }
.chero > .ph::before, .chero > .ph::after, .chero > .ph__scrim { display: none; }
.chero .chero__inner { grid-column: 1; grid-row: 1; padding-block: 2.5rem; align-self: center; }
.chero__title { font-size: clamp(2.5rem, 5vw, 4.5rem); max-width: 16ch; color: var(--ed-ink); }
.chero__kicker { display: none; }
.chero .chero__line { font-size: 1.0625rem; max-width: 42ch; color: var(--ed-ink); margin-top: 1.25rem; }
.chero--field { display: block; }
.chero__field { display: none; }
.chero__price { color: var(--ed-ink); }
.chero .crumbs, .chero .crumbs a { color: var(--ed-muted); }
.chero .state, .chero .chero__state .state { color: var(--ed-ink); }
.chero :focus-visible { outline-color: var(--c-focus-ink); }
.chero .btn--ghost { color: var(--ed-ink); border-color: var(--ed-ink); }
.chero .pill, .chero .pill--hub { color: var(--ed-ink); border-color: var(--c-border-str); background: transparent; }
.chero .pills .state, .chero .state--mini { color: var(--ed-muted); }
.chero .pill:hover, .chero .pill:focus-visible { color: var(--ed-ink); border-color: var(--ed-ink); background: var(--ed-white); }
.crumbbar { background: var(--ed-white); border-bottom: 1px solid var(--ed-rule); }
.crumbbar .crumbs, .crumbbar .crumbs a { color: var(--ed-muted); font-size: .8125rem; letter-spacing: 0; }
.pagebody, .collection, .hubdrop, .dropband, .pdp, .why-main { background: var(--ed-white); }
.collection, .dropband { border-top: 1px solid var(--ed-rule); }
.pcard--feature { display: flex; flex-direction: column; }
.dropfeat { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; }
.dropfeat__support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.pcard--feature .pcard__body { padding: 1rem 0; }
.pcard--feature .pcard__foot { padding: 0; }
.waterline { display: none; }
.pcard--feature .pcard__stage { border: 0; }
.pcard--feature .pcard__name { font-size: var(--ty-card-sm); }
.grid--designs { gap: 2.5rem 1.5rem; }
/* 2026-10-07, shop by item type. The hubs head each live shelf's grid with
   its own name, its count and its price, reached from the jump pills in the
   hero; the homepage opens on the same shelf tiles the hubs' "Every product
   type" grid draws, set denser so a phone shows two across. */
.typegroup + .typegroup { margin-top: clamp(2.75rem, 5vw, 4.5rem); }
.typegroup__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ed-rule); }
.typegroup__title { margin: 0; font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--ff-body); letter-spacing: -.03em; color: var(--ed-ink); }
.typegroup__meta { font-size: var(--ed-small); color: var(--ed-muted); }
.ed-types { list-style: none; margin: 0; padding: 0; gap: 1.75rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-types .cattile { gap: .25rem; padding-bottom: 0; }
.ed-types .cattile__art { margin-bottom: .75rem; }
.ed-types .cattile__name { font-size: 1.125rem; }
.ed-types .cattile__go { padding-top: .375rem; }
@media (min-width: 768px) { .ed-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.25rem; } }
@media (min-width: 1180px) { .ed-types { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cattile { padding: 0 0 1rem; border: 0; }
.cattile__art { margin: 0 0 1rem; border: 0; }
.cattile__name { font-weight: 600; }
.cattile__top, .cattile__go { font-size: var(--ed-small); }
.pdp { padding-top: 2rem; }
.pdp__title { font-weight: 800; letter-spacing: -.04em; font-size: clamp(2.125rem, 3.5vw, 3rem); }
.pdp__price { color: var(--ed-ink); font-weight: 500; letter-spacing: 0; }
.pdp__kicker, .pdp__when, .pdp__note { font-weight: 400; letter-spacing: 0; font-size: .875rem; }
.pdp__read { margin-top: 2rem; }
.pdp__ask { max-width: none; }
.pdp__stage, .pdpgal__nav, .size { border-width: 1px; box-shadow: none; }
.pdp__disc, .pdp__trust, .specs { border-width: 1px; }
.size { background: var(--ed-white); border-color: var(--c-border-str); font-weight: 500; }
.size[aria-pressed="true"], .size.is-selected { background: var(--ed-ink); color: var(--ed-white); }
/* the coat selector (2026-10-08) wears the size chips' editorial frame */
.coat { border-width: 1px; background: var(--ed-white); border-color: var(--c-border-str); font-weight: 500; }
.coat[aria-current="page"] { background: var(--ed-ink); color: var(--ed-white); border-color: var(--ed-ink); }
.coat[aria-current="page"] .swatch { border-color: var(--ed-white); }
.why-hero__grid { align-items: center; }
.why-plate { padding: 0; transform: none; border: 0; box-shadow: none; }
.why-method__photo { transform: none; border: 0; box-shadow: none; }
.why-cta { background: var(--ed-gray); }
.shoreline-rule, .handmark { display: none; }
.why-q__ask { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.prose h2, .legal h2 { font-weight: 700; text-shadow: none; }
/* 2026-10-08 (09 P1-3, P1-4): the last three components still drawing the
   V4 3px ink and water rules and the 400-weight display face. */
.pagehead { border-bottom: 1px solid var(--ed-rule); }
.alsosee { border-top: 1px solid var(--ed-rule); }
.usegroup__head { border-bottom: 1px solid var(--ed-rule); }
.usegroup__title { margin: 0; font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--ff-body); letter-spacing: -.03em; color: var(--ed-ink); text-shadow: none; }
.usegroup__note { font-family: var(--ff-body); font-size: var(--ed-small); letter-spacing: 0; color: var(--ed-muted); }
/* Every product type, For Dogs: the use groups share one four-column track
   and sit side by side, so a one-tile group is part of a row instead of a
   tile alone under its own full-width rule (09 P1-3). --n is the group's tile
   count from the generator. */
@media (min-width: 900px) {
  .wrap:has(> .usegroup) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.25rem; align-items: start; }
  .wrap:has(> .usegroup) > * { grid-column: 1 / -1; }
  .wrap:has(> .usegroup) > .usegroup { grid-column: span var(--n, 4); max-width: none; }
  .usegroup .grid--cats { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.25rem; }
}
/* the product page's tables and dialog, flattened like the rest */
.sizedlg { border: 1px solid var(--ed-rule); box-shadow: 0 24px 60px -30px rgba(16, 39, 34, .45); }

@media (min-width: 900px) {
  .pdp__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); }
  .pdp__media { max-width: none; }
}
@media (max-width: 1100px) {
  .ed-opening__copy { gap: 2rem; grid-template-columns: minmax(0, 1fr) 250px; }
  .ed-categories { gap: 1.25rem; }
  .ed-category__links .state { font-size: .75rem; }
}
@media (max-width: 767px) {
  :root { --bar: 68px; --ed-title: clamp(2.125rem, 6vw, 3rem); }
  .masthead .brand__lockup { width: 205px; max-height: 40px; }
  .masthead__wrap { gap: .5rem; }
  .masthead__side { gap: 0; }
  .ed-opening__copy { display: block; padding-block: 2.75rem 2rem; }
  .ed-opening h1 { font-size: clamp(3rem, 12.5vw, 3.5rem); white-space: normal; max-width: 10ch; }
  .ed-opening__aside { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1.25rem; }
  .ed-opening__aside p { grid-column: 1 / -1; max-width: 38ch; font-size: 1rem; }
  .ed-opening__aside .btn { width: auto; font-size: .875rem; }
  .ed-opening__aside .btn .ed-arrow { display: none; }
  .ed-opening__aside .ed-link { font-size: .875rem; }
  .ed-opening__photo { background-position: 62% 52%; }
  .ed-opening__photo img { object-position: 62% 52%; }
  .ed-heading { display: block; margin-bottom: 1.5rem; }
  .ed-heading > p { margin-top: 1rem; }
  .ed-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .ed-products .pcard__name { font-size: 1rem; }
  /* Every product grid is two up on a phone, the way the homepage's already
     was: picture, name, colour, price. The card's sentence is the product
     page's own first line, and in a 155px column it ran eight lines deep. */
  .grid--designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .grid--designs .pcard__name { font-size: 1rem; }
  .grid--designs .pcard__line { display: none; }
  .pcard__meta { gap: .5rem; }
  .pcard .state { font-size: .75rem; }
  .ed-categories { grid-template-columns: 1fr; gap: 3rem; }
  /* auto 1fr: the photo spans both rows, and with two auto rows its height
     was shared between them, so a one-shelf group (For Dogs, Camp) opened a
     100px gap between its heading and its only row */
  .ed-category { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 1.25rem; align-items: start; }
  .ed-category__image { grid-column: 1; grid-row: 1 / 3; position: sticky; top: calc(var(--bar) + 1rem); }
  .ed-category h3 { grid-column: 2; margin-top: 0; font-size: 1.125rem; }
  .ed-category h3 .ed-arrow, .ed-category__links .ed-arrow { display: none; }
  .ed-category__links { grid-column: 2; }
  .ed-category__links a { font-size: .8125rem; flex-wrap: wrap; padding-block: .65rem; }
  .ed-category__links .state { font-size: .75rem; }
  .ed-story__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 1.5rem; }
  .ed-guides__grid { grid-template-columns: 1fr; }
  .faq__inner { grid-template-columns: 1fr; gap: 2rem; }
  .list__inner { grid-template-columns: 1fr; gap: 0; }
  .list .signup { grid-column: 1; grid-row: auto; margin-top: 1.5rem; }
  .chero { grid-template-columns: 1fr; }
  .chero > .ph { grid-column: 1; grid-row: 2; min-height: 0; height: 230px; }
  .chero .chero__inner { grid-column: 1; grid-row: 1; padding-block: 2rem; }
  .chero__title { font-size: clamp(2.5rem, 8vw, 4rem); }
  .chero .chero__line { max-width: 48ch; }
  /* a product on the first screen of every shelf (02 P1-3): the sibling
     shelves become one row that scrolls sideways, edge to edge, and the
     decorative illustration steps aside. Hub photographs stay. */
  .chero__nav .pills { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) .25rem; }
  .chero__nav .pills::-webkit-scrollbar { display: none; }
  .chero__nav .pills > li { flex: none; }
  .chero .chero__inner { min-width: 0; }   /* or the row's width widens the 1fr track */
  .chero > .ph--art { display: none; }
  .dropfeat { grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .cattile__top { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .masthead .brand__lockup { width: min(190px, 48vw); }
  /* ONE COLUMN, ONE EDGE (2026-10-14). Ocean's photograph was capped at
     280px, so on a 390 phone it sat on the left at 280 of a 342px column
     with a dead strip on its right, under a rule and text that run the full
     column. Owner: "centering stuff looks weird on mobile". It now spans the
     column like everything under it (its `sizes` already asked for
     100vw - 48px). */
  .ed-story__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ed-category { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); gap: 0 1rem; }
  .ed-category__links .state { margin-left: 0; width: 100%; }
  .signup__row { flex-direction: column; }
  .signup__btn { width: 100%; }
}
/* A readable first paint. All motion enhances already-stable geometry. */
.ed-opening__copy, .rise { animation: none; }
.js.motion .tilt { opacity: 1; animation: none; }
.ed-story__photo img { background-color: var(--ed-white); }
.masthead { view-transition-name: site-header; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { animation-duration: 140ms; mix-blend-mode: normal; }
::view-transition-new(root) { animation-duration: 220ms; mix-blend-mode: normal; }
.pcard__stage, .ed-category__image { overflow: hidden; }
.pdpgal__nav button { min-width: 44px; min-height: 44px; }
.faq__item summary { transition: color 180ms ease; }
.faq__item summary:hover { color: #375E52; }
@media (prefers-reduced-motion: no-preference) {
  [data-media-pending] { opacity: 0; }
  .btn, .buy, .signup__btn, .size, .coat, .pdpgal__nav button { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease; }
  .btn .ed-arrow { transition: transform 280ms cubic-bezier(.22, 1, .36, 1); }
  .btn:is(:hover, :focus-visible) .ed-arrow { transform: translateX(4px); }
  .ed-category__image img { transition: transform 700ms cubic-bezier(.22, 1, .36, 1); }
  .swap__lead, .swap__alt { transition: opacity 480ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1); }
  .ed-category__image:focus-visible img { transform: scale(1.018); }
  @media (hover: hover) {
    .ed-category__image:hover img, .pcard:hover .swap__lead { transform: scale(1.018); }
  }
  .faq__item[open] > p { animation: answer-settle 260ms ease-out; }
  @keyframes answer-settle { from { transform: translateY(-3px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  [data-media-pending] { opacity: 1; }
  .ed-opening__copy, .ed-arrow, .ed-category__image img, .swap__lead, .swap__alt, .btn, .buy, .signup__btn, .size, .coat, .faq__item summary { animation: none; transition: none; transform: none; }
  .ed-link:hover .ed-arrow, .ed-category h3 a:hover .ed-arrow, .ed-guides__list a:hover .ed-arrow { transform: none; }
  ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* ---- Legacy press offsets, retired 2026-09-05 --------------------------
   The old system pressed cards, tables and badges off the page with hard
   6px ink offsets. The editorial surface does depth with rules and tone,
   and most components were flattened when this sheet landed; these are the
   survivors the sweep found still wearing the offset. The press-translate
   goes with it: a 2px shift with no shadow reads as a glitch, not a press. */
.tablewrap, .promise { box-shadow: none; border: 1px solid var(--c-border-str); }
.alsocard { box-shadow: none; border: 1px solid var(--c-border); transition: border-color 220ms ease, background-color 220ms ease; }
.alsocard:hover, .alsocard:focus-visible { transform: none; box-shadow: none; border-color: var(--c-border-str); background: var(--c-surface-3); }
.dogcard__shot, .dogcard__shot:hover, .dogcard__shot:active { box-shadow: none; transform: none; }
.stamp, .field-note, .specswrap, .setband, .t4__placard,
.legal__callout { box-shadow: none; }
.legal__callout { border: 1px solid var(--c-border-str); }
.btn--ink, .btn--ink:hover, .btn--ink:focus-visible,
.btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: none; }

/* ---- Broken images ------------------------------------------------------
   Alt text is the fallback, so it is set like a caption, with or without
   site.js (05 P2-6). With site.js, .is-missing (style.css 30.5) plates the
   box, and the ::after below sets the alt text in the plate over the
   browser's broken-image glyph. Chromium and Firefox draw pseudo-elements on
   a broken image only, never on a loaded one; Safari ignores them.
   :where() keeps position at zero specificity, so an image that a component
   positions absolutely stays absolute. */
img { font: 400 .8125rem/1.45 var(--ff-body); color: var(--ed-muted); }
:where(img.is-missing) { position: relative; }
img.is-missing::after {
  content: attr(alt); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3); text-align: center;
  background: inherit; box-shadow: inherit; color: inherit; font: inherit;
}

/* ---- Concept product pages ---------------------------------------------
   A brief page has no price or size block, but the shared grid sized its
   rows against the tall artwork column and stranded the Notify button
   97px below the status line. Rows now take their content height and the
   slack falls to the foot of the column instead of the middle of it. */
@media (min-width: 900px) {
  .pdp__grid--brief { grid-template-rows: auto auto 1fr; }
}

/* ---- Reference pages ----------------------------------------------------
   The size guide and shipping pages ran a 46ch column down the left rail
   of a 1380px page. Centred to the read measure, like the policies. */
.pagehead .wrap, .pagebody .wrap { max-width: calc(var(--wrap-read) + 2 * var(--gut)); }

/* ---- Changelog ----------------------------------------------------------
   The reference-page h2 draws its hairline ABOVE itself, which put the rule
   between an entry's date and its own title, gluing the date to the entry
   before it. In the log the rule belongs to the entry, above the date. */
.logentry { border-top: 1px solid var(--c-border); margin-top: var(--sp-7); padding-top: var(--sp-6); }
.pagebody .logentry:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.logentry h2 { border-top: 0; margin-top: .5rem; padding-top: 0; }
.logentry__date { font-size: var(--ed-small); color: var(--c-text-mute); font-variant-numeric: tabular-nums; }

/* ---- 2026-10-09 overnight pass (ops/site-review-2026-10-09) ------------- */
/* NO LONE LAST CARD (02 P2-1). Five beanies or five blankets left one card
   under a full row of four; five go five across instead, about 250px each at
   1440.
   A LAST CARD STAYS ON THE GRID (2026-10-14, ops/batch-2026-10-14/
   mobile-centering). Below 1180 a lone last card used to be centred: in the
   middle column of three from 768 to 1179, and across both columns on a
   phone. Owner: "centering stuff looks weird on mobile". The centred card's
   name and price started at a third left edge (114px at 390) under a
   heading and a row that start at 24, and the one-card shelves (Stickers,
   Patches) sat on the left anyway, so one page had both. The middle-column
   rule also caught every four-across row (home picks, For the dog, Why,
   related products): from 768 to 1179 the fourth card is 3n + 1, so it was
   pushed out of its row to the next row's second column, leaving a dead
   fourth column beside the first three. A last card now sits in the next
   column of the grid, the way the one-card shelves always did. */
@media (min-width: 1180px) {
  .grid--designs:has(> .pcard:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* THE PRODUCT PHOTO AND ITS THUMBNAIL RAIL FIT A 1440 x 900 SCREEN (06
   design item 1; V12 and V02, 2026-10-10). The 4:5 stage filled a 700px
   column, 875px tall, so the bottom of every photo sat under the fold on the
   commonest laptop. The column is capped so the stage plus the rail (12 px
   gap, 80 px thumbs) fits the first screen under the masthead and the crumbs
   (bottom at y=892 at 1440 x 900), and stays 4:5: no letterbox, nothing
   cropped. This cap is also what lets style.css stick the column from 640
   px tall: pinned under the masthead, stage and rail end 72 px above the
   bottom of a 900 px screen. The floor keeps a short window from shrinking
   it to a stamp. */
@media (min-width: 900px) {
  .pdp__media { max-width: max(24rem, min(100%, calc((100svh - var(--bar) - 11.25rem) * .8))); }
}
/* "Related products" sat at section-title scale, 75px at 1440, under a 48px
   product name: the loudest words on the page (06 design item 6). */
.alsosee .section__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* The coats' breeds moved to the top of the read column (04 P2-3). */
.pdp__read > .pdp__coatsfor:first-child { margin-top: 0; margin-bottom: 1rem; }
/* Four coats, two rows of two on a phone: at 430 they ran 3 + 1 and "Grey and
   White" sat alone (04 P2-3). */
@media (max-width: 767px) {
  .coats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The 404's two titles at the weight of every other page title: 400 was the
   Ultra-era rule, and Ultra is retired (03 P2-1). */
.t4__title, .t4__sign-title, .t4__title b, .t4__sign-title b { font-weight: 800; }
/* /thanks/: "Check again" and "Empty bag" sat flush under the status line,
   0px apart (03 P2-7). */
.pagehead #order-recheck, .pagehead #order-empty { margin-top: 1.25rem; }
/* THE BAG'S HEAD, SHORTER (06 design item 9). "Your bag." at 75px over a
   full-width rule pushed the first line item to y=429 at 1440; at this scale
   the lines and the total sit in the first screen. */
.pagehead--compact { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.pagehead--compact .pagehead__title { font-size: clamp(2rem, 3.2vw, 2.75rem); }

/* =========================================================================
   THE BAG - masthead button, bag page, test rig.
   ========================================================================= */
.cartbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 2px solid var(--cream); color: var(--cream);
  text-decoration: none;
}
/* the trust line in the heroes (lane D markup, 09 #4): three facts already
   published on the shipping page, one quiet row where it fits. Every item
   carries a leading dot in a 1.5rem slot; the list hangs 1.5rem left and
   clips that strip, so a dot shows only BETWEEN two items on one line and a
   narrow column that wraps never starts or ends a line with one. On a phone
   the homepage's line takes the aside's full width. */
.ed-trust { display: flex; flex-wrap: wrap; gap: .25rem 0; margin: .75rem 0 0 -1.5rem; padding: 0; list-style: none; clip-path: inset(0 0 0 1.5rem); font-size: var(--ed-small); color: var(--ed-muted); }
.ed-trust li::before { content: "\00B7"; display: inline-block; width: 1.5rem; text-align: center; }
@media (max-width: 767px) { .ed-opening__aside .ed-trust { grid-column: 1 / -1; } }
.cartbtn[hidden] { display: none; }
.cartbtn__n:empty, .cartbtn__n[hidden] { display: none; }
.cartbtn svg { width: 18px; height: 18px; }
.cartbtn__n {
  position: absolute; top: -7px; right: -7px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px;
  background: #E2703A; /* the plate orange; no chrome token carries it */
  color: #102722; /* ink on orange: 5.0:1; the cream read 2.96:1 and failed the gate */
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.wrap--bag { max-width: 720px; }
.bag { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.bagrow {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line, #d8cfc0);
}
.bagrow__img {
  flex: none; display: block; width: 72px; aspect-ratio: 4 / 5; overflow: hidden;
  background: #fff; /* the product photos are shot on white; the box matches them */
  border: 1px solid var(--line, #d8cfc0);
}
.bagrow__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bagrow__what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bagrow__name { color: inherit; text-decoration: none; font-weight: 600; }
.bagrow__name:hover { text-decoration: underline; }
.bagrow__meta { font-size: .85rem; opacity: .75; }
.bagrow__qty { display: inline-flex; align-items: center; gap: .5rem; }
/* 44 x 44, the house floor for a touch target: the steppers were 30px and
   Remove was a 17px-tall underlined word, on the one page where a mis-tap
   changes what somebody pays (measured at 375, 2026-10-05). */
.bagrow__step {
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid currentColor; background: transparent; color: inherit;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.bagrow__step:hover { background: rgba(0, 0, 0, .06); }
.bagrow__n { min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }
.bagrow__price { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.bag__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 1.25rem; font-size: 1.1rem;
}
.bag__empty { margin: 0 0 1.5rem; }
.bag__deliver { margin-top: 2rem; }
.pdp__cartnote { min-height: 1.4em; margin: .6rem 0 0; font-size: .9rem; }
.testcard {
  margin: 0 0 2rem; padding: 1.25rem;
  border: 1.5px dashed var(--line, #d8cfc0);
}
.testcard h2 { margin: 0 0 .75rem; font-size: 1.05rem; }
.testcard .buy { margin-top: .75rem; }
@media (max-width: 560px) {
  .bagrow { flex-wrap: wrap; }
  /* With a picture the name sits beside it, and the controls wrap below.
     THE LINE PRICE ON THE TOTALS' EDGE (2026-10-14). The wrapped second line
     packed left: stepper, then the price at about x=238 of a 366px column,
     then Remove, with a dead strip after it, while Subtotal and Shipping
     below put their figures flush right. The price now ends the name's line,
     flush right over the subtotal, and the second line is the stepper on the
     left and Remove on the right, a thumb's width from "+". Only the price
     moves, and it takes no focus, so the tab order is the markup's. */
  .bagrow__img { width: 60px; }
  .bagrow__what { flex-basis: calc(100% - 6em - 1rem); }
  .bagrow__img + .bagrow__what { flex-basis: calc(100% - 60px - 6em - 2rem); }
  .bagrow__price { order: 1; }
  .bagrow__qty { order: 2; }
  .bagrow__rm { order: 3; margin-left: auto; }
}
.bagrow__rm {
  min-height: 44px; min-width: 44px;
  border: 0; background: transparent; padding: 0 .25rem;
  color: inherit; opacity: .7; font-size: .8rem;
  text-decoration: underline; cursor: pointer;
}
.bagrow__rm:hover { opacity: 1; }
/* site.js disables every bag button while "Preparing checkout..." runs */
.bagrow__step:disabled, .bagrow__rm:disabled { opacity: .4; cursor: not-allowed; }
.bagrow__step:disabled:hover { background: transparent; }
/* a 72px thumb has no room for alt text: plate the box, hide the glyph */
.bagrow__img img.is-missing { opacity: 0; }
.bagrow__img:has(img.is-missing) { background: var(--c-render-ground); }

/* ---- breed selector + request ---- */
.breeds { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: .55rem 0 0; padding: 0; }
/* Sized up 2026-09-10 at the owner's request. The old chip was .85rem type in
   .45rem of padding, about 30px tall -- under the 44px minimum touch target,
   so this is an accessibility fix as much as a visual one. min-height carries
   the target; inline-flex keeps the label centred once padding stops setting
   the height. */
.breedchip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .6rem 1.15rem;
  border: 1.5px solid var(--ed-rule); background: transparent;
  color: inherit; font: inherit; font-size: 1rem; line-height: 1.2; cursor: pointer;
}
.breedchip[aria-pressed="true"] { border-color: var(--ed-ink); background: var(--ed-ink); color: var(--ed-white); }
.breedchip:focus-visible { outline: 3px solid var(--c-focus-ink, currentColor); outline-offset: 2px; }
/* THE CLOSED BOX SAYS WHAT IS INSIDE IT (2026-10-09, breedreq audit). The
   summary was a bare underlined question with no marker: it read as a stray
   link, 1.7 screens down on a 390px phone and cut by the fold at 1440. Now a
   tinted box with the question, a one-line lead and the house "+" (.disc,
   .faq__item), on every product page. Still closed by default: open, it puts
   a second email field straight under Add to bag. */
.breedreq { margin: 1.25rem 0 0; padding: 0 1rem; border: 1.5px solid var(--ed-rule); background: var(--ed-gray); }
.breedreq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 48px; padding: .8rem 0; cursor: pointer; list-style: none;
}
.breedreq summary::-webkit-details-marker { display: none; }
.breedreq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em;
  font-family: var(--ff-mono); font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--c-text);
}
.breedreq[open] summary::after { transform: rotate(45deg); }
.breedreq summary:focus-visible { outline: 3px solid var(--c-focus-ink, currentColor); outline-offset: 2px; }
.breedreq__head { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.breedreq__title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--c-text); }
.breedreq summary:hover .breedreq__title { text-decoration: underline; text-underline-offset: 3px; }
.breedreq__lead { font-size: var(--t-detail); line-height: 1.45; color: var(--c-text-soft); text-wrap: pretty; }
.breedreq[open] { padding-bottom: .9rem; }
.breedreq p { font-size: .95rem; margin: .6rem 0; }
.breedreq summary + p { margin-top: .1rem; }
.breedreq__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.breedreq__row input {
  flex: 1 1 12rem; min-width: 0; padding: .55rem .7rem;
  border: 1.5px solid var(--ed-rule); background: var(--ed-white); color: inherit; font: inherit;
}
.breedreq__row input:focus-visible { outline: 3px solid var(--c-focus-ink, currentColor); outline-offset: 1px; }
/* .buy is width: 100% with space-between, so the wrapped button read its
   label hard left; centred like Add to bag above it */
.breedreq__row .buy { flex: 0 0 auto; padding: .55rem 1rem; justify-content: center; }
.breedreq__fine { font-size: .78rem; opacity: .8; }

/* ---- The buy bar, 2026-10-10 (V01) -----------------------------------------
   Product pages, phones only (site.js THE BUY BAR decides when): the name,
   the plain price and one 48px Add to bag on the paper ground, a rule above.
   [hidden] is restated because a display rule would otherwise beat it.
   Opacity only; no transition at all under reduced motion. */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--ed-white); color: var(--ed-ink);
  border-top: 1px solid var(--ed-rule);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.buybar[hidden] { display: none; }
.buybar[data-show="true"] { opacity: 1; visibility: visible; pointer-events: auto; }
.buybar__in { display: flex; align-items: center; gap: .75rem; max-width: 40rem; margin: 0 auto; }
.buybar__what { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; line-height: 1.3; }
.buybar__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__price { font-variant-numeric: tabular-nums; color: var(--ed-muted); font-size: .9375rem; }
.buybar .buybar__go { flex: none; width: auto; min-height: 48px; margin: 0; padding: 0 1.25rem; justify-content: center; box-shadow: none; }
@media (min-width: 900px) { .buybar, .buybar[data-show="true"] { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .buybar { transition: opacity .2s ease, visibility 0s linear .2s; }
  .buybar[data-show="true"] { transition: opacity .2s ease, visibility 0s linear 0s; }
}

/* ---- Added to bag, 2026-10-10 (V09) ----------------------------------------
   The confirmation that takes the note's place in the buy panel: the
   picture, the line as added, Check out and a quiet Keep shopping. No toast,
   no spinner. The note stays in the DOM as the live region (visually
   hidden while this shows). */
.pdp__added {
  display: grid; grid-template-columns: 56px 1fr; gap: .25rem 1rem; align-items: start;
  margin-top: 1rem; padding: 1rem; border: 1px solid var(--ed-rule); background: var(--ed-white);
}
.pdp__added:focus { outline: 2px solid var(--ed-ink); outline-offset: 2px; }
.pdp__added-img { grid-row: span 2; width: 56px; height: 70px; object-fit: cover; background: #fff; border: 1px solid var(--ed-rule); }
.pdp__added-line { margin: 0; line-height: 1.45; }
.pdp__added-line b { display: block; font-weight: 600; }
.pdp__added-go { grid-column: 2; justify-self: start; margin-top: .5rem; min-height: 44px; }
.pdp__added-more { grid-column: 2; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; font-size: .9375rem; }

/* ---- The bag's summary and its empty state, 2026-10-10 (V10, CONV-06) --- */
.bag__sum { margin: 0 0 1.25rem; padding-top: .25rem; }
.bag__sum .bag__total { margin: 0 0 .5rem; }
.bag__total--ship, .bag__total--offer { font-size: 1rem; color: var(--ed-muted); }
.bag__total--offer b { color: var(--ed-ink); }
.bag__suggest { margin: 0 0 2rem; }
.bagtiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .bagtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bagtile { display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; }
.bagtile img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #fff; border: 1px solid var(--ed-rule); margin-bottom: .375rem; }
.bagtile__name { font-weight: 600; line-height: 1.3; }
.bagtile:hover .bagtile__name { text-decoration: underline; }
.bagtile__price { font-variant-numeric: tabular-nums; color: var(--ed-muted); }

/* ---- The bag offer's notice (CONV-06; built and off) ----------------------- */
.bagoffer {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  max-width: var(--wrap, 75rem); margin: 0 auto; padding: .875rem 1rem;
  border-bottom: 1px solid var(--ed-rule); background: var(--ed-gray); color: var(--ed-ink);
}
.bagoffer__line { flex: 1 1 18rem; margin: 0; }
.bagoffer__go { min-height: 44px; }
.bagoffer__x { min-height: 44px; padding: 0 .25rem; border: 0; background: none; cursor: pointer; font: inherit; }

/* ---- Join window, 2026-10-08 ---------------------------------------------
   Owner: "drop the join the list but have a popup". site.js JOIN WINDOW
   opens it once per visitor. Since 2026-10-10 it leads with the welcome
   offer (Thomas: "use discounts to convert"; the words are build-site.py
   LIST_*, printed only while the Lambda can honour the code) beside one of
   Thomas's lakeshore photographs (V04).
   The editorial card: white paper, one rule, ink type, square corners, the
   signup band's own field and button (.signup*) so its busy, error and
   stamped states are the band's. From 768px two columns, the photograph 40%
   on the left; a centred card with a photo strip from 560px; under that a
   sheet on the foot of the screen with the 16px gutter and the same strip,
   so the page it interrupts stays in view above it and the thumb reaches
   every control. */
.joinpop {
  width: min(34rem, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem);
  margin: auto; padding: 0; border: 1px solid var(--ed-rule); border-radius: 0;
  background: var(--ed-white); color: var(--ed-ink);
  box-shadow: 0 24px 60px -30px rgba(16, 39, 34, .45);
  overflow: auto; overscroll-behavior: contain;
}
.joinpop::backdrop { background: rgba(16, 39, 34, .55); }
.joinpop__in { position: relative; padding: 0; }
.joinpop__body { padding: clamp(1.75rem, 4vw, 2.75rem); }
.joinpop__media { display: block; height: 140px; overflow: hidden; background: var(--ed-gray); }
.joinpop__media picture, .joinpop__media img { display: block; width: 100%; height: 100%; }
/* 50% 44% since 2026-10-15: the window's photograph is the vertical East Shore
   sunset (build-site.py JOINPOP_PHOTO); the phone's 120-140px strip keeps the
   glow and the far ridge. On a laptop the frame shows almost whole. */
.joinpop__media img { object-fit: cover; object-position: 50% 44%; }
/* the panel takes first focus so the window is announced by its name; it is
   not a control, so it draws no ring (every control inside still does) */
.joinpop__in:focus { outline: none; }
/* on paper over the photograph, so it reads on any part of the picture */
.joinpop__x {
  position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 0;
  background: var(--ed-white); color: var(--ed-ink); cursor: pointer;
}
.joinpop__x:hover { background: var(--ed-gray); }
.joinpop__x svg { width: 16px; height: 16px; }
.joinpop__title { margin-top: 0; font: 800 clamp(2rem, 4.2vw, 2.75rem)/1.05 var(--ff-body); letter-spacing: -.045em; word-spacing: .08em; text-wrap: balance; }
.joinpop__sub { margin-top: .875rem; max-width: 40ch; font-size: 1.0625rem; line-height: 1.6; }
.joinpop .joinpop__form { margin-top: 1.5rem; max-width: none; }
.joinpop .signup__msg { margin-top: .625rem; }
.joinpop .stamp { text-align: left; padding: 1.125rem 1.25rem; }
.joinpop .stamp__sub { font-family: var(--ff-body); font-size: .9375rem; letter-spacing: 0; line-height: 1.5; color: var(--ed-ink); }
.joinpop__consent { margin-top: .25rem; font-size: var(--ed-small); line-height: 1.6; color: var(--ed-muted); }
.joinpop__consent .text-link { font-size: inherit; color: var(--ed-ink); }
.joinpop__no {
  margin-top: .75rem; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ed-ink); font: 500 .9375rem/1 var(--ff-body); cursor: pointer;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.joinpop__no:hover { color: var(--c-water-deep); }
@media (min-width: 768px) {
  .joinpop { width: min(48rem, calc(100% - 2rem)); }
  .joinpop__in { display: grid; grid-template-columns: 2fr 3fr; }
  .joinpop__media { height: auto; min-height: 100%; }
  .joinpop__title { padding-right: 2.5rem; }
}
@media (max-width: 559px) {
  .joinpop { width: 100%; max-height: calc(100% - 3rem); margin: auto 0 0; border-width: 1px 0 0; box-shadow: none; }
  .joinpop__media { height: 120px; }
  .joinpop__body { padding: 1.25rem 1rem 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .joinpop[open] { animation: joinpop-in 260ms cubic-bezier(.22, 1, .36, 1); }
  .joinpop[open]::backdrop { animation: joinpop-veil 260ms ease-out; }
  @keyframes joinpop-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes joinpop-veil { from { opacity: 0; } to { opacity: 1; } }
}
@media (forced-colors: active) {
  .joinpop { border: 2px solid CanvasText; }
}

/* ==========================================================================
   VISUAL LANE, 2026-10-10 (ops/batch-2026-10-10 PLAN.md, "visual").
   Products on the first screen of every ad landing; one card everywhere a
   product is shown; less chrome between the visitor and the product.
   ========================================================================== */

/* SECTION TITLES AT SECTION SCALE (V20). Five 64 px h2s on the homepage and a
   72 px "Original designs" on the hubs sat over 18 px product names. The h2
   classes of the shared title block (top of this sheet) and the homepage's
   own h2s take --ed-h2; the display scale (--ed-title, --ty-title) is the
   h1's. :is() carries .ed-home h2's specificity, so this wins over the
   earlier per-component sizes; "Related products" (.alsosee) stays smaller. */
:is(.section__title, .faq__title, .story__title, .list__title, .why-cta h2, .ed-home h2) { font-size: var(--ed-h2); }

/* SHELF AND HUB HEROES, CAPPED (V05, V16). At 900 px and up the hero is one
   row about 360 px tall, so the first card row shows on a 900 px screen
   (it started at y=717 on /shop/tees/ and y=820 to 840 on the hubs). */
@media (min-width: 900px) {
  .chero .chero__inner { padding-block: 1.5rem; }
  /* the picture fills the row: the row is the taller of the text and this */
  .chero > .ph { height: auto; min-height: clamp(300px, 24vw, 360px); align-self: stretch; }
  .chero > .ph--art { min-height: clamp(300px, 25vw, 380px); }
  .chero > .ph > picture { position: absolute; inset: 0; }
}
/* Below 900 px a hub shows its grid, not its photograph (a landscape, or on
   For Dogs a husky in a van window), as a shelf already hides its photo below
   768. build-site.py hands these widths a 1x1 GIF, so nothing downloads. */
@media (max-width: 899px) {
  .chero:has(> .ph--grid) { grid-template-columns: 1fr; }
  .chero > .ph--grid { display: none; }
}
.chero .chero__price { font-weight: 600; white-space: nowrap; }
/* the hero's links as text, not boxed chips: the hubs' jump list to each type */
.chero__nav--text .pills { gap: 0 1.5rem; }
.chero .pill--text {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--ed-ink);
  font: 600 .9375rem/1.3 var(--ff-body); letter-spacing: 0;
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.chero .pill--text:hover, .chero .pill--text:focus-visible { background: none; color: var(--c-water-deep); border: 0; }
.chero .pill--text::before { inset: -2px -.5rem; }
/* the grid sits close under the hero: the hero is the page's introduction */
.chero + .collection { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.hubdrop { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.band__sub--quiet { margin-top: 0; }
@media (max-width: 767px) {
  .chero .chero__inner { padding-block: 1.5rem 1.75rem; }
  .chero .chero__line { margin-top: .875rem; }
  .chero__nav { margin-top: 1rem; }
}

/* THE SHELF'S SIBLINGS, UNDER THE GRID (V16): one quiet row of text links. */
.shelfnav { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.25rem; border-top: 1px solid var(--ed-rule); display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; }
.shelfnav__label { color: var(--ed-muted); font-size: .9375rem; }
.shelfnav__list { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: 0; padding: 0; }
.shelfnav__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ed-ink); font-weight: 500; font-size: .9375rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.shelfnav__list a:hover { color: var(--c-water-deep); }
.shelfnav__list .shelfnav__hub { font-weight: 600; }
.shelfnav + .specswrap { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* THE WOMEN'S FIT FILTER (V13). The hero's link targets #womens-fit; while it
   is the URL's fragment, this line shows and every card without the fit
   steps out of the grid. No script. */
.fitfilter { display: none; margin: 0 0 1.5rem; padding: .875rem 1rem; background: var(--ed-gray); border: 1px solid var(--ed-rule); font-size: .9375rem; }
.fitfilter a { color: var(--ed-ink); font-weight: 600; margin-left: .5rem; }
.fitfilter:target { display: block; }
.fitfilter:focus { outline: none; }
.collection:has(#womens-fit:target) .grid--designs > .pcard:not([data-wfit]) { display: none; }
/* the fit on the card, under its colour */
.pcard__fit { display: block; margin-top: .125rem; }

/* THE GARMENT CARDS' TORSO CROP (V03) is a file, not CSS:
   tools/make_card_crops.py. One CSS zoom could not serve both the
   full-length photographs (which need about 2x) and the ones already cut at
   the thigh (which need none). The card's hover zoom stays 1.8%. */

/* ONE CARD FOR EVERY PRODUCT ROW (V08, V06, V07, V17): "Related products",
   the guide blocks, the gift guide, the homepage's two rows and the Why
   page's row draw the shelf's .pcard. Two up on a phone; the four-card rows
   go four across from 768, the gift guide's longer runs three then four. */
.alsosee__grid, .ed-picks__grid, .ed-dog__grid, .why-shop__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem;
}
@media (min-width: 768px) {
  .ed-picks__grid, .ed-dog__grid, .why-shop__grid, .alsosee > .wrap > .alsosee__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
  .prose .alsosee__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
  /* a guide's block is three or four cards: one row of them */
  .prose .guideshop .guideshop__grid { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .prose .alsosee__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.alsosee__grid .pcard__name, .ed-picks__grid .pcard__name, .ed-dog__grid .pcard__name, .why-shop__grid .pcard__name { font-size: 1rem; }
/* (a lone last card in these rows is no longer centred on a phone either:
   A LAST CARD STAYS ON THE GRID, 2026-10-14, above) */
/* A card inside a guide's prose is a card: no prose underline, no bullet. */
.prose .pcard a { text-decoration: none; }
/* In a guide the product rows reach past the 46ch read column, centred on
   it, up to the wide wrap: four cards at 260 px instead of four at 150. */
@media (min-width: 900px) {
  .prose .guideshop, .prose > .alsosee__grid {
    --row: min(calc(100vw - 2 * var(--gut)), 72rem);
    width: var(--row); margin-inline: calc((100% - var(--row)) / 2);
  }
}
.guideshop { margin-block: clamp(2rem, 5vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--ed-rule); }
/* an h2, so the cards' h3 names sit in the outline under it; set as a label */
.prose .guideshop__label { margin: 0 0 1rem; padding: 0; border: 0; font: 600 var(--ed-small)/1.4 var(--ff-body); letter-spacing: 0; color: var(--ed-muted); }
.guideshop .alsosee__grid { margin-top: 0; }

/* THE HOMEPAGE'S FIRST SCREEN (V06): the headline at lead scale, four
   products under the button, the photograph a 38svh band under them. */
.ed-picks { padding-bottom: clamp(2rem, 4vw, 3rem); }
.ed-opening__copy { padding-block: clamp(2rem, 3vw, 3rem); }
@media (max-width: 767px) { .ed-opening__copy { padding-block: 2rem 1.75rem; } }
/* FOR THE DOG (V07) */
.ed-dog { padding-block: var(--ed-space); border-top: 1px solid var(--ed-rule); }
.ed-dog .ed-heading { align-items: center; }

/* THE WHY PAGE'S ROUTE TO THE SHOP (V17) */
.why-shop { padding-block: var(--ed-space); border-top: 1px solid var(--ed-rule); background: var(--ed-white); }
.why-shop__go { margin-top: 1.75rem; }

/* GUIDES: the head and the first section sit together (V18). There was a
   ~150 px band of nothing between the lede and the first h2. */
.pagehead + .pagebody { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.prose > h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* THE PRODUCT PAGE'S KICKER CARRIES THE COLOUR (V11); a coat selector keeps
   its swatches, inside links framed as choices. With the colour row gone the
   panel opens on its first control, so it takes no top margin of its own. */
.pdp__panel > :first-child { margin-top: 0; }

/* THE GALLERY'S THUMBNAIL RAIL, 900 px and up (V12). One 64 x 80 button per
   view, the current one with a 2 px ink border; the arrows and the "1 of 5"
   count stay on phones, which swipe. A thumb's picture is the slide's own
   file (a background, so a hidden rail fetches nothing). */
.pdpgal__thumbs { display: none; }
@media (min-width: 900px) {
  html.js .pdpgal__bar { display: none; }
  html.js .pdpgal__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .75rem 0 0; padding: 0; }
  html.js:not(.js-ready) .pdpgal__thumbs { visibility: hidden; }
}
.pdpgal__thumb {
  display: block; width: 64px; height: 80px; padding: 0; cursor: pointer;
  background: #fff var(--thumb) center / cover no-repeat;
  border: 1px solid var(--ed-rule); border-radius: 0;
  box-shadow: inset 0 0 0 1px transparent;
}
.pdpgal__thumb:hover { border-color: var(--c-border-str); }
.pdpgal__thumb[aria-current="true"] { border-color: var(--ed-ink); box-shadow: inset 0 0 0 1px var(--ed-ink); }
.pdpgal__thumb:focus-visible { outline: 3px solid var(--c-focus-ink); outline-offset: 2px; }
@media (forced-colors: active) {
  .pdpgal__thumb { border: 1px solid ButtonBorder; }
  .pdpgal__thumb[aria-current="true"] { border: 3px solid Highlight; }
}

/* THE PHOTO CAPTIONS STEP OFF THE PHOTO (V19). "The back", "Second model,
   the back" sat as dark plates in each picture's corner, the floating-chip
   pattern. Each slide's alt already says it, and on 900 px and up the
   thumbnail rail names every view; the captions stay in the markup for the
   no-script stack of photographs, where they label each one under it. */
html.js .pdp__stage figcaption, .pdp__stage:only-child figcaption, .pdp__media > .pdp__stage figcaption { display: none; }
html:not(.js) .pdpgal .pdp__stage { overflow: visible; margin-bottom: 1.75rem; }
html:not(.js) .pdpgal .pdp__stage figcaption {
  position: absolute; top: 100%; left: 0; padding: .375rem 0 0; background: none;
  color: var(--c-text-mute); font: 400 var(--ed-small)/1.4 var(--ff-body); letter-spacing: 0;
}

/* THE OWNER, BY NAME (2026-10-12; decision 7 and Thomas's trust request).
   His name and his own pages (build-site OWNER_LINKS): under his sentences
   on the Why page, and in every footer's brand block. The links are plain
   underlined text at 40 px tall, no icons, no brand colours. */
.why-owner { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--ed-rule); }
.why-q .why-owner p.why-owner__name { margin-top: 0; font-size: 1rem; font-weight: 600; color: var(--c-text); }
.ownerlinks { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: .375rem 0 0; padding: 0; }
.ownerlinks a {
  display: inline-block; padding-block: .5rem;
  font-size: .9375rem; color: var(--c-text);
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
}
.ownerlinks a:hover { text-decoration-thickness: 2px; }
.sitefoot__owner { margin: .5rem 0 0; font-size: .9375rem; color: var(--c-on-night-soft); }
/* the footer's copy is set by its own sitefoot__ classes, which the inlined
   critical sheet keeps (tools/critical_css.py "sitefoot*") */
.sitefoot__social { display: flex; flex-wrap: wrap; gap: 0 1.25rem; list-style: none; margin: -.25rem 0 0; padding: 0; }
.sitefoot__social a {
  display: inline-block; padding-block: .5rem; font-size: .9375rem;
  color: var(--cream-deep); text-decoration: underline; text-underline-offset: .2em;
  text-decoration-thickness: 1px; text-decoration-color: rgba(242, 230, 206, .45);
}
.sitefoot__social a:hover { color: var(--cream-lit); text-decoration-color: currentColor; }

/* "Checked by Thomas Beach" under a guide's lede, and "Photo: Thomas Beach"
   on the captioned lake photographs that are his. */
.pagehead__by { margin-top: 1rem; font-size: var(--ed-small); color: var(--c-text-mute); }
.pagehead__by a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.photocredit { font-weight: 400; letter-spacing: .02em; }
.gphoto__cap .photocredit { flex-basis: 100%; text-align: center; }
.why-method__photo figcaption .photocredit { display: block; margin-top: .25rem; }
@media (min-width: 621px) { .why-method__photo { padding-bottom: 4.5rem; } }

/* The guide link moved into the Ocean band (decision 9), the page's one dark
   ground: ink-on-ink there, so it and its focus ring take the light set. */
.why-qs--dark .text-link { color: var(--c-on-night-lit); }
.why-qs--dark .text-link:hover, .why-qs--dark .text-link:focus-visible { color: var(--c-on-night-soft); }
.why-qs--dark :focus-visible { outline-color: var(--c-focus); }

/* HOW IT'S MADE AND WHAT'S NEXT (decision 9): two of the Why page's four
   sections, set like the others' heads; no rule over the pair. */
.production-note h2.why-q__ask { max-width: none; margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; }
.production-note__grid { border-top: 0; padding-top: 0; }

/* ---- Sentinel. Keep this LAST. ---------------------------------------------
   Computes only when this whole file arrived: the inline boot script reads it
   to report a degraded page view (05 P1-4). tools/critical_css.py keeps it out
   of the inline block, or it would always compute. */
:root { --tbc-ed-end: 1; }