/* =============================================================================================
   Mak Kimbong · the writer's article shell (content-build/article-template.html ONLY) · 14 Oct 2026
   Loaded after css/inner.css by the template alone; every rule is scoped to body.mk-t-wr, which only
   pages rendered from article-template.html carry. Hand-built pages never load this file, so nothing
   here changes them. Why (first-article design check, 14 Oct 2026, sarapan-pagi-di-bandar-baru-bangi):
   - a plate cut-out hero (dish/, dish-hd/, big/fav-*) was cropped by the 4:5 / 16:10 cover box;
   - inline own-photo figures had no layout (browser default indent, 480 px plates at full size);
   - stacked quote cards touched each other and the next paragraph;
   - FAQ answers kept the landing's 60 px right gutter, a ~28 character column on a phone.
   ============================================================================================= */

/* hero: plate cut-outs are shown whole, on the tinted card, with the plates' own soft shadow */
.mk-t-wr .mk-art-fig img:is([src*="/dish/"], [src*="/dish-hd/"], [src*="/big/fav-"]) {
  object-fit: contain; padding: 6%; box-sizing: border-box;
  filter: drop-shadow(0 22px 26px rgba(94, 51, 20, .32));
}
@media (min-width: 901px) {
  .mk-t-wr .mk-art-fig img:is([src*="/dish/"], [src*="/dish-hd/"], [src*="/big/fav-"]) { aspect-ratio: 1 / 1; }
}
.mk-t-wr .mk-art-fig img[src*="/big/fav-"] { max-width: 440px; margin-inline: auto; }  /* 400 px sources: never stretched */

/* body figures: no browser indent */
.mk-t-wr .mk-art-body figure { margin-left: 0; margin-right: 0; }

/* an own-photo plate beside its caption (dish/ cut-outs are 480 px: shown small, never stretched) */
.mk-t-wr .mk-art-body .mk-wr-plate { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: center;
  width: fit-content; max-width: var(--measure); margin: 30px 0; padding: 16px 28px 16px 16px; border-radius: var(--r-card); background: var(--santan-2); }
