/* Oriel: a playscript for one evening, lit by the visitor.
   Warm umber-black ground, candle-parchment ink, one flame accent. Instrument Serif (roman and
   italic) for everything spoken aloud, Albert Sans small for everything printed in the margin. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/instrument-serif-400.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/specimen/instrument-serif-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/specimen/albert-sans-var.woff2") format("woff2"); }
@font-face { font-family: "Or Serif Fallback"; font-style: normal; src: local("Georgia"); size-adjust: 86%; }
@font-face { font-family: "Or Serif Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 86%; }

@property --or-lx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-ly { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-lr { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-cx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-cy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-cr { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-house { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --or-rimk { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --or-sx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-sy { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-srx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-sry { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --or-street { syntax: "<number>"; inherits: true; initial-value: 0; }

body.spec-oriel { background: #0C0906; }

.or-page {
  --or-bg: #0C0906;
  --or-ink: #EDE1CC;
  --or-support: #8A7560;
  --or-flame: #E0874A;
  --or-panel: #16100B;
  --or-ink-2: rgb(237 225 204 / .72);
  --or-ink-3: rgb(237 225 204 / .6);
  --or-rule: rgb(138 117 96 / .35);
  --or-veil: rgb(12 9 6 / .88);
  --or-serif: "Instrument Serif", "Or Serif Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --or-sans: "Albert Sans", system-ui, "Segoe UI", sans-serif;
  --or-ease-lamp: cubic-bezier(.22, .8, .2, 1);
  --or-ease-fade: cubic-bezier(.3, 0, .2, 1);
  --or-m: clamp(20px, 5vw, 96px);
  --or-g: clamp(20px, 4vw, 32px);
  --or-cols: calc(var(--or-m) - 24px) 64px repeat(12, minmax(0, 1fr)) calc(var(--or-m) - 24px);
  --or-ch-h: calc(100svh - var(--bar-h, 40px) - var(--or-nav-h, 64px));
  --or-t-body: clamp(1rem, .95rem + .2vw, 1.1875rem);
  --or-t-dir: clamp(1.375rem, 1.1rem + .7vw, 1.75rem);
  --or-t-it: clamp(2.5rem, 1.4rem + 3vw, 4.5rem);
  --or-t-card: clamp(3rem, 1.2rem + 5.6vw, 6.75rem);
  --or-t-h2: clamp(2.25rem, 1.5rem + 2.8vw, 4.25rem);
  position: relative;
  background: var(--or-bg);
  color: var(--or-ink);
  font: 400 var(--or-t-body)/1.55 var(--or-sans);
  letter-spacing: .005em;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.or-page *, .or-page *::before, .or-page *::after { box-sizing: border-box; }
.or-page :where(h1, h2, h3, p, ul, ol, figure, dl, dd, fieldset, table, legend) { margin: 0; padding: 0; }
.or-page :where(ul, ol) { list-style: none; }
.or-page :where(img) { display: block; max-width: 100%; }
.or-page :where(a) { color: inherit; }
.or-page :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
.or-page :where(h1, h2, h3) { font-weight: 400; }
.or-page :focus-visible { outline: 2px solid var(--or-flame); outline-offset: 6px; }
.or-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the printed parts: labels, cues, buttons, links ---------- */
.or-lab { font: 620 .75rem/1.2 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-support); }
.or-cue {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: end; column-gap: 8px; row-gap: 4px;
  font: 650 .75rem/1.1 var(--or-sans); letter-spacing: .12em; text-align: right; color: var(--or-support);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; transition: color .2s var(--or-ease-fade);
}
.or-cue span { grid-column: 1 / -1; grid-row: 2; }
.or-go { font-weight: 700; color: var(--or-flame); opacity: 0; transition: opacity .2s var(--or-ease-fade); }
.or-cue.is-go { color: var(--or-flame); }
.or-cue.is-go span { color: var(--or-support); }
.or-cue.is-go .or-go { opacity: 1; }

.or-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px;
  border: 1px solid var(--or-flame); border-radius: 0; background: transparent; color: var(--or-ink); cursor: pointer;
  font: 620 .8125rem/1 var(--or-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .16s var(--or-ease-fade), color .16s var(--or-ease-fade);
}
.or-btn:hover, .or-btn:focus-visible { background: var(--or-flame); color: var(--or-bg); }
.or-btn-nav { height: 40px; padding: 0 18px; }
.or-link { color: var(--or-ink); text-decoration: underline 1px var(--or-support); text-underline-offset: 4px; transition: color .16s, text-decoration-color .16s; }
.or-link:hover { color: var(--or-flame); text-decoration-color: var(--or-flame); }

/* the persons: text until the light can find them */
.or-p { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: text; }
.or-js .or-p {
  cursor: pointer; color: var(--or-ink-3); padding-bottom: 4px;
  background: linear-gradient(var(--or-flame), var(--or-flame)) no-repeat 0 100% / 0 1px;
  transition: color .2s var(--or-ease-fade), background-size .14s var(--or-ease-fade);
}
.or-js .or-p:hover { text-decoration: underline 1px var(--or-support); text-underline-offset: 5px; }
.or-js .or-p.is-found { color: var(--or-ink); }
.or-js .or-p[aria-current="true"] { color: var(--or-ink); background-size: 100% 1px; text-decoration: none; transition: color .2s var(--or-ease-fade), background-size .22s var(--or-ease-lamp); }

