/* Samui Carvings. A museum-catalogue page on cream paper, opened by a full-screen "gallery lamp" hero on his
   Ramayana panel. Mobile first (designed at 390 px); one centred column on wider screens. Only his real photos. */

@font-face { font-family: "Fraunces"; src: url(fonts/fraunces.woff2?v=20261011b) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Anuphan"; src: url(fonts/anuphan-latin.woff2?v=20261011b) format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --paper: #f4eee3;
  --paper-2: #ebe3d4;
  --ink: #17140f;
  --ink-2: #5b5347;
  --rule: rgba(23, 20, 15, .16);
  --cobalt: #1550a8;
  --cream: #f6eedf;
  --maroon: #3b1d21;   /* the panel's own fabric, for the sides of the hero on wide screens */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Anuphan", system-ui, sans-serif;
  --pad: 24px;
  --col: 480px;        /* the widest the column gets */
  /* a row of punched holes, used as the divider line */
  --holes: radial-gradient(circle at 6px 3px, rgba(23, 20, 15, .55) 0 1.6px, transparent 2.1px);
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }
main { overflow-x: clip; }

a:focus-visible, .rail:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.rail:focus-visible { outline-offset: -2px; }
.skip { position: absolute; z-index: 10; left: 12px; top: -80px; padding: 12px 16px; border-radius: 4px; background: var(--ink); color: var(--paper); font: 500 16px/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- header: his logo in cream, floating over the hero ---------- */
.top { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 60px; display: flex; align-items: center;
  padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)); }
.mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 4px; }
.mark:focus-visible { outline-color: var(--cream); outline-offset: 0; }
.logo { display: block; width: 44px; height: 42px; background: var(--cream);
  -webkit-mask: url(assets/logo-mask.png?v=20261011b) center / contain no-repeat; mask: url(assets/logo-mask.png?v=20261011b) center / contain no-repeat; }

/* ---------- type ---------- */
.h2 { font: 360 46px/1 var(--serif); letter-spacing: -.02em; }
.cap { font: 400 14px/1.45 var(--sans); color: var(--ink-2); letter-spacing: .01em; }
.body { font: 400 17px/1.6 var(--sans); color: var(--ink); text-wrap: pretty; }
.h2, .title, .statement, .addr, .label h3 { text-wrap: balance; }
.label .line, .cap { text-wrap: pretty; }

/* ---------- hero: the gallery lamp, full screen ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #2b1610; text-align: center; }
/* --lx/--ly: where the lamp points, in px inside the art. lamp.js moves them. */
.lamp { position: absolute; inset: 0; --lx: 50%; --ly: 30%; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.lamp img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 18%; }
.lamp .shade, .lamp .warm, .lamp .glint { position: absolute; inset: 0; pointer-events: none; }
/* away from the lamp the panel sits in soft room light, never dark */
.lamp .shade { background: radial-gradient(circle at var(--lx) var(--ly),
  rgba(24, 10, 4, 0) 0, rgba(24, 10, 4, 0) 60px, rgba(24, 10, 4, .12) 140px, rgba(24, 10, 4, .22) 260px, rgba(24, 10, 4, .30) 480px); }
/* the lamp warms what it touches */
.lamp .warm { mix-blend-mode: soft-light; background: radial-gradient(circle at var(--lx) var(--ly),
  rgba(255, 205, 135, .95) 0, rgba(255, 192, 118, .45) 90px, rgba(255, 185, 110, 0) 180px); }
/* and only the gold leaf catches it: the glint is masked to the gold, placed exactly like the photo */
.lamp .glint { mix-blend-mode: screen; background: radial-gradient(circle at var(--lx) var(--ly),
  rgba(255, 242, 214, 1) 0, rgba(255, 230, 186, .7) 38px, rgba(255, 222, 172, .28) 90px, rgba(255, 218, 165, 0) 150px);
  -webkit-mask: url(assets/ramayana-gold.webp?v=20261011b) 50% 18% / cover no-repeat; mask: url(assets/ramayana-gold.webp?v=20261011b) 50% 18% / cover no-repeat; }

/* Wider than the panel (tablets in landscape, laptops): show the whole panel at full height, sharp, and let its
   edges melt into a field of the same maroon, so the first screen is still one wall of his work, edge to edge.
   lamp.js uses the same media query to place the light. */
