/* ==========================================================================
   Bay Balcony guides: the article template, its blocks and the guide index.

   Loaded on /blog/ pages only, AFTER /styles.css. It uses the site tokens
   (--plum, --lav, --lavink, --wash, --line, --fh, --fb ...) and never
   redefines them, so a change to the brand palette reaches every guide.
   Service pages never download this file.

   Governed by docs/BLOG-MASTER-FRAMEWORK.md chapter 10. A post never carries
   its own <style> block: fix the shared layer, because the next 49 posts
   would need the same fix.

   Contents
     0  page            scroll, skip link, reading progress, tablet dock
     1  layout          the post frame and its three columns
     2  masthead        kicker, title, dek, byline
     3  cover           the drawn balcony, the photo variant, cluster palettes
     4  prose           reading text, links, numbered question sections
     5  blocks          answer, key facts, contents, callouts, facts, tables...
     6  rail            the sticky contents rail (built by /blog.js)
     7  side            the sticky price card
     8  foot            share, about, related, bottom call to action
     9  index           the /blog/ guide index
     10 motion, print
   ========================================================================== */


/* 0  PAGE ================================================================ */

html{scroll-behavior:smooth;scroll-padding-top:20px}
/* The mobile and tablet dock is fixed to the bottom of the window. Without
   this a keyboard user's focused link can sit underneath it (WCAG 2.4.11). */
@media(max-width:999px){html{scroll-padding-bottom:104px}}

.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--plum);color:#fff;font-size:15px;font-weight:600;text-decoration:none;padding:12px 18px;border-radius:11px;transition:top .15s ease}
.skip:focus{top:12px;outline:2.5px solid var(--lav);outline-offset:2px}
.post:focus{outline:none}
/* Selection on the dark surfaces a guide adds (sitewide pair in styles.css). */
.quote-form::selection,.quote-form *::selection,.skip::selection{background:#EDE8FB;color:var(--plum)}

/* Reading progress: a hairline across the top of the window. Pure CSS on a
   scroll timeline where the browser has one; /blog.js writes --p elsewhere. */
.post-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none}
.post-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--lav),var(--plum));transform-origin:0 50%;transform:scaleX(var(--p,0))}
@supports (animation-timeline:scroll()){
  .post-progress span{animation:bb-progress linear both;animation-timeline:scroll(root block)}
}
@keyframes bb-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* The site dock shows below 760px. A guide keeps it up to 999px, the width at
   which the sticky price card takes over, so there is always one way to text. */
@media(min-width:761px) and (max-width:999px){
  .is-post .dock{display:flex;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1.5px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .is-post .dock .btn{flex:1;padding:14px 10px;font-size:15px}
  .is-post{padding-bottom:84px}
}


/* 1  LAYOUT ============================================================== */

/* One column on a phone. Two from 1000px (reading measure + price card).
   Three from 1240px (contents rail + measure + price card).

   One frame for the whole page: the site header, the breadcrumb, the article
   and the site footer all take --frame, so their edges line up at every width
   instead of the 1080px site wrap sitting inside a wider article. The title,
   the cover, the first line of text and the related cards all start at the
   measure's left edge. */
.is-post{
  --measure:680px;
  --side:272px;
  --rail:196px;
  --colgap:clamp(36px,3.6vw,56px);
  --text:#34303F;
  --frame:calc(var(--measure) + 2*var(--gut));
  --lead:0px;
}
.is-post .wrap,.post{max-width:var(--frame)}
.is-post .foot{padding-left:var(--gut);padding-right:var(--gut)}
.post{margin:0 auto;padding:0 var(--gut)}
.post-body{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(30px,4vw,48px)}
.post-body>.prose{min-width:0}
.post-rail,.post-side{display:none}

@media(min-width:1000px){
  .is-post{--frame:calc(var(--measure) + var(--colgap) + var(--side) + 2*var(--gut))}
  .post-body{grid-template-columns:minmax(0,var(--measure)) var(--side);column-gap:var(--colgap);align-items:start}
  .post-body>.prose{grid-column:1;grid-row:1}
  .post-side{display:block;grid-column:2;grid-row:1;position:sticky;top:24px}
}
@media(min-width:1240px){
  .is-post{--frame:calc(var(--rail) + var(--measure) + var(--side) + 2*var(--colgap) + 2*var(--gut));--lead:calc(var(--rail) + var(--colgap))}
  .post-body{grid-template-columns:var(--rail) minmax(0,var(--measure)) var(--side)}
  .post-body>.prose{grid-column:2}
  .post-side{grid-column:3}
  .post-rail{display:block;grid-column:1;grid-row:1}
  /* Two classes deep on purpose: .post-cover sets its margin with the shorthand
     further down this file, and at equal specificity it would win on source
     order and pull the cover back to the rail's edge. */
  .post .post-head,.post .post-cover,.post .post-foot{margin-left:var(--lead)}
  .is-post .crumbs{padding-left:calc(var(--gut) + var(--lead))}
}


/* 2  MASTHEAD ============================================================ */

.post-head{padding-top:clamp(20px,3.4vw,40px)}
.post-kicker{margin:0 0 18px}
.post-kicker a{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:6px 14px 6px 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--lavink);background:var(--wash2);border:1.5px solid var(--line);border-radius:99px;transition:border-color .15s ease}
.post-kicker a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lav)}
.post-kicker a:hover{border-color:var(--lav)}
.post-head h1{font-size:clamp(34px,5.1vw,54px);line-height:1.06;max-width:22ch;margin:0 0 18px;text-wrap:balance}
.post-dek{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--slate);max-width:56ch;margin:0;text-wrap:pretty}

.byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--slate)}
.byline-author{display:flex;align-items:center;gap:12px}
.byline-author img{display:block;width:42px;height:42px;border-radius:12px}
.byline-author strong{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.byline-author span{display:block;font-size:13px;line-height:1.35}
.byline-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0;padding:0;list-style:none}
.byline-meta li{margin:0;white-space:nowrap}
.byline-meta li+li::before{content:"";display:inline-block;width:4px;height:4px;margin:0 11px 2px;border-radius:50%;background:var(--lav);vertical-align:middle}
.byline-read{font-weight:600;color:var(--plum)}


/* 3  COVER =============================================================== */

/* Until a guide has a real photo (task sheet row 43), its cover is drawn:
   the brand mark opened out into a view. Wall on the left, floor slab, a
   glass rail, the bay and a downtown skyline behind. Asymmetric on purpose,
   like the mark: a centred rail of balusters read as a bank or a temple.
   data-photo on the element carries the shot the real photo should be. */
.post-cover{position:relative;margin:clamp(24px,3.2vw,36px) 0 0;border-radius:20px;overflow:hidden;background:var(--wash2)}
.post-cover--drawn{
  --sky-1:#E6E0F8;--sky-2:#E3E9F3;--water-1:#C9D6E6;--water-2:#B4C6DB;--city:rgba(59,49,96,.13);--slab-1:#D6CCE9;--slab-2:#C5B9DB;
  aspect-ratio:21/8;border:1.5px solid var(--line);isolation:isolate}
