/* boosbooty.com -- the only stylesheet of this domain.

   Linked rather than inlined (inlineStylesheets "never"), which keeps a <style> element
   out of the <head> sequence entirely and leaves that sequence shorter than any other
   build in the network.

   Every class token starts boo- , which tools/verify_profile.py checks against the
   classPrefix in site.config.ts. No utility classes: the markup is semantic and short
   enough that element selectors do most of the work.

   The file carries no content hash in its name, so deploy/.htaccess caches it in days
   rather than months. An unhashed file under a long cache is an edit that never reaches
   anyone who has already visited. */

:root {
  --boo-ink: #171427;
  --boo-ink-soft: #211d38;
  --boo-edge: #322c50;
  --boo-text: #e8e4f4;
  --boo-mute: #a9a2c6;
  --boo-mint: #7ef0c8;
  --boo-amber: #f3c04a;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--boo-ink);
  color: var(--boo-text);
  font: 400 1.0625rem/1.65 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--boo-mint);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

.boo-crest {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1rem 1rem;
  border-bottom: 1px solid var(--boo-edge);
  background: linear-gradient(180deg, #1d1933, var(--boo-ink));
}

.boo-sign {
  display: block;
  color: var(--boo-text);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
  text-decoration: none;
}

.boo-sign em {
  display: block;
  color: var(--boo-mute);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* The handoff. One full-width slab with its own ground, above <main>, visible without
   scrolling, and on a phone it takes the whole line rather than squeezing beside the
   navigation. tools/verify_profile.py checks the position; the size is a judgement and
   this is it. */
.boo-exit {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid #a7ffdf;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--boo-mint), #4fd8ab);
  color: #10121f;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 0 #2f9c78;
}

.boo-exit strong {
  display: block;
  font-size: 1.22rem;
  line-height: 1.25;
}

.boo-exit small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.86;
}

.boo-exit:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #2f9c78;
}

.boo-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  margin: 0;
  font-size: 0.95rem;
}

.boo-rail b {
  color: var(--boo-amber);
}

/* ------------------------------------------------------------------ main */

.boo-hall {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}

.boo-hall h1 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.6rem, 5.4vw, 2.2rem);
  line-height: 1.17;
  letter-spacing: -0.01em;
}

.boo-lede {
  margin: 0 0 1.4rem;
  color: var(--boo-mute);
  font-size: 1.1rem;
}

.boo-trail {
  margin: 1.2rem 0 1.6rem;
  color: var(--boo-mute);
  font-size: 0.88rem;
}

.boo-trail a::after {
  content: " \2192";
  color: var(--boo-edge);
}

.boo-slab {
  margin: 0 0 1.7rem;
}

.boo-slab h2 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.2rem, 3.8vw, 1.42rem);
  line-height: 1.28;
}

.boo-slab p {
  margin: 0 0 0.85rem;
}

.boo-slab b {
  color: var(--boo-amber);
  font-weight: 700;
}

/* ---------------------------------------------------------------- plates */

.boo-plate {
  margin: 0 0 1.7rem;
  padding: 0.6rem;
  border: 1px solid var(--boo-edge);
  border-radius: 10px;
  background: var(--boo-ink-soft);
}

.boo-plate img {
  border-radius: 6px;
}

.boo-plate figcaption {
  margin-top: 0.55rem;
  color: var(--boo-mute);
  font-size: 0.86rem;
  line-height: 1.5;
}

.boo-first img {
  width: 100%;
}

/* ----------------------------------------------------------------- sheet */

/* The specification. Term-and-value pairs are two columns with a row header, which is
   what this data is; <dl> is forbidden on this domain and would be the wrong element for
   it anyway. One page carries this, which also keeps the share of text inside table cells
   far below the limit tools/content_shape.py enforces. */
.boo-sheet {
  width: 100%;
  margin: 0 0 1.9rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.boo-sheet caption {
  margin-bottom: 0.5rem;
  color: var(--boo-mute);
  font-size: 0.86rem;
  text-align: left;
}

.boo-sheet th,
.boo-sheet td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--boo-edge);
  text-align: left;
  vertical-align: top;
}

.boo-sheet th {
  width: 11rem;
  color: var(--boo-amber);
  font-weight: 600;
}

/* --------------------------------------------------------------- answers */

.boo-asked {
  margin: 2.2rem 0 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--boo-edge);
}

.boo-asked h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.2rem, 3.8vw, 1.42rem);
}

.boo-ask {
  margin: 0 0 1.1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--boo-mint);
}

.boo-ask h3 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  line-height: 1.35;
}

.boo-ask p {
  margin: 0;
  color: var(--boo-mute);
}

.boo-close {
  margin: 2rem 0 0;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  background: var(--boo-ink-soft);
  color: var(--boo-mute);
}

.boo-onward {
  margin: 1.8rem 0 0;
}

.boo-onward h2 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--boo-mute);
}

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

.boo-floor {
  padding: 1.6rem 1rem 2.4rem;
  border-top: 1px solid var(--boo-edge);
  background: #13101f;
}

.boo-floor p {
  max-width: 44rem;
  margin: 0 auto 0.9rem;
  color: var(--boo-mute);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ gate */

/* Without the open attribute a <dialog> is display:none, so this box costs nothing in
   layout and cannot shift anything on first paint. */
.boo-gate {
  width: min(29rem, calc(100vw - 2rem));
  padding: 1.3rem;
  border: 1px solid var(--boo-mint);
  border-radius: 12px;
  background: var(--boo-ink-soft);
  color: var(--boo-text);
}

.boo-gate::backdrop {
  background: rgba(8, 6, 16, 0.82);
}

.boo-gate h2 {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}

.boo-gate p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
}

.boo-row {
  margin: 1.1rem 0;
}

.boo-yes {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 9px;
  background: var(--boo-mint);
  color: #10121f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.boo-fine {
  margin: 0;
  color: var(--boo-mute);
  font-size: 0.84rem;
  line-height: 1.55;
}

.boo-fine b {
  color: var(--boo-amber);
}

/* ----------------------------------------------------------------- wider */

@media (min-width: 46rem) {
  .boo-crest {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: center;
    padding: 1.2rem 1.6rem;
  }

  .boo-exit {
    grid-row: span 2;
    grid-column: 2;
  }

  .boo-hall {
    padding: 2.2rem 1.6rem 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boo-exit:active {
    transform: none;
  }
}

/* A group heading inside the specification table. Four labelled groups of four rows read
   better than sixteen rows in a row, and the <tbody> boundary that comes with each group
   also stops the row markup from becoming one uniform chain -- which the batch brief
   records as a way two otherwise different sites end up measuring alike. */
.boo-band th {
  width: auto;
  padding-top: 1.2rem;
  border-bottom-color: var(--boo-mint);
  color: var(--boo-mint);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}