/* ==========================================================================
   DROP BEARS — dropbears.gg
   Skeleton: dark industrial (archetype 8)
   Device:   the canopy line (hairline rule + NVG tri-lens + hanging numeral)
   ========================================================================== */

:root {
  /* Field */
  --ink:        #0B0B10;
  --char:       #101018;
  --steel:      #16171F;
  --raise:      #1C1D27;
  --line:       #272833;
  --line-soft:  #1E1F29;

  /* Brand (sampled from the logo mark) */
  --ember:      #F4590A;
  --ember-hi:   #FF7320;
  --ember-dim:  #8A3307;
  --lens:       #FFA51F;

  /* Text */
  --bone:       #EFE9DD;
  --mute:       #A6A3AE;   /* 7.9:1 on --ink */
  --faint:      #8A8794;   /* 5.7:1 on --ink, 5.1:1 on --steel */
  --soft:       #C2BEC8;   /* secondary body copy, 10.6:1 */

  /* Type */
  --display: 'Anybody', 'Arial Black', system-ui, sans-serif;
  --body:    'Chivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Rhythm — strict 8px grid */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --wrap: 1200px;
  --gut: 24px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--lens);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ember); color: #0B0B10;
  padding: var(--s2) var(--s3); z-index: 100;
  font-family: var(--mono); font-weight: 700;
}
.skip:focus { left: 0; }

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 118%;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(3.5rem, 11vw, 9.5rem); }
h2 { font-size: clamp(2.25rem, 5.5vw, 4.25rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-stretch: 108%; line-height: 1.05; }
h4 { font-size: 1.0625rem; font-stretch: 105%; font-weight: 800; letter-spacing: .01em; }

p { margin: 0 0 var(--s3); max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--soft);
  max-width: 54ch;
}

.mono {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

.em { color: var(--ember); }

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

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

.sec { padding-block: var(--s7); position: relative; }
@media (min-width: 900px) { .sec { padding-block: var(--s8); } }

/* ------------------------------------------------- DEVICE: canopy line -- */

.canopy {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  margin-bottom: var(--s5);
}

/* three NVG lenses sitting ON the rule */
.canopy::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 10px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle 4px at 5px 5px,  var(--ember) 0 3px, transparent 3.5px),
    radial-gradient(circle 5px at 23px 5px, var(--lens)  0 4px, transparent 4.5px),
    radial-gradient(circle 4px at 41px 5px, var(--ember) 0 3px, transparent 3.5px);
}

.canopy__idx {
  display: block;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--faint);
}

.canopy__idx b { color: var(--ember); font-weight: 700; }

.canopy h2 { margin-top: var(--s2); }
.canopy .lede { margin-top: var(--s3); }

/* standalone tri-lens glyph, reused as the site's only marker */
.lens {
  display: inline-block;
  width: 34px; height: 8px;
  flex: none;
  background:
    radial-gradient(circle 3px at 4px 4px,  var(--ember) 0 2.5px, transparent 3px),
    radial-gradient(circle 4px at 17px 4px, var(--lens)  0 3.5px, transparent 4px),
    radial-gradient(circle 3px at 30px 4px, var(--ember) 0 2.5px, transparent 3px);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 0 var(--s4);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--ember);
  color: #0B0B10;
  cursor: pointer;
  transition: background .18s var(--ease), transform .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { background: var(--ember-hi); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--line);
}
.btn--ghost:hover { background: transparent; border-color: var(--ember); color: var(--ember); }

.btn--sm { min-height: 44px; padding: 0 var(--s3); font-size: .8125rem; }

.btn svg { width: 20px; height: 20px; fill: currentColor; }

.btn[disabled] { opacity: .45; pointer-events: none; }

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

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 16, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 72px;
}

.brand {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 48px;
  text-decoration: none; margin-right: auto;
}
.brand img { width: 40px; height: 40px; }
.brand span {
  font-family: var(--display);
  font-weight: 900; font-stretch: 112%;
  font-size: 1.0625rem; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1;
}

.nav { display: none; gap: var(--s4); align-items: center; }
@media (min-width: 1000px) { .nav { display: flex; } }

.nav a {
  font-family: var(--mono);
  font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--mute);
  padding: var(--s2) 0;
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--ember); }

