/* HH Site Builder — structural CSS shared by every template.
   Every colour, font and radius here is a token. A template supplies the token
   values (and may append its own CSS); a site may override any token again.
   Cascade order is: base.css → template.tokens → template.css → site.theme. */

/* Everything below is one cascade layer. A layer loses to unlayered CSS however
   late it is loaded — and it IS loaded late: Vite injects this file as a <style>
   (dev) or a <link> (build) at the END of <head>, after the <style id="theme">
   that carries the template's own CSS. Without the layer, document order decides
   the ties and base.css wins every one of them, so a template that restyles
   .card or .top is silently ignored. The layer is what makes
   "base.css → template tokens → template css → site overrides" true. */
@layer base {

  *, *::before, *::after { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font-body), 'Segoe UI', sans-serif; font-size:16px;
    -webkit-font-smoothing:antialiased; }
  h1, h2, h3, p, figure, dl, dd { margin:0; }
  img { max-width:100%; display:block; }
  a { color:var(--accent); text-decoration:none; }

  .page { position:relative; overflow:hidden; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 40px; }
  .sec { padding:96px 0; }
  .sec.alt { background:var(--bg-alt); }
  .t2 { font-family:var(--font-2), 'Nirmala UI', sans-serif; }
  [hidden] { display:none !important; }

  /* ---------------------------------------------------------- headings */
  .sec-head { text-align:center; margin-bottom:52px; }
  .sec-kicker { font-family:var(--font-mono), ui-monospace, monospace; font-size:11px;
    letter-spacing:.24em; text-transform:uppercase; color:var(--accent); font-weight:700; }
  .sec-title { font-family:var(--font-display), Georgia, serif; font-size:clamp(30px, 5vw, 46px);
    line-height:1.1; margin-top:12px; }
  .sec-sub { color:var(--dim); margin-top:14px; font-size:17px; line-height:1.7; }

  /* ------------------------------------------------------------- header */
  .top { position:sticky; top:0; z-index:30; display:flex; align-items:center;
    justify-content:space-between; gap:20px; padding:16px 40px;
    background:color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
  .top-brand { display:flex; align-items:center; gap:12px; min-width:0; }
  .top-brand img { height:38px; width:auto; }
  .top-brand b { font-family:var(--font-display), Georgia, serif; font-size:19px; }
  .top-brand small { display:block; font-size:11px; color:var(--dim); letter-spacing:.08em; }
  .top-brand b em { font-style:normal; color:var(--accent); }
  /* An "Est. 1998 - Town" line. Templates are free to move or restyle it; this is
     only enough that it reads correctly everywhere. */
  .top-badge { font-family:var(--font-mono), ui-monospace, monospace; font-size:10px;
    letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
    border:1px solid var(--line); border-radius:999px; padding:5px 14px; white-space:nowrap; }
  .top-call { display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
    border-radius:var(--radius); background:var(--accent); color:var(--accent-ink);
    font-weight:700; font-size:14px; white-space:nowrap; }

  /* --------------------------------------------------------------- hero */
  .hero { position:relative; display:grid; align-items:center; min-height:var(--hero-h, 68vh);
    padding:80px 0; }
  .hero-bg { position:absolute; inset:0; z-index:0; }
  .hero-bg img { width:100%; height:100%; object-fit:cover; }
  .hero-bg::after { content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 55%, transparent),
      color-mix(in srgb, var(--bg) 88%, transparent)); }
  .hero-in { position:relative; z-index:1; max-width:720px; }
  .hero h1 { font-family:var(--font-display), Georgia, serif;
    font-size:clamp(34px, 6.5vw, 62px); line-height:1.05; letter-spacing:-.01em; }
  .hero .hero-sub { margin-top:18px; font-size:19px; line-height:1.65; color:var(--dim); max-width:560px; }
  .hero .t2 { margin-top:12px; font-size:18px; line-height:1.85; color:var(--dim); }
  .ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
  .btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px;
    padding:0 26px; border-radius:var(--radius); font-weight:700; font-size:15px;
    border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); }
  .btn.ghost { background:transparent; color:var(--accent); }

  /* -------------------------------------------------------------- intro */
  .intro { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:56px; align-items:center; }
  .intro.solo { grid-template-columns:minmax(0,760px); justify-content:center; text-align:center; }
  .intro.solo .stats { justify-content:center; }
  .intro-portrait { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
  .intro-body { font-size:17px; line-height:1.8; color:var(--dim); }
  .intro-body .t2 { margin-top:16px; line-height:1.95; }
  .seal { display:inline-grid; place-items:center; align-content:center; width:86px; height:86px;
    border-radius:50%; margin-bottom:22px; transform:rotate(-9deg);
    background:var(--accent); color:var(--accent-ink); }
  .seal span { font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
  .seal b { font-family:var(--font-display), Georgia, serif; font-size:26px; line-height:1; }
  .stats { display:flex; flex-wrap:wrap; gap:36px; margin-top:32px; }
  .stats b { display:block; font-family:var(--font-display), Georgia, serif;
    font-size:34px; color:var(--accent); line-height:1; }
  .stats span { font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }

  /* ----------------------------------------------------------- services */
  .cards { display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0,1fr)); gap:22px; }
  .card { padding:32px 28px; border-radius:var(--radius); background:var(--panel);
    border:1px solid var(--line); }
  .card figure { height:150px; display:grid; place-items:center; margin-bottom:20px; color:var(--accent); }
  .card figure img { height:100%; width:100%; object-fit:cover; border-radius:var(--radius); }
  .card h3 { font-family:var(--font-display), Georgia, serif; font-size:21px; }
  .card .t2 { font-size:15px; color:var(--dim); margin-top:4px; }
  .card p { margin-top:12px; color:var(--dim); line-height:1.65; font-size:15px; }
  .card .price { display:inline-block; margin-top:16px; font-family:var(--font-mono), monospace;
    font-size:13px; color:var(--accent); font-weight:700; }

  /* ------------------------------------------------------------ gallery */
  .gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
  .gallery img { border-radius:var(--radius); aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line); }

  /* ----------------------------------------------------------- tracking */
  .track { max-width:920px; margin:0 auto; text-align:center; }
  .track-lead { font-size:16px; line-height:1.75; color:var(--dim); margin:0 auto; max-width:700px; }
  .rail { position:relative; display:flex; margin:44px 0 0; }
  .rail::before { content:""; position:absolute; top:25px; left:12.5%; right:12.5%; height:2px;
    background:linear-gradient(90deg, var(--accent), var(--line)); opacity:.55; }
  .step { flex:1 1 0; text-align:center; }
  .step i { position:relative; display:grid; place-items:center; width:52px; height:52px;
    margin:0 auto 14px; border-radius:50%; background:var(--panel); border:2px solid var(--accent);
    color:var(--accent); z-index:1; box-shadow:0 0 0 6px var(--bg); }
  .step b { display:block; font-family:var(--font-display), Georgia, serif; font-size:17px; }
  .step em { display:block; font-style:normal; font-size:13.5px; color:var(--dim); margin-top:4px; }
  .step.on i { background:color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow:0 0 0 6px var(--bg), 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }
  .step.on b { color:var(--accent); }

  .track-form { display:flex; gap:12px; justify-content:center; margin-top:40px; }
  .track-in { flex:0 1 380px; display:flex; align-items:center; gap:10px; min-height:52px;
    padding:0 18px; border-radius:var(--radius); border:1px dashed var(--line);
    background:var(--panel); }
  .track-in input { flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none;
    color:var(--ink); font:inherit; font-size:15px; }
  .track-in input::placeholder { color:var(--dim); }
  .track-in:focus-within { border-style:solid; border-color:var(--accent); }
  .track-form button { min-height:52px; padding:0 26px; border-radius:var(--radius);
    border:1px solid var(--line); background:var(--panel); color:var(--dim);
    font:inherit; font-weight:700; cursor:pointer; }
  .track-form button:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .track-out { margin:26px auto 0; max-width:640px; text-align:left; }
  .track-msg { text-align:center; margin:0 0 4px; font-size:14px; line-height:1.7; color:var(--dim); }
  .job { padding:18px 20px; margin-top:12px; border-radius:var(--radius);
    background:var(--panel); border:1px solid var(--line); }
  .job header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .job header b { font-family:var(--font-display), Georgia, serif; font-size:17px; }
  .pill { font-family:var(--font-mono), monospace; font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius:999px;
    border:1px solid currentColor; color:var(--dim); white-space:nowrap; }
  .pill.mid { color:var(--accent); } .pill.late { color:var(--accent2); } .pill.done { color:var(--ok); }
  .job dl { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin:14px 0 0; }
  .job dl .wide { grid-column:1 / -1; }
  .job dt { font-family:var(--font-mono), monospace; font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--dim); }
  .job dd { margin:4px 0 0; font-size:15px; line-height:1.5; }

  /* ------------------------------------------------------------ reviews */
  .revs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
  .rev { padding:30px 28px; border-radius:var(--radius); background:var(--panel);
    border:1px dashed var(--line); }
  .rev .stars { display:flex; gap:5px; color:var(--accent); margin-bottom:15px; }
  .rev q { display:block; font-family:var(--font-display), Georgia, serif; font-size:19px;
    line-height:1.55; color:var(--dim); quotes:none; }
  .rev cite { display:block; margin-top:18px; font-style:normal; font-family:var(--font-mono), monospace;
    font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; }
  .rev-note { text-align:center; margin:26px auto 0; max-width:620px; font-size:13.5px; color:var(--dim); }

  /* ------------------------------------------------------------ contact */
  .info { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .panel { padding:36px 32px; border-radius:var(--radius); border:1px solid var(--line);
    background:var(--panel); }
  .pl { display:flex; align-items:center; gap:10px; font-family:var(--font-mono), monospace;
    font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent2);
    font-weight:700; margin-bottom:16px; }
  .addr { font-size:18px; line-height:1.7; }
  .tel { font-family:var(--font-display), Georgia, serif; font-size:30px; color:var(--ink); }
  .divide { height:1px; background:var(--line); margin:28px 0; }
  .hours .row { display:flex; justify-content:space-between; gap:16px; font-size:16px;
    padding:8px 0; border-bottom:1px dashed var(--line); color:var(--dim); }
  .hours .row:last-child { border-bottom:0; }
  .hours .row b { color:var(--ink); }
  .map { margin-top:22px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
  .map iframe { width:100%; height:260px; border:0; display:block; }

  /* ------------------------------------------------------------- footer */
  .foot { background:var(--bg); border-top:1px solid var(--line); color:var(--dim); padding:26px 40px; }
  .foot-in { display:flex; justify-content:space-between; align-items:center; gap:22px;
    max-width:var(--maxw); margin:0 auto; flex-wrap:wrap; }
  .foot small { display:block; font-size:12px; margin-top:4px; }
  .pb { display:flex; align-items:center; gap:10px; font-size:12px; }
  .pb img { height:34px; }

  /* -------------------------------------------------------- responsive */
  @media (max-width:860px) {
    .wrap { padding:0 18px; }
    .sec { padding:60px 0; }
    .sec-head { margin-bottom:34px; }
    .top { padding:12px 18px; }
    .top-brand b { font-size:17px; }
    .hero { min-height:auto; padding:56px 0; }
    .intro { grid-template-columns:1fr; gap:30px; }
    .cards { grid-template-columns:1fr; }
    .rail { flex-direction:column; gap:24px; }
    .rail::before { display:none; }
    .track-form { flex-direction:column; }
    .track-in { flex:0 0 auto; }
    .track-form button { width:100%; }
    .job dl { grid-template-columns:1fr; }
    .job { padding:16px; }
    .revs { grid-template-columns:1fr; }
    .info { grid-template-columns:1fr; }
    .panel { padding:26px 22px; }
    .foot-in { flex-direction:column; align-items:flex-start; }
  }

  /* ---------- status timeline ---------- */
  .tl { list-style:none; margin:6px 0 0; padding:0; }
  .tl li { display:flex; align-items:baseline; gap:10px; padding:7px 0 7px 18px;
    position:relative; border-left:1px solid var(--line); }
  .tl li::before { content:""; position:absolute; left:-4.5px; top:13px; width:8px; height:8px;
    border-radius:50%; background:var(--line); }
  .tl li:last-child { border-left-color:transparent; }
  .tl li:last-child::before { background:var(--accent); }
  .tl span { font-size:14.5px; color:var(--ink); }
  .tl time { margin-left:auto; font-family:var(--font-mono), monospace; font-size:11px;
    letter-spacing:.1em; color:var(--dim); white-space:nowrap; }

  /* ---------- finished jobs fold into history ---------- */
  .past { margin-top:18px; border-top:1px dashed var(--line); padding-top:6px; }
  .past > summary { cursor:pointer; list-style:none; padding:10px 2px;
    font-family:var(--font-mono), monospace; font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim); font-weight:700; }
  .past > summary::-webkit-details-marker { display:none; }
  .past > summary::before { content:"+ "; color:var(--accent); }
  .past[open] > summary::before { content:"- "; }
  .past > summary:hover { color:var(--accent); }
  .past .job { opacity:.72; }

  /* ---------- customer review form ---------- */
  .rev-form { max-width:640px; margin:32px auto 0; padding:26px 24px; border-radius:var(--radius);
    background:var(--panel); border:1px solid var(--line); text-align:left; }
  .rev-form-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
  .rev-form-h b { font-family:var(--font-display), Georgia, serif; font-size:19px; }
  .rev-form-h .t2 { font-size:14px; color:var(--dim); }
  .rev-form label { display:block; }
  .rev-form label > span, .rev-rate > span { display:block; font-family:var(--font-mono), monospace;
    font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:6px; }
  .rev-form label > span i, .rev-rate > span i { font-style:normal; color:var(--accent); }
  .rev-form input[type=text], .rev-form textarea { width:100%; font:inherit; font-size:15px;
    padding:11px 13px; border-radius:var(--radius); border:1px solid var(--line);
    background:var(--bg); color:var(--ink); outline:none; }
  .rev-form input[type=text]:focus, .rev-form textarea:focus { border-color:var(--accent); }
  .rev-form textarea { resize:vertical; min-height:78px; line-height:1.5; }
  .rev-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .rev-rate { margin-top:15px; }
  .stars-in { display:flex; gap:5px; }
  .stars-in button { background:none; border:0; padding:3px; cursor:pointer; color:var(--line); line-height:0; }
  .stars-in button svg { width:30px; height:30px; }   /* the shared star is 17px */
  .stars-in button:hover, .stars-in button.on { color:var(--accent); }
  .rev-fb { margin-top:15px; }
  .rev-form > button[type=submit] { margin-top:18px; min-height:48px; padding:0 28px;
    border-radius:var(--radius); background:var(--accent); border:1px solid var(--accent);
    color:var(--accent-ink); font:inherit; font-weight:700; cursor:pointer; }
  .rev-form > button[disabled] { opacity:.55; cursor:default; }
  .rev-msg { margin-top:14px; font-size:14px; line-height:1.6; color:var(--dim); }
  .rev-msg.ok { color:var(--ok); } .rev-msg.err { color:var(--warn); }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

  /* ---------- view-all reviews popup ---------- */
  .rev-more { text-align:center; margin-top:26px; }
  .rev-more button { min-height:46px; padding:0 26px; border-radius:var(--radius);
    background:transparent; border:1px solid var(--accent); color:var(--accent);
    font:inherit; font-weight:700; font-size:14px; cursor:pointer; }
  .rev-more button:hover { background:var(--accent); color:var(--accent-ink); }
  .rev-modal { width:min(680px, calc(100vw - 32px)); padding:0; border:1px solid var(--line);
    border-radius:var(--radius); background:var(--bg-alt); color:var(--ink); overflow:hidden; }
  .rev-modal::backdrop { background:rgba(0,0,0,.62); }
  .rev-modal header { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 22px; border-bottom:1px solid var(--line); }
  .rev-modal h3 { font-family:var(--font-display), Georgia, serif; font-size:20px; }
  .rev-modal h3 .t2 { font-size:14px; color:var(--dim); margin-left:6px; }
  .rev-modal .x { background:none; border:0; color:var(--dim); font-size:26px; line-height:1;
    cursor:pointer; padding:2px 8px; }
  .rev-modal .x:hover { color:var(--accent); }
  .rev-modal-body { padding:18px 22px; overflow-y:auto; max-height:min(56vh, 460px);
    display:flex; flex-direction:column; gap:14px;
    scrollbar-width:thin; scrollbar-color:var(--dim) var(--bg-alt); }
  .rev-modal-body .rev { padding:20px 18px; }
  .rev-modal-body[aria-busy="true"] { opacity:.5; }
  .pager { display:flex; justify-content:center; gap:6px; padding:14px 22px;
    border-top:1px solid var(--line); flex-wrap:wrap; }
  .pager:empty { display:none; }
  .pager button { min-width:40px; min-height:40px; padding:0 10px; border-radius:var(--radius);
    border:1px solid var(--line); background:transparent; color:var(--dim); font:inherit;
    font-size:14px; cursor:pointer; }
  .pager button:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
  .pager button.on { background:var(--accent); border-color:var(--accent);
    color:var(--accent-ink); font-weight:700; }
  .pager button:disabled { opacity:.35; cursor:default; }

  @media (max-width:860px) {
    .rev-grid { grid-template-columns:1fr; }
    .rev-form { padding:20px 16px; }
    .rev-form > button[type=submit] { width:100%; }
    .rev-modal { width:calc(100vw - 20px); }
    .rev-modal header, .pager { padding:14px 16px; }
    .rev-modal-body { padding:14px 16px; max-height:58vh; }
  }

  /* ======================================================= content pages
     A page is an ordered list of blocks, not rich text, so every page in every
     template lands on these same class names. */
  .pg { max-width:760px; margin:0 auto; }
  .pg-title { font-family:var(--font-display), Georgia, serif;
    font-size:clamp(30px, 5vw, 46px); line-height:1.1; }
  .pg-title .t2 { display:block; font-size:.5em; color:var(--dim); margin-top:10px; }
  .pg-block { margin-top:26px; font-size:17px; line-height:1.75; color:var(--dim); }
  .pg-block h2 { font-family:var(--font-display), Georgia, serif; font-size:26px;
    color:var(--ink); margin-top:44px; }
  .pg-block strong { color:var(--ink); font-weight:700; }
  .pg-figure img { border-radius:var(--radius); border:1px solid var(--line); width:100%; }
  .pg-figure figcaption { margin-top:10px; font-size:14px; color:var(--dim); text-align:center; }
  .pg-list { margin:0; padding-left:22px; }
  .pg-list li { margin-top:10px; }
  /* A dated entry — what a news page is made of. */
  .pg-entry { border-top:1px solid var(--line); padding-top:22px; }
  .pg-entry time { display:block; font-family:var(--font-mono), ui-monospace, monospace;
    font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

  /* ============================================================== events */
  .ev-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:22px; }
  /* --ac is the event's own accent, set per card; it falls back to the
     template's so an event with no colour still looks deliberate. */
  .ev-card { display:block; color:inherit; border:1px solid var(--line);
    border-radius:var(--radius); background:var(--panel); overflow:hidden;
    border-top:3px solid var(--ac, var(--accent)); }
  .ev-card figure { aspect-ratio:4/3; margin:0; background:var(--bg-alt); }
  .ev-card figure img { width:100%; height:100%; object-fit:cover; }
  .ev-card-body { padding:20px 22px 24px; }
  .ev-card h3 { font-family:var(--font-display), Georgia, serif; font-size:21px; }
  .ev-card .t2 { font-size:15px; color:var(--dim); margin-top:4px; }
  .ev-when { display:block; margin-top:10px; font-family:var(--font-mono), ui-monospace, monospace;
    font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ac, var(--accent)); }
  .ev-line { margin-top:10px; font-size:15px; line-height:1.6; color:var(--dim); }
  .ev-count { margin-top:14px; font-size:13px; color:var(--dim); }

  /* One event's own page. */
  .ev { max-width:960px; margin:0 auto; }
  .ev-head { text-align:center; margin-bottom:40px; }
  .ev-cover { margin-bottom:36px; }
  .ev-cover img { width:100%; aspect-ratio:16/7; object-fit:cover;
    border-radius:var(--radius); border:1px solid var(--line); }
  .ev-blurb { max-width:700px; margin:18px auto 0; font-size:17px;
    line-height:1.75; color:var(--dim); }
  .ev-back { display:inline-block; margin-bottom:26px; font-size:14px;
    font-family:var(--font-mono), ui-monospace, monospace; letter-spacing:.1em; }

  /* Captions sit under the shared .gallery grid rather than beside it, so an
     event gallery and a config gallery are the same object visually. */
  .gal-fig { margin:0; }
  .gal-cap { margin-top:8px; font-size:13px; color:var(--dim); text-align:center; }

  /* =========================================================== timetable */
  .tt { max-width:760px; margin:0 auto; }
  .tt-day + .tt-day { margin-top:34px; }
  .tt-day-h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    padding-bottom:12px; border-bottom:1px solid var(--line); }
  .tt-day-h b { font-family:var(--font-display), Georgia, serif; font-size:22px; }
  .tt-day-h span { font-size:13px; color:var(--dim); letter-spacing:.1em;
    text-transform:uppercase; font-family:var(--font-mono), ui-monospace, monospace; }
  .tt-slot { display:grid; grid-template-columns:104px 1fr; gap:18px;
    padding:16px 0; border-bottom:1px solid var(--line); }
  .tt-time { font-family:var(--font-mono), ui-monospace, monospace; font-size:13px;
    color:var(--accent); padding-top:3px; white-space:nowrap; }
  .tt-title { font-size:17px; line-height:1.5; }
  .tt-note { margin-top:6px; font-size:14px; line-height:1.6; color:var(--dim); }
  .tt-empty { color:var(--dim); text-align:center; font-size:16px; }

  /* ================================================================= nav */
  .top-nav { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  .top-nav a { font-size:14px; color:var(--ink); opacity:.78; }
  .top-nav a:hover, .top-nav a.on { opacity:1; color:var(--accent); }

  @media (max-width:760px) {
    .tt-slot { grid-template-columns:1fr; gap:4px; }
    .ev-cover img { aspect-ratio:16/10; }
    .top-nav { gap:14px; }
  }

}