/* RS Granules · Guides (live): the article layer for /guides/ and /ur/guides/, skin B Almanac (Ali's pick, 2026-10-21)
 * Assembled on 2026-10-21 from the template (Blog Post Framework/design/template/css/guide.css, the shared layer, and
 * skin-b.css), without the template's preview chrome. The template keeps all three skins for design review; this file
 * is what guide pages load, after the site's fonts.css, tokens.css, base.css and sections.css.
 * Shared layer: answer first · key facts · contents in the side column · one reading column · sticky side card ·
 * question H2s · sourced fact boxes · hairline callouts · tables in a hairline · calculator · one-open FAQ · sources ·
 * author · related. Skin B: a dark monolith band holds the title beside an engraved crop plate on a cream card; the plate
 * prints in once through a feathered sweep; the reading face is Newsreader (self-hosted, see fonts.css).
 * House rules held here: hairlines all round, never a side stripe or an emphasis fill; headings 800, body 400; no blue
 * tap highlight; reading text never moves; logical properties so Urdu mirrors.
 * Design Taste · pre-emit critique: P5 H5 E4 S5 R5 V4
 */

:root {
  --read: 40rem;            /* ~64 characters of Instrument Sans at 19px */
  --rail: 13.5rem;
  --sidew: 18.5rem;
  --body-size: 1.1875rem;   /* 19px */
  --body-lead: 1.65;
  --frame: var(--gutter);
  --hd-top: 14px;
  --hd-h: 72px;
  --g-ground: var(--paper);  /* the reading ground; skin C deepens it while reading */
  --card: var(--lift);
  --guide-line: var(--line);
  --guide-line-strong: var(--line-strong);
}
* { -webkit-tap-highlight-color: transparent; }
body { background: var(--g-ground); }

/* ---------- reading progress: a hairline that follows the reader (stays under reduced motion: it is not decoration) ---------- */
.progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: calc(var(--z-header) + 2); pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--moss-deep); transform: scaleX(var(--p, 0)); transform-origin: var(--sweep-in); }
@supports (animation-timeline: scroll()) {
  .progress span { animation: g-progress linear both; animation-timeline: scroll(root); }
  @keyframes g-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* header: the site's island; while reading down it steps out of the way, any scroll up brings it back */
.hd.is-away { transform: translateY(calc(-100% - var(--hd-top) - 8px)); }
.hd__link[aria-current="page"] { color: var(--moss-deep); }
.hd .seg--lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-urdu); font-size: 1.05rem; line-height: 1; transition: border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out); }
.hd .seg--lang a:hover { border-color: var(--ink-3); background: var(--paper-2); }
[dir="rtl"] .hd .seg--lang a { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; }

/* ---------- opening (each skin arranges these parts) ---------- */
.g-open { position: relative; }
.g-open__text { position: relative; z-index: 1; }
.g-crumbs { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: var(--text-sm); color: var(--ink-3); }
.g-crumbs a { white-space: nowrap; transition: color var(--d-2) var(--ease-out); }
.g-crumbs a:hover { color: var(--ink); }
.g-crumbs .sep { opacity: 0.6; }
.g-crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--ink-2); }
.g-kicker { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: var(--s-6); padding: 0.32rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.25; transition: border-color var(--d-2) var(--ease-out); }
.g-kicker:hover { border-color: var(--ink-3); }
.g-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--moss); }
.g-title { margin-top: var(--s-5); font-family: var(--font-display); font-variation-settings: "wdth" 104; font-weight: 800; font-size: clamp(2.2rem, 2.4vw + 1.35rem, 3.7rem); line-height: 1.02; letter-spacing: -0.028em; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; max-width: 21ch; }
.g-dek { margin-top: var(--s-5); font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.g-by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--guide-line); max-width: 46rem; }
.g-by__who { display: flex; align-items: center; gap: var(--s-3); }
.g-by__face { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--moss-wash); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; color: var(--moss-deep); }
.g-by__face img { width: 100%; height: 100%; object-fit: cover; }
.g-by__name { display: grid; line-height: 1.3; }
.g-by__name a { font-weight: 700; }
.g-by__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-by__name span { font-size: var(--text-sm); color: var(--ink-3); }
.g-by__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; font-size: var(--text-sm); color: var(--ink-3); }
.g-by__rev { color: var(--moss-deep); font-weight: 600; }
.g-by__rev a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklch, var(--moss-deep) 40%, transparent); }

/* the post's own drawing: a WebP rendered from the art kit (tools/render_scene.mjs), never an SVG on the page */
.g-art { position: relative; overflow: hidden; isolation: isolate; }
.g-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g-art figcaption { position: absolute; inset-inline-start: var(--s-4); bottom: var(--s-4); z-index: 2; }