.hdr .btn { display: none; }
@media (min-width: 1000px) { .hdr .btn { display: inline-flex; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -12px;
  background: none; border: 1px solid var(--line); color: var(--bone);
  cursor: pointer;
}
@media (min-width: 1000px) { .burger { display: none; } }
.burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

.mnav { display: none; border-top: 1px solid var(--line-soft); background: var(--char); }
.mnav.is-open { display: block; }
@media (min-width: 1000px) { .mnav, .mnav.is-open { display: none; } }
.mnav a {
  display: flex; align-items: center;
  min-height: 56px; padding-inline: var(--gut);
  font-family: var(--display); font-weight: 800; font-stretch: 106%;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; color: var(--bone);
  border-bottom: 1px solid var(--line-soft);
}
/* .mnav a sets colour, so the button has to take it back or it ends up
   bone-on-ember at 2.8:1 instead of ink-on-ember at 5.8:1 */
.mnav .btn { display: flex; margin: var(--s3) var(--gut) var(--s4); color: #0B0B10; border-bottom: 0; }
.mnav .btn--ghost { color: var(--bone); }

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

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  padding-block: 232px var(--s6);   /* room for the bear hanging over the top */
}
@media (min-width: 900px) { .hero { padding-block: 120px var(--s7); } }

/* One figure, not three. The bear art already carries the branch, the leaves
   and the claws, so stacking the canopy crops on top of it just made an
   orange wall that the headline had to fight. */
.hero__art {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}
/* Phone: the bear hangs over the top edge, so you read it before the
   headline tells you to look up. Desktop: it sits to the right of the type. */
.hero__art--bear {
  top: -24px; right: -72px; width: 340px;
  opacity: .72;
  /* The crop slices through the branch on the left and bottom edges, so fade
     those out. The bear's head sits at 64% / 40%, well inside the solid part. */
  -webkit-mask-image: radial-gradient(ellipse 86% 82% at 64% 40%, #000 56%, transparent 96%);
          mask-image: radial-gradient(ellipse 86% 82% at 64% 40%, #000 56%, transparent 96%);
}
@media (min-width: 760px)  {
  .hero__art--bear {
    top: auto; right: -90px; bottom: -60px; width: 560px; opacity: .78;
    /* bottom runs off the viewport here, so only the left cut needs feathering */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%);
            mask-image: linear-gradient(90deg, transparent 0, #000 20%);
  }
}
@media (min-width: 1100px) { .hero__art--bear { right: -40px;  bottom: -90px;  width: 680px; opacity: .92; } }
@media (min-width: 1400px) { .hero__art--bear { right: 0;      bottom: -110px; width: 780px; } }

/* Scrim so copy always lands on near-black, never on branches. */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(97deg,
    var(--ink) 0 30%,
    rgba(11, 11, 16, .88) 46%,
    rgba(11, 11, 16, .35) 68%,
    transparent 86%);
}
@media (max-width: 759px) {
  .hero::after {
    background: linear-gradient(180deg,
      rgba(11, 11, 16, .30) 0 16%,
      rgba(11, 11, 16, .86) 30%,
      var(--ink) 40% 100%);
  }
}

.hero__in { position: relative; z-index: 1; }

.hero h1 { position: relative; }
.hero h1 .dot { color: var(--ember); }

.hero .lede { margin-top: var(--s4); }

.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s5);
}

/* mono data rail under the hero */
.rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--s6);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 640px) { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rail { grid-template-columns: repeat(4, 1fr); } }

