/* This page keeps its playful details local to About. */
.about-page {background:#fff}
.about-opening{padding:30px 6% 88px;background:#d3bafd;overflow:hidden}
.about-opening .back-link{margin-bottom:40px}
.about-topline{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #17151b65;padding-top:20px}
.about-composition{display:grid;grid-template-columns:1.35fr 1fr;gap:7%;align-items:center;padding-top:62px;max-width:1500px;margin:auto}
.about-intro h1{position:static;inset:auto;transform:none;pointer-events:auto;font-size:clamp(64px,7.6vw,120px);line-height:.98;letter-spacing:-.065em;margin:0 0 35px;font-weight:400}
.about-intro h1 em{display:block;font-size:.72em;line-height:1.12;letter-spacing:-.065em;margin-top:14px;white-space:nowrap}
.playful-word{position:relative}
.playful-word>span{display:inline-block;font:normal .74em Arial,sans-serif;color:#ff693a;vertical-align:top;margin:0 .02em 0 .08em;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.playful-word:hover>span{transform:rotate(120deg)}
.about-intro>p{font-size:clamp(17px,1.6vw,22px);line-height:1.55;max-width:450px;margin:0 0 36px}
.about-scroll{font-size:13px;display:inline-flex;align-items:center;gap:28px;border-bottom:1px solid;padding-bottom:12px}
.about-scroll>span{font-size:23px;transition:transform .3s}.about-scroll:hover>span{transform:translateY(5px)}
.portrait-composition{position:relative;padding:20px 25px 65px 0;margin-top:35px}
.portrait-mat{padding:20px 20px 15px;background:#ff693a;transform:rotate(5deg);box-shadow:8px 10px 0 #17151b;transition:transform .5s,background .5s}
.portrait-composition:hover .portrait-mat{transform:rotate(2deg)}
.portrait-mat[data-portrait="back"]{background:#f5c9df;transform:rotate(-4deg)}
.portrait-photos{aspect-ratio:1/1.16;overflow:hidden;display:grid;place-items:center;border:1px solid #17151b22;background:#f9c0a9}
.portrait-photos img{width:100%;height:100%;min-height:0;object-fit:contain;display:block}
.portrait-photos img[hidden]{display:none}
.portrait-photos .portrait-back{object-fit:cover;object-position:center 30%}
.portrait-caption{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.8px;padding-top:18px}
.portrait-note{position:absolute;right:-4px;top:-44px;font:italic clamp(44px,5vw,76px)/1 Editorial,Georgia,serif;transform:rotate(10deg);z-index:1}
.portrait-sticker{position:absolute;left:-52px;bottom:90px;background:#e2f688;border:1px solid #17151b;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;line-height:1.12;font-size:17px;transform:rotate(-12deg);box-shadow:3px 4px 0 #17151b}
.portrait-sticker em{font-size:23px}
.portrait-flip{position:absolute;right:18px;bottom:0;display:flex;gap:22px;align-items:center;font-size:13px;padding:12px 0;border-bottom:1px solid #17151b}
.portrait-flip>span{font-size:25px;transition:transform .4s}.portrait-flip:hover>span{transform:rotate(90deg)}
.about-person{padding:100px 6% 110px;display:grid;grid-template-columns:1fr 1.25fr;gap:10%;max-width:1600px;margin:auto}
.about-side h2,.ingredients-heading h2{font-size:clamp(40px,4.6vw,70px);line-height:1.03;font-weight:400;letter-spacing:-.05em;margin:35px 0}
.about-side h2 em,.ingredients-heading h2 em{font-size:1.06em}
.detail-doodle{display:block;color:#ff693a;font-size:145px;line-height:.8;margin-top:30px;transform:rotate(-12deg);width:130px}
.about-story p{font-size:18px;line-height:1.7;margin:0 0 25px}
.about-story .story-lead{font-size:clamp(30px,3.1vw,46px);line-height:1.15;letter-spacing:-.04em;margin-bottom:30px;max-width:630px}
.about-story .story-lead em{font-size:1.15em}
.about-resume{display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;border-bottom:1px solid;padding:28px 0 17px;font-size:13px}
.about-resume>span{font-size:16px}
.about-ingredients{background:#18161b;color:#fff;padding:85px 6% 100px;display:grid;grid-template-columns:1fr 1.25fr;gap:10%}
.ingredients-heading h2{max-width:460px}
.ingredient-list>a{display:grid;grid-template-columns:20px 1fr 40px;gap:24px;border-top:1px solid #ffffff70;padding:30px 0;transition:color .2s,padding .2s}
.ingredient-list>a:last-child{border-bottom:1px solid #ffffff70}
.ingredient-list>a:nth-child(1):hover{color:#f5c9df}.ingredient-list>a:nth-child(2):hover{color:#bba8f9}.ingredient-list>a:nth-child(3):hover{color:#e2f688}
.ingredient-list>a:hover{padding-left:8px}
.ingredient-num{font-size:11px;padding-top:7px}
.ingredient-list h3{font-size:clamp(26px,2.5vw,38px);font-weight:400;letter-spacing:-.04em;line-height:1.1;margin:0 0 14px}
.ingredient-list p{font-size:15px;line-height:1.6;margin:0;max-width:370px;color:#dedbe1}
.ingredient-arrow{font-size:36px;line-height:1}
.about-footnote{background:#f5c9df;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:30px;padding:50px 6%}
.about-footnote p{font-size:22px;line-height:1.4;margin:0}.about-footnote p span{display:block;font-size:13px;margin-top:8px;line-height:1.6}
.about-footnote>a{justify-self:end;border-bottom:1px solid;font-size:14px;padding:12px 0;display:flex;gap:25px;align-items:center}.about-footnote>a span{font-size:23px}
@media(min-width:1700px){.about-opening{padding-left:max(6%,calc((100vw - 1500px)/2));padding-right:max(6%,calc((100vw - 1500px)/2))}}
@media(max-width:1050px){.about-composition{gap:6%;grid-template-columns:1.2fr 1fr}.portrait-sticker{width:120px;height:120px;left:-30px;font-size:14px}.portrait-sticker em{font-size:20px}.about-person,.about-ingredients{gap:7%;grid-template-columns:1fr 1.3fr}.about-footnote{grid-template-columns:1fr 1.6fr}.about-footnote>a{grid-column:2;justify-self:start}}
@media(max-width:760px){.about-opening{padding:25px 6% 60px}.about-opening .back-link{margin-bottom:32px}.about-topline .section-label:last-child{display:none}.about-composition{grid-template-columns:1fr;gap:25px;padding-top:40px}.about-intro h1{font-size:clamp(62px,14vw,103px);margin-bottom:28px}.about-intro h1 em{font-size:.71em;white-space:normal}.about-intro>p{font-size:17px;max-width:420px}.about-scroll{font-size:12px;gap:20px}.portrait-composition{width:85%;max-width:360px;justify-self:center;margin-top:35px;padding:15px 10px 65px}.portrait-note{right:-10px;top:-32px;font-size:55px}.portrait-mat{padding:16px 16px 13px}.portrait-sticker{left:-20px;bottom:85px;width:120px;height:120px}.portrait-flip{right:0}.portrait-caption{font-size:9px;letter-spacing:.5px}.about-person{display:block;padding:60px 6% 65px}.about-side h2{font-size:48px;margin:28px 0 40px}.detail-doodle{display:none}.about-story p{font-size:17px}.about-story .story-lead{font-size:32px}.about-resume{font-size:12px}.about-resume>span{font-size:14px}.about-ingredients{display:block;padding:55px 6% 65px}.ingredients-heading h2{font-size:44px;margin:25px 0 40px}.ingredient-list>a{grid-template-columns:20px 1fr 25px;gap:15px;padding:26px 0}.ingredient-list h3{font-size:27px}.ingredient-list p{font-size:14px}.ingredient-arrow{font-size:29px}.about-footnote{display:block;padding:40px 6%}.about-footnote p{margin:24px 0}.about-footnote>a{display:inline-flex}.about-page footer{padding-top:55px}}
@media(prefers-reduced-motion:reduce){.about-page *{transition:none!important;scroll-behavior:auto!important}}