/* subtle life drawn over the scene: distant birds, wings hinged at the shoulder, flying on two nested periods */
.g-sky { position: absolute; inset: 0 0 auto 0; height: var(--sky-h, 30%); z-index: 1; pointer-events: none; overflow: hidden; }
.g-bird { position: absolute; inset-inline-start: -3%; top: var(--y, 40%); width: var(--w, 16px); animation: g-cross var(--t, 46s) linear var(--d, 0s) infinite; }
.g-bird > i { display: block; animation: g-bob calc(var(--t, 46s) / 7) ease-in-out infinite alternate; }
.g-bird svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-bird path { fill: none; stroke: var(--bird, rgb(23 20 15 / 0.55)); stroke-width: 1.3; stroke-linecap: round; transform-box: fill-box; }
.g-bird .w-l { transform-origin: 100% 100%; animation: g-flap-l var(--f, 0.84s) ease-in-out infinite alternate; }
.g-bird .w-r { transform-origin: 0% 100%; animation: g-flap-r var(--f, 0.84s) ease-in-out infinite alternate; }
@keyframes g-cross { from { transform: translateX(0); } to { transform: translateX(var(--span, 110vw)); } }
@keyframes g-bob { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@keyframes g-flap-l { 0%, 30% { transform: rotate(0deg); } 100% { transform: rotate(-24deg); } }
@keyframes g-flap-r { 0%, 30% { transform: rotate(0deg); } 100% { transform: rotate(24deg); } }
[dir="rtl"] .g-bird { animation-name: g-cross-rtl; }
@keyframes g-cross-rtl { from { transform: translateX(0); } to { transform: translateX(calc(var(--span, 110vw) * -1)); } }

/* ---------- when this matters: the month strip (a post sets its months; data, not decoration) ---------- */
.g-season { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4) var(--s-6); padding-block: var(--s-5); border-bottom: 1px solid var(--guide-line); }
.g-season__h { font-size: var(--text-sm); font-weight: 700; color: var(--ink); white-space: nowrap; }
.g-season__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border: 1px solid var(--guide-line-strong); border-radius: var(--r-pill); overflow: hidden; }
.g-season__months li { position: relative; padding: 0.42rem 0; text-align: center; font-size: var(--text-xs); color: var(--ink-3); border-inline-start: 1px solid var(--guide-line); }
.g-season__months li:first-child { border-inline-start: 0; }
.g-season__months li[data-on] { color: var(--ink); font-weight: 700; }
.g-season__months li[data-on]::after { content: ""; position: absolute; inset-inline: 22%; bottom: 5px; height: 2px; border-radius: 2px; background: var(--moss-deep); }
.g-season__note { font-size: var(--text-sm); color: var(--ink-2); max-width: 26ch; line-height: 1.4; }

/* ---------- body grid: rail · reading column · side card ---------- */
.g-body { display: grid; grid-template-columns: var(--rail) minmax(0, var(--read)) var(--sidew); gap: clamp(2rem, 3.4vw, 4rem); justify-content: center; align-items: start; padding-block: var(--s-16) var(--s-24); padding-inline: var(--gutter); }

/* contents rail: built from the H2s at build time, the current section marked from heading positions (survives jumps) */
.g-rail { position: sticky; top: calc(var(--hd-top) + var(--hd-h) + 2rem); display: grid; grid-template-columns: 2px minmax(0, 1fr); column-gap: var(--s-4); font-size: var(--text-sm); max-height: calc(100svh - 9rem); }
.g-rail__h { grid-column: 1 / -1; margin-bottom: var(--s-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.g-rail__track { position: relative; border-radius: 2px; background: var(--guide-line); overflow: hidden; }
.g-rail__track span { position: absolute; inset: 0; background: var(--moss-deep); transform: scaleY(var(--p, 0)); transform-origin: 50% 0; }
.g-rail ol { display: grid; gap: 0.1rem; overflow-y: auto; scrollbar-width: thin; }
.g-rail a { display: block; padding: 0.42rem 0; line-height: 1.35; color: var(--ink-3); transition: color var(--d-2) var(--ease-out); }
.g-rail a:hover { color: var(--ink); }
.g-rail a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.g-rail__left { grid-column: 2; margin-top: var(--s-4); font-size: var(--text-xs); color: var(--ink-3); }

/* phone contents: one fold under the answer, closed by default */
.g-toc { display: none; border: 1px solid var(--guide-line-strong); border-radius: var(--r-md); }
.g-toc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 52px; padding-inline: var(--s-5); font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.g-toc summary::-webkit-details-marker { display: none; }
.g-toc summary small { font-weight: 500; color: var(--ink-3); font-size: var(--text-sm); }
.g-toc ol { padding: 0 var(--s-5) var(--s-4); display: grid; gap: 0.15rem; counter-reset: t; list-style: none; }
.g-toc li { counter-increment: t; }
.g-toc a { display: flex; gap: 0.7rem; padding: 0.5rem 0; color: var(--ink-2); line-height: 1.35; }
.g-toc a::before { content: counter(t); flex: none; width: 1.4rem; font-weight: 700; color: var(--moss-deep); font-variant-numeric: tabular-nums; }

/* ---------- the reading column ---------- */
.g-prose { min-width: 0; font-size: var(--body-size); line-height: var(--body-lead); color: var(--ink-2); counter-reset: q; }
.g-prose > * + * { margin-top: 1.15em; }
/* the build wraps each question in a section (first paint, below): the heading's own margin opens it, as before */
.g-prose > .g-sec { margin-top: 0; }
.g-sec > * + * { margin-top: 1.15em; }
.g-prose p, .g-prose li { text-wrap: pretty; }
.g-prose strong { color: var(--ink); font-weight: 650; }
.g-prose a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklch, var(--moss-deep) 55%, transparent); transition: text-decoration-color var(--d-2) var(--ease-out); }
.g-prose a:not(.btn):hover { text-decoration-color: var(--ink); }
.g-prose h2 { margin-top: 2.35em; font-family: var(--font-display); font-variation-settings: "wdth" 104; font-weight: 800; font-size: clamp(1.5rem, 0.7vw + 1.2rem, 1.95rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; scroll-margin-top: 7rem; }
.g-prose h2.q { counter-increment: q; }
.g-prose h2.q[data-n]::before { content: attr(data-n); }
.g-prose h2.q::before { content: counter(q, decimal-leading-zero); display: block; margin-bottom: 0.45rem; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--moss-deep); font-variant-numeric: tabular-nums; }
.g-prose h3 { margin-top: 1.8em; font-family: var(--font-display); font-variation-settings: "wdth" 102; font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--ink); }
.g-prose ul:not([class]), .g-prose ol:not([class]) { display: grid; gap: 0.45em; padding-inline-start: 1.2em; }
.g-prose ul:not([class]) { list-style: disc; }
.g-prose ol:not([class]) { list-style: decimal; }
.g-prose ul:not([class]) li::marker { color: var(--moss-deep); }

