/* ===========================================================
   korq landing page — "the cream broadsheet"
   Restrained-premium, cork-logo palette.
   Space Grotesk (display) · Inter (body) · JetBrains Mono (labels)
   =========================================================== */

:root {
  /* Grounds */
  --cream: #F6ECD4;        /* hero + closing band, cork glow */
  --cream-light: #FBF6EA;  /* page base: plate + features */
  --paper: #F9F7F4;        /* faux-editor window + document canvas */
  --surface: #F2EFE9;      /* trust strip, footer, editor sidebar, row rules */

  /* Ink */
  --ink: #1A1714;          /* headlines, body (14.9:1 on cream) */
  --muted: #6E655C;        /* meaningful secondary (5.6:1, AA) */
  --faint: #9C9289;        /* decorative metadata only */

  /* Cork tan — warm illustration / editor chrome */
  --cork: #C99A5B;
  --cork-deep: #B5834A;
  --cork-light: #E4CBA0;

  /* Gold / brass — hairline detail ONLY */
  --gold: #C8992E;
  --gold-hi: #D8B24A;

  /* Cobalt — the one action color */
  --cobalt: #274690;
  --cobalt-hover: #1F3A78;
  --cobalt-tint: #3D5A80;

  --white: #FFFFFF;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --wrap: 1080px;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --radius: 10px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

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

.num, .pill, .eyebrow, .folio, .cta__sub, .cta__updater,
.figcap, .dimline__cap, .feature__idx, .close__release,
.search, .tab, .tree, .chip, .outline__label, .node,
.soon, .colophon, .trust__item b { font-variant-numeric: tabular-nums; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cobalt); color: var(--white);
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
  font: 500 .875rem/1 var(--font-body); text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.0625rem; letter-spacing: -0.01em;
  padding: .85rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease), transform .18s var(--ease);
}
.btn--sm { font-size: .9375rem; padding: .5rem 1rem; }
.btn--cobalt { background: var(--cobalt); color: var(--white); }
.btn--cobalt:hover { background: var(--cobalt-hover); }
.btn--cobalt:active { transform: scale(0.985); }
/* ghost state (header, while hero CTA is in view) */
.btn--cobalt.is-ghost {
  background: transparent; color: var(--ink); border-color: var(--muted);
}
.btn--cobalt.is-ghost:hover { background: rgba(39, 70, 144, 0.06); border-color: var(--cobalt); color: var(--cobalt); }

/* focus rings */
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 4px; }
.btn--cobalt:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- text link ---------- */
.link {
  color: var(--cobalt); text-decoration: none;
  border-bottom: 1px solid rgba(39,70,144,.35); padding-bottom: 1px;
  transition: border-color .15s var(--ease);
}
.link:hover { border-color: var(--cobalt); }

/* ---------- shared labels ---------- */
.eyebrow, .folio, .search, .tab, .outline__label {
  font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.pill {
  font-family: var(--font-mono); font-size: .8125rem; color: var(--muted);
  border: 1px solid var(--cork-light); border-radius: 999px;
  padding: .15rem .55rem; line-height: 1.4;
}

/* ============ MASTHEAD ============ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream-light) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow .2s var(--ease);
}
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hi) 50%, var(--gold) 80%, transparent);
  opacity: 0; transition: opacity .25s var(--ease);
}
.masthead.is-scrolled::after { opacity: .8; }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand__mark { width: 32px; height: 32px; border-radius: 7px; }
.brand__word { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ink); }
.masthead__right { display: inline-flex; align-items: center; gap: .75rem; }
@media (max-width: 460px) { .pill { display: none; } }

/* ============ HERO ============ */
.hero { background: var(--cream); padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 9vw, 6.5rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__title {
  font-size: clamp(2.75rem, 2rem + 4.5vw, 4.75rem);
  line-height: 1.04; letter-spacing: -0.025em; color: var(--ink);
  margin: .5rem 0 1.1rem;
}
.eyebrow { margin: 0; }
.hero__sub { font-size: 1.1875rem; color: var(--muted); max-width: 62ch; }

.cta { margin-top: 1.75rem; }
.cta__sub { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); margin-top: .75rem; }
.cta__updater { font-size: .9375rem; color: var(--muted); margin-top: .5rem; }
.cta__links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: 1rem; }
.soon {
  font-family: var(--font-mono); font-size: .8125rem; color: var(--muted);
  border: 1px solid var(--cork-light); border-radius: 999px;
  padding: .2rem .6rem; cursor: default;
}

