/* AviLedger site styles: tokens, chrome and the recurring section patterns.

   Every page of the redesign links this. Page-specific rules stay inline in
   the page that needs them, so a rule only travels to pages that use it.

   The old /site.css still serves the pages that have not been rebuilt yet.
   Both exist on purpose during the rollout; neither imports the other. */
/* Home page only. The other pages still use /site.css, which is untouched. */

/* Self-hosted, like Hanken Grotesk already is: this page is the one that has
   to load fast for people arriving cold from search, and a Google Fonts link
   would put a third-party round trip in front of the first paint. */
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/instrument-serif-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* One variable file covers 400 through 800. */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/fonts/manrope-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/fonts/manrope-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --paper: #F7F5F0;    --paper-2: #EFEBE2;  --rule: #DDD6C9;   --rule-2: #C9C0B0;
  --navy: #16294B;     --night: #0B1730;    --footer: #08111F;
  --blue-lit: #3A85E8; --blue-pale: #7FB0FF; --blue-hair: #C3D5EF;
  --dim: #AFC0DA;      --dim-2: #8FA3C2;    --dim-3: #7C8EAB;  --dim-4: #6E829F;
  --body: #4B5A75;     --body-2: #5B6B85;   --lede: #DCE5F2;

  /* CONTRAST.
     The handoff's palette was authored by eye and several of its text colours
     fall below WCAG AA (4.5:1) on the paper backgrounds: the sand label colour
     read 3.84:1, and the amber "In moderation" verdict on the food list read
     2.39:1, which is genuinely hard to look at. The values below are the same
     hues darkened to the minimum that clears 4.5:1 against the DARKER of the
     two light backgrounds (#EFEBE2), so they pass on both. Hue and saturation
     are unchanged, so the page still reads as the same design.

     --gold keeps the original value: it is only ever used on dark grounds
     (eyebrows on #0B1730, the "best value" badge fill) where it measures
     6.83:1. --amber is its counterpart for text on light. */
  --gold: #CF962F;     --amber: #89631F;
  --clay: #77694F;
  --blue: #2269C3;
  --green: #34774C;    --orange: #A1572A;   --red: #B03A34;
  --dim-5: #677E9B;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--navy);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
/* height:auto matters: these imgs carry width/height attributes for layout
   stability, and CSS that sets only width would otherwise let the attribute
   height stand and stretch them. */
img { max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--blue); }
h1, h2, h3, .serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; }
em { font-style: italic; }

.shell { max-width: 1440px; margin: 0 auto; padding-left: clamp(18px, 4vw, 56px); padding-right: clamp(18px, 4vw, 56px); }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.rule-mark { width: 38px; height: 1px; background: var(--gold); display: block; }

.btn { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 16px 28px; border-radius: 2px; display: inline-block; transition: background-color .16s, border-color .16s, color .16s; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-lit); color: #fff; }
.btn-ghost { border: 1px solid rgba(247,245,240,0.32); color: var(--paper); padding: 15px 26px; }
.btn-ghost:hover { border-color: var(--blue-pale); color: var(--paper); }

.more { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); border-bottom: 1px solid var(--blue-hair); padding-bottom: 2px; }
.more:hover { border-bottom-color: var(--blue); }

/* Reveal on scroll, opt-in.
   The content is VISIBLE by default and script hides it a moment before
   animating it back in. The other way round -- hidden in CSS, revealed by
   script -- means any failure of the observer leaves a blank page, and this is
   the page people arrive at cold from a search engine. */
html.rv [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
html.rv [data-rv].rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.rv [data-rv] { opacity: 1; transform: none; transition: none; } }

