:root { --bg:#f4f8f7; --ink:#14282b; --muted:#566a6d; --brand:#0e5a63; --brand-ink:#ffffff; --card:#ffffff; --line:#d3dedd; --soft:#e2eeed; }
  @media (prefers-color-scheme: dark) {
    :root { --bg:#0e1617; --ink:#e6efee; --muted:#93a8aa; --brand:#5cc4cf; --brand-ink:#0e1617; --card:#162224; --line:#2b3d3f; --soft:#1a2c2e; }
  }
  * { box-sizing: border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:"Trebuchet MS", Verdana, sans-serif; line-height:1.6; }
  .wrap { max-width:1000px; margin:0 auto; padding:0 20px; }
  .btn { display:inline-block; padding:14px 22px; border-radius:8px; font-weight:bold; text-decoration:none; }
  .btn.primary { background:var(--brand); color:var(--brand-ink); }
  .btn.ghost { border:2px solid var(--brand); color:var(--brand); }
  a:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
  .hero { padding:72px 0 56px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
  .hero h1 { font-size:2.6rem; line-height:1.15; margin:0 0 16px; }
  .hero p { color:var(--muted); font-size:1.1rem; margin:0 0 28px; max-width:34em; }
  .hero .cta { display:flex; gap:12px; flex-wrap:wrap; }
  .ticket { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; text-align:center; }
  .ticket .lbl { color:var(--muted); }
  .ticket .num { font-size:5.5rem; font-weight:bold; color:var(--brand); line-height:1.1; }
  .ticket dl { margin:16px 0 0; border-top:1px solid var(--line); text-align:left; }
  .ticket dl div { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
  .ticket dt { color:var(--muted); } .ticket dd { margin:0; font-weight:bold; }
  section.block { padding:56px 0; border-top:1px solid var(--line); }
  h2 { font-size:1.7rem; margin:0 0 8px; }
  .lead { color:var(--muted); margin:0 0 32px; max-width:38em; }
  .grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; }
  .card .n { display:inline-block; width:34px; height:34px; line-height:34px; text-align:center; border-radius:50%; background:var(--soft); color:var(--brand); font-weight:bold; margin-bottom:10px; }
  .card h3 { margin:0 0 6px; font-size:1.1rem; }
  .card p { margin:0; color:var(--muted); }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .tag { font-size:.85rem; color:var(--muted); }
  details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin-bottom:10px; }
  summary { font-weight:bold; cursor:pointer; }
  details p { color:var(--muted); margin:10px 0 0; }
  .band { background:var(--soft); border-radius:16px; padding:40px 28px; text-align:center; }
  .band p { color:var(--muted); max-width:32em; margin:0 auto 24px; }
  @media (max-width:760px) {
    .hero { grid-template-columns:1fr; padding-top:40px; }
    .hero h1 { font-size:2rem; }
    .grid, .two { grid-template-columns:1fr; }
  }

  .page-head { padding:56px 0 8px; }
  .page-head h1 { font-size:2.2rem; line-height:1.2; margin:0 0 10px; }
  .page-head p { color:var(--muted); max-width:38em; margin:0; font-size:1.1rem; }
  .prose { max-width:42em; padding:24px 0 56px; }
  .prose h2 { font-size:1.3rem; margin:32px 0 8px; }
  .prose p, .prose li { color:var(--muted); }
  .prose li { margin-bottom:6px; }
  .draft { background:var(--soft); border-radius:8px; padding:10px 14px; font-size:.9rem; margin-top:20px; }
  @media (max-width:760px) { .page-head h1 { font-size:1.7rem; } }

  /* ===== header ===== */
  .site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease, background .3s ease; }
  .site-header.scrolled { box-shadow:0 6px 24px rgba(10,40,45,.12); }
  .site-header .bar { max-width:1000px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .logo { display:flex; align-items:center; gap:10px; font-weight:bold; font-size:1.25rem; color:var(--ink); text-decoration:none; letter-spacing:.2px; }
  .logo .mark { width:36px; height:36px; border-radius:10px; background:var(--brand); display:grid; place-items:center; transition:transform .35s ease; }
  .logo:hover .mark { transform:rotate(-8deg) scale(1.08); }
  .logo .mark svg { width:20px; height:20px; fill:none; stroke:var(--brand-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .main-nav { display:flex; align-items:center; gap:6px; }
  .main-nav a.link { position:relative; padding:8px 12px; color:var(--ink); text-decoration:none; }
  .main-nav a.link::after { content:""; position:absolute; left:50%; bottom:2px; width:0; height:2px; background:var(--brand); transition:width .3s ease, left .3s ease; }
  .main-nav a.link:hover::after, .main-nav a.link[aria-current="page"]::after { width:calc(100% - 24px); left:12px; }
  .main-nav a.link:hover { color:var(--brand); }
  .main-nav a.link[aria-current="page"] { color:var(--brand); font-weight:bold; }
  .main-nav .btn { margin-left:10px; padding:10px 18px; }
  .nav-toggle { display:none; background:none; border:1px solid var(--line); border-radius:8px; width:42px; height:42px; cursor:pointer; color:var(--ink); }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display:block; width:20px; height:2px; background:currentColor; margin:0 auto; position:relative; transition:transform .3s ease, background .2s ease; }
  .nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; }
  .nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
  .nav-toggle[aria-expanded="true"] span { background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
  @media (max-width:820px) {
    .nav-toggle { display:block; }
    .main-nav { position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 20px 16px; max-height:0; overflow:hidden; opacity:0; visibility:hidden; transition:max-height .35s ease, opacity .25s ease, visibility .25s; }
    .main-nav.open { max-height:420px; opacity:1; visibility:visible; }
    .main-nav a.link { padding:12px 4px; border-bottom:1px solid var(--line); }
    .main-nav a.link::after { display:none; }
    .main-nav .btn { margin:12px 0 0; text-align:center; }
  }

  /* ===== buttons and cards ===== */
  .btn { transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
  .btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(14,90,99,.25); }
  .btn:active { transform:translateY(0); }
  .btn.ghost:hover { background:var(--brand); color:var(--brand-ink); }
  .card { transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(10,40,45,.12); border-color:var(--brand); }
  .card .n { transition:background .25s ease, color .25s ease; }
  .card:hover .n { background:var(--brand); color:var(--brand-ink); }
  details { transition:border-color .2s ease, box-shadow .2s ease; }
  details:hover { border-color:var(--brand); }
  details[open] { box-shadow:0 8px 20px rgba(10,40,45,.08); }
  summary { transition:color .2s ease; } summary:hover { color:var(--brand); }
  .ticket { animation:floaty 6s ease-in-out infinite; }
  @keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

  /* ===== reveal on scroll ===== */
  .js .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .js .reveal.in { opacity:1; transform:none; }
  .js .reveal:nth-child(2) { transition-delay:.08s; } .js .reveal:nth-child(3) { transition-delay:.16s; } .js .reveal:nth-child(4) { transition-delay:.24s; }

  /* ===== footer ===== */
  .site-footer { background:var(--fbg,#0f3b41); color:#cfe3e3; margin-top:24px; }
  @media (prefers-color-scheme: dark) { .site-footer { --fbg:#0a1213; border-top:1px solid var(--line); } }
  .site-footer .cols { max-width:1000px; margin:0 auto; padding:48px 20px 28px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
  .site-footer .brand { color:#fff; font-weight:bold; font-size:1.2rem; margin-bottom:10px; }
  .site-footer p { margin:0; color:#a9c4c4; max-width:22em; font-size:.95rem; }
  .site-footer h4 { margin:0 0 12px; color:#fff; font-size:.95rem; letter-spacing:.5px; text-transform:uppercase; }
  .site-footer ul { list-style:none; margin:0; padding:0; }
  .site-footer li { margin-bottom:8px; }
  .site-footer a { color:#cfe3e3; text-decoration:none; display:inline-block; transition:transform .2s ease, color .2s ease; }
  .site-footer a:hover { color:#fff; transform:translateX(5px); }
  .site-footer a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
  .site-footer .bottom { border-top:1px solid rgba(255,255,255,.12); }
  .site-footer .bottom div { max-width:1000px; margin:0 auto; padding:16px 20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.88rem; color:#a9c4c4; }
  @media (max-width:820px) { .site-footer .cols { grid-template-columns:1fr 1fr; } }
  @media (max-width:480px) { .site-footer .cols { grid-template-columns:1fr; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation:none !important; transition:none !important; }
    .js .reveal { opacity:1; transform:none; }
  }