/*!
 * LyfCalc — theme styles
 * ---------------------------------------------------------------------------
 * WordPress note: this file is the theme stylesheet. Add the standard theme
 * header block (Theme Name, Author, Version, Text Domain…) above this comment.
 *
 * DESIGN RULES BAKED IN — please keep them when adding CSS:
 *  1. Spacing is an 8px grid (8/16/24/32/48/64). 4px is a half-step, used only
 *     for tight pairs such as an icon and its label.
 *  2. Proximity: related items get the smaller gap, unrelated items the larger.
 *  3. Padding INSIDE a card is always <= the margin/gap AROUND it
 *     (cards use 24px padding inside a 24px grid gap).
 *  4. Border radius is always 4px (--radius) — cards, buttons, inputs, chips.
 *  5. Colors: one brand color (--primary) plus greys/whites. No gradients,
 *     no glassmorphism, no shadows.
 *  6. Type scale is fixed (--fs-*). Do not introduce new sizes.
 *  7. Content never exceeds 1120px (--wrap), with 24px gutters (16px on phones).
 *
 * FILE MAP
 *  1. Tokens (:root)          5. Buttons, chips, meta
 *  2. Base / reset            6. Cards + grids
 *  3. Layout helpers          7. Calculator UI (icon, forms, results)
 *  4. Header + navigation     8. Editorial (posts, article, pagination)
 *                             9. Footer   10. Media queries
 * ---------------------------------------------------------------------------
 */

/* 1. TOKENS — change the brand here and it changes everywhere.
      Expose these as customizer settings if editors need control. */
:root{
  --primary:#233E78; --primary-dark:#1b3060; --primary-tint:#eef1f8; --primary-tint-border:#d3dbec;
  --accent-2:#5f77ad; --accent-3:#b9c5df; --ink-on-tint:#22376b;
  --ink:#1f2223; --ink-2:#3c4243; --ink-3:#5f6768; --ink-4:#676f6f; --ink-5:#9aa2a2;
  /* --ink-4 was #8b9393 until 21 Sept 2026. It carries every piece of small
     text on the site: breadcrumbs, post meta and reading times, the byline
     role, footer copy, chip counts, and the unit suffixes on every
     calculator field. At 13.33px it measured 2.95:1 on the page, 3.14:1 on
     white and 2.78:1 on the quote tint, against a 4.5:1 floor, and it was
     the only violation axe reported on any page. #676f6f is the lightest
     value in the same grey family that clears the floor on all four
     backgrounds: 4.84, 5.15, 4.55 and 4.63. It stays lighter than --ink-3,
     so the step between body text and secondary text survives. */
  --line:#e4e6e6; --line-soft:#eceeee; --line-strong:#d2d6d6;
  --bg:#f7f8f8; --surface:#fff; --placeholder:#f2f3f3;
  --radius:4px; --wrap:1120px;
  --fs-xs:11.85px; --fs-sm:13.33px; --fs-p:15px; --fs-h6:16.88px; --fs-h5:18.98px; --fs-h4:21.36px; --fs-h3:24.03px; --fs-h2:27.03px; --fs-h1:30.41px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* 2. BASE / RESET — element defaults so editor (the_content) output is styled
      without extra classes. */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x is clip rather than hidden on purpose. hidden makes html and body
   scroll containers, and a position:sticky element inside a scroll container
   that itself scrolls with the page never engages: the "On this page" card was
   declared sticky for months and quietly scrolled away with the article. clip
   holds back the same sideways overflow without creating a scroll container. */
html,body{margin:0;padding:0;overflow-x:clip;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-p);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark);text-decoration:underline}

/* A link sitting inside a sentence is underlined; a link that is its own thing
   is not. Navy #233e78 against body text at #3c4243 differ by 1.01:1 in
   luminance, so colour alone does not mark a link for anyone who cannot see
   the hue, which is WCAG 1.4.1 and the only Level A failure the audit found
   outside the contact form. Navigation, cards, chips and buttons are not in a
   block of text and keep the clean look: the rule reaches running text only. */
.entry-content p a,.entry-content li a,.entry-content td a,.entry-content th a,
.entry-content blockquote a,.entry-content dd a,.entry-content figcaption a,
.entry p a,.entry li a,.entry td a,.entry th a,.entry blockquote a,
.lede a{text-decoration:underline;text-underline-offset:2px}

/* A button block can land inside content; it is a button, not a sentence. */
.entry-content .wp-block-button__link,.entry .wp-block-button__link{text-decoration:none}
input,select,button{font-family:inherit}
/* Focus. None of this was a violation: the browser's own ring was doing the
   job, which is why it sat in the polish batch and not with the blockers. What
   it was not doing was looking like this site. One ring, in the brand colour,
   offset so it clears the element instead of cutting into it. Against every
   surface it lands on it measures 9.1:1 or better, well past the 3:1 that WCAG
   2.2 asks of a focus indicator.

   :focus-visible rather than :focus, so clicking a button with a mouse does not
   leave a ring behind after the click. Text fields are the exception the browser
   makes for us: they match :focus-visible however they were focused, which is
   right, because somebody who clicked into a field is about to type in it.

   The old rule here was input:focus with outline-offset:-1px, which drew the
   ring inside the field's own border where it had the least room to be seen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* #primary is a scroll target for the skip link, not a control. It carries
   tabindex="-1" and would otherwise match the rule above and draw a ring around
   the entire page. */
#primary:focus-visible{outline:none}

/* A sticky 65px header will happily cover the thing the browser just scrolled
   into view. 88px matches the offset the in-page heading links already use. */
