/* Cottage at Home — moody heritage, lived-in, warm. Tokens are docs/brand-kit.md law.
   Round-4 panel fixes 2026-08-24: two-tier brass rules, hairline cards (no shadow),
   paper grain, hover life, scrolling mobile nav, landmark restructure (.well),
   unified meta pattern, reflow-safe CTA, immutable-cache-ready assets. */
:root{
  --parchment:#F3EDE2; --paper:#FBF7EE; --ink:#29251E; --umber:#6B6152;
  --moss:#59684D; --clay:#A5643C; --clay-link:#8B5432; --brass:#B08D45;
  --brass-rule:#A1813F; --hearth:#262019; --hearth-cream:#EFE6D3;
  --cream-dim:#CBBFA5; --cream-faint:#B9AC93;
  --disclosure:#7A2018; --disclosure-bg:#FAEFE9;
  --hairline:rgba(161,129,63,.30);          /* structural tier */
  --card-edge:rgba(176,141,69,.35);
  --display:"Fraunces","Fraunces Fallback",Georgia,serif;
  --well:1120px; --fs-body:1.0625rem;
  --space-xs:.5rem; --space-sm:1rem; --space-md:2rem; --space-lg:4rem;
  color-scheme:light;
}
@font-face{font-family:"Fraunces";
  src:url("/static/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:"Fraunces Fallback";
  src:local("Georgia"),local("Noto Serif"),local("Times New Roman");
  size-adjust:103%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
*{box-sizing:border-box}
body{margin:0;background:var(--parchment);color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;font-size:var(--fs-body);line-height:1.7;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")}
main{flex:1 0 auto;width:100%}
main:focus{outline:none}
.well{width:100%;max-width:calc(var(--well) + 2.4rem);margin:0 auto;
  padding:2.6rem 1.2rem}
h1{text-wrap:pretty}
h2,h3{text-wrap:balance}
h1,h2,h3{overflow-wrap:break-word;font-variant-ligatures:no-discretionary-ligatures}
.meta{overflow-wrap:break-word}
.card p,.tags{overflow-wrap:break-word}

/* links: never color-alone */
a{color:var(--clay-link);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:var(--brass-rule)}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:2px}
.masthead a:focus-visible,footer a:focus-visible,.signoff a:focus-visible{
  outline-color:var(--brass)}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:.75rem;top:.5rem;z-index:20;display:block;
  padding:.6rem 1.2rem;background:var(--brass);color:var(--hearth);
  outline:2px solid var(--hearth);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* masthead */
.masthead{background:var(--hearth);color:var(--hearth-cream);
  padding:1.5rem 1.2rem 0;text-align:left}
.masthead-top{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--well);margin:auto;gap:var(--space-md)}
.brand{margin:0;font-family:var(--display);font-weight:600;font-size:2rem;
  letter-spacing:.01em}
.brand a,.masthead nav a,.card h3 a{text-decoration:none}
.brand a{color:var(--hearth-cream)}
.brand a{display:inline-flex;align-items:center;gap:.6rem}
.brand img{border-radius:50%;width:38px;height:38px}
.brand a:hover{color:#fff;text-decoration:underline;
  text-decoration-color:var(--brass);text-decoration-thickness:1px}
.tagline{margin:.15rem 0 1.1rem;color:var(--cream-dim);font-style:italic;font-size:.9rem}
.utility-nav{display:flex;flex-wrap:wrap;gap:var(--space-md);font-size:.95rem}
.utility-nav a{color:var(--hearth-cream);padding:.6rem 0;text-decoration:underline;
  text-decoration-color:var(--brass);text-underline-offset:4px}
.masthead > nav{display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;justify-content:space-between;
  border-top:1px solid rgba(176,141,69,.35);padding:.5rem 0;margin:0 auto;
  max-width:var(--well)}
.masthead > nav a{display:inline-block;padding:.55rem 0;color:var(--cream-dim);
  font-family:Verdana,Geneva,sans-serif;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.12em;white-space:nowrap}
.masthead > nav a:hover{color:var(--brass);text-decoration:underline;
  text-decoration-color:var(--brass)}
.masthead > nav a.on{color:var(--hearth-cream);text-decoration:underline;
  text-decoration-color:var(--brass);text-underline-offset:7px}

/* hero (index only) */
.hero-band{background:var(--hearth);color:var(--hearth-cream);
  padding:2rem 1.2rem 3rem;text-align:left}
.hero-band .inner{max-width:var(--well);margin:0 auto;display:grid;
  grid-template-columns:.9fr 1.1fr;align-items:center;gap:3rem}
.hero-band img{width:100%;height:450px;aspect-ratio:4/3;
  object-fit:cover;border-radius:3px;display:block;margin:0;
  border:1px solid rgba(176,141,69,.25)}
.hero-band h1{font-family:var(--display);font-weight:400;
  font-size:clamp(2.5rem,4.2vw,3.5rem);line-height:1.1;margin:1rem 0 1.2rem}
.hero-band p{color:var(--cream-dim);margin:0;font-size:1.05rem;max-width:31em}
.eyebrow,.hero-band .eyebrow{font-family:Verdana,Geneva,sans-serif;font-size:.69rem;
  font-weight:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);
  margin:0 0 var(--space-xs)}
