/* Iriane: gallery noir. An open exhibition catalogue on violet-black velvet: Bodoni Moda at its
   largest optical size for the name, Tenor Sans capitals for the museum labels, platinum hairlines,
   and no colour but the opal's own fire, with one opal green for focus and selection. */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/specimen/bodoni-moda-var.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/specimen/bodoni-moda-var-italic.woff2") format("woff2"); }
@font-face { font-family: "Tenor Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/tenor-sans-400.woff2") format("woff2"); }

@property --ir-lx { syntax: "<number>"; inherits: true; initial-value: .42; }
@property --ir-ly { syntax: "<number>"; inherits: true; initial-value: .2; }

body.spec-iriane { background: #0A090C; }

.ir {
  --ir-bg: #0A090C;
  --ir-velvet: #141019;
  --ir-ink: #EDE9E2;
  --ir-support: #A8A39A;
  --ir-rule: rgb(168 163 154 / .36);
  --ir-rule-lit: rgb(237 233 226 / .82);
  --ir-accent: #6EDDB0;
  --ir-spectrum: linear-gradient(90deg, #6A3CFF 13%, #1E7BFF 27%, #00D9C0 37%, #57F03A 47%, #F2E23A 60%, #FF7A1E 70%, #FF2A1E 83%);
  --ir-serif: "Bodoni Moda", "Didot", "Bodoni 72", "Libre Bodoni", Georgia, serif;
  --ir-sans: "Tenor Sans", "Gill Sans", "Optima", "Segoe UI", sans-serif;
  --ir-ease: cubic-bezier(.2, .7, .1, 1);
  --ir-fi: 32px;
  --ir-m: 64px;
  --ir-gut: 32px;
  --ir-sec: 144px;
  --ir-plate-w: calc(clamp(420px, calc(100svh - var(--bar-h, 44px) - 340px), 600px) * .8);
  --ir-top-h: 44px;
  --o: 11;
  --w: 440;
  background: var(--ir-bg);
  color: var(--ir-ink);
  font: 440 clamp(1.0625rem, 1rem + .25vw, 1.1875rem) / 1.62 var(--ir-serif);
  letter-spacing: .005em;
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: var(--ir-sec);
}
.ir, .ir * { font-variation-settings: "opsz" var(--o), "wght" var(--w); }
.ir *, .ir *::before, .ir *::after { box-sizing: border-box; }
:where(.ir) :where(p, h1, h2, h3, ul, ol, dl, dd, figure, fieldset, legend) { margin: 0; padding: 0; }
.ir :is(ul, ol) { list-style: none; }
.ir img { display: block; max-width: 100%; height: auto; }
.ir a { color: inherit; }
.ir ::selection { background: var(--ir-accent); color: var(--ir-bg); }
.ir :focus-visible { outline: 1px solid var(--ir-accent); outline-offset: 3px; }
.ir :focus:not(:focus-visible) { outline: none; }
.ir-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── the voice in type ─────────────────────────────────────────────────────────────────────── */
.ir-nav a, .ir-kicker, .ir-runhead, .ir-rh, .ir-fs legend, .ir-f label, .ir-f-set legend, .ir-small,
.ir-field-where, .ir-field dt, .ir-row-form, .ir-row-stone, .ir-row-make, .ir-label-a, .ir-label-b, .ir-mini-label, .ir-spec-word,
.ir-where, .ir-link, .ir-btn, .ir-opt, .ir-tilt, .ir-steps h3, .ir-colo dt, .ir-colophon-h, .ir-colo-folio, .ir-price summary, .ir-entry-caps, .ir-f-remove {
  font-family: var(--ir-sans);
  font-weight: 400;
  text-transform: uppercase;
}
.ir-kicker, .ir-runhead, .ir-rh, .ir-colo-folio { font-size: .6875rem; line-height: 1.4; letter-spacing: .22em; color: var(--ir-support); }
.ir-folio { text-transform: none; letter-spacing: .1em; }
.ir h2 { font-size: clamp(2rem, 1.3rem + 2.9vw, 3.75rem); line-height: 1.04; --o: 60; --w: 420; font-weight: 420; letter-spacing: -.01em; margin-top: 16px; text-wrap: balance; }
.ir h3 { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.2; --o: 28; --w: 480; font-weight: 480; }
.ir-stand, .ir-sub { font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem); line-height: 1.5; --o: 18; --w: 420; max-width: 34ch; margin-inline: auto; text-wrap: pretty; }
.ir-stand { font-style: italic; margin-top: 40px; }
.ir-link { display: inline-block; font-size: .75rem; letter-spacing: .16em; line-height: 1.5; text-decoration: none; padding: 6px 0 5px; background: linear-gradient(var(--ir-rule-lit), var(--ir-rule-lit)) 50% 100% / 100% 1px no-repeat; transition: background-size 400ms var(--ir-ease), color 180ms; }
.ir-link:hover { background-size: 30% 1px; }
.ir-btn { appearance: none; background: none; color: var(--ir-ink); border: 1px solid var(--ir-rule-lit); min-height: 48px; padding: 0 28px; font-size: .75rem; letter-spacing: .16em; cursor: pointer; transition: border-color 180ms, background-color 180ms; }
.ir-btn:hover:not(:disabled) { border-color: var(--ir-ink); }
.ir-btn:disabled { cursor: default; color: var(--ir-support); border-color: var(--ir-rule); }
.ir-status { min-height: 1.55em; margin-top: 12px; font: .875rem/1.55 var(--ir-sans); letter-spacing: .02em; color: var(--ir-support); }

/* ── the spread: a two-page catalogue opened flat, framed in a platinum hairline ─────────────── */
.ir-spread {
  position: relative;
  margin: 12px var(--ir-fi) 0;
  padding: 0 calc(var(--ir-m) - var(--ir-fi) - 1px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ir-gut) minmax(0, 1fr);
  grid-template-areas: "top top top" "mast . case" "verso . case" "end end end";
  background: radial-gradient(40% 560px at 25% 380px, var(--ir-velvet), transparent);
}
.ir-spread::before { content: ""; position: absolute; inset: 0 0 1px; border: solid var(--ir-rule); border-width: 0 1px; pointer-events: none; transform-origin: 50% 0; }
.ir-spread::after { content: ""; position: absolute; left: 50%; top: var(--ir-top-h); bottom: 1px; width: 1px; margin-left: -.5px; background: var(--ir-rule); pointer-events: none; transform-origin: 50% 0; }
.ir-toprow { grid-area: top; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; margin: 0 calc(var(--ir-fi) - var(--ir-m) + 1px); padding: 0 calc(var(--ir-m) - var(--ir-fi) - 1px); }
.ir-toprow::before, .ir-toprow::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ir-rule); transform-origin: 50% 50%; }
.ir-toprow::before { top: 0; }
.ir-toprow::after { bottom: 0; }
.ir-nav ul { display: flex; flex-wrap: wrap; justify-content: center; }
.ir-nav li { display: flex; align-items: center; }
/* the separator is a 2px square set on the capitals' middle, not a text dot riding on the serif's x-height */
.ir-nav li + li::before { content: ""; width: 2px; height: 2px; margin: -1px 1.1em 0; background: var(--ir-support); }
.ir-nav a { font-size: .75rem; letter-spacing: .16em; line-height: 1.5; text-decoration: none; padding: 12px 0; background: linear-gradient(var(--ir-rule-lit), var(--ir-rule-lit)) 50% 78% / 0 1px no-repeat; transition: background-size 400ms var(--ir-ease); }
.ir-nav a:hover { background-size: 100% 1px; }
.ir-spread-end { grid-area: end; position: relative; height: 72px; margin: 0 calc(var(--ir-fi) - var(--ir-m) + 1px); }
.ir-spread-end::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ir-rule); transform-origin: 50% 50%; }
.ir-spread-end::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 1px; height: 24px; margin-left: -.5px; background: var(--ir-bg); }