a,button,input,select,textarea,summary,[tabindex]{scroll-margin-top:88px}
::placeholder{color:var(--ink-5)}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:650;line-height:1.3}
h1{font-size:var(--fs-h1);font-weight:680;letter-spacing:-.02em;line-height:1.25}
h2{font-size:var(--fs-h2);font-weight:670;letter-spacing:-.015em}
h3{font-size:var(--fs-h3);font-weight:660;letter-spacing:-.01em}
h4{font-size:var(--fs-h4)}
h5{font-size:var(--fs-h5)}
h6{font-size:var(--fs-h6)}
p{margin:0}
.small{font-size:var(--fs-sm)}
.muted{color:var(--ink-3)}
.muted-2{color:var(--ink-4)}
.num{font-variant-numeric:tabular-nums}
.pretty{text-wrap:pretty}
.measure{max-width:70ch}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.mt-32{margin-top:32px}.mt-64{margin-top:64px}

/* 3. LAYOUT — .container is the 1120px wrapper used on every page.
      .with-aside is the article+sidebar pattern: it is flex-wrap, not a media
      query, so the sidebar drops below the content whenever it no longer fits. */
.container{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding-top:64px;padding-bottom:64px}
.band{background:var(--surface);border-top:1px solid var(--line)}
.band--bottom{background:var(--surface);border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.page-head{padding:32px 24px 48px}
.with-aside{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.with-aside__main{flex:1 1 460px;min-width:0}
.aside{flex:1 1 280px;min-width:0;max-width:100%;position:sticky;top:88px;display:grid;gap:24px}

/* 4. HEADER — .nav is hidden and .burger shown below 900px (see section 10).
      .mobile-menu opens by adding .is-open (main.js). */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-header__inner{max-width:var(--wrap);margin:0 auto;padding:8px 24px;min-height:64px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px}
.brand:hover{text-decoration:none}
.brand__mark{width:28px;height:28px;border-radius:var(--radius);background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font:600 var(--fs-h6)/1 var(--mono)}
.brand__name{font-size:var(--fs-h5);font-weight:650;color:var(--ink);letter-spacing:-.01em}
/* Overflow has to stay visible here. This used to be overflow-x:auto so a long
   menu could scroll sideways, but a scroll container clips on both axes, and
   once the menu gained submenus that silently swallowed every dropdown: the
   panel was in the DOM, styled, and invisible. The header itself wraps, so an
   over-long menu now moves to its own line instead. .nav is display:none below
   the mobile breakpoint anyway, where the slide-out menu takes over. */
.nav{display:flex;gap:24px;align-items:center;flex:1 1 auto;white-space:nowrap}
/* Element-qualified on purpose. WordPress puts a bare "search" class on the
   body of every search results page, so an unqualified .search rule turned the
   whole document into a 240px wide, 36px tall flex box with everything below
   the header clipped away. Only searchform.php uses this class, and always on a
   form, so form.search styles exactly what was meant and can never match body. */
form.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius);padding:0 12px;height:36px;flex:1 1 150px;min-width:140px;max-width:240px;background:var(--bg)}
form.search input{border:0;background:transparent;font-size:var(--fs-sm);width:100%;color:var(--ink)}
/* A magnifier drawn from a circle and one rotated bar, so it needs no icon
   font, no SVG and no request. This used to be the circle alone, with no
   handle, which read as a stray ring rather than as search.

   currentColor on both parts so the lens and the handle can never drift. It
   sits on --ink-4 rather than the --ink-5 it had: at 12px this is carrying the
   meaning of the field, and --ink-5 measures 2.3:1 against the pill. */
.search__glyph{position:relative;width:12px;height:12px;flex:none;color:var(--ink-4);border:1.5px solid currentColor;border-radius:50%}
.search__glyph::after{content:"";position:absolute;top:9px;left:9px;width:5px;height:1.5px;background:currentColor;border-radius:1px;transform:rotate(45deg);transform-origin:left center}
.burger{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;margin-left:auto}
.burger:hover{border-color:var(--primary)}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--surface);padding:16px 24px 24px}
.mobile-menu.is-open{display:block}
.mobile-menu__nav{display:grid;gap:4px;max-width:var(--wrap);margin:0 auto}
.mobile-menu .btn{width:100%;margin-top:12px}

/* 5. BUTTONS + CHIPS — .btn--primary is the only filled colour on the site.
      .chip.is-active is the selected filter state; WP's .current-menu-item /
      .current class can be mapped to it. */
