/* ==== 00-base.css ==== */
/* LAT 60 website: base tokens and shared components.
   Colour and type tokens come from brand/lat60.css (assets/brand/lat60.css).
   The build concatenates css/*.css in name order into dist/site.css. THIS file is global.
   Every other file named after a page template (index.css, story.css, ...) is scoped by the
   build to that page: a rule `.card { }` in story.css becomes `.page-story .card { }`.
   Phase B agents edit only their own page file, never this one. */

:root {
  --measure: 38em;                       /* reading width for Arial paragraphs */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px; --sp-5: 64px; --sp-6: 96px;
  --sheet-shadow: 0 4px 16px rgba(0,0,0,.16);
  --rim: 6px solid #fff;                 /* the white rim of round photos */
  --kick: 600 .9rem/1.2 var(--font-cond);
  --page-max: 1180px;
  --nav-h: 52px;
  --review: #c40018;                     /* review-build marks only */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 17px/1.6 var(--font-body); }
img { max-width: 100%; height: auto; display: block; }
main, .foot, .prevnext { overflow-x: clip; }   /* characters peek past the edges; never widen the page */
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.wrap { position: relative; max-width: var(--page-max); margin: 0 auto; padding: 0 24px; }
.kicker { margin: 0 0 6px; font-size: 20px; color: var(--paint-deep-red); }
/* the condensed Monash-style kicker (Arial Narrow where Helvetica Neue Condensed is not licensed) */
.kick { font: var(--kick); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--sp-1); }
h2.t-headline { font-size: clamp(34px, 6vw, 72px); line-height: 1; margin-bottom: 18px; }
.lede { max-width: 46em; font-size: 19px; }
.prose { max-width: var(--measure); font-family: var(--font-body); }
.prose p { margin: 0 0 1em; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--monash-blue); outline-offset: 3px; }
main:focus { outline: none; }
.tilt-0 { transform: rotate(-1.2deg); } .tilt-1 { transform: rotate(.9deg); } .tilt-2 { transform: rotate(-.4deg); }
mark.ph { background: #ffe94d; color: inherit; padding: 0 2px; }

/* ---------- Lat's character faces (the Buku Wang Saku cover) as a frame, a wash, a veil ---------- */
.faces-frame { background: url("img/faces.webp?v=1793023547") 0 0 / 900px auto; }
.faces-bg { position: relative; background: var(--paper); isolation: isolate; }
.faces-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("img/faces.webp?v=1793023547") 0 0 / 900px auto; opacity: .16; mix-blend-mode: multiply; }
.faces-veil { position: absolute; inset: 0; background: url("img/faces.webp?v=1793023547") 0 0 / 900px auto; opacity: .15; mix-blend-mode: multiply; pointer-events: none; }

/* ---------- the mosaic-tile border (Buku Wang Saku tiles; the build composes the two strips) ----------
   <div class="mosaic-frame"> ... </div>: a border of tiles on all four edges, --mt thick, around a white card. */