/* the verso's title page */
.ir-mast { grid-area: mast; text-align: center; padding-top: calc(var(--ir-plate-w) * .19); }
.ir-mast-name { font-size: clamp(4rem, 1.6rem + 10vw, 10.5rem); line-height: .86; --o: 96; --w: 460; font-weight: 460; letter-spacing: -.02em; padding-left: .04em; }
.ir-h1 { font-style: italic; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem); line-height: 1.08; --o: 96; --w: 420; font-weight: 420; letter-spacing: -.005em; max-width: 17ch; margin: 1.1em auto 0; text-wrap: balance; }
.ir-verso { grid-area: verso; min-width: 0; }
.ir-hero-more { text-align: center; padding-top: 26px; }
.ir-sub { color: var(--ir-ink); }
.ir-links { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 26px; }
.ir-dot { color: var(--ir-support); }
.ir-where { margin-top: 14px; font-size: .6875rem; letter-spacing: .22em; color: var(--ir-support); }

/* the recto: one framed, lamp-lit plate */
.ir-case { grid-area: case; align-self: start; position: sticky; top: calc(var(--bar-h, 44px) + 12px); z-index: 2; padding-top: 12px; margin-bottom: 96px; }
.ir-case-in { width: calc(var(--ir-plate-w) + 20px); margin: 0 auto; }
.ir-case::before { content: ""; position: absolute; left: calc(-.5 * var(--ir-gut) - .5px); top: 0; width: 1px; height: 100%; pointer-events: none;
  background: linear-gradient(transparent calc(48px + var(--ir-ly) * var(--ir-plate-w) * 1.25 - 170px), var(--ir-rule-lit) calc(48px + var(--ir-ly) * var(--ir-plate-w) * 1.25), transparent calc(48px + var(--ir-ly) * var(--ir-plate-w) * 1.25 + 170px)); }
