/* The grand theme (grand.js), over boutique.css. Owner 10-26: "a grand website, intense, our branding big big big".
   One committed look: the Imperium's night black, crimson and gold, the saw-tooth border of its flags, Cinzel at its
   heaviest. Every page gets the dark ground and the large mark; the home page is the grand one. */
:root {
  --g-night: #0f0b0a; --g-black: #171211; --g-crimson: #8e1b22; --g-wine: #4a0f14; --g-gold: #d4a457; --g-gold-hi: #f0cf8a;
  --g-bone: #efe4cc; --g-muted: #b9a993; --g-olive: #2b2f1c; --g-purple: #2b1840;
  --g-display: "Cinzel", Georgia, serif;
  --paper: #171211; --stone: #211a18; --ink: #efe4cc; --muted: #b9a993; --line: #3a2c28;   /* the boutique's tokens, made dark */
  color-scheme: dark;
}
body.grand { background: var(--g-night); color: var(--g-bone); }

/* ── the mast: the emblem and OCTAVIUM large, a crimson bar under it edged with the flag's gold teeth ─────────────── */
.grand .mast { background: var(--g-night); border-bottom: 0; color: var(--g-bone); }
.grand .mast::after { content: ""; display: block; height: 10px; background:
  linear-gradient(135deg, var(--g-gold) 25%, transparent 25%) 0 0 / 14px 10px,
  linear-gradient(225deg, var(--g-gold) 25%, transparent 25%) 0 0 / 14px 10px, var(--g-crimson); }
.grand .mark { gap: 4px; }
.grand .mark img { width: 64px; height: auto; filter: drop-shadow(0 2px 10px rgba(212, 164, 87, .25)); }
.grand .mark span { display: flex; flex-direction: column; align-items: center; letter-spacing: 0; margin: 0; }
.grand .mark b { font: 900 clamp(26px, 3.4vw, 40px)/1 var(--g-display); letter-spacing: .16em; margin-right: -.16em; color: var(--g-gold); }
.grand .mark i { font: 700 10px/1.6 var(--g-display); font-style: normal; letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: var(--g-muted); }
.grand .mast-nav { font-family: var(--g-display); font-weight: 700; letter-spacing: .3em; }
.grand .mast-nav a[aria-current], .grand .mast-nav a:hover { color: var(--g-gold); border-color: var(--g-gold); }

/* ── the hero ─────────────────────────────────────────────────────────────────────────────────────────────── */
.g-home { overflow: hidden; }
.g-hero { position: relative; background:
  radial-gradient(ellipse 70% 60% at 50% 38%, rgba(142, 27, 34, .55), transparent 70%),
  radial-gradient(ellipse 120% 90% at 50% 100%, var(--g-wine), transparent 60%), var(--g-night); text-align: center; }
.g-teeth { height: 22px; background:
  linear-gradient(135deg, var(--g-gold) 25%, transparent 25%) 0 0 / 28px 22px,
  linear-gradient(225deg, var(--g-gold) 25%, transparent 25%) 0 0 / 28px 22px, var(--g-crimson);
  border-bottom: 3px solid var(--g-gold); }
