/* Sauna Hiillos (site/hiillos.mjs): three rooms of a sauna to touch, drawn by one WebGL picture behind the page
   (hiillos.js): the fogged window, the löyly, the ice hole. This file sets the words over it and the pages after it.
   One family, Mona Sans; its width axis is the thermometer (condensed in the cold, wide in the heat). The ground runs
   from blue-hour slate to ember-dark with --heat (set from the scroll). Ember marks only the way to book and what is
   picked. Hairlines and ruled rows; no boxes, no cards. No inline styles: the CSP forbids them. */

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

:root {
  --heat: 0;
  --cold: #0b111b;
  --warm: #1e0b05;
  --ink-cold: #e6ebee;
  --ink-warm: #f5e4d1;
  --ground: color-mix(in oklab, var(--cold), var(--warm) calc(var(--heat) * 100%));
  --ink: color-mix(in oklab, var(--ink-cold), var(--ink-warm) calc(var(--heat) * 100%));
  --ink-2: color-mix(in oklab, var(--ink) 70%, transparent);
  --line: color-mix(in oklab, var(--ink) 18%, transparent);
  --line-2: color-mix(in oklab, var(--ink) 40%, transparent);
  --ember: #ff6a2b;
  --ember-hi: #ff8a52;
  --on-ember: #1c0903;
  --gut: clamp(16px, 2.4vw, 56px);
  --top: clamp(56px, 4.6vw, 96px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
  font-size: clamp(16px, calc(.45vw + 9.5px), 24px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--cold); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
html.is-live { scroll-behavior: auto; }
body {
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.5 "Mona Sans", system-ui, sans-serif;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.is-live body { background: transparent; }
::selection { background: var(--ember); color: var(--on-ember); }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; }

.h-skip { position: fixed; left: var(--gut); top: -4rem; z-index: 120; background: var(--ember); color: var(--on-ember); padding: .6em 1em; text-decoration: none; font-weight: 600; }
.h-skip:focus-visible { top: .75rem; }

/* ---- the gate: black while the shore photo and the type load ---- */
.h-gate { position: fixed; inset: 0; z-index: 100; background: #05070a; display: none; }
html.is-live .h-gate { display: block; }
.h-gate-name { position: absolute; left: var(--gut); top: calc(var(--top) / 2 - .7em); font-size: 1.3rem; font-weight: 500; font-stretch: 125%; letter-spacing: .02em; }
.h-gate-load { position: absolute; left: var(--gut); bottom: var(--gut); font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---- the picture ---- */
.h-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: none; z-index: 0; }
html.is-live .h-gl { display: block; }

/* the cursor: as wide as a finger's wipe on the glass, a spark in the steam, a ring on the water */
.h-cursor { display: none; }
@media (pointer: fine) {
  html.is-live.is-open .h-sc { cursor: none; }
  html.is-live.is-open .h-cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
    width: 0; height: 0;
  }
  .h-cursor::before {
    content: ""; position: absolute; left: -4.65vh; top: -4.65vh; width: 9.3vh; height: 9.3vh;
    border-radius: 50%; border: 1px solid color-mix(in oklab, var(--ink) 55%, transparent);
    scale: var(--s, 0);
    transition: scale .5s var(--ease), background .4s, border-color .4s, opacity .3s;
  }
  .h-cursor[data-room="glass"] { --s: 1; }
  .h-cursor[data-room="steam"] { --s: .13; }
  .h-cursor[data-room="steam"]::before { background: var(--ember); border-color: transparent; }
  .h-cursor[data-room="water"] { --s: .6; }
  .h-cursor[data-room="look"] { --s: .22; }
  .h-cursor[data-room="pick"] { --s: .34; }
  .h-cursor[data-room="pick"]::before { background: color-mix(in oklab, var(--ember) 35%, transparent); border-color: var(--ember); }
  .h-cursor[data-room="none"]::before { opacity: 0; }
  .h-cursor.is-down { --s: .5; }
  .h-cursor[data-room="glass"].is-down { --s: .85; }
  html:has(.h-top:hover) .h-cursor::before { opacity: 0; }
}

/* ---- the seats: the sessions to pick from, the seat you picked, the way to book it; only at the benches ---- */
.h-seat { display: none; }
html.is-live.is-open .h-seat {
  display: grid; gap: .7rem; position: fixed; right: var(--gut); bottom: calc(var(--gut) * 1.2); z-index: 25;
  max-width: min(40rem, calc(100vw - 2 * var(--gut))); justify-items: end; text-align: right;
  opacity: 0; translate: 0 .6rem; pointer-events: none;
  transition: opacity .5s var(--ease), translate .5s var(--ease);
  text-shadow: 0 .05em 1em rgb(0 0 0 / .7);
}
html.is-live.is-open .h-seat.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.h-seat-times { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .2rem 1.1rem; }
.h-seat-time {
  display: grid; justify-items: start; gap: .05rem; padding: .35rem 0 .45rem; background: none; border: 0; cursor: pointer; text-align: left;
  box-shadow: inset 0 -1px 0 var(--line); transition: box-shadow .3s var(--ease), color .3s;
}
.h-seat-time span { font-size: .72rem; color: var(--ink-2); min-height: 1.1em; }
.h-seat-time strong { font-size: 1.15rem; font-weight: 500; font-stretch: 105%; font-variant-numeric: tabular-nums; }
.h-seat-time em { font-style: normal; font-size: .72rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.h-seat-time:hover:not(:disabled) { box-shadow: inset 0 -1px 0 var(--ink); }
.h-seat-time[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--ember); }
.h-seat-time[aria-pressed="true"] strong { color: #fff; }
.h-seat-time:disabled { opacity: .35; cursor: default; }
.h-seat-pick { color: var(--ink-2); font-size: .9rem; }
.h-seat [hidden] { display: none; }
@media (max-width: 800px) {
  html.is-live.is-open .h-seat { left: var(--gut); justify-items: start; text-align: left; }
  .h-seat-times { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
}

/* the button that holds the seat: the same quiet ember underline as the way to book */
.h-seat .h-cta { background-color: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 500; }

/* ---- the round: a hairline down the right edge, a mark for each place, a dot where you are. It says there is
   more to come, and takes you there ---- */
.h-track { display: none; }
html.is-live.is-open .h-track {
  display: block; position: fixed; right: calc(var(--gut) * .55); top: 30vh; height: 40vh; width: 1.4rem; z-index: 24;
  background: linear-gradient(var(--line-2), var(--line-2)) 50% 0 / 1px 100% no-repeat;
}
.h-track a {
  position: absolute; left: 0; right: 0; top: calc(var(--f, 0) * 100%); height: 1.4rem; translate: 0 -50%;
  display: block; text-decoration: none;
}
.h-track a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; translate: -50% -50%; border-radius: 50%;
  background: var(--ground); box-shadow: inset 0 0 0 1px var(--ink-2); transition: background .3s, box-shadow .3s;
}
.h-track a.is-past::before { background: var(--ink-2); }
.h-track span {
  position: absolute; right: 1.7rem; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: .75rem; color: var(--ink-2);
  opacity: 0; transition: opacity .3s var(--ease); text-shadow: 0 0 .8em rgb(0 0 0 / .8);
}
.h-track:hover span, .h-track a:focus-visible span { opacity: 1; }
.h-track a:hover span { color: var(--ink); }
.h-track-dot {
  position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 .7rem color-mix(in oklab, var(--ember) 60%, transparent); pointer-events: none;
}
@media (max-width: 800px) { html.is-live.is-open .h-track { right: 4px; top: 22vh; height: 36vh; } }

/* ---- the header ---- */
.h-top {
  position: fixed; inset: 0 0 auto; z-index: 20; height: var(--top);
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 40px);
  padding: 0 var(--gut);
  font-size: .9rem;
  transition: background .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
html:not(.is-live) .h-top, html.is-after .h-top { background: color-mix(in oklab, var(--ground) 86%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.h-name { font-size: 1.3rem; font-weight: 500; font-stretch: 125%; letter-spacing: .02em; text-decoration: none; }
.h-demo { font-size: .72rem; letter-spacing: .04em; color: var(--ink-2); text-decoration: none; }
.h-demo::before { content: "· "; }
.h-demo:hover { color: var(--ink); }
.h-lang { display: flex; gap: .7em; color: var(--ink-2); }
.h-top > .h-lang { margin-left: auto; }
.h-status { grid-column: 1 / -1; margin: calc(clamp(28px, 5vh, 72px) * -.5) 0 clamp(28px, 5vh, 72px); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.h-lang a { text-decoration: none; }
.h-lang a[aria-current] { color: var(--ink); text-decoration: underline; }
/* the way to book: ember words, the line under them grows on hover */
.h-cta {
  color: var(--ember); font-weight: 500; text-decoration: none; padding: .4em 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--ease), color .25s;
}
.h-cta:hover { color: var(--ember-hi); background-size: 100% 2px; }

/* the booking's own button */
.h-book {
  display: inline-flex; align-items: center; min-height: 2.6em; padding: .55em 1.2em;
  background: var(--ember); color: var(--on-ember); font-weight: 600; font-stretch: 110%; letter-spacing: .01em;
  text-decoration: none; border: 0; border-radius: 3px; cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.h-book:hover { background: var(--ember-hi); }
.h-book:active { transform: translateY(1px); }

/* ---- the rooms ---- */
.h-sc { position: relative; }
.h-screen { position: relative; min-height: 100svh; overflow: hidden; }
/* with motion each room is a length of scroll; its screen of words stays put while the picture changes under it */
html.is-live .h-screen { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: visible; pointer-events: none; }
/* the strong places get the time: the embers, coming up out of the water, the northern lights */
html.is-live .h-sc-hiillos { height: 380svh; }
html.is-live .h-sc-sauna { height: 730svh; }
html.is-live .h-sc-avanto { height: 300svh; }
html.is-live .h-sc-taivas { height: 380svh; }
html.is-live .h-sc-ranta { height: 260svh; }
/* rooms that are only a camera move have nothing to show when nothing moves */
html:not(.is-live) .h-sc-live { display: none; }

/* the still: what each room shows when nothing moves */
.h-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.8); }
.h-sc-sauna .h-still, .h-sc-hiillos .h-still { filter: brightness(.6) sepia(.35) saturate(1.3); }
.h-sc-ranta .h-still { object-position: 37% 60%; }
.h-still-num {
  position: absolute; right: var(--gut); bottom: calc(var(--gut) * .5);
  font-size: clamp(5.5rem, 15vw, 24rem); line-height: .8; font-weight: 300; font-stretch: 75%; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.h-sc-sauna .h-still-num { font-weight: 240; font-stretch: 125%; }
.h-still-num span { position: absolute; left: .1rem; bottom: 100%; margin-bottom: .6rem; font-size: 1rem; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--ink-2); white-space: nowrap; }
html.is-live .h-still, html.is-live .h-still-num { display: none; }

/* a room's words, in its corners; with motion they show while their room does */
.h-cap {
  position: absolute; z-index: 2; max-width: min(26ch, 80vw);
  font-size: clamp(1.05rem, 1.25vw, 1.9rem); line-height: 1.35; text-wrap: balance;
  text-shadow: 0 .05em 1.2em rgb(0 0 0 / .6);
}
.h-cap h1 { font: inherit; }
.h-cap-bl { left: var(--gut); bottom: calc(var(--gut) * 1.3); }
.h-cap-br { right: var(--gut); bottom: calc(var(--gut) * 1.3); }
.h-cap-tr { right: var(--gut); top: calc(var(--top) + clamp(20px, 5vh, 90px)); }
/* with motion the rooms tell nothing in words: the picture shows it, the sentences stay for screen readers */
html.is-live .h-cap, html.is-live .h-throw:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.h-throw {
  position: absolute; right: var(--gut); bottom: calc(var(--gut) * 1.3); z-index: 3; pointer-events: auto;
  background: none; border: 0; padding: .3em 0; cursor: pointer;
  font-size: .8em; font-weight: 500; font-stretch: 112%; letter-spacing: .01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .45s var(--ease), color .25s;
}
.h-throw:hover { color: #fff; background-size: 100% 2px; }
html:not(.is-live) .h-throw { display: none; }

/* ---- ruled rows: shifts, prices, the ticket ---- */
.h-rows { border-top: 1px solid var(--line-2); }
.h-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .8em 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.h-row dt span { display: block; font-size: .82em; color: var(--ink-2); margin-top: .15em; }
.h-row dd { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---- after the rooms: prices, booking, visit, over the ice hole dimmed nearly to black. Cold, so the headings are
   condensed like the numeral in the water, and the prices are set as large as readings ---- */
.h-page {
  position: relative; z-index: 6;
  scroll-margin-top: var(--top);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 48px);
  padding: clamp(80px, 12vh, 200px) var(--gut) clamp(60px, 9vh, 160px);
}
.h-page > h2 {
  grid-column: 1 / -1; margin-bottom: clamp(28px, 5vh, 72px);
  font-size: clamp(3rem, 8vw, 13rem); line-height: .85; font-weight: 430; font-stretch: 75%; letter-spacing: -.03em;
}
.h-page > :not(h2) { grid-column: 1 / -1; }
.h-prices .h-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 48px); padding: .55em 0 .7em; align-items: end; }
.h-prices .h-row dt { grid-column: 1 / 7; font-size: clamp(1.1rem, 1.35vw, 2rem); padding-bottom: .35em; }
.h-prices .h-row dd { grid-column: 7 / -1; text-align: left; font-size: clamp(2.4rem, 4.6vw, 7.5rem); line-height: .9; font-weight: 400; font-stretch: 75%; letter-spacing: -.02em; }
.h-note { margin-top: 1.2rem; color: var(--ink-2); font-size: .95rem; max-width: 40ch; }
.h-prices .h-note { grid-column: 7 / -1; }

/* the booking */
.h-form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 48px); row-gap: clamp(28px, 4vh, 56px); }
.h-form > .h-f { grid-column: 7 / -1; }
.h-form > .h-sum { grid-column: 1 / 6; grid-row: 1 / span 5; align-self: start; position: sticky; top: calc(var(--top) + 2rem); }
.h-booking > .h-ticket { grid-column: 1 / 9; }
.h-f { border: 0; min-width: 0; }
.h-f legend { font-size: .85rem; color: var(--ink-2); margin-bottom: .8rem; }
.h-pick { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0 .9rem; padding: .85em 0; border-top: 1px solid var(--line); cursor: pointer; }
.h-pick:last-child { border-bottom: 1px solid var(--line); }
.h-pick input, .h-tick input { appearance: none; width: 1rem; height: 1rem; border: 1.5px solid var(--line-2); border-radius: 50%; translate: 0 .15em; cursor: pointer; }
.h-pick input:checked { border-color: var(--ember); background: var(--ember); box-shadow: inset 0 0 0 3px var(--ground); }
.h-pick-name { font-size: 1.1rem; }
.h-pick-meta { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: .9rem; }

.h-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.h-day {
  background: none; border: 0; border-left: 1px solid var(--line); padding: .7em .2em; cursor: pointer;
  display: grid; gap: .1em; justify-items: center; transition: background .2s, color .2s;
}
.h-day:first-child { border-left: 0; }
.h-day span { font-size: .78rem; color: var(--ink-2); }
.h-day strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.h-day:hover { background: color-mix(in oklab, var(--ink) 7%, transparent); }
.h-day[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--ember); }
.h-day[aria-pressed="true"] span { color: var(--ink); }