.hero-band .eyebrow{color:var(--cream-dim)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--space-md);margin-bottom:1.5rem}
.section-heading h2{font-family:var(--display);font-size:1.9rem;line-height:1.25;margin:0}
.section-heading > p{color:var(--umber);font-size:.95rem;margin:0}
.room-section{scroll-margin-top:var(--space-md);margin-bottom:var(--space-lg)}
.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  border-block:1px solid var(--hairline);background:var(--hairline)}
.room-link{display:flex;align-items:center;gap:var(--space-sm);background:var(--parchment);
  padding:1.2rem 1rem 1.2rem 0;color:var(--ink);text-decoration:none;min-width:0}
.room-link img,.room-initial{width:72px;height:80px;object-fit:cover;flex-shrink:0;border-radius:2px}
.room-initial{display:grid;place-items:center;background:var(--paper);font-family:var(--display);
  font-size:2rem;color:var(--moss)}
.room-link strong{font-family:var(--display);font-size:1.1rem;font-weight:500;line-height:1.3;display:block}
.room-count{display:block;font-size:.8rem;color:var(--umber);margin-top:.3rem}
.room-arrow{margin-left:auto;color:var(--moss)}
.room-link:hover strong,.room-link:focus-visible strong{text-decoration:underline;text-underline-offset:4px}
.latest-section{margin-bottom:var(--space-lg)}
.printable-feature{display:grid;grid-template-columns:1fr 1fr;background:var(--hearth);
  color:var(--hearth-cream);margin-top:var(--space-lg);border-radius:3px;overflow:hidden}
.printable-feature > img{width:100%;height:100%;min-height:360px;object-fit:cover}
.printable-feature > div{padding:var(--space-md);align-self:center}
.printable-feature h2{font-family:var(--display);font-size:2.25rem;line-height:1.2;margin:.7rem 0 1rem}
.printable-feature p,.printable-feature .eyebrow{color:var(--cream-dim)}
.printable-feature .small-link{font-size:.9rem}
.printable-feature .small-link a{color:var(--cream-dim)}

/* section labels — one treatment: label, then a hairline to the right edge */
.seclabel{display:flex;align-items:center;gap:.9rem;
  font-family:Verdana,Geneva,sans-serif;font-size:.74rem;font-weight:normal;
  text-transform:uppercase;letter-spacing:.14em;color:var(--moss);margin:0 0 .5rem}
.seclabel::after{content:"";flex:1;height:1px;background:var(--hairline)}
.newnote{color:var(--umber);font-style:italic;margin:0 0 1.4rem;font-size:.95rem}

/* cards — printed page: hairline edge, no shadow, quiet hover life */
.postgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:2rem}
.card{background:var(--paper);border:1px solid var(--card-edge);border-radius:4px;
  padding:1.3rem}
.card:hover{border-color:var(--brass)}
.card > a{display:block;overflow:hidden;border-radius:3px}
.card img{width:100%;height:220px;object-fit:cover;display:block}
@media (prefers-reduced-motion: no-preference){
  .card img{transition:transform .45s ease}
  .card:hover img{transform:scale(1.02)}
  .card{transition:border-color .25s ease}
}
.card h3{font-family:var(--display);font-weight:600;font-size:1.25rem;
  line-height:1.35;margin:.2rem 0 .3rem}
