/* ============================================================
   Kedge — cool glass over a harbour at half past eight.
   One photograph runs behind every page. Bands are thin glass,
   feathered at both ends; every word sits on a surface of its
   own (card, sheet, tile, chip), never on the bare photograph.

   The furniture is the family's — a floating nav pill, a
   two-column hero, centred section heads, big radii, light glass
   and no borders. The colours, the type, the mark and the
   photograph are Kedge's own, and so is the one drawing that
   only this site has: a move, laid out as the chain runs it.

   Measured against usevynex.org in the same browser run by
   tools/shots.mjs (painted pixels: flat%, chroma, busy) and by
   tools/contrast.mjs (every text node, with a control that must
   fail).
   ============================================================ */
:root {
  /* Inks solved against the THINNEST glass they sit on (0.46-0.60 over the
     lifted photograph), not against white. */
  --ink: #10202a;
  --ink-2: #2f4756;
  --ink-3: #385061;
  --line: rgba(16, 32, 42, .11);
  --line-2: rgba(16, 32, 42, .06);

  --hull: #16303f;          /* the dark: buttons, the wordmark */
  --hull-2: #21465b;
  --tide: #14666a;          /* the green water under the hulls: the accent */
  --tide-ink: #0e5054;      /* the same colour where 12 px type has to clear AA */
  --tide-2: #2c8b8f;
  --rust: #b0431d;          /* the red boat in the middle of the frame */
  --rust-ink: #8c3414;      /* the same colour where it has to carry text */
  --wash: rgba(22, 48, 63, .075);
  --wash-2: rgba(22, 48, 63, .12);
  --up: #1c6a4a;
  --down: #9a3118;

  --surface: rgba(255, 252, 245, .62);
  --surface-2: rgba(255, 253, 247, .78);
  --surface-3: rgba(255, 254, 250, .92);
  /* The section-head wash carries a 12 px eyebrow and a 54 px italic over the
     brightest part of the photograph. */
  --head: rgba(255, 252, 245, .58);
  /* Kept light: at 18-22 px the blur erases the photograph under every card and
     the page measures busy ~0 where the reference reads 4-7. */
  --blur: saturate(200%) blur(10px);
  --blur-lite: saturate(185%) blur(8px);

  --shadow-sm: 0 1px 2px rgba(16, 32, 42, .05), 0 4px 14px rgba(16, 32, 42, .06);
  --shadow: 0 16px 44px rgba(16, 32, 42, .14);
  --shadow-lg: 0 30px 80px rgba(16, 32, 42, .20);

  --r: 26px;
  --r-sm: 18px;
  --r-xs: 12px;
  --maxw: 1200px;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: #a9bbc4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-tight { max-width: 920px; }
.mono, code { font-family: var(--mono); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-3); }
.gold { color: var(--rust-ink); }
.small { font-size: 13.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: rgba(176, 67, 29, .34); }
:focus-visible { outline: 2px solid var(--tide); outline-offset: 2px; }

/* ---------- the photograph ---------- */
.ground {
  position: fixed; inset: -40px; z-index: -3;
  background: #9db3bf url("../img/ground.jpg") 50% 56% / cover no-repeat;
}
.scrim {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(246, 251, 255, .16), transparent 70%),
    linear-gradient(180deg, rgba(246, 251, 255, .05) 0%, rgba(246, 251, 255, .10) 60%, rgba(246, 251, 255, .17) 100%);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--hull); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--hull-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 48, 63, .30); }
