/* Let the type, photography, and brand illustrations carry the page. */
.reading-progress,
.section-index,
.small-dot,
.button-icon,
.story-arrow,
.story-read,
.brand-tab-moment,
.page-scroll-label,
.shop-hero-caption,
.shop-product-number,
.experience-menu-bottom,
.menu-preview > figcaption,
#perjalanan #journey-panel .journey-photo-caption,
#perjalanan #journey-panel .journey-scene-aside,
#perjalanan #journey-panel .journey-scene-closing,
#brand .brand-tab-moment { display:none; }

.header { border:0; }
.header .main-nav a::after,
.brand-filters .brand-filter::after,
#brand .brand-tab::after,
#perjalanan #journey-step-scroll .journey-tab::after,
#rasa .rasa-story-kicker::before { display:none; }
.header .main-nav a[aria-current="page"] { color:#a71f2a;font-weight:700; }
.header .main-nav a:hover { color:#a71f2a; }

/* One TINTIN treatment for calls to action, including the journey chapters. */
.button,
.text-link,
.solid-action,
.hero .scene-copy .scene-button,
#brand .brand-identity .brand-cta,
#rasa .rasa-story-link,
#perjalanan .journey-story-slide .journey-scene-discover,
#tentang .heritage-bottom > .button,
.hub-hero-actions > a,
.hub-hero-actions .solid-action,
.closing-bottom > .button-red,
.page-closing .solid-action {
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:fit-content;max-width:100%;min-height:48px;padding:14px 24px;
  border:0;border-radius:999px;background:var(--tintin-accent,#e31e26);color:#fff;
  font-size:14px;font-weight:700;line-height:1.45;text-align:center;
  transition:background-color .2s ease;
}
.button:hover,
.text-link:hover,
.solid-action:not(:disabled):hover,
.hero .scene-copy .scene-button:hover,
#brand .brand-identity .brand-cta:hover,
#rasa .rasa-story-link:hover,
#perjalanan .journey-story-slide .journey-scene-discover:hover,
#tentang .heritage-bottom > .button:hover,
.hub-hero-actions > a:hover,
.hub-hero-actions .solid-action:hover,
.closing-bottom > .button-red:hover,
.page-closing .solid-action:hover { background:#c51b22;color:#fff;opacity:1; }
.button:focus-visible,
.text-link:focus-visible,
.solid-action:focus-visible,
#rasa .rasa-story-link:focus-visible,
.hub-hero-actions > a:focus-visible {
  outline:2px solid var(--tintin-accent,#e31e26);outline-offset:4px;
}
.footer-contact { border:0;gap:0; }

/* The five chapter names already provide the opening's navigation. */
.hero-sequence-controls { gap:0;right:auto; }
.hero-chapters { display:flex;gap:clamp(22px,3.5vw,64px); }
.hero-chapter { min-height:44px;padding:10px 0;opacity:.5; }
.hero-chapter > span { font-size:12px; }
.hero-chapter.active { opacity:1; }
.hero-chapter > i, .hero-chapter > small { display:none; }
.gate-center p { margin-bottom:0; }
.marquee-heading { justify-content:flex-end;margin-bottom:25px; }
.marquee-toggle { border:0;padding:8px 0;min-width:68px; }
.marquee-toggle:hover { background:none;color:#e31e26; }
.taste-manifesto.taste-marquee { padding-bottom:62px; }
#rasa .rasa-intro-description { margin-bottom:28px; }
#perjalanan .journey-layout-garena .journey-scene-body { border-left:0;padding-left:0; }
#perjalanan .journey-brand-logo { display:block;width:64px;height:28px;max-width:100%;flex:none; }
#perjalanan .journey-tab .journey-brand-logo { margin-top:9px; }
#perjalanan .journey-scene-brand .journey-brand-logo { width:88px;height:36px; }

/* Keep text controls for the article and moment sequences. */
.gallery-toolbar { justify-content:flex-end; }
.gallery-toolbar > div { gap:20px; }
.gallery-toolbar .circle-button,
#perjalanan .journey-control .circle-button {
  width:auto;height:auto;min-height:44px;min-width:0;padding:6px 0;
  border:0;border-radius:0;background:none;font-size:12px;font-weight:700;
}
.gallery-toolbar .circle-button:hover,
#perjalanan .journey-control .circle-button:hover { background:none;opacity:.65; }
#perjalanan .journey-control > div { gap:22px; }
.stories-section .story-gallery > .story-card { grid-template-rows:minmax(0,1fr) auto auto; }
.story-card .story-photo { border:0; }
.journey-note { border:0;padding-top:0;justify-content:flex-end; }
.journey-note .hunt-stamp { border:0;letter-spacing:0;font-size:12px; }

/* Product names and pack sizes are the useful details here. */
#brand .brand-tabs, #brand .brand-tab + .brand-tab { border:0; }
#brand .brand-tab { min-height:104px;padding-block:16px; }
#brand .brand-tab.active { background:#eee5ce;border-radius:8px; }
#brand .brand-tab-name { margin-bottom:0; }
#brand .brand-art::before { border:0; }
#brand .product-view-controls > button { border:0;min-height:44px; }
#brand .brands-bottom { justify-content:center; }

/* Companion pages: spacing and color replace ornamental rules. */
.brand-filters,
.catalog-meta,
.shop-product-link,
.shop-step,
.hub-quickbar,
.hub-how-step,
.mission-copy,
.discovery-strip,
.club-referral-panel .line-form,
.product-detail-pack,
.market-options a,
.market-options a:last-child,
.program-row,
.program-row:last-child,
.points-pill,
.preview-note { border:0; }
.brand-filters { padding:0;gap:12px 18px; }
.brand-filter { border-radius:999px;padding:10px 16px;min-height:44px; }
.brand-filter[aria-pressed="true"] { background:#eee5ce;color:#a71f2a; }
.catalog-meta { letter-spacing:0; }
.shop-product-link { padding-top:0;justify-content:flex-start;color:#a71f2a; }
.shop-step { padding-top:0; }
.hub-how-step { padding-top:0; }
.hub-how-step > span { background:none;color:#a71f2a;border-radius:0; }
.mission-copy { padding-bottom:0; }
.mission-status:empty { display:none; }
.discovery-strip .hunt-stamp {
  width:auto;height:auto;min-height:48px;padding:14px 20px;
  border:0;border-radius:6px;background:#eee5ce;transform:none;
  font-size:12px;letter-spacing:0;
}
.discovery-strip .hunt-stamp[data-found="true"] { background:#e4eada;color:#265c43; }
.sahabat-hub-hero::after, .hub-hero-orbit { display:none; }
.market-options { display:flex;flex-wrap:wrap;gap:12px; }
.market-options a, .market-options a:last-child {
  display:inline-flex;min-height:44px;padding:12px 18px;background:#eee5ce;border-radius:6px;
}

/* A quiet footer and menu, with the information needed to find one's way. */
.footer-top, .footer-bottom,
.experience-menu-top, .experience-menu-bottom { border:0; }
.footer-top { display:flex;justify-content:space-between;align-items:center;gap:32px;padding-bottom:40px; }
.footer-contact { margin:0; }
.footer-bottom { padding-top:0; }
.experience-menu-body > nav > a { gap:0; }
.experience-menu-body > nav > a > small,
.experience-menu-body > nav > a > span { display:none; }
.menu-preview { border:0;background:none; }

@media (max-width:560px) {
  .button, .text-link, .solid-action,
  .hero .scene-copy .scene-button, #brand .brand-identity .brand-cta,
  #rasa .rasa-story-link, #perjalanan .journey-story-slide .journey-scene-discover,
  #tentang .heritage-bottom > .button, .hub-hero-actions > a, .hub-hero-actions .solid-action,
  .closing-bottom > .button-red, .page-closing .solid-action {
    min-height:44px;padding:12px 20px;font-size:12px;
  }
  .hero-sequence-controls { right:var(--gutter);bottom:18px; }
  .hero-chapters { display:flex;justify-content:space-between;gap:12px; }
  .hero-chapter > span { font-size:10px; }
  .taste-manifesto.taste-marquee { padding-bottom:38px; }
  .marquee-heading { margin-bottom:24px; }
  .gallery-toolbar > div { gap:17px; }
  .gallery-toolbar #gallery-count { margin-right:0; }
  .gallery-toolbar .circle-button, #perjalanan .journey-control .circle-button { font-size:11px; }
  #brand .brand-tab { min-height:100px; }
  .footer-top { align-items:flex-start;flex-direction:column;gap:28px;padding-bottom:32px; }
  .footer-contact { font-size:24px; }
  .brand-filters { gap:8px; }
  .brand-filter { padding:10px 13px;font-size:13px; }
}

/* Banner and chapter refinements. */
.hero .scene-copy .scene-button { background:#fff9e8;color:#e31e26; }
.hero .scene-copy .scene-button:hover { background:#f1e7cd;color:#c51b22; }
.hero .scene-copy > .eyebrow { margin-bottom:30px; }
#perjalanan .journey-tab .journey-brand-logo { display:none; }
#perjalanan .journey-tab small { display:block;font-family:var(--sans);font-size:11px;letter-spacing:.06em;margin-top:9px; }
#perjalanan .journey-secondary-logo { display:flex;align-items:center;justify-content:flex-start; }
#perjalanan .journey-secondary-logo .journey-brand-logo { width:160px;height:105px;max-width:100%; }
#perjalanan #journey-panel .journey-scene-closing { display:block;color:#265c43; }
#perjalanan .journey-control { gap:24px; }
#perjalanan .journey-control > div { gap:24px; }
@media (min-width:901px) and (min-height:701px) {
  #perjalanan .journey-opening > .journey-scene-brand { position:absolute;z-index:6;left:var(--gutter);top:var(--intro-photo-top,170px);margin:0;opacity:var(--intro-copy-opacity,1); }
  #perjalanan .journey-opening > .journey-scene-brand .journey-brand-logo { width:112px;height:52px; }
  #perjalanan .is-step-pinned .journey-layout-garena .journey-headline-group { top:auto;bottom:var(--media-bottom,315px); }
  #perjalanan .journey-layout-garena .journey-scene-copy > .journey-scene-brand { top:var(--media-top,170px); }
  #perjalanan .journey-layout-garena .journey-scene-brand .journey-brand-logo { width:140px;height:64px; }
}
@media (max-width:900px), (max-height:700px) {
  #perjalanan .journey-opening > .journey-scene-brand { grid-column:1;grid-row:2;margin:36px var(--gutter) 0; }
  #perjalanan .journey-opening > .journey-scene-brand .journey-brand-logo { width:100px;height:48px; }
  #perjalanan .journey-opening .journey-scene-copy { grid-row:3;padding-top:20px; }
  #perjalanan .journey-layout-garena .journey-scene-brand .journey-brand-logo { width:120px;height:56px; }
  #perjalanan #journey-panel .journey-scene-closing { grid-column:1 / -1;position:relative;inset:auto;margin:30px var(--gutter) 48px;opacity:1;transform:none; }
  #perjalanan .journey-scene-closing > strong { font-size:clamp(24px,5vw,42px);white-space:normal;line-height:1; }
}
#perjalanan .journey-scene-closing > span { display:none; }
#perjalanan .is-step-pinned .journey-control .circle-button { width:auto;height:auto;min-height:44px;flex:none; }
#perjalanan .is-step-pinned .journey-control > div { gap:22px; }
#perjalanan .is-step-pinned #journey-title { padding-right:0;margin-right:280px;max-width:50%; }

/* Garena uses the photo frame as the shared alignment reference. */
#perjalanan .journey-layout-garena { --garena-column-gap:clamp(28px,4vw,80px); }
#perjalanan .journey-layout-garena .journey-scene-closing > strong { letter-spacing:0;text-align:left; }
@media (min-width:901px) and (min-height:701px) {
  #perjalanan .journey-layout-garena .journey-scene-copy > .journey-scene-brand {
    top:var(--media-top,170px);left:var(--gutter);width:auto;
  }
  #perjalanan .journey-layout-garena .journey-scene-brand .journey-brand-logo { width:170px;height:78px; }
  #perjalanan .journey-layout-garena .journey-scene-body {
    top:var(--media-top,170px);bottom:auto;
    left:calc(100% - var(--media-right,37%) + var(--garena-column-gap));
    right:var(--gutter);width:auto;max-width:none;padding:0;
  }
  #perjalanan .is-step-pinned .journey-layout-garena .journey-headline-group {
    left:var(--gutter);top:auto;bottom:var(--media-bottom,315px);
    width:calc(var(--media-left,37%) - var(--gutter) - var(--garena-column-gap));
  }
  #perjalanan .journey-layout-garena .journey-scene-headline,
  #perjalanan .journey-layout-garena .journey-scene-body > p { text-box-trim:trim-both;text-box-edge:cap alphabetic; }
  #perjalanan .journey-layout-garena .journey-scene-body > p { margin-bottom:24px; }
  #perjalanan #journey-panel .journey-layout-garena .journey-scene-closing {
    left:var(--gutter);right:var(--gutter);width:auto;text-align:left;
  }
}
/* Sarasa shares the right edge used by the chapter controls. */
@media (min-width:901px) and (min-height:701px) {
  #perjalanan .journey-layout-sarasa .journey-headline-group { top:190px; }
  #perjalanan .journey-layout-sarasa .journey-secondary-logo {
    left:auto;right:var(--gutter);justify-content:flex-end;
  }
}
@media (min-width:901px) and (min-height:701px) and (max-height:820px) {
  #perjalanan .journey-layout-sarasa .journey-headline-group { top:170px; }
}
/* Two black bars with the concave ends of the supplied menu mark. */
.header .menu-toggle {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;width:44px;height:44px;min-height:44px;padding:0;color:#000;
}
.header .menu-toggle > span {
  display:block;flex:none;width:32px;height:6px;margin:0;background:#000;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 150'%3E%3Cpath d='M2 0H798Q800 0 800 2V8C756 45 756 105 800 142V148Q800 150 798 150H2Q0 150 0 148V142C44 105 44 45 0 8V2Q0 0 2 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 150'%3E%3Cpath d='M2 0H798Q800 0 800 2V8C756 45 756 105 800 142V148Q800 150 798 150H2Q0 150 0 148V142C44 105 44 45 0 8V2Q0 0 2 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.header .menu-toggle[aria-expanded="true"] > span:first-child { transform:translateY(5px) rotate(45deg); }
.header .menu-toggle[aria-expanded="true"] > span:last-child { transform:translateY(-5px) rotate(-45deg); }

.marquee-heading .marquee-toggle { width:44px;min-width:44px;height:44px;padding:0;gap:0; }
/* Vapor stays above each section background and beneath all of its content. */
.smoke-background-host { isolation:isolate; }
.smoke-background-relative { position:relative; }
.smoke-background {
  position:absolute;inset:0;display:block;width:100%;height:100%;z-index:-1;
  pointer-events:none;opacity:.8;filter:blur(9px);
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
}
@media (max-width:600px) { .smoke-background { opacity:.6;filter:blur(7px); } }
@media (prefers-reduced-motion:reduce) { .smoke-background { display:none; } }
/* Kuntji pairs its headline and description beside the top of the photograph. */
@media (min-width:901px) and (min-height:701px) {
  #perjalanan .journey-opening > .journey-scene-brand .journey-brand-logo { width:160px;height:94px; }
  #perjalanan .is-step-pinned .journey-opening .journey-scene-copy {
    display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
    left:70%;right:var(--gutter);top:var(--intro-photo-top,170px);bottom:auto;
    padding:0;gap:0;
  }
  #perjalanan .is-step-pinned .journey-opening .journey-scene-copy > h3 {
    font-size:clamp(30px,3.1vw,54px);line-height:1.04;margin:0 0 26px;
    text-box-trim:trim-both;text-box-edge:cap alphabetic;
  }
  #perjalanan .is-step-pinned .journey-opening .journey-scene-copy > p { margin:0 0 24px;max-width:none;font-size:clamp(14px,1.12vw,18px); }
}

/* Pure white base surfaces; brand scenes keep their own palettes. */
:root { --paper:#fff;--tintin-paper:#fff;--tintin-warm-paper:#fff; }
#rasa { --rasa-paper:#fff; }
#brand { --table-paper:#fff; }
body, .header, .experience-menu, .taste-manifesto.taste-marquee,
#perjalanan, #perjalanan .journey-story-slide,
.shop-how, .referral-band, .member-section, .club-program,
.discovery-strip, .club-referral, .hub-quickbar, .hub-how, .hub-daily,
.hub-hunt, .hub-brandline, .hub-member.member-section,
.product-close, .quiz-close { background:#fff; }

/* A smaller shared mark for both opening and closing the menu. */
:root {
  --menu-mark-color:#470a0a;
  --menu-mark-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 150'%3E%3Cpath d='M2 0H798Q800 0 800 2V8C756 45 756 105 800 142V148Q800 150 798 150H2Q0 150 0 148V142C44 105 44 45 0 8V2Q0 0 2 0Z'/%3E%3C/svg%3E");
}
.header .menu-toggle { color:var(--menu-mark-color); }
.header .menu-toggle > span, #experience-menu-close > span {
  display:block;flex:none;width:26px;height:5px;margin:0;background:var(--menu-mark-color);
  -webkit-mask:var(--menu-mark-shape) center/100% 100% no-repeat;
  mask:var(--menu-mark-shape) center/100% 100% no-repeat;
}
.header .menu-toggle[aria-expanded="true"] > span:first-child { transform:translateY(4.5px) rotate(45deg); }
.header .menu-toggle[aria-expanded="true"] > span:last-child { transform:translateY(-4.5px) rotate(-45deg); }
#experience-menu-close {
  position:relative;display:block;flex:none;width:44px;height:44px;min-height:44px;
  padding:0;border:0;background:none;color:var(--menu-mark-color);
}
#experience-menu-close > span { position:absolute;left:50%;top:50%; }
#experience-menu-close > span:first-child { transform:translate(-50%,-50%) rotate(45deg); }
#experience-menu-close > span:last-child { transform:translate(-50%,-50%) rotate(-45deg); }

/* Keep the new display face's side bearings instead of squeezing its letters. */
:root { --tintin-tracking:.01em; }
.scene-word, .hero-slide-celebrate .scene-word,
.sensory-row > span, .journey-art-word,
.closing-section h2, .closing-section h2 > em, .footer-word,
.gate-center #gate-title, .gate-center #gate-title > em,
.manifesto-sticky h2, .rasa-marquee-unit > span,
#perjalanan .journey-scene-word,
#perjalanan .journey-scene-closing > strong,
#perjalanan .journey-layout-garena .journey-scene-closing > strong,
#brand #brands-title, .page-hero-art .giant-word,
.member-card::before, .quiz-motif > span,
.rasa-token strong, .wheel-number, .wheel-center span,
.hub-hero-copy h1, .hub-hero-copy h1 em {
  font-kerning:normal;letter-spacing:var(--tintin-tracking);
}
.scene-word > span { color:inherit; }

/* Product surfaces share the header's ivory. */
#brand .brand-art::before,
#brand .brand-tab.active,
#brand .brand-tab:hover { background:var(--cream); }

.hub-hero-actions > a:last-child {
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;min-height:52px;width:auto;border:0;
  border-radius:999px;background:#e31e26;color:#fff;font-weight:700;
  line-height:1.45;white-space:nowrap;
}

/* Heritage pairs its display headline and story on one left-hand grid. */
#tentang .heritage-copy { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 24px; }
#tentang .heritage-topline { grid-column:1 / 8;align-self:start; }
#tentang .heritage-logogram {
  grid-column:10 / -1;grid-row:1;justify-self:end;align-self:start;
  display:block;width:clamp(100px,12vw,200px);aspect-ratio:1;background:var(--cream);
  mask:url('/assets/tintin-logogram-ivory-source.png') center/contain no-repeat;
  -webkit-mask:url('/assets/tintin-logogram-ivory-source.png') center/contain no-repeat;
}
#tentang .heritage-bottom { grid-column:1 / -1;width:100%;margin-top:0; }
#tentang .heritage-story { width:58%;max-width:760px; }
#tentang #heritage-title {
  font-family:var(--tintin-display);font-weight:900;font-synthesis:none;
  font-size:clamp(40px,4.6vw,78px);line-height:1.08;letter-spacing:var(--tintin-tracking);
  width:100%;max-width:none;text-align:left;margin:0 0 28px;text-wrap:balance;
}
#tentang #heritage-title em { font:inherit;white-space:normal; }
@media(max-width:850px) {
  #tentang .heritage-story { width:70%; }
  #tentang .heritage-bottom { gap:28px;flex-wrap:wrap; }
}
@media(max-width:560px) {
  #tentang .heritage-topline { grid-column:1 / 9; }
  #tentang .heritage-logogram { grid-column:10 / -1;width:64px; }
  #tentang .heritage-story { width:100%;max-width:none; }
  #tentang #heritage-title { font-size:clamp(34px,9vw,48px);margin-bottom:24px; }
}

/* Give the heritage headline room between lines and before the story. */
#tentang #heritage-title {
  font-size:clamp(36px,4.05vw,69px);line-height:1.24;
  letter-spacing:.018em;margin-bottom:36px;
}
@media(max-width:560px) {
  #tentang #heritage-title { font-size:clamp(31px,8.1vw,43px);line-height:1.24;margin-bottom:30px; }
}

/* Three evenly framed shopping steps. */
.shop-how .shop-steps { gap:clamp(18px,2.5vw,40px);align-items:stretch; }
.shop-how .shop-step {
  border:1px solid #e31e26;border-radius:16px;
  padding:clamp(22px,2.2vw,36px);min-width:0;
}
.shop-how .shop-step > p { max-width:none; }

/* Companion closing sections share a centered headline and action. */
body[data-page="shop"] .page-closing {
  flex-direction:column;align-items:center;text-align:center;gap:30px;
}
body[data-page="shop"] .page-closing h2 { max-width:1100px; }
.footer .footer-contact {
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--cream);border-radius:999px;
  padding:12px 26px;min-height:52px;color:var(--cream);
  transition:background .2s,color .2s;
}
.footer .footer-contact:hover { background:var(--cream);color:#470a0a; }
@media(max-width:600px) {
  body[data-page="shop"] .page-closing { gap:26px; }
}

/* Brand filter cards sit beside the catalog headline on the same grid. */
#pilih-rasa .page-section-head { display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:clamp(28px,5vw,90px); }
#pilih-rasa .brand-filters { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:12px;padding:0;margin:0;border:0;align-self:stretch; }
#pilih-rasa .brand-filter {
  min-width:0;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:18px 12px;border:1px solid #e31e26;border-radius:14px;background:transparent;
}
#pilih-rasa .brand-filter img { width:100%;max-width:100px;max-height:70px;object-fit:contain; }
#pilih-rasa .brand-filter span { font-size:11px;line-height:1.3; }
#pilih-rasa .brand-filter[aria-pressed="true"],#pilih-rasa .brand-filter:hover { background:var(--cream); }
#pilih-rasa .brand-filter::after { display:none; }
@media(max-width:1050px) { #pilih-rasa .page-section-head { grid-template-columns:1fr;gap:28px; } }
@media(max-width:560px) {
  #pilih-rasa .brand-filters { grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
  #pilih-rasa .brand-filter { min-height:100px;padding:15px 10px; }
  #pilih-rasa .brand-filter img { max-height:55px; }
}

/* All five banner actions share the illustration's lower alignment. */
.hero-slide { --hero-action-base:100px; }
.hero-slide .scene-copy { position:absolute;inset:0; }
.hero-slide .scene-copy .scene-button {
  position:absolute;left:var(--gutter);bottom:var(--hero-action-base);margin:0;
}
.hero-slide .scene-art { bottom:var(--hero-action-base); }
@media(min-width:1650px) { .hero-slide { --hero-action-base:115px; } }
@media(max-height:730px) and (min-width:561px) { .hero-slide { --hero-action-base:82px; } }
@media(max-height:520px) and (min-width:561px) { .hero-slide { --hero-action-base:78px; } }
@media(max-width:850px) {
  .hero-slide { --hero-action-base:100px; }
  .hero-slide .scene-art { bottom:calc(var(--hero-action-base) + 58px); }
}
@media(max-width:560px) {
  .hero-slide { --hero-action-base:90px; }
  .hero-slide .scene-art { bottom:calc(var(--hero-action-base) + 58px);height:32%; }
}

/* Square, centered brand cards at every screen size. */
#pilih-rasa .brand-filters { align-self:center;align-items:center; }
#pilih-rasa .brand-filter { aspect-ratio:1;width:100%;height:auto;min-height:0;align-self:center;padding:14px; }
#pilih-rasa .brand-filter[data-brand-filter="all"] span {
  font-family:var(--tintin-display);font-weight:900;font-synthesis:none;
  text-transform:uppercase;font-size:clamp(18px,1.8vw,32px);line-height:1.18;
  letter-spacing:.01em;text-align:center;
}

/* A clockwise hairline replaces the lifting product hover. */
.shop-product { position:relative; }
.shop-product:hover .pack-cutout,.shop-product:focus-visible .pack-cutout { transform:none; }
.shop-product .pack-cutout { transition:none; }
.shop-product .product-hover-frame {
  position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);
  pointer-events:none;overflow:visible;fill:none;z-index:2;
}
.product-hover-frame rect {
  width:calc(100% - 1px);height:calc(100% - 1px);stroke:#e31e26;stroke-width:1px;
  vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;
  opacity:0;transition:stroke-dashoffset .7s ease,opacity .2s;
}
.shop-product:hover .product-hover-frame rect,
.shop-product:focus-visible .product-hover-frame rect { stroke-dashoffset:0;opacity:1; }
@media(prefers-reduced-motion:reduce) { .product-hover-frame rect { transition:none; } }