.mk-t-wr .mk-art-body .mk-wr-plate .mk-plate { width: 100%; }
.mk-t-wr .mk-art-body .mk-wr-plate figcaption { margin: 0; font-size: 16px; line-height: 1.45; color: #3b2a1d; }

/* quote cards: their own breathing room inside the reading column */
.mk-t-wr .mk-art-body .mk-review { max-width: var(--measure); margin: 26px 0; }
.mk-t-wr .mk-art-body .mk-review + .mk-review { margin-top: -12px; }
.mk-t-wr .mk-art-body .mk-review cite { font-size: 15px; }

/* FAQ cards in the body: answers use the column's full width */
.mk-t-wr .mk-art-body .qa .a { padding-right: 0; }
.mk-t-wr .mk-art-body .mk-cites { max-width: var(--measure); margin-top: 34px; }

/* tablet (641-900 px): the hero figure spans the full column; inner.css keeps 4:5 until 640 px, which made a
   ~750 x 940 px box here. A landscape box keeps the answer and the first chapter close to the top. */
@media (max-width: 900px) {
  .mk-t-wr .mk-art-fig img { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .mk-t-wr .mk-art-fig img:is([src*="/dish/"], [src*="/dish-hd/"], [src*="/big/fav-"]) { padding: 3%; }
  .mk-t-wr .mk-art-body .mk-wr-plate { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 16px 12px 10px; }
  .mk-t-wr .mk-art-body .mk-wr-plate figcaption { font-size: 15px; }
  .mk-t-wr .mk-art-body .qa summary { padding-right: 40px; }
}

/* =============================================================================================
   20 Oct 2026 · finish run (page review r1, Design seat, on the first three writer articles). Additive, scoped to
   the writer's shell (.mk-t-wr). Markup for 1 and 5-6 comes from build-notes/article_enrich.py (post-render).
   ============================================================================================= */

/* 1. the H1 in two voices (signature move 1): the heavy line, then the Instrument Serif italic line (brown on the
   light hero, inner.css). Article titles run long, so the italic line is a little under the heavy line's size. */
.mk-t-wr .mk-h1-art .it { font-size: .88em; line-height: .98; margin-top: .08em; letter-spacing: -.008em; }

/* 2. section headings wrap without a one-word last line */
.mk-t-wr .mk-art-body h2 { text-wrap: balance; }

/* 3. the single-plate caption card: one width for every card (was fit-content: uneven, mostly empty) */
.mk-t-wr .mk-art-body .mk-wr-plate { width: min(100%, 540px); grid-template-columns: 150px minmax(0, 1fr); gap: 22px;
  padding: 14px 28px 14px 14px; }

/* 4. "Baca seterusnya": the cards fill the row and carry their arrow in the space kept for it */
.mk-t-wr .mk-rel-slot > .related-card { flex: 1 1 0; min-width: 220px; max-width: none; }
.mk-t-wr .related-card::after { content: "→"; content: "→" / ""; position: absolute; left: 22px; bottom: 18px;
  font-size: 20px; line-height: 1; color: var(--brown); transition: transform .3s var(--ease); }
.mk-t-wr .related-card:hover::after { transform: translateX(4px); }

/* 5. a row of plates inside a section: up to three of their own plates, names in mono under each */
.mk-t-wr .mk-art-body .mk-en-plates { margin: 30px 0 34px; max-width: var(--measure); }
.mk-t-wr .mk-art-body .mk-en-plates .mk-chap-plates { margin: 0; grid-template-columns: repeat(var(--n, 3), minmax(0, 200px));
  justify-content: start; gap: 18px 24px; }
.mk-t-wr .mk-art-body .mk-en-plates .mk-chap-plates.mk-n1 { --n: 1; }
.mk-t-wr .mk-art-body .mk-en-plates .mk-chap-plates > .mk-plate { width: min(176px, 100%); }
.mk-t-wr .mk-art-body .mk-en-plates .mk-plate-nm { max-width: 100%; text-wrap: balance; margin-top: 12px; font: 600 12px/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; color: var(--brown-2); }

/* 6. the sittings table (the comparison page's style): each sitting's line icon on a plate disc, hours bold, Isnin in
   sambal; site.js marks the sitting being served now (tr.now: the disc turns kunyit) */
.mk-t-wr .mk-en-disc { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--santan); color: var(--brown); box-shadow: 0 6px 14px rgba(94, 51, 20, .16); transition: background .3s; }
.mk-t-wr .mk-en-disc .mk-ic { width: 26px; height: 26px; }
.mk-t-wr .mk-en-sit .mk-table tbody th a { gap: 14px; }
.mk-t-wr .mk-en-th { display: flex; align-items: center; gap: 14px; font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.1; }
.mk-t-wr .mk-en-sit .mk-table tbody th, .mk-t-wr .mk-en-sit .mk-table td { vertical-align: middle; }
.mk-t-wr .mk-en-sit tr.mk-en-off td b { color: var(--sambal); }
.mk-t-wr .mk-en-sit tr.now .mk-en-disc { background: var(--kunyit); color: var(--ink); }

/* 7. the site's facility tiles (line icons, the homepage's facility-tile style) where a section is about getting there,
   parking, surau, family, sharing, takeaway or walk-in: two to four tiles, icon above the label */
.mk-t-wr .mk-art-body .mk-facfig.mk-en-fac { max-width: var(--measure); margin: 30px 0 34px; }
.mk-t-wr .mk-art-body .mk-facfig.mk-en-fac.mk-n2 { max-width: 520px; }
.mk-t-wr .mk-en-fac.mk-n2 { --n: 2; }
.mk-t-wr .mk-en-fac.mk-n3 { --n: 3; }
.mk-t-wr .mk-en-fac.mk-n4 { --n: 4; }
.mk-t-wr .mk-art-body .mk-en-fac .mk-facil { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.mk-t-wr .mk-art-body .mk-en-fac .facil li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px;
  font-size: 15px; line-height: 1.3; }

@media (max-width: 640px) {
  .mk-t-wr .mk-art-body .mk-wr-plate { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px 16px 12px 10px; }
  /* "Baca seterusnya" as ruled rows on phones, like the site's other related lists (inner.css R2-05) */
  .mk-t-wr .mk-rel-slot { flex-direction: column; }
  .mk-t-wr .mk-rel-slot > .related-card { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 4px 14px;
    align-items: start; min-width: 0; min-height: 0; padding: 14px 2px 15px; border-radius: 0; background: none;
    border-bottom: 1px solid var(--rule-light); }
  .mk-t-wr .mk-rel-slot > .related-card:hover { transform: none; background: rgba(254, 196, 18, .25); }
  .mk-t-wr .related-card .rc-cat, .mk-t-wr .related-card .rc-title { grid-column: 1; }
  .mk-t-wr .related-card .rc-title { font-size: 17.5px; line-height: 1.2; }
  .mk-t-wr .related-card::after { position: static; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 18px; }
  .mk-t-wr .mk-art-body .mk-en-plates .mk-chap-plates { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px 12px; }
  .mk-t-wr .mk-art-body .mk-en-plates .mk-chap-plates.mk-n1 { grid-template-columns: minmax(0, 150px); }
  .mk-t-wr .mk-art-body .mk-en-fac.mk-n4 .mk-facil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-t-wr .mk-art-body .mk-en-fac .facil li { padding: 14px 12px; font-size: 14.5px; }
  .mk-t-wr .mk-en-disc { width: 44px; height: 44px; }
  .mk-t-wr .mk-en-disc .mk-ic { width: 22px; height: 22px; }
}

/* =============================================================================================
   21 Oct 2026 · design polish before the full preview (build-notes/DESIGN-POLISH-2026-10-21.md, helper A). Cheap fixes
   for faults the round-2 Design reviews named on the writer's articles; scoped to .mk-t-wr (the three guides and the
   hand-built pages never carry it). Additive: nothing above is changed.
   ============================================================================================= */

/* P1. two right edges in the article column at 1440: the prose measure (66ch of the 18px body text) and the full break
   width (h2 rules, tables). Every boxed block that used 66ch of its own 17px type stopped ~43px short of the prose.
   --mk-meas is registered as a length, so it is computed once on .mk-art-body (17px) and inherited as px; without
   @property support it falls back to the same value on each 17px box. */
@property --mk-meas { syntax: '<length>'; inherits: true; initial-value: 0px; }
.mk-t-wr .mk-art-body { --mk-meas: calc(var(--measure) * 18 / 17); }
.mk-t-wr .mk-art-body > :is(.mk-keybox, .mk-review, .mk-steps, .mk-wr-faq, .mk-cites, .mk-online, .mk-addrcard, .mk-bignum,
  .mk-pick, .mk-lob, .mk-packrow, .mk-facfig, .mk-fcard, .mk-dulang, .mk-en-plates, ul, ol):not(.mk-break) { max-width: var(--mk-meas); }
.mk-t-wr .mk-art-body .mk-facfig.mk-en-fac.mk-n2 { max-width: var(--mk-meas); }

/* P2. icon tables: a one-line row head is centred on its 52px disc, so it sat ~13px under the first line of its cell.
   Centre the cells of those rows too (the sittings table already does). */
.mk-t-wr .mk-table tbody tr:has(.mk-en-th, .mk-en-disc) > :is(th, td) { vertical-align: middle; }

/* P3. step lists: on the prose's left edge (the ol kept the body's 1.2em list indent), the title stacked over its line
   beside the numeral (one-word titles left a ~180px hole before the sentence), the last rule as strong as the others,
   and a full block gap before what follows. */
.mk-t-wr .mk-art-body ol.mk-steps { padding-left: 0; margin-bottom: 34px; }
.mk-t-wr .mk-art-body .mk-steps li:last-child { border-bottom: 2px solid var(--ink); }
.mk-t-wr .mk-art-body .mk-steps small.mono { white-space: nowrap; }
.mk-t-wr .mk-art-body .mk-steps + p:has(> .btn:only-child) { margin-top: -10px; }
@media (min-width: 641px) {
  .mk-t-wr .mk-art-body .mk-steps li { grid-template-columns: 64px minmax(0, 1fr) 36px; gap: 8px 24px; align-items: start; }
  .mk-t-wr .mk-art-body .mk-steps .mk-step-k { grid-row: 1 / span 2; }
  .mk-t-wr .mk-art-body .mk-steps .mk-step-t { grid-column: 2; grid-row: 1; }
  .mk-t-wr .mk-art-body .mk-steps span:not(.mk-step-k) { grid-column: 2; grid-row: 2; max-width: 40em; }
  .mk-t-wr .mk-art-body .mk-steps .mk-ic { grid-column: 3; grid-row: 1 / span 2; }
}

/* P4. the closing ticket: "cuti umum buka seperti / biasa" left "biasa" alone on its line */
.mk-t-wr .mk-closer-w p { text-wrap: balance; text-wrap: pretty; }

/* P5. big-number lockups: the heading started above the numeral's top (bottom-aligned flex), wrapped to leave one word
   alone ("... hingga / Ahad", "... menu / kami"), and the line under it was set under body size */
.mk-t-wr .mk-art-body .mk-bignum { align-items: flex-start; }
.mk-t-wr .mk-art-body .mk-bignum figcaption { max-width: 34em; padding: 2px 0 0; font-size: 18px; line-height: 1.5; }
.mk-t-wr .mk-art-body .mk-bignum figcaption b { margin-bottom: 6px; text-wrap: balance; }

/* P6. big numerals whose condensed 800 glyphs touched ("RM49.90", "2,800", "120+") */
.mk-t-wr .mk-art-body .mk-bignum-n { letter-spacing: -.01em; }
.mk-t-wr .mk-art-body .mk-pack-p { letter-spacing: .01em; }
.mk-t-wr .mk-art-body .mk-fcard-num { letter-spacing: -.01em; }

/* P7. the "Bil." counts in menu tables: numerals as objects (as the lunch guide's), not footnote-size digits */
.mk-t-wr .mk-table td[data-l="Bil."] > :is(b, .mk-n, .mk-step-k) { display: inline-block; font-weight: 800; font-size: 40px; line-height: .85;
  letter-spacing: 0; color: var(--brown); font-variation-settings: "opsz" 96, "wdth" 75; white-space: nowrap; }

/* P8. a row numeral in an icon-table head ("1 Pilihan lauk") read glued to its word */
.mk-t-wr .mk-en-th .mk-n { display: inline-block; margin-right: .3em; letter-spacing: 0; }

/* P9. the sittings table: the lunch row's "hingga 5.00 petang" was a second, lighter style in the hours column */
.mk-t-wr .mk-en-sit td .mk-td-sub { margin-top: 2px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); }

