/* Charlotte Occasions Guide: Run of Show design (prefix ros-). Ivory paper, aubergine ink, brass accent. */
:root {
  --paper: oklch(96.6% 0.018 85);
  --paper-2: oklch(93.2% 0.026 82);
  --sheet: oklch(98.8% 0.01 85);
  --ink: oklch(24% 0.06 330);
  --ink-2: oklch(38% 0.05 330);
  --plum: oklch(24% 0.06 330);
  --plum-2: oklch(31% 0.07 330);
  --on-plum: oklch(95% 0.02 85);
  --brass: oklch(72% 0.13 80);
  --brass-deep: oklch(42% 0.1 68);
  --rule: oklch(79% 0.035 80);
  --focus: oklch(48% 0.18 300);
  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Red Hat Mono", ui-monospace, Consolas, monospace;
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --ruler-w: 17rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; }
img, svg, iframe { max-width: 100%; }
a { color: var(--brass-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 var(--s4); overflow-wrap: anywhere; min-width: 0; font-style: normal; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; line-height: 1.3; margin: var(--s5) 0 var(--s2); }
p { margin: 0 0 var(--s4); }
ul, ol { padding-left: 1.25rem; margin: 0 0 var(--s4); }
.ros-skip { position: absolute; left: -999px; top: 0; background: var(--plum); color: var(--on-plum); padding: var(--s2) var(--s4); z-index: 100; }
.ros-skip:focus { left: var(--s2); top: var(--s2); }
.ros-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* frame: left cue ruler on wide screens, top bar and menu sheet below 56rem */
.ros-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 1rem; background: var(--plum); color: var(--on-plum); position: sticky; top: 0; z-index: 30; }
.ros-top .ros-brand { color: var(--on-plum); }
.ros-ruler { display: none; }
.ros-brand { display: flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.15; min-width: 0; }
.ros-brand svg { flex: none; color: inherit; }
.ros-brand small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.02em; opacity: 0.8; margin-top: 2px; }
.ros-menu-btn { font: inherit; font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; background: transparent; color: inherit; border: 1.5px solid currentColor; padding: 0.5rem 0.9rem; min-height: 44px; cursor: pointer; white-space: nowrap; }
.ros-menu { position: fixed; inset: 0; z-index: 60; background: color-mix(in oklch, var(--plum) 55%, transparent); overflow-y: auto; }
.ros-menu[hidden] { display: none; }
.ros-menu-card { background: var(--paper); margin: 0 0 0 auto; width: min(26rem, 100%); min-height: 100%; padding: var(--s4) 1.25rem var(--s7); }
.ros-menu-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s4); }
.ros-menu-head .ros-menu-btn { color: var(--ink); }
.ros-cues h2 { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass-deep); margin: var(--s5) 0 var(--s2); }
.ros-cues ol, .ros-cues ul { list-style: none; padding: 0; margin: 0; }
.ros-cues a { display: flex; align-items: baseline; gap: var(--s3); padding: 0.32rem 0; color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.3; border-bottom: 1px dotted var(--rule); min-height: 36px; }
.ros-cues a:hover { color: var(--brass-deep); }
.ros-cues a[aria-current="page"] { font-weight: 700; color: var(--brass-deep); }
.ros-no { font-family: var(--font-mono); font-size: 0.74rem; color: var(--brass-deep); flex: none; width: 1.6rem; }
.ros-stage { min-width: 0; }
.ros-wrap { width: min(100%, 64rem); margin: 0 auto; padding: 0 1rem; }
.ros-section { padding: var(--s7) 0; }
.ros-measure { max-width: 40rem; }

@media (min-width: 56rem) {
  .ros-top, .ros-menu { display: none; }
  .ros-ruler { display: block; position: fixed; left: 0; top: 0; bottom: 0; width: var(--ruler-w); overflow-y: auto; background: var(--sheet); border-right: 2px solid var(--ink); padding: var(--s5) var(--s4) var(--s6) var(--s5); z-index: 20; }
  .ros-ruler .ros-brand { margin-bottom: var(--s4); }
  .ros-stage { margin-left: var(--ruler-w); }
  .ros-wrap { padding: 0 var(--s6); }
}

/* hero */
.ros-hero { padding: var(--s6) 0 var(--s6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; border-bottom: 2px solid var(--ink); }
.ros-crumbs { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 var(--s3); }
.ros-crumbs a { color: var(--ink-2); }
.ros-lede { font-size: 1.2rem; line-height: 1.55; max-width: 38rem; color: var(--ink-2); }
.ros-hero-home h1 { max-width: 14ch; }
.ros-photo { margin: 0; border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 var(--brass); }
.ros-photo img { display: block; width: 100%; height: auto; }
@media (min-width: 62rem) {
  .ros-hero-guide, .ros-hero-home, .ros-hero-about { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s6); }
}
.ros-cuesheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin: var(--s5) 0 0; border: 1.5px solid var(--ink); background: var(--sheet); }
.ros-cuesheet div { padding: var(--s3) var(--s4); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.ros-cuesheet dt { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass-deep); }
.ros-cuesheet dd { margin: 2px 0 0; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }

/* venue sheet (area pages) */
.ros-banner { margin: var(--s5) 0 0; }
.ros-venuefacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: var(--s5) 0 0; border-top: 4px double var(--ink); border-bottom: 1px solid var(--ink); }
.ros-venuefacts div { padding: var(--s3) var(--s4) var(--s3) 0; min-width: 0; }
.ros-venuefacts dt { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass-deep); }
.ros-venuefacts dd { margin: 2px 0 0; font-weight: 600; font-size: 0.95rem; line-height: 1.35; }

/* article body */
.ros-article { max-width: 44rem; padding: var(--s6) 0 var(--s5); }
.ros-sec { margin: 0 0 var(--s6); }
.ros-sec h2::before { content: ""; display: block; width: 3rem; height: 4px; background: var(--brass); margin-bottom: var(--s3); }
.ros-marks { list-style: none; padding: 0; }
.ros-marks li { position: relative; padding: 0.4rem 0 0.4rem 1.7rem; border-bottom: 1px dotted var(--rule); }
.ros-marks li::before { content: ""; position: absolute; left: 0.2rem; top: 0.95rem; width: 0.55rem; height: 0.55rem; background: var(--brass); transform: rotate(45deg); }
.ros-steps { list-style: none; padding: 0; counter-reset: cue; }
.ros-steps li { counter-increment: cue; position: relative; padding: 0 0 var(--s4) 3.4rem; margin: 0 0 var(--s3); border-left: 2px solid var(--ink); margin-left: 1rem; }
.ros-steps li::before { content: counter(cue, decimal-leading-zero); position: absolute; left: -1rem; top: 0; background: var(--ink); color: var(--on-plum); font-family: var(--font-mono); font-size: 0.8rem; padding: 0.15rem 0.4rem; }
.ros-steps h3 { margin-top: 0; }
.ros-faq h3 { margin-top: var(--s5); }
.ros-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.ros-chips a { display: inline-block; padding: 0.4rem 0.8rem; border: 1.5px solid var(--ink); background: var(--sheet); color: var(--ink); text-decoration: none; font-size: 0.92rem; min-height: 36px; }
.ros-chips a:hover { background: var(--brass); }
.ros-refs { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: 0.9rem; }
.ros-refs h2 { font-size: 1.1rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.ros-refs h2::before { display: none; }
.ros-refs ol { margin: 0; }
.ros-community { background: var(--plum); color: var(--on-plum); padding: var(--s5); margin: 0 0 var(--s6); border-left: 10px solid var(--brass); }
.ros-community h2 { color: var(--on-plum); font-size: 1.5rem; }
.ros-community a { color: var(--brass); }
.ros-community a:hover { color: var(--on-plum); }
.ros-community h3 { color: var(--on-plum); }
.ros-ent { border-top: 1px dashed color-mix(in oklch, var(--on-plum) 40%, transparent); padding-top: var(--s3); }
.ros-ent p { margin-bottom: var(--s2); }
.ros-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4) 0 var(--s7); }
.ros-pager a { display: block; padding: var(--s4); border: 2px solid var(--ink); background: var(--sheet); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
.ros-pager a:hover { background: var(--brass); }
.ros-pager span { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--s2); color: var(--brass-deep); }
.ros-pager .ros-next { text-align: right; }

/* home: call sheet */
.ros-call { position: relative; }
.ros-calls { list-style: none; margin: 0; padding: 0; }
.ros-call::before { content: ""; position: absolute; left: 5.2rem; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.ros-calls > li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 0 var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); position: relative; }
.ros-time { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; line-height: 1.2; }
.ros-time small { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-deep); margin-top: 3px; }
.ros-call h3 { margin: 0 0 var(--s2); font-family: var(--font-display); font-size: 1.45rem; }
.ros-call h3 a { color: var(--ink); text-decoration: none; }
.ros-call h3 a:hover { color: var(--brass-deep); text-decoration: underline; }
.ros-call p { margin: 0 0 var(--s2); color: var(--ink-2); }
.ros-calls li::after { content: ""; position: absolute; left: 4.75rem; top: 1.45rem; width: 0.95rem; height: 0.95rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 50%; }
.ros-clock { position: absolute; left: 4.35rem; top: 0; width: 1.9rem; height: 1.9rem; margin-top: -0.2rem; border-radius: 50%; background: var(--brass); border: 2px solid var(--ink); z-index: 2; display: grid; place-items: center; transition: top 0.2s var(--ease); pointer-events: none; }
.ros-clock::after { content: ""; width: 2px; height: 0.7rem; background: var(--ink); transform: translateY(-0.1rem); }
.ros-band { background: var(--plum); color: var(--on-plum); }
.ros-band h2 { color: var(--on-plum); }
.ros-band a { color: var(--brass); }
.ros-band .ros-lede { color: var(--on-plum); opacity: 0.9; }
.ros-sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); list-style: none; padding: 0; margin: var(--s5) 0 0; }
.ros-sheets a { display: block; height: 100%; padding: var(--s4); border: 1.5px solid var(--on-plum); text-decoration: none; color: var(--on-plum); }
.ros-sheets a:hover { background: var(--plum-2); }
.ros-sheets b { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--on-plum); }
.ros-sheets span { font-size: 0.92rem; opacity: 0.85; }
.ros-sheets em { font-style: normal; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--brass); display: block; margin-bottom: var(--s2); }

