/* ==========================================================================
   DAMDA — site stylesheet
   Direction "Index". A gallery system: typography and the grid carry the
   identity. No symbol, no brand colour, no radius, no shadow.

   Every value that carries brand meaning comes from tokens.css. If you are
   about to hard-code a colour here, the token is missing — add it there.
   ========================================================================== */

@import url('./fonts.css');
@import url('./tokens.css');

/* --- reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;

  /* Thai does not space its words. Where the segmenter finds no break point
     this stops a long run pushing the page wider than the viewport. */
  overflow-wrap: break-word;
  word-break: normal;
}

/* Links are ink with a rule under them. There is no link colour, because
   there is no brand colour — the underline does the work. */
:where(a) { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--line-strong); }
:where(a):hover { text-decoration-color: var(--c-ink); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
::selection { background: var(--c-ink); color: var(--c-paper); }

/* --- layout ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.section { padding-block: var(--section-y); }
.section--tint { background: var(--bg-alt); }
.section--deep { background: var(--bg-invert); color: var(--text-invert); }
.section--deep a { color: var(--c-paper); text-decoration-color: rgba(248,243,234,.45); }
.section--rule { border-top: var(--border-hair); }
.measure { max-width: var(--measure); }
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* --- type -------------------------------------------------------------- */
.display, h1.display {
  font-size: var(--t-display); font-weight: var(--w-thin);
  line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: var(--w-light); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: var(--w-light); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
h3 { font-size: var(--t-h3); font-weight: var(--w-medium); line-height: var(--lh-tight); }

.lede { font-size: var(--t-body-lg); font-weight: var(--w-light); }
.muted { color: var(--text-muted); }
.small { font-size: var(--t-small); }
.caption { font-size: var(--t-caption); color: var(--text-muted); line-height: var(--lh-tight); }

/* The label and the index number are both mono. Together they are the
   catalogue texture — the single most recognisable thing in this system. */
.label {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-muted); line-height: 1;
}
.label--ink { color: var(--c-ink); }
.index {
  font-family: var(--font-mono); font-size: var(--t-index); font-weight: var(--w-regular);
  color: var(--text-faint); font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.price, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--w-regular); }

/* Setting the logotype in live text, when artwork cannot be used */
.logotype { letter-spacing: var(--ls-logo); font-weight: var(--w-light); text-transform: uppercase; }

/* --- buttons ----------------------------------------------------------- */
/* Square. Ink fill or ink rule. No third style, no colour. */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.78em 1.5em; border-radius: var(--radius);
  font-size: var(--t-small); font-weight: var(--w-regular);
  text-decoration: none; border: 1px solid var(--c-ink); cursor: pointer;
  background: transparent; color: var(--c-ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--c-ink); color: var(--c-paper); }
.btn--primary:hover { background: var(--c-paper); color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-paper); }
.btn--quiet { border-color: transparent; padding-inline: 0; text-decoration: underline; text-decoration-color: var(--line-strong); }
.btn--quiet:hover { background: transparent; text-decoration-color: var(--c-ink); }
.section--deep .btn { border-color: var(--c-paper); color: var(--c-paper); }
.section--deep .btn:hover { background: var(--c-paper); color: var(--c-ink); }
.section--deep .btn--primary { background: var(--c-paper); color: var(--c-ink); }
.section--deep .btn--primary:hover { background: transparent; color: var(--c-paper); }

/* --- header ------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-paper); border-bottom: var(--border-hair); }
.site-header__inner { display: flex; align-items: center; gap: var(--s-6); min-height: 72px; }
.site-header__logo { display: block; flex: none; text-decoration: none; }
.site-header__logo img { width: 186px; height: auto; }
.site-nav { display: flex; gap: var(--s-6); align-items: center; }
@media (max-width: 1100px) { .site-nav { gap: var(--s-4); } }

/* language switch — mono, small, sits before the menu */
.lang-switch {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none;
  color: var(--text-muted); border: 1px solid var(--line); padding: 0.45em 0.7em;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang-switch:hover { color: var(--c-ink); border-color: var(--c-ink); }
.site-nav a {
  color: var(--text); text-decoration: none; font-size: var(--t-small);
  padding-block: var(--s-2); border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--c-ink); }
