/* Demo demo24 "Raster" — a Swiss poster: white, black 2px rules, one red, Archivo condensed to wide, numbered views, a giant date. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  --white: #f6f5f1; --ink: #0d0d0d; --muted: #6b6b66; --red: #e3241b; --rule: 2px solid var(--ink); --hair: 1px solid rgba(13,13,13,.18);
  background: var(--white); color: var(--ink);
  font: 400 15px/1.4 "Archivo", "Helvetica Neue", Arial, sans-serif; font-stretch: 100%; -webkit-font-smoothing: antialiased;
}
.rs {
  --cal-line: rgba(13,13,13,.06); --cal-line-strong: rgba(13,13,13,.2);
  --c-shoot: #0d0d0d; --c-casting: #e3241b; --c-meetup: #1b4fe3; --c-fitting: #f29a13; --c-deadline: #e3241b; --c-publish: #0a8a5a;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 0 2rem;
}
button:focus-visible, [tabindex]:focus-visible, a:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* head */
.rs__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding: 1.2rem 0 1rem; border-bottom: var(--rule); }
.rs__date { position: relative; line-height: .74; }
.rs__day { font: 900 clamp(5rem, 9vw, 8.5rem)/.74 "Archivo", sans-serif; font-stretch: 62%; letter-spacing: -.04em; display: block; font-variant-numeric: tabular-nums; }
.rs__dot { position: absolute; right: -1.1rem; top: 0; width: .8rem; height: .8rem; background: var(--red); border-radius: 50%; }
.rs__brand { display: block; font: 700 .72rem/1 "Archivo", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; margin-bottom: .6rem; }
.rs__brand:hover { color: var(--red); }
.rs__title { margin: 0; font: 800 clamp(1.8rem, 3.2vw, 3rem)/.95 "Archivo", sans-serif; font-stretch: 75%; letter-spacing: -.02em; text-transform: uppercase; }
.rs__sub { margin: .5rem 0 0; font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rs__step { display: flex; gap: 0; border: var(--rule); }
.rs__btn { font: 700 .9rem/1 "Archivo", sans-serif; background: var(--white); color: var(--ink); border: 0; border-right: var(--rule); height: 2.7rem; min-width: 2.9rem; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
.rs__btn:last-child { border-right: 0; }
.rs__btn--wide, .rs__btn--add { padding: 0 1rem; }
.rs__btn:hover { background: var(--ink); color: var(--white); }
.rs__btn--add { background: var(--red); color: #fff; }
.rs__btn--add:hover { background: var(--ink); }

/* numbered views */
.rs__views { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-bottom: var(--rule); counter-reset: v; }
.cal-view { counter-increment: v; display: flex; align-items: baseline; gap: .5rem; padding: .75rem .2rem .7rem 0; border-right: var(--hair); font: 700 .95rem/1 "Archivo", sans-serif; font-stretch: 85%; text-transform: uppercase; letter-spacing: .02em; position: relative; }
.cal-view::before { content: "0" counter(v); font-size: .7rem; color: var(--muted); font-stretch: 100%; }
.cal-view + .cal-view { padding-left: .8rem; }
.cal-view:last-child { border-right: 0; }
.cal-view:hover { color: var(--red); }
.cal-view.is-active { color: var(--red); }
.cal-view.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 6px; background: var(--red); }
.cal-view + .cal-view.is-active::after { left: 0; }

.rs__body { flex: 1; min-height: 0; overflow: auto; }
.rs[data-view="week"] .rs__body, .rs[data-view="hours"] .rs__body { overflow: hidden; }

/* month */
.cal-month__dow { padding: .6rem .5rem .5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-bottom: var(--hair); }
.cal-month__grid { --cal-row: 6.5rem; }
.cal-month__cell { border-right: var(--hair); border-bottom: var(--hair); padding: .35rem .45rem .4rem; }
.cal-month__cell:nth-child(7n) { border-right: 0; }
.cal-month__cell:hover { background: #fff; }
.cal-month__cell.is-out { color: var(--muted); background: repeating-linear-gradient(90deg, transparent 0 3px, rgba(13,13,13,.04) 3px 4px); }
.cal-month__num { font: 800 1.9rem/1 "Archivo", sans-serif; font-stretch: 62%; letter-spacing: -.02em; }
.cal-month__num:hover { color: var(--red); }
.cal-month__mon { font-size: .55em; font-stretch: 100%; text-transform: uppercase; color: var(--red); vertical-align: top; }
.cal-month__cell.is-today { box-shadow: inset 0 0 0 3px var(--red); }
.cal-month__cell.is-today .cal-month__num { color: var(--red); }
.cal-month__next { position: absolute; right: .45rem; top: .45rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: var(--ink); color: var(--white); padding: .2rem .35rem; }
.cal-chip { font-size: .76rem; line-height: 1.3; }
.cal-chip::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--c); align-self: center; }
.cal-chip[data-cat="casting"]::before { border-radius: 50%; }
.cal-chip[data-cat="deadline"]::before { background: none; border: 2px solid var(--c); width: 7px; height: 7px; }
.cal-chip__time { font-weight: 700; font-size: .72rem; }
.cal-chip:hover { color: var(--red); }
.cal-month__more { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--red); }

