/* Live Website Builds! — retro desktop, 2026 internals */
@view-transition { navigation: auto; }

:root {
  --paper: oklch(97.5% 0.02 85);
  --paper-2: oklch(94% 0.04 85);
  --ink: oklch(22% 0.04 270);
  --ink-soft: oklch(40% 0.03 270);
  --coral: oklch(68% 0.21 29);
  --coral-deep: oklch(58% 0.21 29);
  --cobalt: oklch(52% 0.24 268);
  --cobalt-soft: oklch(92% 0.05 268);
  --butter: oklch(94% 0.09 95);
  --white: #fff;
  --bw: 3px;
  --shadow: 6px 6px 0 var(--ink);
  --r: 12px;
  --head: "Rubik", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; color: var(--ink); font: 400 1.0625rem/1.6 var(--body);
  background-color: var(--paper);
  background-image: radial-gradient(oklch(80% 0.05 85) 1.2px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--cobalt); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--coral-deep); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--head); line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.015em; }
h1 { font-size: clamp(2.5rem, 7vw, 4.9rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
.wrap { width: min(1160px, 100% - 2rem); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bang { color: var(--coral); }
.eyebrow { font: 700 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--cobalt); display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.live-dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 oklch(68% 0.21 29 / .6); animation: pulse 1.6s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 .7rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 99; }
.skip:focus { left: 0; }

/* ---------- menubar ---------- */
.menubar { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: var(--bw) solid var(--ink); }
.menubar .wrap { display: flex; align-items: center; gap: 1.2rem; min-height: 56px; }
.wordmark { font: 800 1.2rem/1 var(--head); color: var(--ink); text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: .55rem; }
.wordmark:hover { color: var(--ink); }
.menubar nav { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.menubar nav a { font: 700 .82rem/1 var(--mono); color: var(--ink); text-decoration: none; padding: .55rem .7rem; border-radius: 6px; }
.menubar nav a:hover { background: var(--ink); color: var(--paper); }
.menubar nav a.pill { background: var(--coral); border: 2px solid var(--ink); }
.menubar nav a.pill:hover { background: var(--ink); }
.clock { font: 700 .8rem/1 var(--mono); color: var(--ink-soft); padding-left: .8rem; border-left: 2px solid var(--ink); white-space: nowrap; }
.menu-toggle { display: none; margin-left: auto; font: 700 .85rem var(--mono); background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: .5rem .7rem; cursor: pointer; color: var(--ink); }
@media (max-width: 880px) {
  .clock { display: none; }
  .menu-toggle { display: block; }
  .menubar nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--white); border-bottom: var(--bw) solid var(--ink); padding: .5rem 1rem 1rem; }
  .menubar nav.open { display: flex; }
  .menubar nav a { padding: .9rem .7rem; }
}

/* ---------- windows ---------- */
.win { background: var(--white); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.win > .bar {
  display: flex; align-items: center; gap: .7rem; padding: .45rem .7rem; border-bottom: var(--bw) solid var(--ink);
  background: repeating-linear-gradient(0deg, var(--paper-2) 0 2px, var(--white) 2px 5px);
  font: 700 .78rem/1 var(--mono); text-transform: lowercase;
}
.win > .bar .box { width: 14px; height: 14px; border: 2px solid var(--ink); background: var(--white); flex: none; }
.win > .bar .t { background: var(--white); padding: .2rem .6rem; border-radius: 4px; border: 2px solid var(--ink); }
.win > .bar .r { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; background: var(--coral); border: 2px solid var(--ink); padding: .2rem .55rem; border-radius: 99px; letter-spacing: .08em; }
.win > .bar .r i { width: .55rem; height: .55rem; background: var(--white); border-radius: 50%; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.win .body { padding: 1.4rem; }
.win.cobalt > .bar { background: repeating-linear-gradient(0deg, var(--cobalt-soft) 0 2px, var(--white) 2px 5px); }
.win.coral > .bar { background: repeating-linear-gradient(0deg, oklch(90% 0.07 29) 0 2px, var(--white) 2px 5px); }
.win.butter > .bar { background: repeating-linear-gradient(0deg, var(--butter) 0 2px, var(--white) 2px 5px); }
.tilt-l { rotate: -1.2deg; } .tilt-r { rotate: 1.2deg; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 800 1.05rem/1 var(--head); text-decoration: none; color: var(--ink); background: var(--white); border: var(--bw) solid var(--ink); border-radius: 10px; padding: 1rem 1.4rem; box-shadow: 4px 4px 0 var(--ink); transition: translate .08s, box-shadow .08s, background .15s; cursor: pointer; }
.btn:hover { color: var(--ink); translate: -1px -1px; box-shadow: 6px 6px 0 var(--ink); }
.btn:active { translate: 4px 4px; box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--coral); }
.btn.primary:hover { background: oklch(74% 0.19 29); }
.btn.cobalt { background: var(--cobalt); color: #fff; }
.btn.cobalt:hover { color: #fff; background: oklch(58% 0.24 268); }
.btn.small { font-size: .95rem; padding: .75rem 1rem; }
.btn.block { width: 100%; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero h1 .hl { background: linear-gradient(transparent 62%, oklch(85% 0.14 95) 62% 92%, transparent 92%); }
.hero .sub { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-soft); max-width: 34ch; }
.cursor-blk { display: inline-block; width: .5em; height: .85em; background: var(--coral); vertical-align: -.05em; margin-left: .12em; animation: blink 1s steps(2) infinite; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 1rem; }
.hero .fine { font: 700 .85rem/1.4 var(--mono); color: var(--ink-soft); display: flex; gap: .6rem; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.sticker { position: absolute; right: -14px; top: -26px; z-index: 5; width: 118px; height: 118px; border-radius: 50%; background: var(--butter); border: var(--bw) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: grid; place-items: center; text-align: center; font: 800 .85rem/1.15 var(--head); rotate: 12deg; text-transform: uppercase; padding: .6rem; animation: wob 5s ease-in-out infinite; }
@keyframes wob { 50% { rotate: 6deg; } }

/* live session mock */
.stage-wrap { position: relative; }
.stage { position: relative; background: var(--paper); padding: 1rem; min-height: 360px; overflow: hidden; }
.mock { background: var(--white); border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.mock .mnav { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; border-bottom: 2px solid var(--ink); font: 700 .75rem var(--mono); }
.mock .mnav b { font-family: var(--head); font-size: .95rem; }
.mock .mnav span { color: var(--ink-soft); }
.mock .mnav span:first-of-type { margin-left: auto; }
.mock .mhero { padding: 1.2rem .9rem 1rem; }
.mock h4 { font: 800 1.5rem/1.1 var(--head); margin: 0 0 .5rem; min-height: 2.2em; }
.mock h4 .caret { display: inline-block; width: 3px; height: 1em; background: var(--cobalt); margin-left: 2px; vertical-align: -.12em; animation: blink 1s steps(2) infinite; }
.mock p { font-size: .85rem; margin: 0 0 .8rem; color: var(--ink-soft); }
.mock .mbtn { display: inline-block; font: 800 .8rem var(--head); padding: .55rem .9rem; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-2); transition: background .4s, rotate .4s; }
.mock .mbtn.on { background: var(--coral); rotate: -2deg; }
.mock .mcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 0 .9rem 1rem; }
.mock .mcards div { height: 54px; border: 2px dashed var(--ink-soft); border-radius: 6px; opacity: 0; transform: translateY(8px); transition: .4s; display: grid; place-items: center; font: 700 .65rem var(--mono); color: var(--ink-soft); }
.mock .mcards.on div { opacity: 1; transform: none; border-style: solid; border-color: var(--ink); background: var(--cobalt-soft); }
.mock .mcards.on div:nth-child(2) { transition-delay: .12s; } .mock .mcards.on div:nth-child(3) { transition-delay: .24s; }
.chat { margin-top: .8rem; display: grid; gap: .45rem; }
.bubble { font: 400 .82rem/1.3 var(--body); padding: .5rem .7rem; border: 2px solid var(--ink); border-radius: 10px; max-width: 88%; opacity: 0; transform: translateY(6px); transition: .3s; background: var(--white); }
.bubble.show { opacity: 1; transform: none; }
.bubble b { font: 700 .68rem var(--mono); display: block; text-transform: uppercase; letter-spacing: .06em; }
.bubble.you { background: var(--cobalt-soft); justify-self: end; }
.bubble.rk { background: oklch(93% 0.06 29); }
.bubble.ai { background: var(--butter); font-family: var(--mono); font-size: .75rem; }
.mcur { position: absolute; z-index: 6; left: 0; top: 0; pointer-events: none; transition: transform .9s cubic-bezier(.5,0,.2,1); will-change: transform; }
.mcur svg { width: 22px; height: 22px; filter: drop-shadow(1px 1px 0 var(--ink)); }
.mcur span { position: absolute; left: 16px; top: 18px; white-space: nowrap; font: 700 .68rem/1 var(--mono); padding: .25rem .45rem; border: 2px solid var(--ink); border-radius: 4px 99px 99px 99px; color: #fff; }
.mcur.rk svg path { fill: var(--coral); } .mcur.rk span { background: var(--coral); color: var(--ink); }
.mcur.you svg path { fill: var(--cobalt); } .mcur.you span { background: var(--cobalt); }

/* ---------- sections ---------- */
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sec-head { max-width: 46rem; margin-bottom: 2.4rem; }
.sec-head p { color: var(--ink-soft); font-size: 1.15rem; }
.band { background: var(--ink); color: var(--paper); border-block: var(--bw) solid var(--ink); }
.band.book a:not(.btn) { color: var(--butter); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; counter-reset: s; }
.steps .win .body { padding-top: 1rem; }
.steps .num { font: 800 3.4rem/1 var(--head); color: var(--coral); -webkit-text-stroke: 2px var(--ink); margin-bottom: .3rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.icon-tile { display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center; text-decoration: none; color: var(--ink); padding: 1.2rem .6rem; border: var(--bw) solid transparent; border-radius: var(--r); }
.icon-tile:hover { color: var(--ink); background: var(--white); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); translate: -2px -2px; }
.icon-tile svg { width: 84px; height: 84px; }
.icon-tile strong { font: 800 1.1rem var(--head); }
.icon-tile small { font: 400 .85rem/1.3 var(--body); color: var(--ink-soft); }
@media (max-width: 860px) { .icons { grid-template-columns: repeat(2, 1fr); } }

/* plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; align-items: stretch; margin-top: 1rem; }
.plan { display: flex; flex-direction: column; }
.plan .win { height: 100%; display: flex; flex-direction: column; }
.plan .body { display: flex; flex-direction: column; flex: 1; }
.plan .tag { font: 700 .8rem var(--mono); color: var(--ink-soft); margin-bottom: .2rem; }
.plan .price { font: 800 3.2rem/1 var(--head); margin: .3rem 0 .2rem; }
.plan .price small { font: 700 1rem var(--mono); color: var(--ink-soft); }
.plan .hours { font: 700 1.05rem var(--head); background: var(--butter); border: 2px solid var(--ink); border-radius: 8px; padding: .6rem .8rem; margin: .8rem 0 1rem; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .55rem; flex: 1; }
.plan li { padding-left: 1.7rem; position: relative; font-size: .98rem; line-height: 1.4; }
.plan li::before { content: "✓"; position: absolute; left: 0; font-weight: 900; color: var(--cobalt); }
.plan li.no { color: oklch(60% 0.02 270); text-decoration: line-through; text-decoration-thickness: 1px; }
.plan li.no::before { content: "–"; color: oklch(60% 0.02 270); }
.plan.featured { position: relative; }
.plan.featured .win { box-shadow: 8px 8px 0 var(--coral), 8px 8px 0 3px var(--ink); }
.plan.featured .win { border-color: var(--ink); }
.callout { font: 800 1.25rem var(--head); display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; justify-content: center; text-align: center; }
.callout svg { width: 34px; height: 34px; flex: none; }
.plan-slot { display: flex; flex-direction: column; }
.plan-slot .callout { visibility: hidden; }
.plan-slot .callout.show { visibility: visible; }
.plan-note { font: 400 .95rem/1.5 var(--body); color: var(--ink-soft); margin-top: 1.8rem; text-align: center; }
.single { margin-top: 2.4rem; max-width: 640px; margin-inline: auto; }
.single .body { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.single .p { font: 800 2rem var(--head); }
.single .p small { font: 700 .9rem var(--mono); color: var(--ink-soft); }
.single p { margin: 0; font-size: .98rem; color: var(--ink-soft); max-width: 36ch; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .plan-slot .callout { display: none; } .plan-slot .callout.show { display: flex; } }

/* teacher */
.teacher { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }
.avatar { border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--cobalt-soft); aspect-ratio: 1; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.4rem 0; }
.stats div { border: 2px solid var(--ink); border-radius: 8px; padding: .8rem; background: var(--paper); text-align: center; }
.stats strong { display: block; font: 800 1.9rem/1 var(--head); color: var(--coral-deep); }
.stats span { font: 700 .72rem/1.3 var(--mono); text-transform: uppercase; }
@media (max-width: 760px) { .teacher { grid-template-columns: 1fr; } .avatar { max-width: 220px; } }

.built { text-align: center; }
.built p { margin: 0; font-size: 1.15rem; }

/* faq */
.faq { display: grid; gap: .9rem; max-width: 52rem; }
details { background: var(--white); border: var(--bw) solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); }
summary { cursor: pointer; padding: 1rem 1.2rem; font: 700 1.1rem var(--head); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 800 1.5rem/1 var(--mono); color: var(--coral-deep); transition: rotate .2s; }
details[open] summary::after { rotate: 45deg; }
details > div { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); }
details table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: .5rem 0; }
details th, details td { text-align: left; padding: .6rem; border: 2px solid var(--ink); vertical-align: top; }
details th { background: var(--butter); font-family: var(--mono); font-size: .78rem; text-transform: uppercase; }
.tbl-scroll { overflow-x: auto; }

/* booking */
.book { text-align: center; }
.book h2 { color: var(--paper); }
.book .lead { color: oklch(85% 0.02 270); max-width: 36rem; margin-inline: auto; font-size: 1.15rem; }
.cal-win { max-width: 880px; margin: 2rem auto 0; text-align: left; color: var(--ink); }
.tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button { font: 700 .85rem var(--mono); border: 2px solid var(--ink); background: var(--paper); border-radius: 99px; padding: .55rem 1rem; cursor: pointer; color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--coral); }
.cal-frame { min-height: 420px; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--paper); display: grid; }
.cal-frame iframe { width: 100%; height: 640px; border: 0; }
.cal-ph { padding: 2.5rem 1.5rem; text-align: center; align-self: center; }
.cal-ph .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 360px; margin: 0 auto 1.4rem; }
.cal-ph .grid i { aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 4px; background: var(--white); }
.cal-ph .grid i:nth-child(3n) { background: var(--cobalt-soft); } .cal-ph .grid i:nth-child(5n) { background: oklch(93% 0.06 29); }