/* The CTA is a button first and a nav link second — .site-nav a would
   otherwise win on specificity and paint ink text on an ink fill. */
.site-nav a.btn { border-bottom: 1px solid var(--c-ink); }
.site-nav a.btn--primary { background: var(--c-ink); color: var(--c-paper); }
.site-nav a.btn--primary:hover { background: var(--c-paper); color: var(--c-ink); }
.nav-toggle { display: none; background: none; border: var(--border-ink); border-radius: var(--radius); padding: 0.5em 1em; font-size: var(--t-small); }

@media (max-width: 900px) {
  .site-header__inner { flex-wrap: wrap; gap: var(--s-3); }
  .nav-toggle { display: inline-block; }
  .lang-switch { margin-inline-start: auto; }
  .site-nav { order: 3; width: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 0; display: none; padding-bottom: var(--s-3); }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav a { padding-block: var(--s-3); border-top: var(--border-hair); border-bottom: 0; }
  .site-nav .btn { margin-top: var(--s-3); justify-content: center; }
}

.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--c-ink); color: var(--c-paper); padding: var(--s-3) var(--s-4); text-decoration: none; }
.skip-link:focus { top: var(--s-3); }

/* --- hero -------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 1rem + 6vw, 6.5rem) var(--section-y); }
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; grid-template-columns: 1fr; }
/* The opening picture was capped at 460px and sat in the narrower column,
   so it read as a thumbnail beside the headline. Teak, 2026-09-28. */
