/* Waroeng Om desktop and tablet layer, loaded after m.css with the DESK condition (text.ts) as its media, so anywhere else m.css alone applies. It only moves things: colours, meanings and components are m.css's. */
:root{--g:max(24px,3.33vw,calc((100vw - 1440px)/2));--s5:clamp(80px,8.33vw,144px);--hdr:64px;--hero-h:max(440px,min(calc(100svh - var(--hdr) - 16px),62vw));
  --t-display:clamp(40px,5vw,88px);--t-title:clamp(32px,3.125vw,56px);--t-lead:clamp(20px,1.5625vw,24px);--t-body:clamp(16px,calc(12px + .3125vw),18px)}
body{max-width:none}

/* Hover only where it really exists: an underline thickens, a photo grows a little, an arrow nudges */
@media (hover:hover) and (pointer:fine){
  a[href]:not(.btn):not(.card):not(.logo):not(.next):hover,.lnk:hover{text-decoration-thickness:2px}
  .btn:hover{background:color-mix(in oklch,var(--yellow) 88%,black)}
  .btn--wa:hover{background:color-mix(in oklch,var(--green) 85%,black)}
  a.card img{transition:scale 150ms ease-out}
  a.card:hover img{scale:1.02}
  .next .title span{display:inline-block;transition:translate 150ms ease-out}
  .next:hover .title span{translate:4px 0}
}
@media (prefers-reduced-motion:reduce){a.card:hover img{scale:1}.next:hover .title span{translate:none}}

/* Header: the visit in order, always visible, the current page underlined in red */
.hdr__nav{display:flex;gap:var(--s3)}
.hdr__nav a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-ctl);font-weight:500;letter-spacing:.06em;text-decoration:none;text-decoration-color:var(--red);text-underline-offset:.3em}
.hdr__nav a:hover,.hdr__nav a[aria-current]{text-decoration-line:underline;text-decoration-thickness:2px}
#menu-open{display:none}
.toc{display:block}
.on-d{display:inline}
.on-m{display:none}

/* The split: text on 5 columns, the image on 7, always on the right. The last row takes the image's extra height, so text stays together at the top. */
.sec{--cols:repeat(12,minmax(0,1fr))}
.sec:not(.cab):has(>.scene,>figure,>picture){display:grid;grid-template-columns:var(--cols);grid-template-rows:repeat(11,auto) 1fr;column-gap:var(--s3)}
.sec:not(.cab):has(>.scene,>figure,>picture)>*{grid-column:1/6}
.sec:not(.cab):has(>.scene,>figure,>picture)>:is(.scene,figure,picture){grid-column:6/-1;grid-row:1/-1;margin:0}
.sec p:not(.label){max-width:65ch}
.sec:not(.cab):has(>.scene,>figure,>picture)>.title{margin-bottom:var(--s1)}
.sec>.kicker:nth-child(2){margin-top:0}
.sec--top{padding-top:var(--s4)}
.scene{aspect-ratio:3/2}

/* Hero: text left, a watercolour street bleeding off into the paper and running off the right edge, the next step on the first screen of a short laptop */
.hero{display:grid;grid-template-columns:var(--cols,repeat(12,minmax(0,1fr)));column-gap:var(--s3);padding-inline-start:var(--g)}
.hero__txt{grid-column:1/5;grid-row:1;align-self:center;padding:0}
.hero__media{grid-column:5/-1;grid-row:1;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%);mask-image:linear-gradient(to right,transparent 0,#000 7%)}
/* The still is painted at the canvas's scale and lines up on its right edge and height, so the swap barely shows */
.hero__media{container-type:normal}
.hero__media img{top:0;height:100%}

/* Card rows: everything visible, nothing to swipe */
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:var(--s3);overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:0}
.card{flex:none}
.sec>.title{margin-bottom:var(--s3)}

[data-t=Home] .row{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Next chapter and footer */
.next{padding-block:var(--s4)}
.foot{padding-block:var(--s4) var(--s3)}
.foot .label{padding-bottom:0}
body .wa-float{right:24px;bottom:24px}

/* Legal and 404 */
[data-t=Terms] .sec--top{display:grid;grid-template-columns:var(--cols);column-gap:var(--s3);align-items:start}
[data-t=Terms] .sec--top>*{grid-column:1/9}
[data-t=Terms] .toc{grid-column:9/-1;grid-row:1/span 3;position:sticky;top:calc(var(--hdr) + var(--s2));font-size:var(--t-ctl)}
.toc .label{margin-bottom:var(--s1)}
.toc a{display:flex;align-items:center;min-height:44px;line-height:1.3;padding-block:4px;text-decoration:none;text-decoration-color:var(--red);text-underline-offset:.25em}
.toc a:hover{text-decoration-line:underline}
[data-t=error404]{min-height:calc(100svh - var(--hdr) - 240px)}

/* Makan */
/* Makan: the list on columns 1-7, one photo on 8-12 that stays in view. The frame has the hidden attribute, so m.css alone (a window narrowed below 751px) never shows it. */
[data-t=archive]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(11,auto) 1fr;column-gap:var(--s3);padding-inline:var(--g)}
[data-t=archive]>*{grid-column:1/8}
[data-t=archive]>.sec{padding-inline:0}
/* A jump lands with the title level with the photo's top, under the header */
[data-t=archive]>.dish{margin-top:var(--s5);padding:0;scroll-margin-top:calc(var(--s3) - var(--s2))}
[data-t=archive]>.sec--top+.dish{margin-top:var(--s4)}
[data-t=archive]>.prices__note{padding:var(--s3) 0 0}
[data-t=archive] .dish__head{min-height:0}
[data-t=archive] .dish__head img{display:none}
[data-t=archive] .dish__line{max-width:65ch}