/* --- the free-floating cork --- */
.hero__figure { display: flex; justify-content: center; }
.cork { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.cork__img {
  position: relative; z-index: 2;
  height: clamp(280px, 34vw, 440px); width: auto;
  filter: drop-shadow(0 22px 30px rgba(80, 55, 20, 0.22));
  animation: cork-float 7s ease-in-out infinite;
  transform-origin: center bottom;
}
.cork__glow {
  position: absolute; z-index: 1; top: 44%; left: 50%;
  width: 128%; height: 128%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--cream-light) 0%, rgba(251,246,234,.55) 45%, transparent 72%);
  pointer-events: none;
}
.cork__shadow {
  position: absolute; z-index: 0; bottom: 8px; left: 50%;
  width: 58%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(80,55,20,.28), transparent 72%);
  filter: blur(3px);
  animation: cork-shadow 7s ease-in-out infinite;
}
@keyframes cork-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cork-shadow { 0%,100% { transform: translateX(-50%) scale(1); opacity:.9; } 50% { transform: translateX(-50%) scale(.94); opacity:.7; } }

/* gold dimension line + fig caption */
.dimline { display: flex; align-items: center; gap: .6rem; width: min(100%, 300px); margin-top: 1.25rem; }
.dimline__seg { flex: 1; height: 1px; background: var(--gold); position: relative; }
.dimline__seg::before, .dimline__seg::after {
  content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--gold);
}
.dimline__seg:first-child::before { left: 0; }
.dimline__seg:first-child::after { display: none; }
.dimline__seg:last-child::after { right: 0; }
.dimline__seg:last-child::before { display: none; }
.dimline__cap { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* ============ SECTION HEADS (muselet rule + folio) ============ */
.band { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.band--light { background: var(--cream-light); }
.section-head { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 2.5rem; }
.rule { display: flex; align-items: center; gap: .5rem; width: 100%; }
.rule__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); opacity: .7; }
.rule__knot { flex: none; color: var(--gold); }
.folio { margin: 0; }

/* ============ FAUX EDITOR PLATE ============ */
.plate { }
.plate__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.editor {
  min-width: 720px;
  background: var(--paper);
  border: 1px solid var(--cork-light); border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(80,55,20,.28), 0 2px 8px rgba(80,55,20,.08);
  overflow: hidden;
}
.editor__bar {
  display: flex; align-items: center; gap: 1rem;
  background: var(--surface); border-bottom: 1px solid var(--cork-light);
  padding: .6rem .9rem;
}
.dots { display: inline-flex; gap: 7px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: var(--cork-light); }
.dots i:nth-child(2) { background: var(--cork); }
.dots i:nth-child(3) { background: var(--cork-deep); }
.tabs { display: inline-flex; gap: 1rem; font-family: var(--font-mono); font-size: .8125rem; }
.tab { color: var(--muted); text-transform: none; letter-spacing: 0; }
.tab--on { color: var(--ink); border-bottom: 2px solid var(--cork-deep); padding-bottom: 2px; }

