/* ==========================================================================
   Shayish VaEtz — material board
   Plum ink + dusty rose on warm marble paper. RTL-first, logical properties.
   ========================================================================== */

/* ---- Fonts (self-hosted) ---------------------------------------------- */
@font-face { font-family: "Heebo"; src: url(../fonts/heebo-hebrew.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; src: url(../fonts/heebo-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; 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: "Bellefair"; src: url(../fonts/bellefair-hebrew.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Bellefair"; src: url(../fonts/bellefair-latin.woff2) format("woff2"); font-weight: 400; font-display: swap; 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: "David Libre"; src: url(../fonts/david-libre-hebrew-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "David Libre"; src: url(../fonts/david-libre-latin-700.woff2) format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD; }

/* ---- Tokens ------------------------------------------------------------- */
:root {
    --sv-plum: #6D597A;
    --sv-plum-deep: #4E3F58;
    --sv-rose: #B56576;
    --sv-rose-ink: #96485A;      /* rose for small text: 5.9:1 on paper */
    --sv-rose-pale: #F1DEE2;
    --sv-oak: #C9A27E;
    --sv-sage: #9AA58E;

    --sv-paper: #FBF8F7;
    --sv-surface: #FFFFFF;
    --sv-marble: #F3EEEF;
    --sv-tint: #F4EEF1;
    --sv-ink: #2B2230;
    --sv-ink-soft: #5B4F61;
    --sv-line: #E2D8DC;
    --sv-line-strong: #CBBDC4;
    --sv-link: var(--sv-plum);
    --sv-focus: #B56576;
    --sv-shadow: 0 1px 2px rgb(43 34 48 / .06), 0 8px 24px -12px rgb(43 34 48 / .18);

    --sv-font: "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
    --sv-display: "Bellefair", "Times New Roman", serif;
    --sv-logo: "David Libre", "Bellefair", serif;

    --sv-wrap: 1200px;
    --sv-gutter: clamp(16px, 4vw, 40px);
    --sv-radius: 4px;
    color-scheme: light;
}

:root[data-mode="dark"] {
    --sv-paper: #1F1923;
    --sv-surface: #29222E;
    --sv-marble: #2D2632;
    --sv-tint: #251E2A;
    --sv-ink: #EEE7EF;
    --sv-ink-soft: #C2B5C6;
    --sv-line: #3D3443;
    --sv-line-strong: #54485B;
    --sv-link: #D9C4E4;
    --sv-rose-ink: #EBA9B8;
    --sv-rose-pale: #3A2731;
    --sv-focus: #EBA9B8;
    --sv-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 26px -12px rgb(0 0 0 / .6);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) {
        --sv-paper: #1F1923;
        --sv-surface: #29222E;
        --sv-marble: #2D2632;
        --sv-tint: #251E2A;
        --sv-ink: #EEE7EF;
        --sv-ink-soft: #C2B5C6;
        --sv-line: #3D3443;
        --sv-line-strong: #54485B;
        --sv-link: #D9C4E4;
        --sv-rose-ink: #EBA9B8;
        --sv-rose-pale: #3A2731;
        --sv-focus: #EBA9B8;
        --sv-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 10px 26px -12px rgb(0 0 0 / .6);
        color-scheme: dark;
    }
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
    margin: 0;
    background: var(--sv-paper);
    color: var(--sv-ink);
    font-family: var(--sv-font);
    font-size: 1.0625rem;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--sv-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--sv-rose-ink); }
:focus-visible { outline: 3px solid var(--sv-focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--sv-display); font-weight: 400; line-height: 1.2; margin: 0; color: var(--sv-ink); letter-spacing: 0; }
p { margin: 0 0 1em; }
button { font: inherit; }
.sv-icon { flex: none; vertical-align: middle; }

.sv-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sv-skip {
    position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100;
    background: var(--sv-plum); color: #fff; padding: 10px 18px; border-radius: var(--sv-radius); text-decoration: none; font-weight: 600;
}
.sv-skip:focus { inset-block-start: 12px; color: #fff; }

.sv-wrap { inline-size: 100%; max-inline-size: calc(var(--sv-wrap) + 2 * var(--sv-gutter)); margin-inline: auto; padding-inline: var(--sv-gutter); }
.sv-wrap--mid { max-inline-size: calc(1000px + 2 * var(--sv-gutter)); }
.sv-main:focus { outline: none; }

.sv-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--sv-rose-ink); margin: 0 0 10px;
}
.sv-kicker::before { content: ""; inline-size: 26px; block-size: 1px; background: currentColor; }

/* ---- Material swatches (pure CSS samples) ------------------------------- */
.sv-swatch { display: block; background-color: var(--sv-marble); background-size: cover; background-position: center; }
.sv-swatch--marble { background-color: #F4EFF0; background-image: url(../img/marble.svg); }
.sv-swatch--oak { background-color: #C9A27E; background-image: url(../img/oak.svg); }
.sv-swatch--planks {
    background-color: #EFE6D6;
    background-image: repeating-linear-gradient(90deg, transparent 0 46px, rgb(120 96 70 / .28) 46px 47px, rgb(255 255 255 / .5) 47px 48px),
                      linear-gradient(180deg, rgb(255 255 255 / .35), transparent 60%);
    background-size: auto;
}
.sv-swatch--terrazzo {
    background-color: #E9E1DF;
    background-image:
        radial-gradient(circle at 20% 30%, #6D597A 0 2.5px, transparent 3px),
        radial-gradient(circle at 70% 60%, #B56576 0 2px, transparent 2.5px),
        radial-gradient(circle at 45% 80%, #8E8790 0 3px, transparent 3.5px),
        radial-gradient(circle at 85% 20%, #C9A27E 0 2px, transparent 2.5px),
        radial-gradient(circle at 10% 75%, #FFFFFF 0 3px, transparent 3.5px);
    background-size: 34px 34px, 27px 27px, 41px 41px, 23px 23px, 31px 31px;
}
.sv-swatch--lacquer { background-color: #6D597A; background-image: linear-gradient(135deg, rgb(255 255 255 / .1), transparent 45%, rgb(0 0 0 / .14)); }
.sv-swatch--gloss { background-color: #B56576; background-image: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .34) 42%, transparent 54%), linear-gradient(180deg, rgb(255 255 255 / .12), rgb(0 0 0 / .1)); }
.sv-swatch--birch { background-color: #E9D8C1; background-image: repeating-linear-gradient(176deg, transparent 0 9px, rgb(160 120 80 / .16) 9px 10px, transparent 10px 23px, rgb(160 120 80 / .1) 23px 24px); }
.sv-swatch--plan {
    background-color: #F7F2F4;
    background-image: linear-gradient(rgb(109 89 122 / .22) 1px, transparent 1px), linear-gradient(90deg, rgb(109 89 122 / .22) 1px, transparent 1px),
                      linear-gradient(rgb(109 89 122 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(109 89 122 / .08) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 10px 10px, 10px 10px;
}
.sv-swatch--chips { background-image: linear-gradient(90deg, #6D597A 0 20%, #B56576 20% 40%, #9AA58E 40% 60%, #E9DCC6 60% 80%, #3B3540 80%); }
.sv-swatch--steel { background-color: #C5C4CA; background-image: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / .45) 45%, transparent 70%), repeating-linear-gradient(0deg, rgb(255 255 255 / .2) 0 1px, rgb(0 0 0 / .05) 1px 2px, transparent 2px 3px); }
.sv-swatch--dot { display: inline-block; inline-size: 12px; block-size: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(43 34 48 / .18); background-size: 120px auto; flex: none; }

.sv-strip { display: flex; gap: 6px; margin-block-start: 22px; }
.sv-strip .sv-swatch { inline-size: 44px; block-size: 18px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(43 34 48 / .12); background-size: 160px auto; }
.sv-strip .sv-swatch:first-child { inline-size: 88px; }

/* ---- Logo --------------------------------------------------------------- */
.sv-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sv-ink); }
.sv-logo:hover { color: var(--sv-ink); }
.sv-mark { inline-size: 44px; block-size: 44px; }
.sv-mark__wood { fill: var(--sv-plum); }
.sv-mark__grain { stroke: #E9C6CE; }
.sv-mark__slab { fill: #F6F0F2; stroke: var(--sv-plum); }
.sv-mark__vein { stroke: var(--sv-rose); }
.sv-logo__word { font-family: var(--sv-logo); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
:root[data-mode="dark"] .sv-mark__wood { fill: #8C7699; }
:root[data-mode="dark"] .sv-mark__slab { stroke: #8C7699; }
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) .sv-mark__wood { fill: #8C7699; }
    :root:not([data-mode="light"]) .sv-mark__slab { stroke: #8C7699; }
}

/* ---- Header ------------------------------------------------------------- */
.sv-header { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in srgb, var(--sv-paper) 92%, transparent); backdrop-filter: blur(10px); border-block-end: 1px solid var(--sv-line); }
.admin-bar .sv-header { inset-block-start: 32px; }
.sv-header__band { block-size: 6px; display: flex;
    background: linear-gradient(90deg, #F4EFF0 0 18%, #C9A27E 18% 34%, #6D597A 34% 58%, #B56576 58% 74%, #C5C4CA 74% 86%, #9AA58E 86%); }
.sv-header__bar { display: flex; align-items: center; gap: 28px; min-block-size: 76px; }
.sv-nav { margin-inline-start: auto; }
.sv-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.sv-nav__list a { display: block; padding: 8px 12px; text-decoration: none; color: var(--sv-ink); font-size: .975rem; font-weight: 500; border-radius: var(--sv-radius); position: relative; }
.sv-nav__list a::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: 4px; block-size: 2px; background: var(--sv-rose); transform: scaleX(0); transition: transform .2s ease; }
.sv-nav__list a:hover::after, .sv-nav__list .current-menu-item > a::after, .sv-nav__list .current-menu-parent > a::after { transform: scaleX(1); }
.sv-nav__list .current-menu-item > a { color: var(--sv-plum); }
:root[data-mode="dark"] .sv-nav__list .current-menu-item > a { color: var(--sv-link); }
.sv-header__tools { display: flex; align-items: center; gap: 4px; }
.sv-iconbtn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--sv-ink); cursor: pointer; }
.sv-iconbtn:hover { background: var(--sv-tint); border-color: var(--sv-line); }
.sv-mode__sun { display: none; }
:root[data-mode="dark"] .sv-mode__sun { display: inline; }
:root[data-mode="dark"] .sv-mode__moon { display: none; }
.sv-menu-toggle { display: none; }
.sv-menu-toggle__close { display: none; }
.sv-menu-toggle[aria-expanded="true"] .sv-menu-toggle__close { display: inline; }
.sv-menu-toggle[aria-expanded="true"] .sv-menu-toggle__open { display: none; }

.sv-search { border-block-start: 1px solid var(--sv-line); background: var(--sv-surface); padding-block: 18px; }
.sv-searchform { display: flex; gap: 8px; max-inline-size: 640px; }
.sv-searchform input {
    flex: 1; min-inline-size: 0; min-block-size: 48px; padding: 10px 16px; font: inherit; color: var(--sv-ink);
    background: var(--sv-paper); border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius);
}
.sv-searchform input::placeholder { color: var(--sv-ink-soft); opacity: 1; }
.sv-searchform button, .sv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding: 10px 22px;
    background: var(--sv-plum); color: #fff; border: 1px solid var(--sv-plum); border-radius: var(--sv-radius);
    font-weight: 600; text-decoration: none; cursor: pointer; transition: background .2s ease;
}
.sv-searchform button:hover, .sv-btn:hover { background: var(--sv-plum-deep); color: #fff; }
.sv-btn--ghost { background: transparent; color: var(--sv-ink); border-color: var(--sv-line-strong); }
.sv-btn--ghost:hover { background: var(--sv-tint); color: var(--sv-ink); }
.sv-btn .sv-icon { transform: none; }

@media (max-width: 1060px) {
    .sv-header__bar { gap: 12px; min-block-size: 66px; }
    .sv-menu-toggle { display: inline-grid; }
    .sv-header__tools { margin-inline-start: auto; }
    .sv-nav { display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--sv-surface); border-block: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); padding: 10px var(--sv-gutter) 18px; }
    .sv-nav.is-open { display: block; }
    .sv-nav__list { flex-direction: column; }
    .sv-nav__list a { padding: 12px 6px; font-size: 1.0625rem; border-block-end: 1px solid var(--sv-line); border-radius: 0; }
    .sv-nav__list a::after { display: none; }
    .sv-logo__word { font-size: 1.5rem; }
    .sv-mark { inline-size: 38px; block-size: 38px; }
}

/* ---- Hero board ----------------------------------------------------------- */
.sv-hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); border-block-end: 1px solid var(--sv-line); background:
    linear-gradient(180deg, var(--sv-paper), var(--sv-tint)); }
.sv-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sv-hero__title { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin-block-end: 18px; text-wrap: balance; }
.sv-hero__lead { font-size: 1.1875rem; color: var(--sv-ink-soft); max-inline-size: 34em; margin-block-end: 26px; }
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sv-hero__facts { display: flex; gap: 0; margin: 34px 0 0; padding: 0; border-block-start: 1px solid var(--sv-line-strong); max-inline-size: 420px; }
.sv-hero__facts div { flex: 1; padding: 14px 0 0; border-inline-start: 1px solid var(--sv-line); padding-inline-start: 16px; }
.sv-hero__facts div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.sv-hero__facts dt { font-size: .8125rem; color: var(--sv-ink-soft); }
.sv-hero__facts dd { margin: 0; font-family: var(--sv-display); font-size: 2.25rem; line-height: 1.1; color: var(--sv-plum); }
:root[data-mode="dark"] .sv-hero__facts dd { color: var(--sv-link); }

.sv-board { position: relative; padding-block-end: 34px; padding-inline-start: 40px; }
.sv-board__plan { background: var(--sv-surface); border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); padding: 14px; }
.sv-board__plan svg { display: block; inline-size: 100%; }
.sv-board__photo {
    position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: min(42%, 240px); aspect-ratio: 4 / 5;
    background: var(--sv-surface); padding: 8px 8px 8px; box-shadow: var(--sv-shadow); border: 1px solid var(--sv-line); transform: rotate(-2deg);
}
.sv-board__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sv-board__chips { position: absolute; inset-inline-end: -10px; inset-block-start: -18px; display: flex; flex-direction: column; gap: 8px; }
.sv-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--sv-surface); border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); padding: 6px 12px 6px 6px; font-size: .875rem; font-weight: 600; }
.sv-chip .sv-swatch { inline-size: 36px; block-size: 26px; background-size: 140px auto; box-shadow: inset 0 0 0 1px rgb(43 34 48 / .12); }

/* Plan drawings */
.sv-plan__paper { fill: #FBF8F9; }
.sv-plan--hero { background-image: linear-gradient(rgb(109 89 122 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(109 89 122 / .09) 1px, transparent 1px); background-size: 20px 20px; }
.sv-plan--hero .sv-plan__paper { fill: transparent; }
.sv-plan__wall { fill: none; stroke: var(--sv-plum); stroke-width: 3; stroke-linecap: square; }
.sv-plan__wall--thick { stroke-width: 7; }
.sv-plan__ghost { fill: none; stroke: var(--sv-plum); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .6; }
.sv-plan__window { fill: none; stroke: var(--sv-plum); stroke-width: 1.5; }
.sv-plan__door { fill: none; stroke: var(--sv-plum); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sv-plan__counter { fill: #EFE5E9; stroke: var(--sv-plum); stroke-width: 1.3; }
.sv-plan__counter--island { fill: #E6D2C0; }
.sv-plan__tall { fill: #DCD4E0; stroke: var(--sv-plum); stroke-width: 1.3; }
.sv-plan__fixture { fill: none; stroke: var(--sv-plum); stroke-width: 1.2; }
.sv-plan__soft { fill: none; stroke: var(--sv-rose); stroke-width: 1.3; }
.sv-plan__route { fill: rgb(181 101 118 / .08); stroke: var(--sv-rose); stroke-width: 1.4; stroke-dasharray: 4 3; }
.sv-plan__node { fill: var(--sv-rose); }
.sv-plan__dim { fill: none; stroke: var(--sv-rose); stroke-width: 1.2; }
:root[data-mode="dark"] .sv-plan__counter { fill: #3A3040; }
:root[data-mode="dark"] .sv-plan__counter--island { fill: #4A3B36; }
:root[data-mode="dark"] .sv-plan__tall { fill: #3F3547; }
:root[data-mode="dark"] .sv-plan__wall, :root[data-mode="dark"] .sv-plan__fixture, :root[data-mode="dark"] .sv-plan__window, :root[data-mode="dark"] .sv-plan__door, :root[data-mode="dark"] .sv-plan__ghost, :root[data-mode="dark"] .sv-plan__counter, :root[data-mode="dark"] .sv-plan__tall { stroke: #BFA9CC; }
:root[data-mode="dark"] .sv-plan__paper { fill: transparent; }
@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]) .sv-plan__counter { fill: #3A3040; }
    :root:not([data-mode="light"]) .sv-plan__counter--island { fill: #4A3B36; }
    :root:not([data-mode="light"]) .sv-plan__tall { fill: #3F3547; }
    :root:not([data-mode="light"]) .sv-plan__wall, :root:not([data-mode="light"]) .sv-plan__fixture, :root:not([data-mode="light"]) .sv-plan__window, :root:not([data-mode="light"]) .sv-plan__door, :root:not([data-mode="light"]) .sv-plan__ghost, :root:not([data-mode="light"]) .sv-plan__counter, :root:not([data-mode="light"]) .sv-plan__tall { stroke: #BFA9CC; }
    :root:not([data-mode="light"]) .sv-plan__paper { fill: transparent; }
}

@media (max-width: 860px) {
    .sv-hero__grid { grid-template-columns: 1fr; }
    .sv-board { padding-inline-start: 22px; margin-block-start: 8px; }
    .sv-board__chips { inset-inline-end: 0; flex-direction: row; inset-block-start: auto; inset-block-end: -6px; }
    .sv-board__photo { inline-size: 38%; }
}
@media (max-width: 520px) {
    .sv-board__chips { display: none; }
}

/* ---- Sections --------------------------------------------------------------- */
.sv-section { padding-block: clamp(48px, 7vw, 92px); }
.sv-section--tint { background: var(--sv-tint); border-block: 1px solid var(--sv-line); }
.sv-section--paper { background: var(--sv-surface); border-block: 1px solid var(--sv-line); }
.sv-section__head { margin-block-end: clamp(26px, 4vw, 44px); max-inline-size: 760px; }
.sv-section__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; max-inline-size: none; flex-wrap: wrap; }
.sv-section__title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.sv-section__title--sm { font-size: 1.75rem; margin-block: 44px 22px; }
.sv-section__intro { color: var(--sv-ink-soft); font-size: 1.0625rem; margin: 12px 0 0; }
.sv-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; min-block-size: 44px; }
.sv-more:hover { text-decoration: underline; }

/* ---- Material samples board ---------------------------------------------- */
.sv-samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); grid-auto-flow: dense; }
.sv-sample { position: relative; display: flex; flex-direction: column; background: var(--sv-surface); border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.sv-sample:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(43 34 48 / .08), 0 18px 34px -16px rgb(43 34 48 / .3); }
.sv-sample--n1 { grid-column: span 2; grid-row: span 2; }
.sv-sample--n6, .sv-sample--n10 { grid-column: span 2; }
.sv-sample__swatch { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-block-end: 1px solid var(--sv-line); }
.sv-sample--n1 .sv-sample__swatch { aspect-ratio: auto; flex: 1; min-block-size: 280px; }
.sv-sample--n6 .sv-sample__swatch, .sv-sample--n10 .sv-sample__swatch { aspect-ratio: 8 / 3; }
.sv-sample__material { position: absolute; inset: 0; }
.sv-sample__photo { position: absolute; inset-inline-start: 12px; inset-block-end: 12px; inline-size: 30%; max-inline-size: 120px; aspect-ratio: 1; background: #fff; padding: 4px; box-shadow: 0 6px 16px -6px rgb(43 34 48 / .45); }
.sv-sample__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sv-sample__plate { padding: 16px 18px 18px; }
.sv-sample__code { font-size: .75rem; letter-spacing: .04em; color: var(--sv-ink-soft); margin-block-end: 6px; }
.sv-sample__name { font-size: 1.5rem; margin-block-end: 6px; }
.sv-sample--n1 .sv-sample__name { font-size: 2rem; }
.sv-sample__name a { color: var(--sv-ink); text-decoration: none; }
.sv-sample__name a::after { content: ""; position: absolute; inset: 0; }
.sv-sample__name a:hover { color: var(--sv-plum); }
.sv-sample:focus-within { outline: 3px solid var(--sv-focus); outline-offset: 3px; }
.sv-sample__name a:focus-visible { outline: none; }
.sv-sample__desc { font-size: .9375rem; color: var(--sv-ink-soft); line-height: 1.6; margin-block-end: 10px; }
.sv-sample__meta { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; margin: 0; padding-block-start: 10px; border-block-start: 1px dashed var(--sv-line-strong); }
.sv-sample__meta > span:first-child { font-weight: 700; color: var(--sv-rose-ink); }
.sv-sample__new { color: var(--sv-ink-soft); }
@media (max-width: 1000px) {
    .sv-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-sample--n1 { grid-row: auto; }
    .sv-sample--n1 .sv-sample__swatch { min-block-size: 0; aspect-ratio: 8 / 3; flex: none; }
    .sv-sample--n6 { grid-column: auto; }
    .sv-sample--n6 .sv-sample__swatch { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
    .sv-samples { gap: 12px; }
    .sv-sample__swatch, .sv-sample--n6 .sv-sample__swatch { aspect-ratio: 4 / 3; }
    .sv-sample--n10 .sv-sample__swatch { aspect-ratio: 16 / 7; }
    .sv-sample--n1 .sv-sample__swatch { aspect-ratio: 16 / 9; }
    .sv-sample:not(.sv-sample--n1) .sv-sample__desc, .sv-sample:not(.sv-sample--n1) .sv-sample__new { display: none; }
    .sv-sample__plate { padding: 12px 12px 14px; }
    .sv-sample__name { font-size: 1.25rem; }
    .sv-sample__code { font-size: .6875rem; }
    .sv-sample__photo { inline-size: 38%; inset-inline-start: 8px; inset-block-end: 8px; padding: 3px; }
}

/* ---- Layout drawings ------------------------------------------------------ */
.sv-plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.sv-plancard { position: relative; padding: 16px; border: 1px solid var(--sv-line); background: var(--sv-paper); }
.sv-plancard .sv-plan { display: block; inline-size: 100%; margin-block-end: 12px; }
.sv-plancard__label { font-size: .8125rem; font-weight: 700; color: var(--sv-rose-ink); margin: 0 0 4px; }
.sv-plancard__link { display: block; color: var(--sv-ink); text-decoration: none; font-family: var(--sv-display); font-size: 1.1875rem; line-height: 1.3; }
.sv-plancard__link::after { content: ""; position: absolute; inset: 0; }
.sv-plancard:hover { border-color: var(--sv-plum); }
.sv-plancard:focus-within { outline: 3px solid var(--sv-focus); outline-offset: 3px; }
.sv-plancard__link:focus-visible { outline: none; }
@media (max-width: 1000px) { .sv-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sv-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sv-plancard { padding: 12px; } }

/* ---- Cards ------------------------------------------------------------------ */
.sv-card { position: relative; display: flex; flex-direction: column; background: var(--sv-surface); border: 1px solid var(--sv-line); }
.sv-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sv-marble); }
.sv-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; }
.sv-card:hover .sv-card__media img { transform: scale(1.03); }
.sv-card__edge { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 8px; background-size: 300px auto; }
.sv-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.sv-card__cat { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 600; color: var(--sv-rose-ink); margin-block-end: 8px; }
.sv-card__title { font-size: 1.375rem; line-height: 1.3; margin-block-end: 10px; }
.sv-card__title a { color: var(--sv-ink); text-decoration: none; }
.sv-card__title a::after { content: ""; position: absolute; inset: 0; }
.sv-card__title a:hover { color: var(--sv-plum); }
:root[data-mode="dark"] .sv-card__title a:hover { color: var(--sv-link); }
.sv-card:focus-within { outline: 3px solid var(--sv-focus); outline-offset: 3px; }
.sv-card__title a:focus-visible { outline: none; }
.sv-card__excerpt { color: var(--sv-ink-soft); font-size: .9375rem; line-height: 1.65; }
.sv-card__meta { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .8125rem; color: var(--sv-ink-soft); }

.sv-card--lead .sv-card__media { aspect-ratio: 16 / 10; }
.sv-card--lead .sv-card__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.sv-card--lead .sv-card__body { padding: 22px 26px 26px; }
.sv-card--row { flex-direction: row; align-items: stretch; }
.sv-card--row .sv-card__media { flex: none; inline-size: 132px; aspect-ratio: 1; }
.sv-card--row .sv-card__body { padding: 12px 16px; }
.sv-card--row .sv-card__title { font-size: 1.1875rem; margin-block-end: 6px; }
.sv-card--row .sv-card__cat { margin-block-end: 4px; }

.sv-latest { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.sv-latest__list { display: grid; gap: 14px; align-content: start; }
@media (max-width: 900px) { .sv-latest { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .sv-card--row .sv-card__media { inline-size: 96px; } }

.sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sv-grid { grid-template-columns: 1fr; } }

/* ---- Spec sheet (homepage prose) ------------------------------------------- */
.sv-sheet { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); }
.sv-sheet__side .sv-strip { flex-direction: column; position: sticky; inset-block-start: 110px; margin: 0; }
.sv-sheet__side .sv-strip .sv-swatch { inline-size: 100%; block-size: 46px; background-size: 260px auto; }
.sv-sheet__side .sv-strip .sv-swatch:first-child { inline-size: 100%; block-size: 120px; }
@media (max-width: 860px) { .sv-sheet { grid-template-columns: 1fr; } .sv-sheet__side { display: none; } }

/* ---- Writers ---------------------------------------------------------------- */
.sv-writers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.sv-writer { display: flex; gap: 18px; align-items: flex-start; background: var(--sv-surface); border: 1px solid var(--sv-line); padding: 24px; }
.sv-writer__name { font-size: 1.5rem; margin-block-end: 2px; }
.sv-writer__count { font-size: .8125rem; font-weight: 700; color: var(--sv-rose-ink); margin-block-end: 8px; }
.sv-writer__bio { font-size: .9375rem; color: var(--sv-ink-soft); margin: 0; line-height: 1.65; }
.sv-avatar { display: inline-grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; background: var(--sv-plum); color: #fff; font-family: var(--sv-display); font-size: 1.125rem; line-height: 1; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .18); }
.sv-avatar--lg { inline-size: 64px; block-size: 64px; font-size: 1.5rem; background: url(../img/marble.svg) center / cover, var(--sv-marble); color: var(--sv-plum-deep); box-shadow: inset 0 0 0 1px var(--sv-line-strong); }

/* ---- Page heads ------------------------------------------------------------- */
.sv-pagehead { padding-block: clamp(30px, 5vw, 60px) clamp(28px, 4vw, 48px); border-block-end: 1px solid var(--sv-line); background: linear-gradient(180deg, var(--sv-paper), var(--sv-tint)); }
.sv-pagehead__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.sv-pagehead__title { font-size: clamp(2.1rem, 4.2vw, 3.3rem); text-wrap: balance; margin-block-end: 12px; }
.sv-pagehead__lead { color: var(--sv-ink-soft); font-size: 1.125rem; max-inline-size: 44em; margin: 0; }
.sv-pagehead__meta { margin: 14px 0 0; font-size: .875rem; font-weight: 700; color: var(--sv-rose-ink); }
.sv-pagehead__sample { inline-size: 220px; background: var(--sv-surface); border: 1px solid var(--sv-line); box-shadow: var(--sv-shadow); padding: 8px; }
.sv-pagehead__material { aspect-ratio: 1; }
.sv-pagehead__label { font-size: .8125rem; color: var(--sv-ink-soft); margin: 8px 2px 0; }
.sv-pagehead .sv-strip { margin: 0; }
@media (max-width: 760px) {
    .sv-pagehead__grid { grid-template-columns: 1fr; }
    .sv-pagehead__sample { display: flex; align-items: center; gap: 12px; inline-size: auto; }
    .sv-pagehead__material { inline-size: 64px; block-size: 40px; aspect-ratio: auto; }
    .sv-pagehead__label { margin: 0; }
}

.sv-crumbs { font-size: .875rem; color: var(--sv-ink-soft); margin-block-end: 18px; }
.sv-crumbs a { color: var(--sv-ink-soft); }
.sv-crumbs a:hover { color: var(--sv-rose-ink); }

.sv-listing { padding-block: clamp(30px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.sv-topics ul { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sv-tag { display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 6px 14px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: 999px; color: var(--sv-ink); text-decoration: none; font-size: .9rem; font-weight: 500; }
a.sv-tag:hover { border-color: var(--sv-plum); color: var(--sv-ink); }
.sv-termtext { max-inline-size: 760px; margin-block-end: 36px; color: var(--sv-ink-soft); }
.sv-searchbar { margin-block-end: 32px; }
.sv-empty { padding: 40px; border: 1px dashed var(--sv-line-strong); background: var(--sv-surface); max-inline-size: 720px; }
.sv-empty__title { font-family: var(--sv-display); font-size: 1.75rem; }

.sv-pagination { margin-block-start: 44px; }
.sv-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sv-pagination .page-numbers { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; padding: 0 14px; border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink); text-decoration: none; }
.sv-pagination .page-numbers.current { background: var(--sv-plum); border-color: var(--sv-plum); color: #fff; }
.sv-pagination a.page-numbers:hover { border-color: var(--sv-plum); }

/* ---- Article ---------------------------------------------------------------- */
.sv-article__head { padding-block: clamp(28px, 5vw, 56px) 28px; background: linear-gradient(180deg, var(--sv-paper), var(--sv-tint)); }
.sv-article__head .sv-tag { margin-block-end: 16px; }
.sv-article__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.12; text-wrap: balance; margin-block-end: 16px; }
.sv-article__lead { font-size: 1.1875rem; color: var(--sv-ink-soft); max-inline-size: 42em; }
.sv-byline { display: flex; align-items: center; gap: 12px; margin-block-start: 18px; }
.sv-byline__text { display: flex; flex-direction: column; gap: 2px; }
.sv-byline__name { font-weight: 700; color: var(--sv-ink); }
.sv-byline__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .875rem; color: var(--sv-ink-soft); }
.sv-byline__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.sv-article__media { margin-block: 0; margin-inline: auto; padding-block-start: 8px; }
.sv-article__media img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--sv-line); background: var(--sv-marble); }

.sv-article__layout { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: 56px; padding-block: clamp(30px, 5vw, 52px) clamp(48px, 7vw, 80px); }
.sv-article__layout.has-toc { grid-template-columns: 240px minmax(0, 700px); }
.sv-toc { position: relative; }
.sv-toc__box { position: sticky; inset-block-start: 104px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-block-start: 6px solid var(--sv-plum); padding: 16px 18px; }
.sv-toc summary { display: flex; align-items: center; gap: 8px; font-family: var(--sv-display); font-size: 1.25rem; cursor: pointer; list-style: none; min-block-size: 40px; }
.sv-toc summary::-webkit-details-marker { display: none; }
.sv-toc ol { list-style: none; counter-reset: sv-toc; margin: 10px 0 0; padding: 0; font-size: .9rem; line-height: 1.45; }
.sv-toc li { counter-increment: sv-toc; display: flex; gap: 10px; padding-block: 7px; border-block-start: 1px solid var(--sv-line); }
.sv-toc li::before { content: counter(sv-toc, decimal-leading-zero); color: var(--sv-rose-ink); font-size: .75rem; font-weight: 700; padding-block-start: 2px; }
.sv-toc a { color: var(--sv-ink); text-decoration: none; }
.sv-toc a:hover, .sv-toc a.is-active { color: var(--sv-rose-ink); text-decoration: underline; }
@media (max-width: 1000px) {
    .sv-article__layout.has-toc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .sv-toc__box { position: static; }
}

/* ---- Prose ------------------------------------------------------------------- */
.sv-prose { font-size: 1.125rem; line-height: 1.85; overflow-wrap: break-word; }
.sv-prose > * + * { margin-block-start: 0; }
.sv-prose h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 2.2em 0 .6em; padding-block-start: .6em; position: relative; }
.sv-prose h2::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 64px; block-size: 6px;
    background: linear-gradient(90deg, #6D597A 0 50%, #C9A27E 50% 75%, #B56576 75%); }
.sv-prose h3 { font-family: var(--sv-font); font-weight: 700; font-size: 1.25rem; line-height: 1.4; color: var(--sv-plum-deep); margin: 1.7em 0 .5em; }
:root[data-mode="dark"] .sv-prose h3 { color: var(--sv-link); }
@media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) .sv-prose h3 { color: var(--sv-link); } }
.sv-prose h2:first-child, .sv-prose h3:first-child { margin-block-start: 0; }
.sv-prose p, .sv-prose ul, .sv-prose ol { margin: 0 0 1.15em; }
.sv-prose ul, .sv-prose ol { padding-inline-start: 1.4em; }
.sv-prose li { margin-block-end: .45em; }
.sv-prose ul li::marker { color: var(--sv-rose); }
.sv-prose ol li::marker { color: var(--sv-plum); font-weight: 700; }
.sv-prose strong { font-weight: 700; color: var(--sv-ink); }
.sv-prose a { color: var(--sv-link); text-decoration-color: color-mix(in srgb, var(--sv-rose) 70%, transparent); text-decoration-thickness: 2px; }
.sv-prose blockquote { margin: 1.6em 0; padding: 4px 22px; border-inline-start: 4px solid var(--sv-rose); font-family: var(--sv-display); font-size: 1.375rem; color: var(--sv-ink); }
.sv-prose img { margin-block: 1.4em; }
.sv-prose hr { border: 0; block-size: 1px; background: var(--sv-line-strong); margin: 2.4em 0; }
.sv-prose--page { max-inline-size: 760px; }
.sv-prose--home { max-inline-size: 780px; }
.sv-prose--home h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }

.sv-table { overflow-x: auto; margin: 1.6em 0 1.8em; border: 1px solid var(--sv-line); background: var(--sv-surface); }
.sv-table table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; min-inline-size: 520px; }
.sv-table th, .sv-table td { padding: 11px 14px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--sv-line); }
.sv-table thead th, .sv-table tr:first-child th { background: var(--sv-plum); color: #fff; font-weight: 600; }
.sv-table tbody tr:nth-child(even) td { background: var(--sv-tint); }
.sv-table tr:last-child td { border-block-end: 0; }

.sv-note { display: flex; gap: 14px; align-items: flex-start; margin: 2.2em 0 0; padding: 18px 20px; background: var(--sv-rose-pale); border-inline-start: 4px solid var(--sv-rose); color: var(--sv-ink); font-size: .9375rem; line-height: 1.7; }
.sv-note .sv-icon { color: var(--sv-rose-ink); margin-block-start: 2px; }
.sv-note p { margin: 0; }
.sv-note__title { font-weight: 700; margin-block-end: 4px !important; }
.sv-readalso { padding: 14px 18px; border: 1px solid var(--sv-line); background: var(--sv-surface); font-size: 1rem; }

.sv-authorbox { display: flex; gap: 18px; align-items: flex-start; margin-block-start: 40px; padding: 24px; background: var(--sv-surface); border: 1px solid var(--sv-line); }
.sv-authorbox__label { font-size: .8125rem; color: var(--sv-ink-soft); margin: 0; }
.sv-authorbox__name { font-family: var(--sv-display); font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; }
.sv-authorbox__bio { margin: 0; font-size: .9375rem; color: var(--sv-ink-soft); line-height: 1.7; }

/* ---- Pages: contact form (ADX plugin markup) ------------------------------------ */
.sv-page { padding-block: clamp(30px, 5vw, 56px) clamp(56px, 8vw, 96px); }
.sv-page .adxc {
    --adxc-accent: var(--sv-plum); --adxc-bg: var(--sv-surface); --adxc-input-bg: var(--sv-paper);
    --adxc-border: var(--sv-line-strong); --adxc-radius: 4px; max-inline-size: 560px;
}
.sv-page .adxc .adxc-field label { font-size: .9375rem; }
.sv-page .adxc .adxc-field input, .sv-page .adxc .adxc-field textarea { min-block-size: 48px; border-radius: 4px; }
.sv-page .adxc .adxc-field input:focus-visible, .sv-page .adxc .adxc-field textarea:focus-visible { outline: 3px solid var(--sv-focus); outline-offset: 1px; }
.sv-page .adxc .adxc-submit { min-block-size: 48px; padding-inline: 28px; border-radius: 4px; }
.sv-page .adxc .adxc-submit:hover { background: var(--sv-plum-deep); filter: none; }
.sv-page .adxc.adxc-state-ok .adxc-msg { color: #2E7D4A; }
.sv-page .adxc.adxc-state-err .adxc-msg { color: #B3263E; }
:root[data-mode="dark"] .sv-page .adxc { --adxc-accent: #8C7699; }
:root[data-mode="dark"] .sv-page .adxc.adxc-state-ok .adxc-msg { color: #8FD3A6; }
:root[data-mode="dark"] .sv-page .adxc.adxc-state-err .adxc-msg { color: #F2A0AE; }

/* ---- Footer ------------------------------------------------------------------ */
.sv-footer { background: #2A2130; color: #EAE1EC; margin-block-start: 0; }
.sv-footer__marble { block-size: 22px; background: url(../img/marble.svg) center / 600px auto, #F4EFF0; border-block-end: 3px solid var(--sv-rose); }
.sv-footer__grid { display: grid; grid-template-columns: 1.3fr 1.6fr 1fr; gap: 40px; padding-block: 52px 36px; }
.sv-footer .sv-logo { color: #fff; }
.sv-footer .sv-mark__slab { stroke: #8C7699; }
.sv-footer .sv-mark__wood { fill: #8C7699; }
.sv-footer__tagline { margin: 16px 0 10px; color: #D6CAD9; font-size: .9375rem; }
.sv-footer__fine { font-size: .8125rem; color: #BFB1C3; margin: 0; }
.sv-footer__title { font-family: var(--sv-display); font-size: 1.25rem; color: #fff; margin-block-end: 12px; }
.sv-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sv-footer__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.sv-footer__list a { display: inline-block; padding-block: 6px; color: #EAE1EC; text-decoration: none; font-size: .9375rem; }
.sv-footer__list a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--sv-rose); }
.sv-footer :focus-visible { outline-color: #EBA9B8; }
.sv-footer__base { padding-block: 0 24px; font-size: .8125rem; color: #BFB1C3; }
.sv-footer__base p { margin: 0; padding-block-start: 18px; border-block-start: 1px solid #44384B; }
@media (max-width: 860px) { .sv-footer__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---- Motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .sv-sample:hover, .sv-card:hover .sv-card__media img { transform: none; }
}
@media print {
    .sv-header, .sv-footer, .sv-toc, .sv-section--tint { display: none; }
    body { background: #fff; color: #000; }
}