.btn{height:44px;padding:0 24px;border-radius:var(--radius);font-size:var(--fs-p);font-weight:600;cursor:pointer;border:0;display:inline-flex;align-items:center;justify-content:center}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-dark);color:#fff;text-decoration:none}
.btn--ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink-4)}
.btn--sm{height:40px;padding:0 16px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:var(--radius);padding:4px 12px;font-size:var(--fs-sm);cursor:pointer;display:inline-block}
.chip:hover{text-decoration:none;border-color:var(--primary)}
.chip.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.chip--xs{font-size:11px;padding:4px 8px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.eyebrow{font-size:var(--fs-sm);color:var(--primary);font-weight:600}
.dot-sep{width:3px;height:3px;border-radius:50%;background:#c3c9c9;display:inline-block}
.meta{display:flex;gap:8px;align-items:center;margin-bottom:8px;font-size:var(--fs-sm);color:var(--ink-4)}
.breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-4);margin-bottom:16px}
.breadcrumb span[aria-current]{color:var(--ink-2)}
.arrow{color:#c3c9c9}

/* 6. CARDS + GRIDS — grid-3 / grid-4 use auto-fill so a short row keeps card
      width; grid-2 stays auto-fit because the calculator's form|results pair is
      meant to stretch. Column count comes
      from available width, so no per-breakpoint overrides are needed. */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.card--pad{padding:24px}
.card--link{display:block}
.card--link:hover{border-color:var(--primary);text-decoration:none}
.card--tint{background:var(--primary-tint);border-color:var(--primary-tint-border)}
.card--outline{border-color:var(--primary)}
/* auto-fill, not auto-fit: auto-fit collapses the empty tracks, so a category
   holding one or two calculators would stretch those cards across the full row.
   auto-fill keeps the tracks, so a lone card stays card-width and the row fills
   left to right. Column count at --wrap is unchanged for three or more cards.
   .grid-2 deliberately keeps auto-fit — the calculator's form|results pair is
   meant to stretch. */
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list--tight{gap:4px}
.list__link{display:flex;justify-content:space-between;gap:8px;color:var(--ink-2)}
.list__link:hover{color:var(--primary)}

/* 7. CALCULATOR UI
      The icon is pure CSS (no image/SVG asset to ship) — see the .ci markup in
      any HTML file. Forms, result figures, the composition bar and the balance
      chart follow. main.js sets the inline widths/heights on .split-bar i and
      .chart i; everything else is styled here. */
.ci{width:32px;height:32px;border-radius:var(--radius);background:var(--primary-tint);border:1px solid var(--primary-tint-border);display:flex;align-items:center;justify-content:center;flex:none}
.ci__box{display:flex;flex-direction:column;gap:2px;width:14px;padding:3px;border:1.5px solid var(--primary);border-radius:2px;box-sizing:content-box}
.ci__screen{display:block;height:3px;background:var(--primary);border-radius:1px}
.ci__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px}
.ci__keys i{display:block;height:2px;background:var(--accent-2)}

/* Hero */
.hero{padding-top:56px;padding-bottom:56px}
.hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:center}
/* One centred column. Measured rather than full width, because a headline
   running the whole container is unreadable, and centred rather than left
   aligned so the deleted second column does not read as a hole. */
.hero__single{max-width:660px;margin-inline:auto;text-align:center}
.hero__single .hero__search{margin-inline:auto}
.hero__single .chip-row{justify-content:center}

/* Two column hero. The image is the Largest Contentful Paint element, so it is
   sized by its own aspect ratio rather than cropped to a fixed height: explicit
   width and height attributes on the tag, plus height:auto here, let the browser
   reserve the space before the file arrives so the headline beside it does not
   jump. This is deliberately not .hero-image, which carries a fixed height and a
   bottom margin for the guide layout it was written for. */
.hero__media{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius)}
.hero__grid .hero__intro{min-width:0}
.hero__search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.hero__search .input-wrap{flex:1 1 260px}

/* Forms */
.field{display:block}
.field__label{display:block;font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:4px;font-weight:400;}
.field__hint{display:block;font-size:var(--fs-sm);color:var(--ink-4);margin-top:4px}
.input-wrap{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--radius);height:40px;padding:0 0 0 12px;background:var(--surface)}
.input-wrap__prefix{font-size:var(--fs-p);color:var(--ink-4);margin-right:4px}
.input-wrap input{border:0;font-size:var(--fs-p);width:100%;background:transparent}
.select{width:100%;height:40px;border:1px solid var(--line-strong);border-radius:var(--radius);padding:0 8px;font-size:var(--fs-p);background:var(--surface)}
.range{width:100%;accent-color:var(--primary);margin:8px 0 0}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.divider-top{padding-top:16px;border-top:1px solid var(--line-soft)}

/* --- Contact Form 7 -------------------------------------------------------
   CF7 ships almost no styling of its own, so without this the contact page
   renders raw browser controls next to calculators that are carefully styled.
   Borrowed from .input-wrap and .select above rather than invented, so the form
   matches every other field on the site: 40px tall, 4px radius, --line-strong
   border, and the same focus ring. The message box is the one exception, since
   a single-line height would be wrong for it.

   CF7 wraps each control in a <span class="wpcf7-form-control-wrap">, which is
   inline by default and collapses the width of anything inside it. */
.wpcf7{max-width:52ch}
.wpcf7 p{margin:0 0 16px}
/* Each caption is now a <label> wrapping its control (see
   inc/contact-form.php). The paragraph still supplies the spacing, so
   block here only keeps the label from being an inline box around one.
   The consent checkbox keeps its own flex rule, which is more specific. */
.wpcf7 label{display:block}
.wpcf7-form-control-wrap{display:block;margin-top:4px}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea{width:100%;border:1px solid var(--line-strong);border-radius:var(--radius);padding:0 12px;font-size:var(--fs-p);background:var(--surface);color:var(--ink)}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select{height:40px}
.wpcf7 textarea{min-height:160px;padding:12px;line-height:1.6;resize:vertical;font-family:inherit}
/* Consent checkbox. CF7 nests the control as
   .wpcf7-acceptance > .wpcf7-list-item > label > input + .wpcf7-list-item-label,
   all inline, which wraps the second line of the sentence underneath the box
   instead of aligning it with the first. Flex on the label fixes that and the
   checkbox gets a few pixels of top margin so it sits on the first line rather
   than centred against a three line paragraph. */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-acceptance label{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5;cursor:pointer}