@media (min-width: 940px) { .hero__grid { grid-template-columns: 0.85fr 1.15fr; align-items: center; } }
.hero__copy > * + * { margin-top: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__figure { position: relative; max-width: 760px; margin-inline: auto; width: 100%; }

/* --- the plate: a catalogue image field -------------------------------- */
/* Square, ruled, no radius, no glow. Product sits on white; everything else
   sits on grey-5. This is the only image treatment in the system. */
.plate {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  background: var(--c-plate); border: var(--border-hair); padding: 12%;
}
/* only line drawings keep the frame and the padding */
.plate--tint { background: var(--bg-alt); }
.plate--tall { aspect-ratio: 4 / 5; }
.plate--tint { background: var(--bg-alt); }
.plate svg { width: 100%; height: auto; }
.figure-note { margin-top: var(--s-3); font-size: var(--t-caption); color: var(--text-faint); }

/* --- the tag: a mono note, not a badge --------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 0.35em 0; color: var(--c-ink); border-bottom: 1px solid var(--c-ink);
}
.tag--quiet { color: var(--text-muted); border-bottom-color: var(--line-strong); }

/* --- grids -------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 680px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.grid--dense { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }

/* --- product card ------------------------------------------------------- */
.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card__media { position: relative; }
.card:hover .card__media .plate { border-color: var(--c-ink); }
.card__body { padding-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.card__index { margin-bottom: var(--s-1); }
.card__name { font-size: var(--t-h3); font-weight: var(--w-regular); line-height: var(--lh-tight); }
.card:hover .card__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.card__meta { font-size: var(--t-caption); color: var(--text-muted); }
.card__price { font-size: var(--t-small); }
.card__why { font-size: var(--t-small); color: var(--text-muted); margin-top: var(--s-2); }
/* A two-line product name used to push its badge below the neighbours'.
   The badge is pinned to the bottom so the row reads as one line of status.
   Teak, 2026-09-27. */
.card__badge { margin-top: auto; padding-top: var(--s-3); }
.card--pending .card__media .plate { background: var(--bg-alt); }
.card--sm .card__name { font-size: var(--t-body); }
.card[hidden] { display: none; }

/* --- availability ------------------------------------------------------- */
/* Two states, told with weight and a rule rather than colour. Grey-2 never
   carries the message on its own — the words do. */
.badge { font-family: var(--font-mono); font-size: var(--t-label); font-weight: var(--w-medium); letter-spacing: var(--ls-label); text-transform: uppercase; }
.badge--available { color: var(--c-ink); border-bottom: 1px solid var(--c-ink); padding-bottom: 2px; }
.badge--pending   { color: var(--text-muted); border-bottom: 1px dashed var(--line-strong); padding-bottom: 2px; }

/* --- filters ------------------------------------------------------------ */
.filters { display: grid; gap: var(--s-4); margin-block: var(--s-6) var(--s-7); padding-block: var(--s-5); border-top: var(--border-hair); border-bottom: var(--border-hair); }
.filters__row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
.filters__label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); min-width: 4.5rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  border: 0; background: none; padding: 0.15em 0; cursor: pointer;
  font-size: var(--t-small); color: var(--text-muted); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.chip:hover { color: var(--c-ink); border-bottom-color: var(--line-strong); }
.chip[aria-pressed="true"], .chip[aria-current="true"] { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.chip__count { font-family: var(--font-mono); font-size: var(--t-index); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.result-count { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--text-faint); }

.cat-group { margin-top: var(--s-8); }
.cat-group > h2 { margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: var(--border-rule); }

/* --- spec list ---------------------------------------------------------- */
/* Blank rows are never emitted. An empty field is a finished field. */
.specs { border-top: var(--border-rule); }
.specs__row { display: grid; grid-template-columns: 1fr; gap: var(--s-1); padding-block: var(--s-3); border-bottom: var(--border-hair); }
@media (min-width: 560px) { .specs__row { grid-template-columns: 220px 1fr; gap: var(--s-4); align-items: baseline; } }
.specs__key { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.specs__val { font-size: var(--t-small); }

.notice { border-top: var(--border-ink); padding-top: var(--s-3); font-size: var(--t-small); color: var(--text-muted); }
.notice strong { color: var(--c-ink); font-weight: var(--w-medium); }

.rule { border: 0; border-top: var(--border-hair); }
.eyebrow { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-6); padding-bottom: var(--s-3); border-bottom: var(--border-rule); }
.eyebrow::after { content: ''; flex: 1; }

/* --- forms -------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.field input, .field select, .field textarea {
  border: 0; border-bottom: var(--border-rule); background: transparent; border-radius: var(--radius);
  padding: 0.6em 0; font-size: var(--t-body); width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--c-ink); outline: none; }
.field__hint { font-size: var(--t-caption); color: var(--text-faint); }
.form-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.required { color: var(--c-signal); }

/* --- footer ------------------------------------------------------------- */
.site-footer { background: var(--bg-invert); color: var(--text-invert); padding-block: var(--s-8) var(--s-6); margin-top: var(--section-y); }
.site-footer a { color: var(--c-paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer__logo img { width: 210px; }
.site-footer ul { display: grid; gap: var(--s-2); }
.site-footer .label { color: var(--c-grey-2); }
.site-footer__bottom {
  margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid rgba(248,243,234,.18);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--t-caption); color: var(--c-grey-2);
}

/* --- draft banner ------------------------------------------------------- */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* --- plate--block: a ruled block, the replacement for the retired arch --- */
/* Direction "Index" has no framing device beyond the rule. A block is a
   square field with an ink rule on it. That is the whole treatment. */
.plate--block { border: var(--border-hair); background: var(--c-paper); padding: var(--s-7) var(--s-6); }
.section--deep .plate--block { border-color: rgba(248,243,234,.28); background: transparent; }
.plate--sm { aspect-ratio: 1 / 1; }


/* --- homepage fact strip ------------------------------------------------ */
/* Four facts a first-time visitor needs before anything else: what this is,
   what it holds, how big it is, how much of it can actually be bought. */
.grid--4-facts { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .grid--4-facts { grid-template-columns: repeat(4, 1fr); } }
.fact { font-size: var(--t-small); line-height: 1.5; margin-top: var(--s-2); }
.fact .num { font-family: var(--font-mono); font-size: var(--t-h3); font-variant-numeric: tabular-nums; }

/* --- product search ----------------------------------------------------- */
.search {
  border: 0; border-bottom: var(--border-rule); background: transparent;
  padding: 0.35em 0; font-size: var(--t-small); min-width: 260px; flex: 1; max-width: 420px;
}
.search:focus { border-bottom-color: var(--c-ink); outline: none; }
.search::placeholder { color: var(--text-faint); }


/* --- photographic plate -------------------------------------------------- */
/* Real photography sits edge-to-edge in the plate; the hairline stays, the
   12% padding does not — that padding exists to give a line drawing air. */
/* Photography is rectangular and fills its frame — the way ILKW present their
   own catalogue. No cut-outs: an object floating on the page ground reads as
   a sticker, not a photograph. Teak, 2026-09-26. */
.plate--photo, .plate--scene {
  padding: 0; overflow: hidden; background: var(--c-grey-5); border: 0;
}
.plate--photo img, .plate--scene img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--dur-slow, 420ms) var(--ease);
}
.card:hover .plate--photo img, .card:hover .plate--scene img { transform: scale(1.03); }
.hero__figure .plate--scene.plate--tall { aspect-ratio: 4 / 5; }


/* --- product gallery ---------------------------------------------------- */
/* Five room photographs: the first full width, the rest two up. Stacking all
   five at full width made the page a mile long and buried the specs.
   Teak, 2026-09-27 — "อยากให้เพิ่มรูป mood 5 รูป". */
.moodstack { display: grid; gap: var(--s-3); }
@media (min-width: 720px) {
  /* Columns, not a grid: the photographs keep their own heights, so grid rows
     would leave a gap under every short frame. */
  .moodstack { display: block; column-count: 2; column-gap: var(--s-3); }
  .moodstack > * { break-inside: avoid; margin-bottom: var(--s-3); }
  .moodstack > :first-child { column-span: all; }
}
/* No house aspect ratio. Each frame carries the picture's own dimensions
   inline, so a portrait photograph stays portrait and the shade and the base
   both stay in the picture. Forcing 4/3 here is what cut the products.
   Teak, 2026-09-27. */
.shotbig { aspect-ratio: 4 / 3; }          /* fallback only — inline style wins */

.gallery { display: grid; gap: var(--s-3); }
.gallery__main { aspect-ratio: 1 / 1; }
.gallery__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72px;
  gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2);
  scrollbar-width: thin;
}
.shot {
  border: var(--border-hair); background: var(--c-grey-5); padding: 0; cursor: pointer;
  aspect-ratio: 1 / 1; overflow: hidden; transition: border-color var(--dur) var(--ease);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot:hover, .shot[aria-current="true"] { border-color: var(--c-ink); }

/* --- colourways --------------------------------------------------------- */
/* Colourways: the lamp big, the colour named underneath — not baked into the
   picture. Teak, 2026-09-26. */
.vgrid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); list-style: none; }
.vswatch { display: grid; gap: var(--s-1); align-content: start; }
/* One colourway names one part, another names two. Without a floor on the
   text block the rows below it stagger. Teak, 2026-09-27. */
