@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");
:root { --paper:#f4efe3; --paper-deep:#e8dfcf; --ink:#20231d; --muted:#66685f; --line:#cfc5b3; --rachel:#d4ae56; --rachel-pale:#f0dfad; --weekend:#bd765e; --weekend-pale:#efcbbd; --event:#263f43; --event-ink:#f9f5ec; --focus:#0d4f55; }
* { box-sizing:border-box; } html { background:var(--paper); } body { margin:0; color:var(--ink); background:var(--paper); font:400 15px/1.45 Inter,system-ui,sans-serif; } a { color:inherit; text-underline-offset:3px; } a:focus-visible,button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; } .app-shell { min-height:100vh; } .skip-link { position:absolute; left:1rem; top:-4rem; background:var(--ink); color:var(--paper); padding:.65rem .9rem; z-index:5; } .skip-link:focus { top:1rem; }
.masthead, main, .source-strip { width:min(1320px, calc(100% - 2rem)); margin-inline:auto; } .masthead { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; padding:2rem 0 1.5rem; border-bottom:2px solid var(--ink); } .eyebrow,.section-label { margin:0 0 .3rem; font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } h1,h2 { margin:0; font-family:Fraunces,Georgia,serif; line-height:1; letter-spacing:-.035em; } h1 { font-size:clamp(2.2rem,6vw,4.4rem); } h2 { font-size:clamp(1.7rem,3vw,2.7rem); } nav { display:flex; gap:1rem; padding-bottom:.25rem; } nav a { text-decoration:none; font-size:.9rem; border-bottom:2px solid transparent; padding:.3rem 0; } nav a[aria-current="page"] { font-weight:700; border-color:var(--ink); }
.monitor-intro { display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:1.5rem 0 1rem; } .status-line { display:flex; flex-wrap:wrap; justify-content:end; gap:1.4rem; margin:0; } .status-line div { display:grid; gap:.1rem; } dt { color:var(--muted); font:500 10px/1.2 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; } dd { margin:0; font:500 .78rem/1.3 "DM Mono",monospace; } .programme-week { margin:0 0 1.6rem; } .week-label { margin:0 0 .55rem; font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); } .week-scroller { overflow-x:auto; padding-bottom:.5rem; scrollbar-color:var(--ink) var(--paper-deep); } .week-grid { display:grid; grid-template-columns:repeat(7,minmax(152px,1fr)); min-width:1080px; border:1px solid var(--line); background:var(--line); gap:1px; }
.day-column { min-height:440px; background:var(--paper); position:relative; } .day-column.is-available { background:var(--rachel-pale); } .day-column.is-weekend { background:var(--weekend-pale); } .day-column.is-muted { background:#eeeadf; color:#74756d; } .day-heading { display:flex; justify-content:space-between; align-items:center; min-height:58px; padding:.8rem .75rem; border-bottom:1px solid rgba(32,35,29,.35); } .day-name { margin:0; font:600 .82rem/1.2 "DM Mono",monospace; } .rachel-badge { display:grid; width:27px; height:27px; place-items:center; border:2px solid var(--ink); border-radius:50%; font:700 13px/1 Inter,sans-serif; } .unavailable-label { font:500 10px/1 "DM Mono",monospace; text-transform:uppercase; opacity:.7; }
.timeline { min-height:380px; height:380px; position:relative; } .time-mark { position:absolute; left:.7rem; right:.7rem; padding-top:.15rem; border-top:1px solid rgba(32,35,29,.18); font:500 9px/1 "DM Mono",monospace; color:inherit; opacity:.58; } .time-mark:nth-child(1) { top:.55rem; } .time-mark:nth-child(2) { top:33.55%; } .time-mark:nth-child(3) { top:66.55%; } .event-block { position:absolute; top:var(--event-top); height:var(--event-height); left:.55rem; right:.55rem; min-height:70px; overflow:hidden; border:0; border-left:4px solid var(--rachel); background:var(--event); color:var(--event-ink); text-align:left; padding:.55rem .6rem; cursor:pointer; display:flex; flex-direction:column; gap:.15rem; box-shadow:0 1px 0 rgba(0,0,0,.18); } .is-weekend .event-block { border-left-color:var(--weekend); } .is-muted .event-block { opacity:.64; } .event-block time { font:500 10px/1.1 "DM Mono",monospace; color:#d9e2d9; } .event-block strong { font:600 .84rem/1.15 Inter,sans-serif; } .event-block span { font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#d9e2d9; } .empty-day { margin:0; position:absolute; top:43%; width:100%; padding:0 .7rem; font:400 .72rem/1.3 "DM Mono",monospace; text-align:center; opacity:.68; }
.data-notice { margin:0 0 .45rem; max-width:52rem; padding:.75rem .9rem; border-left:4px solid var(--rachel); background:var(--paper-deep); color:var(--ink); font-size:.88rem; } .source-health { margin:0 0 1rem; padding:.75rem .9rem; border:1px solid var(--line); background:rgba(232,223,207,.55); } .source-health-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.35rem 1rem; align-items:baseline; } .source-health-heading .section-label,.source-health-heading p:not(.section-label) { margin:0; } #source-health-as-of { color:var(--muted); font:500 .68rem/1.35 "DM Mono",monospace; } .source-health-list { display:flex; flex-wrap:wrap; gap:.45rem .8rem; list-style:none; margin:.65rem 0 0; padding:0; font:500 .72rem/1.35 "DM Mono",monospace; } .source-health-item { display:flex; align-items:baseline; flex-wrap:wrap; gap:.25rem; min-width:0; } .source-health-item strong { font-size:.8rem; } .source-health-item.is-available strong { color:#287044; } .source-health-item.is-unavailable strong { color:#9b573f; } .source-health-state { color:var(--muted); } .legend { display:flex; flex-wrap:wrap; gap:1rem; padding:1.1rem 0 2.5rem; font-size:.78rem; color:var(--muted); } .legend span { display:flex; gap:.4rem; align-items:center; } .legend i { width:12px; height:12px; display:inline-block; border:1px solid var(--ink); } .key-rachel { background:var(--rachel-pale); } .key-weekend { background:var(--weekend-pale); } .key-muted { background:#eeeadf; opacity:.65; }
.source-strip { padding:1.3rem 0 2.2rem; border-top:1px solid var(--ink); display:grid; grid-template-columns:minmax(180px,.7fr) 2fr; gap:1rem; } .source-strip p:not(.section-label) { margin:0; max-width:25rem; font-size:.8rem; color:var(--muted); } #source-list { display:flex; align-content:start; flex-wrap:wrap; gap:.45rem .8rem; list-style:none; margin:0; padding:0; font:500 .72rem/1.4 "DM Mono",monospace; } .source-unlinked { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px; }
.placeholder { padding:clamp(5rem,18vh,11rem) 0; max-width:720px; } .placeholder h2 { margin-bottom:1.2rem; } .placeholder p:not(.section-label) { max-width:40rem; font-size:1.05rem; } .back-link { display:inline-block; margin-top:1rem; font-weight:700; }
dialog { border:0; padding:0; width:min(560px,calc(100% - 2rem)); color:var(--ink); background:var(--paper); box-shadow:0 12px 40px rgba(0,0,0,.32); } dialog::backdrop { background:rgba(24,28,23,.66); } .dialog-inner { padding:2rem; position:relative; } .dialog-close { position:absolute; top:.7rem; right:.7rem; border:1px solid var(--ink); background:transparent; color:var(--ink); padding:.35rem .5rem; cursor:pointer; font:500 10px "DM Mono",monospace; text-transform:uppercase; } .dialog-inner h2 { padding-right:4rem; margin-bottom:1.5rem; } .event-details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.9rem 0; margin:0; display:grid; gap:.8rem; } .event-details div { display:grid; grid-template-columns:74px 1fr; gap:.8rem; } .event-details dd { font:400 .88rem/1.35 Inter,sans-serif; } .dialog-description { margin:1.2rem 0; } .ticket-link { display:inline-block; background:var(--ink); color:var(--paper); padding:.7rem .85rem; text-decoration:none; font-weight:700; }.data-error { padding:2rem; background:#eee0d4; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; clip-path:inset(50%); }
@media (max-width:640px) { .masthead { align-items:flex-start; flex-direction:column; gap:1rem; padding-top:1.35rem; } .monitor-intro { align-items:flex-start; flex-direction:column; } .status-line { justify-content:start; gap:1rem; } .source-health-heading { align-items:flex-start; flex-direction:column; } .source-health-list { display:grid; gap:.55rem; } .source-health-item { display:grid; grid-template-columns:auto 1fr; column-gap:.35rem; } .source-health-item .source-health-state { grid-column:2; } .week-scroller { width:calc(100% + 1rem); } .source-strip { grid-template-columns:1fr; } .dialog-inner { padding:1.5rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }