/* ================================================================
   BOLD FAUVE, the site as a suite of Jazz-like plates.
   Flat fields of colour, photographs in large cut windows, big clean
   cut shapes across the edges, one real poured gesture per home.
   No textures, no torn edges, no ornament on controls: buttons are
   solid and square, type is large and confident.
   Composition is applied by assets/js/fauve.js (data-field, --fv-mask).
   ================================================================ */

:root {
  --fv-cobalt: #1e3fa6;
  --fv-vermillion: #134e3a;
  --fv-lemon: #f6c928;
  --fv-emerald: #134e3a;
  --fv-rose: #f6c928;
  --fv-black: #121212;
  --fv-white: #ffffff;
  --fv-line: #e4e4e1;
  --fv-accent: var(--fv-cobalt);
  --fv-ease: cubic-bezier(.16, 1, .3, 1);
}
html[data-house="editions"] { --fv-accent: var(--fv-vermillion); }

body { background: var(--fv-white); color: var(--fv-black); }
::selection { background: var(--fv-lemon); color: var(--fv-black); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--fv-lemon); outline-offset: 3px; border-radius: 0;
  box-shadow: 0 0 0 6px var(--fv-black);
}

/* ---------------- fields ---------------- */
.fv-field { background: var(--fv-f); color: var(--fv-inkc); position: relative; }
[data-ink="light"] { --fv-inkc: #ffffff; }
[data-ink="dark"] { --fv-inkc: #121212; }
.fv-field .kicker, .fv-field .lede, .fv-field p, .fv-field .by { color: inherit !important; }
.fv-field .kicker { opacity: .85; font-weight: 500; }

/* ---------------- cut shapes ---------------- */
.fv-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.fv-shape { position: absolute; display: block; transform: rotate(var(--rot, 0deg)); transform-origin: 50% 50%; }
.fv-shape.fv-front { z-index: 2; }
.fv-shape[hidden] { display: none; }
.fv-deco:has(.fv-front) { z-index: 2; }
.fv-shape-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------------- cut windows ---------------- */
.fv-win {
  -webkit-mask-image: var(--fv-mask); mask-image: var(--fv-mask);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transition: -webkit-mask-size .9s var(--fv-ease), mask-size .9s var(--fv-ease);
}

/* ---------------- type ---------------- */
.display, .section-title, .gate-half .copy h2, .pdp-hero h1, .plp-head h1 {
  font-weight: 600; letter-spacing: -.045em; line-height: .92;
}
.display { font-size: clamp(52px, 7vw, 6rem); }
.section-title { font-size: clamp(38px, 4.6vw, 4.5rem); }
.lede { font-size: 17px; font-weight: 400; line-height: 1.55; }
.kicker { font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.story-copy h3 { font-size: clamp(30px, 3vw, 44px); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.story-copy p { font-size: 16px; font-weight: 400; color: inherit; }

/* ---------------- buttons: solid, square, no ornament ---------------- */
.pill {
  height: 52px; padding: 0 30px; border-radius: 0; border: 0;
  background: var(--fv-black); color: var(--fv-white);
  font-size: 15px; font-weight: 500; letter-spacing: 0;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
.pill:hover { background: var(--fv-accent); color: var(--fv-white); }
.pill:active { transform: translateY(1px); }
.pill.white, [data-ink="light"] .pill { background: var(--fv-white); color: var(--fv-black); }
.pill.white:hover, [data-ink="light"] .pill:hover { background: var(--fv-lemon); color: var(--fv-black); }
[data-ink="dark"] .pill { background: var(--fv-black); color: var(--fv-white); }
[data-ink="dark"] .pill:hover { background: var(--fv-white); color: var(--fv-black); }
.pill.outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.pill.outline:hover { background: var(--fv-black); color: var(--fv-white); box-shadow: inset 0 0 0 2px var(--fv-black); }
.pill.cream { background: var(--fv-lemon); color: var(--fv-black); }
.pill.cream:hover { background: var(--fv-black); color: var(--fv-white); }
.pill.sm { height: 42px; padding: 0 20px; }
.pill:focus-visible { border-radius: 0; }
.arrow-link {
  font-size: 15px; font-weight: 500; border-bottom: 2px solid currentColor; padding-bottom: 3px; gap: 10px;
}
.arrow-link::after {
  content: ""; width: 18px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.arrow-link:hover { opacity: 1; color: var(--fv-accent); }
.fv-field .arrow-link:hover { color: inherit; opacity: .75; }

/* ---------------- header ---------------- */
.site-header, .site-header.solid, .site-header:hover { background: var(--fv-white); color: var(--fv-black); box-shadow: 0 1px 0 var(--fv-line); }
.site-header::before { display: none; }
.logo small {
  display: inline-block; margin-top: 7px; padding: 4px 8px 3px;
  background: var(--fv-cobalt); color: var(--fv-white); opacity: 1;
  font-size: 9px; font-weight: 600; letter-spacing: .32em;
}
html[data-house="editions"] .logo small { background: var(--fv-lemon); color: var(--fv-black); }
.world-nav a { border-radius: 0; font-weight: 500; font-size: 14px; }
.site-header.solid .world-nav a:hover, .site-header:hover .world-nav a:hover { background: none; color: inherit; }
.world-nav a:hover, .world-nav a.active { text-decoration: none; box-shadow: inset 0 -3px 0 var(--fv-accent); }
.icon-btn { border-radius: 0; font-weight: 500; }
.badge { background: var(--fv-lemon); color: var(--fv-black); border-color: var(--fv-black); border-radius: 0; }
.announce { background: var(--fv-black); color: var(--fv-white); font-weight: 400; }
.announce a { color: var(--fv-lemon); text-decoration-thickness: 2px; }

/* ---------------- entrance: two doors ---------------- */
.gateway { min-height: calc(100svh - 84px); }
.gate-half.fv-field {
  background: var(--fv-f); display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 4vw, 56px); overflow: hidden;
}
.gate-half.fv-field .art { position: absolute; inset: 9% 13% 32% 13%; z-index: 1; }
.gate-half.fv-field .art svg { transform: none !important; }
.gate-half.fv-field .g-scrim { display: none; }
.gate-half.fv-field .copy { position: relative; inset: auto; padding: 0; z-index: 3; color: var(--fv-inkc); gap: 12px; }
.gate-half.fv-field .copy h2 { font-size: clamp(44px, 5.4vw, 5.5rem); }
.gate-half.fv-field .copy p { font-size: 17px; font-weight: 400; max-width: 34ch; }
.gate-half.fv-field:hover .art { -webkit-mask-size: 114% 114%; mask-size: 114% 114%; }

/* ---------------- house heroes ---------------- */
.hero.fv-field {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px);
  align-items: end; min-height: min(100svh, 980px); overflow: hidden;
  padding: calc(var(--header-h) + clamp(28px, 5vh, 56px)) var(--pad-x) clamp(40px, 7vh, 80px);
}
.hero.fv-field .media {
  position: relative; grid-column: 2; grid-row: 1; z-index: 1;
  width: 100%; height: auto; min-height: 0; aspect-ratio: 5 / 6;
  max-height: calc(100svh - var(--header-h) - 96px); justify-self: end; align-self: center;
}
.hero.fv-field .media svg { animation: none; }
.hero.fv-field .scrim { display: none; }
.hero.fv-field .copy {
  position: relative; inset: auto; grid-column: 1; grid-row: 1; z-index: 3; padding: 0;
  flex-direction: column; align-items: flex-start; gap: 32px; color: var(--fv-inkc);
}
.hero.fv-field .copy .display { max-width: 11ch; }
.hero.fv-field .dots { z-index: 4; }
.hero.fv-field .dots button { border-color: currentColor; border-radius: 0; color: var(--fv-inkc); }
.hero.fv-field .dots button.on { background: currentColor; }
.hero.fv-field:hover .media { -webkit-mask-size: 106% 106%; mask-size: 106% 106%; }

/* ---------------- section heads ---------------- */
.section-head { margin-bottom: clamp(28px, 3.6vw, 52px); }
.section-head .section-title::after { content: none; }

/* ---------------- tiles: small plates ---------------- */
.tile, .tile.fv-field { border-radius: 0; }
.tile.fv-field { aspect-ratio: 4 / 5; }
.tile.fv-field .art { position: absolute; inset: 8% 9% 25%; z-index: 1; }
.tile.fv-field .art svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: none !important; }
.tile.fv-field .label, .tile.fv-field .label.on-dark {
  z-index: 3; left: 16px; bottom: 16px; color: var(--fv-inkc);
  font-size: clamp(18px, 1.5vw, 24px); font-weight: 600; letter-spacing: -.03em;
}
.tile.fv-field .plus { z-index: 3; background: var(--fv-inkc); color: var(--fv-f); border-radius: 0; font-weight: 500; }
.tile.fv-field:hover .art { -webkit-mask-size: 112% 112%; mask-size: 112% 112%; }
.tile-row, .tile-row.six { gap: 12px; }

/* ---------------- banners: plates; one is the poured gesture ---------------- */
.banner { border-radius: 0; }
.banner.fv-field {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  min-height: clamp(460px, 46vw, 680px); background: var(--fv-f); overflow: hidden;
}
.banner.fv-field .art { position: relative; grid-column: 2; grid-row: 1; height: auto; aspect-ratio: 1 / 1; max-height: 600px; margin: clamp(28px, 4vw, 56px); z-index: 1; }
.banner.fv-field .b-scrim { display: none; }
.banner.fv-field .copy { position: relative; inset: auto; grid-column: 1; grid-row: 1; z-index: 3; color: var(--fv-inkc); padding: clamp(32px, 5vw, 72px); }
.banner.fv-field .copy .lede { margin: 16px 0 28px; }
.banner.fv-field.fv-alt .art { grid-column: 1; }
.banner.fv-field.fv-alt .copy { grid-column: 2; }
.banner.fv-field:hover .art { -webkit-mask-size: 108% 108%; mask-size: 108% 108%; }

.banner.fv-pour { background: var(--fv-black); color: var(--fv-white); min-height: clamp(520px, 62vw, 760px); display: grid; place-items: center; cursor: crosshair; }
.banner.fv-pour .art, .banner.fv-pour .b-scrim { display: none; }
.banner.fv-pour .copy { position: relative; inset: auto; color: var(--fv-white); align-items: center; justify-content: center; text-align: center; padding: 48px; }
.banner.fv-pour .copy:not(.centered) { align-items: flex-start; text-align: left; justify-self: start; }
.banner.fv-pour .section-title { font-size: clamp(56px, 8vw, 7rem); }
.banner.fv-pour .kicker { color: var(--fv-white) !important; }
.banner.fv-pour .lede { color: rgba(255, 255, 255, .86); }
.banner.fv-pour .pill { background: var(--fv-white); color: var(--fv-black); }
.banner.fv-pour .pill:hover { background: var(--fv-lemon); }

/* ---------------- story blocks ---------------- */
.story-block.fv-field { padding: clamp(28px, 5vw, 80px); gap: clamp(28px, 5vw, 80px); overflow: hidden; }
.story-art { border-radius: 0; background: transparent; }
.story-block.fv-field .story-copy { position: relative; z-index: 2; }
.story-block.fv-field .story-art.fv-win { aspect-ratio: 4 / 5; position: relative; }
.story-block.fv-field .story-art.fv-win svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-art.fv-map { background: transparent; }
.story-art.fv-map svg > rect:first-of-type { fill: transparent; }
.story-art.fv-map svg path { fill: var(--fv-white); stroke: none; }
.story-art.fv-map svg > g:not(.map-pin) { fill: var(--fv-white); stroke: none; }
.story-art.fv-map .map-pin circle { fill: var(--fv-lemon); stroke: var(--fv-black); }
.story-art.fv-map svg text { fill: currentColor; opacity: .8; }
[data-field="lemon"] .story-art.fv-map svg path, [data-field="lemon"] .story-art.fv-map svg > g:not(.map-pin) { fill: var(--fv-cobalt); }
[data-field="lemon"] .story-art.fv-map .map-pin circle { fill: var(--fv-vermillion); }

/* ---------------- designers ---------------- */
.designer-grid a { font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--fv-line); padding: 12px 8px; transition: background-color .2s ease, padding .2s ease; }
.designer-grid a:hover { background: var(--fv-lemon); padding-left: 14px; }

/* ---------------- panels: blocks of colour ---------------- */
.panel { border-radius: 0; }
.panel.cream.fv-field {
  background: var(--fv-f); color: var(--fv-inkc); border: 0; overflow: hidden;
  display: flex !important; flex-direction: column; justify-content: space-between; min-height: 280px; padding: 32px;
}
.panel.cream.fv-field > *:not(.fv-deco) { position: relative; z-index: 1; }
.panel.cream.fv-field h3 { font-size: clamp(26px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
.panel.cream.fv-field p { font-weight: 400 !important; font-size: 15px; max-width: 34ch; }

/* ---------------- product cards: each piece its own plate ---------------- */
.p-card .art { border-radius: 0; }
.p-card .art.fv-field { aspect-ratio: 4 / 5; background: var(--fv-f); }
.p-card .art.fv-field > svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: none !important; }
.p-card .art.fv-field .staging { left: 9%; top: 8%; width: 82%; height: 80%; inset: auto; z-index: 1; }
.p-card .art.fv-field .staging.fv-win { left: 9%; top: 8%; }
.p-card:hover .art.fv-field .staging { -webkit-mask-size: 110% 110%; mask-size: 110% 110%; }
.p-card .art.fv-field .art3d { background: var(--fv-f); z-index: 2; }
.p-card .flag { background: var(--fv-white); color: var(--fv-black); border-radius: 0; font-weight: 500; z-index: 3; }
.p-card .wish { border-radius: 0; z-index: 3; }
.p-card .r3-tag { border-radius: 0; }
.p-card h3 { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.p-card .by { font-weight: 400; }
.p-card .discover span { font-weight: 500; border-bottom-width: 2px; }
.card-grid { gap: 48px 16px; }

/* ---------------- listing controls ---------------- */
.chip { border-radius: 0; border-width: 2px; font-weight: 500; }
.chip:hover { background: var(--fv-lemon); }
.chip.on { background: var(--fv-black); color: var(--fv-white); border-color: var(--fv-black); }
.sort-pill { border-radius: 0; background: var(--fv-white); border-width: 2px; }
.check input { accent-color: var(--fv-cobalt); }
.plp-head h1 { font-size: clamp(48px, 6vw, 5.5rem); }

/* ---------------- product page ---------------- */
.pdp-hero { border-radius: 0; }
.pdp-hero.fv-field {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px);
  align-items: end; min-height: min(100svh, 960px); overflow: hidden;
  padding: calc(var(--header-h) + clamp(24px, 4vh, 48px)) var(--pad-x) clamp(40px, 6vh, 72px);
}
.pdp-hero.fv-field .media { display: none; }
.pdp-hero.fv-field .staging-hero {
  position: relative; inset: auto; grid-column: 2; grid-row: 1; z-index: 1;
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; align-self: center;
  max-height: calc(100svh - var(--header-h) - 96px);
}
.pdp-hero.fv-field .copy {
  position: relative; inset: auto; grid-column: 1; grid-row: 1; z-index: 3; padding: 0;
  flex-direction: column; align-items: flex-start; gap: 28px; color: var(--fv-inkc);
}
.pdp-hero.fv-field h1 { font-size: clamp(64px, 8vw, 6rem); }
.pdp-hero.fv-field .by { font-size: 16px; font-weight: 400; }
.config-card { border-radius: 0; border-width: 2px; }
.config-card:hover { border-color: var(--fv-black); }
.config-card.on { border-color: var(--fv-black); background: var(--fv-lemon); }
.config-card .c-art, .config-card .qs { border-radius: 0; }
.buy-bar { border-radius: 0; border-width: 2px; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .35); }
.viewer3d { border-radius: 0; }
.r3-hint { border-radius: 0; }

/* ---------------- overlays ---------------- */
.drawer { border-radius: 0; top: 0; right: 0; bottom: 0; }
.toast { border-radius: 0; }

/* ---------------- footer ---------------- */
.site-footer { background: var(--fv-black); color: var(--fv-white); border-top: 0; --line: rgba(255, 255, 255, .14); }
.site-footer::before { display: none; }
.footer-news h3 { color: var(--fv-white); font-weight: 600; letter-spacing: -.035em; }
.footer-news .social, .news-check, .footer-base { color: rgba(255, 255, 255, .74); }
/* the link columns sit on a cream cut sheet (compose/global.css): dark ink on every page */
.footer-cols li a { color: #34322e; }
.footer-news .social a { color: var(--fv-white); }
.news-form { border-bottom: 2px solid var(--fv-white); }
.news-form input { color: var(--fv-white); }
.news-form input::placeholder { color: rgba(255, 255, 255, .6); }
.news-form button { color: var(--fv-lemon); font-weight: 600; }
.news-check input { accent-color: var(--fv-lemon); }
.news-check a { color: var(--fv-white); }
.footer-cols h4 { color: var(--fv-black); font-weight: 600; }
.footer-cols li a:hover { color: var(--fv-black); opacity: 1; }
.back-top { color: var(--fv-white); }

/* ---------------- responsive ---------------- */
@media (max-width: 940px) {
  .hero.fv-field, .pdp-hero.fv-field, .banner.fv-field { grid-template-columns: 1fr; }
  .hero.fv-field .media, .pdp-hero.fv-field .staging-hero { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1; max-height: none; }
  .hero.fv-field .copy, .pdp-hero.fv-field .copy { grid-row: 2; }
  .banner.fv-field .art, .banner.fv-field.fv-alt .art { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3; margin: 24px 24px 0; }
  .banner.fv-field .copy, .banner.fv-field.fv-alt .copy { grid-column: 1; grid-row: 2; padding: 28px 24px 36px; }
  .gate-half.fv-field { min-height: 78svh; }
  .hero.fv-field, .pdp-hero.fv-field { min-height: 0; align-items: start; gap: 32px; padding-bottom: 48px; }
}
@media (max-width: 560px) {
  .tile-row, .tile-row.six, .tile-row.five { grid-template-columns: 1fr 1fr; }
  .display { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .fv-win { transition: none; }
}

/* ================================================================
   Carried through every page
   ================================================================ */

/* ---------------- the frieze (pages that do not open in colour) ---------------- */
.fv-frieze {
  position: relative; overflow: hidden; height: clamp(96px, 11vw, 168px);
  background: var(--fv-f); pointer-events: none;
}
.fv-frieze .fv-shape { position: absolute; }

/* ---------------- the poured band that opens every footer ---------------- */
.fv-foot-pour {
  position: relative; height: clamp(160px, 18vw, 260px);
  background: var(--fv-black); cursor: crosshair; touch-action: pan-y;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.site-footer { margin-top: 0; }
.page > :last-child:not(.fv-field):not(.section) { margin-bottom: clamp(56px, 8vw, 110px); }

/* the entrance doors take a hand pour */
.gateway { cursor: crosshair; }
.gateway .gate-half .copy .pill { cursor: pointer; }

/* ---------------- forms ---------------- */
.field input, .field select, .field textarea, #promoInput, .sort-pill, #storeSearch {
  border-radius: 0; border-width: 2px; border-color: #d6d6d2;
}
/* fields are white paper wherever they sit, so what is typed is always ink, never the panel's colour */
.field input, .field select, .field textarea { background-color: var(--fv-white, #fff); color: var(--fv-black, #121212); -webkit-text-fill-color: var(--fv-black, #121212); }
.field input::placeholder, .field textarea::placeholder { color: #6b6b66; -webkit-text-fill-color: #6b6b66; opacity: 1; }
/* on a dark field the labels and hints take the field's light ink */
[data-ink="light"] .field label { color: rgba(255, 255, 255, .86); font-size: 12.5px; }
[data-ink="light"] .field .err { color: #f6c928; }
/* labels and hints open with a capital, like every other line of the site */
.field label::first-letter, .field .err::first-letter, .form-note::first-letter { text-transform: uppercase; }
.field input:focus, .field select:focus, .field textarea:focus, #promoInput:focus, #storeSearch:focus { border-color: var(--fv-black); outline: none; }

/* ---------------- checkout: the order summary is a cobalt plate ---------------- */
.co-summary.panel {
  background: var(--fv-cobalt); color: var(--fv-white); border: 0; border-radius: 0;
  position: sticky; overflow: hidden;
}
.co-summary.panel * { color: inherit; }
.co-summary.panel .totals-row, .co-summary.panel small, .co-summary.panel p, .co-summary.panel .var, .co-summary.panel [class*="sub"] { color: rgba(255, 255, 255, .86) !important; }
.co-summary.panel hr, .co-summary.panel .rule { border-color: rgba(255, 255, 255, .24); }
.co-summary.panel #promoInput { background: var(--fv-white); color: var(--fv-black); border-color: var(--fv-white); }
.co-summary.panel button { background: var(--fv-lemon); color: var(--fv-black); border: 0; }
.co-summary.panel button:hover { background: var(--fv-white); }
.co-summary.panel { padding-bottom: 150px; }
.co-summary.panel::after {
  content: ""; position: absolute; right: -24px; bottom: -70px; width: 150px; height: 200px; pointer-events: none;
  background: var(--fv-lemon);
  -webkit-mask: var(--fv-frond) center / contain no-repeat; mask: var(--fv-frond) center / contain no-repeat;
  opacity: .95;
}
.co-summary.panel > * { position: relative; z-index: 1; }

/* ---------------- cart drawer ---------------- */
.drawer-head { background: var(--fv-accent); color: var(--fv-white); border-bottom: 0; }
html[data-house="editions"] .drawer-head { background: var(--fv-lemon); color: var(--fv-black); }
.drawer-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.drawer-head .icon-btn { color: inherit; }
.cart-line .art { border-radius: 0; }
.qty { border-radius: 0; }
.scrim-el { background: rgba(18, 18, 18, .55); }

/* ---------------- toasts ---------------- */
.toast { background: var(--fv-black); color: var(--fv-white); border-radius: 0; font-weight: 500; }
.toast.cream { background: var(--fv-lemon); color: var(--fv-black); }

/* ---------------- stores: a cut-paper map ---------------- */
.store-map { border-radius: 0; border: 0; background: var(--fv-cobalt); }
.store-map svg > rect:first-of-type { fill: var(--fv-cobalt); }
.store-map svg path { fill: var(--fv-white); stroke: none; }
.store-map svg > g:not(.map-pin):not([class]) { fill: var(--fv-white); stroke: none; }
.store-map .map-pin circle { fill: var(--fv-lemon); stroke: var(--fv-black); }
.store-map .map-pin.on circle { fill: var(--fv-vermillion); }
.store-map svg text { fill: var(--fv-white); }
.store-list { border-radius: 0; border: 2px solid var(--fv-black); }
.store-item:hover, .store-item.on { background: var(--fv-lemon); }
.store-item .kind { color: var(--fv-cobalt); font-weight: 600; }
.store-item p { font-weight: 400; }
.map-card { border-radius: 0; }

/* ---------------- product page details ---------------- */
.viewer3d { background: var(--fv-white); box-shadow: inset 0 0 0 2px var(--fv-black); }
#viewer3d rect[fill="url(#r3bg)"] { fill: #f3f3f0; }
#pdpWish { border-radius: 0 !important; border-width: 2px !important; }
.swatch { border-radius: 0; }
.swatch.on::after { border-radius: 0; border-width: 2px; }
.acc-item > button { font-weight: 500; }
.demo-note { border-radius: 0; background: var(--fv-lemon); font-weight: 400; }
.panel { border-width: 2px; }

/* the 3D hint wraps instead of widening the page on phones */
.r3-hint { white-space: normal; max-width: calc(100% - 32px); text-align: center; }

/* ================================================================
   Panel round 1: the art frames the furniture; words on crisp slips
   ================================================================ */

/* display voice: a grotesque with a hand in it, ink traps like scissor nicks */
:root { --fv-display: 'Bricolage Grotesque', 'Inter', sans-serif; }
.display, .section-title, .gate-half .copy h2, .pdp-hero h1, .plp-head h1, .story-copy h3,
.panel.cream.fv-field h3, .footer-news h3, .banner .section-title, .tag-name {
  font-family: var(--fv-display); font-optical-sizing: auto; letter-spacing: -.035em;
}
.display, .pdp-hero h1, .gate-half .copy h2 { font-weight: 700; }
.section-title, .plp-head h1, .story-copy h3, .panel.cream.fv-field h3, .footer-news h3 { font-weight: 650; }

/* poured bands: the words sit on a white slip laid on the painting */
.banner.fv-pour .copy {
  background: var(--fv-white); color: var(--fv-black); padding: clamp(28px, 3.4vw, 48px) clamp(28px, 4vw, 56px);
  max-width: min(640px, 86%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.banner.fv-pour .copy .kicker, .banner.fv-pour .copy .lede, .banner.fv-pour .copy p { color: var(--fv-black) !important; }
.banner.fv-pour .section-title { font-size: clamp(48px, 6vw, 5.5rem); color: var(--fv-black); }
.banner.fv-pour .pill { background: var(--fv-black); color: var(--fv-white); }
.banner.fv-pour .pill:hover { background: var(--fv-accent); color: var(--fv-white); }

/* the product hero carries the price */
.fv-price { font-size: 16px; font-weight: 400; display: flex; gap: 8px; align-items: baseline; margin-top: -12px; }
.fv-price b { font-size: 22px; font-weight: 600; }

/* grey secondary text reaches 4.5:1 */
:root { --gray: #595959; --gray-2: #6b6b6b; }
.p-card .by, .p-card .from, .plp-bar .count, .check, .field label, .kicker, .co-summary small { font-weight: 400; }

/* the closed cart drawer casts no shadow onto the page edge */
.drawer:not(.open) { box-shadow: none; visibility: hidden; }
.drawer { transition: transform .5s var(--ease), visibility .5s; }

/* search: the close control always fits */
.search-top input { min-width: 0; }
.search-top > * { flex-shrink: 0; }
.search-top input { flex-shrink: 1; }

/* splash: a cobalt plate, one frond, the count */
.splash { background: var(--fv-cobalt) !important; color: var(--fv-white); }
.splash .drip-splash { display: none; }
.splash h1 { font-family: var(--fv-display); font-weight: 700; letter-spacing: -.04em; color: var(--fv-white); }
.splash .counter { color: var(--fv-lemon); font-family: var(--fv-display); font-weight: 600; }
.splash::after {
  content: ""; position: absolute; right: 6%; top: 12%; width: min(34vw, 380px); height: min(46vw, 520px);
  background: var(--fv-white); pointer-events: none;
  -webkit-mask: var(--fv-frond) center / contain no-repeat; mask: var(--fv-frond) center / contain no-repeat;
  transform: rotate(-14deg);
}

/* cut windows vary per piece */
.fv-win[data-win="disc"] { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.p-card .art.fv-field .staging[data-win="disc"] { left: 9%; top: 11%; width: 82%; height: 72%; }

/* reading text is never hairline */
.page p, .page li, .page td, .footer-cols li a, .news-check { font-weight: 400; }


@media (max-width: 560px) {
  .logo small { display: block; width: max-content; margin-top: 6px; font-size: 8px; padding: 3px 6px 2px; }
  .logo { font-size: 21px; }
}

/* ---------------- round 3 ---------------- */
.fv-concierge { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.24); display: grid; gap: 10px; font-size: 13.5px; line-height: 1.5; }
.fv-concierge b { color: var(--fv-lemon); font-weight: 600; }
.fv-concierge a { color: var(--fv-white); text-decoration: underline; text-underline-offset: 3px; }
.co-summary.panel { padding-bottom: 170px; }

/* the header condenses when you scroll */
.site-header .header-top { transition: height .3s var(--fv-ease); }
html.fv-scrolled .has-announce .site-header, html.fv-scrolled body.has-announce .site-header { top: 0; }
html.fv-scrolled .announce { transform: translateY(-100%); }
.announce { transition: transform .3s var(--fv-ease); }
html.fv-scrolled .site-header .header-top { height: 58px; }
html.fv-scrolled .site-header .world-nav { height: 42px; }
html.fv-scrolled .logo small { display: none; }

/* search overlay is opaque; toasts never cover checkout */
.search-overlay { background: var(--fv-white) !important; backdrop-filter: none; }
.search-top input { padding-left: 4px; }
@media (max-width: 560px) { .toast-stack { top: 12px; bottom: auto; } }


/* ================= kept from later rounds ================= */
.fv-weave, .fv-rule { display: none !important; }
.story-art.fv-map svg { overflow: visible; }
.story-art.fv-map svg > g:not(.map-pin):not(.fv-skein) { display: none; }
.story-art.fv-map .fv-land { fill: var(--fv-white) !important; stroke: none !important; }
[data-field="lemon"] .story-art.fv-map .fv-land { fill: var(--fv-cobalt) !important; }
.story-art.fv-map .fv-skein path { fill: none !important; stroke-linecap: round; stroke-linejoin: round; }
.story-art.fv-map .fv-skein-heavy { stroke: #121212 !important; stroke-width: 4.5; }
.story-art.fv-map .fv-skein-thread { stroke: var(--fv-lemon) !important; stroke-width: 1.6; }
.story-art.fv-map .fv-spatter circle { fill: #121212 !important; }
.story-art.fv-map .map-pin .pin-inner > circle:last-of-type { fill: var(--fv-vermillion) !important; stroke: #121212 !important; stroke-width: 2.5 !important; }
.story-art.fv-map .fv-drop-run { fill: none !important; stroke: var(--fv-vermillion) !important; stroke-width: 5; stroke-linecap: round; }
.story-art.fv-map svg > text { display: none; }

.fv-viewing { display: inline-block; margin-left: 14px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; color: inherit; }

/* the house name keeps its own case wherever it stands (see brand.js) */
.brand-word { text-transform: none; }
.brand-lead { display: inline-block; text-decoration: inherit; text-decoration-thickness: inherit; text-underline-offset: inherit; }

/* paper pinned as you arrive (delight.js pinShapes): a cut-out waits lifted and turned, then
   settles with a small overshoot, like a sheet pressed onto the wall */
@media (prefers-reduced-motion: no-preference) {
  .dl-pin { translate: 0 22px; scale: .9; filter: drop-shadow(0 16px 12px rgba(18,18,18,.2)); transition: translate .9s cubic-bezier(.2,1.5,.4,1), scale .9s cubic-bezier(.2,1.5,.4,1), filter 1.1s ease; }
  .dl-pin.dl-pinned { translate: 0 0; scale: 1; filter: drop-shadow(0 0 0 rgba(18,18,18,0)); }
}


/* cut-outs may cross the window's edge, but the page never scrolls sideways; clip (not
   hidden) keeps every sticky element working */
html, body { overflow-x: clip; }

/* one shoot: every product photograph shares the same soft, warm editorial grade */
img.pimg, img.staging, img.staging-hero, .ls-card .art img, .pd-look-photo img, .ih-plate-art img, .ls-note-piece img {
  filter: brightness(1.03) contrast(.97) saturate(.9) sepia(.06);
}