/* Generated by scripts/build_assets.py; edit the sources, not this file. */
/* /assets/css/fonts-creations-v1.css */
/* [creations] fonts (owner 2026-10-11: [creations] is DM Sans throughout). Same as fonts-v1.css, except that
   'Cormorant Garamond' now resolves to DM Sans (82% to match its old size), so the hero tagline, product
   section titles and phone menu rows switch without selector edits. creations.html and product pages load
   this file; the hidden page keeps fonts-v1.css. */
/* Self-hosted Cormorant Garamond and DM Sans (SIL Open Font License 1.1, Google Fonts). latin + latin-ext subsets. */
/* 2026-10-10: each file is variable (Cormorant 300-700, DM Sans 100-1000), so every face declares a 300-700 range:
   semibold headings and titles render the real weight instead of a synthesized bold. */
@font-face {
 font-family: 'Cormorant Garamond';
 font-style: italic;
 font-weight: 100 1000;
 font-display: swap;
 size-adjust: 82%;
 src: url(/assets/fonts/dm-sans-normal-latin-ext-v1.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Cormorant Garamond';
 font-style: italic;
 font-weight: 100 1000;
 font-display: swap;
 size-adjust: 82%;
 src: url(/assets/fonts/dm-sans-normal-latin-v1.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'Cormorant Garamond';
 font-style: normal;
 font-weight: 100 1000;
 font-display: swap;
 size-adjust: 82%;
 src: url(/assets/fonts/dm-sans-normal-latin-ext-v1.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'Cormorant Garamond';
 font-style: normal;
 font-weight: 100 1000;
 font-display: swap;
 size-adjust: 82%;
 src: url(/assets/fonts/dm-sans-normal-latin-v1.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
 font-family: 'DM Sans';
 font-style: normal;
 font-weight: 300 700;
 font-display: swap;
 src: url(/assets/fonts/dm-sans-normal-latin-ext-v1.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'DM Sans';
 font-style: normal;
 font-weight: 300 700;
 font-display: swap;
 src: url(/assets/fonts/dm-sans-normal-latin-v1.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* "DM Sans Print" (2026-10-10): the same variable DM Sans files with their full weight range, used only for the
   carton-printed text of the Made to order sections (heavier than the 300-500 faces above). */
@font-face {
 font-family: 'DM Sans Print';
 font-style: normal;
 font-weight: 100 1000;
 font-display: swap;
 src: url(/assets/fonts/dm-sans-normal-latin-ext-v1.woff2) format('woff2');
 unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
 font-family: 'DM Sans Print';
 font-style: normal;
 font-weight: 100 1000;
 font-display: swap;
 src: url(/assets/fonts/dm-sans-normal-latin-v1.woff2) format('woff2');
 unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* /assets/css/site-62cd440b2f.css */
/* Bankasi Media shared refinements: 2026 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

:root { color-scheme: light dark; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
:focus-visible { outline: 2px solid var(--accent, #a0a0a0); outline-offset: 4px; }

/* Deliberately restrained motion. */
.brand-card,.team-card,.yt-card,.creation-card,.workbench-card,.value-card,.reach-card,
.btn-primary,.btn-ghost,.btn-dark,.btn-accent,.nav-cta,.btn-submit {
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease, opacity .18s ease !important;
}
.mg-glow,.mg-ripple { display:none !important; }

/* Shared navigation polish */
#mainNav { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#mainNav a[aria-current="page"] { color: var(--accent, #a0a0a0); }
#mainNav a[aria-current="page"]::after { transform: scaleX(1); }
#hamburgerBtn { min-width:44px; min-height:44px; }
#mobileMenu a { min-height:44px; display:flex; align-items:center; }
body.menu-open { overflow:hidden; }

/* Shared footer */
.footer-copy, footer p:last-child { text-wrap: balance; }

/* Hero: keep the entrance minimal and immediate */
.hero-eyebrow,.hero-title,.hero-sub,.hero-actions { opacity:1 !important; animation:none !important; }
.hero-video-bg { background:#050505; }

/* Workbench controls */
.workbench-tools { display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap; margin:0 0 2rem; }
.workbench-filters { display:flex; gap:.5rem; flex-wrap:wrap; }
.workbench-filter { appearance:none; border:1px solid rgba(0,0,0,.12); background:transparent; color:inherit; padding:.7rem 1rem; min-height:44px; font:inherit; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.workbench-filter[aria-pressed="true"] { background:var(--black,#111111); color:var(--white,#ffffff); border-color:var(--black,#111111); }
.workbench-search-wrap { position:relative; min-width:min(100%,280px); }
.workbench-search { width:100%; min-height:44px; border:1px solid rgba(0,0,0,.12); background:transparent; color:inherit; font:inherit; padding:.75rem 1rem; }
.workbench-empty { display:none; padding:2rem 0; color:var(--mid,#777777); }
.workbench-card[hidden] { display:none !important; }

/* Article progress */
.reading-progress { position:fixed; z-index:1001; left:0; top:0; width:100%; height:2px; pointer-events:none; background:transparent; }
.reading-progress > span { display:block; width:0; height:100%; background:var(--accent,#a0a0a0); }

/* About timeline */
.bankasi-timeline { padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem); background:var(--white,#f2f2f2); }
.bankasi-timeline-inner { max-width:1050px; margin:0 auto; }
.timeline-list { margin-top:2.5rem; border-top:1px solid rgba(0,0,0,.12); }
.timeline-item { display:grid; grid-template-columns:110px 1fr; gap:2rem; padding:1.6rem 0; border-bottom:1px solid rgba(0,0,0,.1); }
.timeline-year { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--accent,#7d7d7d); }
.timeline-title { font-weight:600; margin-bottom:.35rem; }
.timeline-copy { color:var(--mid,#6c6c6c); line-height:1.7; }

/* Creation gallery and modal */
.creation-card { cursor:pointer; }
.creation-card .creation-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:1.25rem; }
.creation-view,.creation-download-link { min-height:42px; display:inline-flex; align-items:center; justify-content:center; padding:.7rem .9rem; border:1px solid rgba(0,0,0,.14); background:transparent; color:inherit; text-decoration:none; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.creation-download-link { background:var(--black,#111111); color:var(--white,#ffffff); border-color:var(--black,#111111); }
.creation-modal { border:0; padding:0; width:min(760px,calc(100% - 2rem)); max-height:calc(100% - 2rem); background:var(--white,#f2f2f2); color:var(--black,#111111); }
.creation-modal::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.creation-modal-inner { position:relative; padding:clamp(1.5rem,4vw,3rem); }
.creation-modal-close { position:absolute; right:1rem; top:1rem; width:44px; height:44px; border:1px solid rgba(0,0,0,.14); background:transparent; color:inherit; cursor:pointer; font-size:1.3rem; }
.creation-modal-media { width:100%; aspect-ratio:16/9; object-fit:cover; background:#dddddd; margin-bottom:1.5rem; }
.creation-modal-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,3.3rem); font-weight:400; margin:0 3rem .8rem 0; }
.creation-modal-copy { line-height:1.8; color:var(--mid,#666666); }
.creation-modal-note { margin-top:1rem; font-size:.85rem; color:var(--mid,#666666); }
.creation-modal-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.6rem; }

/* Contact form refinements */
.form-group select { width:100%; min-height:48px; border:1px solid rgba(0,0,0,.14); background:transparent; color:inherit; font:inherit; padding:.75rem .9rem; border-radius:0; }
.form-status { display:none; margin-top:1rem; line-height:1.6; }
.form-status.is-visible { display:block; }
.form-status.is-error { color:#535353; }
.btn-submit[disabled] { opacity:.55; cursor:not-allowed; }

/* HELP accessibility-friendly animated disclosure */
.help-answer { display:grid !important; grid-template-rows:0fr; padding-bottom:0 !important; overflow:hidden; transition:grid-template-rows .18s ease, padding-bottom .18s ease; }
.help-answer > .help-answer-inner { min-height:0; overflow:hidden; }
.help-answer.open { grid-template-rows:1fr; padding-bottom:1.5rem !important; }

/* Responsive */
@media (max-width:700px) {
  .timeline-item { grid-template-columns:1fr; gap:.25rem; }
  .workbench-tools { align-items:stretch; }
  .workbench-search-wrap { width:100%; }
  .creation-actions > * { flex:1 1 auto; }
}

@media (max-width: 0px) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  ::view-transition-old(root),::view-transition-new(root) { animation:none !important; }
}

/* Neutral media and compact integrations, within the original section rhythm. */
:root { color-scheme: dark; }
/* Photography, thumbnails, and video retain their original colors. */
.feed-status,.historical-note { font-size:.76rem; line-height:1.7; opacity:.72; margin:1rem 0; }
.shop-live { margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(160,160,160,.22); }
.shop-live a { color:inherit; text-underline-offset:4px; font-size:.8rem; }
.shop-label { font-size:.72rem; letter-spacing:.08em; }
.shop-stats { display:flex; flex-wrap:wrap; gap:2rem; }
.shop-stat strong { display:block; font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; font-variant-numeric:tabular-nums; }
.shop-stat span { font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; }
[hidden] { display:none !important; }

/* Soft monochrome light: static gradients preserve the original layout and motion. */
body { background-image: linear-gradient(135deg, #ffffff 0%, #f2f2f2 45%, #dcdcdc 100%); }
.page-hero, footer, .goal-section {
  background-image: radial-gradient(ellipse at 85% 0%, rgba(255,255,255,.14), transparent 60%), linear-gradient(125deg, #292929 0%, #111111 45%, #000000 100%);
}
.brands, .yt-section, .bankasi-timeline {
  background-image: radial-gradient(ellipse at 12% 5%, #ffffff 0%, transparent 58%), linear-gradient(145deg, #f4f4f4, #dedede);
}
.team { background-image: linear-gradient(120deg, #e0e0e0 0%, #fafafa 52%, #e8e8e8 100%); }
.brand-card, .team-card, .yt-card, .creation-card, .workbench-card, .reach-card {
  background-image: linear-gradient(135deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.3) 42%, rgba(0,0,0,.045) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 32px rgba(0,0,0,.035);
}
.brand-card:hover { background-image: linear-gradient(135deg, #363636, #080808); }
.value-card { background-image: linear-gradient(135deg, #252525, #080808); }
#mainNav { background-image: linear-gradient(110deg, rgba(255,255,255,.1), rgba(0,0,0,.12) 50%, rgba(255,255,255,.045)); }
.hero-title em, .page-hero h1 em {
  color: #d0d0d0;
  background-image: linear-gradient(115deg, #ffffff, #bdbdbd 55%, #8c8c8c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rule { background-image: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.75), rgba(0,0,0,.08)); }
@media (forced-colors: active) {
  .hero-title em, .page-hero h1 em { background:none; -webkit-text-fill-color:currentColor; }
}

/* Explicit surface colors prevent light text leaking onto pale sections. */
:root { --black:#101010; --white:#f4f4f4; --mid:#505050; --accent:#595959; --page-gutter:clamp(24px,5vw,80px); color-scheme:light; }
[data-surface="light"] { --ink:#161616; --secondary:#505050; --accent:#505050; color:var(--ink); color-scheme:light; }
[data-surface="dark"] { --ink:#fafafa; --secondary:#cecece; --accent:#dedede; color:var(--ink); color-scheme:dark; }
body[data-surface="dark"] { background:linear-gradient(125deg,#262626,#080808 70%); }
.section-title, .section-label, .page-hero h1, .post-hero h1, .mission-hero h1,
.mission-cta-title, .mission-cta-title em { color:var(--ink); }
.section-label, .mission-cta-label { color:var(--secondary) !important; opacity:1; font-weight:500; }
h1,h2,h3 { overflow-wrap:break-word; }
.hero-title em, .page-hero h1 em, .mission-hero h1 em { color:#e4e4e4; background:none; -webkit-text-fill-color:currentColor; text-shadow:0 0 30px rgba(255,255,255,.14); }
.page-hero, .post-hero, .mission-hero {
  padding:clamp(132px,12vw,180px) var(--page-gutter) clamp(56px,6vw,88px) !important;
  overflow:visible; isolation:isolate;
}
.page-hero h1, .post-hero h1, .mission-hero h1 { padding-inline:.035em; max-width:100%; line-height:1.14; }
[data-safe-section] { padding-inline:var(--page-gutter); }
section::before, .page-hero::before, footer::before { opacity:.38; }
[data-surface="light"] .section-title { color:#161616; }
[data-surface="dark"] .section-title { color:#fafafa; }
.brand-desc,.brand-num,.team-role,.team-desc,.yt-views,.creation-desc,.creation-note,.creation-num,
.workbench-excerpt,.workbench-date,.workbench-category,.reach-desc,.reach-region,.timeline-copy,.timeline-year,
.stat-label,.stat-num,.help-answer,.feed-status,.historical-note { color:var(--secondary); opacity:1; }
.yt-stat-label,.yt-stat-desc,.yt-videos-label,.yt-video-meta,.value-desc,.value-num,
.etsy-callout-desc,.page-hero p,.hero-sub,.footer-tagline,.footer-col .footer-heading,.footer-col a,
.footer-bottom,.footer-social a,.footer-copy { color:var(--secondary); opacity:1; }
.hero-sub { color:#e0e0e0; text-shadow:0 2px 12px #000; }
.brand-card:hover { --ink:#fff; --secondary:#dedede; color:#fff; }
.brand-card:hover .brand-num,.brand-card:hover .brand-desc { color:#dedede; }
/* A dark frosted nav stays readable over both white pages and colorful video. */
#mainNav {
  background:linear-gradient(110deg,rgba(36,36,36,.97),rgba(12,12,12,.95)) !important;
  border-bottom:1px solid #626262;
  box-shadow:0 8px 28px rgba(0,0,0,.28),0 1px 18px rgba(255,255,255,.07);
  padding-inline:var(--page-gutter); overflow:visible;
}
#mainNav .logo-main,#mainNav .logo-sup,#mainNav .nav-links a,#mainNav .nav-cta,
#mainNav a[aria-current="page"] { color:#f5f5f5 !important; }
#mainNav .nav-cta { background:rgba(255,255,255,.07) !important; border-color:#a0a0a0 !important; }
#mainNav a:hover { text-shadow:0 0 14px rgba(255,255,255,.35); }
.brand-card,.team-card,.yt-card,.creation-card,.workbench-card,.reach-card {
  box-shadow:inset 0 1px 0 #fff,0 0 22px rgba(255,255,255,.42),0 8px 24px rgba(0,0,0,.09);
  min-width:0;
}
.value-card,.yt-stat-card,.pillar,.etsy-callout {
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 28px rgba(255,255,255,.055);
}
.form-group input,.form-group textarea,.form-group select { color:#161616; background:#fafafa; border-color:#777; }
.form-group input::placeholder,.form-group textarea::placeholder { color:#595959; opacity:1; }
.form-group option { color:#161616; background:#fafafa; }
:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
#mainNav :focus-visible { outline-color:#fff; }
img,video { max-width:100%; }
.post-body,.story-body,.contact-detail-value { overflow-wrap:anywhere; min-width:0; }
@media(max-width:700px) {
  .page-hero h1,.mission-hero h1,.post-hero h1 { font-size:clamp(2.6rem,11vw,4rem); }
  .footer-top { flex-wrap:wrap; gap:2rem; }
  .footer-links { flex-wrap:wrap; gap:2rem; }
  .yt-stats-grid,.values-grid,.pillars-grid,.creations-grid { grid-template-columns:minmax(0,1fr); }
  .hero-actions a { max-width:100%; }
}

/* Never expose browser-default blue links, selection, or form accents. */
a { color:inherit; }
html { accent-color:#707070; }
::selection { color:#fff; background:#444; }
#mainNav .nav-logo, .yt-video-row { color:var(--ink,#f5f5f5); }
#mainNav { background-color:#161616 !important; }
.team-avatar { color:#e8e8e8; }
body[data-surface="dark"], .hero { background-color:#080808; }
.post-back,.post-date,.mission-tagline,.pillar-desc { color:#cecece; }
.post-cta { --ink:#fafafa; --secondary:#cecece; --accent:#dedede; }
.post-cta a { background:#dedede; color:#101010; white-space:normal; }
.post-cta p { color:#cecece; }
.hero-scroll { color:#cecece; }
/* Keep the geographic visualization's small labels legible. */
.globe-section p,.globe-section span,.globe-section div { color:#d0d0d0; }
.statement-label { color:#cecece; }
.workbench-featured .featured-accent-inner { color:#c8c8c8; text-shadow:0 0 32px rgba(255,255,255,.2); }
.creation-modal { margin:auto; max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 20px 80px rgba(0,0,0,.5),0 0 28px rgba(255,255,255,.12); }
.creation-modal-inner { padding-top:4.5rem; }
.creation-modal-close { z-index:3; background:#f4f4f4; color:#161616; border-color:#777; }
.creation-modal-title { margin-right:0; }
.globe-stats { gap:clamp(12px,4vw,56px) !important; padding-inline:24px !important; }
.globe-stats > div { min-width:0; }
@media (max-width:360px) { .globe-stats > div > div:last-child { font-size:.58rem !important; letter-spacing:.1em !important; } }

/* Creations uses the same editorial rhythm and pale frosted surfaces as Home/About. */
.page-creations .creations-section {
  background:radial-gradient(ellipse at 12% 5%,#fff,transparent 58%),linear-gradient(145deg,#f4f4f4,#dedede);
}
.page-creations .section-title { margin-bottom:1rem; }
.creations-intro { color:#505050; max-width:62ch; font-size:.92rem; line-height:1.8; margin-bottom:2rem; }
.page-creations .creations-grid { gap:1.5rem; background:transparent; border:0; align-items:stretch; }
.page-creations .creation-card { border:1px solid #c8c8c8; background:linear-gradient(135deg,#fafafa,#ededed); }
.page-creations .creation-body { padding:2rem; }
.page-creations .creation-num { font-family:'DM Sans',sans-serif; font-size:.72rem; letter-spacing:.16em; margin-bottom:1.15rem; }
.page-creations .creation-title { font-size:1.55rem; line-height:1.2; }
.page-creations .creation-desc { font-size:.88rem; }
.creation-img.is-placeholder { height:110px; aspect-ratio:auto; object-fit:contain; background:linear-gradient(135deg,#fafafa,#e0e0e0); }
.creation-preview-note { padding:.65rem 2rem; border-block:1px solid #d4d4d4; color:#505050; font-size:.7rem; letter-spacing:.04em; }
.page-creations .creation-actions { gap:.65rem; }
.page-creations .creation-actions > * { padding:.75rem .85rem; min-height:44px; }
.page-creations .etsy-section { background:radial-gradient(ellipse at 85% 0%,rgba(255,255,255,.12),transparent 60%),linear-gradient(125deg,#292929,#111 45%,#000); }
.page-creations .etsy-text h2 { font-size:clamp(2rem,4vw,3.2rem); }
.page-creations .etsy-text > p { color:#cecece; }
.creation-modal-media.is-placeholder { height:110px; object-fit:contain; background:linear-gradient(135deg,#fafafa,#dedede); }
@media(min-width:701px) and (max-width:1000px) { .page-creations .creations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Legacy section overlays can produce inset seams inside nested sections. Surface backgrounds already provide continuous gradients. */
section::before{background:none!important}
/* /assets/creations/collection-v12.css */
/* Scoped to this collection; existing pages and shared styles are unchanged. */
.page-creations .creations-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.page-creations .model-card{border:1px solid #d0d0d0;box-shadow:0 10px 35px #00000008,inset 0 1px 0 #fff;isolation:isolate}
.model-poster{position:relative;background:#e8e8e8;overflow:hidden}
.model-poster img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.page-creations .model-spec{font-size:.72rem;letter-spacing:.06em;color:#555;font-weight:500;margin:0 0 10px}
.page-creations .model-open{appearance:none;background:none;border:0;border-bottom:1px solid #888;padding:12px 0 7px;margin-top:16px;align-self:flex-start;font:500 .76rem 'DM Sans',sans-serif;letter-spacing:.05em;color:#171717;cursor:pointer}
.model-open::after{content:none}
.model-card:focus-within{outline:3px solid #555;outline-offset:4px}
.model-card:hover .model-open{border-color:#111}
.page-creations .model-card .creation-body{position:static}
#modelPreview{position:fixed;inset:0;margin:auto;width:min(1060px,calc(100% - 40px));max-height:calc(100dvh - 40px);padding:0;border:1px solid #aaa;border-radius:12px;color:#171717;background:linear-gradient(125deg,#fff,#e7e7e7);box-shadow:0 0 70px #ffffff26,0 32px 100px #0009;overflow:auto;overscroll-behavior:contain}
#modelPreview::backdrop{background:#000b;backdrop-filter:blur(10px)}
.model-dialog-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.model-close{position:absolute;right:14px;top:14px;z-index:10;border:1px solid #aaa;border-radius:50%;width:44px;height:44px;background:#fffffff2;color:#111;font:28px/1 sans-serif;cursor:pointer}
.model-stage{position:relative;aspect-ratio:1;overflow:hidden;cursor:grab;touch-action:pan-y;background:#e8e8e8;user-select:none}
.model-stage:active{cursor:grabbing}
#modelFrame{display:block;width:100%;height:100%;object-fit:contain;transform-origin:center}
.model-stage-label{position:absolute;left:20px;bottom:18px;color:#555;font-size:.6rem;letter-spacing:.2em;pointer-events:none}
.model-controls{padding:20px 24px;background:#f5f5f5;border-top:1px solid #ddd}
.model-controls label{font-size:.74rem;font-weight:500;color:#333}
.rotation-control{display:flex;align-items:center;gap:14px}
#modelRotation{flex:1;min-width:0;width:100%;height:28px;accent-color:#333;cursor:pointer}
.model-secondary-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.model-secondary-controls select,.model-secondary-controls button{font:inherit;min-height:36px;border:1px solid #aaa;background:#fff;color:#222;border-radius:4px;padding:6px 9px;cursor:pointer}
.model-secondary-controls select{max-width:150px;margin-left:5px;font-size:.72rem}
.model-zoom{display:flex;align-items:center;gap:8px;font-size:.72rem}
.model-zoom button{width:36px;font-size:20px}
.model-zoom output{width:38px;text-align:center}
#modelReset{font-size:.72rem}
#modelStatus{font-size:.7rem;line-height:1.6;color:#555;margin-top:14px;min-height:2.3em}
.model-details{padding:75px 32px 35px;align-self:center}
#modelTitle{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:400;line-height:1.08;margin-bottom:20px;overflow-wrap:anywhere}
#modelDescription{font-size:.9rem;line-height:1.8;color:#3b3b3b}
#modelNote{font-size:.77rem;line-height:1.7;color:#555;margin-top:15px}
.model-preview-disclosure{font-size:.72rem;line-height:1.7;color:#555;border-top:1px solid #ccc;margin-top:24px;padding-top:18px}
.model-shop,.model-contact{display:block;width:fit-content;font-size:.76rem;line-height:1.6;margin-top:20px;color:#222;text-decoration:underline;text-underline-offset:4px}
.model-shop{background:linear-gradient(120deg,#333,#111);border:1px solid #555;color:#fff;padding:12px 17px;text-decoration:none}
#modelPreview :focus-visible{outline:3px solid #666;outline-offset:3px}
#modelPreview button:disabled{opacity:.4;cursor:default}
@media(min-width:1100px){.page-creations .creations-grid{max-width:1140px;margin-inline:auto}}
@media(max-width:760px){.page-creations .creations-grid{grid-template-columns:1fr;gap:24px}
#modelPreview{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
.model-dialog-grid{grid-template-columns:1fr}.model-details{padding:28px 24px 32px}
.model-controls{padding:16px}.model-stage{margin-top:64px}
.model-secondary-controls{gap:10px}.model-close{position:absolute;top:10px}
}
@media(max-width: 0px){.model-card,.model-open{transition:none!important}}


.model-variant-control{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;margin-bottom:16px}
.model-variant-control[hidden]{display:none}
#modelVariant{width:100%;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:#222;font:inherit}

.maker-note{padding:1.4rem 1.6rem;margin:0 0 2rem;border-left:2px solid #888;background:#ffffff70;max-width:76ch}.maker-note h3{font-family:"Cormorant Garamond",serif;font-size:1.55rem;font-weight:500;line-height:1.2;margin-bottom:.65rem}.maker-note p{font-size:.86rem;line-height:1.8;color:#505050}

/* Spacious, image-led collection gallery. */
.page-creations .creations-section{background:linear-gradient(135deg,#f4f4f4 0%,#dedee0 55%,#ededee 100%)!important}
.page-creations .creations-section::before{background:none!important}
.collection-heading{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,6rem)}
.collection-heading-copy{min-width:0}.collection-heading .maker-note{margin-bottom:0}
.collection-shop{justify-self:center;color:#252525;text-decoration:none;border-block:1px solid #a9a9ac;padding:2rem 0;max-width:100%}
.collection-shop .etsy-brand-line{margin:0 0 1rem;gap:1rem}.collection-shop .logo-main,.collection-shop .logo-sup{color:#252525}.collection-shop .etsy-brand-divider{background:#929296}.collection-shop .etsy-shop-label{color:#555}.collection-shop .etsy-wordmark{color:#aa4b20}.collection-shop-note{display:block;font-size:.75rem;line-height:1.7;color:#555}.collection-shop:hover .collection-shop-note{text-decoration:underline;text-underline-offset:4px}.collection-shop:focus-visible{outline:2px solid #555;outline-offset:8px}
.page-creations .creations-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-inline:0;gap:clamp(1rem,2vw,1.75rem)}
.page-creations .model-card{min-width:0;border:1px solid #929296;border-radius:8px;overflow:hidden;background:linear-gradient(145deg,#fafafa,#ececee);box-shadow:0 5px 16px #0000000d;transition:transform .2s,box-shadow .2s,border-color .2s}
.page-creations .model-card:hover{transform:translateY(-4px);border-color:#535358;box-shadow:0 12px 28px #00000019}
.page-creations .model-poster{border-bottom:1px solid #c3c3c6}
.page-creations .model-card .creation-body{padding:1.25rem;gap:0;background:linear-gradient(135deg,#fafafa,#eeeeef)}
.page-creations .creation-title{font-size:clamp(1.4rem,1.8vw,1.8rem);line-height:1.15;margin-bottom:.75rem}
.page-creations .creation-desc{font-size:.8rem;line-height:1.65}.page-creations .model-open{margin-top:auto;padding-top:1rem;font-size:.7rem}.page-creations .model-spec{font-size:.65rem}
@media(min-width:1600px){.page-creations .creations-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.collection-heading{grid-template-columns:1fr}.collection-shop{justify-self:start;padding:1.4rem 0}.page-creations .creations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.page-creations .creations-grid{grid-template-columns:minmax(0,1fr)}.collection-heading{gap:1.5rem}.collection-shop .etsy-brand-line{gap:.7rem}}
@media(max-width: 0px){.page-creations .model-card:hover{transform:none}}

/* Integrated maker credit and a more prominent storefront signature. */
.collection-heading{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,4vw,5rem)}
.collection-heading .maker-note{background:transparent;border:0;padding:0;margin-top:2rem;box-shadow:none}
.collection-shop{width:100%;padding:2.5rem 0}
.collection-shop .etsy-brand-line{gap:clamp(.8rem,1.3vw,1.5rem)}
.collection-shop .logo-main{font-size:clamp(1.45rem,1.8vw,2.2rem)}
.collection-shop .logo-sup{font-size:clamp(.6rem,.7vw,.8rem);margin-top:.2rem}
.collection-shop .etsy-shop-label{font-size:clamp(.85rem,1vw,1.1rem);gap:.7rem}
.collection-shop .etsy-wordmark{font-size:clamp(2.6rem,3.2vw,3.8rem);color:#f1641e}
.collection-shop .etsy-brand-divider{height:2.2rem}
.collection-shop-note{font-size:.85rem;margin-top:1.25rem}
@media(max-width:1000px){.collection-heading{grid-template-columns:1fr}.collection-shop{width:auto;min-width:min(100%,390px)}}
@media(max-width:600px){.collection-shop{padding:1.8rem 0}.collection-shop .logo-main{font-size:1.3rem}.collection-shop .logo-sup{font-size:.55rem}.collection-shop .etsy-wordmark{font-size:2.4rem}.collection-shop .etsy-brand-line{gap:.65rem}.collection-shop .etsy-shop-label{font-size:.8rem;gap:.4rem}}


/* Preview options */
.model-variant-buttons{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.model-variant-buttons button{appearance:none;margin:0;padding:10px 16px;border:1px solid #bdbdb7;border-radius:6px;background:transparent;color:#454541;font:inherit;font-size:.875rem;line-height:1.35;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.model-variant-buttons button:hover{background:#e9e9e4;border-color:#777771}
.model-variant-buttons button[aria-pressed="true"]{background:#343432;border-color:#343432;color:#fff}
.model-variant-buttons button:focus-visible{outline:2px solid #55554f;outline-offset:3px}

/* The existing image button provides one keyboard target for the entire card. */
.page-creations .model-card{position:relative;cursor:pointer}
.page-creations .model-card .model-image-open::after{content:"";position:absolute;inset:0;z-index:2;cursor:pointer}
.page-creations .model-card .model-image-open{position:static}
#modelPreview .model-browser{display:grid;grid-template-columns:minmax(52px,.2fr) minmax(0,1fr) minmax(52px,.2fr);align-items:center;gap:10px;padding:12px 0}
#modelPreview .model-browser .model-stage{min-width:0;height:auto;aspect-ratio:1;margin:0}
#modelPreview .model-neighbor{appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-width:0;align-self:stretch;justify-content:center;border:0;background:transparent;padding:8px 4px;color:#555;cursor:pointer;overflow:hidden}
#modelPreview .model-neighbor img{display:block;width:160%;max-width:none;aspect-ratio:1;object-fit:contain;filter:blur(4px);opacity:.55;transition:opacity .2s,filter .2s;pointer-events:none}
#modelPreview .model-neighbor:hover img{opacity:.8;filter:blur(2px)}
#modelPreview .model-neighbor-direction{font:500 11px/1.4 'DM Sans',sans-serif;white-space:nowrap}
#modelPreview .model-neighbor-title{font:400 10px/1.4 'DM Sans',sans-serif;overflow-wrap:anywhere;text-align:center}
#modelPreview #modelVariant{border:0;background:transparent;padding:0;box-shadow:none;min-height:0}
@media(max-width:760px){#modelPreview .model-browser{gap:6px}#modelPreview .model-neighbor-title{display:none}}
@media(max-width: 0px){#modelPreview .model-neighbor img{transition:none}}

/* Full-height panel with adjacent products outside its surface. */
#modelPreview{width:100%;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;padding:20px 0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
#modelPreview[open]{display:grid;grid-template-columns:minmax(72px,1fr) minmax(0,1060px) minmax(72px,1fr);align-items:center;gap:16px}
#modelPreview .model-panel{position:relative;display:flex;flex-direction:column;width:100%;height:min(760px,calc(100dvh - 40px));min-height:0;border:1px solid #ccc;border-radius:14px;overflow:hidden;background:#fafaf8;box-shadow:0 24px 90px #0005}
#modelPreview .model-close{position:absolute;float:none;top:12px;right:12px;margin:0}
#modelPreview .model-dialog-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
#modelPreview .model-heading{grid-column:2;grid-row:1;padding:48px 24px 0}
#modelPreview #modelTitle{font-size:clamp(25px,2.5vw,38px);margin:0 0 12px}
#modelPreview .model-visual{grid-column:1;grid-row:1/3;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0}
#modelPreview .model-browser{display:block;padding:0;min-height:0;height:100%}
#modelPreview .model-browser .model-stage{height:100%;width:100%;aspect-ratio:auto;margin:0;min-height:0}
#modelPreview #modelFrame{height:100%;width:100%;object-fit:contain}
#modelPreview .model-controls{padding:12px 16px}
#modelPreview .model-variant-control{margin-bottom:10px;gap:10px}
#modelPreview .model-variant-buttons button{padding:8px 12px;font-size:12px;min-height:36px}
#modelPreview .model-secondary-controls{margin-top:8px}
#modelPreview #modelStatus{margin:8px 0 0;font-size:11px;line-height:1.4;min-height:0}
#modelPreview .model-details{grid-column:2;grid-row:2;padding:18px 24px;min-height:0;overflow:auto}
#modelPreview #modelDescription{font-size:14px;line-height:1.6}
#modelPreview #modelNote,#modelPreview .model-preview-disclosure{font-size:12px;line-height:1.5;margin-top:12px}
#modelPreview .model-preview-disclosure{padding-top:12px}
#modelPreview .model-purchase{position:static;flex-shrink:0;padding:12px 20px}
#modelPreview .model-neighbor{align-self:center;justify-self:center;width:100%;max-width:190px;height:auto;min-height:180px;overflow:visible;padding:8px;color:#f3f3ef;gap:12px;background:transparent;border:0}
#modelPreview .model-neighbor img{width:100%;max-width:100%;border-radius:12px;filter:blur(5px);opacity:.65}
#modelPreview .model-neighbor-title{display:block;font-size:12px;line-height:1.5;padding:0 8px}
#modelPreview .model-neighbor-direction{font-size:12px}
.page-creations .model-card{cursor:pointer!important}
.page-creations .model-card .model-image-open::after{display:none}
@media(max-width:760px){
 #modelPreview{padding:10px 0}
 #modelPreview[open]{grid-template-columns:48px minmax(0,1fr) 48px;gap:4px}
 #modelPreview .model-panel{height:calc(100dvh - 20px)}
 #modelPreview .model-dialog-grid{display:flex;flex-direction:column}
 #modelPreview .model-heading{padding:16px 48px 8px 12px;flex-shrink:0}
 #modelPreview #modelTitle{font-size:22px;margin-bottom:6px}
 #modelPreview .model-heading .model-spec{font-size:10px;margin:0}
 #modelPreview .model-visual{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
 #modelPreview .model-details{display:none}
 #modelPreview .model-controls{padding:10px}
 #modelPreview .model-variant-control{display:block}
 #modelPreview .model-variant-control[hidden]{display:none}
 #modelPreview #modelVariantLabel{display:block;font-size:12px;margin-bottom:6px}
 #modelPreview .model-variant-buttons{gap:4px}
 #modelPreview .model-variant-buttons button{padding:6px 8px;font-size:11px;min-height:32px}
 #modelPreview .model-purchase{padding:8px;gap:6px}
 #modelPreview .model-shop,#modelPreview .model-contact{font-size:11px;min-height:32px;padding:6px}
  #modelPreview .model-neighbor-title{font-size:9px;padding:0}
  #modelPreview .model-neighbor-direction{font-size:0;display:flex;align-items:center;justify-content:center}
  #modelPreview .model-neighbor-direction .ui-arrow{width:20px;height:20px;display:block}
 }

 #modelPreview .model-details>summary{display:none}
 @media(max-width:760px){
  #modelPreview .model-details{display:block;flex:0 0 auto;max-height:25dvh;padding:8px 12px;overflow:auto}
  #modelPreview .model-details>summary{display:list-item;font-size:12px;cursor:pointer}
 }

 /* Readable captions beneath the blurred neighboring models. */
 #modelPreview .model-neighbor-caption{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:12px 10px;border-radius:0;background:transparent;color:#343432;backdrop-filter:none;box-shadow:none;text-shadow:0 0 3px #fff,0 0 9px #fffffff2,0 0 18px #ffffffd9,0 0 28px #ffffffa6;pointer-events:none}
 #modelPreview .model-neighbor-caption .model-neighbor-title{padding:0;font-size:13px;font-weight:500;line-height:1.45;color:#343432}
 #modelPreview .model-neighbor-caption .model-neighbor-direction{font-size:11px;line-height:1.4;color:#494947;display:inline-flex;align-items:center;gap:4px}
 #modelPreview .model-neighbor-direction .ui-arrow{width:13px;height:13px;display:inline-block;vertical-align:middle;flex-shrink:0}
 @media(max-width:760px){
  #modelPreview .model-neighbor-caption{padding:8px 3px;gap:6px;border-radius:8px}
  #modelPreview .model-neighbor-caption .model-neighbor-title{font-size:9px}
  #modelPreview .model-neighbor-caption .model-neighbor-direction{font-size:0}
 }

/* Match the rendered white backdrop across every model and variant. */
#modelPreview .model-stage{background:#fff}

/* Narrow side rails keep readable arrows; full product names remain in accessible labels. */
@media(max-width:760px){
 #modelPreview .model-neighbor-caption .model-neighbor-title{display:none}
 #modelPreview .model-neighbor-caption{padding:8px 0;min-width:0}
 #modelPreview .model-neighbor{min-width:0;min-height:44px}
}

#modelPreview .model-shop.is-unavailable,
#modelPreview .model-shop[aria-disabled="true"]{
 background:#232528 !important;
 border-color:rgba(255,255,255,0.14) !important;
 color:rgba(255,255,255,0.4) !important;
 cursor:default !important;
 pointer-events:none !important;
 box-shadow:none !important;
}
/* /assets/css/shop-brand-v1.css */
.shop-signature{display:inline-flex;align-items:center;gap:.85em;flex-wrap:wrap;line-height:1.2;text-transform:none;letter-spacing:normal}.shop-signature-name{display:inline-flex;align-items:flex-start;gap:.15em;font:500 1em 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}.shop-signature-name sup{font-size:.4em;letter-spacing:.16em;line-height:1;margin-top:.1em}.shop-signature-divider{height:1.4em;width:1px;background:currentColor;opacity:.4}.shop-signature-shop{display:inline-flex;align-items:center;gap:.5em;font:400 .64em 'DM Sans',sans-serif;white-space:nowrap}.shop-signature-etsy{font:400 2em Georgia,serif;color:#f1641e;letter-spacing:-.04em}.creations-inline-brand{display:inline-block;vertical-align:middle;font-size:.95em}.creations-inline-brand .shop-signature{gap:.5em}.creations-inline-brand .shop-signature-shop{font-size:.7em}.footer-shop-brand{display:inline-block;text-decoration:none;color:#fff;font-size:clamp(1.1rem,1.7vw,1.6rem)}.footer-shop-heading{font:400 clamp(2rem,3vw,3rem)/1.1 'Cormorant Garamond',serif;margin:1.5rem 0 1rem}.footer-shop-copy{max-width:40ch;font-size:.85rem;line-height:1.8;color:#ccc}.footer-shop-button{display:inline-block;margin:1.25rem 0 1rem;padding:.8rem 1rem;border:1px solid #999;color:#fff;text-decoration:none;font-size:.78rem}.footer-shop-button:hover{background:#ffffff15}.footer-shop-brand:focus-visible,.footer-shop-button:focus-visible{outline:2px solid white;outline-offset:5px}footer .footer-top{gap:2.5rem;flex-wrap:wrap}footer .footer-top>div:first-child{max-width:100%;flex:1 1 320px}.brand-name .shop-signature{font-size:.85em}.section-label .shop-signature{font-size:1.1rem}.shop-label .shop-signature{font-size:1.35rem}.model-stage-label .shop-signature{font-size:.65rem}.model-stage-label .shop-signature-shop{font-size:.75em}@media(max-width:600px){.footer-shop-brand{font-size:1.05rem}.footer-shop-heading{font-size:2rem}.shop-label .shop-signature{font-size:1.05rem}}
footer .shop-signature-etsy{color:#f5a078}
/* /assets/css/design-v1.css */
/* Shared editorial system: quiet surfaces, clear actions, consistent geometry. */
:root{--radius:8px;--space-unit:8px;--content-width:1200px}
body{font-weight:400;background:#f4f4f2}
.ui-arrow{width:1em;height:1em;display:inline-block;flex-shrink:0;vertical-align:-.12em;margin-left:.25em}
.skip-link{position:fixed;top:8px;left:16px;z-index:2000;padding:12px 18px;background:#fff;color:#111;transform:translateY(-160%);border-radius:4px}
.skip-link:focus{transform:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
section[id],div[id].product-group,.model-card[id]{scroll-margin-top:110px}
[data-safe-section]{padding-block:clamp(48px,6vw,80px)}
.section-title{margin-bottom:24px;letter-spacing:-.02em}
.section-title em{font-weight:300}
.section-label{font-size:12px;letter-spacing:.16em}
p{ text-wrap:pretty }
.page-hero,.post-hero,.mission-hero{background:#171717!important}
.page-hero::before,.post-hero::before,.mission-hero::before,footer::before{display:none}
.page-hero{padding-top:clamp(120px,10vw,152px)!important;padding-bottom:48px!important}
.page-hero h1{font-size:clamp(44px,5.4vw,76px);max-width:1000px;letter-spacing:-.025em}
.page-hero p{font-size:16px;line-height:1.7}
.page-hero .section-label{font-size:12px}
.page-hero h1 em,.hero-title em{text-shadow:none}
.page-hero h1 br{display:none}
#mainNav{box-shadow:none;background:#151515f5!important;border-bottom:1px solid #ffffff25}
#mainNav .nav-links a{font-size:12px;letter-spacing:.08em;padding-block:12px}
#mainNav a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.nav-cta{border-radius:var(--radius);min-height:40px;display:inline-flex;align-items:center}
.btn-primary,.btn-ghost,.btn-dark,.btn-accent,.btn-submit,.button-solid,.model-shop,.workbench-filter{border-radius:var(--radius);min-height:44px}
.hero-actions .btn-primary{background:#f4f4f2!important;color:#171717!important;border-color:#f4f4f2!important}
.hero-actions .btn-primary:hover{background:#ddd!important;color:#171717!important}
.hero-actions .btn-ghost{border-color:#aaa!important}
.hero-actions a{font-size:12px;padding:15px 23px}
.hero{min-height:min(850px,100svh)}
.hero-sub{max-width:47ch;font-size:17px;line-height:1.75}
.hero-title{letter-spacing:-.025em}
.hero-motion-toggle{box-shadow:none!important}
.button-solid{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#1b1b1b;color:#fff;text-decoration:none;padding:13px 20px;font-size:14px;border:1px solid #1b1b1b}
.button-solid:hover{background:#363636}
.text-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:5px;min-height:44px}
.featured-project,.studio-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,80px);align-items:center;background:#f4f4f2}
.featured-project::before,.studio-story::before,.selected-creations::before{display:none}
.feature-copy p:not(.section-label),.studio-story p:not(.section-label){max-width:54ch;font-size:16px;line-height:1.8;color:#505050;margin-bottom:20px}
.feature-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.feature-image{display:block;text-decoration:none;border-radius:var(--radius);overflow:hidden;background:#e8e8e6;border:1px solid #ccc}
.feature-image img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.feature-image span{display:flex;justify-content:space-between;padding:16px 20px;font-size:13px}
.selected-creations{background:#e9e9e6;border-block:1px solid #d4d4d0}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.section-heading .section-title{margin-bottom:0}
.selected-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.selected-card{display:flex;flex-direction:column;color:#171717;text-decoration:none;background:#fafaf8;border:1px solid #c9c9c5;border-radius:var(--radius);overflow:hidden}
.selected-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:contrast(1.1)}
.selected-card>div{padding:24px;border-top:1px solid #d5d5d2;flex:1}
.selected-card h3{font:500 20px/1.35 'DM Sans',sans-serif;margin:10px 0 16px}
.selected-card .model-spec{font-size:12px;color:#555}
.selected-card:hover{border-color:#555}
.audience-strip{padding:36px var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#191919}
.audience-strip p{font:400 clamp(26px,3vw,38px)/1.2 'Cormorant Garamond',serif}
.audience-strip em{color:#ccc}
.studio-story{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.studio-story figure{margin:0;min-width:0}
.studio-story img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);display:block}
.studio-story figcaption{font-size:12px;line-height:1.6;color:#555;margin-top:10px}
.studio-story .section-title{font-size:clamp(32px,3.5vw,48px)}
.yt-section,.brands,.team,.bankasi-timeline{background:#f4f4f2;background-image:none}
.yt-card,.team-card,.brand-card,.workbench-card,.reach-card,.value-card{border-radius:var(--radius);box-shadow:none;background-image:none}
.yt-card{background:#fff;border:1px solid #d0d0cd;overflow:hidden}
.yt-title{font:500 18px/1.45 'DM Sans',sans-serif}
.yt-views{font-size:12px}
.yt-info{padding:20px}
.yt-cta a{border-radius:var(--radius)}
.rule{background:#d3d3cf;height:1px;margin-block:24px 32px}
.team-role,.brand-desc,.reach-desc,.value-desc{font-size:15px;line-height:1.7}
.team-avatar{border-radius:var(--radius)}
.team-card:hover,.yt-card:hover,.brand-card:hover{box-shadow:none}
.story-body{max-width:68ch;font-size:17px;line-height:1.85}
.story-body p{margin-bottom:20px}
.story-stat .stat-num{font-size:40px}
.hero-shop-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;color:#eee;text-decoration:none;font-size:14px}
.hero-shop-link .shop-signature-etsy{font-size:30px;color:#f1641e}
.page-creations .page-hero{padding-bottom:36px!important}
.page-creations .page-hero h1{font-size:clamp(42px,5vw,70px)}
.page-creations .page-hero>p:last-of-type{max-width:64ch;margin-top:16px}
.page-creations .creations-section{background:#f4f4f2!important;padding-top:32px}
.collection-navigation{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.collection-navigation .creations-intro{margin:0;font-size:15px}
.collection-navigation nav{display:flex;gap:8px;flex-wrap:wrap}
.collection-navigation nav a{padding:11px 14px;border:1px solid #bbb;border-radius:var(--radius);font-size:13px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.collection-navigation nav a:hover{background:#e5e5e1;border-color:#555}
.product-group{margin-top:48px}
.product-group:first-of-type{margin-top:0}
.product-group>h2{font:400 32px/1.2 'Cormorant Garamond',serif;margin:0 0 24px}
.page-creations .creations-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.page-creations .model-card{box-shadow:none;border-color:#c2c2be;background:#fff;cursor:default;border-radius:var(--radius)}
.page-creations .model-card:hover{transform:none;box-shadow:none;border-color:#888}
.model-image-open{display:block;width:100%;padding:0;border:0;background:#e8e8e8;cursor:pointer;border-radius:0}
.model-image-open:hover img{filter:contrast(1.15)}
.model-poster img{filter:contrast(1.1);transition:filter .18s}
.page-creations .model-card .creation-body{background:#fafaf8;padding:24px}
.page-creations .creation-title{font:500 19px/1.4 'DM Sans',sans-serif}
.page-creations .creation-desc{font-size:15px;line-height:1.7}
.page-creations .model-spec{font-size:12px;letter-spacing:.025em;line-height:1.5}
.page-creations .model-open{font-size:13px;min-height:44px;display:inline-flex;align-items:center;gap:5px}
.model-card:focus-within{outline:2px solid #555;outline-offset:3px}
.maker-story{border-top:1px solid #ccc}
#modelPreview{border-radius:var(--radius);background:#f8f8f5;box-shadow:0 20px 70px #0005}
.model-dialog-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr}
.model-heading{grid-column:2;grid-row:1;padding:65px 32px 0}
#modelTitle{font-size:36px;line-height:1.15;margin:0 0 14px}
#modelSpec{font-size:14px;line-height:1.5;color:#555}
.model-visual{grid-column:1;grid-row:1/3}
.model-details{grid-column:2;grid-row:2;padding:24px 32px;align-self:start}
#modelDescription{font-size:16px;line-height:1.7}
#modelNote,.model-preview-disclosure{font-size:13px;line-height:1.7}
.model-purchase{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:24px;padding:16px 24px;background:#f8f8f5;border-top:1px solid #ccc}
.model-shop,.model-contact{margin:0;font-size:14px}
.model-shop{display:inline-flex;align-items:center;gap:6px;background:#191919}
.model-copy-link{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;padding:10px 16px;border:1px solid #ccc;border-radius:var(--radius);background:transparent;color:#222;cursor:pointer;transition:all .2s;white-space:nowrap}
.model-copy-link:hover{border-color:#555;background:#eee}
.model-copy-link svg{width:14px;height:14px;display:inline-block;flex-shrink:0}
.model-controls{padding:16px 20px}
.model-controls label,#modelStatus{font-size:13px}
.model-secondary-controls button{min-width:44px;min-height:44px}
.model-stage-label{font-size:11px;letter-spacing:.1em}
.model-stage{background:#e8e8e8}
#modelFrame{filter:contrast(1.1)}
.model-close{position:sticky;float:right;top:12px;right:12px;margin:12px 12px -56px 0;box-shadow:0 2px 8px #0001}
/* Workbench index and readable long-form pages. */
.workbench-section{background:#f4f4f2}
.workbench-tools{gap:20px;margin-bottom:20px;align-items:center}
.workbench-filters{gap:8px}
.workbench-filter{font-size:13px;letter-spacing:0;text-transform:none;padding:11px 14px;border-color:#bbb}
.filter-count{font-size:11px;opacity:.8;margin-left:6px}
.workbench-search{font-size:15px;border-radius:var(--radius);border-color:#aaa;background:#fff}
.workbench-utility{display:flex;align-items:center;gap:12px}
.workbench-rss-link{font-size:12px;font-weight:500;letter-spacing:.04em;color:#60605c;text-decoration:underline;text-underline-offset:3px;line-height:1.5;display:inline-flex;align-items:center}
.workbench-rss-link:hover{color:#171717;border-color:#777}
.workbench-rss-link:focus-visible{outline:2px solid #171717;outline-offset:2px}
.workbench-result-count{font-size:13px;color:#555;margin-bottom:24px}
.workbench-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;background:transparent;border:0}
.workbench-card{display:flex;flex-direction:column;padding:0!important;border:1px solid #ccc;background:#fafaf8;color:#171717;overflow:hidden;box-shadow:none}
.workbench-card:hover{background:#fff;color:#171717;border-color:#777;box-shadow:none}
.workbench-card-body{padding:28px;display:flex;flex-direction:column;flex:1}
.card-title{font:500 22px/1.35 'DM Sans',sans-serif;margin:18px 0 16px;color:#171717}
.card-excerpt{font-size:15px;line-height:1.75;color:#505050;margin-bottom:24px}
.card-meta{font-size:12px;display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;color:#555}
.card-date,.card-tag{font-size:12px;letter-spacing:0;color:#555;text-transform:none}
.card-footer{margin-top:auto;padding-top:20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ddd;color:#171717}
.card-read{font-size:13px;letter-spacing:0;text-transform:none}
.workbench-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.workbench-feature-image{min-width:0;background:#e8e8e8}
.workbench-feature-image img{display:block;width:100%;height:100%;max-height:350px;object-fit:contain;filter:contrast(1.1)}
.workbench-card-image{width:100%;aspect-ratio:16/10;overflow:hidden;background:#eeeeea;border-bottom:1px solid #deded8;display:flex;align-items:center;justify-content:center}
.workbench-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.workbench-card-image.is-render img{object-fit:contain;padding:16px;background:#f0f0ed}
.workbench-card:hover .workbench-card-image img{transform:scale(1.03)}
.workbench-featured .workbench-card-body{padding:clamp(24px,4vw,48px)}
.workbench-featured .card-title{font:400 clamp(32px,4vw,48px)/1.12 'Cormorant Garamond',serif}
.post-hero{padding-bottom:48px!important}
.post-hero h1{max-width:920px;font-size:clamp(40px,5vw,68px);line-height:1.12;letter-spacing:-.025em}
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px;color:#ccc;margin:24px 0}
.post-meta .post-tag{font-size:12px;color:#eee;letter-spacing:.05em}
.post-deck{font-size:18px;line-height:1.65;color:#ddd;max-width:65ch;margin-top:24px}
.post-byline{font-size:13px;color:#ccc;margin-top:20px}
.post-body{max-width:760px;margin-inline:auto;padding:48px 24px 64px;font-size:17px;line-height:1.85;color:#303030}
.post-body p{font-size:17px;line-height:1.85;color:#303030;margin:0 0 24px}
.post-body .article-lead{font-size:22px;line-height:1.65;color:#171717}
.post-body h2{font:400 34px/1.2 'Cormorant Garamond',serif;margin:40px 0 18px;color:#171717}
.post-body h2[id]{scroll-margin-top:5.5rem;position:relative}
.heading-anchor{opacity:0;color:#888;text-decoration:none;margin-left:8px;font-size:16px;display:inline-flex;align-items:center;vertical-align:middle;transition:opacity .15s,color .15s}
.post-body h2[id]:hover .heading-anchor,.heading-anchor:focus-visible{opacity:1}
.heading-anchor:hover{color:#171717}
.heading-anchor.is-copied{opacity:1;color:#454844}
@media(hover:none){.heading-anchor{opacity:.4}}
mark.help-match{background:rgba(90,96,100,.16);color:inherit;border-radius:2px;padding:0 1px;font-weight:500}
.inquiry-fit-hint{font-size:13px;line-height:1.5;color:#555;background:#f0f0ee;border-left:2px solid #888;padding:8px 12px;margin:6px 0 10px;border-radius:0 var(--radius) var(--radius) 0}
.product-guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid #deded8}
.product-guide-print{font:inherit;font-size:13px;background:none;border:1px solid #bbb;border-radius:5px;padding:8px 12px;cursor:pointer;color:inherit;transition:border-color .15s,color .15s}
.product-guide-print:hover{border-color:#777;color:#171717}
.product-guide-status{font-size:12px;color:#666}
.product-guide-print-source{display:none}
.post-body ul{padding-left:24px;margin:24px 0}
.post-body li{margin:12px 0}
.post-body figure{margin:36px 0}
.post-body figure:first-child{margin-top:0}
.post-body figure img{display:block;width:100%;border-radius:var(--radius);height:auto}
.post-body .article-product-image img{max-height:340px;object-fit:contain;background:#e8e8e8;filter:contrast(1.1)}
.post-body figcaption{font:400 12px/1.6 'DM Sans',sans-serif;color:#666;margin-top:10px}
.post-cta{background:#202020;border-radius:var(--radius);padding:28px;margin-top:40px}
.post-cta p{color:#eee;font-size:16px}
.post-cta a{border-radius:var(--radius);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.post-nav{max-width:1100px;margin:auto;padding:32px var(--page-gutter) 64px;gap:32px}
.post-nav a{min-width:0;max-width:48%;font-size:13px}
.post-nav strong{font-size:18px;line-height:1.4}
.help-question{font-size:17px;line-height:1.5;min-height:56px}
.help-answer{font-size:16px;line-height:1.8}
.form-group label{font-size:13px}
.form-group input,.form-group select,.form-group textarea{border-radius:var(--radius);font-size:16px}
.contact-detail-value{font-size:16px}
footer{background:#171717!important;padding-block:48px 24px}
footer .footer-top{gap:40px;margin-bottom:24px;padding-bottom:32px}
footer .footer-top>div:first-child{flex:1 1 280px}
.footer-shop-copy{font-size:15px;margin-top:20px;line-height:1.7}
.footer-etsy{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;text-decoration:none;font-size:14px;color:#eee}
.footer-etsy .shop-signature-etsy{color:#f1641e;font-size:32px}
.footer-col .footer-heading{font-size:12px;letter-spacing:.1em;margin-bottom:16px}
.footer-col ul{gap:6px}
.footer-col a{display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:14px}
.footer-bottom{font-size:12px;color:#bbb;line-height:1.6}
@media(min-width:1600px){[data-safe-section]{padding-inline:max(var(--page-gutter),calc((100vw - 1320px)/2))}}
@media(max-width:1000px){.workbench-grid,.page-creations .creations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.selected-grid{gap:16px}.selected-card>div{padding:18px}.featured-project,.studio-story{gap:32px}}
@media(max-width:760px){.featured-project,.studio-story{grid-template-columns:1fr}.feature-image{grid-row:1}.section-heading{align-items:flex-start;flex-direction:column;gap:12px}.selected-grid{grid-template-columns:1fr}.selected-card{display:grid;grid-template-columns:38% 1fr}.selected-card>div{border-top:0;border-left:1px solid #ccc}.selected-card img{align-self:center}.selected-card h3{font-size:17px}.audience-strip{align-items:flex-start;flex-direction:column;gap:12px}.page-creations .page-hero h1{font-size:44px}.page-creations .page-hero{padding-top:120px!important}.collection-navigation{gap:20px}.product-group{margin-top:36px}.model-dialog-grid{display:flex;flex-direction:column}.model-heading{padding:28px 60px 20px 20px;order:0}#modelTitle{font-size:29px}.model-visual{order:1}.model-details{order:2;padding:24px 20px}.model-stage{margin-top:0;aspect-ratio:1.2}.model-purchase{padding:12px;gap:10px;justify-content:space-between;flex-wrap:wrap}.model-shop{font-size:13px;flex:1;justify-content:center;white-space:normal}.model-contact{font-size:12px;min-height:36px;display:flex;align-items:center}.workbench-featured{grid-template-columns:1fr}.workbench-feature-image img{max-height:240px}.post-body{padding-inline:24px}.post-nav{padding-inline:24px}.hero-sub{font-size:16px}.hero-actions{gap:12px}.hero-content{padding-bottom:76px}.hero-scroll{display:none}.nav-cta{display:none}footer .footer-nav{gap:28px}.footer-bottom{align-items:flex-start;text-align:left}}
@media(max-width:600px){.page-creations .creations-grid,.workbench-grid{grid-template-columns:1fr}.workbench-tools{align-items:stretch}.workbench-utility{width:100%}.workbench-utility .workbench-search-wrap{flex:1}.workbench-search-wrap{width:100%}.workbench-filter{font-size:12px;padding:10px 12px}.workbench-filters{gap:6px}.page-creations .creation-title{font-size:20px}.workbench-card-body{padding:24px}.hero-title{font-size:clamp(46px,12vw,64px)}.hero-actions a{padding:13px 17px}.post-body .article-lead{font-size:20px}.post-body h2{font-size:30px}}
@media(max-width: 0px){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
#mainNav .nav-logo[aria-current="page"]{text-decoration:none}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.footer-col li{margin:0;padding:0}
.footer-col a{margin-bottom:0}
@media(min-width:761px){
  .product-group .creations-grid:has(>.model-card:only-child){grid-template-columns:1fr}
  .product-group .model-card:only-child{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr)}
  .product-group .model-card:only-child .model-poster{border-bottom:0;border-right:1px solid #ccc}
  .product-group .model-card:only-child .model-poster img{height:280px;aspect-ratio:auto;object-fit:contain}
  .product-group .model-card:only-child .creation-body{justify-content:center;padding:32px 40px}
  .product-group .model-card:only-child .creation-desc{flex:none;max-width:58ch}
  .product-group .model-card:only-child .model-open{margin-top:12px}
  .model-stage{height:min(420px,53vh);aspect-ratio:auto}
}

/* Workbench empty state reset button */
.workbench-empty { text-align:center; padding:48px 24px; color:#555; }
.workbench-empty p { margin-bottom:16px; font-size:16px; }
.workbench-clear-btn { display:inline-flex; align-items:center; justify-content:center; background:#1b1b1b; color:#fff; border:1px solid #1b1b1b; border-radius:var(--radius); padding:10px 18px; font-size:13px; cursor:pointer; transition:background .2s; }
.workbench-clear-btn:hover { background:#383838; }

/* Article Table of Contents */
.article-toc { background:#ecece8; border:1px solid #d5d5d0; border-radius:var(--radius); padding:24px 28px; margin:32px 0 40px; }
.article-toc-title { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#555; font-weight:500; margin:0 0 12px; }
.article-toc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.article-toc-list li { margin:0; }
.article-toc-list a { color:#171717; text-decoration:none; font-size:15px; display:inline-flex; align-items:center; transition:color .2s; }
.article-toc-list a:hover { color:#777; text-decoration:underline; text-underline-offset:4px; }

/* Technical Print Stylesheet */
@media print {
  body { background:#fff!important; color:#000!important; font-size:11pt; line-height:1.5; }
  #mainNav, #mobileMenu, .hamburger, .skip-link, .reading-progress,
  .hero-actions, .hero-motion-toggle, .post-back, .post-cta, .post-nav,
  .workbench-tools, .workbench-result-count, .workbench-empty,
  .model-close, .model-controls, .model-secondary-controls, .model-purchase,
  .footer-analytics-note, .audience-strip, .hero-scroll, .form-status,
  .contact-form button[type="submit"], .heading-anchor, .product-guide-actions, .product-guide-copy, .product-guide-print { display:none!important; }
  .page-hero, .post-hero, .mission-hero, footer { background:transparent!important; color:#000!important; padding:12pt 0!important; }
  .page-hero h1, .post-hero h1, .mission-hero h1, .section-title { color:#000!important; text-shadow:none!important; font-size:24pt!important; }
  .page-hero p, .post-deck, .section-label { color:#333!important; }
  .post-body, .help-page, .contact-section, .workbench-section { max-width:100%!important; padding:0!important; margin:0!important; color:#000!important; }
  .post-body p, .post-body li { color:#000!important; font-size:11pt!important; }
  details { border:1px solid #ccc!important; break-inside:avoid; margin-bottom:12pt!important; }
  details[open] summary, details summary { font-weight:bold; }
  details > *:not(summary) { display:block!important; }
  a { color:#000!important; text-decoration:underline!important; }
  a[href^="http"]:not([href*="bankasimedia.com"])::after { content:" (" attr(href) ")"; font-size:85%; }
  table { border-collapse:collapse!important; width:100%!important; margin:12pt 0!important; }
  th, td { border:1px solid #999!important; padding:6pt 8pt!important; color:#000!important; }
  img { max-width:100%!important; page-break-inside:avoid; }
  .fan-comparison { overflow:visible!important; }
  .fan-comparison-hint { display:none!important; }

  /* Isolated Guide Print */
  body[data-printing-guide] #mainNav,
  body[data-printing-guide] footer,
  body[data-printing-guide] .help-hero,
  body[data-printing-guide] .help-sidebar,
  body[data-printing-guide] .help-search-box,
  body[data-printing-guide] .help-contact,
  body[data-printing-guide] .help-results,
  body[data-printing-guide] .help-group:not(#help-product-guides),
  body[data-printing-guide] #help-product-guides > header,
  body[data-printing-guide] .product-help-item:not([data-print-active="true"]) { display:none!important; }
  body[data-printing-guide] .help-layout { display:block!important; padding:0!important; }
  body[data-printing-guide] #help-answers { width:100%!important; max-width:100%!important; }
  body[data-printing-guide] .product-help-item[data-print-active="true"] {
    border:none!important;
    padding:0!important;
    margin:0!important;
    break-inside:auto!important;
  }
  body[data-printing-guide] .product-help-item[data-print-active="true"] > summary {
    font:400 24pt/1.2 'Cormorant Garamond',serif!important;
    padding:0 0 10pt!important;
    margin-bottom:16pt!important;
    border-bottom:2px solid #000!important;
    list-style:none!important;
    cursor:default!important;
  }
  body[data-printing-guide] .product-help-item[data-print-active="true"] > summary::-webkit-details-marker { display:none!important; }
  body[data-printing-guide] .product-help-item[data-print-active="true"] .help-plus { display:none!important; }
  body[data-printing-guide] .product-help-item[data-print-active="true"] .help-answer { display:block!important; padding:0!important; max-width:100%!important; }
  body[data-printing-guide] .product-guide-print-source {
    display:block!important;
    margin-top:20pt!important;
    padding-top:10pt!important;
    border-top:1px solid #999!important;
    font:9pt/1.4 'DM Sans',sans-serif!important;
    color:#444!important;
  }
  .product-help-item h3 { break-after:avoid; page-break-after:avoid; margin-top:14pt!important; font-size:13pt!important; }
  .product-help-item ul, .product-help-item ol { break-inside:auto; page-break-inside:auto; }
  .product-help-item li { margin-bottom:4pt!important; }
}

@media(min-width:769px) and (max-width:1100px){#mainNav .nav-links{gap:1.25rem}}
/* /assets/css/creations-identity-v6.css */
/* Creations identity v6: prominent wordmark, luminous silver aura, and balanced hero layout */
.page-creations .creations-wordmark{display:inline-flex;align-items:baseline;gap:.26em;font-family:'DM Sans',sans-serif;line-height:1.08;white-space:nowrap}
.page-creations .creations-bankasi{font-weight:500;letter-spacing:.065em}
.page-creations .creations-bracket{font-weight:300;letter-spacing:-.065em;color:#a9aba5}
.page-creations .creations-bracket>span{letter-spacing:-.04em;color:inherit;padding:0 .065em}
.page-creations .creations-home{display:inline-flex;text-decoration:none;color:inherit}
.page-creations .creations-nav-brand{display:flex;flex-direction:column;gap:7px;color:#f5f5ef}
.page-creations .creations-nav-brand .creations-wordmark{font-size:clamp(17px,1.8vw,24px)}
.page-creations .creations-parent{display:flex;align-items:baseline;gap:7px;width:fit-content;text-decoration:none;color:#aaa;line-height:1.2}
.page-creations .creations-by{font-size:10px;letter-spacing:.02em}
.page-creations .creations-parent-name{font:500 11px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#dadad4}
.page-creations .creations-parent-name sup{font-size:.58em;letter-spacing:.08em;vertical-align:super;margin-left:2px}
.page-creations .creations-parent:hover{color:#fff}

/* Prominent hero brand mark and sub-brand */
.page-creations .page-hero .creations-hero-mark{font-family:'DM Sans',sans-serif;font-size:clamp(44px,7.8vw,112px);font-weight:400;line-height:.96;letter-spacing:normal;max-width:none;margin:0}
.page-creations .page-hero .creations-hero-brand>.creations-parent,
.page-creations .page-hero>.creations-parent{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.page-creations .page-hero .creations-hero-brand>.creations-parent .creations-by,
.page-creations .page-hero>.creations-parent .creations-by{font-size:14px;letter-spacing:.04em}
.page-creations .page-hero .creations-hero-brand>.creations-parent .creations-parent-name,
.page-creations .page-hero>.creations-parent .creations-parent-name{font:500 17px/1.2 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#dadad4}
.page-creations .page-hero .creations-hero-brand>.creations-parent .creations-parent-name sup,
.page-creations .page-hero>.creations-parent .creations-parent-name sup{font-size:.58em;letter-spacing:.08em;vertical-align:super;margin-left:2px}

/* Balanced hero layout: move text below by bankasi media to the right on desktop */
@media (min-width: 960px) {
  .page-creations .page-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(2.5rem, 4.5vw, 5rem);
  }
  .page-creations .creations-hero-brand {
    flex: 1 1 auto;
  }
  .page-creations .creations-hero-content {
    flex: 0 1 500px;
  }
}
@media (max-width: 959px) {
  .page-creations .creations-hero-content {
    margin-top: 2.4rem;
    max-width: 540px;
  }
}

.page-creations .creations-hero-content .creations-hero-tagline{font:300 clamp(30px,3.5vw,48px)/1.15 'Cormorant Garamond',serif;margin-top:0;color:#f4f4ee}
.page-creations .creations-hero-content .creations-hero-tagline em{color:#bbbcb5}
.page-creations .creations-hero-content p{margin-top:1.2rem;font-size:0.95rem;line-height:1.75;color:rgba(255,255,255,0.65);max-width:48ch}
.page-creations .creations-hero-content .hero-shop-link{margin-top:1.8rem;display:inline-flex}

.page-creations #designs{scroll-margin-top:110px}
.page-creations .creations-footer-mark{font-size:clamp(23px,3vw,34px)}
.page-creations footer .creations-parent{margin-top:12px}
.page-creations .creations-home:focus-visible,.page-creations .creations-parent:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:1000px){.page-creations #mainNav .nav-links{gap:18px}.page-creations #mainNav .nav-links a{font-size:10px}}
@media(max-width:760px){
  .page-creations .creations-nav-brand .creations-wordmark{font-size:20px}
  .page-creations .page-hero{padding-top:135px!important}
  .page-creations .page-hero .creations-hero-mark{font-size:clamp(36px,8.2vw,56px)}
}

/* Luminous silver aura, exclusive to the hero wordmark */
.page-creations .page-hero .creations-hero-mark{position:relative;isolation:isolate;width:fit-content;overflow:visible}
.page-creations .page-hero .creations-hero-mark::before,
.page-creations .page-hero .creations-hero-mark::after{content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(34px);will-change:transform;opacity:.78}
.page-creations .page-hero .creations-hero-mark::before{inset:-22% 25% -25% -8%;background:radial-gradient(ellipse,rgba(229,238,232,0.45) 0%,rgba(255,255,255,0.18) 42%,transparent 72%);animation:creations-aura-drift 11s ease-in-out infinite alternate}
.page-creations .page-hero .creations-hero-mark::after{inset:-6% -6% -25% 35%;background:radial-gradient(ellipse,rgba(220,230,237,0.4) 0%,rgba(255,255,255,0.12) 48%,transparent 74%);animation:creations-aura-drift 14s ease-in-out infinite alternate-reverse}
.page-creations .page-hero .creations-hero-mark .creations-wordmark{position:relative;animation:creations-letter-glow 11s ease-in-out infinite alternate;text-shadow:0 0 8px rgba(245,248,255,0.7),0 0 20px rgba(229,237,255,0.5),0 0 38px rgba(220,232,255,0.35)}
@keyframes creations-aura-drift{from{transform:translate3d(-8%,8%,0) scale(.92)}to{transform:translate3d(36%,-9%,0) scale(1.08)}}
@keyframes creations-letter-glow{from{text-shadow:-7px 2px 22px rgba(237,245,245,0.4),0 0 6px rgba(255,255,255,0.3)}to{text-shadow:8px -2px 32px rgba(237,245,245,0.6),0 0 10px rgba(255,255,255,0.45)}}
@media(max-width: 0px){.page-creations .page-hero .creations-hero-mark::before,.page-creations .page-hero .creations-hero-mark::after,.page-creations .page-hero .creations-hero-mark .creations-wordmark{animation:none;will-change:auto}}

/* Higher specificity bracket glow to maintain prominence alongside brand consistency */
.page-creations .page-hero .creations-hero-brand .creations-hero-mark .creations-bracket,
.page-creations .page-hero .creations-hero-mark .creations-bracket{
  text-shadow:0 0 8px rgba(255,255,255,0.75),0 0 18px rgba(229,237,255,0.6),0 0 32px rgba(220,232,255,0.4);
}

/* Moving silver highlight follows the glyphs */
.page-creations .page-hero .creations-letter-light{position:absolute;inset:0;display:inline-flex;align-items:baseline;pointer-events:none;
 padding:24px;margin:-24px;
 -webkit-mask-image:linear-gradient(110deg,transparent 28%,#000 43%,#000 57%,transparent 72%);
 mask-image:linear-gradient(110deg,transparent 28%,#000 43%,#000 57%,transparent 72%);
 -webkit-mask-size:300% 100%;mask-size:300% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 animation:creations-glyph-sweep 8s ease-in-out infinite alternate}
.page-creations .page-hero .creations-hero-brand .creations-letter-light .creations-bracket,
.page-creations .page-hero .creations-letter-light .creations-bracket{color:#fff;text-shadow:0 0 4px #fff,0 0 14px rgba(237,244,255,0.9),0 0 28px rgba(220,232,255,0.7)}
@keyframes creations-glyph-sweep{
 0%,8%{-webkit-mask-position:100% 50%;mask-position:100% 50%;opacity:.65}
 45%,55%{opacity:1}
 92%,100%{-webkit-mask-position:0% 50%;mask-position:0% 50%;opacity:.65}
}
@media(max-width: 0px){.page-creations .page-hero .creations-letter-light{animation:none;-webkit-mask-position:50% 50%;mask-position:50% 50%;opacity:.35}}

/* Staggered second sweep pass */
.page-creations .page-hero .creations-letter-light-follow{animation-delay:-4s}
@media(max-width: 0px){.page-creations .page-hero .creations-letter-light-follow{display:none}}
/* /assets/css/creations-brand-consistency-v5.css */
/* The sub-brand name retains its intentional lowercase brackets. */
a[href="/creations"],a[href="/creations/"]{text-transform:none!important}
.page-creations #mainNav .creations-home,
.page-creations #mainNav .creations-home[aria-current="page"],
.page-creations .creations-home,.page-creations .creations-parent,
.page-creations .creations-home *,.page-creations .creations-parent *{text-decoration:none!important;border-bottom:0;box-shadow:none}
.page-creations .creations-bracket{color:#e4e4de;letter-spacing:-.045em}
.page-creations .creations-hero-mark .creations-bracket{color:#f3f3ed}

.page-creations #reviews{scroll-margin-top:105px}
@media(max-width: 0px){html{scroll-behavior:auto!important}}

.creations-standalone{text-transform:none!important;letter-spacing:.015em}
.page-creations .review-showcase>header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.page-creations .review-showcase h2{font:400 clamp(32px,4vw,52px)/1.1 'Cormorant Garamond',serif;margin:12px 0}
.page-creations .review-intro{font-size:14px;line-height:1.7;max-width:60ch}
.page-creations .review-source-note{font-size:12px;line-height:1.7;margin-top:18px;color:#c6c6bf}
.page-creations .review-showcase::before{display:none}
@media(max-width:760px){.page-creations .review-showcase>header{align-items:flex-start;flex-direction:column}}

/* Plain same-page navigation. */
.page-creations #mainNav .nav-links a[href^="#"],
.page-creations #mainNav .nav-links a[href^="#"][aria-current="page"],
.page-creations #mainNav .nav-links a[href^="#"]:hover{ text-decoration:none!important;border-bottom:0;box-shadow:none;background:transparent; }
.page-creations #mainNav .nav-links a[href^="#"]::before,
.page-creations #mainNav .nav-links a[href^="#"]::after{content:none}

/* One persistent silver glow; moving glyph highlights remain in identity-v5. */
.page-creations .page-hero .creations-hero-mark .creations-bracket{
 animation:none;
 text-shadow:0 0 3px #ffffff66,0 0 10px #e5edff66,0 0 22px #dce8ff44;
}
.page-creations .page-hero .creations-letter-light .creations-bracket{
 color:#fff;
 text-shadow:0 0 3px #fff,0 0 10px #edf4ffdd,0 0 22px #dce8ff99;
}
@media(max-width:768px){
 .page-creations #mainNav{height:88px;padding:14px 24px;align-items:center}
 .page-creations #hamburgerBtn{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:0;min-width:64px;min-height:44px;padding:10px 0 10px 12px;color:#f2f2ec;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.04em}
 .page-creations #hamburgerBtn::after{content:"Menu"}
 .page-creations #hamburgerBtn.open::after{content:"Close"}
 .page-creations #hamburgerBtn span{display:none}
 .page-creations #hamburgerBtn:focus-visible{outline:1px solid currentColor;outline-offset:3px}
 .page-creations #mobileMenu{
  display:flex;inset:88px 0 auto;max-height:calc(100dvh - 88px);
  padding:18px 24px 26px;gap:0;align-items:stretch;justify-content:flex-start;
  background:#20201ff5;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid #ffffff22;box-shadow:0 18px 32px #0003;
  overflow-y:auto;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
 }
 .page-creations #mobileMenu.open{visibility:visible;opacity:1;pointer-events:auto;transform:none}
 .page-creations #mobileMenu a{
  justify-content:flex-start;min-height:54px;padding:12px 0;
  font:400 17px/1.4 'DM Sans',sans-serif;letter-spacing:0;color:#edede7;
  border-bottom:1px solid #ffffff14;text-decoration:none;
 }
 .page-creations #mobileMenu a:nth-last-child(2){margin-top:14px}
 .page-creations #mobileMenu a:nth-last-child(-n+2){font-size:14px;color:#bdbdb7;border:0;min-height:44px}
 .page-creations #mobileMenu a:focus-visible{outline:1px solid #edede7;outline-offset:3px}
 .page-creations .page-hero .creations-hero-mark .creations-bracket{
  text-shadow:0 0 2px #ffffff88,0 0 7px #e5edff88,0 0 15px #dce8ff66;
 }
 .page-creations .page-hero .creations-letter-light .creations-bracket{
  text-shadow:0 0 2px #fff,0 0 6px #edf4ff,0 0 14px #dce8ffbb;
 }
}
@media(max-width: 0px){
 .page-creations #mobileMenu{transition:none}
}
/* /assets/css/typography-v1.css */
/* Shared typography: upright editorial headings, restrained emphasis.
   Keep genuine inline emphasis in prose; decorative italics are opt-in. */
:root{--font-interface:'DM Sans',sans-serif;--font-editorial:'Cormorant Garamond',serif}
h1,h2,h3,h4,h5,h6{font-style:normal}
h1 em,h2 em,h3 em,h4 em,h5 em,h6 em,
.hero-title em,.section-title em,.pillar-word em,.goal-tagline em,
.creations-hero-tagline em,.audience-strip em{
 font-style:normal!important;
}
.mission-tagline,.creation-note{font-family:var(--font-interface);font-style:normal}
.form-group input::placeholder,.form-group textarea::placeholder{font-style:normal}
.creation-title,.selected-card h3,#modelTitle{
 font-family:var(--font-interface)!important;font-style:normal;font-weight:500;
}
#modelTitle{letter-spacing:-.025em}
/* Selected headline accents; most headings remain upright. */
.hero-title em,.statement-quote em{font-style:italic!important}
/* Bolder type (owner 2026-10-10: thin lettering looked soft). Headings and titles are semibold (600), statistic
   figures medium (500, Cormorant figures 600). Small uppercase heading labels, the [creations] wordmark, the
   carton-printed Made to order heading and the footer keep their own weights. */
#main-content :is(h1,h2,h3,h4):not(.creations-hero-mark,.help-guide-category,.contact-detail-label,.wwu-case-label,
 .help-picker-group h3,.product-case-copy h3,.product-case-side h3,.wwu-proof-card h3,.wwu-direct h3,[data-reach-list] h3,[data-cat="made-to-order"] h2),
.creation-title,.creation-title-link,#modelTitle,.product-title,.product-related-title,.product-actionbar-title,.pw-title,
.hdi-name,.help-product-name,.yt-title,.wwu-video-title,.wwu-yt-title,.wwu-wb-list span{font-weight:600!important}
/* [Bracketed] DM Sans section headings on [creations] step from 400 to 500; their brackets stay light. */
#main-content .cat-head:not([data-cat="made-to-order"]) h2,#main-content #real-builds-title,#main-content #workshop-title{font-weight:500!important}
#main-content #real-builds-title .rb-b,#main-content #workshop-title .wb-b{font-weight:400!important}
.build-result-value,.review-shop-summary dd,.review-service dd,.reach-figure strong,.ice-figure,.bento-note-figure,
.pres-value,.wwu-fig-value,.wwu-proof-figs b{font-weight:500!important}
.stat-num,.post-stat strong{font-weight:600!important}
/* /assets/creations/variant-groups-v1.css */
#modelPreview .model-variant-control:has(.has-groups){display:block}
#modelPreview .model-variant-buttons.has-groups{display:grid;gap:8px;width:100%}
.model-variant-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px}
.model-variant-row-label{font-size:12px;font-weight:500;color:#555550}
.model-variant-row-options{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
@media(max-width:600px){.model-variant-row{grid-template-columns:64px minmax(0,1fr);gap:6px}#modelPreview .model-variant-row-options button{min-height:36px}}
/* /assets/creations/category-render-v2.css */
/* Replaces category-render-v1.css (2026-10-07). The category heading brackets are now static drawn brackets
   (category-headers-v1.css), so only v1's render-surface rules for the hero and header remain. */
@media(min-width:761px) and (hover:hover){
 .page-creations .page-hero .creations-hero-mark,
 .page-creations .page-hero .creations-wordmark,
 .page-creations .page-hero .creations-letter-light,
 .page-creations #mainNav{transform:translateZ(0);will-change:transform}
}
/* /assets/creations/product-guides-v1.css */
.product-guidance{border-top:1px solid #d6d6d1;margin-top:20px;padding-top:16px;font-family:'DM Sans',sans-serif}
#modelPreview .product-guidance h3{font-family:inherit;font-size:14px;font-weight:500;margin:0 0 8px}
#modelPreview .product-guidance p,#modelPreview .product-guidance li{font-size:13px;line-height:1.65;color:#555550}
.product-guidance ul{padding-left:18px;margin:12px 0}.product-guidance li+li{margin-top:8px}
.product-fit{border-block:1px solid #deded8;margin:16px 0;padding:12px 0}
.product-fit summary,.product-measurement summary{cursor:pointer;font-size:13px;font-weight:500;min-height:28px}
.product-measurement{margin:14px 0}.product-measurement svg{display:block;max-width:100%;width:320px;height:auto;fill:none;stroke:#59616a;stroke-width:1.5}
.product-measurement svg text{fill:#444;stroke:none;font:12px 'DM Sans',sans-serif}
.product-guidance a{color:inherit;font-size:13px;text-underline-offset:4px}.product-guide-link{display:block;margin:12px 0}
#modelPreview .product-media-tabs{display:flex;gap:6px;padding:0 16px 8px;flex:none}
#modelPreview .product-media-tabs[hidden],#modelPreview .model-browser[hidden],#modelPreview .model-controls[hidden],#modelPreview .product-installation-photo[hidden]{display:none!important}
.product-media-tabs button{background:transparent;color:#494947;border:1px solid #c6c6bf;border-radius:7px;padding:8px 12px;font:500 12px 'DM Sans',sans-serif;min-height:36px;cursor:pointer}
.product-media-tabs button[aria-pressed="true"]{background:#343432;color:#fff;border-color:#343432}
.product-media-tabs button:focus-visible,.product-guidance a:focus-visible{outline:2px solid #596b80;outline-offset:3px}
#modelPreview .model-visual:has(.product-media-tabs:not([hidden])){display:flex;flex-direction:column}
#modelPreview .model-visual:has(.product-media-tabs:not([hidden])) .model-browser{flex:1;min-height:0}
.product-installation-photo{margin:0;padding:0 16px 12px;min-height:0;flex:1;display:flex;flex-direction:column;gap:8px}
.product-installation-photo img{display:block;min-height:0;flex:1;object-fit:contain;width:100%;height:100%;border-radius:4px}
.product-installation-photo figcaption{font-size:12px;line-height:1.5;color:#5b5b55;flex:none}
.product-help-item{scroll-margin-top:110px}.product-help-item h3{font:500 16px 'DM Sans',sans-serif;margin:20px 0 8px}.product-help-item li{margin-bottom:8px}.product-help-item ul,.product-help-item ol{padding-left:22px}
.fan-comparison{overflow-x:auto;margin:24px 0;scroll-margin-top:110px}.fan-comparison table{border-collapse:collapse;width:100%;font:14px/1.6 'DM Sans',sans-serif}.fan-comparison th,.fan-comparison td{text-align:left;vertical-align:top;padding:14px 12px;border-bottom:1px solid #d4d4ce}.fan-comparison th{font-weight:500}.fan-comparison caption{text-align:left;margin-bottom:12px;font-weight:500}.fan-comparison a{color:inherit}
@media(max-width:760px){#modelPreview .product-media-tabs{padding:0 12px 6px}.product-installation-photo{padding:0 12px 8px}.product-guidance{margin-top:12px;padding-top:12px}.fan-comparison table{min-width:570px}}
.collection-fan-compare{border-bottom:1px solid #d4d4ce;margin:-12px 0 28px;padding:0 0 16px;font:14px/1.65 'DM Sans',sans-serif}
.collection-fan-compare>summary{cursor:pointer;width:fit-content;padding:8px 0;min-height:44px;font-weight:500}
.collection-fan-compare p{max-width:760px;color:#555550;margin:12px 0}.collection-fan-compare a{color:inherit;text-underline-offset:4px}
.post-body #fan-comparison,.post-body #test-notes{scroll-margin-top:110px}
.product-guide-copy,.product-guide-print{font:inherit;font-size:13px;background:none;border:1px solid #bbb;border-radius:5px;padding:8px 12px;cursor:pointer;color:inherit;transition:border-color .15s,color .15s}
.product-guide-copy:hover,.product-guide-print:hover{border-color:#777;color:#171717}
.product-guide-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid #deded8}
.product-guide-status{font-size:12px;color:#666}
.product-guide-print-source{display:none}

.fan-comparison-hint{display:none}@media(max-width:760px){.fan-comparison-hint{display:block;font-size:12px;font-weight:400;color:#666;margin-top:6px}}
/* /assets/css/bankasi-refresh-v1.css */
/* Editorial refresh. Scoped additions leave the Creations motion and card effects intact. */
.workbench-editorial{display:block!important;background:none!important;border:0!important}
.workbench-chapter{margin:0 0 clamp(48px,7vw,100px)}
.chapter-heading{font:400 clamp(28px,3vw,40px)/1.15 'Cormorant Garamond',serif;border-top:1px solid #c9ccc6;padding-top:22px;margin:0 0 28px;color:#30332f}
.chapter-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.workbench-editorial .workbench-card{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.workbench-editorial .workbench-card:hover{background:transparent}
.workbench-editorial .workbench-card-image,.workbench-editorial .workbench-feature-image{border:0;border-radius:3px;overflow:hidden;background:#edeeea}
.workbench-editorial .workbench-card-body{padding:24px 0!important}
.workbench-editorial .card-title{font:400 clamp(27px,3vw,38px)/1.15 'Cormorant Garamond',serif;color:#30332f;margin:14px 0}
.workbench-editorial .card-excerpt{max-width:52ch;line-height:1.75}
.workbench-editorial .card-footer{padding-top:16px;margin-top:24px}
.workbench-editorial .chapter-featured .chapter-stories{display:block}
.workbench-editorial .chapter-featured .workbench-card{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.workbench-editorial .chapter-featured .card-title{font-size:clamp(36px,4.5vw,60px)}
.workbench-editorial .chapter-featured img{width:100%;height:100%;max-height:520px;object-fit:cover;aspect-ratio:5/4}
.workbench-editorial .chapter-guides .workbench-card{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start}
.workbench-editorial .chapter-guides .workbench-card-body{padding:0!important}
.workbench-editorial .chapter-guides img{width:100%;height:150px;object-fit:cover;padding:0}
.workbench-editorial .chapter-guides .card-title{font-size:30px}
.workbench-editorial .chapter-studio img{height:auto;aspect-ratio:3/2;object-fit:cover}
.chapter-archive .chapter-stories{display:block}
.workbench-editorial .archive-card{display:grid;grid-template-columns:1fr;min-height:0;border-bottom:1px solid #d6d8d2}
.workbench-editorial .archive-card .workbench-card-image,.workbench-editorial .archive-card .card-excerpt,.workbench-editorial .archive-card .card-footer{display:none}
.workbench-editorial .archive-card .workbench-card-body{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:baseline;padding:22px 0!important}
.workbench-editorial .archive-card .card-meta{flex-direction:column;align-items:flex-start;gap:6px}
.workbench-editorial .archive-card .card-title{font-size:27px;margin:0}
.workbench-editorial.is-filtered .chapter-heading{display:none}
.workbench-editorial.is-filtered .workbench-chapter{margin:0}
.workbench-editorial.is-filtered .chapter-stories{display:block}
.workbench-editorial.is-filtered .workbench-card{display:grid;grid-template-columns:140px 1fr;gap:28px;padding:24px 0!important;border-bottom:1px solid #d4d6d0}
.workbench-editorial.is-filtered .workbench-card-body{display:block;padding:0!important}
.workbench-editorial.is-filtered .workbench-card img{width:100%;height:120px;aspect-ratio:auto;object-fit:cover}
.workbench-editorial.is-filtered .workbench-card .card-title{font-size:30px}
.workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
.workbench-editorial [hidden]{display:none!important}
/* Reading layouts: wide material, narrow prose. */
.article-refresh .post-body{max-width:1120px!important;margin-inline:auto}
.article-refresh .post-body>p,.article-refresh .post-body>h2,.article-refresh .post-body>ul,.article-refresh .post-body>ol,.article-refresh .post-body>.article-toc,.article-refresh .post-body>.archive-context,.article-refresh .post-body>.test-notebook{max-width:712px;margin-left:auto;margin-right:auto}
.article-refresh .post-body>figure{max-width:900px;margin:44px auto}
.article-refresh .post-body>figure img{width:100%;height:auto;max-height:640px;object-fit:contain;border-radius:3px}
.article-refresh .post-body figcaption{font-size:13px;line-height:1.65;color:#62675f;max-width: 70ch;margin-top:12px}
.article-refresh .post-body>.fan-comparison{max-width:100%;margin:32px 0 48px}
.article-refresh .archive-context{padding:18px 0;border-block:1px solid #cfd2ca;font:400 14px/1.7 'DM Sans',sans-serif;color:#62665e;margin-bottom:32px}
.article-refresh .test-notebook{padding:24px;border-left:2px solid #8b9388;background:#edeFE9}
.article-refresh .post-body .test-notebook p{font-size:15px;line-height:1.75}
.article-refresh .post-body .test-notebook h3{font:500 15px/1.5 'DM Sans',sans-serif;margin:22px 0 8px}
.article-refresh .post-body>h2{margin-top:56px}
/* Static instructional figures. */
.fit-illustration{margin:24px 0 28px;padding:20px 24px;background:#eeefea;border:1px solid #d8dbd3;border-radius:3px;break-inside:avoid}
.fit-illustration img{width:100%;max-width:540px;height:auto;display:block;margin:auto}
.fit-illustration figcaption{font:400 12px/1.7 'DM Sans',sans-serif;color:#62675e;margin:10px 0 0}
.help-answer .fit-illustration{max-width:620px}
.help-answer .fit-illustration img{max-height:250px}
/* Concise model reading hierarchy. */
#modelPreview #modelDescription{font-size:15px;line-height:1.7;margin:0 0 12px}
#modelPreview .model-essential{font-size:13px;font-weight:500;margin:0 0 18px;color:#3b4038}
#modelPreview .model-note-details{border-top:1px solid #d6d8d1;padding:14px 0;margin:0}
#modelPreview .model-note-details>summary{display:list-item;cursor:pointer;font:500 13px/1.6 'DM Sans',sans-serif}
#modelPreview .model-note-details p{font-size:13px;line-height:1.7;color:#5b6057;margin:12px 0}
#modelPreview .product-guidance{border-top:0;margin-top:0;padding-top:0}
#modelPreview .product-fit{margin-top:0}
#modelPreview .model-design-credit{margin-bottom:14px}
.page-creations .creation-card .model-spec{min-height:2.8em;display:flex;align-items:flex-end}
/* Comparison is only present within the existing fan comparison. */
.fan-visual-comparison{margin:24px 0 32px}
.fan-compare-intro{font-size:13px!important;color:#62675f}
.fan-compare-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.fan-compare-side{min-width:0;border-top:1px solid #c9cdc4;padding-top:20px}
.fan-compare-side h3{font:500 16px/1.4 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-options{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 20px}
.fan-compare-options button{font:400 12px/1.5 'DM Sans',sans-serif;border:0;border-bottom:1px solid transparent;background:none;color:#64695f;padding:6px 0;cursor:pointer}
.fan-compare-options button[aria-pressed=true]{color:#20261c;border-color:#20261c;font-weight:500}
.fan-compare-options button:focus-visible{outline:2px solid #545c50;outline-offset:4px}
/* Phones: one sideways row of size tabs with full-height tap targets, as in the [creations] comparison (audit 2026-10-13). */
@media (max-width:760px){.fan-compare-options{flex-wrap:nowrap;gap:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.fan-compare-options::-webkit-scrollbar{display:none}.fan-compare-options button{flex:none;min-height:44px;min-width:24px;white-space:nowrap}.fan-compare-options button:focus-visible{outline-offset:-2px}}
.fan-compare-side img{display:block;width:100%;height:240px;object-fit:contain;background:#f7f8f4;border-radius:3px}
.fan-compare-side dl{display:grid;grid-template-columns:100px 1fr;font:13px/1.6 'DM Sans',sans-serif;margin:16px 0}
.fan-compare-side dt,.fan-compare-side dd{border-top:1px solid #d7dad1;padding:9px 0;margin:0}
.fan-compare-side dt{color:#62685c}
.fan-compare-side a{font-size:13px;text-underline-offset:4px}
/* Founder-led About. */
.page-about .founder{border-block:1px solid #d4d7cf}
.about-closing{padding:48px var(--page-gutter,5vw) 64px;border-top:1px solid #cfd3c9}
.about-closing h2{font:400 42px/1.1 'Cormorant Garamond',serif;margin:12px 0 24px}
.editorial-links{display:flex;flex-wrap:wrap;gap:18px 30px;font:400 14px/1.5 'DM Sans',sans-serif}
.editorial-links a{color:inherit;text-underline-offset:5px}
/* Contact form leads in DOM and visual order. */
.page-contact .page-hero{padding-top:128px!important;padding-bottom:38px!important;min-height:0}
.page-contact .page-hero h1{font-size:clamp(42px,5vw,64px);margin-bottom:16px}
.page-contact .contact-section{padding-top:48px!important}
.page-contact .contact-grid{grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:clamp(32px,7vw,100px);align-items:start}
.inquiry-design-reference{margin:0 0 26px;padding:0 0 20px;border-bottom:1px solid #cbd0c5;font:14px/1.65 'DM Sans',sans-serif}
.inquiry-design-reference p{margin:6px 0}.inquiry-design-reference a{color:inherit;text-underline-offset:4px;font-size:13px}
/* A statement rather than a title page. */
.page-mission .mission-hero{padding-top:140px;padding-bottom:36px;min-height:0}
.page-mission .mission-hero h1{max-width:20ch;font-size:clamp(58px,7vw,100px)}
.page-mission .statement-section{padding-top:0!important;padding-bottom:64px!important}
.page-mission .statement-body{max-width:760px}
.page-mission .pillars-section{padding-top:32px!important;padding-bottom:64px!important}
.page-mission .pillar{background:none;border:0;border-top:1px solid #555850;border-radius:0;box-shadow:none;padding:26px 0}
.page-mission .pillar::before,.page-mission .pillar::after{display:none}
.page-mission .pillars-grid{background:none;gap:40px}
.page-mission .cta-section{padding-top:40px;padding-bottom:48px}
/* Short recovery and readable privacy. */
.recovery-simple{max-width:1000px;margin:auto;padding:160px 32px 90px;min-height:65vh;color:#343830}
.recovery-simple h1{font:400 clamp(48px,7vw,80px)/1.05 'Cormorant Garamond',serif;margin:20px 0 24px}
.recovery-simple>p{max-width: 50ch;font:16px/1.7 'DM Sans',sans-serif}
.recovery-simple nav{display:flex;flex-wrap:wrap;gap:20px 40px;margin:36px 0;border-block:1px solid #d0d4c9;padding:24px 0}
.recovery-simple a{color:inherit;text-underline-offset:5px}
.recovery-simple .recovery-contact{font-size:14px}
.page-privacy{background:#f4f4f0;color:#343830;font-family:'DM Sans',sans-serif}
.privacy-reading{max-width:776px;margin:auto;padding:56px 32px 80px}
.privacy-wordmark{color:inherit;text-decoration:none;font-size:16px;letter-spacing:.18em}
.privacy-wordmark sup{font-size:8px}
.privacy-reading h1{font:400 clamp(40px,6vw,60px)/1.05 'Cormorant Garamond',serif;margin:48px 0 24px}
.privacy-reading h2{font:400 30px/1.2 'Cormorant Garamond',serif;margin:0 0 18px}
.privacy-reading p{font-size:16px;line-height:1.85;margin:0 0 22px}
.privacy-reading .panel{border:0;border-top:1px solid #cdd2c5;border-radius:0;background:none;box-shadow:none;padding:32px 0 10px;margin-top:32px}
.privacy-reading a{color:inherit;text-underline-offset:4px}
.privacy-reading .muted{font-size:13px;color:#62675e}
.metric-context{display:block;font:400 11px/1.5 'DM Sans',sans-serif;margin-top:5px;color:inherit;opacity:.8}
.service-period-inline{font:400 12px/1.7 'DM Sans',sans-serif;color:#c5c8c1;max-width:36ch}
.page-home .service-feature{margin-top:40px;padding-top:40px}
@media(max-width:760px){
 .chapter-stories{grid-template-columns:1fr;gap:32px}
 .workbench-editorial .chapter-featured .workbench-card{grid-template-columns:1fr;gap:0}
 .workbench-editorial .chapter-featured img{max-height:320px;aspect-ratio:3/2}
 .workbench-editorial .chapter-guides .workbench-card{grid-template-columns:90px 1fr;gap:18px}
 .workbench-editorial .chapter-guides img{height:110px}
 .workbench-editorial .chapter-guides .card-title{font-size:27px}
 .workbench-editorial .archive-card .workbench-card-body{grid-template-columns:1fr;gap:8px}
 .workbench-editorial .archive-card .card-meta{flex-direction:row}
 .workbench-editorial.is-filtered .workbench-card{grid-template-columns:80px 1fr;gap:16px}
 .workbench-editorial.is-filtered .workbench-card img{height:90px}
 .workbench-editorial.is-filtered .workbench-card .card-title{font-size:26px}
 .workbench-editorial.is-filtered .archive-card{grid-template-columns:1fr}
 .fan-compare-pair{gap:16px}.fan-compare-side img{height:150px}.fan-compare-side dl{display:block}.fan-compare-side dd{border-top:0;padding-top:0}.fan-compare-side dt{padding-bottom:2px}.fan-compare-options{gap:2px 10px}.fan-compare-side h3{font-size:14px}
 .article-refresh .post-body>figure{margin-block:30px}
 .fit-illustration{padding:14px 8px}.article-refresh .test-notebook{padding:18px}
 .page-contact .contact-grid{grid-template-columns:1fr}.page-contact .page-hero{padding-top:114px!important}
 .page-mission .mission-hero{padding-top:120px}.page-mission .pillars-grid{grid-template-columns:1fr;gap:16px}
 .recovery-simple{padding:130px 24px 64px}.recovery-simple nav{gap:20px 26px}
 .privacy-reading{padding:36px 24px 60px}
}
@media print{.fit-illustration{background:none;max-width:420px;padding:10pt;margin:12pt 0}.fit-illustration img{max-height:150pt}.fan-compare-options{display:none}.article-refresh .post-body{max-width:100%!important}}
.article-refresh .tour-chapter{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;border-top:1px solid #cdd0c8;padding:36px 0;margin:40px 0}
.article-refresh .tour-chapter h2{margin-top:0}.article-refresh .tour-chapter figure{margin:0}.article-refresh .tour-chapter img{width:100%;height:auto;border-radius:3px}
.article-refresh .tour-text{display:block;max-width:712px;margin-inline:auto}
@media(max-width:760px){.article-refresh .tour-chapter{grid-template-columns:1fr;gap:20px}}
/* Keep expanded preview copy inside its allocated grid row, so overflow can scroll. */
#modelPreview .model-details{align-self:stretch;overscroll-behavior-y:contain}
@media(min-width:761px){#modelPreview .model-details{height:100%;max-height:100%;box-sizing:border-box}}
/* /assets/css/site-refresh-v1.css */
/* 2026-10 site-wide refresh: same-origin page transitions and the site search dialog. */

/* Cross-document view transitions (Chromium/Safari 18.2+; other browsers navigate normally). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
@media(max-width: 0px){@view-transition{navigation:none}}

/* Site search (⌘K / Ctrl+K / "/"). */
.site-search-open{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:6px;padding:0;border:1px solid transparent;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:border-color .2s,background-color .2s}
.site-search-open:hover{border-color:currentColor}
#mainNav .site-search-open{color:#f5f5f5}
#mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff12}
.site-search-open:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-search-open svg{width:17px;height:17px}

/* Desktop header: logo left, links centred, search bar and CTA grouped on the right. The links sit centred in the
   space between logo and search, and exactly on the page centre once there is room (>=1400px). The bar matches
   the CTA's height and corner radius; below 1101px it is a square icon button. */
@media(min-width:769px){
 #mainNav .nav-links{margin:0 auto}
 #mainNav .site-search-open{width:40px;height:40px;margin:0 12px 0 auto;border:1px solid #ffffff2e;border-radius:8px;background:#ffffff0d;color:#f5f5f5c2;transition:border-color .2s,background-color .2s,color .2s}
 #mainNav .site-search-open:hover{border-color:#ffffff66;background:#ffffff17;color:#f5f5f5}
 #mainNav .site-search-open svg{width:16px;height:16px;flex:none}
}
@media(min-width:769px) and (max-width:900px){#mainNav .nav-links{gap:1rem}}
@media(min-width:1101px){
 #mainNav .site-search-open{display:inline-flex;align-items:center;justify-content:flex-start;gap:9px;width:180px;padding:0 14px;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;text-align:left}
 #mainNav .site-search-open::after{content:"Search"}
}
@media(min-width:1400px){
 #mainNav .nav-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
 #mainNav .site-search-open{width:220px}
}
.site-search{width:min(640px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 96px));margin:72px auto auto;padding:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 30px 80px #0000004d;overflow:hidden}
.site-search::backdrop{background:#0c0c0c8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.site-search form{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e3e0da}
.site-search form svg{flex:none;width:18px;height:18px;color:#6b6b6b}
.site-search input{flex:1;min-width:0;border:0;background:none;color:#151515;font:400 17px 'DM Sans',sans-serif;outline:none}
.site-search input::placeholder{color:#6b6b6b}
.site-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.site-search kbd{font:500 11px 'DM Sans',sans-serif;padding:3px 6px;border:1px solid #d7d4ce;border-radius:5px;color:#6b6b6b;background:#fff}
.site-search-results{list-style:none;margin:0;padding:8px;max-height:min(520px,calc(100vh - 170px));overflow:auto}
.site-search-results li{margin:0}
.site-search-results a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:10px 12px;border-radius:9px;color:inherit;text-decoration:none}
.site-search-results a[aria-selected="true"],.site-search-results a:hover{background:#ecebe6}
.site-search-type{grid-row:span 2;align-self:center;min-width:76px;font:500 10px 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6b675f}
.site-search-title{font:500 15px/1.3 'DM Sans',sans-serif}
.site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#5f5f5f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-empty{padding:22px 16px;font:400 14px 'DM Sans',sans-serif;color:#5f5f5f}
@media(max-width:760px){.site-search{margin-top:16px;max-height:calc(100vh - 32px)}.site-search-type{min-width:0;grid-row:auto}.site-search-results a{grid-template-columns:1fr}.site-search kbd{display:none}}
/* Site search v2 (site-search-v2.js, owner-approved 2026-10-06): start view, grouped results with headers,
   design thumbnails (their [creations] card image), a Cancel button on phones, and the inline variant (404 page). */
dialog.site-search-v2[open]{display:flex;flex-direction:column}
.site-search-v2 form{flex:none}
.site-search-v2 .site-search-results{flex:1 1 auto;min-height:0;max-height:none;padding:6px 8px 12px}
.site-search-v2 .site-search-group{margin:14px 12px 6px;font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.site-search-v2 .site-search-group:first-child{margin-top:8px}
.site-search-v2 .site-search-results a.site-search-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:8px 10px;border-radius:11px;color:inherit;text-decoration:none}
.site-search-v2 .site-search-results a.site-search-item[aria-selected="true"],.site-search-v2 .site-search-results a.site-search-item:hover{background:#ecebe6}
.site-search-thumb{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#f6f6f5;box-shadow:inset 0 0 0 1px #15151512;color:#6b675f;overflow:hidden}
.site-search-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.site-search-thumb.is-video{width:80px;background:#151515}
.site-search-thumb svg{width:22px;height:22px}
.site-search-body{display:grid;gap:2px;min-width:0}
.site-search-v2 .site-search-title{font:500 15px/1.3 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-v2 .site-search-text{font:400 13px/1.4 'DM Sans',sans-serif;color:#66625b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-search-tag{display:inline-block;margin-right:8px;padding:2px 7px;border:1px solid #15151533;border-radius:999px;font:500 9.5px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
.site-search-v2 .site-search-results a.site-search-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:12px 12px;font:500 14px/1.3 'DM Sans',sans-serif;color:#151515}
.site-search-more svg{width:18px;height:18px;flex:none}
.site-search-v2 .site-search-results .site-search-empty a{display:inline;padding:0;border-radius:0;background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.site-search-cancel{display:none;flex:none;padding:8px 2px 8px 8px;border:0;background:none;color:#151515;font:500 15px 'DM Sans',sans-serif;cursor:pointer}
.site-search-cancel:focus-visible{outline:2px solid #151515;outline-offset:2px;border-radius:6px}
@media(max-width:760px){
 .site-search-v2{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
 .site-search-v2 form{padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
 .site-search-v2 input{font-size:16px}
 .site-search-v2 kbd{display:none}
 .site-search-cancel{display:block}
 .site-search-v2 .site-search-results{padding:4px 6px calc(16px + env(safe-area-inset-bottom))}
 .site-search-v2 .site-search-results a.site-search-item{grid-template-columns:auto minmax(0,1fr);gap:12px}
}
.site-search-inline{display:block;width:100%;max-width:640px;margin:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 18px 48px #00000014;overflow:hidden;text-align:left}
.site-search-inline .site-search-results{max-height:420px;overflow:auto}
@media(max-width:760px){.site-search-inline{border-radius:12px}.site-search-inline .site-search-results{max-height:none}}

/* Footer edges follow the nav (owner 2026-10-06: the footer reached past the nav's edge on wide screens). */
body>footer{padding-left:var(--page-gutter,clamp(24px,5vw,80px));padding-right:var(--page-gutter,clamp(24px,5vw,80px))}

/* iOS 26 Safari tints the status bar and bottom bar from the page's root background (theme-color is ignored).
   The root is therefore the header/footer charcoal, and the light page surface moves onto <main>, which with the
   footer fills the whole page, so nothing else changes visually. Mission (already dark) and privacy (no header) keep theirs. */
body[data-surface="light"]{--page-surface:#f4f4f2}
body.page-product{--page-surface:#f4f2ee}
html:has(body[data-surface="light"]){background-color:#151515!important}
body[data-surface="light"]{background-color:#151515!important}
body[data-surface="light"]>#main-content{background-color:var(--page-surface)}

/* Phone/tablet header: logo, search and menu share one centre line; the menu lines end on the page gutter
   and search sits beside the menu (desktop layout is unchanged). */
@media(max-width:768px){
 #mainNav .site-search-open{margin-left:auto;margin-right:4px}
 body:not(.page-creations) #hamburgerBtn{justify-content:center;align-items:center;width:44px;height:44px;padding:0;margin-right:-11px}
}

/* Phone menu on the main site, matching the [creations] menu (owner 2026-10-05): a frosted panel that drops under
   the header, left-aligned DM Sans rows with dividers, a "Menu / Close" text toggle, and the last two links
   (Shop on Etsy, YouTube; Old tech above them since 2026-10-10) as quieter secondary links. [creations] keeps its own rules (88 px header). */
@media (max-width: 768px) {
 body:not(.page-creations) #hamburgerBtn { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 0; min-width: 64px; min-height: 44px; padding: 10px 0 10px 12px; color: #f2f2ec; font: 400 13px/1 'DM Sans', sans-serif; letter-spacing: .04em; }
 body:not(.page-creations) #hamburgerBtn::after { content: "Menu"; }
 body:not(.page-creations) #hamburgerBtn.open::after { content: "Close"; }
 body:not(.page-creations) #hamburgerBtn span { display: none; }
 body:not(.page-creations) #hamburgerBtn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
 body:not(.page-creations) #mobileMenu {
  display: flex; flex-direction: column; position: fixed; inset: var(--nav-h, 80px) 0 auto; height: auto; max-height: calc(100dvh - var(--nav-h, 80px));
  padding: 18px 24px 26px; gap: 0; align-items: stretch; justify-content: flex-start; text-align: left;
  background: #20201ff5; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid #ffffff22; box-shadow: 0 18px 32px #0003;
  overflow-y: auto; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
 }
 body:not(.page-creations) #mobileMenu.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
 body:not(.page-creations) #mobileMenu a {
  display: flex; align-items: center; justify-content: flex-start; min-height: 54px; padding: 12px 0; margin: 0;
  font: 400 17px/1.4 'DM Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #edede7;
  border-bottom: 1px solid #ffffff14; text-decoration: none; opacity: 1; transform: none;
 }
 body:not(.page-creations) #mobileMenu a:nth-last-child(2) { margin-top: 14px; }
 body:not(.page-creations) #mobileMenu a:nth-last-child(-n+2) { font-size: 14px; color: #bdbdb7; border: 0; min-height: 44px; }
 body:not(.page-creations) #mobileMenu a:focus-visible { outline: 1px solid #edede7; outline-offset: 3px; }
}
@media (max-width: 0px) { body:not(.page-creations) #mobileMenu { transition: none; } }

/* Wayfinding (site-wayfinding-v1.js, owner-approved 2026-10-06). */
/* 1. You are here (owner 2026-10-07: no dot, the page name glows): the current section's header link and phone-menu
   row are lit white with a soft silver-white glow, the [creations] wordmark's light language kept quiet; no underline
   (Contact: the CTA is lit instead). */
#mainNav .nav-links a[aria-current="page"],
html body.page-creations #mainNav .nav-links a[href][aria-current="page"]{color:#fff!important;text-decoration:none!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}
#mainNav .nav-cta[aria-current="page"]{text-decoration:none;background:#ffffff26!important;border-color:#f2f2f0!important;color:#fff;text-shadow:0 0 7px #ffffff8c,0 0 16px #e6ecf855}
#mobileMenu a[aria-current="page"]{color:#fff!important;font-weight:500;text-shadow:0 0 1px #ffffffb3,0 0 9px #ffffff99,0 0 20px #e6ecf880,0 0 36px #dce5f540}
#mobileMenu a[aria-current="page"]::after{content:none}
/* 2. Phone menu backdrop: dims the page under the open menu; a tap on it closes the menu. */
.menu-scrim{display:none}
@media(max-width:768px){
 .menu-scrim{display:block;position:fixed;inset:0;z-index:198;background:#0c0c0c73;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s .22s;-webkit-tap-highlight-color:transparent}
 .menu-scrim.is-shown{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
}
/* 3. Back to top: one rounded, frosted button in the right page gutter; colour-only hover, no lift. The script
   sets --to-top-lift to rise above the footer or the product pages' action bar. */
.to-top{position:fixed;z-index:190;right:max(12px,calc(env(safe-area-inset-right) + 12px),calc((var(--to-top-gutter,var(--page-gutter,clamp(24px,5vw,80px))) - 44px) / 2));bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px));width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:1px solid #15151524;border-radius:50%;background:#faf9f6c9;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);color:#151515;box-shadow:0 8px 24px #00000026,0 1px 0 #ffffffb3 inset;cursor:pointer;transform:translateY(calc(-1 * var(--to-top-lift,0px)));opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s,background-color .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.to-top.is-shown{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s,background-color .2s,border-color .2s,box-shadow .2s}
.to-top:hover{background:#fff;border-color:#15151566;box-shadow:0 8px 24px #0000002e,0 0 0 3px #1515150f}
.to-top:focus-visible{outline:2px solid #151515;outline-offset:2px;box-shadow:0 0 0 5px #faf9f6}
.to-top svg{width:18px;height:18px}
@media print{.to-top,.menu-scrim{display:none}}

/* Footer (owner-approved 2026-10-06): four columns (Explore, Designs, Connect, Good to know) beside the brand on
   wide screens, a 2 x 2 grid on phones. "Privacy" sits on the copyright line (owner 2026-10-11; it was a lone
   "Analytics privacy" row under a filler line). */
body>footer .footer-nav{gap:clamp(28px,3.4vw,52px)}
body>footer .footer-privacy{display:inline-flex;align-items:center;min-height:32px;color:#cecece;font-size:13px;text-decoration:none;transition:color .2s}
body>footer .footer-privacy::before{content:"\00b7";margin:0 .7em 0 .4em;color:#8a8a8a}
body>footer .footer-privacy:hover{color:#fff}
@media(max-width:760px){
 body>footer .footer-top>div:first-child{flex:0 0 auto}
 body>footer .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;width:100%}
}

/* Chrome system (2026-10-09 audit): one header, menu and footer across the main site, Workbench, Help and [creations].
   1. Header labels share one centre line: nav links are 40 px flex boxes like the search bar and the CTA (they sat
      1.5-2 px low because the inline padding box hung off the text baseline). */
@media(min-width:769px){
 #mainNav .nav-links li{display:flex}
 #mainNav .nav-links a{display:inline-flex;align-items:center;min-height:40px;padding-block:0}
}
/* 2. Phones: [creations] and product pages end "Menu" on the page gutter like the main site (it sat 11 px inside). */
@media(max-width:768px){
 html body.page-creations #hamburgerBtn{margin-right:-11px}
}
/* 3. Footer: the same column headings and brand line everywhere (Workbench headings were light, the homepage brand
      line was larger and narrower than every other page's). */
html body>footer .footer-col .footer-heading{font-weight:700}
html body>footer .footer-top>div>p.footer-shop-copy{max-width:40ch;font-size:.85rem;line-height:1.8}
/* 4. One focus ring weight: the phone menu toggle, menu rows and the footer privacy link drew 1 px rings while every other
      header, footer and search control draws 2 px. */
html body #hamburgerBtn:focus-visible,
html body #mobileMenu a:focus-visible,
html body>footer .footer-privacy:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Six header links since "Partnerships" (2026-10-10): at 769-900px the links tighten and the search button keeps its
   square, so the logo, links, search and CTA never touch. */
@media(min-width:769px) and (max-width:900px){
 #mainNav .nav-links{gap:.8rem;margin:0 10px 0 22px}
 #mainNav .nav-links a{font-size:11.5px;letter-spacing:.05em}
 #mainNav .site-search-open{flex:none;margin-left:8px}
}
/* Same reason at 1101-1279px (the search becomes a bar) and 1400-1599px (links centred on the page; the [creations]
   labels are longer): a little less space between links so they never run into the search bar. */
@media(min-width:1101px) and (max-width:1279px){#mainNav .nav-links{gap:1.25rem}#mainNav .site-search-open{width:150px}}
@media(min-width:1400px) and (max-width:1599px){#mainNav .nav-links{gap:1.5rem}body.page-creations #mainNav .nav-links{gap:1.1rem}}
/* Old tech in the desktop header (owner 2026-10-10: "without adding too much clutter"): not a seventh centred link but a
   quiet utility link (box icon + label, no frame) on the right, beside the search bar, so the six section links keep
   their spacing. Shown from 1280px where the right group has room; the phone menu lists it after Partnerships. */
#mainNav .nav-util{display:none}
@media(min-width:1280px){
 #mainNav .nav-util{display:inline-flex;align-items:center;gap:7px;height:40px;margin:0 14px 0 auto;padding:0 2px;flex:none;font:400 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;color:#f5f5f5a8;text-decoration:none;white-space:nowrap;transition:color .2s}
 #mainNav .nav-util svg{width:16px;height:16px;flex:none}
 #mainNav .nav-util:hover,#mainNav .nav-util[aria-current="page"]{color:#fff}
 #mainNav .nav-util[aria-current="page"]{text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866}
 #mainNav .nav-util:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
 #mainNav .nav-util+.site-search-open{margin-left:0}
}
@media(min-width:1280px) and (max-width:1399px){#mainNav .nav-util+.site-search-open{width:150px}}
/* With the extra link the right group is wider, so the links stay centred between logo and search (as below 1400px)
   until 1900px, where page-centred links clear it again (the homepage's wider gutter included). */
@media(min-width:1400px) and (max-width:1899px){#mainNav:has(.nav-util) .nav-links{position:static;transform:none;margin:0 auto}}

/* Phone footer (owner 2026-10-11): the Designs column is dropped on phones; [creations] in Explore leads there. */
@media (max-width: 760px) { body > footer .footer-col:has(a[href$="#cooling"]) { display: none; } }
/* ...so Good to know spans the row and lists its four links in two columns under Explore and Connect (owner 2026-10-11). */
@media (max-width: 760px) {
 body > footer .footer-nav > .footer-col:last-child { grid-column: 1 / -1; }
 body > footer .footer-nav > .footer-col:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: 24px; }
}


/* Link buttons (owner 2026-10-11: "every one"): every standalone link and link button is a rounded button with a
   filled circle in the text colour; the arrow is cut out of the circle, so it shows the button's own colour and
   contrasts on dark and light. Arrow: up-right to another page, toward the target on the same page, right for a
   pop-up preview. Plain text links (first list) get the whole button; existing pill buttons (second list) keep their
   own fill and get the radius and the circle. Add new standalone links to one of the two lists. */
html body.page-home .text-link,html body .model-contact,html body .product-secondary>a,html body.page-home .home-build-story .feature-actions a:not(.build-watch),html body .review-design-link,html body .help-back,html body .journey-link,html body .editorial-links a,html body .founder-links a,html body .fan-compare-side>a:not(.fan-compare-image-link),html body.page-creations p>a[href$="#test-notes"]:only-child,html body .pw-all,html body .rail-all,html body .wb-rail-all,html body .product-guide-link a,html body .bento-note-link,html body .custom-note-link,html body .wwu-review-link a,html body .wwu-kit-link,html body.page-work .wwu-go,html body.page-work .wwu-direct ul a,html body.page-work .wwu-review figcaption a,html body.page-work .wwu-proof-link a,html body.page-work .wwu-case-rel,html body .product-case-more,html body .pr-all,html body .workbench-rss-link,html body .privacy-end p>a,html body .channel-link,html body .contact-setup-note a,html body .contact-detail-value a,html body .post-back,html body .post-3d-link,html body .help-toc-back,html body .help-toc-help,html body .help-toc-close,html body .help-shop{display:inline-block!important;position:relative!important;width:fit-content!important;max-width:100%;align-self:flex-start;padding:12px 54px 12px 18px!important;min-height:46px;box-sizing:border-box;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;border-radius:12px!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;background-image:none!important;font-family:'DM Sans',sans-serif;font-size:14px!important;font-weight:500!important;line-height:1.45!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;white-space:normal!important;opacity:1!important;transition:border-color .2s,background-color .2s}
html body.page-home .home-build-story .feature-actions a.build-watch:hover,html body.page-home .text-link:hover,html body .model-contact:hover,html body .product-secondary>a:hover,html body.page-home .home-build-story .feature-actions a:not(.build-watch):hover,html body .review-design-link:hover,html body .help-back:hover,html body .journey-link:hover,html body .editorial-links a:hover,html body .founder-links a:hover,html body .fan-compare-side>a:not(.fan-compare-image-link):hover,html body.page-creations p>a[href$="#test-notes"]:only-child:hover,html body .pw-all:hover,html body .rail-all:hover,html body .wb-rail-all:hover,html body .product-guide-link a:hover,html body .bento-note-link:hover,html body .custom-note-link:hover,html body .wwu-review-link a:hover,html body .wwu-kit-link:hover,html body.page-work .wwu-go:hover,html body.page-work .wwu-direct ul a:hover,html body.page-work .wwu-review figcaption a:hover,html body.page-work .wwu-proof-link a:hover,html body.page-work .wwu-case-rel:hover,html body .product-case-more:hover,html body .pr-all:hover,html body .workbench-rss-link:hover,html body .privacy-end p>a:hover,html body .channel-link:hover,html body .contact-setup-note a:hover,html body .contact-detail-value a:hover,html body .post-back:hover,html body .post-3d-link:hover,html body .help-toc-back:hover,html body .help-toc-help:hover,html body .help-toc-close:hover,html body .help-shop:hover{border-color:color-mix(in srgb,currentColor 70%,transparent)!important;background-color:color-mix(in srgb,currentColor 11%,transparent)!important}
html body .home-oldtech-link,html body .model-page-cta,html body .studio-details-link,html body .home-forum-cta,html body a.ot-btn,html body a.wwu-btn,html body a.btn-primary,html body .product-buy,html body a.product-actionbar-btn,html body .review-etsy-button,html body .hero-shop-link,html body .model-shop,html body .rb-all,html body .wb-link,html body .help-contact>a,html body .post-cta>a,html body .help-end-link,html body .mto-cta a,html body .help-toc-page,html body .sv-start{position:relative!important;display:inline-flex!important;align-items:center;min-height:46px;box-sizing:border-box;padding-right:54px!important;border-radius:12px!important;text-decoration:none!important}
html body.page-home .text-link *,html body .model-contact *,html body .product-secondary>a *,html body.page-home .home-build-story .feature-actions a:not(.build-watch) *,html body .review-design-link *,html body .help-back *,html body .journey-link *,html body .editorial-links a *,html body .founder-links a *,html body .fan-compare-side>a:not(.fan-compare-image-link) *,html body.page-creations p>a[href$="#test-notes"]:only-child *,html body .pw-all *,html body .rail-all *,html body .wb-rail-all *,html body .product-guide-link a *,html body .bento-note-link *,html body .custom-note-link *,html body .wwu-review-link a *,html body .wwu-kit-link *,html body.page-work .wwu-go *,html body.page-work .wwu-direct ul a *,html body.page-work .wwu-review figcaption a *,html body.page-work .wwu-proof-link a *,html body.page-work .wwu-case-rel *,html body .product-case-more *,html body .pr-all *,html body .workbench-rss-link *,html body .privacy-end p>a *,html body .channel-link *,html body .contact-setup-note a *,html body .contact-detail-value a *,html body .post-back *,html body .post-3d-link *,html body .home-oldtech-link *,html body .model-page-cta *,html body .studio-details-link *,html body .home-forum-cta *,html body a.ot-btn *,html body a.wwu-btn *,html body a.btn-primary *,html body .product-buy *,html body a.product-actionbar-btn *,html body .review-etsy-button *,html body .hero-shop-link *,html body .model-shop *,html body .rb-all *,html body .wb-link *,html body .help-contact>a *,html body .post-cta>a *,html body .help-end-link *,html body .mto-cta a *,html body .help-toc-back *,html body .help-toc-help *,html body .help-toc-close *,html body .help-shop *,html body .help-toc-page *,html body .sv-start *{text-decoration:none!important}
html body.page-home .text-link svg,html body .model-contact svg,html body .product-secondary>a svg,html body.page-home .home-build-story .feature-actions a:not(.build-watch) svg,html body .review-design-link svg,html body .help-back svg,html body .journey-link svg,html body .editorial-links a svg,html body .founder-links a svg,html body .fan-compare-side>a:not(.fan-compare-image-link) svg,html body.page-creations p>a[href$="#test-notes"]:only-child svg,html body .pw-all svg,html body .rail-all svg,html body .wb-rail-all svg,html body .product-guide-link a svg,html body .bento-note-link svg,html body .custom-note-link svg,html body .wwu-review-link a svg,html body .wwu-kit-link svg,html body.page-work .wwu-go svg,html body.page-work .wwu-direct ul a svg,html body.page-work .wwu-review figcaption a svg,html body.page-work .wwu-proof-link a svg,html body.page-work .wwu-case-rel svg,html body .product-case-more svg,html body .pr-all svg,html body .workbench-rss-link svg,html body .privacy-end p>a svg,html body .channel-link svg,html body .contact-setup-note a svg,html body .contact-detail-value a svg,html body .post-back svg,html body .post-3d-link svg,html body .home-oldtech-link svg,html body .model-page-cta svg,html body .studio-details-link svg,html body .home-forum-cta svg,html body a.ot-btn svg,html body a.wwu-btn svg,html body a.btn-primary svg,html body .product-buy svg,html body a.product-actionbar-btn svg,html body .review-etsy-button svg,html body .hero-shop-link svg,html body .model-shop svg,html body .rb-all svg,html body .wb-link svg,html body .help-contact>a svg,html body .post-cta>a svg,html body .help-end-link svg,html body .mto-cta a svg,html body .help-toc-back svg,html body .help-toc-help svg,html body .help-toc-close svg,html body .help-shop svg,html body .help-toc-page svg,html body .sv-start svg{display:none!important}
html body.page-home .text-link::before,html body .model-contact::before,html body .product-secondary>a::before,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::before,html body .review-design-link::before,html body .help-back::before,html body .journey-link::before,html body .editorial-links a::before,html body .founder-links a::before,html body .fan-compare-side>a:not(.fan-compare-image-link)::before,html body.page-creations p>a[href$="#test-notes"]:only-child::before,html body .pw-all::before,html body .rail-all::before,html body .wb-rail-all::before,html body .product-guide-link a::before,html body .bento-note-link::before,html body .custom-note-link::before,html body .wwu-review-link a::before,html body .wwu-kit-link::before,html body.page-work .wwu-go::before,html body.page-work .wwu-direct ul a::before,html body.page-work .wwu-review figcaption a::before,html body.page-work .wwu-proof-link a::before,html body.page-work .wwu-case-rel::before,html body .product-case-more::before,html body .pr-all::before,html body .workbench-rss-link::before,html body .privacy-end p>a::before,html body .channel-link::before,html body .contact-setup-note a::before,html body .contact-detail-value a::before,html body .post-back::before,html body .post-3d-link::before,html body .home-oldtech-link::before,html body .model-page-cta::before,html body .studio-details-link::before,html body .home-forum-cta::before,html body a.ot-btn::before,html body a.wwu-btn::before,html body a.btn-primary::before,html body .product-buy::before,html body a.product-actionbar-btn::before,html body .review-etsy-button::before,html body .hero-shop-link::before,html body .model-shop::before,html body .rb-all::before,html body .wb-link::before,html body .help-contact>a::before,html body .post-cta>a::before,html body .help-end-link::before,html body .mto-cta a::before,html body .help-toc-back::before,html body .help-toc-help::before,html body .help-toc-close::before,html body .help-shop::before,html body .help-toc-page::before,html body .sv-start::before{display:none!important}
html body.page-home .home-build-story .feature-actions a.build-watch::after,html body.page-home .text-link::after,html body .model-contact::after,html body .product-secondary>a::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)::after,html body .review-design-link::after,html body .help-back::after,html body .journey-link::after,html body .editorial-links a::after,html body .founder-links a::after,html body .fan-compare-side>a:not(.fan-compare-image-link)::after,html body.page-creations p>a[href$="#test-notes"]:only-child::after,html body .pw-all::after,html body .rail-all::after,html body .wb-rail-all::after,html body .product-guide-link a::after,html body .bento-note-link::after,html body .custom-note-link::after,html body .wwu-review-link a::after,html body .wwu-kit-link::after,html body.page-work .wwu-go::after,html body.page-work .wwu-direct ul a::after,html body.page-work .wwu-review figcaption a::after,html body.page-work .wwu-proof-link a::after,html body.page-work .wwu-case-rel::after,html body .product-case-more::after,html body .pr-all::after,html body .workbench-rss-link::after,html body .privacy-end p>a::after,html body .channel-link::after,html body .contact-setup-note a::after,html body .contact-detail-value a::after,html body .post-back::after,html body .post-3d-link::after,html body .home-oldtech-link::after,html body .model-page-cta::after,html body .studio-details-link::after,html body .home-forum-cta::after,html body a.ot-btn::after,html body a.wwu-btn::after,html body a.btn-primary::after,html body .product-buy::after,html body a.product-actionbar-btn::after,html body .review-etsy-button::after,html body .hero-shop-link::after,html body .model-shop::after,html body .rb-all::after,html body .wb-link::after,html body .help-contact>a::after,html body .post-cta>a::after,html body .help-end-link::after,html body .mto-cta a::after,html body .help-toc-back::after,html body .help-toc-help::after,html body .help-toc-close::after,html body .help-shop::after,html body .help-toc-page::after,html body .sv-start::after{content:""!important;display:block!important;position:absolute!important;inset:50% 7px auto auto!important;translate:0 -50%;width:32px!important;height:32px!important;margin:0!important;border:0!important;border-radius:50%;background:currentColor!important;box-shadow:none!important;opacity:1!important;transform:none!important;filter:none!important;animation:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21 21 11'/%3E%3Cpath d='M13.5 11H21v7.5'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
html body.page-home .home-build-story .feature-actions a.build-watch:focus-visible,html body.page-home .text-link:focus-visible,html body .model-contact:focus-visible,html body .product-secondary>a:focus-visible,html body.page-home .home-build-story .feature-actions a:not(.build-watch):focus-visible,html body .review-design-link:focus-visible,html body .help-back:focus-visible,html body .journey-link:focus-visible,html body .editorial-links a:focus-visible,html body .founder-links a:focus-visible,html body .fan-compare-side>a:not(.fan-compare-image-link):focus-visible,html body.page-creations p>a[href$="#test-notes"]:only-child:focus-visible,html body .pw-all:focus-visible,html body .rail-all:focus-visible,html body .wb-rail-all:focus-visible,html body .product-guide-link a:focus-visible,html body .bento-note-link:focus-visible,html body .custom-note-link:focus-visible,html body .wwu-review-link a:focus-visible,html body .wwu-kit-link:focus-visible,html body.page-work .wwu-go:focus-visible,html body.page-work .wwu-direct ul a:focus-visible,html body.page-work .wwu-review figcaption a:focus-visible,html body.page-work .wwu-proof-link a:focus-visible,html body.page-work .wwu-case-rel:focus-visible,html body .product-case-more:focus-visible,html body .pr-all:focus-visible,html body .workbench-rss-link:focus-visible,html body .privacy-end p>a:focus-visible,html body .channel-link:focus-visible,html body .contact-setup-note a:focus-visible,html body .contact-detail-value a:focus-visible,html body .post-back:focus-visible,html body .post-3d-link:focus-visible,html body .home-oldtech-link:focus-visible,html body .model-page-cta:focus-visible,html body .studio-details-link:focus-visible,html body .home-forum-cta:focus-visible,html body a.ot-btn:focus-visible,html body a.wwu-btn:focus-visible,html body a.btn-primary:focus-visible,html body .product-buy:focus-visible,html body a.product-actionbar-btn:focus-visible,html body .review-etsy-button:focus-visible,html body .hero-shop-link:focus-visible,html body .model-shop:focus-visible,html body .rb-all:focus-visible,html body .wb-link:focus-visible,html body .help-contact>a:focus-visible,html body .post-cta>a:focus-visible,html body .help-end-link:focus-visible,html body .mto-cta a:focus-visible,html body .help-toc-back:focus-visible,html body .help-toc-help:focus-visible,html body .help-toc-close:focus-visible,html body .help-shop:focus-visible,html body .help-toc-page:focus-visible,html body .sv-start:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Same page: toward the target (down unless it sits above). */
html body.page-home .text-link[href^="#"]::after,html body .model-contact[href^="#"]::after,html body .product-secondary>a[href^="#"]::after,html body.page-home .home-build-story .feature-actions a:not(.build-watch)[href^="#"]::after,html body .review-design-link[href^="#"]::after,html body .help-back[href^="#"]::after,html body .journey-link[href^="#"]::after,html body .editorial-links a[href^="#"]::after,html body .founder-links a[href^="#"]::after,html body .fan-compare-side>a:not(.fan-compare-image-link)[href^="#"]::after,html body.page-creations p>a[href$="#test-notes"]:only-child[href^="#"]::after,html body .pw-all[href^="#"]::after,html body .rail-all[href^="#"]::after,html body .wb-rail-all[href^="#"]::after,html body .product-guide-link a[href^="#"]::after,html body .bento-note-link[href^="#"]::after,html body .custom-note-link[href^="#"]::after,html body .wwu-review-link a[href^="#"]::after,html body .wwu-kit-link[href^="#"]::after,html body.page-work .wwu-go[href^="#"]::after,html body.page-work .wwu-direct ul a[href^="#"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after,html body.page-work .wwu-proof-link a[href^="#"]::after,html body.page-work .wwu-case-rel[href^="#"]::after,html body .product-case-more[href^="#"]::after,html body .pr-all[href^="#"]::after,html body .workbench-rss-link[href^="#"]::after,html body .privacy-end p>a[href^="#"]::after,html body .channel-link[href^="#"]::after,html body .contact-setup-note a[href^="#"]::after,html body .post-back[href^="#"]::after,html body .post-3d-link[href^="#"]::after,html body .home-oldtech-link[href^="#"]::after,html body .model-page-cta[href^="#"]::after,html body .studio-details-link[href^="#"]::after,html body .home-forum-cta[href^="#"]::after,html body a.ot-btn[href^="#"]::after,html body a.wwu-btn[href^="#"]::after,html body a.btn-primary[href^="#"]::after,html body .product-buy[href^="#"]::after,html body a.product-actionbar-btn[href^="#"]::after,html body .review-etsy-button[href^="#"]::after,html body .hero-shop-link[href^="#"]::after,html body .model-shop[href^="#"]::after,html body .rb-all[href^="#"]::after,html body .wb-link[href^="#"]::after,html body .help-contact>a[href^="#"]::after,html body .post-cta>a[href^="#"]::after,html body .help-end-link[href^="#"]::after,html body .mto-cta a[href^="#"]::after,html body .help-toc-help[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
html body .help-back[href="#your-product"]::after,html body .help-toc-back[href="#your-product"]::after,html body .help-toc-close::after,html body .help-end-link[href="#your-product"]::after,html body.page-work .wwu-review figcaption a[href^="#"]::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 23V9'/%3E%3Cpath d='M10 15l6-6 6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* [creations] comparison "Explore this mount" opens the preview: a pop-up. */
html body.page-creations:not(.page-product) .fan-compare-side>a:not(.fan-compare-image-link)::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* "Start step-by-step setup" (Help and product pages) opens the step viewer: a pop-up. */
html body .sv-start::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")!important}
/* Smaller versions: inside review cards and the sticky product action bar. */
html body .review-design-link{padding:8px 40px 8px 14px!important;min-height:36px;font-size:12.5px!important;border-radius:10px!important}
html body .review-design-link::after,html body a.product-actionbar-btn::after{width:24px!important;height:24px!important;right:6px!important}
html body a.product-actionbar-btn{min-height:36px;padding-right:38px!important}
html body .review-design-link strong{font-weight:600}
/* Hero chapter tiles: same filled circle; Channel and Community scroll down the page. */
.page-home .hero-chapters a:not(.hero-chapter-out) .ui-arrow{background:#f4f4f1;color:#151515;border-color:#f4f4f1!important}

/* Plain text links that sat in the pill list: give them the whole button. */
html body .rb-all,html body .hero-shop-link{padding:12px 54px 12px 18px!important;border:1px solid color-mix(in srgb,currentColor 34%,transparent)!important;background:color-mix(in srgb,currentColor 6%,transparent)!important;font-size:14px!important;font-weight:500!important}
/* The forum call to action keeps its own padding rule; make room for the circle. */
html body.page-home .forum-stage .forum-stage-cta .home-forum-cta{padding-right:62px!important}
/* [creations] preview: keep the studio's own show/hide for these two (single-column studio shows Details, hides Ask). */
html body #modelPreview.is-studio .studio-details-link{display:none!important}
html body #modelPreview .model-contact{display:none!important}
@media (min-width: 761px) and (min-width: 1025px), (min-width: 761px) and (orientation: landscape) {
  html body #modelPreview .model-contact{display:inline-block!important}
}
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  html body #modelPreview.is-studio .studio-details-link{display:inline-flex!important}
  html body #modelPreview .model-contact{display:none!important}
}
@media (max-width: 760px) {
  html body #modelPreview .studio-details-link,html body #modelPreview .model-shop{padding-right:40px!important;white-space:nowrap}
  html body #modelPreview .studio-details-link::after,html body #modelPreview .model-shop::after{width:26px!important;height:26px!important;right:7px!important}
}
html body .channel-link{white-space:nowrap!important;flex:none}

/* Header: [creations] keeps its lowercase brand spelling inside the uppercase nav (owner 2026-10-11). */
html body #mainNav .nav-links a[href="https://creations.bankasimedia.com/"]{text-transform:none!important;letter-spacing:.02em!important;font-size:13px!important}
/* Footer column headings glow like the current-page link (owner 2026-10-11; weight stays 700). */
html body .footer-col .footer-heading{color:#fff!important;text-shadow:0 0 1px #ffffffb3,0 0 7px #ffffff8c,0 0 16px #e6ecf866,0 0 28px #dce5f533}

/* BANKASI MEDIA lockup (owner 2026-10-13): 800 extra bold, MEDIA cap-top on BANKASI's cap-top line.
   MEDIA sits on the baseline and is raised by cap height x (size ratio - 1), in its own em:
   main 0.71 x (16.8/7.36 - 1) = .911em (Geist); [creations] 0.70 x (1/.58 - 1) = .507em (DM Sans).
   [creations] uses 'DM Sans Print' (same DM Sans file, 100-1000) because its 'DM Sans' face stops at 700. */
html body #mainNav .nav-logo,html body footer .nav-logo{align-items:baseline!important}
html body .nav-logo .logo-main{font-weight:800!important}
html body .nav-logo .logo-sup{font-weight:800!important;vertical-align:baseline!important;position:relative!important;top:-.911em!important;margin-top:0!important}
html body .creations-parent-name,html body .creations-parent-name sup{font-weight:800!important;font-family:'DM Sans Print','DM Sans',sans-serif!important}
html body .creations-parent-name sup{vertical-align:baseline!important;position:relative!important;top:-.507em!important}
/* [creations] wordmark (owner 2026-10-13): 500 medium in the header, hero (incl. the loading mark and typewriter layers) and footer, was 300. */
html body.page-creations .creations-bracket{font-weight:500!important}
/* /assets/creations/creations-refresh-v1.css */
/* 2026-10 refresh for [creations]: stock badges, dialog stock line and the "Notify me" form. */
.stock-badge{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;font:500 10px/1.2 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#4d5a50}
.stock-badge .stock-dot{width:6px;height:6px;border-radius:50%;background:#3f9a5c;box-shadow:0 0 0 3px #3f9a5c1f}
.stock-badge[data-stock="out"],.stock-badge[data-stock="gone"]{color:#6d6a66}
.stock-badge[data-stock="out"] .stock-dot,.stock-badge[data-stock="gone"] .stock-dot{background:#a3a09b;box-shadow:0 0 0 3px #a3a09b1f}
.creation-body .bento-badge+.stock-badge{margin-left:10px}
.creation-body>.stock-badge{display:flex;width:fit-content}
.creation-body .bento-badge+.stock-badge{display:inline-flex}
#modelPreview .model-stock{margin:0 12px 0 0;align-self:center}
#modelPreview .model-stock[hidden]{display:none}

/* Notify me */
#modelPreview .model-notify{flex-basis:100%;margin:10px 0 0;max-width:420px}
#modelPreview .model-notify[hidden]{display:none}
#modelPreview .model-notify-title{margin:0 0 6px;font:500 11px/1.3 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#4a4a4a}
#modelPreview .model-notify-row{display:flex;gap:6px}
#modelPreview .model-notify input[type=email]{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid #c9c6c0;border-radius:0;background:#fff;color:#151515;font:400 14px 'DM Sans',sans-serif}
#modelPreview .model-notify input[type=email]:focus-visible{outline:2px solid #151515;outline-offset:1px}
#modelPreview .model-notify button{height:36px;padding:0 16px;border:1px solid #555;border-radius:0;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 11px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s}
#modelPreview .model-notify button:hover{border-color:#999}
#modelPreview .model-notify button:focus-visible{outline:2px solid #151515;outline-offset:2px}
#modelPreview .model-notify button:disabled{opacity:.6;cursor:progress}
#modelPreview .model-notify-status{min-height:1em;margin:6px 0 0;font:400 12px/1.4 'DM Sans',sans-serif;color:#4a4a4a}
#modelPreview .model-notify.is-sent .model-notify-row{display:none}
#modelPreview .model-notify-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media(max-width:760px){#modelPreview .model-notify{margin-top:6px}#modelPreview .model-notify-title{display:none}}


/* Preview: no dropdowns; the design's page is the clear next step (owner 2026-10-02). */
#modelPreview .model-details.is-flat>summary{display:none}
#modelPreview .model-details.is-flat{border:0}
#modelPreview .model-page-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 6px;padding:14px 18px;border:1px solid #222;border-radius:10px;background:#faf9f6;color:#151515;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
#modelPreview .model-page-cta[hidden]{display:none}
#modelPreview .model-page-cta strong{display:block;font:500 15px/1.3 'DM Sans',sans-serif;letter-spacing:-.005em}
#modelPreview .model-page-cta small{display:block;margin-top:3px;font:400 12px/1.4 'DM Sans',sans-serif;color:#5f5c57;transition:color .2s}
#modelPreview .model-page-cta svg{flex:none;width:20px;height:20px;transition:transform .2s}
#modelPreview .model-page-cta:hover{background:#222;color:#fff}
#modelPreview .model-page-cta:hover small{color:#cfcac2}
#modelPreview .model-page-cta:hover svg{transform:translateX(3px)}
#modelPreview .model-page-cta:focus-visible{outline:2px solid #151515;outline-offset:3px}
@media(max-width:760px){#modelPreview .model-details.is-flat #modelDescription{display:none}#modelPreview .model-page-cta{margin:10px 0 4px;padding:12px 14px}#modelPreview .model-page-cta strong{font-size:14px}}

/* Not on Etsy yet: one button opens the notify popup (the disabled "Coming soon" pill is folded into it). */
#modelPreview.is-awaiting-etsy .model-shop.is-unavailable{display:none}
#modelPreview .model-notify-open{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid #555;border-radius:8px;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 13px/1.2 'DM Sans',sans-serif;cursor:pointer;transition:border-color .2s,box-shadow .2s}
#modelPreview .model-notify-open[hidden]{display:none}
#modelPreview .model-notify-open:hover{border-color:#aaa;box-shadow:0 0 0 3px #1515151a}
#modelPreview .model-notify-open:focus-visible{outline:2px solid #151515;outline-offset:2px}
#modelPreview .model-notify-soon{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#c9c6c0}
#modelPreview .model-notify-soon:after{content:"·";margin-left:10px;color:#8d8a85}
.notify-sheet{width:min(440px,calc(100vw - 32px));margin:auto;padding:0;border:1px solid #d7d4ce;border-radius:14px;background:#faf9f6;color:#151515;box-shadow:0 30px 80px #0000004d}
.notify-sheet::backdrop{background:#0c0c0c8c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.notify-sheet-form{position:relative;padding:26px 24px 20px}
.notify-sheet-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #cfccc6;border-radius:50%;background:#fff;color:#151515;cursor:pointer}
.notify-sheet-close svg{width:16px;height:16px}
.notify-sheet-close:focus-visible{outline:2px solid #151515;outline-offset:2px}
.notify-sheet-kicker{margin:0 0 6px;font:500 11px/1.3 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6862}
.notify-sheet h3{margin:0 44px 8px 0;font:500 22px/1.2 'DM Sans',sans-serif;letter-spacing:-.01em}
.notify-sheet-intro{margin:0 0 16px;font:400 14px/1.55 'DM Sans',sans-serif;color:#4a4844}
.notify-sheet-row{display:flex;gap:8px}
.notify-sheet-row input[type=email]{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid #c9c6c0;border-radius:8px;background:#fff;color:#151515;font:400 16px 'DM Sans',sans-serif}
.notify-sheet-row input[type=email]:focus-visible{outline:2px solid #151515;outline-offset:1px}
.notify-sheet-row button{height:46px;padding:0 18px;border:1px solid #555;border-radius:8px;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 12px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.notify-sheet-row button:disabled{opacity:.6;cursor:progress}
.notify-sheet-status{min-height:1.2em;margin:10px 0 0;font:400 13px/1.5 'DM Sans',sans-serif;color:#2f2e2b}
.notify-sheet.is-sent .notify-sheet-row,.notify-sheet.is-sent .notify-sheet-intro{display:none}
.notify-sheet-note{margin:6px 0 0;font:400 11px/1.5 'DM Sans',sans-serif;color:#7a7771}
.notify-sheet-note a{color:inherit}
@media(max-width:420px){.notify-sheet-row{flex-direction:column}.notify-sheet-row button{width:100%}}

/* Phones: the model gets the room. Only the essentials remain under it: one slim "Full details" row and one
   action row (copy link as an icon, plus Etsy or Notify me). The essentials line and "Ask about this design"
   live on the design's own page. */
@media(max-width:760px){
 #modelPreview .model-details.is-flat{padding-top:6px;padding-bottom:6px}
 #modelPreview .model-details.is-flat #modelEssential,#modelPreview .model-details.is-flat .model-design-credit{display:none!important}
 #modelPreview .model-page-cta{margin:0;padding:10px 14px;border-radius:8px}
 #modelPreview .model-page-cta small{display:none}
 #modelPreview .model-page-cta strong{font-size:14px}
 #modelPreview .model-page-cta svg{width:18px;height:18px}
 #modelPreview .model-purchase{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
 #modelPreview .model-contact{display:none}
 #modelPreview .model-copy-link{flex:none;width:44px;min-width:44px;height:44px;padding:0;justify-content:center}
 #modelPreview .model-copy-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 #modelPreview .model-purchase .model-shop:not(.is-unavailable),#modelPreview .model-notify-open{flex:1;min-height:44px}
 #modelPreview .model-stock{flex:none;margin:0}
 #modelPreview .model-notify{display:none}
}
.notify-sheet .model-notify-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#modelPreview .model-copy-link{font-family:'DM Sans',sans-serif}
/* /assets/css/help-install-steps-v1.css */
/* Illustrated installation steps inside a Help guide: one drawing per step, numbered, on the schematic panel ground. */
.help-answer .install-steps { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 22px; max-width: 640px; counter-reset: none; }
.help-answer .install-steps > li { margin: 0; padding: 0; border: 1px solid #d8dbd3; border-radius: 4px; background: #fbfbf8; overflow: hidden; break-inside: avoid; }
.help-answer .install-step-figure { margin: 0; padding: 14px 16px 6px; background: #eeefea; border-bottom: 1px solid #d8dbd3; }
.help-answer .install-step-figure img { display: block; width: 100%; height: auto; max-width: 600px; margin: 0 auto; }
.help-answer .install-step-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 14px 18px 16px; }
.help-answer .install-step-number {
  grid-row: span 2; align-self: start; padding: 4px 9px; border-radius: 999px; background: #1f241e; color: #f6f6f2;
  font: 500 11px/1.3 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.help-answer .install-step-copy h4 { margin: 0 0 4px; font: 500 16px/1.35 "DM Sans", sans-serif; color: #232622; letter-spacing: -.005em; }
.help-answer .install-step-copy p { margin: 0; font-size: 14px; line-height: 1.7; color: #565651; }
.help-answer .install-steps-note { margin: 10px 0 22px; font: 400 12px/1.7 "DM Sans", sans-serif; color: #62675e; }
@media (max-width: 680px) {
  .help-answer .install-steps { gap: 16px; }
  .help-answer .install-step-figure { padding: 8px 6px 2px; }
  .help-answer .install-step-copy { grid-template-columns: 1fr; row-gap: 8px; padding: 12px 14px 14px; }
  .help-answer .install-step-number { grid-row: auto; justify-self: start; }
}
@media print {
  .help-answer .install-steps > li { border-color: #bbb; }
  .help-answer .install-step-figure img { max-height: 190pt; width: auto; }
}
.help-answer .install-step-figure a { display: block; cursor: zoom-in; border-radius: 2px; }
.help-answer .install-step-figure a:focus-visible { outline: 2px solid #1f241e; outline-offset: 3px; }
/* Legacy steps (EliteDesk four-fan version): a quiet fold-out under the current guide, for existing owners. */
.help-answer .help-legacy { max-width: 640px; margin: 0 0 26px; border: 1px solid #d8dbd3; border-radius: 4px; background: #f6f6f2; }
.help-answer .help-legacy > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; font: 500 14px/1.45 "DM Sans", sans-serif; color: #232622; }
.help-answer .help-legacy > summary::-webkit-details-marker { display: none; }
.help-answer .help-legacy > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.help-answer .help-legacy[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.help-answer .help-legacy > summary:focus-visible { outline: 2px solid #1f241e; outline-offset: 2px; }
.help-answer .help-legacy-body { padding: 0 18px 18px; }
.help-answer .help-legacy-body > p { margin: 0; font-size: 14px; line-height: 1.7; color: #565651; }
@media (max-width: 0px) { .help-answer .help-legacy > summary::after { transition: none; } }
/* /assets/css/step-viewer-v2.css */
/* Step-by-step viewer for the illustrated setup steps (assets/js/step-viewer-v2.js), on Help and the product pages.
   Full screen, light drawing stage, big thumb-reachable Previous / Next on phones. No lift anywhere.
   v2 (audit 2026-10-07): the Start / Continue button above each list, the touch expand icon on drawings, the last
   step's All products / Product page / Still need help? row, the "See it in 3D" chip, and phone landscape (the step
   copy scrolls instead of being cut after two lines; the hint sits above the drawing). */
html.step-viewer-open, html.step-viewer-open body { overflow: hidden; }
.install-steps.has-step-viewer .install-step-figure a { cursor: zoom-in; }
.step-viewer {
  --sv-ink: #1f241e; --sv-ground: #eeefea; --sv-paper: #fbfbf8; --sv-line: #d8dbd3; --sv-muted: #5d6258;
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--sv-paper); color: var(--sv-ink); overflow: hidden;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto; font-family: "DM Sans", sans-serif;
}
.step-viewer[open] { display: grid; animation: sv-in .22s ease-out; }
.step-viewer::backdrop { background: rgba(21, 21, 21, .55); }
@keyframes sv-in { from { opacity: 0; } to { opacity: 1; } }

/* top bar: product · progress · close */
.step-viewer .sv-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 12px 14px 12px 28px; border-bottom: 1px solid var(--sv-line); background: var(--sv-paper); }
.step-viewer .sv-kicker { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); }
.step-viewer .sv-bar { display: flex; gap: 4px; }
.step-viewer .sv-bar span { width: 22px; height: 3px; border-radius: 3px; background: #d5d8cf; transition: background-color .25s; }
.step-viewer .sv-bar span.is-done { background: #8f958a; }
.step-viewer .sv-bar span.is-current { background: var(--sv-ink); }
.step-viewer .sv-count { display: none; font: 500 13px/1 "DM Sans", sans-serif; font-variant-numeric: tabular-nums; color: var(--sv-ink); }
.step-viewer .sv-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); cursor: pointer; transition: border-color .2s, background-color .2s; }
.step-viewer .sv-close svg { width: 20px; height: 20px; }
.step-viewer .sv-close:hover { border-color: var(--sv-ink); }

/* stage */
.step-viewer .sv-stage { position: relative; overflow: hidden; background: var(--sv-ground); touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.step-viewer.is-zoomed .sv-stage { cursor: grab; }
.step-viewer.is-zoomed .sv-stage:active { cursor: grabbing; }
.step-viewer .sv-img, .step-viewer .sv-ghost { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; -webkit-user-drag: none; pointer-events: none; }
.step-viewer .sv-img { transition: translate .32s cubic-bezier(.2, .7, .2, 1), opacity .32s ease; }
.step-viewer .sv-img.is-swiping { transition: none; }
.step-viewer .sv-img.enter-right { translate: 48px 0; opacity: 0; transition: none; }
.step-viewer .sv-img.enter-left { translate: -48px 0; opacity: 0; transition: none; }
.step-viewer .sv-img.enter-right.go, .step-viewer .sv-img.enter-left.go { translate: 0 0; opacity: 1; transition: translate .34s cubic-bezier(.2, .7, .2, 1), opacity .3s ease; }
.step-viewer .sv-ghost { opacity: 0; }
.step-viewer .sv-ghost.is-leaving { opacity: 1; }
.step-viewer .sv-ghost.is-leaving.go { opacity: 0; transition: translate .3s ease-in, opacity .26s ease-in; }
.step-viewer .sv-ghost.to-left.go { translate: -48px 0; }
.step-viewer .sv-ghost.to-right.go { translate: 48px 0; }
.step-viewer .sv-hint { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(251, 251, 248, .92); border: 1px solid var(--sv-line); font: 500 12px/1.3 "DM Sans", sans-serif; color: var(--sv-muted); white-space: nowrap; pointer-events: none; transition: opacity .4s ease; }
.step-viewer .sv-hint.is-gone { opacity: 0; }
.step-viewer .sv-fit { position: absolute; right: 14px; bottom: 14px; padding: 9px 14px; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); font: 500 13px/1 "DM Sans", sans-serif; cursor: pointer; }
.step-viewer .sv-fit:hover { border-color: var(--sv-ink); }
.step-viewer .sv-fit[hidden] { display: none; }

/* footer: previous · copy · next */
.step-viewer .sv-foot { display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px; align-items: center; gap: 28px; padding: 20px 28px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sv-line); background: var(--sv-paper); }
.step-viewer .sv-copy { max-width: 680px; margin: 0 auto; text-align: center; }
.step-viewer .sv-step { margin: 0 0 6px; font: 500 11px/1.4 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); font-variant-numeric: tabular-nums; }
.step-viewer .sv-title { margin: 0 0 6px; font: 500 21px/1.3 "DM Sans", sans-serif; letter-spacing: -.01em; color: var(--sv-ink); }
.step-viewer .sv-text { margin: 0; font: 400 15px/1.65 "DM Sans", sans-serif; color: #4d5249; }
.step-viewer .sv-nav { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 22px; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); font: 500 15px/1 "DM Sans", sans-serif; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.step-viewer .sv-nav svg { width: 20px; height: 20px; flex: none; }
.step-viewer .sv-nav:hover:not(:disabled) { border-color: var(--sv-ink); }
.step-viewer .sv-nav:disabled { opacity: .38; cursor: default; }
.step-viewer .sv-next { background: var(--sv-ink); border-color: var(--sv-ink); color: #f6f6f2; }
.step-viewer .sv-next:hover:not(:disabled) { background: #000; }
.step-viewer .sv-next.is-done svg { display: none; }
.step-viewer button:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 3px; }
.step-viewer .sv-next:focus-visible { outline-color: #6a7065; }
.step-viewer .sv-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }

/* phones: one hand on the part, one thumb on the screen */
@media (max-width: 700px) {
  .step-viewer .sv-top { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 8px 8px 16px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .step-viewer .sv-bar { position: absolute; left: 0; right: 0; top: 0; gap: 2px; padding: 0; }
  .step-viewer .sv-bar span { flex: 1; width: auto; height: 3px; border-radius: 0; }
  .step-viewer .sv-kicker { display: none; }
  .step-viewer .sv-count { display: block; font-size: 15px; }
  .step-viewer .sv-foot { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "prev next"; gap: 14px 10px; padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); }
  .step-viewer .sv-copy { grid-area: copy; text-align: left; margin: 0; max-height: 34vh; overflow-y: auto; }
  .step-viewer .sv-step { display: none; }
  .step-viewer .sv-title { font-size: 19px; }
  .step-viewer .sv-text { font-size: 15px; line-height: 1.6; }
  .step-viewer .sv-prev { grid-area: prev; }
  .step-viewer .sv-next { grid-area: next; }
  .step-viewer .sv-nav { width: 100%; min-height: 58px; padding: 0 14px; font-size: 16px; }
  .step-viewer .sv-hint { bottom: 10px; font-size: 11.5px; }
  .step-viewer .sv-fit { right: 10px; bottom: 10px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .step-viewer .sv-top { padding-top: 6px; padding-bottom: 6px; }
  .step-viewer .sv-close { width: 40px; height: 40px; }
  .step-viewer .sv-foot { grid-template-columns: 150px minmax(0, 1fr) 150px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); gap: 16px; }
  /* the whole sentence stays readable: the copy scrolls inside its own box */
  .step-viewer .sv-copy { max-height: 31vh; overflow-y: auto; overscroll-behavior: contain; }
  .step-viewer .sv-step { display: none; }
  .step-viewer .sv-title { font-size: 17px; margin-bottom: 2px; }
  .step-viewer .sv-text { font-size: 14px; line-height: 1.5; }
  .step-viewer .sv-nav { min-height: 46px; padding: 0 16px; }
  .step-viewer .sv-hint { top: 8px; bottom: auto; }
}

/* Start / Continue: one primary button above every list (Help: under the guide header) */
.sv-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 18px; }
.sv-start { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px 0 22px; border: 1px solid #1f241e; border-radius: 999px; background: #1f241e; color: #f6f6f2; font: 500 15px/1.2 "DM Sans", sans-serif; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.sv-start svg { width: 18px; height: 18px; flex: none; }
.sv-start-meta::before { content: " · "; }
.sv-start-meta[hidden] { display: none; }
.sv-start:hover { background: #000; border-color: #000; }
.sv-start:focus-visible { outline: 2px solid #1f241e; outline-offset: 3px; }
.sv-start-over { padding: 4px 0; border: 0; background: none; color: #4d5249; font: 400 14px/1.4 "DM Sans", sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sv-start-over:hover { color: #1f241e; }
.sv-start-over[hidden] { display: none; }
@media (max-width: 680px) {
  .sv-start-row { margin-bottom: 16px; }
  .sv-start { width: 100%; justify-content: space-between; min-height: 52px; font-size: 15.5px; }
  .sv-start { padding-top: 9px; padding-bottom: 9px; }
  .sv-start-text { display: grid; gap: 2px; }
  .sv-start-meta { font-size: 13px; font-weight: 400; color: #c9ccc4; }
  .sv-start-meta::before { content: none; }
}

/* Touch: an expand icon on every drawing says "tap to open" */
.install-steps.has-step-viewer .install-step-figure a { position: relative; }
.install-steps .sv-expand { display: none; }
@media (pointer: coarse) {
  .install-steps .sv-expand { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #d8dbd3; border-radius: 999px; background: rgba(251, 251, 248, .92); color: #1f241e; pointer-events: none; }
  .install-steps .sv-expand svg { width: 16px; height: 16px; }
}

/* Last step: where to go next */
.step-viewer .sv-end { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.step-viewer .sv-end[hidden] { display: none; }
.step-viewer .sv-end-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; color: var(--sv-ink); font: 500 13.5px/1 "DM Sans", sans-serif; text-decoration: none; transition: border-color .2s; }
.step-viewer .sv-end-link svg { width: 15px; height: 15px; flex: none; }
.step-viewer .sv-end-link:hover { border-color: var(--sv-ink); }
.step-viewer .sv-end-link.is-help { border-color: #b9bdb3; }
.step-viewer .sv-end-link:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: 2px; }
@media (max-width: 700px) { .step-viewer .sv-end { justify-content: flex-start; } }

/* "See it in 3D" (product pages, steps that match an installation stage) */
.step-viewer .sv-3d { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border: 1px solid var(--sv-line); border-radius: 999px; background: rgba(251, 251, 248, .94); color: var(--sv-ink); font: 500 13px/1 "DM Sans", sans-serif; cursor: pointer; transition: border-color .2s; }
.step-viewer .sv-3d svg { width: 17px; height: 17px; }
.step-viewer .sv-3d:hover { border-color: var(--sv-ink); }
.step-viewer .sv-3d[hidden] { display: none; }

@media print { .step-viewer, .sv-start-row, .install-steps .sv-expand { display: none !important; } }
/* /assets/creations/product-page-v1.css */
/* [creations] product pages (generated by scripts/build_products.py). Warm off-white, charcoal,
   Cormorant section titles and DM Sans product names, matching the collection. No hover lift. */
.page-product{color:#151515}
.page-product main{padding:calc(var(--nav-h,76px) + 28px) clamp(16px,4vw,56px) clamp(56px,8vw,110px);max-width:1280px;margin:0 auto}
.product-breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 clamp(20px,3vw,36px);padding:0;list-style:none;font:400 12px/1.4 'DM Sans',sans-serif;letter-spacing:.04em;color:#6b6862}
.product-breadcrumb li+li:before{content:"/";margin-right:6px;color:#aaa59d}
.product-breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.product-breadcrumb a:hover{color:#151515;border-color:currentColor}
.product-breadcrumb [aria-current]{color:#151515}

.product-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.product-stage{position:relative;aspect-ratio:1;border-radius:18px;background:radial-gradient(circle at 50% 42%,#fff 0,#f1efea 58%,#e6e3dc 100%);border:1px solid #e1ddd5;overflow:hidden}
.product-stage img,.product-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.product-stage canvas{opacity:0;transition:opacity .35s}
.product-stage.is-ready canvas{opacity:1}
.product-stage.is-ready img{opacity:0;transition:opacity .35s .1s}
@media(max-width: 0px){.product-stage canvas{display:none}.product-stage.is-ready img{opacity:1}}

.product-spec{margin:0 0 12px;font:500 11px/1.5 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5d5a55}
.product-title{margin:0 0 14px;font:500 clamp(30px,3.6vw,48px)/1.08 'DM Sans',sans-serif;letter-spacing:-.02em;color:#151515}
.page-product .product-summary .stock-badge{margin:0 0 18px}
.product-description{margin:0 0 14px;font:400 16px/1.7 'DM Sans',sans-serif;color:#2c2b29;max-width:60ch}
.product-note{margin:0 0 18px;font:400 13px/1.7 'DM Sans',sans-serif;color:#5f5c57;max-width:62ch}
.product-credit{margin:0 0 18px;font:400 12px/1.5 'DM Sans',sans-serif}
.product-credit a{color:#3a3a3a;text-underline-offset:3px}
.product-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:8px 0 18px}
.product-buy{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:1px solid #555;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 12px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.product-buy:hover{border-color:#aaa;box-shadow:0 0 0 3px #1515151a}
.product-buy:focus-visible,.product-secondary a:focus-visible{outline:2px solid #151515;outline-offset:3px}
.product-secondary{display:flex;flex-wrap:wrap;gap:8px 20px}
.product-secondary a{font:500 13px/1.4 'DM Sans',sans-serif;color:#222;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.product-secondary a:hover{text-decoration-thickness:2px}
.product-material{margin:0;font:400 12px/1.6 'DM Sans',sans-serif;color:#6b6862}
.product-soon{flex-basis:100%;margin:0;font:500 12px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#4a4a4a}
.product-notify{flex-basis:100%;max-width:460px}
.product-notify label{display:block;margin:0 0 8px;font:400 14px/1.4 'DM Sans',sans-serif;color:#2c2b29}
.product-notify-row{display:flex;gap:8px}
.product-notify input[type=email]{flex:1;min-width:0;height:46px;padding:0 14px;border:1px solid #c9c6c0;background:#fff;color:#151515;font:400 15px 'DM Sans',sans-serif}
.product-notify input[type=email]:focus-visible{outline:2px solid #151515;outline-offset:1px}
.product-notify button{height:46px;padding:0 20px;border:1px solid #555;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 12px 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.product-notify button:hover{border-color:#aaa}
.product-notify button:disabled{opacity:.6;cursor:progress}
.product-notify-status{min-height:1em;margin:8px 0 0;font:400 13px/1.5 'DM Sans',sans-serif;color:#4a4a4a}
.product-notify.is-sent .product-notify-row,.product-notify.is-sent label{display:none}
.product-notify-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.product-section-title{margin:0 0 14px;font:300 clamp(28px,3vw,38px)/1.1 'Cormorant Garamond',serif;color:#151515;letter-spacing:-.01em}
.product-section-intro{margin:-6px 0 18px;font:400 14px/1.6 'DM Sans',sans-serif;color:#5f5c57}
.product-intent,.product-guide,.product-video,.product-related{margin-top:clamp(52px,7vw,96px);padding-top:clamp(28px,4vw,44px);border-top:1px solid #dcd8d0}
.product-related ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.product-related a{display:flex;flex-direction:column;gap:8px;height:100%;padding:10px 10px 14px;border:1px solid #e1ddd5;border-radius:12px;background:#faf9f6;color:#151515;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.product-related a:hover{border-color:#9ea7b3;box-shadow:0 0 0 3px #b9c6d633}
.product-related a:focus-visible{outline:2px solid #151515;outline-offset:2px}
.product-related img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:8px;background:#f1efea}
.product-related ul{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.product-related-spec{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#6b6862}
.product-related-title{font:500 16px/1.3 'DM Sans',sans-serif}
.product-intent p{max-width:68ch;margin:0;font:400 17px/1.75 'DM Sans',sans-serif;color:#2c2b29}

.product-guide .help-answer{max-width:none}
.product-guide .help-answer ul{max-width:72ch;margin:0 0 30px;padding-left:20px;font:400 15px/1.75 'DM Sans',sans-serif;color:#2c2b29}
.product-guide .help-answer>p{max-width:72ch;font:400 14px/1.75 'DM Sans',sans-serif;color:#4a4844}
.product-guide .help-answer .install-steps{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));max-width:none}
.product-guide-link{margin:18px 0 0;font:500 13px 'DM Sans',sans-serif}
.product-guide-link a{color:#222;text-underline-offset:4px}

.product-video-card{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:center;max-width:860px;padding:12px;border:1px solid #e1ddd5;border-radius:14px;background:#faf9f6;color:#151515;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.product-video-card:hover{border-color:#9ea7b3;box-shadow:0 0 0 3px #b9c6d633}
.product-video-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px}
.product-video-card strong{display:block;margin-bottom:8px;font:500 17px/1.35 'DM Sans',sans-serif}
.product-video-card small{display:block;font:400 14px/1.6 'DM Sans',sans-serif;color:#4a4844}

@media(max-width:900px){.product-hero{grid-template-columns:1fr}.product-stage{max-width:560px;width:100%;margin:0 auto}}
@media(max-width:560px){.product-video-card{grid-template-columns:1fr}.product-notify-row{flex-direction:column}.product-notify button{width:100%}.product-buy{width:100%}}

/* In-page viewer: the views play here, with the same View buttons and drag behaviour as the collection preview. */
.product-viewer{min-width:0}
.product-stage{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* D9 (product-viewer-v9): GPU-height stages also let vertical swipes scroll the page; the viewer takes the swipe only
   when it starts on the model or after a short hold. */
.product-stage:active{cursor:grabbing}
.product-stage:focus-visible{outline:2px solid #151515;outline-offset:4px}
.product-stage img,.product-stage canvas{pointer-events:none;-webkit-user-drag:none}
.product-viewer-hint{margin:12px 0 0;text-align:center;font:400 12px/1.4 'DM Sans',sans-serif;color:#6b6862}
.product-views{display:flex;align-items:flex-start;gap:14px;margin:16px 0 0}
.product-view-label{flex:none;padding-top:7px;font:400 16px 'DM Sans',sans-serif;color:#151515}
.product-view-rows{display:grid;gap:8px;min-width:0}
.product-view-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.product-view-group{min-width:64px;font:500 11px 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#6b6862}
.product-views button{min-height:36px;padding:8px 12px;border:1px solid #bdbdb7;border-radius:6px;background:transparent;color:#454541;font:400 12px/1.35 'DM Sans',sans-serif;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.product-views button:hover{border-color:#6b6862;color:#151515}
.product-views button[aria-pressed="true"]{background:#222;border-color:#222;color:#fff}
.product-views button:focus-visible{outline:2px solid #151515;outline-offset:2px}
@media(max-width:560px){.product-views{flex-direction:column;gap:8px}.product-view-label{padding-top:0}}

/* Previous version of a design (EliteDesk legacy four-fan mount): a quiet "See legacy version" fold-out with its own
   in-place viewer (started only when opened) and a short what-changed table. No hover lift. */
.product-legacy{margin-top:clamp(40px,5vw,64px)}
.product-legacy-fold{border:1px solid #dcd8d0;border-radius:14px;background:#faf9f6}
.product-legacy-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px clamp(16px,2.4vw,26px);border-radius:14px;transition:border-color .2s,box-shadow .2s}
.product-legacy-fold>summary::-webkit-details-marker{display:none}
.product-legacy-fold>summary:hover{box-shadow:0 0 0 3px #b9c6d633}
.product-legacy-fold>summary:focus-visible{outline:2px solid #151515;outline-offset:3px}
.product-legacy-kicker{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6862}
.product-legacy-cta{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font:500 12px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#151515}
.product-legacy-cta:after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.product-legacy-fold[open] .product-legacy-cta:after{margin-top:3px;transform:rotate(-135deg)}
.product-legacy-body{padding:0 clamp(16px,2.4vw,26px) clamp(20px,3vw,30px)}
.product-legacy-summary{max-width:68ch;margin:0 0 22px;font:400 15px/1.7 'DM Sans',sans-serif;color:#2c2b29}
.product-legacy-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,48px);align-items:start}
.product-legacy-viewer .product-stage{max-width:460px}
.product-legacy-compare table{width:100%;border-collapse:collapse;font:400 14px/1.55 'DM Sans',sans-serif;color:#2c2b29}
.product-legacy-compare caption{text-align:left;margin:0 0 10px;font:300 26px/1.1 'Cormorant Garamond',serif;color:#151515}
.product-legacy-compare th,.product-legacy-compare td{padding:11px 12px 11px 0;border-bottom:1px solid #e1ddd5;text-align:left;vertical-align:top}
.product-legacy-compare thead th{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6862}
.product-legacy-compare tbody th{width:24%;font:500 13px/1.5 'DM Sans',sans-serif;color:#151515}
.product-legacy-compare td:first-of-type{color:#6b6862}
.product-legacy-compare td:last-child{color:#151515;font-weight:500}
.product-legacy-guide{margin:16px 0 0;font:500 13px 'DM Sans',sans-serif}
.product-legacy-guide a{color:#222;text-underline-offset:4px}
@media(max-width:900px){.product-legacy-grid{grid-template-columns:1fr}.product-legacy-viewer .product-stage{margin:0 auto}}
@media(max-width:560px){.product-legacy-fold>summary{flex-wrap:wrap;gap:6px}.product-legacy-cta{margin-left:0}.product-legacy-compare tbody th{width:30%}}
@media(max-width: 0px){.product-legacy-cta:after{transition:none}}

/* Studio viewer (owner 2026-10-04: same studio design as the [creations] preview; product-viewer-v4 adds .is-studio; since
   v9 / audit Q13 the rules key on [data-product-viewer] so the studio layout and its dock height are in place before the
   script runs, which removes the layout shift when it starts).
   The viewer is the studio: the stage fills it on the render's own ground (--stage-bg) with no frame, the View choices
   float in a frosted dock over its bottom edge, the canvas sits above the dock, and the hint disappears after the first
   interaction. Phones: the studio runs edge to edge. No hover lift. */
.product-viewer[data-product-viewer]{--stage-bg:#f7f7f6;--dock-h:56px;position:relative;aspect-ratio:1/1.06;border-radius:24px;overflow:hidden;background:var(--stage-bg);transition:background-color .4s ease;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px rgba(0,0,0,.06)}
.product-viewer[data-product-viewer] .product-stage{position:absolute;inset:0;aspect-ratio:auto;max-width:none;margin:0;border:0;border-radius:0;background:transparent}
.product-viewer[data-product-viewer] .product-stage img,.product-viewer[data-product-viewer] .product-stage canvas{inset:28px 20px auto 20px;height:calc(100% - var(--dock-h) - 92px);width:calc(100% - 40px)}
.product-viewer[data-product-viewer] .product-stage:focus-visible{outline:2px solid #151515;outline-offset:-4px}
.product-viewer[data-product-viewer] .product-viewer-hint{position:absolute;z-index:3;left:50%;bottom:calc(var(--dock-h) + 30px);transform:translateX(-50%);margin:0;white-space:nowrap;pointer-events:none;color:#4a4a46;font:400 12.5px/1.35 'DM Sans',sans-serif;text-shadow:0 0 6px var(--stage-bg),0 0 2px var(--stage-bg);transition:opacity .35s ease,visibility 0s linear .35s}
.product-viewer[data-product-viewer].is-touched .product-viewer-hint{opacity:0;visibility:hidden}
.product-viewer[data-product-viewer] .product-views{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);margin:0;padding:6px;display:block;border:1px solid rgba(0,0,0,.07);border-radius:18px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 14px 44px rgba(0,0,0,.13),0 1px 0 rgba(255,255,255,.7) inset}
.product-viewer[data-product-viewer] .product-view-label{display:none}
.product-viewer[data-product-viewer] .product-view-rows{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px}
.product-viewer[data-product-viewer] .product-view-row{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.product-viewer[data-product-viewer] .product-view-row+.product-view-row{padding-left:12px;border-left:1px solid rgba(0,0,0,.1)}
.product-viewer[data-product-viewer] .product-view-group{min-width:0;padding:0 5px 0 7px;font:500 10.5px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6a66;white-space:nowrap}
.product-viewer[data-product-viewer] .product-view-group:empty{display:none}
.product-viewer[data-product-viewer] .product-views button{min-height:36px;padding:8px 14px;border:0;border-radius:12px;background:transparent;color:#33332f;font:500 13px/1.2 'DM Sans',sans-serif;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.product-viewer[data-product-viewer] .product-views button:hover{background:rgba(0,0,0,.06);border-color:transparent}
.product-viewer[data-product-viewer] .product-views button[aria-pressed="true"]{background:#151515;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.product-viewer[data-product-viewer] .product-views button:focus-visible{outline:2px solid #151515;outline-offset:2px}
.product-legacy-viewer[data-product-viewer]{max-width:460px}
@media(max-width:900px){.product-viewer[data-product-viewer]{max-width:none;width:100%}}
@media(max-width:760px){
 .product-hero>.product-viewer[data-product-viewer]{width:auto;margin:0 calc(-1 * clamp(16px,4vw,56px));border-radius:0;aspect-ratio:4/5;box-shadow:none}
 .product-viewer[data-product-viewer] .product-stage img,.product-viewer[data-product-viewer] .product-stage canvas{inset:16px 8px auto 8px;width:calc(100% - 16px);height:calc(100% - var(--dock-h) - 70px)}
 .product-viewer[data-product-viewer] .product-viewer-hint{bottom:calc(var(--dock-h) + 22px);font-size:12px}
 .product-viewer[data-product-viewer] .product-views{bottom:10px;width:calc(100% - 20px);max-width:none;padding:5px}
 .product-viewer[data-product-viewer] .product-view-rows{flex-direction:column;flex-wrap:nowrap;gap:4px}
 .product-viewer[data-product-viewer] .product-view-row{display:flex;flex-wrap:nowrap}
 .product-viewer[data-product-viewer] .product-view-row+.product-view-row{padding:4px 0 0;border-left:0;border-top:1px solid rgba(0,0,0,.07)}
 .product-viewer[data-product-viewer] .product-view-group{flex:none;width:78px;box-sizing:border-box}
 .product-viewer[data-product-viewer] .product-view-row{overflow-x:auto;scrollbar-width:none}
 .product-viewer[data-product-viewer] .product-view-row::-webkit-scrollbar{display:none}
 .product-viewer[data-product-viewer] .product-view-row.is-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:16px}
 .product-viewer[data-product-viewer] .product-views button{flex:1 0 auto;padding:8px 12px}
}
@media(max-width: 0px){.product-viewer[data-product-viewer],.product-viewer[data-product-viewer] .product-viewer-hint{transition:none}}

/* Legacy: measured test 9 (legacy) vs. test 10 (five-fan) beside the what-changed table (owner 2026-10-04). */
.product-legacy-tested{width:100%;margin-top:26px;border-collapse:collapse;font:400 14px/1.5 'DM Sans',sans-serif;color:#2c2b29}
.product-legacy-tested caption{text-align:left;margin:0 0 10px;font:300 26px/1.1 'Cormorant Garamond',serif;color:#151515}
.product-legacy-tested th,.product-legacy-tested td{padding:10px 12px 10px 0;border-bottom:1px solid #e1ddd5;text-align:left;vertical-align:top;white-space:nowrap}
.product-legacy-tested thead th{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6862;white-space:normal}
.product-legacy-tested tbody th{font:500 13px/1.5 'DM Sans',sans-serif;color:#151515;white-space:normal}
.product-legacy-tested td:nth-of-type(1){color:#6b6862}
.product-legacy-tested td:last-child strong{color:#1e3346}
.product-legacy-note{margin:10px 0 0;font:400 12px/1.6 'DM Sans',sans-serif;color:#6b6862}

/* Airflow pause/play (product-viewer-v7): airflow views loop on their own; light frosted twin of the hero video's
   pause button, top right of the stage. */
.product-air-toggle{position:absolute;top:14px;right:14px;z-index:4;width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(21,21,21,.12);border-radius:50%;background:rgba(255,255,255,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 16px rgba(0,0,0,.08);color:#151515;cursor:pointer;transition:background .2s,border-color .2s}
.product-air-toggle:hover{background:rgba(255,255,255,.9);border-color:rgba(21,21,21,.24)}
.product-air-toggle:focus-visible{outline:2px solid #151515;outline-offset:3px}
.product-air-toggle svg{width:16px;height:16px}
.product-air-toggle .motion-play{display:none;transform:translateX(1px)}
.product-air-toggle[aria-pressed="true"] .motion-play{display:block}
.product-air-toggle[aria-pressed="true"] .motion-pause{display:none}
.product-air-toggle[hidden]{display:none}

/* Wide-screen layout (owner 2026-10-06: put the dark side bars to use). The light page now runs edge to edge; from
   1500 px a sticky collection browser sits on the left and an "On this page" index with previous / next design on the
   right. Below 1500 px the rails are hidden and the page is as before. No lift on hover (house rule). */
.page-product main{max-width:none}
.product-center{max-width:1168px;margin:0 auto;min-width:0}
.product-rail{display:none}
.product-page>header,.product-page>section{scroll-margin-top:calc(var(--nav-h,76px) + 24px)}
@media (min-width:1500px){
 .product-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1168px) minmax(0,1fr);column-gap:clamp(36px,3.2vw,72px);align-items:start}
 .product-center{margin:0;max-width:none;width:100%}
 .product-rail{display:block;position:sticky;top:calc(var(--nav-h,76px) + 28px);max-height:calc(100vh - var(--nav-h,76px) - 56px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(21,21,21,.18) transparent}
 .product-rail-browse{justify-self:end;width:min(264px,100%)}
 .product-rail-page{justify-self:start;width:min(264px,100%)}
}
.rail-inner{padding:2px 4px 28px;font-family:'DM Sans',sans-serif}
.rail-eyebrow{margin:0 0 16px;padding-left:8px;font:500 11px/1.4 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}
.rail-eyebrow a{color:#151515;text-decoration:none;letter-spacing:.02em;text-transform:none;font-size:13px;border-bottom:1px solid transparent;transition:border-color .2s}
.rail-eyebrow a:hover{border-color:currentColor}
.product-rail ul{list-style:none;margin:0;padding:0}
.rail-group{margin:0 0 18px}
.rail-group-name{margin:0 0 6px;padding-left:8px;font:500 10.5px/1.4 'DM Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#6b675f}
.product-rail-browse li a{display:flex;align-items:center;gap:11px;padding:5px 8px;border-radius:11px;color:#3a3833;text-decoration:none;font:400 13.5px/1.25 'DM Sans',sans-serif;transition:background-color .2s,color .2s,box-shadow .2s}
.product-rail-browse li a:hover{background:rgba(21,21,21,.05);color:#151515}
.product-rail-browse li a:focus-visible,.rail-toc a:focus-visible,.rail-step:focus-visible,.rail-all:focus-visible{outline:2px solid #151515;outline-offset:2px}
.product-rail-browse li a[aria-current="page"]{background:#fff;color:#151515;font-weight:500;box-shadow:0 0 0 1px rgba(21,21,21,.08),0 6px 18px rgba(0,0,0,.05)}
.rail-thumb{flex:none;width:38px;height:38px;border-radius:9px;background:#fbfbfa;box-shadow:inset 0 0 0 1px rgba(21,21,21,.06);overflow:hidden}
.rail-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.rail-toc ul{border-left:1px solid rgba(21,21,21,.12)}
.rail-toc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:2px solid transparent;color:#6b675f;text-decoration:none;font:400 14px/1.35 'DM Sans',sans-serif;transition:color .2s,border-color .2s}
.rail-toc a:hover{color:#151515}
.rail-toc a.is-current{color:#151515;font-weight:500;border-left-color:#151515}
.rail-steps{display:grid;gap:10px;margin-top:30px}
.rail-step{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:14px;background:#fff;border:1px solid rgba(21,21,21,.08);color:#151515;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.rail-step:hover{border-color:rgba(21,21,21,.22);box-shadow:0 10px 26px rgba(0,0,0,.07)}
.rail-step .rail-thumb{width:54px;height:54px;border-radius:11px}
.rail-step-label{display:block;margin-bottom:3px;font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#6b675f}
.rail-step .rail-name{display:block;font:500 13.5px/1.3 'DM Sans',sans-serif}
.rail-all{display:inline-block;margin:20px 0 0 8px;font:500 13px/1.4 'DM Sans',sans-serif;color:#151515;text-decoration:underline;text-underline-offset:3px}
@media (min-width:1500px){
 /* The design list scrolls inside its rail on shorter screens: soft fade at the edges instead of a hard cut. */
 .product-rail-browse{-webkit-mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(transparent,#000 16px,#000 calc(100% - 36px),transparent)}
 .product-rail-browse .rail-inner{padding-top:16px}
 .product-rail-browse{top:calc(var(--nav-h,76px) + 12px)}
 .product-rail-browse li a{padding-top:4px;padding-bottom:4px}
 .rail-group{margin-bottom:14px}
}

/* Q13 (product-viewer-v9): reserve the dock's height before the script measures it (it then publishes the exact
   --dock-h). Desktop: one line (50 px) unless four or more choices wrap to two (about 90 px); phones stack one row per
   group (48 px + 45 px per extra row). */
.product-viewer[data-product-viewer]{--dock-h:50px}
@media(min-width:901px){.product-viewer[data-product-viewer]:has(.product-views button:nth-of-type(4)),.product-viewer[data-product-viewer]:has(.product-view-row:nth-child(2) button:nth-of-type(2)){--dock-h:90px}}
@media(max-width:760px){
 .product-viewer[data-product-viewer]{--dock-h:48px}
 .product-viewer[data-product-viewer]:has(.product-view-row:nth-child(2)){--dock-h:93px}
 .product-viewer[data-product-viewer]:has(.product-view-row:nth-child(3)){--dock-h:138px}
}
.product-viewer[data-product-viewer]:not(:has(.product-views)){--dock-h:0px}

/* W3 (product-viewer-v9): while autoplay buffers after a stall, a thin ring on the pause/play button fills as the next
   sheets become ready. */
.product-air-toggle .motion-buffer{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);fill:none;stroke:#151515;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:4 100;opacity:0;transition:opacity .25s ease,stroke-dasharray .3s ease;pointer-events:none}
.product-air-toggle.is-buffering .motion-buffer{opacity:.85}

/* W5 (product-viewer-v9): "See it in 3D" on step cards whose drawing is an installation stage. Quiet chip; colour and
   border change on hover, no lift. */
.install-step-copy .step-3d{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:32px;margin-top:12px;padding:0 13px 0 10px;border:1px solid rgba(21,21,21,.16);border-radius:999px;background:rgba(255,255,255,.7);color:#33332f;font:500 12.5px/1 'DM Sans',sans-serif;letter-spacing:.01em;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.install-step-copy .step-3d svg{width:15px;height:15px;flex:none}
.install-step-copy .step-3d:hover{border-color:rgba(21,21,21,.42);background:#fff;color:#151515}
.install-step-copy .step-3d:focus-visible{outline:2px solid #151515;outline-offset:2px}
@media(max-width:680px){.install-step-copy .step-3d{grid-column:1;margin-top:4px;min-height:36px}}

/* W10: very wide screens (>= 1900 px) give the design more room: a wider centre column and a 55 % studio. */
@media (min-width:1900px){
 .product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1400px) minmax(0,1fr)}
 .product-hero{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
}
/* /assets/creations/product-page-extras-v1.css */
/* [creations] product pages, 2026-10-06 (owner: "the product pages should be maximalism", with the house design and
   documented facts only): wayfinding at every width, a sticky action bar, customer reviews and large test figures.
   Loaded after product-page-v1.css. No hover lift (house rule): hovers change border, shadow or colour only. */

/* 1100-1499 px: the "On this page" index + previous / next sits in the right column (the browse rail stays >= 1500 px). */
@media (min-width:1100px) and (max-width:1499.98px){
 .product-layout{display:grid;grid-template-columns:minmax(0,1fr) 216px;column-gap:clamp(32px,3.4vw,52px);max-width:1440px;margin:0 auto;align-items:start}
 .product-center{margin:0;max-width:none;width:100%}
 .product-rail-page{display:block;position:sticky;top:calc(var(--nav-h,76px) + 28px);max-height:calc(100vh - var(--nav-h,76px) - 56px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(21,21,21,.18) transparent}
 .product-rail-page .rail-steps{margin-top:26px}
 .product-rail-page .rail-step{padding:8px 10px 8px 8px;gap:10px}
 .product-rail-page .rail-step .rail-thumb{width:46px;height:46px}
 .product-rail-page .rail-step .rail-name{font-size:13px}
}

/* Below 1100 px: previous / next design after "More in ...". */
.product-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(28px,5vw,44px)}
.product-pager .rail-step{min-width:0}
.product-pager .rail-step>span:last-child{min-width:0}
.product-pager .rail-step:last-child{flex-direction:row-reverse;text-align:right;padding:10px 10px 10px 12px}
@media (min-width:1100px){.product-pager{display:none}}
@media (max-width:420px){.product-pager .rail-step{flex-direction:column;align-items:flex-start;text-align:left}.product-pager .rail-step:last-child{flex-direction:column;align-items:flex-end;text-align:right}}

/* Phones and tablets: slim sticky section bar under the header, after the hero. Quiet baseline tabs, active underline. */
.product-sectionbar{display:none}
@media (max-width:1099.98px){
 .product-sectionbar{display:block;position:fixed;z-index:900;left:0;right:0;top:var(--bar-top,64px);background:rgba(247,246,243,.9);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(21,21,21,.09);box-shadow:0 8px 24px rgba(0,0,0,.05);transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
 .product-sectionbar.is-shown{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease,transform .25s ease}
 .product-sectionbar ul{display:flex;gap:2px;margin:0 auto;padding:0 clamp(10px,3vw,40px);max-width:1168px;list-style:none;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 22px),transparent)}
 .product-sectionbar ul::-webkit-scrollbar{display:none}
 .product-sectionbar li{flex:none}
 .product-sectionbar a{position:relative;display:block;padding:13px 12px 12px;font:500 13px/1 'DM Sans',sans-serif;letter-spacing:.01em;color:#6b675f;text-decoration:none;white-space:nowrap;transition:color .2s}
 .product-sectionbar a:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:#151515;transform:scaleX(0);transition:transform .25s ease}
 .product-sectionbar a:hover{color:#151515}
 .product-sectionbar a.is-current{color:#151515}
 .product-sectionbar a.is-current:after{transform:scaleX(1)}
 .product-sectionbar a:focus-visible{outline:2px solid #151515;outline-offset:-4px;border-radius:6px}
 .product-page [id]{scroll-margin-top:calc(var(--nav-h,76px) + 64px)}
}
.product-sectionbar[hidden]{display:none}

/* Sticky action bar (below 1500 px): phones full width at the bottom; wider screens a floating frosted pill. */
.product-actionbar{position:fixed;z-index:880;left:0;right:0;bottom:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(250,249,246,.92);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-top:1px solid rgba(21,21,21,.09);box-shadow:0 -10px 30px rgba(0,0,0,.07);transform:translateY(110%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
.product-actionbar.is-shown{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.product-actionbar[hidden]{display:none}
.product-actionbar-inner{display:flex;align-items:center;gap:12px;max-width:640px;margin:0 auto}
.product-actionbar-thumb{flex:none;width:42px;height:42px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(21,21,21,.07);overflow:hidden}
.product-actionbar-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.product-actionbar-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.product-actionbar-title{font:500 14px/1.2 'DM Sans',sans-serif;color:#151515;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-actionbar .stock-badge{margin:0}
.product-actionbar-state{font:500 10.5px/1.3 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6862}
.product-actionbar-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid #555;background:linear-gradient(120deg,#333,#111);color:#fff;font:500 11.5px/1 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:border-color .2s,box-shadow .2s}
.product-actionbar-btn:hover{border-color:#aaa;box-shadow:0 0 0 3px #1515151a}
.product-actionbar-btn:focus-visible{outline:2px solid #151515;outline-offset:3px}
@media (min-width:761px){
 .product-actionbar{left:50%;right:auto;bottom:20px;width:min(600px,calc(100% - 40px));padding:10px 10px 10px 12px;border:1px solid rgba(21,21,21,.1);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.14),0 1px 0 rgba(255,255,255,.7) inset;transform:translate(-50%,calc(100% + 30px))}
 .product-actionbar.is-shown{transform:translate(-50%,0)}
 .product-actionbar-btn{border-radius:12px}
}
@media (min-width:1500px){.product-actionbar{display:none}}
@media (max-width:760px){.page-product main{padding-bottom:calc(clamp(56px,8vw,110px) + 60px)}}
@media (max-width:360px){.product-actionbar-thumb{display:none}.product-actionbar-btn{padding:0 14px}}

/* Shared kicker. */
.pr-kicker{margin:0 0 10px;font:500 11px/1.4 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b675f}

/* Documented test results as large figures (EliteDesk). Icy, like the [creations] Tested tile. */
.product-results{margin-top:clamp(40px,6vw,72px);padding:clamp(26px,4vw,48px);border-radius:26px;background:radial-gradient(120% 140% at 0% 0%,#ffffff 0,#eef4f8 46%,#e2ecf3 100%);border:1px solid #d9e4ec;box-shadow:inset 0 1px 0 #fff}
.product-results .product-section-title{margin-bottom:clamp(20px,3vw,32px)}
.pres-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.4vw,28px)}
.pres-fig{padding:clamp(16px,2vw,24px) 0 0;border-top:1px solid rgba(30,51,70,.18)}
.pres-value{margin:0 0 8px;font:300 clamp(46px,6.2vw,84px)/.95 'DM Sans',sans-serif;letter-spacing:-.04em;color:#1e3346;font-variant-numeric:tabular-nums}
.pres-label{margin:0 0 4px;font:500 15px/1.35 'DM Sans',sans-serif;color:#151515}
.pres-detail{margin:0;font:400 13px/1.5 'DM Sans',sans-serif;color:#556270}
.pres-note{max-width:78ch;margin:clamp(20px,3vw,30px) 0 0;font:400 13px/1.65 'DM Sans',sans-serif;color:#556270}
.pres-note a{color:#1e3346;text-underline-offset:3px}
@media (max-width:760px){.pres-grid{grid-template-columns:1fr;gap:18px}.pres-fig{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:14px;align-items:baseline}.pres-value{grid-row:span 2;font-size:44px;margin:0}.pres-label{align-self:end}.pres-detail{grid-column:2}}

/* Customer reviews (verbatim from the [creations] reviews section): a dark lead review, then cards. */
.product-reviews{margin-top:clamp(52px,7vw,96px);padding-top:clamp(28px,4vw,44px);border-top:1px solid #dcd8d0}
.pr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px)}
.pr-head .product-section-title{margin-bottom:8px}
.pr-intro{margin:0;max-width:52ch;font:400 15px/1.6 'DM Sans',sans-serif;color:#4a4844}
.pr-shop{display:grid;justify-items:end;gap:4px;text-align:right}
.pr-rating{display:flex;align-items:baseline;gap:6px;margin:0 0 6px;font:300 clamp(46px,5vw,64px)/1 'DM Sans',sans-serif;letter-spacing:-.04em;color:#151515}
.pr-rating small{font:400 15px/1 'DM Sans',sans-serif;color:#6b675f}
.pr-rating-label{margin:0;font:400 13px/1.4 'DM Sans',sans-serif;color:#6b6862}
.pr-all{margin-top:6px;font:500 13px/1.4 'DM Sans',sans-serif;color:#151515;text-decoration:underline;text-underline-offset:4px}
.pr-all:hover{text-decoration-thickness:2px}
.pr-card{margin:0;display:flex;flex-direction:column;border:1px solid #e1ddd5;border-radius:16px;background:#faf9f6;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.pr-card:hover{border-color:#9ea7b3;box-shadow:0 0 0 3px #b9c6d633}
.pr-photo{aspect-ratio:1;background:#e9e6df;overflow:hidden}
.pr-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pr-copy{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.pr-stars{display:flex;gap:3px;margin-bottom:12px;color:#8a643d}
.pr-stars svg{width:13px;height:13px}
.pr-card blockquote{margin:0 0 16px;font:400 15px/1.6 'DM Sans',sans-serif;color:#2c2b29}
.pr-card blockquote p{margin:0}
.pr-card blockquote p+p{margin-top:10px}
.pr-card .review-translation span{display:block;margin-bottom:4px;font:500 10px/1.3 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b675f}
.pr-card figcaption{margin-top:auto;display:grid;gap:3px;font:400 12px/1.4 'DM Sans',sans-serif;color:#6b6862}
.pr-card figcaption strong{font:500 14px/1.3 'DM Sans',sans-serif;color:#151515}
.pr-verified{display:flex;align-items:center;gap:5px;color:#4d6b45}
.pr-verified svg{width:13px;height:13px;flex:none}
.pr-lead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border:0;border-radius:24px;background:radial-gradient(130% 120% at 100% 0%,#2a2a28 0,#171716 55%,#0f0f0e 100%);color:#f4f2ee;box-shadow:0 24px 60px rgba(0,0,0,.14)}
.pr-lead:hover{border-color:transparent;box-shadow:0 24px 60px rgba(0,0,0,.14),0 0 0 3px #b9c6d633}
.pr-lead .pr-photo{aspect-ratio:auto;min-height:100%}
.pr-lead .pr-copy{justify-content:center;padding:clamp(26px,4.4vw,60px)}
.pr-lead .pr-stars{color:#f3c75f;margin-bottom:22px}
.pr-lead .pr-stars svg{width:16px;height:16px}
.pr-lead blockquote{margin:0 0 28px;font:300 clamp(24px,2.7vw,36px)/1.25 'Cormorant Garamond',serif;color:#fff;letter-spacing:-.005em}
.pr-lead figcaption{color:#b9b5ad;font-size:13px}
.pr-lead figcaption strong{color:#fff;font-size:16px}
.pr-lead .pr-verified{color:#d8e1d2}
.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px}
/* One to three more reviews: wide cards with the photo beside the words, filling the row. */
.pr-grid.is-few{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.pr-grid.is-few .pr-card{flex-direction:row}
.pr-grid.is-few .pr-photo{flex:0 0 40%;aspect-ratio:auto;min-height:200px}
@media (max-width:760px){
 .pr-head{align-items:flex-start}
 .pr-shop{justify-items:start;text-align:left}
 .pr-lead{grid-template-columns:1fr}
 .pr-lead .pr-photo{aspect-ratio:1}
 .pr-lead .pr-copy{padding:24px 22px 26px}
 .pr-grid{grid-auto-flow:column;grid-auto-columns:min(78%,300px);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:16px calc(-1 * clamp(16px,4vw,56px)) 0;padding:0 clamp(16px,4vw,56px) 4px;scroll-padding:0 clamp(16px,4vw,56px)}
 .pr-grid::-webkit-scrollbar{display:none}
 .pr-grid .pr-card{scroll-snap-align:start}
 .pr-grid.is-few{grid-template-columns:none}
 .pr-grid.is-few .pr-card{flex-direction:column}
 .pr-grid.is-few .pr-photo{flex:none;aspect-ratio:1;min-height:0}
}

/* Phones: "More in ..." as one sideways row (three full-width cards pushed the next design far down). */
@media (max-width:760px){
 .product-related ul{grid-auto-flow:column;grid-auto-columns:min(62%,240px);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * clamp(16px,4vw,56px));padding:0 clamp(16px,4vw,56px) 4px;scroll-padding:0 clamp(16px,4vw,56px)}
 .product-related ul::-webkit-scrollbar{display:none}
 .product-related li{scroll-snap-align:start}
 .product-actionbar-btn{padding:0 14px;font-size:11px;letter-spacing:.08em}
}

/* 2026-10-07 (audit B2, B27k, Q3, W7, W9, W10). */
/* Review stars: the rating as given on Etsy; unfilled stars stay as dim outlines. */
.pr-stars .pr-star-dim{opacity:.55}
/* Step titles are h3 on product pages (under the h2 section titles); same look as Help's h4. */
.help-answer .install-step-copy h3{margin:0 0 4px;font:500 16px/1.35 "DM Sans",sans-serif;color:#232622;letter-spacing:-.005em}

/* "From the Workbench": up to three stories about this design, quiet rows like the rail's design cards. */
.product-stories{margin-top:clamp(52px,7vw,96px);padding-top:clamp(28px,4vw,44px);border-top:1px solid #dcd8d0}
.pw-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.pw-all{font:500 13px/1.4 'DM Sans',sans-serif;color:#151515;text-decoration:underline;text-underline-offset:4px}
.pw-all:hover{text-decoration-thickness:2px}
.pw-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.pw-list a{display:flex;align-items:center;gap:14px;height:100%;padding:10px 14px 10px 10px;border:1px solid #e1ddd5;border-radius:14px;background:#faf9f6;color:#151515;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.pw-list a:hover{border-color:#9ea7b3;box-shadow:0 0 0 3px #b9c6d633}
.pw-list a:focus-visible{outline:2px solid #151515;outline-offset:2px}
.pw-thumb{flex:none;width:76px;height:76px;border-radius:10px;background:#f6f6f5;overflow:hidden}
.pw-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pw-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.pw-tag{font:500 10px/1.4 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6862}
.pw-title{font:500 15px/1.3 'DM Sans',sans-serif;color:#151515}
.pw-date{font:400 12px/1.3 'DM Sans',sans-serif;color:#6b6862}
@media (max-width:760px){
 .pw-list{grid-auto-flow:column;grid-auto-columns:min(82%,320px);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * clamp(16px,4vw,56px));padding:0 clamp(16px,4vw,56px) 4px;scroll-padding:0 clamp(16px,4vw,56px)}
 .pw-list::-webkit-scrollbar{display:none}
 .pw-list li{scroll-snap-align:start}
}

/* "More in <Category>" shows the whole category (phones: the sideways row above). */
@media (min-width:761px){.product-related ul{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}

/* PCIe fan mounts: the fan-mount comparison in place of "More in Cooling" (base styles shared with [creations]). */
.product-fan-compare{margin-top:clamp(52px,7vw,96px);padding-top:clamp(28px,4vw,44px);border-top:1px solid #dcd8d0}
.product-fan-compare .fan-visual-comparison{margin:8px 0 28px}
.product-fan-compare .fan-compare-pair{gap:clamp(16px,4vw,48px)}
/* Square render feathered into the page (no box). */
.product-fan-compare .fan-compare-side img{display:block;width:100%;max-width:100%;height:clamp(150px,22vw,280px);margin:0 auto;object-fit:contain;background:none;border-radius:0}
.product-fan-compare .fan-compare-side h3{font:500 17px/1.35 'DM Sans',sans-serif}
.product-fan-compare .fan-comparison{margin:0 0 16px}
.product-fan-compare .fan-comparison tr.is-current th,.product-fan-compare .fan-comparison tr.is-current td{background:#fff;font-weight:500}
.product-fan-compare .fan-comparison tr.is-current th a{text-decoration:none}
.product-fan-compare .fan-compare-intro a{color:#151515;text-underline-offset:4px}
@media (max-width:760px){.product-fan-compare .fan-comparison table{min-width:520px}}

/* 1500-1899 px: the side rails keep a readable width (design names wrapped one word per line at ~100 px); the centre
   gives way instead. */
@media (min-width:1500px) and (max-width:1899.98px){
 .product-layout{grid-template-columns:minmax(220px,1fr) minmax(0,1168px) minmax(220px,1fr)}
}

/* Very wide screens (>= 1900 px): wider content and a larger model stage. */
@media (min-width:1900px){
 .product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1400px) minmax(0,1fr)}
 .product-hero{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
}

/* 2026-10-09: hero hierarchy, fit checklist, phone form. No hover lift (house rule). */
/* Phones stack the notify field over its button: flex:1 in a column turned the field's 46 px into its content height. */
@media (max-width:560px){.product-notify input[type=email]{flex:none;width:100%;box-sizing:border-box}}
/* Desktop: the studio stays in view while a long summary (EliteDesk) is read beside it; a short summary centres on it. */
@media (min-width:901px){
 .product-hero{align-items:start}
 .product-hero>.product-viewer[data-product-viewer]{position:sticky;top:calc(var(--nav-h,76px) + 24px)}
 .product-hero>.product-summary{align-self:center}
}
/* The main action follows the description; the note (fit caveats, test summary) and material line sit below it as
   small print, divided from the actions by a hairline. */
.product-hero .product-actions{margin:20px 0 16px}
.product-hero .product-note{margin:22px 0 12px;padding-top:18px;border-top:1px solid #e1ddd5}
/* Shortcuts to what this page documents: same quiet chip as "See it in 3D" (colour and border change on hover). */
.product-jumps{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px;padding:0;list-style:none}
.product-jumps a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px 0 10px;border:1px solid rgba(21,21,21,.16);border-radius:999px;background:rgba(255,255,255,.7);color:#33332f;font:500 12.5px/1 'DM Sans',sans-serif;letter-spacing:.01em;text-decoration:none;transition:border-color .2s,background-color .2s,color .2s}
.product-jumps a:hover{border-color:rgba(21,21,21,.42);background:#fff;color:#151515}
.product-jumps a:focus-visible{outline:2px solid #151515;outline-offset:2px}
.product-jumps svg{width:15px;height:15px;flex:none}
@media (max-width:560px){.product-jumps a{min-height:38px}}
/* "Before you order" as a checklist, beside the overview drawing when the design has one. */
.product-fit{margin:0 0 34px}
.product-fit.has-figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
.product-guide .help-answer .product-fit-list{max-width:72ch;margin:0;padding:0;list-style:none;display:grid;gap:12px}
.product-fit-list li{position:relative;padding-left:30px}
.product-fit-list li:before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:#151515 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.product-fit .fit-illustration{margin:0}
@media (max-width:900px){.product-fit.has-figure{grid-template-columns:1fr}}

/* Rounded buttons (owner 2026-10-09: the brand language is rounded corners). The page's action buttons take the radius of the
   site's other rectangular UI buttons (header CTA, search bar, Contact submit and fields, the [creations] notify sheet): 8 px.
   The notify email field and its button are one pair, so the field takes the same radius. */
.product-buy,.product-notify button,.product-notify input[type=email],.product-actionbar-btn{border-radius:8px}

/* Made-to-order product pages (2026-10-10): "The project" case study (the brief, how it came together, what we made,
   the customer's words) beside a dated track from request to delivery; kraft accents from the [creations] Made to
   order section. The custom badge uses the kraft tag colour. */
.product-custom-badge{background:#f1e2c8;color:#3a2816;border-color:#c9a27399}
.product-custom-badge .stock-dot{background:#b18656;box-shadow:none}
.product-case{padding-top:clamp(36px,4vw,56px);border-top:1px solid #1515151a}
.product-case-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:start;margin-top:22px}
.product-case-copy,.product-case-side{display:grid;gap:10px;min-width:0}
.product-case h3{margin:14px 0 0;font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b6f74}
.product-case h3:first-child{margin-top:0}
.product-case p{margin:0;max-width:64ch;font:400 16px/1.68 "DM Sans",sans-serif;color:#33363a}
.product-case-specs{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0;border-top:1px solid #1515151a}
.product-case-specs dt,.product-case-specs dd{margin:0;padding:9px 0;border-bottom:1px solid #1515151a;font:400 14px/1.45 "DM Sans",sans-serif}
.product-case-specs dt{padding-right:20px;padding-top:11px;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b6f74}
.product-case-specs dd{color:#1d1d1f;font-variant-numeric:tabular-nums}
.product-case-quote{margin:10px 0 0;padding:4px 0 0 18px;border-left:2px solid #1d1d1f}
.product-case-quote p{font:italic 400 clamp(21px,1.9vw,25px)/1.3 "Cormorant Garamond",Georgia,serif;color:#1d1d1f}
.product-case-quote span{display:block;margin-top:6px;font:400 13px/1.4 "DM Sans",sans-serif;color:#6b6f74}
.product-case-side{padding:24px;border-radius:14px;background:repeating-linear-gradient(90deg,#0000 0 6px,#6b4a260d 6px 7px,#0000 7px 11px),linear-gradient(170deg,#f6ecdc,#efe2cc);border:1px solid #c9a27359}
.product-case-track{margin:4px 0 0 5px;padding:0;list-style:none;border-left:1px solid #3a281640}
.product-case-track li{position:relative;display:grid;gap:3px;padding:0 0 16px 20px}
.product-case-track li::before{content:"";position:absolute;left:-6px;top:3px;width:11px;height:11px;border-radius:50%;border:1.5px solid #3a2816;background:#f6ecdc;box-sizing:border-box}
.product-case-track li:last-child{padding-bottom:4px}
.product-case-track li:last-child::before{background:#3a2816}
.product-case-track time{font:500 11px/1.2 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b5236;font-variant-numeric:tabular-nums}
.product-case-track span{font:400 14px/1.45 "DM Sans",sans-serif;color:#2b1d10}
.product-case-success{margin-top:6px!important;padding-top:12px;border-top:1px dashed #3a281640;font:600 14px/1.4 "DM Sans",sans-serif!important;color:#8f2f22!important}
.product-case-rel{display:grid;gap:3px;padding:11px 14px;border:1px solid #3a281633;border-radius:12px;background:#fffaf2;color:#2b1d10;text-decoration:none;font:500 14px/1.3 "DM Sans",sans-serif;transition:border-color .2s}
.product-case-rel span{font:500 10.5px/1.2 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b5236}
.product-case-rel:hover{border-color:#2b1d10}
.product-case-more{color:#2b1d10;font:500 14px/1.4 "DM Sans",sans-serif;text-decoration:underline;text-decoration-color:#2b1d1066;text-underline-offset:4px}
.product-case-rel:focus-visible,.product-case-more:focus-visible{outline:2px solid #2b1d10;outline-offset:3px}
@media (max-width:900px){.product-case-grid{grid-template-columns:minmax(0,1fr)}}
/* Made-to-order pages: reviews as text only (customer photos of custom pieces stay on Work with us). */
.pr-lead.pr-text-only{grid-template-columns:minmax(0,1fr)}
.pr-lead.pr-text-only .pr-copy{max-width:72ch}

/* Owner audit 2026-10-11 (product pages, items 2, 5, 6, 8, 9). */
/* 2 + 8: reviews, "More in ..." and "From the Workbench" are one sideways row at every width (phones already were);
   product-page-v6.js adds previous / next buttons above the row (wider screens, only when it overflows) and
   data-more for soft edges where cards are hidden. One to three extra reviews keep their wide cards (.is-few). */
@media (min-width:761px){
 .pr-grid:not(.is-few),.product-related ul,.pw-list{grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
 .pr-grid:not(.is-few)::-webkit-scrollbar,.product-related ul::-webkit-scrollbar,.pw-list::-webkit-scrollbar{display:none}
 .pr-grid:not(.is-few){grid-auto-columns:minmax(220px,calc((100% - 48px) / 4))}
 .product-related ul{grid-auto-columns:minmax(180px,calc((100% - 56px) / 5))}
 .pw-list{grid-auto-columns:minmax(280px,calc((100% - 28px) / 3))}
 .pr-grid:not(.is-few)>*,.product-related li,.pw-list li{scroll-snap-align:start}
 .pp-strip[data-more="end"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
 .pp-strip[data-more="start"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
 .pp-strip[data-more="start end"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
}
.pp-strip-nav{display:flex;justify-content:flex-end;gap:8px;margin:14px 0 10px}
.pp-strip-nav[hidden]{display:none}
.pp-strip-step{display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:1px solid #15151526;border-radius:50%;background:#fafaf8;color:#1f2020;cursor:pointer;transition:background-color .2s,border-color .2s,opacity .2s}
.pp-strip-step svg{width:18px;height:18px}
.pp-strip-step:hover:not(:disabled){background:#fff;border-color:#15151566}
.pp-strip-step:focus-visible{outline:2px solid #1f2020;outline-offset:3px}
.pp-strip-step:disabled{opacity:.38;cursor:default}
@media (max-width:760px){.pp-strip-nav{display:none}}
.pr-grid.pp-strip{margin-top:0}
.product-related .pp-strip-nav{margin-top:-6px}

/* 5: one button style. Primary labels in sentence case like every other button; "Notify me" becomes the same
   rounded button with the filled circle (right arrow: it sends the form); the legacy fold-out carries the filled circle too (down toward
   the fold-out). The step-by-step button's circle comes from step-viewer CSS (Help thread, 2026-10-11). */
html body .product-buy,html body a.product-actionbar-btn{font-size:14px;letter-spacing:0;text-transform:none}
.product-notify input[type=email]{border-radius:12px}
.product-notify button{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 54px 0 20px;border-radius:12px;font-size:14px;letter-spacing:0;text-transform:none}
.product-notify button::after,.product-legacy-cta::after{content:"";position:absolute;top:50%;right:7px;translate:0 -50%;width:32px;height:32px;border-radius:50%;background:currentColor;-webkit-mask:var(--pp-circle) center/100% 100% no-repeat;mask:var(--pp-circle) center/100% 100% no-repeat}
.product-notify button{--pp-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 16h14'/%3E%3Cpath d='M17 10l6 6-6 6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E")}
.product-legacy-cta{--pp-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cmask id='m'%3E%3Crect width='32' height='32' fill='white'/%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 9v14'/%3E%3Cpath d='M10 17l6 6 6-6'/%3E%3C/g%3E%3C/mask%3E%3Ccircle cx='16' cy='16' r='16' fill='white' mask='url(%23m)'/%3E%3C/svg%3E");position:relative;min-height:46px;box-sizing:border-box;padding:12px 54px 12px 18px;border:1px solid #15151557;border-radius:12px;background:#1515150f;font-size:14px;letter-spacing:0;text-transform:none}
.product-legacy-cta::after{margin:0;border:0;transform:none;transition:rotate .2s}
.product-legacy-fold[open] .product-legacy-cta::after{margin:0;transform:none;rotate:180deg}
.product-legacy-fold>summary:hover .product-legacy-cta{border-color:#151515b3;background:#1515151c}

/* 6: tablets in portrait (761-900 px): the studio and the details side by side, like 1024 px, so the name and the
   main action are on the first screen. */
@media (min-width:761px) and (max-width:900px){
 .product-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
 .product-hero>.product-viewer[data-product-viewer]{position:sticky;top:calc(var(--nav-h,76px) + 16px)}
 .product-hero .product-title{font-size:clamp(30px,4.4vw,38px)}
}

/* 9: designs with grouped views (EliteDesk: Explore / Fan layout) stack their rows on one left edge, with a fixed
   label column, at every width (phones already did); single-row docks are unchanged. */
@media (min-width:761px){
 .product-viewer[data-product-viewer] .product-view-rows:has(.product-view-row+.product-view-row){flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:4px}
 .product-viewer[data-product-viewer] .product-view-row+.product-view-row{padding:4px 0 0;border-left:0;border-top:1px solid rgba(0,0,0,.07)}
 .product-viewer[data-product-viewer] .product-view-rows:has(.product-view-row+.product-view-row) .product-view-row{flex-wrap:nowrap}
 .product-viewer[data-product-viewer] .product-view-rows:has(.product-view-row+.product-view-row) .product-view-group{flex:none;width:86px;box-sizing:border-box}
}
@media (min-width:761px) and (max-width:900px){
 .product-viewer[data-product-viewer]:has(.product-view-row:nth-child(2)){--dock-h:93px}
 .product-viewer[data-product-viewer]:has(.product-view-row:nth-child(3)){--dock-h:138px}
}
@media (min-width:761px) and (max-width:900px){
 .product-viewer[data-product-viewer] .product-views{width:calc(100% - 20px);max-width:none;padding:5px}
 .product-viewer[data-product-viewer] .product-view-row{overflow-x:auto;scrollbar-width:none}
 .product-viewer[data-product-viewer] .product-view-row::-webkit-scrollbar{display:none}
 .product-viewer[data-product-viewer] .product-view-row.is-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:16px}
}
/* Short review row on phones: a keyboard stop while it overflows (product-page-v7.js); ring drawn inside the strip. */
.pr-grid.is-few:focus-visible{outline:2px solid #1f2020;outline-offset:-2px;border-radius:12px}