/* Blog article layout only (tools/blog/article.template.html). Tokens and components live in site.css.
   Grid: a left rail (cols 1–3) carries the meta in the header and the sticky contents below;
   the reading column starts at col 4 and is capped at --measure (about 68 characters);
   tables may use the full width to col 12. */

.page-article{--measure:38rem;--rail-top:calc(var(--hdr-h) + 32px)}
.nw{white-space:nowrap}

/* ---------- header ---------- */
.art-head{padding-top:var(--space-xs)}
.art-head__crumbs li:last-child{min-width:0;flex:1 1 0}
.art-head__crumbs [aria-current]{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--ink-2)}
.art-head__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--space-md);padding-top:clamp(28px,4vw,64px)}
.art-head__kicker,.art-head__t,.art-head__deck{grid-column:4 / 13}
.art-head__kicker{font-size:var(--fs-ui);font-weight:500;line-height:1.4;color:var(--tobacco);margin-bottom:calc(var(--space-xs) * -1)}
.art-head__kicker:empty{display:none}
.art-head__t{font-family:var(--display);font-size:clamp(2.25rem,1.15rem + 3.3vw,4.25rem);font-weight:340;line-height:1.02;letter-spacing:-.018em;text-wrap:balance;max-width:19em}
.art-head__deck{grid-column:4 / 11;font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:44ch}
/* editorial note (overrides.json "note"): a quiet line under the deck, e.g. "a general guide; the studio's own walls use…" */
.art-head__note{grid-column:4 / 11;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2);max-width:62ch;padding-top:var(--space-xs);border-top:1px solid var(--rule)}
/* meta sits in the left rail, on the deck's baseline */
.art-head__meta{grid-column:1 / 4;grid-row:3;align-self:end;display:grid;gap:2px;padding-top:var(--space-xs);border-top:1px solid var(--ink);font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.art-head__kicker:empty ~ .art-head__meta{grid-row:2}
.art-head__meta time:first-child,.art-head__meta > span:last-child{color:var(--ink)}
.art-head__meta > span:last-child{font-weight:500}

/* ---------- hero ---------- */
.art-hero{margin-top:clamp(32px,4.4vw,64px);overflow:hidden;background:var(--linen)}
.art-hero picture,.art-hero img{width:100%}
.art-hero img{max-height:min(74svh,780px);object-fit:cover;object-position:50% 58%}

/* ---------- body grid: contents rail + reading column ---------- */
.art-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding-block:clamp(48px,6vw,96px) var(--section)}
.art-toc{grid-column:1 / 4;position:sticky;top:var(--rail-top);align-self:start;max-height:calc(100svh - var(--rail-top) - 24px);overflow-y:auto;overscroll-behavior:contain;padding-right:var(--space-md);scrollbar-width:thin}
.art-body{grid-column:4 / 13;min-width:0;font-size:1.125rem;line-height:1.7}

/* "From the studio": links from a guide to the materials, portfolio and pricing pages (overrides.json "studioLinks") */
.art-studio{margin-top:clamp(48px,6vw,80px);padding-top:var(--space-sm);border-top:1px solid var(--ink);max-width:var(--measure)}
.art-studio__t{font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.art-studio ul{display:grid;gap:2px;margin-top:var(--space-2xs)}
.art-studio li a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem}

/* contents */
.toc__sum{display:grid;gap:var(--space-xs);list-style:none;font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--ink)}
.toc__sum::-webkit-details-marker{display:none}
.toc__bar{display:block;height:1px;background:var(--rule)}
.toc__bar span{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0))}
.toc ol{counter-reset:toc;margin-top:var(--space-2xs)}
.toc li{counter-increment:toc}
.toc li a{display:grid;grid-template-columns:1.75rem 1fr;align-items:baseline;padding:7px 0;font-size:var(--fs-small);line-height:1.4;color:var(--ink-3);text-decoration:none;transition:color .25s var(--ease-quart)}
.toc li a::before{content:counter(toc);font-family:var(--display);font-size:.8125rem;font-weight:500;color:var(--ink-3);font-variant-numeric:lining-nums tabular-nums}
.toc li a:hover{color:var(--ink)}
.toc li a[aria-current]{color:var(--ink)}
.toc li a[aria-current]::before{color:var(--tobacco)}
.art-toc:not(:has(ol)){display:none}
@media (min-width:1181px){
  .toc__sum{pointer-events:none}
}