/* the answer: the first thing a reader (and an answer engine) meets; a wrap-around hairline, never a fill */
.g-answer { padding: var(--s-6); border: 1px solid color-mix(in oklch, var(--moss-deep) 50%, transparent); border-radius: var(--r-md); color: var(--ink); scroll-margin-top: 7rem; }
.g-answer h2 { margin: 0 0 var(--s-3) !important; font-family: var(--font-body) !important; font-size: var(--text-xs) !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--moss-deep) !important; }
.g-answer p { font-size: 1.1875rem; line-height: 1.62; }

/* key facts: paired values in a named aside; every fact also appears in the body */
.g-facts { padding: var(--s-5) var(--s-6); border: 1px solid var(--guide-line-strong); border-radius: var(--r-md); }
.g-facts h2 { margin: 0 0 var(--s-4) !important; font-size: 1.05rem !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.g-facts h2::before { display: none !important; }
.g-facts dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.g-facts dt { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); }
.g-facts dd { margin-top: 0.15rem; font-size: 1rem; font-weight: 650; line-height: 1.4; color: var(--ink); }

/* definition */
.g-define { padding: var(--s-4) var(--s-5); border: 1px solid var(--guide-line); border-radius: var(--r-md); font-size: 1.05rem; line-height: 1.6; }
.g-define dfn { font-style: normal; font-weight: 700; color: var(--ink); }

/* sourced fact: one external claim, its publisher named beneath it */
.g-fact { padding: var(--s-5) var(--s-6); border: 1px solid var(--guide-line-strong); border-radius: var(--r-md); color: var(--ink); }
.g-fact p { font-size: 1.125rem; line-height: 1.55; font-weight: 500; }
.g-fact cite { display: block; margin-top: var(--s-3); font-style: normal; font-size: var(--text-sm); color: var(--ink-3); }
.g-fact cite a { color: inherit !important; }

