/* Hallmark · shape: Photographic, home redesigned 2026-11-05 (the Instagram feed as the first screen, the printed menu next) · genre: editorial · theme: Hedgerow (by request) · job: visit · draw: f83103
 * hero: Index (the feed is the hero: a 4:5 mosaic of the latest posts) · nav: banner over a retracting bar · footer: colophon block · imagery: the owner's Instagram posts (synced) and the printed menu · signature: the feed mosaic under a nav bar laid on the menu's own green chilli pattern, closed by its bamboo weave; square controls throughout · hedgerow: hedge
 * axes: dark/high-contrast-serif/chromatic-green · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, the lead tile is whatever was posted last, so the first screen changes with Instagram */
/* waive 58 (menu/ and home): the printed menu and the Instagram captions are the owner's own content
 * waive 77 (lokasi/, tentang/): utility pages built as Google Ads sitelink destinations, one job each, kept short on purpose
 * waive 44c, 44d (home): the owner asked for the Instagram feed first; the mosaic starts on the first screen and runs below it on purpose
 * waive 58 (home hero): the status pill is live open or closed status, not a label
 * waive 62 (home): small-tile captions reveal on hover to keep the mosaic clean; every caption is also in its image's alt
 * texture: the green chilli pattern (nav bar) and the bamboo weave (one edge) are cut from the owner's printed menu (assets/img/texture-*.jpg) */
@import url("./tokens.css");
@import url("./base.css");

:root { --banner-h: 40px; --bar-h: 64px; --radius-control: 0; } /* square controls and tags, by the owner's call: no pills */

/* Page */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 700; }
.skip:focus-visible { top: var(--space-md); }
h1, h2, h3 { font-weight: 400; line-height: 1.08; font-synthesis: none; }
body { color: var(--color-ink); font-size: 1.0625rem; line-height: 1.6; }
p { color: var(--color-ink-2); }
a { text-decoration-color: var(--color-accent); }
.figure { font-family: var(--font-display); font-weight: 400; font-variant-numeric: lining-nums tabular-nums; }

/* Controls: the theme's pair */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1.5px solid var(--color-accent); border-radius: var(--radius-control); background: transparent; color: var(--color-accent); font: 700 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--secondary:hover { background: color-mix(in oklab, var(--color-accent) 14%, transparent); }
.btn:active { background: var(--color-accent-2); border-color: var(--color-accent-2); color: var(--color-accent-ink); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.link { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-thickness: 2px; }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Chrome: a banner that scrolls away over a bar that retracts on the way down */
.banner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); min-height: var(--banner-h); margin: 0; padding: var(--space-2xs) var(--gutter); background: var(--color-paper-2); color: var(--color-ink-2); font-size: var(--text-sm); text-align: center; }
.banner a { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.25em; }
.banner a:hover { text-decoration-thickness: 2px; }
.banner a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background-color: var(--color-paper); background-image: linear-gradient(color-mix(in oklab, var(--color-paper) 58%, transparent), color-mix(in oklab, var(--color-paper) 58%, transparent)), url("../img/texture-lombok.jpg"); background-repeat: repeat-x; background-position: center; background-size: auto 100%; border-bottom: var(--rule-hair) solid var(--color-rule); transition: transform var(--dur-short) var(--ease-out); }
.bar.is-tucked { transform: translateY(-100%); }
.bar:focus-within { transform: none; }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--bar-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font: 400 var(--text-xl)/1 var(--font-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.wordmark img { width: 40px; height: 40px; object-fit: contain; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.bar__links { display: flex; align-items: center; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.bar__links a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.35em; white-space: nowrap; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.bar__links a:hover, .bar__links a[aria-current] { text-decoration-color: var(--color-accent); }
.bar__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.bar__links .bar__call { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border: 1.5px solid var(--color-accent); border-radius: var(--radius-control); color: var(--color-accent); font-weight: 700; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.bar__links .bar__call:hover { background: color-mix(in oklab, var(--color-accent) 14%, transparent); }
.tabs { display: none; }

/* Photographs: square, a cream ring at 8%, colour kept true */
.photo { position: relative; margin: 0; }
.photo > img, [data-slot] > img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.photo figcaption, .caption { margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.photo figcaption b, .caption b { color: var(--color-ink); font-weight: 500; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Head blocks */
.head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.head h2 { max-width: 18ch; }
.head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.head--split h2 { grid-column: 1 / span 6; }
.head--split > :not(h2) { grid-column: 8 / -1; }

/* Hero: Ledge. The plate is a tall field; the head rests at its base */
.ledge { padding-top: var(--space-lg); }
.ledge__photo { height: clamp(16rem, calc(100dvh - var(--banner-h) - var(--bar-h) - 27rem), 30rem); }
.ledge__photo > img { object-position: 50% 45%; }
.ledge__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; padding-block: var(--space-lg) var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-muted); }
.ledge__foot h1 { grid-column: 1 / span 7; max-width: 14ch; }
.ledge__side { grid-column: 8 / -1; display: grid; gap: var(--space-lg); }
.ledge__side .lead { color: var(--color-ink); }

/* Facts: a ruled definition list */
.facts { display: grid; margin: 0; }
.facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.facts a { color: var(--color-ink); text-underline-offset: 0.25em; }
.facts a:hover { text-decoration-thickness: 2px; }

/* The menu as a field guide's index: the old spelling in Prata, the gloss beside it, the price as a figure */
.index { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--color-accent); }
.index > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); transition: border-color var(--dur-short) var(--ease-out); }
.index > li:hover { border-bottom-color: var(--color-accent); }
.index h3 { grid-column: 1 / span 6; font-size: var(--text-2xl); line-height: 1.15; color: var(--color-ink); }
.index__gloss { grid-column: 7 / span 4; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.index__gloss:last-child { grid-column: 7 / -1; }
.index__price { grid-column: 11 / -1; justify-self: end; font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); white-space: nowrap; }
.index__price small { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.index--lead > li:first-child h3, .index--lead > li:first-child .index__price { font-size: var(--text-3xl); }
.index--lead > li:first-child .index__price { color: var(--color-accent); }
.more { margin-top: var(--space-xl); }
.section { padding-top: var(--section-gap); }

/* The rail: plates from the menu, the next one cut by the edge */
.rail-wrap { max-width: var(--container); margin-inline: auto; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 22%); gap: var(--gap-columns); margin: 0; padding: 0 var(--gutter) var(--space-md); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: thin; }
.rail > li { scroll-snap-align: start; display: grid; gap: var(--space-sm); align-content: start; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.rail__frame { aspect-ratio: 4 / 3; }
.rail__frame--tall { aspect-ratio: 4 / 3; }
.rail__frame--tall > img { object-position: 50% 30%; }
.rail h3 { font-size: var(--text-xl); line-height: 1.15; color: var(--color-ink); }
.rail__price { font-size: var(--text-xl); line-height: 1; color: var(--color-accent); }
.rail__row { display: grid; gap: var(--space-xs); }

/* Paket Box: a still log on the paper-2 band */
.band { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); color: var(--color-ink); }
.log { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--color-accent); }
.log caption { text-align: left; }
.log th, .log td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.log thead th { padding-block: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); white-space: nowrap; }
.log tbody th { font: 400 var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); white-space: nowrap; }
.log td { color: var(--color-ink-2); }
.log td.num { font: 400 var(--text-2xl)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; color: var(--color-ink); text-align: right; white-space: nowrap; padding-right: 0; }
.log thead th.num { text-align: right; padding-right: 0; }
.log__note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.band .actions { margin-top: var(--space-xl); }

/* Showcase: one plate across the container */
.showcase__frame { aspect-ratio: 32 / 9; }
.showcase__frame > img { object-position: 50% 50%; }
.showcase figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); }