@media(max-width:760px){.post-cover--drawn{aspect-ratio:16/10;border-radius:16px}}
.post-cover--drawn span{position:absolute;display:block}
.pc-sky{inset:0;background:radial-gradient(46% 70% at 76% 64%,rgba(255,255,255,.62),rgba(255,255,255,0) 72%),linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 62%)}
.pc-city{left:20%;right:0;bottom:39%;height:27%;background:var(--city);clip-path:polygon(0 100%,0 64%,4% 64%,4% 42%,8% 42%,8% 56%,12% 56%,12% 24%,14% 17%,16% 24%,16% 50%,21% 50%,21% 31%,26% 31%,26% 61%,30% 61%,30% 9%,33% 0,36% 9%,36% 52%,41% 52%,41% 36%,46% 36%,46% 67%,51% 67%,51% 27%,55% 27%,55% 45%,60% 45%,60% 15%,64% 15%,64% 59%,69% 59%,69% 39%,74% 39%,74% 71%,80% 71%,80% 47%,85% 47%,85% 65%,91% 65%,91% 53%,100% 53%,100% 100%)}
.pc-water{left:0;right:0;top:61%;bottom:0;background:linear-gradient(180deg,var(--water-1),var(--water-2))}
.pc-glass{left:13%;right:0;top:41%;bottom:19%;border-bottom:2px solid rgba(255,255,255,.65);background-image:linear-gradient(90deg,rgba(255,255,255,.9) 0 2px,transparent 2px),linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.1));background-size:25% 100%,100% 100%}
.pc-weather{left:13%;right:0;top:41%;bottom:19%}
.pc-rail{left:13%;right:-1%;top:39%;height:9px;border-radius:0 3px 3px 0;background:#fff;box-shadow:0 2px 8px rgba(59,49,96,.14)}
.pc-floor{left:0;right:0;bottom:0;height:19%;background:linear-gradient(180deg,var(--slab-1),var(--slab-2));box-shadow:inset 0 3px 0 rgba(255,255,255,.6)}
.pc-wall{left:0;top:0;bottom:0;width:13%;background:linear-gradient(90deg,#FFFFFF 0%,#F4F1FB 55%,#E7E1F4 100%);box-shadow:2px 0 0 #D9D1EC,18px 0 36px rgba(59,49,96,.10)}

/* One quiet palette per cluster, all inside the lavender and bay-blue family. */
[data-cluster="method"] .post-cover--drawn{--sky-1:#E1ECF7;--sky-2:#EDF2F8;--water-1:#BFD4E6;--water-2:#A8C2D9}
[data-cluster="method"] .pc-weather{top:0;background:radial-gradient(16% 30% at 84% 22%,rgba(255,255,255,.95),transparent 70%)}
[data-cluster="damage"] .post-cover--drawn{--sky-1:#E2E7E6;--sky-2:#E9ECEC;--water-1:#C3D1CF;--water-2:#AEBFBD}
[data-cluster="damage"] .pc-weather{background:radial-gradient(30% 34% at 30% 58%,rgba(122,106,78,.22),transparent 70%),radial-gradient(24% 30% at 71% 70%,rgba(96,98,84,.2),transparent 70%),repeating-linear-gradient(102deg,rgba(140,128,102,.12) 0 2px,transparent 2px 12px)}
[data-cluster="cost"] .post-cover--drawn{--sky-1:#EEE6F4;--sky-2:#EFE9F1;--water-1:#CCD5E6;--water-2:#B9C4DB}
[data-cluster="cost"] .pc-weather{top:0;background:radial-gradient(22% 34% at 78% 60%,rgba(255,244,230,.95),transparent 70%)}
[data-cluster="season"] .post-cover--drawn{--sky-1:#D8D8E8;--sky-2:#E4E2EE;--water-1:#BAC6D6;--water-2:#A5B3C7;--city:rgba(59,49,96,.18)}
[data-cluster="season"] .pc-weather{top:0;background:repeating-linear-gradient(106deg,rgba(255,255,255,.5) 0 1px,transparent 1px 15px);opacity:.75}
[data-cluster="local"] .post-cover--drawn{--sky-1:#DFE8F5;--sky-2:#E8EFF7;--water-1:#BCD0E4;--water-2:#A4BCD6;--city:rgba(59,49,96,.22)}

/* A real photo, once it exists: the photo sets its own ratio from its width
   and height attributes, and the caption sits under the frame. */
.post-cover--photo{background:none;overflow:visible;border-radius:0}
.post-cover--photo img{display:block;width:100%;height:auto;border-radius:20px;border:1.5px solid var(--line)}
.post-cover--photo figcaption{margin-top:10px;font-size:13.5px;color:var(--slate);max-width:64ch}


/* 4  PROSE =============================================================== */

.post .prose{font-size:17.5px;line-height:1.72;color:var(--text);counter-reset:bbq}
.post .prose p{margin:0 0 18px;max-width:none;color:var(--text)}
.post .prose li{color:var(--text);margin:0 0 9px}
.post .prose b,.post .prose strong{color:var(--ink);font-weight:600}
.post .prose ul,.post .prose ol{margin:0 0 20px;padding-left:22px}
.post .prose li::marker{color:var(--lavink)}
.post .prose a{color:var(--lavink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:#C6BAE8;transition:text-decoration-color .15s ease}
.post .prose a:hover{text-decoration-color:var(--lavink)}
/* Buttons inside the article are buttons, not prose links. Without these the
   link color above wins on specificity and a lavender label lands on the
   plum calculator at about 1.6:1. */
.post .prose a.btn{color:#fff;text-decoration:none}
.post .prose a.btn--soft{color:var(--plum)}
.post .prose .quote-form a.btn{color:var(--plum)}
.post .prose .quote-form a.btn:hover{color:#fff}
.post .prose .quote-form a.btn--soft,.post .prose .quote-form a.btn--soft:hover{color:#fff}

/* Every question section is numbered, and the number matches the contents
   list and the rail. The FAQ heading is not a question section. */
.post .prose>h2{font-size:clamp(25px,2.9vw,31px);line-height:1.16;margin:58px 0 16px;padding-top:28px;border-top:1px solid var(--line);text-wrap:balance}
.post .prose>h2[id]:not(#faq){counter-increment:bbq}
.post .prose>h2[id]:not(#faq)::before{content:counter(bbq,decimal-leading-zero);content:counter(bbq,decimal-leading-zero) / "";display:block;width:max-content;margin:0 0 12px;padding:3px 11px;font-family:var(--fb);font-size:12.5px;font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--lavink);background:var(--wash2);border-radius:99px}
.post .prose h3{font-size:21px;line-height:1.25;margin:32px 0 10px}
.post .prose>h2+p,.post .prose>h3+p{margin-top:0}


/* 5  BLOCKS ============================================================== */

/* The answer: the post's question, answered in 40 to 80 words (B10). */
.post .prose>.answer{font-size:clamp(18.5px,1.9vw,20.5px);line-height:1.58;color:var(--ink);margin:0 0 6px}
.post .prose>.answer::before{content:"The short answer";content:"The short answer" / "";display:block;margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--lavink)}

/* Key facts */
.keyfacts{margin:28px 0 8px;padding:22px 24px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r)}
.keyfacts .kf-h{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--lavink)}
.keyfacts ul{list-style:none;margin:0;padding:0}
.post .prose .keyfacts li,.keyfacts li{position:relative;margin:0 0 11px;padding-left:22px;font-size:16px;line-height:1.55;color:var(--ink)}
.keyfacts li:last-child{margin-bottom:0}
.keyfacts li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--lav)}
.post .prose .keyfacts .cite,.keyfacts .cite{margin:14px 0 0;font-size:13px;color:var(--slate)}

/* Contents, inline. Open by default so it works with no script; /blog.js
   folds it on a phone. On a wide screen the rail replaces it. */
.toc{margin:24px 0 8px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r)}
.toc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:14px 20px;cursor:pointer;list-style:none;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lavink);border-radius:var(--r)}
.toc summary::-webkit-details-marker{display:none}
.toc summary:focus-visible{outline:2.5px solid var(--lav);outline-offset:2px}
.toc-n{margin-left:auto;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--slate)}
.toc summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin:-4px 2px 0 0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.toc details[open] summary::after{margin-top:4px;transform:rotate(225deg)}
.post .prose .toc ol,.toc ol{list-style:none;counter-reset:t;margin:0;padding:0 20px 10px}
.post .prose .toc li,.toc li{counter-increment:t;margin:0}
.toc a{position:relative;display:block;padding:11px 0 11px 34px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.42;text-decoration:none;color:var(--text,var(--slate))}
.post .prose .toc a{color:var(--text);text-decoration:none}
.toc a::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:12px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--lavink)}
.post .prose .toc a:hover,.toc a:hover{color:var(--lavink)}
@media(min-width:1240px){.post.has-rail .toc{display:none}}

/* Definition */
.define{margin:24px 0;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r)}
.post .prose .define p,.define p{margin:0;color:var(--slate)}
.define dfn{font-style:normal;font-weight:600;color:var(--ink)}

/* Callouts. The label word carries the meaning; the color and icon only
   repeat it (never color alone). A hairline all round, never a side stripe. */
.note,.tip,.warn{margin:28px 0;padding:18px 22px;border:1px solid;border-radius:var(--r);font-size:16px;line-height:1.6}
.note>b:first-child,.tip>b:first-child,.warn>b:first-child{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.note>b:first-child::before,.tip>b:first-child::before,.warn>b:first-child::before{content:"";flex:0 0 auto;width:17px;height:17px;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
.post .prose .note p,.post .prose .tip p,.post .prose .warn p,.note p,.tip p,.warn p{margin:0;color:var(--ink)}
.post .prose .note p+p,.post .prose .tip p+p,.post .prose .warn p+p{margin-top:10px}
.note{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");background:var(--wash);border-color:#DCD4EF}
.note>b:first-child{color:var(--lavink)}
.tip{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.8 2.8L16.2 9.8'/%3E%3C/svg%3E");background:var(--ok-bg);border-color:var(--ok-line)}
.tip>b:first-child{color:var(--ok-ink)}
.warn{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8 2.6 20h18.8z'/%3E%3Cpath d='M12 10v4.4M12 17.2v.1'/%3E%3C/svg%3E");background:var(--warn-bg);border-color:var(--warn-line)}
.warn>b:first-child{color:var(--warn-ink)}

/* Sourced fact: one claim, its publisher, its link (framework 11.1). */
.factbox{margin:28px 0;padding:20px 22px 18px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r)}
.post .prose .factbox p,.factbox p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink)}
.factbox .src{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--slate)}
.factbox .src::before{content:"";flex:0 0 auto;width:15px;height:15px;background:var(--lavink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h9l5 5v11H5z'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h9l5 5v11H5z'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E") center/contain no-repeat}
.post .prose .factbox .src a,.factbox .src a{color:var(--lavink)}

/* Pull quote: words somebody actually said, never our own sentence enlarged. */
.pullquote{margin:36px 0;padding:0}
.pullquote blockquote{margin:0;padding:22px 0 0;border-top:1px solid var(--line);font-family:var(--fh);font-weight:500;font-size:clamp(21px,2.5vw,26px);line-height:1.3;letter-spacing:-.01em;color:var(--plum);font-variation-settings:"SOFT" 40;text-wrap:balance}
.pullquote figcaption{margin-top:14px;padding-bottom:20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--slate)}

/* Tables scroll inside their own frame on a phone. The shadows at either
   edge show there is more; /blog.js makes an overflowing frame focusable so
   a keyboard can scroll it too. */
.tblwrap{margin:26px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1.5px solid var(--line);border-radius:var(--r);background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left center/32px 100% no-repeat local,linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right center/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgba(59,49,96,.16),transparent) left center/12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgba(59,49,96,.16),transparent) right center/12px 100% no-repeat scroll;background-color:#fff}
.tblwrap:focus-visible{outline:2.5px solid var(--lav);outline-offset:3px}
.tblwrap>.tbl{margin:0;min-width:480px;font-size:15.5px}
.tblwrap .tbl th{padding:13px 16px 11px;border-bottom:2px solid var(--line);background:transparent}
.tblwrap .tbl td{padding:12px 16px;line-height:1.45;vertical-align:top}
.tbl td:last-child{font-family:inherit;font-size:inherit;color:var(--slate);white-space:normal}
.tblwrap .tbl td:first-child{color:var(--ink);font-weight:600}
.tbl--price td:last-child{font-family:var(--fh);font-size:18px;color:var(--ink);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.post .prose .tblcap,.tblcap{margin:-14px 0 28px;font-size:13.5px;line-height:1.5;color:var(--slate)}

/* Steps and checklists */
.post .prose .steps{padding-left:0;margin:22px 0}
.post .prose .steps li{margin:0}
.post .prose .steps p{max-width:none}
.checks{list-style:none;margin:22px 0;padding:0}
.post .prose .checks{padding-left:0}
.post .prose .checks li,.checks li{position:relative;margin:0;padding:11px 0 11px 36px;border-bottom:1px solid var(--line);color:var(--text,var(--slate))}
.checks li:first-child{border-top:1px solid var(--line)}
.checks li::before{content:"";position:absolute;left:2px;top:14px;width:17px;height:17px;border:1.8px solid var(--lav);border-radius:5px}
.checks b{color:var(--ink)}

/* Figures and image placeholders */
.fig{margin:28px 0}
.fig img{display:block;width:100%;height:auto;border-radius:var(--r);border:1.5px solid var(--line)}
.fig figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--slate)}
.post .img-ph{font-family:var(--fb);margin:28px 0}

/* Inline call to action: once, around 60% of the way down. */
.cta-inline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:32px 0;padding:18px 20px;background:var(--wash);border:1px solid var(--line);border-radius:var(--r)}
.post .prose .cta-inline p,.cta-inline p{flex:1 1 260px;margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.cta-inline .btn{padding:12px 20px;font-size:15px}

/* Price calculator (every post, after the last question section) */
.quote-form{margin:44px 0 12px;padding:clamp(26px,3.6vw,38px);background:var(--plum);color:#fff;border-radius:20px}
.quote-form h2{margin:0 0 8px;font-size:clamp(24px,3vw,30px);color:#fff}
.post .prose .quote-form>p,.quote-form>p{max-width:46ch;margin:0 0 22px;font-size:16px;line-height:1.55;color:#C3BCDA}
.qf-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px}
.qf-field{display:flex;flex:1 1 120px;flex-direction:column;gap:7px;min-width:110px}
.qf-field label{font-size:13px;font-weight:600;color:#DCD6EE}
.qf-field input{width:100%;min-height:50px;padding:13px 14px;font-family:var(--fb);font-size:16px;color:var(--ink);background:#fff;border:2px solid transparent;border-radius:11px}
.qf-field input:focus-visible{outline:2.5px solid var(--lav);outline-offset:2px}
.qf-field input[aria-invalid="true"]{border-color:#E86A90}
.qf-go{flex:0 0 auto}
.qf-times{flex:0 0 auto;align-self:center;padding-bottom:14px;font-size:18px;color:#C3BCDA}
.post .prose .qf-err,.qf-err{margin:12px 0 0;font-size:14px;font-weight:600;color:#FBD2DD}
.qf-err:empty{margin:0}
.qf-out{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.18)}
.qf-out[hidden]{display:none}
.qf-out strong{font-family:var(--fh);font-size:clamp(32px,5vw,42px);font-weight:600;line-height:1;color:#fff}
.qf-out span{font-size:15px;color:#C3BCDA}
.qf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.quote-form .btn{color:var(--plum);background:#fff;border-color:#fff;text-decoration:none}
.quote-form .btn:hover{color:#fff;background:var(--lav);border-color:var(--lav)}
.quote-form .btn:focus-visible{outline:2.5px solid #fff;outline-offset:3px}
.quote-form .btn--soft{color:#fff;background:transparent;border-color:rgba(255,255,255,.5)}
.quote-form .btn--soft:hover{color:#fff;background:transparent;border-color:#fff}
.post .prose .qf-note,.qf-note{max-width:52ch;margin:18px 0 0;font-size:13.5px;line-height:1.55;color:#C3BCDA}
.post .prose .qf-note a,.qf-note a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}

/* FAQ inside a guide */
.post .prose>#faq{margin-top:64px}
.post .faq{margin:10px 0 0}
.post .faq summary{font-size:17px;line-height:1.45;padding:18px 44px 18px 0;color:var(--ink)}
.post .faq summary:focus-visible{outline:2.5px solid var(--lav);outline-offset:3px;border-radius:6px}
.post .prose .faq-a{max-width:none;padding-bottom:20px;color:var(--text)}

/* Sources */
.sources{margin:44px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.sources .src-h{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--lavink)}
.post .prose .sources ol,.sources ol{margin:0;padding-left:22px}
.post .prose .sources li,.sources li{margin:0 0 8px;font-size:14.5px;line-height:1.55;color:var(--slate)}
.sources a{color:var(--lavink);word-break:break-word}


/* 6  RAIL ================================================================ */

/* Built by /blog.js from the question headings, so it can never disagree
   with them. Only on screens wide enough for three columns. */
.post-rail{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 6px 8px 0;font-size:13.5px;line-height:1.42}
.rail-track{position:relative;display:block;height:1.5px;margin:0 0 12px;background:var(--line);overflow:hidden}
.rail-track i{position:absolute;inset:0;background:var(--lav);transform-origin:0 50%;transform:scaleX(var(--read,0))}
.rail-label{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--lavink)}
.post-rail ol{list-style:none;margin:0;padding:0}
.post-rail li{margin:0}
.post-rail ol a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 6px;padding:6px 0;color:var(--slate);text-decoration:none;border-radius:6px}
.post-rail ol a:hover{color:var(--lavink)}
.post-rail a:focus-visible{outline:2.5px solid var(--lav);outline-offset:2px}
.rail-n{padding-top:1px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--lavink)}
.rail-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.post-rail a[aria-current="true"]{color:var(--plum);font-weight:600}
.post-rail a[aria-current="true"] .rail-n{color:var(--plum)}
.rail-foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--slate)}
.rail-left{display:block;margin-bottom:6px}
.rail-top{font-weight:600;color:var(--plum);text-decoration:none}
.rail-top:hover{color:var(--lavink)}


/* 7  SIDE ================================================================ */

.side-card{padding:24px 22px 20px;background:#fff;border:1.5px solid var(--line);border-radius:20px}
.side-eyebrow{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lavink)}
.side-card .price-num{margin:24px 0 2px;font-size:58px}
.side-card .price-num span{margin-left:4px;font-family:var(--fb);font-size:15px;font-weight:600;letter-spacing:0;color:var(--slate)}
.side-card .price-list{margin:12px 0 16px}
.side-card .price-list li{gap:10px;padding:6px 0;font-size:14.5px;line-height:1.45}
.side-card .tick{width:17px;height:17px;margin-top:2px}
.side-card .btn{width:100%;margin-top:10px;padding:13px 16px;font-size:15px}
.side-note{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--slate);text-align:center}


/* 8  FOOT ================================================================ */

.post-foot{margin-top:clamp(48px,6vw,72px)}

.post-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:0 0 26px;border-bottom:1px solid var(--line)}
.post-share[hidden]{display:none}
.share-label{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lavink)}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;font-family:var(--fb);font-size:14.5px;font-weight:600;line-height:1;color:var(--plum);text-decoration:none;background:#fff;border:1.5px solid var(--line);border-radius:99px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.share-btn:hover{color:var(--lavink);border-color:var(--lav)}
.share-btn:focus-visible{outline:2.5px solid var(--lav);outline-offset:2px}
.share-status{margin:0;font-size:13.5px;font-weight:600;color:var(--ok-ink)}
.share-status:empty{display:none}

.post-about{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;margin:28px 0 0;padding:24px;background:var(--wash);border:1.5px solid var(--line);border-radius:20px}
.post-about img{display:block;width:56px;height:56px;border-radius:14px}
.about-eyebrow{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lavink)}
.post-about h2{margin:0 0 8px;font-size:22px}
.post-about p{max-width:64ch;margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--slate)}
.about-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0!important}
.about-links a{font-size:14.5px;font-weight:600;color:var(--plum);text-decoration:underline;text-decoration-color:#C6BAE8;text-underline-offset:3px}
.about-links a:hover{color:var(--lavink)}
@media(max-width:560px){.post-about{grid-template-columns:1fr}}

.related{margin:32px 0 0;padding:0;border:0}
.related>p{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lavink)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.related-grid a{display:flex;flex-direction:column;gap:8px;min-height:100%;padding:18px 18px 16px;font-size:16px;font-weight:600;line-height:1.35;color:var(--plum);text-decoration:none;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);transition:border-color .15s ease,transform .15s ease}
.related-grid a span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lavink)}
.related-grid a::after{content:"Read the guide";margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600;color:var(--lavink)}
.related-grid a:hover{border-color:var(--lav);transform:translateY(-1px)}
.related-grid a:focus-visible{outline:2.5px solid var(--lav);outline-offset:2px}
.post-foot .cta{margin:36px 0 0}


/* 9  INDEX =============================================================== */

.cats{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.cats a{display:inline-block;padding:9px 15px;font-size:14px;font-weight:600;line-height:22px;color:var(--plum);text-decoration:none;background:var(--wash2);border:1.5px solid var(--line);border-radius:99px}
.cats a:hover{color:var(--lavink);border-color:var(--lav)}
.cats a[aria-current="true"]{background:#fff;border-color:var(--lav);color:var(--lavink)}
.postcard time{display:block;margin-top:10px;font-size:12.5px;color:var(--slate)}
.clusterhead{margin:46px 0 2px;padding-top:28px;border-top:1px solid var(--line)}
.clusterhead h2{margin-bottom:6px}
.clusterhead p{max-width:60ch;margin:0;font-size:15.5px;color:var(--slate)}


/* 10  MOTION, PRINT ====================================================== */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .btn:hover,.related-grid a:hover{transform:none}
  /* The progress line follows the reader's own scrolling and never moves by
     itself, so it is not motion to reduce. Restore its timeline. */
  .post-progress span{animation-duration:auto!important}
}

@media print{
  .skip,.post-progress,.masthead,.crumbs,.post-rail,.post-side,.toc,.cta-inline,.quote-form,.post-share,.related,.post-foot .cta,.foot,.dock{display:none!important}
  body,.is-post{padding:0!important;font-size:11.5pt}
  .post{max-width:none;padding:0}
  .post-head,.post-cover,.post-foot{margin-left:0!important}
  .post-body{display:block}
  .post-cover--drawn{display:none}
  .post .prose{font-size:11.5pt;color:#000}
  .post .prose>h2{break-after:avoid;page-break-after:avoid}
  .tblwrap,.keyfacts,.factbox,.note,.tip,.warn,.checks li{break-inside:avoid;page-break-inside:avoid}
  .tblwrap{overflow:visible;background:none}
  .post .prose a[href^="http"]::after,.sources a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  .checks li::before{border-color:#555}
}