.btn-gold { background: var(--rust); color: #fff; }
.btn-gold:hover:not(:disabled) { background: #c35630; transform: translateY(-1px); }
.btn-glass { background: rgba(255, 253, 247, .84); color: var(--ink); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-glass:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
/* A quiet button is still a SURFACE. As a wash it was transparent enough that
   its label sat on the photograph and measured 4.3:1 on the two pages where one
   appears outside a panel. */
.btn-quiet { background: rgba(255, 253, 247, .72); color: var(--ink); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.btn-quiet:hover:not(:disabled) { background: rgba(255, 254, 250, .92); }
.btn .arrow {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); font-size: 13px; line-height: 1; margin-right: -8px;
}
.btn-glass .arrow, .btn-quiet .arrow { background: var(--wash); }

/* ---------- chips / eyebrows ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(255, 253, 247, .84); color: var(--ink-2);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
}
.chip b { color: var(--ink); font-weight: 600; }
.chip-quiet { background: var(--wash); }
.chip-ok { background: rgba(28, 106, 74, .14); color: #17573c; }
.chip-warn { background: rgba(154, 49, 24, .13); color: #83280f; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #1f9d6b; box-shadow: 0 0 0 0 rgba(31, 157, 107, .5); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 107, .45); } 70% { box-shadow: 0 0 0 9px rgba(31, 157, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 157, 107, 0); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tide-ink);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--rust); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.nav-inner {
  position: relative; display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 10px 0 14px;
  border-radius: 999px; background: rgba(251, 253, 255, .78);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 2px 12px rgba(16, 32, 42, .08);
  transition: background .25s, box-shadow .25s;
}
.nav.scrolled .nav-inner { background: rgba(251, 253, 255, .93); box-shadow: 0 10px 30px rgba(16, 32, 42, .14); }
.brand { display: flex; align-items: center; gap: 9px; flex: none; }
.brand [data-mark] { display: block; width: 30px; height: 30px; }
.brand [data-mark] svg { display: block; width: 100%; height: 100%; border-radius: 9px; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 26px; letter-spacing: -.012em; line-height: 1; color: var(--ink); }
.nav-links { display: flex; gap: 2px; margin-left: 4px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; transition: background .15s, color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--wash); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--wash); cursor: pointer; place-items: center; }
.net-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 7px 12px; border-radius: 999px; background: var(--wash); font-variant-numeric: tabular-nums; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--wash); color: var(--ink-2); flex: none; transition: background .15s, color .15s, transform .15s; }
.icon-btn:hover { background: var(--wash-2); color: var(--ink); transform: translateY(-1px); }
.icon-btn svg { display: block; }
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; flex: none; }
  .nav-inner { gap: 10px; padding-right: 8px; }
  .nav-right .hide-sm { display: none; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 72px;
    padding: 12px; border-radius: 22px; background: rgba(251, 253, 255, .97); box-shadow: var(--shadow);
  }
  .nav.open .nav-links a { padding: 12px 14px; font-size: 16px; }
}
@media (max-width: 520px) {
  .nav .wrap { padding: 0 12px; }
  .nav-inner { height: 58px; padding-left: 12px; }
  .brand-name { font-size: 23px; }
  .nav-right .btn { padding: 9px 14px; font-size: 14px; }
  .nav-right .btn .arrow { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 26px 0 30px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 18px; align-items: stretch; }
.hero-card {
  position: relative; padding: 46px 46px 38px; border-radius: 40px;
  background: rgba(255, 251, 244, .56);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(16, 32, 42, .18);
  display: flex; flex-direction: column;
}
.wordmark {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--serif); font-weight: 600; font-size: clamp(62px, 8.6vw, 112px);
  line-height: .92; letter-spacing: -.035em; margin: 22px 0 12px; color: var(--ink);
}
.wordmark [data-mark] { width: .66em; height: .66em; flex: none; }
.wordmark [data-mark] svg { width: 100%; height: 100%; display: block; border-radius: .17em; }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(27px, 3.1vw, 38px); line-height: 1.1; letter-spacing: -.014em; color: var(--hull);
}
.hero h1 em { font-style: italic; color: var(--tide); }
.hero .lede { max-width: 570px; margin-top: 14px; font-size: 17.5px; color: var(--ink-2); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 30px; }
.stat { padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); }
.stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.1; margin-top: 4px; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.skel { display: inline-block; min-width: 3.2em; height: .9em; border-radius: 6px; background: linear-gradient(90deg, rgba(16, 32, 42,.08), rgba(16, 32, 42,.16), rgba(16, 32, 42,.08)); background-size: 200% 100%; animation: sk 1.3s infinite linear; vertical-align: -.05em; }
@keyframes sk { to { background-position: -200% 0; } }

/* the live placement beside the hero */
.place-card {
  padding: 26px 26px 22px; border-radius: 40px; display: flex; flex-direction: column; gap: 15px;
  background: rgba(252, 254, 255, .68);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(16, 32, 42, .18);
}
.place-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.place-top h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.06; letter-spacing: -.016em; }
.place-top .sub { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; }
.place-top .big { font-family: var(--serif); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.place-top .big small { display: block; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.place-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--wash); font-size: 13.5px; color: var(--ink-2); }
.place-foot b { color: var(--ink); }

/* a row of legs: one tile each */
.legs { list-style: none; display: grid; gap: 5px; }
.legs li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px 7px 8px; border-radius: 14px; background: rgba(253, 254, 255, .62); }
.legs .t { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.legs .n { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legs .r { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; line-height: 1.2; }
.legs .r small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }

/* the split, as one bar */
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--wash); }
.bar i { display: block; min-width: 3px; }