@media (min-aspect-ratio: 3/4) {
  .hero { background: var(--maroon); }
  /* sides and foot fade out, so the carving's gold base melts into the maroon before the cream takes over */
  .lamp img { width: auto; margin: 0 auto;
    -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(#000 80%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(#000 80%, transparent);
    mask-composite: intersect; }
  .lamp .glint { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: auto 100%; mask-size: auto 100%; }
}

/* the title sits on a soft maroon scrim; the last strip of the hero dissolves into the cream page,
   mostly behind the bottom bar on the first screen, so it reads as a soft ending as you scroll */
.hero .scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(38, 17, 10, 0) 0, rgba(38, 17, 10, .5) 36%, rgba(38, 17, 10, .76) 66%, rgba(52, 26, 16, .5) 86%, rgba(92, 58, 38, .2) 100%); }
/* eased (smoothstep) steps, so the fade has no visible band */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244, 238, 227, 0.000) 0%, rgba(244, 238, 227, 0.028) 10%, rgba(244, 238, 227, 0.104) 20%, rgba(244, 238, 227, 0.216) 30%, rgba(244, 238, 227, 0.352) 40%, rgba(244, 238, 227, 0.500) 50%, rgba(244, 238, 227, 0.648) 60%, rgba(244, 238, 227, 0.784) 70%, rgba(244, 238, 227, 0.896) 80%, rgba(244, 238, 227, 0.972) 90%, rgba(244, 238, 227, 1.000) 100%); }

.hero-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: 156px; color: var(--cream); }
/* one line on every phone: 52 px at 390 px wide, smaller on narrower screens */
.title { margin-top: 14px; font: 340 min(52px, calc((100vw - 48px) / 6.75))/.98 var(--serif); letter-spacing: -.025em; color: var(--cream); text-shadow: 0 2px 24px rgba(20, 8, 4, .5); }
.tagline { margin-top: 12px; font: 400 19px/1.35 var(--serif); color: #f1e6d3; }
.since { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px;
  font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 238, 223, .78); }
.since::before, .since::after { content: ""; width: 28px; height: 1px; background: var(--cream); opacity: .45; }

