/* punch-it.com -- written for this domain only.

   Every class token starts with pit- (tools/verify_profile.py checks all of
   them). The page is a single column of pit-slab blocks: this domain forbids
   <table> and <h3>, so the heading ladder stops at H2 and every figure pair
   that would have been a table row is either a sentence or a <dl> item. The
   stylesheet is a file rather than an inline <style> block, which is the other
   half of this domain's <head>: the tag order is fixed in spec/architecture.md
   and no other site in the network opens with charset, stylesheet, robots. */

:root {
  --pit-ink: #e8eef2;
  --pit-dim: #9fb0bd;
  --pit-bg: #101c25;
  --pit-card: #16242f;
  --pit-edge: #24394a;
  --pit-glove: #e4423a;
  --pit-gold: #f6c044;
  --pit-green: #3fb27f;
  --pit-pad: clamp(1rem, 3vw, 2rem);
}

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

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

body.pit-page {
  margin: 0;
  background: var(--pit-bg);
  color: var(--pit-ink);
  font: 1rem/1.68 "Segoe UI", Candara, Optima, "Trebuchet MS", sans-serif;
  letter-spacing: 0.1px;
}

a { color: var(--pit-gold); }
a:hover { color: #ffd874; }

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

/* ---------- header: the operator button lives here, above <main> ---------- */

.pit-crown {
  display: grid;
  gap: 0.9rem;
  padding: var(--pit-pad);
  background: linear-gradient(180deg, #16242f 0%, #101c25 100%);
  border-bottom: 1px solid var(--pit-edge);
}

.pit-sign {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--pit-ink);
  text-decoration: none;
}

.pit-sign em {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.2px;
  color: var(--pit-dim);
}

.pit-door {
  display: block;
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1px solid #f07a6e;
  border-radius: 0.6rem;
  background: var(--pit-glove);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 0.4rem 0 #a62b25;
}

.pit-door:hover { background: #f05046; color: #fff; }
.pit-door:active { transform: translateY(2px); box-shadow: 0 0.2rem 0 #a62b25; }

.pit-door b {
  display: block;
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  line-height: 1.3;
}

.pit-door i {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-style: normal;
  color: #ffe2de;
}

.pit-ways { font-size: 0.9rem; }

.pit-wayrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.pit-wayrow a { text-decoration: none; border-bottom: 1px dotted #6c8295; }
.pit-wayrow b { color: var(--pit-dim); font-weight: 600; }

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

.pit-main {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--pit-pad);
}

.pit-open h1 {
  margin: 0.2rem 0 0.6rem;
  font-size: clamp(1.5rem, 5.2vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -0.3px;
}

.pit-lede {
  margin: 0 0 1.1rem;
  font-size: 1.06rem;
  color: #cfdbe3;
}

.pit-trail {
  margin: 0 0 1.4rem;
  font-size: 0.82rem;
  color: var(--pit-dim);
}

.pit-trail a { color: var(--pit-dim); }
.pit-trail b { color: var(--pit-ink); font-weight: 600; }

.pit-slab {
  margin: 0 0 1.6rem;
  padding: 1.05rem 1.1rem 0.4rem;
  background: var(--pit-card);
  border-left: 3px solid var(--pit-edge);
  border-radius: 0 0.5rem 0.5rem 0;
}

.pit-slab h2 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.14rem, 3.8vw, 1.4rem);
  line-height: 1.3;
  color: #fff;
}

.pit-slab p { margin: 0 0 0.95rem; }

.pit-slab:nth-of-type(even) { border-left-color: var(--pit-glove); }

.pit-shot {
  margin: 0 0 1.6rem;
  border: 1px solid var(--pit-edge);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0c161d;
}

.pit-cap {
  margin: 0;
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
  color: var(--pit-dim);
}

.pit-hero { margin-bottom: 1.3rem; }

/* ---------- questions: a definition list, which is this site's FAQ form ---- */

.pit-asks { margin: 2rem 0 1.4rem; }

.pit-asks h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.14rem, 3.8vw, 1.4rem);
  color: #fff;
}

.pit-ask { margin: 0; }

.pit-ask dt {
  margin: 0.9rem 0 0.25rem;
  font-weight: 700;
  color: var(--pit-gold);
}

.pit-ask dd {
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--pit-edge);
  color: #cfdbe3;
}

/* ---------- onward links and footer ---------- */

.pit-more {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--pit-edge);
  font-size: 0.92rem;
}

.pit-more h2 { margin: 0 0 0.5rem; font-size: 1.05rem; color: #fff; }
.pit-more p { margin: 0 0 0.5rem; }

.pit-base {
  padding: var(--pit-pad);
  background: #0c161d;
  border-top: 1px solid var(--pit-edge);
  font-size: 0.86rem;
  color: var(--pit-dim);
}

.pit-base p { max-width: 48rem; margin: 0 auto 0.85rem; }
.pit-base p a { color: #d8c38a; }

/* ---------- age question ---------- */

.pit-years {
  width: min(27rem, calc(100vw - 2rem));
  padding: 1.3rem;
  border: 1px solid var(--pit-glove);
  border-radius: 0.7rem;
  background: var(--pit-card);
  color: var(--pit-ink);
}

.pit-years::backdrop { background: rgba(6, 12, 17, 0.78); }

.pit-years h2 {
  margin: 0 0 0.6rem;
  font-size: 1.16rem;
  color: #fff;
}

.pit-years p { margin: 0 0 0.9rem; font-size: 0.93rem; }

.pit-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pit-no, .pit-yes {
  font: inherit;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.pit-no {
  order: 1;
  border: 1px solid var(--pit-edge);
  background: transparent;
  color: var(--pit-dim);
}

.pit-yes {
  order: 2;
  border: 1px solid #f07a6e;
  background: var(--pit-glove);
  color: #fff;
  font-weight: 700;
}

.pit-small { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--pit-dim); }

@media (min-width: 46rem) {
  .pit-crown {
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1.6rem;
  }
  .pit-door { width: auto; min-width: 19rem; }
  .pit-ways { grid-column: 1 / -1; }
  .pit-row { flex-direction: row; justify-content: flex-end; }
  .pit-no { order: 1; }
  .pit-yes { order: 2; }
}

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