.rail__cell { background: var(--ink); padding: var(--s3); }
.rail__k {
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.rail__v {
  font-family: var(--display); font-weight: 800; font-stretch: 108%;
  text-transform: uppercase; font-size: 1.125rem; line-height: 1.1;
  margin-top: var(--s1);
}

/* ------------------------------------------------- spec table (mono) --- */

.spec { border-top: 1px solid var(--line); }
.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s1);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 700px) {
  .spec__row { grid-template-columns: 220px 1fr; gap: var(--s4); align-items: baseline; }
}
.spec__k {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.spec__v { font-size: 1.0625rem; }
.spec__v strong { font-family: var(--display); font-stretch: 108%; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.spec__v .tbc { color: var(--faint); font-style: italic; }

/* ------------------------------------------------- numeral fact band --- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact { background: var(--char); padding: var(--s4) var(--s3); }
@media (min-width: 900px) { .fact { padding: var(--s5) var(--s4); } }

.fact__n {
  font-family: var(--display);
  font-weight: 900; font-stretch: 92%;
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: .86;
  color: var(--ember);
  font-variant-numeric: tabular-nums;
}
.fact__n sup { font-size: .4em; vertical-align: super; }
.fact__l {
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--mute); margin-top: var(--s2);
}
.fact__d { font-size: .9375rem; color: var(--soft); margin-top: var(--s2); max-width: 32ch; }

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

.steps { border-top: 1px solid var(--line); }

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s3);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
@media (min-width: 900px) {
  .step { grid-template-columns: 96px 1fr 1fr; gap: var(--s5); align-items: baseline; }
}

.step__n {
  font-family: var(--display); font-weight: 900; font-stretch: 92%;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: .9;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.step:hover .step__n { color: var(--ember); }
.step__b p { font-size: .9375rem; color: var(--soft); margin: var(--s2) 0 0; }
.step__x { grid-column: 1 / -1; }
@media (min-width: 900px) { .step__x { grid-column: auto; } }

/* copy-to-clipboard field */
.copy {
  display: flex; align-items: stretch;
  border: 1px solid var(--line);
  background: var(--char);
  margin-top: var(--s2);
  max-width: 420px;
}
.copy code {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: .875rem;
  padding: var(--s2) var(--s3);
  color: var(--bone);
  display: flex; align-items: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copy button {
  flex: none; min-width: 72px; min-height: 48px;
  border: 0; border-left: 1px solid var(--line);
  background: var(--raise); color: var(--bone);
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.copy button:hover { background: var(--ember); color: #0B0B10; }

/* --------------------------------------------------------------- panel -- */

.panel {
  background: var(--char);
  border: 1px solid var(--line-soft);
  padding: var(--s4);
}
@media (min-width: 900px) { .panel { padding: var(--s5); } }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
  .split--wide { grid-template-columns: 1.15fr 1fr; }
}

/* ---------------------------------------------------------------- data -- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line-soft); }

table.data {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-variant-numeric: tabular-nums;
}
table.data th {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); text-align: right;
  padding: var(--s3);
  background: var(--steel);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th.l, table.data td.l { text-align: left; }
table.data td {
  padding: var(--s3);
  text-align: right;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .875rem;
  color: var(--soft);
}
table.data tbody tr:hover td { background: var(--steel); color: var(--bone); }
table.data td.name {
  font-family: var(--body); font-size: 1rem; font-weight: 500; color: var(--bone);
}
table.data .rank {
  font-family: var(--display); font-weight: 900; font-stretch: 92%;
  font-size: 1.25rem; color: var(--faint); width: 64px;
}
table.data tr.top .rank { color: var(--ember); }
table.data tr.top td.name { font-weight: 700; }

.empty {
  padding: var(--s6) var(--s4);
  text-align: center;
  border: 1px dashed var(--line);
  background: var(--char);
}
.empty h3 { color: var(--mute); }
.empty p { margin: var(--s3) auto 0; color: var(--faint); font-size: .9375rem; }

/* --------------------------------------------------------------- forum -- */

.cats { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (min-width: 800px) { .cats { grid-template-columns: repeat(2, 1fr); } }

.cat {
  background: var(--char); padding: var(--s4);
  text-decoration: none; display: block;
  transition: background .16s var(--ease);
}
.cat:hover { background: var(--steel); }
.cat .lens { margin-bottom: var(--s3); }
.cat h3 { font-size: 1.1875rem; }
.cat p { font-size: .9375rem; color: var(--mute); margin: var(--s2) 0 0; }
.cat__meta { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-top: var(--s3); }

.threads { border-top: 1px solid var(--line); }

.thread {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  align-items: center;
}
.thread:hover .thread__t { color: var(--ember); }
.thread__t { font-weight: 500; font-size: 1.0625rem; transition: color .16s var(--ease); }
.thread__m { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.thread__c {
  font-family: var(--mono); font-size: .875rem;
  color: var(--mute); text-align: right; white-space: nowrap;
}
.thread__c b { color: var(--bone); font-weight: 700; display: block; font-size: 1.125rem; }
.thread.pinned .thread__t::before {
  content: 'PINNED';
  font-family: var(--mono); font-size: .625rem; letter-spacing: .12em;
  color: var(--ember); border: 1px solid var(--ember-dim);
  padding: 2px 6px; margin-right: var(--s2); vertical-align: 2px;
}

.post {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 800px) { .post { grid-template-columns: 200px 1fr; gap: var(--s5); } }

.post__who { display: flex; align-items: center; gap: var(--s2); align-self: start; }
.post__who img { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--raise); }
.post__name { font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.post__role { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
.post__when { font-family: var(--mono); font-size: .6875rem; color: var(--faint); letter-spacing: .08em; }
.post__body { font-size: 1rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.post__body p { margin-bottom: var(--s2); }

/* --------------------------------------------------------------- forms -- */

.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute); margin-bottom: var(--s1);
}
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 52px;
  padding: var(--s2) var(--s3);
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--body); font-size: 1rem;
  border-radius: 0;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; padding-top: var(--s3); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ember); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }

/* .note carries real sentences, not just labels, so it does not go below 13px */
.note { font-family: var(--mono); font-size: .8125rem; line-height: 1.65; color: var(--faint); letter-spacing: .03em; }
@media (max-width: 899px) { .note { font-size: .875rem; } }
.err { color: #FF6B5A; font-size: .875rem; font-family: var(--mono); }
.ok  { color: var(--lens); font-size: .875rem; font-family: var(--mono); }

/* ----------------------------------------------------------- discord cta -- */

.disc {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--char);
  padding: var(--s6) var(--s4);
  text-align: center;
}
@media (min-width: 900px) { .disc { padding: var(--s8) var(--s6); } }

.disc__art {
  position: absolute; mix-blend-mode: screen; pointer-events: none;
  opacity: .55; z-index: 0;
}
.disc__art--l { top: -30px; left: -60px; width: 260px; }
.disc__art--r { top: -30px; right: -50px; width: 200px; }
@media (min-width: 900px) {
  .disc__art--l { width: 380px; left: -40px; }
  .disc__art--r { width: 300px; right: -30px; }
}
.disc__in { position: relative; z-index: 1; }
.disc h2 { margin-bottom: var(--s3); }
.disc .lede { margin-inline: auto; }
.disc .btn { margin-top: var(--s5); }

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

.ftr { border-top: 1px solid var(--line); padding-block: var(--s6) var(--s5); background: var(--char); }

.ftr__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s5);
  padding-bottom: var(--s5); border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 800px) { .ftr__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s6); } }