/* P10. a single plate beside its caption: the plate at plate size on the ground (turned, with its shadow), the caption
   beside it on the prose measure; it was a ~130px thumbnail in a mostly empty 540px card */
.mk-t-wr .mk-art-body .mk-wr-plate { width: 100%; max-width: var(--mk-meas); grid-template-columns: 220px minmax(0, 1fr); gap: 34px;
  margin: 34px 0; padding: 0; border-radius: 0; background: none; }
.mk-t-wr .mk-art-body .mk-wr-plate .mk-plate { --r: -6deg; }
.mk-t-wr .mk-art-body .mk-wr-plate figcaption { max-width: 30em; padding-left: 18px; border-left: 2px solid var(--kunyit); font-size: 17px; line-height: 1.5; }

/* P11. a large plate (.mk-plate-xl) alone in a break-width figure sat at the left with ~550px of empty ground to its
   right, its mono caption one 800px line: plate and caption as one object, centred in the break width */
.mk-t-wr .mk-art-body figure.mk-break:has(> .mk-plate-xl) { display: grid; grid-template-columns: min(400px, 100%) minmax(0, 17em);
  justify-content: center; align-items: end; gap: 12px 34px; }
.mk-t-wr .mk-art-body figure.mk-break:has(> .mk-plate-xl) > figcaption { margin: 0 0 34px; line-height: 1.6; }

