/* Wrap theme, home: the opening is the wrapped gift; sections are sheets laid on the table. */
.modern-section {margin-block:56px;}
.modern-section > .section-inner {width:min(1224px, 100% - 32px); padding:44px 24px 40px;}
.modern-section h2 {font-size:clamp(1.5rem,2.6vw,2.125rem); margin-bottom:28px;}
.offers-section {padding-block:0; background:none;}
.offers-section h2 {color:var(--coral-ink) !important;}

/* ---------- The opening ---------- */
.hero-wrap {position:relative; width:min(1320px, 100% - 32px); margin:40px auto 0; display:grid; grid-template-columns:minmax(0,1fr); perspective:1600px;}
.hero-photo {position:relative; grid-row:1; grid-column:1; margin:0; overflow:clip; background:var(--sky);}
.hero-photo .mobile {display:none;}
.hero-photo .desktop {display:block;}
.hero-photo img {width:100%; aspect-ratio:1 / 1; height:auto; object-fit:cover; object-position:3% 30%;}
.hero-flap {position:relative; grid-row:2; grid-column:1; margin:-64px 12px 0; padding:40px 24px 32px; background:var(--paper); box-shadow:var(--sheet-shadow);}
.hero-flap::before {content:""; position:absolute; top:0; right:0; width:28px; height:28px; background:linear-gradient(to bottom left, var(--ground) calc(50% - .5px), var(--hair) 50%, var(--sky) calc(50% + .5px)); filter:drop-shadow(-2px 3px 2px rgba(28,42,50,.10));}
.hero-flap h1 {position:relative; z-index:4; margin:0; font-size:clamp(1.75rem,7vw,2.25rem); font-weight:300; letter-spacing:.2em; line-height:1.45; color:var(--ink);}
.hero-flap > p {margin-top:16px; color:var(--ink-soft); letter-spacing:.1em; max-width:none;}
.hero-actions {display:flex; flex-wrap:wrap; gap:12px; margin-top:28px;}
.hero-actions .button {flex:1 1 auto;}
/* The cord crosses the whole package, over the picture and the paper, under the name. */
.noshi-cord {display:none;}
.wrap-flap {display:none;}

/* ---------- Offers: one shared price, then only what differs ---------- */
.offer-shared {position:relative; display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 40px; padding-bottom:32px; margin-bottom:36px;}
.offer-shared::after {content:""; position:absolute; left:0; right:0; bottom:0; height:7px; background:var(--cord-lines);}
.offer-shared .offer-price-block {display:grid; grid-template-columns:auto auto; justify-content:start; gap:10px 24px; margin:0;}
.offer-shared .offer-price {grid-column:1 / -1;}
.offer-shared .offer-price {margin:0; font-size:clamp(4rem,11vw,6.5rem) !important; line-height:.9; font-family:var(--numeral); font-weight:400; letter-spacing:-.01em; color:var(--coral); font-variant-numeric:lining-nums;}
.offer-shared .offer-payment {margin:0; font-size:1rem; letter-spacing:.1em; color:var(--ink) !important;}
.offer-shared .offer-payment + .offer-payment {color:var(--ink-soft) !important;}
.offer-shared .offer-conditions {margin:0 0 6px;}
.offer-list {display:grid; gap:0;}
.offer-row {display:flex; flex-direction:column; padding:28px 0 32px !important; border:0 !important; border-radius:0 !important; background:transparent !important; border-top:1px solid var(--pink) !important;}
.offer-row:first-child {border-top:0 !important; padding-top:0 !important;}
.offer-flag {display:inline-flex; gap:0; align-self:flex-start; margin:0 0 10px; padding:2px 12px 3px; background:var(--coral-ink); color:var(--paper); font-size:.8125rem; letter-spacing:.24em;}
.offer-row > .offer-banner-copy > h3 {margin:0; color:var(--ink) !important; font-size:clamp(1.25rem,2.2vw,1.5rem); font-weight:500; letter-spacing:.06em; line-height:1.5;}
.offer-row .kana-tag {margin:8px 0 0; border-color:var(--pink); color:var(--coral-ink) !important;}
.offer-plus {position:relative; margin:18px 0 0; padding:12px 0 0 0; font-size:1.0625rem; letter-spacing:.1em; color:var(--coral-ink); font-weight:500;}
.offer-plus::before {content:""; position:absolute; top:0; left:0; width:40px; height:7px; background:var(--cord-lines);}
.offer-conditions {list-style:none !important; padding-left:0 !important; gap:8px 12px !important;}
.offer-condition {padding:2px 12px 3px; border:1px solid var(--pink); border-radius:2px; font-size:.9375rem; letter-spacing:.08em;}
.offer-row > .button {order:3; align-self:flex-start; margin-top:20px;}
.offer-row > .image-figure {order:2; margin-top:24px;}
/* The offer pictures print the price again; show the people, not the price, and keep their words for search. */
.offer-row .banner-visual .desktop {display:none;}
.offer-row .banner-visual .mobile {display:block;}
.offer-row .banner-visual {position:relative; overflow:hidden; aspect-ratio:1 / 1; width:100%; background:var(--sky);}
.offer-row .banner-visual .mobile, .offer-row .banner-visual picture {height:100%;}
/* Each crop keeps the people and drops the printed price: CDD shows YOYO, SC the ECM portrait. */
.offer-row .banner-visual img {position:absolute; max-width:none; height:auto; object-fit:fill;}
.offer-row:first-child .banner-visual img {width:281.7%; left:-181.7%; top:-16.9%;}
.offer-row + .offer-row .banner-visual img {width:454.5%; left:-9.1%; top:-111.4%;}
.offer-row .banner-caption {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0 !important; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 !important;}

