/* =============================================================================================
   Mak Kimbong · the SHOP group's own sheet (pages_shop.py) · Acclaira, 14 Oct 2026 (round 2)
   /shop/, /combo/, /product/set-combo-terbakar/, /product/kambing-bakar-sambal-kicap/, /rte/,
   the two /cara-penyediaan-... guides and /kerjaya/ link it AFTER css/inner.css. Every selector is a class of this
   group (mk-pk-*, mk-rak-*, mk-resit-*, mk-sum-*, mk-jar-*, mk-guide-*, mk-kj-*, mk-notis-*, mk-cr-*, mk-nb);
   it never selects the chrome (.nav, .foot) and never restyles an inner.css component on another page.
   No photos (PHOTOS.md: these pages get line icons) except one spare plate in the kambing dine-in band:
   the objects are line drawings, big price numerals (kunyit on ink, brown on light), a receipt, a ruled
   sum, a shelf, a notice.
   ============================================================================================= */

/* ---------- small things ---------- */
.mk-nb { white-space: nowrap; }
.mk-jejak .mk-cr-l, .mk-jejak .mk-cr-s { opacity: 1; }
.mk-cr-s { display: none; }

/* ---------- line drawings ---------- */
.mk-pk-draw { display: block; width: 100%; height: auto; color: var(--brown); --pk-bg: var(--santan); --pk-k: var(--brown-2); }
.mk-pk-draw * { vector-effect: non-scaling-stroke; }
.mk-pk-draw .bg { fill: var(--pk-bg); }
.mk-pk-draw .k { stroke: var(--pk-k); }
.mk-kertas .mk-pk-draw { --pk-bg: var(--kertas); }
.mk-kunyit .mk-pk-draw { --pk-bg: var(--kunyit); --pk-k: var(--brown); }
.mk-ink .mk-pk-draw { color: rgba(250, 242, 226, .92); --pk-bg: var(--ink); --pk-k: var(--kunyit); }
.mk-pk-draw-xl g { stroke-width: 2.2; }
.mk-pk-bi { width: 52px; height: 52px; flex: none; color: var(--brown); }
.mk-pk-bi path, .mk-pk-bi circle { vector-effect: non-scaling-stroke; stroke-width: 1.8px; }
.mk-ink .mk-pk-bi { color: var(--kunyit); }

/* ---------- rhythm ---------- */
.mk-h2 + .mk-prose, .mk-h2 + .mk-lede { margin-top: 24px; }
/* a section head in two columns: heading left, lede right (no empty half at 1440) */
.mk-pk-head2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(30px, 5vw, 84px); align-items: end; }
.mk-pk-head2 > .mk-lede, .mk-pk-head2 > div > .mk-lede, .mk-pk-head2 .mk-prose p:last-child { margin: 0; }
.mk-pk-noprice .mono { font-size: 14px; }

