/* LATVERA lux — the CONTOUR material study, "Surface. With depth." (#contour-expression, homepage, after the CONTOUR film).
 * It used to be chapter 2 of the CONTOUR scroll pin: a second forced scrub through three surface states. It is now one
 * compact panel in the site's own grammar (an 8 px inset ink panel, var(--radius), a nested rounded stage) with three
 * named choices: Smooth panel / Folded relief / Perforated screen. No pin, no scroll range, no wheel or touch capture.
 *
 * States: the three stills are the at-rest, reduced-motion and no-JS display. Without JS the checked radio decides which
 * still shows (:has); with JS (lux/surface-study.js, [data-surface-live]) data-surface-shown decides, so the still can lag
 * the checked radio while the film plays the change in between ([data-surface-mode="film"] shows the canvas).
 * Every selector starts at #contour-expression, so nothing here reaches the protected zone or the CONTOUR film. */

#contour-expression.lux-surface {
  position:relative; box-sizing:border-box; padding:8px; color:var(--lux-cream);
  --surface-x:60%; --surface-y:50%;
}
#contour-expression .lux-surface-panel {
  display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); grid-template-areas:"stage copy";
  gap:8px; box-sizing:border-box; padding:8px;
  height:calc(100svh - 16px); min-height:560px; max-height:1120px;
  border-radius:var(--radius); background:var(--lux-panel);
}

/* ── The stage: one locked-camera scene, the panel changes. The stills and the film canvas share one object-fit and one
 * object-position, so the canvas lands exactly on the still it replaces (lux/surface-study.js reads it from here). ──── */
#contour-expression .lux-surface-stage {
  grid-area:stage; position:relative; min-width:0; min-height:0; overflow:hidden; isolation:isolate;
  border-radius:max(18px, calc(var(--radius) - 8px)); background:#cbbfae;
}
#contour-expression .lux-surface-still { position:absolute; inset:0; z-index:1; display:block; visibility:hidden; opacity:0; }
#contour-expression .lux-surface-still img,
#contour-expression .lux-surface-film {
  position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:var(--surface-x) var(--surface-y);
}
#contour-expression .lux-surface-film { z-index:3; opacity:0; pointer-events:none; transition:opacity .25s var(--lux-ease-ui); }
#contour-expression[data-surface-mode="film"] .lux-surface-film { opacity:1; transition-duration:.12s; }
/* no JS: the checked radio decides */
#contour-expression:not([data-surface-live]):has(input[value="smooth"]:checked) [data-surface-still="smooth"],
#contour-expression:not([data-surface-live]):has(input[value="folded"]:checked) [data-surface-still="folded"],
#contour-expression:not([data-surface-live]):has(input[value="perforated"]:checked) [data-surface-still="perforated"],
/* JS: the still at rest */
#contour-expression[data-surface-shown="smooth"] [data-surface-still="smooth"],
#contour-expression[data-surface-shown="folded"] [data-surface-still="folded"],
#contour-expression[data-surface-shown="perforated"] [data-surface-still="perforated"] { visibility:visible; opacity:1; }

/* ── The copy: the study's name, its couplet, the three choices, the concept qualifier. ─────────────────────────────── */
#contour-expression .lux-surface-copy {
  grid-area:copy; display:flex; flex-direction:column; justify-content:space-between; gap:calc(40 * var(--lux-unit));
  min-width:0; padding:calc(44 * var(--lux-unit)) calc(36 * var(--lux-unit)) calc(36 * var(--lux-unit));
}
#contour-expression .lux-surface-title {
  margin:0; font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; font-weight:400; color:var(--lux-cream);
}
/* two lines at every two-column width: the title never exceeds its third of the panel (1001–1100 px broke "With / depth.") */
@media (min-width:1001px), (max-height:500px) and (orientation:landscape) {
  #contour-expression .lux-surface-title { font-size:min(var(--lux-fs-name), calc(((100vw - 16px) / 3 - 60px) / 5.6)); white-space:nowrap; }
}
#contour-expression .lux-surface-caption {
  margin:calc(28 * var(--lux-unit)) 0 0; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
  color:var(--lux-taupe);
}
#contour-expression .lux-surface-note {
  margin:0; max-width:34em; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em;
  color:var(--lux-taupe); text-wrap:pretty;
}

/* The choices: a native radio group (arrow keys, one tab stop, the checked state announced), drawn as the systems
 * index's hairline rows with a material swatch. The input covers its row, invisible, so the whole row is the target. */