/* P12. facility tiles: a two-tile tray across the measure with the icon beside its label (it was a 520px half-row) */
@media (min-width: 641px) {
  .mk-t-wr .mk-art-body .mk-en-fac.mk-n2 .facil li { flex-direction: row; align-items: center; gap: 14px; }
}
.mk-t-wr .mk-art-body .mk-en-fac .facil li { text-wrap: balance; }

/* P13. the online-order strip: the same padding and kunyit icon disc as the page's other cards, and a full gap after it
   (the next paragraph started 14px under it) */
.mk-t-wr .mk-art-body .mk-online { margin: 30px 0; padding: 22px 26px; border-radius: var(--r-card); }
.mk-t-wr .mk-art-body .mk-online > .mk-ic { flex: none; box-sizing: border-box; width: 56px; height: 56px; padding: 14px; border-radius: 50%;
  background: var(--kunyit); color: var(--ink); }

/* P14. the three ways to eat (mk-lob): on the prose measure (P1), so each title fits one line and the three tiles take
   the same three lines, and a full gap before the prose under it (it was ~20px) */
.mk-t-wr .mk-art-body > .mk-lob { margin-bottom: 30px; }

/* P15. pack cards are links: say so with an arrow and a focus ring (they read as a static price list) */
.mk-t-wr .mk-art-body a.mk-pack { position: relative; }
.mk-t-wr .mk-art-body a.mk-pack::after { content: "\2192"; content: "\2192" / ""; position: absolute; right: 22px; bottom: 12px; font-size: 18px;
  line-height: 1; color: var(--kunyit); transition: transform .3s var(--ease); }
