/* A.Z. Electric: the whole site is one breaker-panel schedule. Numbered slots on one hairline grid, and the photos
   are cells of the same grid, each tagged with the circuit it shows. Archivo (wide, heavy) for the name and headings,
   open-tracked Archivo caps for labels, Public Sans for text. Copper from their logo ring; black from the van decal.
   Corners: square everywhere. */
:root {
  --ink: #141210; --paper: #f3f0ea; --panel: #0f0e0d; --copper: #e99052; --copper-ink: #9a4b17;
  --muted: #5c554c; --muted-d: #bfb7ac; --soft-d: #d6cfc4;
  --rule: rgba(20,18,16,.2); --rule-d: rgba(243,240,234,.18); --rule-c: rgba(20,18,16,.35);
  --g: clamp(20px, 4vw, 56px);
  --edge: max(var(--g), (100vw - 1280px) / 2);
  --sec: clamp(64px, 10vw, 152px);
  --head-h: 72px;
  --seam: 3px;
  /* mechanical and precise */
  --m-dur: .8s; --m-ease: cubic-bezier(.2,.7,.1,1);
}
@media (max-width: 719px) { :root { --m-dur: .65s; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 "Public Sans", system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
.wrap { width: min(1280px, 100% - 2 * var(--g)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--copper); color: var(--ink); padding: 12px 16px; font-weight: 600; }
.skip:focus { top: 12px; }

/* small engraved label: open-tracked wide caps */
.label { font: 600 .78rem/1.3 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; }

/* demo note */
.preview { background: var(--ink); color: var(--muted-d); font-size: 14px; line-height: 1.4; padding: 8px var(--g); text-align: center; border-bottom: 1px solid var(--rule-d); }
.preview b { color: var(--paper); font-weight: 600; }

/* header: the panel-door black, the real logo big enough to read */
.site { position: sticky; top: 0; z-index: 30; background: var(--panel); color: var(--paper); }
.site .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); gap: 16px; }
.site .brand { display: block; padding: 4px 0; }
.site .brand img { width: 60px; height: 60px; }
.site .nav { display: none; gap: 32px; }
.site .nav a { text-decoration: none; padding: 12px 0; }
.site .tel { color: var(--copper); font: 700 1.0625rem/1 "Archivo", sans-serif; font-stretch: 115%; text-decoration: none; font-variant-numeric: tabular-nums; padding: 14px 0; }
.site .tel:hover { color: var(--paper); }

/* ---------- the schedule: rows of two numbered slots ---------- */
.slots { list-style: none; padding: 0; }
.slots > li.row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-bottom: 1px solid var(--rule); }
.slot { display: grid; grid-template-columns: 2.4ch 1fr; gap: 10px; align-content: start; align-items: baseline; min-height: 64px; padding: 14px 12px 14px 0; text-decoration: none; transition: box-shadow .3s var(--m-ease), background-color .3s; }
.row > .slot ~ .slot { border-left: 1px solid var(--rule); padding-left: 12px; }
.slot .n, .tag .n, .area .n { font: 600 .8rem/1.6 "Archivo", sans-serif; font-stretch: 100%; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--copper-ink); }
.slot b { display: block; font: 600 .9rem/1.3 "Archivo", sans-serif; font-stretch: 118%; text-transform: uppercase; letter-spacing: .08em; }
.slot small { display: block; margin-top: 6px; font: 400 1rem/1.4 "Public Sans", sans-serif; letter-spacing: 0; text-transform: none; color: var(--muted); }
a.slot { cursor: pointer; }
a.slot:hover { box-shadow: inset 0 -3px 0 var(--copper); }

/* photo cells: square, butted on a thin seam, each tagged with its circuit number in the label style */
.cell { position: relative; margin: 0; overflow: hidden; background: var(--panel); }
.cell img, .shot img { width: 100%; height: 100%; object-fit: cover; }
.tag { position: absolute; left: 0; top: 0; z-index: 2; display: flex; gap: 8px; max-width: calc(100% - 12px); font-stretch: 100%; letter-spacing: .08em; align-items: baseline; padding: 6px 10px; background: var(--panel); color: var(--paper); font-size: .75rem; }
.tag .n { color: var(--copper); font-size: .75rem; line-height: 1.3; }