/* Breathing room belongs inside each frame, with a clear gutter outside. */
#catalog-grid { gap:clamp(22px,2.2vw,40px); }
#catalog-grid .shop-product { padding:24px; }
#catalog-grid .product-hover-frame { inset:0;width:100%;height:100%; }
#catalog-grid .shop-product h3 { font-size:clamp(22px,1.65vw,29px);line-height:1.2;letter-spacing:-.025em;margin:20px 0 12px; }
#catalog-grid .shop-product-link { margin-top:24px; }
#pilih-rasa .brand-filter[data-brand-filter="all"] span {
  font-size:clamp(16px,1.35vw,25px);line-height:1.28;letter-spacing:.025em;
}
#pilih-rasa .brand-filter { padding:20px; }
@media(max-width:850px) { #catalog-grid .shop-product { padding:20px; } }
@media(max-width:560px) {
  #catalog-grid { gap:18px; }
  #catalog-grid .shop-product { padding:16px; }
  #catalog-grid .shop-product h3 { font-size:21px; }
  #pilih-rasa .brand-filter { padding:18px; }
  #pilih-rasa .brand-filter[data-brand-filter="all"] span { font-size:18px; }
}

#pilih-rasa .brand-filter[aria-pressed="true"],
#pilih-rasa .brand-filter[aria-pressed="true"]:hover {
  background:#e31e26;color:var(--cream);border-color:#e31e26;
}
#pilih-rasa .brand-filter[aria-pressed="true"] span { color:var(--cream); }
#pilih-rasa .brand-filter[aria-pressed="true"] img { filter:brightness(0) invert(1); }
#pilih-rasa .catalog-meta { display:none; }