.wpcf7 .wpcf7-acceptance input[type="checkbox"]{flex:0 0 auto;margin-top:3px}
.wpcf7 input[type="submit"]{height:44px;padding:0 24px;border:0;border-radius:var(--radius);background:var(--primary);color:#fff;font-size:var(--fs-p);font-weight:600;cursor:pointer}
.wpcf7 input[type="submit"]:hover{background:var(--primary-dark)}
.wpcf7 input[type="submit"]:disabled{opacity:.6;cursor:default}

/* CF7's own status messages. Left as text on a tinted panel rather than the
   plugin's default coloured borders, which do not belong on this site. */
.wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--placeholder);font-size:var(--fs-sm)}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--line-strong)}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--primary-tint-border);background:var(--primary-tint);color:var(--ink-on-tint)}
.wpcf7-not-valid-tip{font-size:var(--fs-sm)}
.wpcf7 input[aria-invalid="true"],
.wpcf7 textarea[aria-invalid="true"]{border-color:var(--ink-3)}
.wpcf7-spinner{margin-left:8px}

/* Results */
.figure-lg{font-size:var(--fs-h1);font-weight:680;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.split-bar{display:flex;height:8px;border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.split-bar i{display:block}
.rows{display:grid;gap:8px}
.rows__row{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-p)}
.rows__row span{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.swatch{width:8px;height:8px;border-radius:2px;display:inline-block}
.chart{display:flex;align-items:flex-end;gap:4px;height:112px}
.chart i{flex:1;background:#dfe4ef;border-radius:2px 2px 0 0;display:block}
.chart i:hover{background:var(--primary)}
.chart__axis{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--ink-4);margin-top:8px}
.formula{font:400 var(--fs-h6)/1.5 var(--mono);color:var(--ink)}

/* 8. EDITORIAL — .entry styles raw the_content() output. .placeholder is the
      grey image stand-in: replace those blocks with the_post_thumbnail(). */
.placeholder{background:var(--placeholder);display:flex;align-items:center;justify-content:center;font:400 var(--fs-sm)/1 var(--mono);color:var(--ink-5)}
.post-card{overflow:hidden}
.post-card__media{aspect-ratio:16/9;border-bottom:1px solid var(--line)}
.post-card__body{padding:24px}
.post-card__title{font-size:var(--fs-h4);font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:8px}
.featured{display:flex;flex-wrap:wrap;overflow:hidden;margin-bottom:32px}
.featured__media{flex:1 1 320px;min-height:240px;border-right:1px solid var(--line)}
.featured__body{flex:1 1 320px;padding:24px;display:flex;flex-direction:column;justify-content:center}
.post-row{display:flex;flex-wrap:wrap;overflow:hidden}
.post-row__media{flex:1 1 160px;max-width:200px;min-height:136px;border-right:1px solid var(--line)}
.post-row__body{flex:1 1 260px;padding:24px;min-width:0}
.entry{font-size:var(--fs-p);color:var(--ink-2)}
.entry p{margin:0 0 16px;max-width:70ch;line-height:1.7}
.entry h2{margin:32px 0 16px}
.entry h3{font-size:var(--fs-h5);margin:0 0 8px}
.entry ul{margin:0 0 24px;padding-left:24px;display:grid;gap:8px;max-width:70ch}
/* Quotations on this site are reproductions of a published standard, not
   emphasis: R905.2.6 of the IRC, a Gypsum Association spec, a manufacturer's
   coverage sheet. The block therefore reads at body size and body color and
   sets itself apart with the tint already used for supporting material
   (.badge, .card--tint, the calculator icon), rather than by being the largest
   run of text on the page. It used to run at --fs-h5, which is the same token
   as .entry h3, in --ink against prose in --ink-2, so the site rendered
   somebody else's words larger and darker than its own.
   Keep in step with .wp-block-quote in blocks.css, which the editor canvas
   uses and which has no .entry to scope against. */
.entry blockquote{margin:24px 0;padding:24px;background:var(--primary-tint);border:1px solid var(--primary-tint-border);border-radius:var(--radius);font-size:var(--fs-p);color:var(--ink-2);line-height:1.7;max-width:70ch}
.entry blockquote p{margin:0 0 16px;max-width:none}
.entry blockquote p:last-of-type{margin-bottom:0}
/* --ink-3, not the --ink-4 the old cite rule used. --ink-4 on this tint is
   2.78:1, which fails WCAG AA for text this size; --ink-3 measures 5.12:1. */
.entry blockquote cite{display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--primary-tint-border);font-size:var(--fs-sm);font-style:normal;color:var(--ink-3)}
.lede{font-size:var(--fs-h5);color:var(--ink-3);margin:0 0 24px;max-width:62ch;line-height:1.55}
.byline{display:flex;align-items:center;gap:8px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:32px}
.byline__avatar{width:32px;height:32px;border-radius:50%;flex:none;display:block;background-color:var(--line-strong);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='12.4' r='5.6' fill='%23fff'/%3E%3Cellipse cx='16' cy='30.6' rx='9.6' ry='8.4' fill='%23fff'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat}
.hero-image{height:min(360px,52vw);min-height:180px;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:32px}
.cta-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.pagination{display:flex;justify-content:center;gap:4px;margin-top:32px}
.pagination .chip{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}

/* 9. FOOTER */
.site-footer{background:var(--surface);border-top:1px solid var(--line)}
.site-footer__inner{padding-top:40px;padding-bottom:32px}
/* h2 rather than h3: on the search and 404 templates there is no h2 in the
   body, so footer h3s made the outline jump h1 to h3. Same size either way. */
/* --ink-4, not --ink-5. This is the disclaimer and the copyright, real text
   on every page, and --ink-5 measures 2.6:1 on white. --ink-5 stays as it is
   for the things that are genuinely decorative: the search glyph, the image
   stand-in, and input placeholders. */
.footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.footer-nav__menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.footer-nav__menu a{font-size:var(--fs-p);color:var(--ink-2)}
.footer-nav__menu a:hover{color:var(--primary)}
/* --fs-xs is the scale's own next step below --fs-sm: the ratio is 1.125
   throughout, and 13.33 / 1.125 is 11.85. --ink-4 measures 5.15:1 on white,
   so the disclaimer still clears AA for normal text at this size. */
.footer-note{margin:0;max-width:90ch;font-size:var(--fs-xs);color:var(--ink-4);line-height:1.65}
.footer-bottom{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--ink-4)}
.footer-bottom p{margin:0}

