/* ============================================================
   ch.steigis — shared styles for the Dinghy / Overprint pages
   ============================================================ */

:root {
  --paper:     #EFF2F7;
  --surface:   #FFFFFF;
  --surface-2: #F4F7FB;
  --ink:       #0C1524;
  --ink-2:     #33415A;
  --muted:     #65748E;
  --rule:      #DBE2EC;
  --rule-soft: #E7ECF3;
  --shadow-sm: 0 1px 2px rgba(12,21,36,.05), 0 8px 20px -14px rgba(12,21,36,.35);
  --shadow-lg: 0 2px 4px rgba(12,21,36,.05), 0 30px 60px -32px rgba(12,21,36,.42);

  /* Dinghy — from the app's own icon */
  --d-1: #4F46E5;
  --d-2: #0EA5E9;
  --d-3: #22D3EE;
  --d-pop: #FBBF24;
  --d-ink: #3B33CC;

  /* Overprint — from the app's own icon */
  --o-1: #0B1B33;
  --o-2: #1552D8;
  --o-3: #2C79FF;
  --o-pop: #5CE6B8;
  --o-ink: #1150B8;

  --max: 1120px;
  --gutter: 22px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #070C16;
    --surface:   #101A2B;
    --surface-2: #162136;
    --ink:       #EAEFF7;
    --ink-2:     #BFCBDC;
    --muted:     #8B9AB4;
    --rule:      #22304A;
    --rule-soft: #1B2842;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -14px rgba(0,0,0,.8);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 30px 60px -32px rgba(0,0,0,.9);
    --d-ink: #9EA4FF;
    --o-ink: #6FB0FF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:     #070C16;
  --surface:   #101A2B;
  --surface-2: #162136;
  --ink:       #EAEFF7;
  --ink-2:     #BFCBDC;
  --muted:     #8B9AB4;
  --rule:      #22304A;
  --rule-soft: #1B2842;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -14px rgba(0,0,0,.8);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 30px 60px -32px rgba(0,0,0,.9);
  --d-ink: #9EA4FF;
  --o-ink: #6FB0FF;
  color-scheme: dark;
}

/* per-page accent worlds */
.t-dinghy {
  --accent:     var(--d-2);
  --accent-ink: var(--d-ink);
  --pop:        var(--d-pop);
  --grad: linear-gradient(122deg, #4F46E5 0%, #0EA5E9 56%, #22D3EE 100%);
}
.t-overprint {
  --accent:     var(--o-3);
  --accent-ink: var(--o-ink);
  --pop:        var(--o-pop);
  --grad: linear-gradient(122deg, #102A4E 0%, #1552D8 68%, #2C79FF 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Bricolage Grotesque", Manrope, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--accent-ink, var(--d-ink)); text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------- top bar ---------------- */

.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  flex-wrap: wrap;
  padding-block: 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--d-2), var(--o-2));
}
.nav { display: flex; gap: 6px; align-items: center; }
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 100px;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 13px 24px;
  border-radius: 100px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-light { background: #fff; color: #0C1524; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.btn-outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); }

/* ---------------- hero (app pages) ---------------- */

.hero {
  background: var(--grad);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -60% 40%;
  height: 420px;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  pointer-events: none;
}
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(52px, 8vw, 96px);
}
.hero-mark { width: 82px; height: 82px; border-radius: 19px; display: block; margin-bottom: 26px; }
img.hero-mark, img.mark { box-shadow: 0 0 0 1px rgba(255,255,255,.22); object-fit: cover; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.3rem); }
.hero .tagline {
  margin-top: 20px;
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: rgba(255,255,255,.9);
  max-width: 44ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note {
  margin-top: 20px;
  font-size: 0.86rem;
  color: rgba(255,255,255,.72);
}
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- sections ---------------- */

.section { padding-block: clamp(56px, 8vw, 96px); }
.section-head { max-width: 58ch; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-top: 14px; }
.section-head p { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; }

/* alternating feature rows */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
  padding-block: clamp(34px, 5vw, 54px);
  border-top: 1px solid var(--rule);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.feature p { margin-top: 15px; color: var(--ink-2); max-width: 46ch; }
.feature .kicker {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.feature-visual { min-width: 0; }
.feature--flip .feature-visual { order: -1; }
@media (max-width: 800px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature-visual { order: 0; }
}

/* ---------------- small point cards ---------------- */

.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.point { background: var(--surface); padding: 26px 24px; }
.point h4 { font-size: 1.08rem; letter-spacing: -0.02em; }
.point p { margin-top: 9px; font-size: 0.95rem; color: var(--muted); line-height: 1.55; }
.point .ico { display: block; margin-bottom: 16px; color: var(--accent-ink); }

/* ---------------- mock UI visuals ---------------- */

.mock {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.mock-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }

.filelist { padding: 6px 0; }
.file {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 11px 18px;
}
.file + .file { border-top: 1px solid var(--rule-soft); }
.file .name { font-size: 0.92rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .meta { font-size: 0.76rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.file .ico { color: var(--muted); display: block; }
.file.is-local .ico { color: var(--accent); }
.file.is-local .meta { color: var(--accent-ink); }

/* calendar mock */
.cal { padding: 16px 18px 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid span {
  aspect-ratio: 1;
  border-radius: 7px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  position: relative;
}
.cal-grid span.has::after {
  content: "";
  position: absolute;
  bottom: 5px; left: 50%;
  translate: -50% 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--d);
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.cal-legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }

/* stat row */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-soft);
}
.stat { padding: 16px 18px; }
.stat + .stat { border-left: 1px solid var(--rule-soft); }
.stat b { display: block; font-size: 1.22rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------------- closing CTA ---------------- */

.cta {
  background: var(--grad);
  color: #fff;
  border-radius: 24px;
  padding: clamp(36px, 6vw, 62px);
  display: grid;
  gap: 26px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}
.cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.cta p { margin-top: 14px; color: rgba(255,255,255,.88); max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) { .cta { grid-template-columns: minmax(0, 1fr); } }

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

.foot {
  border-top: 1px solid var(--rule);
  margin-top: clamp(48px, 7vw, 80px);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: space-between;
  align-items: center;
  padding-block: 34px 48px;
  font-size: 0.85rem;
  color: var(--muted);
}
.foot a { color: var(--muted); }
.foot nav { display: flex; gap: 20px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:hover { transform: none; }
}