.ir-rh { height: 16px; margin-bottom: 10px; text-align: center; white-space: nowrap; }
.ir-rh-t { text-transform: uppercase; }
.ir-frame { position: relative; padding: 10px; }
.ir-frame::before, .ir-frame::after { content: ""; position: absolute; border: 1px solid transparent; pointer-events: none;
  background: radial-gradient(280px circle at calc(var(--ir-lx) * 100%) calc(var(--ir-ly) * 100%), var(--ir-rule-lit), var(--ir-rule)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; mask-composite: exclude; }
.ir-frame::before { inset: 0; }
.ir-frame::after { inset: 9px; }
.ir-plate { position: relative; width: var(--ir-plate-w); aspect-ratio: 4 / 5; overflow: hidden; background: var(--ir-bg); touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.ir-plate:focus-visible { outline-offset: 14px; }
.ir-poster, .ir-poster img, .ir-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.ir-poster img { object-fit: cover; object-position: 50% 44%; transform: scale(var(--ir-poster-k, 1.9)); transform-origin: var(--ir-poster-o, 50% 42%); }
.ir-poster { transition: opacity 300ms var(--ir-ease); }
.ir-poster.is-out { opacity: 0; }
.ir-gl { display: block; opacity: 0; transition: opacity 600ms var(--ir-ease); }
.ir-plate.is-live .ir-gl { opacity: 1; }
/* the hairline runs the plate's full width; its legend sits under it, so the longest one never crowds it */
.ir-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 10px 0; }
.ir-spec-line { position: relative; flex: 1; height: 1px; }
.ir-spec-line::before, .ir-row-tick::before { content: ""; position: absolute; inset: 0; background: var(--ir-spectrum); opacity: .55; }
/* the tick is a 1px mark placed by left, so its box never runs past the line and off the page */
.ir-spec-tick, .ir-row-tick::after { position: absolute; top: -4px; left: calc(var(--ir-t, .49) * 100%); width: 1px; height: 9px; background: none; border-left: 1px solid var(--ir-ink); transform: none; transition: left 180ms linear; pointer-events: none; }
.ir-spec-word { flex: 0 0 100%; min-width: 0; font-size: .6875rem; line-height: 1.4; letter-spacing: .14em; color: var(--ir-support); text-align: right; white-space: nowrap; }
.ir-label { margin: 10px 10px 0; font: .875rem/1.55 var(--ir-sans); letter-spacing: .02em; color: var(--ir-support); transition: opacity 240ms var(--ir-ease); }
.ir-label.is-dim { opacity: 0; transition-duration: 160ms; }
.ir-label-a, .ir-label-b { display: block; font-size: .75rem; letter-spacing: .16em; line-height: 1.6; }
.ir-label-a { color: var(--ir-ink); }
.ir-label-c { display: block; margin-top: 6px; text-wrap: pretty; }
.ir-hint { margin: 8px 10px 0; font: .8125rem/1.5 var(--ir-sans); letter-spacing: .02em; color: var(--ir-support); text-wrap: balance; }
.ir-mini-label { display: none; }
.ir-tilt { appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 20px); min-height: 48px; margin: 16px 10px 0; background: none; color: var(--ir-ink); border: 1px solid var(--ir-rule-lit); font-size: .75rem; letter-spacing: .16em; cursor: pointer; }
.ir-tilt[hidden] { display: none; }
.ir-tilt:disabled { color: var(--ir-support); border-color: var(--ir-rule); cursor: default; }
.ir-glyph { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1; overflow: visible; }
.ir-glyph * { vector-effect: non-scaling-stroke; }

/* ── the verso's sections ─────────────────────────────────────────────────────────────────── */
.ir-sec { padding-top: var(--ir-sec); text-align: center; scroll-margin-top: calc(var(--bar-h, 44px) + 24px); }
.ir-sec::before, .ir-bsec::before { content: ""; display: block; width: 96px; height: 1px; margin: 0 auto 48px; background: var(--ir-rule); transform-origin: 50% 50%; }
.ir-fore-text { max-width: 36ch; margin: 32px auto 0; text-align: left; }
.ir-fore-text p + p { margin-top: 1em; }
.ir-drop::first-letter { --o: 96; --w: 400; font-weight: 400; color: var(--ir-ink); }
@supports (initial-letter: 4) { .ir-drop::first-letter { initial-letter: 4; margin-right: .14em; } }
@supports not (initial-letter: 4) { .ir-drop::first-letter { float: left; font-size: 5.3em; line-height: .8; margin: .08em .1em 0 0; } }
.ir .ir-pull { position: relative; margin: 44px 0; padding: 26px 0; text-align: center; font-style: italic; font-size: clamp(1.375rem, 1rem + 1.4vw, 2rem); line-height: 1.25; --o: 40; --w: 400; font-weight: 400; text-wrap: balance; }
.ir-pull::before, .ir-pull::after { content: ""; position: absolute; left: 50%; width: 96px; height: 1px; margin-left: -48px; background: var(--ir-rule); }
.ir-pull::before { top: 0; }
.ir-pull::after { bottom: 0; }
.ir-field-link { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; text-align: inherit; }
.ir-row:disabled, .ir-field-link:disabled { cursor: default; opacity: 1; }
.ir-js .ir-field-link { background: linear-gradient(var(--ir-rule-lit), var(--ir-rule-lit)) 0 100% / 100% 1px no-repeat; transition: background-size 400ms var(--ir-ease); }
.ir-js .ir-field-link:hover, .ir-js .ir-field-link.is-on { background-image: linear-gradient(var(--ir-ink), var(--ir-ink)); }