/* callouts: label word and a hairline carry the meaning; at most three a post, never two in a row */
.g-call { display: grid; gap: 0.25rem; padding: var(--s-4) var(--s-5); border: 1px solid var(--guide-line-strong); border-radius: var(--r-md); }
.g-call b { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.g-call p { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.g-call--tip { border-color: color-mix(in oklch, var(--moss-deep) 45%, transparent); }
.g-call--tip b { color: var(--moss-deep); }
.g-call--warn { border-color: color-mix(in oklch, var(--clay) 55%, transparent); }
.g-call--warn b { color: var(--clay); }
.g-call--law { border-color: color-mix(in oklch, var(--umber) 45%, transparent); }
.g-call--law b { color: var(--umber); }

/* steps and checklist */
.g-steps { display: grid; gap: var(--s-4); counter-reset: s; }
.g-steps > li { counter-increment: s; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.g-steps > li::before { content: counter(s); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--guide-line-strong); font-family: var(--font-display); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.g-steps h3 { margin: 0.35rem 0 0.2rem !important; font-size: 1.1rem !important; }
.g-steps p { font-size: 1.0625rem; }
.g-checks { display: grid; gap: var(--s-3); }
.g-checks li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--s-3); }
.g-checks li::before { content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.3em; border-radius: 6px; border: 1.5px solid var(--moss-deep); background: no-repeat center / 0.8rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23385805' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.5'/%3E%3C/svg%3E"); }

/* tables: enclosed by a hairline; on phones each row becomes a card labelled from the header */
.g-table { min-width: 0; }
.g-table__scroll { overflow-x: auto; border: 1px solid var(--guide-line-strong); border-radius: var(--r-md); scrollbar-width: thin; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.g-table th, .g-table td { padding: 0.85rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--guide-line); }
.g-table tr:last-child > * { border-bottom: 0; }
.g-table thead th { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.g-table tbody th { font-weight: 650; color: var(--ink); }
.g-table td { font-variant-numeric: tabular-nums; }
.g-table caption, .g-table__cap { caption-side: bottom; margin-top: var(--s-3); font-size: var(--text-sm); color: var(--ink-3); text-align: start; }

/* figures: the drawing or photo explains the section beside it; caption says what to take from it */
.g-fig img { width: 100%; height: auto; border-radius: var(--r-lg); background: var(--paper-2); }
.g-fig--plate .g-fig__frame { display: grid; place-items: center; padding: var(--s-6); border-radius: var(--r-lg); background: var(--paper-2); }
.g-fig--plate img { width: auto; max-height: 26rem; background: none; border-radius: 0; }
.g-fig figcaption { margin-top: var(--s-3); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-3); }

/* the calculator: a working tool, figures from the register, answer goes to WhatsApp */
.g-calc { padding: var(--s-6); border: 1px solid var(--guide-line-strong); border-radius: var(--r-lg); background: var(--card); color: var(--ink); }
.g-calc h2 { margin: 0 !important; font-size: 1.35rem !important; }
.g-calc h2::before { display: none !important; }
.g-calc__lede { margin-top: var(--s-2); font-size: 1rem; color: var(--ink-2); }
.g-calc__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.g-calc fieldset { display: grid; gap: var(--s-2); }
.g-calc legend, .g-calc label { font-size: var(--text-sm); font-weight: 650; color: var(--ink); margin-bottom: var(--s-2); }
.g-seg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.g-seg label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; margin: 0; border: 1px solid var(--guide-line-strong); border-radius: var(--r-pill); font-weight: 600; cursor: pointer; transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out); }
.g-seg label:hover { border-color: var(--ink-3); }
.g-seg input { position: absolute; opacity: 0; pointer-events: none; }
.g-seg label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--alabaster); }
.g-seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.g-calc__acres { display: flex; align-items: center; gap: var(--s-3); }
.g-calc input[type="number"] { width: 100%; min-height: 48px; padding: 0 1rem; border: 1px solid var(--guide-line-strong); border-radius: var(--r-sm); background: var(--paper); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.g-calc input[type="number"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.g-calc__out { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--guide-line); }
.g-calc__num { display: grid; }
.g-calc__num strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.5vw + 1.5rem, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.g-calc__num span { font-size: var(--text-sm); color: var(--ink-3); margin-top: 0.35rem; }
.g-calc__note { margin-top: var(--s-4); font-size: var(--text-sm); color: var(--ink-3); }

/* product in this guide: the site's own pack drawing on a family tint */
.g-product { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-5); border: 1px solid var(--guide-line-strong); border-radius: var(--r-lg); color: var(--ink); transition: border-color var(--d-3) var(--ease-out); }
.g-product:hover { border-color: var(--moss-deep); }
.g-product__pack { position: relative; aspect-ratio: 1; border-radius: var(--r-md); background: var(--moss-wash); overflow: hidden; }
.g-product__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.g-product__name { margin-top: 0.2rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; }
.g-product__line { margin-top: 0.35rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.g-product__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.g-product__acts .btn { min-height: 44px; padding-inline: 1.15rem; font-size: 0.95rem; }

/* one inline call to action, about 60% down */
.g-cta-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border: 1px solid var(--guide-line-strong); border-radius: var(--r-lg); color: var(--ink); font-weight: 600; font-size: 1.05rem; line-height: 1.45; }
.g-cta-in .btn { flex: none; }

/* quotation from a source: attribution outside the quote */
.g-quote blockquote { margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" 102; font-weight: 700; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance; }
.g-quote figcaption { margin-top: var(--s-3); font-size: var(--text-sm); color: var(--ink-3); }
.g-quote cite { font-style: normal; }

/* FAQ: one answer open at a time (details[name]); the first opens on load; the answers animate open */
.g-faq { display: grid; border-top: 1px solid var(--guide-line); }
.g-faq details { border-bottom: 1px solid var(--guide-line); }
.g-faq summary { position: relative; display: block; padding: 1.1rem 2.6rem 1.1rem 0; font-family: var(--font-display); font-variation-settings: "wdth" 102; font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--ink); cursor: pointer; list-style: none; transition: color var(--d-2) var(--ease-out); }
[dir="rtl"] .g-faq summary { padding: 1.1rem 0 1.1rem 2.6rem; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: ""; position: absolute; inset-inline-end: 0.2rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -0.75rem; border-radius: 50%; border: 1px solid var(--guide-line-strong); background: no-repeat center / 0.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317140f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); transition: transform var(--d-3) var(--ease-out); }
.g-faq details[open] summary::after { transform: rotate(45deg); }
.g-faq summary:hover { color: var(--moss-deep); }
.g-faq .a { padding-bottom: 1.2rem; font-size: 1.0625rem; color: var(--ink-2); }
.g-faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--d-3) var(--ease-out), content-visibility var(--d-3) allow-discrete; }
.g-faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* sources: numbered in the order first cited; publisher, document, date checked */
.g-sources { padding-top: var(--s-6); border-top: 1px solid var(--guide-line); font-size: var(--text-sm); color: var(--ink-3); }
.g-sources h2 { margin: 0 0 var(--s-3) !important; font-size: 1.05rem !important; }
.g-sources h2::before { display: none !important; }
.g-sources ol { display: grid; gap: 0.55rem; padding-inline-start: 1.2em; list-style: decimal; line-height: 1.5; }
.g-sources a { color: var(--ink-2) !important; }
.g-note-small { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.55; }