/* directory: running order and rider sheets */
.ros-order { list-style: none; padding: 0; margin: var(--s5) 0; counter-reset: ord; border-top: 2px solid var(--ink); }
.ros-order li { counter-increment: ord; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.ros-order li::before { content: counter(ord, decimal-leading-zero); font-family: var(--font-mono); color: var(--brass-deep); font-size: 0.9rem; padding-top: 0.3rem; }
.ros-order h3 { margin: 0 0 var(--s1); font-family: var(--font-display); font-size: 1.35rem; }
.ros-order h3 a { color: var(--ink); text-decoration: none; }
.ros-order h3 a:hover { color: var(--brass-deep); text-decoration: underline; }
.ros-order p { margin: 0 0 var(--s1); }
.ros-order .ros-meta { font-size: 0.92rem; color: var(--ink-2); }
.ros-rider { width: 100%; border-collapse: collapse; margin: 0 0 var(--s6); background: var(--sheet); border: 2px solid var(--ink); }
.ros-rider th, .ros-rider td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); vertical-align: top; }
.ros-rider th { width: 9rem; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brass-deep); font-weight: 500; }
.ros-map { border: 2px solid var(--ink); background: var(--paper-2); box-shadow: 8px 8px 0 var(--brass); margin: var(--s4) 8px var(--s5) 0; }
.ros-map iframe { display: block; width: 100%; height: 22rem; border: 0; }

/* forms */
.ros-contact { background: var(--sheet); border: 2px solid var(--ink); padding: var(--s5); margin: 0 0 var(--s6); max-width: 36rem; }
.ros-contact label { display: block; font-weight: 600; margin-bottom: var(--s4); }
.ros-contact input[type=text], .ros-contact input[type=email], .ros-contact textarea { display: block; width: 100%; margin-top: var(--s1); padding: 0.7rem; font: inherit; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); }
.ros-btn { font: inherit; font-weight: 700; background: var(--ink); color: var(--on-plum); border: 2px solid var(--ink); padding: 0.75rem 1.6rem; min-height: 44px; cursor: pointer; }
.ros-btn:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
.ros-btn:disabled { opacity: 0.6; cursor: default; }
.ros-note { font-size: 0.9rem; color: var(--ink-2); }

/* footer: seating chart */
.ros-foot { background: var(--plum); color: var(--on-plum); padding: var(--s7) 0 var(--s6); margin-top: var(--s7); }
.ros-foot-title { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; margin: 0 0 var(--s1); }
.ros-foot-sub { opacity: 0.85; margin-bottom: var(--s5); }
.ros-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); border-top: 1px solid color-mix(in oklch, var(--on-plum) 45%, transparent); border-left: 1px solid color-mix(in oklch, var(--on-plum) 45%, transparent); }
.ros-seat { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--on-plum); text-decoration: none; border-right: 1px solid color-mix(in oklch, var(--on-plum) 45%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--on-plum) 45%, transparent); min-height: 48px; line-height: 1.25; }
.ros-seat b { font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; color: var(--brass); flex: none; min-width: 1.4rem; }
.ros-seat:hover { background: var(--plum-2); }
.ros-fine { margin: var(--s5) 0 0; font-size: 0.88rem; opacity: 0.85; }
.ros-fine a { color: var(--on-plum); }

@media (max-width: 40rem) {
  .ros-call::before { left: 1.2rem; }
  .ros-calls > li { grid-template-columns: minmax(0, 1fr); padding-left: 2.8rem; }
  .ros-calls li::after { left: 0.75rem; top: 1.45rem; }
  .ros-clock { left: 0.3rem; }
  .ros-time { margin-bottom: var(--s2); }
  .ros-rider th { width: 6.5rem; }
  .ros-map iframe { height: 18rem; }
}
@media (prefers-reduced-motion: reduce) { .ros-clock { transition: none; } }