/* godecks.ca, the homeowner edition. Plain static CSS, no build step, no libraries.
   Tokens first, then layout, then the designer, then the printable RFQ. */

:root{
  --paper:#f7f4ee; --card:#ffffff; --deep:#1d2b26; --ink:#22302a; --ink-soft:#5c6a63;
  --accent:#2f6b4f; --accent-dark:#245540; --accent-soft:#e2eee7; --on-accent:#f7fbf8;
  --line:#ddd7cc; --line-strong:#8d8578; --focus:#2f6b4f; --warn:#8a5a12; --warn-soft:#fbf1dd;
  --f-head:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Albert Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:10px; --r-pill:999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px;
  --hdr:66px;
  /* the fault sign: a mistake, and nothing else, is red (sites/_brand/_shared/drawing-semantics.md) */
  --fault:#b42318; --fault-soft:#fdecea; --fault-on:#ffffff;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
/* Anything scrolled into view, by the keyboard or a link, lands below the pinned header and below the
   floating drawing strip when it is showing (design.js sets --dockpad and --dockpadb). */
html{scroll-padding-top:calc(var(--hdr) + 14px + var(--dockpad,0px));scroll-padding-bottom:var(--dockpadb,0px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:16px}}

/* ---------------------------------------------------------------- type */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);margin:0 0 var(--s3)}
h1.display{font-family:var(--f-head);font-weight:600;font-size:clamp(34px,5.4vw,58px);line-height:1.04;letter-spacing:-.01em;margin:0 0 var(--s4);text-wrap:balance}
h2.h{font-family:var(--f-head);font-weight:600;font-size:clamp(25px,3.2vw,36px);line-height:1.15;margin:0 0 var(--s4);text-wrap:balance}
h3.h{font-family:var(--f-head);font-weight:600;font-size:21px;line-height:1.25;margin:0 0 var(--s2)}
.lede{font-size:19px;line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:0 0 var(--s6)}
p{max-width:68ch}
.muted{color:var(--ink-soft)}
.small{font-size:14px}
.tiny{font-size:13px}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-block;font:inherit;font-size:15px;font-weight:600;padding:12px 22px;border-radius:var(--r-pill);border:2px solid transparent;text-decoration:none;cursor:pointer;text-align:center;transition:background-color .15s,border-color .15s,color .15s}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-dark)}
.btn.secondary{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn.secondary:hover{border-color:var(--ink);background:var(--card)}
.btn.small{padding:8px 14px;font-size:14px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* ---------------------------------------------------------------- header and footer */
header.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:var(--s4);min-height:var(--hdr)}
.brand{font-family:var(--f-head);font-weight:600;font-size:24px;text-decoration:none;color:var(--ink);margin-right:auto;white-space:nowrap}
.brand span{color:var(--accent)}
nav.main{display:flex;gap:var(--s6);align-items:center}
nav.main a{font-size:15px;font-weight:600;text-decoration:none;color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.menu-btn{display:none;font:inherit;font-weight:600;background:none;border:2px solid var(--line-strong);border-radius:var(--r-pill);padding:8px 16px;color:var(--ink);cursor:pointer}
@media (max-width:980px){
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:var(--s3) 24px var(--s4)}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:inline-block}
  header.top .cta{display:none}
}
footer.site{border-top:1px solid var(--line);background:var(--card);margin-top:var(--s16)}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s8);padding-block:var(--s12)}
@media (max-width:820px){footer.site .wrap{grid-template-columns:1fr;gap:var(--s6)}}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
footer.site a{text-decoration:none;color:var(--ink-soft)}
footer.site a:hover{color:var(--ink);text-decoration:underline}

/* ---------------------------------------------------------------- sections */
section.band{padding-block:var(--s16)}
section.band+section.band{border-top:1px solid var(--line)}
section.soft{background:var(--accent-soft)}
section.deep{background:var(--deep);color:#eef3ef}
section.deep h2.h,section.deep p,section.deep li{color:#eef3ef}
section.deep .lede{color:#cfdbd4}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);align-items:start}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:var(--s8)}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s6)}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s6) var(--s6)}
.card h3{margin-top:0}
.card p{margin-bottom:0;font-size:15px;color:var(--ink-soft)}
.steps{counter-reset:st;list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4)}
.steps li{counter-increment:st;display:grid;grid-template-columns:44px 1fr;gap:var(--s4);align-items:start}
.steps li::before{content:counter(st);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700}
.steps b{display:block}
.steps p{margin:2px 0 0;font-size:15px;color:var(--ink-soft)}

/* ---------------------------------------------------------------- hero */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s12);align-items:center;padding-block:var(--s12) var(--s16)}
@media (max-width:920px){.hero{grid-template-columns:1fr;gap:var(--s8);padding-block:var(--s8) var(--s12)}}
.hero-art{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2)}
.hero-art svg{display:block;width:100%;height:auto}
.hero-art figcaption{font-size:13px;color:var(--ink-soft);padding:6px 10px 8px;margin:0}
.badges{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s6) 0 0;padding:0;list-style:none}
.badges li{font-size:13px;font-weight:600;background:var(--accent-soft);color:var(--accent-dark);border-radius:var(--r-pill);padding:6px 14px}