.ftr h4 { color: var(--mute); margin-bottom: var(--s3); font-size: .8125rem; letter-spacing: .12em; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: var(--s1); }
.ftr li a {
  display: inline-flex; align-items: center;
  min-height: 44px;                 /* footer links are navigation, not prose */
  color: var(--soft); text-decoration: none; font-size: .9375rem;
}
@media (min-width: 900px) { .ftr li { margin-bottom: var(--s2); } .ftr li a { min-height: 0; } }
.ftr li a:hover { color: var(--ember); }

.ftr__legal {
  padding-top: var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  justify-content: space-between; align-items: center;
}
.ftr__legal p { font-family: var(--mono); font-size: .8125rem; line-height: 1.6; letter-spacing: .03em; color: var(--faint); max-width: 70ch; margin: 0; }
.ftr__legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .ftr__legal a { min-height: 0; } }
.ftr__legal a { color: var(--mute); }
.ftr__legal a:hover { color: var(--ember); }

/* ------------------------------------------------------------ sessionui -- */

.me { display: flex; align-items: center; gap: var(--s2); }
.me img { width: 32px; height: 32px; border-radius: 50%; background: var(--raise); }
.me__n { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; color: var(--bone); }

/* ------------------------------------------------------------- reveal --- */
/* content drops DOWN into place — the brand line is "look up" */

.drop { opacity: 0; transform: translateY(-18px); }
.drop.in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .55s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .drop, .drop.in { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------ utility --- */

.stack > * + * { margin-top: var(--s3); }
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mb4 { margin-bottom: var(--s4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.pagehead { padding-block: var(--s6) var(--s5); border-bottom: 1px solid var(--line-soft); }
@media (min-width: 900px) { .pagehead { padding-block: var(--s7) var(--s6); } }