/* ====================================================================
   RESONIC STUDIO — homepage ("Quiet")
   Rendered by Home in app.jsx on every screen size. Written phone-first;
   the min-width: 721px block at the end lays the same sections out wide
   for desktop. Everything is scoped under .mh / html.mh-on, so every
   other page is untouched. Pictures: assets/home/ (WebP).
   ==================================================================== */

.mh {
  /* The site renders at html{zoom:.85} (styles.css). This layout is drawn
     1:1 with 44px+ tap targets, so it cancels that zoom for itself only
     (0.85 x 1.17647 = 1). The nav, menu drawer and cart keep the site-wide
     85%, so they match every other page. */
  zoom: 1.17647;

  --mh-ink: #17130f;
  --mh-ink-2: #221c16;
  --mh-on-ink: #f6efe1;
  --mh-on-ink-2: rgba(246,239,225,.74);
  --mh-rule-ink: rgba(246,239,225,.17);
  --mh-coral: #e8735c;
  --mh-wa: #1fa855;
  --mh-gut: 22px;
  --mh-barh: 55px;   /* the nav bar, as drawn at 85% */

  /* above the fixed paper-grain overlay (body::before), so photos stay clean */
  position: relative;
  z-index: 2;
  display: block;
  background: var(--bone);
  color: var(--sumi);
  font-size: 16px;
  line-height: 1.5;
}
.mh *, .mh *::before, .mh *::after { box-sizing: border-box; }
/* :where() keeps the reset at single-class weight, so every .mh-* rule below wins by order. */
.mh :where(h1, h2, h3, p, ul, figure) { margin: 0; padding: 0; }
.mh :where(ul) { list-style: none; }
.mh a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mh a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mh-lab { font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mh-paper { background: var(--bone); color: var(--sumi); }
.mh-ink { background: var(--mh-ink); color: var(--mh-on-ink); }
.mh section[id] { scroll-margin-top: var(--mh-barh); }

/* ---------- nav bar: solid paper ---------- */
html.mh-on { scroll-behavior: smooth; }
html.mh-on .nav,
html.mh-on .nav.is-scrolled {
  background: var(--bone);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--rule);
}

/* Phones: one bar height, and the bar slides away on the way down. */
@media (max-width: 720px) {
  html.mh-on .nav,
  html.mh-on .nav.is-scrolled {
    padding: 14px 18px;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    transition: transform .26s var(--ease-out);
  }
  html.mh-on.mh-bar-off .nav:not(:focus-within) { transform: translateY(-102%); }
  /* The drawer is position:fixed inside .nav, and a transformed .nav would
     become its containing block. Snap the bar back the instant the menu opens. */
  html.mh-on .nav.is-open { transform: none; transition: none; }
  /* The open menu owns the whole screen. Its viewport-unit max-height falls
     short under the 85% zoom, which left a strip of page (and the dock)
     showing underneath; top/bottom already size it. */
  html.mh-on .nav__links { max-height: none; }
  /* At 85% the menu and cart buttons are about 31px. Stretch the tap area,
     not the look, to 44px+. */
  html.mh-on .nav__burger, html.mh-on .nav__cart-mobile { position: relative; }
  html.mh-on .nav__burger::after, html.mh-on .nav__cart-mobile::after { content: ""; position: absolute; inset: -10px; }
}

/* ---------- section head: seal, one word, one link ---------- */
.mh-head { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.mh-seal { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: .5px solid currentColor; font: 700 16px/1 var(--jp); }
.mh-head h2 { font: 700 26px/1.1 var(--display); letter-spacing: -.01em; }
.mh-more { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding-left: 14px; white-space: nowrap; }
.mh-more span { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- buttons ---------- */
.mh-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 16px; color: #fbf5e9; font: 700 19px/1 var(--display); letter-spacing: -.01em; cursor: pointer; }
.mh-btn i { font: 400 17px/1 var(--mono); font-style: normal; }
.mh-btn small { display: block; margin-top: 5px; font: 500 13px/1 var(--mono); letter-spacing: .04em; opacity: .92; }
.mh-btn--red { background: var(--akane); }
.mh-btn--ink { background: var(--murasaki); }
.mh-btn:active, .mh-door:active, .mh-dock a:active { transform: translateY(1px); }
.mh-eye, .mh-tile, .mh-feature, .mh-scene, .mh-wall a, .mh-shot, .mh-desk { transition: opacity .15s var(--ease-out); }
.mh-eye:active, .mh-tile:active, .mh-feature:active, .mh-scene:active, .mh-wall a:active, .mh-shot:active, .mh-desk:active { opacity: .82; }

/* ==================== 1. HERO: headline, one picture, two doors ==================== */
.mh-hero { padding: calc(var(--mh-barh) + env(safe-area-inset-top, 0px)) 0 32px; }
/* The picture runs edge to edge with no frame: it starts under the bar and
   its top melts gently into the paper (starts half visible, not fully faded) and
   its bottom fades out behind the buttons. It takes
   whatever height is left, so picture and both doors share the first screen
   (250px = everything that is not it). */
.mh-shot { position: relative; display: block; height: 116vw; height: min(calc(100svh - 250px), 130vw); min-height: 300px; overflow: hidden; }
.mh-shot picture { display: block; height: 100%; }
.mh-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0, #000 12%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0, #000 12%, #000 84%, transparent 100%);
}
.mh-chip {
  position: absolute; left: var(--mh-gut); bottom: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 13px;
  background: var(--bone); border: .5px solid var(--sumi);
  font: 800 18px/1 var(--display); font-style: italic; letter-spacing: -.01em;
}
.mh-chip b { font: 700 15px/1 var(--display); font-style: normal; }
.mh-chip i { font: 400 15px/1 var(--mono); font-style: normal; color: var(--akane); }
.mh-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px var(--mh-gut) 0; }
.mh-door { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: 10px 14px; color: #fbf5e9; }
.mh-door::before { content: ""; position: absolute; inset: 5px; border: .5px solid rgba(251,245,233,.36); pointer-events: none; }
.mh-door--red { background: var(--akane); }
.mh-door--ink { background: var(--murasaki); }
.mh-door b { font: 700 23px/1 var(--display); letter-spacing: -.01em; }
.mh-door span { margin-top: 7px; font: 500 13px/1 var(--mono); letter-spacing: .04em; opacity: .94; }
.mh-door i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 400 18px/1 var(--mono); font-style: normal; }