.mosaic-frame { --mt: clamp(40px, 7vw, 96px); padding: var(--mt);
  background:
    url("img/mosaic-strip.webp?v=1793023580") repeat-x 0 0 / auto var(--mt),
    url("img/mosaic-strip.webp?v=1793023580") repeat-x 0 100% / auto var(--mt),
    url("img/mosaic-strip-v.webp?v=1793023580") repeat-y 0 0 / var(--mt) auto,
    url("img/mosaic-strip-v.webp?v=1793023580") repeat-y 100% 0 / var(--mt) auto,
    #2aa7c9; }
.mosaic-frame > .frame-card { background: #fff; position: relative; }

/* ---------- the little characters: solid white die-cuts, bobbing a little ---------- */
.castling { position: absolute; width: clamp(80px, 11vw, 150px); height: auto; z-index: 3; pointer-events: none;
            filter: drop-shadow(0 3px 6px rgba(0,0,0,.2)); animation: bob 2.04s ease-in-out infinite; }
.castling.flip { scale: -1 1; }
/* placed characters (the crowd macro): % of the section; each bobs on its own beat */
.castling.crowd { left: var(--x); top: var(--y); width: calc(var(--w) * 1%); max-width: none; animation-delay: calc(var(--d) * -1); rotate: var(--r); }
.hero-crowd { position: absolute; inset: 0; pointer-events: none; }
.castling.crowd.m-only { display: none; }
.castling.crowd.flip { scale: -1 1; }
/* the jiggle: bob up and wobble side to side around each character's own tilt (--r) */
@keyframes bob { 0%, 100% { translate: 0 0; rotate: calc(var(--r, 0deg) - 4deg); } 50% { translate: 0 -9px; rotate: calc(var(--r, 0deg) + 4deg); } }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 8px 20px; min-height: var(--nav-h);
       background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(0,0,0,.08); }
.nav-mark { display: flex; align-items: flex-end; gap: 4px; text-decoration: none; flex: none; }
.nav-mark img { height: 34px; width: auto; }
.nav-mark span { font-size: 22px; color: var(--paint-red); line-height: 1; }
.nav nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }
.nav nav a { text-decoration: none; padding: 4px 0; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; }
.nav nav a:hover { color: var(--paint-red); }
.nav nav a[aria-current="page"] { border-bottom-color: var(--paint-red); }
.nav nav a.hot { color: var(--monash-blue); font-weight: 700; }
.nav-toggle { display: none; margin-left: auto; min-height: 44px; min-width: 44px; padding: 6px 16px; border: 2px solid var(--ink); border-radius: 999px;
              background: #fff; color: var(--ink); font-size: 20px; cursor: pointer; }
.nav-toggle[aria-expanded="true"] { background: var(--ink); color: #fff; }

/* ---------- section kit: mats, sheets, discs, bands, chips ---------- */
/* a drawing on a painted mat: a white sheet on one of Lat's cover fields (<div class="mat lat-field lime">) */
.mat { position: relative; padding: clamp(18px, 4vw, 44px); --grain-size: 160px; }
.sheet { margin: 0; background: #fff; padding: 14px; box-shadow: var(--sheet-shadow); position: relative; }
.sheet img { width: 100%; }
.sheet figcaption { margin-top: 10px; }
/* the lighter mat of Lat on life: the art on a 55% wash of the chapter colour */
.mat.wash { background-blend-mode: soft-light, soft-light; }
.disc { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; font-size: 44px; --grain-size: 80px; }
/* a band of cover field (section opener, group head): colour carries the type, ink on every field */
.band { position: relative; padding: clamp(28px, 6vw, 64px) 0; --grain-size: 200px; }
.opener { padding-block: clamp(32px, 7vh, 72px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 10px; }
.chip { padding: 6px 14px; display: inline-flex; align-items: center; border-radius: 999px; text-decoration: none; font-size: 15px; --grain-size: 80px; }
.chip:hover { outline: 2px solid var(--ink); }
.chips.is-sticky { position: sticky; top: var(--nav-h); z-index: 20; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 8px 20px;
                   background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(0,0,0,.08); scrollbar-width: none; }
.chips.is-sticky .chip { flex: none; min-height: 44px; }
/* pull-quote in Lat Hand, in the chapter accent (--accent) */
.pull { margin: 0; font: 700 clamp(24px, 3.2vw, 36px)/1.05 var(--font-hand); color: var(--accent, var(--paint-deep-red)); }
.passage { font-family: var(--font-body); max-width: var(--measure); }
.context { font-style: italic; color: #444; font-size: 15px; }
.round { display: block; width: var(--d, 180px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: var(--rim); box-shadow: var(--sheet-shadow); background: #fff; }

/* ---------- timeline cards: 5px top rule cycling red / deep teal / marigold ---------- */
.tgrid { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
.tcard { background: #fff; padding: 18px 20px; box-shadow: var(--sheet-shadow); border-top: 5px solid var(--paint-red); position: relative; }
.tcard:nth-child(3n+2) { border-color: var(--paint-deep-teal); } .tcard:nth-child(3n) { border-color: var(--field-marigold); }
.tcard .tl-year { display: block; font-size: 34px; color: var(--paint-deep-red); line-height: 1; }
.tcard p { margin: 8px 0 0; font-size: 16px; }
.tcard .tl-fig { margin: 12px 0 0; position: relative; }
.tcard .tl-fig img { max-height: 190px; max-width: 100%; width: auto; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.tcard .tl-stills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tcard .tl-stills img { width: 100%; max-height: none; aspect-ratio: 640 / 385; object-fit: cover; }
.tcard .tl-stills > :first-child { grid-column: 1 / -1; }
.zoom { display: block; position: relative; }
.tcard figcaption { margin-top: 8px; font-size: 13px; line-height: 1.35; color: #555; }
.tcard .tl-credit { display: block; font-size: 11px; color: #777; }
@media (min-width: 600px) { .tgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

/* ---------- cartoon cards (a button that opens the lightbox) ---------- */
.g-grid { list-style: none; margin: 0; padding: 26px 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.card { width: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; color: inherit; transition: transform .2s; }
.card:hover { transform: rotate(0) scale(1.03); }
.card-img { position: relative; display: grid; place-items: center; aspect-ratio: 1.414; background: #fff; padding: 10px; box-shadow: var(--sheet-shadow); }
.card-img img { width: 100%; height: 100%; object-fit: contain; }   /* fill the sheet whatever `sizes` said */
.card-cap { display: block; margin-top: 10px; font-size: 19px; line-height: 1.2; }
.card-cap b { color: var(--paint-deep-red); font-weight: 700; margin-right: 4px; }
@media (min-width: 821px) { .g-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 26px; } }

/* ---------- review build marks (never present in the public build) ---------- */
.review-bar { background: var(--review); color: #fff; text-align: center; font: 600 13px/1.4 Arial, sans-serif; padding: 6px 12px; }
[data-rights="pending"] { outline: 3px solid var(--review); outline-offset: -3px; }
.rtag { position: absolute; z-index: 6; top: 6px; left: 6px; background: var(--review); color: #fff; font: 700 11px/1.2 Arial, sans-serif; text-transform: uppercase;
        letter-spacing: .04em; padding: 3px 6px; pointer-events: none; }
.ctag { background: #ffe94d; color: #000; font: 700 11px/1.2 Arial, sans-serif; text-transform: uppercase; padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.draft-banner { margin: 0 0 var(--sp-3); padding: 10px 16px; background: #ffe94d; border: 2px dashed var(--review); font: 700 14px/1.4 Arial, sans-serif; }

/* ---------- stub pages (Phase B replaces these) ---------- */
.coming { padding: var(--sp-6) 0 var(--sp-5); }
.coming .coming-box { margin-top: var(--sp-3); padding: var(--sp-3); border: 2px dashed rgba(0,0,0,.3); max-width: var(--measure); }
.coming h1 { font-size: clamp(40px, 8vw, 96px); line-height: 1; }

/* ---------- previous / next ---------- */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--paper); border-top: 1px solid rgba(0,0,0,.1); }
.prevnext a { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 18px 24px; text-decoration: none; }
.prevnext a:hover .pn-title { color: var(--paint-red); }
.prevnext .pn-next { text-align: right; grid-column: 2; }
.prevnext .pn-prev { grid-column: 1; }
.pn-title { font-size: clamp(24px, 3.4vw, 40px); line-height: 1; }

/* ---------- footer ---------- */
.foot { padding: clamp(18px, 4vw, 48px); }
.foot-card { position: relative; background: #fff; max-width: 1100px; margin: 0 auto; padding: 40px 28px 30px; text-align: center; }
.foot-wave { width: min(360px, 70%); margin: 0 auto; }
.foot-title { font-size: clamp(26px, 4vw, 44px); line-height: 1; margin: 16px 0 24px; }
.foot-logo { width: 170px; margin: 0 auto 20px; }
.credits { list-style: none; padding: 0; margin: 0; font-size: 13px; color: #444; }
.foot-links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.foot-links a { font-size: 22px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- lightbox (generic: any element with data-full; data-group groups them) ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(20,20,20,.88); }
.lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 10px; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 130px); width: auto; background: #fff; padding: 12px; }
.lightbox figcaption { color: #fff; text-align: center; }
.lb-cap { display: block; font-size: 26px; }
.lb-meta { display: block; font-size: 14px; opacity: .85; }
.lb-count { display: block; font-size: 14px; opacity: .85; }
.lightbox button { border: 0; background: none; color: #fff; font-size: 54px; cursor: pointer; line-height: 1; padding: 8px; min-width: 44px; min-height: 44px; }
.lightbox button:focus-visible { outline-color: #fff; }
.lb-close { position: fixed; top: 6px; right: 14px; font-size: 44px !important; }
[data-full] { cursor: zoom-in; }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  body { font-size: 16px; }
  .nav { flex-wrap: wrap; gap: 8px 12px; }
  .js .nav-toggle { display: inline-flex; align-items: center; }
  .js .nav nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding: 4px 0 10px; }
  .js .nav.open nav { display: flex; }
  .js .nav nav a { min-height: 44px; font-size: 18px; border-bottom: 1px solid rgba(0,0,0,.08); }
  .nav nav a[aria-current="page"] { border-bottom-color: var(--paint-red); }
  .lightbox[open] { grid-template-columns: 44px 1fr 44px; }
  .lightbox button { font-size: 40px; }
  .castling { width: 76px; }
  .castling.crowd { width: calc(var(--w) * 1.5%); }
  .castling.crowd.m-hide { display: none; }
  .castling.crowd.m-only { display: block; }
  .prevnext a { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.castling), *::before, *::after { animation: none !important; transition: none !important; }
  /* the little characters keep their jiggle (user, 2026-10-02): it is small, slow and
     never moves text; only the large drop, signature and scroll effects stop */
}

/* Lat's signature standing in for the word "Lat" in display text (tools/build_website.py latsig).
   The letters fill the lower two-thirds of the image; the sweep rises above the cap line. */
img.latsig { display: inline-block; height: 1.25em; width: auto; vertical-align: -0.16em; margin: 0 -1.35em 0 .04em; max-width: none; }   /* following text tucks under the sweep */
.nav img.latsig { height: 1.5em; vertical-align: -0.35em; margin-right: -1.65em; }
.chip img.latsig, .card-cap img.latsig { height: 1.4em; vertical-align: -0.3em; margin-right: -1.5em; }
img.latsig.end, .nav img.latsig.end, .chip img.latsig.end { margin-right: .1em; }

/* ==== 404.css (scoped to .page-404) ==== */
.page-404 .lost{ padding: var(--sp-5) 0 var(--sp-6); background: #fff; }
.page-404 .lost-grid{ position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); gap: var(--sp-4); align-items: center; }
.page-404 .lost h1{ font-size: clamp(40px, 6.2vw, 80px); line-height: .95; margin-bottom: var(--sp-2); }
.page-404 .lost-lede{ max-width: var(--measure); font-size: 18px; margin: 0 0 var(--sp-3); }
.page-404 .lost-doors{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: 18px; }
.page-404 .lost-doors a{ display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border-bottom: 3px solid var(--paint-red); text-decoration: none; }
.page-404 .lost-doors a:hover{ color: var(--paint-red); }
.page-404 .lost-doors .lost-home{ font-weight: 700; border-bottom-color: var(--monash-blue); }
.page-404 .lost-art{ display: grid; place-items: center; min-height: 260px; }
.page-404 .lost-art .castling.lost-char{ position: static; width: min(300px, 70%); }
@media (max-width: 820px){.page-404 .lost{ padding: var(--sp-4) 0 var(--sp-5); }
.page-404 .lost-grid{ grid-template-columns: 1fr; }
.page-404 .lost-art{ order: -1; min-height: 0; }
.page-404 .lost-art .castling.lost-char{ width: min(200px, 55%); }}
/* ==== about.css (scoped to .page-about) ==== */
.page-about .ab-open{ padding-block: clamp(28px, 6vh, 56px); max-height: 60vh; }
.page-about .ab-open h1{ font-size: clamp(44px, 8vw, 96px); line-height: .95; }
.page-about .ab-open .kick{ color: var(--ink); }
.page-about .works{ padding: var(--sp-5) 0; }
.page-about .works h2,.page-about .thanks h2,.page-about .foreword h2{ font-size: clamp(38px, 6vw, 72px); margin-bottom: var(--sp-2); }
.page-about .works-note{ margin: 0 0 var(--sp-3); }
.page-about .works-cols{ columns: 3 280px; column-gap: var(--sp-4); font-size: 14px; line-height: 1.5; }
.page-about .works-group{ break-inside: avoid; margin: 0 0 var(--sp-3); }
.page-about .works-group h3{ margin: 0 0 4px; color: var(--paint-deep-teal); }
.page-about .works-group p{ margin: 0; }
.page-about .thanks{ padding: var(--sp-5) 0; background: var(--paper); }
.page-about .thanks .wrap{ position: relative; }
.page-about .th-grid{ display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(220px, 1fr); gap: var(--sp-4) var(--sp-5); align-items: center; }
.page-about .th-credits{ list-style: none; margin: var(--sp-3) 0 0; padding: var(--sp-2) 0 0; border-top: 2px dashed rgba(0,0,0,.3); font-size: 14px; line-height: 1.6; color: #333; }
.page-about .th-logo{ width: 170px; margin-top: var(--sp-3); }
.page-about .th-art{ display: grid; place-items: center; }
.page-about .th-pen{ width: min(100%, 380px); filter: drop-shadow(0 3px 6px rgba(0,0,0,.2)); }
.page-about .foreword{ padding: var(--sp-5) 0; }
.page-about .signoff{ margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 2px dashed rgba(0,0,0,.3); max-width: var(--measure); }
.page-about .signoff .kick{ margin: 0; font-size: 1.15rem; }
.page-about .sign-role{ margin: 4px 0 0; font-size: 14px; color: #333; }
@media (max-width: 820px){.page-about .th-grid{ grid-template-columns: 1fr; }
.page-about .works,.page-about .thanks,.page-about .foreword{ padding: var(--sp-4) 0; }
.page-about .ab-open{ max-height: none; }}
/* ==== cartoons.css (scoped to .page-cartoons) ==== */
.page-cartoons .c-open{ padding: clamp(32px, 6vw, 72px) 0; max-height: none; }
.page-cartoons .c-open-in{ display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.page-cartoons .c-open .kick{ font-size: 1.05rem; }
.page-cartoons .c-open h1{ font-size: clamp(48px, 9vw, 110px); line-height: .95; margin-bottom: 16px; }
.page-cartoons .c-intro{ max-width: 34em; margin: 0; font-size: 18px; line-height: 1.55; }
.page-cartoons .c-how{ margin: 14px 0 0; font: 600 15px/1.3 var(--font-body); }
.page-cartoons .c-art{ max-width: 460px; justify-self: center; width: 100%; }
.page-cartoons .c-art img{ width: 100%; max-height: 40vh; object-fit: contain; }
@media (min-width: 821px){.page-cartoons .c-open-in{ grid-template-columns: 1.2fr 1fr; gap: 48px; }
.page-cartoons .c-art img{ max-height: 44vh; }}
.page-cartoons .c-chips{ gap: 8px; }
.page-cartoons .g-group{ max-width: var(--page-max); margin: clamp(28px, 5vw, 56px) auto 0; padding: 0 20px; scroll-margin-top: calc(var(--nav-h) + 64px); }
.page-cartoons .g-head{ position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 22px; --grain-size: 140px; }
.page-cartoons .g-head h2{ font-size: clamp(30px, 5vw, 52px); line-height: 1; }
.page-cartoons .g-count{ font-size: 24px; opacity: .7; }
.page-cartoons .g-grid{ padding: 26px 4px 8px; }
.page-cartoons .g-grid > li{ min-width: 0; }
.page-cartoons .card{ display: block; }
.page-cartoons .card:focus-visible{ outline-offset: 6px; }
.page-cartoons .g-grid .card-img{ box-shadow: 0 3px 14px rgba(0,0,0,.16); }
.page-cartoons .card-cap{ padding: 0 2px; }
.page-cartoons .card-src{ display: block; margin-top: 4px; font: 400 12px/1.3 var(--font-body); color: #555; }
.page-cartoons .cast-row{ position: relative; display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; height: 96px; margin-bottom: -2px; pointer-events: none; }
.page-cartoons .cast-row .castling{ position: static; width: auto; height: 100%; max-width: 40%; object-fit: contain; object-position: bottom; }
@media (min-width: 821px){.page-cartoons .cast-row{ height: 118px; padding-right: 24px; }}
/* ==== galeri-rumah-lat.css (scoped to .page-galeri-rumah-lat) ==== */
.page-galeri-rumah-lat .galeri{ position: relative; padding-bottom: clamp(88px, 11vw, 140px); }
.page-galeri-rumah-lat .g-top{ padding-top: clamp(32px, 6vw, 72px); }
.page-galeri-rumah-lat .when{ color: var(--paint-deep-teal); margin: 0 0 var(--sp-1); }
.page-galeri-rumah-lat .g-title{ margin: var(--sp-1) 0 var(--sp-3); }
.page-galeri-rumah-lat .g-title-img{ width: 100%; max-width: 1100px; height: auto; }
.page-galeri-rumah-lat .gphoto{ margin: 0; position: relative; }
.page-galeri-rumah-lat .gphoto .zoom{ display: block; position: relative; }
.page-galeri-rumah-lat .gphoto img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--sheet-shadow); background: #fff; }
.page-galeri-rumah-lat .gphoto figcaption{ margin-top: 10px; font-size: 20px; line-height: 1.15; }
.page-galeri-rumah-lat .g-wide img{ aspect-ratio: 16 / 9; }
.page-galeri-rumah-lat .g-intro{ display: grid; gap: var(--sp-2); margin-top: var(--sp-4); max-width: var(--measure); }
.page-galeri-rumah-lat .g-intro p{ margin: 0; }
.page-galeri-rumah-lat .g-lead{ font-size: clamp(20px, 2.4vw, 23px); line-height: 1.5; }
.page-galeri-rumah-lat .g-body{ font-size: 18px; }
@media (min-width: 1000px){.page-galeri-rumah-lat .g-intro{ max-width: none; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }}
.page-galeri-rumah-lat .g-cols{ display: grid; gap: var(--sp-5) var(--sp-5); margin-top: var(--sp-5); }
.page-galeri-rumah-lat .g-col h2{ font-size: clamp(34px, 4.6vw, 50px); line-height: 1; margin: var(--sp-3) 0 var(--sp-1); }
.page-galeri-rumah-lat .g-col p{ margin: 0; max-width: var(--measure); }
@media (min-width: 821px){.page-galeri-rumah-lat .g-cols{ grid-template-columns: 1fr 1fr; }}
.page-galeri-rumah-lat .g-inside{ margin-top: var(--sp-6); }
.page-galeri-rumah-lat .g-inside h2{ font-size: clamp(36px, 6vw, 64px); line-height: 1; margin-bottom: var(--sp-4); }
.page-galeri-rumah-lat .g-grid2{ display: grid; gap: var(--sp-4) var(--sp-3); grid-template-columns: 1fr; }
.page-galeri-rumah-lat .g-grid2 .first img{ aspect-ratio: 16 / 9; }
@media (min-width: 600px){.page-galeri-rumah-lat .g-grid2{ grid-template-columns: 1fr 1fr; }
.page-galeri-rumah-lat .g-grid2 .first{ grid-column: 1 / -1; }}
@media (min-width: 1000px){.page-galeri-rumah-lat .g-grid2{ grid-template-columns: repeat(3, 1fr); }}
.page-galeri-rumah-lat .g-credit{ margin: var(--sp-4) 0 0; font-size: 14px; color: #555; }
.page-galeri-rumah-lat .t-headline{ font-family: "Lat Galeri", var(--font-hand); font-weight: 400; letter-spacing: .02em; }
/* ==== index.css (scoped to .page-index) ==== */
.page-index .welcome .wrap,.page-index .message .wrap,.page-index .doors .wrap{ position: relative; }
.page-index .hero{ overflow: hidden; background-color: #cf1420;
        background-image: url("brand/textures/grain-be-serious.png?v=1791953039"), url("brand/textures/bloom-cave-wall.webp?v=1793023579");
        background-size: clamp(180px, 16vw, 330px) auto, cover; background-position: 0 0, center; background-blend-mode: soft-light, soft-light; }
.page-index .hero-art{ --H: var(--L-H); --cx: var(--L-cx); --cy: var(--L-cy); --dr: var(--L-r); --hl: var(--L-hl); --ht: var(--L-ht); --hw: var(--L-hw);
            --k: calc(var(--dr) / 31 * .86);                 
            --amp: .5cqw;                                    
            --hmax: max(calc(100svh - var(--nav-h)), 340px); 
            position: relative; container-type: inline-size; margin-inline: auto; isolation: isolate;
            width: min(100%, calc(var(--hmax) * 100 / var(--H))); aspect-ratio: 100 / var(--H); }
.page-index .hero-layer,.page-index .hero-set{ display: contents; }
.page-index .hero-set-p{ display: none; }
.page-index .hero-disc{ position: absolute; z-index: 2; left: calc((var(--cx) - var(--dr) + .6) * 1%); top: calc((var(--cy) - var(--dr) + .6) / var(--H) * 100%);
             width: calc((2 * var(--dr) - 1.2) * 1%); aspect-ratio: 1; border-radius: 50%; box-sizing: border-box;
             border: max(2px, .5cqw) solid #ffc61a;
             background-color: #0b1f6e; background-image: url("brand/textures/grain-be-serious.png?v=1791953039"), url("brand/textures/bloom-tioman-sea.webp?v=1793023579");
             background-size: 16cqw auto, cover; background-position: 0 0, center; background-blend-mode: soft-light, soft-light; }
.page-index .hero-pc{ position: absolute; max-width: none; height: auto; pointer-events: none; }
.page-index .hero-art .castling{ z-index: 2; filter: none; rotate: var(--r, 0deg); animation: none; }
.page-index .hero-art .castling.flip{ scale: -1 1; }
.page-index .hero-photo{ z-index: 3; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-sizing: border-box; rotate: var(--r, 0deg);
              border: max(2.5px, calc(.9cqw * var(--k))) solid #fff; }
.page-index .hero-art .rtag{ font-size: clamp(7px, 1cqw, 11px); padding: 2px 4px; top: auto; left: auto; margin: .3cqw 0 0 .3cqw; }
.page-index .hero-art .hero-headpic{ z-index: 4; left: var(--hl); top: var(--ht); width: var(--hw); --r: 0deg; }
.page-index .hero-title{ position: absolute; z-index: 5; left: calc((var(--cx) - var(--dr) * .84) * 1%); width: calc(var(--dr) * 1.68 * 1%); transform: translateY(-50%);
              top: calc((var(--cy) + var(--dr) * .07) / var(--H) * 100%); text-align: center; color: #fff; }
.page-index .hero-title p{ margin: 0; }
.page-index .hero-kick{ font: 600 max(10px, calc(var(--k) * 1.9cqw))/1.2 var(--font-cond); letter-spacing: .1em; text-transform: uppercase; }
.page-index .hero-mark{ display: flex; align-items: flex-end; justify-content: center; margin-top: calc(var(--k) * 1.5cqw); }
.page-index .hero-sig{ width: calc(var(--k) * 24cqw); max-width: none; margin-bottom: calc(var(--k) * -1.5cqw); }
.page-index .hero-n{ font-size: max(18px, calc(var(--k) * 20cqw)); line-height: .8; margin-left: calc(var(--k) * 1cqw); color: #ffc61a; }
.page-index .hero-years{ font-size: max(18px, calc(var(--k) * 3.6cqw)); margin-top: max(7px, calc(var(--k) * 1.6cqw)); color: #ffc61a; }
.page-index .hero-h{ font-size: max(18px, calc(var(--k) * 5.6cqw)); line-height: .95; margin: max(6px, calc(var(--k) * 1.2cqw)) 0 0; color: #fff; }
.page-index .hero-h span{ display: block; white-space: nowrap; }
.page-index .hero-logo{ width: max(100px, calc(var(--k) * 27cqw)); margin: calc(var(--k) * 3.4cqw) auto 0; max-width: none; }
@container (max-width: 459px){.page-index .hero-kick,.page-index .hero-logo{ display: none; }}
@media (max-width: 759.98px){.page-index .hero-art{ --H: var(--P-H); --cx: var(--P-cx); --cy: var(--P-cy); --dr: var(--P-r); --hl: var(--P-hl); --ht: var(--P-ht); --hw: var(--P-hw); --amp: .8cqw; }
.page-index .hero-set-l{ display: none; }
.page-index .hero-set-p{ display: contents; }}
.page-index .strip-art{ width: 100%; }
.page-index .strip-art .hero-kick,.page-index .strip-art .hero-logo{ display: none; }
.page-index .strip-art .hero-years{ font-size: max(13px, calc(var(--k) * 3.6cqw)); }
.page-index .strip-art .hero-h{ font-size: max(14px, calc(var(--k) * 5.6cqw)); }
.page-index .strip-art .hero-n{ font-size: max(16px, calc(var(--k) * 20cqw)); }
@media (min-width: 760px) and (max-width: 999.98px){.page-index .strip-art{ --H: var(--P-H); --cx: var(--P-cx); --cy: var(--P-cy); --dr: var(--P-r); --hl: var(--P-hl); --ht: var(--P-ht); --hw: var(--P-hw); }
.page-index .strip-art .hero-set-l{ display: none; }
.page-index .strip-art .hero-set-p{ display: contents; }}
.page-index .launch{ display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 16px; padding: 14px 20px; min-height: 52px;
          background: var(--monash-blue); color: #fff; text-decoration: none; text-align: center; }
.page-index .launch .t-label{ font-size: 20px; }
.page-index .launch-what{ font-size: 15px; }
.page-index .launch-go{ font-size: 22px; color: #ffe08a; }
.page-index .launch:hover .launch-go{ text-decoration: underline; }
.page-index .welcome{ padding: var(--sp-5) 0 var(--sp-5); background: #fff; }
.page-index .wl-grid{ display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(240px, 1fr); gap: var(--sp-4) var(--sp-5); align-items: end; }
.page-index .wl-text h2{ font-size: clamp(44px, 8vw, 96px); line-height: .95; margin-bottom: var(--sp-3); }
.page-index .wl-text .prose p{ font-size: 17px; }
.page-index .signoff{ margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 2px dashed rgba(0,0,0,.3); max-width: var(--measure); }
.page-index .sign-name{ font-size: 1.15rem; margin: 0; }
.page-index .sign-roles{ list-style: none; margin: 4px 0 0; padding: 0; font-size: 14px; line-height: 1.5; color: #333; }
.page-index .sign-role{ margin: 4px 0 0; font-size: 14px; color: #333; }
.page-index .wl-art{ display: grid; place-items: end center; }
.page-index .wl-wave{ width: min(100%, 420px); }
.page-index .message{ padding: var(--sp-5) 0; background: var(--paper); }
.page-index .message h2{ font-size: clamp(38px, 6vw, 72px); margin-bottom: var(--sp-3); }
.page-index .msg-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.page-index .msg-mat{ --grain-size: 160px; }
.page-index .msg-mat .sheet img{ width: 100%; }
.page-index .msg-en{ margin: 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; color: var(--paint-deep-teal); }
.page-index .msg-note{ margin: var(--sp-2) 0 0; font-size: 14px; color: #444; }
.page-index .doors{ padding: var(--sp-5) 0 var(--sp-5); }
.page-index .doors h2{ font-size: clamp(38px, 6vw, 72px); margin-bottom: var(--sp-4); }
.page-index .door-grid{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-3); }
.page-index .door-grid > li{ flex: 1 1 280px; max-width: 360px; display: flex; }
.page-index .door{ display: flex; flex-direction: column; width: 100%; text-decoration: none; background: #fff; box-shadow: var(--sheet-shadow); transition: transform .2s; }
.page-index .door:hover,.page-index .door:focus-visible{ transform: translateY(-4px); }
.page-index .door:hover .door-title{ color: var(--paint-red); }
.page-index .door-pic{ display: grid; place-items: center; padding: 22px; height: 250px; --grain-size: 120px; }
.page-index .door-pic .sheet{ display: block; width: auto; max-width: 100%; padding: 8px; }
.page-index .door-pic .sheet img{ max-height: 190px; width: auto; max-width: 100%; margin: 0 auto; }
.page-index .door-text{ display: block; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.page-index .door-title{ display: block; font-size: clamp(26px, 2.6vw, 33px); line-height: 1; margin-bottom: var(--sp-1); }
.page-index .door-desc{ display: block; font-size: 15px; line-height: 1.5; color: #333; }
.page-index .door-strip{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); min-height: 56px;
              text-decoration: none; background: var(--paper); border-top: 5px solid var(--paint-red); box-shadow: var(--sheet-shadow); }
.page-index .door-strip .t-headline{ font-size: 30px; }
.page-index .door-strip:hover .t-headline{ color: var(--paint-red); }
.page-index .backcover{ --mt: clamp(36px, 6.5vw, 96px); }
.page-index .back-card{ text-align: center; padding: var(--sp-5) var(--sp-3) var(--sp-4); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.page-index .back-card h2{ font-size: clamp(40px, 7.5vw, 96px); line-height: .95; }
.page-index .back-by{ margin: var(--sp-2) 0 0; font-size: 14px; color: #444; }
.page-index .back-art{ width: min(100%, 760px); margin: var(--sp-3) auto 0; }
.page-index .back-blurb{ max-width: 36em; margin: var(--sp-3) auto 0; font-size: 15px; }
.page-index .foot-wave{ display: none; }
.page-index .back-years{ margin: var(--sp-2) 0 0; font-size: 22px; color: var(--paint-deep-red); }
@media (max-width: 820px){.page-index .wl-grid,.page-index .msg-grid{ grid-template-columns: 1fr; }
.page-index .wl-art{ place-items: center; }
.page-index .wl-wave{ width: min(70%, 320px); }
.page-index .welcome,.page-index .message,.page-index .doors{ padding: var(--sp-4) 0; }
.page-index .door-grid > li{ flex-basis: 100%; max-width: none; }
.page-index .back-card{ padding-top: var(--sp-5); padding-bottom: 130px; }
.page-index .door-pic{ height: 230px; }}
/* ==== lat-on-life.css (scoped to .page-lat-on-life) ==== */
.page-lat-on-life .lol-open{ position: relative; overflow: hidden; padding: clamp(36px, 7vw, 80px) 0 clamp(28px, 5vw, 56px); --grain-size: 200px; max-height: none; }
.page-lat-on-life .lol-open-in{ display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.page-lat-on-life .lol-open h1{ font-size: clamp(48px, 9vw, 110px); line-height: .95; margin-bottom: 18px; }
.page-lat-on-life .lol-intro{ max-width: 36em; font-size: 18px; line-height: 1.55; margin: 0; }
.page-lat-on-life .lol-jai{ margin: 28px 0 0; max-width: 18em; }
.page-lat-on-life .lol-jai p{ margin: 0; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.05; }
.page-lat-on-life .lol-jai footer{ margin-top: 10px; font-size: 14px; }
.page-lat-on-life .lol-head{ justify-self: center; width: min(52vw, 340px); }
@media (min-width: 821px){.page-lat-on-life .lol-open-in{ grid-template-columns: 1.4fr 1fr; gap: 48px; }
.page-lat-on-life .lol-head{ width: min(100%, 380px); }}
.page-lat-on-life .lol-nav{ justify-content: flex-start; }
@media (min-width: 900px){.page-lat-on-life .lol-nav{ justify-content: center; }}
.page-lat-on-life .lol-nav .chip{ font-size: 16px; }
.page-lat-on-life .lol-nav .chip .t-label{ font-size: 20px; }
.page-lat-on-life .lol-ch{ padding: clamp(32px, 6vw, 72px) 0 0; scroll-margin-top: calc(var(--nav-h) + 64px); }
.page-lat-on-life .lol-ch + .lol-ch{ border-top: 1px solid rgba(0,0,0,.1); }
.page-lat-on-life .lol-grid{ max-width: var(--page-max); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.page-lat-on-life .lol-ch h2{ margin: 0; font-size: inherit; line-height: 0; }
.page-lat-on-life .lol-cover{ justify-self: start; width: min(78vw, 400px); transform: rotate(-.8deg); }
.page-lat-on-life .lol-cover-img{ width: 100%; box-shadow: var(--sheet-shadow); border: 1px solid rgba(0,0,0,.12); }
.page-lat-on-life .lol-cards{ list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 48px); }
.page-lat-on-life .ocard{ display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
.page-lat-on-life .oc-art .mat{ padding: clamp(14px, 3vw, 28px); --grain-size: 140px; }
.page-lat-on-life .oc-art .sheet{ padding: 12px; transform: rotate(-.8deg); }
.page-lat-on-life .oc-art .sheet.is-photo{ padding: 5px; }
.page-lat-on-life .ocard.flip .oc-art .sheet{ transform: rotate(.7deg); }
.page-lat-on-life .oc-art .sheet img{ width: 100%; max-height: 360px; object-fit: contain; }
.page-lat-on-life .oc-text .context{ margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.page-lat-on-life .oc-text .pull{ font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05; margin: 0 0 12px; }
.page-lat-on-life .oc-text .passage{ margin: 0; font-size: 17px; line-height: 1.6; }
.page-lat-on-life .ocard:not(.has-art) .oc-text{ padding-left: 16px; border-left: 5px solid var(--accent); }
@media (min-width: 700px){.page-lat-on-life .ocard.has-art{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; }
.page-lat-on-life .ocard.has-art.flip{ grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.page-lat-on-life .ocard.has-art.flip .oc-art{ order: 2; }}
@media (min-width: 1000px){.page-lat-on-life .lol-grid{ grid-template-columns: minmax(280px, 380px) 1fr; gap: 48px; padding: 0 24px; }
.page-lat-on-life .lol-cover{ position: sticky; top: calc(var(--nav-h) + 80px); width: 100%; }
.page-lat-on-life .lol-cover-img{ max-height: calc(100vh - 220px); width: auto; max-width: 100%; }}
.page-lat-on-life .lol-ch .cast-row{ max-width: var(--page-max); margin: 24px auto 0; padding: 0 24px; position: relative; display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; height: 104px; pointer-events: none; }
.page-lat-on-life .lol-ch .cast-row .castling{ position: static; width: auto; height: 100%; max-width: 40%; object-fit: contain; object-position: bottom; }
.page-lat-on-life .oc-text .ctag{ white-space: nowrap; display: inline-block; margin: 4px 0 0 6px; }
.page-lat-on-life .lol-head .sheet{ padding: clamp(10px, 2vw, 18px); }
/* ==== monash-2024.css (scoped to .page-monash-2024) ==== */
.page-monash-2024 .opener h1{ font-size: clamp(46px, 9vw, 112px); line-height: .95; margin: 4px 0 0; }
.page-monash-2024 .opener .chips{ margin-top: 22px; }
.page-monash-2024 .opener .chip{ font-size: 18px; min-height: 44px; padding: 6px 18px; }
.page-monash-2024 .opener .chip img.latsig{ height: 1.5em; }
.page-monash-2024 .ex,.page-monash-2024 .meet,.page-monash-2024 .jai,.page-monash-2024 .watch{ position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(88px, 11vw, 150px); background: #fff; }
.page-monash-2024 .meet{ background: #fff; }
.page-monash-2024 .when{ color: var(--paint-deep-teal); margin: 0 0 var(--sp-1); }
.page-monash-2024 section h2.t-headline{ margin-bottom: var(--sp-2); }
.page-monash-2024 .lede{ max-width: var(--measure); }
.page-monash-2024 .lede p{ font-size: 19px; }
.page-monash-2024 .photos{ display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.page-monash-2024 .photo{ margin: 0; background: #fff; padding: 10px 10px 12px; box-shadow: var(--sheet-shadow); }
.page-monash-2024 .photo .zoom{ display: block; position: relative; }
.page-monash-2024 .photo img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.page-monash-2024 .photo figcaption{ margin-top: 10px; font-size: 20px; line-height: 1.15; }
.page-monash-2024 .photo:nth-child(3n+1){ transform: rotate(-.7deg); }
.page-monash-2024 .photo:nth-child(3n+2){ transform: rotate(.6deg); }
.page-monash-2024 .photo:nth-child(3n){ transform: rotate(-.3deg); }
@media (min-width: 600px){.page-monash-2024 .photos{ grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
.page-monash-2024 .photo.big{ grid-column: 1 / -1; }}
@media (min-width: 900px){.page-monash-2024 .ex-photos{ grid-template-columns: 2fr 1fr; align-items: start; }
.page-monash-2024 .ex-photos .photo.big{ grid-column: 1; grid-row: 1 / span 2; }
.page-monash-2024 .meet-photos,.page-monash-2024 .jai-photos{ grid-template-columns: repeat(3, 1fr); }
.page-monash-2024 .meet-photos .photo.big,.page-monash-2024 .jai-photos .photo.big{ grid-column: 1 / -1; }}
.page-monash-2024 .meet-photos .photo.big img,.page-monash-2024 .jai-photos .photo.big img{ aspect-ratio: 16 / 9; object-position: 50% 30%; }
@media (max-width: 599px){.page-monash-2024 .meet-photos .photo.big img,.page-monash-2024 .jai-photos .photo.big img{ aspect-ratio: 3 / 2; }}
.page-monash-2024 .meet-head{ display: grid; gap: var(--sp-3); align-items: center; }
.page-monash-2024 .meet-title{ margin: 0; }
.page-monash-2024 .meet-lettering{ width: min(100%, 420px); height: auto; }
.page-monash-2024 .meet-text .prose p{ font-size: 18px; }
@media (min-width: 821px){.page-monash-2024 .meet-head{ grid-template-columns: minmax(280px, 5fr) 7fr; gap: var(--sp-5); }}
.page-monash-2024 .we-met{ margin: 0; align-self: center; justify-self: center; text-align: center; transform: rotate(-4deg);
          font-size: clamp(40px, 7vw, 68px); color: var(--paint-red); line-height: 1.05; padding: var(--sp-2); }
.page-monash-2024 .jai-head{ display: grid; gap: var(--sp-4); align-items: start; }
.page-monash-2024 .jai-photo{ transform: rotate(-.6deg); }
.page-monash-2024 .parts{ list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.page-monash-2024 .parts li{ display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 2px dashed var(--ink); font-size: clamp(22px, 3.4vw, 28px); line-height: 1.1; }
.page-monash-2024 .parts li:last-child{ border-bottom: 2px dashed var(--ink); }
.page-monash-2024 .parts .n{ color: var(--paint-deep-red); font-size: 1.25em; min-width: 1.2em; }
@media (min-width: 821px){.page-monash-2024 .jai-head{ grid-template-columns: 6fr 5fr; gap: var(--sp-5); }}
.page-monash-2024 .v{ margin: var(--sp-3) 0 0; max-width: 960px; }
.page-monash-2024 .v video{ width: 100%; background: #000; box-shadow: var(--sheet-shadow); }
.page-monash-2024 .v figcaption{ margin-top: 10px; font-size: 20px; }
@media (max-width: 820px){.page-monash-2024 .ex,.page-monash-2024 .meet,.page-monash-2024 .jai,.page-monash-2024 .watch{ padding-bottom: 120px; }
.page-monash-2024 .photo:nth-child(n){ transform: none; }}
/* ==== monash-by-lat.css (scoped to .page-monash-by-lat) ==== */
.page-monash-by-lat .when{ color: var(--paint-deep-teal); margin: 0 0 var(--sp-1); }
.page-monash-by-lat .mb-intro{ position: relative; padding: clamp(40px, 7vw, 88px) 0 clamp(72px, 9vw, 120px); background: #fff; }
.page-monash-by-lat .mb-intro h1{ font-size: clamp(44px, 9vw, 112px); line-height: .95; margin-bottom: var(--sp-3); }
.page-monash-by-lat .mb-word{ width: min(100%, 900px); height: auto; margin: 0 0 var(--sp-4); }
.page-monash-by-lat .mb-intro .lede p{ font-size: 19px; }
.page-monash-by-lat .mb-jump{ display: flex; flex-wrap: wrap; gap: 4px 24px; margin: var(--sp-3) 0 0; }
.page-monash-by-lat .mb-jump a{ font-size: 22px; min-height: 44px; display: inline-flex; align-items: center; color: var(--monash-blue); }
.page-monash-by-lat .mb-letters{ background: #fff; }
.page-monash-by-lat .mb-letters > .wrap > h2{ font-size: clamp(34px, 6vw, 72px); line-height: 1; margin: 0 0 var(--sp-2); }
.page-monash-by-lat .letter{ position: relative; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding: var(--sp-3) 0; }
.page-monash-by-lat .letter-in{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.page-monash-by-lat .letter-art{ display: block; width: 100%; }
.page-monash-by-lat .letter-img{ display: block; width: 100%; height: calc(100vh - var(--nav-h) - 190px); height: calc(100svh - var(--nav-h) - 190px); min-height: 260px; object-fit: contain; margin: 0 auto; }
.page-monash-by-lat .letter-cap{ margin: 0; width: min(100%, 640px); display: flex; align-items: baseline; gap: 16px; border-top: 2px dashed var(--ink); padding-top: var(--sp-2); }
.page-monash-by-lat .letter-cap .glyph{ font-size: clamp(56px, 9vw, 84px); line-height: .8; color: var(--paint-deep-red); }
.page-monash-by-lat .letter-cap .what{ font-size: clamp(26px, 4vw, 36px); line-height: 1.1; }
.page-monash-by-lat .mb-launch{ padding: clamp(40px, 7vw, 88px) 0; }
.page-monash-by-lat .mb-launch h2{ font-size: clamp(40px, 7vw, 92px); line-height: 1; margin-bottom: var(--sp-3); }
.page-monash-by-lat .launch-sheet{ padding: clamp(20px, 4vw, 40px); display: grid; gap: var(--sp-4); }
.page-monash-by-lat .launch-date{ margin: 0; font-size: clamp(60px, 10vw, 96px); line-height: .85; color: var(--paint-deep-red); }
.page-monash-by-lat .launch-line{ margin: var(--sp-2) 0 0; font-size: 18px; }
.page-monash-by-lat .launch-sub{ margin: 0 0 var(--sp-2); font-size: 18px; max-width: var(--measure); }
.page-monash-by-lat .prog{ list-style: none; margin: 0; padding: 0; }
.page-monash-by-lat .prog li{ display: grid; gap: 2px var(--sp-3); padding: 12px 0; border-top: 2px dashed var(--ink); }
.page-monash-by-lat .prog .t-label{ font-size: 22px; color: var(--paint-deep-red); }
.page-monash-by-lat .prog-d{ font-size: 17px; }
@media (min-width: 600px){.page-monash-by-lat .prog li{ grid-template-columns: 11em 1fr; align-items: baseline; }}
@media (min-width: 900px){.page-monash-by-lat .launch-sheet{ grid-template-columns: 5fr 7fr; gap: var(--sp-5); }}
.page-monash-by-lat .mb-shop{ position: relative; background: #fff; padding: clamp(56px, 9vw, 112px) 0 clamp(96px, 12vw, 160px); }
.page-monash-by-lat .see-you{ margin: 0; font-size: clamp(40px, 8vw, 96px); line-height: 1.05; color: var(--monash-blue); transform: rotate(-2deg); transform-origin: left center; }
.page-monash-by-lat .shop-where{ margin: var(--sp-3) 0 0; font-size: 18px; }
.page-monash-by-lat .products{ list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
@media (min-width: 821px){.page-monash-by-lat .products{ grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }}
.page-monash-by-lat .products figure{ margin: 0; background: #fff; padding: 10px; box-shadow: var(--sheet-shadow); }
.page-monash-by-lat .products img{ width: 100%; aspect-ratio: 1; object-fit: contain; }
.page-monash-by-lat .products figcaption{ margin-top: 6px; text-align: center; font-size: 20px; }
.page-monash-by-lat .variants{ margin-top: var(--sp-3); max-width: var(--measure); font-size: 17px; }
.page-monash-by-lat .variants p{ margin: 0 0 .5em; }
.page-monash-by-lat .note{ margin: var(--sp-3) 0 0; font-size: 15px; color: #444; }
.page-monash-by-lat .mb-day{ position: relative; background: #fff; padding: clamp(48px, 8vw, 100px) 0; }
.page-monash-by-lat .mb-day h2{ font-size: clamp(40px, 7vw, 92px); line-height: 1; margin-bottom: var(--sp-3); }
.page-monash-by-lat .mb-day .prose p{ font-size: 18px; max-width: var(--measure); }
.page-monash-by-lat .day-grid{ display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
@media (min-width: 700px){.page-monash-by-lat .day-grid{ grid-template-columns: repeat(2, 1fr); }
.page-monash-by-lat .day-fig.wide{ grid-column: 1 / -1; }}
.page-monash-by-lat .day-fig{ margin: 0; background: #fff; padding: 10px 10px 8px; box-shadow: var(--sheet-shadow); }
.page-monash-by-lat .day-fig:nth-child(3n+2){ transform: rotate(-.5deg); }
.page-monash-by-lat .day-fig:nth-child(3n){ transform: rotate(.5deg); }
.page-monash-by-lat .day-fig a{ display: block; }
.page-monash-by-lat .day-fig img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.page-monash-by-lat .day-fig figcaption{ margin-top: 6px; font-size: 20px; line-height: 1.2; }
.page-monash-by-lat .shop-go{ margin: var(--sp-3) 0 0; }
.page-monash-by-lat .shop-go a{ display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px; background: var(--monash-blue); color: #fff; font-weight: 700; text-decoration: none; border-radius: 4px; }
.page-monash-by-lat .shop-go a:hover,.page-monash-by-lat .shop-go a:focus-visible{ background: #004a8a; }
.page-monash-by-lat .shop-photos{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); max-width: 900px; }
.page-monash-by-lat .shop-photos figure{ margin: 0; background: #fff; padding: 10px; box-shadow: var(--sheet-shadow); }
.page-monash-by-lat .shop-photos img{ display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.page-monash-by-lat .shop-photos figcaption{ margin-top: 6px; text-align: center; font-size: 20px; }
/* ==== story.css (scoped to .page-story) ==== */
.page-story .s-open{ padding: clamp(40px, 8vw, 88px) 0 clamp(16px, 3vw, 40px); text-align: center; }
.page-story .s-open h1{ font-size: clamp(40px, 8vw, 96px); line-height: .98; max-width: 14em; margin: 0 auto 16px; }
.page-story .s-lede{ max-width: 36em; margin: 0 auto; font-size: 19px; }
.page-story .s-jump{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 8px; }
.page-story .s-jump .chip{ min-height: 44px; font-size: 16px; gap: 6px; }
.page-story .s-jump .chip .t-label{ font-size: 20px; }
.page-story .s-l01{ margin: clamp(16px, 4vw, 40px) auto 0; max-width: 640px; }
.page-story .s-l01 img{ width: 100%; }
.page-story .chapters{ padding: 0 0 clamp(24px, 4vw, 56px); }
.page-story .chapter{ display: grid; grid-template-columns: 1fr; gap: 8px; max-width: var(--page-max); margin: clamp(32px, 6vw, 64px) auto 0; padding: 0 20px; align-items: start; }
.page-story .ch-art{ position: relative; }
.page-story .ch-hero-cap{ margin: 14px 4px 0; font-size: 20px; line-height: 1.25; color: #333; }
.page-story .ch-hero-cap i{ font-style: normal; }
.page-story .ch-text{ position: relative; padding: 24px 4px 8px; }
.page-story .ch-no{ position: absolute; top: 12px; right: 4px; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; font-size: 40px; line-height: 1; --grain-size: 80px; }
.page-story .ch-years{ margin: 0; font-size: 26px; color: var(--paint-deep-red); }
.page-story .chapter h2{ font-size: clamp(32px, 5vw, 52px); line-height: 1; margin: 6px 0 16px; padding-right: 84px; }
.page-story .ch-text .prose p{ font-size: 17px; line-height: 1.6; }
.page-story .ch-photo{ position: relative; margin: 24px 0 0; max-width: 300px; }
.page-story .ch-photo .zoom{ background: #fff; border: var(--rim); box-shadow: var(--sheet-shadow), 0 0 0 1px rgba(0,0,0,.18); transform: rotate(-1.5deg); }
.page-story .ch-photo img{ width: 100%; max-height: 260px; object-fit: contain; }
.page-story .ch-photo figcaption{ margin-top: 12px; font-size: 14px; line-height: 1.4; color: #444; }
.page-story .cast-row{ position: relative; display: flex; justify-content: flex-end; align-items: flex-end; gap: 12px; height: 104px; margin-top: 16px; pointer-events: none; }
.page-story .cast-row .castling{ position: static; width: auto; height: 100%; max-width: 40%; object-fit: contain; object-position: bottom; }
.page-story .cast-row.to-left{ justify-content: flex-start; }
@media (min-width: 821px){.page-story .chapter{ grid-template-columns: 1.1fr 1fr; gap: 16px; padding: 0 24px; align-items: start; }
.page-story .chapter.flip .ch-art{ order: 2; }
.page-story .ch-text{ padding: 24px clamp(20px, 4vw, 48px) 8px; }
.page-story .ch-no{ right: clamp(20px, 4vw, 48px); }
.page-story .ch-photo{ max-width: 340px; }}
.page-story .decades{ padding: clamp(48px, 8vw, 88px) 0; margin-top: clamp(16px, 4vw, 40px); }
.page-story .decades h2{ font-size: clamp(34px, 6vw, 72px); line-height: 1; }
.page-story .decades .tcard .tl-year{ font-size: 36px; }
.page-story .decades .tcard p{ font-size: 16px; line-height: 1.5; }
.page-story .decades .tcard figcaption{ font-size: 14px; }
.page-story .decades .tcard .tl-credit{ font-size: 12px; color: #666; }
.page-story .decades .tl-monash{ width: 100%; max-height: none; box-shadow: none; }
.page-story .decades .tcard .zoom img{ width: auto; }
.page-story .bio{ padding: clamp(40px, 7vw, 80px) 0; }
.page-story .bio-wrap{ display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.page-story .bio h2{ font-size: clamp(32px, 5vw, 56px); line-height: 1; }
.page-story .bio-video{ margin: 0; justify-self: center; width: 100%; max-width: 420px; }
.page-story .bio-video video{ display: block; width: 100%; max-height: 80vh; background: #000; box-shadow: var(--sheet-shadow); }
@media (min-width: 821px){.page-story .bio-wrap{ grid-template-columns: 1fr 420px; gap: 56px; }
.page-story .bio-video{ justify-self: end; }}
.page-story .decades .tgrid{ align-items: start; }