#catalog-grid { align-items:stretch; }
#catalog-grid .shop-product h3 { min-height:2.4em; }
#catalog-grid .shop-product-link {
  margin-top:auto;padding-top:28px;align-self:flex-start;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
}
#catalog-grid .shop-product > p { margin-bottom:0; }

/* The photograph gains rounded corners as its scroll frame draws inward. */
#perjalanan .journey-has-photo .journey-scene-art {
  border-radius:calc(clamp(16px,1.6vw,24px) * var(--photo-radius-progress,1));
}
#perjalanan .journey-opening .journey-photo-frame {
  position:absolute;inset:0;overflow:hidden;border-radius:inherit;
}
#perjalanan .journey-has-photo .journey-scene-art::after { border-radius:inherit; }

#perjalanan .is-step-pinned .journey-has-photo { --photo-radius-progress:0; }
@media(max-width:900px), (max-height:700px) {
  #perjalanan .journey-has-photo { --photo-radius-progress:0; }
}

/* Align brand cards to the headline row, below its eyebrow. */
@media(min-width:1051px) {
  #pilih-rasa .page-section-head { row-gap:22px; }
  #pilih-rasa .page-section-head > div:first-child { display:contents; }
  #pilih-rasa .page-section-head > div:first-child > .eyebrow { grid-column:1;grid-row:1; }
  #pilih-rasa #catalog-title { grid-column:1;grid-row:2;margin:0; }
  #pilih-rasa .brand-filters { grid-column:2;grid-row:2;align-self:center; }
}