/* ---------- the side card: who to talk to, held beside the reading ---------- */
.g-side { position: sticky; top: calc(var(--hd-top) + var(--hd-h) + 2rem); display: grid; gap: var(--s-4); }
.g-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); background: var(--paper-2); border: 1px solid var(--guide-line); transition: border-color var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.g-card:hover { border-color: var(--moss-deep); transform: translateY(-2px); }
.g-card__pack { position: relative; aspect-ratio: 4 / 3.1; border-radius: var(--r-md); background: var(--moss-wash); overflow: hidden; margin-bottom: var(--s-2); }
.g-card__pack svg, .g-product__pack svg { position: absolute; inset: 10%; width: 80%; height: 80%; }
.g-card__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.g-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.12; }
.g-card__line { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); margin-bottom: var(--s-2); }
.g-card .btn { width: 100%; min-height: 46px; }
.g-card__dealer { font-size: var(--text-sm); text-align: center; margin-top: var(--s-1); }
.g-card__dealer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }

/* ---------- after the article ---------- */
.g-after { padding-block: 0 var(--s-24); }
.g-after__in { display: grid; gap: var(--s-16); max-width: calc(var(--read) + var(--sidew) + clamp(2rem, 3.4vw, 4rem)); margin-inline: auto; }
.g-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.g-share p { font-weight: 700; color: var(--ink); margin-inline-end: var(--s-2); }
.g-share .btn { min-height: 44px; padding-inline: 1.1rem; font-size: 0.95rem; }
.g-share__status { font-size: var(--text-sm); color: var(--moss-deep); min-height: 1.4em; }

.g-author { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--guide-line-strong); border-radius: var(--r-lg); }
.g-author__face { width: 5rem; height: 5rem; border-radius: 50%; overflow: hidden; background: var(--moss-wash); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; color: var(--moss-deep); }
.g-author__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.g-author h2 { margin-top: 0.2rem; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; }
.g-author p { margin-top: var(--s-2); color: var(--ink-2); line-height: 1.6; }
.g-author__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: var(--s-3); font-size: var(--text-sm); font-weight: 600; }
.g-author__links a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }

.g-related h2, .g-dealer h2, .g-close h2 { font-family: var(--font-display); font-variation-settings: "wdth" 104; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); text-wrap: balance; }
.g-related h2 { font-size: clamp(1.6rem, 1vw + 1.2rem, 2.2rem); margin-bottom: var(--s-6); }
.g-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.g-pc { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-5); border: 1px solid var(--guide-line); border-radius: var(--r-lg); background: var(--card); color: var(--ink); transition: border-color var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.g-pc:hover { border-color: var(--moss-deep); transform: translateY(-3px); }
.g-pc__img { aspect-ratio: 3 / 2; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; background: var(--paper-2); }
.g-pc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-5) var(--ease-out); }
.g-pc:hover .g-pc__img img { transform: scale(1.035); }
.g-pc__k { padding-inline: var(--s-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--moss-deep); }
.g-pc__t { padding-inline: var(--s-2); font-family: var(--font-display); font-variation-settings: "wdth" 102; font-weight: 800; font-size: 1.15rem; line-height: 1.2; text-wrap: balance; }
.g-pc__m { padding-inline: var(--s-2); font-size: var(--text-sm); color: var(--ink-3); }

/* the dealer band: one dark moment near the end (a colour switch is punctuation, not a pattern) */
.g-dealer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; padding: clamp(1.75rem, 3vw, 3rem); border-radius: var(--r-xl); background: var(--brown); color: var(--alabaster); }
.g-dealer h2 { color: var(--alabaster); font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.4rem); }
.g-dealer p { margin-top: var(--s-3); color: var(--alabaster-2); line-height: 1.6; }
.g-dealer ul { display: grid; gap: var(--s-3); }
.g-dealer li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-3); color: var(--alabaster); line-height: 1.5; }
.g-dealer li::before { content: ""; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--brown-line); background: no-repeat center / 0.8rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2c847' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.5'/%3E%3C/svg%3E"); }
.g-dealer__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.g-dealer ::selection { background: var(--moss-on-brown); color: var(--brown); }

.g-close { text-align: center; display: grid; justify-items: center; gap: var(--s-4); padding-block: var(--s-8) 0; }
.g-close h2 { font-size: clamp(1.8rem, 1.6vw + 1.2rem, 2.8rem); max-width: 20ch; }
.g-close p { color: var(--ink-2); max-width: 46ch; }
.g-close__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.g-disclaimer { max-width: var(--read); margin: var(--s-8) auto 0; font-size: var(--text-sm); color: var(--ink-3); text-align: center; line-height: 1.55; }