/* 10. MEDIA QUERIES — only two. Layout is mostly intrinsic (auto-fit grids and
       flex-wrap), so most reflow happens without breakpoints.
       899px = tablet & phone: hamburger nav, sidebar stops sticking.
       599px = phone: tighter gutters and section padding. */
@media (max-width:899px){
  .nav{display:none}
  .burger{display:flex}
  .aside{position:static}

  /* The sidebar wraps below the article once it no longer fits, which puts a
     table of contents after the thing it is meant to introduce. On a phone that
     is the wrong way round: the reader wants to see what is on the page before
     committing to scrolling it. order moves the card up without moving it in the
     document, so the reading order for a screen reader stays article-first.
     Guides override this below, because they have two cards that want two
     different places rather than one block above everything. */
  .aside{order:-1}

  /* Guides only. One column means the two sidebar cards can sit where they are
     actually useful instead of stacked together at the top: contents between the
     image and the text it introduces, related calculators after the text they
     follow up on. display:contents dissolves the article and aside wrappers so
     their children share one column and can be ordered against each other. It
     removes two boxes, not two elements, so the document order and the reading
     order for a screen reader are unchanged, and .entry keeps styling its own
     descendants through inheritance.

     Two desktop declarations have to be restated. align-items is flex-start,
     which on a column axis would shrink every child to the width of its own
     text. flex-wrap is wrap, and a wrapping column container sizes its line
     from content rather than from the container, which let the text run 180px
     wider than the page and scroll sideways. */
  .guide-page .with-aside{flex-direction:column;flex-wrap:nowrap;gap:0;align-items:stretch}
  .guide-page .with-aside__main,
  .guide-page .with-aside>.aside{display:contents}
  .guide-page .entry-content{order:1;margin-top:24px}
  .guide-page .aside>.card{order:2;margin-top:24px}
  .guide-page .aside>.toc-card{order:0;margin-top:0}

  /* .entry-content is a flex item here rather than a block in normal flow, so a
     first heading's top margin no longer collapses out of it and would add to
     the 24px above. */
  .guide-page .entry-content>:first-child{margin-top:0}

  /* Capped tighter here than on desktop. A contents list built from the article
     can run long, and first thing on a phone screen it would otherwise push the
     article itself entirely below the fold. */
  .toc{max-height:40vh}
}
@media (max-width:599px){
  .container,.site-header__inner,.mobile-menu{padding-left:16px;padding-right:16px}
  .section{padding-top:48px;padding-bottom:48px}
  .with-aside{gap:32px}
}
/* Smooth scrolling is set on html for the contents links. Somebody who has
   asked their operating system to reduce motion has asked for exactly this to
   stop, and a long guide's contents jump is the longest animation on the site. */
@media (prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{.site-header,.site-footer,.burger{display:none}}

/* 11. WORDPRESS + LYFCALC ADAPTERS */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:var(--surface);clip:auto!important;clip-path:none;color:var(--ink);display:block;font-size:var(--fs-sm);height:auto;left:16px;padding:8px 12px;top:16px;width:auto;z-index:100000}
.skip-link{border:1px solid var(--line)}

/* #primary carries tabindex="-1" so the skip link moves focus and not just the
   scroll position. Without the attribute the link scrolled the page and left
   focus on itself, so the next Tab went straight back into the header, which is
   the thing the link exists to skip. The ring is suppressed because this is a
   scroll target, not a control: the reader has arrived at the content, and a
   box drawn round the whole page says nothing. */
#primary:focus{outline:none}

/* A table wide enough to scroll is now a tab stop (see
   lyfcalc_focusable_table_regions), so it needs to show where focus is. */
.entry .wp-block-table:focus-visible,.entry-content .wp-block-table:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.site-main{min-height:55vh}
.site-title{color:var(--ink)}
.custom-logo-link{display:inline-flex;align-items:center}
.custom-logo{max-height:30px;width:auto}
/* The footer sets the brand a size down, the way the lettered square it replaced
   was 24px against the header's 28px. */
/* display:flex, so the box is exactly as tall as the logo. .custom-logo-link is
   inline-flex, and an inline-level box sits on the line's baseline, which left
   6.4px of descender space under the logo and made the gap to the menu wrong.
   The header never showed it: its link is a direct flex item of
   .site-header__inner, so it is blockified already. */
.footer-brand{display:flex}
.footer-brand .custom-logo{max-height:28px}
.nav .menu,.mobile-menu .menu{list-style:none;margin:0;padding:0}
.nav .menu{display:flex;gap:24px;align-items:center}
.nav .menu-item a{color:var(--ink-2)}
.nav .current-menu-item>a,.nav .current-menu-ancestor>a,.nav .menu-item a:hover{color:var(--primary);text-decoration:none}
.mobile-menu .menu{display:grid;gap:4px}
.mobile-menu .menu-item a{font-size:var(--fs-h6);color:var(--ink);padding:12px 8px;border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center}
.mobile-menu .menu-item a:hover{background:var(--placeholder);text-decoration:none}