.card h3 a{color:var(--ink)}
.card h3 a:hover,.card h3 a:focus-visible{color:var(--clay-link);text-decoration:underline;
  text-decoration-color:var(--brass-rule)}
.card p{margin:.2rem 0;color:var(--umber);font-size:.95rem}
.card .read{margin-top:.7rem}
.card .read a{font-size:.9rem;display:inline-block;padding:.32rem 0;
  text-decoration-color:currentColor}
/* a single LATEST post is a full-width editorial feature (never the related strip) */
main .well > .postgrid .card:only-child,.latest-section > .postgrid .card:only-child{grid-column:1/-1;padding:0;overflow:hidden}
main .well > .postgrid .card:only-child img,.latest-section > .postgrid .card:only-child img{height:auto;aspect-ratio:3/2;max-height:460px}
main .well > .postgrid .card:only-child > a,.latest-section > .postgrid .card:only-child > a{border-radius:0}
main .well > .postgrid .card:only-child > div,.latest-section > .postgrid .card:only-child > div{padding:1.5rem 1.7rem 1.7rem}
.cat,.cat a,a.cat{font-family:Verdana,Geneva,sans-serif;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--moss)}
.cat{margin:.4rem 0 .1rem}
.cat a,a.cat{display:inline-block;padding:.25rem 0;text-decoration:none;
  border-bottom:1px solid var(--brass-rule)}
.cat a:hover,a.cat:hover,.cat a:focus-visible,a.cat:focus-visible{
  color:var(--clay-link);border-bottom-color:var(--clay-link)}
.cat .catdate{color:var(--umber);border:0}

/* article + pages */
.post{max-width:720px;margin:0 auto;background:var(--paper);
  border:1px solid var(--card-edge);border-radius:4px;padding:2.6rem;
  overflow:hidden}
.post h1{font-family:var(--display);font-weight:600;line-height:1.25;
  font-size:2.05rem;margin:.5rem 0 .9rem}
.article-dek{font-size:1.08rem;line-height:1.65;color:var(--umber);margin:0 0 1.25rem}
/* Affiliate disclosure — FORMAT PRESCRIBED, not a house style choice.
   Rakuten Advertising Affiliate Network Policies, FTC ENDORSEMENT COMPLIANCE
   -> '3) Conspicuous': the disclosure text must be as large or larger than the
   main text, and must be colored (not black or gray) and contrast with both its
   background and the main text. Body text is 1.0625rem in --ink, so this is
   LARGER and a saturated oxblood: 9.6:1 on --paper, 9.1:1 on its own panel.
   tests/disclosure_format_check.py reads these two declarations out of the
   SHIPPED stylesheet, so deleting or greying them reddens the publish road. */
.disclosure{font-size:1.15rem;font-weight:700;line-height:1.55;color:var(--disclosure);
  background:var(--disclosure-bg);border-left:4px solid var(--disclosure);
  border-radius:2px;padding:.7rem .9rem;margin:0 0 1.25rem}
.disclosure a{color:var(--disclosure);text-decoration-color:var(--disclosure)}
.breadcrumbs{font-size:.8rem;color:var(--umber);margin:-1rem 0 1.5rem}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .6rem;padding:0;margin:0}
.breadcrumbs li{display:inline;max-width:100%;overflow-wrap:anywhere}
.breadcrumbs li+li::before{content:"/";margin-right:.6rem;color:var(--umber)}
.breadcrumbs a{color:var(--umber);padding:.35rem 0;display:inline-block}
.contents{background:var(--parchment);border-block:1px solid var(--hairline);
  padding:.8rem 1rem;margin:1rem 0 1.5rem;clear:both}
.contents summary{font-family:var(--display);font-weight:500;font-size:1.05rem;cursor:pointer;
  padding:.15rem 0;color:var(--ink)}
.contents summary:focus-visible{outline:2px solid var(--clay-link);outline-offset:4px}
.contents ol{margin:.7rem 0 0;padding-left:1.3rem;font-size:.95rem}
.contents li{padding:.25rem 0}
.body [id],.faq [id]{scroll-margin-top:var(--space-md)}
.faq{border-top:1px solid var(--hairline);margin-top:var(--space-md);padding-top:var(--space-sm)}
.faq h2{font-family:var(--display);color:var(--moss);font-size:1.5rem}
.faq h3{font-family:var(--display);font-size:1.1rem;line-height:1.4;margin:1.5rem 0 .5rem}
.faq p{margin:.5rem 0 1.5rem}
.page-next{max-width:720px;margin:var(--space-md) auto 0;border-top:1px solid var(--hairline);padding-top:var(--space-md)}
.page-next p:last-child{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-md)}
.meta{font-family:Verdana,Geneva,sans-serif;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--umber);margin:0 0 .4rem}
.hero{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:4px;
  margin:.9rem 0 1.5rem}