.ir-field { max-width: 36ch; margin: 0 auto; text-align: center; padding-top: min(18svh, 170px); position: relative; }
.ir-field:first-of-type { padding-top: 56px; }
.ir-field + .ir-field::before { content: ""; position: absolute; left: 50%; top: min(9svh, 85px); width: 96px; height: 1px; margin-left: -48px; background: var(--ir-rule); }
.ir-field-where { font-size: .75rem; letter-spacing: .16em; color: var(--ir-support); }
.ir .ir-field h3 { margin-top: 10px; font-size: clamp(1.625rem, 1.2rem + 1vw, 2rem); line-height: 1.1; --o: 60; --w: 440; font-weight: 440; }
.ir-field dl { margin-top: 18px; }
.ir-field dl > div + div { margin-top: 12px; }
.ir-field dt { display: block; font-size: .6875rem; letter-spacing: .16em; line-height: 1.5; color: var(--ir-support); }
.ir-field dd { display: block; margin-top: 2px; text-wrap: balance; }

/* the catalogue: a vitrine index */
.ir-list { margin-top: 48px; text-align: left; border-top: 1px solid var(--ir-rule); }
.ir-row { scroll-margin-top: calc(var(--bar-h, 44px) + 24px); appearance: none; position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) 164px 128px 56px; column-gap: 12px; align-items: center; width: 100%; min-height: 68px; padding: 10px 0; margin: 0; background: none; border: 0; color: var(--ir-ink); font: inherit; text-align: left; cursor: pointer; }
.ir-row::after, .ir-row::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ir-rule); transform-origin: 50% 50%; }
.ir-row::before { z-index: 1; background: linear-gradient(90deg, rgb(237 233 226 / .3), var(--ir-rule-lit) calc(var(--ir-lx) * 100%), rgb(237 233 226 / .3)); transform: scaleX(0); transition: transform 400ms var(--ir-ease); }
.ir-row:hover::before, .ir-row:focus-visible::before, .ir-row.is-lit::before { transform: scaleX(1); }
.ir-row:focus-visible { outline-offset: -1px; }
/* the index numerals: a text optical size, so the italic 4's hairline diagonal survives on a 1x screen */
.ir-row-n { position: relative; font-style: italic; font-size: clamp(1.125rem, .95rem + .5vw, 1.375rem); line-height: 1.2; --o: 12; --w: 440; font-weight: 440; color: var(--ir-support); white-space: nowrap; transition: color 180ms; }
.ir-row:hover .ir-row-n, .ir-row:focus-visible .ir-row-n, .ir-row.is-lit .ir-row-n { color: var(--ir-ink); }
.ir-row[aria-pressed="true"] .ir-row-n::before { content: ""; position: absolute; left: -14px; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: var(--ir-accent); }
.ir-row--13 .ir-row-n::after { content: ""; position: absolute; left: 0; right: .3em; bottom: -3px; height: 1px; background: var(--ir-accent); }
.ir-row-name { font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); line-height: 1.15; --o: 28; --w: 480; font-weight: 480; }
.ir-row-meta { display: contents; }
.ir-row-form, .ir-row-stone span, .ir-row-make > span:last-child { display: block; }
.ir-row-form { margin-top: 3px; font-size: .625rem; letter-spacing: .16em; line-height: 1.5; color: var(--ir-support); }
.ir-row-stone, .ir-row-make { font-size: .6875rem; letter-spacing: .1em; line-height: 1.5; color: var(--ir-support); }
.ir-row-tick { position: relative; height: 1px; width: 56px; }
.ir-row-tick::before { opacity: 1; }
.ir-row-tick::after { content: ""; border-left: 2px solid var(--ir-tick-c, var(--ir-ink)); margin-left: -.5px; }

