/* Approved Alpine Light + Clean Workshop. Figma esyPFML4wtVCgjb6YNJ4tq, nodes 5:3 / 5:59.
   Shared tokens and components. Legacy families consume these aliases during migration. */
:root{color-scheme:light;--page:#F7F9F6;--surface:#FFFFFF;--text:#10191F;--muted:#52636C;--accent:#DCF34D;--support:#E7EEF0;--line:#DCE4E6;--ink:#10191F;--link-hover:#354D14;--paper:var(--page);--bg:var(--page);--field:var(--surface);--panel:var(--surface);--heading:"Bricolage Grotesque",sans-serif;--body:"DM Sans",sans-serif;--radius:16px;--space:clamp(20px,4vw,60px)}
html{color-scheme:light;background:var(--page)}body{background:var(--page);color:var(--text);font-family:var(--body)}
h1,h2,h3,h4,h5,h6{font-family:var(--heading);color:var(--text)}
a{color:var(--ink)}a:hover{color:var(--link-hover)}
:focus-visible{outline:3px solid var(--text);outline-offset:4px;box-shadow:0 0 0 6px var(--accent)}
.site-header,.header,footer,.footer{--text:#F3F7F9;--muted:#BDCCD2;--ink:#F3F7F9;--line:#3A4B54;--surface:#18252D;--panel:#18252D;--field:#18252D;background:#10191F;color:#F3F7F9}
.site-header,.header{padding:22px var(--space);max-width:1440px;border:0;border-radius:0 0 var(--radius) var(--radius);margin:0 auto}
.shell>.header{margin-inline:0}
.site-header a,.header a,footer a,.footer a{color:#F3F7F9}
.site-header a:hover,.header a:hover,footer a:hover,.footer a:hover{color:var(--accent)}
.site-header .brand,.header .brand{line-height:1.02;color:#F3F7F9}
.brand strong{color:var(--accent)}
footer,.footer{padding:40px var(--space);border-radius:var(--radius) var(--radius) 0 0}
footer h2,footer h3,.footer h2,.footer h3{color:#F3F7F9}
footer .muted,.footer .muted{color:#BDCCD2}
:is(.site-header,.header,footer,.footer) :focus-visible{outline-color:#F3F7F9}
:is(.button,.primary-action,.hero-shortcut,.search-form button,button[type=submit]){background:var(--accent);border:1px solid var(--accent);border-radius:12px;color:#10191F;font-family:var(--heading);font-weight:700;text-decoration:none;min-height:44px}
:is(.button,.primary-action,.hero-shortcut,.search-form button,button[type=submit]):hover{background:#E6F775;color:#10191F;border-color:#10191F}
:is(.button,.primary-action){max-width:100%;white-space:normal;overflow-wrap:anywhere}
:is(input,select,textarea){background:#FFFFFF;color:var(--text);border:1px solid #8B9BA2;border-radius:10px}
:is(input,textarea)::placeholder{color:#52636C;opacity:1}
.search-form input,.search-form select,.filters input,.filters select{background:#FFFFFF;color:var(--text);border:1px solid #8B9BA2;border-radius:10px}
.search-form>div{gap:12px}.search-form input{border-right:1px solid #8B9BA2}.search-form button{border-radius:10px}
.lede,.comparison,.card-copy p,.article-body blockquote{color:var(--muted)}
.eyebrow,.category-label,.row-kind,.category-link small,.item-purchase-hero .aside>h2,.purchase-comparison th{color:var(--text);font-weight:700}
.eyebrow{display:table;box-shadow:inset 0 -6px 0 var(--accent)}
:is(.product-card,.cvf-catalog-card,.guide-card,.project-card,.category-link,.resource-video-card,.ws-products article,.capsule-supply-card){background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
:is(.product-copy,.card-copy){padding:24px}
.product-image,.cvf-product-image{background:#FFFFFF}
.product-image img,.cvf-product-image img{object-fit:contain}
:is(.product-card,.cvf-catalog-card,.category-link):hover{border-color:#8B9BA2}
:is(.toc,.ws-toc,.article-sidebar,.aside>.product-card,.lesson,.resource-link,.asset-note,.technical-review-note,.empty){border-radius:12px}
.toc,.ws-toc{background:var(--support);border:1px solid var(--line);padding:24px}
.toc a,.ws-toc a{color:var(--text)}
.article-sidebar{border:1px solid var(--line);background:var(--surface);padding:20px;border-top:3px solid var(--accent);align-self:start}
.article-sidebar nav a{color:var(--muted)}
.article-sidebar nav a:hover{color:var(--text);text-decoration:underline}
:is(.lesson,.technical-review-note,.resource-link,.asset-note){background:var(--support);color:var(--text)}
.library-row{background:var(--surface);padding:24px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.library-row :is(h2,h3) a,.project-card h3 a,.card-copy h3 a{color:var(--text)}
.library-row :is(h2,h3) a:hover,.project-card h3 a:hover,.card-copy h3 a:hover{color:var(--link-hover);text-decoration:underline}
.topic-links{gap:20px}.topic-links>a{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:20px;color:var(--text)}
.topic-links>a:hover{border-color:#8B9BA2}
.topic-number{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--text);font-weight:700;margin-bottom:16px}
.diary-band{background:var(--support);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:20px;color:var(--text)}
.related{background:var(--support);border-radius:var(--radius)}
.article-body th,.prose th,.purchase-comparison th{background:var(--support);color:var(--text)}
.article-body td,.prose td,.purchase-comparison td{background:var(--surface);color:var(--text)}
.comparison-scroll,.table-wrap{border-radius:12px}
.article-body pre,.article-body code,.prose code{background:var(--support);color:var(--text)}
figure img{border-radius:12px}
figure:has(video){background:transparent}
video{background:#10191F;border-radius:12px;max-width:100%}
.home-search-band{margin:30px 4% 0;padding:20px 24px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.home-search-band .search-form{max-width:none}.home-search-band .search-form>div{margin-bottom:0}
.trailmark-hero{display:grid;grid-template-columns:1fr 1.08fr;gap:24px;align-items:center;min-height:0;margin:32px 4% 0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:20px;isolation:auto;overflow:hidden}
.trailmark-hero:after{display:none}
.trailmark-hero .responsive-hero{display:block;grid-column:2;grid-row:1;width:100%;height:100%;min-height:360px}
.trailmark-hero .hero-photo{position:static;z-index:auto;width:100%;height:100%;min-height:360px;object-fit:cover;object-position:center;filter:none;border-radius:12px}
.hero-copy{grid-column:1;grid-row:1;padding:16px;max-width:none}
.hero-copy h1{font-size:clamp(2.6rem,4.1vw,3.65rem);line-height:1.06;letter-spacing:-.04em;color:var(--text)}
.hero-copy h1 span{color:var(--text)}
.hero-copy .lede{color:var(--muted);font-size:1.1rem}
.hero-copy .secondary-action{display:block;margin:0;color:var(--text)}
#homepage-tools-materials,#homepage-electrical-system,#homepage-front-grille-guard,#expanded-raptor-project{background:var(--surface);border:1px solid var(--line);border-radius:20px;margin:32px 4%;padding:clamp(24px,3.2vw,44px)}
#homepage-tools-materials .feature-stats strong{color:var(--text)}
#homepage-electrical-system .eyebrow,#from-the-build .project-card-copy .eyebrow{color:var(--text)}
#from-the-build .project-card{background:var(--surface);border-radius:var(--radius)}
.hero figure img{background:var(--surface)}
.faq>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:16px}
.preview-note{background:var(--support);color:var(--text)}
@media(max-width:900px){.trailmark-hero{grid-template-columns:1fr 1fr;padding:20px;gap:16px}.hero-copy{padding:0}.hero-copy h1{font-size:clamp(2.4rem,5vw,3.3rem)}}
@media(max-width:760px){.site-header,.header{padding:20px}.shell{width:calc(100% - 40px)}.trailmark-hero{display:flex;flex-direction:column;margin:20px 5% 0;padding:20px;gap:24px}.hero-copy{width:100%}.hero-copy h1{font-size:clamp(2.5rem,10vw,3.5rem)}.trailmark-hero .responsive-hero{width:100%;height:240px;min-height:0}.trailmark-hero .hero-photo{min-height:0;height:240px;object-position:center 50%}.home-search-band{margin:20px 5% 0;padding:20px}.topic-links{gap:16px}.topic-links>a{padding:16px}.article-sidebar{padding:20px}.library-row{padding:20px}.diary-band{padding:24px}.product-copy,.card-copy{padding:20px}.search-form>div{gap:8px}#homepage-tools-materials,#homepage-electrical-system,#homepage-front-grille-guard,#expanded-raptor-project{margin:24px 5%;padding:24px;grid-template-columns:1fr}.faq>div{padding:20px}}
@media print{body,main,.shell{background:white;color:#10191F}.site-header,.header,footer,.footer{display:none}.trailmark-hero{display:block}.trailmark-hero .responsive-hero{display:none}}
/* Rendered review: preserve text-first mobile hero and compact library navigation. */
@media(max-width:760px){.trailmark-hero .hero-copy{order:0}.trailmark-hero .responsive-hero{order:1}}

/* Shared responsive constraints verified in rendered camera-bracket/table review. */
main img,.shell img{max-width:100%}
main,.shell,.article-body,.prose,.product-copy,.card-copy{min-width:0}
.article-body table,.prose table,.ws-table{display:block;max-width:100%;overflow-x:auto}
.menu-toggle,.search-link{border-radius:10px;min-height:44px}
@media(max-width:760px){.ws-detail{max-width:100%}.article-body table,.prose table{width:100%}}

/* Keep legacy fixed-width images and data tables inside their content column. */
main img{max-width:100%!important}
main table{display:block;max-width:100%;overflow-x:auto}