/* ---------- hero: two photo cells, the paper schedule card set into their lower edge ---------- */
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--panel); overflow: hidden; }
.hero .cells { position: relative; z-index: -1; flex: 0 0 auto; height: clamp(240px, 40svh, 340px); display: grid; grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); gap: var(--seam); }
.hero .cell.main img { object-position: 64% 55%; }
.hero .cell.side img { object-position: 50% 35%; }
.hero .card { position: relative; z-index: 1; margin: 0; background: var(--paper); }
.hero .card::before { content: ""; display: block; height: 3px; background: var(--copper); transform-origin: 0 50%; }
.hero .head { padding: 18px 20px 16px; border-bottom: 3px solid var(--ink); }
.hero .kicker { color: var(--copper-ink); margin-bottom: 12px; }
.hero .kicker span { display: block; }
.hero .kicker .sep { display: none; }
.hero h1 { font: 800 clamp(2.75rem, 12vw, 6.6rem)/.92 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.02em; }
.hero h1 .w { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero h1 .w > span { display: inline-block; }
.hero .nb { white-space: nowrap; }
.hero .line { margin-top: 14px; font-size: 1rem; line-height: 1.5; max-width: 42ch; }
.hero .slots .row:last-child { border-bottom: 0; }
.hero .slots .slot { padding-left: 20px; padding-right: 8px; column-gap: 8px; --flash: var(--copper); }
.hero .slots .slot b { font-size: .8125rem; font-stretch: 112%; letter-spacing: .06em; white-space: nowrap; }
.hero .slots .slot small { white-space: normal; }
.hero .slot.call { background: var(--ink); color: var(--paper); --m-fill: var(--copper-ink); --flash: var(--paper); }
.hero .slot.call .n { color: var(--copper); }
.hero .slot.call b { font-weight: 800; font-stretch: 110%; letter-spacing: .04em; font-size: 1rem; }
.hero .slot.call small { color: var(--copper); font: 700 1rem/1.3 "Archivo", sans-serif; font-stretch: 100%; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hero .slot.call:hover { box-shadow: none; }

/* entrance: the card's top rule draws, the name rises, then slots 01–04 switch on in panel order (a short clip from
   the left), each number flashing copper once. Plain CSS timings from first paint, so phones keep the same order. */
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .hero .card::before { animation: m-rule .4s var(--m-ease) both; }
    .hero .cell img { animation: hero-settle 1.4s var(--m-ease) both; }
    .hero .cell { animation: cell-door .6s var(--m-ease) both; }
    .hero .cell.side { --door: inset(0 0 0 100%); animation-delay: .12s; }
    .hero .tag { animation: hero-fade .5s ease .7s both; }
    .hero .kicker { animation: hero-rise .6s var(--m-ease) .2s both; }
    .hero h1 .w > span { animation: hero-word .65s var(--m-ease) .3s both; }
    .hero h1 .w + .w > span { animation-delay: .39s; }
    .hero .line { animation: hero-rise .6s var(--m-ease) .55s both; }
    .story .spec .label::after { transform: scaleX(0); transition: transform .4s var(--m-ease) calc(var(--d, 0ms) + 250ms); }
    .story .spec.is-in .label::after { transform: none; }
    .story h2[data-reveal]::after { transform: scaleX(0); transition: transform .4s var(--m-ease); }
    .story h2.is-in::after { transform: none; }
    .hero .slots .slot { animation: slot-on .25s cubic-bezier(.3,0,.2,1) var(--sd) both; }
    .hero .slots .slot .n { animation: m-flash .45s linear var(--sd) both; }
    .hero .slots .row:first-child .slot:first-child { --sd: .7s; }
    .hero .slots .row:first-child .slot:last-child { --sd: .77s; }
    .hero .slots .row:last-child .slot:first-child { --sd: .84s; }
    .hero .slots .row:last-child .slot:last-child { --sd: .91s; }
  }
}
/* photo cells open like a panel door; the main (LCP) cell starts part-open so it is never fully hidden */
@keyframes cell-door { from { clip-path: var(--door, inset(0 55% 0 0)); } to { clip-path: inset(0); } }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-word { from { transform: translateY(110%); } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes m-rule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes slot-on { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes m-flash { 0%, 70% { color: var(--flash); } }

/* ---------- services ---------- */
.schedule { padding-block: var(--sec) clamp(64px, 7vw, 96px); }
.sched-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 3px solid var(--ink); padding-bottom: 12px; }
.sched-head h2 { font: 800 clamp(2.25rem, 7.4vw, 3.75rem)/1 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.01em; }
.sched-head .label { color: var(--copper-ink); white-space: nowrap; }
@media (max-width: 759.98px) { .sched-head { flex-direction: column; align-items: flex-start; } }
/* phone: the same two-slot rows as the hero card, number over title, a hairline between; each photo under its row */
.dir .slot { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 16px 16px 18px 0; }
.dir .row > .slot ~ .slot { grid-row: 1; grid-column: 2; padding-left: 16px; padding-right: 0; }
.dir .slot b { font-size: .8125rem; font-stretch: 112%; letter-spacing: .1em; }
.dir .slot small { margin-top: 4px; }
/* the row right above names the photo, so no tag here */

/* ---------- finished work: the quote is the moment; the job written as schedule slots under it ---------- */
.work { position: relative; background: var(--panel); color: var(--paper); padding: 36px 0 56px; border-top: 3px solid var(--copper); }
.work .slots > li.row:last-child { border-bottom: 2px solid var(--paper); }
.work .shot { position: relative; overflow: hidden; margin: 0 36px; }
.work .shot img { aspect-ratio: 4 / 3; object-position: 50% 85%; }
.work .panel { padding: 32px 36px 0; }
.work .panel > .label { color: var(--copper); }
/* phone: smaller than the owner's story in About, so that stays the type moment */
.work blockquote { margin-top: 16px; font: 700 1.5rem/1.25 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.01em; max-width: 24ch; }
.work .slots { margin-top: 28px; border-top: 1px solid var(--rule-d); }
.work .slots > li.row { grid-template-columns: minmax(0, 1fr); border-color: var(--rule-d); }
.work .row > .slot ~ .slot { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-d); }
.work .slot .n { color: var(--copper); }
.work .slot small { color: var(--soft-d); }
.work .slot .cite { display: block; margin-top: 4px; color: var(--muted-d); font-size: .875rem; }

