/* =====================================================================
   The home page (31 Oct 2026, the studio restructure): "A studio of AI creators", two equal front doors (For you,
   For brands), then what we make, who it's for, storybooks, the cast, how it works, the guides and questions.
   Drawn by app.js renderHome(); loads after brand.css and shop.css. Everything is prefixed .h-.
   ===================================================================== */

/* the guides' phone bar, the cart and the newsletter belong to the guides pages */
.is-loading .mc-footer { display: none; }
body.v-home .subscribe-band { display: none; }
body.v-home .mc-cart:not(:has(.cart-count:not([hidden]))) { display: none; }
@media (max-width: 760px) {
  body.v-home .m-bar { display: none; }
  body.v-home { padding-bottom: 0; }
  body.v-home .contact-root { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

.h-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 1. hero ---------- */
.h-hero > .wrap { padding-block: clamp(40px, 6vw, 76px) clamp(36px, 5vw, 60px); display: grid; gap: clamp(26px, 4vw, 40px); }
.h-hero-head { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
.h-hero h1 { font: 400 clamp(2.6rem, 6.6vw, 5rem)/1 var(--mc-serif); letter-spacing: -.015em; }
.h-hero .mc-lede { margin: 0 auto; max-width: 60ch; }
.h-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 24px); max-width: 1040px; width: 100%; margin: 0 auto; }
.h-door { position: relative; display: grid; align-content: start; gap: 12px; margin: 0; padding: clamp(18px, 2.4vw, 26px); border-radius: 22px;
  background: linear-gradient(180deg, #181A21, #121319); border: 1px solid var(--mc-stage-line); color: var(--mc-stage-ink); min-width: 0; }
.h-door::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, rgba(92,67,38,.0) 0%, #b8925a 35%, #f6e3b8 48%, #b8925a 62%, rgba(92,67,38,.0) 100%); background-size: 300% 100%; opacity: .55;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mc-foil 9s ease-in-out infinite; }
.h-door-art { display: grid; gap: 8px; height: 280px; grid-template-rows: 280px; margin-bottom: 6px; }
.h-door-art img { width: 100%; height: 280px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: var(--mc-stage-2); }
/* For you: the gift their photo became (big), their own photo tucked in the corner like a snapshot, and the price. */
.h-show { position: relative; height: 280px; margin-bottom: 6px; border-radius: 16px; overflow: hidden; background: var(--mc-stage-2); border: 1px solid rgba(255,255,255,.08); }
.h-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.h-slide.on { opacity: 1; }
.h-gift { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transform: scale(1.0); transition: transform 6.5s ease-out; }
.h-slide.on .h-gift { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .h-gift { transition: none; } .h-slide.on .h-gift { transform: none; } }
.h-snap { position: absolute; left: 12px; bottom: 12px; width: 92px; padding: 5px 5px 4px; background: #FBF8F2; border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45); transform: rotate(-4deg); display: grid; gap: 3px; }
.h-snap img { width: 100%; height: 108px; object-fit: cover; object-position: 50% 30%; border-radius: 2px; display: block; }
.h-snap em { font: 600 .66rem/1 var(--mc-sans); font-style: normal; color: #2A2620; text-align: center; letter-spacing: .02em; }
.h-snap::after { content: ""; position: absolute; right: -30px; top: 42%; width: 22px; height: 2px; background: #FBF8F2; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.h-snap::before { content: ""; position: absolute; right: -32px; top: calc(42% - 4px); border: 5px solid transparent; border-left: 7px solid #FBF8F2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.h-slide figcaption { position: absolute; right: 10px; bottom: 10px; padding: 7px 11px; border-radius: 999px; background: rgba(12,13,18,.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 .78rem/1 var(--mc-sans); }
.h-trio { grid-template-columns: repeat(3, 1fr); }
.h-trio .h-clip { display: block; height: 100%; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: var(--mc-stage-2); }
.h-trio video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.h-door-k { font: 500 .7rem var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mc-accent); }
.h-door h2 { font: 400 clamp(1.6rem, 2.8vw, 2.1rem)/1.05 var(--mc-serif); }
.h-door p { color: var(--mc-stage-muted); font-size: .98rem; line-height: 1.5; }
.h-subj { display: flex; flex-wrap: wrap; gap: 6px; }
.h-subj label { cursor: pointer; }
.h-subj input { position: absolute; opacity: 0; pointer-events: none; }
.h-subj span { display: inline-block; padding: 7px 13px; border-radius: 999px; border: 1px solid #3A3F4E; font: 600 .84rem/1 var(--mc-sans); color: var(--mc-stage-muted); transition: background .15s, color .15s, border-color .15s; }
.h-subj input:checked + span { background: var(--mc-stage-ink); color: var(--mc-ink); border-color: var(--mc-stage-ink); }
.h-subj input:focus-visible + span { outline: 3px solid var(--mc-accent); outline-offset: 2px; }
.h-drop { position: relative; width: 100%; gap: 10px; cursor: pointer; }
.h-drop.over { box-shadow: 0 0 0 3px rgba(255,90,60,.45); }
.h-drop:focus-within { outline: 3px solid var(--mc-accent); outline-offset: 2px; }
.h-drop .h-ic { width: 20px; height: 20px; color: currentColor; }
.h-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.h-drop-note { font-size: .82rem !important; color: var(--mc-stage-muted); text-align: center; margin-top: -4px; }
.h-door-msg { min-height: 0; font-size: .9rem; color: var(--mc-stage-ink) !important; }
.h-door-msg:empty { display: none; }
.h-url input { width: 100%; font: 400 1rem var(--mc-sans); padding: 15px 18px; border-radius: 14px; border: 1px solid #3A3F4E; background: #0C0D12; color: var(--mc-stage-ink); }
.h-url input::placeholder { color: #7D8291; }
.h-url input:focus { outline: none; border-color: var(--mc-accent); box-shadow: 0 0 0 3px rgba(255,90,60,.25); }
.h-door .mc-btn { width: 100%; }
.h-door-alt { font-size: .88rem; color: var(--mc-stage-muted); text-decoration: none; justify-self: start; }
.h-door-alt:hover { color: var(--mc-stage-ink); }
.h-made-by { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--mc-stage-muted); font-size: .92rem; text-align: left; max-width: 720px; margin: 0 auto; }
.h-made-by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--mc-stage-line); }
.h-made-by b { color: var(--mc-stage-ink); font-weight: 600; }
@media (max-width: 760px) {
  .h-doors { grid-template-columns: 1fr; }
  .h-door-art { height: 150px; grid-template-rows: 150px; }
  .h-door-art img { height: 150px; }
  .h-show { height: 240px; }
  .h-snap { width: 80px; }
  .h-snap img { height: 92px; }
  .h-hero-head { text-align: left; justify-items: start; }
  .h-made-by { justify-content: flex-start; }
}

/* ---------- 2. what we make for you ---------- */
.h-made .made { gap: 22px; }
.h-made .made-head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.h-made .made-card.big .mc-cap b { font-size: 1.5rem; }
.h-made .made-card .mc-cap i { color: var(--mc-accent-text); }
.h-xmas { color: var(--mc-ink); font-weight: 600; }
.h-made .mc-cap .h-by { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.h-made .mc-btns { margin-top: 4px; }

/* ---------- 3. for brands ---------- */
.h-brands-in { padding-block: clamp(52px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.h-brands-copy { display: grid; gap: 18px; justify-items: start; }
.h-brands h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.h-price { font-size: 1.05rem; color: var(--mc-stage-muted); }
.h-price b { color: var(--mc-stage-ink); font: 400 1.5rem/1 var(--mc-serif); }
.h-price span { margin: 0 6px; }
.h-reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.h-reel figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--mc-stage-2); border: 1px solid var(--mc-stage-line); aspect-ratio: 105 / 141;
  box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.h-reel img, .h-reel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-reel figcaption { position: absolute; left: 10px; bottom: 10px; font: 500 .6rem/1 var(--mc-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(10,11,15,.66); padding: 6px 8px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 860px) {
  .h-brands-in { grid-template-columns: 1fr; }
  .h-reel { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ---------- 4. who it's for ---------- */
.h-who-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; padding-block: 18px; border-top: 1px solid var(--mc-line); }
.h-who-row:last-child { border-bottom: 1px solid var(--mc-line); }
.h-who-k { font: 500 .74rem var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); padding-top: 18px; }
.h-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.h-tile { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: var(--mc-card); border: 1px solid var(--mc-line);
  text-decoration: none; color: var(--mc-ink); min-width: 0; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.h-tile:hover, .h-tile:focus-visible { transform: translateY(-5px); border-color: #D3C5AE; box-shadow: 0 26px 40px -26px rgba(22,21,27,.55); }
.h-tile-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #E4DACB; }
.h-tile-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.h-tile:hover .h-tile-pic img, .h-tile:focus-visible .h-tile-pic img { transform: scale(1.06); }
.h-tile-pic .h-ic { position: absolute; left: 12px; top: 12px; width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: rgba(255,253,248,.92); color: var(--mc-ink);
  box-shadow: 0 6px 16px rgba(22,21,27,.18); }
.h-tile-txt { position: relative; display: block; padding: 14px 44px 16px 16px; }
.h-tile b { display: block; font: 400 1.22rem/1.15 var(--mc-serif); }
.h-tile small { display: block; color: var(--mc-muted); font-size: .86rem; line-height: 1.4; margin-top: 4px; }
.h-tile i { position: absolute; right: 16px; top: 15px; font-style: normal; font-size: 1.1rem; color: var(--mc-accent-text); transition: transform .25s ease; }
.h-tile:hover i, .h-tile:focus-visible i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .h-tile, .h-tile-pic img, .h-tile i { transition: none; } .h-tile:hover { transform: none; } .h-tile:hover .h-tile-pic img { transform: none; } }
@media (max-width: 960px) { .h-who-row { grid-template-columns: 1fr; gap: 10px; } .h-who-k { padding-top: 0; } .h-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .h-tile { padding: 13px; gap: 10px; } .h-tile b { font-size: 1.05rem; } }

/* ---------- 5. storybooks ---------- */
.h-covers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.h-cover { display: grid; gap: 10px; text-decoration: none; color: var(--mc-ink); min-width: 0; }
.h-cover img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px 16px 16px 6px; box-shadow: -6px 0 0 -2px #CDBFA8, 0 26px 40px -26px rgba(22,21,27,.6); transition: transform .25s; }
.h-cover:hover img { transform: translateY(-4px) rotate(-.5deg); }
.h-cover small { display: block; font: 500 .68rem var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mc-muted); }
.h-cover b { display: block; font: 400 1.15rem/1.2 var(--mc-serif); margin-top: 2px; }
.h-club { margin-top: 26px; font-size: .98rem; }
.h-club a { color: var(--mc-ink); text-decoration: none; border-bottom: 1px solid var(--mc-line); padding-bottom: 2px; }
.h-club a:hover { border-color: var(--mc-ink); }
@media (max-width: 640px) { .h-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .h-cover b { font-size: .92rem; } .h-cover small { font-size: .58rem; letter-spacing: .08em; } }

/* ---------- 6. the cast ---------- */
.h-cast > .wrap { padding-block: clamp(52px, 8vw, 96px); display: grid; gap: clamp(24px, 4vw, 36px); }
.h-cast-head { display: grid; gap: 14px; max-width: 760px; }
.h-cast h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.h-cast-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .h-cast-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.h-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding-top: 20px; border-top: 1px solid var(--mc-stage-line); }
.h-soon-k { font: 500 .7rem var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-stage-muted); }
.h-soon-p { display: inline-flex; align-items: center; gap: 10px; }
.h-soon-p img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mc-stage-line); filter: grayscale(.4); }
.h-soon-p b { display: block; font: 400 .98rem/1.1 var(--mc-serif); color: var(--mc-stage-ink); }
.h-soon-p small { display: block; font-size: .78rem; color: var(--mc-stage-muted); }
.h-face { display: grid; gap: 10px; text-decoration: none; color: var(--mc-stage-ink); min-width: 0; }
.h-face img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 1px solid var(--mc-stage-line); background: var(--mc-stage-2); transition: transform .25s, filter .25s; }
a.h-face:hover img { transform: translateY(-3px); }
.h-face span { display: grid; gap: 2px; }
.h-face b { font: 400 1.08rem/1.15 var(--mc-serif); }
.h-face small { color: var(--mc-stage-muted); font-size: .82rem; line-height: 1.35; }
.h-face i { font: 500 .6rem var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--mc-accent); margin-top: 3px; }
.h-cast-note { color: var(--mc-stage-muted); font-size: .9rem; }
.h-cast-note a { color: var(--mc-stage-ink); }
@media (max-width: 560px) { .h-cast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .h-face b { font-size: .92rem; } .h-face small { font-size: .74rem; } .h-face i { font-size: .54rem; letter-spacing: .06em; } }

/* ---------- 7. how it works ---------- */
.h-steps { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding-block: 22px; border-top: 1px solid var(--mc-line); }
.h-steps-k { display: grid; gap: 8px; align-content: start; }
.h-steps-k span { font: 500 .74rem var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); }
.h-steps-k a { font-weight: 600; font-size: .9rem; color: var(--mc-accent-text); text-decoration: none; }
.h-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.h-steps li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 16px; background: var(--mc-card); border: 1px solid var(--mc-line); }
.h-steps li em { font: 400 1.6rem/1 var(--mc-serif); color: var(--mc-accent-text); font-style: normal; }
.h-steps li b { font-size: 1.02rem; }
.h-steps li span { color: var(--mc-muted); font-size: .92rem; line-height: 1.45; }
.h-privacy { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--mc-line); background: var(--mc-tint); color: var(--mc-muted); font-size: .95rem; line-height: 1.5; }
.h-privacy b { color: var(--mc-ink); }
.h-privacy .h-ic { color: var(--mc-ink); margin-top: 1px; }
@media (max-width: 860px) { .h-steps { grid-template-columns: 1fr; gap: 12px; } .h-steps-k { grid-auto-flow: column; justify-content: space-between; align-items: baseline; } .h-steps ol { grid-template-columns: 1fr; gap: 8px; }
  .h-steps li { grid-template-columns: 34px 1fr; column-gap: 8px; padding: 14px 16px; } .h-steps li em { grid-row: span 2; } }