/* compose */
.ir-cfg { margin-top: 44px; text-align: left; }
.ir-cfg-note { font: .875rem/1.55 var(--ir-sans); letter-spacing: .02em; color: var(--ir-support); text-align: center; margin-bottom: 36px; }
.ir-cfg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.ir-fs { border: 0; min-width: 0; }
.ir-fs legend, .ir-f-set legend { font-size: .75rem; letter-spacing: .16em; line-height: 1.5; color: var(--ir-support); margin-bottom: 12px; }
.ir-opts, .ir-opts--2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ir-opt { position: relative; display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--ir-rule); font-size: .6875rem; letter-spacing: .12em; line-height: 1.25; color: var(--ir-ink); cursor: pointer; transition: border-color 180ms var(--ir-ease); }
.ir-opt:hover { border-color: rgb(237 233 226 / .6); }
.ir-opt:has(input:checked) { border-color: var(--ir-rule-lit); }
.ir-opt:has(input:focus-visible) { outline: 1px solid var(--ir-accent); outline-offset: 3px; }
.ir-opt input { appearance: none; flex: none; display: grid; place-content: center; width: 14px; height: 14px; margin: 0; border: 1px solid var(--ir-support); background: none; cursor: inherit; }
.ir-opt input::before { content: ""; width: 6px; height: 6px; background: var(--ir-accent); transform: scale(0); transition: transform 180ms var(--ir-ease); }
.ir-opt input:checked::before { transform: scale(1); }
.ir-opt input:focus-visible { outline: none; }
.ir-opt .ir-glyph { color: var(--ir-support); margin: -2px 0; }
.ir-fs:disabled .ir-opt { cursor: default; color: var(--ir-support); }
.ir-cfg .ir-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ir-rule); }
.ir-cfg .ir-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ir-cfg .ir-opt { flex-direction: column; justify-content: center; gap: 12px; min-height: 60px; padding: 16px 14px; border: 0; text-align: center; letter-spacing: .14em; }
.ir-cfg .ir-opt:has(.ir-glyph) { min-height: 108px; padding-top: 22px; }
.ir-cfg .ir-opt + .ir-opt { border-left: 1px solid var(--ir-rule); }
.ir-cfg .ir-opt::after { content: ""; position: absolute; inset: -1px; z-index: 1; border: 1px solid var(--ir-rule-lit); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ir-ease); }
.ir-cfg .ir-opt:hover::after { opacity: .4; }
.ir-cfg .ir-opt:has(input:checked)::after { opacity: 1; }
.ir-cfg .ir-opt:has(input:focus-visible) { outline-offset: -6px; }
.ir-cfg .ir-opt input { position: absolute; left: 10px; top: 10px; }
.ir-cfg .ir-opt .ir-glyph { width: 30px; height: 30px; margin: 0; color: var(--ir-support); transition: color 180ms var(--ir-ease); }
.ir-cfg .ir-opt:has(input:checked) .ir-glyph { color: var(--ir-ink); }
.ir-cfg .ir-opt > span { text-wrap: balance; }
.ir-entry { margin-top: 40px; padding: 18px 0 20px; border-top: 1px solid var(--ir-rule); border-bottom: 1px solid var(--ir-rule); text-align: left; }
.ir-entry-n { display: flex; align-items: baseline; gap: 10px; }
.ir-entry-no { font-style: italic; font-size: clamp(1.125rem, .95rem + .5vw, 1.375rem); --o: 12; --w: 440; position: relative; }
.ir-entry-no::after { content: ""; position: absolute; left: 0; right: .2em; bottom: -5px; height: 1px; background: var(--ir-accent); }
.ir-entry-sep { color: var(--ir-support); }
.ir-entry-n em { font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem); --o: 18; }
.ir-entry-caps { margin-top: 16px; font-size: .6875rem; letter-spacing: .14em; line-height: 1.6; color: var(--ir-support); }
.ir-entry-text { margin-top: 10px; text-wrap: pretty; }
.ir-place-row { margin-top: 28px; text-align: center; }
.ir-see { margin-top: 4px; }
.ir-see[hidden] { display: none; }
.ir-price { margin-top: 28px; border-top: 1px solid var(--ir-rule); padding-top: 18px; text-align: center; }
.ir-price[hidden] { display: none; }
.ir-price summary { display: inline-flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; font-size: .75rem; letter-spacing: .16em; color: var(--ir-support); padding: 6px 0; }
.ir-price summary::-webkit-details-marker { display: none; }
.ir-price summary::after { content: "+" / ""; font-size: 1rem; line-height: 1; transition: transform 180ms var(--ir-ease); }
.ir-price[open] summary::after { transform: rotate(45deg); }
.ir-price-line { margin: 12px auto 0; max-width: 40ch; font-style: italic; --o: 18; }