/* ---------- about: the copper band, type only: the owner's own words set large ---------- */
.story { background: var(--copper); color: var(--ink); padding-block: var(--sec) 80px; }
.story-grid { display: grid; gap: 24px; padding-inline: var(--g); }
.story h2 { position: relative; padding-bottom: 14px; }
.story h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }
.story blockquote { --m-dur: .7s; --m-word: 90ms; font: 800 clamp(1.75rem, 7vw, 3.4rem)/1.1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: -.01em; }
.story .spec { --m-rise: 12px; margin-top: 32px; max-width: 58ch; font-size: 1.0625rem; line-height: 1.55; }
.story .spec .label { position: relative; padding-bottom: 10px; margin-bottom: 14px; }
.story .spec .label::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ink); transform-origin: 0 50%; }

/* ---------- hours: the panel-door black, set as a timetable ---------- */
.door { background: var(--panel); color: var(--paper); padding-block: var(--sec) 64px; }
.door .sched-head { border-color: var(--paper); }
.door .sched-head .label { color: var(--copper); }
.door-grid { display: grid; gap: 48px; }
.times { list-style: none; padding: 0; }
.times li { display: grid; grid-template-columns: 2.4ch minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule-d); }
.times .n { font: 600 .8rem/1.6 "Archivo", sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--copper); }
.times b { font: 600 .9rem/1.3 "Archivo", sans-serif; font-stretch: 118%; text-transform: uppercase; letter-spacing: .08em; }
.times .t { color: var(--soft-d); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.times li.today { box-shadow: inset 0 -3px 0 var(--copper); }
.times li.today b::after { content: "Today"; display: block; margin-top: 4px; color: var(--copper); font-size: .75rem; letter-spacing: .16em; }
.area h3 { display: flex; gap: 10px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--paper); }
.area .n { color: var(--copper); }
.towns { list-style: none; padding: 0; margin-top: 12px; columns: 2; column-gap: 24px; color: var(--soft-d); font-size: 1rem; line-height: 2; }
.call-block { margin-top: clamp(56px, 7vw, 96px); }
.call-block .label { color: var(--copper); }
.door .phone { display: inline-block; margin-top: 8px; font: 800 clamp(2.4rem, 10.4vw, 8rem)/1 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.01em; white-space: nowrap; color: var(--copper); text-decoration: none; font-variant-numeric: tabular-nums; }
.door .phone:hover { color: var(--paper); }