/* ticker badges */
.tk {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: #fff; line-height: 1;
}
.tk.lg { width: 40px; height: 40px; border-radius: 13px; font-size: 11.5px; }
.tk.sm { width: 28px; height: 28px; border-radius: 9px; font-size: 9.5px; }

/* ---------- sections ---------- */
.section { padding: 68px 0; }
/* Thin glass bands, feathered at both ends so they read as light on the photograph. */
.band { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .07) 120px, rgba(255, 255, 255, .07) calc(100% - 120px), rgba(255, 255, 255, 0) 100%); }
.band-2 { background: linear-gradient(180deg, rgba(255, 252, 244, 0) 0, rgba(255, 252, 244, .16) 120px, rgba(255, 252, 244, .16) calc(100% - 120px), rgba(255, 252, 244, 0) 100%); }
.section-head {
  max-width: 800px; margin: 0 auto 34px; text-align: center;
  padding: 26px 34px 28px; border-radius: 34px; background: var(--head);
}
.section-head h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04; letter-spacing: -.024em; margin-top: 12px;
}
.section-head h2 em { font-style: italic; font-weight: 500; color: var(--tide); }
.section-head p { margin-top: 12px; font-size: 17px; color: var(--ink-2); }

.card { background: var(--surface); border-radius: var(--r); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.card-2 { background: var(--surface-2); }
.card-pad { padding: 28px; }
.sheet { background: var(--surface-2); border-radius: 34px; padding: 40px 44px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); }
.sheet h2, .sheet h3 { font-family: var(--serif); letter-spacing: -.018em; line-height: 1.08; }
.sheet h2 { font-weight: 600; font-size: clamp(26px, 3vw, 34px); margin-top: 30px; }
.sheet h2:first-of-type { margin-top: 0; }
.sheet h3 { font-weight: 500; font-size: 22px; }
.sheet p { margin-top: 12px; color: var(--ink-2); }
.sheet ul, .sheet ol { margin-top: 12px; padding-left: 20px; color: var(--ink-2); }
.sheet li { margin-top: 8px; }
/* A link inside a sheet is often 13 px of monospace address over the
   photograph's brightest band; --tide leaves it at 4.49:1 there. */