/* Latest from Instagram: the server's own copy of the feed, as a rail of squares */
.ig__list > li { display: block; }
.ig__post { display: grid; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.ig__frame { aspect-ratio: 1 / 1; overflow: hidden; }
.ig__frame > img { width: 100%; height: 100%; object-fit: cover; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.ig__caption { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.ig__post:hover .ig__caption { text-decoration-color: var(--color-accent); }
.ig__post:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.ig__date { font-size: var(--text-sm); color: var(--color-muted); }

/* Getting there: the one cream band */
.band--cream { background: var(--color-ink); color: var(--color-paper); --color-rule: color-mix(in oklab, var(--color-paper) 22%, var(--color-ink)); margin-top: var(--section-gap); padding-block: var(--section-gap-s); }
.band--cream h2, .band--cream h3 { color: var(--color-paper); }
.band--cream p, .band--cream .lead { color: var(--color-paper); }
.band--cream .btn { border-color: var(--color-paper); color: var(--color-paper); }
.band--cream .btn--primary { background: var(--color-paper); color: var(--color-ink); }
.band--cream .btn--primary:hover { background: var(--color-paper-3); border-color: var(--color-paper-3); }
.band--cream .btn--secondary:hover { background: color-mix(in oklab, var(--color-paper) 10%, transparent); }
.band--cream .btn:focus-visible, .band--cream a:focus-visible { outline-color: var(--color-accent-deep); }
.band--cream .fill { color: var(--color-paper-3); border-color: color-mix(in oklch, var(--color-paper) 50%, transparent); }
.visit h2 { font-size: var(--text-display-s); max-width: 22ch; }
.visit__rows { margin: var(--space-2xl) 0 0; border-top: 1.5px solid var(--color-accent-deep); }
.visit__rows > div { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.visit__rows dt { grid-column: 1 / span 3; font-size: var(--text-sm); font-weight: 500; color: var(--color-paper-3); }
.visit__rows dd { grid-column: 4 / -1; margin: 0; font: 400 var(--text-xl)/1.3 var(--font-display); color: var(--color-paper); }
.visit__rows a { white-space: nowrap; color: var(--color-paper); text-decoration-color: var(--color-accent-deep); text-underline-offset: 0.2em; }
.visit__rows a:hover { text-decoration-thickness: 2px; }
.visit .actions { margin-top: var(--space-xl); }

/* Footer: a colophon block */
.colophon { padding-block: var(--section-gap-s) var(--space-2xl); }
.colophon__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-muted); }
.colophon__mark { grid-column: 1 / span 4; display: flex; align-items: center; gap: var(--space-md); font: 400 var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); }
.colophon__mark img { width: 72px; height: 72px; object-fit: contain; }
.colophon__text { grid-column: 5 / span 5; max-width: 52ch; }
.colophon__text a { color: var(--color-ink); text-underline-offset: 0.2em; }
.colophon__text a:hover { text-decoration-thickness: 2px; }
.colophon__links { grid-column: 10 / -1; display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; justify-items: start; }
.colophon__links a { color: var(--color-ink); text-underline-offset: 0.25em; }
.colophon__links a:hover { text-decoration-thickness: 2px; }
.colophon a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.legal { margin-top: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }

/* Inner pages: a banner-posture head */
.page-head { padding-block: var(--space-3xl) var(--space-2xl); }
.page-head h1 { max-width: 16ch; }
.page-head .lead { margin-top: var(--space-lg); }
.page-head .actions { margin-top: var(--space-xl); }
.page-head + section { padding-top: var(--space-2xl); }

/* Menu page: the jump row, then each category with its head held beside its rows */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.jump a { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); text-underline-offset: 0.3em; }
.jump a:hover { text-decoration-thickness: 2px; }
.cat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-top: var(--section-gap-s); }
.cat__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--bar-h) + var(--space-lg)); display: grid; gap: var(--space-md); }
.cat__head h2 { font-size: var(--text-section); }
.cat__head .caption { margin-top: 0; }
.cat__photo { aspect-ratio: 4 / 3; }
.cat > .index { grid-column: 5 / -1; }
.cat .index h3 { grid-column: 1 / span 5; font-size: var(--text-xl); }
.cat .index__gloss { grid-column: 6 / span 5; }
.cat .index__price { grid-column: 11 / -1; font-size: var(--text-xl); }
.drinks-split { margin-top: var(--section-gap); }

/* Menu page: the printed menu itself, one sheet per section */
.sheet { padding-top: var(--space-2xl); }
.sheet + .sheet { padding-top: var(--section-gap-s); }
.sheet__title { font-size: var(--text-section); margin-bottom: var(--space-lg); }
.sheet__figure { margin: 0; }
.sheet__link { display: block; border-radius: var(--radius-card); }
.sheet__link img { width: 100%; height: auto; outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.sheet__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.sheet .caption { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); justify-content: space-between; }
.sheet__actions { margin-top: var(--space-2xl); }

/* Location page */
.map { aspect-ratio: 16 / 7; width: 100%; border: 0; display: block; background: var(--color-paper-2); outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.order-ways { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--color-accent); }
.order-ways > li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.order-ways h3 { grid-column: 1 / span 4; font-size: var(--text-2xl); color: var(--color-ink); }
.order-ways p { grid-column: 5 / span 4; }
.order-ways .actions { grid-column: 9 / -1; justify-content: flex-end; }

