/* Jollybee's sampled logo palette. No paper-coloured UI surfaces. */
:root{--forest:#2a442a;--green:#2a442a;--honey:#f2ba59;--sage:#8fa17e;--cream:var(--honey);--ink:var(--honey);--muted:var(--honey);--line:#8fa17e66}
body{background:var(--forest);color:var(--honey);line-height:1.75}
h1{font-size:clamp(3.8rem,6.6vw,6.5rem)}
h2{font-size:clamp(2.9rem,4.6vw,4.8rem)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--honey)}
.skip{color:var(--forest)}
header{height:112px;padding:0 5.5%;gap:35px;background:var(--forest);border-bottom:1px solid var(--line)}
.home header{position:absolute;inset:0 0 auto;background:linear-gradient(180deg,#2a442ae6,#2a442a80)}
.brand{flex-shrink:0}
.brand-logo{width:190px;height:auto;max-height:60px;mix-blend-mode:normal;display:block}
header nav{gap:34px}
header nav a{padding:12px 0}
header nav a:after{background:var(--honey);bottom:5px}
.header-link{font-size:.8rem;letter-spacing:.015em}
.header-link span{font-size:25px;vertical-align:middle}
.menu-toggle span{background:var(--honey)}
.hero{height:100svh;min-height:780px;max-height:1200px;background:var(--forest);isolation:isolate}
.hero-slide{object-position:var(--focus,68%) center;transition:opacity .85s ease;animation:premium-drift 8s linear infinite alternate}
.hero-shade{background:linear-gradient(90deg,#2a442aeb 0%,#2a442aba 27%,#2a442a33 56%,#2a442a00 80%),linear-gradient(0deg,#2a442abf,transparent 32%)}
.hero-copy{padding:max(180px,21vh) 6% 140px;max-width:810px}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.19em}
.hero .eyebrow{display:flex;align-items:center;gap:14px}
.hero .eyebrow:before{content:'';height:1px;width:32px;background:var(--honey);flex-shrink:0}
.hero h1{margin:25px 0 29px}
.hero h1 em,.hero-copy>p:not(.eyebrow){color:var(--honey)}
.hero-copy>p:not(.eyebrow){font-size:1rem;line-height:1.7}
.button{min-height:54px;padding:15px 30px;border-radius:0;font-size:.87rem;font-weight:500;letter-spacing:.01em}
.honey{background:var(--honey);color:var(--forest)}
.honey:hover{background:var(--sage)}
.outline{border-color:var(--honey)}
.outline:hover{background:var(--honey);color:var(--forest)}
.hero .button{margin-top:32px}
.hero-bottom{bottom:35px;gap:22px;font-size:.78rem}
.scroll-label span{font-size:25px}
.slide-controls{gap:4px}
.slide-counter{font-size:.75rem;min-width:52px;letter-spacing:.08em;margin-right:14px;font-variant-numeric:tabular-nums}
.slide-dot{width:23px;height:40px}
.slide-dot:after{inset:18px 2px;border:0;border-radius:0;background:var(--sage);transition:background .25s}
.slide-dot.active:after{background:var(--honey)}
.motion-toggle{margin-left:18px;width:40px;height:40px;border:1px solid var(--sage);background:var(--forest);color:var(--honey);font-size:.75rem}
@keyframes premium-drift{from{transform:scale(1.015) translateX(.5%)}to{transform:scale(1.13) translateX(-1.5%)}}
.promise-strip{background:var(--honey);color:var(--forest);padding:25px 6%;font-size:.8rem;letter-spacing:.035em}
.flower{color:var(--forest)}
.section{padding:120px 6%}
.section-heading{gap:50px;margin-bottom:54px}
.section-heading .eyebrow{margin-bottom:22px}
.section-heading p:not(.eyebrow){margin-bottom:22px}
.text-link{font-size:.875rem}
.collection-grid{gap:30px}
.home #collections .collection-grid{grid-template-columns:1.15fr 1fr 1fr;align-items:start}
.home #collections .collection-card:nth-child(2){margin-top:55px}
.home #collections .collection-card:nth-child(3){margin-top:110px}
.card-image{background:var(--sage)}
.card-image>span{background:var(--forest);color:var(--honey);padding:6px 13px;border-radius:0;font-size:.7rem;letter-spacing:.13em}
.card-copy{padding:26px 0 14px}
.card-copy h3{font-size:1.85rem}
.card-copy p{font-size:.9rem;margin:10px 0 18px}
.mini-collections{gap:40px;padding-top:38px;margin-top:45px}
.mini-collections>a{gap:28px}
.mini-collections h3{font-size:1.65rem;margin:8px 0 15px}
.story-banner{grid-template-columns:1.05fr 1fr;background:var(--forest);border-block:1px solid var(--line)}
.story-image img{min-height:690px}
.story-copy{padding:95px 13%}
.story-copy h2{margin:28px 0}
.story-copy>p:not(.eyebrow){font-size:1rem}
.story-copy .button{margin-top:35px}
.planet-section h2{margin:25px 0}
.planet-section p:not(.eyebrow){font-size:1rem;margin-bottom:27px}
.planet-section figure img{width:100%;aspect-ratio:1.05;border-radius:48% 48% 0 0}
.planet-section figcaption{font-size:.78rem;margin-top:20px}
.journal-preview{padding-top:80px}
.journal-grid{gap:0;border-block:1px solid var(--sage)}
.journal-grid>a,.journal-grid>a:nth-child(2),.journal-grid>a:nth-child(3){background:transparent;padding:40px 32px;min-height:340px;border-right:1px solid var(--line)}
.journal-grid>a:first-child{padding-left:0}
.journal-grid>a:last-child{border-right:0}
.journal-grid .eyebrow{margin:55px 0 19px}
.journal-grid h3{font-size:2.15rem;margin-bottom:30px}
.article-number{top:25px;right:30px;font-size:2.7rem;color:var(--sage)}
.closing{position:relative;overflow:hidden;background:var(--honey);color:var(--forest);padding:100px 25px}
.closing:before{content:'';position:absolute;width:280px;height:280px;left:-65px;bottom:-70px;background:url('/assets/bee-icon.svg') center/contain no-repeat;opacity:.15;pointer-events:none}
.closing h2{font-size:clamp(3.3rem,5.7vw,5.8rem);margin:28px 0 35px}
.closing em{color:var(--forest)}
.closing .button{background:var(--forest);color:var(--honey)}
.closing a:focus-visible{outline-color:var(--forest)}
footer{background:var(--forest);padding:80px 6% 30px}
.footer-top{gap:35px}
.footer-top .brand{margin:10px 0 25px}
.footer-top .eyebrow{margin:18px 0 20px}
.footer-top a:not(.brand){font-size:.9rem}
.footer-bottom{padding-top:28px;margin-top:50px;font-size:.8rem}
.image-disclosure{font-size:.75rem}
.page-intro{padding:85px 6% 60px}
.page-intro .eyebrow{color:var(--honey)}
.page-intro h1{margin-top:25px}
.page-intro p:not(.eyebrow){max-width:630px;margin-top:25px}
.breadcrumbs{font-size:.85rem;margin-bottom:27px}
.detail-hero{min-height:650px;border-block:1px solid var(--line)}
.detail-copy{padding:65px 12%}
.detail-copy h1{margin:20px 0 27px}
.item-list li{padding:14px 0}
.two-column h2{margin:20px 0 27px}
.note{background:transparent;border:1px solid var(--sage);padding:32px;font-size:.95rem}
.note h3{font-size:1rem;line-height:1.4;margin-bottom:14px}
.note p+p,.note .text-link{margin-top:18px}
.soft{background:var(--forest);border-block:1px solid var(--line)}
.soft>h2{margin-top:25px}
.values-grid{gap:42px;margin-top:60px}
.values-grid>div{border-color:var(--sage);padding-top:28px}
.values-grid h3{margin:22px 0}
.values-grid p{font-size:.95rem}
.full-image{max-height:700px}
.article{max-width:900px;padding:55px 6% 100px}
.article h2{font-size:2.25rem;margin:45px 0 22px}
.article p{margin-bottom:22px}
.source{font-size:.875rem}
.article-image{max-width:1200px}
.article-image img{max-height:590px}
.filter{padding:11px 24px;border-color:var(--sage);border-radius:0;color:var(--honey);font-size:.875rem}
.filter[aria-pressed=true]{background:var(--honey);border-color:var(--honey);color:var(--forest)}
.filter-status,.catalog-note{font-size:.875rem!important}
.all-collections{padding-top:30px}
.all-collections .collection-grid{row-gap:48px}
.related{padding-top:35px}
.faq-list{max-width:950px;padding-top:20px}
.faq-list details{padding:30px 0}
.moment{margin-bottom:85px}
.moment h2{font-size:3.1rem;margin:22px 0}
.label{background:transparent;border:1px solid var(--sage);font-size:.75rem;letter-spacing:.1em}
.editorial-label p{font-size:.875rem}
@media(min-width:1600px){.hero-copy{padding-top:23vh}}
@media(max-width:1100px){
  header nav{gap:22px}.section{padding:90px 5%}.story-copy{padding:65px 10%}.story-image img{min-height:630px}
  .journal-grid>a{padding:32px 23px}.journal-grid h3{font-size:1.85rem}.mini-collections>a{grid-template-columns:110px 1fr;gap:23px}
  .footer-top{gap:25px}.footer-top .brand-logo{width:160px}
}
@media(max-width:760px){
  header{height:86px;padding:0 6%}.brand-logo{width:159px;max-height:47px}
  #mobile-nav:not([hidden]){top:86px;background:var(--forest);border-bottom:1px solid var(--sage);box-shadow:none}
  .hero{height:100svh;min-height:800px;max-height:1000px}.hero-copy{padding:max(330px,42vh) 7% 120px;max-width:600px}
  .hero h1{font-size:clamp(2.8rem,10vw,3.8rem);line-height:1.02;margin:0 0 20px}
  .hero-slide,.hero-slide:first-child,.hero-slide:nth-child(2),.hero-slide:nth-child(3){object-position:var(--mobile-focus,70%) center}
  .hero-shade{background:linear-gradient(90deg,#2a442ae6,#2a442a30),linear-gradient(0deg,#2a442a99,transparent 60%)}
  .hero-copy .eyebrow{display:none}.hero .eyebrow:before{width:20px}.hero .button{margin-top:20px}
  .hero-copy>p:not(.eyebrow){font-size:.94rem}.hero-bottom{bottom:25px;gap:12px;font-size:.75rem}
  .hero-bottom .scroll-label{font-size:.7rem}.slide-controls{gap:2px}.slide-dot{width:22px}.slide-counter{margin-right:6px}.motion-toggle{margin-left:8px}
  .promise-strip{gap:15px;padding:20px 14px;font-size:.7rem}.section{padding:70px 6%}
  .section-heading{gap:25px;margin-bottom:36px}h2{font-size:2.9rem}
  .collection-grid,.home #collections .collection-grid{grid-template-columns:1fr;gap:30px}.home #collections .collection-card:nth-child(n){margin:0}
  .card-image{aspect-ratio:1.08}.card-copy{padding-top:21px}.mini-collections{gap:30px;margin-top:28px}.mini-collections>a{grid-template-columns:100px 1fr;gap:22px}.mini-collections h3{font-size:1.55rem}
  .story-banner{grid-template-columns:1fr}.story-image img{min-height:0;aspect-ratio:1.1}.story-copy{padding:60px 7%}
  .planet-section{gap:40px}.planet-section figure{padding:0 4%}
  .journal-grid>a,.journal-grid>a:nth-child(n){padding:32px 0;min-height:270px;border:0;border-bottom:1px solid var(--line)}
  .journal-grid .eyebrow{margin-top:30px}.journal-grid h3{font-size:2.15rem}
  .closing{padding:75px 22px}.closing:before{width:170px;height:170px}footer{padding-top:55px}
  .footer-top{gap:30px 22px}.footer-bottom{gap:16px}.page-intro{padding:60px 6% 40px}.page-intro h1{font-size:clamp(2.9rem,10vw,4rem)}
  .detail-copy{padding:38px 7% 55px}.article{padding:35px 7% 75px}.article h2{font-size:2rem}
  .filters{gap:9px}.filter{padding:9px 18px}.moment{gap:30px;margin-bottom:65px}.moment h2{font-size:2.8rem}summary{font-size:1.5rem}
  .all-collections{padding-top:30px}
}
@media(max-width:360px){.hero-copy{padding-left:6%;padding-right:6%}.hero h1{font-size:2.75rem}.slide-dot{width:18px}.slide-counter{min-width:42px}.footer-top{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}