.sheet a { color: var(--tide-ink); text-decoration: underline; text-underline-offset: 2px; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.sep { height: 1px; background: var(--line-2); margin: 22px 0; }

/* steps */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card { padding: 28px; display: flex; flex-direction: column; }
.step-card .n { font-family: var(--serif); font-weight: 600; font-size: 54px; line-height: .9; color: var(--tide); letter-spacing: -.03em; }
.step-card h3 { font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.06; margin-top: 14px; letter-spacing: -.016em; }
.step-card p { margin-top: 10px; color: var(--ink-2); }
.step-card .what { margin-top: auto; padding-top: 18px; }
.step-card .what span { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; background: var(--wash); }
@media (max-width: 980px) { .trio { grid-template-columns: 1fr; } }

/* a tile grid — the risk notes, the contracts, the record */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { padding: 22px; border-radius: 22px; background: var(--surface); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.tile h4 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.12; letter-spacing: -.012em; }
.tile p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.tile a { color: var(--tide); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tiles { grid-template-columns: 1fr; } .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* the curve figure */
.figure { padding: 22px 22px 16px; }
.figure figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  text-align: left; font-size: 11.5px; letter-spacing: .07em; font-weight: 700;
  text-transform: uppercase; color: var(--ink-3);
  padding: 12px 14px; white-space: nowrap;
}
td { padding: 12px 14px; border-top: 1px solid var(--line-2); vertical-align: middle; }
tbody tr:first-child td { border-top: 1px solid var(--line); }
td.r, th.r { text-align: right; }
.t-name { display: flex; align-items: center; gap: 10px; }
.t-name .who { min-width: 0; }
.t-name .t { font-weight: 700; line-height: 1.2; }
.t-name .n { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a utilization meter */
.meter { position: relative; height: 7px; width: 64px; border-radius: 999px; background: var(--wash-2); overflow: hidden; display: inline-block; vertical-align: middle; }
.meter i { position: absolute; inset: 0 auto 0 0; background: var(--rust); border-radius: 999px; }
.meter i.hot { background: var(--down); }
.meter i.cool { background: var(--tide-2); }

/* ---------- forms ---------- */
/* A form label is 11.5 px of uppercase over glass; --ink-3 leaves it at
   4.2:1 on the panel with the photograph's bright band behind it. It gets the
   middle ink instead, which is what a control's own name deserves anyway. */
label, .lab { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
input, select, textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink); width: 100%;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 16px; padding: 13px 15px;
}
input.big { font-family: var(--mono); font-size: 26px; padding: 16px 18px; border-radius: 20px; }
input:focus, select:focus { outline: 2px solid var(--tide); outline-offset: 1px; }
/* The tab pill is a surface, not a wash: on the app page it floats on the bare
   photograph, and at .075 its inactive labels measured 1.49:1. */
.seg { display: inline-flex; background: rgba(255, 253, 247, .80); border-radius: 999px; padding: 4px; gap: 3px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-sm); }
.seg button { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; transition: background .15s, color .15s; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--hull); color: #fff; }
.seg-lg button { padding: 10px 22px; font-size: 15px; }

/* A pickable collateral. Ticked is the LIGHT state, not the dark one: the
   default is everything ticked, and a wall of fifteen solid dark pills is the
   heaviest thing that could sit under a heading. Ticked reads as raised paper
   with a rust dot; unticked sinks into the wash. */
