/* Spray & Finish v2: bright workshop tutorial. Gabarito headings, Atkinson Hyperlegible text. */
:root{
  --cream:#FAF6EF;--oat:#F3ECE1;--sand:#E9DCC8;--crust:#D8C6AA;
  --ink:#2B2420;--soft:#5D5048;--teal:#127C78;--teal-deep:#0C5B58;--teal-wash:#DCEFEC;
  --tang:#F08A3C;--tang-deep:#B85C17;--tang-wash:#FDE9D7;
  --white:#fff;--r-lg:26px;--r-md:18px;--r-sm:12px;
  --lift:0 1px 0 rgba(43,36,32,.06),0 14px 30px -18px rgba(43,36,32,.35);
  --head:"Gabarito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --text:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1rem,4vw,2.5rem);--read:42rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:7rem}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.65 var(--text);overflow-x:hidden}
img,video,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:var(--teal-deep);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{color:var(--tang-deep)}
:focus-visible{outline:3px solid var(--tang);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1.08;letter-spacing:-.015em;color:var(--ink);margin:0}
h2{font-size:clamp(1.65rem,1.2rem + 1.6vw,2.35rem);margin:2.6rem 0 .8rem}
h3{font-size:1.3rem;font-weight:700;margin:1.8rem 0 .5rem}
p{margin:0 0 1rem}
ul,ol{padding-left:1.25rem;margin:0 0 1.1rem}
li{margin:.3rem 0}
strong,b{font-weight:700}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:99px;z-index:50}
.skip:focus{left:.5rem}

/* ---------- top bar: brand + calculators pop-over, guide pills underneath ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(250,246,239,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 rgba(43,36,32,.08)}
.topbar-row{display:flex;align-items:center;gap:1rem;max-width:84rem;margin:0 auto;padding:.7rem var(--gut) .35rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font:800 1.32rem/1 var(--head);letter-spacing:-.02em}
.brand svg{width:2.25rem;height:2.25rem;flex:none}
.brand em{font-style:normal;color:var(--tang-deep)}
.tools-pop{margin-left:auto;position:relative}
.tools-pop summary{list-style:none;cursor:pointer;background:var(--teal);color:#fff;font:700 .98rem var(--head);padding:.6rem 1.05rem;border-radius:99px;display:flex;align-items:center;gap:.45rem}
.tools-pop summary::-webkit-details-marker{display:none}
.tools-pop summary::after{content:"";width:.45rem;height:.45rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.tools-pop[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.tools-pop ul{position:absolute;right:0;top:calc(100% + .5rem);width:min(20rem,calc(100vw - 2rem));list-style:none;margin:0;padding:.5rem;background:#fff;border-radius:var(--r-md);box-shadow:0 24px 50px -20px rgba(43,36,32,.45)}
.tools-pop li{margin:0}
.tools-pop a{display:block;padding:.7rem .85rem;border-radius:var(--r-sm);text-decoration:none;color:var(--ink)}
.tools-pop a:hover,.tools-pop a[aria-current]{background:var(--teal-wash)}
.tools-pop a b{display:block;font:700 1.02rem var(--head)}
.tools-pop a span{font-size:.9rem;color:var(--soft)}
.pillbar{max-width:84rem;margin:0 auto;padding:0 var(--gut) .6rem}
.pillbar ul{display:flex;gap:.4rem;list-style:none;margin:0;padding:.15rem 0;overflow-x:auto;scrollbar-width:none}
.pillbar ul::-webkit-scrollbar{display:none}
.pillbar li{margin:0;flex:none}
.pillbar a{display:block;padding:.4rem .9rem;border-radius:99px;background:var(--oat);color:var(--ink);text-decoration:none;font:600 .95rem var(--head);white-space:nowrap}
.pillbar a:hover{background:var(--sand)}
.pillbar a[aria-current]{background:var(--ink);color:var(--cream)}

/* ---------- own silent clips ---------- */
.film{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:16/9}
.film video{width:100%;height:100%;object-fit:cover}
.film-toggle{position:absolute;right:.8rem;bottom:.8rem;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:rgba(250,246,239,.92);cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px -6px rgba(0,0,0,.4)}
.film-toggle span{width:.8rem;height:.9rem;border:solid var(--ink);border-width:0 .25rem}
.film-toggle.is-held span{width:0;height:0;border-style:solid;border-width:.5rem 0 .5rem .8rem;border-color:transparent transparent transparent var(--ink);margin-left:.2rem}
.still-only .film-toggle{display:none}
.film-tag{display:inline-block;background:var(--tang-wash);color:var(--tang-deep);font:700 .8rem var(--head);padding:.12rem .55rem;border-radius:99px;margin-right:.3rem;vertical-align:.08em}