.vswatch__text { display: block; min-height: calc(2 * 1.5em); }
.vswatch__img { display: block; aspect-ratio: 1/1; background: var(--c-plate); border: var(--border-hair); overflow: hidden; margin-bottom: var(--s-3); }
.vswatch__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vswatch__name { font-size: var(--t-small); color: var(--c-ink); line-height: 1.35; }
.vswatch__pair { font-size: var(--t-caption); color: var(--c-ink); line-height: 1.5; display: block; }
.vswatch__pair i { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-faint); margin-inline-end: .5em; }


/* --- first shipment ------------------------------------------------------ */
/* What is actually on the boat. Stronger than "available now", which only
   means the product needs no Thai certification. */
.badge--first { color: var(--c-ink); border-bottom: 2px solid var(--c-ink); padding-bottom: 1px; margin-inline-start: var(--s-3); }
.fsbox { border-top: var(--border-ink); padding-top: var(--s-4); }
.fscols { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin-top: var(--s-3); font-size: var(--t-small); }
.fscols li { position: relative; padding-inline-start: var(--s-4); }
.fscols li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 1px; background: var(--c-grey-3); }

/* --- Thai inside a tracked label ---------------------------------------- */
/* Mono + uppercase + 0.14em tracking is the label voice. It is a Latin
   voice. Applied to Thai it separates a cluster from its vowels and tone
   marks and falls back to whatever Thai font the device happens to have.
   The generator wraps every Thai run in a label, and this puts it back on
   the Thai face at normal tracking. Teak, 2026-09-27. */