.pick {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  background: var(--wash); border-radius: 999px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.pick::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(16, 32, 42, .22); flex: none; }
.pick:hover { color: var(--ink); transform: translateY(-1px); }
.pick.on { background: var(--surface-3); color: var(--ink); box-shadow: var(--shadow-sm); }
.pick.on::before { background: var(--rust); }
.pick .r { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pick.on .r { color: var(--rust-ink); }
.pick input { display: none; }

/* ---------- notices ---------- */
.note { border-radius: 18px; padding: 14px 16px; font-size: 14px; background: rgba(176, 67, 29, .18); color: #5c3d04; }
.note-bad { background: rgba(151, 48, 28, .12); color: #83280f; }
.note-ok { background: rgba(31, 107, 58, .12); color: #17573c; }

/* ---------- footer ---------- */
.foot { padding: 40px 0 56px; }
.foot-in { border-radius: 34px; padding: 32px 34px; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
/* The line under the footer card sat on the bare photograph and measured
   1.37:1. Every word on this site sits on a surface of its own; this one had
   been forgotten because it is outside the card. */
.foot-fine {
  margin: 14px auto 0; max-width: max-content; padding: 8px 18px; border-radius: 999px;
  background: var(--surface-2); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  font-size: 13px; color: var(--ink-2); text-align: center;
}

/* ---------- reveal ---------- */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rise.in { opacity: 1; transform: none; }

/* ---------- app ---------- */
.app-tabs { margin: 4px 0 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel { border-radius: 34px; padding: 30px 30px 26px; background: rgba(255, 252, 245, .62); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 30px 80px rgba(16, 32, 42, .14); }
.panel h2 { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.05; letter-spacing: -.022em; }
.panel .sub { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) {
  .app-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { padding: 34px 24px 26px; border-radius: 32px; }
  .place-card { border-radius: 32px; }
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:last-child { grid-column: span 2; }
  .panel { padding: 22px 18px 20px; border-radius: 26px; }
  .sheet { padding: 26px 20px; border-radius: 26px; }
  .section { padding: 46px 0; }
  .section-head { padding: 22px 20px 24px; border-radius: 26px; }
  .foot-in { padding: 24px 20px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ---------- Kedge's own furniture ---------- */

/* The berths: where the position is now, where it lands, and the line hauled
   between them. Drawn once on the landing page and again at the top of the
   Move tab, with live numbers in both. */
.berths { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 22px 0 18px; }
.berth {
  padding: 16px 18px; border-radius: 20px; background: var(--surface-2); min-width: 0;
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
}
.berth .k { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.berth .v { font-family: var(--serif); font-size: 28px; line-height: 1.08; letter-spacing: -.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.berth .v em { font-style: normal; color: var(--tide-ink); }
.berth .s { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.berth-to { background: var(--surface-3); }
.haul { width: 96px; color: var(--rust); text-align: center; flex: none; }
.haul svg { width: 96px; height: 46px; display: block; }
.haul-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rust-ink); margin-top: -4px; white-space: nowrap;
}

/* The bundle, written out in order. The number is a berth marker, not a step
   in a tutorial: they all happen in the same transaction. */
/* Six cards rather than one sheet. Six calls in one transaction is the
   product, and a single cream block that tall also covered the photograph
   entirely: the frame measured 34% flat and 0.013 chroma where the reference
   runs 1-16% and 0.028-0.040. Letting the ground through between the cards
   fixed the picture and the numbers at the same time. */
.runsheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: run; }
/* The counter is reset on the GRID, not on the list: `display: contents`
   takes the <ol> out of the box tree, and with the reset on it every card
   printed "1". */
ol.run { list-style: none; padding-left: 0; margin: 0; display: contents; }
ol.run li {
  position: relative; padding: 22px 24px 22px 24px; color: var(--ink-2); font-size: 15px;
  background: var(--surface-2); border-radius: 24px;
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: var(--shadow-sm);
}
ol.run li::before {
  counter-increment: run; content: counter(run);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px;
  background: var(--wash-2); color: var(--ink); margin-bottom: 12px;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
}
ol.run li b { color: var(--ink); }
ol.run li i { font-style: italic; }
.run-note {
  grid-column: 1 / -1; margin-top: 4px; padding: 20px 24px; border-radius: 24px;
  background: var(--surface-2); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
  box-shadow: var(--shadow-sm);
}
.run-note p { margin: 0; font-size: 14.5px; }

/* The claim list: each line is something a tool asserted, with the tool named. */
ul.checks { list-style: none; padding-left: 0; margin: 0; }
ul.checks li { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
ul.checks li:first-child { border-top: 0; padding-top: 0; }
ul.checks .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(28, 106, 74, .16); color: #17573c; font-size: 12px; font-weight: 700; margin-top: 1px; }
ul.checks .tick.no { background: rgba(154, 49, 24, .14); color: #83280f; }
ul.checks b { color: var(--ink); }
ul.checks code { color: var(--ink); }

/* The six calls, as a strip: the hero card is tall and the transaction it
   describes is the thing worth putting in the space. */
.inside { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.inside span {
  font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 6px 11px; border-radius: 999px;
  background: var(--wash); font-variant-numeric: tabular-nums;
}

/* A step card is a surface in its own right on the landing page. */
.panel-lite { background: var(--surface); border-radius: 28px; backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); box-shadow: var(--shadow-sm); }
.wordmark.small-mark { font-size: 30px; }

/* A row on the board that cannot take the position: kept, greyed, with the
   reason in place of the numbers. */
tr.no td { color: var(--ink-3); }
tr.no .why { font-size: 13px; }
td .sub { font-size: 12.5px; color: var(--ink-3); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--wash-2); color: var(--ink-2); }
.tag-est { background: rgba(176, 67, 29, .20); color: #7a2c0f; }

@media (max-width: 900px) {
  .berths { grid-template-columns: 1fr; }
  .haul { width: 100%; }
  .haul svg { width: 100%; height: 38px; transform: rotate(90deg) scale(.6); }
  .runsheet { grid-template-columns: 1fr; }
}