.mk-t-wr .mk-art-body a.mk-pack:hover::after { transform: translateX(4px); }
.mk-t-wr .mk-art-body a.mk-pack:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; }

/* P16. drawn heroes (assets/img/draw/, 1:1 drawings) were cut by the photo cover box: badges kissed the tile edge */
.mk-t-wr .mk-art-fig img[src*="/draw/"] { object-fit: contain; }
/* the Kisah hero (amb/a25, only on /kisah-mak-kimbong/): the portrait crop at 1440 cut away the cook its alt text names
   (far left of the source) and centred on a customer's back; keep the left of the photo, as the phone crop shows it */
.mk-t-wr .mk-art-fig img[src*="/amb/a25."] { object-position: 8% 50%; }

/* P17. the year spine: the right-hand years ran to, and past, the end of their row rule */
.mk-t-wr .mk-art-body .mk-year:nth-child(even) .mk-year-n { padding-right: .14em; }

/* P18. a phone number never breaks across two lines ("017- / 334 0319" in FAQ answers at 390); bare numbers in the
   body carry .mk-nw (inner.css) since 21 Oct */
.mk-t-wr .mk-art-body a[href^="tel:"] { white-space: nowrap; }

@media (max-width: 640px) {
  .mk-t-wr .mk-art-body .mk-wr-plate { grid-template-columns: 132px minmax(0, 1fr); gap: 18px; padding: 0; }
  .mk-t-wr .mk-art-body .mk-wr-plate figcaption { padding-left: 12px; font-size: 15.5px; }
  .mk-t-wr .mk-art-body figure.mk-break:has(> .mk-plate-xl) { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .mk-t-wr .mk-art-body figure.mk-break:has(> .mk-plate-xl) > figcaption { margin: 0; }
  /* a pair of plates stays two-up on phones (the plate-row rule), not two ~310px plates stacked */
  .mk-t-wr .mk-art-body figure > .mk-packrow:has(> .mk-plate) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* three facility tiles: two-up with the first (the address) across both, not three 88px columns */
  .mk-t-wr .mk-art-body .mk-en-fac.mk-n3 .mk-facil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-t-wr .mk-art-body .mk-en-fac.mk-n3 .facil li:first-child { grid-column: 1 / -1; }
  /* numbered cards (1 / 2 / 3) as a compact ruled list: numeral beside the title, not three ~170px cards */
  .mk-t-wr .mk-art-body .mk-pick { gap: 0; }
  .mk-t-wr .mk-art-body .mk-pick li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 14px; align-items: baseline;
    padding: 14px 2px 16px; border-radius: 0; background: none; border-top: 2px solid var(--ink); }
  .mk-t-wr .mk-art-body .mk-pick li:last-child { border-bottom: 2px solid var(--ink); }
  .mk-t-wr .mk-art-body .mk-pick li::before { grid-row: 1 / span 2; margin: 0; font-size: 44px; }
  .mk-t-wr .mk-art-body .mk-pick li > * { grid-column: 2; }
  .mk-t-wr .mk-table td[data-l="Bil."] > :is(b, .mk-n, .mk-step-k) { font-size: 34px; }
  .mk-t-wr .mk-art-body a.mk-pack::after { bottom: 14px; }
}