/* the times: ruled rows, the picked one underlined in ember */
.h-times { border-top: 1px solid var(--line); }
.h-time {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: .8em 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: 9rem 1fr; align-items: baseline; transition: color .2s, box-shadow .2s;
}
.h-time strong { font-weight: 500; font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.h-time span { font-size: .85rem; color: var(--ink-2); }
.h-time:hover:not(:disabled) strong { text-decoration: underline; text-underline-offset: .25em; }
.h-time[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--ember); }
.h-time:disabled { opacity: .38; cursor: default; }
.h-count { display: flex; align-items: center; gap: .9rem; }
.h-count button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-2); background: none; font-size: 1.2rem; cursor: pointer; }
.h-count button:hover:not(:disabled) { border-color: var(--ink); }
.h-count button:disabled { opacity: .35; cursor: default; }
.h-count output { font-size: 2rem; font-weight: 300; font-stretch: 125%; min-width: 1.6ch; text-align: center; font-variant-numeric: tabular-nums; }
.h-count-unit { color: var(--ink-2); }
.h-tick { display: flex; gap: .7rem; align-items: baseline; margin-top: 1rem; cursor: pointer; }
.h-tick input { border-radius: 3px; }
.h-tick input:checked { border-color: var(--ember); background: var(--ember); box-shadow: inset 0 0 0 2px var(--ground); }