/* Every modal uses the same crossed TINTIN bars as the header toggle. */
.dialog-close, .product-close, .quiz-close {
  display:block;width:44px;height:44px;min-height:44px;padding:0;
  border:0;border-radius:0;background:transparent;color:var(--menu-mark-color);
}
.dialog-close:hover, .product-close:hover, .quiz-close:hover { background:transparent; }
.dialog-close > span, .product-close > span, .quiz-close > span {
  position:absolute;left:50%;top:50%;display:block;width:26px;height:5px;
  background:var(--menu-mark-color);
  -webkit-mask:var(--menu-mark-shape) center/100% 100% no-repeat;
  mask:var(--menu-mark-shape) center/100% 100% no-repeat;
  transform:translate(-50%,-50%) rotate(45deg);
}
.dialog-close > span:last-child, .product-close > span:last-child, .quiz-close > span:last-child {
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* A shared photographic closing composition across all three pages. */
body[data-page] .photo-closing {
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:clamp(430px,38vw,600px);padding:80px var(--gutter);gap:32px;
  text-align:center;border:0;background:#341d18;color:var(--cream);
}
.photo-closing > .closing-photo { position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 56%; }
.photo-closing::before { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1b100c80,#1b100caa 52%,#1b100ca8);pointer-events:none; }
body[data-page] .photo-closing h2,
body[data-page] .photo-closing h2 em {
  font-family:var(--tintin-display);font-weight:900;font-style:normal;font-synthesis:none;
  text-transform:uppercase;letter-spacing:.015em;font-size:clamp(34px,4.2vw,68px);
  line-height:1.16;color:var(--cream);text-shadow:0 2px 18px #0002;
}
body[data-page] .photo-closing h2 { width:100%;max-width:1120px;margin:0;text-wrap:balance; }
body[data-page] .photo-closing > .closing-action { flex:none;margin:0;background:#e31e26;color:var(--cream); }
body[data-page] .photo-closing > .closing-action:hover { background:#c51b22; }
.footer .back-top-icon { display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--cream);border-radius:50%;color:var(--cream);background:transparent; }
.footer .back-top-icon > span { display:block;width:19px;height:19px;background:currentColor;-webkit-mask:url('/assets/icons/arrow-up.svg') center/contain no-repeat;mask:url('/assets/icons/arrow-up.svg') center/contain no-repeat; }
.footer .back-top-icon:hover,.footer .back-top-icon:focus-visible { background:var(--cream);color:#470a0a; }
.footer .back-top-icon:hover > span,.footer .back-top-icon:focus-visible > span { color:#470a0a;background-color:#470a0a; }
@media(max-width:600px) {
  body[data-page] .photo-closing { min-height:440px;padding:64px 24px;gap:28px; }
  body[data-page] .photo-closing h2, body[data-page] .photo-closing h2 em { font-size:clamp(29px,7.2vw,42px);line-height:1.2; }
}
body[data-page="shop"] .photo-closing > .closing-photo { object-position:center 25%; }
body[data-page="sahabat"] .photo-closing > .closing-photo { object-position:center 30%; }

/* Individual packs keep their own proportions within a shared image grid. */
#catalog-grid .shop-product-art .pack-cutout { width:min(100%,calc(270px * var(--pack-aspect)));height:auto;max-height:270px; }
#product-detail-art .pack-cutout { width:min(80%,calc(360px * var(--pack-aspect)));height:auto;max-height:360px; }
@media(max-width:1100px) {
  #catalog-grid .shop-product-art .pack-cutout { width:min(100%,calc(220px * var(--pack-aspect)));max-height:220px; }
}
/* The farewell is two complete lines at every screen size. */
body[data-page] #sahabat-closing-title { max-width:1440px;text-wrap:initial; }
body[data-page] #sahabat-closing-title,body[data-page] #sahabat-closing-title em { font-size:clamp(16px,4.2vw,68px); }
#sahabat-closing-title .closing-line { display:block;white-space:nowrap; }