.site-head { position: sticky; top: 0; z-index: 60; background: rgba(247,245,240,0.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.site-head .shell { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand img { width: 30px; height: 30px; display: block; border-radius: 8px; }
.brand span { font-family: 'Instrument Serif', Georgia, serif; font-size: 27px; line-height: 1; letter-spacing: -0.01em; }
.site-nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.site-nav a { color: var(--body); padding-bottom: 3px; }
.site-nav a:hover { color: var(--blue); }
.site-nav a.on { color: var(--blue); border-bottom: 2px solid var(--blue); }
.head-cta { background: var(--navy); color: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 18px; border-radius: 2px; transition: background-color .16s; }
.head-cta:hover { background: var(--blue); color: var(--paper); }

.band-2 { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.sec-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(20px, 3vw, 56px); align-items: end; }
.sec-head p { font-size: 16px; line-height: 1.65; color: var(--body); margin: 0; max-width: 44ch; text-wrap: pretty; }

.tool-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 clamp(24px, 3.4vw, 56px); }
.tool { display: block; padding: 20px 0; border-top: 1px solid var(--navy); }
.tool b { display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(23px, 2.3vw, 29px); line-height: 1.08; margin-bottom: 7px; font-weight: 400; }
.tool span { display: block; font-size: 13.5px; line-height: 1.6; color: var(--body); }
.tool:hover b { color: var(--blue); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(16px, 2.2vw, 34px); }
.card { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.card .shot { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--night); }
.card .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .num { position: absolute; left: 0; top: 0; background: var(--paper); color: var(--navy); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; padding: 6px 10px; }
.card h3 { font-size: 26px; line-height: 1.1; margin: 0 0 6px; }
.card .latin { font-size: 11px; font-style: italic; color: var(--clay); margin: 0 0 10px; letter-spacing: 0.04em; }
.card p.body { font-size: 14px; line-height: 1.6; color: var(--body); margin: 0; }

.band-navy { background: var(--navy); color: var(--paper); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(16px, 2.4vw, 38px); }
.shots figure { margin: 0; }
.shots img { width: 100%; display: block; border: 1px solid rgba(247,245,240,0.18); }
.shots figcaption { font-size: 13px; color: var(--dim-2); margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(247,245,240,0.16); }
.shots .drop { transform: translateY(clamp(0px, 2vw, 28px)); }

table.ref { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.ref th { text-align: right; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); padding: 0 0 10px; border-bottom: 1px solid var(--navy); }
table.ref th:first-child { text-align: left; }
table.ref td { text-align: right; font-size: 15px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
table.ref td:first-child { text-align: left; }
table.ref tr:last-child td { border-bottom: 0; }
table.ref .sp { display: block; font-size: 15px; font-weight: 600; }
table.ref .la { display: block; font-size: 11.5px; font-style: italic; color: var(--clay); }
.site-foot { background: var(--footer); color: var(--dim-2); }
.site-foot .shell { padding-top: clamp(38px, 5vw, 64px); padding-bottom: 36px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: clamp(18px, 2vw, 34px); }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.foot-col b { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-5); padding-bottom: 6px; border-bottom: 1px solid rgba(143,163,194,0.18); }
.site-foot a { color: var(--dim-2); }
.site-foot a:hover { color: var(--paper); }
.foot-note { font-size: 12px; line-height: 1.75; color: var(--dim-5); margin: clamp(28px, 3.5vw, 44px) 0 0; padding-top: 20px; border-top: 1px solid rgba(143,163,194,0.16); max-width: 92ch; }
.foot-note a { color: var(--dim-4); }

/* ─────────────────────────────────────────────────────────────────────────
   The five recurring section patterns from the handoff, plus the form
   controls the ten calculators share.

   Responsive strategy, from the handoff: no breakpoints. clamp() on every
   size, repeat(auto-fit, minmax()) grids, flex-wrap, and overflow-x on
   tables. That carries phone through ultra-wide on its own.

   Two places need a real media query anyway, both noted where they appear:
   the header (five links plus a CTA cannot wrap gracefully at 360px) and
   the editorial two-column splits that must not go single-column mid-tablet.
   ───────────────────────────────────────────────────────────────────────── */

/* Pattern 1: dark hero ---------------------------------------------------- */
.hero-dark { background: var(--night); color: var(--paper); }
.hero-dark .shell { padding-top: clamp(40px, 5vw, 88px); padding-bottom: clamp(40px, 5vw, 88px); }
.hero-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-dark h1 { font-size: clamp(44px, 6.4vw, 96px); line-height: 0.92; letter-spacing: -0.025em; margin: 0 0 20px; }
.hero-dark h1 em { color: var(--blue-pale); }
.hero-dark p.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--lede); margin: 0 0 18px; max-width: 52ch; text-wrap: pretty; }
.hero-dark p.sub { font-size: 15px; line-height: 1.7; color: var(--dim); margin: 0 0 18px; max-width: 52ch; text-wrap: pretty; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 2.6vw, 30px); }
.eyebrow .kicker { color: var(--gold); }
.shotframe { position: relative; width: 100%; overflow: hidden; background: var(--navy); }
.shotframe img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-43 { aspect-ratio: 4 / 3; } .ar-34 { aspect-ratio: 3 / 4; }
.ar-45 { aspect-ratio: 4 / 5; } .ar-1610 { aspect-ratio: 16 / 10; }
.ar-169 { aspect-ratio: 16 / 9; } .ar-11 { aspect-ratio: 1 / 1; }

