/* aviator-vavada.net - the only stylesheet on this host.
   Its name carries the first eight characters of its own sha256, which is what lets
   .htaccess serve it for a long window: the name changes whenever the bytes do, and
   the build refuses to ship if the two disagree.

   Written for this domain and no other. The structure it dresses has no div and no
   span in it, by profile, so almost every selector below reaches for an element
   that means something rather than for a wrapper that does not.

   Dark surface, one warm accent, headings set in a serif. Figures are set in a
   tabular face because this domain prints a great many of them in columns. */

:root {
  --gld-base: #10100e;
  --gld-raise: #1a1a17;
  --gld-sunk: #0a0a09;
  --gld-text: #ece6d8;
  --gld-quiet: #a39d8e;
  --gld-edge: #33322c;
  --gld-warm: #d8a441;
  --gld-warm-deep: #8a6414;
  --gld-ink-on-warm: #16140d;
  --gld-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --gld-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
  --gld-tab: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
  --gld-hold: 64rem;
}

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

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

body.gld-sheet {
  margin: 0;
  background: var(--gld-base);
  color: var(--gld-text);
  font: 400 1.0625rem/1.68 var(--gld-sans);
  overflow-wrap: break-word;
}

.gld-sheet a { color: var(--gld-warm); text-underline-offset: 0.2em; }
.gld-sheet a:hover { color: #f2c877; }
.gld-sheet a:focus-visible,
.gld-sheet button:focus-visible { outline: 2px solid var(--gld-warm); outline-offset: 3px; }

.gld-sheet h1, .gld-sheet h2, .gld-sheet h3 { font-family: var(--gld-serif); font-weight: 600; }

.gld-head {
  background: var(--gld-sunk);
  border-bottom: 1px solid var(--gld-edge);
  padding: 1.5rem 1.25rem 1.2rem;
  display: grid;
  gap: 1rem;
  max-width: var(--gld-hold);
  margin: 0 auto;
}

.gld-sig { margin: 0; font-family: var(--gld-serif); text-decoration: none; display: block; }
.gld-sig strong { display: block; font-size: 1.2rem; letter-spacing: 0.01em; }
.gld-sig small { display: block; font-family: var(--gld-sans); font-size: 0.76rem; color: var(--gld-quiet); letter-spacing: 0.08em; text-transform: uppercase; }

/* The operator control. First link in the document and above main, which is a
   conversion decision the build also checks. */
.gld-door {
  display: block;
  text-decoration: none;
  background: linear-gradient(180deg, #e3b358, var(--gld-warm-deep));
  color: var(--gld-ink-on-warm);
  border-radius: 0.3rem;
  padding: 0.95rem 1.1rem;
  box-shadow: 0 0 0 1px var(--gld-warm) inset;
}
.gld-door:hover, .gld-door:focus-visible { background: linear-gradient(180deg, #f0c773, #a0761b); color: var(--gld-ink-on-warm); }
.gld-door strong { display: block; font-size: 1.2rem; line-height: 1.25; font-family: var(--gld-serif); }
.gld-door small { display: block; font-size: 0.8rem; margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.07em; }
.gld-door-why { margin: 0; font-size: 0.93rem; color: var(--gld-quiet); }

.gld-set { font-size: 0.93rem; }
.gld-set ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
.gld-set a { color: var(--gld-quiet); text-decoration: none; border-bottom: 1px solid transparent; }
.gld-set a:hover { color: var(--gld-text); border-bottom-color: var(--gld-warm); }
.gld-set em { font-style: normal; color: var(--gld-warm); border-bottom: 1px solid var(--gld-warm); }

.gld-where { font-size: 0.8rem; color: var(--gld-quiet); }
.gld-where ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.gld-where li + li::before { content: "\203A"; margin-right: 0.35rem; color: var(--gld-edge); }
.gld-where a { color: inherit; }

.gld-main { max-width: var(--gld-hold); margin: 0 auto; padding: 2.4rem 1.25rem 3.2rem; }

.gld-open h1 {
  font-size: clamp(1.8rem, 4.4vw, 2.5rem);
  line-height: 1.16;
  margin: 0 0 0.9rem;
}
.gld-open > p { font-size: 1.12rem; margin: 0 0 1rem; }
.gld-flag {
  border: 1px solid var(--gld-warm-deep);
  background: var(--gld-raise);
  border-left-width: 5px;
  padding: 0.9rem 1rem;
  margin: 0;
  font-size: 1rem;
}

.gld-part { margin: 2.5rem 0 0; }
.gld-part > h2 {
  font-size: clamp(1.32rem, 2.8vw, 1.7rem);
  line-height: 1.22;
  margin: 0 0 0.75rem;
}
.gld-part h3 { font-size: 1.08rem; margin: 1.4rem 0 0.4rem; }
.gld-part p { margin: 0 0 0.95rem; }

/* Fact groups. The profile puts listContainer at section on this domain, so a run
   of related facts is a nested section with its own small heading, not a list. */
.gld-item {
  border-top: 1px solid var(--gld-edge);
  padding-top: 0.6rem;
  margin-top: 1rem;
}
.gld-item h3 { margin: 0 0 0.3rem; }
.gld-item p { margin: 0; }

.gld-tally {
  background: var(--gld-raise);
  border: 1px solid var(--gld-edge);
  border-radius: 0.3rem;
  padding: 1rem 1.1rem;
  margin: 1.3rem 0;
  font-size: 1.04rem;
}
.gld-tally p { margin: 0 0 0.6rem; }
.gld-tally p:last-child { margin: 0; }

.gld-fig { font-family: var(--gld-tab); font-variant-numeric: tabular-nums; color: #f3dca8; }

.gld-grid { margin: 1.4rem 0; overflow-x: auto; }
.gld-grid table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.gld-grid caption {
  caption-side: top;
  text-align: left;
  font-family: var(--gld-serif);
  font-size: 0.98rem;
  padding-bottom: 0.5rem;
  color: var(--gld-quiet);
}
.gld-grid th, .gld-grid td {
  border-bottom: 1px solid var(--gld-edge);
  padding: 0.5rem 0.65rem;
  text-align: right;
  font-family: var(--gld-tab);
  font-variant-numeric: tabular-nums;
}
.gld-grid thead th {
  text-align: right;
  font-family: var(--gld-sans);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gld-quiet);
  border-bottom-color: var(--gld-warm-deep);
}
.gld-grid th[scope="row"] { text-align: left; color: var(--gld-warm); }
.gld-grid tbody tr:last-child th, .gld-grid tbody tr:last-child td { border-bottom: none; }

.gld-qa { margin-top: 2.6rem; }
.gld-qa > h2 { font-size: clamp(1.32rem, 2.8vw, 1.7rem); margin: 0 0 1rem; }
.gld-qa dl { margin: 0; }
.gld-qa dt {
  font-family: var(--gld-serif);
  font-size: 1.06rem;
  color: var(--gld-warm);
  margin-top: 1.15rem;
}
.gld-qa dd { margin: 0.25rem 0 0; }

.gld-next { margin-top: 2.8rem; border-top: 1px solid var(--gld-edge); padding-top: 1.1rem; }
.gld-next h2 { font-size: 1.14rem; margin: 0 0 0.45rem; }
.gld-next p { margin: 0; }

.gld-foot {
  background: var(--gld-sunk);
  border-top: 1px solid var(--gld-edge);
  font-size: 0.92rem;
  color: var(--gld-quiet);
}
.gld-foot-in { max-width: var(--gld-hold); margin: 0 auto; padding: 2.1rem 1.25rem 2.6rem; }
.gld-foot p { margin: 0 0 0.85rem; }
.gld-foot strong { color: var(--gld-text); }
.gld-years { color: var(--gld-warm); letter-spacing: 0.08em; text-transform: uppercase; }
.gld-all ol { margin: 1rem 0 0.9rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.gld-all a { color: var(--gld-quiet); }
.gld-all em { font-style: normal; color: var(--gld-text); }

/* The age window. Closed it is display:none, so none of this costs layout. */
.gld-ask {
  max-width: 33rem;
  background: var(--gld-raise);
  color: var(--gld-text);
  border: 1px solid var(--gld-warm-deep);
  border-radius: 0.4rem;
  padding: 1.5rem;
}
.gld-ask::backdrop { background: rgba(6, 6, 5, 0.8); }
.gld-ask h2 { font-size: 1.2rem; margin: 0 0 0.7rem; line-height: 1.3; }
.gld-ask p { margin: 0 0 1rem; font-size: 0.98rem; }
.gld-ask form { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.gld-ask button {
  font: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-radius: 0.3rem;
  border: 1px solid var(--gld-edge);
  background: var(--gld-sunk);
  color: var(--gld-text);
}
.gld-ask button[value="yes"] {
  border-color: var(--gld-warm);
  background: var(--gld-warm);
  color: var(--gld-ink-on-warm);
  font-weight: 700;
}

@media (min-width: 48rem) {
  .gld-head { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .gld-sig { grid-column: 1; }
  .gld-door { grid-column: 2; grid-row: 1 / span 2; }
  .gld-door-why { grid-column: 2; grid-row: 3; }
  .gld-set, .gld-where { grid-column: 1; }
}

@media print {
  .gld-door, .gld-set, .gld-ask { display: none; }
  body.gld-sheet { background: #fff; color: #000; }
}