/* ---------- 8. guides, free ---------- */
.h-guides { background: var(--mc-tint); border-block: 1px solid var(--mc-line); }
.h-guides-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: clamp(28px, 4vw, 40px); }
.h-guides-in > div:first-child { display: grid; gap: 6px; max-width: 620px; }
.h-guides .eyebrow { color: var(--mc-muted); }
.h-guides h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.h-guides p { color: var(--mc-muted); }
.h-guides-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.h-guides-faces { display: flex; }
.h-guides-faces img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mc-tint); margin-left: -10px; }
.h-guides-faces img:first-child { margin-left: 0; }
.h-guides-free { font-weight: 600; color: var(--mc-ink); text-decoration: none; font-size: .95rem; }
.h-guides-free:hover { text-decoration: underline; }

/* ---------- 9. questions ---------- */
.h-faq .faq a { color: var(--mc-ink); }
@media (prefers-reduced-motion: reduce) { .h-door::after { animation: none; } .h-tile, .h-cover img, .h-face img { transition: none; } }
/* phones: the guides' bottom bar has the cart, so the header doesn't repeat it */
@media (max-width: 760px) { .mc-header .mc-cart { display: none; } }

/* Phones: hide the chat button while the hero's cards fill the screen (app.js startHome sets h-hero-in) */
@media (max-width: 760px) {
  body.v-home.h-hero-in .mcc-fab, body.v-home.h-hero-in .mcc-teaser { opacity: 0; pointer-events: none; transition: opacity .2s; }
}

