/* ── the unify rules (2026-10-28): every section, whoever it was cloned from,
   speaks one language. Loaded last, so it wins.
     type     Herbik for headings, EB Garamond for everything else,
              1871 Dreamer for the mark only (site.css --f-head / --f-body / --f-script)
     head     every section opens the same way: a small label, the heading,
              a row of links, centred (.sh)
     edge     one page edge, --gutter (50 px, 16 on phones)
     rhythm   one gap between sections, --gap (120 px, 64 on phones)
     motion   one entrance: rise 40 px and fade in, 1.2 s, --ease (Ravi's
              curve), 80 ms apart (js/unify.js); hovers keep their own
     crimson  comes in as a rounded panel inset on the page edge, the shape of
              the footer's card, not as a sudden full-width block */

/* ── the shared head ──────────────────────────────────────────────────────── */
.sh { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: var(--gap) var(--gutter) 48px; margin: 0; }
.sh-label { margin: 0; font: 400 12px / 1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; opacity: .7; }
.sh-title { margin: 0; font: 400 clamp(40px, 3.4vw, 64px) / 1.05 var(--f-head); letter-spacing: -.02em; }
.sh-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 32px; margin-top: 6px; }
.sh-link, .shop-view button {
  padding: 0 0 7px; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; cursor: pointer;
  font: 400 12px / 14.4px var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none;
}
.shop-view { display: flex; gap: 28px; }
.shop-view button { border-bottom-color: transparent; opacity: .5; transition: opacity .25s, border-color .25s; }
.shop-view button[aria-selected="true"] { opacity: 1; border-bottom-color: currentColor; }
.shop-view button:hover { opacity: 1; }

/* ── each section on the one rhythm ───────────────────────────────────────── */
.shop .sh { padding-top: var(--gap); }
.menu-grid { padding-bottom: 0; }
#card-head { background: var(--ivory); color: var(--navy-ink); padding-bottom: 0; }
.rk .slider__wrapper { height: 34em; }
.ah-steps { padding-bottom: 0; }
.ah-steps .sh { padding-left: 0; padding-right: 0; }
.ah-cards { max-width: none; padding: 0 var(--gutter); }
.ah-tail { height: 0; }
.styles { background: var(--ivory); color: var(--navy-ink); padding-bottom: var(--gap); }

/* ── the styles row: Our Collection's tiles, one row that scrolls ─────────── */
.st-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; -webkit-overflow-scrolling: touch; }
.st-row::-webkit-scrollbar { display: none; }
.st-row.is-drag { cursor: grabbing; scroll-snap-type: none; }
.st-row .st-tile { flex: none; width: 25%; scroll-snap-align: start; user-select: none; }
.st-tile .tile-pic { background: #f7f3ee; }
.st-cover { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 210 / 297; translate: -50% -50%; overflow: hidden; border-radius: 1px 3px 3px 1px;
  box-shadow: inset 3px 0 4px -2px rgb(24 24 24 / .3), 0 22px 26px -12px rgb(24 24 24 / .45), 0 3px 5px rgb(24 24 24 / .25);
  transition: transform 2s cubic-bezier(.215, .61, .355, 1); }
.st-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgb(247 243 238 / .16), transparent 30%, transparent 70%, rgb(24 24 24 / .06)); }
@media (hover: hover) { .st-tile:hover .st-cover { transform: scale(1.06); } }
.st-tile .tile-price { max-width: 30ch; margin: 6px auto 0; line-height: 1.4; }
.sh-link.st-prev, .sh-link.st-next { border-bottom: 0; font-size: 16px; padding: 0 0 4px; }

