/* =============================================================================================
   Mak Kimbong · inner pages · Acclaira, Oct 2026
   Loaded AFTER css/tokens.css and assets/kenduri.css (the LOCKED landing page's stylesheet).
   It never restyles the chrome: no rule here selects .nav, .foot or anything inside them.
   It reuses the landing page's own vocabulary (.kicker, .btn, .it, .mono, .light, .hours, .facil,
   .tip, .qa, .hero-wood) and adds mk-* components. See design-system/DESIGN-SYSTEM.md.
   ============================================================================================= */

/* ---------- grounds (section boundaries are hard colour changes, never rules) ---------- */
.mk-ink { background: var(--ink); color: var(--santan); }
.mk-kertas { background: var(--kertas); color: var(--ink); color-scheme: light; }
.mk-kunyit { background: var(--kunyit); color: var(--ink); color-scheme: light; }
.mk-bark { background: radial-gradient(90% 80% at 72% 18%, #4b2010 0%, var(--bark) 48%, #1c0f07 100%); color: var(--santan); }
.mk-night { background: var(--night); color: var(--santan); }
.mk-sec { padding: var(--sec) 0; }
main { display: block; position: relative; }
.mk-inner main { overflow-x: clip; }
main section[id], main [id] { scroll-margin-top: 96px; }

/* ---------- type ---------- */
.mk-h1 { margin: 0; font-weight: 700; font-size: var(--t-h1); line-height: .92; letter-spacing: -.028em; font-variation-settings: "opsz" 96, "wdth" 90; text-wrap: balance; }
.mk-h2 { margin: 0; font-weight: 700; font-size: var(--t-h2); line-height: .95; letter-spacing: -.026em; font-variation-settings: "opsz" 96, "wdth" 88; text-wrap: balance; }
.mk-h1 .it, .mk-h2 .it { display: block; font-size: 1.04em; letter-spacing: -.012em; color: var(--kunyit); }
.light .mk-h1 .it, .light .mk-h2 .it, .mk-kertas .mk-h1 .it, .mk-kertas .mk-h2 .it,
.mk-kunyit .mk-h1 .it, .mk-kunyit .mk-h2 .it { color: var(--brown); }
.mk-h3 { margin: 0 0 10px; font-size: var(--t-h3); line-height: 1.16; font-weight: 650; letter-spacing: -.012em; font-variation-settings: "opsz" 32; }
.mk-lede { margin: 22px 0 0; max-width: 36em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; }
.light .mk-lede, .mk-kertas .mk-lede, .mk-kunyit .mk-lede { color: #3b2a1d; }
.mk-ink .mk-lede, .mk-bark .mk-lede, .mk-night .mk-lede { color: rgba(250, 242, 226, .86); }
.mk-answer { margin: 28px 0 0; max-width: 37em; padding-left: 20px; border-left: 3px solid var(--kunyit); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.58; color: rgba(250, 242, 226, .92); }
.light .mk-answer, .mk-kertas .mk-answer, .mk-kunyit .mk-answer { color: #2b1d12; border-left-color: var(--brown); }
.mk-prose { max-width: var(--measure); }
.mk-prose p, .mk-prose li { font-size: var(--t-body); line-height: 1.66; }
.mk-prose p { margin: 0 0 1.05em; }
.light .mk-prose, .mk-kertas .mk-prose { color: #3b2a1d; }
.mk-ink .mk-prose, .mk-night .mk-prose { color: rgba(250, 242, 226, .86); }
.mk-inner main a:not(.btn) { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(254, 196, 18, .7); }
.mk-inner main .light a:not(.btn), .mk-inner main .mk-kertas a:not(.btn), .mk-inner main .mk-kunyit a:not(.btn) { text-decoration-color: rgba(94, 51, 20, .6); }
.mk-inner main a:not(.btn):hover { text-decoration-color: currentColor; }
.mk-ic { width: 24px; height: 24px; flex: none; }
/* the landing's kicker rule, set inline after the LAST line (a wrapped kicker no longer floats its rule beside line 1) */
.mk-inner main .kicker { display: block; }
.mk-inner main .kicker::after { display: inline-block; width: 56px; height: 1px; margin-left: 14px; vertical-align: middle; }
.mk-bi { width: 18px; height: 18px; flex: none; }
.btn .mk-bi { width: 16px; height: 16px; }

/* light and yellow grounds: the landing's ghost button is santan-on-transparent; give it ink there */
main .light .btn.ghost, main .mk-kertas .btn.ghost, main .mk-kunyit .btn.ghost, main .mk-band .btn.ghost, main .mk-ticket .btn.ghost {
  --fg: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(22, 13, 7, .55);
}
main .light .btn.ghost::after, main .mk-kertas .btn.ghost::after, main .mk-kunyit .btn.ghost::after,
main .mk-band .btn.ghost::after, main .mk-ticket .btn.ghost::after { background: var(--ink); }
main .light .btn.ghost:hover, main .mk-kertas .btn.ghost:hover, main .mk-kunyit .btn.ghost:hover,
main .mk-band .btn.ghost:hover, main .mk-ticket .btn.ghost:hover { color: var(--kunyit); }
/* on yellow, the landing's own move (.visit .btn): ink buttons */
main .mk-kunyit .btn:not(.ghost), main .mk-band .btn:not(.ghost), main .mk-ticket .btn:not(.ghost) { --bg: var(--ink); --fg: var(--santan); box-shadow: none; }
main .mk-kunyit .btn:not(.ghost)::after, main .mk-band .btn:not(.ghost)::after, main .mk-ticket .btn:not(.ghost)::after { background: var(--brown); }

/* ---------- the crumb rail: the page's site <nav> (breadcrumb + the locked header's own links on phones) ---------- */
.mk-jejak { position: relative; z-index: 2; padding: 104px 0 0; }
.mk-g-ink { background: var(--ink); color: var(--santan); }
.mk-g-light { background: var(--santan); color: var(--ink); }
.mk-g-kertas { background: var(--kertas); color: var(--ink); }
.mk-g-kunyit { background: var(--kunyit); color: var(--ink); }
.mk-jejak-in { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; }
.mk-jejak ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; font: 600 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mk-jejak li { display: flex; align-items: center; min-width: 0; }
.mk-jejak li + li::before { content: "/"; margin: 0 10px; opacity: .45; }
.mk-jejak li a, .mk-jejak li span { color: inherit; text-decoration: none; opacity: .74; }
.mk-jejak li a:hover { opacity: 1; }
.mk-jejak [aria-current] { opacity: 1; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-g-ink [aria-current] { color: var(--kunyit); }
.mk-g-light [aria-current], .mk-g-kertas [aria-current] { color: var(--brown); }
.mk-pintas { display: none; }

/* ---------- hero shells (each type composes its own) ---------- */
.mk-hero { position: relative; padding: clamp(30px, 4vw, 60px) 0 clamp(64px, 7vw, 112px); }
.mk-hero.light, .mk-hero.mk-kertas, .mk-hero.mk-kunyit { padding-bottom: clamp(64px, 7vw, 112px); }

/* ---------- live status ---------- */
.mk-live { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; line-height: 1.3; }
.mk-live i { width: 10px; height: 10px; border-radius: 50%; background: #8d8478; flex: none; }
.mk-live.open i { background: #5ed27a; animation: ping 2.4s infinite; }
.mk-visit-live .mk-live { margin-top: 30px; padding: 12px 20px 12px 16px; border-radius: 999px; background: var(--ink); color: var(--santan); font-size: 17px; }

/* ---------- walk-in band (slim, yellow, under a hero) ---------- */
.mk-band { background: var(--kunyit); color: var(--ink); color-scheme: light; padding: 18px 0; position: relative; z-index: 1; }
.mk-band-in { display: flex; align-items: center; gap: 14px 30px; flex-wrap: wrap; }
.mk-band-st { display: flex; flex-direction: column; gap: 2px; }
.mk-band-note { font-size: 14px; color: #3b2a1d; padding-left: 20px; }
.mk-band-addr { display: flex; align-items: center; gap: 8px; margin: 0 auto 0 0; font-size: 15px; font-weight: 500; }
.mk-band-addr .mk-ic { width: 20px; height: 20px; color: var(--brown); }
.mk-band .mk-go { margin: 0; }
.mk-band-sit { list-style: none; margin: 0 auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.mk-band-sit li { display: flex; align-items: center; gap: 8px; }
.mk-band-sit .mk-ic { width: 20px; height: 20px; color: var(--brown); }

.mk-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mk-go-stack { flex-direction: column; align-items: stretch; }
.mk-go-stack .btn { justify-content: center; }
.mk-addr { margin: 30px 0 0; font-size: 20px; line-height: 1.45; font-weight: 500; }
.mk-addr-sm { margin-top: 18px; font-size: 16px; }

/* ---------- ticket (vertical, yellow) ---------- */
.mk-ticket { align-self: start; padding: 26px 26px 24px; border-radius: var(--r-card); background: var(--kunyit); color: var(--ink); color-scheme: light; position: relative; }
.mk-ticket::before, .mk-ticket::after { content: ""; position: absolute; left: -11px; top: 118px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.mk-ticket::after { left: auto; right: -11px; }
.light .mk-ticket::before, .light .mk-ticket::after { background: var(--santan); }
.mk-ticket-k { margin: 0 0 14px; }
.mk-ticket .mk-live { font-size: 17px; }
.mk-hours.mk-hours-sm { margin-top: 18px; }
.mk-hours.mk-hours-sm div { padding: 8px 2px; font-size: 15px; }
.mk-ticket-note { margin: 14px 0 0; font-size: 14px; color: #3b2a1d; }
.mk-ticket .mk-go { margin-top: 18px; }

/* ---------- visit panel (the landing's yellow, re-composed) ---------- */
.mk-visit { background: var(--kunyit); color: var(--ink); color-scheme: light; padding: var(--sec) 0; }
.mk-visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.mk-visit-lede { margin: 18px 0 0; max-width: 32em; font-size: 18px; color: #3b2a1d; }
.mk-visit-ph { border-radius: var(--r-card); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(94, 51, 20, .6); }
.mk-visit-ph img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 40%; }
.mk-visit .facil, .mk-kunyit .facil { margin-top: 18px; }
.mk-tip { margin: 18px 0 0; }
.mk-visit-k { margin: 0 0 12px; }
.mk-visit-ph-wide { margin-top: 18px; }
.mk-sitstrip { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk-sitstrip a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r-tile); background: var(--ink); color: var(--santan); text-decoration: none; transition: transform .5s var(--ease); }
.mk-sitstrip a:hover { transform: translateX(4px); }
.mk-sitstrip .mk-ic { color: var(--kunyit); }
.mk-sitstrip b { font-size: 18px; font-weight: 650; line-height: 1.2; }
.mk-sitstrip span { font-size: 15.5px; color: rgba(250, 242, 226, .84); text-align: right; }
.mk-sitstrip li.now a { box-shadow: inset 0 0 0 2px var(--santan); }
.mk-sitstrip li.now b::after { content: " · sekarang"; font-weight: 500; color: var(--kunyit); }
/* the compact close (article type): a kunyit ticket on kertas */
.mk-closer { padding: clamp(56px, 6vw, 96px) 0; }
.mk-closer-t { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: start; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-card); }
.mk-closer-t::before, .mk-closer-t::after { content: ""; position: absolute; top: 50%; left: -13px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--kertas); }
.mk-closer-t::after { left: auto; right: -13px; }
.mk-closer .kicker { margin-bottom: 18px; }
.mk-closer .mk-h2 { font-size: clamp(32px, 3.4vw, 52px); }
.mk-closer-w p { margin: 0 0 8px; font-size: 17px; line-height: 1.45; }
.mk-closer-w .mono { margin: 4px 0 12px; font-size: 12px; }
.mk-closer-x { font-size: 18px; font-weight: 700; color: var(--ink); }
/* 14 Oct 2026: 'Isnin tutup' on the kunyit ticket in ink with a sambal dot (sambal on kunyit is 3.7:1, under AA) */
.mk-closer-x::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sambal); vertical-align: middle; }
.mk-closer-w .mk-live { margin-top: 8px; font-size: 16px; }
.mk-closer-a .mk-addr { margin-top: 4px; }
.mk-closer-a .mk-go { margin-top: 16px; }
.mk-tip .mk-tip-ic { width: 26px; height: 26px; color: var(--kunyit); }

/* ---------- inline note (product page: eat it at the restaurant) ---------- */
.mk-note { display: flex; gap: 24px; align-items: center; }

/* ---------- plates (their own top-down dish photos) ---------- */
.mk-plate { display: inline-flex; flex-direction: column; align-items: center; text-align: center; vertical-align: top; }
.mk-plate-im { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.mk-plate-im::before { content: ""; position: absolute; inset: 8% 6% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .62), transparent); transform: translateY(8%); }
.light .mk-plate-im::before, .mk-kertas .mk-plate-im::before { background: radial-gradient(closest-side, rgba(94, 51, 20, .38), transparent); }
.mk-plate-im img { position: relative; width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--r, 0deg)); transition: transform .9s var(--ease); }
.mk-plate:hover .mk-plate-im img { transform: rotate(calc(var(--r, 0deg) - 8deg)) scale(1.03); }
.mk-plate-nm { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.mk-plate-xs { width: 56px; }
.mk-plate-sm { width: 128px; }
.mk-plate-md { width: 170px; }
.mk-plate-lg { width: 100%; }
.mk-plate-xl { width: min(440px, 100%); }

/* ---------- photo cards ---------- */
.mk-photo { margin: 0; }
.mk-photo .im { border-radius: var(--r-card); overflow: hidden; background: var(--ink-2); }
.mk-photo .im img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.mk-photo figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; opacity: .82; }
.mk-photo-wide .im img { aspect-ratio: 1079 / 642; }
.mk-photo-tall .im img { aspect-ratio: 4 / 5; }
.mk-photo-sm .im img { aspect-ratio: 4 / 3; }
.mk-photo-doc .im img { aspect-ratio: 16 / 10; }

/* ---------- review cards ---------- */
.mk-review { margin: 0; padding: 30px 30px 26px; border-radius: var(--r-card); background: var(--ink); color: var(--santan); display: flex; flex-direction: column; justify-content: space-between; gap: 26px; }
.mk-review p { margin: 0; font-family: var(--serif); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -.01em; }
.mk-review cite { font-style: normal; opacity: 1; }  /* 20 Oct: .8 failed WCAG AA (4.17:1) on the sambal card */
.mk-review-y { background: var(--kunyit); color: var(--ink); }
.mk-review-r { background: var(--sambal); color: #fff; }

/* ---------- Q&A (the landing's .qa, with a real heading inside the summary) ---------- */
.mk-qa summary h3 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; }
.mk-qa .a p { margin: 0; max-width: var(--measure); }

/* ---------- related ---------- */
.mk-related { padding: clamp(64px, 6vw, 96px) 0; }
.mk-sec.light + .mk-related.light { padding-top: 0; }  /* R2-12: same ground, one chapter gap */
.mk-rel-grid { display: grid; gap: 14px; margin-top: 6px; }
.mk-rel-grid.mk-n2 { grid-template-columns: repeat(2, 1fr); }
.mk-rel-grid.mk-n3, .mk-rel-grid.mk-n6 { grid-template-columns: repeat(3, 1fr); }
.mk-rel-grid.mk-n4 { grid-template-columns: repeat(4, 1fr); }
.mk-rel, .related-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 22px 22px 54px; border-radius: var(--r-tile); background: var(--santan-2); color: var(--ink); text-decoration: none; transition: background .3s, transform .5s var(--ease); }
.mk-rel:hover, .related-card:hover { background: var(--kunyit); transform: translateY(-3px); }
.mk-rel .mk-ic { width: 28px; height: 28px; color: var(--brown); margin-bottom: 6px; }
.mk-rel .mono, .related-card .rc-cat { color: var(--brown-2); }
.related-card .rc-cat { font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mk-rel-t, .related-card .rc-title { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: -.012em; font-weight: 650; }
.mk-rel-dek { font-size: 15px; color: #4d3a2a; }
.mk-rel-go { position: absolute; left: 22px; bottom: 18px; font-size: 20px; color: var(--brown); }
.mk-rel-slot { display: flex; flex-wrap: wrap; }
.mk-rel-slot > .related-card { flex: 1 1 240px; max-width: 420px; }
.mk-rel-slotwrap:has(.mk-rel-slot:empty) .mk-rel-slot { display: none; }
.mk-rel-hub { margin: 26px 0 0; }

/* ---------- rails (sticky margin index: fills the gutter at desktop) ---------- */
.mk-rail { position: sticky; top: 100px; align-self: start; font-size: 15px; }
.mk-rail > .mono { margin: 0 0 14px; opacity: .86; }
.mk-rail ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid currentColor; }
.mk-rail li a { display: flex; gap: 10px; align-items: baseline; padding: 8px 0 8px 16px; color: inherit; text-decoration: none; line-height: 1.3; opacity: .82; }
.mk-rail li a:hover { opacity: 1; color: var(--brown); }
.mk-ink .mk-rail li a:hover { color: var(--kunyit); }
.mk-rail li a .mono { opacity: 1; }  /* 20 Oct: .7 inside the .82 link composited to ~4.2:1 at 12px, under AA */

/* ============================== MENU ============================== */
.mk-menu-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mk-sits { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-sits a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 16px 16px 14px; border-radius: var(--r-tile); background: var(--bark); color: inherit; text-decoration: none; transition: background .3s; }
.mk-sits a:hover { background: #4a2c15; }
.mk-sits .mk-ic { width: 26px; height: 26px; color: var(--kunyit); margin-bottom: 8px; }
.mk-sits b { font-size: 17px; font-weight: 650; line-height: 1.2; }
.mk-sit-t { font-size: 15px; color: rgba(250, 242, 226, .82); }
.mk-sits .mono { margin-top: 6px; opacity: .86; letter-spacing: .06em; }
.mk-spread { position: relative; aspect-ratio: 1 / .9; border-radius: var(--r-card); overflow: hidden; isolation: isolate; background: radial-gradient(120% 90% at 50% 40%, #2c190b 0%, #1f1208 55%, #120a05 100%); }
.mk-spread .hero-wood { border-radius: inherit; }
.mk-spread::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(60% 55% at 46% 42%, rgba(255, 196, 110, .16), transparent 70%); }
.mk-spread .mk-sp { position: absolute; z-index: 2; }
.mk-sp-1 { left: 3%; top: 5%; width: 46%; }
.mk-sp-2 { left: 53%; top: 3%; width: 36%; }
.mk-sp-3 { left: 67%; top: 47%; width: 29%; }
.mk-sp-4 { left: 25%; top: 46%; width: 41%; }
.mk-sp-5 { left: 3%; top: 62%; width: 22%; }
.mk-spread-cap { position: absolute; z-index: 4; left: 20px; bottom: 16px; margin: 0; opacity: .86; }

.mk-chap-grid { display: grid; grid-template-columns: minmax(170px, .3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.mk-chap-side { position: sticky; top: 104px; }
.mk-clock { margin: 0; font-weight: 800; font-size: clamp(64px, 8vw, 136px); line-height: .82; letter-spacing: -.05em; font-variation-settings: "opsz" 96, "wdth" 75; color: var(--brown); white-space: nowrap; }
.mk-ink .mk-clock { color: var(--kunyit); }
.mk-clock span { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.mk-clock small { display: block; margin-bottom: .08em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .3em; line-height: 1; letter-spacing: 0; }
.mk-chap-side .mono { margin: 16px 0 0; opacity: .8; }
.mk-chap-main .mk-lede { max-width: 40em; }
.mk-chap-plates { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); justify-items: center; align-items: start; gap: 26px 20px; margin: 38px 0 6px; }
.mk-chap-plates.mk-n2 { --n: 2; }
.mk-chap-plates.mk-n4 { --n: 4; }
.mk-chap-plates > .mk-plate { width: min(190px, 100%); }
.mk-mlist { columns: 3 220px; column-gap: 46px; margin-top: 34px; }
.mk-mlist-1 { columns: 1; max-width: 520px; margin-top: 38px; }
.mk-chap-main:has(> .mk-mlist-1) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(28px, 4vw, 60px); align-items: start; }
.mk-chap-main:has(> .mk-mlist-1) > .mk-h2, .mk-chap-main:has(> .mk-mlist-1) > .mk-lede { grid-column: 1 / -1; }
.mk-mgroup { break-inside: avoid; margin: 0 0 30px; }
.mk-mgroup-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid currentColor; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.mk-mgroup-h .mono { opacity: .86; }
.mk-mgroup ul { list-style: none; margin: 0; padding: 0; }
.mk-mgroup li { padding: 8px 0; border-bottom: 1px dashed var(--rule-light); font-size: 16px; line-height: 1.35; }
.mk-ink .mk-mgroup li { border-bottom-color: var(--rule-ink); }
.mk-fishnote { display: flex; gap: 26px; align-items: center; margin: 34px 0 0; padding: 18px 26px 18px 18px; border-radius: var(--r-card); background: var(--bark); max-width: 760px; }
.mk-fishnote .mk-plate { flex: none; width: 150px; }
.mk-fishnote p { margin: 0; }
.mk-fishnote .mono { color: var(--kunyit); margin-bottom: 6px; }
.mk-fishnote b { color: var(--kunyit); }

.mk-favs .kicker { color: var(--santan); }
.mk-fav-row { list-style: none; margin: clamp(36px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.mk-fav { position: relative; }
.mk-fav-n { position: absolute; left: 0; top: -8px; margin: 0; font-weight: 800; font-size: clamp(96px, 10vw, 170px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-fav .mk-plate { position: relative; width: 80%; margin-left: 16%; }
.mk-fav h3 { margin: 20px 0 6px; font-size: clamp(28px, 2.6vw, 40px); line-height: .95; letter-spacing: -.03em; font-weight: 700; }
.mk-fav h3 .it { color: var(--kunyit); font-weight: 400; }
.mk-fav .mono { margin: 10px 0 0; opacity: .86; }
.mk-favs-also { margin: clamp(40px, 4vw, 56px) 0 0; padding-top: 22px; border-top: 1px solid var(--rule-ink); max-width: 62em; font-size: 17px; color: rgba(250, 242, 226, .86); }
.mk-favs-also .mono { color: var(--kunyit); margin-right: 12px; }

.mk-sets2-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mk-dulang { margin: 0; }
.mk-dulang-tray { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; isolation: isolate;
  background: radial-gradient(circle at 50% 46%, #6e4522 0%, #4d2e16 52%, #2e1a0c 70%, #7a4d26 71.5%, #3a2210 75%, #22130a 100%);
  box-shadow: 0 50px 80px -40px rgba(94, 51, 20, .75); }
.mk-dulang .mk-dl { position: absolute; z-index: 1; }
.mk-dl-1 { left: 7%; top: 13%; width: 45%; }
.mk-dl-2 { left: 51%; top: 9%; width: 40%; }
.mk-dl-3 { left: 13%; top: 53%; width: 37%; }
.mk-dl-4 { left: 49%; top: 49%; width: 42%; }
.mk-dl-5 { left: 39%; top: 37%; width: 22%; z-index: 2; }
.mk-dulang figcaption { margin-top: 18px; text-align: center; opacity: .82; }
.mk-online { display: flex; gap: 14px 18px; align-items: center; flex-wrap: wrap; margin-top: 30px; padding: 18px 20px; border-radius: var(--r-tile); background: var(--santan-2); }
.mk-online .mk-ic { width: 30px; height: 30px; color: var(--brown); }
.mk-online p { margin: 0; flex: 1 1 240px; font-size: 16px; color: #3b2a1d; }

/* ============================== PRODUCT (pack) ============================== */
.mk-pack-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mk-pack-art { position: relative; border-radius: var(--r-card); overflow: hidden; isolation: isolate; aspect-ratio: 1; background: radial-gradient(70% 60% at 50% 45%, #3a1e0d 0%, #1d1009 60%, #0f0804 100%); display: grid; place-items: center; }
.mk-pack-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 35% at 50% 40%, rgba(254, 196, 18, .22), transparent 70%); }
.mk-pack-art img { width: 82%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); }
.mk-pack-tag { position: absolute; left: 22px; bottom: 18px; margin: 0; opacity: .8; }
.mk-price { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 0; }
.mk-price-n { font-weight: 800; font-size: clamp(54px, 6vw, 96px); line-height: .9; letter-spacing: -.04em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-price .mono { opacity: .8; }
.mk-dine { background: var(--kunyit); color: var(--ink); color-scheme: light; padding: clamp(36px, 4vw, 56px) 0; }
.mk-dine-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px; gap: clamp(24px, 4vw, 56px); align-items: center; }
.mk-dine .mk-h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 8px 0 12px; }
.mk-dine p { margin: 0; max-width: 40em; color: #3b2a1d; }
.mk-dine .mono { color: var(--ink); }
.mk-dine-st { margin-top: 14px; }
.mk-dine .mk-plate { width: 200px; }
.mk-steps { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; display: block; }
.mk-steps li { display: grid; grid-template-columns: 72px minmax(200px, .42fr) minmax(0, 1fr) 40px; gap: 8px clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(20px, 2.4vw, 30px) 0; border-top: 2px solid var(--ink); }
.mk-steps li:last-child { border-bottom: 1px solid var(--rule-light); }
.mk-steps .mk-ic { grid-column: 4; grid-row: 1; justify-self: end; align-self: center; width: 32px; height: 32px; color: var(--brown); }
.mk-step-k { grid-column: 1; grid-row: 1; font-weight: 800; font-size: clamp(48px, 4.4vw, 64px); line-height: .8; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-step-t { grid-column: 2; grid-row: 1; margin: 0; font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 85; }
.mk-steps span:not(.mk-step-k) { grid-column: 3; grid-row: 1; color: #3b2a1d; font-size: 18px; line-height: 1.55; }
.mk-serve-more { margin: 26px 0 0; font-size: 17px; color: #3b2a1d; max-width: 48em; }
.mk-combo-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-radius: 26px; overflow: hidden; background: #1d120b; color: var(--santan); text-decoration: none; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.mk-combo-im img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 8 / 9; }
.mk-combo-pair { position: relative; min-height: 100%; aspect-ratio: 8 / 9; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, #3a1e0d 0%, #1d1009 60%, #0f0804 100%); }
.mk-combo-pair img { position: absolute; width: 56%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .85); }
.mk-combo-pair img:first-child { left: 3%; top: 3%; transform: rotate(-4deg); }
.mk-combo-pair img:last-child { right: 3%; bottom: 3%; transform: rotate(5deg); }
.mk-combo-body .mk-h2 { font-size: clamp(36px, 4.4vw, 72px); }
.mk-combo-body { padding: clamp(26px, 3vw, 46px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.mk-combo-body p { margin: 0; color: rgba(250, 242, 226, .8); }
.mk-combo-body .mk-price { margin: 4px 0 6px; }
.mk-combo-body .btn { align-self: flex-start; }
.mk-tag { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: var(--sambal); color: #fff; }
.mk-combo-also { margin: 22px 0 0; color: rgba(250, 242, 226, .82); }

/* ============================== COMPARISON (the day) ============================== */
.mk-clock-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mk-daystrip { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.mk-daystrip::before { content: ""; position: absolute; left: 16%; right: 16%; top: 12%; height: 46%; border: 1.5px dashed var(--rule-ink); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.mk-ds { position: relative; width: 100%; }
.mk-ds-1, .mk-ds-3 { margin-top: 22%; }
.mk-ds .mk-plate-nm { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.mk-ds .mk-plate-nm b { font-size: 17px; font-weight: 700; }
.mk-ds .mk-plate-nm span { font-size: 14.5px; font-weight: 500; color: rgba(250, 242, 226, .84); }
.mk-ruler { margin: clamp(40px, 5vw, 64px) 0 0; }
.mk-ruler-ticks { position: relative; height: 34px; border-bottom: 1px solid var(--rule-ink); }
.mk-ruler-ticks span { position: absolute; left: calc(var(--i) * 10%); top: 0; font-size: 14px; letter-spacing: .04em; transform: translateX(-50%); }
.mk-ruler-ticks span::after { content: ""; position: absolute; left: 50%; top: 24px; width: 1px; height: 10px; background: var(--rule-ink); }
.mk-ruler-ticks span:first-child { transform: none; }
.mk-ruler-ticks span:first-child::after { left: 0; }
.mk-ruler-ticks span:last-child { transform: translateX(-100%); }
.mk-ruler-ticks span:last-child::after { left: auto; right: 0; }
.mk-ruler-bands { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px 0; margin-top: 14px; grid-auto-rows: minmax(84px, auto); }
.mk-rb { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 18px; border-radius: 14px; text-decoration: none; color: var(--ink); transition: transform .5s var(--ease); min-width: 0; }
a.mk-rb:hover { transform: translateY(-3px); }
.mk-rb b { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.1; }
.mk-rb span { font-size: 14.5px; }
.mk-rb-1 { grid-column: 1 / span 3; grid-row: 1; background: var(--kunyit); margin-right: 4px; }
.mk-rb-gap { grid-column: 4 / span 1; grid-row: 1; background: repeating-linear-gradient(135deg, rgba(250, 242, 226, .12) 0 6px, transparent 6px 12px); color: var(--santan); border: 1px dashed var(--rule-ink); }
.mk-rb-gap { align-items: center; padding: 14px 6px; }
.mk-rb-gap span { font-size: 14px; line-height: 1.2; font-weight: 600; }
.mk-rb-note { grid-column: 1 / span 4; grid-row: 2; align-self: center; margin: 0; padding-right: 18px; font-size: 14.5px; line-height: 1.35; text-align: right; color: rgba(250, 242, 226, .84); }
.mk-rb-2 { grid-column: 5 / span 6; grid-row: 1; background: var(--cili); color: var(--ink); }
.mk-rb-3 { grid-column: 5 / span 6; grid-row: 2; background: var(--santan); }
.mk-ruler figcaption { margin-top: 16px; opacity: .8; }

.mk-compare-head { max-width: 900px; }
.mk-table-fig { margin: clamp(30px, 4vw, 48px) 0 0; }
.mk-table-fig figcaption { margin-top: 14px; opacity: .86; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.45; }
.mk-table thead th { text-align: left; font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 0 16px 12px 0; border-bottom: 2px solid var(--ink); }
.mk-table tbody th, .mk-table td { text-align: left; vertical-align: top; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--rule-light); }
.mk-table tbody th a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.mk-table tbody th a span { min-width: 0; }
.mk-table td b { font-weight: 700; font-size: 18px; }
.mk-table .mk-plate-xs { flex: none; width: 72px; }  /* R2-13 */
.mk-td-sub { display: block; margin-top: 4px; font-size: 15px; line-height: 1.4; color: #4d3a2a; }
@media (min-width: 901px) { .mk-table td b { white-space: nowrap; } }
.mk-compare .mk-table td:last-child { color: var(--sambal); font-weight: 500; }
.mk-cchap-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mk-cchap-media { display: flex; justify-content: flex-start; }
.mk-cchap-flip .mk-cchap-media { order: 2; justify-content: flex-end; }
.mk-cchap-media .mk-photo { width: min(460px, 100%); }
.mk-cchap-n { margin: 0 0 18px; opacity: .78; }
.mk-cchap .mk-prose { margin-top: 26px; }
.mk-pick-rows { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; }
.mk-pick-row { display: grid; grid-template-columns: 48px minmax(200px, .42fr) minmax(0, 1fr); gap: 10px clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(22px, 2.6vw, 34px) 0; border-top: 2px solid var(--ink); }
.mk-pick-ic { width: 40px; height: 40px; color: var(--brown); align-self: start; }
.mk-pick-who { margin: 0; font-weight: 700; font-size: clamp(28px, 2.8vw, 42px); line-height: 1; letter-spacing: -.025em; font-variation-settings: "opsz" 96, "wdth" 85; }
.mk-pick-row p { margin: 0; max-width: 40em; font-size: 18px; line-height: 1.6; color: #3b2a1d; }
.mk-peak-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mk-peak .mk-prose { margin-top: 26px; }
.mk-visit-c { scroll-margin-top: 96px; }
.mk-week2 { display: none; }
.mk-week2 p { margin: 0 0 6px; font-size: 17px; line-height: 1.45; }

/* ============================== SERVICE pages, round 2 (pages_services.py, 14 Oct 2026) ==============================
   New classes only (r1 reviews of /menu/, /product/sotong-bakar-gergasi/, /sarapan-.../); no rule above is changed. */
.mk-inner main .mk-band-note a { color: inherit; text-decoration-color: rgba(94, 51, 20, .6); }
/* menu: freshness + price line under the sitting tiles; the phone hero puts the spread between h1 and answer (6b) */
.mk-menu-asof { margin: 16px 0 0; opacity: .8; max-width: 52em; }
.mk-menu-asof a { color: inherit; }
/* menu: each sitting's gutter carries its facts (and the lunch counter photo) under the hour numeral */
.mk-side2 .mk-sidefacts { margin: 24px 0 0; max-width: 270px; }
.mk-side2 .mk-sidefacts > div { padding: 10px 0; border-top: 1px solid var(--rule-light); }
.mk-ink .mk-side2 .mk-sidefacts > div { border-top-color: var(--rule-ink); }
.mk-side2 .mk-sidefacts dt { margin: 0 0 3px; opacity: .74; }
.mk-side2 .mk-sidefacts dd { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.mk-side2 .mk-side-ph { margin-top: 26px; max-width: 320px; }
/* menu: the group count sits beside the <h3>, not in it */
.mk-mgroup-t { margin: 0; font: inherit; letter-spacing: inherit; font-variation-settings: inherit; }
.mk-mgroup-go { margin: 12px 0 0; font-size: 15px; line-height: 1.45; }
.mk-mgroup-note { opacity: .88; }
.mk-mtag { margin-left: 8px; font-size: 12px; opacity: .72; white-space: nowrap; }
.mk-mnote { margin: 44px 0 0; max-width: 40em; font-size: 17px; line-height: 1.55; color: rgba(250, 242, 226, .86); }
/* menu: ikan bakar as an answered question, the full width of the column */
.mk-fishq { display: flex; gap: 26px; align-items: center; margin: 36px 0 0; padding: 18px 30px 18px 18px; border-radius: var(--r-card); background: var(--bark); }
.mk-fishq .mk-plate { flex: none; width: 150px; }
.mk-fishq-h { margin: 0 0 6px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.mk-fishq p { margin: 0; max-width: 46em; color: rgba(250, 242, 226, .88); }
.mk-fishq b { color: var(--kunyit); }
/* menu: the favourites as one compact row inside the lunch chapter, each pointing at its row in the counter card */
.mk-favs2 { margin: 44px 0 0; }
.mk-favs2-h { margin: 0 0 14px; font: 600 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kunyit); }
.mk-favs2-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-favs2-row a { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 16px; height: 100%; padding: 14px 18px 14px 14px; border-radius: var(--r-tile); background: var(--bark); color: var(--santan); text-decoration: none; transition: background .3s; }
.mk-favs2-row a:hover { background: #4a2c15; }
.mk-favs2-pl { grid-column: 1; grid-row: 1; width: 80px; }
.mk-favs2-n { position: absolute; left: 8px; top: 8px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kunyit); color: var(--ink); font-weight: 800; font-size: 17px; line-height: 1; font-variation-settings: "opsz" 96, "wdth" 85; }
.mk-favs2-t { grid-column: 2; grid-row: 1; }
.mk-favs2-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mk-favs2-t b { font-size: 18px; font-weight: 700; line-height: 1.2; }
.mk-favs2-t .mono { opacity: .8; }
.mk-favs2-also { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule-ink); max-width: 62em; font-size: 17px; color: rgba(250, 242, 226, .86); }
.mk-favs2-also .mono { color: var(--kunyit); margin-right: 12px; }
/* menu: the set offer, smaller (its contents are not on the page) */
.mk-sets3 .mk-sets2-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.mk-sets3 .mk-dulang-sm .mk-dulang-tray { width: min(400px, 100%); }
/* menu: 'Baca seterusnya' with one menu plate per card */
.mk-relp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.mk-relp { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 42px 16px 14px; border-radius: var(--r-tile); background: var(--santan); color: var(--ink); text-decoration: none; transition: transform .5s var(--ease); }
.mk-relp:hover { transform: translateY(-3px); }
.mk-relp-pl { width: 76px; }
.mk-relp-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-relp-t .mono { opacity: .86; }
.mk-relp-h { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
.mk-relp-t > span:last-child { font-size: 15px; line-height: 1.4; color: #3b2a1d; }
.mk-relp-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--brown); }
/* pack: a line drawing on the bark panel (no photo of the pack is free), the price's date, the dine-in disc */
.mk-pack-art.mk-pack-art2 { background: var(--bark); }
.mk-pack-art2 .mk-pack-draw { width: 58%; height: auto; color: var(--kunyit); }
.mk-price-asof { margin: 10px 0 0; opacity: .74; }
.mk-dine-ic { display: grid; place-items: center; width: 100%; max-width: 168px; aspect-ratio: 1; border-radius: 50%; background: var(--santan); box-shadow: 0 24px 40px -22px rgba(94, 51, 20, .7); }
.mk-dine-ic .mk-ic { width: 54%; height: auto; color: var(--brown); stroke-width: 1; }
/* pack: two steps, the icon beside the numeral, the line running to the edge */
.mk-steps2 li { grid-template-columns: 72px 44px minmax(220px, .42fr) minmax(0, 1fr); }
.mk-steps2 .mk-ic { grid-column: 2; justify-self: start; }
.mk-steps2 .mk-step-t { grid-column: 3; }
.mk-steps2 span:not(.mk-step-k) { grid-column: 4; }
/* pack: questions about the pack, ruled */
.mk-packqa-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.mk-packqa-q { padding: clamp(20px, 2.4vw, 28px) 0; border-top: 2px solid var(--ink); }
.mk-packqa-q:last-child { border-bottom: 1px solid var(--rule-light); }
.mk-packqa-q p { margin: 0; max-width: 40em; font-size: 18px; line-height: 1.6; color: #3b2a1d; }
/* pack: the combo card on one ground, its object the big outlined 2 */
.mk-combo2 { background: var(--bark); }
.mk-combo2-n { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding: clamp(26px, 3vw, 46px); }
.mk-combo2-k { font-weight: 800; font-size: clamp(160px, 18vw, 280px); line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-combo2-n .mono { color: var(--kunyit); }
/* comparison: lunch on the sun-arc as its numeral (70+ lauk), the 10-11 gap labelled in place */
.mk-ds-num { display: inline-flex; flex-direction: column; align-items: center; text-align: center; }
.mk-ds-disc { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 86%; margin: 7%; aspect-ratio: 1; border-radius: 50%; background: var(--cili); color: var(--ink); box-shadow: 0 26px 40px -24px rgba(0, 0, 0, .8); }
.mk-ds-disc b { font-weight: 800; font-size: clamp(40px, 4.4vw, 72px); line-height: .85; letter-spacing: -.04em; font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-ds-disc span { margin-top: 6px; font: 600 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.mk-rb-gap2 { gap: 6px; text-align: center; }
.mk-rb-gap2 small { display: block; font-size: 12px; font-weight: 500; line-height: 1.25; }
/* comparison: row heads carry the sitting's icon (the chapters' plates stay new) */
.mk-th2 { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.mk-th-ic { width: 30px; height: 30px; color: var(--brown); }
/* comparison: media columns sized to what they hold (no dead gap) */
.mk-cchap2.mk-cchap-flip .mk-cchap-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.mk-cchap2 .mk-cchap-media .mk-photo-land { width: min(600px, 100%); }
.mk-lunchcard { width: 100%; max-width: 560px; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card); background: var(--bark); color: var(--santan); }
.mk-lunchcard-k { margin: 0 0 14px; color: var(--kunyit); }
.mk-lunchcard-g { list-style: none; margin: 0; padding: 0; }
.mk-lunchcard-g li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px dashed var(--rule-ink); font-size: 18px; font-weight: 600; }
.mk-lunchcard-g li:last-child { border-bottom: 1px dashed var(--rule-ink); }
.mk-lunchcard-g b { font-weight: 800; font-size: 30px; line-height: .9; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-lunchcard-fish { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; font-size: 16px; line-height: 1.5; color: rgba(250, 242, 226, .88); }
.mk-lunchcard-fish .mk-ic { color: var(--kunyit); margin-top: 2px; }
.mk-lunchcard-fish b { color: var(--kunyit); }
.mk-lunchcard .btn { margin-top: 22px; }
/* comparison: the close (week left; parking + facilities right) and its own 'Baca seterusnya' rows */
.mk-visit-d { scroll-margin-top: 96px; }
.mk-park-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(30px, 5vw, 80px); align-items: stretch; margin-top: clamp(40px, 4vw, 64px); }
.mk-visit-d .mk-park-row .facil { margin: 0; align-content: stretch; }
.mk-visit-d .mk-visit-side .mk-hours { margin-top: 0; }
.mk-park { padding: 22px 24px; border-radius: var(--r-tile); background: rgba(255, 255, 255, .38); }
.mk-park .mk-h3 { margin: 0 0 8px; }
.mk-park p { margin: 0; font-size: 17px; line-height: 1.55; color: #3b2a1d; }
.mk-next2-rows { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); border-top: 2px solid var(--ink); }
.mk-next2-rows li { border-bottom: 1px solid var(--rule-light); }
.mk-next2-rows a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 4px 18px; align-items: center; padding: 22px 4px; color: var(--ink); text-decoration: none; transition: background .3s; }
.mk-next2-rows a:hover { background: rgba(254, 196, 18, .25); }
.mk-next2-rows .mk-ic { width: 32px; height: 32px; color: var(--brown); }
.mk-next2-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-next2-h { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.015em; line-height: 1.15; }
.mk-next2-t > span:last-child { font-size: 16px; color: #3b2a1d; }
.mk-next2-go { font-size: 22px; color: var(--brown); }
@media (max-width: 1180px) {
  .mk-favs2-row { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .mk-relp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mk-chap-side.mk-side2 { flex-wrap: wrap; align-items: flex-end; }
  .mk-side2 .mk-sidefacts { margin: 0; flex: 1 1 100%; max-width: none; display: flex; flex-wrap: wrap; column-gap: 18px; }
  .mk-side2 .mk-sidefacts > div { flex: 1 1 140px; }
  .mk-side2 .mk-side-ph { flex: 1 1 100%; max-width: 520px; margin-top: 6px; }
  .mk-sets3 .mk-sets2-grid, .mk-packqa-grid, .mk-cchap2.mk-cchap-flip .mk-cchap-grid, .mk-park-row { grid-template-columns: minmax(0, 1fr); }
  .mk-next2-rows { grid-template-columns: minmax(0, 1fr); }
  .mk-combo2-k { font-size: 150px; }
}
@media (max-width: 640px) {
  .mk-menu-hero2 { row-gap: 0; }
  .mk-fishq { flex-direction: column; align-items: flex-start; }
  .mk-relp-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-dine-ic { max-width: 120px; }
  .mk-steps2 .mk-ic { grid-column: 3; }
  .mk-steps2 .mk-step-t { grid-column: 2; }
  .mk-steps2 span:not(.mk-step-k) { grid-column: 2; grid-row: 2; }
  .mk-rb-gap2 small { display: inline; margin-left: 10px; }
  .mk-next2-rows a { padding: 16px 2px; gap: 2px 14px; grid-template-columns: 30px minmax(0, 1fr) 18px; }
  .mk-next2-rows .mk-ic { width: 26px; height: 26px; }
}

/* ============================== ABOUT (spine of years) ============================== */
.mk-found-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.mk-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mk-founder { margin: 0; text-align: center; }
.mk-founder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #e8e3dc; box-shadow: 0 0 0 6px var(--santan), 0 0 0 7.5px rgba(94, 51, 20, .3); }
.mk-founder:nth-child(2) { margin-top: 70px; }
.mk-founder figcaption { margin-top: 18px; }
.mk-founder b { display: block; font-size: 16px; line-height: 1.25; }
.mk-founder .mono { display: block; margin-top: 6px; color: var(--brown-2); }
.mk-vcard { margin-top: 30px; padding: 20px 22px; border-radius: var(--r-tile); background: var(--kunyit); color: var(--ink); max-width: 560px; }
.mk-vcard > p { margin: 8px 0 0; font-size: 15.5px; }
.mk-vcard > .mono { margin: 0 0 10px; }
.mk-vcard .mk-go { margin-top: 14px; }
.mk-vcard .btn { --bg: var(--ink); --fg: var(--santan); box-shadow: none; }
.mk-found-hero + .mk-story2 { padding-top: 0; }  /* R2-12: the hero's own bottom padding is the gap */
.mk-story2-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.mk-nama-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.mk-bigquote { margin: 0; font-weight: 800; font-size: clamp(48px, 6.6vw, 112px); line-height: .9; letter-spacing: -.04em; font-variation-settings: "opsz" 96, "wdth" 78; color: var(--kunyit); }
.mk-bigquote .it { display: inline; color: var(--santan); font-weight: 400; }
.mk-nama .mk-prose { margin-top: 24px; }
.mk-spine-head { max-width: 860px; }
.mk-years { list-style: none; margin: clamp(40px, 5vw, 70px) 0 0; padding: 0; position: relative; }
.mk-year { display: grid; grid-template-columns: var(--yc) minmax(0, 1fr) var(--yc); gap: 12px clamp(28px, 4vw, 64px); align-items: center; padding: clamp(22px, 2.4vw, 32px) 0; border-top: 1px solid var(--rule-light); }
.mk-years { --yc: clamp(170px, 16vw, 260px); }  /* R2-11: one outer track on both sides, so the text column starts at one x */
.mk-year:nth-child(even) { grid-template-columns: var(--yc) minmax(0, 1fr) var(--yc); }
.mk-year:nth-child(even) .mk-year-n { justify-self: end; }
.mk-year:nth-child(even) .mk-draw { order: -1; }
.mk-year:nth-child(even) .mk-year-n { order: 2; }
.mk-year:last-child { border-bottom: 1px solid var(--rule-light); }
.mk-year-n { margin: 0; font-weight: 800; font-size: clamp(72px, 8.4vw, 136px); line-height: .8; letter-spacing: -.045em; font-variation-settings: "opsz" 96, "wdth" 75; font-variant-numeric: tabular-nums; color: var(--brown); }
.mk-year-t .mk-h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.mk-year-t p:last-child { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.55; max-width: 34em; }
.mk-draw { width: 100%; height: auto; color: var(--brown); }
.mk-draw .on { fill: var(--kunyit); }
.mk-ram2-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.mk-ram2-n { margin: 0; font-weight: 800; font-size: clamp(96px, 15vw, 250px); line-height: .8; letter-spacing: -.05em; font-variation-settings: "opsz" 96, "wdth" 75; color: #ffd774; text-shadow: 0 0 60px rgba(254, 196, 18, .35); }
/* the close: the dining hall lifted out of the night band, the visiting card beside it */
.mk-hallvisit { padding: 0 0 var(--sec); }
.mk-hv-grid { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.mk-hv-media .mk-photo { margin-top: calc(-1 * clamp(40px, 5vw, 80px)); position: relative; z-index: 1; }
.mk-hv-media .mk-photo .im img { aspect-ratio: 6 / 5; }
.mk-hv-card { padding-top: clamp(48px, 5vw, 80px); }
.mk-hv-card .hours { margin-top: 24px; }
.mk-next { margin: 28px 0 0; font-size: 17px; color: #3b2a1d; max-width: 34em; }
.mk-next .mono { display: block; margin-bottom: 8px; color: var(--brown); }

/* ============================== CONTACT ============================== */
.mk-contact-hero { padding-top: clamp(30px, 4vw, 60px); }
.mk-contact-hero .mk-visit-ph img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.mk-line-list { list-style: none; margin: clamp(30px, 4vw, 50px) 0 0; padding: 0; border-top: 1px solid var(--rule-ink); }
.mk-line-list a { display: grid; grid-template-columns: 34px 190px minmax(0, 1fr) 40px; align-items: center; gap: 18px; padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--rule-ink); color: inherit; text-decoration: none; transition: color .3s; }
.mk-line-list a:hover { color: var(--kunyit); }
.mk-line-list .mk-ic { width: 30px; height: 30px; color: var(--kunyit); }
.mk-line-list b { font-weight: 700; font-size: clamp(30px, 4.6vw, 72px); line-height: 1; letter-spacing: -.03em; font-variation-settings: "opsz" 96, "wdth" 85; overflow-wrap: anywhere; }
.mk-line-go { font-size: 28px; justify-self: end; }
.mk-lines-note { margin: 22px 0 0; color: rgba(250, 242, 226, .78); }
.mk-ask-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.mk-ask .mk-photo { margin-top: 30px; max-width: 420px; }
.mk-form { display: grid; gap: 16px; padding: clamp(24px, 3vw, 38px); border-radius: var(--r-card); background: var(--santan-2); }
.mk-form label { display: grid; gap: 8px; }
.mk-form input, .mk-form textarea { font: 400 17px/1.4 var(--display); color: var(--ink); background: var(--santan); border: 1.5px solid rgba(94, 51, 20, .45); border-radius: 14px; padding: 14px 16px; width: 100%; }
.mk-form input:focus-visible, .mk-form textarea:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.mk-form .btn { justify-self: start; }
.mk-rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(30px, 4vw, 50px); align-items: start; }
.mk-rev-grid > :nth-child(2) { margin-top: 56px; }
.mk-rev-grid > :nth-child(3) { margin-top: 22px; }
.mk-revs-go { margin: 28px 0 0; }
.mk-soc { list-style: none; margin: clamp(30px, 4vw, 50px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mk-soc a { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px; background: var(--bark); color: inherit; text-decoration: none; transition: background .3s; }
.mk-soc a:hover { background: #4a2c15; }
.mk-soc .mk-ic { width: 34px; height: 34px; color: var(--kunyit); }
.mk-soc b { font-size: 26px; letter-spacing: -.02em; }
.mk-soc .mono { opacity: .86; text-transform: none; letter-spacing: .02em; }

/* ============================== FAQ ============================== */
.mk-faq-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.mk-wall { padding: 26px; border-radius: var(--r-card); background: var(--ink); color: var(--santan); }
.mk-wall-k { margin: 0 0 16px; color: var(--kunyit); }
.mk-wall ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-wall li { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 16px; background: rgba(250, 242, 226, .06); }
.mk-wall .mk-ic { color: var(--kunyit); margin-bottom: 8px; }
.mk-wall b { font-size: 17px; line-height: 1.2; }
.mk-wall li span { font-size: 14.5px; color: rgba(250, 242, 226, .78); }
.mk-wall-st { margin-top: 18px; }
.mk-wall .mk-go { margin-top: 14px; }
main .light .mk-wall .btn.ghost { --fg: var(--santan); box-shadow: inset 0 0 0 1.5px rgba(250, 242, 226, .4); }
main .light .mk-wall .btn.ghost::after { background: var(--santan); }
main .light .mk-wall .btn.ghost:hover { color: var(--ink); }
.mk-board { padding-top: 0; }
.mk-board-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.mk-board .mk-rail li a { gap: 12px; }
.mk-board-grid > .mk-rail { padding: 18px 18px 12px; border-radius: var(--r-tile); background: var(--santan); color: var(--ink); }
/* R2-01: the groups are positioned sections (kenduri.css) whose edge-to-edge grounds come after the rail in the DOM;
   the sticky rail stacks above them so the index stays visible over every ground */
.mk-board-grid > .mk-rail, .mk-dict-grid > .mk-rail { z-index: 2; box-shadow: 0 0 0 1px var(--rule-light), 0 18px 40px -28px rgba(22, 13, 7, .45); }
/* grounds as chapters: each group's ground runs edge to edge (a zero-width border image, outset to the
   viewport; main clips it); group 04 sits on ink with its picture larger */
.mk-fgroup { padding: clamp(36px, 4vw, 56px) 0; }
.mk-fg-kertas { border-image: conic-gradient(var(--kertas) 0 0) fill 0 // 0 100vw; }
.mk-fg-santan { border-image: conic-gradient(var(--santan) 0 0) fill 0 // 0 100vw; }
.mk-fg-ink { border-image: conic-gradient(var(--ink) 0 0) fill 0 // 0 100vw; color: var(--santan); color-scheme: dark; }
.mk-fg-ink .mk-fgroup-n, .mk-fg-ink .mk-fgroup-head .mk-ic { color: var(--kunyit); }
.mk-fg-ink .qa, .mk-fg-ink .qa:last-child { border-color: rgba(250, 242, 226, .28); }
.mk-fg-ink .qa .a { color: rgba(250, 242, 226, .88); }
.mk-fg-ink .mk-fgroup-body:has(.mk-photo) .mk-photo { grid-column: 1; grid-row: auto; max-width: 640px; margin-top: 26px; }
.mk-fg-ink .mk-fgroup-body .mk-photo .im img { aspect-ratio: 16 / 10; }
.mk-fg-ink .mk-fgroup-body:has(.mk-photo) { grid-template-columns: minmax(0, 1fr); }
/* one answer measure; a brown line chevron instead of the kunyit disc */
.mk-fgroup .qa .a { padding-right: 0; max-width: 36em; }
.mk-fgroup .mk-qa .a p { max-width: none; }
.mk-qa summary::after { width: 22px; height: 22px; margin-top: -11px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 9l5 5 5-5' fill='none' stroke='%235e3314' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.mk-qa[open] summary::after { transform: rotate(180deg); }
.mk-fg-ink .mk-qa summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 9l5 5 5-5' fill='none' stroke='%23faf2e2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mk-fgroup-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.mk-fgroup-n { font-weight: 800; font-size: clamp(44px, 4vw, 64px); line-height: .8; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; letter-spacing: -.04em; }
.mk-fgroup-head .mk-ic { width: 28px; height: 28px; color: var(--brown); }
.mk-fgroup-head .mk-h3 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.mk-fgroup-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.mk-fgroup-body:has(.mk-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.mk-fgroup-body:has(.mk-photo) .mk-photo { grid-column: 2; grid-row: 1 / span 4; margin-top: 18px; }
.mk-fgroup-body .qa { grid-column: 1; }

/* ============================== LEGAL ============================== */
.mk-doc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.mk-doc-meta { margin: 22px 0 0; color: var(--sambal); }
.mk-doc { padding-top: clamp(48px, 5vw, 80px); }
.mk-doc-grid { display: grid; grid-template-columns: 240px minmax(0, 66ch) minmax(220px, 280px); gap: clamp(30px, 4.5vw, 80px); align-items: start; }
.mk-doc-aside { position: sticky; top: 100px; }
.mk-doc-note { margin: 16px 0 0; font-size: 14.5px; color: #4d3a2a; }
.mk-doc-body { max-width: var(--measure); }
.mk-docsec { padding: 0 0 clamp(26px, 3vw, 40px); }
.mk-docsec-h { display: flex; gap: 18px; align-items: center; margin: 0 0 16px; padding-top: 22px; border-top: 2px solid var(--ink); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
.mk-docsec-n { flex: none; font-weight: 800; font-size: clamp(48px, 4.4vw, 72px); line-height: .8; letter-spacing: -.045em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-factrow { list-style: none; margin: 6px 0 1.4em; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; border-top: 2px solid var(--ink); }
.mk-factrow li { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 16px 0 14px; border-bottom: 1px solid var(--rule-light); }
.mk-factrow li > span { order: -1; }  /* R2-04: the label is the first half of a sentence; it reads into the figure */
.mk-factrow b { font-weight: 800; font-size: clamp(34px, 3vw, 46px); line-height: .9; letter-spacing: -.03em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-prose .mk-factrow span { font-size: 14.5px; line-height: 1.4; color: #4d3a2a; }
.mk-defs { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0; margin: 0 0 1em; border-top: 1px solid var(--rule-light); }
.mk-defs dt, .mk-defs dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule-light); font-size: 16.5px; line-height: 1.55; }
.mk-defs dt { font-weight: 700; padding-right: 16px; }

/* ============================== 404 ============================== */
.mk-404-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.mk-404-art { position: relative; display: grid; place-items: center; color: rgba(250, 242, 226, .5); }
.mk-empty { width: min(420px, 100%); height: auto; }
.mk-404-n { position: absolute; margin: 0; font-weight: 800; font-size: clamp(64px, 8vw, 120px); line-height: 1; letter-spacing: -.05em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-404-links { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mk-404-links a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px; border-radius: var(--r-tile); background: var(--bark); color: inherit; text-decoration: none; transition: background .3s; }
.mk-404-links a:hover { background: #4a2c15; }
.mk-404-links .mk-ic { color: var(--kunyit); margin-bottom: 8px; }
.mk-404-links b { font-size: 18px; }
.mk-404-links span { font-size: 14.5px; color: rgba(250, 242, 226, .76); }
.mk-404-visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.mk-404-visit .mk-404-ph { margin: 0; }

/* ============================== HUB ============================== */
.mk-hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(30px, 5vw, 90px); align-items: start; }
.mk-hub-nums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px clamp(28px, 3vw, 48px); margin-top: 36px; }
.mk-hub-nums p { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mk-hub-n { font-weight: 800; font-size: clamp(72px, 8vw, 128px); line-height: .8; letter-spacing: -.045em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-hub-nums .mono { opacity: .8; }
.mk-hub-plus { padding-bottom: 2px; }
.mk-hub-plus a { font-weight: 600; font-size: 17px; color: var(--santan); }
.mk-shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 4vw, 54px); }
.mk-pillar { display: flex; flex-direction: column; border-top: 3px solid var(--ink); padding-top: 22px; }
.mk-pillar-top { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.mk-pillar-ph { display: block; width: min(220px, 70%); aspect-ratio: 1; margin: 4px 0 10px; }
.mk-pillar-ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 26px 40px -20px rgba(94, 51, 20, .6); transition: transform 1.2s var(--ease); }
.mk-pillar-top:hover .mk-pillar-ph img { transform: rotate(-4deg) scale(1.03); }
.mk-pillar-list { flex: 1 0 auto; }
.mk-pillar-foot { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--ink); font-weight: 650; font-size: 16px; color: var(--ink); text-decoration: none; }
.mk-pillar-foot:hover { color: var(--brown); }
.mk-pillar-top .mono { margin-top: 8px; color: var(--sambal); }
.mk-pillar-top .mk-h3 { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.mk-pillar-top p { margin: 0; color: #3b2a1d; }
.mk-pillar-k { margin: 22px 0 8px; opacity: .72; }
.mk-pillar-list { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.mk-pillar-list li { counter-increment: p; border-top: 1px solid var(--rule-light); }
.mk-pillar-list a { display: flex; gap: 12px; padding: 11px 0; font-size: 15.5px; line-height: 1.35; color: inherit; text-decoration: none; }
.mk-pillar-list a::before { content: counter(p, decimal-leading-zero); font: 600 12px/1.9 var(--mono); letter-spacing: .1em; color: var(--brown-2); flex: none; }
.mk-pillar-list a:hover { color: var(--brown); text-decoration: underline; }
.mk-acards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(30px, 4vw, 50px); }
.mk-acards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.mk-acard a { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 22px; height: 100%; padding: 20px 22px 18px 18px; border-radius: 22px; background: var(--bark); color: inherit; text-decoration: none; transition: background .3s, transform .5s var(--ease); }
.mk-acard a:hover { background: #4a2c15; transform: translateY(-3px); }
.mk-acard-im { grid-row: 1 / span 4; width: 132px; height: 132px; object-fit: cover; border-radius: 50%; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); }
.mk-acard-tag { color: rgba(250, 242, 226, .72); margin-top: 4px; }
.mk-acard h3 { margin: 8px 0 6px; font-size: 21px; line-height: 1.15; letter-spacing: -.015em; font-weight: 650; }
.mk-acard p { margin: 0; font-size: 15.5px; color: rgba(250, 242, 226, .78); }
.mk-acard-go { justify-self: start; margin-top: 12px; font-weight: 600; font-size: 15px; color: var(--santan); text-decoration: underline; text-decoration-color: var(--kunyit); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mk-arch-head { max-width: 760px; }
.mk-arch-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: clamp(30px, 4vw, 50px); }
.mk-arch-h { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 20px; letter-spacing: -.012em; }
.mk-arch-h .mk-ic { color: var(--brown); }
.mk-arch-h .mono { margin-left: auto; opacity: .86; }
.mk-arch-list { margin: 0; padding: 0; list-style: none; counter-reset: a; }
.mk-arch-list li { counter-increment: a; border-bottom: 1px solid var(--rule-light); }
.mk-arch-list a { display: flex; gap: 12px; padding: 12px 0; font-size: 15.5px; line-height: 1.35; color: inherit; text-decoration: none; }
.mk-arch-list a::before { content: counter(a, decimal-leading-zero); font: 600 12px/1.9 var(--mono); letter-spacing: .1em; color: var(--brown-2); flex: none; }
.mk-arch-list a:hover { text-decoration: underline; }

/* ============================== GLOSSARY ============================== */
.mk-gloss-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(30px, 5vw, 80px); align-items: end; }
.mk-gloss-how { margin: 18px 0 0; max-width: 36em; font-size: 16px; color: #4d3a2a; }
.mk-gloss-count { margin: 0; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.mk-gloss-n { font-weight: 800; font-size: clamp(96px, 12vw, 200px); line-height: .8; letter-spacing: -.05em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-az { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(30px, 4vw, 50px); padding-top: 20px; border-top: 2px solid var(--ink); }
.mk-az a, .mk-az span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-weight: 700; font-size: 18px; text-decoration: none; }
.mk-az a { background: var(--ink); color: var(--kunyit); transition: background .3s, color .3s; }
.mk-az a:hover { background: var(--kunyit); color: var(--ink); }
.mk-az span { color: rgba(22, 13, 7, .55); border: 1px solid var(--rule-light); }
.mk-band-sits .mk-band-in { justify-content: space-between; }
.mk-dict { padding-top: clamp(48px, 5vw, 80px); }
.mk-dict-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.mk-dict-grid > .mk-rail { padding: 18px 18px 14px; border-radius: var(--r-tile); background: var(--santan); color: var(--ink); }
.mk-dict .mk-rail li a { align-items: center; }
.mk-dict .mk-rail .mk-ic { width: 20px; height: 20px; color: var(--brown); }
.mk-dict .mk-rail li a span:first-of-type { flex: 1; }
.mk-rail-more { margin: 20px 0 0; font-size: 14.5px; color: #4d3a2a; }
.mk-tgroup { margin: 0; padding: clamp(36px, 4vw, 56px) 0; }
.mk-tg-kertas { border-image: conic-gradient(var(--kertas) 0 0) fill 0 // 0 100vw; }
.mk-tg-santan { border-image: conic-gradient(var(--santan) 0 0) fill 0 // 0 100vw; }
.mk-tgroup-h { display: flex; align-items: center; gap: 14px; margin: 0; padding: 0 0 16px; border-bottom: 2px solid var(--ink); font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.mk-tgroup-h .mk-ic { width: 30px; height: 30px; color: var(--brown); }
.mk-terms { margin: 0; }
.mk-term { display: grid; grid-template-columns: minmax(210px, .34fr) minmax(0, 1fr) 96px; gap: 6px clamp(18px, 3vw, 44px); align-items: center; padding: 18px 0; border-bottom: 1px solid var(--rule-light); scroll-margin-top: 100px; }
.mk-term dt { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; line-height: 1.05; font-variation-settings: "opsz" 64, "wdth" 90; }
.mk-term dd { margin: 0; }
.mk-term dd p { margin: 0; font-size: 16.5px; line-height: 1.55; color: #3b2a1d; max-width: 46em; }
.mk-term .mk-term-here { margin-top: 8px; color: var(--ink); }
.mk-term-here .mono { color: var(--sambal); margin-right: 8px; }
.mk-term .mk-plate { justify-self: end; width: 96px; }
.mk-term-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; font-weight: 800; font-size: 36px; line-height: 1; color: transparent; -webkit-text-stroke: 1.3px var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-term-ic { flex: none; align-self: flex-start; margin-top: .14em; width: 24px; height: 24px; color: var(--brown); }
.mk-term:target { background: linear-gradient(90deg, rgba(254, 196, 18, .42), rgba(254, 196, 18, .1) 55%, transparent); box-shadow: inset 4px 0 0 var(--kunyit); }
.mk-term:target .mk-term-i { color: var(--brown); -webkit-text-stroke: 0; }
.mk-cites { margin-top: 20px; padding: 22px 24px; border-radius: var(--r-tile); background: var(--santan-2); }
.mk-cites .mono { margin: 0 0 10px; }
.mk-cites ul { margin: 0; padding-left: 18px; }
.mk-cites li { font-size: 15px; line-height: 1.7; }

/* ============================== ARTICLE ============================== */
.mk-art-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 5vw, 90px); align-items: end; }
.mk-h1-art { font-size: clamp(42px, 5.4vw, 88px); }
.mk-art-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 24px 0 0; color: var(--brown-2); }
.mk-art-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--rule-light); }
.mk-art-go .mk-go { margin: 0; }
.mk-art-fig { margin: 0; }
.mk-art-fig .im { border-radius: var(--r-card); overflow: hidden; background: var(--santan-2); }
.mk-art-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mk-art-fig figcaption { margin-top: 12px; opacity: .82; }
.mk-art-fig figcaption:empty { display: none; }
.mk-art { padding-top: 0; }
.mk-art-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: start; }
.mk-art-rail ol { margin-bottom: 26px; }
.mk-art-rail ol:empty { display: none; }
.mk-mini { padding: 18px; border-radius: var(--r-tile); background: var(--kunyit); color: var(--ink); }
.mk-mini > .mono { margin: 0 0 8px; }
.mk-mini-h { margin: 0 0 6px; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.mk-mini p { margin: 8px 0 0; font-size: 15px; line-height: 1.4; }
.mk-mini .mk-live { font-size: 15px; }
.mk-mini a { color: inherit; font-weight: 600; }
.mk-art-body { padding-top: clamp(40px, 5vw, 70px); max-width: var(--measure); }
.mk-art-body h2 { display: flex; gap: 14px; align-items: baseline; margin: clamp(46px, 5vw, 70px) 0 18px; padding-top: 18px; border-top: 2px solid var(--ink); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; letter-spacing: -.024em; font-weight: 700; color: var(--ink); }
.mk-art-body h2:first-child { margin-top: 0; }
.mk-art-body h3 { margin: 32px 0 10px; font-size: 22px; letter-spacing: -.012em; color: var(--ink); }
.mk-n { flex: none; font-weight: 800; font-size: 1.45em; line-height: .8; letter-spacing: -.04em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-art-body ul, .mk-art-body ol { padding-left: 1.2em; }
.mk-break { margin: 34px 0; width: calc(100% + clamp(0px, 12vw, 220px)); max-width: calc(100vw - 2 * var(--gut)); }
.mk-break.mk-photo { max-width: min(720px, calc(100vw - 2 * var(--gut))); }  /* amb/ sources are 600px: never wider than ~720 */
.mk-break.mk-photo .im img { aspect-ratio: 16 / 10; }
.mk-keybox { margin: 28px 0; padding: 24px 26px; border-radius: var(--r-tile); background: var(--ink); color: var(--santan); }
.mk-keybox .mono { margin: 0 0 12px; color: var(--kunyit); }
.mk-keybox ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: k; }
.mk-keybox li { counter-increment: k; position: relative; padding-left: 34px; font-size: 17px; line-height: 1.45; }
.mk-keybox li::before { content: counter(k); position: absolute; left: 0; top: -2px; font-weight: 800; font-size: 28px; line-height: 1; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-prose .mk-linkline { margin: 0 0 1.05em; }
.mk-linkline .mk-ic { width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; color: var(--brown); }
.mk-linkline > span { font-weight: 650; }
.mk-mini-table { margin: 30px 0; }
.mk-table-art tbody th a { font-size: 19px; }
.mk-mini-table figcaption { margin-top: 10px; opacity: .86; }
.mk-favfig { padding: 26px 24px 20px; border-radius: var(--r-card); background: var(--ink); color: var(--santan); }
.mk-favfig-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mk-favfig .mk-plate { width: 100%; }
.mk-favfig figcaption { margin-top: 14px; opacity: .8; }
.mk-visit-art { padding-top: var(--sec); }

/* ============================== responsive ============================== */
@media (max-width: 1280px) {
  .mk-doc-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .mk-doc-aside { position: static; grid-column: 2; max-width: 420px; }
}
@media (max-width: 1180px) {
  .mk-pintas { display: flex; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .mk-pintas::-webkit-scrollbar { display: none; }
  .mk-pintas a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid currentColor; font-size: 14px; font-weight: 500; text-decoration: none; color: inherit; opacity: .9; }
  .mk-dine-grid { grid-template-columns: 160px minmax(0, 1fr); }
  .mk-dine-grid > .mk-go { grid-column: 1 / -1; flex-direction: row; }
  .mk-dine .mk-plate { width: 160px; }
  .mk-rel-grid.mk-n4 { grid-template-columns: repeat(2, 1fr); }
  .mk-hub-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .mk-404-visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-404-visit .mk-404-ph { grid-column: 1 / -1; max-width: 520px; }
  .mk-404-visit .mk-404-ph .im img { aspect-ratio: 16 / 10; }
  .mk-closer-t { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-closer-h { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .mk-board-grid, .mk-doc-grid, .mk-dict-grid, .mk-art-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-doc-aside { grid-column: 1; }
  .mk-chap-main:has(> .mk-mlist-1) { display: block; }
  .mk-board-grid > .mk-rail, .mk-doc-grid > .mk-rail, .mk-dict-grid > .mk-rail { position: static; }
  .mk-board-grid > .mk-rail ol, .mk-doc-grid > .mk-rail ol, .mk-dict-grid > .mk-rail ol { display: flex; flex-wrap: wrap; gap: 8px; border-left: 0; }
  .mk-board-grid > .mk-rail li a, .mk-doc-grid > .mk-rail li a, .mk-dict-grid > .mk-rail li a { padding: 8px 14px; border: 1px solid var(--rule-light); border-radius: 999px; }
  /* the article's contents rail becomes a scrolling chip row under the hero (the mini ticket's status and
     buttons already sit under the answer) */
  .mk-art-rail { position: static; padding-top: clamp(28px, 4vw, 40px); }
  .mk-art-rail .mk-mini { display: none; }
  .mk-art-rail ol { display: flex; gap: 8px; margin: 0; padding: 0 0 4px; border-left: 0; overflow-x: auto; scrollbar-width: none; }
  .mk-art-rail ol::-webkit-scrollbar { display: none; }
  .mk-art-rail li { flex: none; }
  .mk-art-rail li a { padding: 8px 14px; border: 1px solid var(--rule-light); border-radius: 999px; white-space: nowrap; }
  .mk-art-body { padding-top: 26px; }
  .mk-break { width: 100%; }
  .mk-pick-row { grid-template-columns: 48px minmax(0, 1fr); }
  .mk-pick-row p { grid-column: 2; }
}
@media (max-width: 900px) {
  .mk-menu-hero-grid, .mk-pack-grid, .mk-visit-grid, .mk-found-grid, .mk-story2-grid, .mk-nama-grid, .mk-ram2-grid,
  .mk-faq-hero-grid, .mk-doc-hero-grid, .mk-404-grid, .mk-404-visit-grid, .mk-hub-grid, .mk-gloss-head, .mk-art-hero-grid,
  .mk-sets2-grid, .mk-cchap-grid, .mk-peak-grid, .mk-ask-grid, .mk-arch-grid, .mk-hv-grid, .mk-clock-top, .mk-closer-t { grid-template-columns: minmax(0, 1fr); }
  .mk-daystrip { max-width: 520px; }
  .mk-closer-t::before, .mk-closer-t::after { display: none; }
  .mk-hallvisit { padding-top: 40px; }
  .mk-hv-media .mk-photo { margin-top: 0; }
  .mk-hv-card { padding-top: 0; }
  .mk-rev-grid > :nth-child(n) { margin-top: 0; }
  .mk-fgroup-body:has(.mk-photo) .mk-photo .im img { aspect-ratio: 16 / 10; }
  .mk-chap-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mk-chap-side { position: static; display: flex; align-items: baseline; gap: 16px; }
  .mk-chap-side .mono { margin: 0; }
  .mk-clock { font-size: 64px; }
  .mk-cchap-flip .mk-cchap-media { order: 0; justify-content: flex-start; }
  .mk-shelf-grid, .mk-rev-grid, .mk-steps, .mk-fav-row, .mk-arch-cols { grid-template-columns: minmax(0, 1fr); }
  .mk-fav-row { gap: 40px; max-width: 520px; }
  .mk-rel-grid.mk-n3, .mk-rel-grid.mk-n6 { grid-template-columns: repeat(2, 1fr); }
  .mk-rel-grid.mk-n3 > :last-child { grid-column: 1 / -1; }
  .mk-combo-card { grid-template-columns: minmax(0, 1fr); }
  .mk-year, .mk-year:nth-child(even) { grid-template-columns: minmax(0, 1fr) 150px; }
  .mk-year .mk-year-n, .mk-year:nth-child(even) .mk-year-n { grid-column: 1; grid-row: 1; order: 0; justify-self: start; }
  .mk-year .mk-draw, .mk-year:nth-child(even) .mk-draw { grid-column: 2; grid-row: 1; order: 0; }
  .mk-year-t { grid-column: 1 / -1; grid-row: 2; }
  .mk-ticket { max-width: 520px; }
  .mk-founders { max-width: 520px; }
  .mk-fgroup-body:has(.mk-photo) { grid-template-columns: minmax(0, 1fr); }
  .mk-fgroup-body:has(.mk-photo) .mk-photo { grid-column: 1; grid-row: auto; max-width: 460px; margin: 18px 0 8px; }
  .mk-fg-ink .mk-fgroup-body .mk-photo { max-width: 560px; }
  .mk-line-list a { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .mk-line-list a .mono { grid-column: 2; }
  .mk-line-list a b { grid-column: 2; }
  .mk-line-list a .mk-ic { grid-row: 1 / span 2; }
  .mk-line-go { grid-column: 3; grid-row: 1 / span 2; }
  .mk-spread { max-width: 560px; }
  .mk-404-art { max-width: 340px; }
}
@media (max-width: 640px) {
  .mk-jejak { padding-top: 84px; }
  /* one line of crumbs: the last crumb truncates, so no wrapped line ever starts with a bare "/" */
  .mk-jejak ol { flex-wrap: nowrap; max-width: 100%; min-width: 0; }
  .mk-jejak li { flex: none; }
  .mk-jejak li:last-child { flex: 0 1 auto; min-width: 0; }
  .mk-jejak li:last-child > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-jejak [aria-current] { max-width: none; }
  /* the type's own hero object sits between the headline and the answer on phones (DOM order unchanged) */
  .mk-found-grid, .mk-contact-hero .mk-visit-grid, .mk-faq-hero-grid, .mk-hub-grid, .mk-art-hero-grid, .mk-clock-top { row-gap: 0; }
  .mk-hero .mk-hero-copy, .mk-contact-hero .mk-visit-side { display: contents; }
  .mk-hero .mk-hero-copy > * { order: 4; }
  .mk-hero .mk-hero-copy > .kicker { order: 1; }
  .mk-hero .mk-hero-copy > .mk-h1 { order: 2; }
  .mk-hero .mk-hero-obj { order: 3; margin-top: 26px; }
  .mk-contact-hero .mk-visit-side > :not(.mk-hero-obj), .mk-hub-grid > .mk-ticket { order: 5; }
  .mk-hub-grid > .mk-ticket { margin-top: 34px; }
  .mk-contact-hero .mk-visit-ph img { aspect-ratio: 16 / 10; }
  .mk-art-fig img { aspect-ratio: 16 / 10; }
  .mk-gloss-hero .wrap { display: flex; flex-direction: column; }
  .mk-gloss-head, .mk-gloss-head > .mk-hero-copy { display: contents; }
  .mk-gloss-hero .mk-hero-copy > * { order: 4; }
  .mk-gloss-hero .kicker { order: 1; }
  .mk-gloss-hero .mk-h1 { order: 2; }
  .mk-gloss-hero .mk-az { order: 3; margin-top: 22px; padding-top: 16px; }
  .mk-gloss-count { order: 5; margin-top: 30px; }
  .mk-hub-nums { margin-top: 26px; }
  .mk-hub-n { font-size: 72px; }
  .mk-daystrip::before { display: none; }
  .mk-ds-1, .mk-ds-3 { margin-top: 0; }
  .mk-ds .mk-plate-nm b { font-size: 15px; }
  .mk-ds .mk-plate-nm span { font-size: 13px; }
  .mk-sits { grid-template-columns: minmax(0, 1fr); }
  .mk-sits a { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .mk-sits .mk-ic { margin: 0; }
  .mk-sit-t { flex-basis: 100%; }
  .mk-sits .mono { width: 100%; margin: 0; }
  .mk-chap-plates { gap: 20px 10px; }
  .mk-plate-nm { font-size: 14px; }
  .mk-mlist { columns: 1; }
  .mk-mgroup ul { columns: 2; column-gap: 18px; }
  .mk-mgroup li { break-inside: avoid; font-size: 15px; }
  .mk-pack-art { padding-bottom: 44px; }
  .mk-pack-art img { width: 74%; }
  .mk-combo-pair { aspect-ratio: 1; }
  /* tile sets stay two-up down to 360px, icon above the label */
  .mk-facil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-facil li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; font-size: 14.5px; }
  .mk-wall li, .mk-404-links a { padding: 14px; }
  .mk-404-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-pick-row { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px; }
  .mk-pick-ic { width: 32px; height: 32px; }
  .mk-factrow { grid-template-columns: minmax(0, 1fr); }
  .mk-factrow li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mk-factrow b { font-size: 34px; }
  .mk-rb-note { grid-column: 1; grid-row: auto; text-align: left; padding: 0 2px; }
  .mk-sitstrip a { grid-template-columns: 24px minmax(0, 1fr); padding: 14px 16px; }
  .mk-sitstrip span { grid-column: 2; text-align: left; }
  .mk-closer-t { padding: 24px 20px; }
  .mk-fishnote { flex-direction: column; align-items: flex-start; }
  .mk-dine-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-dine .mk-plate { width: 150px; }
  .mk-band-in { gap: 12px; }
  .mk-band-addr { width: 100%; }
  .mk-band .mk-go { width: 100%; }
  .mk-band .btn.small { flex: 1 1 auto; justify-content: center; padding: 0 14px; }
  .mk-ruler-ticks { display: none; }
  .mk-ruler-bands { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mk-rb-1, .mk-rb-gap, .mk-rb-2, .mk-rb-3 { grid-column: 1; grid-row: auto; margin: 0; }
  .mk-table thead { display: none; }
  .mk-table, .mk-table tbody, .mk-table tr, .mk-table th, .mk-table td { display: block; width: 100%; }
  .mk-table tr { padding: 18px 0; border-bottom: 2px solid var(--ink); }
  .mk-table tbody th, .mk-table td { border: 0; padding: 6px 0; }
  .mk-table td::before { content: attr(data-l); display: block; font: 600 12px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .86; }
  .mk-table-sm tbody th { white-space: normal; }
  .mk-table-sm td::before { content: none; }
  .mk-soc { grid-template-columns: minmax(0, 1fr); }
  .mk-rel-grid.mk-n2, .mk-rel-grid.mk-n3, .mk-rel-grid.mk-n4, .mk-rel-grid.mk-n6 { grid-template-columns: minmax(0, 1fr); }
  .mk-rel-slot > .related-card { max-width: none; }
  .mk-rel-grid.mk-n3 > :last-child { grid-column: auto; }
  .mk-acards { grid-template-columns: minmax(0, 1fr); }
  .mk-acard a { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 14px 14px; border-radius: 18px; }
  .mk-acard-im { width: 64px; height: 64px; }
  .mk-acard h3 { margin: 4px 0; font-size: 18px; }
  .mk-acard p { font-size: 15px; }
  .mk-acard-go { margin-top: 8px; }
  .mk-year, .mk-year:nth-child(even) { grid-template-columns: minmax(0, 1fr) 104px; gap: 10px 16px; }
  .mk-year-n { font-size: 64px; }
  .mk-draw { max-width: 104px; }
  .mk-defs { grid-template-columns: minmax(0, 1fr); }
  .mk-defs dt { border-bottom: 0; padding-bottom: 0; }
  .mk-founder:nth-child(2) { margin-top: 40px; }
  /* glossary on phones: a 56px plate beside the term, the meaning full width under it */
  .mk-term { grid-template-columns: minmax(0, 1fr) 56px; gap: 8px 14px; padding: 16px 0; }
  .mk-term dt { grid-column: 1; grid-row: 1; }
  .mk-term .mk-plate { grid-column: 2; grid-row: 1; width: 56px; }
  .mk-term dd { grid-column: 1 / -1; grid-row: 2; }
  .mk-term-np { grid-template-columns: minmax(0, 1fr); }
  .mk-term-i { width: 30px; height: 30px; font-size: 28px; }
  .mk-favfig-row { gap: 8px; }
  .mk-favfig .mk-plate-nm { font-size: 13px; }
  .mk-visit-live .mk-live { font-size: 16px; }
  .mk-art-go { flex-direction: column; align-items: flex-start; }
  .mk-answer { padding-left: 14px; }
  /* R2-05: 'Baca seterusnya' as compact ruled rows (icon, kicker + title + one line, arrow), not a wall of cards */
  .mk-rel-grid { gap: 0; margin-top: 2px; border-top: 2px solid var(--ink); }
  .mk-rel { display: grid; grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 2px 14px; align-items: start; min-height: 0;
    padding: 14px 2px 15px; border-radius: 0; background: none; border-bottom: 1px solid var(--rule-light); }
  .mk-rel:hover { transform: none; background: rgba(254, 196, 18, .25); }
  .mk-rel .mk-ic { grid-column: 1; grid-row: 1 / span 3; width: 24px; height: 24px; margin: 1px 0 0; }
  .mk-rel .mono, .mk-rel-t, .mk-rel-dek { grid-column: 2; }
  .mk-rel .mono { font-size: 12px; }
  .mk-rel-t { font-size: 17.5px; line-height: 1.2; }
  .mk-rel-dek { font-size: 15px; line-height: 1.4; }
  .mk-rel-go { position: static; grid-column: 3; grid-row: 1 / span 3; align-self: center; font-size: 18px; }
  /* R2-06: the comparison close on phones: the week in two lines, no second photo */
  .mk-visit-c .mk-hours { display: none; }
  .mk-visit-c .mk-week2 { display: block; margin: 14px 0 4px; }
  .mk-visit-c .mk-visit-ph-wide { display: none; }
  /* R2-09: the two-column dish lists share rows, so each pair sits on one dashed rule */
  .mk-mgroup ul { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .mk-mgroup li:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* an odd list ends on one full row, no empty cell */
  /* R2-14: the 10-11 gap is a thin hatched strip, not a block */
  .mk-ruler-bands { grid-auto-rows: auto; }
  .mk-rb-1, .mk-rb-2, .mk-rb-3 { min-height: 72px; }
  .mk-rb-gap { flex-direction: row; justify-content: flex-start; align-items: center; min-height: 0; height: 24px; padding: 0 12px; border-radius: 8px; }
  .mk-rb-gap span { font-size: 12px; line-height: 1; }
  /* R2-16: socials as rows on the same ruled rhythm as 'Tiga cara' */
  .mk-soc { gap: 0; border-top: 1px solid var(--rule-ink); }
  .mk-soc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 14px 2px; border-radius: 0; background: none; border-bottom: 1px solid var(--rule-ink); }
  .mk-soc .mk-ic { grid-column: 1; grid-row: 1 / span 2; width: 26px; height: 26px; }
  .mk-soc b { grid-column: 2; font-size: 20px; line-height: 1.15; }
  .mk-soc .mono { grid-column: 2; font-size: 12px; overflow-wrap: anywhere; }
  /* R2-08 on phones: numeral and icon either side of the title, the line under the title */
  .mk-steps li { grid-template-columns: 48px minmax(0, 1fr) 28px; gap: 6px 14px; }
  .mk-steps .mk-ic { grid-column: 3; width: 26px; height: 26px; }
  .mk-step-k { font-size: 46px; }
  .mk-step-t { grid-column: 2; font-size: 22px; }
  .mk-steps span:not(.mk-step-k) { grid-column: 2; grid-row: 2; font-size: 16px; }
}

/* ===== R2 rework, utility pages (/tentang/, /hubungi-kami/, /faq/, /privacy-policy/), 14 Oct. New classes only. ===== */
.mk-nw { white-space: nowrap; }
.mk-upd { margin: 18px 0 0; font-size: 14.5px; line-height: 1.45; color: #4d3a2a; }
/* contents rails (FAQ groups, policy parts): the part in view, marked a.is-on by assets/site.js [data-spy] */
@media (min-width: 1001px) {
  .mk-board .mk-rail[data-spy] a, .mk-doc .mk-rail[data-spy] a { position: relative; }
  .mk-board .mk-rail[data-spy] a.is-on::before, .mk-doc .mk-rail[data-spy] a.is-on::before { content: ""; position: absolute; left: -3px; top: 5px; bottom: 5px; width: 4px; border-radius: 2px; background: var(--brown); }
  .mk-board .mk-rail[data-spy] a.is-on, .mk-doc .mk-rail[data-spy] a.is-on { opacity: 1; font-weight: 700; color: var(--ink); }
}
/* about: the founders' card (hero object), the three lines of business, the 2022 lots, the branch question */
.mk-vcard > p.mk-vcard-more { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-weight: 600; }
.mk-vcard-more a { color: inherit; text-decoration: underline; text-decoration-color: var(--brown); text-underline-offset: 3px; }
.mk-fcard { justify-self: end; width: 100%; max-width: 500px; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-card); background: var(--ink); color: var(--santan); }
.mk-fcard-n { display: flex; align-items: flex-end; gap: 16px; margin: 0; }
.mk-fcard-num { font-weight: 800; font-size: clamp(120px, 12vw, 190px); line-height: .76; letter-spacing: -.05em; font-variation-settings: "opsz" 96, "wdth" 75; color: var(--kunyit); }
.mk-fcard-u { padding-bottom: 4px; font-weight: 700; font-size: clamp(26px, 2.3vw, 34px); line-height: 1; letter-spacing: -.02em; }
.mk-fcard-u .it { display: block; margin-top: 4px; color: var(--kunyit); }
.mk-fcard-who { list-style: none; margin: 30px 0 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.mk-fcard-who li { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule-ink); }
.mk-fcard-who .mono { color: var(--kunyit); }
.mk-fcard-who b { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; font-weight: 650; }
.mk-fcard-note { margin: 16px 0 0; font-size: 15.5px; line-height: 1.45; color: rgba(250, 242, 226, .82); }
.mk-found-hero + .mk-today { padding-top: 0; }
.mk-today-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 80px); align-items: end; }
.mk-today-head .mk-lede { margin: 0; }
.mk-lob { list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); border-top: 2px solid var(--ink); }
.mk-lob li { display: flex; flex-direction: column; gap: 10px; padding: 24px 0 8px; }
.mk-lob-top { display: flex; align-items: flex-end; justify-content: space-between; }
.mk-lob-n { font-weight: 800; font-size: clamp(48px, 4.4vw, 68px); line-height: .78; letter-spacing: -.04em; font-variation-settings: "opsz" 96, "wdth" 75; color: var(--brown); }
.mk-lob .mk-ic { width: 32px; height: 32px; color: var(--brown); }
.mk-lob .mk-h3 { margin: 8px 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -.02em; }
.mk-lob p { margin: 0; font-size: 17px; line-height: 1.55; color: #3b2a1d; }
.mk-lob li > a { margin-top: auto; padding-top: 6px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--brown); text-underline-offset: 4px; }
.mk-draw .on.on-d { fill: #c98f06; }
.mk-hv2 .mk-hv-grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
.mk-branch { margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--ink); max-width: 36em; }
.mk-branch .kicker { margin-bottom: 8px; }
.mk-branch-h { margin: 0 0 10px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.mk-branch p { margin: 0; font-size: 17px; line-height: 1.55; color: #3b2a1d; }
.mk-hv-sit { margin-top: 26px; }
.mk-hv-sit > .mono, .mk-doc-sit > .mono { margin: 0 0 10px; }
/* contact: the shopfront at its own aspect with a caption; socials as the band's fourth line; the questions row */
.mk-shop { margin: 0; }
.mk-shop .im { max-width: 712px; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(94, 51, 20, .6); }
.mk-shop img { display: block; width: 100%; height: auto; aspect-ratio: 712 / 733; object-fit: cover; }
.mk-shop figcaption { margin-top: 12px; font-size: 12.5px; color: #3b2a1d; }
.mk-line-soc > div { display: grid; grid-template-columns: 34px 190px minmax(0, 1fr); align-items: center; gap: 18px; padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--rule-ink); }
.mk-line-soc .mk-ic { width: 30px; height: 30px; color: var(--kunyit); }
.mk-line-soc p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 30px; }
.mk-line-soc p a { color: var(--santan); font-weight: 700; font-size: clamp(24px, 2.8vw, 42px); line-height: 1.1; letter-spacing: -.02em; text-decoration: underline; text-decoration-color: var(--kunyit); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.mk-line-soc p a:hover { color: var(--kunyit); }
.mk-cq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin-top: 8px; border-top: 2px solid var(--ink); }
.mk-cq-i { padding: 24px 0 4px; scroll-margin-top: 96px; }
.mk-cq-i > .mk-ic { width: 30px; height: 30px; color: var(--brown); }
.mk-cq-h { margin: 12px 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.mk-cq-i p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: #3b2a1d; }
.mk-cq-i a { color: var(--ink); font-weight: 600; text-decoration-color: var(--brown); text-underline-offset: 3px; }
.mk-rev-grid.mk-rev-flat > :nth-child(n) { margin-top: 0; }
.mk-revs-go2 { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 28px 0 0; }
.mk-revs-go2 .mono { margin: 0; color: var(--brown-2); text-transform: none; letter-spacing: .02em; }
.mk-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.mk-ask2 .mk-ask-grid { align-items: center; }
/* FAQ: santan-2 alternate grounds, one object column on every group, the fish list, the 2,800 numeral, ruled related row */
.mk-fg-santan2 { border-image: conic-gradient(var(--santan-2) 0 0) fill 0 // 0 100vw; }
.mk-fgroup-body.mk-fg2 { grid-template-columns: minmax(0, 1fr) 320px; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.mk-fg2 > .qa { grid-column: 1; }
.mk-fg2 > .mk-fg-obj { grid-column: 2; grid-row: 1 / span 12; margin-top: 18px; }
.mk-fg-obj > .mono { margin: 0 0 10px; color: var(--brown-2); }
.mk-fg-ink .mk-fg-obj > .mono { color: var(--kunyit); }
.mk-fg-obj .mk-hours { margin-top: 0; }
.mk-fg-obj .mk-hours.mk-hours-sm div { gap: 10px; font-size: 14px; }
/* the FAQ's closing ticket: 'Isnin tutup' in ink with a sambal dot (sambal on kunyit is 3.7:1, under AA) */
.mk-t-faq .mk-closer-x { color: var(--ink); }
.mk-t-faq .mk-closer-x::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sambal); vertical-align: middle; }
.mk-fg-obj .facil { margin-top: 0; }
.mk-fg-obj .facil li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; font-size: 14.5px; }
.mk-fg-big { display: block; width: 56px; height: 56px; margin-bottom: 12px; color: var(--brown); }
.mk-fg-ink .mk-fg-big { color: var(--kunyit); }
.mk-fg-loc .mk-addr { margin-top: 0; }
.mk-fg-loc .mk-go { margin-top: 14px; }
.mk-fg-fish ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.mk-fg-fish li { padding: 10px 0; border-bottom: 1px solid var(--rule-ink); font-size: 18px; font-weight: 600; }
.mk-fg-fish li:last-child { font-weight: 400; color: rgba(250, 242, 226, .82); }
.mk-fg-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.mk-fg-rows li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-light); }
.mk-fg-rows .mk-ic { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--brown); }
.mk-fg-rows b { font-size: 16.5px; line-height: 1.2; }
.mk-fg-rows span { font-size: 14.5px; color: #4d3a2a; }
.mk-fg-n { margin: 0; font-weight: 800; font-size: clamp(72px, 7vw, 112px); line-height: .8; letter-spacing: -.05em; font-variation-settings: "opsz" 96, "wdth" 75; color: var(--brown); }
.mk-fg-numtxt { margin: 12px 0 0; font-size: 16.5px; line-height: 1.45; color: #3b2a1d; }
.mk-fg-obj .mk-sitstrip a, .mk-doc-sit .mk-sitstrip a, .mk-hv-sit .mk-sitstrip a { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 16px; }
.mk-fg-obj .mk-sitstrip b, .mk-doc-sit .mk-sitstrip b { font-size: 16px; }
.mk-fg-obj .mk-sitstrip span, .mk-doc-sit .mk-sitstrip span { grid-column: 2; text-align: left; font-size: 14px; }
.mk-fg-obj .mk-sitstrip a, .mk-doc-sit .mk-sitstrip a { grid-template-columns: 24px minmax(0, 1fr); }
.mk-rel-rows .mk-rel-grid { gap: 0 clamp(20px, 3vw, 44px); border-top: 2px solid var(--ink); }
.mk-rel-rows .mk-rel { display: grid; grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 2px 14px; align-items: start; min-height: 0; padding: 16px 2px 17px; border-radius: 0; background: none; border-bottom: 1px solid var(--rule-light); }
.mk-rel-rows .mk-rel:hover { transform: none; background: rgba(254, 196, 18, .25); }
.mk-rel-rows .mk-rel .mk-ic { grid-column: 1; grid-row: 1 / span 3; width: 24px; height: 24px; margin: 1px 0 0; }
.mk-rel-rows .mk-rel .mono, .mk-rel-rows .mk-rel-t, .mk-rel-rows .mk-rel-dek { grid-column: 2; }
.mk-rel-rows .mk-rel-go { position: static; grid-column: 3; grid-row: 1 / span 3; align-self: center; font-size: 18px; }
/* legal: the drawing, the dates, numerals outside the headings, ruled devices per part, the sittings in the rail */
.mk-doc-art { justify-self: end; align-self: center; width: 100%; max-width: 380px; color: var(--brown); }
.mk-tudung { display: block; width: 100%; height: auto; }
.mk-doc-ver { margin: 14px 0 0; max-width: 40em; font-size: 15px; line-height: 1.5; color: #4d3a2a; }
.mk-docsec-hd { display: flex; gap: 18px; align-items: center; margin: 0 0 16px; padding-top: 22px; border-top: 2px solid var(--ink); }
.mk-docsec-hd .mk-docsec-h { display: block; margin: 0; padding: 0; border: 0; }
.mk-docsub { margin: 1.4em 0 .5em; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.mk-rlist { list-style: none; margin: 4px 0 1.2em; padding: 0; border-top: 2px solid var(--ink); }
.mk-rlist li { padding: 11px 0; border-bottom: 1px solid var(--rule-light); font-size: 16.5px; line-height: 1.5; }
.mk-rlist-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.mk-rlist-kv li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 2px 16px; }
.mk-rlist-kv b { font-weight: 700; }
.mk-spec { list-style: none; margin: 4px 0 1.2em; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.mk-spec li { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule-light); font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.mk-rights { list-style: none; margin: 4px 0 1.2em; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; border-top: 2px solid var(--ink); }
.mk-rights li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule-light); }
.mk-rights b { font-size: 18px; line-height: 1.2; }
.mk-prose .mk-rights span { font-size: 14.5px; line-height: 1.4; color: #4d3a2a; }
.mk-doc-sit { margin-top: 20px; }
@media (max-width: 1000px) {
  .mk-board .mk-rail[data-spy] a.is-on, .mk-doc .mk-rail[data-spy] a.is-on { background: var(--kunyit); border-color: var(--kunyit); opacity: 1; }
  .mk-doc-grid > .mk-rail.mk-rail-rows ol { display: block; border-left: 0; border-top: 2px solid var(--ink); }
  .mk-doc-grid > .mk-rail.mk-rail-rows li a { padding: 10px 2px; border: 0; border-bottom: 1px solid var(--rule-light); border-radius: 0; }
}
@media (max-width: 900px) {
  .mk-today-head, .mk-lob, .mk-cq-grid, .mk-hv2 .mk-hv-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-fcard { justify-self: start; }
  .mk-fgroup-body.mk-fg2 { grid-template-columns: minmax(0, 1fr); }
  .mk-fg2 > .mk-fg-obj { grid-column: 1; grid-row: auto; max-width: 460px; margin: 18px 0 8px; }
  .mk-line-soc > div { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 18px; }
  .mk-line-soc .mk-ic { grid-row: 1 / span 2; }
  .mk-line-soc .mono, .mk-line-soc p { grid-column: 2; }
  .mk-doc-art { justify-self: start; max-width: 300px; }
  .mk-rel-rows .mk-rel-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-form-row, .mk-rlist-kv li { grid-template-columns: minmax(0, 1fr); }
  .mk-rights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-spec { grid-template-columns: minmax(0, 1fr); }
  .mk-fcard-num { font-size: 108px; }
  .mk-doc-art { max-width: 230px; }
}

/* ============================== GUIDES r2 (14 Oct 2026): /artikel/, /glosari-lauk-kampung/, the pillar + article shell ==============================
   reviews/raw/r1/{artikel,glosari-lauk-kampung,panduan-makan-di-mak-kimbong}.*.md. New classes only (mk-*2, mk-gloss-side,
   mk-addrcard ...) or rules scoped to the three guide types (body.mk-t-hub / .mk-t-glossary / .mk-t-article). */

/* reading rails: the chapter in view (site.js marks [data-spy] links .is-on) */
.mk-rail[data-spy] li a { position: relative; }
.mk-rail[data-spy] li a.is-on { opacity: 1; font-weight: 650; }
.mk-rail[data-spy] li a.is-on::before { content: ""; position: absolute; left: -3px; top: 6px; bottom: 6px; width: 4px; border-radius: 2px; background: var(--brown); }

/* ---- hub ---- */
.mk-t-hub .mk-hub-hero .mk-h1 { font-size: clamp(44px, 5.4vw, 86px); }
.mk-hub-also { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; margin: 28px 0 0; font-size: 16.5px; }
.mk-hub-also .mono { color: rgba(250, 242, 226, .72); }
.mk-t-hub main .mk-hub-also a { color: var(--santan); font-weight: 600; text-decoration-color: var(--kunyit); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mk-shelf2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(64px, 7vw, 90px) clamp(20px, 2.4vw, 36px); margin-top: clamp(64px, 6vw, 92px); }
.mk-pillar2 { padding-top: 0; }
.mk-pillar-disc { position: relative; z-index: 1; display: grid; place-items: center; width: clamp(136px, 12vw, 176px); aspect-ratio: 1; margin: calc(-1 * clamp(42px, 3.8vw, 56px)) 0 16px;
  border-radius: 50%; background: var(--kertas); color: var(--brown);
  box-shadow: inset 0 0 0 10px var(--santan-2), inset 0 0 0 11px rgba(94, 51, 20, .22), 0 26px 40px -20px rgba(94, 51, 20, .55); transition: transform 1.2s var(--ease); }
.mk-pillar-ic { width: 44%; height: 44%; }
.mk-pillar-ic * { vector-effect: non-scaling-stroke; stroke-width: 2.2px; }
.mk-pillar-top:hover .mk-pillar-disc { transform: rotate(-6deg); }
.mk-pillar-wide .mk-pillar-top p { max-width: 34em; }
.mk-pillar-wide .mk-pillar-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 4), auto); column-gap: clamp(20px, 2.4vw, 36px); align-content: start; }
.mk-acards2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-acards2 > :last-child:nth-child(odd) { grid-column: auto; }
.mk-acards2 > :first-child { grid-column: 1 / -1; }
.mk-acards2 > :last-child:nth-child(3n + 2) { grid-column: 1 / -1; }
.mk-acards2 > :last-child:nth-child(3n) { grid-column: span 2; }
.mk-acard2 a { display: flex; flex-direction: column; align-items: flex-start; height: 100%; padding: 22px 22px 20px; }
.mk-acard-disc { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 50%; color: var(--kunyit); box-shadow: inset 0 0 0 1px rgba(254, 196, 18, .45); }
.mk-acard-disc .mk-ic { width: 28px; height: 28px; }
.mk-acard2 .mk-acard-go { margin-top: auto; padding-top: 14px; }
.mk-acards2 > :first-child a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 2.6vw, 40px); align-items: start; padding: clamp(24px, 2.4vw, 34px); }
.mk-acards2 > :first-child .mk-acard-disc { grid-column: 1; grid-row: 1 / span 3; width: 112px; height: 112px; margin: 0; }
.mk-acards2 > :first-child .mk-acard-disc .mk-ic { width: 50px; height: 50px; }
.mk-acards2 > :first-child .mk-acard-tag, .mk-acards2 > :first-child h3, .mk-acards2 > :first-child p { grid-column: 2; }
.mk-acards2 > :first-child h3 { margin: 10px 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.05; letter-spacing: -.02em; max-width: 24em; }
.mk-acards2 > :first-child p { font-size: 17px; max-width: 40em; }
.mk-acards2 > :first-child .mk-acard-go { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; padding: 0; font-size: 17px; }
.mk-arch-hd { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.mk-arch2 .mk-arch-h { margin: 0; padding: 0; border: 0; }
.mk-arch2 .mk-arch-c { margin-left: auto; color: var(--brown); opacity: 1; white-space: nowrap; }
.mk-arch-note { margin: 14px 0 4px; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.2; color: var(--brown); }

/* ---- glossary ---- */
.mk-gloss-hero2 .mk-gloss-head { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: start; }
.mk-gloss-side { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 6px; }
.mk-gloss-fig { margin: 0; width: min(330px, 100%); text-align: center; }
.mk-gloss-fig .mk-plate { width: 100%; }
.mk-gloss-fig figcaption { margin-top: 10px; opacity: .82; }
.mk-gloss-hero2 .mk-gloss-count { flex-direction: row; align-items: flex-end; gap: 16px; align-self: center; }
.mk-gloss-hero2 .mk-gloss-n { font-size: clamp(80px, 8vw, 128px); }
.mk-gloss-hero2 .mk-gloss-count .mono { max-width: 14em; padding-bottom: 6px; line-height: 1.5; }
.mk-band-sits .mk-band-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 30px; }
.mk-band-sits .mk-band-st { grid-column: 1; grid-row: 1; }
.mk-band-sits .mk-go { grid-column: 2; grid-row: 1; }
.mk-band-sits .mk-band-sit { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding-top: 12px; border-top: 1px solid rgba(22, 13, 7, .3); }
.mk-band-sits .mk-band-sit li + li { padding-left: 20px; border-left: 1px solid rgba(22, 13, 7, .3); }
.mk-dict2 { padding-top: 0; }
.mk-dict2 .mk-dict-grid > .mk-rail { top: 96px; margin-top: clamp(40px, 4vw, 56px); background: var(--ink); color: var(--santan);
  box-shadow: 0 22px 44px -24px rgba(22, 13, 7, .6); }
.mk-dict2 .mk-rail .mk-ic { color: var(--kunyit); }
.mk-dict2 .mk-rail li a:hover { color: var(--kunyit); }
.mk-dict2 .mk-rail[data-spy] li a.is-on::before { background: var(--kunyit); }
.mk-dict2 .mk-rail-more { color: rgba(250, 242, 226, .8); }
.mk-t-glossary main .mk-dict2 .mk-rail a:not(.btn) { color: var(--santan); text-decoration-color: rgba(254, 196, 18, .7); }
.mk-tg-santan2 { border-image: conic-gradient(var(--santan-2) 0 0) fill 0 // 0 100vw; }
.mk-tg-ink { border-image: conic-gradient(var(--ink) 0 0) fill 0 // 0 100vw; color: var(--santan); }
.mk-tg-ink .mk-tgroup-h { border-bottom-color: var(--santan); color: var(--santan); }
.mk-tg-ink .mk-tgroup-h .mk-ic { color: var(--kunyit); }
.mk-tg-ink .mk-term { border-bottom-color: var(--rule-ink); }
.mk-tg-ink .mk-term dd p { color: rgba(250, 242, 226, .86); }
.mk-tg-ink .mk-term .mk-term-here { color: var(--santan); }
.mk-tg-ink .mk-term-here .mono { color: var(--kunyit); }
.mk-tg-ink .mk-term2::before { -webkit-text-stroke-color: var(--kunyit); }
.mk-tg-ink .mk-term:target { background: linear-gradient(90deg, rgba(254, 196, 18, .24), transparent 60%); }
.mk-tg-ink .mk-term2:target::before { color: var(--kunyit); }
.mk-t-glossary main .mk-tg-ink a:not(.btn) { color: var(--santan); text-decoration-color: rgba(254, 196, 18, .8); }
.mk-term2 { grid-template-columns: 44px minmax(200px, .3fr) minmax(0, 1fr); align-items: start; gap: 6px clamp(16px, 2.4vw, 36px); padding: 22px 0; }
.mk-term2::before { content: attr(data-i); grid-column: 1; grid-row: 1; display: grid; place-items: center; width: 40px; height: 40px; font-weight: 800; font-size: 36px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.3px var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-term2:target::before { color: var(--brown); -webkit-text-stroke-width: 0; }
.mk-term2 dt { grid-column: 2; grid-row: 1; padding-top: 4px; font-size: clamp(22px, 1.8vw, 26px); }
.mk-term2 dd { grid-column: 3; grid-row: 1; }
.mk-term2 dd p + p { margin-top: 8px; }
.mk-term2 .mk-term-here .mono { margin-right: 2px; }
.mk-term2 .mk-term-pl { float: right; width: 96px; margin: 0 0 8px 22px; }
.mk-cites2 { margin-top: clamp(36px, 4vw, 56px); padding: 0; border-radius: 0; background: none; }
.mk-cites2 > .mono { margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.mk-cites2 ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.mk-cites2 li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule-light); font-size: 15px; line-height: 1.4; }
.mk-cites2 li .mono { color: var(--brown-2); white-space: nowrap; }
.mk-cites-k { margin: 12px 0 0; font-size: 14.5px; color: #4d3a2a; }
.mk-gcloser .mk-closer-t { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .95fr); }
.mk-gcloser-menu { margin: 18px 0 0; font-size: 17px; font-weight: 650; }
.mk-gsits { list-style: none; margin: 0 0 12px; padding: 0; }
.mk-gsits li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid rgba(22, 13, 7, .28); font-size: 16px; line-height: 1.35; }
.mk-gsits .mk-ic { width: 20px; height: 20px; color: var(--brown); align-self: center; }
.mk-gsits-t { font-weight: 500; }
.mk-gsits-d { grid-column: 2 / -1; font-size: 14.5px; color: #3b2a1d; }
.mk-gcloser-wk { margin: 0 0 8px; font-size: 17px; line-height: 1.45; }
.mk-gnext { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; margin-top: 30px; padding-top: 16px; border-top: 2px solid var(--ink); }
.mk-gnext h3 { margin: 0; }
.mk-gnext a { font-weight: 650; font-size: 18px; color: var(--ink); }

/* ---- article (pillar + template) ---- */
.mk-t-article .mk-art-body { max-width: none; }
.mk-t-article .mk-art-body > * { max-width: var(--measure); }
.mk-t-article .mk-art-body > .mk-break:not(.mk-photo) { width: 100%; max-width: none; }
.mk-art-body h2[data-n]::before { content: attr(data-n); flex: none; font-weight: 800; font-size: 1.45em; line-height: .8; letter-spacing: -.04em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-art-fig-land { justify-self: end; width: 100%; max-width: 600px; }
.mk-art-fig-land .im { box-shadow: 0 30px 50px -30px rgba(94, 51, 20, .6); }
.mk-art-fig-land img { aspect-ratio: 6 / 5; }
.mk-art-body .mk-addrcard { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; align-items: start; margin: 30px 0; padding: 26px 28px; border-radius: var(--r-card); background: var(--santan-2); }
.mk-addrcard-ic { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--kunyit); color: var(--ink); }
.mk-addrcard-ic .mk-ic { width: 40px; height: 40px; }
.mk-art-body .mk-addrcard .mono { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: var(--brown-2); }
.mk-art-body .mk-addrcard-a { margin: 0; font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.mk-art-body .mk-addrcard-f { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.mk-art-body .mk-addrcard-f li { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.4; color: #3b2a1d; }
.mk-addrcard-f .mk-ic { width: 20px; height: 20px; color: var(--brown); }
.mk-addrcard .mk-go { margin-top: 18px; }
.mk-art-body .mk-bignum { display: flex; align-items: flex-end; gap: 24px; margin: 30px 0; }
.mk-art-body .mk-bignum-n { margin: 0; flex: none; font-weight: 800; font-size: clamp(84px, 9vw, 150px); line-height: .78; letter-spacing: -.05em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-bignum figcaption { max-width: 22em; padding-bottom: 4px; font-size: 17px; line-height: 1.45; color: #3b2a1d; }
.mk-bignum figcaption b { display: block; font-size: 22px; line-height: 1.2; color: var(--ink); }
.mk-art-body .mk-pick { list-style: none; margin: 30px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: pk; }
.mk-art-body .mk-pick li { counter-increment: pk; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border-radius: var(--r-tile); background: var(--santan-2); font-size: 16px; line-height: 1.45; }
.mk-art-body .mk-pick li::before { content: counter(pk); margin-bottom: 6px; font-weight: 800; font-size: 54px; line-height: .85; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-pick b { font-size: 19px; line-height: 1.2; color: var(--ink); }
.mk-pick span { color: #3b2a1d; }
.mk-favfig2 { padding: 28px 28px 20px; }
.mk-art-body .mk-favnum { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: fv; }
.mk-art-body .mk-favnum li { counter-increment: fv; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 8px; align-items: end;
  padding: 0 0 16px; border-bottom: 1px solid var(--rule-ink); font-size: 17px; line-height: 1.25; }
.mk-art-body .mk-favnum li::before { content: counter(fv); grid-row: 1 / span 2; font-weight: 800; font-size: clamp(72px, 7vw, 108px); line-height: .78; color: transparent;
  -webkit-text-stroke: 1.6px var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-favnum .mk-ic { width: 30px; height: 30px; color: var(--kunyit); }
.mk-favnum b { color: var(--santan); font-weight: 650; }
.mk-facfig { margin: 30px 0; padding: 16px; border-radius: var(--r-card); background: var(--santan-2); }
.mk-art-body .mk-facfig .mk-facil { margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-art-body .mk-facfig .facil li { background: var(--santan); font-size: 15.5px; line-height: 1.25; }
.mk-packrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 30px 0; }
.mk-art-body a.mk-pack { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 4px; align-items: center;
  padding: 22px 24px; border-radius: var(--r-card); background: var(--bark); color: var(--santan); text-decoration: none; transition: background .3s, transform .5s var(--ease); }
.mk-art-body a.mk-pack:hover { background: #4a2c15; transform: translateY(-3px); }
.mk-pack-ic { grid-column: 1; grid-row: 1 / span 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--kunyit); box-shadow: inset 0 0 0 1px rgba(254, 196, 18, .45); }
.mk-pack .mono { grid-column: 2; color: rgba(250, 242, 226, .72); }
.mk-pack b { grid-column: 2; font-size: 21px; line-height: 1.15; font-weight: 650; }
.mk-pack-d { grid-column: 2; font-size: 15px; line-height: 1.35; color: rgba(250, 242, 226, .8); }
.mk-pack-p { grid-column: 3; grid-row: 1 / span 3; font-weight: 800; font-size: clamp(34px, 3vw, 46px); line-height: .9; letter-spacing: -.03em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; white-space: nowrap; }
.mk-relcols { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 4), auto);
  column-gap: clamp(28px, 4vw, 64px); border-top: 2px solid var(--ink); }
.mk-relcols li { border-bottom: 1px solid var(--rule-light); }
.mk-t-article main .mk-relcols a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 20px; gap: 4px 18px; align-items: baseline; padding: 15px 2px; color: var(--ink); text-decoration: none; transition: background .3s; }
.mk-relcols a::after { content: "→"; color: var(--brown); font-size: 18px; }
.mk-relcols a:hover { background: rgba(254, 196, 18, .25); }
.mk-relcols .mono { color: var(--brown-2); }
.mk-relc-t { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
.mk-relcols-more { margin: 22px 0 0; font-size: 16px; color: #3b2a1d; }

@media (max-width: 1180px) {
  .mk-gcloser .mk-closer-t { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-art-body .mk-facfig .mk-facil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .mk-shelf2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-shelf2 > .mk-pillar-wide { grid-column: 1 / -1; }
  .mk-acards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-acards2 > :last-child:nth-child(3n + 2), .mk-acards2 > :last-child:nth-child(3n) { grid-column: auto; }
  .mk-acards2 > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .mk-cites2 ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-rail[data-spy] li a.is-on::before { display: none; }
  .mk-rail[data-spy] li a.is-on { background: var(--kunyit); border-color: var(--kunyit); color: var(--ink); }
  .mk-dict2 .mk-dict-grid > .mk-rail { margin-top: 28px; }
  .mk-t-glossary main .mk-dict2 .mk-rail a.is-on:not(.btn) { color: var(--ink); }
}
@media (max-width: 900px) {
  .mk-shelf2 { grid-template-columns: minmax(0, 1fr); }
  .mk-gcloser .mk-closer-t { grid-template-columns: minmax(0, 1fr); }
  .mk-gloss-hero2 .mk-gloss-head { grid-template-columns: minmax(0, 1fr); }
  .mk-relcols { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .mk-packrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-pillar-disc { width: 124px; margin-top: -40px; }
  .mk-pillar-wide .mk-pillar-list { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .mk-acards2 { grid-template-columns: minmax(0, 1fr); }
  .mk-acards2 > * { grid-column: auto !important; }
  .mk-acard2 a { padding: 16px 16px 16px; border-radius: 18px; }
  .mk-acards2 > :first-child a { display: flex; padding: 18px 16px; }
  .mk-acards2 > :first-child .mk-acard-disc { width: 72px; height: 72px; margin-bottom: 14px; }
  .mk-acards2 > :first-child .mk-acard-disc .mk-ic { width: 34px; height: 34px; }
  .mk-acards2 > :first-child h3 { font-size: 24px; }
  .mk-acards2 > :first-child .mk-acard-go { margin-top: auto; padding-top: 14px; }
  .mk-acard-disc { width: 48px; height: 48px; margin-bottom: 12px; }
  .mk-acard-disc .mk-ic { width: 24px; height: 24px; }
  .mk-gloss-side { order: 5; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; margin-top: 28px; padding: 0; }
  .mk-gloss-fig { width: 128px; flex: none; }
  .mk-gloss-fig figcaption { display: none; }
  .mk-gloss-hero2 .mk-gloss-count { order: 0; margin: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .mk-gloss-hero2 .mk-gloss-n { font-size: 72px; }
  .mk-band-sits .mk-band-in { grid-template-columns: minmax(0, 1fr); }
  .mk-band-sits .mk-go { grid-column: 1; grid-row: 3; }
  .mk-band-sits .mk-band-sit { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 10px; }
  .mk-band-sits .mk-band-sit li + li { padding-left: 0; border-left: 0; }
  .mk-dict2 .mk-term2 { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 12px; padding: 18px 0; }
  .mk-dict2 .mk-term2::before { width: 30px; height: 30px; font-size: 28px; }
  .mk-dict2 .mk-term2 dt { grid-column: 2; grid-row: 1; padding-top: 2px; }
  .mk-dict2 .mk-term2 dd { grid-column: 1 / -1; grid-row: 2; }
  .mk-dict2 .mk-term2 .mk-term-pl { width: 64px; margin-left: 14px; }
  .mk-cites2 ol { grid-template-columns: minmax(0, 1fr); }
  .mk-art-fig-land img { aspect-ratio: 16 / 10; }
  .mk-art-body .mk-addrcard { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 18px; }
  .mk-addrcard-ic { width: 64px; height: 64px; }
  .mk-addrcard-ic .mk-ic { width: 30px; height: 30px; }
  .mk-art-body .mk-bignum { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mk-art-body .mk-favnum { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mk-art-body .mk-pick { grid-template-columns: minmax(0, 1fr); }
  .mk-art-body .mk-favnum li::before { font-size: 64px; }
  .mk-art-body a.mk-pack { grid-template-columns: 48px minmax(0, 1fr); padding: 18px; }
  .mk-pack-ic { width: 48px; height: 48px; }
  .mk-pack-p { grid-column: 2; grid-row: auto; margin-top: 6px; font-size: 34px; }
  .mk-t-article main .mk-relcols a { grid-template-columns: minmax(0, 1fr) 18px; }
  .mk-relcols .mono { grid-column: 1; }
  .mk-relc-t { grid-column: 1; }
  .mk-relcols a::after { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* ---- 21 Oct 2026 design polish (core pages, helper B). Scoped to the non-article pages (.mk-t-wr = the writer's
   articles, which another helper owns). (1) No word alone on the last line of a heading, summary or row title;
   (2) body text avoids a one-word last line; (3) the live status line splits evenly instead of leaving "pagi" alone;
   (4) times, phone numbers and day spans never break inside (.mk-nw, set by aeo_render.nobreak); (5) the hub
   ticket's small week table: no "Hari ini" pill squeezing the hours onto two lines (the row keeps its highlight). */
.mk-inner:not(.mk-t-wr) main { text-wrap: pretty; }
.mk-inner:not(.mk-t-wr) main h1 { text-wrap: balance; }  /* the italic second voice ("dan / juicy.") too */
.mk-inner:not(.mk-t-wr) main :is(h2, h3, h4, summary, .mk-ab-sig, .mkx-gp-h, .mkx-next-t, .mk-relp-h, .mk-next2-h,
  .mk-pk-h3, .mk-cq-h, .mk-docsec-h, .mk-pv-card-h, .mkx-lead) { text-wrap: balance; }
.mk-inner:not(.mk-t-wr) .mk-live { text-wrap: balance; }
.mk-nw { white-space: nowrap; }
.mk-inner:not(.mk-t-wr) .mk-hours-sm div.today::before { display: none; }
.mk-inner:not(.mk-t-wr) .mk-hours-sm div span:last-child { white-space: nowrap; }
/* the FAQ's quick-answer tiles are ~120px wide on a 360px phone: there the day span may break after its dash */
@media (max-width: 400px) { .mk-wall b .mk-nw { white-space: normal; } }

/* 22 Oct 2026 (Amber, req-999A407B): Khairul's new menu photos on /menu/ (pages_services.pic / round_pic).
   Cards are printed photos laid on the table (4:5, santan border); round crops sit in the round plate slots. */
.mk-pic { display: inline-flex; flex-direction: column; align-items: center; text-align: center; vertical-align: top; }
.mk-pic-im { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--ink-2);
  border: 5px solid var(--santan); box-shadow: 0 14px 30px rgba(31, 18, 8, .26); transform: rotate(var(--r, 0deg));
  transition: transform .9s var(--ease); }
.mk-pic-im img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-pic:hover .mk-pic-im { transform: rotate(0deg) scale(1.02); }
.mk-pic-nm { display: block; margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.25; }
.mk-chap-plates > .mk-pic { width: min(190px, 100%); }
.mk-spread-foto .mk-spp { position: absolute; z-index: 2; width: 35%; }
.mk-spread-foto .mk-spp-1 { left: 9%; top: 5%; }
.mk-spread-foto .mk-spp-2 { left: 55%; top: 3%; }
.mk-spread-foto .mk-spp-3 { left: 14%; top: 42%; }
.mk-spread-foto .mk-spp-4 { left: 52%; top: 44%; }
.mk-spread-foto .mk-pic-im { border-width: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.mk-plate-foto .mk-plate-im::before { display: none; }
.mk-plate-foto .mk-plate-im img { border-radius: 50%; object-fit: cover; transform: none;
  box-shadow: 0 0 0 4px var(--santan), 0 10px 24px rgba(0, 0, 0, .3); }
.mk-plate-foto:hover .mk-plate-im img { transform: scale(1.03); }

/* 22 Oct 2026 (Amber, req-999A407B): the real pack and jar photos Khairul's team sent (pages_shop._foto), on /shop/, the
   three pack pages and /makanan-siap-mak-kimbong/, in place of the line drawings. The set = its two packs, overlapped. */
.mk-foto-one, .mk-foto-pair { display: block; }
.mk-foto { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--ink-2); }
.mk-foto-pair { position: relative; aspect-ratio: 1; }
.mk-foto-pair .mk-foto { position: absolute; width: 66%; box-shadow: 0 10px 26px rgba(31, 18, 8, .32); }
.mk-foto-pair .mk-foto:first-child { left: 0; top: 0; }
.mk-foto-pair .mk-foto:last-child { right: 0; bottom: 0; }
.mk-rak-art .mk-foto-rak { width: 100%; max-width: 230px; margin-bottom: 14px; transition: transform .5s var(--ease); }
.mk-rak-it a:hover .mk-foto-rak { transform: translateY(-4px); }
.mk-pk-hero-foto .mk-foto-hero { position: relative; width: min(78%, 440px); }
.mk-pk-hero-foto .mk-foto-one .mk-foto { border-radius: 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.mk-foto-th { flex: none; width: 56px; }
.mk-foto-th .mk-foto { border-radius: 8px; }
.mkx-board-pk .mk-foto-th { margin: 0 4px 0 0; }
.mk-foto-ex { width: 84px; }
.mk-foto-card { width: min(100%, 340px); margin: 0 auto; }
.mk-sum-hero-art .mk-foto-bundle { width: 100%; }
.mk-foto-in { width: 96px; }
.mkx-cc-i .mk-foto-cc { width: 100%; max-width: 150px; }
@media (max-width: 760px) {
  .mk-foto-th { width: 44px; }
  .mk-foto-ex { width: 68px; }
  .mk-foto-in { width: 76px; }
}
@media (max-width: 760px) {
  .mk-spread-foto .mk-spp { width: 33%; }
  .mk-spread-foto .mk-spp-1 { top: 4%; }
  .mk-spread-foto .mk-spp-2 { top: 2%; }
  .mk-spread-foto .mk-spp-3 { top: 37%; }
  .mk-spread-foto .mk-spp-4 { top: 39%; }
  .mk-spread-foto .mk-pic-im { border-width: 4px; }
}