/* ---------- Meet the cast (step 4, 31 Oct 2026) ---------- */
/* Home: "Meet all of them" under the cast heading */
.h-cast-all { color: var(--mc-stage-ink); font-weight: 600; font-size: .95rem; text-decoration: none; border-bottom: 1px solid var(--mc-accent); justify-self: start; padding-bottom: 2px; }
.h-cast-all:hover { color: var(--mc-accent); }

/* A citizen's page: what they make for you (portraits and storybooks, painted by Iris), first after the hero */
.made-for .h-cover img { object-position: center 18%; }
.made-for .h-cover em.mf-line { display: block; font-style: normal; font-size: .88rem; line-height: 1.45; color: var(--mc-muted); margin-top: 4px; }
@media (max-width: 640px) {
  .made-for .h-covers { grid-template-columns: 1fr; gap: 14px; }
  .made-for .h-cover { grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; }
  .made-for .h-cover b { font-size: 1.05rem; }
  .made-for .h-cover small { font-size: .62rem; }
  .made-for .h-cover em.mf-line { font-size: .82rem; }
}
.hero-hire { color: var(--mc-stage-muted); font-size: .9rem; text-decoration: none; border-bottom: 1px solid var(--mc-stage-line); padding-bottom: 2px; }
.hero-hire:hover { color: var(--mc-stage-ink); border-bottom-color: var(--mc-accent); }
/* "<Name> also stars in UGC videos": the dark paint card, with two links */
.ads-card { max-width: 720px; }
.ads-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.pc-t .ads-alt { color: var(--mc-stage-muted); font-size: .88rem; text-decoration: none; border-bottom: 1px solid var(--mc-stage-line); }
.pc-t .ads-alt:hover { color: var(--mc-stage-ink); }