/* ── the one entrance ─────────────────────────────────────────────────────── */
[data-rise] { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
[data-rise].risen { opacity: 1; transform: none; }
/* the clones' own entrances on the same curve and time */
.ah-card { transition-duration: 1.2s; transition-timing-function: var(--ease); }
.ah-title span { transition-timing-function: var(--ease); transition-duration: 1.2s; }
.ob-in .ob-line { transition-timing-function: var(--ease); transition-duration: 1.2s; }

/* the type: no faked bold or italic from the two single-weight faces */
h1 em, h2 em, h3 em, .sh-title em { font-style: normal; }

@media (max-width: 1100px) { .st-row .st-tile { width: calc(100% / 3); } }
@media (max-width: 767px) {
  .sh { gap: 12px; padding-bottom: 32px; }
  .st-row .st-tile { width: 72%; }
}
@media (prefers-reduced-motion: reduce) { [data-rise] { opacity: 1; transform: none; transition: none; } }

/* ── the memory card: the same phone + printed card on the home page and on
   Customize (the component lives here so both pages share it) ────────────── */
.cz-card-show { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 56px); }
.mc-phone { width: clamp(240px, 19vw, 340px); aspect-ratio: 9 / 19.5; border-radius: 42px; padding: 12px; background: var(--navy-ink); box-shadow: 0 40px 60px rgb(24 24 24 / .25); }
.mc-phone iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 32px; background: var(--ivory); }
.mc-card { margin: 0; width: clamp(170px, 13vw, 240px); aspect-ratio: 7 / 10; padding: 16px 14px;   /* not %: that is of the whole row */ display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; color: var(--navy-ink);
  background: var(--ivory); border: 2px solid var(--navy-ink); outline: 8px solid var(--ivory); border-radius: 12px; rotate: 4deg; box-shadow: 0 30px 40px rgb(24 24 24 / .22); }
.mc-scan { margin: 0; font: 400 clamp(24px, 1.9vw, 36px) / 1 var(--f-head); }
.mc-sub { margin: 4px 0 0; font: 400 clamp(10px, .7vw, 13px) / 1.3 var(--f-body); }
.mc-qr { width: 72%; aspect-ratio: 1; }
.mc-qr svg { display: block; width: 100%; height: 100%; }
.mc-mark { margin: 0; font: 400 clamp(18px, 1.4vw, 26px) / 1.6 var(--f-script); }
.mcard { background: var(--ivory); color: var(--navy-ink); }
.mcard-show { padding: 0 var(--gutter); }
.mcard-text { max-width: 34em; margin: 40px auto 0; padding: 0 var(--gutter); text-align: center; font: 400 17px / 1.6 var(--f-body); }
@media (max-width: 767px) { .mc-phone { width: 52vw; } .mc-card { width: 30vw; } .cz-card-show { gap: 4vw; } .mcard-text { font-size: 15px; } }

/* ── one rhythm on every page (his call: "the empty space is far too much") ──
   between two sections: --gap; inside a section: half of it */
.sh { padding-bottom: 40px; }
.styles { padding-bottom: 32px; }
.ob-foot { padding-top: calc(var(--gap) * 1.2); }

/* Customize */
.cz-page .live { min-height: 0; }
.cz-page .live, .cz-page .book, .cz-page .cz-card, .cz-page .cz-order { padding-top: calc(var(--gap) / 2); padding-bottom: calc(var(--gap) / 2); }
.cz-page main > section:first-child { padding-top: calc(var(--gap) * .75); }
.cz-page .cz-order { padding-bottom: var(--gap); }
.cz-page .book-head { margin-bottom: 28px; }
/* Policy */
.pol { padding-top: calc(var(--gap) * .75); padding-bottom: var(--gap); }
.pol-glance { margin: 48px 0; }
.pol-text section { padding-bottom: 40px; margin-bottom: 40px; }
/* Feedback */
.wall, .fb-page .wall { padding-top: calc(var(--gap) * .75); padding-bottom: 40px; }
.fb-cta { padding-bottom: var(--gap); }

/* ── the card's ticket (his call: keep its motion, lose the slider around it):
   Ravi's referral ticket, our words and a real QR; on hover, and once as it
   comes into view, the stub swings back on its edge and the body lifts off
   towards you (.6 s, the site's curve) ─────────────────────────────────── */