/* ---------- footer: the closing rows of the hours panel (on the home page it follows it with no break) ---------- */
.foot { background: var(--panel); color: var(--paper); padding: 48px 0 calc(88px + env(safe-area-inset-bottom)); }
main:has(> .door:last-child) + .foot { padding-top: 0; }
.foot-top { display: grid; gap: 32px; border-top: 2px solid var(--paper); padding-top: 48px; }
.foot-grid { display: grid; gap: 28px 24px; }
.foot-logo { width: 160px; height: auto; justify-self: center; margin-bottom: 16px; }
.foot-grid .hrs span { display: block; }
/* the home page's footer follows the timetable, so it doesn't repeat the hours (404 and policy pages keep them) */
main:has(> .door:last-child) + .foot .f-hours { display: none; }
.foot-grid dt { margin-bottom: 8px; color: var(--copper); }
.foot-grid dd { line-height: 1.55; color: var(--soft-d); }
.foot-grid dd a { text-decoration: none; display: inline-block; padding: 6px 0; white-space: nowrap; }
.fine { display: grid; justify-items: start; margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--rule-d); font-size: .875rem; color: var(--muted-d); }
.fine a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.fine .copy { padding-top: 12px; }
.fine .legal { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* ---------- phone action bar ---------- */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ink); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--rule-d); }
.actionbar a { min-height: 56px; display: grid; place-items: center; color: var(--paper); text-decoration: none; font: 700 .95rem/1 "Archivo", sans-serif; font-stretch: 112%; letter-spacing: .04em; }
.actionbar a:first-child { background: var(--copper); color: var(--ink); }

/* buttons: the kit's fill sweep uses --m-fill */
.m-btn { --m-fill: var(--copper-ink); }