/* ==================== 2. DROPS (ink) ==================== */
.mh-drops { padding: 40px var(--mh-gut) 48px; }
.mh-drops .mh-seal { color: var(--mh-coral); }
.mh-feature { display: block; margin: 20px calc(var(--mh-gut) * -1) 0; }
.mh-feature img { width: 100%; height: auto; }
.mh-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px var(--mh-gut) 0; }
.mh-cap b { font: 800 23px/1.1 var(--display); font-style: italic; letter-spacing: -.015em; }
.mh-cap span { font: 700 16px/1 var(--display); white-space: nowrap; }
.mh-cap i { font: 400 15px/1 var(--mono); font-style: normal; color: var(--mh-coral); margin-left: 6px; }
.mh-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.mh-tile { display: flex; flex-direction: column; background: var(--mh-ink-2); border: .5px solid var(--mh-rule-ink); }
.mh-tile img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.mh-tile p { display: flex; flex-direction: column; gap: 7px; padding: 12px 12px 14px; }
.mh-tile b { font: 800 18px/1 var(--display); font-style: italic; }
.mh-tile span { font: 500 12px/1 var(--mono); letter-spacing: .02em; color: var(--mh-on-ink-2); white-space: nowrap; }
.mh-grp { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: .5px solid var(--mh-rule-ink); }
.mh-grp h3 { font: 800 23px/1.1 var(--display); font-style: italic; letter-spacing: -.015em; }
.mh-grp span { color: var(--mh-on-ink-2); }
.mh-eyes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.mh-eye { display: flex; flex-direction: column; min-height: 74px; background: var(--mh-ink-2); border: .5px solid var(--mh-rule-ink); }
.mh-eye img { width: 100%; height: 42px; object-fit: cover; object-position: 100% 50%; }
.mh-eye b { display: flex; align-items: center; flex: 1; padding: 0 10px 1px; font: 800 18px/1 var(--display); font-style: italic; letter-spacing: -.01em; }
.mh-drops .mh-btn { margin-top: 36px; }

/* ==================== 3. CUSTOM (paper) ==================== */
.mh-custom { padding: 40px 0 48px; }
.mh-custom .mh-head { margin: 0 var(--mh-gut); }
.mh-custom .mh-seal { color: var(--akane); }
.mh-scene { display: block; margin-top: 20px; }
.mh-scene img { width: 100%; height: auto; }
.mh-say { margin: 32px var(--mh-gut) 0; font: 800 min(9.4vw, 38px)/1.02 var(--display); letter-spacing: -.02em; }
.mh-custom .mh-btn { margin: 20px var(--mh-gut) 0; }
.mh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 40px var(--mh-gut) 0; }
.mh-steps img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.mh-steps figcaption { display: flex; align-items: center; gap: 7px; padding-top: 10px; color: var(--sumi); }
.mh-steps figcaption i { font-style: normal; color: var(--akane); }

/* the wall: real builds, no captions */
.mh-wallhead { display: flex; align-items: center; justify-content: space-between; margin: 44px var(--mh-gut) 0; padding-top: 24px; border-top: .5px solid var(--rule); }
.mh-wallhead h3 { font: 700 22px/1.1 var(--display); letter-spacing: -.01em; }
.mh-wall { display: flex; gap: 12px; margin-top: 16px; padding: 0 var(--mh-gut) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--mh-gut); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mh-wall::-webkit-scrollbar { display: none; }
.mh-wall li { flex: 0 0 58%; scroll-snap-align: start; }
.mh-wall a { display: block; background: var(--mh-ink); }
.mh-wall img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* ==================== 4. THE DESK (one picture) + footer (ink) ==================== */
.mh-desk { display: block; }
.mh-desk picture { display: block; }
.mh-desk img { width: 100%; height: auto; }

