/* kabootar — palette taken from a rock pigeon: slate body, iridescent petrol
   neck, coral feet. The recurring "band" is a leg ring, which is what a
   pairing code is too. */

:root {
  --ground: #E7E9ED;
  --paper:  #F6F7F9;
  --ink:    #2E3648;
  --ink-2:  #5C667C;
  --petrol: #0E6B63;
  --petrol-deep: #0A4E48;
  --coral:  #C8483F;
  --rule:   #CFD4DC;
  --band:   rgba(14, 107, 99, .09);
  --shadow: 0 1px 2px rgba(46, 54, 72, .05), 0 8px 24px -12px rgba(46, 54, 72, .18);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 66ch;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1F2433;
    --paper:  #272D3E;
    --ink:    #E4E7EE;
    --ink-2:  #97A0B4;
    --petrol: #58C9B9;
    --petrol-deep: #2F8F84;
    --coral:  #F08A80;
    --rule:   #394054;
    --band:   rgba(88, 201, 185, .13);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 78ch;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.15rem, 5vw, 2rem) 5rem;
}

/* ---------- masthead ---------- */

.mark {
  width: 4.4rem;
  height: 4.4rem;
  display: block;
  margin: 0 0 1.4rem -.35rem;   /* optical: the tail overhangs right */
}
.mark .m-lite { fill: var(--petrol); }
.mark .m-dark { fill: var(--petrol-deep); }
.mark .m-beak { fill: var(--coral); }
.mark .m-eye  { fill: var(--paper); }

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1.1rem;
}

h1 {
  font-family: var(--display);
  font-size: clamp(2.9rem, 9vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .95;
  margin: 0;
}

h1 .dot { color: var(--coral); }

.lede {
  font-size: clamp(1.08rem, 2.6vw, 1.3rem);
  color: var(--ink-2);
  max-width: 44ch;
  margin: 1.1rem 0 0;
  text-wrap: balance;
}

.gloss {
  font-size: .92rem;
  color: var(--ink-2);
  margin: .7rem 0 0;
}
.gloss em { font-style: normal; color: var(--ink); }

/* ---------- hero: messages landing ---------- */

.wire {
  margin: var(--gap) 0 0;
  padding: 1.5rem clamp(1rem, 3vw, 1.6rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-size: .87rem;
  line-height: 1.5;
}

.turn {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .9rem;
  padding: .5rem 0;
  animation: land .5s cubic-bezier(.2, .7, .3, 1) backwards;
}
.turn + .turn { border-top: 1px solid var(--rule); }
.turn:nth-child(1) { animation-delay: .05s; }
.turn:nth-child(2) { animation-delay: .35s; }
.turn:nth-child(3) { animation-delay: .65s; }
.turn:nth-child(4) { animation-delay: .95s; }

.who {
  color: var(--ink-2);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: .18rem;
}
.turn.agent .who { color: var(--petrol); }
.elapsed {
  grid-column: 1 / -1;
  color: var(--ink-2);
  font-style: italic;
  font-size: .8rem;
  padding: .2rem 0;
}

@keyframes land {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- the band: a pigeon's leg ring, and a pairing code ---------- */

.band {
  display: inline-block;
  font-family: var(--mono);
  font-size: .95em;
  padding: .12em .5em;
  border-radius: 999px;
  background: var(--band);
  color: var(--petrol);
  white-space: nowrap;
}

.band--code {
  display: block;
  width: fit-content;
  margin: 1.3rem auto;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: .1em;
  padding: .45em 1em;
  border: 1.5px solid var(--petrol);
  background: transparent;
}

/* ---------- tabs (radio + :checked, no script) ---------- */

.tabs { margin-top: calc(var(--gap) * 1.35); }

.tabs > input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  clip-path: inset(50%);
}

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .85rem;
}

.tabbar label {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .01em;
  color: var(--ink-2);
  padding: .34em .78em;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tabbar label:hover { color: var(--ink); background: var(--band); }

.panel { display: none; padding-top: calc(var(--gap) * .85); }

#t1:checked ~ .tabbar [for="t1"], #t2:checked ~ .tabbar [for="t2"],
#t3:checked ~ .tabbar [for="t3"], #t4:checked ~ .tabbar [for="t4"],
#t5:checked ~ .tabbar [for="t5"], #t6:checked ~ .tabbar [for="t6"] {
  background: var(--petrol);
  color: var(--paper);
}
#t1:checked ~ #p1, #t2:checked ~ #p2, #t3:checked ~ #p3,
#t4:checked ~ #p4, #t5:checked ~ #p5, #t6:checked ~ #p6 { display: block; }

.tabs > input:focus-visible ~ .tabbar label[for] { outline: none; }
#t1:focus-visible ~ .tabbar [for="t1"], #t2:focus-visible ~ .tabbar [for="t2"],
#t3:focus-visible ~ .tabbar [for="t3"], #t4:focus-visible ~ .tabbar [for="t4"],
#t5:focus-visible ~ .tabbar [for="t5"], #t6:focus-visible ~ .tabbar [for="t6"] {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* ---------- prose ---------- */

h2 {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 2.6rem 0 .6rem;
}
.panel > h2:first-child { margin-top: 0; }

h3 {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 2rem 0 .5rem;
}

p, li { max-width: var(--measure); }
p { margin: 0 0 1rem; }
ul { padding-left: 1.1rem; margin: 0 0 1rem; }
li { margin-bottom: .4rem; }

a { color: var(--petrol); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 2px; }

code {
  font-family: var(--mono);
  font-size: .89em;
  background: var(--band);
  color: var(--petrol);
  padding: .1em .38em;
  border-radius: 999px;
}

pre {
  font-family: var(--mono);
  font-size: .84rem;
  line-height: 1.6;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1.05rem 1.15rem;
  overflow-x: auto;
  margin: 0 0 1.2rem;
}
pre code { background: none; color: inherit; padding: 0; border-radius: 0; }
pre .c { color: var(--ink-2); }
pre .p { color: var(--petrol); }

/* ---------- note ---------- */

.note {
  border-left: 2px solid var(--coral);
  padding: .15rem 0 .15rem 1.05rem;
  margin: 0 0 1.3rem;
  color: var(--ink-2);
  max-width: var(--measure);
}
.note strong { color: var(--ink); }

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; margin: 0 0 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .91rem; }
th, td {
  text-align: left;
  padding: .55rem .8rem .55rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}