.body{max-width:34em;margin:0}
.body p,.body li{overflow-wrap:break-word}
.body img{display:block;max-width:100%;height:auto;border-radius:4px;
  margin:2.6em auto}
.body h2{font-family:var(--display);font-weight:600;color:var(--moss);
  margin-top:1.7em;font-size:1.4rem}
.body blockquote{border-left:2px solid var(--brass-rule);margin:1.8em 0;
  padding:.1em 0 .1em 1.2em;color:var(--umber);font-style:italic}
.body pre,.body table{display:block;max-width:100%;overflow-x:auto}
.body table{border-collapse:collapse;font-size:.92rem}
/* drop cap: articles only, first paragraph only, never blockquotes or pages */
.article-flow > p:first-of-type::first-letter{font-family:var(--display);float:left;
  font-size:3.3rem;line-height:.9;padding:.28rem .5rem 0 0;color:var(--moss)}
.tags{border-top:1px solid var(--hairline);margin-top:2.6rem;padding-top:1rem;
  line-height:2.2}
.tags .filed{font-family:Verdana,Geneva,sans-serif;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--umber);margin-right:.6rem}
.tags a{display:inline-block;padding:.15rem 0;margin-right:.8rem;
  font-family:Verdana,Geneva,sans-serif;font-size:.74rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--moss);text-decoration:none;
  border-bottom:1px solid var(--brass-rule)}
.tags a:hover,.tags a:focus-visible{color:var(--clay-link);
  border-bottom-color:var(--clay-link)}

/* after-article: related + sign-off */
.after{max-width:720px;margin:2.4rem auto 0}
.after .postgrid{gap:1.4rem}
.after .card img{height:170px}
.signoff{max-width:720px;margin:3.5rem auto 0;background:var(--hearth);
  color:var(--hearth-cream);border-radius:4px;padding:1.7rem 1.8rem;text-align:center}
.signoff p{margin:.3rem 0;color:var(--cream-dim)}
.signoff .sig{font-family:var(--display);font-size:1.25rem;color:var(--hearth-cream)}
.signoff a{color:var(--brass);text-decoration-color:var(--brass)}
.ctaline{margin-top:1rem}
.ctaline a{display:inline-block;max-width:100%;border:1px solid var(--brass);
  border-radius:3px;padding:.55rem 1.2rem;color:var(--brass);text-decoration:none}
.ctaline a:hover,.ctaline a:focus-visible{background:var(--brass);color:var(--hearth);
  text-decoration:none}

/* in-article email capture band (Kit form pastes into .capture-form at wire-time) */
.capture{background:var(--hearth);color:var(--hearth-cream);border-radius:4px;
  padding:1.6rem 1.7rem;margin:2.2rem 0}
.capture .capture-title{font-family:var(--display);font-weight:600;font-size:1.35rem;
  margin:0 0 .4rem;color:var(--hearth-cream)}
.capture p{color:var(--cream-dim);margin:.3rem 0}
.capture .fineline{font-size:.85rem;color:var(--cream-faint);margin-top:.8rem}
.capture a{color:var(--brass);text-decoration-color:var(--brass)}
.capture input[type="email"],.capture input[type="text"],
.signoff-capture input[type="email"]{width:100%;padding:.6rem .8rem;
  border:1px solid var(--card-edge);border-radius:3px;background:var(--hearth-cream);
  color:var(--ink);font:inherit;margin:.35rem 0}
.capture button,.capture input[type="submit"],.signoff-capture button{border:1px solid var(--brass);
  border-radius:3px;padding:.55rem 1.2rem;background:var(--brass);color:var(--hearth);
  font:inherit;cursor:pointer}
.capture button:hover,.capture button:focus-visible,
.capture input[type="submit"]:hover,
.signoff-capture button:hover,.signoff-capture button:focus-visible{background:transparent;color:var(--brass)}

/* signoff email capture — the band's own quiet form (design queue #12, at Kit signup) */
.signoff-capture{max-width:24rem;margin:1.5rem auto 1.1rem}
.signoff-capture .capture-title{font-family:var(--display);font-weight:600;
  font-size:1.15rem;margin:0 0 .3rem;color:var(--hearth-cream)}
.signoff-capture .fineline{font-size:.8rem;color:var(--cream-faint);margin-top:.6rem}

/* save-to-Pinterest affordance — utility tier, tucked under the article hero */
.pinline{margin:-1.1rem 0 1.6rem;text-align:right}
.pinline a{font-family:Verdana,Geneva,sans-serif;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--moss);
  text-decoration:none;border-bottom:1px solid var(--brass-rule);
  display:inline-block;padding:.25rem 0}
.pinline a:hover,.pinline a:focus-visible{color:var(--clay-link);
  border-bottom-color:var(--clay-link)}

/* category pages */
main .well>h1,.browse-heading h1{font-family:var(--display);font-weight:500;font-size:2.5rem;
  margin:0 0 .35rem}
.catdek{color:var(--umber);margin:0 0 1.2rem;max-width:34em}
.browse-heading{padding:0 0 1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--hairline)}
.browse-count{font-size:.85rem;color:var(--umber);margin:0}
.catrow{margin-top:2.4rem;color:var(--umber);font-size:.9rem}
.catrow a{display:inline-block;padding:.25rem 0;margin-right:1rem}

/* footer — the site's other map */
footer{flex-shrink:0;background:var(--hearth);color:var(--cream-faint);margin-top:3rem;
  padding:1.7rem 1.2rem 1.5rem;text-align:center;font-size:.85rem}
footer a{display:inline-block;padding:.2rem 0;color:var(--cream-dim);
  text-decoration:underline;text-decoration-color:rgba(176,141,69,.6)}
footer a:hover{color:var(--brass)}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem 1.4rem;
  margin-bottom:.8rem}
.fnav a{font-family:Verdana,Geneva,sans-serif;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.fnav a:hover{text-decoration:underline;text-decoration-color:var(--brass)}
footer .legal{margin:0;line-height:2}

@media (max-width:37.5em){
  .post{padding:1.5rem 1.2rem}
  /* The disclosure must be FULLY above the fold on the smallest phone we measure
     (375x560 leaves ~277px under the masthead). At 1.15rem it ran to six lines and
     193px, overshooting by 38px. Rakuten requires "as large or larger than the main
     text", so dropping to exactly body size here is compliant and it still carries the
     colour, the weight and the panel. tests/disclosure_format_check.py pins the floor. */
  .disclosure{font-size:var(--fs-body);line-height:1.45;padding:.55rem .75rem}
  .brand{font-size:1.7rem}
  .masthead{padding-top:1rem}
  .masthead-top{display:block;text-align:center}
  .tagline{margin:.15rem 0 .4rem;font-size:.85rem}
  .utility-nav{justify-content:center;gap:1.5rem;margin-bottom:.4rem;font-size:.9rem}
  .masthead > nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 .8rem;padding:.45rem 0;text-align:left}
  .masthead > nav a{font-size:.66rem;letter-spacing:.07em;white-space:normal;
    display:flex;align-items:center;min-height:38px;padding:.4rem 0}
  .hero-band{padding:1.4rem 1.2rem 2.2rem}
  main .well > .postgrid .card:only-child > div{padding:1.1rem 1.2rem 1.3rem}
}