/* ---------- body text ---------- */
.art-body > section{display:grid;gap:1.15em;align-content:start}
.art-body > section > *{max-width:var(--measure)}
.art-body > section + section{margin-top:clamp(64px,7vw,104px)}
.art-body p{text-wrap:pretty}
.art-body a:not(.btn){text-decoration-color:var(--rule-strong);text-underline-offset:.2em}
.art-body a:not(.btn):hover{text-decoration-color:currentColor}
.art-body strong{font-weight:600}
.art-body > section > h2{font-family:var(--display);font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);font-weight:380;line-height:1.08;letter-spacing:-.012em;text-wrap:balance;padding-top:var(--space-md);border-top:1px solid var(--rule);margin-bottom:.15em}
.art-body ul,.art-body ol{display:grid;gap:.5em;padding-left:1.25em}
.art-body ul{list-style:disc}
.art-body ol{list-style:decimal}
.art-body li{padding-left:.15em}
.art-body li::marker{color:var(--ink-3)}
.art-body .list-intro{font-weight:500}
.art-body .list-intro + ul,.art-body .list-intro + ol{margin-top:-.45em}

/* TL;DR: the article's own "TL;DR:" becomes the label (site.css "In short" is switched off here) */
.art-body .answer-card{gap:0;padding:22px clamp(20px,2.6vw,30px) 24px;margin-block:.15em .35em;font-family:var(--display);font-size:1.1875rem;font-weight:430;line-height:1.48;color:var(--ink)}
.art-body .answer-card::before{content:none}
.art-body .answer-card p{font-size:inherit;font-weight:inherit;line-height:inherit}
.art-body .answer-card > strong:first-child,.art-body .answer-card > p > strong:first-child{display:block;margin-bottom:8px;font-family:var(--text);font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;color:var(--tobacco)}

/* tables: wider than the text column on desktop, full-bleed scroll on phones */
.art-body > section > .table-wrap{max-width:none;margin-block:.4em .3em;background:var(--bone)}
.art-body .table-wrap table{font-size:.9375rem}
.art-body .table-wrap td strong{font-weight:600;color:var(--ink)}
.art-body .table-wrap tbody tr:hover td{background:oklch(0.94 0.014 80 / .6)}
.art-body .table-wrap:focus-visible{outline-offset:6px}

/* FAQ: question as h3, answer as the next paragraph */
.art-body > section > h3{font-family:var(--display);font-size:1.375rem;font-weight:460;line-height:1.25;text-wrap:balance;margin-top:.5em;padding-top:var(--space-md);border-top:1px solid var(--rule)}
.art-body > section > h3 + p{color:var(--ink-2)}