td:first-child { white-space: nowrap; }

/* ---------- steps ---------- */

.steps { list-style: none; padding: 0; counter-reset: s; }
.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.6rem;
  max-width: var(--measure);
}
.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: .1rem;
  width: 1.6rem; height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--petrol);
  color: var(--petrol);
  font-family: var(--mono);
  font-size: .76rem;
}
.steps h3 { margin-top: 0; }

/* ---------- diagram ---------- */

figure { margin: 0 0 1.4rem; }
.diagram { width: 100%; height: auto; }
.diagram .box { fill: var(--paper); stroke: var(--rule); }
.diagram .box--key { stroke: var(--petrol); }
.diagram .lbl { fill: var(--ink); font-family: var(--body); font-size: 13px; font-weight: 500; }
.diagram .sub { fill: var(--ink-2); font-family: var(--mono); font-size: 10px; }
.diagram .flow { stroke: var(--ink-2); fill: none; }
.diagram .flow--drop { stroke: var(--coral); }
.diagram .arrowhead { fill: var(--ink-2); }
.diagram .arrowhead--drop { fill: var(--coral); }
figcaption { font-size: .85rem; color: var(--ink-2); margin-top: .5rem; }

/* ---------- facts ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1.5rem;
}
.facts div { background: var(--paper); padding: 1rem .95rem; }
.facts dt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.facts dd {
  margin: .3rem 0 0;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.facts dd small { font-family: var(--body); font-size: .8rem; font-weight: 400; color: var(--ink-2); }

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

footer {
  margin-top: 4.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}