/* ---------- the guides hub ---------- */
.g-hub-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-8); }
.g-hub-chips .chip { text-decoration: none; }
.g-hub { display: grid; gap: var(--s-20); padding-block: var(--s-16) var(--s-24); }
.g-hub-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: var(--s-3); border: 1px solid var(--guide-line); border-radius: var(--r-xl); background: var(--card); color: var(--ink); transition: border-color var(--d-3) var(--ease-out); }
.g-hub-feature:hover { border-color: var(--moss-deep); }
.g-hub-feature__img { aspect-ratio: 3 / 2; border-radius: calc(var(--r-xl) - 8px); overflow: hidden; }
.g-hub-feature__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-5) var(--ease-out); }
.g-hub-feature:hover .g-hub-feature__img img { transform: scale(1.03); }
.g-hub-feature__txt { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-6) var(--s-4) 0; }
[dir="rtl"] .g-hub-feature__txt { padding: var(--s-4) 0 var(--s-4) var(--s-6); }
.g-hub-feature__t { font-family: var(--font-display); font-variation-settings: "wdth" 104; font-weight: 800; font-size: clamp(1.9rem, 1.6vw + 1.3rem, 2.9rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.g-hub-feature__d { font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
.g-hub-feature .g-pc__k, .g-hub-feature .g-pc__m, .g-hub-list .g-pc__k, .g-hub-list .g-pc__m { padding: 0; }
.g-hub-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.g-hub-sec__head h2 { font-family: var(--font-display); font-variation-settings: "wdth" 104; font-weight: 800; font-size: clamp(1.6rem, 1vw + 1.2rem, 2.3rem); letter-spacing: -0.02em; line-height: 1.08; }
.g-hub-sec__head .link { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.g-crop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-3); }
.g-crop-grid a { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-3); border: 1px solid var(--guide-line); border-radius: var(--r-lg); background: var(--card); font-weight: 600; font-size: var(--text-sm); color: var(--ink); transition: border-color var(--d-3) var(--ease-out), color var(--d-3) var(--ease-out); }
.g-crop-grid a:hover { border-color: var(--moss-deep); color: var(--moss-deep); }
.g-crop-grid .glyph { width: 2.25rem; height: 2.25rem; color: var(--moss-deep); }
.g-hub-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.g-hub-list a { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5) var(--s-6); border: 1px solid var(--guide-line-strong); border-radius: var(--r-lg); color: var(--ink); transition: border-color var(--d-3) var(--ease-out); }
.g-hub-list a:hover { border-color: var(--moss-deep); }
.g-hub-list__t { font-family: var(--font-display); font-variation-settings: "wdth" 102; font-weight: 800; font-size: 1.2rem; line-height: 1.2; text-wrap: balance; }
.is-hub .g-open .g-title { max-width: 16ch; }
@media (max-width: 999px) {
  .g-hub-feature { grid-template-columns: minmax(0, 1fr); }
  .g-hub-feature__txt { padding: var(--s-2) var(--s-3) var(--s-4); }
  .g-hub-list { grid-template-columns: minmax(0, 1fr); }
  .g-hub { gap: var(--s-16); }
}

/* ---------- Urdu: Nastaliq needs room; headings stay in Gulzar; numerals stay Western (policy) ---------- */
:lang(ur) .g-title { font-family: var(--font-urdu); font-weight: 400; font-variation-settings: normal; letter-spacing: 0; font-size: clamp(1.9rem, 2vw + 1.2rem, 3rem); line-height: 1.75; max-width: 24ch; }
:lang(ur) .g-dek { font-size: 1.25rem; line-height: 2.05; }
:lang(ur) .g-prose { font-size: 1.25rem; line-height: 2.15; }
:lang(ur) .g-prose h2, :lang(ur) .g-prose h3, :lang(ur) .g-faq summary, :lang(ur) .g-related h2, :lang(ur) .g-dealer h2, :lang(ur) .g-close h2, :lang(ur) .g-pc__t, :lang(ur) .g-card__name, :lang(ur) .g-product__name, :lang(ur) .g-author h2, :lang(ur) .g-quote blockquote, :lang(ur) .g-calc__num strong { font-family: var(--font-urdu); font-weight: 400; font-variation-settings: normal; letter-spacing: 0; line-height: 1.9; }
:lang(ur) .g-prose h2.q::before, :lang(ur) .g-rail__h, :lang(ur) .g-answer h2, :lang(ur) .g-card__eyebrow, :lang(ur) .g-author__eyebrow, :lang(ur) .g-pc__k, :lang(ur) .g-product__eyebrow, :lang(ur) .g-call b { letter-spacing: 0; text-transform: none; font-family: var(--font-urdu); font-weight: 400; }
:lang(ur) .g-answer h2 { font-size: 1rem !important; }
:lang(ur) .g-answer p, :lang(ur) .g-facts dd, :lang(ur) .g-call p, :lang(ur) .g-faq .a { line-height: 2.05; }
:lang(ur) .g-season__months li { font-size: 0.8rem; }
:lang(ur) .num, :lang(ur) bdi { font-family: var(--font-body); }

/* ---------- motion preferences: drawings rest finished, birds hold still, nothing slides ---------- */
@media (prefers-reduced-motion: reduce) {
  .g-bird, .g-bird > i, .g-bird path { animation: none !important; }
  .g-bird { display: none; }
  .hd.is-away { transform: none; }
  .g-pc:hover, .g-card:hover { transform: none; }
}