/* ---------- three beats: the client's one line drawn (no numerals; it is one instruction) ---------- */
.mk-pk-beats { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-light); }
.mk-ink .mk-pk-beats { border-top-color: var(--rule-ink); border-bottom-color: var(--rule-ink); }
.mk-pk-beats li { position: relative; display: flex; align-items: center; gap: 18px; padding: clamp(20px, 2.4vw, 30px) 20px clamp(20px, 2.4vw, 30px) 0; }
.mk-pk-beats li + li { padding-left: 40px; }
.mk-pk-beats li + li::before { content: "→"; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; opacity: .55; }
.mk-pk-beats span { font-weight: 700; font-size: clamp(21px, 2vw, 28px); line-height: 1.1; letter-spacing: -.015em; font-variation-settings: "opsz" 96, "wdth" 85; }
.mk-pk-serve-note { margin: 20px 0 0; max-width: 52em; font-size: 17px; line-height: 1.6; color: #3b2a1d; }
.mk-ink .mk-pk-serve-note { color: rgba(250, 242, 226, .86); }

/* ---------- dine-in band: two voices; a drawing or one plate ---------- */
.mk-pk-dine-art { width: 200px; }
.mk-pk-dine-art .mk-pk-draw { --pk-bg: var(--kunyit); color: var(--brown); }
.mk-pk-dine-h { font-size: clamp(26px, 2.6vw, 38px); line-height: 1; }
.mk-pk-dine-h .it { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -.01em; color: var(--brown); }

/* ---------- spec list (a <dl>) ---------- */
.mk-pk-spec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mk-pk-specs { margin: 0; border-top: 2px solid var(--ink); }
.mk-pk-specs > div { display: grid; grid-template-columns: minmax(118px, .62fr) minmax(0, 1.38fr); gap: 6px 22px; padding: 17px 0; border-bottom: 1px solid var(--rule-light); }
.mk-pk-specs dt { margin: 0; padding-top: 4px; color: var(--brown-2); }
.mk-pk-specs dd { margin: 0; font-size: 18px; line-height: 1.5; color: #2b1d12; }
.mk-pk-specs dd b { font-weight: 800; font-size: 1.3em; line-height: 1; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-pk-specs dd a { color: inherit; }

/* ---------- drawn product cards ---------- */
.mk-pk-cards { display: grid; gap: 16px; margin-top: clamp(26px, 3vw, 40px); }
.mk-pk-cards.mk-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-pk-cards.mk-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-pk-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 24px 26px 28px; border-radius: var(--r-card); background: var(--bark); color: var(--santan); text-decoration: none; transition: transform .5s var(--ease), background .3s; }
.mk-pk-card:hover { transform: translateY(-3px); background: #432812; }
.mk-pk-card-art { display: block; width: min(100%, 240px); margin: 0 auto 6px; }
.mk-pk-card .mk-pk-draw { color: rgba(250, 242, 226, .92); --pk-bg: var(--bark); --pk-k: var(--kunyit); }
.mk-pk-card:hover .mk-pk-draw { --pk-bg: #432812; }
.mk-pk-card .mono { color: rgba(250, 242, 226, .74); }
.mk-pk-card-t { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.08; letter-spacing: -.018em; font-variation-settings: "opsz" 96, "wdth" 88; }
.mk-pk-card-d { font-size: 16px; line-height: 1.5; color: rgba(250, 242, 226, .82); }
.mk-pk-cprice { margin-top: 10px; font-weight: 800; font-size: clamp(34px, 3vw, 46px); line-height: .9; letter-spacing: -.035em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 78; }
.mk-pk-cprice small { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 242, 226, .74); margin-left: 6px; }
.mk-pk-card .mk-pk-cprice-t { margin-top: 12px; color: rgba(250, 242, 226, .86); }
.mk-pk-card-go { position: absolute; top: 20px; right: 24px; font-size: 22px; color: var(--kunyit); }
.mk-pk-cards-light .mk-pk-card { background: var(--santan); color: var(--ink); }
.mk-kertas .mk-pk-cards-light .mk-pk-card { background: var(--santan); }
.light .mk-pk-cards-light .mk-pk-card { background: var(--santan-2); }
.mk-pk-cards-light .mk-pk-card:hover { background: #ecdcbb; }
.mk-pk-cards-light .mk-pk-draw { color: var(--brown); --pk-bg: var(--santan); --pk-k: var(--brown-2); }
.light .mk-pk-cards-light .mk-pk-draw { --pk-bg: var(--santan-2); }
.mk-pk-cards-light .mk-pk-card:hover .mk-pk-draw { --pk-bg: #ecdcbb; }
.mk-pk-cards-light .mono, .mk-pk-cards-light .mk-pk-cprice small, .mk-pk-cards-light .mk-pk-card .mk-pk-cprice-t { color: var(--brown-2); }
.mk-pk-cards-light .mk-pk-card-d { color: #3b2a1d; }
.mk-pk-cards-light .mk-pk-cprice, .mk-pk-cards-light .mk-pk-card-go { color: var(--brown); }
.mk-pk-more-all { margin: 26px 0 0; font-size: 17px; }
.mk-ink .mk-pk-more-all { color: rgba(250, 242, 226, .86); }

/* ---------- /shop/: the shelf ---------- */
.mk-rak-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 4vw, 72px); align-items: center; }
.mk-rak { margin: 0; }
/* two shelves of two; every drawing box has the same height, so both shelf rules share one baseline */
.mk-rak-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; row-gap: clamp(26px, 3vw, 40px); }
.mk-rak-it a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.mk-rak-art { display: flex; align-items: flex-end; justify-content: center; padding: 0 clamp(8px, 2vw, 30px); border-bottom: 6px solid var(--brown); }
.mk-rak-art .mk-pk-draw { max-width: 270px; }
.mk-rak .fl { display: none; }
.mk-rak-it a:hover .mk-pk-draw { transform: translateY(-4px); }
.mk-rak .mk-pk-draw { transition: transform .5s var(--ease); --pk-bg: var(--kertas); }
.mk-pk-tag { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 14px 8px 0; }
.mk-pk-tagp { font-weight: 800; font-size: clamp(28px, 2.4vw, 34px); line-height: .95; letter-spacing: -.03em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 78; }
.mk-pk-tagj { padding-top: 10px; color: var(--brown-2); }
.mk-pk-tagn { font-size: 17px; font-weight: 650; line-height: 1.2; }
.mk-pk-tag .mono { color: var(--brown-2); }
.mk-rak figcaption { margin-top: 18px; color: var(--brown-2); }
.mk-pk-table td:last-child b { display: block; font-weight: 800; font-size: 26px; line-height: 1; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-pk-jimat { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.35; color: #3b2a1d; }
.mk-pk-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-pk-how .mk-prose p { margin: 0; }
.mk-pk-ways { margin: 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.mk-pk-ways > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 16px; padding: 20px 0; border-bottom: 1px solid var(--rule-ink); }
.mk-pk-ways .mk-ic { grid-row: 1 / span 2; color: var(--kunyit); margin-top: 2px; }
.mk-pk-ways dt { margin: 0; color: rgba(250, 242, 226, .78); }
.mk-pk-ways dd { margin: 4px 0 0; font-weight: 800; font-size: clamp(28px, 3vw, 46px); line-height: 1.02; letter-spacing: -.025em; font-variation-settings: "opsz" 96, "wdth" 78; overflow-wrap: anywhere; }
.mk-pk-ways dd a { color: var(--santan); text-decoration: none; }
.mk-pk-ways dd a:hover { color: var(--kunyit); }
/* the close: the visit panel, its side column the online lunch ticket */
.mk-pk-onl, .mk-kj-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(24px, 3vw, 38px); border-radius: var(--r-card); background: var(--santan); color: var(--ink); }
.mk-pk-onl-art { display: block; width: min(100%, 220px); margin: 0 0 4px; }
.mk-pk-onl .mk-pk-draw { --pk-bg: var(--santan); }
.mk-pk-onl-k, .mk-kj-side .mono { margin: 0; color: var(--brown-2); }
.mk-pk-onl-q, .mk-kj-side-t { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 86; }
.mk-pk-onl p, .mk-kj-side p:not(.mono):not(.mk-kj-side-n) { margin: 0; font-size: 17px; line-height: 1.55; color: #3b2a1d; }
.mk-pk-onl-url { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.mk-pk-onl-url .mk-ic { color: var(--brown); }
.mk-inner main .mk-pk-onl-n { font-size: 15px; }

/* ---------- /combo/: the receipt ---------- */
.mk-resit-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-resit { position: relative; justify-self: end; width: 100%; max-width: 440px; margin: 0 0 12px; padding: 30px 30px 26px; border-radius: 6px 6px 0 0; background: var(--santan); color: var(--ink); transform: rotate(2.2deg); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .9); }
.mk-resit::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px; background: conic-gradient(from -45deg at 50% 0, var(--santan) 90deg, transparent 0) 0 0 / 18px 12px repeat-x; }
.mk-resit-k { margin: 0 0 6px; text-align: center; color: var(--brown-2); }
.mk-resit-rows { list-style: none; margin: 0; padding: 0 0 16px; border-bottom: 2px dashed rgba(94, 51, 20, .55); }
.mk-resit-rows li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; }
.mk-resit-rows .mk-ic { width: 30px; height: 30px; color: var(--brown); margin-top: 0; }
.mk-resit-n a { display: block; color: inherit; font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -.012em; text-decoration: none; }
.mk-resit-n a:hover { text-decoration: underline; }
.mk-resit-n small { display: block; margin-top: 4px; font-size: 15px; color: #4d3a2a; }
li.mk-resit-plus { display: block; padding: 0; text-align: center; font-weight: 800; font-size: 30px; line-height: 1; color: var(--brown); }
.mk-resit-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 0; }
.mk-resit-total .mono { color: var(--brown-2); }
.mk-resit-p { font-weight: 800; font-size: clamp(52px, 5vw, 76px); line-height: .9; letter-spacing: -.04em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 78; }
.mk-resit figcaption { margin-top: 14px; text-align: center; color: var(--brown-2); }
/* what is in the set: the two packs drawn large, stacked over their text on phones */
.mk-pk-isi-rows { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.mk-pk-isi-rows li { display: grid; grid-template-columns: minmax(150px, 240px) minmax(0, 1fr); gap: 26px; align-items: center; padding-top: 22px; border-top: 2px solid var(--ink); }
.mk-pk-isi-t { margin: 0 0 8px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 86; }
.mk-pk-isi-t a { color: inherit; text-decoration: none; }
.mk-pk-isi-rows p { margin: 0; font-size: 17.5px; line-height: 1.58; color: #3b2a1d; }
.mk-pk-isi-rows p.mk-pk-isi-go { margin-top: 12px; font-weight: 600; }
/* why: the client's three lines as kunyit serif quotes on ink */
.mk-pk-why-row { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.mk-pk-why-row li { padding-top: 18px; border-top: 2px solid var(--rule-ink); }
.mk-pk-why-row .mono { margin: 0; color: rgba(250, 242, 226, .74); }
.mk-pk-q { margin: 12px 0 14px; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 2.8vw, 44px); line-height: 1.06; color: var(--kunyit); }
.mk-pk-why-row p:not(.mono) { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(250, 242, 226, .84); }
/* when: the client's own list, one drawn icon each */
.mk-pk-who-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-pk-when { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.mk-pk-when li { display: flex; align-items: center; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--rule-light); }
.mk-pk-when span { font-weight: 700; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.018em; font-variation-settings: "opsz" 96, "wdth" 86; }
/* about: prose left, one big numeral object right */
.mk-pk-about-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-pk-numobj { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-pk-numobj b { font-weight: 800; font-size: clamp(96px, 11vw, 170px); line-height: .8; letter-spacing: -.05em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-pk-numobj > span { font-size: 18px; line-height: 1.45; color: #3b2a1d; }
.mk-pk-numobj > a { font-weight: 600; }
.mk-pk-numfacts { margin: 6px 0 0; }
.mk-pk-numfacts > div { padding: 12px 0; border-top: 1px solid var(--rule-light); }
.mk-pk-numfacts dt { margin: 0 0 4px; color: var(--brown-2); }
.mk-pk-numfacts dd { margin: 0; font-weight: 650; font-size: 18px; }
/* set or single: the ruled sum that closes /combo/ */
.mk-pk-sum-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-pk-sum { margin: 0; }
.mk-pk-sum ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.mk-pk-sum-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule-ink); }
.mk-pk-sum-r .mk-ic { width: 32px; height: 32px; color: var(--kunyit); }
.mk-pk-sum-n { grid-column: 2; font-weight: 650; font-size: 19px; line-height: 1.25; }
.mk-pk-sum-n a { color: var(--santan); }
.mk-pk-sum-n small { display: block; margin-top: 2px; font: 600 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 242, 226, .7); }
.mk-pk-sum-p { font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -.03em; color: var(--santan); font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-pk-sum-sub { border-top: 2px solid var(--rule-ink); }
.mk-pk-sum-set .mk-pk-sum-p { font-size: clamp(48px, 4.6vw, 72px); color: var(--kunyit); }
.mk-pk-sum-save { border-bottom: 0; }
.mk-pk-sum-save .mk-pk-sum-n { font: 600 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kunyit); }
.mk-pk-sum-save .mk-pk-sum-p { color: var(--kunyit); }
.mk-pk-sum figcaption { margin-top: 12px; color: rgba(250, 242, 226, .7); }

/* ---------- /product/set-combo-terbakar/: the bundle maths is the hero object ---------- */
.mk-sum-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-sum-hero { margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); background: var(--bark); color: var(--santan); }
.mk-sum-hero-art { display: block; max-width: 400px; margin: 0 auto; }
.mk-sum-hero .mk-pk-draw { color: rgba(250, 242, 226, .92); --pk-bg: var(--bark); --pk-k: var(--kunyit); }
.mk-sum-hero-p { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 0; }
.mk-sum-hero-p .mono { color: rgba(250, 242, 226, .8); }
.mk-sum-hero-rows { list-style: none; margin: 16px 0 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.mk-sum-hero-rows li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-ink); font-size: 17px; }
.mk-sum-hero-rows .mk-ic { color: var(--kunyit); }
.mk-sum-hero-rows a { color: var(--santan); }
.mk-sum-hero-rows b { font-weight: 800; font-size: 22px; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-sum-hero-rows .mk-sum-hero-sub span { grid-column: 1 / 3; font: 600 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 242, 226, .78); }
.mk-sum-hero figcaption { margin-top: 14px; color: var(--kunyit); }

/* ---------- product page (pack hero) ---------- */
.mk-pk-hero { background: var(--ink); color: var(--santan); }
.mk-pk-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-pk-hero-flip .mk-pk-hero-art { order: 2; }
.mk-pk-hero-art { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(12px, 2vw, 28px) 0 0; }
.mk-pk-hero-art::before { content: ""; position: absolute; left: 50%; top: 46%; width: min(92%, 540px); aspect-ratio: 1; border-radius: 50%; background: var(--bark); transform: translate(-50%, -50%); }
.mk-pk-hero-art .mk-pk-draw { position: relative; max-width: 560px; --pk-bg: var(--bark); color: rgba(250, 242, 226, .94); --pk-k: var(--kunyit); }
.mk-pk-hero-tag { position: relative; margin: 10px 0 0; opacity: .78; }
.mk-pk-hero .mk-price { margin-top: 22px; }
.mk-pk-paircard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(26px, 3.4vw, 52px); border-radius: var(--r-card); background: var(--bark); color: var(--santan); text-decoration: none; }
.mk-pk-paircard .mk-pk-draw { --pk-bg: var(--bark); color: rgba(250, 242, 226, .92); --pk-k: var(--kunyit); }
.mk-pk-paircard-b { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.mk-pk-paircard .mk-h2 .it { color: var(--kunyit); }
.mk-pk-paircard-p { max-width: 34em; font-size: 18px; line-height: 1.55; color: rgba(250, 242, 226, .84); }
.mk-pk-paircard .mk-price { margin: 0; }

/* ---------- /rte/: the jar ---------- */
.mk-jar-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-jar { position: relative; margin: 0; }
.mk-jar .mk-pk-draw { max-width: 640px; margin-inline: auto; --pk-bg: var(--kertas); --pk-k: var(--sambal); }
.mk-jar-stamp { position: absolute; top: 2%; right: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(118px, 11vw, 150px); aspect-ratio: 1; margin: 0; border-radius: 50%; background: var(--sambal); color: var(--santan); transform: rotate(-10deg); font-weight: 800; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.04; text-align: center; font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-jar figcaption { margin-top: 12px; text-align: center; color: var(--brown-2); }
.mk-jar-pairs { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.mk-jar-pairs li { display: flex; align-items: center; gap: 18px; padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-jar-pairs span { font-weight: 700; font-size: clamp(26px, 2.4vw, 36px); line-height: 1; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 85; }
.mk-jar-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 44px); }
.mk-jar-vs-c { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 4px 24px; align-content: start; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-card); background: var(--santan); }
.mk-jar-vs-art { grid-row: 1 / span 2; align-self: center; }
.mk-jar-vs-c .mk-pk-draw { --pk-bg: var(--santan); }
.mk-jar-vs-c > .mono { margin: 0; align-self: end; color: var(--brown-2); }
.mk-jar-vs-t { margin: 0; align-self: start; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.08; letter-spacing: -.018em; }
.mk-jar-vs-dl { grid-column: 1 / -1; margin-top: 18px; }
.mk-jar-vs-dl > div { grid-template-columns: minmax(110px, .5fr) minmax(0, 1.5fr); }
.mk-jar-vs-cap { margin: 14px 0 0; color: var(--brown-2); }
.mk-pk-linkrow-sec { padding: clamp(40px, 4vw, 60px) 0; }
.mk-pk-linkrow-t { margin: 0 0 14px; font-weight: 600; color: rgba(250, 242, 226, .78); }
.mk-pk-linkrow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--rule-ink); }
.mk-pk-linkrow a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 18px 20px 18px 0; color: var(--santan); text-decoration: none; }
.mk-pk-linkrow li + li a { padding-left: 20px; border-left: 1px solid var(--rule-ink); }
.mk-pk-linkrow .mk-ic { width: 30px; height: 30px; color: var(--kunyit); }
.mk-pk-linkrow span { font-weight: 650; font-size: 18px; line-height: 1.2; }
.mk-pk-linkrow b { font-weight: 800; font-size: 26px; color: var(--kunyit); letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-pk-linkrow i { font-style: normal; color: var(--kunyit); }
.mk-pk-linkrow a:hover span { text-decoration: underline; }
.mk-pk-linkrow-all { margin: 16px 0 0; color: rgba(250, 242, 226, .86); }

/* ---------- heating guides: the method card is the object; each twin has its own restaurant chapter ---------- */
.mk-guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mk-guide-flip .mk-pk-method { order: -1; }
.mk-pk-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .55fr); column-gap: clamp(16px, 2vw, 28px); align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-card); background: var(--kertas); color: var(--ink); }
.mk-kertas .mk-pk-method { background: var(--santan); }
.mk-pk-method .mk-pk-draw { --pk-bg: var(--kertas); grid-column: 2; grid-row: 1 / span 2; }
.mk-kertas .mk-pk-method .mk-pk-draw { --pk-bg: var(--santan); }
.mk-pk-method-k { margin: 0; color: var(--brown-2); grid-column: 1; }
.mk-pk-method-q { margin: 10px 0 0; grid-column: 1; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 2.8vw, 44px); line-height: 1.04; color: var(--brown); }
.mk-pk-method .mk-pk-beats { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
.mk-pk-method .mk-pk-beats li { padding: 16px 0; }
.mk-pk-method .mk-pk-beats li + li { padding-left: 0; border-top: 1px solid var(--rule-light); }
.mk-pk-method .mk-pk-beats li + li::before { content: none; }
.mk-guide-rank-grid { display: grid; grid-template-columns: minmax(150px, .5fr) minmax(0, 1.3fr) minmax(240px, .7fr); gap: clamp(26px, 4vw, 64px); align-items: center; }
.mk-guide-rank-n { font-weight: 800; font-size: clamp(180px, 20vw, 300px); line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; text-align: center; }
.mk-guide-rank-k { margin: 18px 0 0; color: var(--kunyit); }
.mk-guide-day .mk-guide-rank-k { color: var(--brown-2); }
.mk-guide-rank .mk-prose, .mk-guide-day .mk-prose { margin-top: 16px; }
.mk-guide-rank-side .mk-go { margin-top: 18px; }
.mk-guide-hour { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding-top: 16px; border-top: 2px solid var(--rule-ink); }
.mk-guide-hour b { font-weight: 800; font-size: clamp(64px, 6vw, 96px); line-height: .82; letter-spacing: -.005em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-guide-hour span { font: 600 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 242, 226, .78); }
.mk-guide-day-n { display: flex; flex-direction: column; align-items: center; margin: 0; }
.mk-guide-day-n b { font-weight: 800; font-size: clamp(110px, 12vw, 190px); line-height: .8; letter-spacing: -.01em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; white-space: nowrap; }
.mk-guide-day-n span { margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: clamp(30px, 3vw, 44px); color: var(--brown); }
.mk-guide-buy-k { margin: clamp(28px, 3vw, 44px) 0 0; color: var(--brown-2); }
.mk-guide-buy .mk-pk-cards { margin-top: 14px; }
.mk-pk-card-wide { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); column-gap: 24px; align-items: start; }