/* ---------- 專人訂制 ---------- */
.bespoke-copy > p:not(.kana-tag) {max-width:30em; color:var(--ink); font-size:clamp(1.25rem,2.4vw,1.875rem); font-weight:300; letter-spacing:.12em; line-height:1.9;}
.bespoke-copy > p:not(.kana-tag) > span {display:inline;}
/* The portrait that shared this grid moved to the opening; the words take the whole sheet. */
.bespoke-split {grid-template-columns:minmax(0,1fr) !important;}
/* The three techniques, inside the opening sheet. */
.flap-body {margin-top:28px;}
.hero-flap .tech-block h2 {position:relative; margin:0; padding-top:20px; font-size:.9375rem; font-weight:500; letter-spacing:.32em; color:var(--cyan-ink); line-height:1.5;}
.hero-flap .tech-block h2::before {content:""; position:absolute; top:0; left:0; width:40px; height:7px; background:var(--cord-lines);}
.hero-flap .tech-block .kana-tag {display:block; margin:6px 0 8px; padding:0; border:0; background:none; font-size:.8125rem !important; letter-spacing:.08em;}
.hero-flap .technology-strip {display:grid; grid-template-columns:minmax(0,1fr); border:0 !important;}
.hero-flap .technique {display:grid; grid-template-columns:5.2em minmax(0,1fr); column-gap:16px; align-items:baseline; padding:10px 0 !important; border:0 !important;}
.hero-flap .technique + .technique {border-left:0 !important;}
.hero-flap .technique h3 {grid-row:1 / span 3; margin:0 !important; font-size:1.375rem !important; font-weight:500; letter-spacing:.1em; color:var(--cyan-ink) !important; line-height:1.3;}
.hero-flap .technique p {grid-column:2; margin:0; font-size:1rem; color:var(--ink); letter-spacing:.06em; line-height:1.7;}
.hero-flap .technique .banner-ja {font-size:.8125rem !important; margin:0 !important; letter-spacing:.08em; color:var(--cyan-ink) !important;}
@media (max-width:999px) {.hero-flap .technique {display:block;} .hero-flap .technique h3 {margin-bottom:2px !important;}}

/* ---------- 見證, 廣告, 聯絡 ---------- */
.witness-copy > p:not(.banner-ja):first-of-type, .witness-copy > p:nth-child(2) {font-size:1.375rem; font-weight:300; letter-spacing:.2em; color:var(--ink);}
.witness-copy p > span {display:inline;}
/* The composite repeats these words in print; the words carry the sheet. */
.witness-visual {display:none;}
.witness-split {display:block !important; max-width:44em;}
.video-link {max-width:640px;}
.video-link .img-text {display:inline-block; padding:4px 12px !important;}
.contact-copy {padding:20px 22px !important; color:var(--ink) !important; font-size:1rem !important;}
.contact-copy > p:first-child {letter-spacing:.14em; font-size:1.0625rem;}