.mcard { --rk-crimson: var(--navy-ink); --rk-cream: var(--ivory); }
.mcard-ticket { display: flex; align-items: center; justify-content: center; width: clamp(380px, 30vw, 560px); height: clamp(260px, 21vw, 400px); }
.cta-ticket { display: flex; gap: .75rem; transform: rotate(-12deg); transform-origin: center; perspective: 1000px; cursor: pointer; transition: transform .6s ease; font-size: clamp(11px, .9vw, 16px); }
.cta-ticket .ticket-inner { overflow: hidden; transition: transform .6s var(--ease), box-shadow .6s ease; filter: drop-shadow(0 18px 22px rgb(24 24 24 / .25)); }
.cta-ticket .ticket-inner.left { transform-origin: top right; }
.cta-ticket .ticket-inner.right { transform-origin: top left; }
.cta-ticket .ticket-img { display: block; height: 20em; width: auto; }
.cta-ticket:hover, .cta-ticket.is-torn { transform: rotate(-12deg) translateY(5px); }
.cta-ticket:hover .ticket-inner.left, .cta-ticket.is-torn .ticket-inner.left { transform: rotateY(-32deg) rotateX(5deg) rotate(-6deg) translate(-4em) translateY(-4em) translateZ(.125em); }
.cta-ticket:hover .ticket-inner.right, .cta-ticket.is-torn .ticket-inner.right { transform: rotateX(5deg) rotate(12deg) translate(2em) translateY(-2em) translateZ(4em); }
.cta-ticket .ticket-img text { fill: var(--rk-cream); }
.rk-ticket-big { font: 400 30px / 1 var(--f-head); letter-spacing: -.02em; }
.rk-ticket-small { font: 400 11px / 1 var(--f-body); letter-spacing: .02em; }
.rk-ticket-qr { fill: var(--rk-cream); }
.mcard-show { gap: clamp(40px, 5vw, 96px); }
@media (max-width: 767px) {
  .mcard-show { flex-direction: column; gap: 24px; overflow: hidden; }
  .mcard-ticket { width: 100%; height: 66vw; }
  .cta-ticket { font-size: 1.62vw; }     /* the whole ticket about 72% of the screen */
}
/* the ticket and the phone further apart (his call): the ticket's box holds its whole tilted width, then a real gap */
@media (min-width: 768px) {
  .mcard-ticket { width: clamp(520px, 42vw, 800px); }
  .mcard-show { gap: clamp(60px, 7vw, 140px); }
}

/* ── the hero's words, on the empty table to the left (after openhouse-
   magazine.com's hero: a small name, a two-line serif title, an underlined
   link; theirs centred, ours left over the bare wood). Cream on the dark
   table, a soft shadow so the type holds without darkening the picture.
   They rise in, one after another, as the splash leaves (js/unify.js). */
.hero-copy { position: absolute; left: var(--gutter); top: 50%; translate: 0 -38%; z-index: 3; max-width: 46%; color: var(--ivory); text-shadow: 0 2px 24px rgb(24 24 24 / .45); }
.hc-kicker { margin: 0 0 clamp(10px, 1.4vw, 26px); font: 400 clamp(13px, 1.25vw, 24px) / 1 var(--f-head); }
.hc-title { margin: 0; font: 400 clamp(22px, 4.1vw, 80px) / 1.04 var(--f-head); letter-spacing: -.02em; }
.hc-title span { display: block; white-space: nowrap; }
.hc-2 { opacity: .9; }
.hc-link { display: inline-block; margin-top: clamp(14px, 1.8vw, 34px); padding-bottom: 3px; border-bottom: 1px solid currentColor; color: inherit; text-decoration: none; font: 400 clamp(12px, .95vw, 18px) / 1 var(--f-body); }
[data-hero-rise] { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--d, 0) * 120ms + 200ms); }
.hero-copy.on [data-hero-rise] { opacity: 1; transform: none; }
/* phones: the picture is only ~180 px tall there, so the words sit under it on the page, in the ink */
@media (max-width: 767px) {
  .hero { overflow: visible; margin-bottom: 0; }
  .hero-copy { position: absolute; top: 100%; left: 0; right: 0; translate: none; max-width: none; padding: 36px var(--gutter) 0; color: var(--navy-ink); text-shadow: none; background: var(--ivory); }
  .hc-title { font-size: 40px; } .hc-title span { white-space: normal; }
  .hc-kicker { font-size: 15px; margin-bottom: 12px; } .hc-link { font-size: 14px; margin-top: 18px; }
  .hero ~ .shop.dz { padding-top: calc(48px + var(--hc-h, 230px)); }
}
@media (prefers-reduced-motion: reduce) { [data-hero-rise] { opacity: 1; transform: none; transition: none; } }