/* --- Submenus -------------------------------------------------------------
   Rule 5 says no shadows, so the dropdown separates itself from the page with a
   border over the white surface rather than by floating above it. It opens on
   hover and on focus-within, so it is reachable by keyboard with no JS. The
   panel sits flush under the parent and carries its own top padding, which
   doubles as the bridge that stops the menu closing as the pointer travels
   down into it. */
.nav .menu-item-has-children{position:relative}
.nav .menu-item-has-children>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;vertical-align:3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transform-origin:65% 65%}
/* The payroll submenu is twelve items and grows with every state added, so it
   scrolls rather than running off the bottom of a laptop screen. */
.nav .sub-menu{position:absolute;top:100%;left:-16px;z-index:60;min-width:232px;max-height:min(70vh,560px);overflow-y:auto;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);opacity:0;visibility:hidden}
.nav .menu-item-has-children:hover>.sub-menu,.nav .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible}
.nav .sub-menu .menu-item a{display:block;padding:8px;border-radius:var(--radius);font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap}
.nav .sub-menu .menu-item a:hover,.nav .sub-menu .menu-item a:focus-visible{background:var(--placeholder);color:var(--primary)}

/* On a phone the tree is already open inside a panel the visitor deliberately
   opened, so hiding the children behind a second tap only adds a step. */
.mobile-menu .sub-menu{list-style:none;margin:0 0 4px;padding:0 0 0 16px;display:grid;gap:2px;border-left:1px solid var(--line)}
.mobile-menu .sub-menu .menu-item a{font-size:var(--fs-sm);color:var(--ink-2);padding:8px}

.search-form.search{margin:0}
.search-form__label{display:none}
.search-form__controls{display:flex;align-items:center;gap:8px;width:100%}
.search-submit{display:none}
.search-field{border:0;background:transparent;font-size:var(--fs-sm);width:100%;color:var(--ink);min-width:0}
.hero__search .search-submit{display:inline-flex}
.hero__search .search{background:transparent;border:0;display:block;flex:1 1 100%;height:auto;max-width:none;min-width:0;padding:0}
.hero__search .search-form__label{display:none}
.hero__search .search-form__controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.hero__search .search__glyph{display:none}
.hero__search .search-field{height:48px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);padding:0 16px;font-size:var(--fs-p)}
.hero__search .search-submit{height:48px;align-items:center;justify-content:center;line-height:1;background:var(--primary);color:#fff;border:0;border-radius:var(--radius);padding:0 24px;font-weight:600;cursor:pointer}
/* The hero submit is a primary button in everything but its class, so it
   hovers like one. It had no hover state at all: the only filled button on
   the site that did not answer the pointer. */
.hero__search .search-submit:hover{background:var(--primary-dark)}

/* The search form comes in two shapes, and the focus ring has to sit on
   whichever of them looks like the control.

   In the header, the 404 and the empty state, the pill is the form: it carries
   the 1px border, the 4px radius and the grey fill, and the field inside it
   carries none of them. So a ring on that inner field draws a hard 194x20
   rectangle inside a rounded 240x36 box, overlapping the pill's own border on
   the right. That is what the global :focus-visible rule from the focus work
   did to this control, and it is the bug this fixes.

   In the hero the arrangement is inverted: the form is a bare flex row with no
   border at all and the 48px field carries the border and the radius, so there
   the ring belongs on the field and the global rule already had it right. The
   last two rules put it back, and they come last on purpose, because they tie
   with the rule above them on specificity and order is what separates them. */
.search-form:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.search-form .search-field:focus-visible{outline:none}
.hero__search .search-form:focus-within{outline:none}
.hero__search .search-field:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.entry-content img,.entry img{border-radius:var(--radius)}
.entry-content table,.entry table{border-collapse:collapse;margin:24px 0;width:100%;display:block;overflow-x:auto}
.entry-content th,.entry-content td,.entry th,.entry td{border:1px solid var(--line);padding:8px 12px;text-align:left}

/* Gutenberg wraps a table in <figure class="wp-block-table">. That figure is the
   scroll container, which leaves the table itself a real table. The rule above
   sets the table to display:block, and a table set to display:block cannot lay
   its own columns out, which is why an eight column table came out cramped and
   unaligned. Those two lines stay as the fallback for a table pasted without
   the figure; everything below is the styled case. */
.entry .wp-block-table,.entry-content .wp-block-table{
  margin:24px 0;max-width:none;overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  /* A table that scrolls silently reads as a table with columns missing, so the
     bar is visible rather than overlaid. */
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
}
.entry .wp-block-table::-webkit-scrollbar,.entry-content .wp-block-table::-webkit-scrollbar{height:8px}
.entry .wp-block-table::-webkit-scrollbar-track,.entry-content .wp-block-table::-webkit-scrollbar-track{background:var(--line-soft)}
.entry .wp-block-table::-webkit-scrollbar-thumb,.entry-content .wp-block-table::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--radius)}