.th {
  font-family: var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  font-weight: inherit;
}
/* the label sits a hair small in Thai at the same px — nudge it back up */
.tag .th, .badge .th, .specs__key .th, .filters__label .th, .index .th,
.label .th, .chip__count .th, .result-count .th, .steps__h .th, .fam__s .th,
.site-footer__bottom .th, .field label .th { font-size: 1.06em; }


/* --- product page: the info column follows the pictures ------------------ */
/* Mood photography is tall and there can be several frames, so the right
   column used to stop a third of the way down and leave a field of nothing
   beside it. It now travels with the reader. Teak, 2026-09-27. */
@media (min-width: 900px) {
  .pdp-info { position: sticky; top: var(--s-6); align-self: start; }
}

.vswatch__pair--none { color: var(--text-faint); font-style: normal; }

/* a launch price keeps the RRP visible beside it, quieter and struck */
.price-was { color: var(--text-faint); text-decoration-thickness: 1px; margin-inline-start: .5em; font-size: .85em; }

/* --- Thai needs vertical room -------------------------------------------- */
/* The display and heading line-heights (1.04 / 1.16) were set for Latin, where
   nothing sits above the cap or below the baseline. Thai stacks a vowel above
   and another below the consonant, so at those ratios the marks get clipped —
   ไม้โท and สระอุ lose their tops and tails. Measured on the ILKW page at 390px:
   h2 and every .label were clipping. Teak, 2026-09-28. */
:lang(th) h1, :lang(th) .display { line-height: 1.22; }
:lang(th) h2, :lang(th) h3       { line-height: 1.34; }
:lang(th) .lede                  { line-height: 1.55; }
/* labels are set at 11px with line-height 1 — fine for Latin, never for Thai */
.label .th, .tag .th, .badge .th, .specs__key .th, .filters__label .th,
.index .th, .chip__count .th, .result-count .th, .vswatch__pair .th,
.site-footer__bottom .th { line-height: 1.6; }
.label, .tag, .badge, .filters__label, .specs__key { line-height: 1.5; }


/* --- homepage gift bands ------------------------------------------------ */
/* Three doors, not a price label. The block that stood here showed the full
   range and could not be clicked; a visitor who wanted a ฿2,000 gift had no
   way to say so. Each band leads to its own row on the gifts page.
   Teak chose this over an ink panel and an orange one. 2026-09-28. */
.gifthead { display: grid; gap: var(--s-4); }
@media (min-width: 860px) {
  .gifthead { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s-6); }
}
/* auto-fit, not repeat(3): the launch scope left two bands, and a hard three
   columns stranded the pair in the left two thirds of the row */
