.brand-story-page { --story-ink: #4c4345; --story-paper: #fff7e8; --story-rust: #a94f00; }
.brand-story-page main { overflow: clip; }
.brand-story-page h1, .brand-story-page h2 { font-family: var(--font-secondary); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 28px; }
.brand-story-page h2 { font-size: clamp(2.4rem, 4.3vw, 4.3rem); color: var(--story-ink); }
.brand-story-page p { margin: 0 0 20px; }
.brand-story-page figure { margin: 0; }
.brand-story-page img { display: block; max-width: 100%; height: auto; object-fit: cover; }
.brand-story-page :is(a, button, summary):focus-visible { outline: 3px solid var(--story-rust); outline-offset: 5px; }
.brand-story-page .button { min-height: 50px; gap: 24px; color: #4c4345; }
.story-container { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.story-section { padding: 112px 0; }
.brand-story-page [id] { scroll-margin-top: calc(var(--story-header-size, 84px) + 96px); }
.brand-story-page #story-title { scroll-margin-top: 140px; }
.story-two-column { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.story-chapter-copy > p:not(.story-date, .story-pull-line, .story-rain-thought) { max-width: 480px; }
.story-date, .story-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .15em; line-height: 1.7; }
.story-date { color: var(--story-rust); }
.story-small { font-size: .75rem; line-height: 1.7; }
.story-hero { position: relative; min-height: min(820px, 90svh); display: flex; flex-direction: column; justify-content: center; color: white; background: #4c4345; isolation: isolate; }
.story-hero-photo, .story-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.story-hero-photo { object-position: center 55%; }
.brand-story-page .story-hero-photo { height: 100%; }
.story-hero-shade { background: linear-gradient(90deg, rgba(31,27,24,.93), rgba(31,27,24,.75) 50%, rgba(31,27,24,.3)); }
.story-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 84px; padding-block: 85px 110px; }
#main .story-hero .story-hero-copy h1 { color: #fffdf6; font-size: clamp(4rem, 7.3vw, 7rem); line-height: .98; margin: 22px 0 30px; }
.story-hero h1 em { color: #f9a51a; font-weight: 400; }
.story-hero .hero-kicker { color: #fffdf6; font-family: var(--font-primary); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.7; margin: 0 0 18px; }
.story-hero .story-hero-intro { font-size: .9rem; color: #eee2d1; max-width: 360px; }
.story-hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.story-text-link { text-decoration: none; font-size: .85rem; border-bottom: 1px solid #a99b8a; padding-block: 8px; }
.story-hero .story-hero-scrap { padding: 15px 15px 24px; background: #fffdf6; color: #4c4345; transform: rotate(5deg); box-shadow: 0 22px 60px #0005; position: relative; max-width: 365px; justify-self: end; }
.story-hero-scrap::before, .story-tape { content: ''; position: absolute; width: 120px; height: 28px; background: #e9ce9bba; top: -12px; left: calc(50% - 60px); transform: rotate(-7deg); z-index: 2; }
.story-hero-scrap img { width: 100%; aspect-ratio: 4 / 4.5; object-position: 50% 50%; }
.story-hero-scrap figcaption { font-family: var(--font-secondary); font-style: italic; font-size: 1.65rem; margin-top: 18px; }
.story-photo-date { display: block; font-size: .55rem; font-weight: 600; letter-spacing: .11em; margin-top: 8px; }
.story-hero-bottom { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; font-size: .7rem; }
.story-hero-bottom > span:last-child { font-size: .6rem; letter-spacing: .15em; }
.story-hero-bottom > span:last-child span { margin-left: 18px; font-size: 1rem; }
.story-timeline { position: sticky; top: var(--story-header-size, 84px); background: #fffdf6f5; backdrop-filter: blur(12px); z-index: 20; border-bottom: 1px solid #63574725; }
.story-timeline-inner { display: flex; align-items: center; gap: 60px; }
.story-timeline-title { font-family: var(--font-secondary); font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.story-years { display: flex; justify-content: space-between; flex: 1; }
.story-years a { position: relative; padding: 18px 12px; color: #635747; text-decoration: none; border-bottom: 3px solid transparent; }
.story-years a[aria-current] { color: #a94f00; border-color: #a94f00; }
.story-years a > span { display: block; font-size: .9rem; font-weight: 700; }
.story-years small { display: block; font-size: .65rem; margin-top: 2px; }
.story-origin { background: #fff7e8; }
.story-pull-line { font-family: var(--font-secondary); font-size: 2.1rem; line-height: 1.25; color: #4c4345; padding-block: 12px; }
.story-origin-scraps { position: relative; padding: 10px 0 85px; }
.story-map-paper { transform: rotate(-4deg); background: #fffdf6; box-shadow: 0 15px 40px #6357471a; padding: 18px; border: 1px solid #6357471a; position: relative; }
.story-route-sketch { width: 100%; display: block; }
.story-origin-note { position: absolute; right: -8px; bottom: -10px; width: 210px; padding: 24px; background: #ffe6b8; transform: rotate(5deg); box-shadow: 0 10px 25px #63574715; }
.story-origin-note > span { font-size: .6rem; font-weight: 700; letter-spacing: .12em; }
.story-origin-note strong { display: block; font-family: var(--font-secondary); font-size: 3.2rem; font-weight: 400; line-height: 1.4; color: #4c4345; }
.story-origin-note p { font-size: .8rem; margin: 0; }
.story-rain { background: #4c4345; color: #fff7e8; }
.story-rain h2 { color: #fff7e8; }
.story-rain .story-date { color: #f9a51a; }
.story-rain .story-small { color: #e0d4c7; }
.story-rain-thought { font-family: var(--font-secondary); font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.35; border-top: 1px solid #fff3; padding-top: 25px; margin-top: 28px !important; }
.story-rain-thought em { color: #ffd28b; }
/* The full portrait stays uncropped so the delivery and towel remain visible. */
.story-rain-scene { position: relative; overflow: hidden; border-radius: 24px; background: #332f30; box-shadow: 0 24px 70px #211b1c40; }
.brand-story-page .story-rain-illustration { width: 100%; height: auto; aspect-ratio: 1122 / 1402; }
.story-rain-toggle { position: absolute; right: 16px; top: 16px; border: 1px solid #fff7e866; background: #332f30d9; color: #fff7e8; border-radius: 30px; padding: 12px 16px; font: 500 .7rem var(--font-primary); cursor: pointer; }
.story-rain-scene.is-paused .story-rain-lines i { animation-play-state: paused; }
.story-rain-lines { position: absolute; inset: 0; overflow: hidden; }
.story-rain-lines i { position: absolute; top: -25%; left: calc(var(--i) * 4.4%); height: 75px; width: 1px; background: #fff4; transform: rotate(14deg); animation: story-rainfall 1.8s linear infinite; animation-delay: calc(var(--i) * -.13s); }
@keyframes story-rainfall { to { translate: -100px 710px; } }
.story-scene-caption { position: absolute; bottom: 14px; left: 14px; right: 14px; padding: 9px 12px; border-radius: 20px; background: #332f30d9; text-align: center; font-size: .65rem; color: #fff7e8; }
.story-incorporation { background: #ffe6b8; padding: 65px 0; }
.story-incorporation .story-container { display: grid; grid-template-columns: 160px 1fr 1fr; align-items: center; gap: 30px; position: relative; padding-right: 110px; }
.story-incorporation h2 { font-size: 2rem; margin: 0; }
.story-incorporation p { font-size: .85rem; margin: 0; }
.story-date-stamp { position: absolute; right: 0; font-size: .65rem; text-align: center; width: 80px; height: 80px; border: 2px solid #a94f0077; border-radius: 50%; color: #a94f00; padding-top: 13px; transform: rotate(12deg); }
.story-date-stamp b { font-size: 1.2rem; }
.story-turning { background: #fffdf6; }
.story-section-intro { max-width: 630px; }
.story-section-intro > p:last-child { max-width: 490px; }
.story-milestones { margin-top: 64px; }
.story-milestones article { display: grid; grid-template-columns: 170px 1fr 220px; gap: 50px; padding: 38px 0; border-top: 1px solid #63574730; }
.story-milestone-year { font-family: var(--font-secondary); font-size: 2.3rem; line-height: 1.3; color: #a94f00; }
.story-milestones h3 { font-family: var(--font-primary); font-size: 1.2rem; font-weight: 600; margin: 0 0 12px; color: #4c4345; }
.story-milestones p { max-width: 500px; font-size: .95rem; }
.story-milestones p:last-child { margin-bottom: 0; }
.story-margin-note { font-family: var(--font-secondary); font-size: 1.4rem; font-style: italic; color: #8b6540; transform: rotate(-3deg); align-self: center; padding-left: 20px; border-left: 2px solid #f9a51a; }
.story-together { background: #fff7e8; }
.story-table-wrap { margin: 44px auto 60px; max-width: 920px; min-height: 240svh; --journey-beat: 0; }
.story-journey-pin { position: sticky; top: calc(var(--story-header-size, 84px) + 96px); }
.story-journey-art { position: relative; aspect-ratio: 3 / 2; width: min(100%, calc((100svh - 400px) * 1.5)); margin: 8px auto 0; overflow: hidden; border-radius: 24px; isolation: isolate; background: #fff7e8; perspective: 1200px; }
.story-journey-layer { position: absolute; inset: 0; opacity: 0; transform: translateY(12px) scale(.985); transition: opacity .45s ease, transform .6s ease; pointer-events: none; }
.story-journey-layer.is-active { opacity: 1; transform: none; z-index: 1; }
.brand-story-page .story-journey-image { width: 100%; height: 100%; object-fit: contain; transform: translate3d(var(--journey-x, 0px), var(--journey-y, 0px), 0) rotate(var(--journey-tilt, 0deg)) scale(var(--journey-scale, 1)); transform-origin: 50% 65%; }
.story-character-art { position: relative; }
.brand-story-page .story-character-art img { width: 100%; height: 100%; object-fit: contain; }
.story-character-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.story-character-canvas[data-ready=true] { opacity: 1; }
.story-atmosphere { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.story-delivery-warmth { transform: translateY(var(--journey-lift, 0px)); opacity: calc(.35 + var(--journey-beat) * .55); }
.story-heart { fill: #f9a51a; }.story-heart-small { fill: #c77d56; }
.story-door-spark { stroke: #f9a51a; stroke-width: 5; stroke-linecap: round; fill: none; }
.story-steam { transform: translateY(calc(var(--journey-lift, 0px) + var(--steam-offset))); opacity: calc(.4 - var(--journey-beat) * .2); }
.story-steam path { stroke: #ffffff; stroke-width: 11; fill: none; stroke-linecap: round; filter: drop-shadow(0 1px 3px #a9784c55); }
.story-confetti { transform: translate(calc(var(--journey-beat) * var(--sway)), var(--journey-fall, 0px)); opacity: .8; }
.story-confetti path { fill: none; stroke-width: 8; stroke-linecap: round; }
.story-journey-progress { position: absolute; bottom: 0; left: 0; z-index: 2; width: var(--journey-progress, 0%); height: 3px; background: #a94f00; }
.story-journey-toolbar { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 38px; font-size: .68rem; }
.story-journey-toolbar button { background: none; color: #a94f00; border: 0; text-decoration: underline; text-underline-offset: 4px; padding: 10px 4px; min-height: 44px; font: inherit; cursor: pointer; }
.story-illustration-note { text-align: center; font-size: .7rem; margin-top: 12px !important; color: #635747; }
.story-table-controls { display: flex; justify-content: center; gap: 8px; position: relative; }
.story-table-controls button { border: 1px solid #63574730; padding: 12px 22px; border-radius: 30px; color: #635747; background: transparent; font: 600 .8rem var(--font-primary); cursor: pointer; min-height: 48px; }
.story-table-controls button span { margin-right: 10px; font-size: .65rem; opacity: .7; }
.story-table-controls button[aria-pressed=true] { background: #4c4345; border-color: #4c4345; color: #fff7e8; }
.story-table-caption { text-align: center; margin: 20px auto 0 !important; font-family: var(--font-secondary); font-style: italic; font-size: 1.35rem; min-height: 2em; }
.story-wide-photo { position: relative; overflow: hidden; border-radius: 4px; }
.brand-story-page .story-wide-photo img { width: 100%; height: 430px; object-position: center 55%; }
.story-wide-photo::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent,#241d1bbd); }
.story-wide-photo figcaption { position: absolute; bottom: 30px; left: 40px; right: 40px; z-index: 1; color: #fffdf6; font-family: var(--font-secondary); font-size: 2rem; }
.story-wow { background: #fffdf6; }
.story-wow-heading { display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 80px; margin-bottom: 48px; }.story-wow-heading p { max-width: 420px; }
.story-memory-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; align-items: start; }
.story-memory { background: #fff; padding: 14px 14px 0; border: 1px solid #63574715; box-shadow: 0 8px 25px #6357470d; }
.story-memory:nth-child(1) { transform: rotate(-2deg); }.story-memory:nth-child(3) { transform: rotate(2deg); }
.story-memory img { width: 100%; aspect-ratio: 4/3; }
.story-memory figcaption { font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: #a94f00; padding: 18px 6px 2px; text-transform: uppercase; }
.story-memory summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; padding: 12px 6px 24px; color: #4c4345; font-family: var(--font-secondary); font-size: 1.45rem; line-height: 1.3; }
.story-memory summary::-webkit-details-marker { display: none; }.story-memory-open { font-family: var(--font-primary); font-size: 1.3rem; transition: transform .2s; }.story-memory details[open] .story-memory-open { transform: rotate(45deg); }
.story-memory details p { font-size: .85rem; padding: 0 6px 12px; }
.story-photo-note { text-align: center; margin-top: 35px !important; }
.story-next { background: #fff7e8; }.story-next .story-pull-line { margin-block: 30px; }
.story-future-album { position: relative; padding-bottom: 190px; }
.story-future-album figure { padding: 12px 12px 20px; background: #fffdf6; box-shadow: 0 15px 40px #63574720; transform: rotate(5deg); width: 88%; margin-left: auto; }
.story-future-album figure img { aspect-ratio: 4/3; width: 100%; }.story-future-album figcaption { font-family: var(--font-secondary); font-style: italic; font-size: 1.25rem; padding: 12px 8px 0; }
.story-future-album figure:last-child { position: absolute; left: 0; bottom: 0; width: 75%; transform: rotate(-7deg); }
.story-endnote { display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid #63574730; padding-block: 30px; font-size: .7rem; }
.story-endnote a { text-underline-offset: 5px; }
@media (min-width: 1500px) { .story-hero-grid { padding-block: 120px; } }
@media (max-width: 1050px) {
  .story-two-column { gap: 45px; }.story-hero-grid { gap: 40px; }.story-timeline-inner { gap: 25px; }.story-timeline-title { display: none; }
  .story-milestones article { grid-template-columns: 140px 1fr 170px; gap: 25px; }.story-margin-note { font-size: 1.2rem; }
  .story-incorporation .story-container { grid-template-columns: 130px 1fr; padding-right: 100px; }.story-incorporation p { grid-column: 2; }
  .story-origin-note { right: 0; }.story-memory-grid { gap: 18px; }
}
@media (max-width: 760px) {
  .story-table-wrap { min-height: 210svh; }
  .story-journey-pin { top: calc(var(--story-header-size, 70px) + 68px); }
  .story-journey-toolbar { flex-wrap: wrap; gap: 0 12px; min-height: 42px; }
  .story-hero-shade { background: linear-gradient(90deg, rgba(31,27,24,.86), rgba(31,27,24,.72)); }
  .story-container { width: calc(100% - 32px); }.story-section { padding-block: 70px; }.story-two-column { grid-template-columns: 1fr; gap: 40px; }
  .brand-story-page h2 { font-size: clamp(2.25rem, 7.2vw, 3.3rem); margin-bottom: 22px; }.story-chapter-copy > p:not(.story-date,.story-pull-line,.story-rain-thought) { max-width: 590px; }
  .story-hero { min-height: auto; }.story-hero-grid { grid-template-columns: 1fr .55fr; padding-block: 60px 90px; gap: 20px; }#main .story-hero .story-hero-copy h1 { font-size: clamp(3.5rem, 9vw, 5rem); }.story-hero .story-hero-scrap { padding: 8px 8px 16px; }.story-hero-scrap figcaption { font-size: 1.1rem; }.story-photo-date { font-size: .45rem; }.story-hero-scrap img { aspect-ratio: 3 / 5; }.story-hero-actions { flex-wrap: wrap; gap: 18px; }
  .story-years { min-width: 0; }.story-years a { padding: 14px 6px; text-align: center; }.story-years small { display: none; }.story-years a > span { font-size: .75rem; }.brand-story-page [id] { scroll-margin-top: calc(var(--story-header-size, 84px) + 70px); }
  .story-origin-scraps { max-width: 500px; width: calc(100% - 20px); margin: 0 auto; padding-bottom: 100px; }.story-origin-note { bottom: 0; width: 185px; padding: 20px; }
  .story-rain-scene { grid-row: 2; max-width: 480px; width: 100%; margin: auto; }.story-rain-thought { font-size: 1.8rem; }
  .story-incorporation .story-container { display: block; padding-right: 85px; }.story-incorporation h2 { font-size: 1.9rem; margin-top: 16px; }.story-incorporation p { margin-top: 18px; }.story-date-stamp { top: 10px; }
  .story-milestones { margin-top: 40px; }.story-milestones article { grid-template-columns: 100px 1fr; gap: 18px; padding: 30px 0; }.story-milestone-year { font-size: 1.7rem; }.story-margin-note { grid-column: 2; font-size: 1.15rem; }.story-milestones h3 { font-size: 1.05rem; }.story-milestones p { font-size: .9rem; }
  .story-table-wrap { margin-top: 30px; }.story-journey-art { border-radius: 16px; margin-top: 18px; }.story-table-controls { gap: 5px; }.story-table-controls button { padding: 10px 14px; font-size: .7rem; }.story-table-controls button span { display: none; }.story-table-caption { font-size: 1.15rem; max-width: 320px; min-height: 3.5em; }
  .brand-story-page .story-wide-photo img { height: 310px; }.story-wide-photo figcaption { font-size: 1.55rem; bottom: 22px; left: 22px; right: 22px; }
  .story-wow-heading { display: block; margin-bottom: 35px; }.story-memory-grid { grid-template-columns: 1fr; gap: 28px; max-width: 440px; margin: auto; }.story-memory:nth-child(n) { transform: none; }.story-memory summary { font-size: 1.5rem; }.story-photo-note { text-align: left; }
  .story-future-album { max-width: 470px; width: calc(100% - 24px); margin: 10px auto 0; }.story-endnote { flex-direction: column; gap: 14px; }
}
@media (max-width: 480px) {
  .story-hero-grid { display: block; padding-block: 48px 80px; }#main .story-hero .story-hero-copy h1 { font-size: clamp(3.7rem, 15vw, 4.7rem); }.story-hero .story-hero-scrap { width: 170px; margin: 36px 12px 0 auto; transform: rotate(7deg); }.story-hero-scrap img { aspect-ratio: 4/3; }.story-hero-scrap figcaption { font-size: 1.05rem; margin-top: 8px; }.story-photo-date { display: none; }.story-hero-scrap::before { height: 20px; width: 70px; left: calc(50% - 35px); top: -8px; }.story-hero-bottom { font-size: .6rem; }.story-hero-bottom > span:last-child { font-size: .5rem; }.story-hero-bottom > span:last-child span { margin-left: 4px; }
  .story-timeline .story-container { width: calc(100% - 16px); }.story-years a { padding-inline: 8px; }.story-years a > span { font-size: .7rem; }
  .story-milestones article { grid-template-columns: 1fr; gap: 14px; }.story-margin-note { grid-column: 1; }.story-milestone-year { font-size: 2rem; }
  .story-table-controls button { padding: 10px 12px; font-size: .65rem; }.story-origin-note strong { font-size: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story-table-wrap { min-height: 0; }
  .story-journey-pin { position: static; }
  .story-journey-art { width: 100%; }
  .brand-story-page .story-journey-image { transform: none; }
  .story-atmosphere, .story-journey-progress, .story-journey-toolbar, .story-character-canvas { display: none; }
  html:has(.brand-story-page) { scroll-behavior: auto; }
  .brand-story-page *, .brand-story-page *::before, .brand-story-page *::after { animation: none !important; transition: none !important; }
  .story-rain-lines i { top: calc(var(--i) * 4%); }
  .story-rain-toggle { display: none; }
}

/* Short landscape windows keep normal flow instead of pinning oversized art. */
@media (max-height: 600px) {
  .story-table-wrap { min-height: 0; }
  .story-journey-pin { position: static; }
  .story-journey-art { width: 100%; }
}

.brand-story-page [hidden] { display: none !important; }
/* CMS preview exposes every scene for selecting and editing its content. */
html[data-story-editor] .story-table-wrap { min-height: 0; }
html[data-story-editor] .story-journey-pin { position: static; }
html[data-story-editor] .story-journey-art { width: 100%; aspect-ratio: auto; }
html[data-story-editor] .story-journey-layer { position: relative; opacity: 1; transform: none; pointer-events: auto; }
html[data-story-editor] .story-character-art { aspect-ratio: 3 / 2; }
html[data-story-editor] .story-table-caption[hidden] { display: block !important; }
html[data-story-editor] .story-atmosphere,
html[data-story-editor] .story-journey-toolbar,
html[data-story-editor] .story-journey-progress { display: none; }