/* inline CTA: a material sample beside the invitation */
.art-body .article-inline-cta{position:relative;display:grid;gap:10px;justify-items:start;margin-block:.9em .2em;padding:clamp(24px,2.6vw,32px) clamp(22px,2.6vw,34px) clamp(26px,2.8vw,34px) calc(var(--swatch-w) + clamp(22px,2.6vw,34px));background:var(--linen);--swatch-w:clamp(76px,8vw,116px)}
.art-body .article-inline-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--swatch-w);background:var(--stone) center/cover no-repeat;background-image:url(/assets/media/swatch/sw-travertine-240.webp);background-image:image-set(url(/assets/media/swatch/sw-travertine-240.avif) type("image/avif") 1x,url(/assets/media/swatch/sw-travertine-360.avif) type("image/avif") 2x,url(/assets/media/swatch/sw-travertine-240.webp) type("image/webp") 1x,url(/assets/media/swatch/sw-travertine-360.webp) type("image/webp") 2x)}
.art-body > section:nth-of-type(3n+2) .article-inline-cta::before{background-image:url(/assets/media/swatch/sw-calacatta-240.webp);background-image:image-set(url(/assets/media/swatch/sw-calacatta-240.avif) type("image/avif") 1x,url(/assets/media/swatch/sw-calacatta-360.avif) type("image/avif") 2x,url(/assets/media/swatch/sw-calacatta-240.webp) type("image/webp") 1x,url(/assets/media/swatch/sw-calacatta-360.webp) type("image/webp") 2x)}
.art-body > section:nth-of-type(3n) .article-inline-cta::before{background-image:url(/assets/media/swatch/sw-walnut-240.webp);background-image:image-set(url(/assets/media/swatch/sw-walnut-240.avif) type("image/avif") 1x,url(/assets/media/swatch/sw-walnut-360.avif) type("image/avif") 2x,url(/assets/media/swatch/sw-walnut-240.webp) type("image/webp") 1x,url(/assets/media/swatch/sw-walnut-360.webp) type("image/webp") 2x)}
.art-body .article-inline-cta > strong{font-family:var(--display);font-size:clamp(1.3125rem,1.15rem + .5vw,1.5rem);font-weight:440;line-height:1.2;text-wrap:balance}
.art-body .article-inline-cta p{font-size:.96875rem;line-height:1.6;color:var(--ink-2);max-width:56ch}
.art-body .article-inline-cta em{font-style:normal}
.art-body .article-inline-cta .article-inline-cta__gift{color:var(--tobacco)}
.art-body .article-inline-cta .btn{margin-top:var(--space-2xs)}

/* G1 lead block: a quiet ruled note; the visualization is offered in the closing band, the note links the free guide */
.art-body .article-lead-block{display:grid;gap:10px;justify-items:start;margin-block:1em .3em;padding-top:var(--space-md);border-top:1px solid var(--ink)}
.art-body .article-lead-block > span{font-size:var(--fs-small);font-weight:500;color:var(--tobacco)}
.art-body .article-lead-block h3{font-family:var(--display);font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);font-weight:420;line-height:1.15;text-wrap:balance}
.art-body .article-lead-block p{font-size:.96875rem;line-height:1.6;color:var(--ink-2);max-width:56ch}
.art-body .article-lead-block .link-arrow{margin-top:var(--space-2xs)}

/* sources: small, ruled, long URLs wrap */
.art-body > .article-sources{max-width:var(--measure);gap:.8em;margin-top:clamp(80px,8vw,128px);padding-top:var(--space-md);border-top:1px solid var(--ink);font-size:.875rem;line-height:1.55;color:var(--ink-2)}
.art-body > section + .article-sources{margin-top:clamp(80px,8vw,128px)}
.art-body > .article-sources > h2{font-size:1.5rem;font-weight:420;padding-top:0;border-top:0;color:var(--ink)}
.art-body .article-sources ul,.art-body .article-sources ol{gap:0;padding-left:0;list-style:none}
.art-body .article-sources li{padding:9px 0 9px;border-bottom:1px solid var(--rule)}
.art-body .article-sources li:first-child{border-top:1px solid var(--rule)}
.art-body .article-sources a{overflow-wrap:anywhere;color:var(--ink-2)}
.art-body .article-sources p,.art-body .article-sources li{overflow-wrap:anywhere}
.art-body .article-sources strong{color:var(--ink);font-weight:600}
.art-body .article-sources .list-intro{margin-top:.6em}
.art-body .article-sources .list-intro + ul{margin-top:0}