.entry .wp-block-table table,.entry-content .wp-block-table table{
  display:table;width:100%;margin:0;border:0;border-collapse:collapse;
  /* Below this the cells wrap to one word a line, so the figure scrolls
     instead. Kept under the article measure so an ordinary table sits still on
     a desktop and only a genuinely wide one scrolls. */
  min-width:520px;
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums;
}
.entry .wp-block-table th,.entry .wp-block-table td,
.entry-content .wp-block-table th,.entry-content .wp-block-table td{
  border:0;border-bottom:1px solid var(--line-soft);
  padding:8px 16px;text-align:left;vertical-align:top;white-space:nowrap;
  /* A step down from body copy. A table in a guide is a reference the reader
     scans rather than a sentence they read, and the smaller size also buys back
     a column or two of width before the row has to scroll sideways. */
  font-size:var(--fs-sm);
}
/* The same size for a table pasted without Gutenberg's figure wrapper, which the
   fallback rule further up still styles as a plain table. */
.entry table th,.entry table td,
.entry-content table th,.entry-content table td{font-size:var(--fs-sm)}
.entry .wp-block-table thead th,.entry-content .wp-block-table thead th{
  background:var(--bg);border-bottom:1px solid var(--line-strong);
  color:var(--ink-3);font-weight:600;line-height:1.3;
  /* A heading may wrap onto two lines; a value may not. */
  white-space:normal;vertical-align:bottom;
}
.entry .wp-block-table tbody tr:last-child td,.entry-content .wp-block-table tbody tr:last-child td{border-bottom:0}

/* The first column names the row, so it holds still while the numbers scroll
   past it. Without this you lose track of which row you are reading two
   columns in. */
.entry .wp-block-table th:first-child,.entry .wp-block-table td:first-child,
.entry-content .wp-block-table th:first-child,.entry-content .wp-block-table td:first-child{
  position:sticky;left:0;z-index:1;
  background:var(--surface);border-right:1px solid var(--line);
  color:var(--ink);font-weight:600;
}
.entry .wp-block-table thead th:first-child,.entry-content .wp-block-table thead th:first-child{
  background:var(--bg);color:var(--ink-3);
}

/* A Code block outside a card had no styling at all and shipped as bare text.
   The house pattern for showing math is the formula card in blocks.css, which
   still wins inside one because blocks.css loads second; this is only so a
   stray code block never renders looking broken again. */
.entry .wp-block-code,.entry-content .wp-block-code{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:24px 0;max-width:none;overflow-x:auto;
}
.entry .wp-block-code code,.entry-content .wp-block-code code{
  font:400 var(--fs-sm)/1.6 var(--mono);color:var(--ink-2);
  background:none;padding:0;white-space:pre;
}
.page-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.notice{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--primary);border-radius:var(--radius);padding:16px}
.breadcrumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--ink-4);margin-bottom:16px}
.breadcrumbs span:last-child{color:var(--ink-2)}
.archive-description{color:var(--ink-3);max-width:70ch}
.entry-meta{font-size:var(--fs-sm);color:var(--ink-4);margin:0}
.content-card{display:block;min-width:0}
.content-card__title{display:block;font-size:var(--fs-h6);font-weight:650;color:var(--ink);line-height:1.4;margin-bottom:4px}
.content-card__summary{display:block;line-height:1.5}
.content-card__icon{margin-bottom:16px}
.content-card--compact{display:flex;gap:16px}
.content-card--compact .content-card__icon{margin-bottom:0}
.post-card .wp-post-image,.featured .wp-post-image,.post-row .wp-post-image{width:100%;height:100%;object-fit:cover;display:block}
.post-card__media,.featured__media,.post-row__media{background:var(--placeholder)}
.post-card__title{display:block}
.post-card__excerpt{display:block;line-height:1.6}
.placeholder--empty{height:100%;min-height:100%}
.blog-list{display:grid;gap:24px}
.calculator-page{padding-top:32px;padding-bottom:64px}
.calculator-page__intro{margin-bottom:32px}
.related-section{margin-top:64px}
.related-section h2{margin-bottom:24px}
/* Empty state for an archive or a search that found nothing. It had no styles at
   all, so it inherited none of the theme and, sitting inside .grid-3, rendered
   in a single 272px column. It is now a sibling of the grid and looks like the
   cards it replaces. */
/* A list of five links does not need the full 1120px. 52ch matches the
   measure .empty-state already uses for its own body copy. */
.notfound-card{max-width:52ch}

.empty-state{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:48px 24px;text-align:center}
.empty-state h2{font-size:var(--fs-h4);font-weight:660;color:var(--ink);margin:0 0 8px}
.empty-state p{color:var(--ink-3);margin:0 auto;max-width:52ch}
.empty-state form{margin-top:24px;display:flex;justify-content:center}

.pagination .nav-links,.navigation.pagination .nav-links{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:32px}
.page-numbers{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:var(--radius);min-width:36px;height:36px;padding:0 12px;font-size:var(--fs-sm);display:inline-flex;align-items:center;justify-content:center}
.page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
a.page-numbers:hover{text-decoration:none;border-color:var(--primary)}
.guide-terms{display:grid;gap:8px;margin-top:32px;font-size:var(--fs-sm);color:var(--ink-3)}
.guide-terms p{margin:0}
.guide-terms span{font-weight:600;color:var(--ink)}
.guide-page{padding-top:32px;padding-bottom:64px}
.keep-reading{padding-top:32px;border-top:1px solid var(--line)}

@media (max-width:599px){
  .grid-2{grid-template-columns:1fr}
  .content-card--compact{align-items:flex-start}
  .post-row__media{max-width:none;min-height:160px;border-right:0;border-bottom:1px solid var(--line)}
}

/* Calculator category filter tabs. Real links to each archive, styled as a tab
   row; .chip.is-active carries the selected state. */
