/* VEGA Works — site styles
   Readability first. Headings are set in the same sans-serif as the body, text
   colours clear WCAG AA, line length is capped for Japanese as well as English,
   and vertical space is spent on separating ideas rather than on atmosphere.
   The one serif left is the wordmark, which is a logo, not something to read.
   No external requests: system font stacks only. */

:root {
  color-scheme: light dark;

  /* Brand */
  --ink:        #141a2e;   /* body text            — 14.6:1 on --canvas */
  --ink-2:      #333d55;   /* secondary text       —  9.4:1 */
  --ink-3:      #545e75;   /* captions, meta       —  5.6:1 */
  --gold:       #8f6415;
  --gold-soft:  #e8d9bb;

  --canvas:     #eef0f5;
  --canvas-2:   #e6e9f0;
  --surface:    #ffffff;
  --surface-2:  #f6f7fa;
  --line:       rgba(20, 26, 46, .22);
  --line-soft:  rgba(20, 26, 46, .11);
  --shadow:     0 1px 2px rgba(20, 26, 46, .06), 0 10px 26px -18px rgba(20, 26, 46, .3);

  /* Default accent = brand gold; products override below */
  --accent:      #8f6415;
  --accent-ink:  #6b4a0f;
  --accent-soft: #f4ecdd;

  --measure:    40rem;
  --page:       1080px;
  --radius:     12px;
  --radius-lg:  16px;

  --font-body:    system-ui, -apple-system, "Hiragino Sans",
                  "Yu Gothic", YuGothic, "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-serif, "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
                  "Times New Roman", Times, serif;
}

[data-product="schedule"] {
  --accent:      #3b4bb8;
  --accent-ink:  #2e3a91;
  --accent-soft: #e8ebfa;
}

[data-product="wine"] {
  --accent:      #8a2846;
  --accent-ink:  #6d1f37;
  --accent-soft: #f7eef1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f0f2f8;
    --ink-2:      #c3cbdc;
    --ink-3:      #a0a9bd;
    --gold:       #e2b46a;
    --gold-soft:  #4a3a1c;

    --canvas:     #12151f;
    --canvas-2:   #0c0f18;
    --surface:    #1b1f2c;
    --surface-2:  #222736;
    --line:       rgba(240, 242, 248, .26);
    --line-soft:  rgba(240, 242, 248, .13);
    --shadow:     0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -20px rgba(0, 0, 0, .85);

    --accent:      #e2b46a;
    --accent-ink:  #f2d9a8;
    --accent-soft: #2e2614;
  }
  [data-product="schedule"] {
    --accent:      #9fb0ff;
    --accent-ink:  #c3ccff;
    --accent-soft: #1e2450;
  }
  [data-product="wine"] {
    --accent:      #dd8a98;
    --accent-ink:  #eeb3bc;
    --accent-soft: #33191f;
  }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

img, svg, video { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--ink);
  padding: .7rem 1.1rem; border-radius: 8px; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- layout ---------- */

.wrap { width: min(100% - 2.6rem, var(--page)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.6rem, 46rem); margin-inline: auto; }

section { padding-block: clamp(2.5rem, 5vw, 3.8rem); }
section + section { border-top: 1px solid var(--line-soft); }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  margin: 0 0 .6em;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: clamp(1.7rem, 3.8vw, 2.35rem); line-height: 1.4; }
h2 { font-size: clamp(1.32rem, 2.5vw, 1.7rem); }
h3 { font-size: clamp(1.08rem, 1.8vw, 1.18rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }

.lede {
  font-size: clamp(1.08rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  color: var(--ink);
  max-width: var(--measure);
}

.eyebrow {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 .7rem;
}

.rule { width: 44px; height: 3px; border: 0; margin: 0 0 1.3rem; background: var(--gold); }

.muted { color: var(--ink-2); }
.small { font-size: .95rem; line-height: 1.75; }

.mt-2 { margin-top: 1.7rem; }
.mt-3 { margin-top: 2rem; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--canvas);
  border-bottom: 1px solid var(--line-soft);
}

.site-header .bar {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 62px; padding-block: .5rem;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }

/* The logo is the app mark itself, used as drawn. Its plate is exported in the
   page background colour (tools/make_logo.py), so it needs no rounding here and
   must only ever sit on --canvas, never on a card.

   It is a background image rather than an <img> on purpose: a <picture> element
   picks its source once at parse time, so switching the system theme with the
   page open leaves the wrong plate behind — and a mismatched plate is the one
   thing this export makes visible. CSS re-evaluates immediately, and only the
   matching file is ever fetched. */
.brand-mark, .hero-mark {
  display: block; flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: image-set(url("/assets/img/logo-light.png") 1x,
                              url("/assets/img/logo-light@2x.png") 2x);
}

@media (prefers-color-scheme: dark) {
  .brand-mark, .hero-mark {
    background-image: image-set(url("/assets/img/logo-dark.png") 1x,
                                url("/assets/img/logo-dark@2x.png") 2x);
  }
}

.brand-mark { width: 30px; height: 30px; }

.nav { display: flex; align-items: center; gap: 1.4rem; margin-inline-start: auto; flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); text-decoration: none;
  font-size: .97rem; font-weight: 500;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--line); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); font-weight: 600; }

.lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  font-size: .82rem; font-weight: 600;
  flex: none;
}
.lang a { padding: .3rem .7rem; text-decoration: none; color: var(--ink-2); }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: var(--canvas); }