/* Pattern 2: breadcrumb hero ---------------------------------------------- */
.bcrumb { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim-3); margin-bottom: clamp(16px, 2.2vw, 26px); }
.bcrumb a { color: var(--gold); }
.bcrumb a:hover { color: var(--paper); }

/* Pattern 3: numbered editorial list -------------------------------------- */
.numlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 0 clamp(24px, 3.4vw, 56px); }
.numlist.tight { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.numitem { padding: clamp(20px, 2.6vw, 32px) 0; border-top: 1px solid var(--rule); }
.numitem.tier1 { border-top: 2px solid var(--navy); }
.numitem .idx { font-family: 'Instrument Serif', Georgia, serif; font-size: 15px; color: var(--clay); display: block; margin-bottom: 10px; letter-spacing: 0.04em; }
.numitem :is(h2, h3) { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; margin: 0 0 9px; }
.numitem p { font-size: 14px; line-height: 1.65; color: var(--body); margin: 0 0 14px; max-width: 44ch; text-wrap: pretty; }
.numitem:hover :is(h2, h3) { color: var(--blue); }

/* Pattern 4: data table ---------------------------------------------------
   The wrapper is what makes wide tables survive a 360px phone: the table
   keeps its min-width and the wrapper scrolls, rather than the page body
   scrolling sideways and taking the whole layout with it. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-wrap table.ref { min-width: 640px; }
.tbl-wrap.wide table.ref { min-width: 720px; }
table.ref caption { text-align: left; font-size: 12px; color: var(--clay); padding-bottom: 10px; }

/* Pattern 5: CTA band ------------------------------------------------------ */
.cta-band { background: var(--navy); color: var(--paper); }
.cta-band .shell { padding-top: clamp(34px, 4vw, 60px); padding-bottom: clamp(34px, 4vw, 60px); display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); align-items: center; justify-content: space-between; }
.cta-band p { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.05; margin: 0; max-width: 40ch; }
.cta-band .btn-primary { white-space: nowrap; }

/* Section rhythm ----------------------------------------------------------- */
.band .shell   { padding-top: clamp(34px, 4.4vw, 72px); padding-bottom: clamp(34px, 4.4vw, 72px); }
.band-lg .shell { padding-top: clamp(40px, 5vw, 88px);   padding-bottom: clamp(40px, 5vw, 88px); }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.0; letter-spacing: -0.02em; margin: 0; }
.sec-head h2 em { color: var(--blue); }
.band-navy .sec-head h2 em, .hero-dark .sec-head h2 em { color: var(--blue-pale); }
.band-navy .sec-head p, .hero-dark .sec-head p { color: var(--dim); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 4vw, 72px); align-items: start; }
.prose { max-width: 70ch; }
.prose p { font-size: 16px; line-height: 1.75; color: var(--body); text-wrap: pretty; }

/* Callout ------------------------------------------------------------------ */
.callout { background: var(--paper-2); border-left: 2px solid var(--gold); padding: clamp(18px, 2vw, 24px); }
.callout p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.callout b { display: block; font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; font-weight: 400; margin-bottom: 8px; color: var(--navy); }
.band-navy .callout, .hero-dark .callout { background: rgba(247,245,240,0.06); }
.band-navy .callout p, .hero-dark .callout p { color: var(--dim); }
.band-navy .callout b, .hero-dark .callout b { color: var(--paper); }