@media (min-width: 760px) {
  .site .nav { display: flex; }
  .slot { padding: 20px 20px 20px 0; }
  .row > .slot ~ .slot { padding-left: 20px; }
  .slot b { font-size: 1rem; }

  /* hero: paper card column on the left, two photo cells to the right edge */
  .hero { min-height: calc(100svh - var(--head-h) - 37px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .hero .cells { height: auto; grid-column: 2; grid-row: 1; margin: 0; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
  .hero .cell.main img { object-position: 50% 50%; }
  .hero .cell.side { --door: inset(0 100% 0 0); }
  .hero .card { grid-column: 1; grid-row: 1; margin: 0; display: flex; flex-direction: column; }
  .hero .head { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px 40px 32px var(--edge); }
  .hero .slots > li.row { grid-template-columns: calc(var(--edge) + (100% - var(--edge)) / 2) minmax(0, 1fr); }
  .hero h1 { font-size: min(6.6rem, 7vw); }
  .hero .kicker span, .hero .kicker .sep { display: inline; }
  .hero .line { margin-top: 28px; font-size: 1.1875rem; line-height: 1.5; max-width: 30ch; }
  .hero .slots .slot { padding-left: 24px; padding-right: 20px; column-gap: 10px; }
  .hero .slots .slot:first-child { padding-left: var(--edge); }
  .hero .slots .slot b { font-size: 1rem; font-stretch: 118%; }
  .tag, .tag .n { font-size: .8125rem; }
  .tag { padding: 8px 12px; max-width: none; white-space: nowrap; }

  /* services: directory in 8 columns as two-slot rows, photo cells in 4 sharing its rows */
  .schedule { padding-top: 96px; padding-bottom: 80px; }
  .sched-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .dir { grid-column: 1 / -1; }
  .dir > li.row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dir .row > .slot ~ .slot { border-top: 0; border-left: 1px solid var(--rule); padding-left: 20px; }
  .dir .slot { grid-template-columns: 2.4ch 1fr; column-gap: 10px; row-gap: 0; padding: 20px 20px 20px 0; min-height: 120px; align-content: center; align-items: baseline; }
  .dir .slot b { font-size: .9375rem; font-stretch: 118%; letter-spacing: .08em; }
  .dir .slot small { margin-top: 6px; }
  .dir .slot small { font-size: 1.0625rem; }
  /* the photo column fills the directory exactly: top rule to closing rule */

  /* finished work: a smaller photo in cols 1–4, the quote large in cols 6–12, the job as two slots under a hairline */
  .work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; padding: 120px var(--edge); border-top: 3px solid var(--copper); }
  .work .shot { grid-column: 1 / 5; margin: 0; align-self: stretch; }
  .work .shot img { position: absolute; inset: 0; aspect-ratio: auto; object-position: 40% 45%; }
  .work .panel { grid-column: 6 / -1; align-self: stretch; display: flex; flex-direction: column; border-top: 0; padding: 0; margin-top: 0; }
  .work blockquote { margin-top: 28px; font-size: clamp(2.6rem, 3.4vw, 3.4rem); line-height: 1.12; font-stretch: 125%; max-width: none; text-wrap: balance; }
  .work .slots > li.row:last-child { border-bottom-width: 1px; border-color: var(--rule-d); }
  .work .slots { margin-top: auto; padding-top: 0; }
  .work blockquote { margin-bottom: 40px; }
  .work .slots > li.row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .work .row > .slot ~ .slot { border-top: 0; border-left: 1px solid var(--rule-d); padding-left: 20px; }

  /* about: a full-width typographic band on the 12-column grid */
  .story { padding-block: 120px 96px; }
  .story-grid { width: min(1280px, 100% - 2 * var(--g)); margin-inline: auto; padding: 0; column-gap: 24px; row-gap: 40px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .story h2 { grid-column: 1 / -1; }
  .story-text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .story blockquote { grid-column: 1 / 9; font-size: clamp(2.4rem, 3.4vw, 3.4rem); font-stretch: 125%; }
  .story .spec { grid-column: 10 / -1; align-self: end; margin-top: 0; font-size: 1.125rem; }

  /* the right column is one stack (label, towns, 48px, Call) whose number ends on the timetable's closing rule;
     any spare height opens between the Service area label and the towns, never above Call */
  .door-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .times { grid-column: 1 / 7; }
  .times li { padding: 18px 0; }
  .times b { font-size: 1rem; }
  .times .t { font-size: 1.0625rem; }
  .door-side { grid-column: 8 / 13; display: flex; flex-direction: column; }
  .area { flex: 1; display: flex; flex-direction: column; padding-top: 18px; }
  .area .towns { margin-top: auto; padding-top: 12px; }
  .call-block { margin-top: 48px; }
  .door .phone { font-size: clamp(3rem, 4.4vw, 4.25rem); font-stretch: 112%; line-height: .8; }
  .towns { columns: 2; font-size: 1.25rem; line-height: 2.2; }
  .call-block { border-top: 1px solid var(--rule-d); padding-top: 12px; }
  .call-block .phone { margin-top: 2px; }

  .foot { padding-bottom: 40px; }
  .fine { display: flex; align-items: center; gap: 0 24px; }
  .fine .copy { padding-top: 0; }
  .foot-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .foot-grid { grid-column: 1 / 10; grid-row: 1; grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .foot-grid > div:first-child { grid-column: 1 / 5; }
  .foot-grid > div:nth-child(2) { grid-column: 5 / 7; }
  .foot-grid > div:nth-child(3) { grid-column: 7 / 10; }
  .foot-logo { grid-column: 11 / 13; grid-row: 1; justify-self: end; width: 120px; margin: 0; }
  /* home page (no hours column): logo cols 1–2, Business 4–7, Follow 9–10 */
  main:has(> .door:last-child) + .foot .foot-logo { grid-column: 1 / 3; justify-self: start; }
  main:has(> .door:last-child) + .foot .foot-grid { grid-column: 4 / 11; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  main:has(> .door:last-child) + .foot .foot-grid > div:first-child { grid-column: 1 / 5; }
  main:has(> .door:last-child) + .foot .foot-grid > div:nth-child(2) { grid-column: 6 / 8; }
  .actionbar { display: none; }
}
/* 404 */
.lost { padding-block: clamp(64px, 10vw, 136px); }
.lost .sched-head .label:first-child { color: var(--ink); }
.lost h1 { margin-top: 40px; font: 800 clamp(2.75rem, 11vw, 7rem)/.95 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.02em; }
.lost-line { margin: 20px 0 40px; max-width: 42ch; }
.lost .slots { border-top: 1px solid var(--rule); max-width: 760px; }
.slot small, .slot b { hyphens: manual; overflow-wrap: break-word; }