/* ---------- nav ---------- */
.or-nav {
  position: sticky; top: var(--bar-h, 0px); z-index: 50; display: flex; align-items: center; gap: 32px;
  height: 64px; padding-inline: var(--or-m);
  background: rgb(12 9 6 / .92); border-bottom: 1px solid var(--or-rule);
  transition: background-color .3s var(--or-ease-fade), border-color .3s var(--or-ease-fade);
}
.or-js .or-nav:not(.is-solid) { background-color: rgb(12 9 6 / 0); border-bottom-color: transparent; }
.or-mast { margin-right: auto; font: italic 400 28px/1 var(--or-serif); text-decoration: none; }
.or-running { display: none; }
.or-menu { display: flex; gap: 32px; }
.or-menu a { font: 450 14px/1 var(--or-sans); text-decoration: none; color: var(--or-ink-2); transition: color .16s; }
.or-menu a:hover { color: var(--or-ink); text-decoration: underline 1px var(--or-flame); text-underline-offset: 6px; }

/* ---------- chapters ---------- */
.or-ch { position: relative; min-height: var(--or-ch-h); scroll-snap-align: start; }
.or-ch, .or-sec, .or-house { scroll-margin-top: calc(var(--bar-h, 0px) + var(--or-nav-h, 64px)); }
.or-scn { color: var(--or-support); }
.or-it { font: italic 400 var(--or-t-it)/.95 var(--or-serif); letter-spacing: -.005em; text-wrap: balance; }
.or-dir { font: italic 400 var(--or-t-dir)/1.2 var(--or-serif); max-width: 30ch; text-indent: -.3em; text-wrap: pretty; }
.or-disc .or-lab, .or-pour .or-lab { margin-bottom: 8px; }
.or-cast { font: 440 .9375rem/1.6 var(--or-sans); letter-spacing: .01em; }
.or-cast li { display: inline; white-space: nowrap; }
.or-cast li:not(:last-child)::after { content: "·"; margin: 0 .15em 0 .5em; color: var(--or-support); }
.or-cap { margin-top: 10px; font-size: .8125rem; line-height: 1.45; letter-spacing: .01em; color: var(--or-ink-2); }
.or-pn { font: 400 clamp(1.75rem, 1.4rem + 1vw, 2.25rem)/1.05 var(--or-serif); }
.or-how { margin-top: 10px; max-width: 44ch; font-size: .9375rem; line-height: 1.55; color: var(--or-ink-2); text-wrap: pretty; }
.or-how i { font-style: normal; color: var(--or-ink); }
.or-srv { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; }
.or-srv .or-lab { margin: 0; }
.or-srv i { font: italic 400 1.375rem/1 var(--or-serif); }