.gbands { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .gbands { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

.gband {
  display: grid; gap: var(--s-2); text-decoration: none; color: inherit;
  border: var(--border-hair); background: var(--c-paper); padding: var(--s-4);
  transition: border-color .18s ease, transform .18s ease;
}
.gband:hover, .gband:focus-visible { border-color: var(--c-ink); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .gband { transition: none; } .gband:hover { transform: none; } }

.gband__media { display: block; }

/* On a phone the square plate turned each band into a full screen of its own,
   so reading all three meant three screens of scrolling. Below 620px a band
   becomes a row instead: thumbnail on the left, the numbers on the right. */
@media (max-width: 619px) {
  .gband {
    grid-template-columns: 96px 1fr;
    grid-template-areas: "media price" "media note" "media from";
    align-items: start; column-gap: var(--s-4); row-gap: var(--s-1);
  }
  .gband__media { grid-area: media; align-self: center; }
  .gband__price { grid-area: price; margin-top: 0; }
  .gband__note  { grid-area: note; }
  .gband__from  { grid-area: from; padding-top: var(--s-2); }
}

.gband__price { font-size: var(--t-h3); font-weight: var(--w-light); margin-top: var(--s-3); }
.gband__note  { font-size: var(--t-caption); color: var(--text-muted); line-height: 1.5; }
.gband__from  {
  font-family: var(--font-mono); font-size: var(--t-caption); color: var(--text-faint);
  letter-spacing: .04em; padding-top: var(--s-3); border-top: 1px solid var(--line);
}


/* --- product film ------------------------------------------------------- */
/* preload="none" on purpose: 5 MB should not download because someone
   scrolled past. The poster carries the page until they press play. */
.filmstrip {
  display: block; width: 100%; height: auto; margin-top: var(--s-4);
  background: var(--c-grey-5); border: var(--border-hair);
}

/* --- Snowman 8 vs Snowman 12 -------------------------------------------- */
/* Three columns: the spec name, then one value per lamp. Only the rows that
   actually differ are printed, so the table stays four rows and reads as a
   decision rather than a datasheet. */
.cmp { margin-top: var(--s-5); border-top: 1px solid var(--line); }
.cmp__heads,
.cmp__row {
  display: grid; grid-template-columns: minmax(7rem, 1fr) 1.4fr 1.4fr;
  gap: var(--s-4); align-items: baseline;
}
.cmp__heads { align-items: end; padding: var(--s-5) 0; gap: var(--s-4); }
.cmp__row { padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.cmp__k { font-size: var(--t-caption); color: var(--text-muted); }
.cmp__v { font-family: var(--font-mono); font-size: var(--t-caption); }

.cmp__col { display: block; }
.cmp__col .plate { aspect-ratio: 1 / 1; border: 0; background: none; }
/* the plate is sized by the lamp's real diameter, and sits on a common
   baseline so the two are compared standing on the same table */
.cmp__scale { display: flex; align-items: flex-end; height: 100%; min-height: 15rem; }
.cmp__scale > .plate { width: calc(var(--w) * 100%); margin-inline: auto; }
.cmp__name  { font-size: var(--t-h3); font-weight: var(--w-regular); margin-top: var(--s-3); }
.cmp__price { font-family: var(--font-mono); margin-top: var(--s-1); }
.cmp__you {
  display: inline-block; margin-top: var(--s-2); font-size: var(--t-caption);
  font-family: var(--font-mono); color: var(--text-faint);
}
.cmp__go {
  display: inline-block; margin-top: var(--s-2); font-size: var(--t-caption);
}

@media (max-width: 620px) {
  /* the spec name moves above its two values rather than squeezing a third
     column onto a phone */
  .cmp__row { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
  .cmp__k { grid-column: 1 / -1; }
  .cmp__heads { grid-template-columns: 1fr 1fr; }
  .cmp__heads > span:first-child { display: none; }
}


/* --- how it works ------------------------------------------------------- */
/* ILKW ship this as Korean picture panels. Here it is text, so it switches
   language with the rest of the page and a marketplace feed can read it. */
.usegrid { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
@media (min-width: 760px) { .usegrid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7); } }
.usebox { break-inside: avoid; }
/* NOT .label here: that face is uppercased and letter-spaced for Latin, and
   these titles mix Thai with a product name — "แม่เหล็กและ DOCKING STATION"
   came out with the Latin half tracked apart and the Thai half beside it. */
.usebox__t {
  font-size: var(--t-body); font-weight: var(--w-medium); color: var(--c-ink);
  line-height: var(--lh-tight);
}


/* --- the light levels --------------------------------------------------- */
/* Four photographs instead of a six-row table: Teak, 2026-09-30, a picture
   reads better than a wall of text. The captions are ours, set under the
   picture, because ILKW's were burned into the image in English only. */
.steps { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); margin-top: var(--s-5); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--s-4); } }
/* stretch the cells and let the name row absorb the slack, so the second
   line of every caption sits on one baseline even when one name wraps to two
   lines and its neighbour does not. Teak, 2026-09-30: grid ต้องตรง */