.category-tabs{align-items:center}
.category-tabs__label{margin-right:8px}
.category-tabs .chip{display:inline-flex;align-items:center;gap:6px}
.category-tabs .chip__count{font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-4);background:var(--placeholder,#f2f3f3);border-radius:999px;padding:1px 6px;line-height:1.5}
.category-tabs .chip.is-active .chip__count{background:rgba(255,255,255,.22);color:#fff}
.category-tabs .chip[aria-current="page"]{font-weight:600}

/* Related calculators / related guides on a single calculator page.
   Mirrors preferred-ui/calculator.html: the reference uses inline styles, these
   are the same values as classes. Both cards are anchors, so every child is a
   block-level span. */
.related-card,.related-guide{display:block;min-width:0}
.related-card__icon{margin-bottom:16px}
.related-card__title,.related-guide__title{display:block;font-size:var(--fs-h6);font-weight:650;color:var(--ink);line-height:1.4}
.related-card__title{margin-bottom:4px}
.related-card__summary{display:block;line-height:1.5}
.related-guide__topic{display:block;margin-bottom:8px}
.related-guide__title{margin-bottom:8px}
.related-guide__meta{display:block}

/* Guide single, matching preferred-ui/blog-single.html.
   The reference sets the aside card headings inline; this is the same value. */
.aside__title{font-size:var(--fs-h6);font-weight:650;margin-bottom:16px}

/* Contents card. The reference shows one entry emphasised and the rest muted;
   main.js moves that state as you scroll, and without JS the first stays marked. */
.toc__link{color:var(--ink-2);display:block}
.toc__link:hover{color:var(--primary)}
.toc__link.is-active{color:var(--ink);font-weight:600}

/* Subheadings are indented and set a shade quieter, so the card shows the shape
   of the article rather than flattening an h3 into a peer of the h2 above it.
   The rule on the left reads as a nesting line without needing a nested list,
   which would fight the flat grid .list already uses for spacing. */
.toc__item--sub{padding-left:12px;border-left:1px solid var(--line);margin-left:1px}
.toc__item--sub .toc__link{font-size:var(--fs-sm)}

/* A contents list can now run long enough to outgrow a sticky sidebar, since it
   is built from the article rather than from three fixed links. Capping it to
   the viewport keeps the card on screen instead of letting its tail disappear
   above the fold with no way to reach it. */
.toc{max-height:calc(100vh - 160px);overflow-y:auto}

/* The contact form card. Held to the same measure as the prose around it, so
   the page reads as one column rather than a paragraph with a full width form
   under it. The sticky guard this carried while the form lived in a sidebar is
   gone with the sidebar, and so is the shortened message box that went with it. */
.contact-card{max-width:70ch;margin:24px 0 32px}
/* .wpcf7 is capped at 52ch globally, which is the right measure for a form sat
   on a bare page. Inside the card the card is already doing the measuring, so
   the cap only leaves a gutter of unused white down the right hand side. */
.contact-card .wpcf7{margin-top:0;max-width:none}

/* The site header is sticky at the top of the viewport and about 65px tall, so
   an anchored heading would otherwise land underneath it and read as though the
   link had jumped to the wrong place. This clears it with room to spare, and
   matches the offset .aside sticks at. */
.entry-content h2[id],.entry-content h3[id],.entry h2[id],.entry h3[id]{scroll-margin-top:88px}

/* "Keep reading" sits below a rule on the guide page. */
.related-section--divided{padding-top:32px;border-top:1px solid var(--line)}

/* A real featured image uses .hero-image, which is sized for the grey stand-in,
   so it needs to fill that box rather than be stretched by it. */
img.hero-image{width:100%;object-fit:cover}

/* 12. GLOSSARY
   The jump index and the definition list on /glossary/, plus the link style
   used wherever a term is auto-linked from a guide or calculator. The terms
   carry scroll-margin because the header is sticky: without it an anchor jump
   lands with the definition hidden behind the header. */
.glossary-index{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:24px;margin-bottom:48px}
.glossary-index__label{margin:0 0 16px}
.glossary-index__chips{display:flex;flex-wrap:wrap;gap:8px}
.glossary-index__chip{text-decoration:none}
.entry-content .glossary-index__chip{text-decoration:none}
.entry-content .glossary__letter{scroll-margin-top:96px;margin:56px 0 8px;font-size:var(--fs-h3);color:var(--ink-3);letter-spacing:.02em}
.entry-content .glossary__letter:first-of-type{margin-top:32px}
.entry-content .glossary__letter + .glossary__term{border-top:0;padding-top:0;margin-top:16px}
.entry-content .glossary__term{scroll-margin-top:96px;margin-top:40px;margin-bottom:8px;padding-top:24px;border-top:1px solid var(--line-soft);font-size:var(--fs-h4)}
.entry-content .glossary__term:first-of-type{border-top:0;padding-top:0}
.entry-content .glossary__term + p{margin-top:0;color:var(--ink-2);max-width:68ch}
/* Scoped to the content wrapper to outrank ".entry-content p a", which sets
   the text-decoration SHORTHAND and so resets the style back to solid. A bare
   .glossary-link (0,0,1,0) loses to it (0,0,1,2) and the dotted rule never
   applied, leaving definition links identical to citations and internal links. */
.entry-content a.glossary-link,.entry a.glossary-link{text-decoration-style:dotted;text-underline-offset:3px}
@media (max-width:599px){
  .glossary-index{padding:16px}
  .entry-content .glossary__term{margin-top:32px}
}