/* Fact grid (species pages, spec readouts) --------------------------------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.facts div { background: var(--paper); padding: 14px 15px; }
.facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin: 0 0 6px; }
.facts dd { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; }

/* Form controls (shared by all ten calculators) ---------------------------- */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); margin-bottom: 8px; }
select, input[type="text"], input[type="search"], input[type="number"], input[type="date"] {
  font-family: Manrope, system-ui, sans-serif; font-size: 15px; color: var(--navy);
  background: var(--paper); border: 1px solid var(--navy); border-radius: 0;
  padding: 13px 12px; width: 100%; appearance: none; min-height: 48px; box-sizing: border-box;
}
select { cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 34px; }
select:focus, input:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
input::placeholder { color: var(--clay); }
input.search { font-size: 16px; border: 0; border-bottom: 1px solid var(--navy); padding-left: 0; padding-right: 0; }
input.search:focus { outline: none; border-bottom: 2px solid var(--blue); }
input.search-lg { font-size: 18px; }
.filt { font-family: Manrope, system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); background: transparent; border: 1px solid var(--navy); border-radius: 0; padding: 11px 16px; min-height: 44px; cursor: pointer; }
.filt:hover { border-color: var(--blue); color: var(--blue); }
.filt[aria-pressed="true"] { background: var(--navy); color: var(--paper); }

/* Result readouts ---------------------------------------------------------- */
.bignum { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(46px, 6vw, 88px); line-height: 0.85; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bar { height: 3px; background: var(--rule); margin-top: 7px; }
.bar > i { display: block; height: 100%; background: var(--blue); }
.res-col > h3, .col-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--navy); font-family: Manrope, system-ui, sans-serif; }

/* Accordion (pricing FAQ) -------------------------------------------------- */
details { padding: 18px 0; border-bottom: 1px solid var(--rule); }
details summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; cursor: pointer; list-style: none; font-family: 'Instrument Serif', Georgia, serif; font-size: 21px; }
details summary::-webkit-details-marker { display: none; }
details summary .plus { color: var(--blue); transition: transform .2s ease; flex: none; }
details[open] summary .plus { transform: rotate(45deg); }
details p { font-size: 14.5px; line-height: 1.7; color: var(--body); margin: 12px 0 0; max-width: 68ch; text-wrap: pretty; }

/* Header: the one place the fluid approach genuinely fails ------------------
   Five uppercase links plus a CTA need about 620px. Below that they wrap to a
   second and third row and the sticky header eats a third of a phone screen.
   A checkbox burger keeps it to one row, with no JavaScript. */
.navtoggle, .burger { display: none; }
@media (max-width: 780px) {
  .burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; cursor: pointer; }
  .burger .bars, .burger .bars::before, .burger .bars::after { display: block; width: 22px; height: 2px; background: var(--navy); }
  .burger .bars { position: relative; }
  .burger .bars::before, .burger .bars::after { content: ""; position: absolute; left: 0; }
  .burger .bars::before { top: -7px; } .burger .bars::after { top: 7px; }
  .brand { margin-right: 0; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .navtoggle:checked ~ .site-nav { display: flex; }
  .site-nav a { padding: 15px 0; border-top: 1px solid var(--rule); font-size: 12.5px; }
  .head-cta { display: none; }
  .navtoggle:checked ~ .head-cta { display: block; width: 100%; text-align: center; margin-bottom: 8px; padding: 15px 18px; }
}

/* Editorial two-column splits: auto-fit would drop these to one column at
   about 620px, which is right for a phone but wastes a portrait tablet. */
@media (min-width: 900px) { .split-2 { grid-template-columns: 1fr 1fr; } }

/* Ultra-wide: content stays at 1440px by design, but full-bleed dark bands
   and hero photography should still span the whole viewport. They do, because
   .shell is nested inside the section rather than wrapping it. The only thing
   to hold back is runaway line length in long-form prose. */
@media (min-width: 1700px) { .prose { max-width: 74ch; } }

/* Touch targets.
   The 44px minimum is a TOUCH standard, so it is scoped to coarse pointers.
   Applying it everywhere would force 44px of height onto every footer link and
   inline "learn more", which would wreck the tight editorial spacing the
   design depends on for people using a mouse. */
