/* Anything you can press shows a hand. Browsers give a <button> the default
   arrow, so every control that skipped `cursor: pointer` in its own rule got
   one, and the site read as unclickable in a dozen places. Set once, here,
   rather than remembered per component. */
button,
[role="button"],
summary,
label[for],
input[type="checkbox"],
input[type="radio"],
select {
  cursor: pointer;
}
button:disabled,
[role="button"][aria-disabled="true"] { cursor: not-allowed; }

/* ===========================================================
   PREP LIKE NOAH — SHARED BASE
   -----------------------------------------------------------
   Palette, type, top bar, masthead and footer for every page
   except index.html (which is Tailwind-based). Page-specific
   rules live alongside this in gear.css / readyscore.css.
   -----------------------------------------------------------
   Warm sand ground, pitched a touch cooler and greyer than a
   plain cream so it sits under the deep blue bar rather than
   fighting it. Headings borrow the bar's blue; the CTA is the
   hero's rust gradient. Blue stays structural, never a field.
   =========================================================== */

:root {
  --page:        #ebe6dc;   /* warm sand, slightly grey cast */
  --card:        #fdfbf7;   /* warm white */
  --line:        #dcd5c7;   /* hairlines */
  --line-strong: #cbc3b2;
  --track:       #e6dfd0;   /* unfilled bar/ring track: warm, clearly empty */
  --muted:       #6f6859;   /* tertiary text */
  --text:        #4e4a41;   /* body text */
  --ink:         #332f28;   /* deep warm ink */
  --head:        #1b323b;   /* the top bar blue — headings tie to it */

  --rust:        #C92A1A;   /* the hero CTA */
  --rust-deep:   #A82215;
  --rust-wash:   rgba(201,42,26,.10);
  --rust-ring:   rgba(201,42,26,.24);
  --select:      #365460;   /* current selection — a step lighter than the bar */
  --amber:       #b8770f;
  --green:       #2f7048;

  --bar:      #1b323b;
  --bar-deep: #132429;

  --disp: 'Oswald', 'Arial Narrow', sans-serif;
  --body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;

  --radius-box:   14px;
  --radius-field: 9px;
  --shadow:    0 1px 2px rgba(51,47,40,.05), 0 8px 22px rgba(51,47,40,.08);
  --shadow-up: 0 2px 4px rgba(51,47,40,.07), 0 16px 34px -12px rgba(51,47,40,.20);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--page);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
  /* Column flex, with margin-top:auto on the footer, keeps the footer at
     the bottom of the viewport on a short page without pinning it over
     content on a long one. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 90;
  background: var(--head); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-weight: 700; font-size: 15px; box-shadow: var(--shadow-up);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===========================================================
   DETAIL MODAL — shared shell (gear items, brands)
   =========================================================== */


.imodal-back {
  position: fixed; inset: 0; z-index: 85; display: none;
  align-items: center; justify-content: center; gap: 10px; padding: 24px;
  background: rgba(35,31,24,.58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.imodal-back.open { display: flex; }

.imodal {
  position: relative; background: var(--card); border-radius: var(--radius-box);
  width: min(880px, 100%); max-height: 88vh; overflow: hidden;
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  box-shadow: 0 24px 60px rgba(35,31,24,.4);
}


.imodal-x {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.94); color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.imodal-x:hover { background: var(--rust); color: #fff; border-color: var(--rust); }

/* A FIXED square, never aspect-ratio + stretch: stretching makes the
   height follow the body, and aspect-ratio then makes the width follow
   the height, so a long item overflowed its column and covered the title. */
.imodal-media {
  position: relative; background: #fff; border-right: 1px solid var(--line);
  width: 300px; height: 300px; align-self: start; flex: none;
}
.imodal-media img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); object-fit: contain; }
.imodal-media.is-empty { background: var(--page); }
.imodal-media.is-empty::after {
  content: 'No photo'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--line-strong);
}