@media (max-width:599px) {
  .offer-list {grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:12px;}
  .offer-row {display:contents;}
  .offer-row > .offer-banner-copy, .offer-row > .button {grid-column:1 / -1;}
  .offer-row:first-child > .offer-banner-copy {order:1;}
  .offer-row:first-child > .button {order:3; margin-bottom:28px;}
  .offer-row + .offer-row > .offer-banner-copy {order:4; padding-top:28px; border-top:1px solid var(--pink);}
  /* Each treatment keeps its own picture: copy, picture, button, then the next treatment. */
  .offer-row:first-child > .image-figure {order:2; grid-column:1 / -1; margin-top:20px;}
  .offer-row:first-child > .button {margin-top:20px;}
  .offer-row + .offer-row > .offer-banner-copy {order:4;}
  .offer-row + .offer-row > .image-figure {order:5; grid-column:1 / -1; margin-top:20px;}
  .offer-row + .offer-row > .button {order:6; margin-top:20px;}
  .modern-section {margin-block:40px;}
  .modern-section > .section-inner {padding:32px 20px 28px;}
  .witness-col {margin-top:36px;}
  /* Opening card: compact label-and-description rows. */
  .hero-flap {padding:28px 18px 22px; margin-top:-48px;}
  .hero-flap > p {margin-top:10px;}
  .flap-body {margin-top:16px;}
  .hero-flap .tech-block h2 {padding-top:16px;}
  .hero-flap .tech-block .kana-tag {margin:4px 0 4px;}
  .hero-flap .technique {display:grid; grid-template-columns:5.5em minmax(0,1fr); column-gap:10px; padding:6px 0 !important;}
  .hero-flap .technique h3 {grid-row:1 / span 3; font-size:1.125rem !important; margin:0 !important;}
  .hero-flap .technique p {font-size:.9375rem; line-height:1.55; letter-spacing:.03em;}
  .hero-actions {margin-top:16px; gap:10px;}
}
@media (min-width:600px) {
  .offer-list {grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:40px;}
  .offer-row {border-top:0 !important; padding-top:0 !important;}
  .offer-row + .offer-row {border-left:0 !important;}
  /* Both columns share rows, so the two 立即購買 and the two pictures line up. */
  @supports (grid-template-rows:subgrid) {
    .offer-list {grid-template-rows:auto auto auto;}
    .offer-row > .offer-banner-copy {grid-row:1;} .offer-row > .image-figure {grid-row:2;} .offer-row > .button {grid-row:3;}
    .offer-row {display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0;}
    .offer-row > .button {justify-self:start; align-self:start;}
  }
}