/* ── List / Grid (js/lg.js), after Osmo's toggle, for Our Collection and the
   magazine styles: a pill switch; three pictures across with the name under
   each and its tags beside it, or rows of a small picture, the name, a tag
   and the last column, hairlines between ─────────────────────────────────── */
.lg-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgb(42 66 84 / .1); }
.lg-toggle button, .shop-view.lg-toggle button {
  padding: 7px 16px; border: 0; border-radius: 99px; background: none; color: inherit; cursor: pointer; opacity: .7;
  font: 400 12px / 1 var(--f-body); letter-spacing: .02em; text-transform: none; transition: background .3s, color .3s, opacity .3s;
}
.lg-toggle button[aria-pressed="true"] { background: var(--navy-ink); color: var(--ivory); opacity: 1; border-bottom: 0; }
.lg-toggle button:hover { opacity: 1; }
.shop-view.lg-toggle { gap: 2px; }

.lg { display: grid; padding: 0 var(--gutter); }
.lg-item { display: block; color: inherit; text-decoration: none; position: relative; }
.lg-media { display: block; position: relative; overflow: hidden; background: #f7f3ee; }
.lg-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-text { display: flex; align-items: center; gap: 8px; }
.lg-title { flex: 1; min-width: 0; font: 400 15px / 1.3 var(--f-body); }
.lg-pill { padding: 4px 9px; border: 1px solid rgb(42 66 84 / .3); border-radius: 99px; font: 400 10px / 1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.lg-end { font: 400 12px / 1 var(--f-body); white-space: nowrap; opacity: .75; }
.lg-end s { margin-left: 6px; opacity: .6; }
.lg-title, .lg-pill, .lg-end, .lg-item::after { transition: opacity .3s ease; }
/* the words and hairlines step aside while the pictures move (on the words themselves: in the list the wrapper is display: contents) */
.lg.lg-hush .lg-title, .lg.lg-hush .lg-pill, .lg.lg-hush .lg-end, .lg.lg-hush .lg-item::after { opacity: 0; transition-duration: .12s; }

/* grid: three across */
.lg.is-grid { grid-template-columns: repeat(var(--lg-cols, 3), minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; }
.lg.is-grid .lg-media { aspect-ratio: 3 / 2; }
.lg.is-grid .lg-text { padding-top: 12px; }
@media (hover: hover) { .lg.is-grid .lg-media img { transition: transform 1.2s var(--ease); } .lg.is-grid .lg-item:hover .lg-media img { transform: scale(1.04); } }

/* list: rows */
.lg.is-list { grid-template-columns: 1fr; }
.lg.is-list .lg-item { display: grid; grid-template-columns: 88px 1fr 1fr auto; align-items: center; gap: 24px; padding: 12px 0; }
.lg.is-list .lg-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgb(42 66 84 / .2); }
.lg.is-list .lg-media { aspect-ratio: 3 / 2; }
.lg.is-list .lg-text { display: contents; }
.lg.is-list .lg-title { font-size: 17px; }
.lg.is-list .lg-pill { justify-self: start; }
@media (hover: hover) { .lg.is-list .lg-item:hover .lg-title { opacity: .6; } }

/* the collection's items and the style covers in it */
.shop .menu-grid.lg { padding: 0 var(--gutter); }
.shop .lg-media.tile-pic { margin: 0; }
.lg.is-grid .tile-pic { aspect-ratio: 3 / 2; }
.st-row.lg { overflow: visible; cursor: auto; scroll-snap-type: none; }
.st-media .st-cover { width: auto; height: 82%; }
.lg.is-list .st-media .st-cover { height: 86%; }

@media (max-width: 767px) {
  .lg.is-grid { --lg-cols: 2; column-gap: 10px; row-gap: 28px; }
  .lg.is-grid .lg-text { flex-wrap: wrap; row-gap: 6px; }
  .lg.is-grid .lg-title { flex-basis: 100%; }
  .lg.is-list .lg-item { grid-template-columns: 64px 1fr auto; gap: 14px; }
  .lg.is-list .lg-pill { display: none; }
}

/* the hero's words now come in with js/text.js (jasminegunarto's motion) */
.hero-copy [data-hero-rise] { opacity: 1; transform: none; transition: none; }

/* text entrances (js/text.js): nothing shows before it moves, and a letter's
   mask leaves room above and below it so g, y, p and accents are never cut */
html.t-wait :is(.sh-title, .hc-title, .hc-kicker, .hc-link, .sh-label, .mcard-text, .live-title, .book-title, .cz-title, .pol-title, .pol-text h2, .wall-title, .live-text, .book-note, .cz-text, .pol-lead, .pol-text p, .wall-note) { visibility: hidden; }
.t-line > div, .line-mask, [class$="-mask"] { padding-top: .12em; padding-bottom: .26em; margin-top: -.12em; margin-bottom: -.26em; }
.t-line > div { padding-right: .04em; margin-right: -.04em; }

/* ── Our Collection, cloned from durizaeg.com (measured at 1920): a 1440 row,
   40 px in, the arrow (29 px) 36 px before the 48 px serif heading, a 54 px
   button with 6 px corners on the right; 88 px down, tiles 4:5 with 4 px
   corners, 4 px apart, four across the full width; the name 16 px under,
   12 px capitals, .04em spaced ─────────────────────────────────────────── */
.dz { padding: 48px 0 var(--gap); background: var(--ivory); color: var(--navy-ink); }
.dz-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.dz-title { display: flex; align-items: center; gap: 35.6px; color: inherit; text-decoration: none; transition: color .3s; }
.dz-title svg { width: 29.4px; height: 29.4px; flex: none; }
.dz-title .sh-title { font-size: 48px; line-height: 1.05; letter-spacing: -.01em; }
.dz-title:hover { color: #2a4254; }
.dz-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 54px; min-width: 236px; padding: 0 24px; overflow: hidden; border-radius: 6px;
  color: var(--ivory); text-decoration: none; font: 500 14px / 1 var(--f-body); letter-spacing: .12em; text-indent: .12em; text-transform: uppercase;
  background: radial-gradient(120% 140% at 15% 20%, #2a4254 0, var(--navy-ink) 55%, #2a4254 100%); box-shadow: 0 0 0 1px rgb(247 243 238 / .25); transition: box-shadow .3s, filter .3s; }
.dz-btn:hover { box-shadow: 0 0 0 1px rgb(247 243 238 / .55); filter: brightness(1.08); }
.dz-grid { display: flex; flex-wrap: wrap; gap: 28px 4px; margin: 88px 0 0; padding: 0; list-style: none; }
.dz-grid > li { width: calc(25% - 3px); }
.dz-tile { display: block; color: inherit; text-decoration: none; }
.dz-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #f7f3ee; }
.dz-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .2s cubic-bezier(.4, 0, .2, 1); }
.dz-name { margin: 16px 0 0; text-align: center; font: 400 12px / 1.5 var(--f-body); letter-spacing: .04em; text-transform: uppercase; transition: color .3s; }
.dz-price { display: block; margin-top: 2px; text-align: center; font: 400 12px / 1.5 var(--f-body); opacity: .65; }
.dz-tile:hover .dz-name { color: #2a4254; }
@media (hover: hover) { .dz-tile:hover .dz-pic img { scale: 1.03; } }
@media (max-width: 1023px) { .dz-grid > li { width: calc(50% - 2px); } .dz-grid { margin-top: 40px; } }
@media (max-width: 767px) {
  .dz-head { flex-direction: column; align-items: flex-start; gap: 24px; padding: 0 var(--gutter); }
  .dz-title { gap: 20px; } .dz-title svg { width: 16.6px; height: 16.6px; } .dz-title .sh-title { font-size: 34px; }
  .dz-btn { height: 46px; min-width: 190px; font-size: 13px; }
  .dz-grid { gap: 22px 2px; margin-top: 32px; }
}

/* ── the magazine styles: a list, the cover follows the pointer on hover ──── */
.styles { position: relative; }
.hl { list-style: none; margin: 0; padding: 0 var(--gutter); }
.hl li { border-top: 1px solid rgb(42 66 84 / .2); }
.hl li:last-child { border-bottom: 1px solid rgb(42 66 84 / .2); }
.hl-row { display: grid; grid-template-columns: 80px 1fr auto 48px; align-items: center; gap: 24px; padding: 22px 0; color: inherit; text-decoration: none; transition: opacity .4s var(--ease), padding .5s var(--ease); }
.hl-n { font: 400 13px / 1 var(--f-body); opacity: .6; }
.hl-name { font: 400 clamp(30px, 3vw, 56px) / 1.05 var(--f-head); letter-spacing: -.02em; }
.hl-kind { font: 400 12px / 1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.hl-go { justify-self: end; font-size: 20px; transform: translateX(-8px); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.styles.hl-active .hl-row:not(.is-on) { opacity: .3; }
.hl-row.is-on { padding-left: 16px; }
.hl-row.is-on .hl-go { opacity: 1; transform: none; }
.hl-float { position: absolute; left: 0; top: 0; z-index: 5; width: clamp(180px, 15vw, 280px); aspect-ratio: 210 / 297; margin: calc(clamp(180px, 15vw, 280px) * -.7) 0 0 40px; pointer-events: none; }
.hl-cover { position: absolute; inset: 0; overflow: hidden; border-radius: 1px 3px 3px 1px; opacity: 0; scale: .6; clip-path: inset(100% 0 0 0);
  box-shadow: inset 3px 0 4px -2px rgb(24 24 24 / .3), 0 30px 40px -12px rgb(24 24 24 / .45);
  transition: opacity .35s, scale .7s var(--ease), clip-path .7s var(--ease); }
.hl-float.on .hl-cover.on { opacity: 1; scale: 1; clip-path: inset(0 0 0 0); }
@media (max-width: 767px) {
  .hl-row { grid-template-columns: 34px 1fr auto; gap: 12px; padding: 16px 0; }
  .hl-go, .hl-float { display: none; }
  .hl-name { font-size: 26px; }
}

/* ── hero v8 (2026-11-02): the armchair; phones get their own tall picture.
   The words sit on the plain wall, in the new palette's dark ink. ────────── */
.hero-copy { color: #181818; text-shadow: none; }
@media (max-aspect-ratio: 4/5) {
  .hero { aspect-ratio: 1290 / 2796; height: auto; }
}
@media (max-width: 767px) {
  .hero-copy { position: absolute; top: 15%; left: 0; right: 0; padding: 0 var(--gutter); background: none; color: #181818; text-align: center; }
  .hero ~ .shop.dz { padding-top: 48px; }
}
/* desktop: the armchair fills the middle of the picture and the free wall either
   side is too narrow for the words, so they wait for the new hero layout */
@media (min-width: 768px) { .hero-copy { display: none; } }
@media (max-width: 767px) { .hero-copy { top: 12%; } .hc-title { font-size: 36px; } }

/* ── 2026-11-02: the redesign starts from the hero alone, on the new palette ── */
html { background: #d6bdaf; } body { background: transparent; }   /* the paper (css/huey.css body::before) shows through the body */