@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* Handpan Studio Tokyo mirror — overrides for the stripped Squarespace runtime. */

/* Entrance animation approximation: only applies when shim JS has loaded
   (html.hpst-js), so content can never be stuck hidden. */
.hpst-js [data-animation-role] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.hpst-js [data-animation-role].hpst-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hpst-js [data-animation-role] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Native video replacements: ensure wrappers keep their height.
   Live: the component CSS gives .native-video-player a 56.25% padding-top box
   and Squarespace JS positions the player absolutely inside it. We reproduce
   that: keep the padded box, absolutely fill it with our <video>.
   (Verified pixel-identical to live on about pages + homepage.) */
.sqs-native-video { position: relative; }
.sqs-block-video .native-video-player,
.native-video-player { position: relative; }
.native-video-player video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  max-width: 100%;
}
.sqs-video-background-native { position: absolute; inset: 0; overflow: hidden; }

/* oEmbed (YouTube) intrinsic-ratio boxes: wrapper carries padding-bottom,
   iframe fills it absolutely (Squarespace JS used to do this) */
.embed-block-wrapper { position: relative; }
.embed-block-wrapper .sqs-video-wrapper { position: absolute; inset: 0; }

/* ------------------------------------------------------------------ *
 * Lineup widget — replaces the JS-only user-items-list carousel with a
 * static 4-pan shop section wired to Stripe checkout.
 * ------------------------------------------------------------------ */