.editor__body { display: grid; grid-template-columns: 200px 1fr 168px; min-height: 300px; }
.pane { padding: 1rem; }
.pane--tree { background: var(--surface); border-right: 1px solid var(--cork-light); }
.search {
  font-family: var(--font-mono); font-size: .75rem; text-transform: none; letter-spacing: 0;
  color: var(--faint); background: var(--paper); border: 1px solid var(--cork-light);
  border-radius: 6px; padding: .4rem .55rem; margin-bottom: .85rem;
}
.tree { font-family: var(--font-mono); font-size: .8125rem; line-height: 2; }
.tree__folder { color: var(--cork-deep); }
.tree__file { color: var(--muted); padding-left: .85rem; }
.tree__file--on {
  color: var(--ink); background: rgba(61,90,128,.12);
  border-left: 2px solid var(--cobalt-tint); margin-left: -1rem; padding-left: calc(1rem + .85rem - 2px);
  border-radius: 0 4px 4px 0;
}
.pane--doc { background: var(--paper); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.chip {
  font-family: var(--font-mono); font-size: .75rem; color: var(--cork-deep);
  background: rgba(228,203,160,.4); border: 1px solid var(--cork); border-radius: 6px;
  padding: .15rem .5rem;
}
.doc__h { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: .5rem; }
.doc__p { font-size: .9375rem; color: var(--muted); margin-bottom: .35rem; }
.doc__sel { background: rgba(61,90,128,.16); border-radius: 3px; padding: 0 2px; }
.mermaid { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; flex-wrap: wrap; }
.node {
  font-family: var(--font-mono); font-size: .75rem; color: var(--cork-deep);
  border: 1px solid var(--cork); background: rgba(201,154,91,.1);
  border-radius: 6px; padding: .3rem .6rem;
}
.wire { width: 22px; height: 1px; background: var(--cork); flex: none; }
.pane--outline { border-left: 1px solid var(--cork-light); }
.outline__label { margin-bottom: .75rem; }
.outline { font-size: .8125rem; line-height: 1.9; }
.outline__item { color: var(--muted); padding-left: .75rem; border-left: 2px solid transparent; }
.outline__item--on { color: var(--ink); border-left-color: var(--gold); }

.figcap { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-top: 1rem; }

/* ============ FEATURES ============ */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); }
.feature {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: .35rem;
  padding: 1.5rem 0; border-top: 1px solid var(--surface);
}
.feature:first-child, .features > .feature:nth-child(2) { border-top: 0; }
.feature__idx {
  font-family: var(--font-mono); font-size: .8125rem; color: var(--cork-deep);
  grid-row: 1 / span 2; padding-top: .28rem;
}
.feature__h { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; }
.feature__b { grid-column: 2; color: var(--muted); font-size: .9375rem; }

/* ============ TRUST STRIP ============ */
.trust { background: var(--surface); border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(90deg, transparent, var(--gold), transparent) 1; }
.trust__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; padding: 1.4rem 0; text-align: center; }
.trust__item { font-size: .9375rem; color: var(--muted); }
.trust__item b { font-family: var(--font-mono); font-weight: 500; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.trust .dot { color: var(--cork); }

/* ============ CLOSING SPREAD ============ */
.close { position: relative; background: var(--cream); padding: clamp(4rem, 10vw, 7rem) 0; overflow: hidden; }
.close__watermark {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  height: 118%; width: auto; opacity: .07; pointer-events: none; z-index: 0;
}
.close__inner { position: relative; z-index: 1; text-align: center; max-width: 640px; }
.close__title { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); letter-spacing: -0.02em; text-wrap: balance; }
.close__title .nowrap { white-space: nowrap; }
.close__line { color: var(--muted); font-size: 1.0625rem; margin-top: .9rem; }
.close__release { font-family: var(--font-mono); font-size: .8125rem; color: var(--muted); margin-top: .4rem; }
.cta--center { display: flex; flex-direction: column; align-items: center; margin-top: 1.75rem; }
.cta--center .cta__links { justify-content: center; }

/* ============ COLOPHON ============ */
.colophon { background: var(--surface); border-top: 1px solid var(--gold); }
.colophon__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1.5rem 0; font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
}
.colophon__brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); }
.colophon__brand img { border-radius: 4px; }
.colophon__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.colophon .sep { color: var(--cork); }
.colophon .link { border-bottom-color: rgba(39,70,144,.3); }

/* ============ SCROLL REVEAL ============ */
.reveal.reveal--pending { opacity: 0; transform: translateY(12px); }
.reveal.reveal--in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { order: -1; }
  .cork__img { height: clamp(200px, 42vw, 260px); }
  .dimline { margin-inline: auto; }
}
@media (max-width: 680px) {
  .features { grid-template-columns: 1fr; }
  .feature, .features > .feature:nth-child(2) { border-top: 1px solid var(--surface); }
  .feature:first-child { border-top: 0; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero__sub { font-size: 1.0625rem; }
  .cta__links { flex-direction: column; align-items: flex-start; }
  .cta--center .cta__links { align-items: center; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cork__img, .cork__shadow { animation: none; }
  .btn { transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
  .btn--cobalt:active { transform: none; }
  .reveal.reveal--pending { opacity: 1; transform: none; }
  .reveal.reveal--in { transition: none; }
}