.h-field { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.h-field span { font-size: .85rem; color: var(--ink-2); }
.h-field input { background: none; border: 0; border-bottom: 1px solid var(--line-2); padding: .35em 0; font-size: 1.15rem; caret-color: var(--ember); border-radius: 0; }
.h-field input:focus { outline: none; border-bottom-color: var(--ember); }
.h-err { color: var(--ember-hi); min-height: 1.5em; font-size: .95rem; }

.h-sum { display: grid; gap: 1rem; justify-items: start; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.h-sum-line { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.h-sum-total span { color: var(--ink-2); font-size: .9rem; display: block; margin-bottom: .2rem; }
.h-sum-total strong { font-size: clamp(4rem, 9vw, 15rem); font-weight: 430; font-stretch: 75%; letter-spacing: -.03em; line-height: .85; font-variant-numeric: tabular-nums; }
.h-submit { font-size: 1.05rem; padding: .8em 2.2em; }

.h-ticket { border-top: 1px solid var(--line-2); padding-top: 1.4rem; outline: none; }
.h-ticket-name { font-size: 1rem; font-weight: 500; font-stretch: 125%; letter-spacing: .02em; color: var(--ink-2); }
.h-ticket-when { font-size: clamp(2.6rem, 6vw, 9rem); line-height: .9; font-weight: 430; font-stretch: 75%; letter-spacing: -.02em; margin: .4em 0 .7em; font-variant-numeric: tabular-nums; }
.h-ticket-acts { display: flex; gap: 1.6rem; align-items: center; margin-top: 1.4rem; }
.h-ticket-acts a, .h-ticket-acts button { background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* visit */
.h-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vh, 56px) clamp(20px, 2.4vw, 56px); }
.h-cols dt { font-size: .85rem; color: var(--ink-2); padding-bottom: .5rem; border-bottom: 1px solid var(--line); margin-bottom: .7rem; }
.h-cols dd span { display: block; color: var(--ink-2); font-size: .9rem; margin-top: .4rem; }
.h-rules { padding-left: 1.2em; }
.h-rules li + li { margin-top: .25em; }

.h-foot {
  position: relative; z-index: 2; padding: clamp(40px, 7vh, 100px) var(--gut) var(--gut);
  border-top: 1px solid var(--line); color: var(--ink-2); font-size: .85rem;
  display: grid; gap: .6rem; grid-template-columns: repeat(12, minmax(0, 1fr));
}
.h-foot > p { grid-column: 1 / 8; max-width: 70ch; }
.h-foot strong { color: var(--ink); font-weight: 500; }
.h-foot-end { display: flex; gap: 2rem; align-items: center; margin-top: 1rem; }

/* ---- smaller screens ---- */
@media (max-width: 1100px) {
  .h-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  :root { --top: 60px; }
  .h-top { gap: 12px; }
  .h-name { margin-right: auto; }
  .h-cap { max-width: none; right: var(--gut); font-size: 1.1rem; }
  .h-cap-tr { left: var(--gut); }
  .h-page { display: block; }
  .h-page > h2 { font-size: clamp(3rem, 17vw, 5rem); }
  .h-prices .h-row dt { grid-column: 1 / 8; }
  .h-prices .h-row dd { grid-column: 8 / -1; text-align: right; font-size: 2.4rem; }
  .h-form { display: flex; flex-direction: column; }
  .h-form > .h-sum { position: static; order: 9; align-self: stretch; }
  .h-cols { grid-template-columns: 1fr; }
  .h-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .h-day:nth-child(5) { border-left: 0; }
  .h-day:nth-child(n+5) { border-top: 1px solid var(--line); }
  .h-foot { display: block; }
  .h-foot > p + p { margin-top: .6rem; }
}