/* ---------- /kerjaya/ ---------- */
.mk-kj-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-notis { position: relative; padding: clamp(26px, 3vw, 40px); border-radius: var(--r-card); background: var(--bark); color: var(--santan); }
.mk-notis-draw { position: absolute; right: clamp(16px, 2vw, 30px); top: clamp(16px, 2vw, 28px); width: clamp(110px, 11vw, 150px); }
.mk-notis .mk-pk-draw { --pk-bg: var(--bark); color: rgba(250, 242, 226, .9); --pk-k: var(--kunyit); }
.mk-notis-k { margin: 0; color: rgba(250, 242, 226, .8); }
.mk-notis-n { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; }
.mk-notis-n b { font-weight: 800; font-size: clamp(110px, 11vw, 176px); line-height: .78; letter-spacing: -.04em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-notis-n span { font-size: 24px; font-weight: 650; }
.mk-notis-w { margin: 22px 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; }
.mk-notis-w span { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: rgba(250, 242, 226, .82); }
.mk-notis-r { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rule-ink); font-size: 17px; }
.mk-notis-r .mk-ic { color: var(--kunyit); }
.mk-notis .mk-go { margin-top: 22px; }
/* the KL facts as one ruled grid under the head (no void beside the prose) */
.mk-kj-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin: clamp(30px, 4vw, 52px) 0 0; }
.mk-kj-facts > div { padding: 18px 0 20px; border-top: 2px solid var(--ink); }
.mk-kj-facts dt { margin: 0 0 8px; color: var(--brown-2); }
.mk-kj-facts dd { margin: 0; font-weight: 650; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -.01em; }
.mk-kj-facts dd b { font-weight: 800; font-size: 1.4em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 78; }
/* how to ask: the three ways as large typographic lines + what to put in the e-mail */
.mk-kj-ask-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(30px, 5vw, 84px); align-items: start; margin-top: clamp(30px, 4vw, 52px); }
.mk-kj-ways2 { margin: 0; border-top: 2px solid var(--ink); }
.mk-kj-ways2 > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 18px; padding: 20px 0; border-bottom: 1px solid var(--rule-light); }
.mk-kj-ways2 .mk-ic { grid-row: 1 / span 3; width: 28px; height: 28px; color: var(--brown); margin-top: 2px; }
.mk-kj-ways2 dt { margin: 0; color: var(--brown-2); }
.mk-kj-ways2 dd { margin: 0; }
.mk-kj-ways2 dd:not(.mk-kj-ways2-n) { font-weight: 800; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -.03em; font-variation-settings: "opsz" 96, "wdth" 78; overflow-wrap: anywhere; }
.mk-kj-ways2 dd a { color: var(--ink); text-decoration: none; }
.mk-kj-ways2 dd a:hover { color: var(--brown); }
.mk-kj-ways2-n { font-size: 16px; line-height: 1.5; color: #3b2a1d; }
.mk-kj-check { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-card); background: var(--santan); }
.mk-kj-check .mono { margin: 0 0 10px; color: var(--brown-2); }
.mk-kj-check ul { list-style: none; margin: 0 0 18px; padding: 0; }
.mk-kj-check li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule-light); font-weight: 600; font-size: 18px; }
.mk-kj-check li .mk-ic { color: var(--brown); }
.mk-kj-check p:not(.mono) { margin: 0; font-size: 16px; line-height: 1.55; color: #3b2a1d; }
/* who we are: numerals only, then their own line */
.mk-kj-nums { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.mk-kj-nums li { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px solid var(--rule-ink); }
.mk-kj-nums b { font-weight: 800; font-size: clamp(54px, 5.6vw, 92px); line-height: .85; letter-spacing: -.04em; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 75; white-space: nowrap; }
.mk-kj-nums span { font-size: 16.5px; line-height: 1.5; color: rgba(250, 242, 226, .84); }
.mk-kj-q { margin: clamp(30px, 4vw, 52px) 0 0; padding-left: 22px; border-left: 3px solid var(--kunyit); max-width: 46em; }
.mk-kj-q p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; color: var(--santan); }
.mk-kj-q cite { display: block; margin-top: 14px; font-style: normal; color: rgba(250, 242, 226, .74); }
.mk-kj-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mk-kj-faq-grid > div:first-child { position: sticky; top: 110px; }
.mk-kj-faq-list .qa .a { padding-right: 0; }
/* the close: the visit panel, its side column the hiring notice */
.mk-kj-side-n { margin: 0 0 4px; font-weight: 800; font-size: clamp(110px, 10vw, 160px); line-height: .78; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-kj-side .mk-go { margin-top: 8px; align-self: stretch; }

/* ---------- breakpoints ---------- */
@media (max-width: 1180px) {
  .mk-pk-dine-art { width: 160px; }
  .mk-kj-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-guide-rank-grid { grid-template-columns: minmax(120px, .45fr) minmax(0, 1.4fr); }
  .mk-guide-rank-side { grid-column: 2; }
}
@media (max-width: 900px) {
  .mk-pk-head2, .mk-pk-hero-grid, .mk-pk-spec-grid, .mk-rak-top, .mk-pk-how-grid, .mk-resit-grid, .mk-sum-hero-grid,
  .mk-pk-who-grid, .mk-pk-about-grid, .mk-pk-paircard, .mk-jar-grid, .mk-guide-grid, .mk-pk-sum-grid,
  .mk-kj-grid, .mk-kj-ask-grid, .mk-kj-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-head2 { align-items: start; }
  .mk-pk-hero-flip .mk-pk-hero-art, .mk-guide-flip .mk-pk-method { order: 0; }
  .mk-pk-hero-art .mk-pk-draw { max-width: 420px; }
  .mk-resit { justify-self: center; }
  .mk-pk-isi-rows, .mk-pk-why-row, .mk-jar-vs { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-cards.mk-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-pk-cards.mk-n3 > :last-child { grid-column: 1 / -1; }
  .mk-kj-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-kj-faq-grid > div:first-child { position: static; }
  .mk-pk-linkrow { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-linkrow li + li a { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-ink); }
  .mk-pk-beats { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-beats li { padding: 16px 0; }
  .mk-pk-beats li + li { padding-left: 0; border-top: 1px solid var(--rule-light); }
  .mk-ink .mk-pk-beats li + li { border-top-color: var(--rule-ink); }
  .mk-pk-beats li + li::before { content: none; }
}
@media (max-width: 640px) {
  .mk-cr-l { display: none; }
  .mk-cr-s { display: inline; }
  .mk-jejak li:has(.mk-cr-x) { display: none; }
  .mk-pk-hero-grid, .mk-resit-grid, .mk-sum-hero-grid, .mk-rak-top, .mk-jar-grid, .mk-guide-grid, .mk-kj-grid { display: flex; flex-direction: column; align-items: stretch; }
  /* DESIGN-SYSTEM 6b: kicker -> h1 -> the object -> answer, flipped heroes included */
  .mk-pk-hero-flip .mk-pk-hero-art, .mk-guide-flip .mk-pk-method { order: 3; }
  /* /shop/: the answer stays above the shelf on phones (r1 AEO); the shelf follows the buttons */
  .mk-rak-hero .mk-rak { order: 5; margin-top: 34px; }
  .mk-pk-hero-art .mk-pk-draw { max-width: 300px; }
  .mk-pk-hero-art::before { width: min(80%, 300px); }
  .mk-resit { max-width: 360px; transform: rotate(1.4deg); padding: 24px 22px 22px; }
  .mk-resit-n a { font-size: 18px; }
  .mk-sum-hero { padding: 22px 20px; }
  .mk-sum-hero-art { max-width: 260px; }
  .mk-rak-row { row-gap: 26px; column-gap: 12px; }
  .mk-rak-art { padding: 0 6px; }
  .mk-pk-tagn { font-size: 16px; }
  .mk-pk-tagp { font-size: 28px; }
  .mk-jar .mk-pk-draw { max-width: 320px; }
  .mk-jar-stamp { right: 0; width: 112px; font-size: 18px; }
  .mk-jar-pairs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mk-jar-pairs li { padding: 14px 0; }
  .mk-jar-pairs li + li { border-top-width: 1px; border-top-color: var(--rule-light); }
  .mk-jar-vs-c { grid-template-columns: 84px minmax(0, 1fr); }
  .mk-jar-vs-dl > div, .mk-pk-specs > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0; }
  .mk-pk-isi-rows li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mk-pk-isi-rows .mk-pk-isi-art { display: block; width: min(70%, 240px); }
  .mk-pk-cards.mk-n2, .mk-pk-cards.mk-n3 { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-cards.mk-n3 > :last-child { grid-column: auto; }
  .mk-pk-card { grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; padding: 20px 20px 22px; }
  .mk-pk-card .mk-pk-card-art { grid-row: 1 / span 5; width: 96px; margin: 0; }
  .mk-pk-card-go { top: 16px; right: 18px; }
  .mk-pk-card-t { font-size: 22px; padding-right: 22px; }
  .mk-pk-cprice { font-size: 32px; }
  .mk-pk-card-wide { grid-template-columns: 96px minmax(0, 1fr); }
  .mk-pk-dine-art { width: 150px; }
  .mk-pk-when li { gap: 16px; padding: 16px 0; }
  .mk-pk-when .mk-pk-bi { width: 44px; height: 44px; }
  .mk-pk-when span { font-size: 22px; }
  .mk-pk-beats span { font-size: 21px; }
  .mk-pk-bi { width: 44px; height: 44px; }
  .mk-pk-numobj b { font-size: 96px; }
  .mk-pk-sum-r { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
  .mk-pk-sum-r .mk-ic { width: 26px; height: 26px; }
  .mk-pk-sum-n { font-size: 17px; }
  .mk-pk-sum-p { font-size: 24px; }
  .mk-pk-sum-set .mk-pk-sum-p { font-size: 44px; }
  .mk-pk-method { grid-template-columns: minmax(0, 1fr) 96px; padding: 22px 20px; }
  .mk-pk-method-q { font-size: 28px; }
  .mk-guide-rank-grid { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
  .mk-guide-rank-n { font-size: 150px; text-align: left; }
  .mk-guide-day-n { align-items: flex-start; }
  .mk-guide-day-n b { font-size: 96px; }
  .mk-guide-rank-side { width: 100%; }
  .mk-notis-draw { width: 96px; }
  .mk-kj-facts { grid-template-columns: minmax(0, 1fr); }
  .mk-kj-nums { grid-template-columns: minmax(0, 1fr); }
  /* r1 design: the description starts level with the numeral's cap height, not 17px under it */
  .mk-kj-nums li { flex-direction: row; align-items: flex-start; gap: 16px; }
  .mk-kj-nums b { font-size: 52px; line-height: .74; min-width: 2.6em; }
  .mk-kj-nums span { margin-top: -4px; }
  .mk-pk-ways dd { font-size: 28px; }
  .mk-pk-paircard { padding: 22px; }
}
.mk-pk-sum-t { margin: 0 0 12px; font-weight: 600; color: rgba(250, 242, 226, .78); }
/* the visit panel's side column follows the tall week table down the screen (no dead right half at 1440) */
@media (min-width: 901px) { .mk-pk-visit .mk-visit-side, .mk-kj-visit .mk-visit-side { position: sticky; top: 110px; } }

/* =============================================================================================
   Rework 20 Oct 2026 (build-notes/REWORK-2026-10-20-BRIEF.md): ADDED rules only, for new classes of this group or
   later overrides on this group's own pages (this sheet is linked only by the pages of pages_shop.py and by
   /product/sotong-bakar-gergasi/). Nothing above this block was changed.
   ============================================================================================= */
/* price numerals: tracking 0, so the M never touches the first digit (r2 design, every pack page) */
.mk-price-n, .mk-pk-cprice, .mk-resit-p, .mk-pk-tagp, .mk-pk-sum-p, .mk-sum-hero-rows b, .mk-pk-linkrow b,
.mk-pk-specs dd b, .mk-pk-table td:last-child b, .mk-pk-opt-p { letter-spacing: 0; }
.mk-pk-hero .mk-price { align-items: baseline; gap: 10px; }
.mk-pk-hero .mk-price .mono { opacity: .86; }
/* hero buttons: equal widths when they stack */
@media (max-width: 640px) {
  .mk-pk-go2 { flex-direction: column; align-items: stretch; }
  .mk-pk-go2 .btn { justify-content: center; }
  .mk-inner main .kicker::after { display: none; }   /* a wrapped kicker never leaves its rule on a line alone */
}
/* card and link titles are not headings any more: keep them block-level */
.mk-pk-card-t, .mk-rel-t { display: block; }
.mk-pk-cards.mk-pk-lead { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.mk-pk-cards.mk-pk-lead .mk-pk-card-wide .mk-pk-card-art { grid-row: 1 / span 5; width: 100%; margin: 0; align-self: center; }
.mk-pk-cards.mk-pk-lead .mk-pk-card-wide { align-content: center; }

/* ---------- /shop/ ---------- */
.mk-pk-thdraw { flex: none; width: 64px; height: auto; --pk-bg: var(--santan-2); }
.mk-pk-thdraw .fl { display: none; }
.mk-pk-how-pol { margin-top: 14px !important; font-size: 16px; color: rgba(250, 242, 226, .8); }
.mk-pk-ways .mk-pk-ways-kaunter dd { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.mk-pk-ways .mk-pk-ways-mail dd { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: 0; font-variation-settings: "opsz" 96, "wdth" 100; }
.mk-pk-onl p.mk-pk-onl-k { font: 600 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brown-2); }
.mk-pk-onl p.mk-pk-onl-q { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); font-variation-settings: "opsz" 96, "wdth" 86; }
.mk-pk-onl-url { overflow-wrap: normal; word-break: normal; }
@media (max-width: 640px) {
  .mk-rak-hero .mk-rak.mk-hero-obj { order: 3; margin-top: 22px; }
  .mk-rak-row { row-gap: 18px; }
  .mk-rak-art .mk-pk-draw { max-width: 150px; }
  .mk-pk-tagp { font-size: 24px; }
  .mk-pk-onl-url { font-size: 18px; }
  /* the table: one compact card per product, name + price on top, isi + cara makan side by side */
  .mk-pk-table2 tr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 8px 16px; padding: 16px 0; }
  .mk-pk-table2 tbody th { grid-column: 1; grid-row: 1; }
  .mk-pk-table2 td[data-l="Harga"] { grid-column: 2; grid-row: 1; text-align: right; }
  .mk-pk-table2 td[data-l="Harga"]::before { content: none; }
  .mk-pk-table2 td[data-l="Isi"] { grid-column: 1; grid-row: 2; }
  .mk-pk-table2 td[data-l="Cara makan"] { grid-column: 2; grid-row: 2; }
  .mk-pk-table2 tbody th a { font-size: 18px; }
  .mk-pk-thdraw { width: 44px; }
  .mk-pk-table2 .mk-pk-jimat { font-size: 13px; }
  .mk-pk-ways .mk-pk-ways-mail dd { font-size: 22px; }
}

/* ---------- /combo/ ---------- */
.mk-pk-isi-rows li { align-items: start; }
.mk-pk-isi-rows .mk-pk-isi-art { align-self: start; }
.mk-pk-why2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 5vw, 84px); align-items: start; margin-top: clamp(30px, 4vw, 52px); }
.mk-pk-why2 .mk-pk-why-row { margin: 0; }
.mk-pk-why-col { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mk-pk-why-col li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 18px 0; }
.mk-pk-why-col li .mono { grid-row: 1 / span 2; }
.mk-pk-why-col .mk-pk-q { margin: 0 0 8px; }
.mk-pk-when2 > .mono { margin: 0 0 12px; color: rgba(250, 242, 226, .74); }
.mk-ink .mk-pk-when { border-top-color: var(--rule-ink); }
.mk-ink .mk-pk-when li { border-bottom-color: var(--rule-ink); }
.mk-pk-when2 .mk-pk-when span { font-size: clamp(21px, 1.9vw, 27px); }
.mk-pk-years { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.mk-pk-years li { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-pk-years b { font-weight: 800; font-size: clamp(56px, 6vw, 96px); line-height: .82; letter-spacing: -.01em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-pk-years span { font-size: 17px; line-height: 1.5; color: #3b2a1d; }
.mk-pk-years-go { margin: 22px 0 0; font-weight: 600; }
.mk-pk-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 3vw, 44px); }
.mk-pk-opt { display: grid; grid-template-columns: minmax(110px, 190px) minmax(0, 1fr); gap: 6px 26px; align-content: start; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-card); background: var(--bark); color: var(--santan); }
.mk-pk-opt-art { grid-row: 1 / span 4; align-self: center; }
.mk-pk-opt .mk-pk-draw { color: rgba(250, 242, 226, .92); --pk-bg: var(--bark); --pk-k: var(--kunyit); }
.mk-pk-opt .mono { margin: 0; color: rgba(250, 242, 226, .74); }
.mk-pk-opt-t { margin: 0; font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.08; letter-spacing: -.018em; font-variation-settings: "opsz" 96, "wdth" 88; }
.mk-pk-opt-l { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--rule-ink); }
.mk-pk-opt-l li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-ink); font-size: 17px; }
.mk-pk-opt-l a { color: var(--santan); }
.mk-pk-opt-l b { font-weight: 800; font-size: 24px; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 80; white-space: nowrap; }
.mk-pk-opt-p { margin: 6px 0 0; font-weight: 800; font-size: clamp(44px, 4.2vw, 64px); line-height: .9; color: var(--kunyit); font-variation-settings: "opsz" 96, "wdth" 78; }
.mk-pk-opt-p small { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 242, 226, .74); margin-left: 8px; }
.mk-pk-opt-go { margin-top: 10px; font-weight: 600; color: var(--santan); }
.mk-pk-choice .mk-go { margin-top: 28px; }