/* the stage: a photograph in the dark */
.or-stage { position: relative; overflow: hidden; background: var(--or-bg); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.or-stage:focus-visible { outline-offset: -8px; }
.or-lit, .or-lit img { position: absolute; inset: 0; width: 100%; height: 100%; }
.or-lit img { object-fit: cover; object-position: 50% 50%; }
.or-tp .or-lit img, .or-house .or-lit img { object-position: 60% 50%; }
.or-js .or-lit {
  -webkit-mask-image:
    radial-gradient(circle var(--or-lr) at var(--or-lx) var(--or-ly), #000 0 28%, rgb(0 0 0 / .5) 60%, transparent 100%),
    radial-gradient(circle var(--or-cr) at var(--or-cx) var(--or-cy), #000 0 22%, transparent 100%),
    radial-gradient(var(--or-srx) var(--or-sry) at var(--or-sx) var(--or-sy), rgb(0 0 0 / var(--or-street)) 0 40%, transparent 100%),
    linear-gradient(rgb(0 0 0 / var(--or-house)), rgb(0 0 0 / var(--or-house)));
  mask-image:
    radial-gradient(circle var(--or-lr) at var(--or-lx) var(--or-ly), #000 0 28%, rgb(0 0 0 / .5) 60%, transparent 100%),
    radial-gradient(circle var(--or-cr) at var(--or-cx) var(--or-cy), #000 0 22%, transparent 100%),
    radial-gradient(var(--or-srx) var(--or-sry) at var(--or-sx) var(--or-sy), rgb(0 0 0 / var(--or-street)) 0 40%, transparent 100%),
    linear-gradient(rgb(0 0 0 / var(--or-house)), rgb(0 0 0 / var(--or-house)));
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
.or-js .or-tp .or-stage { --or-street: .2; }       /* the street through the window's three panes; the rest of the room stays almost black */
.or-js .or-house .or-stage { --or-street: .16; }
.or-rim { display: none; }
.or-js .or-rim {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle var(--or-lr) at var(--or-lx) var(--or-ly), transparent 55%, rgb(224 135 74 / calc(.06 * var(--or-rimk))) 78%, transparent 100%);
}
.or-steam, .or-still { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.or-still {
  -webkit-mask-image: radial-gradient(circle var(--or-lr) at var(--or-lx) var(--or-ly), #000 0 35%, transparent 100%);
  mask-image: radial-gradient(circle var(--or-lr) at var(--or-lx) var(--or-ly), #000 0 35%, transparent 100%);
}

/* ---------- 2. the title page ---------- */
.or-tp .or-stage::after { content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0; width: 45%; pointer-events: none; background: linear-gradient(90deg, var(--or-bg), rgb(12 9 6 / 0)); }
.or-tp-text { position: relative; z-index: 4; display: flex; flex-direction: column; }
.or-kicker { color: var(--or-ink-2); }
.or-title { margin-top: 14px; font-family: var(--or-serif); text-wrap: balance; }
.or-title-name { display: block; font-size: clamp(4rem, 1.9rem + 8.6vw, 10.5rem); line-height: .86; letter-spacing: -.01em; }
.or-title-or { margin-left: 1.1em; font-style: italic; font-size: clamp(1.375rem, 1rem + 1.8vw, 2.5rem); line-height: 1; color: var(--or-support); }
.or-title-sub { font-style: italic; font-size: clamp(2.5rem, .9rem + 6.6vw, 7rem); line-height: .9; letter-spacing: -.005em; }
.or-nb { display: block; white-space: nowrap; }
.or-tp-low { display: grid; gap: 20px; }
.or-sub { max-width: 40ch; text-wrap: pretty; }
.or-tp .or-dir { color: var(--or-ink-2); }
.or-disc-tp { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
.or-disc-tp .or-lab { margin: 0; }
.or-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }

/* ---------- 3. the bill's foot, the argument ---------- */
.or-bill { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--or-rule); font-variant-numeric: lining-nums tabular-nums; }
.or-bill dt { font: 620 .75rem/1.2 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-ink-2); }
.or-bill dd { margin-top: 8px; font: 440 .9375rem/1.45 var(--or-sans); letter-spacing: .01em; text-wrap: pretty; }
.or-argument { font: 400 clamp(1.625rem, 1.2rem + 1.25vw, 2.375rem)/1.15 var(--or-serif); text-indent: -.62em; max-width: 26ch; text-wrap: pretty; margin-top: 20px; }
.or-pil { color: var(--or-flame); padding-right: .2em; }
.or-note { margin-top: 28px; max-width: 46ch; font-size: .875rem; line-height: 1.55; color: var(--or-ink-2); }
.or-persons-h { font: italic 400 1.5rem/1.2 var(--or-serif); color: var(--or-ink); margin-bottom: 20px; }
.or-persons a {
  display: grid; grid-template-columns: auto minmax(0, max-content) minmax(16px, 1fr) auto; align-items: baseline; column-gap: 12px;
  min-height: 44px; padding-block: 9px; text-decoration: none;
}
.or-persons a::after { content: ""; grid-column: 3; grid-row: 1; align-self: end; height: 2px; margin-bottom: .45em; background: radial-gradient(circle, var(--or-support) .75px, transparent 1.25px) 0 50% / 6px 2px repeat-x; }
.or-pp-n { font: 620 .75rem/1.2 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; transition: color .16s; }
.or-pp-r { font: italic 400 1.25rem/1.2 var(--or-serif); color: var(--or-ink-2); }
.or-pp-s { grid-column: 4; font-size: .9375rem; color: var(--or-ink-2); white-space: nowrap; }
.or-persons a:hover .or-pp-n { color: var(--or-flame); }
.or-pp-apart { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--or-rule); }
.or-pp-apart a::after { display: none; }

/* ---------- 4. the cards ---------- */
.or-card { display: grid; place-items: center; padding: 96px 88px; text-align: center; }
.or-card::before { content: ""; position: absolute; left: 50%; top: 50%; width: 60vmin; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; background: radial-gradient(closest-side, rgb(237 225 204 / .05), rgb(237 225 204 / 0)); }
.or-rule2 { position: absolute; left: 40px; top: 40px; width: calc(100% - 80px); height: calc(100% - 80px); overflow: visible; fill: none; stroke: var(--or-support); stroke-opacity: .55; stroke-width: 1; pointer-events: none; }
.or-ro { x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); }
.or-ri { x: 4.5px; y: 4.5px; width: calc(100% - 9px); height: calc(100% - 9px); }
.or-card > .or-cue { position: absolute; top: 72px; left: var(--or-m); width: 64px; }
.or-card-body { position: relative; display: grid; justify-items: center; max-width: 60rem; }
.or-card .or-it { margin-top: 16px; font-size: var(--or-t-card); line-height: .92; letter-spacing: -.01em; max-width: 12ch; }
.or-card .or-dir { margin-top: 24px; text-indent: 0; }
.or-plate { margin-top: 24px; max-width: 48ch; font: 440 .9375rem/1.6 var(--or-sans); }
.or-plate .or-lab { display: block; margin-bottom: 8px; }
.or-card .or-pour { margin-top: 32px; display: grid; justify-items: center; }
.or-card .or-how { max-width: 40ch; }

/* ---------- 5. the pours ---------- */
.or-sec { position: relative; padding-block: clamp(80px, 9vw, 128px); }
.or-sec-head .or-lab { margin-bottom: 16px; }
.or-h2 { font: 400 var(--or-t-h2)/1 var(--or-serif); text-wrap: balance; }
.or-sec-head .or-body { margin-top: 24px; max-width: 62ch; color: var(--or-ink-2); text-wrap: pretty; }
.or-table { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.or-table th, .or-table td { padding: 16px 16px 16px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--or-rule); }
.or-table thead th { padding-top: 0; font: 620 .75rem/1.2 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-support); }
.or-table tbody th { font: 620 .75rem/1.2 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-ink-2); white-space: nowrap; }
.or-t-pn { font: 400 1.5rem/1.1 var(--or-serif); }
.or-t-how, .or-t-srv { font-size: .9375rem; line-height: 1.5; color: var(--or-ink-2); }
.or-t-ans { font: italic 400 1.25rem/1.1 var(--or-serif); padding-right: 0; }
.or-key { margin-top: 24px; display: grid; gap: 4px; font-size: .8125rem; line-height: 1.45; color: var(--or-ink-2); }
.or-key div { display: flex; align-items: baseline; gap: .4em; }
.or-key dt { font: italic 400 1.25rem/1.3 var(--or-serif); color: var(--or-ink); }
.or-key dt::after { content: ":"; }

/* ---------- 6. the room ---------- */
.or-dict { margin-top: 24px; font: italic 400 clamp(1.375rem, 1.1rem + .7vw, 1.625rem)/1.25 var(--or-serif); max-width: 30ch; }
.or-dict b { font-weight: 400; color: var(--or-flame); }
.or-room-text .or-body { margin-top: 16px; max-width: 46ch; color: var(--or-ink-2); }
.or-room-text .or-dict + .or-body { margin-top: 28px; }
.or-setting { margin-top: 28px; font: italic 400 1.25rem/1.3 var(--or-serif); color: var(--or-ink-2); }
.or-set-svg { display: block; width: 100%; height: auto; overflow: visible; }
.or-s-faint { fill: none; stroke: var(--or-support); stroke-opacity: .32; stroke-width: 1; }
.or-s-dash { stroke-dasharray: 3 5; }
.or-s-ln { fill: none; stroke: var(--or-support); stroke-width: 1; vector-effect: non-scaling-stroke; }
.or-s-panes rect { fill: var(--or-ink); fill-opacity: .12; transition: fill-opacity .7s var(--or-ease-fade); }
.or-s-flame circle { fill: var(--or-flame); }
.or-s-lab text { font: 620 11px var(--or-sans); letter-spacing: .14em; text-transform: uppercase; fill: var(--or-ink-2); }
.or-set figcaption { margin-top: 20px; max-width: 52ch; font-size: .8125rem; line-height: 1.45; color: var(--or-ink-2); }

/* ---------- 7. notes ---------- */
.or-notes-list { counter-reset: or-n; font-size: clamp(1rem, .95rem + .1vw, 1.0625rem); line-height: 1.55; }
.or-notes-list li { position: relative; counter-increment: or-n; max-width: 40ch; text-wrap: pretty; }
.or-notes-list li::before { content: counter(or-n); position: absolute; right: calc(100% + 18px); top: -.2em; font: italic 400 2rem/1 var(--or-serif); color: var(--or-support); }

/* ---------- 8. house lights ---------- */
.or-house { position: relative; min-height: var(--or-ch-h); overflow: hidden; }
.or-house .or-it { font-size: var(--or-t-card); line-height: .92; letter-spacing: -.01em; max-width: 11ch; }
.or-house .or-lit img { transition: filter 2.4s var(--or-ease-lamp); }
.or-house.is-up .or-lit img { filter: brightness(1.28) saturate(1.06); }
.or-house .or-body { margin-top: 24px; max-width: 34ch; }
.or-house .or-btn { margin-top: 32px; }
.or-btn-l { height: 56px; padding: 0 32px; font-size: .875rem; }

/* ---------- 9. the programme you take home ---------- */
.or-prog.or-sec { padding-block: 112px; }
.or-leaf { position: relative; padding: 56px; background: var(--or-panel); }
.or-leaf .or-rule2 { left: 16px; top: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
.or-leaf .or-lab { color: var(--or-ink-2); }
.or-prog-h { margin-top: 16px; font: italic 400 var(--or-t-h2)/1 var(--or-serif); text-wrap: balance; }
.or-prog-lead { margin-top: 28px; }
.or-prog-cast { margin-top: 12px; max-width: 34ch; font: italic 400 var(--or-t-dir)/1.25 var(--or-serif); text-wrap: balance; }
.or-prog-cues { margin-top: 20px; font: 650 .75rem/1.5 var(--or-sans); letter-spacing: .12em; color: var(--or-flame); font-variant-numeric: lining-nums tabular-nums; }
.or-prog-close { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--or-rule); font: italic 400 1.375rem/1.3 var(--or-serif); color: var(--or-ink-2); text-wrap: balance; }

/* ---------- 10. colophon ---------- */
.or-colophon { display: grid; justify-items: center; gap: 14px; padding: clamp(96px, 10vw, 144px) var(--or-g) 112px; text-align: center; border-top: 1px solid var(--or-rule); }
.or-colo-name { font: italic 400 48px/1 var(--or-serif); }
.or-colo-line { font-size: .9375rem; color: var(--or-ink-2); }
.or-colo-note { max-width: 44ch; font-size: .8125rem; line-height: 1.45; color: var(--or-ink-2); }
.or-fin { margin-top: 24px; letter-spacing: .4em; margin-right: -.4em; }

/* ---------- the booking popover ---------- */
.or-book {
  position: fixed; inset: 0; margin: auto; width: min(380px, 100vw - 32px); height: fit-content; max-height: calc(100svh - 32px); overflow: auto;
  padding: 32px; border: 1px solid var(--or-rule); border-radius: 0; background: var(--or-panel); color: var(--or-ink);
  box-shadow: 0 0 40px rgb(0 0 0 / .55); font: 400 .9375rem/1.5 var(--or-sans); color-scheme: dark; overscroll-behavior: contain;
}
.or-book::backdrop { background: rgb(12 9 6 / .72); }
.or-book-top { display: flex; align-items: baseline; gap: 12px; }
/* a candle is lit for your table */
.or-book-flame {
  flex: none; align-self: center; width: 7px; height: 16px; margin-top: -4px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 55% 45% at 50% 70%, var(--or-ink), var(--or-flame));
  box-shadow: 0 0 12px 1px rgb(224 135 74 / .45);
}
.or-book-h { font: italic 400 2rem/1.05 var(--or-serif); }
.or-book-h:focus { outline: none; }
.or-book-h:focus-visible { outline: 2px solid var(--or-flame); outline-offset: 6px; }
.or-book-x { margin-left: auto; padding: 6px 0; border: 0; background: none; cursor: pointer; font: 620 .75rem/1 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-ink-2); text-decoration: underline 1px transparent; text-underline-offset: 5px; }
.or-book-x:hover { color: var(--or-ink); text-decoration-color: var(--or-flame); }
.or-book-echo { margin-top: 8px; font-size: .8125rem; color: var(--or-ink-2); }
.or-book-form { display: grid; gap: 14px; margin-top: 18px; }
.or-f-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.or-radios { display: flex; flex-wrap: wrap; column-gap: 24px; }
.or-f { display: grid; gap: 4px; border: 0; min-width: 0; }
.or-f > label:not(.or-radio), .or-f legend { font: 620 .75rem/1.2 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-ink-2); }
.or-f legend { margin-bottom: 6px; }
.or-f input:not([type="radio"]), .or-f select, .or-f textarea {
  width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--or-rule); border-radius: 0;
  background: transparent; color: var(--or-ink); font-size: 1rem; transition: border-color .16s;
}
.or-f select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--or-support) 50%) calc(100% - 10px) 55% / 5px 5px no-repeat, linear-gradient(-45deg, transparent 50%, var(--or-support) 50%) calc(100% - 5px) 55% / 5px 5px no-repeat; }
.or-f select option { background: var(--or-panel); color: var(--or-ink); }
.or-f textarea { min-height: 64px; resize: vertical; line-height: 1.45; }
.or-f textarea::placeholder { color: var(--or-ink-3); }
.or-f input:focus, .or-f select:focus, .or-f textarea:focus { outline: none; border-bottom-color: var(--or-flame); }
.or-f input:focus-visible, .or-f select:focus-visible, .or-f textarea:focus-visible { box-shadow: 0 1px 0 var(--or-flame); }
.or-radio { display: flex; align-items: center; gap: 10px; min-height: 36px; font: 400 .9375rem/1.3 var(--or-sans); letter-spacing: .005em; color: var(--or-ink); cursor: pointer; }
.or-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--or-flame); }
.or-book-go { width: 100%; margin-top: 6px; }
.or-book-status { min-height: 1.45em; font-size: .8125rem; line-height: 1.45; color: var(--or-ink-2); }
@supports (anchor-name: --a) {
  .or-btn-nav { anchor-name: --or-reserve; }
  @position-try --or-below { position-area: block-end span-inline-start; margin: 12px; }
  @position-try --or-beside { position-area: inline-end; align-self: center; margin: calc(var(--bar-h, 40px) + 12px) 12px 12px; }
  @media (min-width: 1100px) {
    .or-book {
      position-anchor: --or-reserve; position-area: inline-end span-block-start;
      position-try-fallbacks: --or-below, --or-beside, flip-inline;
      inset: auto; margin: calc(var(--bar-h, 40px) + 12px) 12px 12px; max-height: calc(100svh - var(--bar-h, 40px) - 32px);
    }
    .or-book::backdrop { background: rgb(12 9 6 / .4); }
  }
}
@media (max-width: 700px) {
  .or-book { inset: auto 0 0 0; margin: 0; width: 100%; max-height: 88svh; padding: 24px var(--or-g) 28px; border-width: 1px 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (transition-behavior: allow-discrete) {
    .or-book { opacity: 0; scale: .98; transition: opacity .2s var(--or-ease-fade), scale .2s var(--or-ease-lamp), display .2s allow-discrete, overlay .2s allow-discrete; }
    .or-book:popover-open { opacity: 1; scale: 1; }
    @starting-style { .or-book:popover-open { opacity: 0; scale: .98; } }
  }
}

/* ---------- 1100 and up: the prompter's margin and twelve columns ---------- */
@media (min-width: 1100px) {
  .or-tp, .or-front, .or-scene, .or-sec, .or-house { display: grid; grid-template-columns: var(--or-cols); column-gap: 24px; }

  .or-tp { grid-template-rows: minmax(var(--or-ch-h), auto); }
  .or-tp > .or-stage { grid-column: 7 / -1; grid-row: 1; }
  .or-tp > .or-cue { grid-column: 2; grid-row: 1; align-self: start; margin-top: 32px; position: relative; z-index: 4; }
  .or-tp-text { grid-column: 3 / 10; grid-row: 1; padding-block: 32px 36px; justify-content: space-between; gap: 22px; }
  .or-tp-low { max-width: 40rem; gap: 16px; }
  .or-tp .or-sub { max-width: 46ch; }
  .or-tp .or-dir { max-width: 36ch; }

  .or-front { align-content: center; padding-block: 64px; }
  .or-front > .or-cue { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; }
  .or-bill { grid-column: 3 / 15; grid-row: 1; margin-bottom: 48px; }
  .or-arg { grid-column: 3 / 9; grid-row: 2; }
  .or-cast-of { grid-column: 10 / 15; grid-row: 2; align-self: center; }
  .or-front::after { content: ""; grid-column: 9; grid-row: 2; justify-self: start; width: 1px; margin-left: -12px; background: var(--or-rule); }
  .or-leaf { grid-column: 6 / 12; }

  .or-scene { grid-template-rows: minmax(32px, 1fr) repeat(6, auto) minmax(32px, 1fr); }
  .or-scene > * { grid-column: 3 / 8; }
  .or-scene > .or-cue { grid-column: 2; grid-row: 2; align-self: baseline; }
  .or-scene > .or-scn { grid-row: 2; align-self: baseline; }
  .or-scene > .or-it { grid-row: 3; margin-top: 16px; position: relative; z-index: 5; }
  .or-scene > .or-dir { grid-row: 4; margin-top: 24px; max-width: 34ch; }
  .or-scene > .or-disc { grid-row: 5; margin-top: 24px; }
  .or-scene > .or-pour { grid-row: 6; margin-top: 32px; }
  .or-scene > .or-reserve { grid-row: 7; margin-top: 32px; justify-self: start; }
  .or-scene > .or-stage { grid-column: 8 / -1; grid-row: 1 / -1; }

  .or-sec-head { grid-column: 3 / 7; align-self: start; }
  .or-pours-main { grid-column: 7 / 15; }
  .or-room-text { grid-column: 3 / 8; align-self: start; padding-top: 13px; }
  .or-set { grid-column: 9 / 15; }
  .or-notes .or-sec-head { grid-column: 3 / 15; margin-bottom: 64px; }
  .or-notes-list { grid-column: 5 / 15; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 40px 96px; }

  .or-house { align-items: end; }
  .or-house > .or-stage { position: absolute; inset: 0; }
  .or-house::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(12 9 6 / .88) 0 30%, rgb(12 9 6 / 0) 62%); }
  .or-house > .or-cue { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 84px; position: relative; z-index: 2; }
  .or-house-text { grid-column: 3 / 9; grid-row: 1; position: relative; z-index: 2; padding-block: 96px 80px; }
}