/* ---------------------------------------------------------------- notes and callouts */
.note{border-left:4px solid var(--accent);background:var(--accent-soft);padding:var(--s4) var(--s6);border-radius:0 var(--r) var(--r) 0;margin:var(--s6) 0}
.note p:last-child{margin-bottom:0}
.note.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.note h3{margin-top:0}

/* ---------------------------------------------------------------- the designer */
.bench{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--s6);align-items:start;padding-block:var(--s4) var(--s16)}
@media (max-width:980px){.bench{grid-template-columns:minmax(0,1fr)}}
.controls{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.group{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.group>h4{margin:0 0 10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.group>h4 em{display:block;font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;margin-top:3px;color:var(--ink-soft)}
.group h5{margin:14px 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.group h5 em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink-soft)}
.group .hint{margin:6px 0 0;font-size:13px;color:var(--ink-soft);max-width:none}
.field+.field{margin-top:12px}
.field>.flabel{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field>.flabel em{font-style:normal;font-weight:400;color:var(--ink-soft)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{font:inherit;font-size:14px;padding:8px 13px;min-height:38px;border-radius:var(--r-pill);border:2px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.seg button:hover{border-color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);cursor:pointer;padding:0}
.chips button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px var(--card) inset}
.slider{display:flex;align-items:center;gap:12px;font-size:14px}
.slider input[type=range]{flex:1;min-width:0;accent-color:var(--accent);height:26px}
.slider output{min-width:96px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.checks{display:flex;flex-direction:column;gap:10px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer;line-height:1.35}
.checks input{width:20px;height:20px;margin-top:1px;accent-color:var(--accent);flex:none}
.checks .sub{display:block;font-size:13px;color:var(--ink-soft)}
.txt{font:inherit;font-size:15px;width:100%;padding:10px 12px;border:2px solid var(--line-strong);border-radius:var(--r);background:var(--card);color:var(--ink)}
textarea.txt{min-height:80px;resize:vertical}
.starts{display:flex;flex-wrap:wrap;gap:8px}
.starts button{font:inherit;font-size:14px;padding:8px 12px;border-radius:var(--r);border:2px dashed var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.starts button:hover{border-style:solid}

details.adv{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
details.adv>summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:15px;list-style:none;display:flex;align-items:center;gap:10px}
details.adv>summary::-webkit-details-marker{display:none}
details.adv>summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
details.adv[open]>summary::before{content:"-"}
details.adv>summary em{font-style:normal;font-weight:400;font-size:13px;color:var(--ink-soft)}
details.adv .advbody{padding:0 16px 16px;border-top:1px solid var(--line)}
details.adv .advbody .group{border:0;padding:14px 0 0;background:none}
details.adv .advbody .group+.group{border-top:1px solid var(--line)}

.stage{min-width:0}
.canvas{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px;aspect-ratio:800/520}
.canvas svg{display:block;width:100%;height:100%}
.viewbar{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.viewbar button{font:inherit;font-size:14px;min-height:38px;padding:6px 12px;border-radius:var(--r-pill);border:2px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
/* DI-G-D1: the View angle slider comes first and has the view bar's first row to itself, so rotation is the longer camera control at every width; the turn buttons, the view words and the switches follow under it. */
.viewbar input[type=range]{flex:1 1 100%;min-width:0;accent-color:var(--accent)}
.viewbar .vlab{min-width:150px}
@media (max-width:620px){.viewbar .vlab{min-width:0;flex:1 1 100%;text-align:left}}
.readout{margin-top:var(--s3);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s6)}
.readout .desc{margin:0 0 var(--s3);font-size:16px}
.priceline{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);align-items:baseline;border-top:1px solid var(--line);padding-top:var(--s3)}
.priceline b{font-family:var(--f-head);font-size:27px;font-variant-numeric:tabular-nums;line-height:1.1}
.priceline small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.eyesonly{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:4px;padding:2px 7px}
.readout table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.readout td{padding:5px 0;border-top:1px solid var(--line);vertical-align:top}
.readout td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.readout summary{cursor:pointer;font-weight:600;color:var(--accent-dark);margin-top:var(--s3)}
.readout .enotes{margin:var(--s3) 0 0;font-size:13px;color:var(--ink-soft)}
.readout .enotes li{margin-bottom:6px}
.savebar{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.saved{font-size:13px;color:var(--accent-dark);font-weight:600}

/* ---------------------------------------------------------------- questions */
.qgroup{margin-top:var(--s8)}
.qgroup>h3{font-family:var(--f-head);font-size:22px;margin:0 0 var(--s2)}
.qgroup>p.why{margin:0 0 var(--s4);color:var(--ink-soft);font-size:15px;max-width:70ch}
.qlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.qitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s6)}
.qitem .qn{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark)}
.qitem .qq{font-weight:600;margin:4px 0 6px;font-size:16px}
.qitem .qwhy{margin:0 0 10px;font-size:14px;color:var(--ink-soft)}
.qitem .qgood{margin:0 0 10px;font-size:14px;background:var(--accent-soft);border-radius:6px;padding:8px 12px;color:var(--ink)}
.qitem .qgood b{color:var(--accent-dark)}
.blank{border:1px dashed var(--line-strong);border-radius:6px;padding:8px 10px 4px;background:#fffef9}
.blank .blabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.blank .rule{display:block;border-bottom:1px solid var(--line-strong);height:26px}
.blank .rule+.rule{margin-top:2px}
.qpick{display:flex;align-items:center;gap:8px;font-size:14px;margin-top:10px;color:var(--ink-soft)}
.qpick input{width:18px;height:18px;accent-color:var(--accent)}
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);margin-top:var(--s6)}
.toolbar .count{font-weight:600;margin-left:auto}

/* ---------------------------------------------------------------- the RFQ document */
.docwrap{max-width:900px;margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.docwrap{padding-inline:16px}}
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 38px;margin-block:var(--s6) var(--s16);color:#1a1a1a}
@media (max-width:640px){.doc{padding:20px 18px}}
.doc h1{font-family:var(--f-head);font-size:30px;line-height:1.1;margin:0 0 6px}
.doc h2{font-family:var(--f-head);font-size:19px;margin:26px 0 10px;padding-bottom:5px;border-bottom:2px solid #1a1a1a}
.doc h3{font-size:15px;margin:16px 0 6px}
.doc p{font-size:15px;max-width:none}
.doc .dochead{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;align-items:flex-start;border-bottom:3px solid #1a1a1a;padding-bottom:12px}
.doc .dochead .from{font-size:13px;text-align:right;color:#555}
.doc .drawing{border:1px solid #ccc;border-radius:6px;padding:6px;margin:10px 0}
.doc .drawing svg{display:block;width:100%;height:auto}
.doc figcaption{font-size:12px;color:#555;margin-top:4px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0}
.doc th,.doc td{text-align:left;padding:6px 8px;border-bottom:1px solid #ddd;vertical-align:top}
.doc th{width:38%;font-weight:600;background:#f5f3ee}
.doc td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc .fillrow{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:14px;margin-bottom:6px;align-items:end}
.doc .fillrow .fl{font-weight:600}
.doc .fillrow .fv{border-bottom:1px solid #999;min-height:22px;padding:0 2px 2px}
.doc .qblock{margin:0 0 12px;padding:0 0 10px;border-bottom:1px solid #eee;break-inside:avoid}
.doc .qblock .qn{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#555}
.doc .qblock .qq{font-weight:600;font-size:15px;margin:2px 0 8px}
.doc .qblock .ans{border:1px dashed #999;border-radius:4px;padding:6px 8px 2px}
.doc .qblock .ans .al{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#777}
.doc .qblock .ans .line{display:block;border-bottom:1px solid #bbb;height:22px}
.doc .sign{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;margin-top:18px}
@media (max-width:640px){.doc .sign{grid-template-columns:1fr}.doc .fillrow{grid-template-columns:1fr}}
.doc .foot{margin-top:26px;padding-top:10px;border-top:1px solid #ccc;font-size:12px;color:#555}
.docbar{position:sticky;top:var(--hdr);z-index:20;background:var(--paper);border-bottom:1px solid var(--line);padding-block:var(--s3)}
.docbar .wrap{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.docbar .grow{margin-left:auto}
.noprice{background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--r);padding:var(--s3) var(--s4);font-size:14px;margin-block:var(--s4)}
.noprice b{color:var(--warn)}

/* ---------------------------------------------------------------- home: the tool is the hero */
body.home section.live{padding-block:var(--s4) var(--s8)}
body.home section.band{padding-block:var(--s12)}
body.home section.band.tight{padding-block:var(--s8)}

.stagebox{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;overflow:hidden}
.deckshot{min-height:180px}
.deckshot svg{display:block;width:100%;height:auto}
.deckshot.swap{animation:deckin .45s ease}
@keyframes deckin{from{opacity:.2;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

.ticker{position:absolute;left:12px;bottom:12px;display:flex;align-items:baseline;gap:9px;background:var(--deep);color:#eef3ef;border-radius:12px;padding:7px 15px 9px;box-shadow:0 6px 18px rgba(29,43,38,.18)}
.tval{font-family:var(--f-head);font-weight:600;font-size:clamp(28px,8.4vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.tlab{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a6bcb0}

.turn{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;border:2px solid var(--line-strong);background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0}
.turn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.turn:hover{border-color:var(--ink)}

.taps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.tap{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:8px;min-height:96px;padding:12px 12px 11px;border-radius:14px;border:2px solid var(--line-strong);background:var(--card);color:var(--ink);font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s}
.tap:hover{border-color:var(--ink)}
.tap:active{transform:translateY(2px)}
.tap .tv{font-family:var(--f-head);font-weight:600;font-size:clamp(17px,4.8vw,23px);line-height:1.05;font-variant-numeric:tabular-nums}
.tap .tk{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.tap .ic{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tap .sw{width:26px;height:26px;border-radius:8px;border:2px solid rgba(0,0,0,.2);background:#c98b4c}
.tap.go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px rgba(47,107,79,.22)}
.tap.go:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.tap.go .tk{color:rgba(247,251,248,.82)}

.flow{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:var(--s4) 0 0;padding:0}
.flow li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 2px;text-align:center}
.flow li+li::before{content:"";position:absolute;left:-5px;top:26px;width:8px;height:8px;border-right:2px solid var(--line-strong);border-top:2px solid var(--line-strong);transform:rotate(45deg)}
.flow .fi{width:30px;height:30px;fill:none;stroke:var(--accent-dark);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.flow span{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}

.chipsrow{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:var(--s3) 0 0;padding:0}
.chipsrow li{font-size:12px;font-weight:600;background:var(--accent-soft);color:var(--accent-dark);border-radius:var(--r-pill);padding:5px 12px}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
@media (max-width:640px){.tiles{grid-template-columns:1fr 1fr}}
.tile{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px;color:inherit;text-decoration:none}
a.tile:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.tile b{display:block;font-family:var(--f-head);font-weight:600;font-size:clamp(26px,6.6vw,38px);line-height:1;font-variant-numeric:tabular-nums}
.tile span{display:block;margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bccdc4}

.golinks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media (max-width:760px){.golinks{grid-template-columns:1fr}}
.golink{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--ink);text-decoration:none}
.golink:hover{border-color:var(--line-strong)}
.golink .ic{width:28px;height:28px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.golink b{display:block;font-family:var(--f-head);font-weight:600;font-size:20px;line-height:1.1}
.golink em{display:block;font-style:normal;font-size:13px;color:var(--ink-soft);margin-top:2px}

.nots{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:var(--s6) 0 0;padding:0}
.nots li{font-size:13px;font-weight:600;color:var(--ink-soft);border:1px dashed var(--line-strong);border-radius:var(--r-pill);padding:6px 14px}

/* Wide screens: the drawing keeps the room, the three tap targets stand beside it so the whole tool
   is still in the first screen. */
@media (min-width:900px){
  .livegrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:var(--s4);align-items:start}
  .taps{grid-template-columns:1fr;margin-top:0;gap:10px}
  .tap{min-height:112px}
  .flow{max-width:760px}
}

@media (max-width:420px){
  .taps{gap:6px}
  .tap{min-height:88px;padding:10px 9px}
  .tap .ic,.tap .sw{width:22px;height:22px}
  .flow li{padding:10px 0}
  .flow span{font-size:11px;letter-spacing:.04em}
}

/* ---------------------------------------------------------------- print */
@media print{
  :root{--paper:#fff}
  body{background:#fff;font-size:9pt;line-height:1.35}
  header.top,footer.site,.docbar,.noscreen,.noprint,.skip,nav.main,.menu-btn{display:none!important}
  .docwrap{max-width:none;padding:0}
  .doc{border:0;border-radius:0;margin:0;padding:0;background:#fff}
  .doc h1{font-size:17pt;margin-bottom:2pt}
  .doc h2{margin:10pt 0 4pt;font-size:11.5pt;padding-bottom:2pt;break-after:avoid}
  .doc h3{font-size:9.5pt;margin:8pt 0 3pt;break-after:avoid}
  .doc p{font-size:8.6pt;margin:0 0 4pt}
  .doc .dochead{padding-bottom:6pt}
  .doc .dochead .from{font-size:8pt}
  .doc td,.doc th{font-size:8.4pt;padding:2pt 4pt}
  .doc table{margin:2pt 0 4pt}
  /* the drawing earns its space but never a whole page */
  .doc .drawing{break-inside:avoid;border-color:#999;padding:2pt;margin:4pt 0}
  .doc .drawing svg{height:66mm;width:auto;max-width:100%;margin:0 auto}
  .doc figcaption{font-size:7.4pt;margin-top:2pt}
  .doc .fillrow{grid-template-columns:120px 1fr;gap:2pt 8pt;margin-bottom:3pt;font-size:8.4pt}
  .doc .fillrow .fv{min-height:14pt}
  .doc .qblock{margin:0 0 6pt;padding-bottom:4pt}
  .doc .qblock .qn{font-size:7.4pt}
  .doc .qblock .qq{font-size:8.8pt;margin:1pt 0 3pt}
  .doc .qblock .ans{padding:3pt 4pt 0}
  .doc .qblock .ans .al{font-size:6.8pt}
  .doc .qblock .ans .line{height:15pt}
  .doc .sign{gap:10pt 24pt;margin-top:10pt}
  .doc .foot{margin-top:12pt;padding-top:5pt;font-size:7.6pt;break-inside:avoid}
  .doc .foot p{font-size:7.6pt}
  .doc .tiny,.doc p.tiny{font-size:7.4pt}
  .doc table,.doc .qblock,.doc .fillrow,.doc .sign{break-inside:avoid}
  a{color:#000;text-decoration:none}
  .stagebox,.taps,.flow,.chipsrow,.turn{display:none!important}
}
@page{margin:14mm}

/* ---------------------------------------------------------------- shared helpers */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- the camera height slider, standing up beside the drawing */
.camcol{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.camic{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink-soft);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.camh{writing-mode:vertical-lr;direction:rtl;flex:1 1 auto;width:26px;min-height:110px;margin:0;padding:0;accent-color:var(--accent);cursor:ns-resize}
.camh.camh-rot{writing-mode:horizontal-tb;direction:ltr;flex:none;width:160px;height:26px;min-height:0;transform:rotate(-90deg);margin:67px -67px}

/* ---------------------------------------------------------------- home: the camera, the turn, the hot tub tap */
.stagebox{display:grid;grid-template-columns:minmax(0,1fr) 38px;grid-template-rows:auto auto;align-items:stretch}
/* Placed by hand: in the page the turn slider comes straight after the drawing (it is the first control), but
   on screen it sits in its own row under the drawing, with the camera height slider beside the drawing. */
.stagebox>.deckshot{grid-column:1;grid-row:1}
.stagebox>.camcol{grid-column:2;grid-row:1}
.stagebox .camcol{padding:14px 0 66px}
.deckshot{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.deckshot.dragging{cursor:grabbing}
/* The price and the view buttons ride along the bottom of the drawing: they share the drawing's grid row and
   sit at its foot, so the turn slider in the row under it is never covered. On a phone they get their own row. */
.herobar{position:relative;z-index:2;grid-column:1 / -1;grid-row:1;align-self:end;margin:0 4px 4px 6px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px;pointer-events:none}
.herobar>*{pointer-events:auto}
.herobar .ticker{position:static;flex-wrap:wrap;row-gap:2px;max-width:100%}
.ticker .tval{font-size:clamp(20px,3.3vw,40px);white-space:nowrap}
.viewbtns{display:flex;gap:8px;margin-left:auto}
.viewbtns .turn{position:static}
.turn .i-play{display:block}
.turn .i-pause{display:none}
.turn.on .i-play{display:none}
.turn.on .i-pause{display:block}
.turn .i-play path{fill:currentColor;stroke:none}
.turn.on{border-color:var(--accent);color:var(--accent-dark)}
.turn.pill{width:auto;padding:0 16px 0 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;font-weight:700;white-space:nowrap}
.turn.pill svg{width:17px;height:17px}
.tap.on{border-color:var(--accent)}
.tap .tt{display:flex;flex-direction:column;gap:3px}
.taps{grid-template-columns:repeat(2,1fr)}
@media (min-width:600px) and (max-width:899px){.taps{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.taps{grid-template-columns:1fr}.tap{min-height:100px}}

/* ---------------------------------------------------------------- home: the turn slider under the drawing
   The first control: a full turn, as wide as the card, with a bigger thumb than the camera height slider,
   which comes second. The words keep a fixed width, so the slider never changes length while it moves,
   and they read as one phrase: "View: from the front right". */
.rotbar{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:0;margin-top:6px;padding:6px 10px 2px 8px;border-top:1px solid var(--line)}
.roti{width:24px;height:24px;flex:none;fill:none;stroke:var(--accent-dark);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rot{flex:1 1 220px;min-width:0;height:40px;margin:0;padding:0;background:transparent;cursor:ew-resize;-webkit-appearance:none;appearance:none;accent-color:var(--accent)}
.rot::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-pill);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line-strong)}
.rot::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--accent);border:3px solid var(--card);box-shadow:0 1px 5px rgba(29,43,38,.35)}
.rot::-moz-range-track{height:8px;border-radius:var(--r-pill);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--line-strong)}
.rot::-moz-range-thumb{box-sizing:border-box;width:28px;height:28px;border-radius:50%;background:var(--accent);border:3px solid var(--card);box-shadow:0 1px 5px rgba(29,43,38,.35)}
.rot:hover::-webkit-slider-thumb,.rot:active::-webkit-slider-thumb{background:var(--accent-dark)}
.rot:hover::-moz-range-thumb,.rot:active::-moz-range-thumb{background:var(--accent-dark)}
.rotsay{flex:0 0 19em;font-size:14px;line-height:1.3;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* DI-G-H1: the turn slider is always the longer of the two. While the drawing is under 620 px wide the home draws it in its taller frame (home-hero.js wide()), and the camera height slider standing beside it grows with it; there the words go under the turn slider, which then has its row to itself. The card's content is the drawing plus the 38 px camera column, so under 658 px of content the drawing is under 620 px. */
.stagebox{container-type:inline-size}
@container (max-width:657.98px){.rotsay{flex-basis:100%}}
.rotsay b{color:var(--ink);font-weight:700}

@media (max-width:620px){
  .stagebox .camcol{padding-bottom:14px}
  .herobar{position:static;grid-row:3;align-self:auto;margin:0;padding:6px 4px 4px}
  .rotbar{padding:4px 4px 2px}
}
@media (max-width:420px){.stagebox{grid-template-columns:minmax(0,1fr) 32px}.viewbtns .turn{height:38px}.viewbtns .turn:not(.pill){width:38px}}

/* ---------------------------------------------------------------- designer: the page head */
.pagehead{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s4);row-gap:2px;padding-top:var(--s4)}
.pagehead h1{font-family:var(--f-head);font-weight:600;font-size:clamp(26px,3vw,32px);line-height:1.1;margin:0}
.pagehead .eyebrow{margin:0}
/* the heading lines up with the designer when the designer widens */
@media (min-width:981px){.pagehead:has(+ .bench.drawing-hidden){max-width:1640px}}
@media (min-width:1280px){.pagehead:has(+ .bench.has-right){max-width:1640px}}

/* ---------------------------------------------------------------- designer: the stage
   Wide screens: the controls scroll with the page; the stage column (the drawing, then its own
   scrolling body of panels) is pinned under the header, so a panel under the drawing is never
   behind it. The drawing is capped at half the height under the header, so the body always has room.
   Phones and tablets: one column, in the same order it is read: the drawing, anything placed under it,
   the controls, then the estimate. design.js moves the controls into place, so the order on screen is
   the order in the page. */
#stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"dock" "head" "body"}
.minidock{grid-area:dock}
.stagehead{grid-area:head;min-width:0}
.stagebody{grid-area:body;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--s3)}
.zone{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.zone.empty{display:none}
.bench.no-left{grid-template-columns:minmax(0,1fr)}
.bench.no-left .controls{display:none}
@media (min-width:981px){
  #stage{position:sticky;top:calc(var(--hdr) + 8px);align-self:start;max-height:calc(100vh - var(--hdr) - 8px)}
  .stagebody{overflow-y:auto;margin:0 -6px;padding:12px 6px 16px;scroll-padding-bottom:var(--dockpadb,0px)}
  .stagehead .canvas{max-height:calc((100vh - var(--hdr)) * .5)}
  /* where the browser can measure the box, the white card keeps the full width and the drawing centres in it */
  @supports (height:1cqw){
    .stagehead .canvasbox{container-type:inline-size}
    .stagehead .canvas{aspect-ratio:auto;height:min(calc(100cqw * .65),calc((100vh - var(--hdr)) * .5))}
  }
  .controls [data-pane]{scroll-margin-top:4px}
}
@media (max-width:980px){
  #stage{display:block}
  .stagebody{margin-top:var(--s3)}
}

.canvasrow{display:flex;gap:6px;align-items:stretch}
.canvasbox{position:relative;flex:1 1 auto;min-width:0}
.canvas{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.canvas.dragging{cursor:grabbing}
.stagehead .camcol{width:40px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 0}
.cbadge{position:absolute;left:12px;bottom:12px;background:var(--deep);color:#eef3ef;border-radius:10px;padding:5px 12px 6px;font-family:var(--f-head);font-weight:600;font-size:19px;line-height:1.1;font-variant-numeric:tabular-nums;pointer-events:none;box-shadow:0 4px 12px rgba(29,43,38,.18)}
.cbadge:empty{display:none}
.viewbar .tog[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.viewbar #drawtoggle{margin-left:auto}
@media (max-width:620px){.cbadge{font-size:15px;padding:4px 9px 5px;left:8px;bottom:8px}.viewbar #drawtoggle{margin-left:0}}

/* The readout is a stack of panels now, each its own card, so any of them can move. */
#readout.readout{margin-top:0;background:none;border:0;border-radius:0;padding:0}
.pane,.rpane,.advpane{position:relative}
.rpane{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.rpane>.ptitle{display:none;margin:0;font-family:var(--f-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;padding-right:40px}
.rpane.folded>.ptitle{display:block;cursor:pointer}
.rpane .desc{margin:0 0 var(--s3);font-size:16px;padding-right:34px}
.rpane table{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
.rpane td{padding:5px 0;border-top:1px solid var(--line);vertical-align:top}
.rpane td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.rpane summary{cursor:pointer;font-weight:600;color:var(--accent-dark);padding-right:40px;margin-top:0}
.rpane .enotes{margin:0;padding-right:30px;font-size:13px;color:var(--ink-soft)}
.rpane .enotes li{margin-bottom:6px}
.rpane .savebar{margin-top:0;padding-top:0;border-top:0;padding-right:34px}
.rpane .priceline{border-top:1px solid var(--line)}

/* The Move button in each panel's top corner, and its menu. */
.pmove{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;padding:0}
.pmove:hover,.pmove[aria-expanded="true"]{border-color:var(--line-strong);color:var(--ink);background:var(--paper)}
.pmove svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.group.pane>h4{padding-right:34px}
.advpane>details.adv>summary{padding-right:48px;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center}
.advpane>details.adv>summary em{grid-column:2}
.advpane>.pmove{top:10px}
.pmenu{position:fixed;z-index:60;min-width:220px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 10px 28px rgba(29,43,38,.2);padding:6px;display:flex;flex-direction:column}
.pmenu button{font:inherit;font-size:15px;text-align:left;padding:10px 12px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--ink)}
.pmenu button:hover{background:var(--accent-soft)}
.pmenu button:focus-visible{background:var(--accent-soft);outline:3px solid var(--focus);outline-offset:-3px;border-radius:6px}

/* A folded panel keeps only its title; one tap on the title opens it again. */
.group.folded>:not(h4):not(.pmove){display:none}
.group.folded>h4{margin:0;cursor:pointer}
.rpane.folded>:not(.ptitle):not(.pmove){display:none}

/* Two columns under the drawing, when there is room. */
@media (min-width:900px){
  .bench.split #zoneBelow,.bench.split #readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:start}
}

/* Beside the drawing: a third column on wide screens, and the page gets wider to make room.
   design.js moves the beside-the-drawing zone out of the stage body only while this applies. */
@media (min-width:1280px){
  .bench.has-right{max-width:1640px}
  .bench.has-right #stage{grid-template-columns:minmax(0,1fr) minmax(0,330px);grid-template-areas:"dock right" "head right" "body right";column-gap:var(--s4)}
  .bench.has-right #stage>#zoneRight{grid-area:right;min-height:0;overflow-y:auto;margin:0 -6px;padding:0 6px 16px}
}

/* The drawing hidden on a wide screen: the choices take the wide column and flow into as many
   columns as fit; the strip, the panels under the drawing and the estimate take a narrow one.
   Only the strip stays pinned, so it stays at the top for as long as the choices are on screen. */
@media (min-width:981px){
  .bench.drawing-hidden{grid-template-columns:minmax(0,1fr) minmax(0,340px);max-width:1640px}
  .bench.drawing-hidden #stage{position:static;max-height:none;align-self:stretch}
  .bench.drawing-hidden .stagebody{overflow:visible}
  .bench.drawing-hidden .minidock:not(.corner){position:sticky;top:calc(var(--hdr) + 8px)}
  .bench.drawing-hidden .controls{display:block;columns:300px auto;column-gap:var(--s3)}
  .bench.drawing-hidden .controls>*{break-inside:avoid;margin:0 0 var(--s3)}
  .bench.drawing-hidden.split #zoneBelow,.bench.drawing-hidden.split #readout{display:flex}
  .bench.drawing-hidden.has-right #stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"dock" "head" "body"}
  .bench.drawing-hidden.no-left{grid-template-columns:minmax(0,1fr)}
}

/* The small drawing: a strip at the top of the drawing column, or a card in the corner.
   Picture on the left, the price and one button beside it, so it stays short at any width. */
.minidock{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"thumb price" "thumb show";column-gap:12px;row-gap:4px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px rgba(29,43,38,.18);padding:6px 10px;margin-bottom:var(--s3);z-index:8}
.minithumb{grid-area:thumb;border:0;background:none;padding:0;margin:0;cursor:pointer;line-height:0;border-radius:8px}
.minithumb svg{display:block;height:58px;width:auto}
.miniprice{grid-area:price;align-self:end;font-family:var(--f-head);font-size:19px;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.minidock .btn{grid-area:show;justify-self:start;align-self:start}
.minidock.big{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"thumb thumb" "price show"}
.minidock.big .minithumb svg{width:100%;height:auto;max-height:46vh}
.minidock.big .btn{align-self:center}
.minidock.corner{position:fixed;top:auto;left:auto;right:16px;bottom:16px;width:230px;grid-template-columns:minmax(0,1fr);grid-template-areas:"thumb" "price" "show";margin:0;z-index:25}
.minidock.corner .minithumb svg{width:100%;height:auto}
.minidock.corner.big{width:min(520px,calc(100vw - 32px))}
@media (max-width:980px){
  /* in the page's flow, so it never sits on top of the heading; it sticks once the page scrolls */
  .minidock{position:sticky;top:calc(var(--hdr) + 6px);z-index:25}
  /* floating over the page when the drawing has scrolled away, so nothing jumps */
  .minidock.floating{position:fixed;left:12px;right:12px;margin:0}
  .minidock.corner{top:auto;left:auto}
  .miniprice{font-size:17px}
}
/* held where it pinned once its column ends near the foot of the page; design.js sets top, left and width,
   and puts an empty block of the same size in its place */
#stage>.minidock.held{position:fixed;margin:0;z-index:25}
#stage>.dockspace{grid-area:dock}

@media print{
  .minidock,.dockspace,.pmove,.pmenu,.camcol,.cbadge,.viewbtns,.herobar,.rotbar{display:none!important}
}

/* ---------------------------------------------------------------- a broken rule
   Said in one line under the drawing and first in the notes, under the number of the pin the drawing
   carries on the part that breaks it. The shapes and the meaning are the family fault sign's. */
.faultline{-webkit-print-color-adjust:exact;print-color-adjust:exact;display:flex;gap:10px;align-items:flex-start;margin:8px 0 0;padding:8px 12px;border:2px dashed var(--fault);border-radius:var(--r);background:var(--fault-soft);color:var(--ink);font-size:14px;line-height:1.45}
.faultline b,.enotes li.fault b{color:var(--fault)}
.fpin{-webkit-print-color-adjust:exact;print-color-adjust:exact;flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--fault);color:var(--fault-on);font-size:13px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--card)}
.enotes li.fault{list-style:none;display:flex;gap:8px;align-items:flex-start;color:var(--ink)}
.doc .faultline{margin:4px 0 14px}

/* On a phone, the drawing that floats over the controls is a strip a third of the screen tall (Bigger:
   over half), framed by design.js on the part the panel in use changes. */
@media (max-width:980px){
  .minidock.floating:not(.corner){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"thumb thumb" "price show";row-gap:6px;padding:6px 8px 8px}
  .minidock.floating:not(.corner) .minithumb{width:100%;background:var(--card)}
  .minidock.floating:not(.corner) .minithumb svg{width:100%;height:34vh;max-height:none}
  .minidock.floating.big:not(.corner) .minithumb svg{height:56vh}
  .minidock.floating:not(.corner) .btn{align-self:center}
}

/* The home tile's code value: the figure in the code's unit, its companion small beside it and joined to it by a no-break space. Below 1280 px the companion sits on its own line under the figure, by design: one line does not fit below 600 px nor from 641 to about 1178 px, and one rule for every width under 1280 px lays the tile out the same way at all of them. The figure is never broken by a wrap. */
.tile b small{display:inline-block;font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:0;color:#dfe9e3;white-space:nowrap}
@media (max-width:1279px){.tile b small{display:block;margin-top:4px}}

@media print{
  .faultline{border-width:1.5px}
}