/* ---------- product pages: dine-in band, spec chapter, pair card, pick-list ---------- */
.mk-pk-dine2-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.mk-dine .mk-pk-dine-h2 { margin: 8px 0 14px; font-size: clamp(32px, 3vw, 44px); line-height: 1; }
.mk-dine .mk-pk-dine-h2 .it { color: var(--brown); }
.mk-pk-dine2 p:not(.mono) { font-size: 18px; line-height: 1.55; max-width: 36em; }
.mk-pk-goline { margin-top: 16px; }
.mk-pk-dine2-art { justify-self: center; width: min(100%, 340px); }
.mk-pk-dine2-art .mk-pk-draw { --pk-bg: var(--santan); color: var(--brown); --pk-k: var(--sambal); }
.mk-pk-q-light { color: var(--brown); font-size: clamp(28px, 2.6vw, 40px); margin: 18px 0; }
.mk-pk-specs-ink { border-top-color: var(--rule-ink); }
.mk-pk-specs-ink > div { border-bottom-color: var(--rule-ink); }
.mk-pk-specs-ink dt { color: rgba(250, 242, 226, .74); }
.mk-pk-specs-ink dd { color: rgba(250, 242, 226, .92); }
.mk-pk-specs-ink dd b { color: var(--kunyit); }
.mk-pk-paircard-art { display: block; }
.mk-pk-paircard .btn { margin-top: 4px; }
.mk-pk-foot { max-width: 66ch; padding-top: 16px; border-top: 1px solid var(--rule-light); }
.mk-ink .mk-pk-foot { border-top-color: var(--rule-ink); }
.mk-pk-pick-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-pk-pick { grid-template-columns: minmax(0, 1fr); }
.mk-pk-pick li + li a { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-ink); }
.mk-pk-pick a { grid-template-columns: 34px minmax(0, 1fr) auto 18px; padding: 20px 0; }
.mk-pk-pick span { font-size: clamp(19px, 1.6vw, 22px); }
.mk-pk-pick b { font-size: clamp(28px, 2.6vw, 38px); }
.mk-pk-pick b small { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 242, 226, .74); margin-left: 6px; }
.mk-pk-hero-sotong .mk-pk-hero-art .mk-pk-draw { max-width: 440px; }