/* ---------- home: video wall ---------- */
.hello{max-width:84rem;margin:0 auto;padding:clamp(1.6rem,4vw,3rem) var(--gut) 1.4rem;display:grid;gap:1rem 3rem;align-items:end}
.hello h1{font-size:clamp(2.4rem,1.4rem + 4.2vw,4.6rem);line-height:.98;max-width:13ch;letter-spacing:-.03em}
.hello p{max-width:34rem;font-size:1.12rem;color:var(--soft);margin:0}
@media (min-width:960px){.hello{grid-template-columns:1.3fr 1fr}}
.wall{max-width:84rem;margin:0 auto;padding:0 var(--gut);display:grid;gap:.8rem;grid-template-columns:1fr}
.tile{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);background:var(--sand);box-shadow:var(--lift);isolation:isolate}
.tile .film{aspect-ratio:16/10;height:100%}
.tile-card{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;background:rgba(250,246,239,.95);border-radius:var(--r-md);padding:.7rem .95rem .8rem;display:flex;flex-direction:column;gap:.1rem;transition:transform .25s ease}
.tile:hover .tile-card{transform:translateY(-4px)}
.tile-card b{font:800 1.2rem/1.15 var(--head)}
.tile-card span:not(.tile-kind){font-size:.95rem;color:var(--soft);line-height:1.4}
.tile-kind{font:700 .82rem var(--head);color:var(--teal-deep)}
.tile::before{content:"";position:absolute;z-index:2;top:.8rem;left:.8rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--tang) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l8 5-8 5z' fill='%23fff'/%3E%3C/svg%3E") center/60% no-repeat;box-shadow:0 6px 16px -6px rgba(184,92,23,.7)}
@media (min-width:700px){
  .wall{grid-template-columns:repeat(2,1fr)}
  .tile-hero{grid-column:span 2}
  .tile-hero .film{aspect-ratio:16/8}
  .tile-wide{grid-column:span 2}
  .tile-wide .film{aspect-ratio:16/7}
}
@media (min-width:1100px){
  .wall{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:15rem}
  .tile .film{aspect-ratio:auto}
  .tile-hero{grid-column:1;grid-row:span 2}
  .tile-hero .film{aspect-ratio:auto}
  .tile-wide{grid-column:2 / span 2}
  .tile-wide .film{aspect-ratio:auto}
  .tile-hero .tile-card{left:1.2rem;bottom:1.2rem;right:auto;max-width:26rem;padding:1rem 1.2rem}
  .tile-hero .tile-card b{font-size:1.75rem}
}
.wall-note{max-width:84rem;margin:.8rem auto 0;padding:0 var(--gut);font-size:.93rem;color:var(--soft);display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center}
.wall-pause{font:700 .9rem var(--head);background:#fff;border:2px solid var(--ink);color:var(--ink);border-radius:99px;padding:.3rem .9rem;cursor:pointer}
.wall-pause[aria-pressed="true"]{background:var(--ink);color:#fff}

.routes,.tools,.more,.plain,.pair-up,.sheen-band{max-width:84rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) var(--gut) 0}
.routes h2,.tools h2,.more h2,.plain h2{margin-top:0}
.routes-lede{max-width:40rem;color:var(--soft)}
.route-row{display:grid;gap:1rem;margin-top:1.4rem}
@media (min-width:820px){.route-row{grid-template-columns:repeat(3,1fr)}}
.route{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--lift);transition:transform .2s ease}
.route:hover{transform:translateY(-4px);color:var(--ink)}
.route-pic{margin:0}
.route-pic img{aspect-ratio:4/3;object-fit:cover;width:100%}
.route h3,.route p,.route .go{margin-left:1.2rem;margin-right:1.2rem}
.route h3{margin-top:1.1rem;margin-bottom:.2rem}
.route-price{font:800 1.5rem var(--head);color:var(--teal-deep);margin-bottom:.5rem}
.route p:not(.route-price){color:var(--soft);font-size:.98rem}
.go{display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;margin-bottom:1.2rem;font:700 1rem var(--head);color:var(--tang-deep)}
.go::after{content:"";width:1.4rem;height:1.4rem;border-radius:50%;background:var(--tang-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l6 5-6 5' stroke='%23B85C17' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat}
.pair-up{display:grid;gap:1.6rem 3rem;align-items:center}
@media (min-width:900px){.pair-up{grid-template-columns:1.15fr 1fr}}
.pair-up h2{margin-top:0}
.side-film{margin:0}
.side-film .film{border-radius:var(--r-lg)}
.side-film figcaption,.lead-film figcaption{font-size:.93rem;color:var(--soft);margin-top:.6rem}
.tool-row{display:grid;gap:.8rem;margin-top:1.2rem}
@media (min-width:820px){.tool-row{grid-template-columns:repeat(3,1fr)}}
.tool-card{display:flex;flex-direction:column;gap:.4rem;padding:1.3rem 1.3rem 0;border-radius:var(--r-lg);background:var(--teal);color:#E4F3F1;text-decoration:none}
.tool-card:nth-child(2){background:var(--ink);color:#EADFD2}
.tool-card:nth-child(3){background:var(--tang-deep);color:#FCEBDD}
.tool-card b{font:800 1.4rem/1.15 var(--head);color:#fff}
.tool-card .go{color:#fff;margin-top:auto;padding-top:.8rem}
.tool-card .go::after{background-color:rgba(255,255,255,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l6 5-6 5' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.tool-card:hover{color:#fff;filter:brightness(1.07)}
.more-row{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));margin-top:1rem}
.more-card{display:grid;grid-template-columns:7.5rem 1fr;gap:.2rem 1rem;align-items:center;background:#fff;border-radius:var(--r-md);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--lift);padding-right:1rem}
.more-pic{margin:0;grid-row:span 2;height:100%}
.more-pic img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.more-card b{font:800 1.2rem var(--head);align-self:end;padding-top:.8rem}
.more-card span{font-size:.93rem;color:var(--soft);align-self:start;padding-bottom:.8rem}
.sheen-band{display:grid;gap:1rem 3rem;align-items:center}
@media (min-width:900px){.sheen-band{grid-template-columns:1fr 1.1fr}}
.sheen-band h2{margin-top:0}
.plain{max-width:52rem;padding-bottom:1rem}
.plain p{color:var(--soft)}
/* ---------- guide opening: headline card beside the opening video ---------- */
.guide-top{max-width:84rem;margin:0 auto;padding:clamp(1.2rem,3vw,2.4rem) var(--gut) 0;display:grid;gap:1.4rem 2.6rem;align-items:center}
@media (min-width:1000px){.guide-top{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}}
.trail{font-size:.92rem;color:var(--soft);margin:0 0 .8rem}
.trail a{color:var(--soft)}
.guide-top h1{font-size:clamp(2rem,1.3rem + 2.8vw,3.4rem);line-height:1.02;letter-spacing:-.025em}
.lede{font-size:1.14rem;color:var(--soft);margin:1rem 0 .7rem;max-width:36rem}
.byline{font-size:.92rem;color:var(--soft);margin:0}
.byline::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--teal);margin-right:.45rem;vertical-align:.05em}
.lead-film{margin:0}
.lead-film .film{border-radius:var(--r-lg);box-shadow:var(--lift)}
.guide-top .yt{margin:0}

/* chapter pills: horizontal, sticky under the top bar */
.jump{position:sticky;top:6.2rem;z-index:20;max-width:84rem;margin:1.6rem auto 0;padding:.5rem var(--gut);background:var(--cream)}
.jump ol{display:flex;gap:.4rem;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.jump ol::-webkit-scrollbar{display:none}
.jump li{margin:0;flex:none}
.jump a{display:block;padding:.35rem .85rem;border-radius:99px;border:2px solid var(--sand);color:var(--ink);text-decoration:none;font:600 .92rem var(--head);white-space:nowrap;background:#fff}
.jump a:hover{border-color:var(--teal)}
.jump a.is-here{background:var(--teal);border-color:var(--teal);color:#fff}
@media (max-width:899px){.jump{top:5.9rem}}

.guide{max-width:var(--read);margin:0 auto;padding:1.2rem var(--gut) 3rem;box-sizing:content-box}
.guide > h2:first-child{margin-top:1rem}
.quick{background:var(--teal-wash);border-radius:var(--r-lg);padding:1.3rem 1.5rem .4rem;margin:1.4rem 0 1rem}
.quick h2{font-size:1.25rem;margin:0 0 .5rem;color:var(--teal-deep)}

/* chapters: a still from the clip set, caption, then the method */
.chapter{margin:3rem 0 0;scroll-margin-top:9rem}
.chapter-head{display:grid;gap:1rem;align-items:center;background:#fff;border-radius:var(--r-lg);padding:.7rem;box-shadow:var(--lift)}
@media (min-width:640px){.chapter-head{grid-template-columns:15rem 1fr;padding:.7rem 1.4rem .7rem .7rem}}
.chapter-still{margin:0;position:relative}
.chapter-still img{border-radius:var(--r-md);aspect-ratio:4/3;object-fit:cover;width:100%}
.chapter-still::after{content:"";position:absolute;left:.6rem;bottom:.6rem;width:2rem;height:2rem;border-radius:50%;background:rgba(250,246,239,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l8 5-8 5z' fill='%23B85C17'/%3E%3C/svg%3E") center/55% no-repeat}
.chapter-no{display:inline-block;margin:0 0 .35rem;background:var(--tang-wash);color:var(--tang-deep);font:700 .9rem var(--head);padding:.15rem .7rem;border-radius:99px}
.chapter-head h2{margin:0 0 .35rem;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.chapter-cap{margin:0;color:var(--soft)}
.chapter-body{padding:.4rem 0 0}
.chapter-body h3{scroll-margin-top:9rem}

/* figures and notes */
.pic{margin:1.8rem 0}
.pic img{border-radius:var(--r-lg);width:100%}
figcaption{font-size:.93rem;color:var(--soft);margin-top:.55rem}
.careful{background:var(--tang-wash);border-radius:var(--r-md);padding:1rem 1.2rem;margin:1.4rem 0;font-size:.98rem}
.careful strong{color:var(--tang-deep)}
.finish-note{background:var(--oat);border-radius:var(--r-md);padding:.8rem 1.1rem;font-size:.98rem}
.sources{background:var(--oat);border-radius:var(--r-md);padding:1rem 1.2rem .2rem;margin-top:2rem;font-size:.95rem}
.next{margin-top:2.4rem;padding:1.1rem 1.3rem;background:var(--ink);color:#EADFD2;border-radius:var(--r-lg)}
.next a{color:#fff}
.howto-steps{list-style:none;padding:0;counter-reset:hs}
.howto-steps li{counter-increment:hs;position:relative;padding:0 0 1rem 3.2rem;margin:0}
.howto-steps li::before{content:counter(hs);position:absolute;left:0;top:.1rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--teal);color:#fff;font:800 1.05rem/2.3rem var(--head);text-align:center}
.howto-steps h3{margin:0 0 .3rem;font-size:1.2rem}
.steps-flow{display:grid;gap:.6rem;margin:1.2rem 0;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.steps-flow div{background:#fff;border-radius:var(--r-md);padding:.9rem 1rem;box-shadow:var(--lift)}
.steps-flow b{display:block;font:800 1.08rem var(--head);color:var(--teal-deep)}
.steps-flow span{font-size:.93rem;color:var(--soft)}

/* tables: soft cards, no rules grid */
.table-wrap{overflow-x:auto;margin:1.3rem 0 1.6rem;border-radius:var(--r-md);background:#fff;box-shadow:var(--lift)}
table{border-collapse:collapse;width:100%;font-size:.96rem;min-width:32rem}
caption{text-align:left;font:700 1.02rem var(--head);padding:1rem 1.1rem .4rem;caption-side:top}
th,td{text-align:left;vertical-align:top;padding:.65rem 1.1rem}
thead th{font:700 .93rem var(--head);color:var(--teal-deep);background:var(--teal-wash)}
tbody tr:nth-child(even){background:var(--cream)}
tbody th{font-weight:700}

/* sheen swatches */
.sheens{list-style:none;padding:0;margin:1.2rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.sheens li{margin:0;display:flex;flex-direction:column;gap:.15rem;font-size:.86rem;color:var(--soft);line-height:1.3}
.sheens b{font:700 1rem var(--head);color:var(--ink)}
.sheen-chip{height:4.4rem;border-radius:var(--r-md);background:#5E7F6E;margin-bottom:.4rem;position:relative;overflow:hidden}
.sheen-chip::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sheen-matt::after{background:none}
.sheen-eggshell::after{background:linear-gradient(125deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.12) 50%,rgba(255,255,255,0) 70%)}
.sheen-satin::after{background:linear-gradient(125deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.28) 48%,rgba(255,255,255,0) 66%)}
.sheen-gloss::after{background:linear-gradient(125deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.6) 45%,rgba(255,255,255,0) 52%),linear-gradient(125deg,rgba(255,255,255,0) 58%,rgba(255,255,255,.25) 62%,rgba(255,255,255,0) 66%)}
.sheens .is-pick .sheen-chip{box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--tang)}
@media (max-width:520px){.sheens{grid-template-columns:repeat(2,1fr)}}

/* YouTube click-to-load: own poster, rounded player, notes beside */
.yt{margin:1.8rem 0;background:#fff;border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden}
.yt-frame{position:relative;aspect-ratio:16/9;background:var(--sand)}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:none;text-align:left;font:inherit;color:var(--ink)}
.yt-art{position:absolute;inset:0;width:100%;height:100%}
.yt-play{position:absolute;left:1.2rem;top:1.2rem;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--tang);box-shadow:0 10px 24px -10px rgba(184,92,23,.8);transition:transform .2s}
.yt-play::after{content:"";position:absolute;left:1.45rem;top:1.1rem;border-style:solid;border-width:.7rem 0 .7rem 1.1rem;border-color:transparent transparent transparent #fff}
.yt-poster:hover .yt-play{transform:scale(1.07)}
.yt-text{position:absolute;left:1.2rem;right:1.2rem;bottom:1.1rem;display:flex;flex-direction:column;gap:.15rem;max-width:30rem}
.yt-title{font:800 clamp(1.1rem,.9rem + 1vw,1.55rem)/1.12 var(--head)}
.yt-channel{font-size:.95rem;color:var(--soft)}
.yt-hint{font:700 .85rem var(--head);color:var(--teal-deep)}
.yt-noscript{position:absolute;left:1rem;top:1rem;background:#fff;padding:.4rem .7rem;border-radius:var(--r-sm)}
.yt-chapters{padding:.9rem 1.2rem 0}
.yt-chapters p{font:700 .92rem var(--head);margin:0 0 .4rem}
.yt-chapters ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.yt-chapters li{margin:0}
.yt-jump{font:600 .92rem var(--head);background:var(--oat);border:0;border-radius:99px;padding:.35rem .8rem;cursor:pointer;color:var(--ink)}
.yt-jump span{color:var(--tang-deep);margin-left:.25rem}
.yt-jump:hover{background:var(--sand)}
.yt-notes{padding:1rem 1.2rem .3rem;font-size:.98rem}
.yt-credit{font-size:.88rem;color:var(--soft)}
.guide-top .yt-notes{display:none}
.guide-top .yt + .yt-after,.yt-after{display:none}
@media (max-width:560px){.yt-text{bottom:.8rem;left:.9rem}.yt-hint{display:none}.yt-play{width:3rem;height:3rem;left:.9rem;top:.9rem}.yt-play::after{left:1.2rem;top:.9rem;border-width:.6rem 0 .6rem .95rem}}

/* plain pages */
.plain-top{background:var(--oat)}
.plain-top-inner{max-width:var(--read);margin:0 auto;padding:clamp(1.6rem,4vw,3rem) var(--gut) 1.6rem}
.plain-top h1{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.2rem)}
.plain-body{max-width:var(--read);margin:0 auto;padding:.6rem var(--gut) 3rem}
.lost-links{list-style:none;padding:0;display:grid;gap:.5rem;margin-top:1.6rem}
.lost-links a{display:block;padding:.9rem 1.1rem;background:#fff;border-radius:var(--r-md);box-shadow:var(--lift);font:700 1.08rem var(--head);text-decoration:none}

/* footer */
.foot{margin-top:4rem;background:var(--ink);color:#D9CCBD}
.foot-inner{max-width:84rem;margin:0 auto;padding:3rem var(--gut) 2rem}
.foot-line{font:800 clamp(1.4rem,1rem + 1.6vw,2.2rem)/1.15 var(--head);color:#fff;max-width:32ch;margin-bottom:2rem}
.foot-cols{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.foot h2{font-size:1rem;color:var(--tang);margin:0 0 .5rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot a{color:#EFE6DA;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot-small{font-size:.88rem;color:#B5A797;margin:2rem 0 0;max-width:46rem}
/* ---------- calculators: stacked recipe cards, answer band underneath ---------- */
.tool-top{background:var(--teal);color:#E4F3F1}
.tool-top-inner{max-width:84rem;margin:0 auto;padding:clamp(1.6rem,4vw,3rem) var(--gut) clamp(3.5rem,7vw,5rem)}
.tool-top .trail,.tool-top .trail a{color:#BFE3DF}
.tool-top h1{color:#fff;font-size:clamp(2rem,1.3rem + 2.8vw,3.4rem);max-width:20ch}
.tool-top .lede{color:#D8EFEC;max-width:40rem}
.tool-shell{max-width:84rem;margin:-2.6rem auto 0;padding:0 var(--gut) 1rem;position:relative}
.tool-grid{display:flex;flex-direction:column;gap:1.2rem}
.tool-form{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:900px){.tool-form{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));align-items:start}}
.tool-form fieldset{border:0;margin:0;padding:1.2rem 1.3rem 1.3rem;background:#fff;border-radius:var(--r-lg);box-shadow:var(--lift);min-width:0}
.tool-form legend{float:left;width:100%;font:800 1.3rem/1.15 var(--head);padding:0;margin:0 0 .8rem;color:var(--ink)}
.tool-form legend + *{clear:both}
.tool-form > .btn-solid,.tool-form > button[type=submit]{grid-column:1 / -1;justify-self:start}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.9rem;min-width:0}
.field label,.field .label{font:700 .98rem var(--head)}
.hint,.field .hint{font-size:.88rem;color:var(--soft)}
.hint-lead{margin-top:0}
.hint-tail{margin:0}
input[type=number],select{font:400 1.05rem var(--text);padding:.65rem .8rem;border:2px solid var(--sand);border-radius:var(--r-sm);background:var(--cream);color:var(--ink);width:100%;min-height:3rem}
input[type=number]:focus,select:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 4px var(--teal-wash)}
.radio-row{display:flex;flex-wrap:wrap;gap:.4rem}
.radio-stack{flex-direction:column;align-items:stretch}
.radio-row label{display:flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:99px;background:var(--oat);cursor:pointer;font:600 .96rem var(--head);transition:background .15s}
.radio-stack label{border-radius:var(--r-sm)}
.radio-row label:hover{background:var(--sand)}
.radio-row input{accent-color:var(--teal);width:1.05rem;height:1.05rem;margin:0}
.radio-row label:has(input:checked){background:var(--teal);color:#fff}
.radio-row label:has(input:focus-visible){outline:3px solid var(--tang);outline-offset:2px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:420px){.pair{grid-template-columns:1fr}}
.door-rows{display:flex;flex-direction:column;gap:.7rem;margin-bottom:.9rem}
.door-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .6rem;align-items:end;padding:.8rem;background:var(--cream);border-radius:var(--r-md)}
.door-row .field{margin:0}
.door-row .custom{display:none;grid-column:span 2}
.door-row.show-w .custom-w,.door-row.show-h .custom-h{display:flex}
.door-row .qty{grid-column:1}
.door-row .remove{grid-column:2;justify-self:end}
.btn{display:inline-flex;align-items:center;gap:.4rem;font:700 1rem var(--head);padding:.65rem 1.15rem;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:99px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--ink);color:#fff}
.btn-solid{background:var(--tang);border-color:var(--tang);color:#fff;font-size:1.08rem;padding:.85rem 1.7rem}
.btn-solid:hover{background:var(--tang-deep);border-color:var(--tang-deep)}
.remove{width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:#fff;font:400 1.4rem var(--text);cursor:pointer;color:var(--soft);box-shadow:var(--lift)}
.remove:hover{background:var(--tang-wash);color:var(--tang-deep)}
.tool-result{background:var(--ink);color:#E6DACB;border-radius:var(--r-lg);padding:clamp(1.3rem,3vw,2.2rem);scroll-margin-top:8rem}
.tool-result h2{color:var(--tang);font-size:1.15rem;margin:0 0 .9rem}
.big-figure{font:800 clamp(2.6rem,2rem + 2.4vw,3.8rem)/1 var(--head);color:#fff;margin:0;letter-spacing:-.02em}
.big-figure small{font:600 1rem var(--head);color:#BFAF9E;margin-left:.35rem;letter-spacing:0}
.big-figure.is-second{font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);margin-top:.8rem;color:#EADFD2}
.result-list{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.result-list li{margin:0;display:flex;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.06);padding:.6rem .9rem;border-radius:var(--r-sm)}
.result-list li span:first-child{color:#C9BAA8;font-size:.93rem}
.result-list li span:last-child{color:#fff;font-weight:700;text-align:right}
.result-note{font-size:.93rem;color:#C9BAA8;margin:1rem 0 0}
.result-basis{font-size:.9rem;color:#C9BAA8;margin:-.3rem 0 .9rem}
.tool-result .error{background:var(--tang-deep);color:#fff;padding:.7rem .95rem;border-radius:var(--r-sm);margin:0 0 .8rem}
.cost-bars{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.cost-bar{background:rgba(255,255,255,.06);border-radius:var(--r-md);padding:.9rem 1rem}
.cost-bar h3{color:#fff;margin:0 0 .45rem;font:700 1.05rem var(--head);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.4rem}
.cost-bar h3 span{color:var(--tang);font-weight:800}
.cost-bar p{font-size:.9rem;color:#C9BAA8;margin:.4rem 0 0}
.bar-track{position:relative;height:.7rem;background:rgba(255,255,255,.12);border-radius:99px}
.bar-fill{position:absolute;top:0;bottom:0;min-width:.7rem;border-radius:99px;background:#9FC9C4}
.cost-bar.is-diy .bar-fill{background:#E9DCC8}
.cost-bar.is-pro .bar-fill{background:var(--tang)}
.cost-bar.is-full .bar-fill{background:#C77B6A}
.cost-bar.is-doors .bar-fill{background:#7FC0B9}
.bar-scale{display:flex;justify-content:space-between;font-size:.8rem;color:#A99886;margin-top:.35rem}
.bar-key{font-size:.92rem;color:#C9BAA8;margin:0 0 .8rem}
.schedule{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.schedule li{margin:0;background:rgba(255,255,255,.06);border-radius:var(--r-md);padding:.75rem .95rem}
.schedule strong{display:block;color:#fff;font-family:var(--head)}
.schedule time{display:block;font:700 1rem var(--head);color:var(--tang)}
.schedule span{font-size:.92rem;color:#C9BAA8}
.readout-dock{position:fixed;left:.75rem;right:.75rem;bottom:.75rem;z-index:25;display:flex;align-items:center;gap:.6rem;background:var(--ink);color:#fff;text-decoration:none;font:700 .98rem var(--head);padding:.85rem 1.1rem;border-radius:99px;box-shadow:0 16px 34px -12px rgba(43,36,32,.6);transform:translateY(160%);transition:transform .25s ease;pointer-events:none}
.readout-dock::after{content:"See the answer";margin-left:auto;flex:none;background:var(--tang);color:#fff;font-size:.85rem;padding:.25rem .7rem;border-radius:99px}
.readout-dock.is-shown{transform:none;pointer-events:auto}
.readout-dock.is-empty{display:none}
@media (min-width:900px){.readout-dock{left:auto;right:1.5rem;max-width:34rem}}
.noscript-note{background:var(--tang-wash);padding:.9rem 1.1rem;border-radius:var(--r-md);font-weight:700}
.method{max-width:var(--read);margin:0 auto;padding:1.5rem var(--gut) 2rem;box-sizing:content-box}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.jump,.foot,.film-toggle,.wall-note,.readout-dock{display:none}body{background:#fff}}
/* QA fixes: wall gap on wide screens, swipe cue on pill rows */
@media (min-width:1100px){.wall > .tile:last-child{grid-column:1 / -1}.wall > .tile:last-child .tile-card{right:auto;max-width:24rem}}
@media (max-width:899px){
  .pillbar,.jump{position:relative}
  .pillbar::after{content:"";position:absolute;right:0;top:0;bottom:.6rem;width:2.4rem;pointer-events:none;background:linear-gradient(to right,rgba(250,246,239,0),rgba(250,246,239,.96))}
  .jump{position:sticky}
  .jump ol{padding-right:2rem;-webkit-mask-image:linear-gradient(to right,#000 85%,transparent);mask-image:linear-gradient(to right,#000 85%,transparent)}
  .tool-form > .btn-solid,.tool-form > button[type=submit]{justify-self:stretch;justify-content:center}
}
table{min-width:0}
.table-wrap.is-wide table{min-width:36rem}
@media (max-width:599px){
  table{font-size:.92rem}
  th,td{padding:.55rem .7rem}
  .table-wrap.is-wide{background:linear-gradient(to right,#fff 30%,rgba(255,255,255,0)),linear-gradient(to right,rgba(255,255,255,0),#fff 70%) 100% 0,radial-gradient(farthest-side at 100% 50%,rgba(43,36,32,.18),transparent) 100% 0;background-repeat:no-repeat;background-size:2.5rem 100%,2.5rem 100%,1rem 100%;background-attachment:local,local,scroll;background-color:#fff}
}