/* the hint shows only when the lamp script runs, and fades once someone moves the lamp */
.hint { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; border-radius: 999px; visibility: hidden;
  font: 500 14px/1 var(--sans); color: #f6ecdc; background: rgba(28, 14, 8, .5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .6s ease; }
.hint i { width: 12px; height: 12px; border-radius: 50%; background: #f2c58a; box-shadow: 0 0 10px rgba(255, 196, 120, .9); }
.has-lamp .hint { visibility: visible; }
.hero.lit .hint { opacity: 0; }
.for-mouse { display: none; }
@media (hover: hover) and (pointer: fine) { .for-touch { display: none; } .for-mouse { display: inline; } }

/* ---------- photographs ---------- */
.crop { position: relative; overflow: hidden; background: #1d1a16; }
.crop img { display: block; width: 100%; height: auto; }

/* ---------- look closer ---------- */
.closer { padding: 64px var(--pad) 24px; }
.closer .cap { margin-top: 12px; }
.stops { margin-top: 36px; display: grid; gap: 56px; }
.stop { position: relative; }
.stop--bleed { margin: 0 calc(-1 * var(--pad)); }  /* the closest view runs edge to edge */
/* the leader line and ring scale with the photo; the strokes keep their width */
.stop .lead { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.lead * { vector-effect: non-scaling-stroke; }
.lead .halo { stroke: rgba(8, 10, 24, .55); fill: none; stroke-width: 3.25; }
.lead .hair { stroke: #fff; fill: none; stroke-width: 1.35; }
.lead .ink { stroke: var(--ink); stroke-width: 1; }
/* the note starts on the leader line: x and the gap above are shares of the figure's width (342 or 390 at design size) */
.note { margin-top: 5.848%; padding-left: calc(43.947% - 1px); font: 400 23px/1.16 var(--serif); letter-spacing: -.005em; }
.stop--bleed .note { margin-top: 5.128%; padding-left: calc(44.692% - 1px); }

/* ---------- stories ---------- */
.stories { padding: 88px 0 8px; }
.ask { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; font: 500 16px/1 var(--sans); color: var(--cobalt); text-decoration: none; }
.ask::after { content: "\2192"; font-size: 17px; transform: translateY(-1px); }

/* ---------- the two swipe rails (stories, guests): the current slide sits in the middle ---------- */
.rail { --slide: min(272px, 100vw - 96px); --gap: 18px; display: flex; gap: var(--gap); margin-top: 30px; padding: 6px 0 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
/* spacers, so the first and the last slide can reach the middle too */
.rail::before, .rail::after { content: ""; flex: 0 0 calc((100% - var(--slide)) / 2 - var(--gap)); }
.slide { flex: 0 0 var(--slide); margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
/* a tap or arrow key may pass several slides at once (rail.js); a swipe still stops at every one */
.rail.is-moving .slide { scroll-snap-stop: normal; }

/* stories: every piece hangs in the same stage, so the labels below line up */
.stage { aspect-ratio: 272 / 341; display: flex; align-items: center; justify-content: center; }
.plate { display: block; width: 100%; height: auto; background: #2b1f17;
  box-shadow: 0 0 0 .5px rgba(40, 26, 12, .28), 0 1px 1px rgba(40, 26, 12, .22), 0 8px 16px -8px rgba(40, 26, 12, .30), 0 26px 40px -22px rgba(40, 26, 12, .42); }

/* the label: a hairline that ends in the slide number, then the title, one line and the link (left-aligned) */
.label { margin-top: 20px; }
.num { display: flex; align-items: center; gap: 12px; font: 500 14px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.num::before { content: ""; flex: 1; height: 1px; background: var(--rule); }
.label h3 { margin-top: 16px; font: 400 25px/1.1 var(--serif); letter-spacing: -.01em; }
.label .line { margin-top: 8px; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }

/* with JS: the slide in the middle is at full strength; its neighbours fade into the paper and hide their label */
.rail.is-ready .slide > :first-child, .rail.is-ready .label { transition: opacity .35s ease; }
.rail.is-ready .slide:not(.is-current) > :first-child { opacity: .42; }
.rail.is-ready .slide:not(.is-current) .label { opacity: 0; pointer-events: none; }
.rail.is-ready .slide:not(.is-current) { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .rail.is-ready .slide > :first-child, .rail.is-ready .label { transition: none; } }

/* ---------- artist ---------- */
.artist { padding: 104px var(--pad) 0; }
.artist .photo { margin-top: 30px; }
/* lighting only: a soft falloff toward the lamp-lit hide, like a lit vitrine; the photo itself is untouched */
.artist .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 78% 70% at 50% 62%, rgba(12, 9, 5, 0) 52%, rgba(12, 9, 5, .38) 100%); }
.artist .cap { margin-top: 12px; }
.statement { margin-top: 30px; font: 360 30px/1.17 var(--serif); letter-spacing: -.015em; }
.artist .body { margin-top: 18px; }
.process { margin-top: 34px; padding-top: 22px; background: var(--holes) 0 0 / 12px 6px repeat-x; font: 400 22px/1.3 var(--serif); letter-spacing: -.005em; }

/* ---------- guests: one shape for every photo ---------- */
.guests { padding: 96px 0 8px; }
.stories .h2, .guests .h2 { padding: 0 var(--pad); }
.shot { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(23, 20, 15, .08); }

/* ---------- class & visit ---------- */
.class { margin-top: 104px; padding: 0 var(--pad); }
.class .h2, .visit .h2 { margin-top: 30px; }
.class .body { margin-top: 14px; }
.class .ask { margin-top: 4px; }
.visit { margin-top: 96px; padding: 0 var(--pad); }
.addr { margin-top: 18px; font: 360 30px/1.2 var(--serif); letter-spacing: -.015em; }
.visit .cap { margin-top: 10px; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 22px; border-radius: 4px; font: 500 16px/1 var(--sans); text-decoration: none; letter-spacing: .01em; }
.btn--cobalt { background: var(--cobalt); color: #fff; }
.btn--line { border: 1px solid var(--ink); color: var(--ink); }
.visit .btn { margin-top: 24px; }

/* contact details, set like the facts under a museum label */
.details { margin-top: 40px; border-top: 1px solid var(--rule); }
.details div { padding: 14px 0 13px; border-bottom: 1px solid var(--rule); }
.details dt { font: 500 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.details dd { margin-top: 4px; font: 400 21px/1.3 var(--serif); letter-spacing: -.005em; overflow-wrap: anywhere; }
.details a { display: inline-block; padding: 9px 0; margin: -9px 0; color: var(--cobalt); text-decoration: none; }

/* ---------- footer & fixed bar ---------- */
.foot { position: relative; margin-top: 96px; padding: 44px var(--pad) calc(120px + env(safe-area-inset-bottom)); display: grid; justify-items: center; }
.foot::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 6px; background: var(--holes) 0 0 / 12px 6px repeat-x; }
.foot .punched { display: block; width: 150px; height: auto; }
.foot .cap { margin-top: 18px; text-align: center; }

.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 11px calc(16px + env(safe-area-inset-right)) calc(11px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background: rgba(244, 238, 227, .94); border-top: 1px solid var(--rule); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bar .btn { height: 50px; padding: 0; }

/* ---------- wider screens: one centred column; the rails stay full width, like a gallery wall ---------- */
@media (min-width: 600px) {
  .closer, .artist, .class, .visit, .foot { max-width: calc(var(--col) + 2 * var(--pad)); margin-inline: auto; }
  .stories .h2, .guests .h2 { max-width: calc(var(--col) + 2 * var(--pad)); margin-inline: auto; }
  .stop--bleed { margin: 0; }   /* keep the closest view pixel for pixel */
  /* the contact bar floats as one small panel instead of a full-width strip */
  .bar { left: 50%; right: auto; bottom: calc(16px + env(safe-area-inset-bottom)); width: 400px; transform: translateX(-50%);
    padding: 10px; border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 14px 34px -16px rgba(23, 20, 15, .4); }
  .foot { padding-bottom: 140px; }
}
@media (min-width: 1100px) {
  /* off the column, bottom right */
  .bar { left: auto; right: calc(24px + env(safe-area-inset-right)); transform: none; }
}
@media (min-width: 768px) {
  .rail { --slide: 320px; --gap: 28px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 3/4) {
  .title { font-size: 68px; }
  .tagline { font-size: 22px; }
}