/* AVALON — Art to Wear, Story You Can Feel
   CI: navy #002554, gold #C49A6C, white. Lustria headline, Poppins Light body,
   Kanit / Maitree for Thai. Each scene overrides the tokens below. */

:root {
  --navy: #002554;
  --gold: #C49A6C;
  --white: #FFFFFF;

  --bg: #001B3D;
  --ink: #F4F1EA;
  --soft: rgba(244, 241, 234, .68);
  --accent: var(--gold);
  --line: rgba(196, 154, 108, .35);

  /* brand CI (AVALON-branding-2025): EN Lustria headlines, Poppins Light text;
     TH Kanit Medium headlines, Maitree text */
  --display: 'Lustria', 'Kanit', serif;
  --body: 'Poppins', 'Maitree', sans-serif;
  --display-weight: 400;

  --gutter: clamp(20px, 5vw, 72px);
}

[data-lang="th"] {
  --display: 'Kanit', 'Lustria', sans-serif;
  --body: 'Maitree', 'Poppins', serif;
  --display-weight: 500;
}

[data-scene="secession-black"] { --bg: #070708; --ink: #F2EEE8; --soft: rgba(242,238,232,.66); --accent: #C49A6C; --line: rgba(196,154,108,.34); }
[data-scene="garden-lullaby"]  { --bg: #16241E; --ink: #F3EADF; --soft: rgba(243,234,223,.7);  --accent: #E3B9A4; --line: rgba(227,185,164,.34); }
[data-scene="cosmic-meridian"] { --bg: #070B2C; --ink: #E9EBF5; --soft: rgba(233,235,245,.68); --accent: #9FA8FF; --line: rgba(159,168,255,.36); }
[data-scene="eternity-spirit"] { --bg: #E8ECF2; --ink: #002554; --soft: rgba(0,37,84,.7);      --accent: #A87B48; --line: rgba(0,37,84,.22); }
[data-scene="oceanic-melody"]  { --bg: #032E42; --ink: #EAF6F7; --soft: rgba(234,246,247,.7);  --accent: #7FD3DC; --line: rgba(127,211,220,.36); }
[data-scene="navy"]            { --bg: #002554; }


/* Mobile first. Base rules are for a phone; wider layouts are added at
   700px (tablet) and 1080px (desktop). Tap targets are at least 44px. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; font-family: var(--body); font-weight: 300; font-size: 1rem; line-height: 1.7;
  color: var(--ink); background: #001B3D; transition: color .9s ease;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
body.menu-open { overflow: hidden; }
body.inner { background: var(--navy); }

.backdrop { position: fixed; inset: 0; z-index: -2; background: var(--bg); transition: background-color 1.1s ease; }
#air { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

h1, h2, h3 { font-family: var(--display); font-weight: var(--display-weight); margin: 0; line-height: 1.15; }
h1 { font-size: clamp(2.1rem, 8vw, 3.6rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 6vw, 3rem); letter-spacing: -.01em; }
h3 { font-size: 1.25rem; }
p { margin: 0; max-width: 62ch; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.none { color: var(--soft); list-style: none; display: grid; gap: 14px; justify-items: start; padding: 24px 0; grid-column: 1 / -1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  min-height: 48px; padding: 10px 26px; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--ink); background: none; font-size: .98rem; cursor: pointer; transition: background-color .25s, color .25s, transform .12s cubic-bezier(.16, 1, .3, 1);
}
.btn:hover, .btn-solid { background: var(--accent); color: var(--bg); }
.btn-small { min-height: 40px; padding: 6px 18px; font-size: .9rem; }
.btn:disabled { opacity: .4; cursor: default; }
.scene-link { display: inline-block; padding: 10px 0; color: var(--accent); text-underline-offset: 5px; }

/* a photo shown whole: never cropped, never covered, never moving */
.photo { margin: 0; display: grid; place-items: center; }
.photo img { width: auto; max-width: 100%; max-height: 70svh; border-radius: 6px; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .55); }
.frame { position: relative; display: block; aspect-ratio: 1; background: #fff; border-radius: 6px; overflow: hidden; }
/* the whole photo always shows: it is fitted inside the frame, never cropped or stretched */
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.frame.tall { aspect-ratio: 4 / 5; }
/* round paintings have transparent corners: no white card behind them */
.frame:has(> img.round) { background: transparent; box-shadow: none; }
/* while a photo is still loading its frame is a quiet tint, never a white card */
.frame:has(> img:not(.ok)):not(.dark), .at-frame:has(> img:not(.ok)), .thumbs button:has(> img:not(.ok)) { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.frame.dark { background: #0A1733; }
.scene-art .frame.tall { width: min(100%, 460px); margin-inline: auto; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .55); }
.frame.blank { background: color-mix(in srgb, var(--ink) 8%, transparent); }
/* a blurred copy of the same photo behind it, only where the photo's shape leaves space */
.has-fill { isolation: isolate; overflow: hidden; }
.has-fill::before { content: ''; position: absolute; inset: -32px; z-index: -1; background: var(--fill) center / cover no-repeat; filter: blur(26px) saturate(1.05); }
.dlg-media .photo.has-fill { position: relative; }

/* ---------- header ---------- */

.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  min-height: 60px; padding: 8px var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--line); transition: background-color 1.1s ease;
}
.inner .top { background: var(--navy); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.brand { display: block; margin-right: auto; }
.brand-mark { display: block; width: 104px; aspect-ratio: 900 / 336; background: var(--accent); transition: background-color .9s ease;
  -webkit-mask: url(../assets/brand/logo-white.png) center / contain no-repeat; mask: url(../assets/brand/logo-white.png) center / contain no-repeat; }
.top-nav, .top-order { display: none; }
.lang, .menu-btn {
  min-height: 44px; padding: 0 14px; font-size: .88rem; color: var(--soft); cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px; display: flex; align-items: center; gap: 6px;
}
.menu-btn { color: var(--ink); }
[data-lang="en"] .lang [data-l="en"], [data-lang="th"] .lang [data-l="th"] { color: var(--ink); }

.sheet {
  position: fixed; inset: 60px 0 0 0; z-index: 29; overflow: auto; background: var(--navy);
  padding: 12px var(--gutter) calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 24px;
}
.sheet nav { display: grid; }
.sheet a { text-decoration: none; }
.sheet-main { font-family: var(--display); font-size: 1.6rem; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.sheet-main:first-child { border-top: 0; }
.sheet-sub { color: var(--soft); padding: 10px 0 10px 14px; }
.sheet-foot { display: grid; gap: 14px; justify-items: start; }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 28; display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--navy) 96%, #000); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { display: grid; justify-items: center; gap: 2px; padding: 9px 4px 8px; min-height: 60px; text-decoration: none; font-size: .74rem; color: #CFC8BA; }
.tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.tabbar a[aria-current="page"] { color: var(--gold); }
/* the crown from the AVALON logo, tinted by the tab's text colour */
.tab-crown { width: 25px; height: 22px; background: currentColor; -webkit-mask: url(../assets/brand/crown-gold.png) center / contain no-repeat; mask: url(../assets/brand/crown-gold.png) center / contain no-repeat; }

.rail { display: none; }

/* ---------- section frame ---------- */

.isle, .scene, .house, .craft, .world, .showcase, .atelier, .partners, .artists, .journey, .press, .order, .visit, .page-head, .cat, .pd, .post, .posts, .press-page, .follow, .related {
  padding: 56px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: start;
}
.isle h2::before, .house h2::before, .world h2::before, .partners h2::before, .showcase h2::before, .atelier h2::before, .craft h2::before, .artists h2::before, .pieces h2::before, .journey h2::before, .press h2::before, .order h2::before, .visit h2::before, .page-head h1::before {
  content: '✦'; display: block; font-size: .42em; color: var(--accent); margin-bottom: .8em;
}
.isle-copy p, .craft-head p, .artists-head p, .proud-head p, .journey-head p, .order-head p, .pieces-head p, .page-head p { color: var(--soft); margin-top: 14px; }

/* ---------- scenes ---------- */

.scene { padding-block: 72px; }
.scene-place { color: var(--accent); margin-bottom: 14px; }
.scene-title { font-size: clamp(2.7rem, 15vw, 8rem); line-height: .92; margin-bottom: 20px; overflow-wrap: anywhere; }
.scene-title span { display: block; }
.scene-tagline { font-family: var(--display); font-size: clamp(1.15rem, 4.6vw, 1.6rem); margin-bottom: 28px; }
/* scene title type follows the AVALON Scene Logotype sheet */
#secession-black .scene-title .a { font-family: 'Poppins', sans-serif; font-weight: 300; letter-spacing: -.02em; text-transform: uppercase; color: var(--accent); font-size: .82em; }
#secession-black .scene-title .b { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 800; text-transform: uppercase; }
#garden-lullaby .scene-title .a { font-family: 'Archivo Black', sans-serif; letter-spacing: -.03em; font-size: .9em; color: #B9B6B0; }
#garden-lullaby .scene-title .b { font-family: 'Playfair Display', serif; font-style: italic; color: var(--accent); }
#cosmic-meridian .scene-title { font-family: 'Playfair Display', serif; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(2.1rem, 11vw, 6.4rem); }
#cosmic-meridian .scene-title .a { color: var(--accent); }
#cosmic-meridian .scene-title .b { color: #B9BBC6; font-weight: 400; }
#eternity-spirit .scene-title { font-family: 'Montserrat', sans-serif; font-weight: 200; letter-spacing: .04em; line-height: 1; }
#eternity-spirit .scene-title .b { color: var(--accent); padding-left: .55em; }
#oceanic-melody .scene-title { font-family: 'Jura', sans-serif; font-weight: 300; text-transform: lowercase; }
#oceanic-melody .scene-title .b { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 300; letter-spacing: .12em; color: var(--accent); font-size: .62em; padding-left: 1.2em; }


.steps, .years, .ways, .seg { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.steps::-webkit-scrollbar, .years::-webkit-scrollbar, .ways::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
.steps button, .years button, .ways button, .seg button, .seg a {
  flex: none; display: inline-flex; align-items: center; text-decoration: none; min-height: 48px; padding: 8px 20px 10px 0; margin-right: 6px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--soft); white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.years button, .ways button, .seg button, .seg a { font-family: var(--display); font-size: 1.2rem; }
.seg small { font-family: var(--body); font-size: .8rem; margin-left: 6px; opacity: .7; }
.steps button[aria-selected="true"], .years button[aria-selected="true"], .ways button[aria-selected="true"], .seg button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.years button[aria-selected="true"], .ways button[aria-selected="true"], .seg button[aria-selected="true"], .seg a[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.step-body { padding-top: 20px; font-size: 1.05rem; min-height: 11em; }

.piece-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 14px; margin-top: 16px; max-width: none; text-align: center; }
.piece-cap b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.piece-cap span { color: var(--soft); font-size: .92rem; }
.piece-cap q { flex-basis: 100%; font-family: var(--display); font-size: 1.02rem; line-height: 1.55; color: var(--ink); quotes: none; margin-top: 8px; max-width: 46ch; margin-inline: auto; }
.piece-cap a { color: var(--accent); font-size: .95rem; text-underline-offset: 4px; padding: 10px 0; flex-basis: 100%; }
.thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding: 4px var(--gutter); margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: none; width: 60px; height: 60px; padding: 3px; border-radius: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; opacity: .75; }
.thumbs button img { width: 100%; height: 100%; object-fit: contain; }
.thumbs button:has(> img.round) { background: transparent; }
.thumbs button[aria-pressed="true"] { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.scene-art .thumbs { justify-content: safe center; }

/* ---------- house, craft, artists, proud ---------- */

.house-fig, .proud-fig { margin-inline: calc(var(--gutter) * -1); }
.house-fig img, .proud-fig img, .craft-fig img { width: 100%; max-height: none; border-radius: 0; box-shadow: none; }
.craft-fig img { border-radius: 6px; }
.house-copy { display: grid; gap: 18px; }
.house-copy p { color: var(--soft); }
.house-copy .house-lede { color: var(--ink); font-family: var(--display); font-size: clamp(1.15rem, 4.4vw, 1.55rem); line-height: 1.45; }
.facts, .promise { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.facts b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.15; margin-bottom: 6px; }
.facts span, .promise p { color: var(--soft); }
.promise li { border-top: 1px solid var(--accent); padding-top: 18px; }
.promise h3 { color: var(--accent); margin-bottom: 8px; }
.artist { display: grid; gap: 8px; align-content: start; }
.artist img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 12px; }
.artist h3 { font-size: 1.5rem; }
.artist .role { color: var(--accent); font-size: .95rem; }
.artist p:not(.role) { color: var(--soft); }
.artist a { color: var(--accent); text-underline-offset: 5px; padding: 10px 0; }
.year-body { display: grid; gap: 24px; align-content: start; }
.year-body b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; display: block; margin-bottom: 4px; }
.year-body p { color: var(--soft); }

/* ---------- shelf and cards ---------- */

.pieces { padding: 56px 0; display: grid; gap: 8px; }
.pieces-head, .pieces-foot { padding: 0 var(--gutter); }
.shelf { display: flex; gap: 14px; overflow-x: auto; padding: 20px var(--gutter); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf .piece { flex: 0 0 64%; max-width: 300px; scroll-snap-align: start; }
.related { padding-inline: 0; }
.related h2 { padding: 0 var(--gutter); font-size: 1.5rem; }
.piece { display: grid; gap: 2px; text-decoration: none; align-content: start; }
.piece b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin-top: 12px; line-height: 1.3; }
.piece > span:last-child { color: var(--accent); font-size: .88rem; }
.piece:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- lists: articles, press, social ---------- */

.articles, .press-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.articles a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--display); font-size: 1.15rem; line-height: 1.4; }
.press-list a { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.press-list b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; line-height: 1.4; }
.press-list span { color: var(--accent); font-size: .88rem; }
.press-list em { font-style: normal; color: var(--soft); font-size: .95rem; }
.articles a:hover, .press-list a:hover b { color: var(--accent); }
.press-page { gap: 40px; padding-top: 0; }
.press-page h2 { font-size: 1.6rem; color: var(--accent); margin-bottom: 8px; }
.social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social a { display: grid; gap: 2px; padding: 16px; min-height: 76px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.social b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.social span { color: var(--soft); font-size: .85rem; overflow-wrap: anywhere; }
.social a:hover { border-color: var(--accent); }

/* ---------- order ---------- */

.order-head { display: grid; gap: 14px; }
.steps-list { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.steps-list li::before { content: counter(step); font-family: var(--display); font-size: 1.4rem; color: var(--accent); }
.steps-list li.go { border: 0; padding-top: 24px; display: block; }
.steps-list li.go::before { content: none; }
.bank { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 28px; }
.bank h3 { color: var(--accent); }
.bank b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; letter-spacing: .04em; }
.bank .note { color: var(--soft); }

/* ---------- footer: address, map, contact grid ---------- */

.visit { border-top: 1px solid var(--line); background: var(--navy); color: #F4F1EA; --ink: #F4F1EA; --soft: rgba(244,241,234,.68); --accent: #C49A6C; --line: rgba(196,154,108,.35); --bg: #002554; gap: 22px; }
.visit address { font-style: normal; margin: 14px 0 4px; }
.visit .hours { color: var(--soft); font-size: .94rem; }
.visit-map { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: #0A1733; }
.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.map-go { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--gold); color: var(--navy); text-decoration: none; font-weight: 400; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.map-go svg, .contact-grid svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact-grid a { display: grid; justify-items: center; gap: 2px; padding: 14px 6px 12px; min-height: 88px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; text-align: center; }
.contact-grid a:hover { border-color: var(--gold); }
.contact-grid svg { color: var(--gold); width: 22px; height: 22px; margin-bottom: 4px; }
.contact-grid b { font-weight: 400; font-size: .92rem; }
.contact-grid small { color: var(--soft); font-size: .72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floors { border-top: 1px solid var(--line); padding-top: 4px; }
.floors h3 { font-size: 1.15rem; padding: 14px 0 4px; }
.floors-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 8px 0 12px; }
.floor-tabs { display: grid; gap: 5px; }
.floor-tabs button { font-family: var(--display); font-size: 1.05rem; color: var(--soft); width: 64px; height: 40px; background: none; border: 1px solid var(--line); cursor: pointer; }
.floor-tabs button:first-child { border-radius: 36px 36px 0 0; height: 48px; padding-top: 8px; }
.floor-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.floor-name { display: block; font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin-bottom: 6px; }
.floor-text { color: var(--soft); }
.fine { font-size: .8rem; color: var(--soft); }

/* ---------- inner pages ---------- */

.page-head { padding-bottom: 20px; gap: 0; }
.page-head .seg { margin-top: 24px; }
.cat { padding-top: 0; gap: 16px; }
.cat-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; position: sticky; top: 60px; z-index: 5; background: var(--navy); padding: 10px 0; }
.search input { width: 100%; min-height: 48px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); padding: 0 20px; font: inherit; font-size: 1rem; }
.search input::placeholder { color: var(--soft); }
.cat-count { grid-column: 1 / -1; color: var(--soft); font-size: .9rem; }
.cat-filters { display: grid; gap: 18px; border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.cat-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cat-filters legend { font-family: var(--display); font-size: 1.1rem; padding: 0 0 8px; color: var(--accent); }
.opts, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opts button, .chips button { min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: .92rem; }
.opts small { margin-left: 6px; color: var(--soft); }
.opts button[aria-pressed="true"], .chips button { background: var(--accent); border-color: var(--accent); color: var(--navy); }
.opts button[aria-pressed="true"] small { color: inherit; }
.chips button.all { background: none; color: var(--accent); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.more { display: grid; justify-items: center; padding-top: 12px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: var(--soft); grid-column: 1 / -1; }
.crumbs a { padding: 8px 0; text-underline-offset: 4px; }
.pd { padding-top: 20px; }
.pd-media .frame { box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .55); }
.pd-media .thumbs { justify-content: safe center; }
.pd-info { display: grid; gap: 14px; align-content: start; }
.pd-coll { color: var(--accent); }
.pd-meta { color: var(--soft); }
.pd-meta span { margin-left: 10px; letter-spacing: .04em; }
.pd-price { font-family: var(--display); font-size: 1.7rem; }
.pd-lede { font-family: var(--display); font-size: 1.12rem; line-height: 1.6; border-left: 2px solid var(--gold); padding-left: 16px; }
.pd-cta { display: grid; gap: 10px; margin: 8px 0 12px; }
.pd-story { display: grid; gap: 14px; color: var(--soft); border-top: 1px solid var(--line); padding-top: 22px; }
.pd-info h2 { font-size: 1.25rem; color: var(--accent); margin-top: 10px; }
.pd-specs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pd-specs li { padding: 11px 0; border-bottom: 1px solid var(--line); }
.note { color: var(--soft); font-size: .9rem; }

.posts { list-style: none; margin: 0; padding-top: 8px; gap: 0; }
.posts a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: start; }
.posts .txt { display: grid; gap: 4px; }
.posts small { color: var(--soft); font-size: .8rem; }
.tag { font-style: normal; display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; margin-right: 4px; border: 1px solid var(--gold); color: var(--gold); }
.tag-news { background: var(--gold); color: var(--navy); }
.frame.tagged { display: grid; place-items: center; }
.frame.tagged em { font-style: normal; font-family: var(--display); color: var(--gold); font-size: 1.05rem; }
.posts b { font-family: var(--display); font-weight: 400; font-size: 1.12rem; line-height: 1.4; }
.posts .txt > span { color: var(--soft); font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post { max-width: 760px; margin-inline: auto; padding-top: 20px; gap: 22px; }
.post h1 { font-size: clamp(1.8rem, 6.4vw, 2.8rem); line-height: 1.3; }
.post-body { display: grid; gap: 18px; }
.post-body h2 { font-size: 1.35rem; color: var(--accent); margin-top: 14px; line-height: 1.4; }
.post-body p { max-width: none; }
.post .btn { justify-self: start; }
.post .photo img { max-height: none; }

/* ---------- tablet ---------- */

@media (min-width: 700px) {
  body { font-size: 1.0625rem; }
  .isle, .scene, .house, .craft, .world, .showcase, .atelier, .partners, .artists, .journey, .press, .order, .visit, .page-head, .cat, .pd, .posts, .press-page, .follow { padding: 80px var(--gutter); gap: 36px; }
  .page-head { padding-bottom: 24px; } .cat, .posts, .press-page { padding-top: 0; }
  .promise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promise li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; }
  .shelf .piece { flex-basis: 34%; }
  .social { grid-template-columns: repeat(4, 1fr); }
  .posts a { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .pd-cta { grid-template-columns: repeat(2, auto); justify-content: start; }
  .house-fig { margin-inline: 0; }
  .house-fig img { border-radius: 6px; }
  .thumbs button { width: 68px; height: 68px; }
}

/* ---------- desktop ---------- */

@media (min-width: 1080px) {
  body { padding-bottom: 0; }
  html { scroll-padding-top: 84px; }
  .tabbar, .menu-btn, .sheet { display: none !important; }
  body.menu-open { overflow: auto; }
  .top { min-height: 72px; gap: 18px; }
  .brand-mark { width: 128px; }
  .top-nav { display: flex; gap: 4px; }
  .top-order { display: inline-flex; }
  .nav-group { position: relative; }
  .nav-group > a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; font-size: .94rem; color: var(--soft); }
  .nav-group > a:hover, .nav-group:focus-within > a { color: var(--ink); }
  .nav-sub { position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px; display: none; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
  .inner .nav-sub { background: var(--navy); }
  .nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { display: grid; }
  .nav-sub a { padding: 10px 12px; border-radius: 6px; text-decoration: none; font-size: .94rem; }
  .nav-sub a:hover { color: var(--accent); }

  .rail { position: fixed; right: calc(var(--gutter) / 2 - 6px); top: 50%; z-index: 15; transform: translateY(-50%); display: flex; flex-direction: column; gap: 18px; }
  .rail a { position: relative; display: block; width: 12px; height: 12px; border: 1px solid var(--accent); border-radius: 50%; transition: background-color .3s, transform .3s; }
  .rail a[aria-current="true"] { background: var(--accent); transform: scale(1.35); }
  .rail a span { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .8rem; color: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .rail a:hover span, .rail a:focus-visible span { opacity: 1; }

  .isle, .scene, .house, .craft, .world, .showcase, .atelier, .partners, .artists, .journey, .press, .order, .visit, .pd { padding: clamp(90px, 9vw, 140px) var(--gutter); gap: clamp(32px, 5vw, 80px); }
  .page-head { padding: 72px var(--gutter) 28px; } .cat, .posts, .press-page, .follow { padding: 0 var(--gutter) 100px; }
  .scene, .order, .pd { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .visit { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); align-items: start; column-gap: 40px; }
  .visit .floors, .visit .fine { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene { align-items: center; min-height: 100svh; }
  .scene:nth-of-type(even) .scene-text { order: 2; }
  .house { grid-template-columns: minmax(0, 1fr); }
  .house-copy { max-width: 70ch; }
  .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promise li:last-child:nth-child(odd) { grid-column: auto; }
  .journey-head, .bank, .floors, .fine { grid-column: 1 / -1; }
  .bank { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 12px clamp(32px, 5vw, 80px); }
  .bank h3 { grid-column: 1 / -1; }
  .journey, .press { grid-template-columns: minmax(0, 1fr); }
  .articles a { font-size: 1.35rem; }
  .step-body { min-height: 9.5em; font-size: 1.1rem; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 28px; }
  .cat-tools { grid-template-columns: minmax(0, 420px) auto minmax(0, 1fr); top: 72px; }
  .cat-count { grid-column: auto; text-align: right; }
  .cat-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shelf .piece { flex-basis: 22%; }
  .pd-media { position: sticky; top: 100px; }
  .crumbs { grid-column: 1 / -1; }
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .press-page { max-width: 900px; }
}


/* =================== hero: full-bleed photos, live text =================== */

.hero { position: relative; padding: 0; background: #050A14; }
.stage { position: relative; height: min(84svh, 760px); min-height: 520px; overflow: hidden; touch-action: pan-y; outline: none; }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
.slide picture, .slide img { display: block; width: 100%; height: 100%; }
.slide .fill { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(28px) brightness(.55) saturate(1.1); }
.slide picture { position: absolute; inset: 0; }
.slide picture img { object-fit: cover; } /* the hero photo fills the screen; each slide's focus point keeps its subject in view */
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 18, 45, .92) 0%, rgba(0, 18, 45, .55) 34%, rgba(0, 18, 45, 0) 62%); pointer-events: none; }
.cap { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 88px; display: grid; gap: 14px; justify-items: start; color: #F4F1EA; max-width: 760px; }
.cap-k { color: var(--gold); font-size: .95rem; letter-spacing: .02em; }
.cap-t { font-family: var(--display); font-size: clamp(2.1rem, 9.4vw, 5.2rem); line-height: 1.04; letter-spacing: -.02em; margin: 0; max-width: 16ch; }
[data-lang="th"] .cap-t { font-size: clamp(1.8rem, 7.6vw, 4rem); line-height: 1.3; letter-spacing: 0; }
.cap-b { color: #F4F1EA; border-color: var(--gold); margin-top: 6px; }
.cap-b:hover { background: var(--gold); color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .slide.is-on .fill { animation: drift 9s ease-out both; }
  .slide.is-on .cap > * { animation: rise-in .9s cubic-bezier(.2, .7, .1, 1) both; }
  .slide.is-on .cap-t { animation-delay: .15s; }
  .slide.is-on .cap-b { animation-delay: .35s; }
}
@keyframes drift { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) 18px; display: flex; align-items: center; gap: 14px; }
.hero-dots { flex: 1; display: flex; gap: 6px; }
.hero-dots button { flex: 1; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.hero-dots i { position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: rgba(244, 241, 234, .3); border-radius: 2px; overflow: hidden; }
.hero-dots i::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }
.hero-dots button[aria-selected="true"] i { background: rgba(244, 241, 234, .45); }
.hero-nav { display: flex; align-items: center; gap: 4px; color: #F4F1EA; }
.hero-count { min-width: 3.2em; text-align: center; font-size: .86rem; opacity: .8; }
.arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244, 241, 234, .35); background: rgba(0, 18, 45, .35); color: #F4F1EA; cursor: pointer; display: grid; place-items: center; }
.arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrow.play .i-play { display: none; }
.arrow.play.is-paused .i-play { display: block; fill: currentColor; stroke: none; }
.arrow.play.is-paused .i-pause { display: none; }
.arrow:hover { border-color: var(--gold); color: var(--gold); }
.hero .prev { display: none; }
.hero .next { display: none; }

.kicker { color: var(--accent); font-size: .92rem; letter-spacing: .02em; margin-bottom: 10px; }
.kicker + h2::before { display: none !important; }

/* =================== the isle =================== */

.isle { gap: 20px; }
.isle-map { margin-inline: calc(var(--gutter) * -1); }
.isle-art { position: relative; container-type: inline-size; }
.isle-art img { display: block; width: 100%; height: auto; }
/* Island drawing: the camera clips inside its frame; controls stay outside. */
.isle-viewport { position: relative; overflow: hidden; aspect-ratio: 2000 / 1117; background: #002554; isolation: isolate; border: 1px solid rgba(196, 154, 108, .3); border-radius: 10px; }
.isle-viewport .isle-art { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 850ms cubic-bezier(.22, .65, .2, 1); }
.isle-viewport .isle-art img { width: 100%; height: 100%; }
.isle-viewport .place { transform: scale(var(--pin-scale, 1)); transition: transform 850ms cubic-bezier(.22, .65, .2, 1), opacity .25s; }
.isle-viewport .isle-art .place { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.isle-viewport .isle-art .place::before { animation: none; }
.isle-viewport.is-zoomed .place:not(.is-on) { opacity: 0; visibility: hidden; pointer-events: none; }
.isle-viewport .place:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.isle-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px var(--gutter) 0; }
.isle-view-label { margin: 0; color: var(--soft); font-size: .85rem; line-height: 1.4; }
.isle-reset { flex: none; min-height: 44px; border: 1px solid var(--gold); border-radius: 999px; padding: 8px 14px; background: var(--navy); color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.isle-reset:disabled { opacity: .45; cursor: default; }
.isle-reset span { margin-left: 5px; }
.isle-tools + .isle-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 var(--gutter); margin: 12px 0 0; }
.isle-tools + .isle-legend button { min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: .78rem; }
.isle-tools + .isle-legend b { font-weight: 400; }
.isle-tools + .isle-legend button[aria-pressed="true"] { border-color: var(--gold); background: rgba(196, 154, 108, .1); }
.isle-tools + .isle-legend li:last-child { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .isle-tools { margin-inline: 0; }
  .isle-tools + .isle-legend { padding-inline: 0; }
}
@media (min-width: 1080px) {
  .isle-map { min-width: 0; align-self: start; }
  .isle-tools + .isle-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .isle-tools + .isle-legend li:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .isle-viewport .isle-art, .isle-viewport .place { transition: none; }
}
.isle-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.isle-fx i { position: absolute; display: block; }
.fx-petal { width: .7cqw; height: .45cqw; min-width: 4px; min-height: 3px; border-radius: 50%; background: #E3B9A4; opacity: 0; }
.fx-fly { width: .45cqw; height: .45cqw; min-width: 3px; min-height: 3px; border-radius: 50%; background: #FFE2BE; box-shadow: 0 0 1.2cqw .3cqw rgba(255, 226, 190, .7); opacity: .2; }
.fx-star { width: 1.1cqw; height: 1.1cqw; min-width: 6px; min-height: 6px; background: #F4F1EA; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: .4; }
.fx-beam { width: .5cqw; height: 9cqw; margin-left: -.25cqw; transform: translateY(-100%); background: linear-gradient(to top, rgba(255, 226, 190, .75), rgba(255, 226, 190, 0)); filter: blur(1px); opacity: .5; }
.fx-mist { width: 14cqw; height: 4cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 236, 242, .45), rgba(233, 236, 242, 0)); opacity: .7; }
.fx-glint { width: 9cqw; height: 16cqw; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(200, 240, 244, .35) 50%, rgba(255, 255, 255, 0) 70%); background-size: 300% 100%; mix-blend-mode: screen; border-radius: 40%; }
.fx-drop { width: .4cqw; height: .4cqw; min-width: 3px; min-height: 3px; border-radius: 50%; background: #C8F0F4; opacity: 0; }
.fx-path { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fx-petal { animation: fx-fall 6s ease-in infinite; animation-delay: var(--d); }
  .fx-fly { animation: fx-glow 2.6s ease-in-out infinite; animation-delay: var(--d); }
  .fx-star { animation: fx-twinkle 2.8s ease-in-out infinite; animation-delay: var(--d); }
  .fx-beam { animation: fx-glow 3.4s ease-in-out infinite; }
  .fx-mist { animation: fx-mist 10s ease-in-out infinite alternate; animation-delay: var(--d); }
  .fx-glint { animation: fx-sheen 5s ease-in-out infinite; }
  .fx-drop { animation: fx-drop 3s ease-in infinite; animation-delay: var(--d); }
}
@keyframes fx-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(3cqw, 9cqw) rotate(200deg); } }
@keyframes fx-glow { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes fx-twinkle { 0%, 100% { opacity: .2; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes fx-mist { to { transform: translateX(4cqw); } }
@keyframes fx-sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes fx-drop { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(5cqw); } }

.isle-art .place { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.isle-art .place::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--gold); opacity: .8; }
.isle-art .place span { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); font-family: var(--display); font-size: 1rem; line-height: 1; box-shadow: 0 0 0 3px rgba(0, 27, 61, .7); transition: transform .25s, background-color .25s; }
.isle-art .place.is-on span, .isle-art .place:hover span { background: #FFE2BE; transform: scale(1.15); }
.isle-art .place.is-on::before { border-color: #FFE2BE; }
@media (prefers-reduced-motion: no-preference) { .isle-art .place::before { animation: ring 2.4s ease-out infinite; } }
@media (max-width: 699px) {
  .isle-art .place { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .isle-art .place span { width: 24px; height: 24px; font-size: .85rem; }
}
@keyframes ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

.isle-panel { display: grid; gap: 16px; align-content: start; }
.ip-head { display: flex; align-items: center; gap: 14px; }
.ip-n { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--navy); display: grid; place-items: center; font-family: var(--display); font-size: 1.2rem; }
.ip-place { color: var(--accent); font-size: .92rem; }
.ip-head h3 { font-size: 1.7rem; }
.ip-feel { font-family: var(--display); font-size: 1.15rem; }
.ip-tag { color: var(--soft); }
.ip-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ip-pieces a { display: grid; gap: 4px; text-decoration: none; }
.ip-pieces b { font-family: var(--display); font-weight: 400; font-size: .9rem; line-height: 1.3; margin-top: 4px; }
.ip-pieces .pr { color: var(--accent); font-size: .78rem; }
.ip-story { margin: 0; padding: 14px 0 0 16px; border-left: 2px solid var(--gold); }
.ip-story p { font-family: var(--display); font-size: 1.02rem; line-height: 1.55; }
.ip-story cite { display: block; margin-top: 6px; color: var(--accent); font-style: normal; font-size: .88rem; }
.ip-go { display: flex; flex-wrap: wrap; gap: 10px; }

/* =================== Invisible Setting =================== */

.craft { gap: 30px; }
.how { display: grid; gap: 18px; border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: rgba(255, 255, 255, .03); }
.how-art { width: 100%; height: auto; display: block; }
.how-art .gem rect { stroke: rgba(255, 255, 255, .35); stroke-width: .8; }
.how-art .gem path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: .7; }
.how-art .art-note, .how-art .pct { fill: var(--soft); font-size: 13px; text-anchor: middle; font-family: var(--body); }
.how-art .pct { fill: var(--gold); font-size: 26px; font-family: var(--display); }
.how-art .rough { fill: rgba(194, 24, 71, .18); stroke: rgba(194, 24, 71, .6); stroke-dasharray: 4 4; }
.how-art .rails path { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 6 4; }
.how-art .groove { stroke: var(--gold); stroke-width: 2; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.how-steps button { width: 100%; min-height: 64px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: .86rem; color: var(--soft); }
.how-steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font-family: var(--display); font-size: .9rem; }
.how-steps button[aria-selected="true"] { border-color: var(--gold); color: var(--ink); background: rgba(196, 154, 108, .12); }
.how-steps button[aria-selected="true"] span { background: var(--gold); color: var(--navy); }
.how-cap { font-family: var(--display); font-size: 1.15rem; line-height: 1.5; min-height: 3em; }
@media (prefers-reduced-motion: no-preference) {
  .how-art.run .gem { animation: pop .5s both; }
  .how-art.run .reject { animation: reject 1.6s .6s both; }
  .how-art.run .cut { animation: cut 2.2s .2s cubic-bezier(.3, .7, .2, 1) both; transform-origin: 0 0; transform-box: view-box; }
  .how-art.run .slide-in { animation: slidein 1s both; animation-delay: var(--d); }
  .how-art.run .mosaic { animation: pop .6s both; }
  .how-art.run .sweep { animation: sweep 2.4s .5s ease-in-out infinite; }
}
@keyframes pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes reject { to { opacity: .12; transform: translateY(18px); } }
@keyframes cut { from { transform: scale(1.6); } to { transform: scale(1); } }
@keyframes slidein { from { opacity: 0; transform: translateX(-160px); } to { opacity: 1; transform: none; } }
@keyframes sweep { from { transform: translateX(0); } to { transform: translateX(560px); } }
.how-art .reject { opacity: .9; }

.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.stats li { display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--gold); padding-top: 14px; }
.stats b { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; color: var(--gold); }
.stats b small { font-size: .38em; margin-left: 6px; color: var(--ink); }
.stats li > span { color: var(--soft); font-size: .92rem; }
.stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stats .bar { display: grid; gap: 4px; margin-top: 4px; }
.stats .bar em { display: block; height: 6px; border-radius: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2, .7, .1, 1); }
.stats .bar em.std { background: rgba(244, 241, 234, .45); }
.stats.run .bar em { transform: scaleX(var(--v)); }
.stats .legend { color: var(--soft); font-size: .78rem; }
.stats .ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.stats .ring circle { fill: none; stroke: rgba(244, 241, 234, .15); stroke-width: 3.4; }
.stats .ring .arc { stroke: var(--gold); stroke-dasharray: 0 100; transition: stroke-dasharray 1.6s ease; }
.stats.run .ring .arc { stroke-dasharray: var(--v) 100; }

.reel, .wc-strip, .cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
.reel::-webkit-scrollbar, .wc-strip::-webkit-scrollbar, .cards::-webkit-scrollbar { display: none; }
.reel figure, .wc-strip figure { flex: 0 0 76%; max-width: 420px; margin: 0; scroll-snap-align: start; }
.reel .frame, .wc-strip .frame { aspect-ratio: 4 / 3; }
.reel figcaption, .wc-strip figcaption { color: var(--soft); font-size: .86rem; margin-top: 8px; }

/* =================== world =================== */

.world { gap: 20px; }
.world-sum { color: var(--soft); margin-top: 10px; }
.world-map { position: relative; margin-inline: calc(var(--gutter) * -1); }
.world-map img { width: 100%; display: block; opacity: .9; }
.world-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.world-svg .arc { fill: none; stroke: rgba(196, 154, 108, .55); stroke-width: 1.2; stroke-dasharray: 600; stroke-dashoffset: 600; }
.world-svg .arc.is-on { stroke: #FFE2BE; stroke-width: 2; }
.world-map.run .arc { animation: draw 1.8s ease forwards; animation-delay: var(--d); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.world-svg .home-ring { fill: none; stroke: var(--gold); stroke-width: 1.4; }
@media (prefers-reduced-motion: no-preference) { .world-svg .home-ring { animation: ping 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; } }
@media (prefers-reduced-motion: reduce) { .world-svg .arc { stroke-dashoffset: 0; } }
@keyframes ping { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.world-pins { position: absolute; inset: 0; }
.wpin { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.wpin i { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(0, 37, 84, .9); }
.wpin.home i { width: 14px; height: 14px; background: #FFE2BE; }
.wpin.is-on i { background: #FFE2BE; box-shadow: 0 0 0 3px rgba(0, 37, 84, .9), 0 0 0 7px rgba(255, 226, 190, .35); }
.wpin span { position: absolute; top: -6px; left: 50%; transform: translate(-50%, -100%); white-space: nowrap; font-size: .7rem; color: var(--ink); background: rgba(0, 18, 45, .8); padding: 2px 7px; border-radius: 4px; pointer-events: none; opacity: 0; }
.wpin.home span, .wpin.is-on span { opacity: 1; }
.world-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.world-tabs::-webkit-scrollbar { display: none; }
.world-tabs button { flex: none; min-height: 52px; display: grid; justify-items: start; padding: 6px 16px; border-radius: 10px; border: 1px solid var(--line); background: none; cursor: pointer; text-align: left; }
.world-tabs b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.world-tabs small { color: var(--soft); font-size: .76rem; }
.world-tabs button[aria-selected="true"] { border-color: var(--gold); background: rgba(196, 154, 108, .14); }
.world-card { display: grid; gap: 16px; }
.trip-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.trip-tabs button { min-height: 40px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: .88rem; }
.trip-tabs button[aria-pressed="true"] { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.wc-text { display: grid; gap: 10px; }
.wc-when { color: var(--accent); font-size: .9rem; }
.wc-text h3 { font-size: 1.4rem; line-height: 1.35; }
.wc-text p:not(.wc-when) { color: var(--soft); }
.wc-links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wc-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .88rem; }
.wc-links a::after { content: '↗'; margin-left: 6px; color: var(--gold); }
.wc-links a:hover { border-color: var(--gold); }

/* =================== partners =================== */

.partners { gap: 22px; }
.logo-groups { display: grid; gap: 22px; }
.logo-group h3 { font-size: 1rem; color: var(--accent); margin-bottom: 10px; font-family: var(--body); font-weight: 400; }
.logo-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.logo-group li, .logo-group li a { display: grid; justify-items: center; align-content: start; gap: 6px; text-decoration: none; }
.logo-group img { width: 100%; height: 72px; object-fit: contain; background: #fff; border-radius: 10px; padding: 10px; }
.logo-group span { font-size: .72rem; color: var(--soft); text-align: center; line-height: 1.3; }
@media (min-width: 700px) { .logo-group ul { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .logo-group img { height: 88px; } }
@media (min-width: 1080px) { .partners { grid-template-columns: minmax(0, 1fr); } .logo-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; } }

/* =================== showcase =================== */

.showcase { gap: 18px; }
.chips-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.chips-row::-webkit-scrollbar { display: none; }
.chips-row button { flex: none; min-height: 40px; padding: 4px 16px; border-radius: 999px; border: 1px solid var(--line); background: none; cursor: pointer; font-size: .9rem; }
.chips-row button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.card { flex: 0 0 72%; max-width: 330px; scroll-snap-align: start; display: grid; gap: 0; padding: 0; text-align: left; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .03); cursor: pointer; }
.card-img { display: block; aspect-ratio: 1; background: #0A1733; }
.card-img { position: relative; }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.card-t { display: grid; gap: 4px; padding: 14px 16px 18px; }
.card-t small { color: var(--accent); font-size: .8rem; }
.card-t b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.3; }
.card-t em { font-style: normal; color: var(--gold); font-size: .9rem; }
.card:hover { border-color: var(--gold); }

.sheet-dlg { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: none; max-height: 92svh; border-radius: 16px 16px 0 0; background: var(--navy); color: #F4F1EA; }
.sheet-dlg::backdrop { background: rgba(0, 10, 25, .7); }
.dlg-in { position: relative; display: grid; gap: 18px; padding: 18px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.dlg-x { position: sticky; top: 0; justify-self: end; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--navy); color: #F4F1EA; cursor: pointer; display: grid; place-items: center; }
.dlg-x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; }
.dlg-media { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: -44px; }
.dlg-media::-webkit-scrollbar { display: none; }
.dlg-media .photo { flex: 0 0 88%; scroll-snap-align: center; background: #0A1733; border-radius: 10px; aspect-ratio: 4 / 3; }
.dlg-media .photo img { max-height: 100%; max-width: 100%; box-shadow: none; border-radius: 0; }
.dlg-text { display: grid; gap: 10px; }
.dlg-text h3 { font-size: 1.6rem; line-height: 1.3; }
.dlg-stat { font-family: var(--display); color: var(--gold); font-size: 1.3rem; }

.cur-pick select { min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--soft); padding: 0 10px; font: inherit; font-size: .84rem; cursor: pointer; }
.cur-pick select option, .sheet-cur option { color: #0A1733; }
.sheet-cur { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--soft); }
.sheet-cur select { min-height: 48px; min-width: 120px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0 14px; font: inherit; }

@media (min-width: 700px) {
  .cap { bottom: 104px; }
  .hero .prev, .hero .next { display: grid; }
  .ip-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding: 28px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats li:last-child:nth-child(odd) { grid-column: auto; }
  .reel figure, .wc-strip figure { flex-basis: 40%; }
  .card { flex-basis: 34%; }
  .world-map, .isle-map { margin-inline: 0; }
  .sheet-dlg { margin: auto; width: min(960px, 94vw); border-radius: 16px; }
  .dlg-in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; padding: 24px; }
  .dlg-x { position: absolute; top: 14px; right: 14px; }
  .dlg-media { margin-top: 0; }
  .dlg-media .photo { flex-basis: 100%; }
  .wc-strip figure { flex-basis: 44%; }
}

@media (min-width: 1080px) {
  .stage { height: min(88svh, 820px); }
  .isle { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; }
  .isle-copy { grid-column: 1 / -1; }
  .craft { grid-template-columns: minmax(0, 1fr); }
  .craft-head { max-width: 60ch; }
  .world { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .world-head, .world-map, .world-tabs { grid-column: 1 / -1; }
  .world-card { grid-column: 1 / -1; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; align-items: start; }
  .trip-tabs { grid-column: 1 / -1; }
  .wc-strip { margin-inline: 0; padding-inline: 0; }
  .wc-strip figure { flex-basis: 70%; }
  .reel { margin-inline: 0; padding-inline: 0; }
  .reel figure { flex-basis: 27%; }
  .cards { margin-inline: 0; padding-inline: 0; }
  .card { flex-basis: 23%; }
  .chips-row, .world-tabs { margin-inline: 0; padding-inline: 0; }
}

@media (max-width: 699px) {
  .top .cur-pick { display: none; }
}


/* =================== text: justified body copy =================== */

/* every paragraph on every page sits flush on both edges; one-line labels are unaffected
   because the last line of a justified block stays on the left */
main p:not([class]), main blockquote p, .story-lede, .craft-lede, .house-lede, .house-copy p, .isle-copy p, .origin-text p, .world-sum, .wc-text p,
.pr-sum, .pr-text p, .step-body, .post-body p, .policy-intro, .floor-text p, .floor-body p, .fem-text p, .at-text p, .dlg-text p, .scene-text p:not([class]),
.ip-tag, .ip-story p, .fem-by span, .how-cap, .page-head p, .year-body p, .artist p:not(.role), .visit p:not([class]) {
  text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
}
[lang="th"] main p:not([class]), [lang="th"] .story-lede, [lang="th"] .post-body p, [lang="th"] .step-body { text-justify: inter-character; hyphens: manual; }

/* =================== header icons, chat, search, toast =================== */

.icon-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; text-decoration: none; flex: none; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.bag-n { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--navy); font-size: .72rem; display: grid; place-items: center; }
.top .lang { padding: 0 12px; }
@media (max-width: 420px) { .top { gap: 6px; } .top .lang { padding: 0 9px; font-size: .8rem; } .brand-mark { width: 88px; } .menu-btn { padding: 0 11px; } }

.chat { position: fixed; z-index: 27; right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); display: grid; justify-items: end; gap: 10px; }
.chat-btn { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; border: 0; background: var(--gold); color: var(--navy); font: inherit; font-weight: 400; cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.chat-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chat-menu { width: min(290px, calc(100vw - 28px)); background: #0A1733; color: #F4F1EA; border: 1px solid rgba(196, 154, 108, .45); border-radius: 14px; padding: 14px; display: grid; gap: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.chat-hi { font-size: .88rem; color: rgba(244, 241, 234, .75); }
.chat-menu a { display: grid; padding: 10px 14px; border-radius: 10px; text-decoration: none; border: 1px solid rgba(196, 154, 108, .3); }
.chat-menu a b { font-weight: 400; } .chat-menu a small { color: rgba(244, 241, 234, .65); font-size: .8rem; }
.chat-line { background: #06C755; border-color: #06C755 !important; color: #fff; } .chat-line small { color: rgba(255, 255, 255, .85) !important; }
@media (max-width: 699px) { .chat-btn { width: 52px; padding: 0; justify-content: center; } .chat-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (min-width: 1080px) { .chat { bottom: 24px; right: 24px; } }

.search-dlg { border: 0; padding: 0; width: min(760px, 100vw); max-width: none; max-height: 100svh; margin: 0 auto auto; background: var(--navy); color: #F4F1EA; border-radius: 0 0 16px 16px; }
.search-dlg::backdrop { background: rgba(0, 10, 25, .7); }
.search-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px var(--gutter) 22px; max-height: 100svh; overflow: auto; }
.search-box { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border: 1px solid var(--gold); border-radius: 999px; }
.search-box svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.6; flex: none; }
.search-box input { flex: 1; min-width: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 1.05rem; outline: none; }
.search-x { min-height: 52px; border: 0; background: none; color: rgba(244, 241, 234, .75); font: inherit; cursor: pointer; }
.search-res { grid-column: 1 / -1; display: grid; gap: 8px; }
.search-res h3 { font-size: .95rem; color: var(--gold); margin-top: 10px; font-family: var(--body); font-weight: 400; }
.search-res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.search-res a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; }
.search-res a:hover, .search-res a:focus-visible { background: rgba(196, 154, 108, .14); }
.search-res .frame { width: 52px; }
.search-res b { display: block; font-weight: 400; } .search-res small { color: rgba(244, 241, 234, .65); font-size: .82rem; }
.muted { color: var(--soft); }

.toast { position: fixed; z-index: 40; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #F4F1EA; color: var(--navy); padding: 12px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .25s, transform .25s; white-space: nowrap; }
.toast a { color: var(--navy); font-weight: 400; margin-left: 8px; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* =================== product page: one format for every piece =================== */

.pd-sec { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.pd-sec h2 { font-size: 1.25rem; color: var(--accent); }
.dt { margin: 0; display: grid; }
.dt-row { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dt dt { color: var(--soft); font-size: .92rem; } .dt dd { margin: 0; }
.stones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stones li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.gem-ico { display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.st-n { display: grid; } .st-n small { color: var(--soft); font-size: .78rem; }
.st-q, .st-c { font-size: .9rem; text-align: right; white-space: nowrap; } .st-c { color: var(--accent); min-width: 4.5em; }
.pd-quote { margin: 0; padding-left: 16px; border-left: 2px solid var(--gold); font-family: var(--display); font-size: 1.2rem; line-height: 1.5; }
.pd-story { display: grid; gap: 14px; color: var(--soft); }
.care { margin: 0; padding-left: 1.2em; color: var(--soft); display: grid; gap: 4px; }

/* =================== checkout =================== */

.co { padding: 0 var(--gutter) 80px; display: grid; gap: 30px; max-width: 1100px; }
.bag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bag-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.bag-list .qty { grid-column: 2; grid-row: 2; justify-self: start; }
.bag-list .frame { grid-row: span 2; }
.bl-t { display: grid; gap: 2px; } .bl-t b { font-family: var(--display); font-weight: 400; } .bl-t small { color: var(--soft); font-size: .8rem; } .bl-t span { color: var(--accent); font-size: .92rem; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button, .rm { min-width: 40px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: none; color: inherit; font: inherit; cursor: pointer; }
.qty span { min-width: 1.6em; text-align: center; }
.rm { grid-column: 2; grid-row: 2; justify-self: end; padding: 0 12px; font-size: .82rem; color: var(--soft); }
.bag-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 1.3rem; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.co-form { display: grid; gap: 16px; }
.co-form h2 { font-size: 1.5rem; }
.co-form label { display: grid; gap: 6px; font-size: .92rem; }
.co-form input:not([type=radio]):not([type=checkbox]), .co-form textarea { width: 100%; min-height: 48px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink); padding: 10px 14px; font: inherit; }
.co-form input:focus, .co-form textarea:focus { outline: none; border-color: var(--gold); }
.f2 { display: grid; gap: 14px; }
.opts-f { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; display: grid; gap: 4px; }
.opts-f legend { padding: 0 6px; color: var(--accent); }
.radio, .check { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px; min-height: 44px; }
.radio input, .check input { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
.co-err { color: #FFB4A8; min-height: 1.2em; }
.co-form [aria-invalid="true"] { border-color: #FFB4A8 !important; }
.co-form .field-err { color: #FFB4A8; font-size: .85rem; }
.co-done { display: grid; gap: 18px; max-width: 640px; }
.co-no b { font-family: var(--display); font-size: 1.5rem; color: var(--gold); margin-left: 6px; }
.slip { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; }
@media (min-width: 700px) { .f2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .co { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .co-bag { position: sticky; top: 96px; } .co-done { grid-column: 1 / -1; } }

/* =================== scene features =================== */

.scene-feature { grid-column: 1 / -1; }
.fem { display: grid; gap: 24px; align-items: center; }
.fem-art { margin: 0; position: relative; }
.fem-art img { display: block; width: min(100%, 420px); height: auto; margin-inline: auto; }
.fem-art figcaption { text-align: center; color: var(--soft); font-size: .8rem; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .fem-art img { clip-path: inset(0 0 100% 0); transition: clip-path 2.8s cubic-bezier(.3, .6, .2, 1); }
  .scene.is-in .fem-art img { clip-path: inset(0 0 0 0); }
}
.fem-q { margin: 0; font-family: 'Playfair Display', var(--display); font-style: italic; font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1.25; color: var(--ink); }
.fem-pillars { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 14px; }
.fem-pillars li { display: grid; gap: 2px; border-left: 2px solid var(--accent); padding-left: 14px; }
.fem-pillars b { font-weight: 400; font-family: var(--display); font-size: 1.15rem; color: var(--accent); }
.fem-pillars span { color: var(--soft); }
.fem-by { color: var(--soft); font-size: .95rem; display: grid; gap: 6px; }
.fem-by cite { font-style: normal; color: var(--accent); }
@media (min-width: 1080px) { .fem { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 60px; } }

.observatory { display: grid; gap: 14px; }
.obs-head h3 { font-size: clamp(1.4rem, 5vw, 2rem); }
.sky { position: relative; height: min(78svh, 640px); min-height: 420px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #030718; margin-inline: calc(var(--gutter) * -1); touch-action: none; }
.sky-cv { display: block; cursor: grab; }
.sky-cv:active { cursor: grabbing; }
.sky-hud { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 16px; background: linear-gradient(to top, rgba(2, 6, 15, .92), rgba(2, 6, 15, 0)); display: grid; gap: 10px; pointer-events: none; }
.sky-hud > * { pointer-events: auto; }
.sky-when { font-size: .88rem; color: #E9EBF5; }
.sky-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sky-ctrl button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(196, 154, 108, .6); background: rgba(3, 7, 24, .6); color: #F4F1EA; font: inherit; font-size: .85rem; cursor: pointer; }
.sky-time { flex: 1; min-width: 140px; accent-color: #C49A6C; }
.sky-tip { font-size: .76rem; color: rgba(233, 235, 245, .7); }
@media (min-width: 700px) { .sky { margin-inline: 0; } }

.tide { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tide-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--accent); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.tide-bars { display: inline-flex; gap: 3px; align-items: center; height: 18px; }
.tide-bars i { width: 3px; height: 30%; background: var(--accent); border-radius: 2px; }
.tide-btn.on { background: var(--accent); color: var(--bg); } .tide-btn.on .tide-bars i { background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { .tide-btn.on .tide-bars i { animation: bar 1.1s ease-in-out infinite; } .tide-btn.on .tide-bars i:nth-child(2) { animation-delay: .2s; } .tide-btn.on .tide-bars i:nth-child(3) { animation-delay: .4s; } .tide-btn.on .tide-bars i:nth-child(4) { animation-delay: .1s; } .tide-btn.on .tide-bars i:nth-child(5) { animation-delay: .3s; } }
@keyframes bar { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.tide-note { color: var(--soft); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- AVALON Atelier: a quiet vault, photos always whole ---------- */

.atelier { background: #06101F; border-block: 1px solid rgba(196, 154, 108, .28); }
.atelier-head p:not(.kicker) { color: var(--soft); margin-top: 14px; max-width: 58ch; }
.at-index { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-bottom: 1px solid var(--line); }
.at-index::-webkit-scrollbar { display: none; }
.at-index button { flex: none; display: grid; justify-items: start; gap: 2px; min-height: 56px; padding: 8px 18px 12px 0; margin-right: 18px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; color: var(--soft); text-align: left; }
.at-index b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1.25; white-space: nowrap; }
.at-index small { font-size: .78rem; color: var(--soft); }
.at-index button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.at-index button[aria-selected="true"] small { color: var(--gold); }
.at-piece { display: grid; gap: 28px; }
.at-piece.fade { animation: at-in .45s ease both; }
@keyframes at-in { from { opacity: 0; } to { opacity: 1; } }
.at-stage { display: grid; gap: 12px; align-content: start; }
.at-view { margin: 0; }
.at-frame { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #fff; touch-action: pan-y; }
.at-frame .fill { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); max-width: none; object-fit: cover; filter: blur(22px); }
.at-frame img:not(.fill) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.at-view figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--soft); font-size: .86rem; }
.at-view figcaption span { flex: none; color: var(--gold); }
.at-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.at-thumbs .frame { padding: 0; border: 1px solid transparent; cursor: pointer; border-radius: 4px; }
.at-thumbs .frame[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.at-label { display: grid; gap: 14px; align-content: start; }
.at-type { color: var(--gold); font-size: .9rem; }
.at-label h3 { font-size: clamp(1.7rem, 7vw, 2.5rem); line-height: 1.12; }
.at-by { color: var(--soft); font-size: .92rem; }
.at-text { line-height: 1.75; }
.at-label h4 { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--gold); margin: 0 0 8px; }
.at-mat { padding-top: 14px; border-top: 1px solid var(--line); }
.at-mat p { color: var(--soft); }
.at-shown { padding-top: 14px; border-top: 1px solid var(--line); }
.at-shown ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.at-shown li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.at-shown li:last-child { border-bottom: 0; }
.at-yr { font-family: var(--display); font-size: 1.15rem; color: var(--ink); line-height: 1.3; }
.at-ev { display: grid; gap: 2px; font-size: .92rem; line-height: 1.55; text-align: left; }
.at-ev small { color: var(--gold); font-size: .78rem; }
.at-ev a { text-decoration: none; }
.at-ev a::after { content: ' ↗'; color: var(--gold); }
.at-ev a:hover { text-decoration: underline; text-underline-offset: 3px; }
.at-label .btn { justify-self: start; margin-top: 6px; }
.at-more { justify-self: start; color: var(--gold); text-underline-offset: 4px; }
@media (min-width: 700px) { .at-thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }
@media (min-width: 1080px) {
  .at-piece { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .at-stage { position: sticky; top: 90px; }
}
@media (prefers-reduced-motion: reduce) { .at-piece.fade { animation: none; } }
.page-head + .partners { padding-top: 0; }

.craft-go { justify-self: start; }
.showcase-note { color: var(--soft); margin-top: -12px; }
.piece-cap a + a { margin-left: 16px; }
.house-copy .house-lede { text-align: left; }


/* frames that take the photo's own shape: the photo meets every edge, nothing is cropped */
.free { aspect-ratio: var(--r) !important; }
.reel figure:has(.free), .wc-strip figure:has(.free) { flex: 0 0 auto; width: auto; max-width: none; }
.reel .frame.free, .wc-strip .frame.free { height: min(56vw, 300px, calc(86vw / var(--r))); width: auto; }
.reel figure:has(.free) figcaption, .wc-strip figure:has(.free) figcaption, .card:has(.free) .card-t { contain: inline-size; }
.card:has(.free) { flex: 0 0 auto; width: auto; max-width: none; }
.card-img.free { height: min(80vw, 330px, calc(86vw / var(--r))); width: auto; }
.dlg-media .photo.free { flex: 0 0 auto; height: min(60svh, calc(86vw / var(--r))); width: auto; background: none; }
.at-frame.free { width: min(100%, calc(70svh * var(--r))); margin-inline: auto; background: none; }
.scene-art .frame.tall.free { width: min(100%, 460px, calc(68svh * var(--r))); }
.pd-media .frame.free { width: min(100%, calc(70svh * var(--r))); margin-inline: auto; }

/* artists: one swipeable row of cards, each photo whole */
.artist-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); align-items: start; }
.artist-cards::-webkit-scrollbar { display: none; }
.artist-cards .artist { flex: 0 0 84%; max-width: 440px; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding: 0 0 8px; background: rgba(255, 255, 255, .03); gap: 6px; }
.artist-cards .artist img { border-radius: 0; margin-bottom: 8px; }
.artist-cards .artist > :not(img) { margin-inline: 18px; }
.artist-cards .artist h3 { font-size: 1.3rem; }
.artist-cards .artist p:not(.role) { font-size: .95rem; }
/* short section intros read better ragged than stretched */
.isle-copy p, .craft-head p, .artists-head p, .pieces-head p, .order-head p, .atelier-head p, .page-head p, .showcase-note { text-align: left; }

/* nested strips never push the page sideways */
.world-card > *, .wc-media, .craft > *, .showcase > *, .atelier > *, .at-piece > * { min-width: 0; }


/* social links with their icons */
.social a { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.social a svg { grid-row: span 2; width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* artists: equal portrait frames */
.artist-cards .artist img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; }

/* scene in brief on the home page, in full on scene.html */
.scene-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.scene-pn { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.scene-pn a { display: grid; gap: 2px; text-decoration: none; }
.scene-pn a:last-child { text-align: right; }
.scene-pn small { color: var(--accent); font-size: .8rem; }
.scene-pn b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.back { padding: 18px var(--gutter) 0; margin: 0; }
.back a { color: var(--accent); text-underline-offset: 4px; font-size: .92rem; }
.back a::before { content: '‹ '; }
.scene-full { padding-top: 24px; }

/* atelier in brief and in full */
.at-count { color: var(--gold); font-size: .9rem; }
.at-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.atelier-full { padding-top: 24px; }
.atelier-full .at-name { font-size: clamp(1.9rem, 8vw, 2.8rem); line-height: 1.12; }

/* how to own a piece: plain buttons, no step lists */
.order-go { display: grid; gap: 10px; }
.order-go .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.order-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 700px) { .order-go { grid-template-columns: repeat(2, max-content); } }

/* footer link columns, as on the old site */
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; border-top: 1px solid var(--line); padding-top: 22px; }
.foot-links h3 { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--gold); margin: 0 0 10px; }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--soft); font-size: .92rem; }
.foot-links a:hover { color: var(--ink); }
@media (min-width: 700px) { .foot-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .foot-links { grid-column: 1 / -1; } }

/* policy pages */
.policy { padding: 0 var(--gutter) 56px; display: grid; gap: 28px; max-width: 760px; }
.policy h2 { font-size: 1.3rem; color: var(--accent); margin-bottom: 10px; }
.policy ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--soft); line-height: 1.75; }
.policy-head .seg { margin-bottom: 18px; }

/* product photo opens the viewer */
.pd-zoom { padding: 0; border: 0; cursor: zoom-in; width: 100%; }
.pd-view { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pd-view .btn { min-height: 40px; font-size: .9rem; }

/* viewer: zoom and try-on, full screen */
.viewer { inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #05070d; color: #F4F1EA; }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.viewer::backdrop { background: #05070d; }
.vw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; }
.vw-name { font-family: var(--display); font-size: 1.05rem; }
.vw-name small { color: var(--gold); font-size: .8rem; margin-left: 6px; }
.viewer svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vw-x, .vw-tools > button:not(.btn) { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244, 241, 234, .3); background: none; color: inherit; cursor: pointer; }
.vw-stage { position: relative; overflow: hidden; display: grid; place-items: center; background: #fff; cursor: grab; }
.vw-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; will-change: transform; }
.vw-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px; }
.vw-tip { margin: 0; padding: 0 18px 14px; text-align: center; font-size: .82rem; color: rgba(244, 241, 234, .66); }
.vw-cam { position: relative; overflow: hidden; background: #050A14; }
.vw-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vw-cam video.mirror { transform: scaleX(-1); }
.vw-piece { position: absolute; left: 50%; top: 50%; width: min(60vw, 360px); height: auto; transform-origin: center; user-select: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.vw-msg { position: absolute; inset: auto 16px 16px; margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, .6); font-size: .9rem; text-align: center; }
.vw-size { flex: 1 1 140px; max-width: 220px; }
.vw-size input { width: 100%; accent-color: var(--gold); }

/* isle place names: real text over the drawing, a numbered list on phones */
.pl-label { position: absolute; display: none; padding: .45cqw .8cqw; border: 1px solid rgba(196, 154, 108, .55); border-radius: 3px; background: rgba(0, 27, 61, .55); color: #F4F1EA; text-align: left; cursor: pointer; max-width: 20cqw; }
.pl-label b { display: block; font-family: var(--display); font-weight: var(--display-weight); font-size: max(11px, 1.45cqw); line-height: 1.25; }
.pl-label small { display: block; font-size: max(10px, 1cqw); line-height: 1.35; color: rgba(244, 241, 234, .75); }
.pl-label small:first-of-type { color: var(--gold); margin-top: .2cqw; }
.pl-label:hover b, .pl-label:focus-visible b { color: #FFE2BE; }
.isle-legend { list-style: none; margin: 14px 0 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.isle-legend button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 0; border: 0; background: none; color: var(--soft); text-align: left; font-size: .88rem; line-height: 1.3; cursor: pointer; }
.isle-legend button span { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--navy); font-size: .8rem; }
.isle-legend button[aria-pressed="true"] { color: var(--ink); }
.isle-legend button[aria-pressed="true"] span { background: #FFE2BE; }
@media (min-width: 700px) { .pl-label { display: block; } .isle-legend { display: none; } }

/* showcase: squared photo walls in a sideways scroll */
.cards.sq { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); }
.cards.sq::-webkit-scrollbar { display: none; }
.sq-panel { flex: 0 0 min(88vw, 980px); scroll-snap-align: start; display: grid; gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(120px, 15vw, 190px));
  grid-template-areas: "a b d d" "a c d d" "e e f g"; }
.sq-panel.ph { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 38vw) 44vw; grid-template-areas: "a b" "a c" "d d"; }
.sq-panel .card { position: relative; display: block; width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #0A1733; cursor: pointer; }
.sq-panel .card:nth-child(1) { grid-area: a; } .sq-panel .card:nth-child(2) { grid-area: b; } .sq-panel .card:nth-child(3) { grid-area: c; }
.sq-panel .card:nth-child(4) { grid-area: d; } .sq-panel .card:nth-child(5) { grid-area: e; } .sq-panel .card:nth-child(6) { grid-area: f; } .sq-panel .card:nth-child(7) { grid-area: g; }
.sq-panel .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sq-panel .card-t { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 22px 10px 8px; background: linear-gradient(to top, rgba(0, 18, 41, .82), rgba(0, 18, 41, 0)); text-align: left; contain: none; }
.sq-panel .card-t small { font-size: .7rem; color: var(--gold); }
.sq-panel .card-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: .85rem; line-height: 1.3; color: #F4F1EA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-panel .card:hover img { filter: brightness(1.05); }

/* AVALON Proud: switch between the photo wall and a timeline */
.view-sw { display: inline-flex; justify-self: start; gap: 0; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.view-sw button { min-height: 36px; padding: 4px 16px; border: 0; border-radius: 999px; background: none; color: var(--soft); cursor: pointer; font-size: .9rem; }
.view-sw button[aria-selected="true"] { background: var(--ink); color: var(--navy); }
.sc-time { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--line); display: grid; gap: 28px; }
.tl-year { position: relative; }
.tl-year::before { content: ''; position: absolute; left: -24px; top: .55em; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg, #001B3D); }
.tl-year h3 { font-size: 1.5rem; color: var(--gold); margin-bottom: 12px; }
.tl-year ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tl-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.tl-img img { display: block; width: 100%; height: auto; border-radius: 4px; }
.tl-t { display: grid; gap: 2px; }
.tl-t small { color: var(--accent); font-size: .8rem; }
.tl-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: 1.05rem; line-height: 1.35; }
.tl-t em { font-style: normal; color: var(--gold); font-size: .88rem; }
.tl-item:hover b { color: var(--accent); }
@media (min-width: 700px) { .tl-item { grid-template-columns: 150px minmax(0, 1fr); } .tl-year ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } }
.cards[hidden], .sc-time[hidden] { display: none; }

/* story pages: artist collaborations and CSR */
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 var(--gutter) 56px; }
.story > *, .story-body > * { min-width: 0; }
.story > .page-head { padding-inline: 0; }
.story-head h1 { font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.1; }
.story-head .kicker a { color: inherit; text-decoration: none; }
.story-sub { color: var(--gold); margin-top: 10px; }
.story-cover { margin: 0; }
.story-cover .frame { width: min(100%, calc(70svh * var(--r))); margin-inline: auto; padding: 0; border: 0; cursor: zoom-in; }
.story-body { display: grid; gap: 28px; }
.story-text { display: grid; gap: 22px; max-width: 70ch; }
.story-lede { font-family: var(--display); font-size: clamp(1.08rem, 4vw, 1.3rem); line-height: 1.6; text-align: justify; }
.story-text h2, .story-gal h2, .story-pcs h2, .story-links h2 { font-size: 1.3rem; color: var(--accent); margin-bottom: 10px; }
.story-text p { color: var(--soft); line-height: 1.8; }
.story-text section { display: grid; gap: 10px; }
.story-quote { margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--gold); }
.story-quote p { font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.story-quote cite { display: block; margin-top: 8px; color: var(--gold); font-style: normal; font-size: .9rem; }
.story-facts { margin: 0; display: grid; gap: 0; align-content: start; border-top: 1px solid var(--line); }
.story-facts div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.story-facts dt { color: var(--gold); font-size: .88rem; }
.story-facts dd { margin: 0; }
.story-gal .frame { padding: 0; border: 0; cursor: zoom-in; width: 100%; }
.story-grid { display: grid; gap: 18px; }
.story-card { display: grid; gap: 0; text-decoration: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sc-img img { display: block; width: 100%; height: auto; }
.sc-t { display: grid; gap: 4px; padding: 14px 16px 18px; }
.sc-t small { color: var(--gold); }
.sc-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: 1.25rem; }
.sc-t span { color: var(--soft); font-size: .92rem; }
.story-card:hover { border-color: var(--gold); }
.story .seg a { text-decoration: none; }
@media (min-width: 700px) { .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .story-body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; } .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* announcements */
.news-list { list-style: none; margin: 0; padding: 0 var(--gutter) 56px; display: grid; gap: 28px; max-width: 900px; }
.news-item { display: grid; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.news-img img { display: block; width: min(100%, 320px); height: auto; border-radius: 6px; }
.news-meta { color: var(--gold); font-size: .88rem; margin-bottom: 6px; }
.news-item h2 { font-size: 1.35rem; margin-bottom: 8px; }
.news-item p:not(.news-meta) { color: var(--soft); }
@media (min-width: 700px) { .news-item { grid-template-columns: 220px minmax(0, 1fr); } }

/* live bits */
.open-now { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--soft); }
.open-now::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(244, 241, 234, .4); }
.open-now.is-open { color: var(--ink); }
.open-now.is-open::before { background: #7FD39B; box-shadow: 0 0 0 4px rgba(127, 211, 155, .18); }
.shelf-types { margin-bottom: -8px; }
.live-q { display: block; margin: 6px 0 14px; }
.live-q input { width: 100%; min-height: 46px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; }
.live-q input:focus { outline: none; border-color: var(--gold); }

/* magazine logos under editorial photos, in the page's light ink */
.mag-logo { display: block; height: 22px; width: auto; max-width: 140px; margin: 2px 0 8px; filter: brightness(0) invert(.94); opacity: .9; }

/* press feedback on controls only; photos never move */
@media (prefers-reduced-motion: no-preference) {
  .arrow, .chips-row button, .view-sw button, .world-tabs button, .trip-tabs button, .at-index button, .tabbar a, .shelf-types button { transition: transform .12s cubic-bezier(.16, 1, .3, 1); }
  .btn:active, .arrow:active, .chips-row button:active, .view-sw button:active, .world-tabs button:active, .trip-tabs button:active, .at-index button:active, .tabbar a:active { transform: scale(.97); }
}
.co-form .req { color: var(--gold); font-weight: 400; }

/* Pieces page: scene shortcuts under the intro, then the five scenes, then every piece */
.scene-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 22px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter); }
.scene-jump::-webkit-scrollbar { display: none; }
.scene-jump a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 4px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .9rem; }
.scene-jump a:last-child { border-color: var(--accent); }
.cat-h { font-size: clamp(1.9rem, 7vw, 3rem); margin-bottom: 18px; }

/* Press page: one magazine page per year. The newest story leads across the page, the rest flow in columns. */
.pr-year { padding-top: 26px; }
.pr-year h2 { font-size: clamp(2.6rem, 11vw, 5rem); color: var(--accent); line-height: 1; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.pr-cols { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 44px; column-rule: 1px solid var(--line); }
.pr { break-inside: avoid; margin-bottom: 34px; }
.pr a { display: grid; gap: 12px; color: var(--ink); text-decoration: none; }
.pr-fig { margin: 0; }
.pr-fig img { display: block; width: 100%; height: auto; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pr-src { color: var(--accent); font-size: .86rem; }
.pr h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: 1.32rem; line-height: 1.3; }
.pr-sum { color: var(--soft); font-size: .95rem; line-height: 1.7; text-align: justify; hyphens: auto; }
.pr-go { font-size: .88rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.pr a:hover .pr-go, .pr a:focus-visible .pr-go { text-decoration-color: var(--accent); }
.pr.brief { padding: 18px 0 0; border-top: 1px solid var(--line); }
.pr.lead h3 { font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.2; }
html[data-lang="en"] .pr.lead .pr-sum::first-letter { float: left; font-family: 'Lustria', serif; font-size: 3.4em; line-height: .82; padding: 6px 8px 0 0; color: var(--accent); }
@media (min-width: 720px) {
  .pr-cols { columns: 2; }
  .pr.lead { column-span: all; margin-bottom: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
  .pr.lead a { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 36px; align-items: center; }
}
@media (min-width: 1100px) { .pr-cols { columns: 3; } }

/* Invisible Setting: where it began, the four steps in real photos, the film and the figures. Nothing moves by itself. */
.origin { display: grid; gap: 22px; }
.origin-fig { margin: 0; background: #fff; border-radius: 6px; overflow: hidden; }
.origin-fig img { display: block; width: 100%; height: auto; }
.origin-text { display: grid; gap: 14px; align-content: start; }
.origin-text h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.5rem, 6vw, 2.2rem); color: var(--gold); }
.origin-text p { color: var(--soft); text-align: justify; line-height: 1.75; }
.origin-moment { margin: 6px 0 0; display: grid; gap: 8px; }
.origin-moment img { display: block; width: 100%; height: auto; border-radius: 4px; }
.origin-moment figcaption, .film figcaption { color: var(--soft); font-size: .86rem; }
.how-real { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; counter-reset: step; }
.how-real::-webkit-scrollbar { display: none; }
.how-real li { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; display: grid; gap: 8px; align-content: start; counter-increment: step; }
.how-real img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.how-real b { font-family: var(--display); font-weight: var(--display-weight); font-size: 1.3rem; color: var(--gold); }
.how-real b::before { content: counter(step) '  '; color: var(--soft); font-size: .8em; }
.how-real p { color: var(--soft); font-size: .92rem; line-height: 1.6; }
.film-row { display: grid; gap: 28px; }
.film { margin: 0; display: grid; gap: 8px; justify-self: center; width: min(100%, 290px); }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 6px; background: #050A14; }
.stats.run .bar em { transition: none; }
@media (min-width: 760px) {
  .origin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .how-real { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .film-row { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: 48px; }
}

/* the three prides of AVALON in one line */
.proud-line { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.15rem, 4.6vw, 1.7rem); color: var(--gold); line-height: 1.5; padding-top: 18px; border-top: 1px solid var(--gold); }
/* home press: three stories set as a magazine column */
.pr-home { margin-top: 8px; }
@media (min-width: 720px) { .pr-home { columns: 3; } }

/* the Princess Petal film: a still until tapped, then the YouTube player */
.film.yt { width: 100%; }
.yt-play, .film.yt iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; overflow: hidden; background: #050A14; padding: 0; cursor: pointer; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(0, 37, 84, .82); border: 1px solid var(--gold); }
.yt-btn::after { content: ''; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--gold); }
.yt-play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (min-width: 760px) { .film-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

/* welcome: the name, the film, thirty years */
.house { display: grid; gap: 28px; }
.house h2 { font-size: clamp(3rem, 15vw, 6rem); letter-spacing: .04em; line-height: 1; }
.house .house-lede { font-family: var(--display); font-size: clamp(1.15rem, 4.6vw, 1.6rem); line-height: 1.5; max-width: 34ch; }
.house-film { width: 100%; }
.years30 { display: grid; gap: 12px; border-top: 1px solid var(--gold); padding-top: 18px; }
.y30-n { display: grid; gap: 4px; }
.y30-n span { color: var(--soft); font-size: .95rem; }
.y30-n b { font-family: var(--display); font-weight: var(--display-weight); color: var(--gold); font-size: clamp(2.6rem, 12vw, 4.4rem); line-height: 1; }
.years30 p:last-child { color: var(--soft); text-align: justify; line-height: 1.75; max-width: 60ch; }
.craft-head p + p { margin-top: 12px; }
@media (min-width: 900px) {
  .house { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; column-gap: 56px; }
  .years30 { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 56px; align-items: end; }
}

/* Invisible Setting, compact: story beside one swipe strip, steps, film, one row of figures */
.origin { display: grid; gap: 16px; }
.origin-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
.origin-strip::-webkit-scrollbar { display: none; }
.origin-strip figure { flex: none; margin: 0; scroll-snap-align: start; display: grid; gap: 6px; }
.origin-strip img { display: block; height: min(58vw, 300px); width: auto; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.origin-strip figcaption { color: var(--soft); font-size: .84rem; }
.film-row { display: grid; gap: 22px; }
.stats-row { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--gold); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stats-row li { display: grid; gap: 4px; align-content: start; }
.stats-row b { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: clamp(1.9rem, 9vw, 3rem); line-height: 1; }
.stats-row b small { font-size: .4em; margin-left: 4px; color: var(--ink); }
.stats-row span { color: var(--soft); font-size: .8rem; line-height: 1.45; }
@media (min-width: 760px) {
  .origin { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; align-items: center; }
  .origin-strip { margin: 0; padding: 0 0 4px; }
  .film-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 40px; }
  .stats-row { grid-template-columns: 1fr; gap: 18px; }
}
.stats-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.stats-row li span + span { padding-top: 6px; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .stats-row { grid-template-columns: 1fr; } }

/* the three prides: one row, "Proud to" small above each verb, the verbs large in gold */
ul.proud-line { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold); font-size: inherit; line-height: 1; }
ul.proud-line li { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 0 6px; }
ul.proud-line li + li { border-left: 1px solid var(--line); }
ul.proud-line small { font-family: var(--body); font-size: .78rem; letter-spacing: .04em; color: var(--soft); }
ul.proud-line b { font-family: var(--display); font-weight: var(--display-weight); color: var(--gold); font-size: clamp(1.7rem, 8.4vw, 3.2rem); line-height: 1.05; }
html[data-lang="th"] ul.proud-line b { font-size: clamp(1.3rem, 6.2vw, 2.6rem); }

/* Invisible Setting text: one display line, one short sentence, set ragged-right so a narrow column has no rivers */
.craft-head .craft-lede { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.25rem, 5.2vw, 1.8rem); line-height: 1.35; color: var(--ink); margin-top: 12px; }
.craft-head p:not(.kicker):not(.craft-lede) { color: var(--soft); max-width: 52ch; }
.origin-text p { text-align: left; max-width: 52ch; }

/* photo wall: columns of uncropped tiles, each in its photo's own shape */
.sq-panel.mason { display: block; columns: 2; column-gap: 8px; align-self: start; }
.sq-panel.mason .card { display: block; width: 100%; aspect-ratio: var(--r); margin: 0 0 8px; break-inside: avoid; grid-area: auto; }
.sq-panel.mason .card img { object-fit: cover; }
.cards.sq { align-items: flex-start; }
@media (min-width: 700px) { .sq-panel.mason { columns: 3; } }

/* artists: two compact rows, photo beside name; the full story is one tap away */
.artist-cards.compact { display: grid; gap: 12px; margin: 0; padding: 0; overflow: visible; }
.artist-cards.compact .artist { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; background: none; width: auto; max-width: none; flex: none; transition: border-color .25s; }
.artist-cards.compact .artist:hover, .artist-cards.compact .artist:focus-visible { border-color: var(--gold); }
.artist-cards.compact img { width: 96px; height: 120px; margin: 0; object-fit: cover; object-position: 50% 30%; border-radius: 4px; }
.artist-cards.compact span { display: grid; gap: 4px; margin: 0; min-width: 0; }
.artist-cards.compact small { text-align: left; }
.artist-cards.compact b { font-family: var(--display); font-weight: var(--display-weight); font-size: 1.15rem; }
.artist-cards.compact small { color: var(--soft); font-size: .85rem; line-height: 1.45; }
.artist-cards.compact em { font-style: normal; color: var(--gold); font-size: .85rem; margin-top: 2px; }
@media (min-width: 760px) { .artist-cards.compact { grid-template-columns: 1fr 1fr; } }

/* home press as an open book: swipe from spread to spread */
.pr-book { list-style: none; margin: 8px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 10px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.pr-book::-webkit-scrollbar { display: none; }
.pr-book .spread { flex: 0 0 min(100%, 860px); scroll-snap-align: start; }
.pr-book .spread a { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; color: var(--ink); text-decoration: none; border-radius: 4px 4px 4px 4px; overflow: hidden; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
.pr-book .pg { position: relative; padding: 14px; background: #0E2350; }
.pr-book .pg-l { display: grid; place-items: center; background: #0B1D44; box-shadow: inset -18px 0 22px -16px rgba(0, 0, 0, .65); }
.pr-book .pg-r { display: flex; flex-direction: column; gap: 8px; box-shadow: inset 18px 0 22px -16px rgba(0, 0, 0, .55); border-left: 1px solid rgba(0, 0, 0, .35); }
.pr-book .pg-l img { max-width: 100%; max-height: 270px; width: auto; height: auto; border-radius: 2px; }
.pr-book .pr-src { color: var(--gold); font-size: .72rem; }
.pr-book h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(.98rem, 4vw, 1.4rem); line-height: 1.3; }
.pr-book .pr-sum { color: var(--soft); font-size: .8rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pr-book .pg-n { margin-top: auto; align-self: flex-end; color: var(--soft); font-size: .7rem; }
@media (min-width: 760px) { .pr-book .spread a { min-height: 380px; } .pr-book .pg { padding: 26px; } .pr-book .pg-l img { max-height: 330px; } .pr-book .pr-sum { font-size: .92rem; -webkit-line-clamp: 8; } }

/* ring size guide on ring pages */
.size-guide summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.size-guide summary::-webkit-details-marker { display: none; }
.size-guide summary::after { content: '+'; color: var(--gold); font-size: 1.4rem; }
.size-guide details[open] summary::after { content: '\2212'; }
.size-guide summary h2 { margin: 0; }
.size-guide details > * + * { margin-top: 14px; }
.size-t { width: 100%; border-collapse: collapse; font-size: .92rem; }
.size-t th { text-align: left; color: var(--gold); font-weight: 400; padding: 6px 4px; border-bottom: 1px solid var(--gold); }
.size-t td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.size-t tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.size-how { padding-left: 1.2em; color: var(--soft); display: grid; gap: 6px; font-size: .92rem; }
.size-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.size-calc label { display: grid; gap: 6px; font-size: .85rem; color: var(--soft); }
.size-calc select, .size-calc input { min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink); padding: 8px 12px; font: inherit; }
.size-calc select option { color: #0A1733; }
.size-out { grid-column: 1 / -1; color: var(--gold); font-family: var(--display); font-size: 1.15rem; min-height: 1.4em; }

/* product: price with its own currency switch, icons on the two actions */
.pd-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-price { font-size: 1.3rem; }
.pd-cur-sel { min-height: 36px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); padding: 4px 30px 4px 14px; font: inherit; font-size: .88rem; cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.pd-cur-sel option { color: #0A1733; }
.pd-cta .btn { gap: 10px; }
.pd-cta .btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; flex: none; }

/* story text set like a magazine: linked names, italic places, a drop cap to open */
.rl { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rl:hover, .rl:focus-visible { color: var(--gold); text-decoration-color: var(--gold); }
.rl b, .pd-story b, .post-body b, .story-body b, .at-text b { font-weight: 500; color: var(--ink); }
.rl-g { text-decoration-style: dotted; }
.pd-story em, .post-body em, .story-body em, .at-text em, .rl i { font-style: italic; }
html[data-lang="en"] .pd-story p:first-child::first-letter, html[data-lang="en"] .post-body > p:first-of-type::first-letter, html[data-lang="en"] .story-lede::first-letter {
  float: left; font-family: 'Lustria', serif; font-size: 3.3em; line-height: .85; padding: 6px 8px 0 0; color: var(--gold); }

/* the type chips above the home shelf must not widen the page */
.pieces { overflow-x: clip; }

/* order page: where the order is now */
.order-track { display: grid; gap: 22px; padding-top: 0; }
.ot-no small { display: block; color: var(--soft); margin-top: 4px; }
.ot-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ot-flow li { position: relative; padding: 0 0 18px 30px; color: var(--soft); }
.ot-flow li::before { content: ''; position: absolute; left: 6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); }
.ot-flow li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 19px; bottom: 0; width: 1px; background: var(--line); }
.ot-flow li.done { color: var(--ink); } .ot-flow li.done::before { background: var(--gold); border-color: var(--gold); }
.ot-flow li.now { color: var(--gold); font-family: var(--display); font-size: 1.15rem; } .ot-flow li.now::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent); }
.ot-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ot-items li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.co-track { display: grid; gap: 8px; justify-items: start; } .co-track small { color: var(--soft); }
/* breadcrumb: separator sits on the same line as the words */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.crumbs span { display: inline; line-height: inherit; height: auto; }

/* Try it on floats on the photo, bottom right */
.pd-stage { position: relative; }
.pd-try { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px 6px 12px; border-radius: 999px; border: 1px solid rgba(196, 154, 108, .8); background: rgba(0, 27, 61, .82); color: #F4F1EA; font: inherit; font-size: .85rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); }
.pd-try svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.pd-try:hover, .pd-try:focus-visible { background: rgba(0, 27, 61, .95); border-color: var(--gold); }
@media (prefers-reduced-transparency: reduce) { .pd-try { background: #001B3D; backdrop-filter: none; } }

/* hero headline set editorially: two lines, the second stepped in */
.cap-t span { display: block; }
.cap-t span + span { padding-left: 1.3em; }

/* the welcome carries the real AVALON logo */
.house h2.house-logo { line-height: 0; }
.house-logo img { display: block; width: min(78vw, 420px); height: auto; }
.kicker + h2.house-logo::before { display: none; }

.h-link { color: inherit; text-decoration: none; }
.h-link:hover { color: var(--gold); }
.h-more a { color: var(--gold); font-size: .9rem; text-underline-offset: 4px; }
.y30-go { justify-self: start; margin-top: 4px; }

/* the painting behind the piece */
.pd-insp figure { margin: 0; display: grid; gap: 8px; }
.pd-insp .frame { width: min(100%, 420px); aspect-ratio: var(--r); border: 0; padding: 0; cursor: zoom-in; background: none; }
.pd-insp figcaption { color: var(--soft); font-size: .86rem; }

.tl-none { display: block; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; background: url(../assets/brand/crown-gold.png) center / 34% no-repeat, color-mix(in srgb, var(--ink) 5%, transparent); opacity: .7; }

/* timeline: a folded year per row, one open at a time; every photo in the same square */
.tl-year summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 4px 0; }
.tl-year summary::-webkit-details-marker { display: none; }
.tl-year summary h3 { margin: 0; }
.tl-year summary small { color: var(--soft); font-size: .85rem; }
.tl-year summary::after { content: '+'; margin-left: auto; color: var(--gold); font-size: 1.4rem; line-height: 1; }
.tl-year details[open] summary::after { content: '\2212'; }
.tl-year details[open] summary { margin-bottom: 12px; }
.sc-time { gap: 14px; }
.tl-img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; }
.tl-img img { width: 100%; height: 100%; object-fit: cover; }

/* floors show a real photo of the room */
.floor-img { margin: 0 0 10px; }
.floor-img img { display: block; width: 100%; max-width: 420px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.floors-in { align-items: start; }
/* factory: OEM, ODM and B2B */
.factory { display: grid; gap: 12px; padding: 22px 0; border-top: 1px solid var(--line); }
.factory h3 { color: var(--gold); font-weight: var(--display-weight); }
.factory p { color: var(--soft); max-width: 62ch; line-height: 1.7; }
.factory-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.factory-tags li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; }
.factory-go { display: flex; flex-wrap: wrap; gap: 10px; }
.factory-go .btn { gap: 8px; }
.factory-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

/* each headline line stays on one line: the size follows the screen and the longer line */
.cap-t:has(span) { max-width: none; font-size: clamp(1.7rem, 7.4vw, 4.6rem); }
.cap-t span { white-space: nowrap; }
.cap-t span + span { padding-left: .9em; }
[data-lang="th"] .cap-t:has(span) { font-size: clamp(1.5rem, 6.6vw, 3.8rem); }

/* hero set like a magazine cover: issue number and rule, roman first line, gold italic second line */
.cap-k { display: flex; align-items: center; gap: 12px; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }
.cap-k::before { content: ''; order: 1; width: 44px; height: 1px; background: var(--gold); }
.cap-k .cap-no { order: 0; font-family: 'Playfair Display', var(--display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.35em; }
.cap-k span:last-child { order: 2; }
html[data-lang="en"] .cap-t span + span { font-family: 'Playfair Display', var(--display); font-style: italic; font-weight: 400; color: #E7C79F; letter-spacing: -.01em; }
.cap-t span:first-child { letter-spacing: -.025em; }
.cap-t { text-shadow: 0 2px 24px rgba(0, 10, 30, .45); }
.cap-b { margin-top: 10px; }
.cap-t:has(span) { font-size: clamp(1.9rem, 8.6vw, 5rem); }
.cap-k { letter-spacing: .16em; }
.house-vision { color: var(--soft); border-left: 2px solid var(--gold); padding-left: 14px; margin-top: 14px; max-width: 52ch; }
.house-quote { margin: 16px 0 0; font-family: 'Playfair Display', var(--display); font-style: italic; color: #E7C79F; font-size: clamp(1.15rem, 4.6vw, 1.6rem); line-height: 1.4; max-width: 30ch; }

/* no rule between the issue number and the kicker */
.cap-k::before { content: none; }


/* =================== artist pages: a quiet profile, as on the old site =================== */

.ar-head { text-align: center; justify-items: center; }
.ar-head h1 { font-size: clamp(1.9rem, 7vw, 3rem); letter-spacing: .02em; }
.ar-profile { display: grid; gap: 24px; align-items: start; }
.ar-photo { margin: 0; }
.ar-photo .frame { width: min(100%, calc(62svh * var(--r))); margin-inline: auto; padding: 0; border: 0; cursor: zoom-in; }
.ar-facts { margin: 0; display: grid; border-top: 1px solid var(--line); align-content: start; }
.ar-facts div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ar-facts dt { color: var(--gold); font-size: .84rem; letter-spacing: .02em; }
.ar-facts dd { margin: 0; font-size: .95rem; text-align: left; }
@media (min-width: 900px) { .ar-profile { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; } .ar-photo .frame { width: 100%; } }
.ar-lists { display: grid; gap: 16px; }
.ar-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ar-tabs::-webkit-scrollbar { display: none; }
.ar-tabs button { flex: none; }
.ar-list { list-style: none; margin: 0; padding: 0; display: grid; columns: auto; }
.ar-list li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--soft); font-size: .95rem; line-height: 1.5; }
@media (min-width: 900px) { .ar-list { display: block; columns: 2; column-gap: 40px; } .ar-list li { break-inside: avoid; } }
.ar-story { display: grid; gap: 14px; max-width: 70ch; margin-inline: auto; }
.ar-story h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); text-align: center; margin-bottom: 6px; }
.ar-story h3 { font-size: 1.1rem; color: var(--gold); margin-top: 14px; }
.ar-story p { color: var(--soft); line-height: 1.85; }
.story-card .sc-img img { aspect-ratio: 4 / 5; width: 100%; height: auto; object-fit: cover; object-position: 50% 25%; }

/* =================== isle panel: an editorial spread, no prices =================== */

.ip-ed { display: grid; gap: 18px; }
.ip-ed .frame { display: block; padding: 0; border: 0; border-radius: 0; background: #F7F5F0; }
.ip-ed .frame.free { aspect-ratio: var(--r); }
.ip-ed .frame img { width: 100%; height: 100%; object-fit: contain; }
.ip-lead { margin: 0; }
.ip-lead .frame { background: none; max-height: 78svh; width: min(100%, calc(78svh * var(--r, .8))); margin-inline: auto; }
.ip-lead .frame img { object-fit: cover; }
.ip-ed .ip-feel { font-family: var(--display); font-style: italic; font-size: clamp(1.35rem, 5.6vw, 1.9rem); line-height: 1.3; text-align: left; color: var(--ink); margin: 0; }
.ip-mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 3fr 2fr; gap: 10px; align-items: start; }
.ip-mosaic li.big { grid-row: span 2; }
.ip-mosaic a { display: grid; gap: 6px; text-decoration: none; }
.ip-mosaic i { font-family: var(--display); font-size: .92rem; color: var(--soft); line-height: 1.3; }
.ip-mosaic.ip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ip-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.ip-more figure { margin: 0; }
.ip-more .frame { background: none; }
.ip-more .frame img { object-fit: cover; }

/* =================== product: the story pages as a reel =================== */

.pd-reel { display: grid; gap: 10px; margin-top: 18px; }
.pd-reel p { color: var(--soft); font-size: .88rem; text-align: left; }
.pd-reel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-reel-row button { display: grid; gap: 8px; align-content: start; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.pd-reel-row button:active { transform: scale(.97); }
.pd-reel-row .rc-img { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #0B1D44; }
.pd-reel-row .rc-img img { width: 100%; height: 100%; object-fit: contain; }
.pd-reel-row .on-white .rc-img { background: #fff; }
.pd-reel-row .rc-t { display: flex; align-items: center; gap: 8px; }
.pd-reel-row .rc-t span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: .72rem; display: grid; place-items: center; }
.pd-reel-row b { font-family: var(--display); font-weight: 400; font-size: .9rem; line-height: 1.25; }

.reel-dlg { inset: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #07122b; color: #F4F1EA; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.reel-dlg::backdrop { background: #07122b; }
.rl-page { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; }
.rl-page > img { max-width: 100%; max-height: 100%; width: auto; height: 100%; aspect-ratio: 9 / 16; object-fit: contain; animation: rl-drift 7.5s ease-out both; }
.rl-top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top)) 12px 18px; background: linear-gradient(rgba(7, 18, 43, .72), rgba(7, 18, 43, 0)); }
.rl-bars { display: flex; gap: 4px; }
.rl-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(244, 241, 234, .3); background-image: linear-gradient(#F4F1EA, #F4F1EA); background-repeat: no-repeat; background-size: 0 100%; }
.rl-bars i.done { background-size: 100% 100%; }
.rl-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rl-title { font-family: var(--display); font-weight: 400; font-size: 1rem; }
.rl-count { font-size: .8rem; opacity: .75; margin-right: auto; }
.rl-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244, 241, 234, .3); background: rgba(7, 18, 43, .5); color: inherit; display: grid; place-items: center; cursor: pointer; }
.rl-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rl-prev, .rl-next { position: absolute; z-index: 2; top: 0; bottom: 0; border: 0; background: none; cursor: pointer; }
.rl-prev { left: 0; width: 34%; }
.rl-next { right: 0; width: 66%; }
.reel-dlg.is-held .rl-top { opacity: 0; transition: opacity .25s; }
@keyframes rl-fill { to { background-size: 100% 100%; } }
@keyframes rl-drift { from { transform: scale(1.06); opacity: 0; } 12% { opacity: 1; } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rl-page > img { animation: none; } }

/* =================== story pages (drawn live, brand type, 2026 logo) =================== */

.mw { position: relative; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; overflow: hidden; container-type: size; display: grid; place-items: center; background: #07122b; }
.mw-bg { position: absolute; inset: -6%; background: center / cover no-repeat; filter: blur(3px) saturate(1.05) brightness(.82); animation: mw-pan 14s ease-in-out infinite alternate; }
@keyframes mw-pan { from { transform: scale(1.04) translate(-1.5%, -1%); } to { transform: scale(1.12) translate(1.5%, 1%); } }
.mw-card { position: relative; width: 84cqw; max-height: 86cqh; display: grid; justify-items: center; align-content: start; gap: 1.6cqh; padding: 7cqw 6cqw 6cqw; background: #FFFFFF; color: #0C1C40; border-radius: 6cqw; box-shadow: 0 3cqw 10cqw rgba(4, 10, 26, .45); text-align: left; overflow: hidden; }
.mw-logo { width: 34cqw; height: auto; margin-bottom: .6cqh; }
.mw-art { margin: 0; width: 100%; border-radius: 4cqw; overflow: hidden; aspect-ratio: 4 / 5; max-height: 44cqh; }
.mw-art img { width: 100%; height: 100%; object-fit: cover; animation: mw-zoom 9s ease-out both; }
@keyframes mw-zoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.mw-series { justify-self: start; font-family: 'Poppins', 'Kanit', sans-serif; font-size: 3cqw; letter-spacing: .14em; color: #9B7B4E; margin: 0; }
.mw-title { justify-self: start; font-family: var(--display); font-weight: 400; font-size: 8.2cqw; line-height: 1.08; margin: -1cqh 0 0; color: #0C1C40; }
.mw-lede { justify-self: start; width: 52%; font-size: 3.1cqw; line-height: 1.55; color: #3A4666; margin: 0; text-align: left; }
.mw-piece { position: absolute; right: 3cqw; bottom: 3cqw; width: 44cqw; height: auto; mix-blend-mode: multiply; animation: mw-float 6s ease-in-out infinite alternate; }
@keyframes mw-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-1.2cqh) rotate(1deg); } }
.mw-1 .mw-card::after { content: ''; position: absolute; right: 3cqw; bottom: 3cqw; width: 44cqw; height: 26cqw; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%) no-repeat; background-size: 250% 100%; mix-blend-mode: soft-light; animation: mw-gleam 4.5s 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes mw-gleam { from { background-position: 120% 0; } 45%, to { background-position: -120% 0; } }
.mw-2 .mw-card { gap: 1.2cqh; }
.mw-text { display: grid; gap: 1.4cqh; overflow: auto; max-height: 64cqh; padding-right: 1cqw; }
.mw-text p { font-size: 3.3cqw; line-height: 1.68; color: #26314F; margin: 0; text-align: justify; hyphens: auto; }
html[data-lang="th"] .mw-text p { text-justify: inter-character; hyphens: manual; }
.mw-3 .mw-piece { position: relative; right: auto; bottom: auto; width: 60cqw; margin: -1cqh 0; }
.mw-k { justify-self: start; font-size: 3cqw; letter-spacing: .08em; color: #9B7B4E; margin: 1cqh 0 0; }
.mw-gems { justify-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2cqw; }
.mw-gems span { display: grid; justify-items: center; gap: .6cqh; }
.mw-gems svg { width: 8cqw; height: 8cqw; }
.mw-gems small { font-size: 2.5cqw; line-height: 1.3; text-align: center; color: #3A4666; }
.mw-sizes { justify-self: start; display: flex; align-items: center; gap: 3cqw; font-family: var(--display); font-size: 4.6cqw; margin: 0; }
.mw-sizes i { width: 1px; height: 3.4cqw; background: #C9CCD6; }
.mw-go { justify-self: stretch; position: relative; z-index: 4; margin-top: 1cqh; }
.mw-btn { display: flex; align-items: center; justify-content: center; gap: 2cqw; min-height: 44px; padding: 2.6cqw; border-radius: 99px; background: #0C1C40; color: #F4F1EA; text-decoration: none; font-size: 3.4cqw; }
.mw-btn svg { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: currentColor; stroke-width: 1.6; }
.mw-social { position: relative; z-index: 4; justify-self: stretch; display: flex; align-items: center; gap: 3cqw; margin: .6cqh 0 0; color: #3A4666; font-size: 2.9cqw; }
.mw-social a { display: grid; place-items: center; width: 44px; height: 44px; color: #0C1C40; }
.mw-social svg { width: 5cqw; height: 5cqw; fill: none; stroke: currentColor; stroke-width: 1.5; }
.mw-social span { margin-left: auto; }
.rl-page .mw { animation: mw-in .5s ease-out both; }
@keyframes mw-in { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mw-bg, .mw-art img, .mw-piece, .mw-1 .mw-card::after, .rl-page .mw { animation: none; } }

/* product: ring size and stone colour, from the old site */
.pd-opts { display: grid; gap: 14px; margin: 4px 0 18px; }
.pd-opts fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-opts legend { width: 100%; padding: 0; margin-bottom: 8px; color: var(--soft); font-size: .86rem; }
.pd-opts label { position: relative; cursor: pointer; }
.pd-opts input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pd-opts label span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 99px; font-size: .92rem; transition: border-color .2s, background .2s; }
.pd-opts label span svg { width: 22px; height: 22px; }
.pd-opts input:checked + span { border-color: var(--gold); background: rgba(197, 160, 101, .14); color: var(--ink); }
.pd-opts input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.pd-reel-row button.on-white { background-position: center 30%; }

/* hero kicker: always one line, the type shrinks on narrow phones instead of wrapping */
.cap-k { white-space: nowrap; flex-wrap: nowrap; text-align: left; max-width: 100%; }
.cap-k span:last-child { font-size: min(1em, 2.9vw); letter-spacing: min(.16em, .5vw); overflow: hidden; text-overflow: clip; }

.pd-custom { display: block; width: 100%; margin-top: 4px; }
.pd-custom input, .pd-note textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(244, 241, 234, .04); color: var(--ink); font: inherit; font-size: .95rem; }
.pd-note { display: grid; gap: 8px; }
.pd-note > span { color: var(--soft); font-size: .86rem; }
.pd-note small { opacity: .7; margin-left: 4px; }
.pd-note textarea { resize: vertical; line-height: 1.5; }
.pd-custom input:focus, .pd-note textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }

/* =================== the isle as a landscape book: one scene per spread =================== */

.isle-panel { overflow: visible; padding: 0; }
.bk { position: relative; aspect-ratio: 3 / 2; perspective: 2400px; outline: none; touch-action: pan-y; margin-inline: calc(var(--gutter) * -.5); container-type: inline-size;
  }
/* the shadow sits on its own layer under the pages: a filter on the book would repaint every frame of a turn */
.bk::before { content: ''; position: absolute; inset: 2% 1% 0; border-radius: 4px; box-shadow: 0 22px 34px -6px rgba(2, 8, 24, .6); pointer-events: none; }
.bk:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.bk-base, .bk-leaf { position: absolute; top: 0; bottom: 0; width: 50%; }
.bk-base-l { left: 0; }
.bk-base-r, .bk-leaf { left: 50%; }
.bk-leaf { transform-origin: left center; transform-style: preserve-3d; z-index: var(--zr);
  will-change: transform; backface-visibility: hidden;
  /* a symmetric curve: the leaf stands on its edge exactly halfway, which is when it changes stack */
  transition: transform .9s cubic-bezier(.62, .02, .38, .98) var(--delay, 0s), z-index 0s calc(var(--delay, 0s) + .45s); }
.bk-leaf.turned { transform: rotateY(-180deg); z-index: var(--zl); }
.bk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.1px); }
.bk-back { transform: rotateY(180deg); }
/* the page darkens a little as it lifts, and a soft light runs across it */
.bk-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease var(--delay, 0s); }
.bk-front::after { background: linear-gradient(90deg, rgba(12, 28, 64, .28), rgba(255, 255, 255, .0) 55%, rgba(12, 28, 64, .12)); }
.bk-back::after { background: linear-gradient(270deg, rgba(12, 28, 64, .28), transparent 55%); }
.bk-leaf.turning .bk-face::after { opacity: 1; }
.bk-spine { position: absolute; z-index: 40; left: 50%; top: 0; bottom: 0; width: 7%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(12, 28, 64, .14) 42%, rgba(12, 28, 64, .22) 50%, rgba(12, 28, 64, .14) 58%, transparent); }

.bk-pg { position: absolute; inset: 0; overflow: hidden; background: #FFFFFF; color: #0C1C40; }
.bk-l { border-radius: 4px 0 0 4px; display: grid; place-items: center; padding: 7%; }
.bk-l img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bk-l.is-photo { padding: 0; }
.bk-l.is-photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.bk-n { position: absolute; left: 5%; bottom: 4%; font-family: 'Playfair Display', var(--display); font-style: italic; font-size: 7cqw; line-height: 1; color: #FFFFFF; mix-blend-mode: difference; opacity: .9; }
.bk-l:not(.is-photo) .bk-n { color: #C5A065; mix-blend-mode: normal; }
.bk-r { border-radius: 0 4px 4px 0; display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: 1.1cqw; padding: 4.2cqw 4cqw 3cqw 4.6cqw; }
.bk-folio { display: flex; justify-content: space-between; gap: 2cqw; font-size: max(8px, 1.55cqw); letter-spacing: .14em; text-transform: uppercase; color: #9B7B4E; padding-bottom: 1cqw; border-bottom: 1px solid #0C1C40; }
.bk-folio span:first-child { font-family: 'Playfair Display', var(--display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.3em; color: #0C1C40; }
.bk-folio span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-title { font-family: var(--display); font-weight: 400; font-size: 5.4cqw; line-height: .98; letter-spacing: -.01em; margin: 1.4cqw 0 0; color: #0C1C40; }
.bk-feel { font-family: 'Playfair Display', var(--display); font-style: italic; font-size: 2.3cqw; line-height: 1.3; color: #9B7B4E; margin: 0; text-align: left; }
.bk-pcs { list-style: none; margin: 0; padding: 0; align-self: end; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; }
.bk-pcs a { display: grid; gap: .6cqw; text-decoration: none; color: inherit; }
.bk-th { display: grid; place-items: center; aspect-ratio: 1; background: #FFFFFF; border-top: 1px solid #E4E1DA; }
.bk-th img { max-width: 92%; max-height: 92%; object-fit: contain; }
.bk-pcs i { font-family: var(--display); font-size: max(8px, 1.5cqw); line-height: 1.2; color: #3A4666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-foot { display: flex; justify-content: space-between; align-items: center; font-size: max(9px, 1.55cqw); letter-spacing: .08em; color: #3A4666; border-top: 1px solid #E4E1DA; padding-top: .8cqw; }
.bk-foot a { color: #0C1C40; text-decoration: none; border-bottom: 1px solid #C5A065; min-height: 32px; display: inline-flex; align-items: center; }
.bk-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.bk-nav > button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.bk-nav > button:disabled { opacity: .3; cursor: default; }
.bk-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bk-dots { display: flex; gap: 6px; }
.bk-dots button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--soft); font-family: var(--display); cursor: pointer; }
.bk-dots button[aria-current="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy); }
@media (max-width: 699px) { .bk { margin-inline: calc(var(--gutter) * -1 + 6px); } }
@media (prefers-reduced-motion: reduce) { .bk-leaf { transition: none; } .bk-face::after { transition: none; } }
.cards.sq { transition: height .35s cubic-bezier(.16, 1, .3, 1); overflow-y: hidden; }
@media (prefers-reduced-motion: reduce) { .cards.sq { transition: none; } }
.bk-r { grid-template-columns: minmax(0, 1fr); }
.bk-folio span { min-width: 0; }
.bk-folio span:first-child { flex: none; }

/* hero: the magazine or event behind each slide, set like a masthead above the kicker */
.cap-logo { margin: 0; display: flex; align-items: center; }
.cap-logo img { display: block; height: 30px; width: auto; }
.cap-logo-mono img { filter: brightness(0) invert(1); opacity: .95; }
.cap-logo-badge img { height: 46px; padding: 6px 10px; background: #FFFFFF; border-radius: 6px; }
.cap-logo-type span { font-family: 'Playfair Display', var(--display); font-style: italic; font-size: 1.05rem; color: #F4F1EA; padding: 6px 12px; border: 1px solid rgba(244, 241, 234, .6); border-radius: 2px; letter-spacing: .02em; }
@media (min-width: 700px) { .cap-logo img { height: 40px; } .cap-logo-badge img { height: 58px; } }

/* home: long text shows two lines until the visitor asks for more */
body[data-page="home"] .fold { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
body[data-page="home"] .fold.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.fold-more { justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--gold); font: inherit; font-size: .9rem; cursor: pointer; }
.fold-more::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.fold-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
body[data-page="home"] main > section h2 { cursor: pointer; }
/* right page: two campaign visuals and a credit line, like a fashion spread */
.bk-r { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
.bk-vis { min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2cqw; margin-top: .6cqw; }
.bk-vis figure { margin: 0; min-height: 0; overflow: hidden; background: #F4F1EA; }
.bk-vis img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.bk-vis figure:nth-child(2) { margin-top: 3cqw; }
.bk-credit { margin: 0; font-size: max(8px, 1.45cqw); line-height: 1.45; color: #3A4666; text-align: left; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bk-credit span { letter-spacing: .14em; text-transform: uppercase; color: #9B7B4E; margin-right: .4em; }
.bk-credit a { color: #0C1C40; font-family: var(--display); font-style: italic; text-decoration: none; border-bottom: 1px solid rgba(197, 160, 101, .6); }
.bk-l.is-photo img { object-position: 50% 28%; }

/* press book: every spread the same size (height follows the tallest, text clamped) */
.pr-book { align-items: stretch; }
.pr-book .spread { display: flex; }
.pr-book .spread a { flex: 1; height: 100%; }
.pr-book h3 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* partner logos float on the top left corner of a photo wall card */
.card-logos { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.card-logos { gap: 10px; }
/* logos keep their own colours, no box: a black drop shadow, over a dark band that fades down from the card's top edge */
.card-logos img { position: static !important; width: auto !important; height: 34px !important; max-width: min(132px, 46%); object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)) drop-shadow(0 0 8px rgba(0, 0, 0, .5)); }
.sq-panel .card:has(.card-logos)::before, .sc-row .card:has(.card-logos)::before { content: ''; position: absolute; inset: 0 0 auto; height: 38%; max-height: 130px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 12, 32, .78), rgba(4, 12, 32, .45) 45%, rgba(4, 12, 32, 0)); }

/* photo wall by category: one row per category, every tile the same square */
#showcase .cards.sq, .showcase .cards.sq { display: grid; gap: 30px; height: auto !important; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 4px 0 0; }
.sc-gh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-family: var(--display); font-weight: var(--display-weight); font-size: 1.25rem; color: var(--ink); }
.sc-gh small { font-family: var(--body); font-size: .8rem; color: var(--gold); }
.sc-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); }
.sc-row::-webkit-scrollbar { display: none; }
.sc-row .card-t { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 2px; padding: 34px 12px 10px; background: linear-gradient(to top, rgba(0, 18, 41, .86), rgba(0, 18, 41, 0)); text-align: left; contain: none; }
.sc-row .card-t small { font-size: .72rem; color: var(--gold); }
.sc-row .card-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: .92rem; line-height: 1.3; color: #F4F1EA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-row .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the brand line, woven in: once in every footer, once above each product's story */
.visit .slogan { grid-column: 1 / -1; margin: 18px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--display); font-weight: var(--display-weight); font-style: italic; font-size: clamp(1.3rem, 4.4vw, 2rem); line-height: 1.25; color: var(--gold); text-align: left; }
.pd-kick { margin: 0 0 4px; font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--gold); text-align: left; }

/* workshop page */
.ws-book { margin-top: 18px; }
.ws-jump { margin-bottom: 8px; }
.ws-jump a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 4px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .9rem; }
.ws-sec { padding-block: 34px 10px; scroll-margin-top: 90px; }
.ws-sec header { max-width: 60ch; margin-bottom: 18px; }
.ws-sec header p { color: var(--soft); margin-top: 8px; text-align: left; }
.ws-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px 16px; }
.ws-v { display: grid; gap: 6px; align-content: start; }
.ws-v iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }
.ws-v b { font-family: var(--display); font-weight: var(--display-weight); font-size: 1rem; line-height: 1.35; }
.ws-v small { color: var(--soft); font-size: .8rem; }
.ws-v .yt-btn { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.ws-v .yt-btn::after { left: 21px; top: 17px; border-width: 10px 0 10px 16px; }
.ws-more { margin-top: 20px; }
.ws-wrap { padding: 0 var(--gutter) 64px; max-width: 1400px; margin-inline: auto; }
.ws-book { justify-self: start; }

/* red carpet page */
.rc-wrap { padding: 0 var(--gutter) 72px; max-width: 1400px; margin-inline: auto; }
.rc-list { display: grid; gap: 64px; }
.rc-ev { display: grid; gap: 16px; padding-top: 36px; border-top: 1px solid var(--line); }
.rc-h { display: grid; gap: 6px; }
.rc-d { color: var(--gold); font-size: .85rem; margin: 0; }
.rc-h h2 { font-size: clamp(1.5rem, 5vw, 2.4rem); line-height: 1.15; }
.rc-v { color: var(--soft); margin: 0; text-align: left; }
.rc-logos { display: flex; gap: 14px; align-items: center; margin: 6px 0 0; }
.rc-logos img { height: 34px; width: auto; max-width: 140px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .85)); }
.rc-tx { max-width: 60ch; color: var(--soft); text-align: left; }
.rc-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); }
.rc-strip::-webkit-scrollbar { display: none; }
.rc-ph { flex: none; height: clamp(260px, 52vw, 420px); aspect-ratio: var(--r); padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #0A1733; cursor: zoom-in; scroll-snap-align: start; }
.rc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.rc-links span { color: var(--gold); font-size: .85rem; margin-right: 4px; }
.rc-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 2px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.rc-press { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rc-press a { display: grid; gap: 2px; color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rc-press small { color: var(--gold); font-size: .78rem; }

/* press page: magazine shelf */
.mags { padding: 8px var(--gutter) 24px; max-width: 1400px; margin-inline: auto; display: grid; gap: 10px; }
.mags[hidden] { display: none; }
.mags > p { color: var(--soft); text-align: left; margin: 0 0 6px; }
.mag-shelf { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); align-items: start; }
.mag-shelf::-webkit-scrollbar { display: none; }
.mag { flex: none; width: clamp(150px, 40vw, 210px); display: grid; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; scroll-snap-align: start; }
.mag-c { position: relative; display: block; height: clamp(200px, 54vw, 280px); border-radius: 3px; overflow: hidden; background: #0A1733; box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .8); }
.mag-c img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.mag-c i { position: absolute; right: 8px; bottom: 8px; font-style: normal; font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: rgba(4, 12, 32, .78); color: #F4F1EA; }
.mag b { font-family: var(--display); font-weight: var(--display-weight); font-size: 1rem; line-height: 1.3; }
.mag small { color: var(--soft); font-size: .78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag:focus-visible .mag-c { outline: 2px solid var(--gold); outline-offset: 3px; }

/* AVALON x BANCHA collection map */
.cmap { display: grid; gap: 14px; }
.cmap-note { color: var(--soft); text-align: left; max-width: 60ch; }
.cmap-map { position: relative; max-width: 620px; width: 100%; justify-self: center; }
.cmap-map > img { width: 100%; height: auto; display: block; }
.cmap-pins { position: absolute; inset: 0; }
.cpin { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); min-width: 44px; min-height: 44px; place-content: center; }
.cpin i { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--navy); border: 1px solid var(--gold); color: var(--gold); font-style: normal; font-size: .78rem; box-shadow: 0 0 0 4px rgba(0, 37, 84, .55); }
.cpin span { font-size: .72rem; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.cpin.is-on i { background: var(--gold); color: var(--navy); }
.cpin:focus-visible i { outline: 2px solid #fff; outline-offset: 2px; }
.cmap-list h3 { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: var(--display-weight); font-size: 1.4rem; margin: 6px 0 4px; }
.cmap-list h3 small { font-family: var(--body); font-size: .8rem; color: var(--gold); }
.cpin.lab-r span, .cpin.lab-l span { position: absolute; top: 50%; transform: translateY(-50%); }
.cpin.lab-r span { left: calc(50% + 17px); }
.cpin.lab-l span { right: calc(50% + 17px); }
/* the card row under the map must not widen the section past the screen */
.cmap { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.cmap > *, .cmap-list { min-width: 0; }
.cmap-list .shelf { margin-inline: calc(var(--gutter) * -1); }

/* real gemstone photos in place of the drawn icons */
.gem-photo { object-fit: contain; border-radius: 50%; }
.visit .gem-credits { grid-column: 1 / -1; font-size: .75rem; color: var(--soft); }
.gem-credits summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; }
.gem-credits ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.gem-credits a { color: var(--soft); }

.rc-wear summary { cursor: pointer; color: var(--gold); min-height: 40px; display: inline-flex; align-items: center; font-size: .92rem; }
.rc-wear ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px 20px; }
.rc-wear li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rc-wear b { font-weight: 400; }
.rc-wear li span { color: var(--soft); font-size: .82rem; font-family: var(--display); font-style: italic; }

/* photo wall, back to magazine columns: each category is a sideways row of panels, photos in their own shape */
.sc-row { align-items: flex-start; }
.sc-row .sq-panel { flex: 0 0 min(86vw, 900px); }
.sc-row .sq-panel.mason .card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* caption band fades up from the bottom edge in gold */
.sq-panel .card-t, .sc-row .card-t { background: linear-gradient(to top, rgba(122, 90, 42, .94), rgba(155, 123, 78, .55) 55%, rgba(155, 123, 78, 0)); }
.sq-panel .card-t small, .sc-row .card-t small { color: #FFF1D6; }
/* partner logos: smaller, no shadow, always whole inside the card */
.card-logos { top: 8px; left: 8px; right: 8px; gap: 6px; }
.card-logos img { height: 22px !important; max-width: calc(50% - 3px); filter: none !important; }
#showcase .cards.sq, .showcase .cards.sq { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sc-group, .sc-row { min-width: 0; }

/* artists: two portraits hung like a gallery wall, the second set lower; no boxes */
.artist-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(16px, 4vw, 48px); align-items: start; }
.aw { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.aw:nth-child(2) { margin-top: clamp(56px, 14vw, 140px); }
.aw-ph { display: block; aspect-ratio: var(--r); overflow: hidden; border-radius: 2px; margin-bottom: 10px; background: #0A1733; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .8); }
.aw-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-k { font-size: .7rem; letter-spacing: .14em; color: var(--gold); }
.aw b { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.15rem, 3.6vw, 1.9rem); line-height: 1.15; }
.aw small { color: var(--soft); font-size: clamp(.78rem, 2.2vw, .95rem); line-height: 1.45; text-align: left; }
.aw em { font-style: normal; color: var(--gold); font-size: .9rem; justify-self: start; border-bottom: 1px solid rgba(197, 160, 101, .6); padding: 6px 0 2px; margin-top: 4px; }
.aw:hover em, .aw:focus-visible em { border-bottom-color: var(--gold); }
.aw:focus-visible .aw-ph { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (min-width: 1080px) { .artist-wall { max-width: 980px; } }

/* photo wall as a magazine board: in each category one tall cover, then portrait pages four to a row */
.sc-mag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sc-mag .card { position: relative; display: block; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #0A1733; cursor: pointer; aspect-ratio: 9 / 14; box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .85); }
.sc-mag .card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sc-mag .sc-cover { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.sc-mag .card-t { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 2px; padding: 40px 10px 10px; background: linear-gradient(to top, rgba(122, 90, 42, .94), rgba(155, 123, 78, .55) 55%, rgba(155, 123, 78, 0)); text-align: left; }
.sc-mag .card-t small { font-size: .7rem; color: #FFF1D6; }
.sc-mag .card-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: .85rem; line-height: 1.3; color: #F4F1EA; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sc-mag .sc-cover .card-t { padding: 60px 16px 16px; }
.sc-mag .sc-cover .card-t b { font-size: clamp(1.1rem, 3.4vw, 1.6rem); -webkit-line-clamp: 2; }
.sc-mag .card:has(.card-logos)::before { content: ''; position: absolute; inset: 0 0 auto; height: 30%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 12, 32, .7), rgba(4, 12, 32, 0)); }
.sc-mag .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 700px) {
  .sc-mag { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 12px; }
  .sc-mag .sc-cover { grid-column: 1; grid-row: span 2; aspect-ratio: auto; }
}

/* press spreads: a topic tag and the year */
.pr-book .pg-l { position: relative; }
.pg-yr { position: absolute; left: 12px; top: 8px; font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.8rem); line-height: 1; color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .55); pointer-events: none; }
.pr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 2px; }
.pr-tags span { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid rgba(197, 160, 101, .6); border-radius: 999px; font-size: .68rem; color: var(--gold); letter-spacing: .04em; }
@media (min-width: 700px) { .sc-mag .sc-cover { grid-row: 1 / span var(--rows, 2); } .sc-mag:not(:has(.card + .card)) { grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) { .sc-mag .sc-cover:only-child { aspect-ratio: 4 / 5; } }

/* product story strip: painting, a page of words, the piece */
.pd-reel { gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pd-reel .pr-head { display: grid; gap: 4px; }
.pd-reel .pr-head span { font-size: .72rem; letter-spacing: .14em; color: var(--gold); }
.pd-reel .pr-head h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.3rem, 4vw, 1.8rem); line-height: 1.15; }
.pd-reel .pr-head small { color: var(--soft); font-size: .82rem; }
.pd-reel-row .rc-img { aspect-ratio: 3 / 4; border-radius: 4px; box-shadow: 0 16px 28px -18px rgba(0, 0, 0, .85); }
.pd-reel-row .rc-paint .rc-img { background: #0B1D44; padding: 6%; }
.pd-reel-row .rc-paint .rc-img img { object-fit: contain; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
.pd-reel-row .rc-words .rc-img { background: #F6F1E7; color: #0C1C40; display: grid; align-content: space-between; justify-items: start; padding: 12% 10%; place-items: initial; }
.rc-q { font-family: var(--display); font-style: italic; font-size: clamp(.78rem, 2.4vw, 1.05rem); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rc-q::before { content: ''; display: block; width: 28px; height: 2px; background: #C5A065; margin-bottom: 10px; }
.rc-pl { font-size: .66rem; letter-spacing: .1em; color: #9B7B4E; text-transform: uppercase; }
.pd-reel-row .rc-t { color: var(--ink); }

/* third level: the five scenes under AVALON Scene */
.sheet-sub2 { display: block; padding: 8px 0 8px 40px; font-size: .92rem; color: var(--soft); text-decoration: none; position: relative; }
.sheet-sub2::before { content: ''; position: absolute; left: 22px; top: 50%; width: 8px; height: 1px; background: var(--gold); }
.nav-sub .nav-sub2 { padding-left: 28px; font-size: .88em; opacity: .85; }
/* folding sub-menus in the menu sheet */
.sheet-g { border-top: 1px solid var(--line); }
.sheet-g:first-child { border-top: 0; }
.sheet-g .sheet-main { border-top: 0; display: block; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-row > a { flex: 1; }
.sheet-tg { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--gold); cursor: pointer; display: grid; place-items: center; }
.sheet-tg::before { content: ''; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s; }
.sheet-tg[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.sheet-subs { display: grid; padding-bottom: 10px; }
.sheet-subs[hidden], .sheet-subs2[hidden] { display: none; }
.sheet-subs2 { display: grid; }
.sheet-row.sub .sheet-tg { width: 40px; height: 40px; }

/* story index cards: landscape photos */
.story-card .sc-img img { aspect-ratio: 3 / 2; object-position: 50% 40%; }

/* artist pages: numbers and chapters instead of long text; details open on tap */
.ar-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ar-stat { display: grid; gap: 4px; justify-items: start; padding: 16px 14px; border: 0; border-top: 2px solid var(--gold); background: rgba(255, 255, 255, .04); color: var(--ink); text-align: left; cursor: pointer; }
.ar-stat b { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 7vw, 3rem); line-height: 1; color: var(--gold); }
.ar-stat span { font-size: .85rem; color: var(--soft); }
.ar-stat[aria-expanded="true"] { background: rgba(197, 160, 101, .14); }
.ar-stats .ar-list { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.ar-stats .ar-list li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--soft); font-size: .9rem; text-align: left; }
@media (min-width: 760px) { .ar-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ar-lede { font-family: var(--display); font-size: clamp(1.15rem, 3.4vw, 1.5rem); line-height: 1.45; text-align: left !important; max-width: 46ch; }
.ar-chap { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; }
.ar-chap::before { content: ''; position: absolute; left: 6%; right: 6%; top: 34%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .6; }
.ar-ch { position: relative; display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.ar-ch-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: #0A1733; box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .9); }
.ar-ch-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-ch-n { font-family: var(--display); color: var(--gold); font-size: .9rem; }
.ar-ch b { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(.9rem, 2.6vw, 1.15rem); line-height: 1.25; }
.ar-ch small { color: var(--soft); font-size: .72rem; }
.ar-ch[aria-expanded="true"] .ar-ch-img { outline: 2px solid var(--gold); outline-offset: 3px; }
.ar-ch[aria-expanded="true"] small { color: var(--gold); }
.ar-ch-text { margin-top: 16px; padding: 18px 0 4px; border-top: 1px solid var(--gold); }
.ar-ch-text h3 { font-family: var(--display); font-weight: var(--display-weight); font-size: 1.25rem; margin-bottom: 8px; }
.ar-ch-text p { color: var(--soft); }

/* easter egg: a shell in the tide, and the dive below */
.tide { position: relative; }
.egg-shell { position: absolute; right: 4px; bottom: 2px; width: 34px; height: 34px; padding: 6px; border: 0; background: none; cursor: pointer; opacity: .32; color: #F6E7C8; transition: opacity .4s; }
.egg-shell:hover, .egg-shell:focus-visible { opacity: 1; }
.egg-shell svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) { .egg-shell { animation: shellGlint 6s ease-in-out infinite; } }
@keyframes shellGlint { 0%, 86%, 100% { opacity: .32; } 92% { opacity: .85; } }
dialog.deep { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; color: #EAF6FF; background: linear-gradient(180deg, #0E4F78 0%, #062C4D 45%, #01121F 100%); display: grid; place-items: center; overflow: hidden; }
dialog.deep::backdrop { background: #01121F; }
@media (prefers-reduced-motion: no-preference) { dialog.deep[open] { animation: dive .9s cubic-bezier(.2, .7, .2, 1) both; } dialog.deep.up { animation: surface .6s ease-in both; } }
@keyframes dive { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes surface { to { transform: translateY(-100%); opacity: .4; } }
.deep-sea { position: absolute; inset: 0; pointer-events: none; }
.deep-sea i { position: absolute; left: var(--x); bottom: -30px; width: var(--s); height: var(--s); border-radius: 50%; border: 1px solid rgba(220, 245, 255, .55); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%); }
@media (prefers-reduced-motion: no-preference) { .deep-sea i { animation: rise var(--t) linear var(--d) infinite; } }
@keyframes rise { to { transform: translateY(-110vh) translateX(12px); } }
.deep-in { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 34ch; padding: 24px; }
.deep-k { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: #9FD8F0; margin: 0; }
.deep-in h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 10vw, 4.4rem); line-height: 1; }
.deep-in p { color: #CDE8F5; text-align: center !important; }
.deep-go { background: #EAF6FF; color: #062C4D; border-color: #EAF6FF; }
.deep-x { min-height: 44px; border: 0; background: none; color: #9FD8F0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* contact block in the menu: every channel, plus the Linktree QR */
.sheet-contact { margin: 6px 0 0; display: grid; gap: 0; width: 100%; }
.sheet-contact > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sheet-contact dt { color: var(--gold); font-size: .8rem; padding-top: 2px; }
.sheet-contact dd { margin: 0; display: grid; gap: 2px; min-width: 0; }
.sheet-contact a { color: var(--ink); overflow-wrap: anywhere; }
.sheet-contact small { color: var(--soft); font-size: .78rem; }
.sheet-qr { display: flex; align-items: center; gap: 16px; margin-top: 8px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--ink); width: 100%; }
.sheet-qr img { width: 112px; height: 112px; border-radius: 6px; flex: none; }
.sheet-qr span { display: grid; gap: 3px; }
.sheet-qr b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.sheet-qr small { color: var(--soft); font-size: .8rem; }

/* photo wall: one category, a sideways bento strip of mixed tile sizes */
#showcase .cards.sq { display: block; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); height: auto !important; }
#showcase .cards.sq::-webkit-scrollbar { display: none; }
.sc-bento { --u: clamp(118px, 26vw, 190px); display: grid; grid-auto-flow: column dense; grid-template-rows: repeat(2, var(--u)); grid-auto-columns: var(--u); gap: 10px; width: max-content; }
.sc-bento .card { position: relative; display: block; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #0A1733; cursor: pointer; scroll-snap-align: start; aspect-ratio: auto; box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .85); }
.sc-bento .b-big { grid-row: span 2; grid-column: span 2; }
.sc-bento .b-wide { grid-column: span 2; }
.sc-bento .b-tall { grid-row: span 2; }
.sc-bento .card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sc-bento .card-t { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 2px; padding: 36px 10px 10px; background: linear-gradient(to top, rgba(122, 90, 42, .94), rgba(155, 123, 78, .55) 55%, rgba(155, 123, 78, 0)); text-align: left; }
.sc-bento .card-t small { font-size: .7rem; color: #FFF1D6; }
.sc-bento .card-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: .88rem; line-height: 1.3; color: #F4F1EA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-bento .b-big .card-t { padding: 60px 16px 16px; }
.sc-bento .b-big .card-t b { font-size: clamp(1.1rem, 3.2vw, 1.5rem); }
.sc-bento .card:has(.card-logos)::before { content: ''; position: absolute; inset: 0 0 auto; height: 34%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 12, 32, .7), rgba(4, 12, 32, 0)); }
.sc-bento .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- the AVALON A flourish as a recurring mark ---------- */
:root { --a-mark: url(/assets/brand/a-flourish.svg); }
/* a large, faint A behind the welcome */
#house { position: relative; overflow: hidden; isolation: isolate; }
#house::before { content: ''; position: absolute; z-index: -1; right: -12%; top: 6%; width: min(92%, 980px); aspect-ratio: 384 / 164; background: #E8D3B0; opacity: .08;
  -webkit-mask: var(--a-mark) center / contain no-repeat; mask: var(--a-mark) center / contain no-repeat; transform: rotate(-6deg); pointer-events: none; }
/* a small white A in the corner of editorial photos */
.aw-ph, .story-card .sc-img, .ar-ch-img { position: relative; }
.aw-ph::after, .story-card .sc-img::after, .ar-ch-img::after, .bk-l.is-photo::after { content: ''; position: absolute; left: 10px; top: 10px; width: clamp(34px, 9%, 54px); aspect-ratio: 384 / 164; background: #FFFFFF; opacity: .9;
  -webkit-mask: var(--a-mark) center / contain no-repeat; mask: var(--a-mark) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); pointer-events: none; z-index: 2; }
/* the A as the bullet of sub-lists: menu sub-items and footer links */
.sheet-sub, .foot-links li a { position: relative; }
.sheet-sub { padding-left: 46px; }
/* list links are marked with the small star of the page headings */
.sheet-sub::before, .foot-links li a::before { content: '\2726'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold); opacity: .9; font-size: .62em; line-height: 1; }
.sheet-sub::before { left: 22px; }
.foot-links li a { padding-left: 22px; display: inline-block; }
.foot-links li a::before { left: 2px; }
/* the A as the signature at the foot of every page */
.a-sig { grid-column: 1 / -1; display: grid; justify-items: center; gap: 8px; padding: 26px 0 6px; }
.a-sig i { width: 150px; aspect-ratio: 384 / 164; background: var(--gold); -webkit-mask: var(--a-mark) center / contain no-repeat; mask: var(--a-mark) center / contain no-repeat; }
.a-sig small { letter-spacing: .22em; font-size: .68rem; color: var(--soft); }
/* the A writes itself once, when the home page first opens */
.a-intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--navy, #002554); transition: opacity .7s ease, visibility .7s; cursor: pointer; }
.a-intro.out { opacity: 0; visibility: hidden; }
.a-intro i { display: block; width: min(440px, 72vw); aspect-ratio: 384 / 164; background: #C49A6C; -webkit-mask: var(--a-mark) center / contain no-repeat; mask: var(--a-mark) center / contain no-repeat;
  clip-path: inset(0 100% 0 0); animation: aDraw 2.1s cubic-bezier(.6, .05, .25, 1) .2s forwards; }
.a-intro small { position: absolute; bottom: 12%; left: 0; right: 0; text-align: center; letter-spacing: .3em; font-size: .7rem; color: rgba(244, 241, 234, .6); opacity: 0; animation: aFade .8s ease 1.6s forwards; }
@keyframes aDraw { to { clip-path: inset(0 0 0 0); } }
@keyframes aFade { to { opacity: 1; } }

/* clients' words: two rows of Google reviews drifting in opposite directions */
.reviews { overflow: hidden; }
.rv-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.rv-score { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 10px; color: var(--ink); text-decoration: none; }
.rv-score b { grid-row: span 2; font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--gold); }
.rv-stars { color: var(--gold); letter-spacing: .12em; font-size: .9rem; }
.rv-score small { color: var(--soft); font-size: .8rem; border-bottom: 1px solid rgba(197, 160, 101, .5); }
.rv-rows { display: grid; gap: 14px; margin-inline: calc(var(--gutter) * -1); }
.rv-row { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-track { display: flex; gap: 14px; width: max-content; padding: 4px 0; }
.rv { flex: none; width: clamp(240px, 70vw, 340px); margin: 0; display: grid; gap: 10px; align-content: start; padding: 18px 18px 16px; border-radius: 4px; background: rgba(255, 255, 255, .04); border-top: 2px solid var(--gold); }
.rv-st { color: var(--gold); letter-spacing: .12em; font-size: .8rem; }
.rv blockquote { margin: 0; font-family: var(--display); font-size: 1rem; line-height: 1.5; color: var(--ink); text-align: left; }
.rv figcaption { color: var(--soft); font-size: .78rem; }
@media (prefers-reduced-motion: no-preference) {
  .rv-track { animation: rvDrift 70s linear infinite; }
  .rv-row.rev .rv-track { animation-direction: reverse; animation-duration: 80s; }
  .rv-row:hover .rv-track, .rv-row:focus-within .rv-track, .rv-row:active .rv-track { animation-play-state: paused; }
}
@keyframes rvDrift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rv-row { overflow-x: auto; } }
.reviews { padding: 56px var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 760px) { .reviews { padding: 80px var(--gutter); gap: 36px; } }

.mag-w { flex: none; width: clamp(150px, 40vw, 210px); display: grid; gap: 6px; align-content: start; scroll-snap-align: start; }
.mag-w .mag { width: 100%; }
.mag-go { justify-self: start; color: var(--gold); font-size: .8rem; text-decoration: none; border-bottom: 1px solid rgba(197, 160, 101, .55); padding: 6px 0 2px; }
.mag-cr summary { cursor: pointer; color: var(--soft); font-size: .78rem; min-height: 32px; display: inline-flex; align-items: center; }
.mag-cr ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.mag-cr li { font-size: .72rem; line-height: 1.45; color: var(--soft); overflow-wrap: anywhere; }

/* timeline, livelier: a big year, a peek of its photos while folded, and a sideways strip of photo cards when open */
.sc-time { padding-left: 0; border-left: 0; gap: 10px; }
.tl-year::before { display: none; }
.tl-year details { border-top: 1px solid var(--line); }
.tl-year summary { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 0; min-height: 72px; }
.tl-year summary h3 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold); transition: color .3s; }
.tl-year details[open] summary h3, .tl-year summary:hover h3 { color: var(--gold); }
.tl-year summary small { color: var(--soft); font-size: .8rem; align-self: flex-end; padding-bottom: 6px; }
.tl-peek { display: flex; margin-left: auto; margin-right: 6px; }
.tl-peek img { width: 38px; height: 38px; object-fit: cover; border-radius: 50%; border: 2px solid var(--navy, #0B2352); margin-left: -12px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .3s; }
.tl-year summary:hover .tl-peek img { transform: translateY(-3px); }
.tl-year details[open] .tl-peek { display: none; }
.tl-year details[open] summary::after { margin-left: auto; }
.tl-year ul { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 18px; scroll-padding-inline: var(--gutter); grid-template-columns: none !important; }
.tl-year ul::-webkit-scrollbar { display: none; }
.tl-year li { flex: none; width: clamp(200px, 58vw, 250px); scroll-snap-align: start; }
.tl-year li:first-child { width: clamp(250px, 76vw, 360px); }
.tl-item { position: relative; display: block !important; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #0A1733; box-shadow: 0 16px 28px -18px rgba(0, 0, 0, .9); }
.tl-year li:first-child .tl-item { aspect-ratio: 5 / 5.2; }
.tl-item .tl-img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.tl-item .tl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.tl-item:hover .tl-img img, .tl-item:focus-visible .tl-img img { transform: scale(1.04); }
.tl-item .tl-t { position: absolute; inset: auto 0 0 0; padding: 48px 14px 14px; background: linear-gradient(to top, rgba(122, 90, 42, .95), rgba(155, 123, 78, .55) 55%, rgba(155, 123, 78, 0)); }
.tl-item .tl-t small { color: #FFF1D6; font-size: .7rem; letter-spacing: .06em; }
.tl-item .tl-t b { color: #F4F1EA; font-size: 1rem; }
.tl-item .tl-t em { justify-self: start; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(4, 12, 32, .55); color: #FFE3B3; font-size: .72rem; }
.tl-item:hover b { color: #F4F1EA; }
@media (prefers-reduced-motion: no-preference) {
  .tl-year details[open] li { animation: tlIn .55s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
}
@keyframes tlIn { from { opacity: 0; transform: translateX(28px); } }
.sc-time { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.tl-year, .tl-year details { min-width: 0; max-width: 100%; }
.tl-year summary::after { margin-left: 10px !important; } .tl-year details[open] summary::after { margin-left: auto !important; }

/* ---------- the scene book, after the AVALON Canva scene system ---------- */
/* left page: a magazine cover */
.bk-cover { background: #000A3B; color: #FFFFFF; }
.bk-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.bk-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 10, 59, .55) 0%, rgba(0, 10, 59, 0) 22%, rgba(0, 10, 59, 0) 48%, rgba(0, 10, 59, .92) 100%); }
.bk-cover[data-s="secession-black"]::before { background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 22%, rgba(39, 49, 55, 0) 48%, rgba(11, 11, 11, .94) 100%); }
.bk-cover .bk-n { display: none; }
.bkc-top { position: absolute; z-index: 2; left: 0; right: 0; top: 3.2cqw; display: grid; justify-items: center; gap: .4cqw; }
.bkc-mast { font-family: 'Bodoni Moda', 'Playfair Display', serif; font-size: 6.4cqw; letter-spacing: .26em; line-height: 1; margin-right: -.26em; color: #FFFFFF; }
.bkc-no { font-size: max(8px, 1.3cqw); letter-spacing: .3em; color: #E3CFBB; }
.bkc-bot { position: absolute; z-index: 2; left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; display: grid; gap: .8cqw; }
.bkc-key { margin: 0; font-family: 'Playfair Display', serif; font-style: italic; font-size: max(10px, 1.9cqw); line-height: 1.3; color: #FFFFFF; text-align: left !important; }
.bkc-bot small { font-size: max(8px, 1.1cqw); letter-spacing: .08em; color: rgba(255, 255, 255, .75); }
/* the two-part scene wordmarks, rebuilt in type */
.wm { margin: 0; display: grid; line-height: .95; }
.wm .wa, .wm .wb { display: block; }
.wm-secession-black .wa { font-family: var(--body); font-weight: 300; font-size: 2.3cqw; letter-spacing: .5em; text-transform: uppercase; }
.wm-secession-black .wb { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 900; font-size: 7.2cqw; text-transform: uppercase; }
.wm-garden-lullaby .wa { font-family: var(--body); font-weight: 400; font-size: 3.4cqw; letter-spacing: .04em; }
.wm-garden-lullaby .wb { font-family: 'Pinyon Script', cursive; font-size: 8cqw; color: #FFD870; margin-top: -1.2cqw; }
.wm-eternity-spirit .wa { font-family: 'Lustria', serif; font-size: 4.6cqw; text-transform: uppercase; letter-spacing: .08em; }
.wm-eternity-spirit .wb { font-family: 'Playfair Display', serif; font-style: italic; font-size: 5.6cqw; color: #E2AFA8; }
.wm-oceanic-melody .wa { font-family: var(--body); font-weight: 300; font-size: 5cqw; text-transform: lowercase; letter-spacing: .02em; }
.wm-oceanic-melody .wb { font-family: 'Pinyon Script', cursive; font-size: 6.8cqw; color: #B6C8D1; margin-top: -1cqw; text-transform: lowercase; }
.wm-cosmic-meridian .wa { font-family: 'Lustria', serif; font-size: 5.6cqw; text-transform: uppercase; letter-spacing: .06em; color: #8EA2F2; }
.wm-cosmic-meridian .wb { font-family: var(--body); font-weight: 300; font-size: 2.2cqw; letter-spacing: .62em; text-transform: uppercase; }
/* right page: a white catalogue page */
.bk-cat { grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto; background: #FFFFFF; }
.bk-cat .bk-title { font-size: 3.8cqw; }
.bk-prod { margin: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.bk-prod img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bk-art { margin: 0; aspect-ratio: 5 / 1; overflow: hidden; border-radius: 2px; }
.bk-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-cat .bk-credit span { color: #9B7B4E; }
.bk-cat .bk-credit a { color: #26628E; }

/* scene thumbnails: each photo whole, in its own shape, no box around it */
.scene-art .thumbs button[style*="--r"] { width: auto; height: 64px; aspect-ratio: var(--r); padding: 0; background: none; overflow: hidden; border-radius: 3px; }
.scene-art .thumbs button[style*="--r"] img { object-fit: cover; display: block; }

/* ---------- section rhythm: tighter on phones, roomier only on wide screens ---------- */
main > section:not(.hero):not(.page-head) { padding-top: 40px; padding-bottom: 40px; }
main > section:not(.hero) + section:not(.hero) { padding-top: 32px; }
main > section:not(.hero) { gap: 20px; }
@media (min-width: 700px) {
  main > section:not(.hero):not(.page-head) { padding-top: 48px; padding-bottom: 48px; }
  main > section:not(.hero) + section:not(.hero) { padding-top: 40px; }
  main > section:not(.hero) { gap: 24px; }
}
@media (min-width: 1080px) {
  main > section:not(.hero):not(.page-head) { padding-top: 72px; padding-bottom: 72px; }
  main > section:not(.hero) + section:not(.hero) { padding-top: 56px; }
  main > section:not(.hero) { gap: 32px; }
}

/* hero: several event logos side by side; a lifted photo keeps the jewelry clear of the headline; the slide itself is a link */
.cap-logo { gap: 10px; flex-wrap: wrap; }
.cap-logo > span { display: flex; }
.cap-logo-badge img { background: #FFFFFF; }
.slide picture img.lift { transform: scale(var(--lift)); }
@media (max-width: 699px) { .slide picture img.lift { transform: none; } }
.stage .slide.is-on { cursor: pointer; }

.cap-ti a { display: inline-block; }
.cap-ti img { display: block; width: min(560px, 82%); height: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- magazine page turn (StPageFlip) ---------- */
.bk { aspect-ratio: auto !important; perspective: none; filter: none; }
.bk::before { display: none; }
.fb { margin: 0 auto; }
.fb-page { position: relative; overflow: hidden; background: #FFFFFF; }
.fb-page > .bk-pg { position: absolute; inset: 0; }
.fb .stf__item { box-shadow: none; }
.fb-static { display: grid; grid-template-columns: 1fr 1fr; }
.fb-static .fb-page { aspect-ratio: 3 / 4; }
.fb-static .fb-page:nth-child(n+3) { display: none; }

/* the printed catalogue as a turning book */
.catbook { display: grid; gap: 12px; }
.catbook > p { color: var(--soft); margin: 0; text-align: left; }
.cb-stage { padding: 10px 0 4px; }
.cb-fb { max-width: 1100px; }
.cb-page { background: #FFFFFF; }
.cb-page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cb-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.cb-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cb-n { font-family: var(--display); color: var(--gold); min-width: 70px; text-align: center; }
.catbook { padding-inline: var(--gutter); max-width: 1400px; margin-inline: auto; }

/* ---------- each piece as a magazine chapter ---------- */
.chapter { padding: 20px var(--gutter) 8px; max-width: 1400px; margin-inline: auto; display: grid; gap: 12px; }
.ch-fb { max-width: 1100px; margin: 0 auto; container-type: inline-size; }
.ch-pg { position: absolute; inset: 0; overflow: hidden; display: grid; }
.ch-open { background: #0C1C40; color: #F4F1EA; align-content: center; justify-items: center; text-align: center; gap: 2.4cqw; padding: 8%; }
.ch-k { margin: 0; font-size: max(9px, 1.4cqw); letter-spacing: .3em; text-transform: uppercase; color: #C49A6C; }
.ch-name { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 6.2cqw, 4.2rem); line-height: 1.02; margin: 0; }
.ch-ser { margin: 0; font-family: 'Playfair Display', var(--display); font-style: italic; color: #E3CFBB; font-size: max(11px, 2cqw); }
.ch-place { margin: 0; font-size: max(9px, 1.3cqw); letter-spacing: .14em; color: rgba(244, 241, 234, .7); text-transform: uppercase; }
.ch-mast { position: absolute; bottom: 5%; left: 0; right: 0; margin: 0; font-family: 'Bodoni Moda', 'Lustria', serif; letter-spacing: .4em; font-size: max(10px, 1.6cqw); color: rgba(196, 154, 108, .8); }
.ch-a { width: 34%; aspect-ratio: 384 / 164; background: #C49A6C; -webkit-mask: var(--a-mark) center / contain no-repeat; mask: var(--a-mark) center / contain no-repeat; }
.ch-a-sm { width: 22%; margin-top: 2cqw; }
.ch-photo { background: #FFFFFF; }
.ch-photo img { width: 100%; height: 100%; object-fit: contain; }
.ch-paint { background: #F6F1E7; place-items: center; padding: 8%; }
.ch-paint figure { margin: 0; display: grid; gap: 1.4cqw; justify-items: center; }
.ch-paint img { max-width: 100%; max-height: 62cqw; object-fit: contain; box-shadow: 0 10px 24px rgba(12, 28, 64, .25); }
.ch-paint figcaption { font-family: 'Playfair Display', serif; font-style: italic; color: #9B7B4E; font-size: max(10px, 1.5cqw); }
.ch-words { background: #FFFFFF; color: #0C1C40; align-content: center; gap: 1.6cqw; padding: 10% 9%; }
.ch-words p { margin: 0; font-size: max(10px, 1.45cqw); line-height: 1.7; color: #3A4666; text-align: justify; }
.ch-words .ch-lede { font-family: var(--display); font-size: max(13px, 2.5cqw); line-height: 1.35; color: #0C1C40; text-align: left; }
.ch-words .ch-lede::first-letter { float: left; font-size: 3.2em; line-height: .8; padding: .06em .1em 0 0; color: #C49A6C; }
.ch-n { position: absolute; bottom: 4%; right: 7%; font-family: 'Playfair Display', serif; font-style: italic; color: #C49A6C !important; }
.ch-stones { background: #FFFFFF; align-content: center; gap: 2cqw; padding: 8%; }
.ch-stones .ch-k { text-align: center; }
.ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; }
.ch-grid figure { margin: 0; display: grid; gap: .6cqw; justify-items: center; }
.ch-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ch-grid figcaption { font-size: max(9px, 1.25cqw); color: #3A4666; }
.ch-close { background: #0C1C40; color: #F4F1EA; align-content: center; justify-items: center; text-align: center; gap: 1.8cqw; padding: 10%; }
.ch-close h3 { font-family: var(--display); font-weight: 400; font-size: max(18px, 4cqw); margin: 0; }
.ch-price { margin: 0; color: #E3CFBB; font-size: max(12px, 1.8cqw); }
main > .chapter + .pd { padding-top: 12px !important; }

/* the A signature, signed in one line */
.a-sign-stage { position: relative; display: block; width: 100%; line-height: 0; }
.a-intro .a-sign-stage { width: min(440px, 72vw); }
.a-sig .a-sign-stage { width: 160px; }
.a-sign { display: block; width: 100%; height: auto; overflow: visible; color: #C49A6C; }
.a-sig .a-sign { width: 160px; }
.a-intro .a-sign { width: min(440px, 72vw); }
.a-intro i { display: none; }

/* floors: a full-width photo per floor, crossfading as the tour rides up */
.floors-in { grid-template-columns: minmax(0, 1fr) !important; position: relative; padding: 8px 0 12px; }
.floor-body { position: relative; margin-inline: calc(var(--gutter) * -1); }
.floor-img { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #0A1733; }
@media (max-width: 699px) { .floor-img { aspect-ratio: 4 / 5; } }
.floor-img img { position: absolute; inset: 0; width: 100% !important; max-width: none !important; height: 100%; aspect-ratio: auto !important; object-fit: cover; border-radius: 0 !important; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 5.5s ease-out; }
.floor-img img.is-on { opacity: 1; transform: scale(1); }
.floor-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 18, 45, .9) 0%, rgba(0, 18, 45, .4) 35%, rgba(0, 18, 45, 0) 60%); pointer-events: none; }
.floor-cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; z-index: 2; display: grid; gap: 4px; max-width: 60ch; }
.floor-no { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.floor-cap .floor-name { color: #F4F1EA; font-size: clamp(1.2rem, 4vw, 1.8rem); margin: 0; }
.floor-cap .floor-text { color: rgba(244, 241, 234, .82); margin: 0; text-align: left !important; }
.floor-tabs { position: absolute; z-index: 3; top: 22px; left: 0; display: grid; gap: 5px; }
.floor-tabs button { background: rgba(4, 12, 32, .55); backdrop-filter: blur(4px); color: #F4F1EA; border-color: rgba(244, 241, 234, .35); width: 52px; height: 38px; }
.floor-tabs button:first-child { height: 46px; }
.floor-tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .floor-img img { transition: none; transform: none; } }

/* event logos lifted to the top of the slide, clear of faces */
.slide > .cap-logo-top { position: absolute; z-index: 3; top: 22px; left: var(--gutter); right: var(--gutter); margin: 0; }

/* caption shades: each photo lends its own deep tone (set in home.js as --tint); navy until the photo loads */
.sc-bento .card-t, .tl-item .tl-t { background: linear-gradient(to top, color-mix(in srgb, var(--tint, #0A1E3F) 94%, transparent), color-mix(in srgb, var(--tint, #0A1E3F) 55%, transparent) 55%, transparent); transition: background .4s ease; }
.sc-bento .card-t small, .tl-item .tl-t small { color: #F1E3C4; }

/* works wall without cropping: tiles take their photo's own ratio (--r) at a shared height */
.sc-bento { --h: clamp(150px, 32vw, 220px); display: flex; align-items: flex-start; gap: 10px; height: calc(var(--h) * 2 + 10px); width: max-content; }
.sc-bento .card { flex: none; height: 100%; width: auto; aspect-ratio: var(--r, 1); grid-row: auto; grid-column: auto; }
.sc-bento .card > img { object-fit: contain; object-position: 50% 50%; }
.sc-rows { display: grid; grid-template-rows: var(--h) var(--h); gap: 10px; }
.sc-r { display: flex; gap: 10px; height: var(--h); }
.sc-r .card { height: var(--h); }
.sc-bento .b-big { height: calc(var(--h) * 2 + 10px); }

/* scene book: the product photo always shows whole inside its row */
.bk-prod { position: relative; }
.bk-prod img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
/* on phones the catalogue page is small, so the art strip gives its room to the product photo */
@media (max-width: 699px) { .bk-cat .bk-art { display: none; } }

/* isle panel: the scene's real Canva page beside its name and pieces */
.sp { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .sp { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.sp-page { display: block; aspect-ratio: var(--r, .8); border-radius: 4px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); background: #0A1733; }
.sp-page img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-text { display: grid; gap: 10px; align-content: start; }
.sp-no { margin: 0; display: flex; gap: 12px; align-items: baseline; font-family: var(--display); font-style: italic; color: var(--gold); }
.sp-no span { font-family: var(--body, inherit); font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .7); }
.sp h3 { margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.5rem, 4.6vw, 2.1rem); line-height: 1.15; }
.sp-feel { margin: 0; font-family: var(--display); font-style: italic; color: var(--accent); }
.sp-pcs { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-pcs a { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.sp-ph { display: block; aspect-ratio: 1; background: #FFFFFF; border-radius: 4px; overflow: hidden; }
.sp-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-pcs b { font-weight: 300; font-size: .78rem; line-height: 1.3; }
.sp-go { justify-self: start; }
.sp-hint { margin: 0; font-size: .78rem; color: rgba(244, 241, 234, .6); }

/* scene page book: real Canva pages, each shown whole over a soft copy of itself */
.sb { grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 24px; }
.sb-stage { padding: 6px 0; }
.sb-pg { position: absolute; inset: 0; overflow: hidden; background: #0A1733; }
.sb-fill { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(22px) brightness(.75); }
.sb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sb .fb-page { background: #0A1733; }
.sb-n { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.sb-pcs { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

/* films strip shared by stories, pieces, works and scenes */
.films { display: grid; gap: 14px; margin-top: 28px; }
.films h2 { margin: 0; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.3rem, 3.6vw, 1.8rem); }
.films-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.films .film { width: 100%; justify-self: stretch; }
.films .film figcaption { line-height: 1.4; }
.visit-go { margin: 18px 0 0; }

/* royal tributes show their photo with no extra gold frame (owner, 2026-10-08) */
.sc-bento { padding: 6px; }

/* Manee Mongkol Gems: a light editorial page and full, inspectable photographs. */
body[data-page="mmg"] .page-head { max-width: 1200px; margin-inline: auto; gap: 16px; padding-top: 40px; }
body[data-page="mmg"] .page-head h1 { font-size: clamp(2.1rem, 6.3vw, 4rem); }
body[data-page="mmg"] .page-head > p { margin-top: 0; text-align: left; }
body[data-page="mmg"] .page-head .mmg-eyebrow { color: var(--gold); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.mmg-jumps { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
.mmg-jumps a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--gold); font-size: .85rem; }
.mmg-jumps a:hover { color: var(--gold); }
.mmg-works { display: grid; gap: 56px; padding-inline: var(--gutter); max-width: 1200px; margin: 0 auto 64px; }
.mmg-history, .mmg-portfolio { min-width: 0; scroll-margin-top: 100px; }
.mmg-section-head { display: grid; gap: 10px; margin-bottom: 28px; }
.mmg-section-head > .kicker { color: var(--gold); font-size: .75rem; letter-spacing: .1em; }
.mmg-section-head h2 { font-size: clamp(1.65rem, 4.2vw, 2.5rem); line-height: 1.25; }
.mmg-image-hint { font-size: .85rem; color: var(--soft); }
.mmg-projects { display: grid; gap: 48px; }
.mmg-item { display: grid; gap: 20px; min-width: 0; border-top: 1px solid var(--line); padding-top: 24px; }
.mmg-project-head { display: grid; gap: 12px; }
.mmg-project-head .kicker { display: flex; align-items: center; gap: 14px; color: var(--gold); margin: 0; }
.mmg-project-no { font-family: var(--display); font-size: 1.5rem; padding-right: 14px; border-right: 1px solid var(--line); }
.mmg-project-head h3 { font-size: clamp(1.4rem, 3.6vw, 2rem); line-height: 1.3; overflow-wrap: break-word; }
.mmg-gal { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.mmg-gal > :first-child { grid-column: 1 / -1; }
.mmg-gal[data-count="2"] > :last-child { grid-column: 1 / -1; width: 70%; max-width: 320px; justify-self: center; }
.mmg-frame { position: relative; margin: 0; min-width: 0; aspect-ratio: var(--r, 1.5); background: #0B1D44; box-shadow: 0 12px 24px -16px rgba(0, 37, 84, .4); }
.mmg-frame img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.mmg-frame.is-bare { background: none; box-shadow: none; }
.mmg-frame.is-bare img { inset: 0; width: 100%; height: 100%; }
.mmg-frame.is-bare::after { content: none; }
.mmg-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 16px solid transparent; border-image: url("../assets/brand/gold-frame.webp") 45 / 16px stretch; }
.mmg-photo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mmg-zoom-mark { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #c49a6c; border-radius: 50%; color: #fff; background: rgba(0, 37, 84, .9); font-size: 1.2rem; line-height: 1; }
.mmg-photo:hover .mmg-zoom-mark { background: #002554; }
.mmg-text > p { color: var(--soft); text-align: left; line-height: 1.8; }
.mmg-text .films { margin-top: 24px; }
.mmg-text .films h2 { font-size: 1.3rem; }
@media (min-width: 960px) {
  body[data-page="mmg"] .page-head { padding-top: 64px; }
  .mmg-works { gap: 72px; }
  .mmg-projects { gap: 72px; }
  .mmg-item { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 16px; padding-top: 32px; }
  .mmg-project-head { grid-column: 2; grid-row: 1; }
  .mmg-gal { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .mmg-text { grid-column: 2; grid-row: 2; }
}

/* journal: search, interests and full-bleed thumbnails */
.j-tools { display: grid; gap: 12px; margin-top: 18px; }
.j-search input { width: 100%; min-height: 48px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--ink); padding: 0 20px; font: inherit; }
.j-search input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.j-search .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.j-topics button { flex: none; min-height: 38px; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; white-space: nowrap; }
.j-topics button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #0B1D44; }
.posts .frame { aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.posts .frame::before { display: none !important; }
.posts .frame img { width: 100%; height: 100%; object-fit: cover; }
.posts .j-tags { font-style: normal; font-size: .76rem; color: var(--gold); letter-spacing: .02em; }
.tag-craft { border-color: #9FC3B5; color: #BFE0D3; }
.a-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; }
.a-tags a { padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--gold); font-size: .86rem; text-decoration: none; }
.a-more { margin-top: 40px; display: grid; gap: 14px; }
.a-more h2 { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin: 0; }
.a-rel { padding: 0 !important; }

/* UX review: product discovery, explicit order states and compact navigation. */
:root { --soft: rgba(244, 241, 234, .82); }
body { font-weight: 400; }
input, textarea, select { font: inherit; }
.cat-sort { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.cat-sort select { min-width: 0; min-height: 44px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--navy); color: var(--ink); }
.cat-tools { grid-template-columns: minmax(0, 1fr) auto; }
.cat-sort { grid-column: 1; }
.cat-count { grid-column: 2; text-align: right; }
.cat-h { font-size: 1.5rem; }
body[data-page="catalogue"] .page-head { padding-top: 32px; padding-bottom: 12px; }
body[data-page="catalogue"] .cat { padding-top: 12px; }
.opts button:disabled { opacity: .48; cursor: default; }
.opts small, .piece > span:last-child { font-size: .92rem; }
.pd { padding-top: 28px; }
.pd-info, .bl-t { min-width: 0; }
.pd-info h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.pd-order-note, .pd-opts legend { font-size: .95rem; color: var(--ink); }
.pd-error, .co-err, .field-err { color: #FFE1C8; }
.pd-error:empty { display: none; }
.pd-info .note { font-size: .9rem; }
.pd-custom input { position: static; opacity: 1; cursor: text; }
.pd-opts .pd-custom .sr { display: none; }
.pd-opts .pd-note > span { border: 0; border-radius: 0; padding: 0; min-height: 0; }
.size-help { border: 0; background: none; text-decoration: underline; color: var(--gold); cursor: pointer; min-height: 44px; padding: 4px 0; }
.pd-opts fieldset { scroll-margin-top: 80px; }
.pd-quick { display: none; }
.bag-options { overflow-wrap: anywhere; font-size: .95rem; }
.bag-edit { color: var(--gold); display: inline-block; padding-block: 8px; min-height: 40px; font-size: .9rem; }
.bag-undo { margin-block: 12px; }
.bag-undo button { border: 0; background: none; color: var(--gold); text-decoration: underline; min-height: 44px; cursor: pointer; }
.qty button:disabled { opacity: .45; cursor: default; }
.co-fallback { padding: 24px; border: 1px solid var(--gold); border-radius: 12px; display: grid; gap: 16px; }
.co-fallback h2, .co-done h2 { font-size: 1.5rem; }
.co-summary { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .95rem; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.co-line { width: 100%; }
.slip { margin-top: 20px; }
.sheet-lang { align-self: flex-start; }
.visit { --soft: rgba(244, 241, 234, .82); }
.visit-compact { padding: 32px var(--gutter); gap: 20px; }
.visit-compact h2 { font-size: 1.6rem; }
.visit-compact .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visit-compact .contact-grid a { min-height: 76px; padding: 10px 4px; }
.visit-compact .visit-go { display: flex; gap: 10px; flex-wrap: wrap; }
.visit-compact .visit-go .btn { font-size: .9rem; padding: 8px 16px; }
.visit-compact .foot-links { padding-top: 16px; gap: 16px; }
.visit-compact .slogan { margin: 0; padding-top: 14px; }
.visit-compact .fine { margin-top: 0; }
.press-count { margin-block: 16px; color: var(--ink); }
.ws-plan { padding: 24px var(--gutter); display: grid; gap: 18px; }
.ws-plan dl { display: grid; gap: 12px; margin: 0; }
.ws-plan dt { color: var(--gold); }
.ws-plan dd { margin: 0; }
.ws-enquiry { display: grid; gap: 12px; max-width: 600px; }
.ws-enquiry label { display: grid; gap: 6px; }
.ws-enquiry input { width: 100%; min-height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); padding: 10px 12px; }
@media (min-width: 700px) { .ws-plan dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .cat-tools { grid-template-columns: minmax(0, 420px) auto auto minmax(0, 1fr); }
  .cat-sort, .cat-count { grid-column: auto; }
  .pd { gap: 48px; }
  .visit-compact { grid-template-columns: 1fr 1fr; }
  .visit-compact .slogan, .visit-compact .fine, .visit-compact .gem-credits { grid-column: 1 / -1; }
  .top-nav { gap: 18px; }
  .top-nav > .nav-group > a { font-size: .9rem; }
}
@media (max-width: 1079px) {
  body[data-page="product"] { padding-bottom: calc(148px + env(safe-area-inset-bottom)); }
  .pd-quick { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; z-index: 26; bottom: calc(64px + env(safe-area-inset-bottom)); left: 0; right: 0; padding: 10px var(--gutter); background: var(--navy); border-top: 1px solid var(--line); }
  .pd-quick > div { display: grid; min-width: 0; }
  .pd-quick b { font-size: .9rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pd-quick span { font-size: .85rem; }
  .pd-quick .btn { flex: none; padding-inline: 18px; font-size: .9rem; }
  body[data-page="product"] .chat { bottom: calc(156px + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .top { gap: 6px; padding-inline: 12px; }
  .top > .lang { display: none; }
  .top .brand { min-width: 0; }
  .top .brand-mark { width: 78px; }
  .menu-btn { min-width: 44px; padding-inline: 9px; }
}

.ws-enquiry { max-width: 680px; display: grid; gap: 16px; }
.ws-enquiry label { display: grid; gap: 6px; }
.ws-enquiry input, .ws-enquiry textarea { width: 100%; min-height: 44px; padding: 10px; color: var(--ink); background: var(--paper); border: 1px solid currentColor; font: inherit; border-radius: 4px; }
.ws-message pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }

.ot-items .bag-options { display: block; margin-top: 6px; color: var(--soft); }

.cat-sort > span { white-space: nowrap; }
@media (max-width: 1079px) { .tabbar span { font-size: 10px; line-height: 1.2; } }
@media (min-width: 1080px) and (max-width: 1199px) { .top-nav { gap: 12px; } .top-nav > .nav-group > a { font-size: .82rem; } }

/* Warm gallery and reading surfaces. Brand navigation keeps the navy palette. */
body.light-page {
  --bg: #f6f3e9; --paper: #f6f3e9; --ink: #002554;
  --soft: #41566e; --accent: #002554; --gold: #806038;
  --line: rgba(0, 37, 84, .24);
  background: #f6f3e9; color: var(--ink);
}
.light-page .backdrop { background: #f6f3e9; }
.light-page #air { display: none; }
.light-page .top, .light-page .sheet, .light-page .tabbar,
.light-page .visit, .light-page .search-dlg, .light-page .viewer,
.light-page .sheet-dlg, .light-page .chat {
  --bg: #002554; --ink: #f4f1ea; --soft: rgba(244,241,234,.82);
  --accent: #c49a6c; --gold: #c49a6c; --line: rgba(196,154,108,.35);
  color: var(--ink);
}
.light-page .page-head[data-scene="navy"], .light-page .cat[data-scene="navy"] { --bg: #f6f3e9; }
.light-page .scene[data-scene] { background: var(--bg); }
.light-page .cat-tools, .light-page .cat-sort select { background: #f6f3e9; }
.light-page .search input, .light-page .co-form input:not([type=radio]):not([type=checkbox]),
.light-page .co-form textarea, .light-page .ws-enquiry input, .light-page .ws-enquiry textarea { background: #fffdf7; }
.light-page .opts button[aria-pressed="true"], .light-page .chips button { color: #f6f3e9; }
.light-page .seg button[aria-selected="true"], .light-page .chips-row button[aria-selected="true"], .light-page .j-topics button[aria-selected="true"] { background: #002554; border-color: #002554; color: #f6f3e9; }
.light-page .chips button.all { color: var(--accent); }
.light-page .co-err, .light-page .field-err, .light-page .pd-error { color: #a02d1d; }
.light-page .co-form [aria-invalid="true"] { border-color: #a02d1d !important; }
.light-page .pd-quick { background: #f6f3e9; border-color: var(--line); }
.light-page .toast { --gold: #c49a6c; }
.light-page .frame { outline: 1px solid rgba(0,37,84,.08); }
.light-page .cat-h { font-size: 1.4rem; }
@media (max-width: 1079px) { .chat { display: none; } }
.light-page .seg button { padding: 8px 14px; border-radius: 8px 8px 0 0; }
.footer-more summary { cursor: pointer; min-height: 44px; padding-block: 8px; color: var(--soft); }
.footer-more > div { margin-top: 12px; }
.footer-more > div ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-more > div a { display: inline-block; min-height: 44px; padding-block: 8px; }
.visit-compact .foot-links { grid-template-columns: 1fr; }
.visit-compact .foot-links ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }

@media (min-width: 1080px) and (max-width: 1279px) {
  .top-nav { display: none; }
  .top .menu-btn { display: flex !important; }
  .sheet:not([hidden]) { display: flex !important; top: 72px; }
  body.menu-open { overflow: hidden; }
}
@media (min-width: 1280px) {
  .top-nav { gap: 10px; }
  .top-nav > .nav-group > a { padding-inline: 8px; white-space: nowrap; }
}

/* Factory milestones: a readable vertical timeline until there is room for three columns. */
.mmg-path { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.mmg-path::before { content: ''; position: absolute; left: 7px; top: 24px; bottom: 30px; width: 1px; background: var(--gold); opacity: .45; }
.mmg-path li { position: relative; min-width: 0; padding: 0 0 30px 32px; }
.mmg-path li:last-child { padding-bottom: 0; }
.mmg-path li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--gold); background: #f6f3e9; }
.mmg-milestone { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.mmg-year { font-family: 'Lustria', serif; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.2; color: var(--gold); }
.mmg-role { border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: .72rem; letter-spacing: .05em; }
.mmg-step { display: grid; gap: 10px; min-width: 0; }
.mmg-step h3 { font-size: 1.15rem; line-height: 1.4; }
.mmg-step p { margin: 0; color: var(--soft); font-size: .92rem; line-height: 1.8; text-align: left; hyphens: none; }
@media (min-width: 560px) and (max-width: 959px) {
  .mmg-path li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; }
  .mmg-milestone { align-content: start; align-items: start; margin-bottom: 0; }
}
@media (min-width: 960px) {
  .mmg-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .mmg-path::before { top: 5px; left: 7px; right: 7px; bottom: auto; width: auto; height: 1px; }
  .mmg-path li, .mmg-path li:last-child { padding: 26px 0 0; }
  .mmg-path li::before { left: 0; top: 0; }
  .mmg-milestone { margin-bottom: 18px; }
}

/* each seam meets halfway, so the colour is the same on both sides of it */
.light-page .scene[data-scene].blend { background: linear-gradient(to bottom,
  var(--seam-top) 0, var(--bg) 64px, var(--bg) calc(100% - 64px), var(--seam-bottom) 100%); }
/* section heights fall on half pixels, which can leave a hairline of the page colour between scenes */
.light-page .scene.blend + .scene.blend { margin-top: -1px; }
/* a scene on a light page carries its own text colour: inherited colour is fixed at the body (navy), so set it again here */
.light-page .scene[data-scene] { color: var(--ink); }
.light-page [data-scene="eternity-spirit"] { --accent: #7E5A2E; }

/* footer links as pictures: the three AVALON pages as photo tiles, help as icon chips */
.foot-links { grid-template-columns: minmax(0, 1fr); }
.foot-links .fl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.foot-links .fl-tile { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; padding: 0; min-height: 0; color: #F4F1EA; border: 1px solid var(--line); }
.foot-links .fl-tile::before { content: none; }
.foot-links .fl-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0B1D44; transition: transform .6s ease; }
.foot-links .fl-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 14, 36, .88), rgba(4, 14, 36, .05) 62%); }
.foot-links .fl-tile span { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; font-size: .86rem; line-height: 1.25; }
.foot-links .fl-tile:hover { border-color: var(--gold); }
.foot-links .fl-help { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-links .fl-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 99px; color: var(--soft); }
.foot-links .fl-chip::before { content: none; }
.foot-links .fl-chip svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foot-links .fl-chip:hover { color: var(--ink); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .foot-links .fl-tile img { transition: none; } }
footer .foot-links ul.fl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
footer .foot-links ul.fl-tiles > li { display: block; min-width: 0; }
footer .foot-links ul.fl-help { display: flex; flex-wrap: wrap; gap: 8px; }

/* scene covers turn like magazine pages */
.scene-art .photo { position: relative; cursor: pointer; }
.scene-art .photo .leaf { position: absolute; margin: 0; z-index: 2; transform-origin: left center; backface-visibility: hidden; pointer-events: none; will-change: transform; }
.scene-art .photo .leaf.leaf-under { z-index: 0; }
.scene-art .photo .frame.leaf-in { position: relative; z-index: 2; transform-origin: left center; backface-visibility: hidden; }
.scene-art .photo .leaf-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .08) 40%, rgba(255, 255, 255, .12) 70%, rgba(0, 0, 0, .25)); }

/* scene covers fill their frame to the edge, with no white showing round them */
.scene-art .photo .frame { background: transparent; }
/* the AVALON logo keeps its gold on every page and scene */
.brand-mark, [data-scene] .brand-mark, .light-page .brand-mark, body .top .brand-mark { background: #C49A6C; transition: none; }

/* the scene book is exactly the shape of its covers and never taller than the screen */
.sb-stage { width: min(100%, calc(78svh * var(--r, .8))); margin-inline: auto; }
.sb-pg { background: none; }
.sb-img { object-fit: cover; }

/* scene taglines sit on one line, sized to the column */
.scene-text { container-type: inline-size; }
.scene-tagline { white-space: nowrap; font-size: min(1.6rem, 4.9cqi); }
:lang(th) .scene-tagline, html[lang="th"] .scene-tagline { font-size: min(1.6rem, 5.6cqi); }

/* Cosmic Meridian: the pieces and the sky objects they are named after */
.sky-tag { position: absolute; top: 12px; left: 12px; right: 12px; max-width: 420px; display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 12px; background: rgba(3, 7, 24, .86); border: 1px solid rgba(196, 154, 108, .5); color: #E9EBF5; backdrop-filter: blur(6px); }
.sky-tag[hidden] { display: none; }
.sky-tag img { width: 64px; height: auto; border-radius: 4px; display: block; }
.sky-tag b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: #E8D3B4; }
.sky-tag small { display: block; font-size: .78rem; color: #C49A6C; margin: 2px 0 6px; }
.sky-tag p { font-size: .82rem; line-height: 1.55; margin: 0; }
.sky-tag-x { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(196, 154, 108, .5); background: none; color: #E9EBF5; font-size: 1.1rem; cursor: pointer; }
.obs-lede { color: var(--soft); max-width: 60ch; }
.obs-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.obs-piece { display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.obs-piece img { width: 100%; height: auto; display: block; border-radius: 6px; outline: 1px solid var(--line); outline-offset: 3px; transition: outline-color .3s; }
.obs-piece[aria-pressed="true"] img, .obs-piece:hover img { outline-color: #C49A6C; }
.obs-piece b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.05rem; }
.obs-piece small { display: block; color: var(--soft); font-size: .78rem; line-height: 1.4; }
.obs-piece em { display: block; font-style: normal; color: var(--accent); font-size: .8rem; margin-top: 4px; }

/* AVALON x BANCHA collection tour */
.cmap-go { justify-self: start; }
.cmap-map { overflow: hidden; border-radius: 14px; }
.cmap-pan { position: relative; transform-origin: 0 0; transition: transform 1.4s cubic-bezier(.6, .02, .2, 1); --s: 1; }
.cmap-pan .cpin { transform: translate(-50%, -50%) scale(calc(1 / var(--s))); transition: transform 1.4s cubic-bezier(.6, .02, .2, 1); }
.cmap-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cmap-route path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.6, .02, .2, 1), opacity .4s; }
.cmap.is-touring .cmap-route path { opacity: .85; }
.cmap.is-touring .cmap-list { display: none; }
.cmap.is-touring .cpin:not(.is-on) { opacity: .45; }
.cmap-stage { position: relative; display: none; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border-radius: 12px; overflow: hidden; background: rgba(7, 16, 40, .9); border: 1px solid rgba(196, 154, 108, .45); backdrop-filter: blur(8px); opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.cmap.is-touring .cmap-stage { display: grid; }
.cmap-stage.is-in { opacity: 1; transform: none; }
.cs-frames { position: relative; aspect-ratio: 4 / 3; background: #050B1E; }
.cs-f { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s ease; }
.cs-f img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-f.is-jewel { background: #fff; }
.cs-f.is-on { opacity: 1; }
.cs-f.is-on img { animation: cs-drift 3.4s ease-out both; }
@keyframes cs-drift { from { transform: translateY(8px); } to { transform: none; } }
.cs-cap { display: grid; align-content: start; gap: 4px; padding: 14px 16px; color: #F4F1EA; }
.cs-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 8px; padding: 0; }
.cs-steps li { flex: 1; display: grid; gap: 5px; font-size: .68rem; color: rgba(244, 241, 234, .55); }
.cs-steps li i { display: block; height: 2px; border-radius: 2px; background: rgba(244, 241, 234, .2); overflow: hidden; }
.cs-steps li.is-on { color: var(--gold); }
.cs-steps li.is-on i { background: var(--gold); }
.cs-cap b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.cs-cap > span { font-size: .85rem; color: rgba(244, 241, 234, .75); }
.cs-credit { font-size: .66rem; color: rgba(244, 241, 234, .55); }
.cs-credit[hidden] { display: none; }
.cs-credit a { color: inherit; }
.cs-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.cs-ctrl button { min-width: 36px; min-height: 36px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(196, 154, 108, .55); background: none; color: #F4F1EA; cursor: pointer; font: inherit; font-size: .78rem; padding: 0 10px; }
.cs-ctrl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cs-ctrl .cs-play svg path[d^="M8 5l"] { fill: currentColor; }
.cs-n { font-size: .75rem; color: rgba(244, 241, 234, .6); margin-inline: 4px auto; }
/* the map stays in view while the stage tells each stop: side by side on wide screens, stacked on phones */
.cmap-tour { display: grid; gap: 14px; justify-items: center; }
.cmap-tour > * { width: 100%; }
.cmap-tour .cmap-map { max-width: 620px; }
@media (min-width: 1000px) { .cmap.is-touring .cmap-tour { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .cmap.is-touring .cmap-stage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .cmap-stage { grid-template-columns: minmax(0, 1fr); }
  .cmap.is-touring .cmap-map { aspect-ratio: 4 / 3; }
  .cs-frames { aspect-ratio: 16 / 10; }
  .cs-cap { padding: 10px 12px; }
}

/* ---------- Artist Collaboration: a gallery, not a page of cards ----------
   Watercolour washes bloom behind the headings, every photo hangs in a paper mat,
   and each artist's name reads like a museum label. Photos keep their own shape. */
.art-page { position: relative; isolation: isolate; --paper: #F3EEE4; --wash-a: rgba(94, 142, 196, .42); --wash-b: rgba(196, 154, 108, .36); --wash-c: rgba(120, 170, 160, .28); }
.art-page.art-aneta { --wash-a: rgba(20, 20, 24, .55); --wash-b: rgba(196, 120, 120, .22); --wash-c: rgba(196, 154, 108, .2); }
.art-page::before { content: ''; position: absolute; inset: -40px calc(var(--gutter) * -1) auto; height: min(90vh, 760px); z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 22%, var(--wash-a), transparent 70%),
    radial-gradient(30% 26% at 78% 14%, var(--wash-b), transparent 72%),
    radial-gradient(34% 28% at 62% 46%, var(--wash-c), transparent 70%);
  filter: url(#wash) blur(6px); opacity: .95; }
.art-page::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* a brush stroke under each artist heading */
.art-page h1, .art-page .ar-story h2, .art-page .cmap h2, .art-page .story-gal h2, .art-page .story-pcs h2 { position: relative; padding-bottom: .38em; }
.art-page h1::after, .art-page .ar-story h2::after, .art-page .cmap h2::after, .art-page .story-gal h2::after, .art-page .story-pcs h2::after {
  content: ''; position: absolute; left: 50%; bottom: 0; width: min(220px, 60%); height: 12px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-6 62-7 95-5s70 4 98 1 31-3 41-2' fill='none' stroke='%23C49A6C' stroke-width='3.2' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M18 11c40-3 90-2 130-1s60 0 78-2' fill='none' stroke='%23C49A6C' stroke-width='1.2' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.art-page .cmap h2, .art-page .story-gal h2, .art-page .story-pcs h2 { text-align: left; }
.art-page .cmap h2::after, .art-page .story-gal h2::after, .art-page .story-pcs h2::after { left: 0; transform: none; width: min(160px, 50%); }
.art-page .page-head h1::after { left: 0; transform: none; }

/* paper mats: the photo sits inside a cream mat with a fine gold fillet, like a framed work */
.art-page .ar-photo .frame, .art-page .story-gal .frame, .art-wall .sc-img {
  background: var(--paper); padding: clamp(10px, 2.4vw, 22px); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(196, 154, 108, .55), 0 26px 44px -26px rgba(0, 0, 0, .85); }
.art-page .ar-photo .frame img, .art-page .story-gal .frame img { position: relative; inset: auto; height: auto; object-fit: contain; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.art-page .ar-photo .frame { aspect-ratio: auto; }
.art-page .story-gal .frame { aspect-ratio: auto; display: block; }
.art-page .story-gal .reel figure { margin: 0; }
.art-page .story-gal figcaption { font-size: .78rem; color: var(--soft); margin-top: 10px; font-style: italic; }

/* chapters hang as small framed works, in their own shape */
.art-page .ar-ch-img { aspect-ratio: auto; background: var(--paper); padding: 7px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(196, 154, 108, .5), 0 14px 24px -16px rgba(0, 0, 0, .9); overflow: visible; }
.art-page .ar-ch-img img { height: auto; aspect-ratio: auto; object-fit: contain; }
.art-page .ar-ch-img::after { display: none; }
.art-page .ar-ch:hover .ar-ch-img { transform: rotate(-.6deg); }
.art-page .ar-ch-img { transition: transform .5s ease; }

/* the artist's words, set large over a soft wash */
.art-page .story-quote { position: relative; border: 0; padding: clamp(18px, 4vw, 34px) clamp(16px, 4vw, 40px); text-align: center; isolation: isolate; }
.art-page .story-quote::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 50%, var(--wash-a), transparent 72%); filter: url(#wash) blur(4px); }
.art-page .story-quote p { font-style: italic; font-size: clamp(1.3rem, 3.6vw, 1.9rem); line-height: 1.45; }

/* the artist list: a gallery wall with museum labels under each work */
.art-wall { gap: clamp(28px, 5vw, 56px); align-items: start; }
.art-wall .story-card { border: 0; border-radius: 0; overflow: visible; gap: 14px; }
.art-wall .story-card:nth-child(2n) { margin-top: clamp(0px, 6vw, 70px); }
.art-wall .sc-img img { aspect-ratio: auto !important; height: auto; object-fit: contain !important; }
.art-wall .sc-img::after { display: none; }
.art-wall .sc-t { padding: 12px 14px; background: rgba(243, 238, 228, .06); border-left: 2px solid var(--gold); }
.art-wall .story-card:hover .sc-img { transform: translateY(-4px); }
.art-wall .sc-img { transition: transform .5s ease; display: block; }
@media (min-width: 1080px) { .art-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .art-wall .sc-img, .art-page .ar-ch-img { transition: none; } }
.art-page .ar-chap { align-items: start; } .art-page .ar-chap::before { display: none; }

/* journal tags in the AVALON CI pair only: navy #002554 and gold #C49A6C */
.tag { border-color: #C49A6C; color: #C49A6C; background: transparent; }
.tag.tag-news { background: #002554; border-color: #002554; color: #C49A6C; }
.tag.tag-craft { border-color: #C49A6C; background: #C49A6C; color: #002554; }
.light-page .tag:not(.tag-news):not(.tag-craft) { border-color: #002554; color: #002554; }

/* Hidden Facet: groups of sliding rows instead of one long list */
.posts.j-rows { display: grid; gap: clamp(28px, 5vw, 48px); padding-top: 12px; }
.j-group { display: grid; gap: 22px; }
.j-group > h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.j-row { display: grid; gap: 10px; min-width: 0; }
.j-row header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.j-row h3 { font-family: var(--display); font-weight: 400; font-size: 1.15rem; display: flex; align-items: baseline; gap: 8px; }
.j-row h3 small { font-family: var(--body); font-size: .78rem; color: var(--soft); }
.j-nav { display: flex; gap: 6px; }
.j-nav button { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.j-nav button:disabled { opacity: .3; cursor: default; }
.j-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.j-track { list-style: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 280px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.j-track::-webkit-scrollbar { display: none; }
.j-card { scroll-snap-align: start; display: grid; align-content: start; gap: 8px; min-width: 0; }
.posts .j-card .j-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0; border: 0; }
.posts .j-card .frame { aspect-ratio: 4 / 3; }
.posts .j-card b { font-size: 1.02rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.posts .j-card .txt > span { -webkit-line-clamp: 2; font-size: .86rem; }
.j-also { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: .74rem; color: var(--soft); }
.j-also a { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.j-also a:hover { border-color: #C49A6C; }
.posts.j-flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px 18px; padding-top: 14px; }
@media (min-width: 900px) { .j-track { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
/* source chips stay small: one line each, only as wide as the outlet name */
.posts .j-also a { display: inline-flex; align-items: baseline; gap: 4px; grid-template-columns: none; width: auto; padding: 1px 8px; border: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; font-size: .72rem; line-height: 1.6; }
.posts .j-also a small { font-size: .66rem; color: var(--soft); }
.posts .j-also > span { font-size: .72rem; }

/* the isle: each place is marked by its own scene logo, set right on the drawing */
.isle-viewport .isle-art .place.place-logo { width: clamp(88px, 16%, 176px); height: auto; margin: 0; padding: 6px 10px; border: 1px solid rgba(196, 154, 108, .45); border-radius: 10px; background: rgba(0, 37, 84, .72); backdrop-filter: blur(4px); translate: -50% -50%; display: block; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .9); transition: transform 850ms cubic-bezier(.22, .65, .2, 1), opacity .25s, border-color .3s, background .3s; }
.isle-viewport .isle-art .place.place-logo img { display: block; width: 100%; height: auto; }
.isle-viewport .isle-art .place.place-logo span { display: none; }
.isle-viewport .isle-art .place.place-logo.is-on, .isle-viewport .isle-art .place.place-logo:hover { border-color: #C49A6C; background: rgba(0, 37, 84, .9); }

.isle-art .place.place-logo::before { display: none; }
.isle-art .place.place-logo img { filter: brightness(1.55) saturate(1.1); }
/* logos keep their own colours on a pale plate so every name reads, dark letters included */
.isle-viewport .isle-art .place.place-logo { background: rgba(246, 242, 234, .9); border-color: rgba(196, 154, 108, .7); }
.isle-viewport .isle-art .place.place-logo.is-on, .isle-viewport .isle-art .place.place-logo:hover { background: #F6F2EA; border-color: #C49A6C; box-shadow: 0 0 0 3px rgba(196, 154, 108, .35), 0 10px 22px -14px rgba(0, 0, 0, .9); }
.isle-art .place.place-logo img { filter: none; }

/* the isle: logos sit spread round the drawing, each with a leader line and an arrow onto its place */
.isle-leads { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.isle-leads line { stroke: #C49A6C; stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .85; transition: opacity .3s; }
.isle-arrow { position: absolute; width: 0; height: 0; pointer-events: none; transform: rotate(var(--a)) scale(var(--pin-scale, 1)); transition: opacity .3s, transform 850ms cubic-bezier(.22, .65, .2, 1); }
.isle-arrow::before { content: ''; position: absolute; right: 0; top: -6px; border-left: 13px solid #C49A6C; border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6)); }
.isle-arrow::after { content: ''; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #FFE2BE; box-shadow: 0 0 0 3px rgba(196, 154, 108, .45), 0 0 12px rgba(255, 226, 190, .8); }
/* zoomed in, only the chosen place keeps its arrow; its logo moves beside the spot */
.isle-viewport.is-zoomed .isle-leads line { opacity: 0; }
.isle-viewport.is-zoomed .isle-arrow:not(.is-on) { opacity: 0; }
.isle-viewport .isle-art .place.place-logo { transition: transform 850ms cubic-bezier(.22, .65, .2, 1), left 850ms cubic-bezier(.22, .65, .2, 1), top 850ms cubic-bezier(.22, .65, .2, 1), opacity .25s, border-color .3s, background .3s; z-index: 2; }
.isle-viewport.is-zoomed .isle-arrow.is-on { transform: rotate(90deg) scale(var(--pin-scale, 1)); }

/* timeline cards: one height for every card in a year, each as wide as its own photo, so nothing is cropped */
.tl-year ul { align-items: flex-start; }
.tl-year li { flex: none; }
.tl-item, .tl-year li:first-child .tl-item { height: clamp(260px, 46vh, 440px); width: auto; aspect-ratio: var(--r, .8); max-width: none; }
.tl-item .tl-img img { object-fit: contain; }
.tl-item:hover .tl-img img, .tl-item:focus-visible .tl-img img { transform: none; }

/* an article's own press coverage */
.a-press ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.a-press a { display: grid; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.a-press small { color: var(--gold); font-size: .78rem; }
.a-press b { font-family: var(--display); font-weight: 400; font-size: 1.02rem; line-height: 1.4; }
.a-press a:hover b { color: var(--accent); }

/* home wall: justified rows that fit the screen. Each tile keeps its photo's shape (no crop) and the
   row height flexes a little so every row meets both edges */
.cards:has(.sc-just) { overflow: visible; }
.sc-just { --rh: clamp(120px, 24vw, 210px); display: flex; flex-wrap: wrap; gap: 8px; }
.sc-just .card { position: relative; display: block; flex: var(--r, 1) 1 calc(var(--r, 1) * var(--rh)); aspect-ratio: var(--r, 1); height: auto; min-width: 0; margin: 0; padding: 0; border-radius: 4px; overflow: hidden; background: #0A1733; text-decoration: none; color: inherit; box-shadow: 0 12px 22px -16px rgba(0, 0, 0, .85); }
.sc-just .card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sc-just .card-t { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 2px; padding: 30px 10px 9px; text-align: left; }
.sc-just .card-t small { font-size: .68rem; }
.sc-just .card-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: .84rem; line-height: 1.3; color: #F4F1EA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-just .card-logos { z-index: 2; }
.sc-just .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sc-just .sc-fill { flex: 1000 1 0; height: 0; }
.cards .sc-more { margin-top: 16px; }
a.tl-item { text-decoration: none; color: inherit; }

/* a work's own page: photos as justified rows, each whole, tap to enlarge */
.w-stat { color: var(--gold); font-family: var(--display); font-size: 1.05rem; margin-top: -4px; }
.w-logos { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 6px; }
.w-logos img { height: 30px; width: auto; padding: 5px 9px; border-radius: 6px; background: #fff; }
.w-gal { --rh: clamp(150px, 34vw, 300px); display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.w-ph { flex: var(--r) 1 calc(var(--r) * var(--rh)); aspect-ratio: var(--r); min-width: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent); cursor: zoom-in; }
.w-ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.w-gal .w-fill { flex: 1000 1 0; height: 0; }
.w-credits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; color: var(--soft); }
.w-go { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.w-wearers li { display: flex; flex-wrap: wrap; gap: 4px 10px; } .w-wearers li span { color: var(--gold); }

/* Princess Petal: the other royal tributes, each to its own page */
.origin-more { display: grid; gap: 10px; margin-top: 6px; }
.origin-more h4 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1rem; color: var(--gold); }
.origin-more ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.origin-more li a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; padding: 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); transition: background .25s, border-color .25s; }
.origin-more li a:hover, .origin-more li a:focus-visible { background: color-mix(in srgb, var(--gold) 10%, transparent); border-color: var(--gold); }
.origin-more img { width: 64px; height: 64px; object-fit: contain; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.origin-more span { display: grid; gap: 2px; font-size: .95rem; line-height: 1.35; }
.origin-more small { color: var(--soft); font-size: .78rem; }
.origin-all { justify-self: start; color: var(--gold); font-size: .92rem; text-underline-offset: 4px; }
/* the home wall: a link to the page of the category in view */
.sc-cat { margin: 0; }
.sc-cat a { color: var(--gold); text-underline-offset: 4px; }

/* one page per category of work */
.wk-note { color: var(--soft); max-width: 60ch; margin: 0 0 18px; }
.wk-kinds { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 26px; }
.wk-kinds::-webkit-scrollbar { display: none; }
.wk-kinds a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); text-decoration: none; color: inherit; font-size: .9rem; white-space: nowrap; }
.wk-kinds a small { opacity: .65; }
.wk-kinds a[aria-current] { background: var(--gold); border-color: var(--gold); color: #0E2350; }
.wk-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.wk-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; color: inherit; text-decoration: none; padding: 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); transition: border-color .25s, background .25s; }
.wk-item:hover, .wk-item:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.wk-ph { display: block; aspect-ratio: var(--r, 1.3); max-height: 420px; width: 100%; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, currentColor 6%, transparent); }
.wk-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wk-none { aspect-ratio: 4 / 3; }
.wk-t { display: grid; gap: 6px; align-content: center; }
.wk-t small { color: var(--soft); font-size: .82rem; }
.wk-t b { font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.3; }
.wk-t em { font-style: normal; color: var(--gold); font-size: .9rem; }
.wk-t span { color: var(--soft); font-size: .95rem; line-height: 1.6; }
.wk-t i { font-style: normal; color: var(--gold); font-size: .88rem; }
@media (min-width: 700px) {
  .wk-item { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 22px; padding: 14px; }
}
.w-go + .w-go { margin-top: 0; }

/* journal and read-next cards: every photo whole, never cut by the card. In the sliding rows each
   card takes its photo's own shape at one shared height, so wide slides keep their frames */
.posts .frame { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.posts .frame img { object-fit: contain; }
.j-track { grid-auto-columns: max-content; --jh: min(190px, 52vw); }
.j-track .j-card { width: clamp(220px, calc(var(--jh) * var(--r, 1.333)), min(380px, 84vw)); }
.posts .j-track .j-card .frame { aspect-ratio: auto; height: var(--jh); }

/* key phrases in articles and work pages */
.post-body strong, .w-fig + .post-body strong { font-weight: 600; color: var(--ink); }
/* a work set like an article: lead photo whole, then words, then the other photos */
.w-fig { margin: 16px 0; display: grid; gap: 6px; justify-items: center; }
.w-fig .w-hero { width: min(100%, calc(72svh * var(--r))); flex: none; }
.w-fig figcaption { color: var(--soft); font-size: .86rem; text-align: center; }
.w-more-ph { margin-top: 18px; }
.w-more-ph h2 { font-family: var(--display); font-weight: 500; font-size: 1.15rem; margin: 0 0 4px; }
/* the card's real sub-category beside its group */
.tag.tag-sub, .light-page .tag.tag-sub { border-color: color-mix(in srgb, #C49A6C 70%, transparent); color: #806038; background: color-mix(in srgb, #C49A6C 10%, transparent); }

/* readable logos: a logo whose ink is too close to the background sits on a small plate of the opposite tone.
   On photo cards every logo gets a plate, since the photo behind can be any colour */
.card-logos img[data-tone], .rc-logos img[data-navy="low"], .w-logos img[data-navy="low"], .w-logos img[data-cream="low"] { box-sizing: content-box; padding: 4px 8px; border-radius: 6px; }
.card-logos img[data-tone="light"], .card-logos img[data-tone="dark"]:not([data-navy="low"]) { background: rgba(0, 37, 84, .86); }
.card-logos img[data-navy="low"], .rc-logos img[data-navy="low"] { background: #F7F4EE; filter: none !important; }
.card-logos img[data-tone="boxed"] { padding: 0; }
body:not(.light-page) .w-logos img[data-navy="low"] { background: #F7F4EE; }
.light-page .w-logos img[data-navy="low"]:not([data-cream="low"]) { background: none; padding: 0; }
.light-page .w-logos img[data-cream="low"] { background: #0C2352; }

/* =================== red carpet as a magazine: one spread per event =================== */
.rc-list { gap: clamp(40px, 7vw, 88px); }
.rc-ev.mag-spread { padding: 0; border: 0; gap: 0; grid-template-columns: minmax(0, 1fr); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .38)); }
.mag-page { position: relative; background: #F7F4EE; color: #0C2352; padding: clamp(22px, 5vw, 56px) clamp(18px, 4.5vw, 52px) clamp(46px, 6vw, 64px); display: grid; gap: 16px; align-content: start; min-width: 0; }
.mag-page + .mag-page { border-top: 1px solid rgba(12, 35, 82, .12); }
.mag-run { margin: 0 0 6px; display: flex; justify-content: space-between; gap: 12px; font-size: .7rem; letter-spacing: .14em; color: #8A6A3E; border-bottom: 1px solid rgba(12, 35, 82, .18); padding-bottom: 10px; }
.mag-run span:first-child { font-family: 'Lustria', var(--display); letter-spacing: .3em; color: #0C2352; }
.mag-page .rc-d { color: #8A6A3E; font-size: .82rem; letter-spacing: .04em; }
.mag-page .rc-h h2 { color: #0C2352; font-size: clamp(1.9rem, 5.4vw, 3.4rem); line-height: 1.05; letter-spacing: -.01em; }
.mag-page .rc-v { color: #4A5873; font-size: .95rem; }
.mag-page .rc-tx { color: #24324F; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.8; max-width: 46ch; padding-left: 16px; border-left: 2px solid #C49A6C; }
.mag-page .rc-logos img { filter: none; }
.mag-page .rc-logos img[data-navy="low"]:not([data-cream="low"]) { background: none; padding: 0; }
.mag-page .rc-logos img[data-cream="low"] { box-sizing: content-box; padding: 4px 8px; border-radius: 6px; background: #0C2352; }
.mag-lead { margin: 8px 0 0; display: grid; gap: 8px; }
.mag-lead .rc-ph { height: auto; width: min(100%, calc(64svh * var(--r))); justify-self: start; }
.mag-page .rc-ph { background: rgba(12, 35, 82, .06); border-radius: 2px; }
.mag-page .rc-ph img { object-fit: contain; }
.mag-lead figcaption { font-size: .8rem; color: #4A5873; font-style: italic; font-family: var(--display); }
.mag-grid { --rh: clamp(120px, 26vw, 220px); display: flex; flex-wrap: wrap; gap: 8px; }
.mag-grid .rc-ph { flex: var(--r) 1 calc(var(--r) * var(--rh)); height: auto; aspect-ratio: var(--r); min-width: 0; scroll-snap-align: none; }
.mag-grid .mag-fill { flex: 1000 1 0; height: 0; }
.mag-page h3 { font-family: var(--display); font-weight: 500; font-size: 1rem; color: #8A6A3E; margin: 0 0 6px; }
.mag-credits ul { list-style: none; margin: 0; padding: 0; columns: 2 200px; column-gap: 24px; }
.mag-credits li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid rgba(12, 35, 82, .12); display: grid; gap: 2px; font-size: .92rem; }
.mag-credits b { font-weight: 500; color: #0C2352; }
.mag-credits span { color: #4A5873; font-size: .8rem; font-style: italic; font-family: var(--display); }
.mag-page .rc-links span { color: #8A6A3E; }
.mag-page .rc-links a { color: #0C2352; border-color: rgba(12, 35, 82, .3); }
.mag-page .rc-press a { color: #0C2352; border-bottom-color: rgba(12, 35, 82, .14); }
.mag-page .rc-press small { color: #8A6A3E; }
.mag-folio { position: absolute; bottom: 18px; margin: 0; font-family: 'Lustria', var(--display); font-size: .8rem; color: #8A6A3E; }
.mag-open .mag-folio { left: clamp(18px, 4.5vw, 52px); }
.mag-face .mag-folio { right: clamp(18px, 4.5vw, 52px); }
@media (min-width: 900px) {
  .rc-ev.mag-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mag-page + .mag-page { border-top: 0; }
  /* the spine: a soft fold where the two pages meet */
  .mag-open { background: linear-gradient(270deg, rgba(12, 35, 82, .10), rgba(12, 35, 82, 0) 7%) #F7F4EE; }
  .mag-face { background: linear-gradient(90deg, rgba(12, 35, 82, .10), rgba(12, 35, 82, 0) 7%) #F7F4EE; }
  .mag-flip .mag-open { order: 2; background: linear-gradient(90deg, rgba(12, 35, 82, .10), rgba(12, 35, 82, 0) 7%) #F7F4EE; }
  .mag-flip .mag-face { order: 1; background: linear-gradient(270deg, rgba(12, 35, 82, .10), rgba(12, 35, 82, 0) 7%) #F7F4EE; }
  .mag-flip .mag-open .mag-folio { left: auto; right: clamp(18px, 4.5vw, 52px); }
  .mag-flip .mag-face .mag-folio { right: auto; left: clamp(18px, 4.5vw, 52px); }
  .mag-grid { --rh: clamp(140px, 13vw, 210px); }
}
@media (max-width: 899px) {
  .mag-folio { display: none; }
  .mag-page { padding-bottom: clamp(26px, 6vw, 40px); }
  .mag-run { font-size: .6rem; letter-spacing: .08em; white-space: nowrap; }
  .mag-run span:last-child { overflow: hidden; text-overflow: ellipsis; }
}
/* the wall's tiles take their row's share of the width, never capped by the old card width, so each photo
   meets its tile's edges with no empty bands */
.sc-just .card { max-width: none; align-self: flex-start; }
.w-gal .w-ph, .mag-grid .rc-ph { align-self: flex-start; }

/* the photo wall: two rows that slide sideways together; every tile keeps its photo's own shape */
.cards:has(.sc-rail) { overflow: visible; }
.sc-rail-wrap { display: grid; gap: 12px; }
.sc-rail { --rh: clamp(150px, 24vw, 250px); display: grid; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
.sc-rail::-webkit-scrollbar { display: none; }
.sc-line { display: flex; gap: 8px; width: max-content; }
.sc-rail .card { position: relative; display: block; flex: none; height: var(--rh); width: calc(var(--rh) * var(--r, 1)); max-width: none; margin: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #0A1733; text-decoration: none; color: inherit; scroll-snap-align: start; }
.sc-rail .card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sc-rail .card-t { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 2px; padding: 30px 10px 9px; text-align: left; }
.sc-rail .card-t small { font-size: .68rem; }
.sc-rail .card-t b { font-family: var(--display); font-weight: var(--display-weight); font-size: .84rem; line-height: 1.3; color: #F4F1EA; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-rail .card-logos { z-index: 2; }
.sc-rail .card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sc-nav { display: flex; gap: 6px; justify-self: end; }
.sc-nav button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.sc-nav button:disabled { opacity: .3; cursor: default; }
.sc-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 900px) { .sc-rail { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } }
.sc-rail .card-t { background: linear-gradient(to top, color-mix(in srgb, var(--tint, #0A1E3F) 94%, transparent), color-mix(in srgb, var(--tint, #0A1E3F) 55%, transparent) 55%, transparent); }

/* =================== red carpet: editorial store layout =================== */
.rx-page { --rx-paper: #F5F2EC; --rx-ink: #0C2352; --rx-red: #B3122E; --rx-soft: #56627A; background: var(--rx-paper); }
.rx { color: var(--rx-ink); padding: 0 var(--gutter) 80px; max-width: 1600px; margin-inline: auto; }
.rx-mast, .rx-tag, .rx-big, .rx-v, .rx-lab, .rx-meta h2 { font-family: 'Kanit', var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: -.025em; line-height: .88; }
.rx-corner, .rx-br, .rx-see, .rx-par, .rx-card small, .rx-links span, .rx-wear span, .rx-press small { font-family: 'Poppins', var(--body); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
/* hero: title left, tagline right, the photo standing in the middle */
.rx-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 0 40px; min-height: min(92svh, 980px); align-content: start; }
.rx-corner { display: flex; justify-content: space-between; margin: 0; color: var(--rx-soft); }
.rx-mast { font-size: clamp(3.4rem, 15vw, 9rem); margin: 0; color: var(--rx-ink); }
.rx-tear { position: relative; margin: 0 auto; height: min(70svh, 720px); aspect-ratio: var(--r); max-width: 100%; }
.rx-tear img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rx-tear .rx-g { filter: grayscale(1) contrast(1.08) brightness(1.04); clip-path: var(--clip, polygon(60% 0, 100% 0, 100% 100%, 60% 100%)); }
.rx-tag { font-size: clamp(1.8rem, 6vw, 3.6rem); margin: 0; text-align: right; }
.rx-lede { margin: 0; max-width: 44ch; color: var(--rx-soft); font-size: .95rem; line-height: 1.7; text-align: left; }
.rx-see { justify-self: center; color: var(--rx-ink); text-decoration: none; padding: 10px 6px; }
.rx-see:hover { color: var(--rx-red); }
@media (min-width: 900px) {
  .rx-hero { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 32px; }
  .rx-corner { grid-column: 1 / -1; }
  .rx-mast { grid-column: 1; grid-row: 2; align-self: start; padding-top: 4vh; }
  .rx-tear { grid-column: 2; grid-row: 2 / 4; height: min(80svh, 820px); }
  .rx-tag { grid-column: 3; grid-row: 2; align-self: center; }
  .rx-lede { grid-column: 3; grid-row: 3; justify-self: end; text-align: right; align-self: end; }
  .rx-see { grid-column: 1; grid-row: 3; justify-self: start; align-self: end; }
}
/* section heads: a numbered label in red, a bracketed note on the right */
.rx-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid rgba(12, 35, 82, .18); padding-top: 14px; margin-bottom: 18px; }
.rx-lab { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--rx-red); }
.rx-lab b { font-weight: 700; }
.rx-br { margin: 0; color: var(--rx-soft); }
/* rails: one height, each photo in its own shape, slid or dragged sideways */
.rx-rail { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; padding-bottom: 6px; }
.rx-rail::-webkit-scrollbar { display: none; }
.rx-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rx-rail.is-drag * { pointer-events: none; }
.rx-index { padding: 30px 0 56px; }
.rx-card { position: relative; flex: none; height: clamp(260px, 38vw, 440px); width: calc(clamp(260px, 38vw, 440px) * var(--r, .75)); min-width: 150px; background: #E9E4DA; text-decoration: none; color: var(--rx-ink); scroll-snap-align: start; overflow: hidden; }
.rx-card img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.rx-card .rx-v { position: absolute; left: 8px; bottom: 10px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--rx-paper); text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.rx-card small { position: absolute; right: 8px; bottom: 8px; color: var(--rx-paper); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.rx-card:hover .rx-v, .rx-card:focus-visible .rx-v { color: #fff; }
.rx-ev { padding: 34px 0 60px; }
.rx-body { display: grid; gap: 22px; }
.rx-meta { display: grid; gap: 12px; align-content: start; }
.rx-meta h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); margin: 0; color: var(--rx-ink); }
.rx-par { margin: 0; color: var(--rx-soft); line-height: 1.7; }
.rx-tx { margin: 0; color: #24324F; line-height: 1.75; max-width: 46ch; text-align: left; }
.rx-logos img { filter: none; }
.rx-logos img[data-navy="low"]:not([data-cream="low"]) { background: none; padding: 0; }
.rx-logos img[data-cream="low"] { box-sizing: content-box; padding: 4px 8px; border-radius: 4px; background: var(--rx-ink); }
.rx-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; align-items: baseline; }
.rx-links span, .rx-wear span { color: var(--rx-red); }
.rx-links a { color: var(--rx-ink); text-decoration: none; font-size: .92rem; }
.rx-links a:hover { color: var(--rx-red); }
.rx-wear ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rx-wear li { font-size: .92rem; }
.rx-wear li::before { content: '('; color: var(--rx-soft); } .rx-wear li::after { content: ')'; color: var(--rx-soft); }
.rx-wear i { font-style: normal; color: var(--rx-soft); font-size: .8rem; }
.rx-press { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rx-press a { display: grid; gap: 2px; color: var(--rx-ink); text-decoration: none; padding: 8px 0; border-bottom: 1px solid rgba(12, 35, 82, .14); }
.rx-press small { color: var(--rx-soft); }
.rx-photos { --rh: clamp(260px, 46vw, 560px); }
.rx-ph { flex: none; height: var(--rh, 420px); aspect-ratio: var(--r); padding: 0; border: 0; background: #E9E4DA; cursor: zoom-in; scroll-snap-align: start; overflow: hidden; }
.rx-ph img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
@media (min-width: 900px) {
  .rx-body { grid-template-columns: minmax(260px, 1fr) minmax(0, 2.4fr); gap: 36px; align-items: start; }
  .rx-meta { position: sticky; top: 110px; }
}
/* a wide photo across the page, whole, with the event's name set huge over its lower edge */
.rx-break { position: relative; margin: 10px calc(var(--gutter) * -1) 40px; }
.rx-break .rx-wide { display: block; width: 100%; height: auto; aspect-ratio: var(--r); cursor: zoom-in; background: #0C2352; }
.rx-big { position: absolute; left: var(--gutter); bottom: clamp(10px, 3vw, 34px); margin: 0; font-size: clamp(2.6rem, 11vw, 9rem); color: var(--rx-paper); text-shadow: 0 6px 30px rgba(0, 0, 0, .45); pointer-events: none; }
.rx-big em { font-style: normal; color: var(--rx-red); text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.rx p { max-width: none; }
.rx .rx-tx, .rx .rx-lede { max-width: 46ch; }
@media (min-width: 900px) {
  .rx-hero { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .rx-mast { font-size: clamp(3.4rem, 8.6vw, 9rem); }
  .rx-tag { font-size: clamp(1.6rem, 3.6vw, 3.6rem); }
  .rx-tear { height: min(78svh, 820px); max-width: 42vw; }
}
.rx-wear li.np::before, .rx-wear li.np::after { content: none; }
@media (min-width: 900px) { .rx-mast { font-size: clamp(3.2rem, 7.2vw, 8.4rem); } }
/* red carpet page: logos sit straight on the paper, no plate */
.rx-logos img, .rx-logos img[data-cream="low"], .rx-logos img[data-navy="low"] { background: none !important; padding: 0 !important; }
.rx-logos img { height: 46px; max-width: 190px; }

/* =================== artist pages: a dark gallery with a fixed backdrop =================== */
body:has(.ly-page) { background: #05080F; }
.story.ly-page { --ly-ink: #EDEBE6; --ly-soft: rgba(237, 235, 230, .62); position: relative; max-width: none; margin: 0; padding: 0; color: var(--ly-ink); display: block; }
.ly-bg { position: fixed; inset: 0; z-index: 0; background: #05080F; pointer-events: none; }
.ly-shot { position: absolute; inset: 72px 0 0 34%; margin: 0; opacity: 0; transition: opacity 1.1s ease; display: grid; place-items: center; padding: 4vh 4vw 8vh; }
.ly-shot.on { opacity: 1; }
.ly-shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); filter: brightness(.92); }
.ly-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #05080F 0, rgba(5, 8, 15, .9) 30%, rgba(5, 8, 15, .25) 52%, rgba(5, 8, 15, 0) 70%); }
body.ly-done .ly-bg, body.ly-done .ly-view { opacity: 0; transition: opacity .5s; }
.ly-ch { position: relative; z-index: 1; min-height: 92svh; display: grid; align-content: end; gap: 14px; padding: 18vh var(--gutter) 16vh calc(var(--gutter) + 6vw); max-width: calc(560px + 6vw + var(--gutter) * 2); }
.ly-ch h1, .ly-ch h2 { font-family: 'Lustria', 'Maitree', serif; font-weight: 400; color: var(--ly-ink); line-height: 1.12; letter-spacing: -.005em; margin: 0; }
.ly-ch h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.ly-ch h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.ly-ch p { font-family: 'Maitree', 'Lustria', serif; font-weight: 300; font-size: clamp(1.08rem, 1.6vw, 1.32rem); line-height: 1.55; color: var(--ly-ink); margin: 0; max-width: 30ch; text-align: left; }
.ly-ch p + p { color: var(--ly-soft); }
.ly-k, .ly-n, .ly-view small, .ly-facts dt, .ly-btn { font-family: 'Poppins', var(--body); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.ly-ch .ly-k, .ly-ch .ly-n { font-family: 'Poppins', var(--body); font-size: .66rem; color: var(--ly-soft); max-width: none; }
.ly-k a { color: var(--ly-soft); text-decoration: none; }
.ly-k a:hover { color: var(--ly-ink); }
.ly-ch .ly-role { color: var(--ly-soft); font-size: 1rem; }
.ly-hero { min-height: calc(100svh - 72px); align-content: center; }
.ly-ch .ly-lede { margin-top: 18vh; }
.ly-profile { align-content: center; }
.ly-facts { display: grid; gap: 14px; margin: 0; }
.ly-facts div { display: grid; gap: 2px; }
.ly-facts dt { color: var(--ly-soft); }
.ly-facts dd { margin: 0; font-family: 'Maitree', serif; font-weight: 300; font-size: 1.05rem; }
.ly-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ly-btn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 9px 12px; background: #EDEBE6; color: #05080F; border: 0; border-radius: 0; text-decoration: none; cursor: pointer; }
.ly-btn b { font-weight: 600; }
.ly-btn[aria-expanded="true"], .ly-btn:hover { background: #C49A6C; color: #05080F; }
.ly-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; max-height: 40vh; overflow: auto; font-family: 'Maitree', serif; font-weight: 300; font-size: .95rem; color: var(--ly-soft); }
.ly-quote blockquote { margin: 0; }
.ly-quote blockquote p { font-family: 'Lustria', 'Maitree', serif; font-size: clamp(1.4rem, 2.6vw, 2rem); max-width: 24ch; }
.ly-quote cite { display: block; margin-top: 12px; font-style: normal; color: var(--ly-soft); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
/* the label of the work on view, fixed at the foot of the screen */
.ly-view { position: fixed; z-index: 3; left: calc(var(--gutter) + 6vw); bottom: 22px; display: grid; gap: 8px; justify-items: start; background: none; border: 0; padding: 0; color: var(--ly-ink); cursor: zoom-in; text-align: left; max-width: min(70vw, 420px); }
.ly-view small { color: var(--ly-soft); }
.ly-now { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; font-family: 'Maitree', serif; font-size: .82rem; }
.ly-now img { width: 22px; height: 22px; object-fit: contain; background: rgba(237, 235, 230, .08); grid-row: span 2; }
.ly-now b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ly-now i { font-style: normal; color: var(--ly-soft); font-size: .74rem; }
@media (max-width: 899px) {
  .ly-shot { inset: 72px 0 0 0; padding: 6vh 6vw 26vh; }
  .ly-shot img { filter: brightness(.55); }
  .ly-bg::after { background: linear-gradient(0deg, rgba(5, 8, 15, .92) 0, rgba(5, 8, 15, .5) 45%, rgba(5, 8, 15, .2) 100%); }
  .ly-ch { padding: 14vh var(--gutter) 18vh; }
  .ly-view { left: var(--gutter); bottom: 86px; }
}
/* after the story: a solid floor over the backdrop */
.ly-after { position: relative; z-index: 2; background: #05080F; padding: 40px var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.ly-after > * { max-width: 1280px; margin-inline: auto; width: 100%; }
.ly-cloud { position: relative; min-height: min(90svh, 820px); display: grid; align-items: end; }
.ly-field { position: absolute; inset: 0; }
.ly-dot { position: absolute; width: calc(78px * var(--s, 1)); aspect-ratio: 1; transform: translate(-50%, -50%); animation: ly-float 14s ease-in-out infinite; animation-delay: var(--d, 0s); background: #fff; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); transition: transform .3s; }
.ly-dot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ly-dot:hover { z-index: 2; outline: 1px solid #C49A6C; }
@keyframes ly-float { 0%, 100% { translate: 0 0; } 50% { translate: 6px -10px; } }
.ly-cloud-t { position: relative; z-index: 1; display: grid; gap: 10px; max-width: 34ch; padding: 18px 0; background: linear-gradient(90deg, rgba(5, 8, 15, .85), rgba(5, 8, 15, 0)); }
.ly-cloud-t h2 { font-family: 'Lustria', 'Maitree', serif; font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--ly-ink); margin: 0; }
.ly-cloud-t p { font-family: 'Maitree', serif; font-weight: 300; color: var(--ly-soft); margin: 0; }
.ly-after .cmap h2, .ly-gal .ly-k { color: var(--ly-ink); }
.ly-page .story-pn a { color: var(--ly-ink); }
.ly-seg { margin-bottom: 4vh; }
.ly-view { padding: 10px 12px; margin-left: -12px; background: rgba(5, 8, 15, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body:not(.ly-done) .ly-bg, body:not(.ly-done) .ly-view { opacity: 1; transition: opacity .5s; }
body:has(.ly-page) footer.visit { position: relative; z-index: 2; background: #05080F; }
.ly-btn { white-space: nowrap; align-self: flex-start; }
/* home, under Princess Petal: the list of other royal tributes is hidden for now (owner, 10 October 2026); the heading and link stay */
.origin-more ul { display: none; }
/* home loader: a still A that fades down and away once the page is ready */
.a-load i { display: block; width: min(300px, 56vw); opacity: 1; transform: none; transition: opacity 1s ease, transform 1.1s cubic-bezier(.22, .65, .2, 1); }
.a-load small { opacity: 1; animation: none; transition: opacity .6s ease; }
.a-load.out { transition: opacity .9s ease .35s, visibility .9s .35s; }
.a-load.out i { opacity: 0; transform: translateY(26px); }
.a-load.out small { opacity: 0; }
@media (max-width: 600px) { .ly-dot { width: calc(54px * var(--s, 1)); } }
/* owner 10 Oct: scene logos on the map without a frame */
.isle-viewport .isle-art .place.place-logo, .isle-viewport .isle-art .place.place-logo.is-on, .isle-viewport .isle-art .place.place-logo:hover { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
.isle-viewport .isle-art .place.place-logo.is-on img, .isle-viewport .isle-art .place.place-logo:hover img { filter: drop-shadow(0 0 6px rgba(196, 154, 108, .8)); }
@media (min-width: 1080px) {
  /* owner 10 Oct: scene cover shown whole, details scroll to the right */
  .isle-panel { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .isle-panel .sp { grid-template-columns: calc(100% - 36px) 300px; align-items: start; }
  .isle-panel .sp > * { scroll-snap-align: start; }
  /* owner 10 Oct: Invisible Setting heading and the film on one row */
  .craft { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 56px; align-items: center; }
  .craft > * { grid-column: 1 / -1; }
  .craft > .craft-head { grid-column: 1; grid-row: 1; max-width: none; }
  .craft > .film-row { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 0; }
  .craft > .film-row .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.isle-viewport .isle-art .place.place-logo img { filter: drop-shadow(0 0 1px rgba(246, 242, 234, .7)) drop-shadow(0 0 10px rgba(246, 242, 234, .35)); }
/* owner 10 Oct: less empty space between home sections on desktop */
@media (min-width: 760px) { body[data-page="home"] main > section:not(.hero) { padding-block: 36px; } }
@media (min-width: 1080px) {
  /* order: text left, schedule and buttons right */
  .order > .order-head { grid-column: 1; grid-row: 1 / span 3; }
  .order > :not(.order-head) { grid-column: 2; }
  .order > .order-go { align-self: start; }
  /* ART to WEAR: heading left, artists right, no empty half */
  .artists { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; }
  .artists > .artists-head { grid-column: 1; }
  .artists > .artist-wall { grid-column: 2; max-width: none; }
}