@media (min-width:1000px) {
  .modern-section {margin-block:64px;}
  .modern-section > .section-inner {padding:72px 72px 64px 152px;}
  /* Section names stand vertically in the left margin, like the inscription on a gift band. */
  .modern-section h2:not(figcaption *) {position:absolute; top:72px; left:56px; margin:0; padding:30px 0 0; writing-mode:vertical-rl; letter-spacing:.38em; font-size:1.75rem; line-height:1.4;}
  .modern-section h2:not(figcaption *)::before {left:50%; width:40px; transform:translateX(-50%);}
  .modern-section > .section-inner {min-height:420px;}

  .hero-wrap {width:min(1120px, 100% - 64px); grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; margin-top:48px;}
  .hero-photo {grid-column:1 / 6; grid-row:1; align-self:stretch;}
  .hero-photo .img-photo, .hero-photo .desktop, .hero-photo picture {height:100%;}
  .hero-photo img {aspect-ratio:auto; height:100%; min-height:clamp(480px, 40vw, 600px); object-position:0% 30%;}
  .hero-flap {grid-column:6 / 13; grid-row:1; align-self:center; margin:40px 0 40px -56px; padding:44px 52px 48px; display:flex; flex-direction:column; gap:0;}
  .hero-flap::before {width:40px; height:40px;}
  .hero-flap h1 {font-size:clamp(2rem,2.7vw,2.5rem); letter-spacing:.16em;}
  .hero-flap > p {margin:12px 0 0; letter-spacing:.1em; color:var(--ink);}
  .flap-body {margin-top:28px; display:flex; flex-direction:column; gap:24px;}
  .hero-flap .technology-strip {grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:20px;}
  .hero-flap .technique p {font-size:.9375rem; letter-spacing:.02em; text-wrap:pretty;}
  .hero-flap .technique {display:block; padding:6px 0 0 !important;}
  .hero-flap .technique h3 {margin-bottom:2px !important;}
  .hero-flap .technique .banner-ja {margin-bottom:8px !important;}
  .hero-actions .button {flex:0 0 auto; min-width:184px;}
  .hero-actions {margin:0;}
  .noshi-cord {grid-column:1 / -1; margin:0 0 84px;}
  .hero-actions {position:relative; z-index:4;}

  .offer-list {column-gap:64px;}
  .offers-section > .section-inner {padding-left:72px;}
  .offers-section h2:not(figcaption *) {position:relative; top:auto; left:auto; margin:0 0 28px; padding:26px 0 0; writing-mode:horizontal-tb; letter-spacing:var(--track); font-size:clamp(1.5rem,2.2vw,2rem);}
  .offers-section h2:not(figcaption *)::before {left:0; width:52px; transform:none;}
  /* Short sheets sit narrower so their words fill them. */
  .bespoke-section > .section-inner, .video-section > .section-inner {width:min(980px, 100% - 64px); min-height:0;}
  .bespoke-section > .duo-sheet {width:min(1120px, 100% - 64px); padding:48px 56px 44px; display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; column-gap:56px; align-items:start;}
  .duo-sheet h2:not(figcaption *) {position:relative; top:auto; left:auto; margin:0 0 24px; padding:26px 0 0; writing-mode:horizontal-tb; letter-spacing:var(--track); font-size:clamp(1.5rem,2.2vw,2rem);}
  .duo-sheet h2:not(figcaption *)::before {left:0; width:52px; transform:none;}
  .duo-sheet .bespoke-copy > p:not(.kana-tag) {font-size:1.375rem; line-height:1.8; letter-spacing:.1em;}
  .witness-col {margin:0; padding-left:56px; border-left:1px solid var(--pink);}
  .witness-split {max-width:none;}
  .modern-section {margin-block:56px;}
  .video-section > .section-inner, .contact-section > .section-inner {padding:44px 56px 40px;}
  .video-section h2:not(figcaption *), .contact-section h2:not(figcaption *) {position:relative; top:auto; left:auto; margin:0 0 20px; padding:26px 0 0; writing-mode:horizontal-tb; letter-spacing:var(--track); font-size:clamp(1.5rem,2.2vw,2rem);}
  .video-section h2:not(figcaption *)::before, .contact-section h2:not(figcaption *)::before {left:0; width:52px; transform:none;}
  .contact-copy {grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- The one moment: the wrapping opens, once per visit ---------- */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled) {
  .wrap-flap {display:block; grid-row:1; grid-column:1; z-index:2; align-self:stretch; justify-self:stretch; pointer-events:none;
    background:var(--paper) url("/assets/theme/shippo.svg") 0 0 / 44px 44px; box-shadow:inset 0 0 0 1px var(--hair);
    backface-visibility:hidden; animation:w-open 1150ms var(--ease-out) 180ms both;}
  .wrap-flap-left {transform-origin:left center; margin-right:50%; --turn:-108deg;}
  .wrap-flap-right {transform-origin:right center; margin-left:50%; --turn:108deg; animation-delay:300ms;}
  .hero-flap {animation:w-settle 900ms var(--ease-out) 650ms both;}
  @media (min-width:1000px) {.wrap-flap {grid-column:1 / 6;}}
  .hero-seen .wrap-flap {display:none;}
  .hero-seen .noshi-cord, .hero-seen .hero-flap {animation:none;}
  @keyframes w-open {0% {transform:rotateY(0);} 85% {opacity:1;} 100% {transform:rotateY(var(--turn)); opacity:0; visibility:hidden;}}
  @keyframes w-tie {from {transform:scaleX(0);}}
  @keyframes w-settle {from {transform:translateY(18px); box-shadow:0 0 0 rgba(28,42,50,0);}}
}