/* ── the back matter: one centred column, symmetrical about the page axis ─────────────────── */
.ir-back { padding: 0 var(--ir-m); }
.ir-bsec { max-width: 884px; margin: 0 auto; padding-top: var(--ir-sec); text-align: center; scroll-margin-top: calc(var(--bar-h, 44px) + 16px); }
.ir-bsec > .ir-body, .ir-bsec > .ir-lines { max-width: 60ch; margin: 36px auto 0; }
.ir-photo { margin: 48px auto 0; }
.ir-photo--tall { max-width: 500px; }
.ir-mount { position: relative; padding: 10px; }
.ir-mount::before, .ir-mount::after { content: ""; position: absolute; border: 1px solid var(--ir-rule); pointer-events: none; }
.ir-mount::before { inset: 0; }
.ir-mount::after { inset: 9px; }
.ir-mount img { width: 100%; background: var(--ir-velvet); }
.ir-photo figcaption { margin-top: 16px; font: .875rem/1.55 var(--ir-sans); letter-spacing: .02em; color: var(--ir-support); }
.ir-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border: 1px solid var(--ir-rule); text-align: center; }
.ir-steps li { padding: 28px 22px 30px; }
.ir-steps li + li { border-left: 1px solid var(--ir-rule); }
.ir-step-n { display: block; font-style: italic; font-size: 1.75rem; line-height: 1; --o: 14; --w: 430; font-weight: 430; color: var(--ir-support); }
@media (min-width: 1100px) { .ir .ir-steps h3 { min-height: 3em; } }
.ir .ir-steps h3 { margin-top: 14px; font-size: .75rem; letter-spacing: .16em; line-height: 1.5; }
.ir-steps p { margin-top: 10px; font-size: 1rem; line-height: 1.55; text-wrap: pretty; }
.ir-lines p { font-style: italic; font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem); line-height: 1.5; --o: 18; --w: 420; }
.ir-lines p + p { margin-top: 12px; }
.ir-card { position: relative; margin: 48px auto 0; max-width: 884px; padding: 44px 40px; text-align: left; }
.ir-card::before, .ir-card::after { content: ""; position: absolute; border: 1px solid var(--ir-rule); pointer-events: none; }
.ir-card::before { inset: 0; }
.ir-card::after { inset: 9px; }
.ir-care-list { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 48px; justify-content: center; }
.ir-care-list li { padding: 16px 0; border-bottom: 1px solid var(--ir-rule); text-wrap: pretty; }
.ir-care-list li:nth-child(3n + 1) { border-top: 1px solid var(--ir-rule); }

/* the enquiry */
.ir-form { max-width: 560px; margin: 44px auto 0; text-align: left; }
.ir-f { position: relative; display: block; margin-top: 26px; border: 0; }
/* the fields are the direct children of each .ir-f; the radios inside the chips keep their own square */
.ir-f > label, .ir-f-set legend { display: block; font-size: .75rem; letter-spacing: .16em; line-height: 1.5; color: var(--ir-support); }
.ir-f > :is(input, select, textarea) { display: block; width: 100%; margin-top: 6px; padding: 10px 0 9px; background: transparent; color: var(--ir-ink); border: 0; border-bottom: 1px solid rgb(168 163 154 / .62); border-radius: 0; font: inherit; --o: 18; transition: border-color 180ms var(--ir-ease); }
.ir-f > select { appearance: none; cursor: pointer; padding-right: 32px; }
.ir-f-sel::after { content: ""; position: absolute; right: 7px; bottom: 22px; width: 7px; height: 7px; border: solid var(--ir-support); border-width: 0 1px 1px 0; transform: rotate(45deg); pointer-events: none; }
.ir-f select option { background: var(--ir-bg); color: var(--ir-ink); }
.ir-f > textarea { resize: vertical; min-height: 3.2em; }
.ir-f > :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--ir-accent); box-shadow: 0 1px 0 var(--ir-accent); }
.ir-f > :is(input, select, textarea):focus-visible { outline: none; }
.ir-f-note { margin-top: 8px; font: .8125rem/1.5 var(--ir-sans); letter-spacing: .02em; color: var(--ir-support); }
.ir-f-set legend { margin-bottom: 10px; float: left; width: 100%; }
.ir-chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.ir-chips .ir-opt { padding: 8px 14px 8px 12px; }
.ir-f-entry textarea { color: var(--ir-support); }
.ir-f-remove { appearance: none; position: absolute; right: 0; top: 0; background: none; border: 0; padding: 0 0 2px; color: var(--ir-ink); font-size: .6875rem; letter-spacing: .16em; cursor: pointer; border-bottom: 1px solid var(--ir-rule-lit); }
.ir-f-entry[hidden] { display: none; }
.ir-small { margin-top: 32px; font-size: .6875rem; letter-spacing: .14em; line-height: 1.5; color: var(--ir-support); }
.ir-form .ir-btn { margin-top: 14px; width: 100%; }

/* the colophon, set like end titles */
.ir-colophon { max-width: 884px; margin: 0 auto; padding-top: var(--ir-sec); text-align: center; }
.ir-colophon::before { content: ""; display: block; width: 96px; height: 1px; margin: 0 auto 48px; background: var(--ir-rule); }
.ir .ir-colophon-h { margin-top: 10px; font-size: .75rem; letter-spacing: .3em; line-height: 1.5; color: var(--ir-ink); }
.ir-colo { margin-top: 40px; }
.ir-colo > div { padding: 22px 0; position: relative; }
.ir-colo > div + div::before { content: ""; position: absolute; top: 0; left: 50%; width: 48px; height: 1px; margin-left: -24px; background: linear-gradient(90deg, var(--ir-rule), var(--ir-rule-lit), var(--ir-rule)); }
.ir-colo dt { font-size: .6875rem; letter-spacing: .22em; line-height: 1.4; color: var(--ir-support); }
.ir-colo dd { margin-top: 8px; font-style: italic; font-size: clamp(1.125rem, 1rem + .45vw, 1.3125rem); line-height: 1.45; --o: 18; }
.ir-colo-name { margin-top: 64px; font-size: clamp(4rem, 1.6rem + 10vw, 10.5rem); line-height: .9; --o: 96; --w: 460; font-weight: 460; letter-spacing: -.02em; }
.ir-colo-folio { margin-top: 28px; text-transform: none; }

