/* National Birdshow site styles.
   Colours and font from content/design.md; sizes and spacing from
   content/css/post-65.css (header), post-67.css (footer), post-11.css (home). */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #D42D27;
  --black: #000000;
  --yellow: #FFCC00;
  --pink: #FFF3F3;
  --grey: #F9F9F9;
  --cream: rgba(255, 204, 0, 0.13);
  --menu-text: #231F20;
  --menu-rule: #dd3630;
  --white: #FFFFFF;
  --font: "Montserrat", Arial, Helvetica, sans-serif;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
}

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

a { color: var(--red); }

h1, h2, h3 { margin: 0; line-height: 1.2; }

p { margin: 0 0 0.9em; }

li { list-style: square; }
li::marker { color: var(--red); }

.red { color: var(--red); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 10px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
}
.skip-link:focus { top: 10px; }

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

/* Content that still needs confirming. Deliberately loud so nobody
   mistakes it for real information. See TODO-for-Jeremy.md. */
.todo {
  display: inline-block;
  padding: 0 0.25em;
  background: var(--yellow);
  color: var(--black);
  outline: 2px dashed var(--black);
  outline-offset: -2px;
  font-weight: 700;
  line-height: 1.2;
}

/* Page width: 1600px, 1500px under 1680px, 1200px under 1440px. */
.wrap {
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}
@media (max-width: 1680px) { .wrap { max-width: 1560px; padding-left: 30px; padding-right: 30px; } }
@media (max-width: 1440px) { .wrap { max-width: 1270px; padding-left: 35px; padding-right: 35px; } }
@media (max-width: 768px)  { .wrap { padding-left: 15px; padding-right: 15px; } }
@media (max-width: 430px)  { .wrap { padding-left: 10px; padding-right: 10px; } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: var(--yellow);
  color: #202020;
  font-family: var(--font);
  font-size: 19px;
  font-weight: 400;
  line-height: 37px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
}
.btn:hover, .btn:focus { background: #f2c200; }
.btn-square { border-radius: 8px; line-height: 1.2; color: var(--black); }

/* ---------- Header ---------- */

.header-grid {
  display: flex;
  align-items: flex-start;
}
.header-side {
  width: 25%;
  padding: 10px;
}
.header-main {
  width: 75%;
  padding: 10px;
}

.logo { display: block; text-align: center; }
.logo img { width: 150px; height: 150px; }

/* Side menu: red panel, white upper-case links, yellow on hover. */
.side-nav {
  margin-top: 10px;
  padding: 10px 0;
  background: var(--red);
  border-radius: 16px;
}
.side-nav ul, .top-nav ul, .mobile-nav ul {
  margin: 0;
  padding: 0;
}
.side-nav li, .top-nav li, .mobile-nav li { list-style: none; }
.side-nav li::after {
  content: "";
  display: block;
  margin: 0 40px;
  border-top: 1px solid var(--menu-rule);
}
.side-nav li:last-child::after { display: none; }
.side-nav a, .mobile-nav nav a {
  display: block;
  padding: 10px 40px;
  color: var(--white);
  font-size: 19px;
  line-height: 27px;
  text-transform: uppercase;
  text-decoration: none;
}
.side-nav a:hover, .side-nav a:focus,
.mobile-nav nav a:hover, .mobile-nav nav a:focus {
  background: var(--yellow);
  color: var(--black);
}
.side-nav a[aria-current="page"],
.mobile-nav nav a[aria-current="page"] { font-weight: 700; }

.btn-entry {
  display: block;
  margin-top: 20px;
  text-align: center;
}

/* Top menu: plain dark links in a row, red on hover and for the current page. */
.top-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  min-height: 40px;
}
.top-nav a {
  display: block;
  padding: 0 15px;
  color: var(--menu-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
}
.top-nav a:hover, .top-nav a:focus, .top-nav a[aria-current="page"] { color: var(--red); }

/* Mobile menu: hidden on wide screens. */
.mobile-nav { display: none; }

/* Hero banner */
.hero {
  display: flex;
  align-items: center;
  min-height: 710px;
  margin-top: 10px;
  padding: 0 0 0 30px;
  border-radius: 20px;
  background: #1c2a14 url("/images/2024/06/image-3-1.png") center / cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
.hero-text { flex: 1 1 50%; padding: 10px; }
.hero-art  { flex: 1 1 50%; padding: 10px; text-align: center; }
.hero-art img { display: inline-block; }
.hero p { margin: 0; }
.hero-welcome {
  font-size: 23px;
  line-height: 28px;
  text-transform: uppercase;
}
.hero-annual {
  margin-top: 10px !important;
  font-size: 80px;
  font-weight: 800;
  line-height: 74px;
  text-transform: uppercase;
}
.hero-wordmark {
  margin: 20px 0;
  padding: 10px 0;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--white);
}
.hero-wordmark img { display: block; width: 100%; }
.hero-date {
  font-size: 40px;
  line-height: 48.76px;
  text-transform: uppercase;
}

@media (max-width: 1440px) {
  .hero-annual { font-size: 70px; line-height: 65px; }
  .hero-date { font-size: 33px; line-height: 39px; }
}

@media (max-width: 1024px) {
  .side-nav a { padding-left: 18px; padding-right: 18px; font-size: 16px; }
  .side-nav li::after { margin: 0 18px; }
  .btn-entry { font-size: 16px; }
  .top-nav a { font-size: 15px; line-height: 1.4; }
  .hero { min-height: 520px; }
}

/* Phones and small tablets: logo and menu button in one row,
   the top and side menus fold into the combined mobile menu. */
@media (max-width: 768px) {
  .header-grid { display: block; }
  .header-side, .header-main { width: 100%; }
  .header-side {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .logo { text-align: left; }
  .logo img { width: 100px; height: 100px; }
  .side-nav, .top-nav { display: none; }
  .btn-entry { order: 3; width: 100%; margin-top: 10px; }

  .mobile-nav { display: block; }
  .mobile-nav summary {
    display: block;
    padding: 8px;
    cursor: pointer;
    list-style: none;
  }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .burger { display: block; width: 32px; }
  .burger span {
    display: block;
    height: 4px;
    margin: 6px 0;
    background: var(--red);
    border-radius: 2px;
  }
  .mobile-nav[open] .burger span:nth-child(2) { opacity: 0; }
  .mobile-nav[open] .burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .mobile-nav[open] .burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  .mobile-nav nav {
    position: absolute;
    left: 10px; right: 10px;
    top: 100%;
    z-index: 50;
    padding: 10px 0;
    background: var(--red);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .mobile-nav nav a { padding: 10px 20px; font-size: 16px; }

  .hero { min-height: 0; padding: 40px 0 40px 10px; flex-wrap: wrap; }
  .hero-text, .hero-art { flex-basis: 100%; }
  .hero-art img { max-width: 60%; }
  .hero-welcome { font-size: 20px; }
  .hero-annual { font-size: 45px; line-height: 48px; }
  .hero-date { font-size: 18px; line-height: 1.4; }
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 30px;
  padding: 10px 0;
  background: var(--yellow);
  text-align: center;
}
.site-footer p { margin: 0; font-size: 15px; }

/* ---------- Shared content pieces ---------- */

.section-title {
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
}

/* The short thick red bar under section headings. */
.bar {
  width: 10%;
  margin: 12px auto 30px;
  border: 0;
  border-top: 8px solid var(--red);
}
.bar-left { margin-left: 0; width: 23%; }
.bar-white { border-top-color: var(--white); }

/* The thin rule between lines inside grey panels. */
.rule {
  margin: 12px 0;
  border: 0;
  border-top: 2px solid var(--white);
}

.panel { border-radius: 20px; padding: 50px; }
.panel-grey { background: var(--grey); }

@media (max-width: 1024px) {
  .bar { width: 19%; }
  .panel { padding: 30px; }
}
@media (max-width: 768px) {
  .bar { width: 100px; }
  .section-title { font-size: 27px; }
}
@media (max-width: 430px) {
  .section-title { font-size: 25px; }
  .panel { padding: 20px; }
}

/* ---------- Home page ---------- */

.home-hosts {
  display: flex;
  gap: 20px;
  margin-top: 50px;
  margin-bottom: 80px;
}
.host-card {
  flex: 1 1 50%;
  padding: 50px 10px;
  border-radius: 20px;
  text-align: center;
}
.host-card img { max-height: 220px; width: auto; }
.host-card-pink { background: var(--pink); }
.host-card-yellow { background: var(--cream); }
.host-kicker { margin: 10px 0 5px; font-size: 24px; }
.host-name { font-size: 30px; font-weight: 700; color: var(--red); }
.host-name-accent { color: var(--yellow); }

.home-venue { margin-top: 100px; margin-bottom: 100px; text-align: center; }
.venue-date { font-size: 30px; font-weight: 700; color: var(--red); margin-bottom: 5px; }
.venue-name { font-size: 54px; font-weight: 700; }
.icon-list { margin: 0; padding: 0; }
.icon-list li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
  font-size: 18px;
}
.icon-list a { color: var(--black); text-decoration: none; }
.icon-list a:hover, .icon-list a:focus { text-decoration: underline; }
.icon { width: 16px; height: 16px; fill: var(--red); flex: none; }

.home-registration {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 100px;
  margin-bottom: 100px;
}
.reg-panel { flex: 1 1 50%; }
.reg-art { flex: 1 1 50%; }
.reg-art img { display: block; width: 100%; }
.reg-title { font-size: 35px; font-weight: 700; color: var(--red); margin-bottom: 15px; }
.reg-line { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.reg-note { font-size: 18px; margin-bottom: 10px; }
.reg-note a { color: var(--black); }
.reg-online { font-size: 22px; font-weight: 700; color: var(--red); margin-bottom: 5px; }

.home-admission { margin-top: 100px; margin-bottom: 100px; }
.home-admission .section-title { font-size: 36px; font-weight: 800; }
.price-cards { display: flex; gap: 20px; }
.price-card {
  flex: 1 1 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 50px;
  border-radius: 20px;
  text-align: center;
}
.price-card p { margin: 0; }
.price-card-grey { background: var(--grey); }
.price-card-pink { background: var(--pink); }
.price-label { font-size: 24px; }
.price { padding-top: 20px; font-size: 45px; font-weight: 600; }
.price-card-grey .price { color: var(--red); }
.price-card-pink .price-label { color: var(--red); }
.public-hours { margin-top: 30px; text-align: center; font-size: 25px; font-weight: 500; }
.public-hours p { margin-bottom: 5px; }

.singers {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 50px;
  border-radius: 20px;
  background: var(--red);
  color: var(--white);
}
.singers-text { flex: 1 1 50%; }
.singers-text h2 { font-size: 25px; font-weight: 700; text-transform: uppercase; }
.singers-text a { color: var(--white); }
.singers-art { flex: 1 1 50%; text-align: center; }
.singers-art img { width: 60%; }

.home-sales, .home-sponsors { margin-top: 100px; margin-bottom: 100px; text-align: center; }
.sales-text p, .home-sponsors > p {
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  font-weight: 500;
}
.w42 { max-width: 42%; }
.w70 { max-width: 70%; }
.w72 { max-width: 72%; }
.sales-cost { font-size: 25px !important; font-weight: 700 !important; color: var(--red); }

.logo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  align-items: center;
  margin: 30px 0 0;
  padding: 0;
}
.logo-strip li { list-style: none; text-align: center; }
.logo-strip img { max-height: 110px; width: auto; }

@media (max-width: 1440px) {
  .price-card { padding: 30px; }
}
@media (max-width: 1024px) {
  .venue-name { font-size: 40px; }
  .price-cards { flex-wrap: wrap; }
  .price-card { flex-basis: calc(50% - 10px); }
  .price-label { font-size: 20px; }
  .price { font-size: 30px; }
  .w42, .w70, .w72 { max-width: 88%; }
}
@media (max-width: 768px) {
  .home-hosts, .home-registration, .singers { flex-direction: column; }
  .home-hosts { margin-bottom: 50px; }
  .home-venue, .home-registration, .home-admission, .home-sales, .home-sponsors {
    margin-top: 60px; margin-bottom: 60px;
  }
  .venue-name { font-size: 27px; }
  .venue-date { font-size: 20px; }
  .price-card { flex-basis: 100%; }
  .public-hours { font-size: 20px; }
  .singers { padding: 20px; }
  .bar-left { width: 100px; }
}
@media (max-width: 430px) {
  .host-kicker { font-size: 20px; }
  .host-name { font-size: 25px; }
  .reg-title { font-size: 26px; }
  .reg-line, .reg-online, .reg-note { font-size: 16px; }
  .w42, .w70, .w72 { max-width: 100%; }
  .sales-text p, .home-sponsors > p { font-size: 16px; }
}

/* ---------- Inner pages (sizes from post-14/24/28.css) ---------- */

/* Standard page heading: year, show name, red bar, page name. */
.page-intro { margin-top: 60px; margin-bottom: 40px; text-align: center; }
.intro-year { margin: 0; font-size: 30px; font-weight: 700; color: var(--red); }
.intro-show {
  margin: 0;
  font-size: 54px;
  font-weight: 700;
  line-height: 68px;
  text-transform: uppercase;
}
.intro-title {
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

.sub-title {
  margin: 50px 0 20px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
}
.sub-title.red { color: var(--red); }
.minor-title { margin: 30px 0 12px; font-size: 22px; font-weight: 700; color: var(--red); }
.card .minor-title { margin-top: 12px; }
.minor-title.yellow { color: var(--yellow); }
.minor-title.black { color: var(--black); }

/* Small helpers */
.center { text-align: center; }
.gap-top { margin-top: 20px; }
.flush-top { margin-top: 0 !important; }
.lead { font-size: 22px; }

.floor-plan { display: block; width: 100%; margin: 0 0 40px; border-radius: 20px; }

.prose { max-width: 1000px; margin: 0 auto 40px; font-size: 18px; }
.prose.center { text-align: center; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose li li { list-style: disc; }
.prose li li::marker { color: var(--yellow); }

.section { margin-top: 60px; margin-bottom: 60px; }

/* Image beside text. */
.split { display: flex; gap: 40px; align-items: center; margin-bottom: 40px; }
.split > * { flex: 1 1 50%; min-width: 0; }
.split img { display: block; margin: 0 auto; }
.split.reverse { flex-direction: row-reverse; }
.split.top { align-items: flex-start; }

.card { padding: 40px 30px; border-radius: 20px; }
.card-grey { background: var(--grey); }
.card-pink { background: var(--pink); }
.card-cream { background: #FFF8DE; }
.card-red { background: var(--red); color: var(--white); }
.card-red a { color: var(--white); }
.card-red li::marker { color: var(--yellow); }
.card > :last-child { margin-bottom: 0; }

.card-row { display: flex; gap: 20px; margin-bottom: 30px; }
.card-row > * { flex: 1 1 0; min-width: 0; }

.btn-small {
  display: inline-block;
  padding: 6px 16px;
  background: var(--yellow);
  color: var(--black);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn-small:hover, .btn-small:focus { background: #f2c200; }
.sold-out { font-weight: 700; color: var(--red); text-transform: uppercase; }

/* Data tables: red header row, striped body. Step 3 fills these from content/tables. */
.table-wrap { overflow-x: auto; margin: 0 auto 40px; max-width: 1000px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.data-table caption { padding: 8px; font-weight: 700; text-transform: uppercase; }
.data-table th {
  padding: 1em;
  background: var(--red);
  color: var(--white);
  text-align: center;
}
.data-table td { padding: 0.8em 1em; text-align: center; font-weight: 500; }
.data-table tbody tr:nth-child(even) td { background: #f7f7f7; }
.paid { font-weight: 700; color: #2e7d32; }

/* Show class and award tables: each column has its own colour
   (from the old site's custom CSS). */
.class-table { font-size: 16px; }
.class-table th:nth-child(1),
.class-table th:nth-child(4) { background: var(--yellow); color: var(--black); }
.class-table td { font-weight: 600; }
.class-table tbody tr:nth-child(n) td { background: var(--white); }
.class-table tbody tr:nth-child(even) td:nth-child(1),
.class-table tbody tr:nth-child(even) td:nth-child(3),
.class-table tbody tr:nth-child(even) td:nth-child(5) { background: var(--pink); }
.class-table tbody tr:nth-child(odd) td:nth-child(2),
.class-table tbody tr:nth-child(odd) td:nth-child(4) { background: #FFF8DE; }
.class-table .row-section th {
  background: #f9f9f9;
  color: var(--black);
  font-size: 20px;
  text-align: center;
}

/* Photo and logo grids with captions. */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 30px;
  margin: 0 0 60px;
}
.figure-grid figure { margin: 0; text-align: center; }
.figure-grid img { display: block; width: 100%; border-radius: 20px; }
.figure-grid figcaption { margin-top: 12px; font-size: 18px; }
.figure-grid .award { display: block; font-size: 22px; font-weight: 700; color: var(--red); }
.figure-grid .who { display: block; font-weight: 600; }
.figure-grid .judge { display: block; font-size: 15px; }
.figure-grid.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.figure-grid.logos figure { flex: 0 1 260px; }
.figure-grid.logos img { border-radius: 10px; }

/* Link list (Links page). */
.link-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin: 0 0 40px;
  padding: 0;
}
.link-list li { list-style: none; padding: 20px; background: var(--grey); border-radius: 16px; }
.link-list a { display: block; font-size: 18px; font-weight: 800; line-height: 22px; word-break: break-word; }
.link-list span { display: block; margin-top: 6px; font-size: 18px; font-weight: 500; line-height: 22px; }

/* Contact details with small icons. */
.icon-list.left li { justify-content: flex-start; }

.map-frame {
  display: block;
  width: 100%;
  height: 450px;
  margin-bottom: 40px;
  border: 0;
  border-radius: 20px;
}

/* Banner with a background picture (Media Centre). */
.banner {
  padding: 50px;
  border-radius: 30px;
  background: var(--red) url("/images/2024/06/Group-10657-1.png") right center / cover no-repeat;
  color: var(--white);
}
.banner h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; max-width: 60%; }
.banner a { color: var(--white); }
.banner p { max-width: 60%; font-size: 18px; }

.price-big { font-size: 45px; font-weight: 600; color: var(--red); margin: 0; }

.menu-list h3 { margin: 30px 0 10px; font-size: 22px; letter-spacing: 0.3em; color: var(--red); }
.menu-list dl { margin: 0; }
.menu-list dt { margin-top: 14px; font-weight: 700; }
.menu-list dd { margin: 2px 0 0; }

.markings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 40px; }
.markings div { padding: 24px; border-radius: 16px; background: var(--pink); }
.markings h3 { margin-bottom: 8px; font-size: 22px; color: var(--red); }
.markings p { margin: 0; }

.winners { columns: 2 380px; column-gap: 40px; font-size: 17px; }
.winners li { break-inside: avoid; margin-bottom: 0.4em; }

/* ---------- Entry form ---------- */

.entry-form { max-width: 1000px; margin: 0 auto 40px; font-size: 17px; }
.form-block {
  margin: 0 0 30px;
  padding: 30px;
  border: 0;
  border-radius: 20px;
  background: var(--grey);
}
.form-block legend {
  float: left;
  width: 100%;
  margin-bottom: 16px;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
}
.form-block legend + * { clear: both; }
.radio-row { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.radio-row label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.radio-row input { width: 20px; height: 20px; accent-color: var(--red); }
.hint { margin: 8px 0 0; font-size: 15px; color: #444; }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 20px; }
.field.wide { grid-column: 1 / -1; }
.field label, .class-box label { display: block; margin-bottom: 6px; font-weight: 600; }
.entry-form input[type="text"],
.entry-form input[type="tel"],
.entry-form input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #b5b5b5;
  border-radius: 8px;
  background: var(--white);
  font: inherit;
}
.entry-form input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; border-color: var(--black); }
.entry-form input:user-invalid { border-color: var(--red); background: var(--pink); }

.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.class-box label { margin-bottom: 3px; font-size: 13px; font-weight: 500; color: #444; }
.class-box input { text-align: center; letter-spacing: 0.05em; }

/* Honeypot: off-screen for people, still there for bots. */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.fee-box {
  margin: 0 0 20px;
  padding: 24px;
  border-radius: 20px;
  background: var(--red);
  color: var(--white);
  text-align: center;
  font-size: 22px;
}
.fee-box p { margin: 0 0 6px; }
.fee-box strong { color: var(--yellow); font-size: 30px; }
.fee-box .hint { color: var(--white); font-size: 15px; }
.fee-box .no-refunds { margin-top: 10px; font-size: 17px; font-weight: 700; }
.entry-form input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #b5b5b5;
  border-radius: 8px;
  background: var(--white);
  font: inherit;
}
.entry-form input.short-number { max-width: 140px; }

.form-problem {
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--pink);
  border: 2px solid var(--red);
  color: var(--black);
  font-weight: 600;
  text-align: center;
}

/* ---------- Server pages (pay.asp, entry.asp) ---------- */

.test-banner {
  margin: 0;
  padding: 12px 16px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  text-align: center;
  outline: 3px dashed var(--black);
  outline-offset: -6px;
}
.summary-table th[scope="row"] {
  width: 40%;
  background: var(--pink);
  color: var(--black);
  text-align: left;
}
.summary-table td { text-align: left; }
.bird-list { columns: 3 160px; }
.test-output { margin-top: 40px; padding: 20px; border: 2px dashed var(--black); border-radius: 10px; background: #FFF8DE; }
.test-output pre { white-space: pre-wrap; font-size: 14px; }

@media (max-width: 768px) {
  .form-block { padding: 20px 16px; }
  .field-grid { grid-template-columns: 1fr; }
  .class-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
}

@media (max-width: 1440px) {
  .intro-show { font-size: 40px; line-height: 50px; }
  .page-intro .bar { width: 15%; }
}
@media (max-width: 768px) {
  .intro-show { font-size: 30px; line-height: 38px; }
  .intro-title, .sub-title { font-size: 24px; }
  .intro-year { font-size: 24px; }
  .page-intro .bar { width: 100px; }
  .split, .split.reverse, .card-row { flex-direction: column; }
  .banner { padding: 24px; background-image: none; }
  .banner h2, .banner p { max-width: 100%; }
  .prose { font-size: 16px; }
  .map-frame { height: 320px; }
  .data-table { font-size: 14px; }
  .data-table th, .data-table td { padding: 0.6em 0.35em; }
  .btn-small { padding: 5px 10px; }
}
@media (max-width: 430px) {
  .intro-show { font-size: 24px; line-height: 30px; }
  .card { padding: 24px 18px; }
  .price-big { font-size: 32px; }
}