#contour-expression .lux-surface-options { min-width:0; margin:0; padding:0; border:0; }
#contour-expression .lux-surface-option {
  position:relative; display:flex; align-items:center; gap:18px; box-sizing:border-box; min-height:max(72px, calc(88 * var(--lux-unit)));
  padding:10px 0; border-top:1px solid var(--lux-hair); cursor:pointer;
  font-size:var(--lux-fs-sub); line-height:1.12; letter-spacing:-.006em; color:var(--lux-taupe);
  transition:color .3s var(--lux-ease-ui);
}
#contour-expression .lux-surface-option:last-of-type { border-bottom:1px solid var(--lux-hair); }
#contour-expression .lux-surface-option > input {
  position:absolute; inset:0; z-index:2; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; appearance:none;
}
#contour-expression .lux-surface-swatch {
  flex:none; display:block; width:max(48px, calc(60 * var(--lux-unit))); aspect-ratio:1; overflow:hidden;
  border-radius:max(12px, calc(16 * var(--lux-unit))); background:#6d6153; opacity:.5; transition:opacity .3s var(--lux-ease-ui);
}
#contour-expression .lux-surface-swatch img { display:block; width:100%; height:100%; object-fit:cover; }
#contour-expression .lux-surface-name { flex:1 1 auto; min-width:0; }
/* the radio's own mark: an outlined ring, filled when checked */
#contour-expression .lux-surface-option::after {
  content:""; flex:none; width:12px; height:12px; margin-right:4px; box-sizing:border-box;
  border:1px solid currentColor; border-radius:50%; background:transparent;
  transition:background-color .3s var(--lux-ease-ui), border-color .3s var(--lux-ease-ui);
}
/* the change's progress: a cream hairline over the row's own rule, filled as the film reaches the chosen state */
#contour-expression .lux-surface-line {
  position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--lux-cream);
  transform-origin:left center; transform:scaleX(var(--surface-p, 0));
}
#contour-expression .lux-surface-option:has(> input:checked) { --surface-p:1; color:var(--lux-cream); }
#contour-expression .lux-surface-option:has(> input:checked) .lux-surface-swatch { opacity:1; }
#contour-expression .lux-surface-option:has(> input:checked)::after { background:var(--lux-cream); border-color:var(--lux-cream); }
@media (hover:hover) and (pointer:fine) {
  #contour-expression .lux-surface-option:hover { color:var(--lux-cream); }
  #contour-expression .lux-surface-option:hover .lux-surface-swatch { opacity:1; }
}
#contour-expression .lux-surface-option:has(> input:focus-visible) {
  outline:2px solid var(--lux-cream); outline-offset:4px; border-radius:6px; color:var(--lux-cream);
}

/* ── Density step (≤ 1000 px): one column — name, the choices, the stage, the qualifier. The choices sit above the stage
 * like tabs above their panel: with the section's top at the top of the screen the choices and the stage are both in
 * view, and no choice ever sits in the bottom-centre Menu pill's lane (a choice under the stage did at 390 × 844). ── */
/* (landscape phones keep the two-column panel: stacked, a choice sat in the Menu pill's lane at 844 × 390) */
@media (max-width:1000px) and (not ((max-height:500px) and (orientation:landscape))) {
  #contour-expression .lux-surface-panel {
    display:flex; flex-direction:column; gap:0; height:auto; min-height:0; max-height:none;
  }
  #contour-expression .lux-surface-copy { display:contents; }
  #contour-expression .lux-surface-head { order:1; padding:40px 24px 24px; }
  #contour-expression .lux-surface-options { order:2; padding:0 16px 16px; }
  #contour-expression .lux-surface-stage { order:3; flex:none; aspect-ratio:16 / 10; max-height:calc(100svh - 32px); width:100%; margin-inline:auto; }
  #contour-expression .lux-surface-note { order:4; padding:20px 16px 20px; }
}
/* Phone portrait: the film's own portrait crop of the panel (the stills switch with the same query). */
@media (max-width:700px) and (orientation:portrait) {
  #contour-expression.lux-surface { --surface-x:50%; --surface-y:40%; }
  #contour-expression .lux-surface-panel { border-radius:28px; }
  #contour-expression .lux-surface-head { padding:28px 16px 20px; }
  #contour-expression .lux-surface-options { padding:0 8px 12px; }
  #contour-expression .lux-surface-stage { aspect-ratio:4 / 5; border-radius:20px; }
  #contour-expression .lux-surface-option { gap:14px; min-height:56px; padding:6px 0; }
  #contour-expression .lux-surface-swatch { width:44px; border-radius:12px; }
}
@media (max-width:700px) {
  #contour-expression .lux-surface-caption { margin-top:16px; }
}
/* Landscape phones: the two-column panel grows to its compact copy (never spilling past its rounded edge), the stage
 * fills the view's height, and the rows keep 44 px targets */
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape) {
  #contour-expression .lux-surface-panel { height:auto; min-height:calc(100svh - 16px); max-height:none; }
  #contour-expression .lux-surface-stage { min-height:calc(100svh - 32px); }
  #contour-expression .lux-surface-copy { gap:14px; padding:18px 16px 14px; }
  #contour-expression .lux-surface-caption { margin-top:10px; }
  #contour-expression .lux-surface-option { min-height:44px; gap:12px; padding:4px 0; font-size:17px; }
  #contour-expression .lux-surface-swatch { width:34px; border-radius:9px; }
  #contour-expression .lux-surface-note { font-size:12px; }
}