/* United Downs Raceway: converted from the static design (design/udr). Colours and type live in the variables below. */
:root{
  --ink:#141414; --paper:#F2EFE8; --sand:#E6E1D6; --sand-2:#DCD6CA; --line:#C9C3B7; --yellow:#F5C400;
  --mute:#55524C; --soft:#CFCAC0; --dim:#B5B0A6; --panel:#262624; --panel-line:#3A3A38;
  --display:'Anton',sans-serif; --cond:'Barlow Condensed',sans-serif; --body:'Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);font-family:var(--body);color:var(--ink);min-height:100vh}
a{color:var(--ink)} a:hover{color:#4a4a4a}
img{max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.checker{height:14px;background:repeating-conic-gradient(#141414 0 25%,#F2EFE8 0 50%) 0 0/14px 14px}
.announcement-bar{background:var(--yellow);color:var(--ink);text-align:center;padding:8px 16px;font-family:var(--cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.announcement-bar a{color:var(--ink)}

/* Header */
.site-head{background:var(--ink);color:var(--paper);border-bottom:4px solid var(--yellow)}
.head-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper)}
.brand svg{flex:none}
.brand-logo{display:block;height:56px;width:auto;max-width:100%}
@media (max-width:640px){.brand-logo{height:44px}}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--display);font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.brand-sub{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--yellow);margin-top:4px}
.nav{display:flex;flex-wrap:wrap;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-family:var(--cond);font-weight:600;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.nav a:hover,.nav a:focus-visible{box-shadow:inset 0 -3px 0 var(--soft)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--yellow)}

/* Buttons */
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;background:transparent}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{color:var(--paper);background:#333}
.btn-lg{min-height:52px;padding:0 28px;font-size:20px}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.btn-yellow:hover{color:var(--ink);background:#ffd633}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{color:var(--paper);background:#2a2a2a}
.btn-outline-yellow{border-color:var(--yellow);color:var(--yellow)}
.btn-outline-yellow:hover{color:var(--yellow);background:#2a2a2a}

/* Dark sections: hero and page heads */
.dark{background:var(--ink);color:var(--paper)}
.eyebrow{font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--yellow)}
.dark h1,.page-head h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(52px,7vw,96px);line-height:.95;text-transform:uppercase}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:end;padding-top:72px;padding-bottom:88px}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero-copy h1{font-size:clamp(52px,7vw,104px)}
.hero-copy p{margin:0;font-size:20px;line-height:1.55;color:var(--soft);max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero-card{border:2px solid var(--panel-line)}
.hero-photo{height:260px;background:var(--panel) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#8F8A80;font-family:var(--cond);font-size:18px;letter-spacing:.1em;text-transform:uppercase;padding:16px;text-align:center}
.next{padding:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.next-when{display:flex;gap:20px;align-items:center}
.date-block{display:flex;flex-direction:column;align-items:center;line-height:1}
.next .date-block{color:var(--yellow)}
.date-block b{font-family:var(--display);font-weight:400;font-size:56px}
.date-block span{font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.2em;text-transform:uppercase}
.next-info{display:flex;flex-direction:column;gap:4px}
.next-label{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.next-title{font-family:var(--cond);font-weight:700;font-size:26px;text-transform:uppercase}
.next-sub{font-size:16px;color:var(--soft)}
.page-head{padding-top:64px;padding-bottom:64px;display:flex;flex-direction:column;gap:16px}
.page-head h1{font-size:clamp(52px,7vw,96px)}
.page-head p{margin:0;font-size:19px;line-height:1.55;color:var(--soft);max-width:40em}

/* Stats band */
.stats{background:var(--yellow);color:var(--ink)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;padding-top:32px;padding-bottom:32px}
.stat{display:flex;flex-direction:column;gap:4px}
.stat b{font-family:var(--display);font-weight:400;font-size:48px;line-height:1}
.stat span{font-family:var(--cond);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.06em}

/* Sections and headings */
.section{padding-top:88px;padding-bottom:88px;display:flex;flex-direction:column;gap:32px}
.section-tight{padding-top:72px;padding-bottom:72px}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
h2.display,.section h2,.prose h2.display{margin:0;font-family:var(--display);font-weight:400;font-size:56px;line-height:1;text-transform:uppercase}
.more-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.06em;text-transform:uppercase}

/* Fixtures list */
.fixtures{display:flex;flex-direction:column;border-top:3px solid var(--ink)}
.fixture{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.fixture .date-block{width:96px}
.fixture .date-block b{font-size:48px}
.fixture .date-block span{font-size:17px}
.fixture-body{flex-grow:1;display:flex;flex-direction:column;gap:6px;min-width:220px}
.fixture-body h3{margin:0;font-family:var(--cond);font-weight:700;font-size:30px;text-transform:uppercase}
.fixture-body p{margin:0;font-size:16px;color:var(--mute)}
.tag{align-self:flex-start;padding:3px 10px;background:var(--sand-2);font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.tag-racing{background:var(--yellow)}
.status{font-family:var(--cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#b00020}
.fixture.is-cancelled .fixture-body h3{text-decoration:line-through}
.month-title{margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:40px;text-transform:uppercase}

/* Two feature cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;padding-bottom:88px}
.card{display:flex;flex-direction:column;gap:16px;padding:40px;min-height:320px;justify-content:flex-end;text-decoration:none}
.card-dark{background:var(--ink);color:var(--paper)}
.card-dark:hover{color:var(--paper)}
.card-light{background:#fff;border:2px solid var(--ink)}
.card .eyebrow{font-size:15px}
.card-light .eyebrow{color:var(--mute)}
.card h3{margin:0;font-family:var(--display);font-weight:400;font-size:44px;line-height:1;text-transform:uppercase}
.card p{margin:0;font-size:18px;line-height:1.55}
.card-dark p{color:var(--soft)}
.card-light p{color:#3F3C37}
.card .go{font-family:var(--cond);font-weight:700;font-size:19px;letter-spacing:.06em;text-transform:uppercase}

/* Plan your visit */
.visit{background:var(--sand)}
.visit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:start;padding-top:88px;padding-bottom:88px}
.visit-copy{display:flex;flex-direction:column;gap:20px}
.visit-copy p{margin:0;font-size:19px;line-height:1.6}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:8px}
.fact{display:flex;flex-direction:column;gap:4px;padding:20px;background:var(--paper)}
.fact small{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.fact strong{font-size:18px;font-weight:600}
.map{height:420px;background:#CFC9BC;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--cond);font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:#3F3C37;text-align:center;padding:16px}
.map iframe{width:100%;height:100%;border:0}

/* Content pages (community, history) */
.prose{display:flex;flex-direction:column;gap:56px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.panel{display:flex;flex-direction:column;gap:14px;background:#fff;border:2px solid var(--ink);padding:0}
.panel .photo{height:220px;background:var(--sand-2) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--mute);font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:12px}
/* A picture placed in a panel's photo area fills it and crops itself to fit, so any picture works (1200 x 440 is ideal). The editor wraps pictures in a paragraph, so that is covered too. */
.panel .photo{overflow:hidden;padding:0}
.panel .photo p{display:block;width:100%;height:100%;margin:0}
.panel .photo .tv-link,.panel .photo .tv-frame{width:100%;height:100%;min-height:220px}
.panel .photo img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:center}
.panel .panel-body{display:flex;flex-direction:column;gap:12px;padding:0 28px 28px}
.panel h3{margin:0;font-family:var(--cond);font-weight:700;font-size:30px;text-transform:uppercase}
.panel p{margin:0;font-size:17px;line-height:1.55;color:#3F3C37}
.callout{background:var(--ink);color:var(--paper);padding:40px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.callout h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:36px;text-transform:uppercase}
.callout p{margin:0;color:var(--soft);font-size:18px}
.timeline{display:flex;flex-direction:column;border-top:3px solid var(--ink)}
.era{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.era-year{font-family:var(--display);font-size:36px;line-height:1}
.era-year.big{color:#b88f00}
.era p{margin:0 0 8px;font-size:18px;line-height:1.6}
.era strong{font-family:var(--cond);font-size:22px;text-transform:uppercase;letter-spacing:.03em}
@media (max-width:560px){.era{grid-template-columns:1fr;gap:8px}}

/* Gallery */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--ink);text-decoration:none;font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase}
.chips a[aria-current],.chips a.active{background:var(--ink);color:var(--paper)}

/* Footer */
.site-foot{background:var(--ink);color:var(--paper)}
.foot-row{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding-top:56px;padding-bottom:40px}
.foot-brand{display:flex;flex-direction:column;gap:10px;max-width:360px}
.foot-name{font-family:var(--display);font-size:32px;text-transform:uppercase}
.foot-brand span+span{font-size:16px;line-height:1.6;color:var(--dim)}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:flex-start}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);font-family:var(--cond);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.foot-nav a:hover{color:var(--yellow)}
.foot-nav a.accent{color:var(--yellow)}
.legal{padding-bottom:32px;font-size:14px;color:#8F8A80}

/* Article body (item pages, editor preview) */
.article{max-width:760px;margin:0 auto;padding:64px 24px}
.article-body{font-size:18px;line-height:1.65}
.article-body img{height:auto}
.lead{font-size:22px;line-height:1.5}
.small{font-size:14px}
.text-yellow{color:#b88f00}