/* quarter & year */
.cal-quarter { padding-top: 1.4rem; --cal-gap: 0; }
.cal-quarter__month { padding: 0 1.4rem; border-left: var(--hair); }
.cal-quarter__month:first-child { border-left: 0; padding-left: 0; }
.cal-mini__name { font: 800 2.6rem/.9 "Archivo", sans-serif; font-stretch: 62%; text-transform: uppercase; margin-bottom: 1rem; }
.cal-mini__name:hover { color: var(--red); }
.cal-mini__year { color: var(--muted); font-size: .45em; font-stretch: 100%; }
.cal-mini__dow { font-size: .66rem; font-weight: 700; text-transform: uppercase; padding-bottom: .4rem; border-bottom: var(--hair); margin-bottom: .2rem; }
.cal-mini__day { font-weight: 600; font-size: .92rem; }
.cal-mini__day:hover { background: var(--ink); color: var(--white); }
.cal-mini__day.is-today { background: var(--red); color: #fff; }
.cal-mini__dots i { border-radius: 0; }
.cal-quarter__count { margin: .8rem 0 0; padding-top: .5rem; border-top: var(--rule); font-weight: 800; text-transform: uppercase; font-size: .78rem; }
.cal-year { padding-top: 1.2rem; gap: 1.6rem 1.4rem; }
.cal-year .cal-mini { border-top: var(--rule); padding-top: .5rem; }
.cal-year .cal-mini__name { font-size: 1.6rem; margin-bottom: .5rem; }
.cal-year .cal-mini__day { font-size: .72rem; }
.cal-year .cal-mini__dots { display: none; }
.cal-year .cal-mini__day[data-load="1"] { box-shadow: inset 0 -2px 0 var(--ink); }
.cal-year .cal-mini__day[data-load="2"] { box-shadow: inset 0 -4px 0 var(--ink); }
.cal-year .cal-mini__day[data-load="3"] { box-shadow: inset 0 -7px 0 var(--ink); }
.cal-year .cal-mini__day[data-load="4"] { background: var(--ink); color: var(--white); }
.cal-year .cal-mini__day.is-today { background: var(--red); color: #fff; box-shadow: none; }

/* hour grids */
.cal-grid__head { border-bottom: var(--rule); }
.cal-grid__corner { padding: 0 .3rem .5rem 0; font-weight: 700; color: var(--muted); }
.cal-grid__day { padding: .5rem 0 .4rem; align-items: flex-start; padding-left: .5rem; border-left: var(--hair); }
.cal-grid__dow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cal-grid__num { font: 800 2.2rem/.9 "Archivo", sans-serif; font-stretch: 62%; }
.cal-grid--hours .cal-grid__day { flex-direction: row; align-items: baseline; gap: .8rem; }
.cal-grid__day.is-today { color: var(--red); }
.cal-grid__time { font-weight: 600; color: var(--muted); }
.cal-grid__col { border-left: var(--hair); }
.cal-grid__col.is-today { background-color: rgba(227,36,27,.035); }
.cal-ev { background: #fff; border: 2px solid var(--ink); padding: .2rem .4rem; font-size: .74rem; line-height: 1.2; }
.cal-ev::before { content: ""; position: absolute; right: 4px; top: 4px; width: 8px; height: 8px; background: var(--c); }
.cal-ev[data-cat="casting"]::before { border-radius: 50%; }
.cal-ev[data-cat="deadline"]::before { background: none; border: 2px solid var(--c); width: 8px; height: 8px; box-sizing: border-box; }
.cal-ev:hover { background: var(--ink); color: var(--white); }
.cal-ev__time { font-weight: 700; font-size: .68rem; }
.cal-ev__title { font-weight: 700; padding-right: .8rem; }
.cal-ev__place { font-size: .68rem; opacity: .7; margin-top: .1rem; }
.cal-ev.is-draft { background: var(--red); color: #fff; border-color: var(--red); }
.cal-ev.is-dragging { background: var(--ink); color: var(--white); box-shadow: 6px 6px 0 var(--red); }
.cal-ev__resize { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); opacity: 0; height: 5px; }
.cal-ev:hover .cal-ev__resize { opacity: .5; }
.cal-now { background: var(--red); height: 3px; }
.cal-grid--hours .cal-ev { font-size: .9rem; padding: .4rem .7rem; }
.cal-grid--hours .cal-ev__title { font-size: 1.05rem; }

/* day agenda */
.cal-day { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 0; padding-top: 1.2rem; }
.cal-day__summary { padding-right: 1.6rem; align-self: start; position: sticky; top: 1.2rem; }
.cal-day__dow { font-weight: 800; text-transform: uppercase; font-size: .85rem; color: var(--red); }
.cal-day__num { font: 900 11rem/.75 "Archivo", sans-serif; font-stretch: 62%; letter-spacing: -.04em; margin: .3rem 0 .4rem; }
.cal-day__month { font-weight: 800; text-transform: uppercase; font-size: 1rem; }
.cal-day__stat { margin-top: 1rem; padding-top: .5rem; border-top: var(--rule); font-size: .8rem; font-weight: 600; }
.cal-day__list { border-left: var(--rule); }
.cal-day__item { border-bottom: var(--hair); }
.cal-day__card { padding: 1rem 0 1rem 1.4rem; grid-template-columns: 8rem minmax(0, 1fr); }
.cal-day__card:hover { background: #fff; }
.cal-day__time { font: 800 2.2rem/.9 "Archivo", sans-serif; font-stretch: 62%; }
.cal-day__time span { font-size: 1rem; color: var(--muted); margin-top: .3rem; }
.cal-day__cat { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: .4rem; }
.cal-day__cat::before { content: ""; width: 8px; height: 8px; background: var(--c); }
.cal-day__title { font: 700 1.6rem/1.05 "Archivo", sans-serif; font-stretch: 85%; margin: .3rem 0; }
.cal-day__place, .cal-day__note { font-size: .88rem; color: var(--muted); }
.cal-day__empty { padding: 2rem 1.4rem; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; }
.cal-btn { font: 800 .85rem/1 "Archivo", sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: .8rem 1.1rem; border: var(--rule); }
.cal-btn:hover { background: var(--ink); color: var(--white); }
.cal-btn--primary { background: var(--red); border-color: var(--red); color: #fff; }
.cal-btn--danger { color: var(--red); border-color: var(--red); }

/* foot */
.rs__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: .7rem 0 .9rem; border-top: var(--rule); flex-wrap: wrap; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0; }
.cal-legend__item { width: auto; padding: .3rem .8rem .3rem 0; margin-right: .8rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cal-legend__swatch { border-radius: 0; }
.cal-legend__item[data-cat="casting"] .cal-legend__swatch { border-radius: 50%; }
.cal-legend__item[data-cat="deadline"] .cal-legend__swatch { background: none; box-shadow: inset 0 0 0 2px var(--c); }
.cal-legend__count { margin-left: .3rem; color: var(--muted); }
.cal-legend__item:hover { color: var(--red); }
.rs__note { margin: 0; font-size: .75rem; color: var(--muted); }
.rs__reset { font: 800 .75rem/1 "Archivo", sans-serif; text-transform: uppercase; background: none; border: 0; color: var(--ink); cursor: pointer; text-decoration: underline; padding: 0 0 0 .3rem; }

/* editor */
.cal-editor { background: var(--white); color: var(--ink); border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--red); }
.cal-editor::backdrop { background: rgba(246,245,241,.75); }
.cal-editor__form { padding: 1.4rem; }
.cal-editor__title { margin: 0; font: 900 2.4rem/.9 "Archivo", sans-serif; font-stretch: 62%; text-transform: uppercase; }
.cal-editor__field span { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.cal-editor__field input, .cal-editor__field select, .cal-editor__field textarea { border: var(--rule); background: #fff; padding: .55rem .6rem; border-radius: 0; color: var(--ink); }
.cal-editor__field input:focus, .cal-editor__field select:focus, .cal-editor__field textarea:focus { outline: none; border-color: var(--red); }
.cal-editor__hint { margin: 0; font-size: .78rem; font-weight: 600; color: var(--muted); }

@media (max-width: 900px) {
  .rs { height: auto; min-height: 100vh; padding: 0 1rem; }
  .rs__head { grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.6rem; }
  .rs__step { grid-column: 1 / -1; justify-self: start; }
  .rs__body { overflow: visible; }
  .rs[data-view="week"] .rs__body, .rs[data-view="hours"] .rs__body { height: 74vh; flex: none; }
  .rs__views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cal-view:nth-child(3) { border-right: 0; }
  .cal-view:nth-child(-n+3) { border-bottom: var(--hair); }
  .cal-view:nth-child(4) { padding-left: 0; }
  .cal-quarter { grid-template-columns: 1fr; gap: 1.4rem; }
  .cal-quarter__month { border-left: 0; padding: 0; }
  .cal-day { grid-template-columns: 1fr; }
  .cal-day__summary { position: static; padding: 0 0 1rem; }
  .cal-day__num { font-size: 7rem; }
  .cal-day__list { border-left: 0; border-top: var(--rule); }
  .cal-day__card { padding-left: 0; grid-template-columns: 5.5rem minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .rs__day { font-size: 4.6rem; }
  .rs__dot { right: -.7rem; width: .55rem; height: .55rem; }
  .rs__btn { min-width: 2.5rem; }
  .cal-month__grid { --cal-row: 4.3rem; }
  .cal-month__num { font-size: 1.3rem; }
  .cal-month__dow { padding: .45rem .1rem; font-size: .6rem; letter-spacing: 0; text-align: center; }
  .cal-month__cell { padding: .25rem; }
  .cal-chip { width: auto; }
  .cal-chip > span { display: none; }
  .cal-month__events { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .cal-month__more { font-size: .6rem; }
  .cal-month__next { display: none; }
  .cal-day__time { font-size: 1.6rem; }
  .cal-day__title { font-size: 1.2rem; }
}