/* round-5 surgical additions */
.nb{white-space:nowrap}
.hero-band .ctaline{margin-top:1.3rem}
.aboutline{margin-top:.7rem;font-size:.85rem}
.aboutline a{color:var(--cream-dim)}
@media (max-width:37.5em){
  .meta,.cat{font-size:.68rem;letter-spacing:.08em}
}
@media (max-width:60em){
  .hero-band .inner{gap:var(--space-md)}
  .hero-band h1{font-size:2.7rem}
  .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-heading{align-items:flex-start;flex-direction:column;gap:.5rem}
}
@media (max-width:47.5em){
  .hero-band .inner{grid-template-columns:1fr}
  .hero-band h1{font-size:2.6rem;margin:.7rem 0 1rem}
  .hero-band p{font-size:1rem;max-width:none}
  .hero-band img{grid-row:1;height:210px;aspect-ratio:3/2;object-position:center 56%}
  .hero-band .eyebrow{font-size:.65rem}
  .printable-feature{grid-template-columns:1fr}
  .printable-feature > img{height:250px;min-height:0}
  .room-link{gap:.7rem;padding:.85rem .65rem .85rem 0}
  .room-link img,.room-initial{width:48px;height:64px}
  .room-link strong{font-size:.95rem}
  .room-count{font-size:.74rem}
  .room-arrow{display:none}
  .room-section{margin-bottom:var(--space-md)}
  .section-heading h2{font-size:1.6rem}
  .breadcrumbs{margin:-1rem 0 1rem;line-height:1.55}
  .post h1{font-size:1.8rem}
  .article-dek{font-size:1rem}
  .browse-heading h1{font-size:2rem}
}

/* ============================================================================
   Motion layer (Fable creative pass 2026-08-24) — heritage-quiet, CSS-only,
   triple-gated: @supports for scroll timelines, reduced-motion for everything,
   and base states that are fully visible/readable with neither.
   ========================================================================== */
@media screen and (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}

  /* Cross-document view transitions: the clicked photograph carries the reader
     into the article; chrome stays put so only the content breathes. */
  @view-transition{navigation:auto}
  .masthead{view-transition-name:masthead}
  footer{view-transition-name:sitefooter}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
  ::view-transition-group(*){animation-duration:.45s;
    animation-timing-function:cubic-bezier(.33,0,.2,1)}
  ::view-transition-group(masthead),::view-transition-group(sitefooter){animation:none}

  /* One-time hero settle on load — the room comes into focus, nothing jumps.
     MOVES ONLY, never fades: see the reveal note below. */
  .hero-copy{animation:settle .8s cubic-bezier(.25,0,.2,1) both}
  @keyframes settle{from{transform:translateY(10px)}to{transform:none}}

  /* Micro-transitions — glints, not gestures. */
  a,.masthead nav a,.cat a,a.cat,.tags a{transition:color .25s ease,
    border-color .25s ease,text-decoration-color .25s ease}
  .ctaline a,.capture button,.capture input[type="submit"],.signoff-capture button{
    transition:background-color .3s ease,color .3s ease}

  /* Scroll-driven reveals — supported browsers only.
     NO ANIMATION IN THIS FILE MAY BEGIN FROM AN INVISIBLE STATE, and a scroll-driven
     one least of all. A `view()` timeline never advances for a renderer that does not
     scroll — headless screenshot capture, social/Discover preview capture, crawlers
     that render — so with an opacity fade every element below the fold is served at
     opacity .001 and the page reads BLANK. Measured 2026-09-03 on our own front page:
     14 of 14 revealable elements invisible, ~2,800px of empty cream between the hero
     and the footer. Distribution is this business's whole constraint, and those
     capture paths are distribution. The reveal therefore MOVES and never fades; the
     base state is the fully visible final state in every renderer.
     Gated by tests/css_visibility_check.py — do not reintroduce an opacity keyframe. */
  @supports (animation-timeline: view()) and (animation-range: entry 0%){
    .card,.seclabel,.newnote,.signoff,.catrow{
      animation:rise .7s cubic-bezier(.25,0,.2,1) both;
      animation-timeline:view();animation-range:entry 0% entry 55%}
  }
  @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
}

@media (prefers-reduced-motion: reduce){
  .card a img,.hero{view-transition-name:none !important}
}

/* shop sale band — the hearth ground of .capture, so the shop's own announcement
   reads as part of the house rather than a bolted-on promo. Rendered only inside
   the sale window (build_site.sale_notice); absent from the HTML otherwise. */
.saleband{background:var(--hearth);border:1px solid var(--brass);border-radius:4px;
  padding:1rem 1.2rem;margin:0 0 1.5rem}
.saleband .saleband-title{font-family:var(--display);font-weight:600;font-size:1.1rem;
  margin:0 0 .35rem;color:var(--brass)}
.saleband p{color:var(--cream-dim);margin:.3rem 0;font-size:.9rem;line-height:1.6}
.shop-page{max-width:880px}
.shop-page .body{max-width:none}
.shop-page .body > p{max-width:42em}