/* Own The Care Guide v5 layout. No imports, remote fonts or network assets. */
:root { color-scheme: light; --navy:#0b2c50; --blue:#244e77; --ice:#eaf5fc; --ice-deep:#d9eaf7; --paper:#fff; --yellow:#ffe152; --line:#d1dfeb; --muted:#3e5974; --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
html { scroll-padding-top:1.5rem; }
body { margin:0; padding:1.5rem; background:var(--ice); color:var(--navy); font-family:var(--sans); font-size:1.0625rem; line-height:1.65; }
.site-shell { max-width:1440px; margin:auto; border:1px solid #e2ecf4; border-radius:14px; background:var(--paper); box-shadow:0 12px 45px #16345012; }
a { color:inherit; text-underline-offset:.2em; text-decoration-thickness:.07em; }
a:hover { color:#0060a0; }
button, input, select, textarea { font:inherit; }
a:focus-visible, summary:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid #0966a6; outline-offset:4px; border-radius:3px; }
img, svg { max-width:100%; }
img { display:block; }
p, ul, ol, figure { margin:0 0 1.1rem; }
h1, h2, h3 { margin:0 0 1rem; line-height:1.12; letter-spacing:-.045em; font-weight:650; text-wrap:balance; }
h1 { font-size:clamp(2.4rem,4.1vw,4.5rem); }
h2 { font-size:clamp(1.8rem,2.7vw,3.2rem); }
h3 { font-size:clamp(1.2rem,1.8vw,1.65rem); }
li { margin-bottom:.6rem; }
.skip-link { position:absolute; left:2rem; top:-10rem; z-index:50; padding:1rem; background:var(--yellow); }
.skip-link:focus { top:1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.3rem clamp(1.2rem,3.5vw,3.7rem); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; flex:0 0 auto; gap:.85rem; color:var(--navy); font-size:1.65rem; font-weight:700; letter-spacing:-.055em; text-decoration:none; line-height:1.1; }
.brand svg { width:42px; height:42px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:square; }
.desktop-nav ul { display:flex; flex-wrap:wrap; justify-content:end; gap:.2rem 1.7rem; list-style:none; margin:0; padding:0; }
.desktop-nav li { margin:0; }
.desktop-nav a { display:block; padding:.8rem 0; font-size:.87rem; text-decoration:none; }
.desktop-nav a[aria-current=page] { text-decoration:underline; text-decoration-color:#cfab00; }
.mobile-nav { display:none; }
.eyebrow { font-size:.73rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.textile-image { display:block; position:relative; overflow:hidden; width:100%; aspect-ratio:1; background:var(--ice-deep); }
.textile-image > img { width:100%; height:100%; object-fit:cover; }
.textile-image.atlas-image { aspect-ratio:1 !important; }
.atlas-image > img { position:absolute; max-width:none; object-fit:fill; }
.home-hero { position:relative; isolation:isolate; overflow:hidden; min-height:500px; background:linear-gradient(120deg,#f8fcff 0%,#e9f5fd 65%,#dceffb 100%); }
.hero-copy { position:relative; z-index:1; width:58%; padding:3.5rem 0 3.8rem clamp(1.2rem,3.5vw,3.7rem); }
.hero-copy h1 { font-size:clamp(2.8rem,4.5vw,5.2rem); line-height:1.04; margin:1rem 0 1.35rem; }
.hero-copy .eyebrow { margin:0; }
.hero-deck { max-width:28rem; font-size:clamp(1.15rem,1.6vw,1.5rem); line-height:1.5; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.35rem; margin-top:1.5rem; }
.pill-link { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; padding:.85rem 1.25rem; border-radius:100px; background:var(--yellow); color:#0a223c; text-decoration:none; font-size:.98rem; font-weight:650; min-height:48px; }
.pill-link:hover { background:#ffda29; color:#0a223c; }
.read-link { display:inline-flex; align-items:center; gap:.6rem; min-height:44px; font-size:.94rem; text-decoration:underline; text-decoration-color:#ddbd24; text-underline-offset:.4em; }
.hero-mosaic { position:absolute; z-index:0; inset:0 0 0 37%; clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,28% 53%,0 18%); }
.hero-mosaic .textile-image { height:100%; aspect-ratio:auto; }
.hero-mosaic img { object-position:50% 50%; }
.hero-copy::after { content:''; position:absolute; z-index:-1; inset:0 -7rem 0 0; background:linear-gradient(90deg,#f3faff 62%,#eff8fe00 100%); pointer-events:none; }
.start-strip { display:grid; grid-template-columns:minmax(16rem,1fr) minmax(0,2fr); gap:2rem; padding:2rem clamp(1.2rem,3.5vw,3.7rem); background:var(--ice); }
.start-copy::before { content:''; display:block; height:3px; width:48px; background:var(--yellow); margin-bottom:1.2rem; }
.start-copy h2 { font-size:clamp(1.7rem,2.3vw,2.7rem); }
.start-copy p:not(.eyebrow) { font-size:.99rem; color:var(--muted); margin-bottom:0; }
.start-copy .eyebrow { margin-bottom:.6rem; }
.quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-self:center; }
.quick-grid .story-card { display:grid; grid-template-columns:minmax(5rem,35%) minmax(0,1fr); gap:1rem; align-items:center; background:#fff; border-radius:7px; padding:.8rem; }
.quick-grid .story-card h3 { font-size:1.1rem; line-height:1.25; margin-bottom:.4rem; }
.quick-grid .story-card p { font-size:.85rem; line-height:1.5; margin-bottom:.3rem; }
.quick-grid .read-link { font-size:.82rem; }
.story-card { min-width:0; }
.story-card h3 a { text-decoration:none; }
.story-card p { color:var(--muted); }
.story-card .illustration-note { font-size:.78rem; line-height:1.5; color:var(--muted); }
.card-art { min-width:0; overflow:hidden; }
.editorial-shelf { padding:2rem clamp(1.2rem,3.5vw,3.7rem); }
.editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.8rem; }
.editorial-grid .story-card:not(:last-child) { padding-right:1.8rem; border-right:1px solid var(--line); }
.editorial-grid .card-art { aspect-ratio:2; margin-bottom:1rem; }
.editorial-grid .story-card h3 { font-size:1.45rem; }
.editorial-grid .story-card p { font-size:.98rem; line-height:1.55; }
.article-header { padding:3rem clamp(1.2rem,3.5vw,3.7rem); background:var(--ice); border-bottom:1px solid var(--line); }
.article-header.text-only > div { max-width:64rem; }
.article-header.with-image { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:3.5rem; align-items:center; }
.article-header.with-image figure { width:min(100%,360px); margin:0; justify-self:center; }
.article-header figcaption { margin-top:.7rem; font-size:.76rem; color:var(--muted); line-height:1.55; }
.article-description { font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.6; margin-bottom:0; max-width:62ch; }
.reading-layout { display:grid; grid-template-columns:minmax(13rem,1fr) minmax(0,3fr); gap:clamp(2rem,4vw,4.7rem); padding:3rem clamp(1.2rem,3.5vw,3.7rem); }
.on-this-page { border-top:3px solid var(--yellow); padding-top:1.1rem; }
.on-this-page > p { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.on-this-page ol { padding-left:1.2rem; font-size:.92rem; }
.on-this-page a { text-decoration:none; }
.source-copy { min-width:0; max-width:78ch; }
.original-home-title { font-size:clamp(1.9rem,2.5vw,3rem); }
.source-lede { font-size:1.15rem; color:var(--muted); margin-bottom:2.2rem; }
.source-section { scroll-margin-top:1.5rem; margin-bottom:2.7rem; }
.source-section h2 { font-size:clamp(1.6rem,2.25vw,2.35rem); line-height:1.15; }
.source-section h2::before { content:''; display:block; width:28px; height:2px; background:var(--yellow); margin-bottom:.75rem; }
.source-section p, .source-section li { overflow-wrap:anywhere; }
.source-section ul { padding-left:1.25rem; }
.source-section li { padding-left:.2rem; }
.source-section li::marker { color:var(--blue); }
.page-spot-stain-chart .source-section ul { list-style:none; padding:0; }
.page-spot-stain-chart .source-section li { border-left:3px solid var(--yellow); background:#f3f8fc; margin:1rem 0; padding:1rem 1.2rem; }
.sources { border-top:1px solid var(--line); padding-top:1.5rem; margin-top:2rem; }
.sources h2 { font-size:1.75rem; }
.sources ol { padding-left:1.25rem; font-size:.86rem; line-height:1.7; }
.sources a { overflow-wrap:anywhere; }
.archive-sources { margin-top:1.6rem; padding-top:1.3rem; border-top:1px solid var(--line); font-size:.9rem; }
.archive-sources h2 { font-size:1.4rem; }
.archive-sources a { overflow-wrap:anywhere; }
.related { border-top:1px solid var(--line); padding:2rem clamp(1.2rem,3.5vw,3.7rem) 2.5rem; }
.related h2 { font-size:1.8rem; }
.related ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem 1.8rem; list-style:none; margin:0; padding:0; }
.related a { display:block; padding:.7rem 0; min-height:44px; font-size:1rem; }
.topic-directory { border-top:1px solid var(--line); padding-top:2rem; margin-block:2rem; }
.topic-directory > h2 { font-size:2rem; }
.topic-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
.topic-groups h3 { font-size:1.3rem; }
.topic-groups ul { padding-left:1.2rem; font-size:.96rem; }
.topic-groups a { display:inline-block; padding-block:.3rem; }
.faq { margin-block:2rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.faq h2 { font-size:1.8rem; }
.faq details { border-bottom:1px solid var(--line); padding:1rem 0; }
.faq summary { min-height:44px; font-weight:600; cursor:pointer; }
.faq details p { margin:1rem 0 0; }
.contact-box { border:1px solid var(--line); border-radius:7px; background:var(--ice); padding:1.5rem; margin-block:2rem; }
.contact-box h2 { font-size:1.8rem; }
.contact-notice { color:#0c5480; }
.contact-box fieldset { border:0; padding:0; min-width:0; }
.contact-box legend { font-size:.9rem; font-weight:600; padding-block:.5rem; }
.contact-box label { display:grid; gap:.4rem; margin-block:1rem; font-size:.98rem; }
.contact-box input, .contact-box textarea, .contact-box select { width:100%; min-width:0; min-height:48px; padding:.8rem; border:1px solid #7c97ae; border-radius:4px; color:var(--navy); background:#fff; }
.contact-box textarea { resize:vertical; }
.contact-box fieldset > p { font-size:.88rem; }
.contact-box button { min-height:48px; border:0; padding:.8rem 1.3rem; background:var(--navy); color:#fff; border-radius:4px; }
.contact-box button:disabled { background:#61788b; cursor:default; }
.contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.site-footer { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(16rem,1fr); gap:2rem; align-items:center; padding:1.9rem clamp(1.2rem,3.5vw,3.7rem); border-radius:0 0 13px 13px; background:#0c2c47; color:#fff; }
.site-footer .brand { color:#fff; font-size:1.25rem; }
.site-footer .brand svg { width:34px; height:34px; }
.site-footer nav ul { display:flex; gap:.5rem 1.3rem; list-style:none; padding:0; margin:0; font-size:.82rem; flex-wrap:wrap; }
.site-footer nav li { margin:0; }
.site-footer nav a { display:inline-block; padding:.5rem 0; }
.site-footer p { margin:0; font-size:.8rem; line-height:1.6; }
.site-footer .preview-note { margin-top:.7rem; color:#d3e5f4; font-size:.72rem; }
@media (max-width:1100px) {
  body { padding:1rem; }
  .masthead { gap:1.2rem; }
  .brand { font-size:1.45rem; }
  .brand svg { width:36px; height:36px; }
  .desktop-nav ul { gap:.2rem 1rem; }
  .desktop-nav a { font-size:.8rem; }
  .home-hero { min-height:460px; }
  .hero-copy { width:62%; }
  .hero-copy h1 { font-size:clamp(2.8rem,4.6vw,4.5rem); }
  .start-strip { grid-template-columns:1fr; gap:1.3rem; }
  .start-copy h2 br { display:none; }
  .quick-grid .story-card { grid-template-columns:6.5rem minmax(0,1fr); }
  .site-footer { grid-template-columns:1fr 1fr; }
  .site-footer > div { grid-column:1 / -1; }
}
@media (max-width:760px) {
  body { padding:.7rem; font-size:1rem; }
  .site-shell { border-radius:10px; }
  .masthead { padding:1rem; }
  .brand { font-size:1.25rem; gap:.6rem; }
  .brand svg { width:31px; height:31px; }
  .desktop-nav { display:none; }
  .mobile-nav { display:block; position:relative; }
  .mobile-nav summary { display:flex; gap:.4rem; align-items:center; min-height:44px; min-width:44px; list-style:none; cursor:pointer; }
  .mobile-nav summary::-webkit-details-marker { display:none; }
  .mobile-nav summary > span:last-child { font-size:1.5rem; }
  .menu-word { font-size:.72rem; }
  .mobile-nav nav { position:absolute; top:100%; right:0; z-index:20; min-width:min(18rem,80vw); padding:.6rem 1rem; background:#fff; border:1px solid var(--line); box-shadow:0 12px 20px #16345012; }
  .mobile-nav ul { margin:0; padding:0; list-style:none; }
  .mobile-nav a { display:block; padding:.8rem .2rem; min-height:44px; font-size:.95rem; }
  .home-hero { min-height:0; display:flex; flex-direction:column; }
  .hero-copy { width:100%; padding:1.6rem 1rem 1.4rem; }
  .hero-copy::after { display:none; }
  .hero-copy .eyebrow { font-size:.64rem; }
  .hero-copy h1 { font-size:clamp(1.9rem,7.2vw,3.2rem); margin:.75rem 0 1rem; }
  .hero-deck { font-size:1.05rem; margin-bottom:0; }
  .hero-actions { gap:.7rem 1.2rem; margin-top:1.1rem; }
  .hero-actions > .read-link { font-size:.85rem; }
  .pill-link { font-size:.88rem; padding:.7rem 1rem; }
  .hero-mosaic { position:static; clip-path:none; }
  .hero-mosaic .textile-image { aspect-ratio:1.65; height:auto; }
  .start-strip { padding:1.5rem 1rem; gap:1.1rem; }
  .start-copy .eyebrow { font-size:.64rem; }
  .start-copy h2 { font-size:1.65rem; margin-bottom:.7rem; }
  .start-copy p:not(.eyebrow) { font-size:.94rem; }
  .quick-grid { grid-template-columns:1fr; gap:.8rem; }
  .quick-grid .story-card { grid-template-columns:5.3rem minmax(0,1fr); padding:.65rem; gap:.8rem; }
  .quick-grid .story-card p { display:none; }
  .quick-grid .story-card h3 { font-size:1rem; }
  .quick-grid .read-link { font-size:.8rem; }
  .editorial-shelf { padding:1rem; }
  .editorial-grid { grid-template-columns:1fr; gap:0; }
  .editorial-grid .story-card, .editorial-grid .story-card:not(:last-child) { display:grid; grid-template-columns:5.3rem minmax(0,1fr); gap:.9rem; border:0; border-bottom:1px solid var(--line); padding:1rem 0; }
  .editorial-grid .card-art { aspect-ratio:1; margin:0; }
  .editorial-grid .story-card h3 { font-size:1.08rem; }
  .editorial-grid .story-card p { font-size:.88rem; line-height:1.5; }
  .editorial-grid .read-link { font-size:.83rem; }
  .article-header { padding:2rem 1rem; }
  .article-header.with-image { display:flex; flex-direction:column; gap:1.4rem; }
  .article-header.with-image > div { width:100%; }
  .article-header h1 { font-size:clamp(2rem,7.5vw,3.2rem); }
  .article-description { font-size:1.05rem; }
  .article-header.with-image figure { width:min(100%,280px); align-self:start; }
  .reading-layout { display:block; padding:1.8rem 1rem; }
  .on-this-page { margin-bottom:2rem; }
  .on-this-page ol { columns:2; gap:1.6rem; font-size:.86rem; }
  .on-this-page li { break-inside:avoid; }
  .source-copy { max-width:none; }
  .source-lede { font-size:1.05rem; }
  .source-section { margin-bottom:2.2rem; }
  .source-section h2 { font-size:1.6rem; }
  .related { padding:1.8rem 1rem; }
  .related ul { grid-template-columns:1fr; gap:.2rem; }
  .related li { margin:0; border-bottom:1px solid var(--line); }
  .topic-groups { grid-template-columns:1fr; gap:1.4rem; }
  .contact-box { padding:1rem; }
  .site-footer { display:block; padding:1.5rem 1rem; border-radius:0 0 9px 9px; }
  .site-footer .brand, .site-footer nav { margin-bottom:1rem; }
}
@media (max-width:390px) {
  body { padding:.4rem; }
  .masthead { padding:.85rem; gap:.6rem; }
  .brand { font-size:1.12rem; gap:.5rem; }
  .brand svg { width:29px; height:29px; }
  .hero-copy { padding-inline:.9rem; }
  .hero-copy h1 { font-size:1.96rem; }
  .hero-deck { font-size:1rem; }
  .hero-actions { gap:.65rem; }
  .hero-actions .read-link { font-size:.82rem; }
  .on-this-page ol { columns:1; }
  .editorial-grid .story-card, .editorial-grid .story-card:not(:last-child) { grid-template-columns:4.6rem minmax(0,1fr); gap:.7rem; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}
@media print {
  body { background:#fff; padding:0; color:#111; font-size:11pt; }
  .site-shell { box-shadow:none; border:0; }
  .masthead, .site-footer, .on-this-page, .home-hero, .start-strip, .editorial-shelf, .related, .contact-box { display:none; }
  .reading-layout { display:block; padding:0; }
  .source-copy { max-width:none; }
  .article-header { background:#fff; padding:0 0 1rem; }
  .article-header.with-image { display:block; }
  .article-header figure { display:none; }
  .sources { display:block; }
  .faq details:not([open]) > *:not(summary) { display:block !important; }
}

/* Current individual guide illustrations retain their landscape composition. */
.article-header [data-image-role^="article-"] { aspect-ratio:16/9; }

/* Exact legacy inline geometry, external CSS only; no CSP relaxation. */
span.rg-atlas-00 { --atlas-x:0%;--atlas-y:0%; }
span.rg-atlas-10 { --atlas-x:100%;--atlas-y:0%; }
span.rg-atlas-01 { --atlas-x:0%;--atlas-y:50%; }
span.rg-atlas-11 { --atlas-x:100%;--atlas-y:50%; }
span.rg-atlas-02 { --atlas-x:0%;--atlas-y:100%; }
span.rg-atlas-12 { --atlas-x:100%;--atlas-y:100%; }
img.rg-object-center { object-position:50% 50%; }
.atlas-image > img.rg-sheet-12 { width:200%;height:300%;left:-100%;top:-200%; }
.atlas-image > img.rg-sheet-02 { width:200%;height:300%;left:0%;top:-200%; }