/* About page */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.about__badge { grid-column: 1 / span 4; aspect-ratio: 10 / 9; background: var(--color-ink); }
.about__badge > img { object-fit: contain; filter: none; padding: var(--space-lg); }
.about__text { grid-column: 6 / -1; }
.statement { font: 400 var(--text-display-s)/1.12 var(--font-display); color: var(--color-ink); max-width: 22ch; }

@media (max-width: 60rem) {
  .bar__links { gap: var(--space-lg); }
  .bar__links li:not(:last-child) { display: none; }
  .tabs { display: flex; gap: var(--space-lg); margin: 0; padding: 0 var(--gutter); list-style: none; overflow-x: auto; scrollbar-width: none; border-top: var(--rule-hair) solid var(--color-rule); }
  .tabs a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-md); font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.35em; white-space: nowrap; }
  .tabs a[aria-current] { text-decoration-color: var(--color-accent); }
  .tabs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
  .ledge__photo { height: auto; aspect-ratio: 4 / 3; }
  .ledge__foot, .head--split, .colophon__grid, .about { grid-template-columns: minmax(0, 1fr); }
  .ledge__foot h1, .ledge__side, .head--split h2, .head--split > :not(h2), .colophon__mark, .colophon__text, .colophon__links, .about__badge, .about__text { grid-column: 1; }
  .head--split { row-gap: var(--space-md); }
  .index > li { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2xs); }
  .index h3, .cat .index h3 { grid-column: 1; }
  .index__price, .cat .index__price { grid-column: 2; grid-row: 1; }
  .index__gloss, .cat .index__gloss { grid-column: 1 / -1; }
  .rail { grid-auto-columns: minmax(15rem, 70%); }
  .index--lead > li:first-child h3, .index--lead > li:first-child .index__price { font-size: var(--text-2xl); }
  .showcase__frame { aspect-ratio: 16 / 9; }
  .visit__rows > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); }
  .visit__rows dt, .visit__rows dd { grid-column: 1; }
  .cat { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .cat__head { position: static; grid-column: 1; }
  .cat > .index { grid-column: 1; }
  .cat__photo { max-width: 28rem; }
  .map { aspect-ratio: 4 / 3; }
  .order-ways > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-sm); }
  .order-ways h3, .order-ways p, .order-ways .actions { grid-column: 1; justify-content: flex-start; }
  .about__badge { max-width: 22rem; }
}
@media (max-width: 40rem) {
  .banner { font-size: var(--text-xs); }
  .banner__addr { display: none; }
  .wordmark { gap: var(--space-xs); font-size: 1.0625rem; }
  .wordmark img { width: 32px; height: 32px; }
  .log thead { display: none; }
  .log, .log tbody, .log tr, .log th, .log td { display: block; width: 100%; }
  .log tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .log th, .log td { padding: 0; border: 0; }
  .log tbody th { grid-column: 1 / -1; }
  .log td:nth-of-type(1) { grid-column: 1 / -1; margin-block: var(--space-2xs) var(--space-sm); }
  .log td.num { grid-column: auto; text-align: left; font-size: var(--text-xl); }
  .log td.num::before { content: attr(data-label) " "; font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-muted); }
}

/* ===== Home, redesigned 2026-11-05: the feed first, the printed menu next ===== */

/* The menu's own edges: green chilli pattern on top, bamboo weave below */
.edge { height: 48px; background-repeat: repeat-x; background-position: center; background-size: auto 100%; }
.edge--anyaman { background-image: url("../img/texture-anyaman.jpg"); }

/* Feed: the first screen */
.feed { padding-block: var(--space-2xl) var(--section-gap-s); }
.feed__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; margin-bottom: var(--space-xl); }
.feed__title { grid-column: 1 / span 7; display: grid; gap: var(--space-md); justify-items: start; }
.feed__title h1 { font-size: clamp(3rem, 5.5vw + 0.5rem, 6rem); line-height: 0.98; max-width: 11ch; }
.feed__side { grid-column: 8 / -1; display: grid; gap: var(--space-lg); }
.feed__side .lead { color: var(--color-ink); }

.status { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 var(--space-md); border: 1.5px solid var(--color-accent); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 700; }
.status.is-closed { background: transparent; border-color: var(--color-muted); color: var(--color-ink-2); }

