/* ============================================================
   A GOTHIC BEAUTY — ELEMENTAL WINDOWS (The Archive, chapter I; Heaven & Hell)
   Six studies as six lancet windows onto the night. Dormant, each is
   smoked glass with its colour pooled at the foot; lit, the plate comes
   up to full colour and its element moves inside the glass. Only a soft
   glow leaves the window, onto the floor beneath it. Edition VII tokens,
   no new families. Motion lives in elemental-windows.js.
   ============================================================ */

.elements {
  --ew-t: 0.65s;
  --ew-w: min(16.5rem, calc((100vw - var(--m) - var(--gap)) / 1.6));
  /* a lancet: two arcs of 1.2× the span meeting at the apex, square at the foot (4:9 window) */
  --ew-arch: polygon(0% 100%, 0% 43.32%, 0.21% 40.16%, 0.84% 37.01%, 1.89% 33.89%, 3.35% 30.80%, 5.23% 27.75%, 7.50% 24.76%, 10.17% 21.83%, 13.23% 18.98%, 16.66% 16.21%, 20.45% 13.54%, 24.60% 10.97%, 29.07% 8.52%, 33.87% 6.18%, 38.97% 3.98%, 44.35% 1.92%, 50% 0%, 55.65% 1.92%, 61.03% 3.98%, 66.13% 6.18%, 70.93% 8.52%, 75.40% 10.97%, 79.55% 13.54%, 83.34% 16.21%, 86.77% 18.98%, 89.83% 21.83%, 92.50% 24.76%, 94.77% 27.75%, 96.65% 30.80%, 98.11% 33.89%, 99.16% 37.01%, 99.79% 40.16%, 100% 43.32%, 100% 100%);
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(2.6rem, 7vh, 4.6rem);
  overflow-x: clip;
}
.ew__row { align-items: start; }
@media (min-width: 900px) { .ew__row > .ew { --c: auto / span 2; } }

/* ---------- one window ---------- */
.ew { --pool: 0.32; --pool-lit: 0.5; position: relative; container-type: inline-size; }
.ew__win { position: relative; display: block; }
.ew[data-el="light"] { --pool: 0.16; --pool-lit: 0.24; }
.ew[data-el="metal"] { --pool: 0.2; --pool-lit: 0.3; }
.ew__link {
  position: relative; z-index: 1; display: block; aspect-ratio: 4 / 9; overflow: hidden; isolation: isolate;
  clip-path: var(--ew-arch); background-color: var(--well); color: var(--fg-2);
  -webkit-tap-highlight-color: transparent;
}
.ew__link:focus-visible { outline: none; }
.ew__plate {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: 0.42; filter: saturate(0.28) brightness(0.86);
  transition: opacity var(--ew-t) var(--ease-lux), filter var(--ew-t) var(--ease-lux);
}

/* the glass: a fixed scrim for the type, a smoked wash and the study's colour, which move independently */
.ew__smoke {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(10 8 22 / 0.5), transparent 24%),
    linear-gradient(to top, rgb(10 8 22 / 0.94), rgb(10 8 22 / 0.86) 16%, rgb(10 8 22 / 0.5) 34%, transparent 54%);
}
.ew__smoke::before, .ew__smoke::after { content: ""; position: absolute; inset: 0; transition: opacity var(--ew-t) var(--ease-lux); }
.ew__smoke::before { background: linear-gradient(162deg, color-mix(in oklch, var(--bone) 8%, transparent), transparent 38%), rgb(14 11 30 / 0.4); }
.ew__smoke::after { opacity: var(--pool); background: radial-gradient(130% 40% at 50% 100%, var(--tint), transparent 72%); }
.ew__light {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 34%), color-mix(in oklch, var(--bone) 14%, transparent), transparent 46%);
  transition: opacity var(--ew-t) var(--ease-lux);
}
.ew__canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* anatomy: the plate mark hangs above the apex, on the night; numeral, name, element and year sit at the foot, clear of the face */
.ew__text {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 1rem 1.2rem; padding: 0 7cqi 9cqi;
  text-shadow: 0 1px 14px rgb(6 4 16 / 0.55);
}
.ew__pl, .ew__el { font-weight: 500; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-feature-settings: "case"; color: var(--fg-3); }
.ew__pl { display: block; margin-bottom: 0.95rem; line-height: 1; text-align: center; }
.ew__num { margin-top: auto; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 3rem; font-size: clamp(2.2rem, 30cqi, 4.4rem); line-height: 0.92; letter-spacing: -0.02em; color: var(--fg-3); }
.ew__name { margin-top: 0.2rem; font-family: var(--display); font-weight: 400; font-size: 1.35rem; font-size: clamp(1.1rem, 12.5cqi, 1.7rem); line-height: 1.05; letter-spacing: -0.012em; color: var(--fg-2); }
.ew__el { margin-top: 0.6rem; margin-top: 4.5cqi; line-height: 1.5; text-wrap: balance; }
.ew__yr { margin-top: 0.15rem; font-style: italic; font-size: 0.8rem; line-height: 1.35; color: var(--fg-2); }
.ew__pl, .ew__num, .ew__name, .ew__el, .ew__yr { transition: color var(--ew-t) var(--ease-lux); }

/* the leading: a hairline lancet, and a focus ring that follows it */
.ew__frame { position: absolute; left: 0; top: 0; z-index: 2; display: block; width: 100%; height: auto; aspect-ratio: 4 / 9; overflow: visible; pointer-events: none; }
.ew__frame path { fill: none; vector-effect: non-scaling-stroke; }
.ew__arch { stroke: var(--rule-2); stroke-width: 1; transition: stroke var(--ew-t) var(--ease-lux); }
.ew__ring { stroke: var(--acc); stroke-width: 1.5; opacity: 0; }
.ew__link:focus-visible ~ .ew__frame .ew__ring { opacity: 1; }