/* ---------- re-compose, never squeeze ---------- */
@media (max-width: 1239px) {
  .g-body { grid-template-columns: minmax(0, var(--read)) var(--sidew); }
  .g-rail { display: none; }
  .g-toc { display: block; }
}
@media (max-width: 999px) {
  :root { --body-size: 1.0625rem; }
  .g-body { grid-template-columns: minmax(0, 1fr); padding-top: var(--s-10); }
  .g-side { position: static; }
  .g-side .g-card { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; }
  .g-side .g-card__pack { grid-row: 1 / span 4; aspect-ratio: 1; margin: 0; padding: var(--s-2); }
  .g-side .g-card .btn, .g-side .g-card__dealer { grid-column: 1 / -1; }
  .g-season { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .g-season__note { max-width: none; }
  .g-cards { grid-template-columns: minmax(0, 1fr); }
  .g-dealer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .g-by__meta { width: 100%; }
  .g-facts dl { grid-template-columns: minmax(0, 1fr); }
  .g-cta-in { flex-direction: column; align-items: stretch; }
  .g-cta-in .btn, .g-close__acts .btn, .g-dealer__acts .btn, .g-product__acts .btn { width: 100%; }
  .g-calc__row { grid-template-columns: minmax(0, 1fr); }
  .g-product { grid-template-columns: minmax(0, 1fr); }
  .g-product__pack { aspect-ratio: 16 / 9; }
  .g-author { grid-template-columns: minmax(0, 1fr); }
  .g-season__months { grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: var(--r-md); }
  .g-season__months li:nth-child(7) { border-inline-start: 0; }
  .g-season__months li:nth-child(-n+6) { border-bottom: 1px solid var(--guide-line); }
  .g-table--cards thead { display: none; }
  .g-table--cards .g-table__scroll { border: 0; overflow: visible; }
  .g-table--cards table, .g-table--cards tbody, .g-table--cards tr, .g-table--cards th, .g-table--cards td { display: block; }
  .g-table--cards tr { padding: var(--s-4); border: 1px solid var(--guide-line-strong); border-radius: var(--r-md); }
  .g-table--cards tr + tr { margin-top: var(--s-3); }
  .g-table--cards tbody th { padding: 0 0 var(--s-2); border: 0; font-family: var(--font-display); font-size: 1.05rem; }
  .g-table--cards td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-3); padding: 0.45rem 0; border-bottom: 1px solid var(--guide-line); }
  .g-table--cards td:last-child { border-bottom: 0; }
  .g-table--cards td::before { content: attr(data-label); font-size: var(--text-sm); color: var(--ink-3); font-weight: 600; }
}

/* ---------- print: keep the answer, facts, tables and sources; print link targets ---------- */
@media print {
  .hd, .progress, .g-rail, .g-side, .g-after, .ft, .g-sky, .g-share, .g-draft { display: none !important; }
  .g-body { display: block; padding: 0; }
  .g-faq details { display: block; } .g-faq details > * { display: block; }
  .g-sources a::after { content: " (" attr(href) ")"; }
}

