/* Original layouts, supplied brush lettering and accessible HTML headings. */
.brand-story-page { min-height: 100svh; background: #06132e; overflow-x: clip; }
.brand-story { --story-ground: #07344b; --story-gold: #f1d4a0; position: relative; isolation: isolate; width: 100%; overflow: clip; color: #f2f5f4; background: linear-gradient(180deg, var(--story-ground) 0%, var(--story-ground) 60%, #04112c 100%); }
.brand-story-heart { --story-ground: #9e693e; --story-gold: #f6db8e; background: #956139; }
/* Magnify only the lower-right landscape: no repeated sky or second portrait.
   The soft photograph continues behind both panels and the hero's fading edge. */
.brand-story-heart::before { content: ''; position: absolute; z-index: -2; inset: 28vw -40px -40px; pointer-events: none; background-image: radial-gradient(ellipse at 85% 21%, #eaa65894, transparent 55%), linear-gradient(165deg, #9b67332e, #563d1f12 45%, #341d0e4d), url('/assets/story-heart-warm-desktop.webp'); background-position: center, center, right bottom; background-size: 100% 100%, 100% 100%, 200% 180%; background-repeat: no-repeat; filter: blur(24px) saturate(.9); }
.brand-story-heart .brand-story-background { -webkit-mask-image: linear-gradient(#000 64%, #000c 74%, #0005 88%, transparent 100%); mask-image: linear-gradient(#000 64%, #000c 74%, #0005 88%, transparent 100%); }
.brand-story-hero { position: relative; isolation: isolate; overflow: hidden; height: 49vw; min-height: 400px; max-height: 1254px; }
.brand-story-background { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.brand-story-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@media (min-width: 768px) {
  .brand-story-free .brand-story-hero { height: 46vw; max-height: 1178px; }
  .brand-story-free .brand-story-background img { position: absolute; width: 120vw; max-width: none; height: auto; left: -14vw; top: -5vw; }
  .brand-story-heart .brand-story-background img { position: absolute; width: 156.25vw; max-width: none; height: auto; left: -28.48vw; top: -17.85vw; }
}
.brand-story-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 67%, var(--story-ground) 100%); }
.brand-story-heart .brand-story-hero::after { background: none; }
.brand-story-heading { position: absolute; top: 19%; right: 1.8%; width: 52%; margin: 0; padding: 0; color: #fff; text-align: center; }
.brand-story-wordmark { display: block; width: clamp(108px, 13vw, 330px); margin: 0 auto 5vw; }
.brand-story-heart .brand-story-wordmark { width: clamp(114px, 13.6vw, 346px); }
.original-artwork { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; color: #fff; }
.brand-story-heading > .original-artwork { width: 100%; height: 12.4vw; min-height: 100px; }
.brand-story-title-label { display: block; font-family: "Noto Serif TC", "PMingLiU", Georgia, serif; font-size: clamp(30px, 4.6vw, 110px); font-weight: 600; line-height: 1.3; letter-spacing: .015em; text-wrap: balance; text-shadow: 0 2px 6px #0019; }
.brand-story[data-story-locale="en"] .brand-story-title-label { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: normal; }
.brand-calligraphy { display: none; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.brand-story:not([data-story-locale="en"]) [data-calligraphy-ready="true"] .brand-calligraphy { display: block; }
.brand-story:not([data-story-locale="en"]) [data-calligraphy-ready="true"] > .brand-story-title-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.brand-story:not([data-story-locale="en"]) .brand-story-heading > [data-calligraphy-ready="true"] { height: 15vw; }
.brand-story-panel [data-calligraphy-ready="true"] .brand-calligraphy { height: auto; aspect-ratio: 282 / 123; }
.brand-story-content { position: relative; width: min(79%, 2020px); margin: -1vw auto 0; padding: 0 0 clamp(60px, 7vw, 180px); }
.brand-story-panel { position: relative; isolation: isolate; width: 100%; padding: clamp(65px, 6.5vw, 166px) clamp(32px, 9.5vw, 245px) clamp(42px, 5.1vw, 130px); border: 1px solid #eee4d5cf; border-top: 0; border-radius: clamp(22px, 2.3vw, 52px); background: #07344b33; }
.brand-story-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, #07344bf5, #07344baf 44%, #04233de8), url('/assets/story-free-desktop.webp') right bottom / 450% auto no-repeat; }
.brand-story-story::before { background: linear-gradient(180deg, #07344bf5, #07344baa 42%, #041b34ed), url('/assets/story-free-desktop.webp') right bottom / 450% auto no-repeat; }
.brand-story-heart .brand-story-panel { background: #24140b6b; }
.brand-story-heart .brand-story-panel::before { background: linear-gradient(180deg, #37261ed4, #312318aa 45%, #130c08e8), url('/assets/story-heart-warm-desktop.webp') right bottom / 230% auto no-repeat; }
.brand-story-panel h2 { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; margin: 0; transform: translateY(-50%); gap: clamp(16px, 3.6vw, 92px); font-size: inherit; line-height: 1; }
.brand-story-panel h2::before, .brand-story-panel h2::after { content: ''; flex: 1; min-width: 16px; height: 24px; margin-top: 24px; border-top: 1px solid #eee4d5cf; }
.brand-story-panel h2::before { border-top-left-radius: 25px; }
.brand-story-panel h2::after { border-top-right-radius: 25px; }
.brand-story-panel h2 .original-artwork { flex: 0 1 26%; min-height: clamp(65px, 8vw, 190px); }
.brand-story-panel .brand-story-title-label { font-size: clamp(27px, 3.7vw, 88px); letter-spacing: .06em; }
.brand-story-lead { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.8vw, 44px); margin-bottom: clamp(27px, 2.7vw, 68px); text-align: center; }
.brand-story-lead > span { flex: 1; min-width: 16px; height: 4px; background: linear-gradient(90deg, transparent, var(--story-gold)); clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%); }
.brand-story-lead > span:last-child { transform: scaleX(-1); }
.brand-story-lead > a { max-width: 84%; font-size: clamp(18px, 1.65vw, 41px); font-weight: 500; line-height: 1.7; letter-spacing: .055em; text-wrap: balance; text-decoration: none; }
.brand-story-story .brand-story-lead > a { font-weight: 700; }
.brand-story-prose p { max-width: none; margin: 0 0 1.4em; color: #f1f4f3; font-size: clamp(16px, 1.12vw, 28px); line-height: 1.9; letter-spacing: .04em; font-weight: 400; overflow-wrap: break-word; }
.brand-story-prose p:last-child { margin-bottom: 0; }
.brand-story [data-story-link='shop'], .brand-story [data-story-link='founder'] { color: var(--story-gold); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #eed5a059; text-underline-offset: .22em; }
.brand-story-prose [data-story-link='founder'], .brand-story-prose [data-story-link='shop'] { font-weight: 600; }
.brand-story-lead [data-story-link='shop'] { text-decoration: none; }
.brand-story [data-story-link]:hover { color: #fff3cf; text-decoration-color: currentColor; }
.brand-story [data-story-link]:focus-visible { outline: 2px solid #fff3cf; outline-offset: 5px; border-radius: 3px; }
.brand-story-story { margin-top: clamp(88px, 7vw, 180px); }
.brand-story-draw { display: flex; align-items: center; justify-content: center; width: clamp(230px, 27.5vw, 650px); max-width: 100%; min-height: 58px; margin: clamp(48px, 4.7vw, 120px) auto 0; padding: .6em 1.4em; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #2e7288, #45a0b2, #2e7288); font-size: clamp(23px, 2.4vw, 56px); font-weight: 700; line-height: 1.4; letter-spacing: .2em; text-indent: .2em; text-align: center; text-decoration: none; }
.brand-story-heart .brand-story-draw { background: #070503; }
.brand-story-draw:hover { background: #357e91; }
.brand-story-heart .brand-story-draw:hover { background: #28180d; }
.brand-story[data-story-locale='en'] .brand-story-prose p { letter-spacing: .015em; }
.brand-story[data-story-locale='en'] .brand-story-draw { letter-spacing: .04em; text-indent: .04em; }
@media (min-width: 768px) and (max-width: 1100px) {
  .brand-story-content { width: 85%; }
  .brand-story-panel { padding-inline: 6vw; }
  .brand-story-panel h2 .original-artwork { flex-basis: 30%; }
}
@media (max-width: 767px) {
  .brand-story-hero { height: 140vw; min-height: 450px; max-height: 850px; }
  .brand-story-heading { top: auto; bottom: 7%; right: 0; width: 100%; padding: 0 22px; }
  .brand-story-wordmark, .brand-story-heart .brand-story-wordmark { width: 112px; margin-bottom: 18px; }
  .brand-story-heading > .original-artwork { height: 84px; min-height: 84px; }
  .brand-story:not([data-story-locale="en"]) .brand-story-heading > [data-calligraphy-ready="true"] { height: clamp(84px, 25vw, 150px); }
  .brand-story-title-label { font-size: clamp(29px, 7.5vw, 56px); }
  .brand-story-hero::after { background: linear-gradient(180deg, transparent 54%, var(--story-ground) 100%); }
  .brand-story-heart .brand-story-hero::after { background: none; }
  .brand-story-heart::before { inset: min(90vw, 560px) -40px -40px; background-size: 100% 100%, 100% 100%, 250% 190%; }
  .brand-story-content { width: calc(100% - 32px); margin-top: 24px; padding-bottom: 70px; }
  .brand-story-panel { padding: 58px 24px 38px; border-radius: 22px; }
  .brand-story-panel h2 { gap: 14px; }
  .brand-story-panel h2 .original-artwork { flex-basis: 42%; min-height: 65px; }
  .brand-story-panel .brand-story-title-label { font-size: 28px; }
  .brand-story-lead { gap: 10px; margin-bottom: 27px; }
  .brand-story-lead > a { max-width: 100%; font-size: 18px; line-height: 1.8; letter-spacing: .025em; }
  .brand-story-lead > span { flex: 0 0 16px; }
  .brand-story-prose p { font-size: 16px; line-height: 1.95; letter-spacing: .015em; margin-bottom: 1.4em; }
  .brand-story-story { margin-top: 82px; }
  .brand-story-draw { width: min(80%, 330px); margin-top: 42px; font-size: 25px; }
}
@media (max-width: 374px) {
  .brand-story-content { width: calc(100% - 24px); }
  .brand-story-panel { padding-inline: 21px; }
  .brand-story-lead > span { display: none; }
  .brand-story-panel h2 .original-artwork { flex-basis: 52%; }
}

/* Mobile story wordmarks: smaller SOUL HEART and SOUL FREE above the portrait. */
@media (max-width: 767px) {
  .brand-story-heart .brand-story-wordmark { width: 89.6px; }
  .brand-story-free .brand-story-heading { top: 0; bottom: 0; }
  .brand-story-free .brand-story-wordmark {
    position: absolute; top: 17%; left: 50%; transform: translateX(-50%); margin: 0;
  }
  .brand-story-free .brand-story-heading > .original-artwork {
    position: absolute; bottom: 7%; left: 22px; right: 22px; width: auto;
  }
}