/* ---------- /rte/ ---------- */
.mk-jar-plates { list-style: none; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.mk-jar-plates li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-jar-plates .mk-pk-draw { max-width: 260px; --pk-bg: var(--santan); --pk-k: var(--sambal); }
.light .mk-jar-plates .mk-pk-draw { --pk-bg: var(--santan-2); }
.mk-jar-plates span { font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 85; }
.mk-jar-kedai { margin: 0; }
.mk-jar-kedai .mk-pk-draw { max-width: 420px; margin-inline: auto; }
.mk-jar-kedai figcaption { margin-top: 12px; text-align: center; color: rgba(250, 242, 226, .74); }

/* ---------- "Perlu masak lagi?" guides ---------- */
.mk-guide2 .mk-guide-grid { align-items: center; }
.mk-serve3 { margin: 0; padding: clamp(22px, 2.6vw, 34px); border-radius: var(--r-card); background: var(--kertas); color: var(--ink); }
.mk-kertas .mk-serve3 { background: var(--santan); }
.mk-serve3-q { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.05; color: var(--brown); }
.mk-serve3-row { list-style: none; margin: 18px 0 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 2px solid var(--ink); }
.mk-serve3-row li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.mk-serve3-row li + li::before { content: "→"; position: absolute; left: -10px; top: 32%; font-size: 20px; opacity: .55; }
.mk-serve3-row .mk-pk-draw { --pk-bg: var(--kertas); }
.mk-kertas .mk-serve3-row .mk-pk-draw { --pk-bg: var(--santan); }
.mk-serve3-row span { font-weight: 700; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.15; letter-spacing: -.01em; }
.mk-serve3 figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-light); color: var(--brown-2); }
.mk-guide-ask { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0 0; border-top: 1px solid var(--rule-light); }
.mk-guide-ask .mk-ic { color: var(--brown); margin-top: 3px; }
.mk-guide-pack .mk-pk-cards { margin-top: clamp(28px, 3vw, 44px); }
.mk-guide-rank2-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-guide-rank2-obj { position: relative; display: grid; grid-template-columns: minmax(110px, .5fr) minmax(0, 1fr); align-items: center; gap: 10px; }
.mk-guide-rank2 .mk-guide-rank-n { -webkit-text-stroke: 4px var(--kunyit); font-size: clamp(160px, 16vw, 250px); }
.mk-guide-rank2-obj .mk-pk-draw { color: rgba(250, 242, 226, .92); --pk-bg: var(--bark); --pk-k: var(--kunyit); }
.mk-guide-hour2 { flex-direction: row; align-items: baseline; gap: 14px; margin: 22px 0 14px; }
.mk-guide-hour2 b { font-size: clamp(48px, 4.4vw, 68px); }
.mk-guide-link { margin: 16px 0 0; font-weight: 600; }
.mk-guide-day2 .mk-guide-day-n b, .mk-guide-day2 .mk-guide-day-n span { color: var(--kunyit); }
.mk-guide-day2 .mk-guide-day-n b { font-size: clamp(90px, 9vw, 150px); }
.mk-guide-day2 .mk-guide-rank2-obj { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.mk-guide-day2 .mk-prose { margin-top: 18px; }
.mk-guide-day2 .mk-live, .mk-guide-rank2 .mk-live { margin-top: 18px; }

/* ---------- /kerjaya/ ---------- */
.mk-kj-card .mk-notis-k { padding-right: 130px; }
.mk-kj-ways3 { margin: 16px 0 0; border-top: 1px solid var(--rule-ink); }
.mk-kj-ways3 > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-ink); }
.mk-kj-ways3 .mk-ic { grid-row: 1 / span 2; color: var(--kunyit); margin-top: 2px; }
.mk-kj-ways3 dt { margin: 0; color: rgba(250, 242, 226, .74); }
.mk-kj-ways3 dd { margin: 0; font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
.mk-kj-ways3 dd a { color: var(--santan); text-decoration: none; }
.mk-kj-ways3 dd a:hover { color: var(--kunyit); }
.mk-kj-ways3 .mk-kj-mail dd { font-variation-settings: "opsz" 96, "wdth" 100; letter-spacing: 0; }
.mk-kj-or { font-weight: 500; font-size: .8em; color: rgba(250, 242, 226, .74); }
.mk-kj-q2 { margin-top: 26px; }
.mk-kj-kenal2 .mk-pk-head2 { align-items: start; }
.mk-kj-sits { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.mk-kj-sits li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 14px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-kj-sits .mk-ic { grid-row: 1 / span 3; color: var(--brown); }
.mk-kj-sits b { font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.08; letter-spacing: -.015em; }
.mk-kj-sits .mono { color: var(--brown-2); }
.mk-kj-sits span:not(.mono) { font-size: 16.5px; line-height: 1.5; color: #3b2a1d; }
.mk-kj-day-n { margin: 26px 0 0; max-width: 60ch; font-size: 17px; line-height: 1.55; color: #3b2a1d; }

@media (max-width: 900px) {
  .mk-pk-why2, .mk-pk-dine2-grid, .mk-pk-pick-grid, .mk-guide-rank2-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-years { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-pk-opts, .mk-kj-sits { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-cards.mk-pk-lead { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-dine2-art { justify-self: start; width: min(100%, 280px); }
}
@media (max-width: 640px) {
  .mk-pk-why-col li { grid-template-columns: minmax(0, 1fr); }
  .mk-pk-why-col li .mono { grid-row: auto; }
  .mk-pk-years b { font-size: 56px; }
  .mk-pk-opt { grid-template-columns: 96px minmax(0, 1fr); padding: 20px; }
  .mk-pk-opt-art { grid-row: 1 / span 2; }
  .mk-pk-opt-l, .mk-pk-opt-p, .mk-pk-opt-go { grid-column: 1 / -1; }
  .mk-jar-plates { gap: 10px; }
  .mk-jar-plates span { font-size: 18px; }
  .mk-serve3 { padding: 18px 16px; }
  .mk-serve3-row span { font-size: 14px; }
  .mk-serve3-row li + li::before { left: -8px; font-size: 16px; }
  .mk-guide-rank2-obj { grid-template-columns: 90px minmax(0, 1fr); }
  .mk-guide-rank2 .mk-guide-rank-n { font-size: 130px; -webkit-text-stroke-width: 3px; }
  .mk-guide-day2 .mk-guide-day-n b { font-size: 72px; }
  .mk-guide-day2 .mk-guide-rank2-obj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mk-pk-pick a { grid-template-columns: 28px minmax(0, 1fr) auto 14px; gap: 10px; }
  .mk-pk-pick b { font-size: 26px; }
  .mk-pk-pick b small { display: block; margin: 4px 0 0; }
  .mk-kj-card .mk-notis-k { padding-right: 100px; }
  .mk-pk-hero-sotong .mk-pk-hero-art .mk-pk-draw { max-width: 240px; }
  .mk-pk-hero-art .mk-pk-draw-xl { max-width: 260px; }
}

/* 20 Oct, after the review shots: the apron never sits on the address; name + price lead the pack heroes on phones */
.mk-kj-card .mk-kj-ways3 > div:first-child { padding-right: clamp(96px, 9vw, 140px); }
@media (max-width: 640px) {
  .mk-pk-hero .mk-hero-copy > .mk-price { order: 2; margin-top: 14px; }
  .mk-kj-card .mk-kj-ways3 > div:first-child { padding-right: 0; }
}
.mk-pk-cards.mk-pk-lead .mk-pk-card-wide { grid-template-columns: minmax(150px, 250px) minmax(0, 1fr); }
.mk-jar-plates .mk-pk-draw { max-width: 230px; }
@media (max-width: 640px) { .mk-resit { transform: rotate(1deg); max-width: 336px; } }

/* =============================================================================================
   Round 2, 20 Oct 2026 (reviews/raw/r1/<stem>.*.md): every rule below is scoped to <main class="mk-r2">, which only
   the six shop pages carry (/shop/, /combo/, the three /product/ pages, /rte/). The two cara-penyediaan guides and
   /kerjaya/ are frozen for review and are not touched by anything here. Added rules only.
   ============================================================================================= */
/* focus ring that shows on every ground (r1 design: kunyit on kunyit / santan / kertas fails 3:1) */
.mk-r2 :focus-visible { outline-color: var(--ink); }
.mk-r2 .mk-ink :focus-visible, .mk-r2 .mk-sum-hero :focus-visible, .mk-r2 .mk-pk-paircard :focus-visible,
.mk-r2 .mk-pk-hero :focus-visible { outline-color: var(--kunyit); }
.mk-r2 .mk-pk-draw .gh { opacity: .38; }
.mk-r2 .mk-pk-draw .c { stroke: var(--pk-c, currentColor); }

/* ---------- /shop/ ---------- */
.mk-r2 .mk-rak-art { justify-content: center; }
.mk-r2 .mk-pk-tag { align-items: center; text-align: center; margin: 14px 8px 0; }
.mk-r2 .mk-rak figcaption { text-align: center; }
.mk-r2 .mk-pk-tagask { font-family: inherit; }
.mk-r2 .mk-pk-table3 tbody th a { align-items: flex-start; }
.mk-r2 .mk-pk-table3 tbody th a span { padding-top: 6px; }
.mk-r2 .mk-pk-table3 tbody th, .mk-r2 .mk-pk-table3 td { vertical-align: top; }
.mk-r2 .mk-pk-table3 td { padding-top: 26px; }
.mk-r2 .mk-pk-table3 tr.mk-pk-grp th { padding: 26px 0 10px; border-bottom: 2px solid var(--ink); font: 600 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brown-2); }
.mk-r2 .mk-pk-table3 tr.mk-pk-grp th b { font: 800 22px/1 var(--display); letter-spacing: -.01em; font-variation-settings: "opsz" 96, "wdth" 85; text-transform: none; color: var(--ink); margin-right: 6px; }
.mk-r2 .mk-pk-table3 td:last-child b { display: block; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-r2 .mk-pk-onl-dom { margin-top: -4px; font-size: 12px; letter-spacing: .08em; color: var(--brown-2); white-space: nowrap; }
.mk-r2 .mk-pk-onl-url { overflow-wrap: normal; }
.mk-r2 .mk-pk-onl h3.mk-pk-onl-q { margin: 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: var(--ink); font-variation-settings: "opsz" 96, "wdth" 86; }
@media (max-width: 640px) {
  /* the shelf: one row of four small packs, so the answer starts within a screen and a half */
  .mk-r2 .mk-rak-row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6px; row-gap: 0; }
  .mk-r2 .mk-rak-art { padding: 0 2px; border-bottom-width: 4px; }
  .mk-r2 .mk-rak-art .mk-pk-draw { max-width: 84px; }
  .mk-r2 .mk-pk-tag { margin: 8px 0 0; gap: 2px; }
  .mk-r2 .mk-pk-tagp { font-size: 19px; }
  .mk-r2 .mk-pk-tagn { font-size: 13px; line-height: 1.2; }
  .mk-r2 .mk-pk-tag .mono { font-size: 12px; letter-spacing: .04em; line-height: 1.25; }
  .mk-r2 .mk-rak figcaption { margin-top: 10px; }
  /* the table: name + price on top, what is inside under it */
  .mk-r2 .mk-pk-table3 tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 14px 0; }
  .mk-r2 .mk-pk-table3 tr.mk-pk-grp { display: block; padding: 18px 0 0; border-bottom: 0; }
  .mk-r2 .mk-pk-table3 tr.mk-pk-grp th { display: block; padding: 0 0 8px; }
  .mk-r2 .mk-pk-table3 tbody th { grid-column: 1; grid-row: 1; }
  .mk-r2 .mk-pk-table3 td[data-l="Harga"] { grid-column: 2; grid-row: 1; padding-top: 6px; text-align: right; }
  .mk-r2 .mk-pk-table3 td[data-l="Harga"]::before { content: none; }
  .mk-r2 .mk-pk-table3 td[data-l="Apa di dalamnya"] { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .mk-r2 .mk-pk-table3 tbody th a { font-size: 18px; }
  .mk-r2 .mk-pk-table3 .mk-pk-thdraw { width: 44px; }
}

/* ---------- dine-in band (pack pages, /combo/): address + the week + status + buttons ---------- */
.mk-r2 .mk-pk-addr { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 16px; font-weight: 500; }
.mk-r2 .mk-pk-addr .mk-ic { width: 20px; height: 20px; color: var(--brown); }
.mk-r2 .mk-pk-week { margin: 8px 0 0; color: var(--ink); }
.mk-r2 .mk-kunyit .mk-pk-dine2-art .mk-pk-draw { --pk-bg: var(--santan); color: var(--brown); --pk-k: var(--sambal); --pk-c: var(--brown-2); }
.mk-r2 .mk-pk-dine-hours { margin: 0; width: 100%; }
.mk-r2 .mk-pk-dine2-art:has(.mk-pk-dine-hours) { width: min(100%, 420px); justify-self: end; }

/* ---------- the three steps (pack type's main object) ---------- */
.mk-r2 .mk-pk-st3 { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.mk-r2 .mk-pk-st3 li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-r2 .mk-ink .mk-pk-st3 li { border-top-color: var(--rule-ink); }
.mk-r2 .mk-pk-st3-n { font-weight: 800; font-size: clamp(88px, 8vw, 128px); line-height: .78; letter-spacing: 0; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-r2 .mk-ink .mk-pk-st3-n { color: var(--kunyit); }
.mk-r2 .mk-pk-st3-t { margin: 4px 0 8px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.08; letter-spacing: -.018em; font-variation-settings: "opsz" 96, "wdth" 86; }
.mk-r2 .mk-pk-st3 p { margin: 0; font-size: 17px; line-height: 1.55; color: #3b2a1d; }
.mk-r2 .mk-ink .mk-pk-st3 p { color: rgba(250, 242, 226, .86); }
.mk-r2 .mk-pk-steps3 .mk-pk-foot { margin-top: clamp(28px, 3vw, 40px); }

/* ---------- pack heroes: the dish on a filled plate, ~75% of the disc ---------- */
.mk-r2 .mk-pk-hero2 .mk-pk-hero-art .mk-pk-draw { max-width: 500px; color: var(--brown); --pk-bg: var(--santan); --pk-k: var(--sambal); --pk-c: var(--brown-2); }
.mk-r2 .mk-pk-hero2 .mk-pk-hero-art::before { width: min(96%, 560px); }
/* the sotong page's own object: the rank numeral beside the dine-in copy */
.mk-r2 .mk-pk-rank { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.mk-r2 .mk-pk-rank-n { font-weight: 800; font-size: clamp(150px, 14vw, 220px); line-height: .78; color: transparent; -webkit-text-stroke: 4px var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-r2 .mk-pk-rank-art .mono { margin: 6px 0 0; text-align: center; color: var(--ink); }
.mk-r2 .mk-pk-rank-art .mk-pk-draw { --pk-bg: var(--santan); color: var(--brown); --pk-k: var(--sambal); --pk-c: var(--brown-2); }
.mk-r2 .mk-pk-paircard-t { margin: 0; font: 600 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kunyit); }
.mk-r2 .mk-pk-paircard .mk-h2 { margin: 0; }
.mk-r2 .mk-pk-specs-ink dd a { color: var(--santan); }

/* ---------- /combo/ ---------- */
.mk-r2 .mk-pk-combo-obj { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
.mk-r2 .mk-pk-combo-obj .mk-resit { justify-self: auto; align-self: flex-end; }
.mk-r2 .mk-pk-sesuai { padding-top: 6px; }
.mk-r2 .mk-pk-sesuai > .mono { margin: 0 0 6px; color: rgba(250, 242, 226, .74); }
.mk-r2 .mk-pk-when3 { border-top-color: var(--rule-ink); }
.mk-r2 .mk-pk-when3 li { gap: 16px; padding: 12px 0; border-bottom-color: var(--rule-ink); }
.mk-r2 .mk-pk-when3 .mk-pk-bi { width: 40px; height: 40px; color: var(--santan); }
.mk-r2 .mk-pk-when3 span { font-size: clamp(19px, 1.6vw, 23px); color: var(--santan); }
.mk-r2 .mk-pk-isi2-grid { margin-top: clamp(28px, 3vw, 44px); }
.mk-r2 .mk-pk-isi2-art { display: block; max-width: 440px; }
.mk-r2 .mk-pk-isi2-art .mk-pk-draw { --pk-bg: var(--santan); --pk-k: var(--brown); }
.light .mk-r2 .mk-pk-isi2-art .mk-pk-draw, .mk-r2 .light .mk-pk-isi2-art .mk-pk-draw { --pk-bg: var(--santan-2); }
.mk-r2 .mk-pk-isi2-rows { display: grid; gap: 20px; margin-top: 20px; }
.mk-r2 .mk-pk-isi2-rows > div { padding-top: 16px; border-top: 2px solid var(--ink); }
.mk-r2 .mk-pk-isi2-rows p { margin: 0; font-size: 17px; line-height: 1.58; color: #3b2a1d; }
.mk-r2 .mk-pk-isi2-rows p.mk-pk-isi-go { margin-top: 10px; font-weight: 600; }
.mk-r2 .mk-pk-why3 .mk-pk-why-col { margin-top: clamp(28px, 3vw, 44px); max-width: 980px; }
.mk-r2 .mk-pk-kisah-q { margin: 18px 0 0; max-width: 30em; font-family: var(--serif); font-style: italic; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.08; color: var(--brown); }
.mk-r2 .mk-pk-kisah-n { margin: 22px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.55; color: #3b2a1d; }
.mk-r2 .mk-pk-kisah-n a { font-weight: 600; }
.mk-r2 .mk-pk-closeline { padding: clamp(44px, 5vw, 72px) 0; }
.mk-r2 .mk-pk-closeline-t { margin: 10px 0 12px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 86; }
.mk-r2 .mk-pk-closeline-t a { color: var(--santan); text-decoration-color: var(--kunyit); }
.mk-r2 .mk-pk-closeline-t .mk-bi { width: 26px; height: 26px; vertical-align: -3px; color: var(--kunyit); }
.mk-r2 .mk-pk-closeline p:not(.kicker) { margin: 0; max-width: 66ch; font-size: 17px; line-height: 1.6; color: rgba(250, 242, 226, .86); }

/* ---------- /rte/ ---------- */
.mk-r2 .mk-jar-eat2 .mk-pk-head2 { align-items: center; }
.mk-r2 .mk-jar-eatq { margin: 0; }
.mk-r2 .mk-jar-eat-s { margin: 22px 0 0; max-width: 62ch; font-size: 18px; line-height: 1.55; color: #3b2a1d; }
.mk-r2 .mk-jar-plates { margin-top: 26px; }
.mk-r2 .mk-jar-plates li { padding-top: 14px; gap: 6px; }
.mk-r2 .mk-jar-plates .mk-pk-draw { max-width: 160px; }
.mk-r2 .mk-jar-bridge-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.mk-r2 .mk-jar-bridge .mk-prose { margin-top: 18px; }
.mk-r2 .mk-jar-bridge .mk-prose p { color: #2b1d12; }
.mk-r2 .mk-jar-nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.mk-r2 .mk-jar-nums li { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 2px solid var(--ink); }
.mk-r2 .mk-jar-nums b { font-weight: 800; font-size: clamp(64px, 6vw, 96px); line-height: .82; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-r2 .mk-jar-nums span { font-size: 16px; line-height: 1.45; color: #2b1d12; }
.mk-r2 .mk-jar-packs2 { padding: clamp(44px, 5vw, 72px) 0; }
.mk-r2 .mk-jar-packs2-t { color: var(--brown-2); }
.mk-r2 .mk-jar-packs2 .mk-pk-linkrow { border-top-color: var(--ink); }
.mk-r2 .mk-jar-packs2 .mk-pk-linkrow a { color: var(--ink); }
.mk-r2 .mk-jar-packs2 .mk-pk-linkrow li + li a { border-color: var(--rule-light); }
.mk-r2 .mk-jar-packs2 .mk-pk-linkrow .mk-ic, .mk-r2 .mk-jar-packs2 .mk-pk-linkrow i, .mk-r2 .mk-jar-packs2 .mk-pk-linkrow b { color: var(--brown); }
.mk-r2 .mk-jar-packs2 .mk-pk-pick b small { color: var(--brown-2); }
.mk-r2 .mk-jar-packs2 .mk-pk-more-all { color: #3b2a1d; }

@media (max-width: 900px) {
  .mk-r2 .mk-pk-st3, .mk-r2 .mk-jar-bridge-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-r2 .mk-pk-combo-obj .mk-resit { align-self: center; }
  .mk-r2 .mk-jar-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mk-r2 .mk-resit { max-width: 318px; transform: rotate(.8deg); margin-inline: auto; }
  .mk-r2 .mk-pk-st3 li { grid-template-columns: 64px minmax(0, 1fr); }
  .mk-r2 .mk-pk-st3-n { font-size: 72px; }
  .mk-r2 .mk-pk-rank { grid-template-columns: 90px minmax(0, 1fr); }
  .mk-r2 .mk-pk-rank-n { font-size: 120px; -webkit-text-stroke-width: 3px; }
  .mk-r2 .mk-pk-kisah-q { font-size: 30px; }
  .mk-r2 .mk-jar-plates .mk-pk-draw { max-width: 104px; }
  .mk-r2 .mk-jar-nums b { font-size: 56px; }
  .mk-r2 .mk-pk-hero2 .mk-pk-hero-art .mk-pk-draw { max-width: 300px; }
}
.mk-r2 .mk-pk-table3 td[data-l="Harga"] { white-space: nowrap; }

/* =============================================================================================
   Shorter pages, 20 Oct 2026 late (build-notes/SHORTER-PAGE-2026-10-20.md) + the /kerjaya/ round-2 rework: ADDED rules
   for new classes only, scoped to <main class="mk-r2"> (/shop/ and the three pack pages) or <main class="mk-kj3">
   (/kerjaya/). No small text under 4.5:1.
   ============================================================================================= */
/* pack heroes: the disc never rides over the price (r2 design auto-cap: the r2 disc width out-specified the phone rule);
   below 900px the art box is as tall as its disc, so the disc stays inside it */
.mk-r2 .mk-pk-hero3 .mk-pk-hero-tag { opacity: 1; color: rgba(250, 242, 226, .9); }
@media (max-width: 900px) {
  .mk-r2 .mk-pk-hero3 .mk-pk-hero-art { min-height: min(80vw, 420px); justify-content: center; padding: 0; }
  .mk-r2 .mk-pk-hero3 .mk-pk-hero-art::before { top: 50%; width: min(80vw, 420px); }
  .mk-r2 .mk-pk-hero3 .mk-pk-hero-art .mk-pk-draw { max-width: min(66vw, 340px); }
}
@media (max-width: 640px) {
  .mk-r2 .mk-pk-hero3 .mk-pk-hero-art { min-height: min(86vw, 330px); margin-top: 22px; }
  .mk-r2 .mk-pk-hero3 .mk-pk-hero-art::before { width: min(86vw, 330px); }
  .mk-r2 .mk-pk-hero3 .mk-pk-hero-art .mk-pk-draw { max-width: min(68vw, 262px); }
  .mk-r2 .mk-pk-hero3 .mk-pk-hero-tag { margin-top: 6px; }
}
/* /product/set-combo-terbakar/: the bold line sets on one line (r2 design: the grid squeezed the H1 into four lines);
   kunyit stays on RM99.90 and the button (labels and glyphs on bark are santan) */
.mk-r2 .mk-sum-hero-sec3 .mk-sum-hero-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.mk-r2 .mk-sum-hero-sec3 .mk-h1 { font-size: clamp(44px, 5.2vw, 80px); }
.mk-r2 .mk-sum-hero3 figcaption { color: rgba(250, 242, 226, .86); }
.mk-r2 .mk-sum-hero3 .mk-pk-draw { --pk-k: var(--santan); }
.mk-r2 .mk-sum-hero3 .mk-sum-hero-rows .mk-ic { color: var(--santan); }
/* dine-in band, shorter: one link in the copy, the rest on a "Lihat juga" line under the buttons */
.mk-r2 .mk-pk-dine4 p.mk-pk-see { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: #2b1d12; }
.mk-r2 .mk-pk-dine4 .mk-pk-see a { color: var(--ink); }
/* kambing: the breakfast sitting as the band's own object (7-10 numeral + the roti arab plate, sized to the band) */
.mk-r2 .mk-pk-dine-sit .mk-pk-dine2-art { width: min(100%, 540px); justify-self: end; }
.mk-r2 .mk-pk-sit { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 20px; }
.mk-r2 .mk-pk-sit-n { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.mk-r2 .mk-pk-sit-n b { font-weight: 800; font-size: clamp(96px, 9vw, 150px); line-height: .8; letter-spacing: -.02em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; white-space: nowrap; }
.mk-r2 .mk-pk-sit-n span { margin-top: 10px; font: 600 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.mk-r2 .mk-pk-sit-k { grid-column: 1 / -1; margin: 4px 0 0; text-align: center; color: var(--ink); }
/* sotong: the restaurant's no. 1 on a banana leaf (not the hero's plate again) */
.mk-r2 .mk-pk-rank3 .mk-pk-rank-art .mk-pk-draw { --pk-bg: var(--santan); color: var(--brown); --pk-k: var(--sambal); --pk-c: var(--brown-2); }
/* pair card: the mono label leads the h2 (as on every other section); santan on bark, not kunyit */
.mk-r2 .mk-pk-paircard-k { margin: 0; color: rgba(250, 242, 226, .86); }
/* the set's own section: who it suits + two plates on one dulang + the two facts */
.mk-r2 .mk-pk-isi3 .mk-pk-spec-grid { align-items: start; }
.mk-r2 .mk-pk-isi3-k { margin: clamp(26px, 3vw, 40px) 0 8px; color: var(--brown-2); }
.mk-r2 .mk-pk-when4 li { gap: 18px; padding: 14px 0; }
.mk-r2 .mk-pk-when4 .mk-pk-bi { width: 44px; height: 44px; }
.mk-r2 .mk-pk-when4 span { font-size: clamp(20px, 1.8vw, 26px); }
.mk-r2 .mk-pk-isi3-art { display: block; max-width: 460px; margin: 0 auto 22px; }
.mk-r2 .mk-pk-isi3 .mk-pk-foot { margin-top: clamp(30px, 3vw, 44px); }
/* /shop/: the jar's pairings as three glyphs; the jar row is a scroll target for the old /rte/ visitors */
.mk-r2 .mk-pk-jarpair { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: -5px; color: var(--brown); }
.mk-r2 .mk-pk-jarpair .mk-ic { width: 22px; height: 22px; }
.mk-r2 #sambal-sardin-kasturi { scroll-margin-top: 110px; }
.mk-r2 .mk-pk-table3 .mk-pk-thname { display: flex; align-items: flex-start; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.mk-r2 .mk-pk-table3 .mk-pk-thname > span { min-width: 0; padding-top: 6px; }
.mk-r2 .mk-pk-onl3 { justify-self: end; max-width: 460px; }
.mk-r2 .mk-pk-onl3 p.mk-pk-onl-t { margin: 0; font-size: 18px; line-height: 1.55; color: #2b1d12; }
.mk-r2 .mk-pk-onl3 p.mk-pk-onl-t a { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.mk-r2 .mk-pk-how3 .mk-prose p + p { margin-top: 14px; }
/* "Baca juga" as a ruled row with the site's own drawn icons (r2 design: no tan card trio) */
.mk-r2 .mk-pk-rel2 { padding: clamp(44px, 5vw, 72px) 0; }
.mk-r2 .mk-pk-rel2-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.mk-r2 .mk-pk-rel2-row a { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 14px; align-items: start; height: 100%; padding: 20px 20px 22px 0; color: var(--ink); text-decoration: none; }
.mk-r2 .mk-pk-rel2-row li + li a { padding-left: 20px; border-left: 1px solid var(--rule-light); }
.mk-r2 .mk-pk-rel2-row .mk-ic { width: 30px; height: 30px; color: var(--brown); }
.mk-r2 .mk-pk-rel2-row span { font-size: 16px; line-height: 1.45; color: #3b2a1d; }
.mk-r2 .mk-pk-rel2-row b { display: block; margin-bottom: 4px; font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.15; letter-spacing: -.012em; color: var(--ink); }
.mk-r2 .mk-pk-rel2-row i { font-style: normal; font-size: 20px; color: var(--brown); }
.mk-r2 .mk-pk-rel2-row a:hover b { text-decoration: underline; }
@media (max-width: 900px) {
  .mk-r2 .mk-pk-rel2-row { grid-template-columns: minmax(0, 1fr); }
  .mk-r2 .mk-pk-rel2-row li + li a { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule-light); }
  .mk-r2 .mk-pk-dine-sit .mk-pk-dine2-art { justify-self: start; width: min(100%, 460px); }
  .mk-r2 .mk-pk-onl3 { justify-self: start; }
}
@media (max-width: 640px) {
  /* /shop/: one short shelf row on phones, prices + units; the table carries the names (r2 design) */
  .mk-r2 .mk-rak-hero3 .mk-pk-tagn { display: none; }
  .mk-r2 .mk-rak-hero3 .mk-pk-tagp { font-size: 20px; }
  .mk-r2 .mk-pk-table3 td[data-l="Tentang"] { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .mk-r2 .mk-pk-table3 .mk-pk-thname { font-size: 18px; }
  .mk-r2 .mk-pk-sit-n b { font-size: 84px; }
  .mk-r2 .mk-pk-sit .mk-pk-draw { max-width: 220px; }
}

/* ---------- /kerjaya/ (round 2): the working day, the size of the operation, an hours-only band ---------- */
.mk-kj3 .mk-kj-band .mk-go { margin-left: auto; }
.mk-kj3 .mk-kj-moments { list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.mk-kj3 .mk-kj-moments li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-kj3 .mk-kj-mo-n { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.mk-kj3 .mk-kj-mo-n b { font-weight: 800; font-size: clamp(64px, 6vw, 96px); line-height: .85; letter-spacing: -.02em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-kj3 .mk-kj-mo-n span { font: 600 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brown-2); }
.mk-kj3 .mk-kj-mo-art { display: block; width: min(100%, 240px); }
.mk-kj3 .mk-kj-mo-art .mk-pk-draw { --pk-bg: var(--kertas); }
.mk-kj3 .mk-kj-mo-t { margin: 0; font-weight: 700; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.12; letter-spacing: -.015em; font-variation-settings: "opsz" 96, "wdth" 86; }
.mk-kj3 .mk-kj-mo-d { margin: 0; font-size: 17px; line-height: 1.55; color: #3b2a1d; }
.mk-kj3 .mk-kj-ops-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mk-kj3 .mk-kj-ops .mk-prose p { color: rgba(250, 242, 226, .9); }
.mk-kj3 .mk-kj-ops .mk-prose a { color: var(--santan); text-decoration-color: var(--kunyit); }
.mk-kj3 .mk-kj-nums3 { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
.mk-kj3 .mk-kj-nums3 li { flex-direction: row; align-items: center; gap: 22px; padding: 20px 0; }
.mk-kj3 .mk-kj-nums3 li:last-child { border-bottom: 2px solid var(--rule-ink); }
.mk-kj3 .mk-kj-nums3 b { min-width: 3.3em; font-size: clamp(54px, 5vw, 80px); }
@media (max-width: 900px) {
  .mk-kj3 .mk-kj-moments, .mk-kj3 .mk-kj-ops-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-kj3 .mk-kj-band .mk-go { margin-left: 0; }
  .mk-kj3 .mk-kj-moments li { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "n n" "a t" "a d"; gap: 6px 16px; align-items: start; }
  .mk-kj3 .mk-kj-mo-n { grid-area: n; }
  .mk-kj3 .mk-kj-mo-n b { font-size: 56px; }
  .mk-kj3 .mk-kj-mo-art { grid-area: a; width: 112px; }
  .mk-kj3 .mk-kj-mo-t { grid-area: t; font-size: 21px; }
  .mk-kj3 .mk-kj-mo-d { grid-area: d; font-size: 16px; }
  .mk-kj3 .mk-kj-nums3 li { gap: 16px; }
  .mk-kj3 .mk-kj-nums3 b { font-size: 48px; min-width: 3em; }
  /* r1 design: here the answer comes before the card on phones (the card is the answer's detail, not a new object) */
  .mk-kj3 .mk-kj-hero3 .mk-kj-card3 { order: 5; }
}
/* the kicap pool under the kambing chunks (a tinted fill, the only filled shape in the line drawings) */
.mk-r2 .mk-pk-draw .pool { fill: var(--brown); fill-opacity: .16; stroke: var(--pk-c, currentColor); }
/* sotong: the rank object sized to the band (r2 design: the band object read small and floating) */
.mk-r2 .mk-pk-dine-rank .mk-pk-dine2-art { width: min(100%, 560px); justify-self: end; }
@media (max-width: 900px) { .mk-r2 .mk-pk-dine-rank .mk-pk-dine2-art { justify-self: start; } }
.mk-r2 .mk-pk-draw .sp { fill: var(--sambal); fill-opacity: .16; }
/* the lunch-online card sits on ink now: its bowl is drawn in brown on the santan card (was santan on santan) */
.mk-r2 .mk-pk-onl3 .mk-pk-draw { color: var(--brown); --pk-bg: var(--santan); --pk-k: var(--brown-2); }
/* the restaurant's own pack description, quoted (FACTS.md client's own lines, 20 Oct 2026) */
.mk-r2 .mk-pk-taste { margin: 26px 0 0; padding-left: 20px; border-left: 3px solid var(--brown); max-width: 34em; }
.mk-r2 .mk-pk-taste p { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(23px, 2vw, 30px); line-height: 1.18; color: var(--brown); }
.mk-r2 .mk-pk-taste cite { display: block; margin-top: 12px; font-style: normal; color: var(--brown-2); }
.mk-r2 .mk-ink .mk-pk-taste { border-left-color: var(--kunyit); }
.mk-r2 .mk-ink .mk-pk-taste p { color: var(--santan); }
.mk-r2 .mk-ink .mk-pk-taste cite { color: rgba(250, 242, 226, .86); }

/* =============================================================================================
   Round 3, 20 Oct 2026 evening (build-notes/REWORK-R2-BRIEF.md for /shop/ and the three pack pages,
   build-notes/SHORTER-PAGE-2026-10-20.md for /kerjaya/): ADDED rules for new classes only, scoped to
   <main class="mk-r2 mk-r3"> or <main class="mk-kj3 mk-kj4">. No small text under 4.5:1.
   ============================================================================================= */
/* question H3s inside a chapter (r1 AEO: how to serve / how to buy are their own chunks) */
.mk-r3 .mk-pk-h3 { margin: 0 0 10px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; font-variation-settings: "opsz" 96, "wdth" 86; scroll-margin-top: 110px; }
.mk-r3 .mk-pk-serve > p, .mk-r3 .mk-pk-buy p { margin: 0; max-width: 40rem; font-size: 17px; line-height: 1.6; color: #2b1d12; }
.mk-r3 .mk-ink .mk-pk-serve > p, .mk-r3 .mk-ink .mk-pk-buy p { color: rgba(250, 242, 226, .9); }
.mk-r3 .mk-ink .mk-pk-buy a, .mk-r3 .mk-ink .mk-pk-about4 .mk-prose a { color: var(--santan); text-decoration-color: var(--kunyit); }
.mk-r3 .mk-pk-buy { margin-top: clamp(28px, 3vw, 40px); padding-top: 18px; border-top: 2px solid var(--ink); }
.mk-r3 .mk-ink .mk-pk-buy { border-top-color: var(--rule-ink); }

/* the three serving steps: brown numerals on a 2px rule, each with its drawing (pack -> warm -> plate) */
.mk-r3 .mk-pk-st4 { list-style: none; margin: 20px 0 0; padding: 0; display: grid; }
.mk-r3 .mk-pk-st4 li { display: grid; grid-template-columns: 64px 128px minmax(0, 1fr); gap: 0 20px; align-items: center; padding: 12px 0; border-top: 2px solid var(--ink); }
.mk-r3 .mk-pk-st4 li:last-child { border-bottom: 2px solid var(--ink); }
.mk-r3 .mk-ink .mk-pk-st4 li { border-color: var(--rule-ink); }
.mk-r3 .mk-pk-st4-n { font-weight: 800; font-size: clamp(64px, 6vw, 92px); line-height: .8; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; }
.mk-r3 .mk-ink .mk-pk-st4-n { color: var(--kunyit); }
.mk-r3 .mk-pk-st4-art { display: block; }
.mk-r3 .mk-pk-st4-t { font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; font-variation-settings: "opsz" 96, "wdth" 86; }
/* the row variant (kambing): three columns, numeral beside its drawing, the step under them */
.mk-r3 .mk-pk-serve-row { margin-top: clamp(40px, 4.4vw, 60px); }
.mk-r3 .mk-pk-serve-row .mk-pk-st4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
.mk-r3 .mk-pk-serve-row .mk-pk-st4 li, .mk-r3 .mk-pk-serve-row .mk-pk-st4 li:last-child { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n a" "t t"; gap: 14px 18px; align-items: end; padding: 18px 0 0; border-bottom: 0; }
.mk-r3 .mk-pk-serve-row .mk-pk-st4-n { grid-area: n; }
.mk-r3 .mk-pk-serve-row .mk-pk-st4-art { grid-area: a; max-width: 210px; }
.mk-r3 .mk-pk-serve-row .mk-pk-st4-t { grid-area: t; }
.mk-r3 .mk-pk-buy-foot { max-width: none; }

/* pack heroes: the pack leans on its plate; the H1 sits on two lines at 1440 (r1 design: "Gergasi," alone) */
.mk-r3 .mk-pk-hero4 .mk-pk-hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.mk-r3 .mk-pk-hero4 .mk-h1 { font-size: clamp(46px, 5.2vw, 82px); }
.mk-r3 .mk-pk-hero4 .mk-pk-hero-art .mk-pk-draw { max-width: 540px; }

/* the facts chapter: sotong = two columns on ink; kambing = head row + a row of steps on kertas */
.mk-r3 .mk-pk-about4-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mk-r3 .mk-pk-about4 .mk-prose { margin-top: 20px; }
.mk-r3 .mk-pk-about4 .mk-prose p + p { margin-top: 14px; }
.mk-r3 .mk-pk-about4-head { align-items: end; }
.mk-r3 .mk-pk-about4-d { margin: 0; max-width: 30em; font-family: var(--serif); font-style: italic; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.16; color: var(--brown); }

/* the set's own chapter: the two packs in the restaurant's words | the steps and how to buy */
.mk-r3 .mk-pk-isi4-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mk-r3 .mk-pk-in { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; }
.mk-r3 .mk-pk-in li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; padding: 16px 0; border-top: 2px solid var(--ink); }
.mk-r3 .mk-pk-in-art .mk-pk-draw { max-width: 104px; }
.mk-r3 .mk-pk-in-n { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.15; }
.mk-r3 .mk-pk-in-n a { color: var(--ink); }
.mk-r3 .mk-pk-in-n .mono { color: var(--brown-2); }
.mk-r3 .mk-pk-in-d { margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; color: var(--brown); }
.mk-r3 .mk-pk-in-q { margin: 0; padding: 16px 0 0; border-top: 2px solid var(--ink); font-weight: 800; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wdth" 80; }
.mk-r3 .mk-pk-isi4 .mk-pk-isi3-k { margin-top: clamp(24px, 3vw, 34px); }
.mk-r3 .mk-pk-isi4 .mk-pk-when4 { margin: 0; }

/* the hero card of the set: the single prices labelled as single prices (r1 design: "a bill that does not add up") */
.mk-r3 .mk-sum-hero-each { margin: 18px 0 0; color: rgba(250, 242, 226, .86); }
.mk-r3 .mk-sum-hero4 .mk-sum-hero-rows { margin-top: 8px; }
.mk-r3 .mk-sum-hero4 .mk-sum-hero-rows b small { margin-left: 6px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 242, 226, .86); }

/* the set's dine-in band object: the restaurant's dulang, sized to the band */
.mk-r3 .mk-pk-dine-dulang .mk-pk-dine2-art { width: min(100%, 560px); justify-self: end; }

/* sotong: the rank numeral at the copy's height with the banana leaf over it (r1 design: the object floated) */
.mk-r3 .mk-pk-rank4 { position: relative; display: block; padding: 20px 0; }
.mk-r3 .mk-pk-rank4 .mk-pk-rank-n { position: absolute; left: 0; top: 50%; transform: translateY(-56%); font-size: clamp(230px, 22vw, 330px); -webkit-text-stroke-width: 5px; }
.mk-r3 .mk-pk-rank4 .mk-pk-rank-art { position: relative; margin-left: clamp(84px, 8.6vw, 128px); }
/* kambing: 7-10 at the copy's height, the roti arab and kari plate over it */
.mk-r3 .mk-pk-sit4 { position: relative; display: block; }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-n { position: absolute; left: 0; top: 0; }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-n b { font-size: clamp(150px, 14vw, 220px); }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-art { display: block; position: relative; margin: clamp(96px, 9.4vw, 140px) 0 0 clamp(40px, 5vw, 80px); }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-k { margin-top: 6px; text-align: right; }
.mk-r3 .mk-pk-dine-sit4 .mk-pk-dine2-art { width: min(100%, 560px); }

/* the designed exit: sibling packs and the jar as drawn tags, then the hub and the guide */
.mk-r3 .mk-pk-ex { margin-top: clamp(40px, 5vw, 64px); }
.mk-r3 .mk-pk-ex-k { margin: 0 0 16px; color: var(--brown-2); }
.mk-r3 .mk-pk-ex-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(18px, 3vw, 40px); }
.mk-r3 .mk-pk-ex-row.mk-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.mk-r3 .mk-pk-ex-row a { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: end; height: 100%; padding-bottom: 14px; border-bottom: 4px solid var(--brown); color: var(--ink); text-decoration: none; }
.mk-r3 .mk-pk-ex-art .mk-pk-draw { max-width: 92px; transition: transform .5s var(--ease); }
.mk-r3 .mk-pk-ex-row a:hover .mk-pk-draw { transform: translateY(-4px); }
.mk-r3 .mk-pk-ex-t { display: flex; flex-direction: column; gap: 4px; padding-bottom: 4px; }
.mk-r3 .mk-pk-ex-t b { font-weight: 800; font-size: 28px; line-height: .95; letter-spacing: -.02em; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 78; }
.mk-r3 .mk-pk-ex-n { font-size: 17px; font-weight: 650; line-height: 1.2; }
.mk-r3 .mk-pk-ex-t .mono { color: var(--brown-2); }
.mk-r3 .mk-pk-ex-more { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 22px 0 0; font-size: 17px; font-weight: 650; }
.mk-r3 .mk-pk-ex-more a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.mk-r3 .mk-pk-ex-more .mk-bi { width: 18px; height: 18px; color: var(--brown); }
.mk-r3 .mk-pk-pair4 .mk-pk-paircard .mk-h2 .it { display: block; }

/* ---------- /shop/ ---------- */
.mk-r3 .mk-rak-hero4 .mk-rak-top { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.mk-r3 .mk-rak-hero4 .mk-h1 { font-size: clamp(46px, 5.1vw, 84px); }
.mk-r3 .mk-band .mk-band-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.mk-r3 .mk-band .mk-band-addr { margin: 0; justify-self: center; }
.mk-r3 .mk-pk-compare4 .mk-h2 { max-width: 16em; }
.mk-r3 .mk-pk-table4 thead th:first-child { width: 36%; }
.mk-r3 .mk-pk-table4 td { padding-top: 22px; font-size: 18px; line-height: 1.55; color: #2b1d12; }
.mk-r3 .mk-pk-table4 td a { color: var(--ink); }
.mk-r3 .mk-pk-how4-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mk-r3 .mk-pk-how4 .mk-prose { margin-top: 20px; }
.mk-r3 .mk-pk-how4 .mk-prose p { color: rgba(250, 242, 226, .9); }
.mk-r3 .mk-pk-how4 .mk-prose a { color: var(--santan); text-decoration-color: var(--kunyit); }
.mk-r3 .mk-pk-how4 .mk-pk-h3 { margin-top: clamp(28px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--rule-ink); }
.mk-r3 .mk-pk-ways { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--rule-ink); }
.mk-r3 .mk-pk-ways li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--rule-ink); }
.mk-r3 .mk-pk-ways .mk-ic { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--kunyit); margin-top: 2px; }
.mk-r3 .mk-pk-ways .mono { color: rgba(250, 242, 226, .86); }
.mk-r3 .mk-pk-way-v { font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mk-r3 .mk-pk-way-v a { color: var(--santan); text-decoration-color: var(--kunyit); }
.mk-r3 .mk-pk-way-or { margin: 0 4px; font-weight: 500; font-size: .72em; color: rgba(250, 242, 226, .86); }
.mk-r3 .mk-pk-rel4-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) and (min-width: 901px) {
  .mk-r3 .mk-pk-rel4-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-r3 .mk-pk-rel4-row li:nth-child(3) a { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .mk-r3 .mk-pk-about4-grid, .mk-r3 .mk-pk-isi4-grid, .mk-r3 .mk-pk-how4-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-hero4 .mk-pk-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-band .mk-band-in { display: flex; }
  .mk-r3 .mk-band .mk-band-addr { justify-self: auto; }
  .mk-r3 .mk-pk-serve-row .mk-pk-st4 { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-serve-row .mk-pk-st4 li, .mk-r3 .mk-pk-serve-row .mk-pk-st4 li:last-child { grid-template-columns: 64px 128px minmax(0, 1fr); grid-template-areas: "n a t"; align-items: center; padding: 12px 0; }
  .mk-r3 .mk-pk-serve-row .mk-pk-st4 li:last-child { border-bottom: 2px solid var(--ink); }
  .mk-r3 .mk-pk-ex-row { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-ex-row.mk-n2 { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-dine-dulang .mk-pk-dine2-art { justify-self: start; }
}
@media (max-width: 640px) {
  /* /shop/: two shelves of two, each tag keeps its name under the price (r1 design) */
  .mk-r3 .mk-rak-hero4 .mk-rak-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 22px; }
  .mk-r3 .mk-rak-hero4 .mk-rak-art .mk-pk-draw { max-width: 132px; }
  .mk-r3 .mk-rak-hero4 .mk-pk-tagn { display: block; font-size: 15px; line-height: 1.2; }
  .mk-r3 .mk-rak-hero4 .mk-pk-tagp { font-size: 24px; }
  .mk-r3 .mk-pk-table4 tr { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-table4 td[data-l="Isi dan rasa"] { grid-column: 1; grid-row: 2; padding-top: 0; font-size: 17px; }
  .mk-r3 .mk-pk-st4 li { grid-template-columns: 44px 92px minmax(0, 1fr); gap: 0 14px; }
  .mk-r3 .mk-pk-serve-row .mk-pk-st4 li, .mk-r3 .mk-pk-serve-row .mk-pk-st4 li:last-child { grid-template-columns: 44px 92px minmax(0, 1fr); }
  .mk-r3 .mk-pk-st4-n { font-size: 60px; }
  .mk-r3 .mk-pk-st4-t { font-size: 19px; }
  .mk-r3 .mk-pk-in li { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .mk-r3 .mk-pk-rank4 .mk-pk-rank-n { font-size: 190px; -webkit-text-stroke-width: 4px; }
  .mk-r3 .mk-pk-rank4 .mk-pk-rank-art { margin-left: 66px; }
  .mk-r3 .mk-pk-sit4 .mk-pk-sit-n b { font-size: 120px; }
  .mk-r3 .mk-pk-sit4 .mk-pk-sit-art { margin: 76px 0 0 30px; }
  .mk-r3 .mk-pk-ex-row a { grid-template-columns: 72px minmax(0, 1fr); }
  .mk-r3 .mk-pk-ex-art .mk-pk-draw { max-width: 72px; }
  .mk-r3 .mk-pk-ex-more { flex-direction: column; gap: 10px; }
}

/* ---------- /kerjaya/, the shorter page ---------- */
.mk-kj4 .mk-kj-grid4 { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; }
/* the hero's own object: a pinned paper notice, its three tear-off tabs the three ways to ask */
.mk-kj4 .mk-kj-notice { position: relative; margin: 22px 0 0; padding: clamp(30px, 3.2vw, 44px) clamp(24px, 3vw, 40px) 0; border-radius: 6px; background: var(--kertas); color: var(--ink); transform: rotate(-1.4deg); box-shadow: 0 34px 60px -32px rgba(0, 0, 0, .8); }
.mk-kj4 .mk-kj-pin { position: absolute; left: 50%; top: -13px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--sambal); box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .2), 0 5px 8px rgba(0, 0, 0, .45); }
.mk-kj4 .mk-kj-notice-k { margin: 0; color: var(--brown-2); }
.mk-kj4 .mk-kj-notice-t { margin: 12px 0 0; font-weight: 800; font-size: clamp(36px, 3.6vw, 56px); line-height: .98; letter-spacing: -.03em; font-variation-settings: "opsz" 96, "wdth" 78; }
.mk-kj4 .mk-kj-notice-t .it { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--brown); font-variation-settings: normal; }
.mk-kj4 .mk-kj-tabs { list-style: none; margin: clamp(26px, 3vw, 36px) calc(-1 * clamp(24px, 3vw, 40px)) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.12fr); border-top: 2px dashed var(--brown-2); }
.mk-kj4 .mk-kj-tabs li { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 16px 26px; border-left: 2px dashed var(--brown-2); }
.mk-kj4 .mk-kj-tabs li:first-child { border-left: 0; padding-left: clamp(24px, 3vw, 40px); }
.mk-kj4 .mk-kj-tabs li:nth-child(2) { transform: rotate(1.6deg) translateY(3px); }
.mk-kj4 .mk-kj-tabs .mk-ic { width: 24px; height: 24px; color: var(--brown); }
.mk-kj4 .mk-kj-tabs .mono { color: var(--brown-2); }
.mk-kj4 .mk-kj-tab-v { font-size: 16px; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.mk-kj4 .mk-kj-tab-v a { color: var(--ink); text-decoration-color: var(--brown-2); }
/* the day: three moments (numerals one size, the third a range) over the day ruler */
.mk-kj4 .mk-kj-mo-n b { font-size: clamp(54px, 4.6vw, 72px); white-space: nowrap; }
.mk-kj4 .mk-kj-rul { margin: clamp(30px, 4vw, 48px) 0 0; }
.mk-kj4 .mk-kj-rul-ticks { position: relative; height: 30px; border-bottom: 1px solid var(--rule-light); }
.mk-kj4 .mk-kj-rul-ticks span { position: absolute; left: calc(var(--i) * 10%); top: 0; font-size: 14px; color: var(--brown-2); transform: translateX(-50%); }
.mk-kj4 .mk-kj-rul-ticks span:first-child { transform: none; }
.mk-kj4 .mk-kj-rul-ticks span:last-child { transform: translateX(-100%); }
.mk-kj4 .mk-kj-rul-bands { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); margin-top: 10px; }
.mk-kj4 .mk-kj-rb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; padding: 14px 16px; border-radius: 12px; }
.mk-kj4 .mk-kj-rb b { font-size: 17px; line-height: 1.2; }
.mk-kj4 .mk-kj-rb .mono { color: var(--ink); }
.mk-kj4 .mk-kj-rb-1 { grid-column: 1 / span 3; margin-right: 4px; background: var(--kunyit); }
.mk-kj4 .mk-kj-rb-gap { grid-column: 4 / span 1; justify-content: center; padding: 14px 4px; background: repeating-linear-gradient(135deg, rgba(94, 51, 20, .14) 0 6px, transparent 6px 12px); border: 1px dashed var(--brown-2); }
.mk-kj4 .mk-kj-rb-2 { grid-column: 5 / span 6; margin-left: 4px; justify-content: space-between; background: var(--santan-2); }
/* the operation: the story link folded into the prose; the stats end with the column */
.mk-kj4 .mk-kj-ops4 .mk-kj-nums4 span a { color: var(--santan); text-decoration-color: var(--kunyit); }
.mk-kj4 .mk-kj-ops4 .mk-kj-ops-grid { align-items: center; }
/* the FAQ at one reading measure (r2 design: ~95 characters a line) */
.mk-kj4 .mk-kj-faq-list .qa .a, .mk-kj4 .mk-kj-faq-list .qa .a p { max-width: 40rem; }
/* the close: heading | address + three ways there (no second week) */
.mk-kj4 .mk-kj-close4-t { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.mk-kj4 .mk-kj-close4-t .mk-closer-a .mk-addr { margin-top: 0; }
@media (max-width: 900px) {
  .mk-kj4 .mk-kj-grid4 { grid-template-columns: minmax(0, 1fr); }
  .mk-kj4 .mk-kj-close4-t { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-kj4 .mk-kj-hero4 .mk-kj-notice { order: 5; margin-top: 34px; transform: rotate(-.8deg); }
  .mk-kj4 .mk-kj-tabs { grid-template-columns: minmax(0, 1fr); }
  .mk-kj4 .mk-kj-tabs li, .mk-kj4 .mk-kj-tabs li:first-child { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; padding: 14px clamp(24px, 3vw, 40px); border-left: 0; border-top: 2px dashed var(--brown-2); }
  .mk-kj4 .mk-kj-tabs li:first-child { border-top: 0; }
  .mk-kj4 .mk-kj-tabs li:nth-child(2) { transform: none; }
  .mk-kj4 .mk-kj-tabs .mk-ic { grid-row: 1 / span 2; }
  .mk-kj4 .mk-kj-mo-n b { font-size: 48px; }
  .mk-kj4 .mk-kj-rul-ticks { display: none; }
  .mk-kj4 .mk-kj-rul-bands { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mk-kj4 .mk-kj-rb-1, .mk-kj4 .mk-kj-rb-gap, .mk-kj4 .mk-kj-rb-2 { grid-column: 1; margin: 0; justify-content: space-between; padding: 12px 16px; }
}
/* round 3, after the first shots: drawings fill their boxes, columns end together, nothing hidden behind a plate */
.mk-r3 .mk-pk-st4-art .mk-pk-draw { width: 100%; height: 96px; }
.mk-r3 .mk-pk-serve-row .mk-pk-st4-art .mk-pk-draw { height: 124px; }
.mk-r3 .mk-pk-ex-art .mk-pk-draw { width: 92px; height: 104px; max-width: none; }
.mk-r3 .mk-pk-rank4 .mk-pk-rank-art { margin-left: clamp(60px, 6vw, 86px); }
.mk-r3 .mk-pk-hero4.mk-pk-hero-flip .mk-pk-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-n { flex-direction: row; align-items: flex-start; gap: 14px; }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-n b { font-size: clamp(140px, 12.5vw, 190px); }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-n span { margin-top: 16px; }
.mk-r3 .mk-pk-sit4 .mk-pk-sit-art { max-width: 440px; margin: clamp(104px, 9.6vw, 128px) 0 0 auto; }
.mk-r3 .mk-pk-buy-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(30px, 5vw, 84px); align-items: start; }
.mk-r3 .mk-pk-buy-foot .mk-pk-h3 { margin: 0; }
.mk-r3 .mk-rak-hero4 .mk-rak-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
.mk-r3 .mk-rak-hero4 .mk-h1 { font-size: clamp(44px, 4.3vw, 64px); }
.mk-r3 .mk-pk-rel4-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-r3 .mk-pk-rel4-row li:nth-child(3) a { padding-left: 0; border-left: 0; }
.mk-r3 .mk-pk-when5 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px); margin: 0; border-top: 0; }
.mk-r3 .mk-pk-when5 li { border-top: 2px solid var(--ink); border-bottom: 0; }
.mk-r3 .mk-pk-isi4 .wrap + .wrap { margin-top: clamp(36px, 4vw, 56px); }
.mk-r3 .mk-pk-isi4 .wrap + .wrap .mk-pk-isi3-k { margin-top: 0; }
.mk-kj4 .mk-kj-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) auto; }
.mk-kj4 .mk-kj-tabs li:nth-child(3) .mk-kj-tab-v { overflow-wrap: normal; white-space: nowrap; }
@media (min-width: 1101px) {
  .mk-r3 .mk-pk-rel4-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-r3 .mk-pk-rel4-row li:nth-child(3) a { padding-left: 20px; border-left: 1px solid var(--rule-light); }
}
@media (max-width: 900px) {
  .mk-r3 .mk-pk-rel4-row { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-buy-foot { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-buy-foot .mk-pk-h3 { margin-bottom: 10px; }
  .mk-r3 .mk-pk-when5 { grid-template-columns: minmax(0, 1fr); }
  .mk-r3 .mk-pk-when5 li:last-child { border-bottom: 1px solid var(--rule-light); }
  /* sotong, phones: what it is -> how to serve -> how to buy */
  .mk-r3 .mk-pk-about4-cols .mk-pk-about4-grid { display: flex; flex-direction: column; gap: 0; }
  .mk-r3 .mk-pk-about4-cols .mk-pk-about4-grid > div:first-child { display: contents; }
  .mk-r3 .mk-pk-about4-cols .mk-pk-about4-grid > div:first-child > * { order: 1; }
  .mk-r3 .mk-pk-about4-cols .mk-pk-about4-grid > .mk-pk-serve { order: 2; margin-top: 36px; }
  .mk-r3 .mk-pk-about4-cols .mk-pk-about4-grid > div:first-child > .mk-pk-buy { order: 3; }
  .mk-r3 .mk-pk-sit4 .mk-pk-sit-art { margin-left: 0; }
  .mk-kj4 .mk-kj-tabs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mk-r3 .mk-pk-st4-art .mk-pk-draw, .mk-r3 .mk-pk-serve-row .mk-pk-st4-art .mk-pk-draw { height: 72px; }
  .mk-r3 .mk-pk-ex-art .mk-pk-draw { width: 72px; height: 84px; }
  .mk-r3 .mk-pk-rank4 .mk-pk-rank-art { margin-left: 40px; }
  .mk-r3 .mk-pk-sit4 .mk-pk-sit-n b { font-size: 112px; }
  .mk-r3 .mk-pk-sit4 .mk-pk-sit-art { margin-top: 70px; max-width: 300px; }
}
.mk-r3 .mk-pk-sit4 { display: flow-root; }   /* the plate's top margin stays inside (it collapsed onto the numeral) */
.mk-r3 .mk-pk-sit4 .mk-pk-sit-art { margin-top: clamp(52px, 4.4vw, 64px); }   /* the plate overlaps the foot of 7-10, never the digits' bodies */
@media (max-width: 640px) { .mk-r3 .mk-pk-sit4 .mk-pk-sit-art { margin-top: 34px; } }
@media (max-width: 900px) { .mk-kj4 .mk-kj-grid4 { align-items: stretch; } }   /* the phone column stays left-aligned */
/* the day ruler's bands as a proportional row (3 h | 1 h | 6 h of the 10-hour day), not a 10-column card grid */
.mk-kj4 .mk-kj-rul-bands { display: flex; }
.mk-kj4 .mk-kj-rb-1 { flex: 0 0 calc(30% - 4px); }
.mk-kj4 .mk-kj-rb-gap { flex: 0 0 10%; }
.mk-kj4 .mk-kj-rb-2 { flex: 1 1 0; }
@media (max-width: 640px) {
  .mk-kj4 .mk-kj-rul-bands { flex-direction: column; gap: 6px; }
  .mk-kj4 .mk-kj-rb-1, .mk-kj4 .mk-kj-rb-gap, .mk-kj4 .mk-kj-rb-2 { flex: none; }
}

/* 21 Oct 2026 design polish: /kerjaya/ notice. Three tear-off tabs side by side only fit from ~1400px: at 1440 the
   address tab was the narrowest (five lines, "Bandar" alone), and between 901 and ~1300px the notice is ~400px wide,
   so the address broke inside words ("Seksye/n", "Tamba/han") and the phone ran into the e-mail tab. Wide: the two
   short tabs take their own width, the address the rest. 901-1399px: the tabs stack as rows, as on phones. */
@media (min-width: 1400px) {
  .mk-kj4 .mk-kj-tabs { grid-template-columns: minmax(180px, 1fr) max-content max-content; }
  .mk-kj4 .mk-kj-tabs li:first-child .mk-kj-tab-v { text-wrap: balance; }
}
@media (min-width: 901px) and (max-width: 1399px) {
  .mk-kj4 .mk-kj-tabs { grid-template-columns: minmax(0, 1fr); }
  .mk-kj4 .mk-kj-tabs li, .mk-kj4 .mk-kj-tabs li:first-child { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; padding: 14px clamp(24px, 3vw, 40px); border-left: 0; border-top: 2px dashed var(--brown-2); }
  .mk-kj4 .mk-kj-tabs li:first-child { border-top: 0; }
  .mk-kj4 .mk-kj-tabs li:nth-child(2) { transform: none; }
  .mk-kj4 .mk-kj-tabs .mk-ic { grid-row: 1 / span 2; }
  .mk-kj4 .mk-kj-tabs li:nth-child(3) .mk-kj-tab-v { white-space: normal; overflow-wrap: anywhere; }
}