/* the floor: only a soft glow and a faint reflection of the foot */
.ew__floor { position: relative; display: block; height: 4.5rem; height: 34cqi; pointer-events: none; }
.ew__floor::before, .ew__floor::after { content: ""; position: absolute; transition: opacity var(--ew-t) var(--ease-lux); }
.ew__floor::before {
  inset: 0; opacity: 0.16;
  background: radial-gradient(50% 62% at 50% 0%, color-mix(in oklch, var(--tint) 42%, transparent), color-mix(in oklch, var(--tint) 10%, transparent) 48%, transparent 76%);
}
.ew__floor::after {
  inset: 0; opacity: 0.05; transform: scaleY(-1);
  background: var(--plate, none) 50% 100% / 100% auto no-repeat;
  filter: blur(1.5px) saturate(0.7);
  -webkit-mask-image: linear-gradient(to top, rgb(0 0 0 / 0.9), transparent 72%); mask-image: linear-gradient(to top, rgb(0 0 0 / 0.9), transparent 72%);
}

/* ---------- lit: hover, keyboard focus, or the centred window on a phone ----------
   Without the script, plain :hover / :focus-within stand in, with no motion. */
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__plate { opacity: 1; filter: saturate(1.04) brightness(1); }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within))[data-el="light"] .ew__plate { filter: brightness(1.16) contrast(0.9) saturate(0.92); }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__smoke::before { opacity: 0.12; }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__smoke::after { opacity: var(--pool-lit); }
.ew.is-lit .ew__light { opacity: 1; }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) :is(.ew__num, .ew__name, .ew__yr) { color: var(--fg); }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__pl { color: var(--acc); }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__el { color: color-mix(in oklch, var(--tint) 42%, var(--bone)); }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__arch { stroke: color-mix(in oklch, var(--tint) 50%, var(--bone)); }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__floor::before { opacity: 1; }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__floor::after { opacity: 0.2; }
/* the rest step back, slightly */
.elements.has-lit .ew:not(.is-lit) .ew__plate { opacity: 0.24; }
.elements.has-lit .ew:not(.is-lit) .ew__smoke::after { opacity: calc(var(--pool) * 0.6); }
.elements.has-lit .ew:not(.is-lit) .ew__arch { stroke: var(--rule); }

/* ---------- garments (Heaven & Hell): the front hangs on the night, the back turns in when lit ----------
   The plates are pre-placed cutouts on transparent 4:9 canvases. Lit, the back comes up over the front
   before the front lets go, so the silhouette never thins mid-turn. The plate mark names the side shown. */
.ew--garment .ew__link { background-color: var(--night); }
.ew__back {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity var(--ew-t) var(--ease-lux) calc(var(--ew-t) * 0.4);
}
/* the mark names the side you are looking at, so it sits one step brighter than a plate number */
.ew--garment .ew__pl { display: grid; justify-items: center; color: var(--fg-2); }
/* the label sets as two lines, so every numeral sits level; a narrow window keeps only the cut */
.ew--garment .ew__el > span { display: block; white-space: nowrap; }
@container (max-width: 150px) { .ew--garment .ew__el > .ew__aop { display: none; } }
.ew__face { grid-area: 1 / 1; transition: opacity var(--ew-t) var(--ease-lux); }
.ew__face + .ew__face { opacity: 0; }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)).ew--garment .ew__plate { opacity: 0; transition-delay: calc(var(--ew-t) * 0.4); }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__back { opacity: 1; transition-delay: 0s; }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__face { opacity: 0; }
:is(.ew.is-lit, .elements:not(.is-live) .ew:is(:hover, :focus-within)) .ew__face + .ew__face { opacity: 1; }
/* under the seam hero, its paper half feathers into the night instead of cutting off */
@media (min-width: 900px) {
  .elements[data-above="seam"] { padding-top: calc(var(--fh) + clamp(1.6rem, 5vh, 3.2rem)); }
  .elements[data-above="seam"]::before {
    content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 50%; height: var(--fh); pointer-events: none;
    background: var(--paper) var(--grain) 0 0 / 600px 600px; background-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / 0.84) 25%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.16) 75%, transparent);
    mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / 0.84) 25%, rgb(0 0 0 / 0.5) 50%, rgb(0 0 0 / 0.16) 75%, transparent);
  }
}

/* ---------- phones: a snap row about 1.6 windows wide; the centred one is lit ---------- */
@media (max-width: 899px) {
  .elements .ew__row {
    display: flex; gap: var(--gap); padding: 0.6rem var(--m) 0.2rem; scroll-padding-inline: var(--m);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .elements .ew__row::-webkit-scrollbar { display: none; }
  .ew { flex: 0 0 var(--ew-w); scroll-snap-align: center; }
  .ew:first-child { scroll-snap-align: start; }
  .ew:last-child { scroll-snap-align: end; }
}

/* ---------- stillness: no particles, no transitions, every plate at rest ---------- */
.elements:not(.is-live) .ew *, .elements:not(.is-live) .ew *::before, .elements:not(.is-live) .ew *::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .elements *, .elements *::before, .elements *::after { transition: none !important; }
  .ew__canvas { display: none; }
}
.reduced-motion .elements *, .reduced-motion .elements *::before, .reduced-motion .elements *::after { transition: none !important; }
.reduced-motion .ew__canvas { display: none; }

@media print {
  .ew__canvas, .ew__light, .ew__floor { display: none; }
  .ew__plate { opacity: 1 !important; filter: none !important; }
}