.hpst-pans {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 28px 84px;
  font-family: "Libre Baskerville", "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  color: #26221F;
}
.hpst-pans-head { text-align: center; margin-bottom: 52px; }
.hpst-pans-head h2 {
  /* match the site's other section headings (~61.5px at 1326px viewport) */
  font-size: clamp(34px, 4.65vw, 62px);
  font-weight: 400; letter-spacing: .04em; margin: 0 0 14px; line-height: 1.15;
}
.hpst-pans-head p { font-size: 17px; color: #6f6256; margin: 0; }
.hpst-pans-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 980px) and (min-width: 701px) {
  .hpst-pans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* mobile: swipeable side-scroll carousel with snap + peek of the next card */
@media (max-width: 700px) {
  .hpst-pans { padding-left: 0; padding-right: 0; }
  .hpst-pans-head { padding: 0 22px; }
  .hpst-pans-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 4px 22px 26px;
    scrollbar-width: none;
  }
  .hpst-pans-grid::-webkit-scrollbar { display: none; }
  .hpst-pan-card {
    flex: 0 0 76%;
    max-width: 320px;
    scroll-snap-align: center;
  }
  .hpst-pan-card:hover { transform: none; box-shadow: none; }
}
.hpst-pan-card {
  background: rgba(246, 243, 234, .94);
  border: 1px solid #d9cdb7;
  padding: 30px 22px 28px;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.hpst-pan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(38, 34, 31, .14);
}
.hpst-pan-img { display: block; }
.hpst-pan-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  transition: transform .45s ease;
}
.hpst-pan-card:hover .hpst-pan-img img { transform: scale(1.04); }
.hpst-pan-name { margin: 18px 0 4px; font-size: 24px; font-weight: 600; letter-spacing: .03em; }
.hpst-pan-name a { color: #26221F; text-decoration: none; }
.hpst-pan-notes { margin: 0 0 2px; font-size: 15px; color: #6f6256; letter-spacing: .08em; }
.hpst-pan-price { margin: 6px 0 18px; font-size: 20px; color: #8E6B4E; letter-spacing: .04em; }
.hpst-pan-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.hpst-pan-buy {
  font-family: inherit;
  background: #8E6B4E; color: #fff;
  border: 0; border-radius: 15px;
  padding: 13px 40px; font-size: 15px; letter-spacing: .05em;
  cursor: pointer; transition: opacity .2s ease;
}
.hpst-pan-buy:hover { opacity: .85; }
.hpst-pan-buy.hpst-busy { opacity: .5; pointer-events: none; }
.hpst-pan-more {
  font-size: 13.5px; color: #8E6B4E; text-decoration: underline;
  text-underline-offset: 3px;
}
.hpst-pan-more:hover { color: #26221F; }

/* Product-block images: live Squarespace injects per-block .image-style CSS at
   runtime; without it a default fixed height squashes the image. */
.sqs-block-product .image-styles-wrapper img,
.sqs-block-product .sqs-product-block-main-image {
  width: 100%;
  height: auto !important;
  object-fit: contain;
}

/* ------------------------------------------------------------------ *
 * Standalone video sections: their fluid-engine rows were sized for the
 * unhydrated double-height player; collapse empty rows so the section
 * hugs the video. (Hero sections with H1 overlays are NOT listed.)
 * ------------------------------------------------------------------ */
section[data-section-id="69fb2742e6ece61cc32c5c5f"] .fluid-engine,
section[data-section-id="69fa772614c4ed15ce56cd06"] .fluid-engine,
section[data-section-id="6939e32f5abc9d5e596489a6"] .fluid-engine,
section[data-section-id="69dcb180501e5e51b9702e40"] .fluid-engine,
section[data-section-id="69dcb07097f8781b2ed1ac1a"] .fluid-engine,
section[data-section-id="69dcb0d4c5466922b9482915"] .fluid-engine,
section[data-section-id="69dcb11197f8781b2ed1df76"] .fluid-engine,
section[data-section-id="69dcb03b0a3024691aed98ea"] .fluid-engine,
section[data-section-id="69a04c73cdbcb031d65c8bb2"] .fluid-engine,
section[data-section-id="69a04c81e23cb7269bfd79d2"] .fluid-engine,
section[data-section-id="69a04c9694381655f7ce49a4"] .fluid-engine,
section[data-section-id="6995758eff206b158248cb99"] .fluid-engine {
  grid-template-rows: auto !important;
  row-gap: 0 !important;
}
section[data-section-id="69fb2742e6ece61cc32c5c5f"] .sqs-block-video,
section[data-section-id="69fa772614c4ed15ce56cd06"] .sqs-block-video,
section[data-section-id="6939e32f5abc9d5e596489a6"] .sqs-block-video,
section[data-section-id="69dcb180501e5e51b9702e40"] .sqs-block-video,
section[data-section-id="69dcb07097f8781b2ed1ac1a"] .sqs-block-video,
section[data-section-id="69dcb0d4c5466922b9482915"] .sqs-block-video,
section[data-section-id="69dcb11197f8781b2ed1df76"] .sqs-block-video,
section[data-section-id="69dcb03b0a3024691aed98ea"] .sqs-block-video,
section[data-section-id="69a04c73cdbcb031d65c8bb2"] .sqs-block-video,
section[data-section-id="69a04c81e23cb7269bfd79d2"] .sqs-block-video,
section[data-section-id="69a04c9694381655f7ce49a4"] .sqs-block-video,
section[data-section-id="6995758eff206b158248cb99"] .sqs-block-video {
  margin: 2.5vw 0;
}

/* ------------------------------------------------------------------ *
 * Quantity stepper (Squarespace runtime styled these via CSS-in-JS)
 * ------------------------------------------------------------------ */
.product-quantity-input {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(38, 34, 31, .4);
  background: transparent;
}
.product-quantity-input .decrease-button,
.product-quantity-input .increase-button {
  width: 42px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: #26221F; opacity: .75;
  transition: background .15s ease, opacity .15s ease;
}
.product-quantity-input .decrease-button:hover,
.product-quantity-input .increase-button:hover {
  background: rgba(142, 107, 78, .12); opacity: 1;
}
.product-quantity-input input {
  width: 44px; text-align: center;
  border: 0; border-left: 1px solid rgba(38,34,31,.2); border-right: 1px solid rgba(38,34,31,.2);
  background: transparent;
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 16px; color: #26221F;
  -moz-appearance: textfield; appearance: textfield;
}
.product-quantity-input input::-webkit-outer-spin-button,
.product-quantity-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-quantity-input input:focus { outline: none; }

/* ------------------------------------------------------------------ *
 * Smooth in-page anchors (FAQ category jumps) with header offset
 * ------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
#instruments, #ordering, #shipping, #payments, #returns, #about, #handpans, #faq {
  scroll-margin-top: 110px;
}

/* ------------------------------------------------------------------ *
 * "What is a handpan?" intro strip (homepage education band)
 * ------------------------------------------------------------------ */
.hpst-intro-section { background: #fff; }
.hpst-intro {
  max-width: 1140px; margin: 0 auto; padding: 84px 28px 88px;
  font-family: "Libre Baskerville", "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  color: #26221F; text-align: center;
}
.hpst-intro h2 {
  font-size: clamp(30px, 4vw, 52px); font-weight: 400;
  letter-spacing: .05em; margin: 0 0 48px;
}
.hpst-intro-more {
  display: inline-block; margin-top: 12px; padding: 13px 40px;
  border: 1px solid #8E6B4E; border-radius: 15px;
  color: #8E6B4E; text-decoration: none; font-size: 14px; letter-spacing: .06em;
  transition: all .2s ease;
}
.hpst-intro-more:hover { background: #8E6B4E; color: #fff; }
@media (max-width: 700px) {
  .hpst-intro { padding: 60px 24px 64px; }
  }

/* CTA buttons inside row-collapsed video sections lost their vertical
   padding — restore explicit button geometry site-wide (matches live look) */
.sqs-block-button .sqs-button-element--primary,
a.sqs-button-element--primary {
  padding: 16px 36px !important;
  line-height: 1.3 !important;
  height: auto !important;
  display: inline-block;
}

/* Hero headline: larger on phones */
@media (max-width: 700px) {
  main article section:first-of-type h1 {
    font-size: clamp(38px, 11vw, 64px) !important;
    line-height: 1.2 !important;
  }
}

/* Trust band (shipping / craft / concierge): tame + center icons on mobile */
img[src*="shippingicon"], img[src*="whitegloveicon"], img[src*="musichandpan"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 700px) {
  img[src*="shippingicon"], img[src*="whitegloveicon"], img[src*="musichandpan"] {
    max-width: 64px !important;
    width: 64px !important;
    height: auto !important;
    float: none !important;
    object-position: center !important;
  }
}

/* ------------------------------------------------------------------ *
 * Sound-pads section: history CTA band
 * ------------------------------------------------------------------ */
.hpst-pads-cta {
  text-align: center;
  padding: 88px 24px 88px;
  font-family: "Libre Baskerville", "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
}
.hpst-pads-cta a {
  display: inline-block; padding: 13px 40px;
  border: 1px solid #C4A88D; border-radius: 15px;
  color: #C4A88D; text-decoration: none;
  font-size: 14px; letter-spacing: .08em;
  transition: all .25s ease;
}
.hpst-pads-cta a:hover { background: #C4A88D; color: #191512; }

/* ------------------------------------------------------------------ *
 * Research CTA ("研究を読む" / "Read the research"): the harvested
 * Squarespace grid reserved tall empty rows around the button block,
 * leaving a large dead gap under it. Collapse the row track so the
 * button sits a normal distance below the stat cards.
 * ------------------------------------------------------------------ */
/* Scoped with :has(.hpst-studies): a link ending in sound-healing-research also
   exists on /about-handpan (the 研究を見る button) — matching on the link alone
   collapsed THAT section's grid and made its fluid images 0px tall/invisible. */
.fluid-engine:has(> .fe-block .hpst-studies):has(> .fe-block a[href$="sound-healing-research"]) {
  /* the harvested grid reserved ~16 tall rows; let content size them so the
     section ends just below the button instead of ~570px of dead space.
     padding-top replaces the two leading spacer rows that used to give the
     section heading ("音の効果" / "Sound Heals") its breathing room. */
  grid-template-rows: auto !important;
  row-gap: 0 !important;
  align-items: start;
  padding-top: 46px;     /* room above the 音の効果 heading */
  padding-bottom: 60px;  /* ...and under the 研究を読む button, see below */
}
/* The heading overlays .hpst-studies' own 140px top padding, so the visible gap
   under the title is set there, not by the grid. Give the title 20% more room
   on both sides (52 -> 62 above, 85 -> 102 below), and rebalance the button:
   it sat ~198px below the cards with only 14px under it. Trimming the widget's
   bottom padding and padding the grid instead centres it in its own band. */
.hpst-studies { padding-top: 112px !important; padding-bottom: 49px !important; }
@media (max-width: 767px) {
  /* mobile: the gaps around the heading and button read far larger on a
     small screen — tighten the whole band (Alex, 2026-08-13) */
  .hpst-studies { padding-top: 64px !important; padding-bottom: 34px !important; }
}
/* the stat-card blocks size to their content on row 1 (the button is excluded
   so the container rule cannot override its own placement below) */
.fluid-engine:has(> .fe-block .hpst-studies):has(> .fe-block a[href$="sound-healing-research"])
  > .fe-block:not(:has(a[href$="sound-healing-research"])) {
  grid-row: 1 !important;
  align-self: start;
}
/* the button block sits on its own row, centred, with real breathing room */
.fluid-engine:has(> .fe-block .hpst-studies) > .fe-block:has(a[href$="sound-healing-research"]) {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;
  justify-self: center;
  margin: 30px 0 22px;
}
@media (max-width: 767px) {
  .fluid-engine:has(> .fe-block .hpst-studies) > .fe-block:has(a[href$="sound-healing-research"]) {
    margin: 18px 0 12px;
  }
}

/* ------------------------------------------------------------------ *
 * Native Squarespace buttons: the stripped runtime supplied their
 * vertical padding via CSS-in-JS, so without it they collapse to a
 * ~21px strip of text. Restore a real, tappable button box in the
 * brand's sans face.
 * ------------------------------------------------------------------ */
.sqs-block-button-element {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif !important;
  letter-spacing: .02em;
  line-height: 1.35;
  border-radius: 15px;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * "What is a handpan" — editorial numbered rows (lab 案2 styling)
 * ------------------------------------------------------------------ */
.hpst-intro-section { background: #F6F3EA; }
.hpst-ed {
  max-width: 1000px; margin: 0 auto; padding: 88px 28px 92px;
  font-family: "Libre Baskerville", "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  color: #26221F;
}
.hpst-ed h2 {
  font-size: clamp(30px, 4vw, 48px); font-weight: 400;
  letter-spacing: .05em; margin: 0 0 50px;
}
.hpst-ed-row {
  display: grid; grid-template-columns: 80px 1fr; gap: 22px;
  padding: 28px 0; border-top: 1px solid #d9cdb7; align-items: baseline;
}
.hpst-ed-num {
  /* 2026-08-27: numbers are 明朝 site-wide (Alex's pick) — was Libre Baskerville italic */
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-style: normal; font-weight: 300;
  font-size: 26px; color: #8E6B4E;
}
.hpst-ed-row h3 { font-size: 19px; font-weight: 600; margin: 0 0 8px; letter-spacing: .03em; }
.hpst-ed-row p { font-size: 14px; line-height: 2.1; color: #6f6256; margin: 0; }
.hpst-ed-foot { text-align: center; margin-top: 38px; }
@media (max-width: 700px) {
  .hpst-ed { padding: 60px 24px 66px; }
  .hpst-ed-row { grid-template-columns: 48px 1fr; gap: 14px; padding: 22px 0; }
}

/* ------------------------------------------------------------------ *
 * Contact form — classic card (lab 案1)
 * ------------------------------------------------------------------ */
.hpst-cform {
  font-family: "Libre Baskerville", "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  color: #26221F; background: #fff;
  border-top: 5px solid #8E6B4E;
  padding: 40px 34px 36px;
}
.hpst-cform h2 {
  font-size: 28px; font-weight: 400; letter-spacing: .08em;
  margin: 0 0 6px; text-align: center;
}
.hpst-cform-sub {
  text-align: center; font-size: 11px; letter-spacing: .24em;
  color: #C4A88D; margin: 0 0 34px;
  font-family: "Libre Baskerville", Georgia, serif;
}
.hpst-cform-form > div { margin-bottom: 22px; }
.hpst-cform label {
  display: block; font-size: 15px; margin: 0 0 6px; letter-spacing: .05em;
}
.hpst-req { color: #8E6B4E; font-size: 12px; margin-left: 6px; }
.hpst-cform input[type="text"],
.hpst-cform input[type="email"],
.hpst-cform input[type="tel"],
.hpst-cform select,
.hpst-cform textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px;
  color: #26221F; background: transparent;
  border: 1px solid rgba(38,34,31,.4) !important; border-radius: 0;
  padding: 12px 14px; outline: none; transition: border-color .2s;
}
.hpst-cform textarea { min-height: 120px; resize: vertical; }
.hpst-cform input:focus, .hpst-cform select:focus, .hpst-cform textarea:focus { border-color: #26221F !important; }
/* studio picker: native arrow off, brand chevron drawn in (padding clears it) */
.hpst-cform select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 40px; line-height: 1.4;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238E6B4E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.hpst-cform-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 0 !important; }
.hpst-cform-grid2 > div { margin-bottom: 22px; }
@media (max-width: 640px) { .hpst-cform-grid2 { grid-template-columns: 1fr; gap: 0; } }
.hpst-cform-chks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.hpst-cform-chks label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; margin: 0; cursor: pointer;
}
.hpst-cform-chks input { width: 15px; height: 15px; accent-color: #8E6B4E; }
.hpst-cform-actions { text-align: center; margin-top: 6px; }
.hpst-cform-actions button {
  font-family: inherit; background: #8E6B4E; color: #fff;
  border: 0; border-radius: 15px; padding: 13px 40px;
  font-size: 15px; letter-spacing: .08em; cursor: pointer; transition: opacity .2s;
}
.hpst-cform-actions button:hover { opacity: .85; }
.hpst-cform-actions button:disabled { opacity: .5; }
.hpst-cform-note { display: none; margin: 14px 0 0; padding: 12px 16px; font-size: 13.5px; }
.hpst-cform-note.ok { display: block; border: 1px solid #8E6B4E; background: #F6F3EA; }
.hpst-cform-note.err { display: block; border: 1px solid #b0563e; background: #fdf3ef; color: #7a3a28; }

/* ------------------------------------------------------------------ *
 * Contact form — styles matching the live hydrated form (Squarespace
 * injects these at runtime via CSS-in-JS; values copied from the live
 * site's computed styles on 2026-07-05).
 * ------------------------------------------------------------------ */
.react-form-contents { font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; color: #26221F; }
.react-form-contents fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.react-form-contents legend { padding: 0; display: block; }
.react-form-contents .form-item { margin: 0 0 20px; padding: 0; }
.react-form-contents .title { font-size: 17px; font-weight: 400; margin-bottom: 8px; }
.react-form-contents .caption-text { font-size: 15.3px; margin-bottom: 4px; }
.react-form-contents .description.required { opacity: .6; margin-left: 6px; font-size: 13px; }
.react-form-contents fieldset.name { display: flex; gap: 0 10px; }
@media (max-width: 700px) {
  .react-form-contents fieldset.name { flex-direction: column; gap: 0; }
}
.react-form-contents fieldset.name > legend { flex-basis: 100%; }
.react-form-contents fieldset.name .field { flex: 1 1 0; }
.react-form-contents .form-input-effects { display: none; }
.react-form-contents input[type="text"],
.react-form-contents input[type="email"],
.react-form-contents textarea {
  width: 100%; box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(38, 34, 31, .55);
  border-radius: 0;
  padding: 5px 10px;
  font: inherit; font-size: 17px; color: #26221F;
  height: 43px;
}
.react-form-contents textarea { height: 100px; resize: vertical; }
.react-form-contents input:focus,
.react-form-contents textarea:focus {
  outline: none; border-color: #26221F;
}
.react-form-contents .option { margin: 7px 0; }
.react-form-contents .option label {
  display: inline-flex; gap: 11px; align-items: center;
  font-size: 15.3px; cursor: pointer;
}
.react-form-contents input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0; flex: none;
  border: 1px solid rgba(38, 34, 31, .55);
  background: transparent; cursor: pointer;
}
.react-form-contents input[type="checkbox"]:checked {
  background: #26221F;
  box-shadow: inset 0 0 0 2.5px #F6F3EA;
}
/* Kill the runtime border-overlay spans: static.css forces them visible with
   inset:0 !important at (0,3,0); without the runtime CSS-module positioning
   they expand to the whole form block (the "notched box" bug). */
.sqs-site-style-form .form-item .form-input-effects { display: none !important; }

/* Restore real borders on controls: static.css sets border-color transparent
   !important via body.form-field-hover-focus-* — out-gun it. */
.sqs-site-style-form .react-form-contents .form-item input:not([type=checkbox]):not([type=radio]),
.sqs-site-style-form .react-form-contents .form-item select,
.sqs-site-style-form .react-form-contents .form-item textarea {
  border: 1px solid rgba(38, 34, 31, .55) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}
.sqs-site-style-form .react-form-contents .form-item input:not([type=checkbox]):not([type=radio]):focus,
.sqs-site-style-form .react-form-contents .form-item textarea:focus {
  border-color: #26221F !important;
}

/* Footer newsletter: site.css hides .newsletter-block:not(.rendered);
   the JS that added .rendered was stripped. */
.newsletter-block:not(.rendered) { opacity: 1; }

/* Products: reveal the server-rendered product list (the .is-loaded class
   was added by the stripped ProductList controller) */
.product-list .product-list-item,
.product-related-products.related-products .product-list-item {
  opacity: 1;
  transform: none;
}

.react-form-contents .form-button-wrapper { margin-top: 10px; }
.react-form-contents .form-submit-button {
  background: #8E6B4E; color: #fff;
  border: 0; border-radius: 15px;
  padding: 13px 40px;
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 14px;
  letter-spacing: .08em; cursor: pointer;
  transition: opacity .2s ease;
}
.react-form-contents .form-submit-button:hover { opacity: .85; }
.react-form-contents .form-submit-button-state { display: none; }
.react-form-contents .btIyKrvyA6dTrftg { display: none; }  /* honeypot */

/* ------------------------------------------------------------------ *
 * Brand refresh (2026-08): sans headlines, serif body, no eyebrows.
 * 2026-08-28 (Alex): Latin/EN text — headings AND body — renders in Libre
 * Baskerville (the original designer face); JP glyphs run on the system 明朝
 * for headings AND body (headings trial 2026-08-28 — revert: put "Zen Kaku
 * Gothic New" back in front of the JP fonts in the heading stacks + @import). Eyebrow/kicker labels are removed.
 * ------------------------------------------------------------------ */
:root {
  --heading-font-font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  /* perf: JP body uses system serifs (Hiragino / Yu Mincho), no ~1MB web font */
  --body-font-font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", Georgia, serif;
}
h1, h2, h3, h4, h5, h6,
.hpst-pans-head h2, .hpst-intro h2,
.hpst-ed h2, .hpst-ed-row h3,
.hpst-cform h2 {
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
}
/* eyebrow/kicker labels are removed from the brand (also stripped in build) */
.eyebrow, .hpst-eyebrow, .kicker { display: none !important; }

/* ------------------------------------------------------------------ *
 * Mobile touch comfort: 44px tap targets, no iOS focus-zoom on inputs.
 * ------------------------------------------------------------------ */
@media (max-width: 700px), (pointer: coarse) {
  .hpst-pan-more, .hpst-cta a, .hpst-pads-cta a {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ------------------------------------------------------------------ *
 * Language globe: the harvested header masked this glyph from an
 * external squarespace-cdn URL. Serve the same asset from our own
 * origin so the mirror has no Squarespace dependency and the icon is
 * byte-identical to the one the standalone pages use.
 * ------------------------------------------------------------------ */
.header-nav-folder-title-text::before {
  -webkit-mask-image: url("/assets/img/language-select_64px.png") !important;
  mask-image: url("/assets/img/language-select_64px.png") !important;
}

/* ------------------------------------------------------------------ *
 * Sound-sample play buttons: the glyph was 18px inside a 56px disc
 * (only 32% of it) and carried margin-left:3px, which stacked on top of
 * the triangle path's own +1.5u optical offset and threw it off centre.
 * Bigger glyph, offset handled by the path alone.
 * ------------------------------------------------------------------ */
.hpst-play .hpst-icon { width: 24px; height: 24px; }
.hpst-play .hpst-icon-play { margin-left: 0; }
@media (max-width: 700px) {
  .hpst-play .hpst-icon { width: 21px; height: 21px; }
}

/* ================================================================== *
 * SHOP PAGE CONTENT
 * The shop's bespoke content (hero, trust strip, rich product cards,
 * chooser, hard-case block, promise band, atmosphere, contact CTA)
 * used to live in a standalone page with its own header/footer, which
 * drifted from the rest of the site. It is now injected into the real
 * generated page instead, so the shop shares the site chrome.
 * Everything is scoped under .hpst-shop because the original markup
 * uses very generic class names (.card, .grid, .btn, .head ...) that
 * would otherwise collide with the harvested Squarespace CSS.
 * ================================================================== */
/* The standalone fragments (catalog, omega, guide, company-overview) are written
   against these same tokens but nothing ever defined them for .hpst-page, so
   every var(--gold) / var(--tan) / var(--cream) in those pages resolved to
   nothing and silently fell back to inherited colours. Same palette as .hpst-shop. */
.hpst-page {
  --cream:#F6F3EA; --cream2:#ECE6D7; --ink:#26221F; --muted:#6f6256;
  --tan:#C4A88D; --gold:#8E6B4E; --line:#d9cdb7; --dark:#191512;
  --sans:"Libre Baskerville","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif;
}

.hpst-shop {
  --cream:#F6F3EA; --cream2:#ECE6D7; --ink:#26221F; --muted:#6f6256;
  --tan:#C4A88D; --gold:#8E6B4E; --line:#d9cdb7; --dark:#191512;
  --sans:"Libre Baskerville","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif;
  font-family:"Libre Baskerville","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",Georgia,serif;
  color:var(--ink); background:var(--cream);
}
.hpst-shop *{box-sizing:border-box}
.hpst-shop h1, .hpst-shop h2, .hpst-shop h3, .hpst-shop h4, .hpst-shop h5, .hpst-shop h6 {font-family:var(--sans);font-weight:500;letter-spacing:.02em!important}
.hpst-shop img {max-width:100%;display:block}
.hpst-shop a {color:inherit}
.hpst-shop .btn {display:inline-block;background:var(--gold);color:#fff;border:0;border-radius:15px;padding:13px 40px;font-family:inherit;font-size:14px;letter-spacing:.08em;text-decoration:none;cursor:pointer;transition:.2s}
.hpst-shop .btn:hover {opacity:.88;transform:translateY(-1px)}
.hpst-shop .btn.ghost {background:transparent;border:1px solid var(--gold);color:var(--gold)}
.hpst-shop .btn.ghost:hover {background:var(--gold);color:#fff}
@media(max-width:680px),(pointer:coarse) {
  .hpst-shop .listen {padding-top:13px!important;padding-bottom:13px!important}
}
.hpst-shop .hero {position:relative;min-height:66vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--cream);overflow:hidden;background:var(--dark)}
.hpst-shop .hero .bg {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.9}
.hpst-shop .hero .veil {position:absolute;inset:0;background:linear-gradient(rgba(20,17,13,.35),rgba(20,17,13,.62))}
.hpst-shop .hero .in {position:relative;padding:110px 24px;max-width:720px}
@media(min-width:761px) {
  /* desktop: the dark header sits flush on the dark hero — give the title room */
  .hpst-shop .hero .in {padding-top:170px}
}
.hpst-shop .hero .eyebrow {color:var(--tan)}
.hpst-shop .hero h1 {font-size:clamp(30px,5.4vw,52px);font-weight:300;letter-spacing:.1em;line-height:1.5;margin:6px 0 20px}
.hpst-shop .hero p {font-size:clamp(14px,2vw,16px);line-height:2.2;color:#e9e1cf;font-weight:300;margin:0 0 30px}
.hpst-shop .hero .rule {width:44px;height:1px;background:var(--tan);margin:24px auto 0}
.hpst-shop .trust {background:#fff;border-bottom:1px solid var(--line)}
.hpst-shop .trust .in {max-width:1000px;margin:0 auto;padding:20px 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;font-size:13px;color:var(--muted);letter-spacing:.04em}
.hpst-shop .trust b {color:var(--gold);font-weight:600}
.hpst-shop section.blk {max-width:1120px;margin:0 auto;padding:78px 24px}
.hpst-shop .head {text-align:center;margin-bottom:48px}
.hpst-shop .head h2 {font-size:clamp(24px,3.4vw,34px);font-weight:400;letter-spacing:.06em;margin:0 0 14px}
.hpst-shop .head p {max-width:560px;margin:0 auto;font-size:15px;line-height:2.3;color:var(--muted);font-weight:300}
.hpst-shop .head p.revision {margin-top:22px;font-size:12.5px;line-height:1.9;letter-spacing:.02em;color:var(--muted);opacity:.85}
.hpst-shop .head p.revision span {display:block;font-size:11px;letter-spacing:.14em;color:var(--gold);margin-bottom:2px}
.hpst-shop .grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
@media(max-width:760px) {
  .hpst-shop .grid {grid-template-columns:1fr}
}
.hpst-shop .card {background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.hpst-shop .card:hover {transform:translateY(-3px);box-shadow:0 20px 44px rgba(38,34,31,.12);border-color:var(--tan)}
.hpst-shop .card .ph {position:relative;background:linear-gradient(160deg,#faf7f0,#efe8d8);padding:30px 30px 14px;text-align:center}
.hpst-shop .card .ph img {margin:0 auto;max-height:230px;width:auto}
.hpst-shop .card .badge {position:absolute;top:16px;left:16px;font-family:"Libre Baskerville",serif;font-size:10.5px;letter-spacing:.18em;color:var(--gold);background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 13px}
.hpst-shop .card .body {padding:24px 28px 28px;display:flex;flex-direction:column;flex:1}
.hpst-shop .card h3 {font-size:23px;font-weight:500;letter-spacing:.04em;margin:0 0 4px}
.hpst-shop .card .scale {font-family:"Libre Baskerville",serif;font-size:13px;letter-spacing:.14em;color:var(--tan);margin:0 0 10px}
.hpst-shop .card .listen {align-self:flex-start;font-family:inherit;font-size:12.5px;letter-spacing:.05em;color:var(--gold);
    background:transparent;border:1px solid var(--line);border-radius:20px;padding:6px 16px;cursor:pointer;margin:0 0 14px;transition:.15s}
.hpst-shop .card .listen:hover, .hpst-shop .card .listen.on {border-color:var(--gold);background:var(--gold);color:#fff}
.hpst-shop .card .desc {font-size:14px;line-height:2.05;color:var(--muted);font-weight:300;margin:0 0 18px;flex:1}
.hpst-shop .card .specs {display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.hpst-shop .card .specs span {font-size:11.5px;letter-spacing:.04em;color:#6f6256;border:1px solid var(--line);border-radius:4px;padding:3px 9px}
.hpst-shop .card .foot {display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hpst-shop .card .price {font-family:"Libre Baskerville",serif;font-size:24px;color:var(--ink)}
.hpst-shop .card .price small {font-size:11px;color:var(--muted);letter-spacing:.08em;margin-left:4px}
.hpst-shop .card .buy {min-width:120px;text-align:center;padding:12px 22px;font-size:14px}
.hpst-shop .card .buy[disabled] {opacity:.55;cursor:wait}
.hpst-shop .choose {background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hpst-shop .choose .rows {max-width:820px;margin:0 auto}
.hpst-shop .choose .r {display:flex;align-items:center;gap:22px;padding:22px 0;border-bottom:1px solid var(--cream2)}
.hpst-shop .choose .r:last-child {border-bottom:0}
.hpst-shop .choose .q {flex:1;font-size:15.5px;line-height:1.9}
.hpst-shop .choose .q b {color:var(--gold);font-weight:600}
.hpst-shop .choose .a {display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hpst-shop .choose .a a {font-size:13px;letter-spacing:.04em;color:var(--gold);border:1px solid var(--gold);border-radius:20px;padding:6px 16px;text-decoration:none;transition:.15s;white-space:nowrap}
.hpst-shop .choose .a a:hover {background:var(--gold);color:#fff}
@media(max-width:600px) {
  .hpst-shop .choose .r {flex-direction:column;align-items:flex-start;gap:12px}
  .hpst-shop .choose .a {justify-content:flex-start}
}
.hpst-shop .band {position:relative;overflow:hidden;background:var(--dark);color:var(--cream);text-align:center}
.hpst-shop .band img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hpst-shop .band .veil {position:absolute;inset:0;background:linear-gradient(rgba(20,17,13,.55),rgba(20,17,13,.68))}
.hpst-shop .band .in {position:relative;max-width:640px;margin:0 auto;padding:96px 24px}
.hpst-shop .band h2 {font-size:clamp(22px,3vw,30px);font-weight:300;letter-spacing:.08em;margin:0 0 20px}
.hpst-shop .band p {font-size:15px;line-height:2.6;color:#e4dccb;font-weight:300;margin:0}
.hpst-shop .cta {text-align:center;max-width:640px;margin:0 auto;padding:80px 24px}
.hpst-shop .cta h2 {font-size:clamp(22px,3vw,30px);font-weight:400;letter-spacing:.06em;margin:0 0 16px}
.hpst-shop .cta p {font-size:15px;line-height:2.3;color:var(--muted);font-weight:300;margin:0 0 28px}
.hpst-shop .cta .btns {display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hpst-shop .pledges {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:960px;margin:0 auto}
@media(max-width:760px) {
  .hpst-shop .pledges {grid-template-columns:1fr;gap:16px}
}
.hpst-shop .pledge {background:#fff;border:1px solid var(--line);border-radius:6px;padding:32px 30px}
@media(max-width:760px) {
  .hpst-shop .pledge {padding:26px 22px}
}
.hpst-shop .pledge .term {display:inline-block;font-family:"Libre Baskerville",serif;font-size:11.5px;letter-spacing:.16em;
    color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:5px 13px;margin:0 0 14px}
.hpst-shop .pledge h3 {font-size:20px;font-weight:500;margin:0 0 10px;line-height:1.6}
.hpst-shop .pledge p {font-size:14.5px;line-height:2.1;color:var(--muted);font-weight:300;margin:0}
.hpst-shop .pledge .fine {display:block;margin-top:12px;font-size:12.5px;line-height:1.9;color:var(--muted);opacity:.85}
/* Flat dark, no gradient: the cream->dark fade read as a slow wash and was
   dropped 2026-08-12. The section now cuts straight from the cream band above
   it into the dark, like every other section boundary on the site. */
.hpst-shop .promise-sec {background:var(--dark);padding:84px 24px 96px}
.hpst-shop .promise-in {max-width:1120px;margin:0 auto}
.hpst-shop .promise-sec .head h2 {color:var(--cream)}
.hpst-shop .promise-sec .head p {color:#cfc2ad}
.hpst-shop .promise-sec .pledge {background:rgba(246,243,234,.045);border-color:rgba(196,168,141,.26)}
.hpst-shop .promise-sec .pledge h3 {color:var(--cream)}
.hpst-shop .promise-sec .pledge p {color:#d3cab8}
.hpst-shop .promise-sec .pledge .term {color:var(--tan);border-color:rgba(196,168,141,.42);background:transparent}
.hpst-shop .promise-sec .pledge .fine {color:#a89d8b}
/* Discount code, ported from custom/shop.html when that file was retired.
   Entry moved to the Stripe checkout page, so what is left here is the status
   line plus the discounted-price treatment a ?code= link paints in. */
.hpst-shop .coupon {max-width:560px;margin:34px auto 0;text-align:center}
.hpst-shop .coupon .msg {min-height:1.5em;margin:12px 0 0;font-size:12.5px;line-height:1.8;color:var(--muted)}
.hpst-shop .coupon .msg.ok {color:var(--gold)}
.hpst-shop .coupon .msg.err {color:#b0563e}
.hpst-shop .card .price s {color:var(--muted);font-size:15px;margin-right:9px;text-decoration-thickness:1px}
.hpst-shop .card .off {display:inline-block;margin-left:8px;font-family:"Libre Baskerville",serif;font-size:10.5px;
    letter-spacing:.14em;color:#fff;background:var(--gold);border-radius:20px;padding:3px 10px;vertical-align:2px}

.hpst-shop .casewrap {display:grid;grid-template-columns:5fr 6fr;gap:46px;align-items:center;max-width:1000px;margin:0 auto}
@media(max-width:760px) {
  .hpst-shop .casewrap {grid-template-columns:1fr;gap:26px}
}
.hpst-shop .casewrap img {width:100%;border-radius:6px;border:1px solid var(--line);
  background:linear-gradient(160deg,#faf7f0,#efe8d8);padding:clamp(22px,4vw,44px)}
.hpst-shop .casewrap h2 {font-size:clamp(24px,3.4vw,34px);font-weight:400;letter-spacing:.06em;line-height:1.7;margin:0 0 16px}
.hpst-shop .casewrap p {font-size:15px;line-height:2.3;color:var(--muted);font-weight:300;margin:0}
.hpst-shop footer a {color:var(--tan);text-decoration:none;margin:0 8px}
.hpst-shop #toast {position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 26px;border-radius:12px;font-size:14px;opacity:0;transition:.25s;z-index:60;pointer-events:none}
.hpst-shop #toast.show {opacity:1;transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------------------------ *
 * Shop content vs harvested site.css
 * The shop now loads site.css, whose BARE element rules (h1{color:...},
 * h2{color:...}, text-transform on headings, and a 0-4-0 button rule)
 * beat the values the shop content used to inherit when it was a
 * standalone page. Restore the intended behaviour.
 * ------------------------------------------------------------------ */
/* shop headings must inherit their section's colour (cream on the dark
   hero/band, ink on the light sections) instead of site.css's black */
.hpst-shop h1, .hpst-shop h2, .hpst-shop h3,
.hpst-shop h4, .hpst-shop h5, .hpst-shop h6 {
  color: inherit;
  text-transform: none;
}
.hpst-shop .hero, .hpst-shop .band { color: #F6F3EA; }
.hpst-shop { color: #26221F; }
/* site.css .primary-button-style-solid .btn(…) is 0-4-0 and strips these */
.hpst-shop .btn,
.hpst-shop a.btn,
.hpst-shop button.btn {
  transition: opacity .2s, transform .2s;
  text-transform: none;
}


/* Sound-samples section: the heading used to sit 6px from the section top,
   under a tan kicker line. With the kicker removed the grid row it occupied
   now supplies the breathing room (~136px), so no extra padding is needed —
   adding any stacked on top and pushed the heading too far down. */

/* The sound-pads section's fluid-engine reserved ~181px of empty grid rows
   after the history CTA, leaving a dead gap before the next section. Let the
   content size the grid so the band ends where the button's padding ends. */
.fluid-engine:has(.hpst-pads-cta) {
  grid-template-rows: auto !important;   /* drop the dead trailing rows */
  row-gap: 0 !important;
}
/* Collapsing the rows also removed the spacer rows that framed the section
   heading: it sat flush against the section top, and the intro line under it
   sat flush against the first sample card. Put that breathing room on the
   CONTENT, not on the container or the blocks — those are grid items, and the
   auto row tracks swallow part of any padding/margin set on them (on mobile
   the container padding was dropped entirely and a 56px block margin rendered
   as 28px). */
.fluid-engine:has(.hpst-pads-cta) > .fe-block:not(:has(.hpst-sound)) h2 { margin-top: 96px; }
.fluid-engine:has(.hpst-pads-cta) .hpst-sound { padding-top: 96px; }
@media (max-width: 767px) {
  /* Squarespace's MOBILE placement puts the heading block on rows 3–14 and the
     cards block on rows 13–34: they share row 13. With the fixed row heights
     that overlap was invisible; with auto tracks the heading block overflows
     into the cards by ~28px and eats the gap. There is only one column on
     mobile, so drop the grid and stack (the side gutter the grid columns gave
     the blocks becomes padding on the container). */
  .fluid-engine:has(.hpst-pads-cta) {
    display: flex !important;
    flex-direction: column;
    padding-left: var(--sqs-mobile-site-gutter, 6vw);
    padding-right: var(--sqs-mobile-site-gutter, 6vw);
  }
  .fluid-engine:has(.hpst-pads-cta) > .fe-block {
    grid-area: auto !important;
    width: auto !important;
  }
  /* the cards block comes FIRST in the source (the grid put the heading above
     it by row placement), so restore that order explicitly */
  .fluid-engine:has(.hpst-pads-cta) > .fe-block:not(:has(.hpst-sound)) { order: -1; }
  .fluid-engine:has(.hpst-pads-cta) > .fe-block:not(:has(.hpst-sound)) h2 { margin-top: 56px; }
  .fluid-engine:has(.hpst-pads-cta) .hpst-sound { padding-top: 56px; }
}

/* Product pages: the purchase details were moved out of the left image column
   into the right-hand Character column (see transform.py). Give them room to
   breathe under the description copy. */
.hpst-details-moved {
  /* a hairline + air separates the name/price from the Character prose above,
     so the purchase block reads as its own unit (Alex, 2026-08-13) */
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid rgba(196, 168, 141, .3);
}
@media (max-width: 900px) {
  .hpst-details-moved { margin-top: 32px; }
}

/* Product pages, mobile: the harvested fluid-engine reserves a fixed row span
   for each block (20 rows for the image column, sized when the purchase
   details still lived there). With the details moved to the Character column
   that left ~343px of empty reserved rows under the image. Below the two-column
   breakpoint the grid buys us nothing, so let the product grid stack naturally. */
@media (max-width: 900px) {
  .fluid-engine:has(.sqs-block-product) {
    display: block !important;
  }
  .fluid-engine:has(.sqs-block-product) > .fe-block {
    grid-area: auto !important;
    width: auto !important;
  }
  .fluid-engine:has(.sqs-block-product) > .fe-block + .fe-block { margin-top: 28px; }
}

/* The purchase controls sit on the dark product section, but the harvested
   styles colour them for a light background: the quantity stepper had a
   transparent border with ink-coloured +/- and value (invisible on dark), and
   the product title rendered as inline underlined 16px text. Make them legible. */
.hpst-details-moved .product-title {
  display: block;
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  font-size: 30px; font-weight: 500; letter-spacing: .02em; line-height: 1.4;
  color: #F6F3EA; text-decoration: none; margin: 0 0 4px;
}
.hpst-details-moved .product-title a { text-decoration: none; color: inherit; }
.hpst-details-moved .product-price { font-size: 24px; color: #C4A88D; margin: 0 0 18px; }
.hpst-details-moved .product-excerpt { color: #d3cab8; }
.hpst-details-moved .product-quantity-input.custom-form-element {
  /* Squarespace's form system owns `border` here via !important, so draw the
     ring with outline (it only sets that on :focus) — no layout shift either. */
  outline: 1px solid rgba(196, 168, 141, .55);
  outline-offset: -1px;
}
/* Squarespace paints the real field ring through an effects overlay whose
   colour comes from these vars; point them at the brand tan so the stepper
   is visible on the dark product section. */
.hpst-details-moved .form-item {
  --dynamic-border-color: rgba(196, 168, 141, .55);
  --fx-border-alpha: 1;
}
.hpst-details-moved .product-quantity-input input,
.hpst-details-moved .product-quantity-input .quantity-adjuster,
.hpst-details-moved .product-quantity-input button {
  color: #F6F3EA;
}
.hpst-details-moved .product-quantity-input svg { fill: #F6F3EA; stroke: #F6F3EA; }

/* ------------------------------------------------------------------
 * Lineup: the harvested .user-items-list adds 114px of its own padding on
 * top of the widget's 72px, so the ラインアップ title sat 187px down. Move
 * all of it onto the widget so there is one number to tune, and halve it.
 * Scoped to the list wrapper so the shop page's own .hpst-pans is untouched.
 * ------------------------------------------------------------------ */
.user-items-list:has(.hpst-pans) { padding-top: 0 !important; }
.user-items-list:has(.hpst-pans) .hpst-pans { padding-top: 93px; }

/* The Making Of / 聴いて、恋に落ちて。 film sections: more air around the title.
   Space above comes from section padding (the .section-border is absolutely
   positioned, so the colour band grows with it); space below comes from the
   film block's own top margin (the 2.5vw rule above), not a heading margin:
   site.css zeroes heading margins inside .sqs-html-content, so a margin there
   computes to 0 and the film's margin is what actually draws that space.
   NOTE the leading `section` on the film rules: the 2.5vw rule above is
   `section[data-section-id=...] .sqs-block-video` (0,2,1), so a bare
   two-class selector loses the cascade to it. */
.hpst-making-section { padding-top: 14px; }
section.hpst-making-section .sqs-block-video { margin-top: 54px; }
.hpst-yt-section { padding-top: 11px; }
section.hpst-yt-section .sqs-block-video { margin-top: 52px; }

/* Product pages: the sound-samples code block sits inside a Squarespace section
   whose own theme is unset, so the wrapper painted cream while the block itself
   is dark — leaving an ~83px cream band between the samples and 同梱物. Two
   layers paint it: .section-border AND a nested .section-background (the latter
   sits on top, which is why colouring only the border changed nothing). Match
   the samples block's own #1A1410 so the seam disappears. The home pages'
   wrapper is themed "black" and its heading sits on that colour, so exclude it
   rather than darkening a band that is doing real work there. */
section:has(.hpst-sound):not([data-section-theme="black"]) > .section-border,
section:has(.hpst-sound):not([data-section-theme="black"]) .section-background {
  background-color: #1A1410 !important;
}

/* Contact page: the harvested form block carries a 2px Squarespace "stroke"
   border and our own 5px rule above the heading, which together drew a stray
   box around the form (with an empty band at the top of it). */
.sqs-block:has(.hpst-cform) { border: 0 !important; }
.hpst-cform { border-top: 0 !important; }

/* Footer dead rows: handled in transform.py now — it shrinks each variant's
   grid-template-rows repeat() to the last occupied row line after the column
   drops, so the caps stay correct however many blocks come and go. The old
   hardcoded caps that lived here went stale the moment the language columns
   were dropped (mobile was capped at 43 rows while content ended at 33). */

/* Footer: contact moved out of its own column and under the Subscribe form. */
.hpst-fcontact { margin-top: 38px; }
/* sits alongside the About / FAQ column headings, so it takes their tan */
.hpst-fcontact h3 {
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  font-size: 19px !important;
  font-weight: 500;
  letter-spacing: .03em;
  color: #C4A88D !important;
  margin: 0 0 12px !important;
}
.hpst-fcontact a {
  font-size: 15px;
  color: #C4A88D;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hpst-fcontact a:hover { color: #F6F3EA; }

/* ------------------------------------------------------------------
 * Footer: the three studios, as a slim strip under the footer grid.
 * (Amsterdam has no confirmed street address yet — see transform.py.)
 * ------------------------------------------------------------------ */
.hpst-flocs {
  display: block;
  background: #26221F;      /* matches the footer section above it */
  padding: 76px 0 92px;
}
.hpst-flocs-in { border-top: 1px solid rgba(196, 168, 141, .22); padding-top: 60px; }
.hpst-flocs-in { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.hpst-flocs-head {
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  font-size: 16px !important;
  font-weight: 500;
  letter-spacing: .24em;
  color: #C4A88D !important;
  text-align: center;
  margin: 0 0 40px !important;
}
.hpst-flocs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.hpst-floc { text-align: center; }
.hpst-floc h3 {
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  font-size: 24px !important;
  font-weight: 500;
  letter-spacing: .06em;
  color: #F6F3EA !important;
  margin: 0 0 8px !important;
}
.hpst-floc-country {
  font-size: 13px;
  letter-spacing: .18em;
  color: #C4A88D;
  margin: 0 0 15px;
}
.hpst-floc-addr { font-size: 16px; line-height: 1.95; color: #a9a093; margin: 0; }
@media (max-width: 700px) {
  .hpst-flocs { padding-top: 56px; padding-bottom: 64px; }
  .hpst-flocs-in { padding-top: 46px; }
  /* one calm centered stack, each studio separated by its own hairline */
  .hpst-flocs-grid { grid-template-columns: 1fr; gap: 0; }
  .hpst-floc { padding: 26px 0; border-bottom: 1px solid rgba(196, 168, 141, .14); }
  .hpst-floc:last-child { border-bottom: 0; padding-bottom: 0; }
  .hpst-floc:first-child { padding-top: 0; }
}

/* FAQ pages load Tailwind from the CDN (their layout is built with ~100 of its
   utilities, so it has to stay). Its `.container` utility collides with
   Squarespace's own <main class="container"> and caps the entire page at the
   breakpoint max-width — full-bleed sections like the FAQ hero stopped ~88px
   short of the right edge and the cream body showed through. Squarespace's
   main is never meant to be width-capped. */
main#page.container { max-width: none !important; }
/* the stepper and the buy button were flush against each other */
.hpst-details-moved .sqs-add-to-cart-button-wrapper { margin-top: 20px; }

/* Product pages, desktop: same reserved-empty-rows problem the mobile rule
   above fixes. The image block still spans the 22 rows it needed when the
   purchase details lived under it, so the section ran ~600px past the buy
   button. Let the rows size to their content; the two-column placement (the
   grid COLUMNS) is untouched. */
@media (min-width: 901px) {
  .fluid-engine:has(.sqs-block-product) {
    grid-template-rows: auto !important;
    row-gap: 0 !important;
    align-items: start;
  }
  /* the collapse also closes the spacer row between the Character heading and
     the copy beneath it, so restore that gap explicitly */
  .fluid-engine:has(.sqs-block-product)
    > .fe-block:not(:has(.sqs-block-product)) + .fe-block { margin-top: 48px; }
}

/* ------------------------------------------------------------------
 * Product pages: front / back photo slider
 * The bottom shell carries the bottom notes and buyers ask to see it.
 * Two slides in a flex track inside the (already overflow:hidden) image
 * wrapper; arrows + the current face's name sit underneath. Slides are
 * square so swapping faces never changes the page height.
 * ------------------------------------------------------------------ */
.hpst-flip-vp { overflow: hidden; }
.hpst-flip-track {
  display: flex;
  width: 100%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.hpst-flip-slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hpst-flip-slide > a { display: block; width: 100%; }
.hpst-flip-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hpst-flip-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.hpst-flip-arrow {
  appearance: none;
  -webkit-appearance: none;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 64px;
  height: 64px;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  line-height: 1;
  color: #C4A88D !important;
  cursor: pointer;
  border-radius: 50%;
  transition: color .25s ease, background-color .25s ease;
}
.hpst-flip-arrow:hover {
  color: #F6F3EA !important;
  background: rgba(196, 168, 141, .16) !important;
}
.hpst-flip-arrow:focus-visible {
  outline: 1px solid rgba(196, 168, 141, .8);
  outline-offset: 2px;
}
.hpst-flip-label {
  min-width: 5em;
  text-align: center;
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .2em;
  color: #a29786;
}
@media (prefers-reduced-motion: reduce) {
  .hpst-flip-track { transition: none; }
}
@media (pointer: coarse) {
  .hpst-flip-arrow { width: 72px; height: 72px; }
}

/* ------------------------------------------------------------------ *
 * Sound-sample cards: the 音 / NOTES label next to the big note count
 * ships at 11px inside the widget's own <style>; far too small
 * (Alex, 2026-08-13). The widget style is inline in <body>, so win
 * with !important rather than order.
 * ------------------------------------------------------------------ */
.hpst-sound .hpst-notes-label { font-size: 34px !important; }
@media (max-width: 767px) {
  .hpst-sound .hpst-notes-label { font-size: 30px !important; }
}

/* ------------------------------------------------------------------ *
 * FAQ category headings (楽器について…): the pages' Tailwind classes say
 * lg:text-[56px], but Squarespace sets a vw-based html font-size, so the
 * rem-based fallback inflates to ~65px and the longer JP headings wrap.
 * Pin the designed size on desktop so every category title fits one line.
 * ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  main#page h2.font-display { font-size: 48px !important; }
}

/* ------------------------------------------------------------------ *
 * Research-page accordion (研究を読む): the harvested block shipped with
 * Squarespace's default dividers and serif titles, visibly out of step
 * with the FAQ pages' Q&A language. Align it: hairline-divided list,
 * sans questions, the FAQ's round gold "+" chip (rotates to × when
 * open), soft ink body. Scoped to .sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion — only the two
 * research pages carry one. (統一感 pass, Alex 2026-08-13)
 * ------------------------------------------------------------------ */
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-divider { display: none !important; }
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item { border-bottom: 1px solid rgba(217, 205, 183, .6); }
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item:last-child { border-bottom: 0; }
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__title-wrapper { margin: 0; }
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  width: 100%; padding: 28px 0 !important;
  background: transparent; border: 0; cursor: pointer; text-align: left;
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__title {
  font-family: "Libre Baskerville", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .02em !important;
  color: #26221F !important;
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-icon-container {
  flex: none; width: 36px !important; height: 36px !important; margin-top: 2px;
  border: 1px solid rgba(142, 107, 78, .3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transform: none !important;
  transition: background .25s ease, border-color .25s ease;
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .plus {
  position: absolute !important;
  width: 14px !important; height: 14px !important;
  left: calc(50% - 7px) !important; top: calc(50% - 7px) !important;
  transition: transform .25s ease;
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .plus__horizontal-line,
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .plus__vertical-line {
  position: absolute; background: #8E6B4E !important; border-radius: 1px;
  transition: background .25s ease;
  transform: none !important;
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .plus__horizontal-line { width: 14px !important; height: 1.5px !important; top: 6.25px !important; left: 0 !important; }
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .plus__vertical-line { width: 1.5px !important; height: 14px !important; left: 6.25px !important; top: 0 !important; }
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target:hover .accordion-icon-container,
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target[aria-expanded="true"] .accordion-icon-container {
  background: #8E6B4E !important; border-color: #8E6B4E !important;
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target:hover .plus__horizontal-line,
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target:hover .plus__vertical-line,
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target[aria-expanded="true"] .plus__horizontal-line,
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target[aria-expanded="true"] .plus__vertical-line {
  background: #F6F3EA !important;
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__click-target[aria-expanded="true"] .plus {
  transform: rotate(45deg);
}
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__description { max-width: 768px; padding: 2px 0 30px; }
.sqs-block[data-definition-name="website.components.accordion"].sqs-block-accordion .accordion-item__description p {
  font-size: 15.5px !important;
  line-height: 2 !important;
  color: #3a342f !important;
  margin: 0 !important;
}


/* ---- Product-page photo heroes (Kyoto banners, 2026-08-26) ----
   The banner photo fills the section background; a soft scrim keeps the
   overlaid white title legible on any part of the photograph. */
section.hpst-photo-hero .section-background::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(25,21,18,.32) 0%,rgba(25,21,18,0) 26%,rgba(25,21,18,0) 52%,rgba(25,21,18,.58) 100%);
}
#page section.hpst-photo-hero .sqs-html-content h1{
  font-size:clamp(32px,4.5vw,64px) !important;line-height:1.08 !important;
  text-align:center !important;
  text-shadow:0 2px 26px rgba(25,21,18,.45);
}

/* ---- Mobile menu: tap feedback + folder affordance (2026-08-26) ---- */
.header-menu-nav a{-webkit-tap-highlight-color:rgba(196,168,141,.28);transition:opacity .12s ease}
.header-menu-nav a:active{opacity:.4}
.header-menu-nav-item-content-folder .header-nav-folder-title-text::after{
  content:"\203A";display:inline-block;margin-left:14px;transform:translateY(-1px);color:#C4A88D}

/* ---- Photo heroes: standardized height + consistent bottom-left title ----
   (2026-08-26) The harvested per-page grids placed each title differently;
   flex pins every title bottom-left at the same inset on desktop and mobile. */
section.hpst-photo-hero .fluid-engine{
  display:flex !important;align-items:flex-end;justify-content:center;
  min-height:clamp(500px,44vw,700px);box-sizing:border-box;
  padding:0 5vw 42px !important;
}
section.hpst-photo-hero .fe-block{width:auto}
@media (max-width:767px){
  section.hpst-photo-hero .fluid-engine{min-height:62svh;padding:0 24px 30px !important}
}

/* ---- Mobile menu sub-panels (2026-08-26) ----
   Platform CSS hides folders nested inside a folder (the Squarespace runtime
   re-parented them at load). Static mirror keeps the nesting, so the active
   panel must be shown explicitly, over hidden root items. */
.header-menu-nav-folder .header-menu-nav-folder--active{display:flex}
.header-menu-nav-list--folder-open .header-menu-nav-folder[data-folder="root"] > .header-menu-nav-folder-content > .header-menu-nav-wrapper > .container{visibility:hidden}

/* ---- Feature icons (both home languages): compact centered stack on mobile.
   The harvested grid reserved tall empty rows between each icon and its text;
   flex restacks them tightly. JP renders the icon img position:absolute, so it
   is centered explicitly. ---- */
@media (max-width:767px){
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fluid-engine,
  section[data-section-id="69dcb180501e5e51b9702e43"] .fluid-engine{
    display:flex !important;flex-direction:column;align-items:center;
    min-height:0;padding:10px 24px !important;
  }
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fluid-engine > .fe-block,
  section[data-section-id="69dcb180501e5e51b9702e43"] .fluid-engine > .fe-block{
    position:static;width:100%;max-width:420px;height:auto;margin:0;
  }
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fluid-engine > .fe-block:nth-child(odd):not(:last-child),
  section[data-section-id="69dcb180501e5e51b9702e43"] .fluid-engine > .fe-block:nth-child(odd):not(:last-child){
    height:76px;margin-bottom:4px;
  }
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fluid-engine > .fe-block:nth-child(even),
  section[data-section-id="69dcb180501e5e51b9702e43"] .fluid-engine > .fe-block:nth-child(even){
    margin-bottom:42px;
  }
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fluid-image-container,
  section[data-section-id="69dcb180501e5e51b9702e43"] .fluid-image-container{height:76px !important}
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fluid-image-container img{
    left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important}
}

/* ---- Homepage video hero: uncropped 16:9 (2026-08-26, Alex) ----
   The hero matches the film's own frame on every screen — tall on desktop,
   a smaller landscape band on mobile — so the video is never cropped. */
section[data-section-id="693122ae9a9b617bbe8f5a33"],
section[data-section-id="6a051b2551ebdb51babc7893"]{
  min-height:0 !important;aspect-ratio:16/9;
  margin-top:var(--hpst-header-h,119px); /* below the absolute header — film fully visible */
}
section[data-section-id="693122ae9a9b617bbe8f5a33"] > .content-wrapper,
section[data-section-id="6a051b2551ebdb51babc7893"] > .content-wrapper{
  min-height:0 !important;height:100%;display:flex;align-items:center;
  padding-top:0 !important;padding-bottom:0 !important;
}
section[data-section-id="693122ae9a9b617bbe8f5a33"] .content,
section[data-section-id="6a051b2551ebdb51babc7893"] .content{width:100%}
section[data-section-id="693122ae9a9b617bbe8f5a33"] .fluid-engine,
section[data-section-id="6a051b2551ebdb51babc7893"] .fluid-engine{
  display:flex !important;align-items:center;justify-content:center;min-height:0;
}
section[data-section-id="693122ae9a9b617bbe8f5a33"] .fluid-engine > .fe-block,
section[data-section-id="6a051b2551ebdb51babc7893"] .fluid-engine > .fe-block{
  width:min(90vw,1100px);
}


/* ================= 2026-08-26 polish pass ================= */
/* Intro paragraph: wrap only at phrase boundaries (4 clean lines on mobile) */
.hpst-ph{display:inline-block}
@media (max-width:767px){
  #block-6ff889542ab81635cdd6 p.sqsrte-large{font-size:14px !important;line-height:2.1 !important}
  /* feature captions: natural Japanese phrase wrapping (Chrome BudouX; harmless fallback) */
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fe-block p{word-break:auto-phrase;text-wrap:balance}
  /* ハンドパンとは centered on mobile (widget carries its own inline <style>) */
  .hpst-ed h2{text-align:center !important}
}

/* Squarespace-native primary buttons (研究を読む, product 購入する, newsletter) →
   the brand standard every hand-made button already uses: gold, weight 400,
   15px radius, same height. */
:root{--primary-button-font-font-weight:400}
#siteWrapper.site-wrapper .sqs-button-element--primary{
  background-color:#8E6B4E !important;color:#fff !important;border-radius:15px !important;
  font-weight:400 !important;padding:13px 40px !important;
  font-size:14px !important;line-height:1.5 !important;min-height:0 !important;
  letter-spacing:.08em !important;
  height:auto !important;align-self:center !important;
}
/* the parent block is grid-row sized (grows with vw) — never stretch the pill to fill it */
.sqs-block-button .sqs-block-button-container{align-items:center !important}

/* Language globe: thicker drawn glyph (the harvested PNG mask was hairline-thin);
   the mobile-menu copy was hardcoded black — paint it in the menu text color. */
.header-nav-list>.header-nav-item:nth-of-type(7) .header-nav-folder-title-text::before,
.header-menu-nav-list a[data-folder-id="/language-selection"] .header-nav-folder-title-text::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E") !important;
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E") !important;
}
.header-menu-nav-list a[data-folder-id="/language-selection"] .header-nav-folder-title-text::before{
  background-color:currentColor !important;
}

/* Footer Instagram link */
.hpst-fcontact .hpst-ig{display:inline-flex;align-items:center;gap:9px;margin-top:14px;color:inherit;text-decoration:none;font-size:15px}
.hpst-fcontact .hpst-ig svg{width:20px;height:20px;flex:none}
.hpst-fcontact .hpst-ig:hover{opacity:.75}

/* ---- 2026-08-27 polish, round two ---- */
/* One scale for every homepage section title (JP + EN share these hooks) */
.hpst-ed h2,
section:has(.hpst-sound) .sqs-html-content h2,
section[data-section-id="6a04341d607ca165958f7a05"] h2,
section[data-section-id="6a05b61b6df08245e00bf8ff"] h2,
.hpst-pans-head h2,
section[data-section-id="6939e32f5abc9d5e596489a6"] h3,
section[data-section-id="69dcb180501e5e51b9702e40"] h3,
#block-af20121665ba39d7b39c h3,
#block-fb410d1b76a679075b7b h3{
  font-size:clamp(28px,4.32vw,62px) !important;
  line-height:1.35 !important;letter-spacing:.02em !important;font-weight:400 !important;
}
/* Title→subtext rhythm: match the 34px the sound/film sections already use */
.hpst-studies-sub{margin-top:-14px !important}
.hpst-pans-head p{margin-top:14px !important;margin-bottom:28px !important}
/* Intro-section standalone logo removed (header + film title card carry it) */
.fe-block-990a402708663648740a,
.fe-block-4e01464024490199c56a{display:none !important}
/* Header Instagram icon (took the cart slot) */
.hpst-ig-header{color:#C4A88D;display:inline-flex;align-items:center;justify-content:center}
.hpst-ig-header:hover{opacity:.75}


/* ================= 2026-08-27 polish, round three ================= */
/* Intro band: the grid reserved tall empty rows around the two-line copy */
#page section:has(.fe-block-6ff889542ab81635cdd6) .fluid-engine,
#page section:has(.fe-block-72c8762347206f275f05) .fluid-engine{
  display:flex !important;align-items:center;justify-content:center;
  min-height:0;padding:56px 6vw !important;
}
@media (max-width:767px){
  #page section:has(.fe-block-6ff889542ab81635cdd6) .fluid-engine,
  #page section:has(.fe-block-72c8762347206f275f05) .fluid-engine{padding:40px 24px !important}
}

/* Title→subtext: tightened to 14px everywhere (sound pair shares a block) */
section:has(.hpst-sound) .sqs-html-content h2 + p{margin-top:-20px !important}

/* Header Instagram: bigger, optically centered in the bar */
.hpst-ig-header{color:#C4A88D;display:inline-flex;align-items:center;justify-content:center;height:100%}
.hpst-ig-header svg{width:24px;height:24px;display:block}

/* Footer headings: one uniform scale (About / FAQ / ニュースレター / Connect with us /
   スタジオ / the brand column). Full 62px section-title size breaks the narrow
   columns, so the footer runs one unified step below it. */
.hpst-fcol h4,
footer .fe-block h2,
.hpst-fcontact h3,
footer .newsletter-form .newsletter-form-header-title,
.hpst-flocs-head{
  font-size:clamp(22px,2.25vw,32px) !important;font-weight:400 !important;
  line-height:1.3 !important;letter-spacing:.04em !important;
}
@media (max-width:767px){
  .hpst-fcol h4{margin-bottom:10px !important}
  .hpst-fcol .sqs-html-content p{white-space:nowrap;font-size:13.5px !important}
  .hpst-pans-head p{margin-bottom:20px !important}
}

/* Studios strip: tighter address leading, country up a step, city→country snug */
.hpst-floc h3{margin-bottom:2px !important}
.hpst-floc-country{font-size:15px !important;margin-top:2px !important}
.hpst-floc-addr{line-height:1.6 !important}

/* Connect with us: icon rows (envelope above, Instagram below) */
.hpst-fcontact a{display:flex;align-items:center;gap:9px;text-decoration:none}
.hpst-fcontact a svg{width:19px;height:19px;flex:none}
.hpst-fcontact .hpst-mail{margin-top:10px}
.hpst-fcontact .hpst-ig{margin-top:8px}

/* Buttons: one typographic voice site-wide (matches ハンドパンの歴史をたどる →) */
.btn, .hpst-shop .btn, .hpst-page .btn,
a.sqs-button-element--primary, button.sqs-button-element--primary,
.sqs-add-to-cart-button, .hpst-pan-buy, .hpst-pan-more,
input.newsletter-form-button, .newsletter-form-button, .hpst-pads-cta a{
  font-family:"Libre Baskerville","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif !important;
  font-size:14px !important;font-weight:400 !important;letter-spacing:.08em !important;
}


/* ================= 2026-08-27 polish, round four ================= */
/* --- audit fixes: the FAQ island joins the system --- */
.font-display{font-family:"Libre Baskerville","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif !important}
main a[class*="rounded-sm"][href*="/contact"]{
  background:#8E6B4E !important;color:#fff !important;border-radius:15px !important;
  font-family:"Libre Baskerville","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif !important;
  font-size:14px !important;font-weight:400 !important;letter-spacing:.08em !important;
  padding:13px 40px !important;
}
/* --- one sub-page section-title scale (shop + catalog) --- */
.hpst-shop h2{font-size:clamp(26px,2.65vw,38px) !important}
.hpst-page .compare h2,.hpst-page .cta h2,.hpst-page .model h2{font-size:clamp(26px,2.65vw,38px) !important}
/* --- studies stat cards match site card radius --- */
.hpst-studies .hpst-card{border-radius:14px !important}
.hpst-page .pdfbtn{padding:13px 40px !important}

/* --- ハンドパンとは subtext --- */
.hpst-ed h2{margin-bottom:0 !important}
.hpst-ed-sub{margin:14px 0 44px;font-size:15px;line-height:1.9;color:#6f6256;font-weight:300}
@media (max-width:767px){.hpst-ed-sub{text-align:center;margin-bottom:34px}}

/* --- feature strip: tighter under the h4 titles, section end matches others --- */
@media (min-width:768px){
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .sqs-html-content h4 + p,
  section[data-section-id="69dcb180501e5e51b9702e43"] .sqs-html-content h4 + p{margin-top:-24px !important}
  section[data-section-id="693122ae9a9b617bbe8f5a3c"],
  section[data-section-id="69dcb180501e5e51b9702e43"]{padding-bottom:20px !important}
}
@media (max-width:767px){
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .sqs-html-content h4 + p,
  section[data-section-id="69dcb180501e5e51b9702e43"] .sqs-html-content h4 + p{margin-top:-10px !important}
}

/* --- film section (自分だけの音色へ): flex column kills the dead rows below --- */
section:has(#block-af20121665ba39d7b39c),
section:has(#block-fb410d1b76a679075b7b){min-height:0 !important;height:auto !important}
section:has(#block-af20121665ba39d7b39c) > .content-wrapper,
section:has(#block-fb410d1b76a679075b7b) > .content-wrapper{min-height:0 !important;height:auto !important}
section:has(#block-af20121665ba39d7b39c) .fluid-engine,
section:has(#block-fb410d1b76a679075b7b) .fluid-engine{
  display:flex !important;flex-direction:column;align-items:center;min-height:0;
  padding:46px 6vw 84px !important;
}
section:has(#block-af20121665ba39d7b39c) .fluid-engine > .fe-block,
section:has(#block-fb410d1b76a679075b7b) .fluid-engine > .fe-block{
  position:static;width:100%;max-width:1040px;margin:0;
}
section:has(#block-af20121665ba39d7b39c) .fluid-engine > .fe-block:has(iframe),
section:has(#block-fb410d1b76a679075b7b) .fluid-engine > .fe-block:has(iframe){margin-top:33px}
section:has(#block-af20121665ba39d7b39c) .fe-block:has(iframe) .sqs-block,
section:has(#block-fb410d1b76a679075b7b) .fe-block:has(iframe) .sqs-block{padding-bottom:0 !important}
section:has(#block-af20121665ba39d7b39c) > .content-wrapper,
section:has(#block-fb410d1b76a679075b7b) > .content-wrapper{padding-top:0 !important;padding-bottom:0 !important}

/* --- making section: header-ink surface (2026-08-28 flow) --- */
section[data-section-id="6939e32f5abc9d5e596489a6"] .fluid-engine,
section[data-section-id="69dcb180501e5e51b9702e40"] .fluid-engine{
  display:flex !important;flex-direction:column;align-items:center;justify-content:center;
  min-height:0;padding:32px 6vw 44px !important;
}
section[data-section-id="6939e32f5abc9d5e596489a6"] > .content-wrapper,
section[data-section-id="69dcb180501e5e51b9702e40"] > .content-wrapper{padding-top:0 !important;padding-bottom:0 !important}
section[data-section-id="6939e32f5abc9d5e596489a6"] .fluid-engine > .fe-block,
section[data-section-id="69dcb180501e5e51b9702e40"] .fluid-engine > .fe-block{
  position:static;width:100%;max-width:1040px;margin:0}
section[data-section-id="6939e32f5abc9d5e596489a6"] .fluid-engine > .fe-block:has(video),
section[data-section-id="69dcb180501e5e51b9702e40"] .fluid-engine > .fe-block:has(video){margin-top:-10px}
section[data-section-id="6939e32f5abc9d5e596489a6"] .fe-block .sqs-block,
section[data-section-id="69dcb180501e5e51b9702e40"] .fe-block .sqs-block{padding-bottom:0 !important;padding-top:0 !important}
section[data-section-id="6939e32f5abc9d5e596489a6"] .fluid-engine{padding-bottom:84px !important}
section[data-section-id="69dcb180501e5e51b9702e40"] .fluid-engine{padding-bottom:84px !important}
section[data-section-id="6939e32f5abc9d5e596489a6"],
section[data-section-id="69dcb180501e5e51b9702e40"],
section.hpst-making-section,
section[data-section-id="6939e32f5abc9d5e596489a6"] .section-background,
section[data-section-id="69dcb180501e5e51b9702e40"] .section-background,
section.hpst-making-section .section-background{background:#26221F !important}
section[data-section-id="6939e32f5abc9d5e596489a6"],
section[data-section-id="69dcb180501e5e51b9702e40"]{background:#26221F !important}
section[data-section-id="6939e32f5abc9d5e596489a6"] h3,
section[data-section-id="69dcb180501e5e51b9702e40"] h3{color:#F6F3EA !important}
section[data-section-id="6939e32f5abc9d5e596489a6"] h3 + p,
section[data-section-id="69dcb180501e5e51b9702e40"] h3 + p{color:#C4A88D !important}

/* --- sound showcase: 音 counters align across cards regardless of copy length --- */
.hpst-sound .hpst-card{display:flex}
.hpst-sound .hpst-card-body{display:flex;flex-direction:column;flex:1;width:100%}
.hpst-sound .hpst-notes-count{margin-top:auto}

/* --- footer studios strip snug to its separator --- */
.hpst-flocs{padding-top:0 !important}

/* --- header icons: Instagram matches the globe (25px, same stroke weight) --- */
.hpst-ig-header svg{width:25px;height:25px;display:block}


/* ================= 2026-08-27 round five ================= */
/* Intro band retired — its two lines moved into the sound section copy */
section[data-section-id="6a040ec3abafa91709ca9022"],
section[data-section-id="6a051b3f8dc7e475443d787d"]{display:none !important}

/* ハンドパンとは: centered like every other section (rows stay left) */
.hpst-ed h2,.hpst-ed-sub{text-align:center !important}

/* Sub-page heroes (contact / about / history / research): FAQ-scale height
   WITHOUT touching the editorial grid — the desktop row height is clamped so
   the composition keeps its shape, just shorter (2026-08-28). */
@media (min-width:768px){
  section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine,
  section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine,
  section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine,
  section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine,
  section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine,
  section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine{
    grid-template-rows:repeat(15,minmax(clamp(13px,1.8vw,26px),auto)) !important}
}

/* --- contact heroes (JP+EN) on the shop hero's geometry (David 2026-08-29) ---
   The contact hero mirrors the SHOP hero, not the about/history/research
   family: the shop's own 10-row desktop template (same
   --row-height-scaling-factor, so it tracks the viewport identically) and its
   three block areas, giving an identical 382px band. EN lands at 402px because
   its sub-line wraps to two rows, exactly as the EN shop hero does.
   NOTE: Alex's b8894f2 had folded these two ids into the shared hero family
   (392px flex + ::before arcs). David asked for the shop match, so the ids were
   released from that block — it still covers about / history / research. If the
   hero family is ever meant to own contact again, drop this block and add the
   two ids back there rather than layering the two. */
@media (min-width:768px){
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine,
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine{
    grid-template-rows:repeat(10,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)),auto)) !important;
    display:grid !important}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]){
    grid-area:1/1/11/27 !important;display:block !important}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine > .fe-block:has(h2),
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine > .fe-block:has(h2){
    grid-area:6/5/8/23 !important}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine > .fe-block:has(h4),
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine > .fe-block:has(h4){
    grid-area:8/5/9/23 !important}
}

/* --- contact map column (JP+EN): map level with the form, address under it ---
   The harvested left column opened with two blocks that held the old headings
   (now removed), so the map started 195px below the form. The map block also
   spanned 11 rows for 289px of content, leaving ~130px of dead space inside
   itself before the address. Hide the two spent blocks, start the map on row 1
   (level with the form) at a span that matches its content, and seat the
   address on the next row. (David 2026-08-29) */
/* the two blocks the removed 地図 / Map headings used to live in — hidden at
   EVERY width: the headings are gone from the markup, so on mobile these were
   just reserving empty rows between the hero and the form. */
.fe-block-83695c7b24477300410e, .fe-block-35e9cb92e9016ace0dba,   /* jp */
.fe-block-0552ce164572e5fdf613, .fe-block-89b52015e2decdaa8e0b{   /* en */
  display:none !important}
@media (min-width:768px){
  section[data-section-id="69e9f9a07944fc1173c02369"] .fluid-engine > .fe-block:has(.sqs-block-map),
  section[data-section-id="69fb1f02b3113e3b0e89d30c"] .fluid-engine > .fe-block:has(.sqs-block-map){
    grid-area:1/2/9/13 !important}
  .fe-block-d6b29d21a64dfd58a133,   /* jp address */
  .fe-block-368fface953b932826e5{   /* en address */
    grid-area:9/2/15/7 !important}
}
/* Mobile: the same two spent blocks own rows 1-5 of the stacked grid, and
   display:none frees the block but NOT its rows — that left ~175px of blank
   paper under the hero. Drop the explicit template so every row is implicit
   (no leading rows to reserve, no trailing rows left over) and re-seat the
   three real blocks from row 1. That also halves the two mobile gaps David
   called out: hero → form 109px→54px, map → address 46px→23px. The address
   sits directly after the map, with 12px of margin making up the other half
   of its gap (a whole grid row would overshoot). JP and EN share this — both
   carry the identical block rows (6/30, 31/37, 38/45). */
@media (max-width:767px){
  section[data-section-id="69e9f9a07944fc1173c02369"] .fluid-engine,
  section[data-section-id="69fb1f02b3113e3b0e89d30c"] .fluid-engine{
    grid-template-rows:none !important;
    grid-auto-rows:minmax(24px,auto) !important}
  section[data-section-id="69e9f9a07944fc1173c02369"] .fluid-engine > .fe-block:has(.hpst-cform),
  section[data-section-id="69fb1f02b3113e3b0e89d30c"] .fluid-engine > .fe-block:has(.hpst-cform){
    grid-area:1/2/25/10 !important}
  section[data-section-id="69e9f9a07944fc1173c02369"] .fluid-engine > .fe-block:has(.sqs-block-map),
  section[data-section-id="69fb1f02b3113e3b0e89d30c"] .fluid-engine > .fe-block:has(.sqs-block-map){
    grid-area:26/2/32/10 !important}
  .fe-block-d6b29d21a64dfd58a133,   /* jp address */
  .fe-block-368fface953b932826e5{   /* en address */
    grid-area:32/2/39/10 !important;margin-top:12px !important}
}

/* Footer contact icons up a step */
.hpst-fcontact a svg{width:22px;height:22px}


/* ---- footer rhythm (2026-08-27): links, contact rows and newsletter share one leading ---- */
.hpst-fcol .sqs-html-content p{line-height:1.9 !important}
.hpst-fcontact .hpst-mail{margin-top:12px}
.hpst-fcontact .hpst-ig{margin-top:12px}
footer .newsletter-form-header-description p{line-height:1.9 !important;font-size:15px !important}


/* Numbers stay 明朝 (Alex 2026-08-27) even with the Baskerville body:
   pin the numeric displays that would otherwise inherit it. */
.hpst-studies .hpst-stat, .hpst-pan-price, .hpst-pan-notes{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif !important}

/* Footer: the ハンドパンスタジオ東京 brand line is superfluous next to the logo
   (Alex 2026-08-29) — removed. REVERT: delete this rule. */
footer h4:has(.sqsrte-text-color--darkAccent){display:none !important}

/* --- 2026-08-28 polish batch --- */
/* lineup + film titles at the 音の効果 offset (was 93 / 84px above the title) */
.hpst-pans{padding-top:46px !important}
/* contact form: labels were 13px — one step up */
.react-form-contents .caption-text, .react-form-contents label,
.react-form-contents legend, .react-form-contents .title{font-size:15px !important}

/* stacked CTA buttons never touch (about page コレクションを見る/歴史を読む on mobile) */
@media (max-width:767px){
  .fe-block:has(.sqs-block-button) + .fe-block:has(.sqs-block-button){margin-top:14px}
}

/* sub-page + faq + contact heroes: compact on mobile too (desktop rule exists above).
   About-family heroes use repeat(1,…) — Alex 2026-08-29: with one explicit row,
   the empty rows become 0-height implicit rows and stop reserving space.
   REVERT: change repeat(1,…) back to repeat(15,…). Contact/FAQ keep 15. */
@media (max-width:767px){
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine,
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine{
    grid-template-rows:repeat(15,minmax(5px,auto)) !important;padding-top:72px !important;padding-bottom:34px !important}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine,
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine{
    grid-template-rows:repeat(1,minmax(5px,auto)) !important;padding-top:72px !important;padding-bottom:34px !important}
  section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine,
  section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine,
  section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine,
  section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine,
  section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine,
  section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine{
    grid-template-rows:repeat(1,minmax(5px,auto)) !important;padding-top:72px !important;padding-bottom:34px !important}
}

/* about/history/research hero jump links: full row on mobile, wrap only at the ・ */
@media (max-width:767px){
  section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine > .fe-block:has(h4),
  section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine > .fe-block:has(h4),
  section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine > .fe-block:has(h4),
  section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine > .fe-block:has(h4),
  section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine > .fe-block:has(h4),
  section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine > .fe-block:has(h4){
    grid-column:1 / -1 !important;width:100% !important;justify-self:stretch}
  section[data-section-id="69fb2742e6ece61cc32c5c59"] h4 a,
  section[data-section-id="69fb16607f2d3a766b94e36c"] h4 a,
  section[data-section-id="6a01d386e6d9036492286c40"] h4 a,
  section[data-section-id="6a015b1193c3a862c5e781f6"] h4 a,
  section[data-section-id="6a042eac25f9505694b8d48e"] h4 a,
  section[data-section-id="6a02cd66c3ea9c306a45665d"] h4 a{white-space:nowrap}
}

/* about/history/research mobile TOC: the mobile text block separates the
   jump links with <br><br> — collapse them so 起源/製作/共鳴/音と身体/研究 sit
   on one centered line (wrapping cleanly at link boundaries if ever needed) */
@media (max-width:767px){
  section[data-section-id="69fb2742e6ece61cc32c5c59"] h4 br,
  section[data-section-id="69fb16607f2d3a766b94e36c"] h4 br,
  section[data-section-id="6a01d386e6d9036492286c40"] h4 br,
  section[data-section-id="6a015b1193c3a862c5e781f6"] h4 br,
  section[data-section-id="6a042eac25f9505694b8d48e"] h4 br,
  section[data-section-id="6a02cd66c3ea9c306a45665d"] h4 br{display:none}
  section[data-section-id="69fb2742e6ece61cc32c5c59"] h4 a,
  section[data-section-id="69fb16607f2d3a766b94e36c"] h4 a,
  section[data-section-id="6a01d386e6d9036492286c40"] h4 a,
  section[data-section-id="6a015b1193c3a862c5e781f6"] h4 a,
  section[data-section-id="6a042eac25f9505694b8d48e"] h4 a,
  section[data-section-id="6a02cd66c3ea9c306a45665d"] h4 a{display:inline-block;margin:4px 9px;white-space:nowrap}
}

/* collection (sound): the harvested grid leaves 160-230px between the
   sub-line and the cards below ~1024px — pull the widget back up to the
   ~46px rhythm (values measured per band) */
@media (max-width:450px){
  section[data-section-id="6a0451f7a71f9c3555d972cc"] .hpst-sound,
  section[data-section-id="6a0526ad84494b0d27e95a52"] .hpst-sound{margin-top:-110px} }
@media (min-width:451px) and (max-width:840px){
  section[data-section-id="6a0451f7a71f9c3555d972cc"] .hpst-sound,
  section[data-section-id="6a0526ad84494b0d27e95a52"] .hpst-sound{margin-top:-175px} }
@media (min-width:841px) and (max-width:1024px){
  section[data-section-id="6a0451f7a71f9c3555d972cc"] .hpst-sound,
  section[data-section-id="6a0526ad84494b0d27e95a52"] .hpst-sound{margin-top:-35px} }

/* 製作工程 / How is it made: air between the title and the film on mobile */
@media (max-width:767px){
  section[data-section-id="69fb2742e6ece61cc32c5c5f"] .sqs-block-video,
  section[data-section-id="69fa772614c4ed15ce56cd06"] .sqs-block-video{margin-top:22px}
}

/* mobile-menu language globe: kill the folder-title text-offset so the glyph centers */
.header-menu-nav-list a[data-folder-id="/language-selection"]{justify-content:center}
.header-menu-nav-list a[data-folder-id="/language-selection"] .header-nav-folder-title-text::before{
  margin:0 auto !important;display:block !important}

/* --- about/history/research: section titles on the homepage scale --- */
/* (the Squarespace heading scale ran ~65px here; the page MAIN title keeps
   its larger size via the hero override below) */
body#collection-69fb2742e6ece61cc32c5c56 h2,
body#collection-6a01d386e6d9036492286c3d h2,
body#collection-6a042eac25f9505694b8d48b h2,
body#collection-69fa73df13d05b013d8621a0 h2,
body#collection-6a015b1193c3a862c5e781f3 h2,
body#collection-6a02cd66c3ea9c306a45665a h2{
  font-size:clamp(28px,4.32vw,62px) !important;
  line-height:1.35 !important;letter-spacing:.02em !important;font-weight:400 !important;
}
/* …but never inside the footer: the rule above out-specifies the footer cap
   (id vs class), so the ニュースレター title ballooned on these collections —
   and on the standalone pages (catalog/guide/omega), whose shell reuses the
   About collection id. Re-cap it with the same ids (Alex 2026-08-31). */
body#collection-69fb2742e6ece61cc32c5c56 footer h2,
body#collection-6a01d386e6d9036492286c3d footer h2,
body#collection-6a042eac25f9505694b8d48b footer h2,
body#collection-69fa73df13d05b013d8621a0 footer h2,
body#collection-6a015b1193c3a862c5e781f3 footer h2,
body#collection-6a02cd66c3ea9c306a45665a footer h2{
  font-size:clamp(22px,2.25vw,32px) !important;
  line-height:1.3 !important;letter-spacing:.04em !important;
}

/* --- 愛をこめて: title centered on the image (all pages that carry it) --- */
@media (min-width:768px){
  section[data-section-id="69fb2742e6ece61cc32c5c68"] .fluid-engine,
  section[data-section-id="6a01d386e6d9036492286c58"] .fluid-engine,
  section[data-section-id="6a042eac25f9505694b8d49d"] .fluid-engine,
  section[data-section-id="69fa817a45640a06a86a27ec"] .fluid-engine,
  section[data-section-id="6a01dc2137a5c050d0355c7f"] .fluid-engine,
  section[data-section-id="6a02cd66c3ea9c306a45666c"] .fluid-engine{
    display:flex !important;flex-direction:column;align-items:center;justify-content:center;
    min-height:620px;padding:60px 6vw;
  }
  section[data-section-id="69fb2742e6ece61cc32c5c68"] .fluid-engine > .fe-block,
  section[data-section-id="6a01d386e6d9036492286c58"] .fluid-engine > .fe-block,
  section[data-section-id="6a042eac25f9505694b8d49d"] .fluid-engine > .fe-block,
  section[data-section-id="69fa817a45640a06a86a27ec"] .fluid-engine > .fe-block,
  section[data-section-id="6a01dc2137a5c050d0355c7f"] .fluid-engine > .fe-block,
  section[data-section-id="6a02cd66c3ea9c306a45666c"] .fluid-engine > .fe-block{
    position:static;width:100%;max-width:1040px;margin:0}
}

/* --- shop: the lineup widget sits outside any section — paper surface, ink title --- */
body#collection-68e2591eee7a7e3712da24d3 .hpst-pans,
body#collection-69fb30f3e6ece61cc3303615 .hpst-pans{
  background:#F6F3EA url(https://media.ojidigital.com/handpanstudio/webp/08153b77-APTT-Texture-Big-1920x1440.webp) center/cover !important;padding-bottom:70px}
body#collection-68e2591eee7a7e3712da24d3 .hpst-pans-head h2,
body#collection-69fb30f3e6ece61cc3303615 .hpst-pans-head h2{color:#26221F !important}
body#collection-68e2591eee7a7e3712da24d3 .hpst-pans-head p,
body#collection-69fb30f3e6ece61cc3303615 .hpst-pans-head p{color:#6f6256 !important}

/* --- contact: the main (form) section on the paper texture --- */
section[data-section-id="69e9f9a07944fc1173c02369"],
section[data-section-id="69fb1f02b3113e3b0e89d30c"]{
  background:#F6F3EA url(https://media.ojidigital.com/handpanstudio/webp/08153b77-APTT-Texture-Big-1920x1440.webp) center/cover !important}
section[data-section-id="69e9f9a07944fc1173c02369"] .section-background,
section[data-section-id="69fb1f02b3113e3b0e89d30c"] .section-background,
section[data-section-id="69e9f9a07944fc1173c02369"] .section-background-overlay,
section[data-section-id="69fb1f02b3113e3b0e89d30c"] .section-background-overlay,
section[data-section-id="69e9f9a07944fc1173c02369"] .section-border,
section[data-section-id="69fb1f02b3113e3b0e89d30c"] .section-border{background:transparent !important}

/* --- product pages: the Character (buy-box) section had zero side padding --- */
section:has(.product-excerpt) > .content-wrapper{
  padding-left:clamp(24px,5vw,72px) !important;padding-right:clamp(24px,5vw,72px) !important}

/* --- product pages: sound-card widget stacks one-up on mobile (the older
   harvested widget copy kept two cramped columns) + air before the next section --- */
/* the sound widget ships its own snap carousel, but the studies widget's
   UNSCOPED .hpst-grid rules land later in the page and used to flatten it —
   re-assert the native design, properly scoped */
@media (max-width:840px){
  .hpst-sound .hpst-grid{
    display:flex !important;grid-template-columns:none !important;
    overflow-x:auto !important;overflow-y:hidden;scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch;gap:16px !important;padding:4px 20px 16px !important;
    scroll-padding:0 20px;scrollbar-width:none;margin:0 !important}
  .hpst-sound .hpst-grid::-webkit-scrollbar{display:none}
  .hpst-sound .hpst-card{flex:0 0 86% !important;scroll-snap-align:center;scroll-snap-stop:always}
  .hpst-sound{padding-bottom:34px}
  section:has(.hpst-sound){padding-bottom:26px}
}

/* --- shop: the ラインアップ/The Lineup head is redundant under the page title --- */
body#collection-68e2591eee7a7e3712da24d3 .hpst-pans-head,
body#collection-69fb30f3e6ece61cc3303615 .hpst-pans-head{display:none !important}
body#collection-68e2591eee7a7e3712da24d3 .hpst-pans,
body#collection-69fb30f3e6ece61cc3303615 .hpst-pans{padding-top:52px !important;padding-bottom:52px !important}

/* --- contact main section: 地図 and the form's お問い合わせ on the section-title scale --- */
section[data-section-id="69e9f9a07944fc1173c02369"] h2,
section[data-section-id="69fb1f02b3113e3b0e89d30c"] h2,
section[data-section-id="69e9f9a07944fc1173c02369"] .hpst-cform h2,
section[data-section-id="69fb1f02b3113e3b0e89d30c"] .hpst-cform h2{
  font-size:clamp(28px,4.32vw,62px) !important;
  line-height:1.35 !important;letter-spacing:.02em !important;font-weight:400 !important}

/* --- lineup sections: kill the phantom min-height under the cards and match
   the 音の効果 bottom rhythm (~82px under the last element) --- */
section.page-section:has(.hpst-pans){min-height:0 !important}
section.page-section:has(.hpst-pans) > .content-wrapper{min-height:0 !important}
section.page-section:has(.hpst-pans) .user-items-list{padding-bottom:0 !important;min-height:0 !important}

/* --- sqs pill buttons never stretch to their (sometimes very wide) block --- */
#siteWrapper.site-wrapper .sqs-block-button-container .sqs-block-button-element{flex:none !important;width:fit-content !important;min-width:0 !important}

/* --- craft sections: the nested-engine block overlays the title row — keep
   the title block on top so the text stays selectable --- */
section[data-section-id="69fb2742e6ece61cc32c5c5f"] .fluid-engine > .fe-block:has(h2),
section[data-section-id="69fa772614c4ed15ce56cd06"] .fluid-engine > .fe-block:has(h2){
  position:relative;z-index:9}

/* --- homepage hero on phones: the dedicated square film --- */
@media (max-width:767px){
  section[data-section-id="693122ae9a9b617bbe8f5a33"],
  section[data-section-id="6a051b2551ebdb51babc7893"]{aspect-ratio:1/1}
}

/* --- about/history/research heroes: Alex's playground spec (2026-08-28) ---
   300px visible band (plus header clearance), title 62px + jump links centered,
   the arc pattern at half opacity riding up so its lower crossing shows.
   The arcs paint as a ::before layer — the harvested image block's nested
   content-fill wrappers collapse to zero height, so it is hidden instead. */
@media (min-width:768px){
section[data-section-id="69fb2742e6ece61cc32c5c59"],
section[data-section-id="6a01d386e6d9036492286c40"],
section[data-section-id="6a042eac25f9505694b8d48e"],
section[data-section-id="69fb16607f2d3a766b94e36c"],
section[data-section-id="6a015b1193c3a862c5e781f6"],
section[data-section-id="6a02cd66c3ea9c306a45665d"]{height:392px;min-height:0 !important;position:relative;overflow:hidden}
section[data-section-id="69fb2742e6ece61cc32c5c59"]::before,
section[data-section-id="6a01d386e6d9036492286c40"]::before,
section[data-section-id="6a042eac25f9505694b8d48e"]::before,
section[data-section-id="69fb16607f2d3a766b94e36c"]::before,
section[data-section-id="6a015b1193c3a862c5e781f6"]::before,
section[data-section-id="6a02cd66c3ea9c306a45665d"]::before{
  content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;z-index:1;
  background:url(https://media.ojidigital.com/handpanstudio/webp/hero-arc-pattern.webp) no-repeat center top / 100% auto}
section[data-section-id="69fb2742e6ece61cc32c5c59"] > .content-wrapper,
section[data-section-id="6a01d386e6d9036492286c40"] > .content-wrapper,
section[data-section-id="6a042eac25f9505694b8d48e"] > .content-wrapper,
section[data-section-id="69fb16607f2d3a766b94e36c"] > .content-wrapper,
section[data-section-id="6a015b1193c3a862c5e781f6"] > .content-wrapper,
section[data-section-id="6a02cd66c3ea9c306a45665d"] > .content-wrapper{padding:0 !important;min-height:0 !important;height:100%;position:relative;z-index:2}
section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine,
section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine,
section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine,
section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine,
section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine,
section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine{
  display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:16px;height:100%;min-height:0 !important;padding:199px 24px 0 !important}
section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine > .fe-block,
section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine > .fe-block,
section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine > .fe-block,
section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine > .fe-block,
section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine > .fe-block,
section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine > .fe-block{position:relative;z-index:1;width:auto;max-width:100%;margin:0}
section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]){display:none !important}
section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine > .fe-block:has(h2),
section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine > .fe-block:has(h2),
section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine > .fe-block:has(h2),
section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine > .fe-block:has(h2),
section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine > .fe-block:has(h2),
section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine > .fe-block:has(h2){order:1}
section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine > .fe-block:has(h4),
section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine > .fe-block:has(h4),
section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine > .fe-block:has(h4),
section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine > .fe-block:has(h4),
section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine > .fe-block:has(h4),
section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine > .fe-block:has(h4){order:2}
}

/* --- shop / contact / faq hero arcs (JP+EN): the arc pattern here is a fluid-engine IMAGE
   BLOCK at object-fit:cover, not the ::before layer the about/history/research
   heroes use. Cover keys off the full-bleed width, so the pattern renders ~2x
   the band's height and the arc crowns are cropped up behind the absolute
   header. The source's top third is empty, so sliding the crop window up it
   (50% 30%) drops the whole curve into the band without changing the band
   height or the image's scale. (David 2026-08-29) */
@media (min-width:768px){
  section[data-section-id="69fb1ef53188c02e76bfe7d4"] .fe-block:has(img[src*="hero-arc-pattern"]) img,  /* jp/shop    */
  section[data-section-id="69fb1e284d13ab03b14df749"] .fe-block:has(img[src*="hero-arc-pattern"]) img,  /* jp/contact */
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fe-block:has(img[src*="hero-arc-pattern"]) img,  /* en/contact */
  section[data-section-id="6a05b4bc7669ee37b48eeb51"] .fe-block:has(img[src*="hero-arc-pattern"]) img,  /* en/shop    */
  section[data-section-id="69e9f62326380b4bf7358667"] .fe-block:has(img[src*="hero-arc-pattern"]) img,  /* jp/faq     */
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fe-block:has(img[src*="hero-arc-pattern"]) img{  /* en/faq     */
    object-position:50% 30% !important}
}

/* --- contact + faq hero arcs on MOBILE (David 2026-08-29) ---
   On phones these two heroes place the arc block in the grid's top rows only
   (rows 1-7, inset to the text column), so the pattern read as a band of lines
   ABOVE the title instead of a backdrop behind it. The shop hero already spans
   1/1/10/11 and needs none of this. Lift the block out of the grid and let it
   cover the section, with the copy stacked above it. */
@media (max-width:767px){
  section[data-section-id="69fb1e284d13ab03b14df749"],   /* jp/contact */
  section[data-section-id="69fb1f02b3113e3b0e89d309"],   /* en/contact */
  section[data-section-id="69e9f62326380b4bf7358667"],   /* jp/faq     */
  section[data-section-id="69f5ca6de61f4720c23598ef"]{   /* en/faq     */
    position:relative;overflow:hidden}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]){
    position:absolute !important;inset:0 !important;grid-area:auto !important;
    width:auto !important;max-width:none !important;margin:0 !important;z-index:0 !important}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]) img,
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]) img,
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]) img,
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]) img{
    width:100% !important;height:100% !important;
    object-fit:cover !important;object-position:50% 30% !important}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine > .fe-block:has(h2,h4),
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine > .fe-block:has(h2,h4),
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine > .fe-block:has(h2,h4),
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine > .fe-block:has(h2,h4){
    position:relative;z-index:1}
}

/* --- footer newsletter: the input matches the 登録する pill --- */
footer .newsletter-form input[type="email"], footer .newsletter-form input[type="text"],
footer .newsletter-form .newsletter-form-field-element{
  padding:12px 18px !important;font-size:15px !important;min-height:0 !important;height:47px !important;box-sizing:border-box}

/* --- Master-Crafted icons: a little more air under the glyphs (desktop) --- */
@media (min-width:768px){
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] .fluid-image-container,
  section[data-section-id="69dcb180501e5e51b9702e43"] .fluid-image-container{margin-bottom:14px !important}
}

/* --- FAQ category chips: two lines on phones (tighter pad/gap, same type) --- */
@media (max-width:520px){
  .hpst-faq .chip-link{padding:7px 12px !important;margin:0 !important}
  .hpst-faq .chip-link .chip-icon{margin-right:5px}
  .hpst-faq .chip-link + .chip-link{margin-left:0 !important}
  .hpst-faq nav .flex, .hpst-faq .chip-link{gap:6px !important}
}

/* --- feature strip: a touch more leading on the item titles (desktop) --- */
@media (min-width:768px){
  section[data-section-id="693122ae9a9b617bbe8f5a3c"] h4,
  section[data-section-id="69dcb180501e5e51b9702e43"] h4{line-height:1.55 !important}
}

/* --- film marquee: when the OS asks for reduced motion the animation stops
   (by design) — let the strip be swiped by hand instead of sitting frozen --- */
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .marquee .marquee-track{animation:none !important}
}


/* --- mobile: these editorial sections reserved empty grid rows under their
   titles (about 新しい楽器 / history I・II, JP+EN) — collapse them.
   REVERT: delete this block. --- */
@media (max-width:767px){
  section[data-section-id="69fb2742e6ece61cc32c5c5c"] .fluid-engine,
  section[data-section-id="69fa763286a4a16fa3dc770f"] .fluid-engine,
  section[data-section-id="6a01d386e6d9036492286c43"] .fluid-engine,
  section[data-section-id="6a01d386e6d9036492286c46"] .fluid-engine,
  section[data-section-id="6a015b1193c3a862c5e781f9"] .fluid-engine,
  section[data-section-id="6a015b1193c3a862c5e781fd"] .fluid-engine{
    grid-template-rows:repeat(1,minmax(5px,auto)) !important}
}

/* --- full-bleed photo bands (original photography, 2026-08-30) --- */
section.hpst-photo-band{padding:0;margin:0;line-height:0;background:#191512}
section.hpst-photo-band img{width:100%;height:clamp(300px,42vw,540px);object-fit:cover;display:block}

/* --- about-family heroes on MOBILE: same ::before arcs at the contact
   opacity, the harvested image block hidden (it was adding ~137px of height) --- */
@media (max-width:767px){
section[data-section-id="69fb2742e6ece61cc32c5c59"],
section[data-section-id="6a01d386e6d9036492286c40"],
section[data-section-id="6a042eac25f9505694b8d48e"],
section[data-section-id="69fb16607f2d3a766b94e36c"],
section[data-section-id="6a015b1193c3a862c5e781f6"],
section[data-section-id="6a02cd66c3ea9c306a45665d"]{position:relative;overflow:hidden}
section[data-section-id="69fb2742e6ece61cc32c5c59"]::before,
section[data-section-id="6a01d386e6d9036492286c40"]::before,
section[data-section-id="6a042eac25f9505694b8d48e"]::before,
section[data-section-id="69fb16607f2d3a766b94e36c"]::before,
section[data-section-id="6a015b1193c3a862c5e781f6"]::before,
section[data-section-id="6a02cd66c3ea9c306a45665d"]::before{
  content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;z-index:1;
  background:url(https://media.ojidigital.com/handpanstudio/webp/hero-arc-pattern.webp) no-repeat center 20% / 150% auto}
section[data-section-id="69fb2742e6ece61cc32c5c59"] > .content-wrapper,
section[data-section-id="6a01d386e6d9036492286c40"] > .content-wrapper,
section[data-section-id="6a042eac25f9505694b8d48e"] > .content-wrapper,
section[data-section-id="69fb16607f2d3a766b94e36c"] > .content-wrapper,
section[data-section-id="6a015b1193c3a862c5e781f6"] > .content-wrapper,
section[data-section-id="6a02cd66c3ea9c306a45665d"] > .content-wrapper{position:relative;z-index:2}
section[data-section-id="69fb2742e6ece61cc32c5c59"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a01d386e6d9036492286c40"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a042eac25f9505694b8d48e"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="69fb16607f2d3a766b94e36c"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a015b1193c3a862c5e781f6"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
section[data-section-id="6a02cd66c3ea9c306a45665d"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]){display:none !important}
section[data-section-id="69fb2742e6ece61cc32c5c59"] h4 > span,
section[data-section-id="6a01d386e6d9036492286c40"] h4 > span,
section[data-section-id="6a042eac25f9505694b8d48e"] h4 > span,
section[data-section-id="69fb16607f2d3a766b94e36c"] h4 > span,
section[data-section-id="6a015b1193c3a862c5e781f6"] h4 > span,
section[data-section-id="6a02cd66c3ea9c306a45665d"] h4 > span{display:none}
}

/* --- collapsed editorial sections: the row collapse squashed their photos
   to ~70px on mobile — give the image frame back its aspect --- */
@media (max-width:767px){
  section[data-section-id="69fb2742e6ece61cc32c5c5c"] .fluid-image-container,
  section[data-section-id="69fa763286a4a16fa3dc770f"] .fluid-image-container,
  section[data-section-id="6a01d386e6d9036492286c43"] .fluid-image-container,
  section[data-section-id="6a01d386e6d9036492286c46"] .fluid-image-container,
  section[data-section-id="6a015b1193c3a862c5e781f9"] .fluid-image-container,
  section[data-section-id="6a015b1193c3a862c5e781fd"] .fluid-image-container{
    height:auto !important;aspect-ratio:3/2;width:100%}
}

/* --- research band: no cream sliver above it on phones --- */
@media (max-width:767px){
  section[data-section-id="6a042eac25f9505694b8d491"],
  section[data-section-id="6a030d3a0ff3e96beddeccce"]{padding-bottom:0 !important}
  section[data-section-id="6a042eac25f9505694b8d491"] > .content-wrapper,
  section[data-section-id="6a030d3a0ff3e96beddeccce"] > .content-wrapper{padding-bottom:0 !important}
  #hpst-band-research{margin-top:0}
}

/* --- contact heroes on phones: hide the 392px arcs image block, paint the
   same arcs layer as the About family (desktop stays on David's grid) --- */
@media (max-width:767px){
  section[data-section-id="69fb1e284d13ab03b14df749"],
  section[data-section-id="69fb1f02b3113e3b0e89d309"]{position:relative;overflow:hidden}
  section[data-section-id="69fb1e284d13ab03b14df749"]::before,
  section[data-section-id="69fb1f02b3113e3b0e89d309"]::before{
    content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;z-index:1;
    background:url(https://media.ojidigital.com/handpanstudio/webp/hero-arc-pattern.webp) no-repeat center 20% / 150% auto}
  section[data-section-id="69fb1e284d13ab03b14df749"] > .content-wrapper,
  section[data-section-id="69fb1f02b3113e3b0e89d309"] > .content-wrapper{position:relative;z-index:2}
  section[data-section-id="69fb1e284d13ab03b14df749"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
  section[data-section-id="69fb1f02b3113e3b0e89d309"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]){display:none !important}
}

/* --- history IV: ~8 empty fixed-height grid rows sat under the text on
   desktop — collapse them (image frame capped so the split stays balanced) --- */
@media (min-width:768px){
  section[data-section-id="6a01d386e6d9036492286c4c"] .fluid-image-container,
  section[data-section-id="6a015b1193c3a862c5e78203"] .fluid-image-container{
    height:clamp(400px,34vw,500px) !important}
  section[data-section-id="6a01d386e6d9036492286c4c"] .fluid-engine,
  section[data-section-id="6a015b1193c3a862c5e78203"] .fluid-engine{
    grid-template-rows:repeat(12,minmax(1.977vw,auto)) !important}
}

/* --- about 研究で見えてきたこと: focal point rides right on desktop --- */
@media (min-width:768px){
  section[data-section-id="6a0401430832326ecde267b1"] img,
  section[data-section-id="6a03ffd64427d934c1add367"] img{object-position:72% 45% !important}
}

/* --- lineup cards on the paper texture (lab winner, Alex 2026-08-31) --- */
.hpst-pan-card{
  background:#F6F3EA url(https://media.ojidigital.com/handpanstudio/webp/08153b77-APTT-Texture-Big-1920x1440.webp) center/cover !important}

/* --- FAQ hero sub-line, contact-pattern --- */
.hpst-faq-hero-sub{margin-top:10px}

/* FAQ heroes: same family treatment on desktop (they ran ~56px taller) */
@media (min-width:768px){
  section[data-section-id="69e9f62326380b4bf7358667"],
  section[data-section-id="69f5ca6de61f4720c23598ef"]{height:392px;min-height:0 !important;position:relative;overflow:hidden}
  section[data-section-id="69e9f62326380b4bf7358667"]::before,
  section[data-section-id="69f5ca6de61f4720c23598ef"]::before{
    content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;z-index:1;
    background:url(https://media.ojidigital.com/handpanstudio/webp/hero-arc-pattern.webp) no-repeat center top / 100% auto}
  section[data-section-id="69e9f62326380b4bf7358667"] > .content-wrapper,
  section[data-section-id="69f5ca6de61f4720c23598ef"] > .content-wrapper{padding:0 !important;min-height:0 !important;height:100%;position:relative;z-index:2}
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine,
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine{
    display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:16px;height:100%;min-height:0 !important;padding:199px 24px 0 !important;
    grid-template-rows:none !important}
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine > .fe-block,
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine > .fe-block{position:relative;z-index:1;width:auto;max-width:100%;margin:0}
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]),
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine > .fe-block:has(img[src*="hero-arc-pattern"]){display:none !important}
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine > .fe-block:has(h2),
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine > .fe-block:has(h2){order:1}
  section[data-section-id="69e9f62326380b4bf7358667"] .fluid-engine > .fe-block:has(h4),
  section[data-section-id="69f5ca6de61f4720c23598ef"] .fluid-engine > .fe-block:has(h4){order:2}
}

/* --- contact map on 和紙の地図 (map-lab 案1, Alex 2026-08-31): the embed
   re-toned to the paper palette; a single hairline frame; nothing resized --- */
section[data-section-id="69e9f9a07944fc1173c02369"] iframe[src*="google.com/maps"],
section[data-section-id="69fb1f02b3113e3b0e89d30c"] iframe[src*="google.com/maps"]{
  filter:grayscale(.9) sepia(.34) brightness(1.05) contrast(.9)}
section[data-section-id="69e9f9a07944fc1173c02369"] .sqs-block-map .sqs-block-content > div,
section[data-section-id="69fb1f02b3113e3b0e89d30c"] .sqs-block-map .sqs-block-content > div{
  border:1px solid #d9cdb7}
/* address under the map: slightly tighter leading */
.fe-block-d6b29d21a64dfd58a133 p, .fe-block-368fface953b932826e5 p{line-height:1.75 !important}
/* the embed a touch taller on desktop (Alex 2026-08-31); its height comes from the
   inline aspect-ratio padding, so we raise that — mobile keeps the original ratio */
@media (min-width:768px){
  section[data-section-id="69e9f9a07944fc1173c02369"] .sqs-block-map div[style*="padding-bottom"],
  section[data-section-id="69fb1f02b3113e3b0e89d30c"] .sqs-block-map div[style*="padding-bottom"]{
    padding-bottom:62% !important}
}

/* --- lineup cards: trial-session CTA, sold-out badge + restock capture --- */
.hpst-pan-demo{display:block;border:1px solid rgba(142,107,78,.5);color:#8E6B4E;border-radius:15px;
  padding:9px 12px;font-size:12.5px;letter-spacing:.05em;text-decoration:none;margin-top:8px}
.hpst-pan-demo:hover{background:#8E6B4E;color:#fff}
.hpst-pan-badge{position:absolute;top:12px;left:12px;z-index:2;background:#26221F;color:#F6F3EA;
  font-size:13px;letter-spacing:.16em;padding:6px 14px}
.hpst-pan-card{position:relative}
.hpst-pan-card.is-soldout .hpst-pan-img img{opacity:.72}
.hpst-restock{display:flex;gap:6px;margin:0;width:100% !important;box-sizing:border-box}
.hpst-restock input{flex:1;min-width:0;box-sizing:border-box;border:1px solid #d9cdb7;background:#fff;padding:9px 10px;
  font:12.5px "Libre Baskerville","Hiragino Mincho ProN","Yu Mincho",serif;border-radius:3px}
.hpst-restock button{border:0;background:#8E6B4E;color:#fff;border-radius:12px;padding:9px 12px;
  font:12px "Libre Baskerville","Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.hpst-restock button:hover{opacity:.88}
.hpst-restock-done{font-size:12.5px;color:#8E6B4E;line-height:1.8;margin:4px 0}

/* --- document pages (privacy / 生成AI / 特商法): family hero band injected at
   build time (inject_doc_band) + the legal text on a document scale ------- */
section.page-section.hpst-docband{position:relative;overflow:hidden;background:#26221F;box-sizing:border-box;height:407px;
  display:flex;align-items:flex-start;justify-content:center;text-align:center;padding:168px 24px 0 !important}
.hpst-docband::before{content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
  background:url(https://media.ojidigital.com/handpanstudio/webp/hero-arc-pattern.webp) no-repeat center top / 100% auto}
@media (min-width:768px){section.page-section.hpst-docband{height:392px;padding:199px 24px 0 !important}}
.hpst-docband-in{position:relative}
.hpst-docband h1{font-family:"Libre Baskerville","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif !important;
  font-size:clamp(44px,4.7vw,60px) !important;font-weight:400 !important;letter-spacing:.02em !important;
  line-height:1.35 !important;color:#F6F3EA !important;margin:0 !important}
/* the removed in-content title left phantom fluid-engine grid rows (fixed row
   assignments) reserving ~250px of air above the 制定日 line on desktop; these
   pages hold one text block, so flow layout replaces the grid entirely */
body#collection-68ed0591bba44d3cfb3770a2 main .fluid-engine,
body#collection-68ed09a33051a35fe11806a9 main .fluid-engine,
body#collection-6996ac93801ada77aba18cd7 main .fluid-engine,
body#collection-6996b62c5957d231ba15b77f main .fluid-engine{
  display:block !important;padding:64px 24px 84px}
body#collection-68ed0591bba44d3cfb3770a2 main .fluid-engine > .fe-block,
body#collection-68ed09a33051a35fe11806a9 main .fluid-engine > .fe-block,
body#collection-6996ac93801ada77aba18cd7 main .fluid-engine > .fe-block,
body#collection-6996b62c5957d231ba15b77f main .fluid-engine > .fe-block{
  position:static !important;width:auto !important;margin:0 !important}
/* the numbered legal headings ran on the huge Squarespace scale; document scale
   instead, and the text blocks centred on a readable measure */
body#collection-68ed0591bba44d3cfb3770a2 main h2,   /* jp/privacy      */
body#collection-68ed09a33051a35fe11806a9 main h2,   /* en/privacy      */
body#collection-6996ac93801ada77aba18cd7 main h2,   /* jp/generative-ai */
body#collection-6996b62c5957d231ba15b77f main h2{   /* en/generative-ai */
  font-size:clamp(21px,2.1vw,27px) !important;font-weight:600 !important;
  letter-spacing:.04em !important;line-height:1.6 !important}
body#collection-68ed0591bba44d3cfb3770a2 main .sqs-block-html .sqs-block-content,
body#collection-68ed09a33051a35fe11806a9 main .sqs-block-html .sqs-block-content,
body#collection-6996ac93801ada77aba18cd7 main .sqs-block-html .sqs-block-content,
body#collection-6996b62c5957d231ba15b77f main .sqs-block-html .sqs-block-content{
  max-width:840px;margin:0 auto}

/* FAQ hero: the h2 carried a 34px bottom margin the other heroes don't */
section[data-section-id="69e9f62326380b4bf7358667"] h2,
section[data-section-id="69f5ca6de61f4720c23598ef"] h2{margin-bottom:0 !important}

/* ================= 2026-08-28: homepage surface system (JP + EN) ================= */
/* ハンドパンとは on the feature strip's paper */
section.hpst-intro-section{background:#F6F3EA url(https://media.ojidigital.com/handpanstudio/webp/08153b77-APTT-Texture-Big-1920x1440.webp) center/cover !important}
/* collection (sound) on header ink — its harvested photo backdrop retired */
section[data-section-id="6a0451f7a71f9c3555d972cc"],
section[data-section-id="6a0526ad84494b0d27e95a52"],
section[data-section-id="6a0451f7a71f9c3555d972cc"] .section-background,
section[data-section-id="6a0526ad84494b0d27e95a52"] .section-background,
section[data-section-id="6a0451f7a71f9c3555d972cc"] .section-background-overlay,
section[data-section-id="6a0526ad84494b0d27e95a52"] .section-background-overlay,
section[data-section-id="6a0451f7a71f9c3555d972cc"] .section-border,
section[data-section-id="6a0526ad84494b0d27e95a52"] .section-border,
.hpst-sound{background:#26221F !important}
section[data-section-id="6a0451f7a71f9c3555d972cc"] .section-background img,
section[data-section-id="6a0526ad84494b0d27e95a52"] .section-background img{display:none !important}
/* 音の効果 cards on 墨の面 (variant A — Alex 2026-08-28): ink cards on the
   paper, cream numerals, tan labels. Scoped to the homepage sections; the
   research page keeps the widget's own cream cards. */
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-card,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-card{background:#26221F !important}
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-stat,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-stat,
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-stat .sign,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-stat .sign{color:#F6F3EA !important}
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-label,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-label{color:#C4A88D !important}
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-divider,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-divider{background:rgba(246,243,234,.16) !important}
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-body,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-body{color:rgba(246,243,234,.75) !important}
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-cite,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-cite{color:rgba(196,168,141,.75) !important}
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-cite .src,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-cite .src{color:rgba(246,243,234,.7) !important}

/* 音の効果 on the same paper texture as ハンドパンとは, title included */
section[data-section-id="6a04341d607ca165958f7a05"],
section[data-section-id="6a05b61b6df08245e00bf8ff"]{
  background:#F6F3EA url(https://media.ojidigital.com/handpanstudio/webp/08153b77-APTT-Texture-Big-1920x1440.webp) center/cover !important}
section[data-section-id="6a04341d607ca165958f7a05"] .section-background,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .section-background,
section[data-section-id="6a04341d607ca165958f7a05"] .section-background-overlay,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .section-background-overlay,
section[data-section-id="6a04341d607ca165958f7a05"] .section-border,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .section-border{background:transparent !important}
section[data-section-id="6a04341d607ca165958f7a05"] .section-background img,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .section-background img{display:none !important}
/* the widget paints its own beige — let the section's paper show through
   (scoped to the homepage sections; the research page keeps its own look) */
section[data-section-id="6a04341d607ca165958f7a05"] .hpst-studies,
section[data-section-id="6a05b61b6df08245e00bf8ff"] .hpst-studies{background:transparent !important}
/* lineup on header ink — EVERY page that carries the widget
   (homes, product pages, faq, contact, about, history, research) */
section.page-section:has(.hpst-pans),
section.page-section:has(.hpst-pans) .section-background{background:#26221F !important}
section.page-section:has(.hpst-pans) .section-background img,
section.page-section:has(.hpst-pans) .section-background-overlay,
section.page-section:has(.hpst-pans) .section-border{display:none !important}
.hpst-pans{background:transparent !important}
.hpst-pans-head h2{color:#F6F3EA !important}
.hpst-pans-head p{color:#C4A88D !important}
/* collection cards: learn-more beside the 音 counter */
.hpst-sound .hpst-card-body{position:relative}
.hpst-sound .hpst-card-more{position:absolute;right:0;bottom:8px;display:inline-block;
  border:1px solid rgba(196,168,141,.55);color:#C4A88D;border-radius:15px;padding:9px 22px;
  font-size:13px;letter-spacing:.08em;text-decoration:none;white-space:nowrap}
.hpst-sound .hpst-card-more:hover{background:#C4A88D;color:#191512}
@media (max-width:840px){
  .hpst-sound .hpst-card-more{position:static;display:inline-block;margin:14px 0 2px}
}

/* ================= mobile: half the section rhythm (David 2026-08-29) =========
   These sections carry their spacing as their OWN top/bottom padding, not as a
   shared margin between them, so "halve the gap" means halving each contributor
   individually. Every value below is exactly 50% of the rule it mirrors, and
   the source value is named so the pair stays traceable if either moves.
   Page heroes are deliberately excluded — their top padding is header
   clearance, not rhythm, and halving it would slide the title under the bar. */
@media (max-width:767px){
  /* intro band — was 56 / 56 */
  #page section:has(.fe-block-6ff889542ab81635cdd6) .fluid-engine,
  #page section:has(.fe-block-72c8762347206f275f05) .fluid-engine{
    padding-top:28px !important;padding-bottom:28px !important}
  /* 聴いて / closing bands — was 46 / 84 */
  section:has(#block-af20121665ba39d7b39c) .fluid-engine,
  section:has(#block-fb410d1b76a679075b7b) .fluid-engine{
    padding-top:23px !important;padding-bottom:42px !important}
  /* 一枚の鋼から (making) — was 32 / 84 */
  section[data-section-id="6939e32f5abc9d5e596489a6"] .fluid-engine,
  section[data-section-id="69dcb180501e5e51b9702e40"] .fluid-engine{
    padding-top:16px !important;padding-bottom:42px !important}
  /* 音の効果 — was 64 / 34 */
  .hpst-studies{padding-top:32px !important;padding-bottom:17px !important}
  /* lineup — was 46 / 84 (the catalogue's own 52/52 rule still outranks this) */
  .hpst-pans{padding-top:23px !important;padding-bottom:42px !important}
  /* studios strip — was 64 bottom, 46 inner top */
  .hpst-flocs{padding-bottom:32px !important}
  .hpst-flocs-in{padding-top:23px !important}
}

/* ===== hero sub-lines: authored case + a readable measure (David 2026-08-29) ==
   The theme sets --heading-font-text-transform:capitalize, which Title Cased
   every heading. On the h1-h3 titles that reads as a deliberate look, but the
   sub-line under a hero title is a SENTENCE — it ships authored as "A premium
   handpan brand where beauty and sound resonate." and was being rendered "A
   Premium Handpan Brand Where Beauty And Sound Resonate." Let the h4 show the
   case it was written in. Its line-height was 24px on a 22px face (1.09), which
   is why two-line sub-lines felt cramped; 1.45 gives the second line air. */
h4{text-transform:none !important;line-height:1.45 !important}
/* Same for the footer contact heading — it is our own copy, authored
   "Connect with us", and was the one widget heading still Title Cased.
   "Our Studios" / "The Lineup" are authored title case, so they are
   unaffected either way and keep the themed treatment. */
.hpst-fcontact h3{text-transform:none !important}