/* ---------- skin B · Almanac ---------- */
/* --plate: the cream a plate decodes to (cut-plates.py flattens on #f3efe4; WebP returns #f3eee5), so card and plate meet without an edge */
:root { --font-read: "Newsreader", "Iowan Old Style", Georgia, serif; --plate: #f3eee5; }
.g-open { display: grid; grid-template-columns: minmax(0, 1fr) min(30vw, 21rem); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: calc(var(--hd-top) + var(--hd-h) + 3rem) max(var(--gutter), calc((100vw - var(--shell)) / 2 + var(--gutter))) var(--s-16); background: var(--brown); color: var(--alabaster); }
.g-open ::selection { background: var(--moss-on-brown); color: var(--brown); }
.g-open .g-crumbs { color: var(--alabaster-2); }
.g-open .g-crumbs [aria-current] { color: var(--alabaster); }
.g-open .g-kicker { border-color: var(--brown-line); }
.g-open .g-kicker:hover { border-color: var(--alabaster-2); }
.g-open .g-kicker i { background: var(--moss-on-brown); }
.g-open .g-dek { color: var(--alabaster-2); }
.g-open .g-by { border-top-color: var(--brown-line); }
.g-open .g-by__face { background: var(--brown-3); color: var(--moss-on-brown); }
.g-open .g-by__name span, .g-open .g-by__meta { color: var(--alabaster-2); }
.g-open .g-by__rev { color: var(--moss-on-brown); }
.g-open .g-by__rev a { text-decoration-color: color-mix(in oklch, var(--moss-on-brown) 45%, transparent); }
.g-open .g-art { aspect-ratio: 3 / 4; border-radius: var(--r-md); background: var(--plate); padding: var(--s-5); box-shadow: 0 34px 60px -34px rgb(0 0 0 / 0.7); }
.g-open .g-art img { object-fit: contain; }
.g-open .g-sky { display: none; }
/* the plate prints in once: a soft edge sweeps down the card the first time it is seen */
.js .g-open .g-art img { -webkit-mask: linear-gradient(to bottom, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; mask: linear-gradient(to bottom, #000 40%, transparent 60%) 0 0 / 100% 250% no-repeat; -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.js .g-open .g-art.is-in img { -webkit-mask-position: 0 0; mask-position: 0 0; transition: mask-position 2.2s var(--ease-soft), -webkit-mask-position 2.2s var(--ease-soft); }

.g-season { max-width: calc(var(--shell) - 2 * var(--gutter)); margin-inline: auto; }
.g-body { grid-template-columns: minmax(0, var(--read)) var(--sidew); }
.g-body > .g-rail { display: none; }
.g-side .g-rail { display: grid; position: static; max-height: none; }
.g-prose { font-family: var(--font-read); font-size: 1.25rem; line-height: 1.62; color: var(--ink); font-optical-sizing: auto; }
.g-prose .g-facts, .g-prose .g-call, .g-prose .g-table, .g-prose .g-calc, .g-prose .g-product, .g-prose .g-cta-in, .g-prose figcaption, .g-prose .g-sources, .g-prose .g-toc, .g-prose .g-faq .a, .g-prose .g-fact cite, .g-prose .g-define { font-family: var(--font-body); }
.g-answer p { font-size: 1.32rem; line-height: 1.55; }
.g-answer { border-color: var(--line-strong); }
.g-card { background: var(--brown); border-color: var(--brown); color: var(--alabaster); }
.g-card:hover { border-color: var(--moss-on-brown); }
.g-card__pack { background: var(--brown-3); }
.g-card__eyebrow, .g-card__line { color: var(--alabaster-2); }
.g-card .btn--ghost { --btn-fg: var(--alabaster); --btn-line: var(--brown-line); --btn-sweep: var(--alabaster); }
.g-card .btn--ghost:hover { color: var(--brown); }
.g-card__dealer a { text-decoration-color: var(--brown-line); }
.g-card ::selection { background: var(--moss-on-brown); color: var(--brown); }

:lang(ur) .g-prose { font-family: var(--font-urdu); font-size: 1.25rem; line-height: 2.15; }

@media (prefers-reduced-motion: reduce) {
  .js .g-open .g-art img { -webkit-mask: none; mask: none; }
}
@media (max-width: 999px) {
  .g-open { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--s-12); }
  .g-open .g-art { width: min(72%, 19rem); justify-self: center; margin-top: var(--s-4); }
  .g-body { grid-template-columns: minmax(0, 1fr); }
  .g-side .g-rail { display: none; }
  .g-season { margin-inline: var(--gutter); }
  .g-prose { font-size: 1.1875rem; }
}

/* ---------- live additions (scripts/lib/guides.mjs, 2026-10-21) ---------- */
/* Urdu words on an English guide are drawn as outlines, so the 208 KB Urdu font loads on Urdu pages only (P7) */
/* one em of the outline is one em of the text around it (the build sets each one's height and baseline) */
.ur-ink { display: inline-block; width: auto; fill: currentColor; overflow: visible; }
.g-open .g-art.g-art--photo { padding: 0; overflow: hidden; background: var(--brown-3); }
.g-open .g-art--photo img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: none; mask: none; }
/* skin B's plates sit whole on the card's cream wherever a guide is shown */
.g-pc__img, .g-hub-feature__img { background: var(--plate); }
.g-pc__img img, .g-hub-feature__img img { object-fit: contain; padding: 4% 8%; }
/* the other language's twin, under the dek (the header hides its language switch on phones) */
.g-twin { margin-top: var(--s-5); font-size: var(--text-sm); color: var(--alabaster-2); }
.g-twin a { color: var(--alabaster); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brown-line); }
.g-twin a:hover { text-decoration-color: var(--alabaster-2); }
.g-by__face img { width: 100%; height: 100%; object-fit: cover; }
.g-author__face img { width: 100%; height: 100%; object-fit: cover; }
/* hubs: a cluster's guides in one grid; the empty case never ships (a hub exists only with a live guide) */
.g-hub-sec .g-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.g-hub-intro { max-width: 46rem; font-size: var(--text-md); line-height: 1.6; color: var(--ink-2); }
/* first paint (P8): the body and everything after it are laid out only as they near the screen. On a throttled phone
   the guide spent 1.1 s laying out all 764 elements before its first paint, again after each font arrived (trace,
   2026-10-21); the opening alone is a fraction of that. auto remembers each part's real height once seen. */
.g-body, .g-after { content-visibility: auto; contain-intrinsic-size: auto 2600px; }
/* the body starts on the first screen, so the rule above still lays it out whole; the calculator's form controls added
   about 0.5 s to a throttled phone's LCP (A/B with and without the form, 21 Oct 2026), so it waits for its own turn */
.g-calc { content-visibility: auto; contain-intrinsic-size: auto 520px; }
/* each question section is laid out only as it nears the screen; auto remembers its real height once seen, and the
   contents links were checked to land on their headings after the change (guide.js glides near jumps, cuts far ones) */
.g-sec { content-visibility: auto; contain-intrinsic-size: auto 760px; }
.g-sec.is-on, .g-calc.is-on { content-visibility: visible; }     /* drawn ahead of a contents jump (guide.js reveal) */
/* the outlined Urdu needs no Urdu font: keep its box on the body face so not even Gulzar's Latin slice loads */
.hd .seg--lang a:has(> .ur-ink), [lang="ur"]:has(> .ur-ink) { font-family: var(--font-body); }
/* stock photos carry their photographer and library under the caption (framework 19.5) */
.g-credit { display: block; margin-top: 0.3rem; font-size: var(--text-xs); color: var(--ink-3); }
.g-credit a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.g-credit a:hover { text-decoration-color: currentColor; }
/* the menu button opens the sheet through guide.js; without scripts it would do nothing, so it stays hidden and the
   footer carries the links */
html:not(.js) .hd__menu { display: none !important; }
/* draft builds (node scripts/build-site.mjs --drafts) only: never in website/dist */
.g-draft { position: fixed; inset-block-end: 14px; inset-inline-start: 14px; z-index: 500; padding: 0.55rem 0.9rem; border-radius: var(--r-pill); background: var(--ink); color: var(--alabaster); font: 600 0.8rem/1 var(--font-body); pointer-events: none; }