/* /cast/: every citizen on one page */
.cast-hero > .wrap { padding-block: clamp(44px, 7vw, 84px) clamp(36px, 5vw, 56px); display: grid; gap: 16px; justify-items: start; }
.cast-hero h1 { font: 400 clamp(2.3rem, 5.6vw, 4rem)/1.04 var(--mc-serif); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.cast-hero h1 em { color: var(--mc-accent); }
.cast-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 26px); }
@media (max-width: 900px) { .cast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cast-card { display: grid; grid-template-rows: auto 1fr; background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: var(--mc-radius); overflow: hidden; text-decoration: none; color: var(--mc-ink); min-width: 0; }
.cast-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--mc-tint); }
.cast-t { display: grid; gap: 5px; align-content: start; padding: 16px 18px 18px; }
.cast-t b { font: 400 1.4rem/1.12 var(--mc-serif); }
.cast-t small { color: var(--mc-muted); font-size: .88rem; }
.cast-line { font-size: .93rem; line-height: 1.45; margin-top: 4px; }
.cast-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cast-kinds i { font: 500 .6rem var(--mc-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; border: 1px solid var(--mc-line); border-radius: 999px; padding: 4px 9px; color: var(--mc-muted); }
.cast-go { font-weight: 600; font-size: .92rem; color: var(--mc-accent-text); margin-top: 10px; }
.cast-soon { margin-top: clamp(32px, 5vw, 52px); padding-top: 22px; border-top: 1px solid var(--mc-line); display: grid; gap: 14px; }
.cast-soon-row { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.cast-soon-p { display: inline-flex; align-items: center; gap: 10px; }
.cast-soon-p img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--mc-line); filter: grayscale(.4); }
.cast-soon-p b { display: block; font: 400 1rem/1.1 var(--mc-serif); }
.cast-soon-p small { display: block; font-size: .8rem; color: var(--mc-muted); }
.cast-note { margin-top: 26px; color: var(--mc-muted); font-size: .92rem; }
.cast-note a { color: var(--mc-ink); }
.cast-ctas { margin-top: 18px; }
@media (max-width: 560px) {
  .cast-grid { gap: 12px; }
  .cast-t { padding: 12px 12px 14px; gap: 4px; }
  .cast-t b { font-size: 1.08rem; }
  .cast-t small, .cast-line { font-size: .8rem; }
  .cast-line { display: none; }
  .cast-kinds i { font-size: .52rem; padding: 3px 6px; letter-spacing: .06em; }
  .cast-go { font-size: .82rem; }
}
.h-hero-head h1 em { display: block; padding-bottom: .16em; margin-bottom: -.16em; }   /* room for y, g and p tails under the shimmer */
@media (max-width: 560px) { .h-slide figcaption { top: 10px; bottom: auto; font-size: .72rem; } }