/* ── motion: the lamp moves; the type never does ─────────────────────────────────────────── */
@keyframes ir-draw-x { from { transform: scaleX(0); } }
@keyframes ir-draw-y { from { transform: scaleY(0); } }
@keyframes ir-settle { from { font-variation-settings: "opsz" 96, "wght" 400; } to { font-variation-settings: "opsz" 96, "wght" 460; } }
@keyframes ir-fade { from { opacity: 0; } }
/* a reveal is a lamp brought up on the thing: it comes out of the dark, and only a heading moves, 6px at most */
@keyframes ir-lamp { from { opacity: 0; filter: brightness(.4); } to { opacity: 1; filter: none; } }
@keyframes ir-lamp-h { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ir-toprow::before, .ir-toprow::after { animation: ir-draw-x 900ms var(--ir-ease) backwards; }
  .ir-toprow::after { animation-delay: 120ms; }
  .ir-spread::after, .ir-spread::before { animation: ir-draw-y 1400ms var(--ir-ease) 200ms backwards; }
  .ir-mast-name { animation: ir-settle 1200ms var(--ir-ease) both; }
  .ir-h1 { animation: ir-fade 900ms var(--ir-ease) 300ms backwards; }
  .ir-hero-more { animation: ir-fade 900ms var(--ir-ease) 500ms backwards; }
  .ir-case :is(.ir-label, .ir-spec, .ir-hint) { animation: ir-fade 900ms var(--ir-ease) 700ms backwards; }
  /* without scroll timelines an observer adds .ir-in once, and the same end state arrives over 620ms */
  .ir-js .ir-rv { opacity: 0; filter: brightness(.4); transition: opacity 620ms var(--ir-ease), filter 620ms var(--ir-ease); }
  .ir-js .ir-rv-h { opacity: 0; transform: translateY(6px); transition: opacity 620ms var(--ir-ease), transform 620ms var(--ir-ease); }
  .ir-js .ir-in { opacity: 1; filter: none; transform: none; }
  @supports (animation-timeline: view()) {
    .ir-js :is(.ir-sec, .ir-bsec)::before { animation: ir-draw-x linear both; animation-timeline: view(); animation-range: entry 10% cover 16%; }
    /* where the browser has scroll timelines, the reveals follow the scroll itself */
    .ir-js .ir-rv, .ir-js .ir-rv-h { transition: none; animation: ir-lamp linear both; animation-timeline: view(); animation-range: entry 2% cover 15%; }
    .ir-js .ir-rv-h { animation-name: ir-lamp-h; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ir *, .ir *::before, .ir *::after { transition-duration: 0s !important; }
}

/* ── below 1440 the catalogue row stacks: number and name, then the stone and the make ─────────── */
@media (max-width: 1439.98px) {
  .ir-row-form { display: inline; margin-left: .7em; }
  .ir-row-make > span:last-child::before { content: "\00B7\00A0" / ""; }
  .ir-row { grid-template-columns: 62px minmax(0, 1fr) 56px; grid-template-areas: "n name tick" "n meta meta"; row-gap: 6px; min-height: 64px; }
  .ir-row-n { grid-area: n; align-self: start; padding-top: 3px; }
  .ir-row-name { grid-area: name; }
  .ir-row-tick { grid-area: tick; }
  .ir-row-meta { display: block; grid-area: meta; }
  .ir-row-stone, .ir-row-make, .ir-row-make > span:last-child { display: inline; }
  .ir-row-stone span { display: none; }
  .ir-row-make::before { content: "\00A0\00B7  " / ""; }
}

/* ── 834: the spread keeps two pages; the plate shrinks to fit its page ─────────────────────── */
@media (max-width: 1099.98px) {
  .ir { --ir-fi: 16px; --ir-m: 32px; --ir-gut: 24px; --ir-sec: 112px;
    --ir-plate-w: min(calc(clamp(420px, calc(100svh - var(--bar-h, 44px) - 290px), 600px) * .8), calc((100vw - 2 * var(--ir-m) - var(--ir-gut)) / 2 - 20px)); }
  .ir { --ir-top-h: 80px; }
  .ir-toprow { flex-direction: column; justify-content: center; gap: 2px; padding-block: 10px; }
  .ir-mast { padding-top: 64px; }
  .ir-links { flex-direction: column; gap: 6px; }
  .ir-dot { display: none; }
  .ir-steps { grid-template-columns: 1fr 1fr; }
  .ir-steps li:nth-child(3) { border-left: 0; }
  .ir-steps li:nth-child(n + 3) { border-top: 1px solid var(--ir-rule); }
  .ir-care-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 390: one page; the plate rides along as a small plate while you read ─────────────────────── */
@media (max-width: 699.98px) {
  .ir { --ir-fi: 8px; --ir-m: 16px; --ir-sec: 96px; --ir-plate-w: min(326px, calc(100vw - 64px)); --ir-tail: 440px; }
  .ir-spread { display: block; background: radial-gradient(90% 420px at 50% 220px, var(--ir-velvet), transparent); }
  .ir-spread::after, .ir-spread::before { display: none; }
  .ir-toprow { padding-block: 12px 10px; }
  .ir-runhead { font-size: .625rem; text-align: center; text-wrap: balance; }
  .ir-row-stone, .ir-row-make { display: block; font-size: .625rem; letter-spacing: .08em; }
  .ir-row-make::before { content: none; }
  .ir-row { grid-template-columns: 54px minmax(0, 1fr) 32px; column-gap: 10px; scroll-margin-top: calc(var(--bar-h, 44px) + 340px); }
  .ir-row-tick { width: 32px; }
  .ir-nav .ir-nav-wide, .ir-nav-long { display: none; }
  .ir-nav li:nth-child(2)::before { content: none; }
  .ir-nav a { padding: 8px 0; }
  .ir-mast { padding-top: 24px; }
  .ir-h1 { --o: 72; margin-top: .8em; }
  .ir-case { position: relative; width: auto; top: auto; margin-bottom: calc(-1 * var(--ir-tail)); padding-top: 22px; }
  .ir-case-in { width: calc(var(--ir-plate-w) + 20px); margin: 0 auto; transform-origin: 50% 0; }
  .ir-case::before { display: none; }
  .ir-verso { padding-top: var(--ir-tail); }
  .ir-hero-more { padding-top: 36px; }
  .ir-case--mini { position: sticky; top: var(--bar-h, 44px); pointer-events: none; }
  .ir-case--mini .ir-plate { pointer-events: auto; }
  .ir-case--mini .ir-case-in { transform: scale(.5); }
  .ir-case--mini :is(.ir-label, .ir-hint, .ir-tilt, .ir-spec, .ir-rh) { opacity: 0; visibility: hidden; }
  .ir-case--mini::after { content: ""; position: absolute; left: -8px; right: -8px; top: 0; height: calc((48px + var(--ir-plate-w) * 1.25 + 20px) * .5 + 88px); z-index: -1;
    background: linear-gradient(var(--ir-bg) calc(100% - 40px), transparent); }
  .ir-mini-label { display: block; position: absolute; left: 0; right: 0; top: calc((48px + var(--ir-plate-w) * 1.25 + 20px) * .5 + 8px); text-align: center; white-space: pre-line; font-size: .625rem; letter-spacing: .14em; line-height: 1.5; color: var(--ir-support); opacity: 0; visibility: hidden; transition: opacity 300ms var(--ir-ease); }
  .ir-case--mini .ir-mini-label { opacity: 1; visibility: visible; }
  .ir-sec { scroll-margin-top: calc(var(--bar-h, 44px) + 290px); }
  .ir-field { padding-top: min(14svh, 120px); }
  .ir-field + .ir-field::before { top: min(7svh, 60px); }
  .ir-list { margin-top: 36px; }
  .ir-cfg-grid { gap: 24px; }
  .ir-cfg .ir-opt { padding-inline: 8px; letter-spacing: .1em; }
  /* the metals have no glyph: the word drops below the radio's square instead of running under it */
  .ir-cfg .ir-opt:not(:has(.ir-glyph)) { padding-top: 30px; min-height: 72px; }
  .ir-back { padding: 0 16px; }
  .ir-steps { grid-template-columns: 1fr; }
  .ir-steps li + li { border-left: 0; border-top: 1px solid var(--ir-rule); }
  .ir-card { padding: 28px 22px; }
  .ir-care-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .ir-care-list li:nth-child(3n + 1) { border-top: 0; }
  .ir-care-list li:first-child { border-top: 1px solid var(--ir-rule); }
  .ir-spec { flex-wrap: wrap; row-gap: 8px; }
  .ir-spec-word { flex-basis: 100%; text-align: left; }
  .ir-label { height: 9.75rem; overflow: hidden; }
  .ir-hint { min-height: 3em; }
}
@media (max-width: 379.98px) { .ir-label { height: 10.75rem; } }
@media (max-width: 369.98px) { .ir-label { height: 12.125rem; } }
@media (max-width: 349.98px) { .ir-label { height: 13.5rem; } }
@media (max-width: 699.98px) and (prefers-reduced-motion: no-preference) {
  .ir-case-in { transition: transform 300ms var(--ir-ease); }
  .ir-case--mini .ir-case-in { animation: ir-fade 300ms var(--ir-ease); }
  .ir-case :is(.ir-label, .ir-hint, .ir-tilt, .ir-spec) { transition: opacity 240ms var(--ir-ease), visibility 240ms; }
}

/* the page runs to the window's edges: no browser margin around the specimen */
body.spec-iriane { margin: 0; }