/* The photo: 4/5, and on a short screen no taller than the space under the header (the crop widens, the column stays filled) */
[data-t=archive]>.frame{display:block;grid-column:8/-1;grid-row:1/-1;align-self:start;position:sticky;top:calc(var(--hdr) + var(--s3));width:100%;aspect-ratio:4/5;max-height:calc(100svh - var(--hdr) - var(--s3)*2);margin-top:var(--s4);overflow:hidden;border-radius:8px;background:var(--line)}
[data-t=archive] .frame img{position:absolute;inset:0;height:100%;object-fit:cover;opacity:0}
[data-t=archive] .frame .is-on{opacity:1;z-index:1}
/* Each landscape file loses almost half its width in this frame: keep the dish in it */
[data-t=archive] .frame [data-g=geprek]{object-position:20% 50%}
[data-t=archive] .frame [data-g=kulit]{object-position:5% 50%}
[data-t=archive] .frame [data-g=paket]{object-position:50% 80%}
[data-t=archive] .frame [data-g=ngopi]{object-position:55% 50%}
/* The new photo fades in over the old one, which only goes once it is covered */
@media (prefers-reduced-motion:no-preference){
  [data-t=archive] .frame img{transition:opacity 0s linear 150ms}
  [data-t=archive] .frame .is-on{transition:opacity 150ms ease-out}
}

/* A group's title is a link: the red underline and the arrow nudge, as on the next-chapter link */
@media (hover:hover) and (pointer:fine){
  [data-t=archive] .dish__head .title span{display:inline-block;transition:translate 150ms ease-out}
  [data-t=archive] .dish__head:hover .title{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.2em}
  [data-t=archive] .dish__head:hover .title span{translate:4px 0}
}
@media (prefers-reduced-motion:reduce){[data-t=archive] .dish__head:hover .title span{translate:none}}

/* Dish pages */
/* Dish pages, 7+5 on main: the first section dissolves so its photo and text are grid items of main. The story and prices stack on the left,
   the photo holds still on the right, and the 1fr row takes the photo's extra height so the text never spreads. */
[data-t=brands]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(11,auto) 1fr auto;column-gap:var(--s3);padding-inline:var(--g)}
[data-t=brands] .back{grid-column:1/-1;grid-row:1;padding:var(--s1) 0 var(--s2)}
[data-t=brands] .sec{grid-column:1/8;padding:var(--s4) 0 0}
[data-t=brands] .sec:last-child{grid-column:1/-1;grid-row:-2/-1;padding-top:var(--s5)}
[data-t=brands] .sec:not(.cab):has(>.scene){display:contents}
[data-t=brands] .sec:not(.cab):has(>.scene)>*{grid-column:1/8}
/* 4/3 at 75% keeps all three ricebox boxes whole, the kulit and its plate, and the geprek plate with the diner; a taller crop cuts the first two. max-height is for very short windows. */
[data-t=brands] .sec:not(.cab):has(>.scene)>.scene{grid-column:8/-1;grid-row:2/-2;align-self:start;position:sticky;top:calc(var(--hdr) + var(--s3));aspect-ratio:4/3;max-height:calc(100svh - var(--hdr) - var(--s3)*2);object-position:75% 70%}
[data-t=brands] .prices{max-width:65ch}

/* Cabang */
/* Cabang: every branch at a glance, 3+3+3+3, two across below 1100px. Each card is a subgrid, so names, addresses and buttons line up when an address runs longer.
   Grid items don't collapse margins, so the title and paragraph gaps are set here. The gap under the photo belongs to the photo, because only Jember has a kicker. */
[data-t=Contact]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3);padding-inline:var(--g)}
[data-t=Contact] .sec{padding-inline:0}
[data-t=Contact]>.sec--top,[data-t=Contact]>div.cab{grid-column:1/-1}
[data-t=Contact] section.cab{display:grid;grid-row:span 5;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid}
[data-t=Contact] section.cab>.scene{margin-bottom:var(--s3)}
[data-t=Contact] section.cab>.kicker{margin-top:0}
[data-t=Contact] section.cab>.title{grid-row:3;margin-block:0} /* rows are pinned: only Jember has a kicker, and every title must still line up */
[data-t=Contact] section.cab>p:not(.label){grid-row:4;margin-top:var(--s1)}
[data-t=Contact] section.cab>.cab__act{grid-row:5}
[data-t=Contact]>div.cab>.act{margin-top:0}
@media (min-width:1100px){[data-t=Contact]{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Galeri */
/* Galeri: 4+4+4 under 1024px, 3+3+3+3 above. Column gap is --s3 so the tracks sit on --cols, and the News.astro sizes count on it. */
[data-t=News] .gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)}
@media (min-width:1024px){[data-t=News] .gal{grid-template-columns:repeat(4,minmax(0,1fr))}}
[data-t=News] .gal .card b{font-size:var(--t-lead)} /* drops the phone's 132px-column exception: same caption size as the other card rows */
@media (hover:hover) and (pointer:fine){
  [data-t=News] .fil button:not([aria-pressed=true]):hover{background:var(--line)}
}