:root {
  --s88-ink: #160d09;
  --s88-brown: #3b2115;
  --s88-brown-2: #6a3a21;
  --s88-paper: #f5dfb7;
  --s88-cream: #fff4db;
  --s88-amber: #f0b84c;
  --s88-red: #b82d27;
  --s88-red-light: #e4503e;
  --s88-blue: #153b66;
  --s88-line: rgba(255,255,255,.16);
  --s88-shadow: 0 24px 70px rgba(8,4,2,.45);
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--s88-cream); background: var(--s88-ink); font-family: Inter, system-ui, sans-serif; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link { position: fixed; top: -100px; left: 20px; z-index: 1000; background: var(--s88-paper); color: var(--s88-ink); padding: 12px 16px; border-radius: 6px; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-height); display: flex; align-items: center; gap: 24px; padding: 0 clamp(16px, 4vw, 64px); background: linear-gradient(180deg, rgba(12,6,3,.92), rgba(12,6,3,.38), transparent); }
.site-brand { flex: 0 0 auto; }
.custom-logo { max-height: 48px; width: auto; }
.site-wordmark { text-decoration: none; font-family: "Bree Serif", serif; font-size: 25px; letter-spacing: .08em; text-shadow: 0 3px 14px #000; }
.site-wordmark span { color: var(--s88-amber); }
.scene-menu-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--s88-line); border-radius: 999px; background: rgba(22,13,9,.58); color: var(--s88-cream); padding: 9px 14px; cursor: pointer; }
.scene-menu-toggle span:first-child { color: var(--s88-amber); }
.header-actions { margin-left: auto; display: flex; gap: 8px; }
.header-link { padding: 10px 14px; border: 1px solid var(--s88-line); border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 13px; }
.header-link--primary { background: var(--s88-red); border-color: var(--s88-red); }
.standard-nav { margin-left: auto; }
.standard-nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.standard-nav a { text-decoration: none; font-size: 13px; color: #ead5bd; }

.warkop-app { position: fixed; inset: 0; overflow: hidden; background: var(--s88-ink); }
.warkop-loading { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; background: #120b07; transition: opacity .55s ease, visibility .55s ease; }
.warkop-loading p { color: #d8c1a1; font-size: 13px; letter-spacing: .08em; }
.loading-mark { display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid var(--s88-amber); border-radius: 50%; color: var(--s88-amber); font-family: "Bree Serif", serif; font-size: 25px; box-shadow: 0 0 45px rgba(240,184,76,.24); animation: loading-pulse 1.5s ease-in-out infinite; }
.warkop-app.is-loaded .warkop-loading { opacity: 0; visibility: hidden; }
@keyframes loading-pulse { 50% { transform: scale(1.06); box-shadow: 0 0 65px rgba(240,184,76,.4); } }
.age-gate { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; padding: 20px; background: rgba(10,5,3,.92); backdrop-filter: blur(15px); transition: opacity .3s ease; }
.age-gate.is-dismissed { opacity: 0; }
.age-gate__panel { width: min(520px, 100%); padding: clamp(28px, 5vw, 52px); border: 1px solid rgba(240,184,76,.4); border-radius: 14px; background: linear-gradient(145deg, #3c2115, #160e0a); box-shadow: var(--s88-shadow); text-align: center; }
.age-gate__panel h2 { margin: 0 0 12px; font-size: 45px; }
.age-gate__panel p:not(.eyebrow) { color: #d9c2a7; line-height: 1.6; }
.age-gate__panel .button { width: 100%; margin: 12px 0; }
.age-gate__panel > a { font-size: 12px; color: var(--s88-amber); }

.scene-stage, .warkop-scene { position: absolute; inset: 0; }
.warkop-scene { display: grid; align-items: center; padding: calc(var(--header-height) + 20px) clamp(24px, 6vw, 100px) 88px; background-image: var(--scene-bg); background-position: center; background-size: cover; opacity: 0; visibility: hidden; transform: scale(1.035); transition: opacity .7s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), visibility .7s; }
.warkop-scene.is-active { opacity: 1; visibility: visible; transform: scale(1); z-index: 2; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,7,4,.8), rgba(13,7,4,.12) 62%, rgba(13,7,4,.25)); pointer-events: none; }
.scene-shade--strong { background: rgba(13,7,4,.64); backdrop-filter: blur(1px); }
.scene-heading { position: relative; z-index: 3; max-width: 620px; }
.scene-heading--top { align-self: start; margin-top: 40px; }
.eyebrow { margin: 0 0 10px; color: var(--s88-amber); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3 { font-family: "Bree Serif", Georgia, serif; font-weight: 400; }
.scene-heading h2, .hero-copy h1, .menu-board h2, .tv-guide h2, .cashier-copy h2, .map-board h2 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 72px); line-height: .98; text-wrap: balance; text-shadow: 0 5px 22px rgba(0,0,0,.45); }
.scene-heading p:last-child, .hero-copy > p, .cashier-copy > p, .map-board__copy > p { color: #ead7c1; line-height: 1.65; }

.hero-copy { position: relative; z-index: 4; width: min(630px, 52vw); margin-left: clamp(280px, 32vw, 600px); }
.hero-copy h1 { font-size: clamp(48px, 7vw, 104px); }
.hero-copy > p { max-width: 590px; font-size: clamp(15px, 1.35vw, 20px); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.button { appearance: none; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 11px 18px; border: 1px solid var(--s88-line); border-radius: 9px; text-decoration: none; color: white; background: rgba(25,13,8,.7); font-weight: 800; cursor: pointer; }
.button--primary { background: var(--s88-red); border-color: var(--s88-red-light); box-shadow: 0 10px 30px rgba(122,22,20,.35); }
.button--ghost { backdrop-filter: blur(10px); }
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.mascot { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 30px 30px rgba(0,0,0,.48)); }
.mascot--welcome { left: clamp(20px, 6vw, 110px); bottom: 0; width: min(31vw, 470px); max-height: 82vh; object-fit: contain; object-position: bottom; }
.mascot--scene { right: clamp(12px, 3vw, 55px); bottom: 0; width: min(25vw, 360px); max-height: 68vh; object-fit: contain; object-position: bottom; opacity: .98; }

.hotspot { position: absolute; z-index: 5; width: 28px; height: 28px; border: 2px solid #fff3cf; border-radius: 50%; background: rgba(184,45,39,.9); box-shadow: 0 0 0 8px rgba(255,255,255,.09), 0 0 30px rgba(240,184,76,.7); cursor: pointer; animation: hotspot-pulse 2s ease-in-out infinite; }
.hotspot::before { content: ''; position: absolute; inset: 8px; border-radius: inherit; background: #fff; }
.hotspot span { position: absolute; left: 50%; bottom: calc(100% + 13px); translate: -50% 4px; width: max-content; max-width: 150px; padding: 7px 10px; border-radius: 6px; background: rgba(18,10,6,.92); color: #fff4db; font-size: 11px; font-weight: 800; opacity: 0; transition: .2s ease; pointer-events: none; }
.hotspot:hover span, .hotspot:focus-visible span { opacity: 1; translate: -50% 0; }
.hotspot--table { right: 19%; bottom: 22%; }
.hotspot--menu { left: 52%; top: 21%; }
.hotspot--promo { right: 13%; top: 28%; }
.hotspot--tv { right: 12%; top: 53%; }
.hotspot--cashier { left: 56%; top: 58%; }
.hotspot--story { left: 30%; top: 40%; }
.hotspot--map { left: 31%; bottom: 26%; }
@keyframes hotspot-pulse { 50% { box-shadow: 0 0 0 13px rgba(255,255,255,.035), 0 0 40px rgba(240,184,76,.85); } }

.scene-menu { position: fixed; z-index: 110; top: 86px; left: clamp(16px, 4vw, 64px); width: min(300px, calc(100vw - 32px)); padding: 18px; border: 1px solid rgba(240,184,76,.32); border-radius: 14px; background: rgba(20,11,7,.95); box-shadow: var(--s88-shadow); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .25s ease; }
.scene-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.scene-menu__title { margin: 0 0 10px; color: var(--s88-amber); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.scene-menu__item { width: 100%; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: #dfcab0; cursor: pointer; text-align: left; }
.scene-menu__item span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--s88-amber); }
.scene-menu__item:hover, .scene-menu__item.is-active { color: #fff; background: rgba(184,45,39,.28); }

.scene-controls { position: fixed; z-index: 95; right: clamp(16px, 4vw, 64px); bottom: 23px; display: flex; align-items: center; gap: 8px; }
.scene-controls button { width: 42px; height: 42px; border: 1px solid var(--s88-line); border-radius: 50%; background: rgba(18,10,6,.72); color: #fff; cursor: pointer; backdrop-filter: blur(12px); }
.scene-controls button:hover, .scene-controls button.is-active { background: var(--s88-red); }
.scene-progress { display: flex; align-items: center; gap: 8px; min-width: 130px; font-size: 11px; font-weight: 800; }
.scene-progress i { position: relative; width: 80px; height: 2px; background: rgba(255,255,255,.25); }
.scene-progress i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--scene-progress, 12.5%); background: var(--s88-amber); transition: width .6s ease; }
.scene-hint { position: fixed; z-index: 90; left: 50%; bottom: 27px; translate: -50% 0; margin: 0; color: rgba(255,255,255,.58); font-size: 11px; }

.newspaper-table { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(2, minmax(250px, 390px)); gap: clamp(20px, 5vw, 70px); justify-content: center; perspective: 1100px; }
.newspaper { min-height: 430px; display: flex; flex-direction: column; align-items: flex-start; padding: 32px; border: 5px double #372718; background: #ead6ae; color: #2d2117; text-align: left; cursor: pointer; box-shadow: 0 30px 55px rgba(0,0,0,.52); transform: rotate(-2deg); transition: transform .3s ease, box-shadow .3s ease; }
.newspaper:nth-child(2) { transform: rotate(2deg) translateY(15px); background: #e8dfca; }
.newspaper:hover, .newspaper:focus-visible { transform: rotate(0) translateY(-12px); box-shadow: 0 42px 75px rgba(0,0,0,.62); }
.newspaper__masthead { width: 100%; padding-bottom: 12px; border-bottom: 5px double currentColor; font-family: "Bree Serif", serif; font-size: clamp(26px, 3vw, 42px); }
.newspaper strong { margin-top: 28px; font-family: "Bree Serif", serif; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; }
.newspaper small { margin-top: auto; font-weight: 800; }

.menu-board { position: relative; z-index: 3; width: min(820px, 72vw); max-height: calc(100vh - 180px); margin: auto; overflow: auto; padding: clamp(28px, 5vw, 60px); border: 14px solid #60391f; outline: 2px solid #9b6b39; border-radius: 8px; background: linear-gradient(140deg, #213b2f, #11241d); box-shadow: inset 0 0 70px rgba(0,0,0,.32), var(--s88-shadow); }
.menu-board h2 { font-size: clamp(40px, 5vw, 68px); }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 28px; }
.feature-list a { display: grid; grid-template-columns: 75px 1fr auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px dashed rgba(255,255,255,.27); text-decoration: none; }
.feature-list a span { color: var(--s88-amber); font-size: 10px; text-transform: uppercase; }
.feature-list a strong { font-size: 15px; }
.feature-list a:hover { color: var(--s88-amber); }

.poster-wall { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: clamp(15px, 3vw, 42px); width: min(1120px, 88vw); margin: 115px auto 0; }
.promo-poster { position: relative; padding: 12px; border: 8px solid #542e1b; background: #d7b877; box-shadow: var(--s88-shadow); transition: transform .3s ease; }
.promo-poster:nth-child(2) { transform: translateY(-22px); }
.promo-poster:hover { transform: translateY(-12px); }
.promo-poster img, .promo-poster__placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4/5; object-fit: cover; background: linear-gradient(145deg, #8e1f1d, #351013); color: #f7d27c; font-family: "Bree Serif", serif; font-size: clamp(26px, 4vw, 52px); text-align: center; }
.promo-poster__lamp { position: absolute; left: 50%; top: -48px; width: 15px; height: 15px; border-radius: 50%; background: #ffd783; translate: -50% 0; box-shadow: 0 15px 45px 25px rgba(255,198,90,.26); }
.promo-poster__info { display: grid; gap: 5px; padding: 13px 4px 4px; color: #2a180f; }
.promo-poster__info small { font-size: 10px; text-transform: uppercase; }
.promo-poster__info strong { font-family: "Bree Serif", serif; font-size: 20px; }
.promo-poster__info a { font-size: 12px; font-weight: 800; }

.tv-corner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(420px, 1.1fr) minmax(300px, .8fr); gap: clamp(30px, 6vw, 90px); align-items: center; width: min(1150px, 90vw); margin: auto; }
.tv-set { position: relative; padding: 32px 72px 32px 32px; border: 14px solid #422b20; border-radius: 28px; background: linear-gradient(145deg, #5a3c2e, #251711); box-shadow: var(--s88-shadow), inset 0 0 25px rgba(255,255,255,.09); }
.tv-screen { aspect-ratio: 4/3; overflow: hidden; border: 9px solid #160e0c; border-radius: 28px; background: radial-gradient(circle, #315a78, #07151f 70%); box-shadow: inset 0 0 60px #000, 0 0 45px rgba(44,118,166,.25); }
.tv-screen video { width: 100%; height: 100%; object-fit: cover; }
.tv-static { height: 100%; display: grid; place-content: center; text-align: center; }
.tv-static span { font-size: clamp(30px, 5vw, 64px); letter-spacing: .15em; }
.tv-static strong { color: var(--s88-amber); font-family: "Bree Serif", serif; font-size: clamp(44px, 7vw, 90px); }
.tv-controls { position: absolute; right: 20px; top: 40%; display: grid; gap: 20px; }
.tv-controls span { width: 28px; height: 28px; border: 3px solid #17100d; border-radius: 50%; background: #a47752; }
.tv-guide h2 { font-size: clamp(40px, 5vw, 72px); }
.tv-playlist { display: grid; gap: 7px; max-height: 310px; overflow: auto; }
.tv-playlist button { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--s88-line); border-radius: 8px; background: rgba(24,13,8,.72); color: #fff; text-align: left; cursor: pointer; }
.tv-playlist button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--s88-red); }
.tv-playlist button:hover { border-color: var(--s88-amber); }

.cashier-counter { position: relative; z-index: 3; width: min(1050px, 89vw); margin: auto; padding: clamp(28px, 5vw, 62px); border: 8px solid #5b311d; background: linear-gradient(145deg, rgba(91,49,29,.97), rgba(40,22,14,.97)); box-shadow: var(--s88-shadow); }
.cashier-copy { max-width: 620px; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 30px; }
.service-grid a { display: grid; gap: 8px; min-height: 145px; padding: 20px; border: 1px solid rgba(255,255,255,.15); background: rgba(17,9,6,.42); text-decoration: none; }
.service-grid a:hover { background: var(--s88-red); transform: translateY(-5px); }
.service-grid span { color: var(--s88-amber); font-size: 11px; }
.service-grid strong { font-family: "Bree Serif", serif; font-size: 23px; }
.service-grid small { color: #d7c0a9; }
.faq-strip { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--s88-line); font-size: 12px; }
.faq-strip a { color: var(--s88-amber); }

.story-corner { position: relative; z-index: 3; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 100px); align-items: center; width: min(1180px, 91vw); margin: auto; }
.story-frames { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; perspective: 900px; }
.story-frames a { min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; border: 12px solid #5a351f; outline: 2px solid #af7b41; background: linear-gradient(145deg, #e6d2a9, #a88154); color: #2c190f; text-decoration: none; box-shadow: 0 18px 35px rgba(0,0,0,.4); transform: rotate(-1deg); }
.story-frames a:nth-child(even) { transform: rotate(1.5deg) translateY(8px); }
.story-frames a:hover { transform: rotate(0) translateY(-6px); }
.story-frames span { font-size: 11px; }
.story-frames strong { font-family: "Bree Serif", serif; font-size: 23px; }

.map-board { position: relative; z-index: 3; width: min(980px, 88vw); margin: auto; padding: clamp(30px, 5vw, 60px); border: 14px solid #603820; background-color: #d2b77e; background-image: radial-gradient(circle at 20% 20%, rgba(51,99,60,.32) 0 5%, transparent 6%), radial-gradient(circle at 78% 68%, rgba(51,99,60,.28) 0 8%, transparent 9%), linear-gradient(25deg, transparent 48%, rgba(117,75,39,.26) 49% 51%, transparent 52%); color: #29180f; box-shadow: var(--s88-shadow); }
.map-board__copy { max-width: 620px; }
.map-board h2 { color: #331b0f; text-shadow: none; }
.map-board__copy > p { color: #5e3a25; }
.map-routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 25px; }
.route-card { display: grid; grid-template-columns: 1fr auto; border: 2px solid rgba(70,43,22,.35); background: rgba(255,247,218,.62); }
.route-card a { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px; text-decoration: none; }
.route-card button { border: 0; border-left: 1px solid rgba(70,43,22,.25); background: transparent; color: #603820; font-size: 10px; font-weight: 800; cursor: pointer; }
.route-card:hover { background: #fff2c8; transform: translateX(3px); }
.route-dot { width: 16px; height: 16px; border: 4px solid #fff2c8; border-radius: 50%; background: var(--s88-red); box-shadow: 0 0 0 2px var(--s88-red); }
.map-routes small { font-size: 10px; color: #73513b; }

.warkop-dialog { width: min(930px, calc(100vw - 32px)); max-height: calc(100vh - 50px); padding: clamp(24px, 5vw, 56px); border: 8px double #4e3723; background: #ecdbb8; color: #2b2018; box-shadow: 0 40px 100px rgba(0,0,0,.7); }
.warkop-dialog::backdrop { background: rgba(8,4,2,.8); backdrop-filter: blur(5px); }
.warkop-dialog header { padding-bottom: 20px; border-bottom: 5px double #473523; }
.warkop-dialog header h2 { margin: 0; font-size: clamp(34px, 5vw, 56px); }
.dialog-close { position: absolute; right: 15px; top: 14px; width: 40px; height: 40px; border: 0; background: transparent; color: #2b2018; font-size: 30px; cursor: pointer; }
.dialog-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.dialog-news-grid article { padding: 22px 0; border-bottom: 1px solid rgba(43,32,24,.25); }
.dialog-news-grid h3 { margin: 7px 0; font-size: 25px; }
.dialog-news-grid h3 a { text-decoration: none; }
.dialog-news-grid p { font-family: Georgia, serif; line-height: 1.5; }
.dialog-archive-link { display: inline-block; margin-top: 25px; font-weight: 800; }
.copy-toast { position: fixed; z-index: 150; left: 50%; bottom: 80px; translate: -50% 10px; padding: 10px 14px; border-radius: 7px; background: #f5dfb7; color: #2b1a10; font-size: 12px; font-weight: 800; opacity: 0; visibility: hidden; transition: .2s ease; }
.copy-toast.is-visible { opacity: 1; visibility: visible; translate: -50% 0; }

.content-shell, .reading-shell { min-height: 100vh; padding: calc(var(--header-height) + 55px) clamp(20px, 6vw, 100px) 90px; background: radial-gradient(circle at 80% 0, #5f2b1a 0, transparent 34%), #170e0a; }
.content-hero { max-width: 900px; margin-bottom: 42px; }
.content-hero h1, .reading-header h1 { margin: 0; font-size: clamp(44px, 7vw, 86px); line-height: 1; }
.archive-description, .reading-meta { color: #cdb59a; }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.article-card { overflow: hidden; border: 1px solid var(--s88-line); border-radius: 12px; background: #261710; }
.article-card__image { display: block; aspect-ratio: 16/9; overflow: hidden; background: #3c2418; }
.article-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.article-card:hover .article-card__image img { transform: scale(1.04); }
.image-placeholder { height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.28); font-family: "Bree Serif", serif; font-size: 28px; }
.article-card__body { padding: 20px; }
.article-card__body h2 { margin: 7px 0 10px; font-size: 27px; }
.article-card__body h2 a { text-decoration: none; }
.article-card__body p { color: #ccb8a2; line-height: 1.55; }
.card-meta { margin: 0; color: var(--s88-amber) !important; font-size: 10px; text-transform: uppercase; }
.article-card--compact { grid-column: span 1; }
.empty-state { grid-column: 1/-1; padding: 30px; border: 1px dashed var(--s88-line); color: #cdb59a; text-align: center; }
.navigation.pagination { margin-top: 35px; }
.nav-links { display: flex; gap: 8px; }
.page-numbers { padding: 9px 12px; border: 1px solid var(--s88-line); text-decoration: none; }
.page-numbers.current { background: var(--s88-red); }
.reading-shell { display: grid; place-items: start center; }
.reading-card { width: min(900px, 100%); }
.reading-image img { width: 100%; border-radius: 12px; }
.reading-content { padding: clamp(20px, 5vw, 60px); border-radius: 12px; background: #f4e5c8; color: #291d15; font-family: Georgia, serif; font-size: 18px; line-height: 1.8; }
.reading-content h2, .reading-content h3 { color: #4d2518; }
.reading-content a { color: #9c251f; }
.reading-footer { padding: 25px 0; }
.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 40px clamp(20px, 6vw, 100px); background: #0f0906; color: #cdb59a; }
.site-footer strong { color: #fff; font-family: "Bree Serif", serif; font-size: 24px; }
.site-footer ul { display: flex; gap: 14px; flex-wrap: wrap; list-style: none; padding: 0; }
.site-footer small { grid-column: 1/-1; }
.not-found { min-height: 100vh; display: grid; place-content: center; justify-items: start; padding: 30px; background: radial-gradient(circle at 50% 30%, #52291b, transparent 35%), #120b08; }
.not-found h1 { margin: 0; font-size: clamp(55px, 9vw, 120px); }

@media (max-width: 900px) {
  .standard-nav { display: none; }
  .hero-copy { width: 56vw; margin-left: 35vw; }
  .mascot--welcome { width: 36vw; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .story-corner { grid-template-columns: 1fr; }
  .story-corner .scene-heading { max-width: none; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root { --header-height: 64px; }
  .site-header { padding: 0 14px; gap: 10px; }
  .site-wordmark { font-size: 20px; }
  .scene-menu-toggle { padding: 8px 10px; }
  .scene-menu-toggle span:last-child { display: none; }
  .header-link { padding: 8px 10px; font-size: 11px; }
  .warkop-scene { padding: 88px 18px 88px; background-image: var(--scene-bg-mobile, var(--scene-bg)); background-position: center; }
  .scene-shade { background: linear-gradient(0deg, rgba(12,6,3,.88), rgba(12,6,3,.12) 70%); }
  .hero-copy { align-self: end; width: 100%; margin: 0; padding-bottom: 32px; }
  .hero-copy h1 { max-width: 82%; font-size: clamp(48px, 14vw, 72px); }
  .hero-copy > p { max-width: 92%; font-size: 14px; }
  .mascot--welcome { left: auto; right: -10%; bottom: 25%; width: 56vw; max-height: 50vh; opacity: .92; }
  .mascot--scene { right: -10%; width: 45vw; max-height: 45vh; opacity: .72; }
  .hotspot { width: 24px; height: 24px; }
  .hotspot--table { right: 24%; bottom: 33%; }
  .hotspot--menu { left: 52%; top: 19%; }
  .hotspot--promo { right: 11%; top: 28%; }
  .hotspot--tv { right: 12%; top: 46%; }
  .hotspot--cashier { left: 57%; top: 50%; }
  .hotspot--story { left: 24%; top: 35%; }
  .hotspot--map { left: 25%; bottom: 42%; }
  .scene-controls { right: 12px; bottom: 12px; }
  .scene-controls button { width: 38px; height: 38px; }
  .scene-controls [data-toggle-sound], .scene-controls [data-toggle-motion] { display: none; }
  .scene-progress { min-width: 95px; }
  .scene-progress i { width: 48px; }
  .scene-hint { left: 14px; bottom: 17px; translate: 0; max-width: 120px; }
  .scene-heading--top { align-self: start; margin-top: 10px; }
  .scene-heading h2, .menu-board h2, .tv-guide h2, .cashier-copy h2, .map-board h2 { font-size: clamp(35px, 11vw, 54px); }
  .newspaper-table { grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; width: 100%; }
  .newspaper { min-height: 310px; padding: 16px; border-width: 3px; }
  .newspaper__masthead { font-size: 17px; }
  .newspaper strong { font-size: 25px; }
  .menu-board { width: 100%; max-height: calc(100vh - 170px); padding: 24px 18px; border-width: 8px; }
  .feature-list { grid-template-columns: 1fr; }
  .feature-list a { grid-template-columns: 60px 1fr auto; padding: 10px 0; }
  .poster-wall { grid-template-columns: repeat(3, 1fr); gap: 7px; width: 100%; margin-top: 130px; }
  .promo-poster { padding: 5px; border-width: 5px; }
  .promo-poster:nth-child(2) { transform: translateY(-13px); }
  .promo-poster__info { padding-top: 8px; }
  .promo-poster__info strong { font-size: 13px; }
  .promo-poster__info small { display: none; }
  .promo-poster__info a { font-size: 10px; }
  .tv-corner { grid-template-columns: 1fr; gap: 18px; width: 100%; }
  .tv-set { width: min(390px, 100%); margin: auto; padding: 18px 54px 18px 18px; border-width: 9px; }
  .tv-guide h2 { margin-bottom: 8px; }
  .tv-playlist { max-height: 165px; }
  .tv-playlist button { padding: 8px; }
  .cashier-counter { width: 100%; padding: 24px 18px; }
  .service-grid { gap: 7px; margin-top: 16px; }
  .service-grid a { min-height: 105px; padding: 12px; }
  .service-grid strong { font-size: 18px; }
  .faq-strip { display: none; }
  .story-corner { width: 100%; gap: 18px; }
  .story-frames { gap: 8px; }
  .story-frames a { min-height: 115px; padding: 12px; border-width: 7px; }
  .story-frames strong { font-size: 16px; }
  .map-board { width: 100%; max-height: calc(100vh - 165px); overflow: auto; padding: 24px 18px; border-width: 8px; }
  .map-routes { grid-template-columns: 1fr; margin-top: 12px; }
  .route-card a { padding: 9px; }
  .warkop-dialog { max-height: calc(100vh - 24px); padding: 38px 18px 22px; border-width: 5px; }
  .dialog-news-grid { grid-template-columns: 1fr; }
  .dialog-news-grid article { padding: 15px 0; }
  .dialog-news-grid h3 { font-size: 21px; }
  .dialog-news-grid p { display: none; }
  .content-shell, .reading-shell { padding: calc(var(--header-height) + 40px) 16px 60px; }
  .content-grid { grid-template-columns: 1fr; }
  .content-hero h1, .reading-header h1 { font-size: 48px; }
  .reading-content { padding: 25px 18px; font-size: 16px; }
  .site-footer { grid-template-columns: 1fr; padding: 35px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.reduce-warkop-motion *, .reduce-warkop-motion *::before, .reduce-warkop-motion *::after { animation: none !important; transition-duration: .01ms !important; }