/* ---------- below 1100: one column, the cue line ---------- */
@media (max-width: 1099px) {
  .or-page { --or-t-dir: clamp(1.375rem, 1.2rem + .5vw, 1.625rem); }
  .or-nav { gap: 16px; }
  .or-menu { display: none; }
  .or-running { display: block; position: absolute; left: 50%; translate: -50% 0; font: 620 11px/1 var(--or-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--or-ink-2); white-space: nowrap; }
  .or-cue { display: flex; gap: 6px; text-align: left; }
  .or-cue span::before { content: "· "; }

  .or-tp, .or-scene, .or-house { display: grid; grid-template-columns: var(--or-g) minmax(0, 1fr) var(--or-g); }
  .or-tp { align-content: start; }
  .or-tp > .or-stage { grid-column: 1 / -1; grid-row: 1; height: 58svh; }
  .or-tp .or-stage::after { inset: auto 0 0 0; width: auto; height: 46%; background: linear-gradient(0deg, var(--or-bg) 0 24%, rgb(12 9 6 / 0)); }
  .or-tp > .or-cue { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; margin-top: -12svh; position: relative; z-index: 5; color: var(--or-flame); }
  .or-tp-text { grid-column: 2; grid-row: 2; margin-top: -12svh; padding-bottom: 56px; }
  .or-tp .or-disc-tp { display: none; }
  .or-tp-low { margin-top: 24px; }

  .or-front { padding: 64px var(--or-g) 72px; }
  .or-front > .or-cue { justify-content: flex-end; margin-bottom: 20px; }
  .or-bill { margin-bottom: 40px; }
  .or-leaf { max-width: 36rem; margin-inline: auto; }
  .or-cast-of { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--or-rule); }

  .or-scene { padding-block: 40px 64px; }
  .or-scene > * { grid-column: 2; }
  .or-scene > .or-scn { grid-row: 1; }
  .or-scene > .or-cue { grid-row: 1; justify-self: end; align-self: baseline; }
  .or-scene > .or-it { grid-row: 2; margin-top: 16px; }
  .or-scene > .or-dir { grid-row: 3; margin-top: 20px; }
  .or-scene > .or-stage { grid-row: 4; grid-column: 1 / -1; margin-top: 28px; aspect-ratio: 5 / 4; max-height: 74svh; }
  .or-scene > .or-disc { grid-row: 5; margin-top: 16px; }
  .or-scene > .or-pour { grid-row: 6; margin-top: 32px; }
  .or-scene > .or-reserve { grid-row: 7; margin-top: 32px; width: 100%; }

  .or-card > .or-cue { top: 56px; left: auto; right: 48px; width: auto; }

  .or-sec { padding-inline: var(--or-g); }
  .or-pours-main, .or-set { margin-top: 48px; }
  .or-notes .or-sec-head { margin-bottom: 40px; }
  .or-notes-list { display: grid; gap: 28px; padding-left: 40px; }

  .or-house { align-content: start; }
  .or-house > .or-stage { grid-column: 1 / -1; grid-row: 1; height: 60svh; }
  .or-house > .or-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 3; background: linear-gradient(0deg, var(--or-bg), rgb(12 9 6 / 0)); pointer-events: none; }
  .or-house > .or-cue { grid-column: 2; grid-row: 2; margin-top: 8px; }
  .or-house-text { grid-column: 2; grid-row: 3; padding-block: 16px 72px; }
  .or-house .or-btn { width: 100%; }
  .or-s-lab text { font-size: 13px; }
}
@media (min-width: 701px) and (max-width: 1099px) {
  .or-tp-text, .or-tp > .or-cue { margin-top: -10svh; }
  /* the tablet hero: the portrait crop, in close on the bay, the table riding clear of the scrim */
  .or-tp > .or-stage { height: 52svh; }
  .or-tp .or-lit img { object-position: 50% 100%; }
  .or-scene > .or-stage { max-height: 62svh; }
}