.mosaic { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.mosaic__tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-paper-2); animation: tile-in var(--dur-long) var(--ease-out) backwards; }
.mosaic__tile:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.mosaic__tile:nth-child(2) { animation-delay: 50ms; } .mosaic__tile:nth-child(3) { animation-delay: 100ms; } .mosaic__tile:nth-child(4) { animation-delay: 150ms; }
.mosaic__tile:nth-child(5) { animation-delay: 200ms; } .mosaic__tile:nth-child(6) { animation-delay: 250ms; } .mosaic__tile:nth-child(7) { animation-delay: 300ms; }
@keyframes tile-in { from { opacity: 0; transform: translateY(8px); } }
.mosaic__link { display: block; height: 100%; color: var(--color-ink); text-decoration: none; }
.mosaic__link img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.mosaic__link:focus-visible, .mosaic__follow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.mosaic__meta { position: absolute; inset: auto 0 0 0; display: grid; gap: var(--space-2xs); padding: var(--space-2xl) var(--space-md) var(--space-md); background: linear-gradient(to top, color-mix(in oklab, var(--color-paper-2) 94%, transparent), color-mix(in oklab, var(--color-paper-2) 0%, transparent)); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.mosaic__link:hover .mosaic__meta, .mosaic__link:focus-visible .mosaic__meta, .mosaic__tile:first-child .mosaic__meta { opacity: 1; }
.mosaic__meta time { font-size: var(--text-sm); color: var(--color-ink-2); }
.mosaic__cap { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.mosaic__tile:first-child .mosaic__meta { padding: var(--space-3xl) var(--space-lg) var(--space-lg); }
.mosaic__tile:first-child .mosaic__cap { font: 400 var(--text-xl)/1.25 var(--font-display); }
.mosaic__kind { position: absolute; top: var(--space-sm); left: var(--space-sm); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); font-weight: 700; }
.mosaic__follow { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.mosaic__follow:hover { background: var(--color-accent-2); }
.mosaic__handle { font: 400 var(--text-2xl)/1.1 var(--font-display); }
/* reels are 9:16: keep their opening text in frame */
.mosaic__link:has(.mosaic__kind) img { object-position: 50% 0%; transform-origin: 50% 0%; transform: scale(1.06) translateY(-1.5%); }
.mosaic__go { font-size: var(--text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; overflow-wrap: anywhere; }

/* The printed menu, with a Makanan / Minuman switch */
.menoe { padding-bottom: var(--section-gap-s); }
.seg { display: inline-flex; margin-bottom: var(--space-lg); border: 1.5px solid var(--color-accent); }
.seg button + button { border-left: 1.5px solid var(--color-accent); }
.seg button { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button[aria-selected="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.seg button:not([aria-selected="true"]):hover { background: color-mix(in oklab, var(--color-accent) 14%, transparent); }
.seg button:active { background: var(--color-accent-2); color: var(--color-accent-ink); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.switch .sheet__figure + .sheet__figure { margin-top: var(--space-lg); }
.sheet__link { cursor: zoom-in; }
.menoe__actions { margin-top: var(--space-xl); }

/* Getting there, with the map beside it */
.visit--map { margin-top: 0; }
.visit__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: center; }
.visit__text { grid-column: 1 / span 6; }
.visit__map { grid-column: 8 / -1; display: block; width: 100%; aspect-ratio: 4 / 5; border: 0; background: var(--color-paper-3); }
.visit--map .visit__rows > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
.visit--map .visit__rows dt { grid-column: 1; }
.visit--map .visit__rows dd { grid-column: 2; font-size: var(--text-lg); }

/* Full-screen menu viewer */
.viewer { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--color-paper-2); color: var(--color-ink); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer::backdrop { background: color-mix(in oklab, var(--color-paper-2) 85%, transparent); }
.viewer__bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--gutter); border-bottom: var(--rule-hair) solid var(--color-rule); }
.viewer__title { margin-right: auto; font: 400 var(--text-xl)/1.1 var(--font-display); color: var(--color-ink); }
.viewer__btn { min-height: 44px; padding: 0 var(--space-lg); border: 1.5px solid var(--color-accent); border-radius: var(--radius-control); background: transparent; color: var(--color-accent); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.viewer__btn:hover { background: color-mix(in oklab, var(--color-accent) 14%, transparent); }
.viewer__btn:active { background: var(--color-accent-2); color: var(--color-accent-ink); }
.viewer__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.viewer__stage { overflow: auto; overscroll-behavior: contain; padding: var(--space-md); }
.viewer__stage img { display: block; width: 100%; max-width: 112rem; height: auto; margin-inline: auto; }
.viewer.is-zoomed .viewer__stage img { width: 250%; max-width: none; }

@media (max-width: 60rem) {
  .edge { height: 32px; }
  .feed { padding-top: var(--space-xl); }
  .feed__head { grid-template-columns: minmax(0, 1fr); }
  .feed__title, .feed__side { grid-column: 1; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic__tile:first-child .mosaic__cap { font-size: var(--text-lg); }
  .mosaic__handle { font-size: var(--text-xl); }
  .mosaic__follow { padding: var(--space-md); }
  .mosaic__go { font-size: var(--text-xs); }
  .visit__grid { grid-template-columns: minmax(0, 1fr); }
  .visit__text, .visit__map { grid-column: 1; }
  .visit__map { aspect-ratio: 4 / 3; }
  .viewer.is-zoomed .viewer__stage img { width: 320%; }
}

/* One page: the nav scrolls to the home page's sections */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + var(--space-lg)); }
.pesan .order-ways .actions { flex-wrap: wrap; }
.tentang { padding-bottom: var(--section-gap-s); }
.about__mark { grid-column: 1 / span 4; }
.about__mark img { display: block; width: 100%; max-width: 20rem; height: auto; }
.about__facts { margin-top: var(--space-xl); }
@media (max-width: 60rem) {
  html { scroll-padding-top: calc(var(--bar-h) + 44px + var(--space-lg)); }
  .about__mark { grid-column: 1; }
  .about__mark img { max-width: 12rem; }
}

/* Order online: GoFood and GrabFood as round logo buttons, always in reach.
   Round on purpose (the owner's call): the platforms' own app marks are circles. */
.order-float { position: fixed; right: var(--space-lg); bottom: var(--space-lg); z-index: var(--z-sticky); display: grid; gap: var(--space-sm); justify-items: end; }
.order-float__btn { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; text-decoration: none; box-shadow: 0 0 0 3px var(--color-paper), 0 1px 2px oklch(10% 0.02 158 / 0.4); transition: transform var(--dur-micro) var(--ease-out); }
.order-float__btn img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.order-float__btn:hover { transform: translateY(-1px); }
.order-float__btn:active { transform: translateY(0); }
.order-float__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
/* the name: read by screen readers always, shown beside the circle on hover or focus */
.order-float__label { position: absolute; right: calc(100% + var(--space-sm)); top: 50%; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-2); outline: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.order-float__btn:hover .order-float__label, .order-float__btn:focus-visible .order-float__label { opacity: 1; }
.colophon { padding-bottom: calc(var(--space-2xl) + 64px); }
@media (max-width: 60rem) {
  .order-float { right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); }
  .order-float__btn { width: 56px; height: 56px; }
  .colophon { padding-bottom: calc(var(--space-2xl) + 140px); }
}

/* Icons: Lucide (phone, directions, calendar, zoom, close) and Simple Icons
   (WhatsApp, Instagram), inline, one stroke weight, currentColor. Only where an
   icon helps someone act: calls, directions, reservations, the apps. */
.icon { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.bar__call .icon { width: 18px; height: 18px; }
.ilink { display: inline-flex; align-items: center; gap: 0.3em; }
.ilink .icon { width: 0.9em; height: 0.9em; }
.btn__logo { display: block; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; }
/* the order rows: every button the same width */
.order-ways .actions .btn { width: 12.5rem; padding-inline: var(--space-md); }
.mosaic__ig { width: 32px; height: 32px; margin-bottom: var(--space-sm); }
.mosaic__follow { justify-content: flex-start; }
.mosaic__go { margin-top: auto; }
.viewer__btn { display: inline-flex; align-items: center; gap: var(--space-xs); }
.viewer__btn .icon--out { display: none; }
.viewer__btn[aria-pressed="true"] .icon--in { display: none; }
.viewer__btn[aria-pressed="true"] .icon--out { display: block; }
@media (max-width: 60rem) {
  .order-ways .actions .btn { flex: 1 1 12.5rem; width: auto; }
}