.g-teeth.bottom { transform: scaleY(-1); }
.g-hero-in { display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 18px); padding-block: clamp(18px, 3.5vh, 44px) clamp(22px, 4vh, 52px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* owner 10-26: the whole emblem and the products must show on the first screen: the hero fits in about 70% of the
   window height */
.g-emblem { width: auto; height: min(30vh, 46vw, 340px); max-width: 80vw; filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .7)) drop-shadow(0 0 40px rgba(212, 164, 87, .18)); animation: g-rise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.g-brand { margin: 0; display: grid; justify-items: center; line-height: .9; }
.g-brand-big { font: 900 clamp(40px, min(14.4vw, 13vh), 200px)/.86 var(--g-display);   /* OCTAVIUM is 6.33 em wide: 14.4 vw fills 91% of the screen */ letter-spacing: .06em; margin-right: -.06em;
  background: linear-gradient(180deg, var(--g-gold-hi) 0%, var(--g-gold) 45%, #8d6526 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .45)); animation: g-rise 1.2s .15s cubic-bezier(.2, .7, .2, 1) both; }
.g-brand-sub { font: 700 clamp(13px, 2.2vw, 26px)/1.4 var(--g-display); letter-spacing: .62em; margin-right: -.62em; text-transform: uppercase; color: var(--g-bone); margin-top: .5em; }
.g-tag { margin: 0; font: 400 clamp(12px, 1.4vw, 15px)/1.6 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--g-muted); }
.g-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.g-btn { display: inline-block; padding: 15px 26px; background: var(--g-crimson); color: var(--g-bone); border: 1px solid var(--g-gold); text-decoration: none;
  font: 700 12px/1 var(--g-display); letter-spacing: .26em; text-transform: uppercase; transition: background .2s, color .2s; }
.g-btn:hover { background: var(--g-gold); color: var(--g-night); }
.g-btn.ghost { background: transparent; }
@keyframes g-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── the moving creed band ─────────────────────────────────────────────────────────────────────────────────── */
.g-marquee { background: var(--g-gold); color: var(--g-night); overflow: hidden; border-block: 3px solid var(--g-crimson); }
.g-track { display: flex; width: max-content; align-items: center; gap: 28px; padding: 14px 0; animation: g-slide 38s linear infinite; }
.g-track span { font: 900 clamp(16px, 2.2vw, 26px)/1 var(--g-display); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.g-track i { width: 10px; height: 10px; background: var(--g-crimson); transform: rotate(45deg); flex: none; }
@keyframes g-slide { to { transform: translateX(-50%); } }

/* ── a collection: its emblem huge beside its name, then a rail of pieces ──────────────────────────────────────── */
.g-col { position: relative; padding-block: clamp(48px, 7vw, 96px); border-bottom: 1px solid #2a201d; }
.g-col.tone-crimson { background: radial-gradient(ellipse 80% 70% at 20% 30%, #6d1219, transparent 70%), var(--g-wine); }
.g-col.tone-olive { background: radial-gradient(ellipse 80% 70% at 80% 30%, #3a3f25, transparent 70%), var(--g-olive); }
.g-col.tone-black { background: var(--g-black); }
.g-col.tone-purple { background: radial-gradient(ellipse 80% 70% at 20% 30%, #3e2259, transparent 70%), var(--g-purple); }
.g-col-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(20px, 5vw, 72px); max-width: 1240px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.g-col-head.flip .g-col-art { order: 2; }
.g-col-head:not(:has(.g-col-art)) { grid-template-columns: 1fr; text-align: center; }
.g-col-art { width: 100%; max-height: 520px; object-fit: contain; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .55)); }
.g-col-copy { min-width: 0; display: grid; gap: 12px; }
.g-kicker { margin: 0; font: 700 12px/1 var(--g-display); letter-spacing: .4em; text-transform: uppercase; color: var(--g-gold); }
.g-col h2 { margin: 0; font: 900 clamp(40px, 7.5vw, 112px)/.92 var(--g-display); letter-spacing: .02em; color: var(--g-bone); text-wrap: balance; text-shadow: 0 4px 0 rgba(0, 0, 0, .35); }
.g-line { margin: 0; max-width: 46ch; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--g-muted); }
.g-count { margin: 0; font: 700 12px/1 var(--g-display); letter-spacing: .3em; text-transform: uppercase; color: var(--g-gold); }
.g-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 36px max(16px, env(safe-area-inset-left, 0px)) 10px; max-width: 100%;
  scrollbar-color: var(--g-gold) transparent; }
.g-rail .card { flex: 0 0 clamp(220px, 24vw, 300px); scroll-snap-align: start; background: rgba(0, 0, 0, .28); border: 1px solid rgba(212, 164, 87, .25); }
.g-rail .card .meta { padding: 12px 14px 16px; }

/* ── every product card on the dark ground ─────────────────────────────────────────────────────────────────── */
.grand .card .meta h3 { font-family: var(--g-display); font-weight: 700; letter-spacing: .06em; color: var(--g-bone); }
.grand .card .price { color: var(--g-gold); }
.grand .card .plate { background: #efe9df; }
/* the boutique multiplies product photos into its light paper; on the dark ground that blackened them: every photo
   sits on its own light plate, unblended */
.grand img { mix-blend-mode: normal !important; }
.grand .stage, .grand .plate, .grand .thumbs button, .grand .thumb { background-color: #efe9df; }

/* ── the creed ────────────────────────────────────────────────────────────────────────────────────────────── */
.g-creed { display: grid; justify-items: center; gap: 18px; text-align: center; padding-block: clamp(56px, 9vw, 120px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(ellipse 60% 70% at 50% 40%, rgba(142, 27, 34, .4), transparent 70%), var(--g-night); }
.g-creed img { width: clamp(90px, 12vw, 150px); height: auto; }
.g-creed blockquote { margin: 0; display: grid; gap: .1em; font: 900 clamp(30px, 6vw, 84px)/1.05 var(--g-display); letter-spacing: .02em; color: var(--g-bone); }
.g-creed blockquote span:nth-child(2) { color: var(--g-gold); }

/* ── doors ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.g-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; padding-block: clamp(40px, 6vw, 72px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1320px; margin: 0 auto; }
.g-door { display: grid; align-content: end; gap: 6px; min-height: clamp(160px, 22vw, 280px); padding: 26px; text-decoration: none; color: var(--g-bone);
  background: linear-gradient(160deg, var(--g-crimson), var(--g-wine)); border: 1px solid var(--g-gold); position: relative; overflow: hidden; }
.g-door::before { content: ""; position: absolute; inset: 0 0 auto; height: 12px; background:
  linear-gradient(135deg, var(--g-gold) 25%, transparent 25%) 0 0 / 16px 12px, linear-gradient(225deg, var(--g-gold) 25%, transparent 25%) 0 0 / 16px 12px; }
.g-door b { font: 900 clamp(32px, 4vw, 54px)/1 var(--g-display); letter-spacing: .06em; }
.g-door span { font: 700 11px/1 var(--g-display); letter-spacing: .32em; text-transform: uppercase; color: var(--g-gold); }
.g-door:hover { background: linear-gradient(160deg, #a5242c, var(--g-crimson)); }

/* ── the boutique's other pages, made dark and grand ───────────────────────────────────────────────────────── */
.grand .cat-head h1, .grand .p-title, .grand h1 { font-family: var(--g-display); font-weight: 900; letter-spacing: .04em; color: var(--g-bone); }
.grand .chip { border-color: #4a3a33; color: var(--g-bone); }
.grand .chip.on { background: var(--g-crimson); border-color: var(--g-gold); color: var(--g-bone); }
.grand .foot { background: var(--g-black); color: var(--g-muted); border-top: 3px solid var(--g-crimson); }
.grand .foot h4 { color: var(--g-gold); font-family: var(--g-display); }
.grand select, .grand input { background: var(--g-black); color: var(--g-bone); }

@media (max-width: 760px) {
  .g-col-head, .g-col-head.flip { grid-template-columns: 1fr; text-align: center; }
  .g-col-head.flip .g-col-art { order: 0; }
  .g-col-art { max-height: 300px; }
  .g-line { margin-inline: auto; }
  .grand .mark img { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-track { animation: none; }
  .g-emblem, .g-brand-big { animation: none; }
}

/* the showcase straight under the hero: the newest pieces, large */
.g-show { background: var(--g-black); padding-block: 26px 34px; border-bottom: 3px solid var(--g-crimson); }
.g-show-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: 1320px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.g-show-head h2 { margin: 0; font: 900 clamp(24px, 3vw, 40px)/1 var(--g-display); letter-spacing: .06em; color: var(--g-gold); }
.g-show-head a { font: 700 12px/1 var(--g-display); letter-spacing: .3em; text-transform: uppercase; color: var(--g-bone); }
.g-show .g-rail { padding-top: 20px; }

/* the Personal Collection on the dark grand theme (owner 10-27: "fix the text background thing"): the boutique's dark
   brown text vanished into the black; the order cards (10-27) */
.pc-page .pc-lede, .pc-page .pc-item p, .pc-page .pc-foot, .pc-page .pc-note, .pc-page .pc-none { color: #e6dcc6; }
.pc-page .pc-who h2 { color: #f3e6c4; }
.pc-page .pc-who p { color: #d8c9a6; }
.pc-page .pc-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pc-page .pc-item { background: #17110f; border: 1px solid #3a2c1c; padding: 14px; }
.pc-page .pc-item h3 { color: #f0cf8a; }
.pc-page .pc-item .pc-price { color: #f0cf8a; font-weight: 600; letter-spacing: .06em; }
.pc-page .pc-art { background: #221815; }
.pc-page .pc-art.patch { background: #0d0b0b; }
.pc-page .pc-size, .pc-page .pc-ship select { min-height: 44px; padding: 0 12px; background: #0f0b0a; color: #f3e6c4; border: 1px solid #5a4528; font: inherit; }
.pc-page .pc-ship { display: flex; gap: 10px; align-items: center; justify-content: center; color: #e6dcc6; }