/* What we make for you: the four gift sets stack and fade; the shown one sets the height. */
.made-sets { position: relative; }
.made-set { transition: opacity 1s ease; }
.made-set:not(.on) { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.made-tag { position: absolute; left: 14px; top: 14px; background: rgba(255,253,248,.94); color: var(--mc-ink); border-radius: 999px; padding: 7px 12px;
  font: 600 .8rem/1 var(--mc-sans); box-shadow: 0 6px 16px rgba(22,21,27,.16); }
.mc-dots { display: flex; justify-content: center; gap: 4px; margin-top: -4px; }
.mc-dots button { appearance: none; border: 0; background: none; padding: 10px 6px; cursor: pointer; display: grid; place-items: center; }
.mc-dots button span { display: block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; color: var(--mc-ink); opacity: .22; font-size: 0; overflow: hidden;
  transition: width .3s ease, opacity .3s ease, border-radius .3s ease; }
.mc-dots button[aria-selected="true"] span { width: 26px; border-radius: 99px; opacity: .85; }
.mc-dots button:focus-visible { outline: 3px solid var(--mc-accent); outline-offset: 2px; border-radius: 8px; }

/* =====================================================================
   The Christmas home (3 Nov 2026, until 20 Dec: content/seasonal.json home_hero). One promise, the upload above the
   fold, the Christmas style, the printed things as real objects, the other subjects small, one quiet band for brands.
   Drawn by app.js renderHomeXmas(). Everything is prefixed .hx-.
   ===================================================================== */
.hx-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: clamp(28px, 5vw, 64px); }
.hx-copy { display: grid; gap: 16px; justify-items: start; }
.hx-hero h1 { font: 400 clamp(2.5rem, 6vw, 4.6rem)/1.02 var(--mc-serif); letter-spacing: -.015em; }
.hx-hero h1 em { display: block; padding-bottom: .12em; margin-bottom: -.12em; }
.hx-up { display: grid; gap: 8px; width: 100%; max-width: 440px; margin: 4px 0 0; }
.hx-up .h-drop { width: 100%; }
.hx-up .h-drop-note { text-align: left; margin: 0; }
.hx-xmas { margin: 0; font-size: .9rem; font-weight: 600; color: #F4C9A8; letter-spacing: .01em; }
.hx-xmas.xmas-late { color: var(--mc-stage-muted); font-weight: 500; }
.h-promise { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .9rem; line-height: 1.45; color: var(--mc-muted); }
.h-promise .h-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--mc-ink); }
.h-promise a { color: inherit; }
.hx-promise { color: var(--mc-stage-muted); }
.hx-promise .h-ic { color: var(--mc-stage-ink); }
.hx-art { position: relative; margin: 0; justify-self: center; width: min(420px, 100%); }
.hx-art > img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); display: block; }
.hx-art .h-snap { left: -14px; bottom: 26px; width: 104px; }
.hx-art .h-snap img { height: 120px; }
.hx-art .h-snap::before, .hx-art .h-snap::after { display: none; }
.hx-art figcaption { margin-top: 10px; text-align: center; font: 500 .66rem var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mc-stage-muted); }
@media (max-width: 860px) {
  .hx-hero-in { grid-template-columns: 1fr; padding-block: 22px 34px; gap: 22px; }
  .hx-art { width: min(300px, 82%); }
  .hx-art .h-snap { width: 84px; left: -10px; }
  .hx-art .h-snap img { height: 96px; }
}
.hx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.hx-card { display: grid; grid-template-rows: auto 1fr; border-radius: 18px; overflow: hidden; background: var(--mc-card); border: 1px solid var(--mc-line); color: var(--mc-ink); text-decoration: none; min-width: 0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hx-card:hover, .hx-card:focus-visible { transform: translateY(-4px); border-color: #D3C5AE; box-shadow: 0 26px 40px -26px rgba(22,21,27,.55); }
.hx-card > img, .hx-frame { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.hx-frame { position: relative; background: linear-gradient(180deg, #EFE8DC, #E2D7C5); overflow: hidden; }
.hx-frame span { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 3 / 4; transform: translate(-50%, -52%); background: #fff; padding: 7%; border: 7px solid #17161B; box-sizing: border-box; box-shadow: 0 18px 30px -14px rgba(0,0,0,.55); }
.hx-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-cap { display: grid; gap: 6px; align-content: start; padding: 14px 16px 16px; }
.hx-cap b { font: 400 1.25rem/1.1 var(--mc-serif); }
.hx-cap b i { font: 600 .95rem var(--mc-sans); font-style: normal; color: var(--mc-accent-text); margin-left: 4px; }
.hx-cap > span { color: var(--mc-muted); font-size: .88rem; line-height: 1.45; }
.hx-cap .hx-by { color: #8a2f2a; font-weight: 600; font-size: .82rem; }
.hx-cap .hx-by.xmas-late { color: var(--mc-muted); font-weight: 500; }
.hx-gifts .made-foot { margin-bottom: 18px; }
.hx-gifts .mc-btns { margin-bottom: 14px; }
.hx-fine { margin: 10px 0 0; font-size: .8rem; color: var(--mc-muted); }
@media (max-width: 960px) { .hx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .hx-cap { padding: 12px; } .hx-cap b { font-size: 1.08rem; } .hx-cap > span { font-size: .82rem; } }
.hx-how .h-steps { grid-template-columns: 1fr; border-top: 0; padding-top: 0; }
.hx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hx-tile { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid var(--mc-line); background: var(--mc-card); color: var(--mc-ink); text-decoration: none; min-width: 0; }
.hx-tile:hover { border-color: var(--mc-ink); }
.hx-tile img { width: 72px; height: 90px; object-fit: cover; border-radius: 10px; }
.hx-tile span { display: grid; gap: 3px; min-width: 0; }
.hx-tile b { display: flex; align-items: center; gap: 7px; font: 400 1.1rem var(--mc-serif); }
.hx-tile b .h-ic { width: 18px; height: 18px; }
.hx-tile small { color: var(--mc-muted); font-size: .84rem; line-height: 1.35; }
@media (max-width: 760px) { .hx-tiles { grid-template-columns: 1fr; } }
.hx-books { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; color: var(--mc-muted); font-size: .95rem; }
.hx-books a { color: var(--mc-ink); font-weight: 600; text-decoration: none; }
.hx-brands { border-block: 1px solid var(--mc-line); background: var(--mc-tint); }
.hx-brands-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-block: 20px; color: var(--mc-muted); font-size: .95rem; }
.hx-brands-in p { margin: 0; flex: 1 1 320px; }
.hx-brands-in b { color: var(--mc-ink); }
.hx-brands-in a { color: var(--mc-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hx-brands-in a:hover { text-decoration: underline; }

/* The memorial line (6 Nov 2026): one quiet band under the hero on both homes, all year (app.js memorialBand) */
.h-mem { border-block: 1px solid var(--mc-line); background: var(--mc-tint); }
.h-mem-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 22px; align-items: center; padding-block: 20px; }
.h-mem-in img { width: 72px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--mc-line); display: block; }
.h-mem-copy { display: grid; gap: 4px; min-width: 0; }
.h-mem-copy h2 { margin: 0; font: 400 clamp(1.3rem, 2.4vw, 1.6rem)/1.2 var(--mc-serif); color: var(--mc-ink); }
.h-mem-copy p { margin: 0; color: var(--mc-muted); font-size: .95rem; line-height: 1.5; max-width: 60ch; }
.h-mem-go { margin: 0; display: grid; gap: 6px; justify-items: end; text-align: right; }
.h-mem-go a { color: var(--mc-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.h-mem-go a:hover { text-decoration: underline; }
.h-mem-go .h-mem-alt { font-weight: 400; color: var(--mc-muted); font-size: .9rem; }
@media (max-width: 760px) {
  .h-mem-in { grid-template-columns: 56px minmax(0, 1fr); }
  .h-mem-in img { width: 56px; height: 70px; }
  .h-mem-go { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: 18px; text-align: left; }
  .h-mem-go a { white-space: normal; }
}