/* On a phone the nav wraps under the wordmark. Sticky would then eat a third of
   the viewport, so the header scrolls away instead and the links sit on one row. */
@media (max-width: 720px) {
  .site-header { position: static; }
  .site-header .bar { min-height: 0; padding-block: .8rem; column-gap: .8rem; row-gap: .7rem; }
  .nav {
    width: 100%; margin-inline-start: 0;
    justify-content: space-between; gap: .7rem;
    font-size: .9rem; flex-wrap: nowrap;
  }
  .nav a { white-space: nowrap; font-size: .9rem; }
  .lang { font-size: .78rem; }
  .lang a { padding: .28rem .55rem; }
}

@media (max-width: 480px) {
  .wrap, .wrap--narrow { width: min(100% - 2rem, var(--page)); }
  .site-header .bar { column-gap: .5rem; }
  .nav, .nav a { font-size: .85rem; }
  .nav { gap: .5rem; }
  .lang { font-size: .76rem; }
  .lang a { padding: .26rem .48rem; }
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(2.2rem, 4.5vw, 3.6rem) clamp(2rem, 4vw, 3rem); }

.hero-mark { width: 96px; height: 96px; margin: 0 0 1.1rem -6px; }

.hero-brand {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 1.1rem;
  color: var(--ink);
}

.hero-tagline {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  color: var(--ink-2);
  margin: 0;
  max-width: var(--measure);
}

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.35rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: .98rem; font-weight: 600;
  text-decoration: none;
}

.btn--primary { background: var(--ink); color: var(--canvas); }
.btn--primary:hover { background: var(--accent-ink); color: var(--canvas); }

.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- cards ---------- */

.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.card p { max-width: none; }
.card p:last-child { margin-bottom: 0; }

.product-card {
  display: flex; flex-direction: column; gap: .8rem;
  text-decoration: none; color: inherit;
}
.product-card:hover { border-color: var(--ink-3); color: inherit; }
.product-card .icon { width: 60px; height: 60px; border-radius: 14px; border: 1px solid var(--line-soft); }
.product-card h2, .product-card h3 { margin: 0; }
.product-card .catch { font-weight: 600; color: var(--ink); margin: 0; max-width: none; }
.product-card .more { color: var(--accent-ink); font-weight: 600; margin-top: auto; text-decoration: underline; text-underline-offset: 3px; }

.status {
  display: inline-block;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-ink); background: var(--accent-soft);
  border-radius: 999px; padding: .2rem .7rem;
  align-self: flex-start;
}

/* ---------- feature list ---------- */

.features { display: grid; gap: 1.8rem 2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature h3 { margin-bottom: .35rem; }
.feature p { margin-bottom: 0; color: var(--ink-2); max-width: none; }
.feature .num {
  font-size: .85rem; font-weight: 700; color: var(--accent-ink);
  letter-spacing: .06em; display: block; margin-bottom: .4rem;
}

/* ---------- screenshots ---------- */

.shots {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: 1.8rem;
}
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
}
.shot figcaption { margin-top: .7rem; font-size: .95rem; line-height: 1.65; color: var(--ink-2); }

.shot--crop img { aspect-ratio: 9 / 15; object-fit: cover; object-position: center bottom; }

/* ---------- pricing ---------- */

.prices { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1.6rem; }
.price {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 1.2rem 1.3rem;
}
.price--lead { border-color: var(--accent); border-width: 2px; }
.price p { max-width: none; }
.price .kind { font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.price .amount { font-size: 1.22rem; font-weight: 700; margin: .3rem 0 .35rem; display: block; color: var(--ink); }
.price .note { font-size: .95rem; color: var(--ink-2); margin: 0; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line-soft); margin-top: 1.7rem; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 2.2rem 1.05rem .2rem; position: relative;
  font-weight: 600; font-size: 1.02rem; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-ink); }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: .6rem; top: 1.6rem;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.9rem; }
.faq details p { padding-inline-start: .2rem; }
.faq details p:last-child { margin-bottom: 1.1rem; }

/* ---------- prose (legal pages) ---------- */

.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.2rem; font-size: clamp(1.22rem, 2.2vw, 1.45rem); }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; margin: 0 0 1.1em; max-width: var(--measure); }
.prose li { margin-bottom: .45em; }
.prose a { color: var(--accent-ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.3em; font-size: .97rem; }
.prose th, .prose td { text-align: start; padding: .65rem .75rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prose th { font-weight: 700; color: var(--ink); }
.prose .updated { font-size: .95rem; color: var(--ink-2); }

.callout {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-inline-start: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem; margin: 0 0 1.4em; max-width: var(--measure);
}
.callout p:last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; }

/* ---------- contact ---------- */

.contact-list { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .7rem; }
.contact-list li { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.contact-list .label {
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-2); min-width: 5.5rem;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 2.4rem 2.8rem;
  font-size: .97rem;
  color: var(--ink-2);
}
.site-footer .cols { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.site-footer h2 {
  font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 .7rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .base {
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--line-soft);
  display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap;
  align-items: center;
}
.site-footer .base p { margin: 0; max-width: none; }

/* Lyra, with Vega circled — the VEGA Works sub-logo. It signs the page off. */
.sign-off { display: inline-flex; align-items: center; gap: .7rem; }
.sub-logo { display: block; flex: none; color: var(--ink-2); }

/* ---------- print ---------- */

@media print {
  .site-header, .site-footer, .actions { display: none; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
}