/* footer */
footer { background: var(--paper-2); border-top: var(--bw) solid var(--ink); padding: 2.4rem 0 3.4rem; font-size: .95rem; }
.foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
footer h3 { font: 700 .78rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: .8rem; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
footer a { color: var(--ink); }
.status { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--ink); font: 700 .78rem var(--mono); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } }

/* subject pages */
.sub-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem; }
.crumbs { font: 700 .8rem var(--mono); margin-bottom: 1.2rem; }
.sub-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); max-width: 18ch; }
.sub-hero .lead { font-size: 1.25rem; color: var(--ink-soft); max-width: 40rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checks li { padding-left: 1.9rem; position: relative; }
.checks li::before { content: "▶"; position: absolute; left: 0; top: .15em; font-size: .75rem; color: var(--coral-deep); }
.sess { counter-reset: x; display: grid; gap: 1rem; }
.sess div { border: 2px solid var(--ink); border-radius: 10px; padding: .9rem 1rem; background: var(--paper); }
.sess strong { font: 800 1.05rem var(--head); display: block; }
.sess span { color: var(--ink-soft); font-size: .95rem; }
.prose { max-width: 46rem; } .prose h2 { font-size: 1.6rem; margin-top: 2rem; }

/* scroll-driven reveal (2026): only where supported */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes rise { from { opacity: 0; translate: 0 36px; scale: .97; } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* plan alignment */
.plan-slot .callout { min-height: 4.4rem; margin-bottom: .4rem; }
.plan-slot .plan { flex: 1; }
@media (max-width: 960px) { .plan-slot .callout { min-height: 0; } }

body { overflow-x: clip; }
@media (max-width: 600px) { .sticker { right: -4px; top: -34px; width: 100px; height: 100px; font-size: .75rem; } }

.tchtabs { margin-bottom: 1.4rem; }
.teacher[hidden] { display: none; }
.avatar { background: var(--butter); }

/* ---------- logo (retro layered wordmark) ---------- */
.logo { --lg-ink: var(--ink); --lg-or: var(--coral); --lg-go: oklch(85% 0.14 95); --lg-red: var(--coral-deep); display: inline-flex; align-items: center; gap: .55em; text-decoration: none; color: var(--lg-ink); font-size: 1rem; white-space: nowrap; }
.logo:hover { color: var(--lg-ink); }
.lg-live { font: 400 2.35em/.8 "Archivo Black", "Rubik", sans-serif; letter-spacing: -.055em; text-shadow: .06em .06em 0 var(--lg-or), .12em .12em 0 var(--lg-go); padding: 0 .14em .12em 0; }
.lg-rest { display: grid; gap: .32em; }
.lg-bars { display: grid; gap: .16em; }
.lg-bars i { display: block; height: .2em; border-radius: 99px; background: var(--lg-or); }
.lg-bars i:nth-child(2) { background: var(--lg-go); } .lg-bars i:nth-child(3) { background: var(--lg-red); }
.lg-words { font: 400 .78em/1 "Archivo Black", "Rubik", sans-serif; letter-spacing: .01em; }
.lg-words em { color: var(--lg-red); font-style: italic; }
footer .logo { font-size: 1.35rem; }
@media (max-width: 420px) { .menubar .logo { font-size: .85rem; } }
.menubar .logo { font-size: 1.2rem; padding-block: .35rem; }
@media (max-width: 420px) { .menubar .logo { font-size: .95rem; } }

/* square i-dot */
.lg-i { position: relative; }
.lg-i::before { content: ""; position: absolute; left: .075em; top: -.07em; width: .3em; height: .24em; background: var(--lg-ink); box-shadow: .06em .06em 0 var(--lg-or), .12em .12em 0 var(--lg-go); }

/* header logo: the i-dot is the live indicator */
.menubar .lg-i::before { background: var(--coral); box-shadow: .06em .06em 0 var(--coral-deep), .12em .12em 0 var(--lg-go); }
.menubar .lg-i::after { content: ""; position: absolute; left: .075em; top: -.07em; width: .3em; height: .24em; border: .05em solid var(--coral); box-sizing: border-box; animation: dotpulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes dotpulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2); opacity: 0; } }
.menubar .logo { padding-block: .7rem .4rem; }