@media (pointer: coarse) {
  .site-nav a, .foot-col a, .more, .brand, .bcrumb a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* .head-cta is deliberately NOT in that list. It sets display: flex, which
     is later in this file than the `display: none` that hides the CTA on a
     narrow screen, so it was un-hiding it: a phone showed the burger AND the
     button side by side, and the button appeared a second time inside the
     menu. Height only here; the menu rule owns whether it is shown at all. */
  .head-cta { min-height: 44px; }
  details summary { min-height: 44px; align-items: center; }
  .more { display: inline-flex; }
  .foot-col { gap: 0; }
  .foot-col a { border-bottom: 1px solid rgba(143,163,194,0.10); }
  .site-foot .foot-col b { margin-bottom: 4px; }
}

/* Skip link: off screen until focused, then the first thing you reach with a
   keyboard. Pairs with the <main id="content"> the generator emits. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: var(--paper); padding: 12px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
.skip:focus { left: 0; color: var(--paper); }

/* ── Cookie banner ───────────────────────────────────────────────────────────
   In avi.css, not site.css. Every one of the 46 pages links avi.css; only
   eight link site.css, so the banner shipped unstyled on the other 38 -- a
   21px-tall pair of default buttons in the document flow, which the browser
   check caught by measuring them.

   Not body.legacy-scoped either: the banner is appended to <body> on every
   page and not all of them carry that class.

   A bar at the bottom rather than a centred modal. The choice is real and has
   to be met, but it is not more important than the page a breeder came to
   read, and a modal that dims the site to ask about measurement overstates
   what is at stake. */
#avi-consent {
  position: fixed; inset: auto 0 0 0; z-index: 1000;
  background: var(--night, #16294B); color: var(--paper, #F7F5F0);
  border-top: 1px solid rgba(247, 245, 240, 0.16);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.18);
}
.avi-consent-in {
  max-width: 1080px; margin: 0 auto; padding: 16px 22px;
  display: flex; gap: 18px 26px; align-items: center; flex-wrap: wrap;
}
#avi-consent p {
  margin: 0; flex: 1 1 380px; font-size: 14px; line-height: 1.55;
  color: rgba(247, 245, 240, 0.86);
}
#avi-consent a { color: var(--gold, #CF962F); text-decoration: underline; }
#avi-consent a:hover { color: #fff; }
.avi-consent-btns { display: flex; gap: 10px; flex: 0 0 auto; }
#avi-consent button {
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 13px 24px; border-radius: 2px;
  cursor: pointer; border: 1px solid transparent;
  transition: background-color .16s, border-color .16s, color .16s;
  /* Both choices are the same size and weight. A decline styled as a whisper
     next to a bright accept is a dark pattern, and consent obtained that way
     is not worth having. */
  min-height: 44px;
}
.avi-consent-yes { background: var(--blue, #2269C3); color: #fff; }
.avi-consent-yes:hover { background: var(--blue-lit, #3A85E8); }
.avi-consent-no {
  background: transparent; color: var(--paper, #F7F5F0);
  border-color: rgba(247, 245, 240, 0.36);
}
.avi-consent-no:hover { border-color: var(--blue-pale, #7FB0FF); }
#avi-consent button:focus-visible {
  outline: 2px solid var(--gold, #CF962F); outline-offset: 2px;
}

@media (max-width: 560px) {
  .avi-consent-in { padding: 14px 18px; gap: 14px; }
  .avi-consent-btns { width: 100%; }
  #avi-consent button { flex: 1 1 0; padding: 13px 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  #avi-consent { animation: avi-consent-in .22s ease-out; }
  @keyframes avi-consent-in { from { transform: translateY(100%); } to { transform: none; } }
}

/* Store links in the body of a page, not just the footer.
   Text buttons rather than the official store badge images: four badge PNGs
   are 200KB of artwork that all say the same thing, they each have their own
   brand guidelines about clear space and minimum size, and at this size the
   wordmark is what gets read anyway. */
.store-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 3vw, 34px);
}
.store-link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 11px 18px; border: 1px solid var(--rule, #DDD6C9); border-radius: 2px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: inherit; text-decoration: none;
  transition: border-color .16s, color .16s, background-color .16s;
}
.store-link:hover { border-color: var(--blue, #2269C3); color: var(--blue, #2269C3); }
.store-link:focus-visible { outline: 2px solid var(--blue, #2269C3); outline-offset: 2px; }