.imodal-body { padding: 26px 28px 28px; overflow-y: auto; min-width: 0; max-height: 88vh; }
.imodal-cat { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.imodal-body h2 {
  font-family: var(--disp); font-weight: 500; font-size: 27px; line-height: 1.2;
  letter-spacing: .01em; color: var(--head); margin-bottom: 10px;
}
.imodal-desc { color: var(--text); font-size: 16px; margin-bottom: 14px; }
.imodal-note {
  background: var(--page); border-left: 3px solid var(--select);
  padding: 12px 14px; border-radius: 0 8px 8px 0; margin-bottom: 16px;
  color: var(--text); font-size: 15.5px;
}
.imodal-note b { display: block; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.imodal-note[hidden] { display: none; }

.imodal-subhead { font-size: 14px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
@media (max-width: 520px) { .gear-option { flex-wrap: wrap; } .opt-main { flex: 1 1 100%; } }

/* prev / next */
.imodal-nav {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.14); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .14s ease;
}
.imodal-nav:hover { background: rgba(255,255,255,.3); }
.imodal-nav[disabled] { opacity: .25; cursor: default; }
/* Mobile: one column, and the arrows wrap to a centred pair UNDER the
   card rather than floating over the content. */
@media (max-width: 760px) {
  .imodal-back { padding: 12px; flex-wrap: wrap; align-content: center; gap: 10px; }
  .imodal {
    order: 1; flex: 1 0 100%; width: 100%;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    max-height: 82vh;
  }
  .imodal-media { width: 100%; height: 190px; border-right: 0; border-bottom: 1px solid var(--line); }
  .imodal-media img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
  .imodal-body { padding: 18px 18px 22px; max-height: none; }
  .imodal-body h2 { font-size: 23px; }
  .imodal-prev { order: 2; }
  .imodal-next { order: 3; }
}

/* ===========================================================
   IDENTITY GATE — shared "one email, once" modal (pln-identity.js)
   =========================================================== */
.pln-gate {
  position: fixed; inset: 0; z-index: 95; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(27,50,59,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pln-gate.open { display: flex; }
.pln-gate-card {
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
  position: relative; background: var(--card); border-radius: var(--radius-box);
  width: min(430px, 100%); padding: 30px 30px 32px; box-shadow: var(--shadow-up);
}
.pln-gate-x {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border: 0; background: none; color: var(--muted); font-size: 24px;
  line-height: 1; cursor: pointer; border-radius: 50%;
}
.pln-gate-x:hover { color: var(--rust); }
/* Body face throughout, sentence case, and a tighter line-height than the
   page default (1.6 is right for prose, too loose for a compact form). */
.pln-gate-card h2 {
  font-family: var(--body); font-weight: 800; font-size: 25px; line-height: 1.25;
  letter-spacing: -.01em; color: var(--head); margin-bottom: 10px;
}
.pln-gate-blurb { color: var(--text); font-size: 16.5px; line-height: 1.45; margin-bottom: 20px; }
.pln-gate-blurb:empty { display: none; }
.pln-f {
  display: block; width: 100%; font: inherit; font-size: 17px; padding: 14px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-field);
  background: var(--page); color: var(--ink); margin-bottom: 12px; line-height: 1.3;
}
.pln-f::placeholder { color: var(--muted); }
.pln-f:focus { outline: 2px solid var(--rust-ring); outline-offset: -1px; border-color: var(--rust); }
.pln-gate-err { color: var(--rust); font-size: 15px; font-weight: 700; margin-bottom: 10px; line-height: 1.35; }
.pln-gate-go {
  width: 100%; font: inherit; font-weight: 800; font-size: 17px; padding: 15px;
  border: 0; border-radius: var(--radius-field); background: var(--rust); color: #fff;
  cursor: pointer; line-height: 1.2;
}
.pln-gate-go:hover { background: var(--rust-deep); }
.pln-gate-go[disabled] { opacity: .65; cursor: default; }
/* Secondary to the form, not competing with it, and given room to breathe
   at the bottom of the card. */
.pln-gate-fine {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  font-size: 16px; line-height: 1.45; color: var(--muted);
  margin: 16px auto 0; max-width: 34ch; text-align: left;
}
.pln-gate-fine svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }