/* Section variants and image treatment for base designs (data attributes on .bp, set by blueprint/design.js).
   Without the attributes the page looks exactly as before. Sized against the page's own width (cqi). */

/* ---------- Hero ---------- */
/* Split: words left, picture right. */
.bp[data-hero="split"] .bp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 5cqi, 72px); align-items: center; }
.bp[data-hero="split"] .bp-hero > * { grid-column: 1; }
.bp[data-hero="split"] .bp-hero > .bp-hero-media { grid-column: 2; grid-row: 1 / span 4; margin-top: 0 !important; aspect-ratio: 4 / 5; }
.bp[data-hero="split"] .bp-h1 { font-size: var(--bp-h1-size, calc(clamp(2.4rem, 7cqi, 6.2rem) * var(--bp-scale, 1))) !important; }
@container bp (max-width: 640px) {
  .bp[data-hero="split"] .bp-hero { display: block; }
  .bp[data-hero="split"] .bp-hero > .bp-hero-media { margin-top: 32px !important; aspect-ratio: 4 / 3; }
}

/* Full bleed: the picture is the background, the words sit on a scrim at the bottom. */
.bp[data-hero="bleed"] .bp-hero { position: relative; isolation: isolate; min-height: var(--bp-hero-minh, min(var(--vh, 100vh), 920px)); aspect-ratio: var(--bp-hero-ratio, auto); margin-inline: var(--bp-hero-inset, 0px); display: flex; flex-direction: column; justify-content: flex-end; max-width: none; padding-bottom: clamp(32px, 6cqi, 88px); color: var(--bp-on-image, #fff); }
.bp[data-hero="bleed"] .bp-hero > :not(.bp-hero-media) { position: relative; z-index: 1; width: 100%; max-width: var(--bp-maxw); margin-inline: auto; }
.bp[data-hero="bleed"] .bp-hero > .bp-hero-media { position: absolute; inset: 0; z-index: 0; margin: 0 !important; aspect-ratio: auto; border-radius: 0; max-width: none; }
.bp[data-hero="bleed"] .bp-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .15) 55%, transparent); pointer-events: none; }
.bp[data-hero="bleed"] .bp-today, .bp[data-hero="bleed"] .bp-lead { color: color-mix(in srgb, var(--bp-on-image, #fff) 86%, transparent); }
.bp[data-hero="bleed"] .bp-hero .bp-link { color: #fff; }

/* Type only: no picture, the headline carries the first screen. */
.bp[data-hero="type"] .bp-hero > .bp-hero-media { display: none; }
.bp[data-hero="type"] .bp-h1 { max-width: 14ch; font-size: var(--bp-h1-size, calc(clamp(3.2rem, 14cqi, 12rem) * var(--bp-scale, 1))) !important; }
.bp[data-hero="type"] .bp-hero { padding-bottom: clamp(48px, 10cqi, 140px); border-bottom: 1px solid var(--bp-rule); }

/* ---------- Products ---------- */
/* List: a price-list rhythm, small pictures. */
.bp[data-products="list"] .bp-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bp[data-products="list"] .bp-card-link { display: grid; grid-template-columns: clamp(64px, 12cqi, 128px) minmax(0, 1fr) auto; column-gap: clamp(12px, 3cqi, 32px); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bp-rule); }
.bp[data-products="list"] .bp-card .bp-media { grid-row: 1 / span 2; margin: 0 !important; aspect-ratio: 1 / 1; }
.bp[data-products="list"] .bp-card h3, .bp[data-products="list"] .bp-card p { grid-column: 2; margin: 0 !important; }
.bp[data-products="list"] .bp-card .bp-price { grid-column: 3; grid-row: 1 / span 2; }

/* One leads: the first product takes a double cell. */
.bp[data-products="lead"] .bp-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.bp[data-products="lead"] .bp-card:first-child { grid-column: span 2; grid-row: span 2; }
.bp[data-products="lead"] .bp-card:first-child h3 { font-size: clamp(1.4rem, 3.4cqi, 2.4rem); }
@container bp (max-width: 420px) { .bp[data-products="lead"] .bp-card:first-child { grid-column: auto; grid-row: auto; } }

/* ---------- Images ---------- */
.bp[data-ratio]:not([data-ratio="auto"]) .bp-card .bp-media,
.bp[data-ratio]:not([data-ratio="auto"]):is([data-hero="stacked"], [data-hero="type"]) .bp-hero-media { aspect-ratio: var(--bp-ratio); }
.bp[data-treat="mono"] img { filter: grayscale(1) contrast(1.06); }
.bp[data-treat="duo"] .bp-media, .bp[data-treat="duo"] .bp-wide { background: var(--bp-accent); }
.bp[data-treat="duo"] .bp-media img, .bp[data-treat="duo"] .bp-wide img { filter: grayscale(1) contrast(1.2) brightness(1.05); mix-blend-mode: multiply; }

/* The business's own logo in the header. */
.bp .bp-logo img.bd-logo { height: 1.8em; width: auto; max-width: 9em; object-fit: contain; display: block; }

/* Poster: a full-bleed picture, a huge headline in caps across the middle (after Don Molinico). */
.bp[data-hero="poster"] .bp-hero { position: relative; isolation: isolate; min-height: min(var(--vh, 100vh), 940px); display: grid; place-items: var(--bp-hero-place, center) center; max-width: none; padding-block: clamp(48px, 8cqi, 120px); color: var(--bp-on-image, #fff); text-align: center; }
.bp[data-hero="poster"] .bp-hero > .bp-hero-media { position: absolute; inset: 0; z-index: 0; margin: 0 !important; aspect-ratio: auto; border-radius: 0; max-width: none; }
.bp[data-hero="poster"] .bp-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: rgb(0 0 0 / var(--bp-hero-scrim, .32)); pointer-events: none; }
/* A hero that carries only the headline (Don Molinico): kicker, lead and buttons stay out of it. */
.bp[data-herocopy="headline"] .bp-hero :is(.bp-today, .bp-lead, .bp-cta) { display: none; }
/* Small labels beside the headline's first line (placed by applyFurniture). */
.bp-flank { position: absolute; z-index: 2; width: min-content; font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); font-size: clamp(.8rem, 1.9cqi, 1.9rem); line-height: 1; text-transform: uppercase; text-align: center; color: var(--bp-on-image, #fff); translate: 0 -50%; pointer-events: none; }
.bp-flank-l { translate: -100% -50%; }
.bp-hero:has(> .bp-flank) { position: relative; }
@container bp (max-width: 700px) { .bp-flank { display: none; } }
.bp:not([data-hero="poster"], [data-hero="bleed"]) .bp-flank { color: var(--bp-ink); }
.bp[data-hero="poster"] .bp-hero-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0; width: 100%; max-width: none; }
.bp[data-hero="poster"] .bp-h1 { max-width: 12ch; margin-inline: auto; text-transform: uppercase; line-height: .86; font-size: var(--bp-h1-size, calc(clamp(3.4rem, 15cqi, 15rem) * var(--bp-scale, 1))) !important; }
.bp[data-hero="poster"] .bp-today, .bp[data-hero="poster"] .bp-lead { color: color-mix(in srgb, var(--bp-on-image, #fff) 90%, transparent); margin-inline: auto; }
.bp[data-hero="poster"] .bp-cta { justify-content: center; }
.bp[data-hero="poster"] .bp-hero .bp-link { color: #fff; }

/* Two pictures: side by side across the full width, the words on the first (after WatchHouse). */
.bp[data-hero="pair"] .bp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; max-width: none; padding: 0 var(--bp-hero-inset, var(--bp-pad-x)); min-height: var(--bp-hero-minh, min(calc(var(--vh, 100vh) * .9), 860px)); }
.bp[data-hero="pair"] .bp-hero > .bp-hero-media { aspect-ratio: var(--bp-hero-ratio, auto) !important; }
.bp[data-hero="pair"] .bp-hero > .bp-hero-media { grid-row: 1; grid-column: 1; margin: 0 !important; aspect-ratio: auto; height: 100%; min-height: 0; max-width: none; }
.bp[data-hero="pair"] .bp-hero > .bp-hero-media-2 { grid-column: 2; }
.bp[data-hero="pair"] .bp-hero-copy { grid-row: 1; grid-column: 1; z-index: 1; align-self: end; justify-self: stretch; width: 100%; max-width: none; margin: 0 !important; padding: clamp(16px, 3cqi, 40px); padding-top: clamp(48px, 10cqi, 140px); color: var(--bp-on-image, #fff); background: linear-gradient(to top, rgb(0 0 0 / .6), transparent); }
.bp[data-hero="pair"] .bp-h1 { font-size: var(--bp-h1-size, calc(clamp(2.2rem, 5.6cqi, 5rem) * var(--bp-scale, 1))) !important; max-width: 14ch; }
.bp[data-hero="pair"] .bp-today, .bp[data-hero="pair"] .bp-lead { color: color-mix(in srgb, var(--bp-on-image, #fff) 88%, transparent); }
.bp[data-hero="pair"] .bp-hero .bp-link { color: #fff; }
@container bp (max-width: 640px) {
  .bp[data-hero="pair"] .bp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bp[data-hero="pair"] .bp-hero > .bp-hero-media { aspect-ratio: 4 / 5; height: auto; }
  .bp[data-hero="pair"] .bp-hero > .bp-hero-media-2 { display: none; }
}

/* The second hero picture only belongs to Two pictures (a width switch may turn the hero into another variant). */
.bp:not([data-hero="pair"]) .bp-hero-media-2 { display: none; }

/* Products in a row that scrolls sideways (after WatchHouse); the card width can come from a design. */
.bp[data-products="row"] .bp-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: var(--bp-card-w, 24cqi); gap: clamp(8px, 1.2cqi, 16px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; margin-inline: calc(-1 * var(--bp-pad-x)); padding-inline: var(--bp-pad-x); scroll-padding-inline: var(--bp-pad-x); }
.bp[data-products="row"] .bp-grid::-webkit-scrollbar { display: none; }
.bp[data-products="row"] .bp-card { scroll-snap-align: start; min-width: 0; }

/* Navigation on narrow pages: a bar at the bottom, or a menu button (data-nav is set by the width watcher). */
.bp-bottombar, .bp-burger { display: none; }
.bp[data-nav="links"] .bp-nav { display: flex; }
.bp[data-nav="bottom"] .bp-nav, .bp[data-nav="burger"] .bp-nav:not(.is-open) { display: none; }
.bp[data-nav="bottom"] .bp-head .bp-call { display: none; }
.bp[data-nav="bottom"] .bp-bottombar { display: flex; position: sticky; bottom: 0; z-index: 40; justify-content: space-between; gap: 8px; padding: 14px var(--bp-pad-x) calc(14px + env(safe-area-inset-bottom)); background: var(--bp-bg); border-top: 1px solid var(--bp-rule); font-family: var(--bp-body); font-size: .95rem; }
.bp-bottombar a { color: var(--bp-ink); text-decoration: none; }
.bp[data-nav="burger"] .bp-burger { display: inline-flex; padding: .45em .9em; border: 1px solid var(--bp-ink); border-radius: var(--bp-radius); background: none; color: var(--bp-ink); font: inherit; cursor: pointer; }
.bp[data-nav="burger"] .bp-nav.is-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: .6em; padding: 16px var(--bp-pad-x); background: var(--bp-bg); border-bottom: 1px solid var(--bp-rule); z-index: 40; }

/* ---------- Header: the logo tab (after Don Molinico) ---------- */
.bp[data-header="tab"] .bp-head { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; min-height: 0; padding: 12px var(--bp-pad-x) 0; margin-bottom: calc(-1 * var(--bp-head-h, 56px)); background: transparent; border: 0; pointer-events: none; }
/* The tab opens the curtain menu itself: no separate menu button. */
.bp.has-tab-menu .bp-burger { display: none !important; }
.bp[data-header="tab"] .bp-head > * { pointer-events: auto; }
.bp[data-header="tab"] .bp-nav-l { justify-self: start; }
.bp[data-header="tab"] .bp-nav-r { justify-self: end; }
.bp[data-header="tab"] .bp-nav { gap: 1.4em; font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); font-size: var(--bp-nav-size, .78rem); text-transform: uppercase; letter-spacing: .02em; }
.bp[data-header="tab"] .bp-nav a { color: var(--bp-nav-ink); }
.bp[data-header="tab"] .bp-head .bp-call { display: none; }
.bp .bp-head .bp-tab, .bp .bp-head .bp-tab:hover { color: var(--bp-dark-ink); }
.bp-tab { position: relative; margin-top: -12px; display: grid; justify-items: center; align-content: center; gap: 6px; width: var(--bp-tab-w, auto); padding: 10px clamp(14px, 2cqi, 24px) 12px; background: var(--bp-dark); color: var(--bp-dark-ink); text-decoration: none; font-family: var(--bp-display); font-weight: var(--bp-display-wght, 500); font-size: clamp(1.1rem, 2.2cqi, 1.9rem); line-height: .9; text-transform: uppercase; text-align: center; transition: padding .35s cubic-bezier(.2, .7, .2, 1); }
.bp-tab-full b { font-weight: inherit; display: block; font-size: 1.25em; }
.bp-tab-full { position: relative; display: grid; justify-items: center; }
/* The logo's own small flanking labels, beside its first line. */
.bp-tab-flank { position: absolute; top: .2em; width: max-content; font-size: .2em; line-height: 1.05; }
.bp-tab-flank-l { right: calc(100% + .5em); }
.bp-tab-flank-r { left: calc(100% + .5em); }
.bp-tab-l1 { position: relative; display: inline-block; }
.bp-tab-lines { width: max(34px, 1.6em); height: max(5px, .14em); border-top: max(1.5px, .03em) solid currentColor; border-bottom: max(1.5px, .03em) solid currentColor; opacity: .85; }
.bp-tab-mono { display: none; font-size: 1.4em; line-height: 1; }
.bp[data-header="tab"].is-scrolled .bp-tab { padding: 8px 12px 10px; }
.bp[data-header="tab"].is-scrolled .bp-tab-full { display: none; }
.bp[data-header="tab"].is-scrolled .bp-tab-mono { display: block; }
@container bp (max-width: 700px) {
  .bp[data-header="tab"] .bp-nav-l, .bp[data-header="tab"] .bp-nav-r { display: none; }
  .bp[data-header="tab"] .bp-tab:not([style*="font-size"]) { font-size: 1.05rem; }
}
.bp[data-header="tab"].is-scrolled .bp-tab { width: auto; font-size: clamp(1.1rem, 2.2cqi, 1.9rem) !important; }

/* ---------- Menu: a full-screen curtain with the links set large ---------- */
.bp-menu { display: none; position: sticky; top: 0; z-index: 80; height: var(--vh, 100vh); margin-bottom: calc(-1 * var(--vh, 100vh)); background: var(--bp-dark); color: var(--bp-dark-ink); overflow: auto; }
.bp.is-menu .bp-menu { display: grid; align-content: start; justify-items: center; gap: clamp(16px, 4cqi, 40px); padding: clamp(20px, 4cqi, 48px) var(--bp-pad-x); }
.bp-menu-close { position: absolute; top: 12px; right: 16px; border: 0; background: none; color: inherit; font-size: 2rem; line-height: 1; cursor: pointer; }
.bp-menu-logo { color: inherit; text-decoration: none; font-family: var(--bp-display); font-size: clamp(1.3rem, 3cqi, 2.4rem); text-transform: uppercase; text-align: center; line-height: .9; }
.bp-menu-logo b { display: block; font-weight: inherit; }
.bp-menu-list { display: grid; width: min(100%, 980px); }
.bp-menu-list a { display: block; padding: .12em 0 .02em; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); color: inherit; text-decoration: none; text-align: center; font-family: var(--bp-display); font-weight: var(--bp-display-wght, 400); font-size: clamp(2.6rem, 9cqi, 7rem); line-height: 1; text-transform: uppercase; }
.bp-menu-list a:hover { color: var(--bp-bg); }

/* ---------- Intro: a curtain with the logo that shrinks into the tab, or lifts away ---------- */
.bp-curtain { position: sticky; top: 0; z-index: 90; height: var(--vh, 100vh); margin-bottom: calc(-1 * var(--vh, 100vh)); display: grid; place-items: center; background: var(--bp-dark); color: var(--bp-dark-ink); clip-path: inset(0 0 0 0); animation: bp-curtain-out .9s cubic-bezier(.7, 0, .2, 1) 1.5s forwards; }
.bp[data-header="tab"] .bp-curtain { animation-name: bp-curtain-tab; }
.bp-curtain-logo { font-family: var(--bp-display); font-size: clamp(2rem, 5cqi, 4.2rem); text-transform: uppercase; text-align: center; line-height: .9; opacity: 0; animation: bp-curtain-logo .5s ease-out .25s forwards; }
.bp-curtain-logo b { display: block; font-weight: inherit; }
@keyframes bp-curtain-logo { to { opacity: 1; } }
@keyframes bp-curtain-out { to { clip-path: inset(0 0 100% 0); } }
/* With a tab: the curtain scales down into the tab (its place and size measured by applyFurniture), then hands over. */
@keyframes bp-curtain-tab { to { transform: scale(var(--to-sx, .14), var(--to-sy, .1)); } }
@keyframes bp-curtain-logo-out { to { opacity: 0; } }
.bp[data-header="tab"] .bp-curtain { transform-origin: var(--to-x, 50%) 0; clip-path: none; animation-name: bp-curtain-tab, bp-curtain-out; animation-duration: .85s, .01s; animation-delay: 1.5s, 2.35s; animation-timing-function: cubic-bezier(.7, 0, .2, 1), linear; animation-fill-mode: forwards, forwards; }
.bp[data-header="tab"] .bp-curtain .bp-curtain-logo { animation: bp-curtain-logo .5s ease-out .25s forwards, bp-curtain-logo-out .25s ease-in 1.35s forwards; }
.bp.is-reduced .bp-curtain { display: none; }

/* ---------- Buttons: a ribbon with notched ends ---------- */
.bp[data-button="ribbon"] .bp-btn { border-radius: 0; padding-inline: 1.6em; clip-path: polygon(0 0, 100% 0, calc(100% - .7em) 50%, 100% 100%, 0 100%, .7em 50%); text-transform: uppercase; }
.bp[data-button="pill"] .bp-btn { border-radius: 999px; }