/* ---------- related guides + pricing guide ---------- */
.art-next__rel{grid-column:1 / 8;display:grid;gap:var(--space-lg);align-content:start}
.art-next__rel .link-arrow{justify-self:start}
.rel{border-top:1px solid var(--ink)}
.rel li{border-bottom:1px solid var(--rule)}
.rel a{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;column-gap:var(--space-md);align-items:baseline;padding:var(--space-md) 0;text-decoration:none}
.rel a > span{font-family:var(--display);font-size:clamp(1.25rem,1.05rem + .7vw,1.625rem);font-weight:420;line-height:1.2;text-wrap:balance}
.rel a small{font-size:var(--fs-small);color:var(--ink-2);white-space:nowrap}
.rel a::after{content:"";width:16px;height:16px;align-self:center;background:var(--ink-3);-webkit-mask:var(--arr) center/contain no-repeat;mask:var(--arr) center/contain no-repeat;transition:transform .4s var(--ease-expo),background-color .3s}
.rel a:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.rel a:hover::after{transform:translateX(4px);background:var(--ink)}

.art-guide{grid-column:9 / 13;align-self:start;display:grid;background:var(--paper);box-shadow:0 1px 0 var(--rule)}
.art-guide__cover{position:relative;aspect-ratio:2 / 1;overflow:hidden;background:var(--stone)}
.art-guide__cover picture,.art-guide__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-guide__cover img{object-position:50% 40%}
.art-guide__plate{position:absolute;left:var(--space-md);bottom:var(--space-md);display:grid;gap:8px;padding:12px 16px;background:var(--bone);font-family:var(--display);font-size:1.125rem;font-weight:420;line-height:1.1}
.art-guide__plate .wm{--wm-h:9px}
.art-guide__copy{display:grid;gap:var(--space-sm);padding:var(--space-md) clamp(20px,2.4vw,30px) clamp(22px,2.4vw,30px)}
.art-guide__k{font-size:var(--fs-small);font-weight:500;color:var(--tobacco)}
.art-guide__t{font-family:var(--display);font-size:1.625rem;font-weight:420;line-height:1.12;text-wrap:balance;margin-top:-6px}
.art-guide__prices{border-top:1px solid var(--ink)}
.art-guide__prices li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-sm);padding:9px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-ui)}
.art-guide__prices b{font-family:var(--display);font-size:1.25rem;font-weight:420;white-space:nowrap}
.art-guide__prices small{font-family:var(--text);font-size:.8125rem;font-weight:400;color:var(--ink-2)}
.art-guide__note{font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.art-guide .btn{margin-top:var(--space-2xs)}
.art-guide__pdf{justify-self:start;margin-top:-6px}

/* ---------- closing band ---------- */

/* ---------- pricing-guide popup ---------- */
.gpop{display:grid;gap:var(--space-sm)}
.gpop__k{font-size:var(--fs-small);font-weight:500;color:var(--tobacco)}
.gpop .dlg__title{margin-top:-6px}
.gpop__form{display:grid;gap:var(--space-sm);margin-top:var(--space-2xs)}

/* ---------- reveal for the bands below the article ---------- */
@media (prefers-reduced-motion:no-preference){
  .art-head__in > *{animation:artRise 1s var(--ease-expo) both}
  .art-head__in > :nth-child(2){animation-delay:.06s}
  .art-head__in > :nth-child(3){animation-delay:.12s}
  .art-head__in > :nth-child(4){animation-delay:.18s}
  .art-hero img{animation:artSettle 2.2s var(--ease-expo) both}
}
@keyframes artRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes artSettle{from{transform:scale(1.03)}to{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .art-head__kicker,.art-head__t,.art-head__deck,.art-head__note,.art-head__meta{grid-column:1 / -1}
  .art-head__meta,.art-head__kicker:empty ~ .art-head__meta{grid-row:auto;display:flex;flex-wrap:wrap;gap:0;padding-top:0;border-top:0;overflow:hidden;--sep:1.1em}
  /* each item carries its "·" in a slot pulled back over the gap; a wrapped line's first slot is clipped (no leading dot at 320 px) */
  .art-head__meta > *{margin:0 var(--sep) 0 calc(var(--sep) * -1);white-space:nowrap}
  .art-head__meta > *::before{content:"·";display:inline-block;width:var(--sep);text-align:center;color:var(--ink-3)}
  .art-head__in{row-gap:var(--space-sm)}
  .art-head__kicker{margin-bottom:0}
  .art-main{display:block;padding-top:clamp(32px,5vw,56px)}
  .art-toc{position:static;max-height:none;overflow:visible;padding:0;margin-bottom:clamp(40px,6vw,64px);max-width:var(--measure)}
  .toc{border-block:1px solid var(--rule)}
  .toc__sum{grid-template-columns:1fr 24px;align-items:center;min-height:56px;padding:var(--space-xs) 0;font-size:1rem;font-weight:500;cursor:pointer}
  .toc__sum::after{content:"";justify-self:end;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:transform .45s var(--ease-expo)}
  .toc[open] .toc__sum::after{transform:rotate(45deg)}
  .toc__bar{display:none}
  .toc ol{margin:0 0 var(--space-sm)}
  .toc li a{padding:9px 0;min-height:44px;align-items:center;font-size:.9375rem}
  .art-next__rel,.art-guide{grid-column:1 / -1}
  .art-guide{margin-top:var(--space-xl);grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .art-guide__cover{aspect-ratio:auto;min-height:100%}
}
@media (max-width:900px){
  .art-body{font-size:1.0625rem;line-height:1.65}
  .art-body .table-wrap th,.art-body .table-wrap td{min-width:7.5rem}
  .art-body .table-wrap th:first-child,.art-body .table-wrap td:first-child{min-width:11rem}
  .art-hero{width:100%}
  .art-hero img{aspect-ratio:3 / 2;max-height:none;object-position:50% 55%}
  .art-body > section > .table-wrap{margin-inline:calc(var(--margin) * -1);padding-inline:var(--margin);border-top:0;box-shadow:inset 0 1px 0 var(--ink);
    /* scroll cue: a soft shade appears at the edge that still has columns behind it */
    background:linear-gradient(90deg,var(--bone) 40%,oklch(0.956 0.011 82 / 0)) left / 32px 100% no-repeat local,linear-gradient(270deg,var(--bone) 40%,oklch(0.956 0.011 82 / 0)) right / 32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,oklch(0.25 0.02 58 / .16),oklch(0.25 0.02 58 / 0)) left / 12px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,oklch(0.25 0.02 58 / .16),oklch(0.25 0.02 58 / 0)) right / 12px 100% no-repeat scroll,var(--bone)}
}
@media (max-width:760px){
  .page-article{--section:60px}
  .art-head__in{padding-top:var(--space-md)}
  .art-head__t{font-size:clamp(2rem,1.3rem + 3.4vw,2.5rem);line-height:1.05}
  .art-head__deck{font-size:1.0625rem}
  .art-head__meta{font-size:.8125rem}
  .art-body > section + section{margin-top:56px}
  .art-body > section > h2{font-size:1.625rem;padding-top:var(--space-sm)}
  .art-body .answer-card{font-size:1.0625rem;padding:18px 18px 20px}
  .art-body .article-inline-cta{padding:22px 18px 22px calc(var(--swatch-w) + 18px);--swatch-w:40px}
  .art-body .article-inline-cta .btn{width:100%;padding-inline:var(--space-sm)}
  .rel a{grid-template-columns:minmax(0,1fr) 16px;row-gap:4px;padding:var(--space-sm) 0}
  .rel a small{grid-row:2;grid-column:1}
  .rel a::after{grid-row:1 / span 2;grid-column:2}
  .art-guide{grid-template-columns:1fr}
  .art-guide__cover{aspect-ratio:3 / 1;min-height:0}
}
@media print{
  .topbar,.hdr,.dock,.art-toc,.art-next,.contact,.ftr,dialog{display:none!important}
  .art-main{display:block}
}