/* ---------- 700 and below: the phone ---------- */
@media (max-width: 700px) {
  .or-nav { height: 56px; padding-inline: var(--or-g); }
  .or-mast { font-size: 24px; }
  .or-running { font-size: 10px; letter-spacing: .14em; }
  .or-btn-nav { height: 36px; padding: 0 14px; font-size: .75rem; }
  .or-tp .or-btn { width: 100%; }
  .or-acts { justify-content: center; gap: 18px; }
  .or-title-name { line-height: .9; }
  .or-title-or { margin-left: 0; }
  .or-kicker { max-width: calc(100% - 120px); }
  .or-tp > .or-cue { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: end; column-gap: 8px; row-gap: 4px; text-align: right; }
  .or-tp > .or-cue span::before { content: none; }
  /* the phone hero: a shorter stage, the table riding high, the name pulled up onto solid ground */
  .or-tp > .or-stage { height: 46svh; }
  .or-tp .or-lit img { object-position: 50% 100%; }
  .or-tp .or-stage::after { inset: 0; width: auto; height: auto; background: linear-gradient(0deg, var(--or-bg) 0 12%, rgb(12 9 6 / 0) 32%); }
  .or-tp-text, .or-tp > .or-cue { margin-top: -5svh; }
  .or-tp > .or-cue, .or-tp > .or-cue.is-go, .or-tp > .or-cue.is-go span { color: var(--or-ink-2); }

  .or-bill { grid-template-columns: 1fr 1fr; }
  .or-prog.or-sec { padding-block: 72px; }
  .or-leaf { padding: 40px 28px; }
  .or-leaf .or-rule2 { left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }

  .or-persons a { grid-template-columns: auto minmax(16px, 1fr) auto; row-gap: 2px; padding-block: 10px; }
  .or-persons a::after { grid-column: 2; }
  .or-pp-r { grid-column: 1 / -1; grid-row: 2; font-size: 1.25rem; }
  .or-pp-s { grid-column: 3; grid-row: 1; }

  .or-card { padding: 72px 36px; }
  .or-rule2 { left: 16px; top: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
  .or-card > .or-cue { top: 36px; right: 30px; }
  .or-card .or-it { max-width: 11ch; }
  .or-card .or-dir, .or-plate, .or-card .or-pour { margin-top: 20px; }

  .or-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .or-table, .or-table tbody { display: block; }
  .or-table tr { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; padding-block: 20px; border-bottom: 1px solid var(--or-rule); }
  .or-table th, .or-table td { padding: 0; border: 0; }
  .or-table tbody th { grid-column: 1 / -1; color: var(--or-support); }
  .or-t-pn { grid-column: 1 / -1; margin-top: 8px; font-size: 1.625rem; }
  .or-t-how { grid-column: 1 / -1; margin-top: 6px; }
  .or-t-srv { margin-top: 6px; font: italic 400 1.25rem/1.3 var(--or-serif); color: var(--or-ink); }
  .or-t-srv::after { content: " ·"; color: var(--or-support); }
  .or-t-ans { margin-top: 6px; font-size: 1.25rem; line-height: 1.3; }

  .or-s-lab text { font-size: 19px; }
  .or-notes-list { padding-left: 28px; }
  .or-notes-list li::before { right: calc(100% + 12px); font-size: 1.625rem; }
  .or-colo-name { font-size: 40px; }
}

/* ---------- motion: fade up, never fly in ---------- */
@media (prefers-reduced-motion: no-preference) {
  .or-js .or-scene > :is(.or-scn, .or-dir, .or-disc, .or-pour, .or-reserve) { transition: opacity .5s var(--or-ease-fade); }
  .or-js .or-scene > .or-it { transition: opacity .35s var(--or-ease-fade); }
  .or-js .or-scene.is-pre > :is(.or-it, .or-dir, .or-disc, .or-pour, .or-reserve) { opacity: 0; }
  .or-js .or-scene.is-beat > .or-it { opacity: 1; }
  .or-js .or-scene.is-in > .or-disc { transition-delay: 90ms; }
  .or-js .or-scene.is-in > .or-pour { transition-delay: 180ms; }
  .or-js .or-scene.is-in > .or-reserve { transition-delay: 270ms; }

  .or-js :is(.or-card, .or-prog) .or-rule2 rect { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--or-ease-lamp); }
  .or-js :is(.or-card, .or-prog):not(.is-drawn) .or-ro { stroke-dashoffset: 1; }
  .or-js :is(.or-card, .or-prog):not(.is-drawn) .or-ri { stroke-dashoffset: -1; }
  .or-js .or-ink-in { animation: or-fade .4s var(--or-ease-fade) both; }
  .or-book:popover-open .or-book-flame { animation: or-fade .6s var(--or-ease-fade) both, or-flick 1.7s ease-in-out .6s infinite alternate; }
  .or-js .or-card .or-card-body { transition: opacity .4s var(--or-ease-fade) .5s; }
  .or-js .or-card:not(.is-drawn) .or-card-body { opacity: 0; }

  .or-js .or-room:not(.is-lit) .or-s-panes rect { fill-opacity: 0; }
  .or-js .or-s-panes .or-pn2 { transition-delay: .25s; }
  .or-js .or-s-panes .or-pn3 { transition-delay: .5s; }
  .or-js .or-s-panes .or-pn4 { transition-delay: .75s; }

  @supports (animation-timeline: view()) {
    .or-card { view-timeline: --or-card block; }
    .or-js .or-card .or-ro { animation: or-draw linear both; }
    .or-js .or-card .or-ri { animation: or-draw-r linear both; }
    .or-js .or-card .or-rule2 rect { animation-timeline: --or-card; animation-range: entry 0% entry 70%; transition: none; }
    .or-js .or-card .or-card-body { animation: or-fade linear both; animation-timeline: --or-card; animation-range: entry 25% entry 65%; transition: none; }
    .or-js .or-card:not(.is-drawn) .or-card-body { opacity: 1; }

    .or-room { view-timeline: --or-room block; }
    .or-js .or-s-panes rect { animation: or-pane linear both; animation-timeline: --or-room; transition: none; }
    .or-js .or-room:not(.is-lit) .or-s-panes rect { fill-opacity: .12; }
    .or-js .or-s-panes .or-pn1 { animation-range: entry 60% cover 30%; }
    .or-js .or-s-panes .or-pn2 { animation-range: entry 75% cover 36%; }
    .or-js .or-s-panes .or-pn3 { animation-range: entry 90% cover 42%; }
    .or-js .or-s-panes .or-pn4 { animation-range: cover 22% cover 48%; }
  }
}
@keyframes or-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes or-draw-r { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } }
@keyframes or-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes or-pane { from { fill-opacity: 0; } to { fill-opacity: .12; } }
@keyframes or-flick { from { transform: scaleY(.97); } to { transform: scaleY(1.03); } }

@media (prefers-reduced-motion: reduce) {
  .or-page *, .or-page *::before, .or-page *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

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