/* ==================== footer: small and quiet ==================== */
.mh-foot { padding: 24px var(--mh-gut) calc(78px + env(safe-area-inset-bottom, 0px)); color: rgba(246,239,225,.5); }
.mh-foot__mark { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 34px; font: 400 10px/1.4 var(--mono); letter-spacing: .06em; }
.mh-foot__mark img { width: 30px; height: 30px; }
.mh-foot ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 2px -6px 0; }
.mh-foot li a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ==================== dock: Shop, Custom ==================== */
.mh-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bone); border-top: .5px solid var(--sumi);
  visibility: hidden; transform: translateY(102%);
  transition: transform .26s var(--ease-in-out), visibility 0s .26s;
}
.mh-dock.is-on { visibility: visible; transform: none; transition: transform .26s var(--ease-out); }
.mh-dock a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 14px; color: #fbf5e9; font: 700 19px/1 var(--display); }
.mh-dock a i { font: 400 16px/1 var(--mono); font-style: normal; }

@media (max-width: 359px) {
  .mh-door b { font-size: 20px; }
  .mh-eye b, .mh-tile b { font-size: 16px; }
  .mh-dock a { font-size: 17px; padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html.mh-on { scroll-behavior: auto; }
  html.mh-on .nav, .mh-dock, .mh-dock.is-on { transition: none; }
}

/* ==================== DESKTOP (721px and up) ====================
   Same sections, laid out wide: content sits in a centred 1200px column
   (the gutter grows to centre it) while photos and colour bands stay full
   width. */
@media (min-width: 721px) {
  .mh {
    --mh-gut: max(48px, calc((100% - 1200px) / 2));
    --mh-barh: 64px;   /* the desktop nav bar, as drawn at 85% */
  }
  .mh-dock { display: none; }

  /* hero: the wide washi scene, doors underneath */
  .mh-hero { padding: var(--mh-barh) 0 56px; }
  .mh-shot { height: min(calc(100vh - 240px), 52vw); min-height: 420px; }
  .mh-shot img { object-position: 100% 50%; }
  .mh-chip { bottom: 40px; }
  .mh-doors { grid-template-columns: repeat(2, minmax(0, 320px)); gap: 16px; margin-top: 28px; }

  /* drops: Mofusand large on the left, Gengar + Smiski stacked beside it,
     the Chainsaw Man strips four across */
  .mh-drops {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
    padding: 72px var(--mh-gut) 80px;
  }
  .mh-drops > .mh-head, .mh-grp, .mh-eyes, .mh-drops > .mh-btn { grid-column: 1 / -1; }
  .mh-feature { margin: 24px 0 0; }
  .mh-cap { padding: 16px 0 0; }
  .mh-pair { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .mh-pair .mh-tile img { aspect-ratio: 2 / 1; }
  .mh-eyes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .mh-eye img { height: 64px; }
  .mh-drops > .mh-btn { justify-self: start; min-width: min(340px, 100%); }

  /* custom: the sketchbook scene left, the pitch and the three steps right,
     the six past builds in one row underneath */
  .mh-custom {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    /* rows: head | space | say | button | steps | space | wall head | wall,
       so the right column sits centred beside the picture */
    grid-template-rows: auto 1fr auto auto auto 1fr auto auto;
    column-gap: 56px;
    padding: 72px var(--mh-gut) 80px;
  }
  .mh .mh-custom > * { margin-left: 0; margin-right: 0; }
  .mh-custom > .mh-head { grid-column: 1 / -1; }
  .mh-scene { grid-column: 1; grid-row: 2 / 7; margin-top: 24px; }
  .mh-say { grid-column: 2; grid-row: 3; font-size: 52px; }
  .mh-custom > .mh-btn { grid-column: 2; grid-row: 4; justify-self: start; min-width: min(340px, 100%); margin-top: 28px; }
  .mh-steps { grid-column: 2; grid-row: 5; margin-top: 48px; }
  .mh-wallhead { grid-column: 1 / -1; grid-row: 7; margin-top: 64px; }
  .mh-wall {
    grid-column: 1 / -1; grid-row: 8;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px;
    margin-top: 20px; padding: 0; overflow: visible;
  }
  .mh-wall li { flex: none; }

  /* desk band, footer on one line */
  .mh-desk img { height: clamp(360px, 40vw, 620px); object-fit: cover; object-position: 50% 73%; }
  .mh-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px var(--mh-gut) 32px; }
  .mh-foot ul { justify-content: flex-end; margin: 0; }

  /* a little feedback under the mouse */
  @media (hover: hover) {
    .mh-feature img, .mh-tile img, .mh-eye img, .mh-wall img, .mh-scene img, .mh-desk img { transition: opacity .2s var(--ease-out); }
    .mh-feature:hover img, .mh-tile:hover img, .mh-eye:hover img, .mh-wall a:hover img, .mh-scene:hover img, .mh-desk:hover img { opacity: .9; }
    .mh-btn:hover, .mh-door:hover { filter: brightness(1.08); }
  }
}