.steps { align-items: stretch; }
.steps__c { display: grid; grid-template-rows: auto 1fr auto; }
.steps__c img { width: 100%; height: auto; display: block; }
.steps__l { font-size: var(--t-caption); margin-top: var(--s-2); }
.steps__h {
  font-family: var(--font-mono); font-size: var(--t-caption);
  color: var(--text-faint); margin-top: 2px;
}


/* --- the tin ------------------------------------------------------------ */
/* ILKW's own packaging photograph. It sat in the text and nowhere in the
   pictures until Teak noticed, 2026-09-30. */
.tinshot {
  display: block; width: 100%; height: auto; margin-top: var(--s-5);
  max-width: 900px;
}


/* --- a picture inside a story ------------------------------------------- */
.storyshot { margin: var(--s-5) 0 0; }
.storyshot img { width: 100%; height: auto; display: block; }


/* --- the whole SNOWMAN family ------------------------------------------- */
/* Teak, 2026-10-01: "ในหน้าโชว์รูปให้ครบทุกโมเดลใน snowman". Nineteen studio
   renders on one page. They are all square and all normalised to the same
   fill by build_images.py, so the lamps line up across rows without any
   per-cell measuring — the thing the light-levels strip had to be rebuilt
   twice to get right. */
.famblock { margin-top: var(--s-7); }
.famblock > h2 { margin-bottom: var(--s-2); }
.fam__g { margin-top: var(--s-5); }
/* Small cells. Teak, 2026-10-01: "ใส่แค่เล็กๆ ก็พอ" — nineteen lamps are a
   reference list, not nineteen hero shots. auto-fill rather than a fixed
   column count so the row stays full at every width, and the renders are all
   normalised to one fill by build_images.py, so a 104px cell still shows the
   lamps at honest relative sizes. */
.fam {
  display: grid; margin-top: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--s-3) var(--s-2);
}
@media (min-width: 560px) { .fam { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
/* every cell is the same three rows deep, so a name that wraps to two lines
   does not push its own size line off the baseline its neighbours sit on */
.fam__c {
  display: grid; grid-template-rows: auto 1fr auto;
  text-decoration: none; color: inherit;
}
/* a die-cut square: the lamp sits on the page ground, no field, no rule.
   Teak, 2026-10-01 — "เอาแบบ dicut ทั้งหมด". This is the one place on the site
   that does not use the plate; everywhere else photography keeps its frame,
   because an object floating on the ground reads as a sticker. Here the
   objects ARE the set, and nineteen white boxes read as nineteen boxes. */
.fam__p { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.fam__p img { width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform var(--dur-slow, 420ms) var(--ease); }
a.fam__c:hover .fam__p img { transform: scale(1.06); }
.fam__n {
  font-size: var(--t-caption); line-height: var(--lh-tight);
  margin-top: 6px; color: var(--c-ink);
}
.fam__s {
  font-family: var(--font-mono); font-size: var(--t-index);
  color: var(--text-faint); margin-top: 1px; letter-spacing: 0;
}
/* a model DAMDA does not carry: shown, but visibly not for sale. The fade is
   the only marker on the cell — a per-cell caption wrapped to two lines at
   this size and broke the row's baseline. The footnote explains the fade. */
.fam__c--off img { opacity: .5; }
.fam__c--off .fam__n, .fam__c--off .fam__s { color: var(--text-faint); }
.fam__f { margin-top: var(--s-6); }