/* ===== DEL MAR RACING: where the turf meets the surf ===== */
:root{
  --dmr-green:#1E3A2B; --dmr-ox:#6E1F24; --dmr-brass:#A9844D; --dmr-brass-2:#C9A66B; --dmr-surf:#2F6F8F;
  --dmr-paper:#F4EFE4; --dmr-line:rgba(30,58,43,.18); --dmr-ink:#13261C;
}
@media (prefers-color-scheme: dark){
  :root{ --dmr-paper:#121A15; --dmr-line:rgba(201,166,107,.22); --dmr-brass:#C9A66B; --dmr-surf:#7FB6D1; }
}

/* harlequin diamonds: the signature */
.dmr-diamonds{
  --a:#1E3A2B; --b:#F4EFE4; --s:34px;
  background:
    conic-gradient(from 45deg at 50% 50%, var(--a) 0 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0) 0 0 / var(--s) var(--s);
}
.dmr-band{ height:22px; --s:22px; }
.dmr-band.ox{ --a:#6E1F24; --b:#C9A66B; }

/* hero */
.dmr-hero{ position:relative; overflow:hidden; background:#13261C; color:#F4EFE4; padding:0; }
.dmr-hero-field{ position:absolute; inset:0; --a:#1A3326; --b:#21402F; --s:120px; opacity:1; }
.dmr-hero-field::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 60%, rgba(19,38,28,.2), rgba(10,18,13,.92) 75%); }
.dmr-hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; min-height:84vh; padding-top:70px; padding-bottom:70px; }
.dmr-hero .tag{ display:inline-block; font:11.5px 'IBM Plex Mono',monospace; letter-spacing:2px; text-transform:uppercase; color:var(--dmr-brass-2); border:1px solid rgba(201,166,107,.55); padding:6px 14px; border-radius:999px; }
.dmr-hero h1{ color:#FFFFFF; font-size:clamp(64px,12vw,168px); line-height:.86; font-weight:460; letter-spacing:-.025em; margin-top:22px; }
.dmr-hero h1 em{ display:block; font-size:.3em; font-weight:380; font-style:italic; letter-spacing:0; color:var(--dmr-brass-2); margin-top:.5em; }
.dmr-hero p.lede{ color:#D9D3C4; max-width:540px; font-size:17px; margin-top:18px; }
.dmr-hero .acts{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.dmr-hero .btn-solid{ background:var(--dmr-brass-2); color:#13261C; }
.dmr-hero .btn-outline{ border-color:rgba(255,255,255,.35); color:#fff; }
.dmr-hero-silks{ justify-self:center; width:min(360px,80vw); filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
@media (max-width:900px){ .dmr-hero .wrap{ grid-template-columns:1fr; min-height:0; } .dmr-hero-silks{ width:220px; order:-1; justify-self:start; } }

/* status strip */
.dmr-status{ padding:0; background:#0E1B13; color:#F1ECE0; border-top:1px solid rgba(201,166,107,.35); }
.dmr-status .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.dmr-status .c{ padding:20px 20px 18px; border-left:1px solid rgba(201,166,107,.18); }
.dmr-status .c:first-child{ border-left:0; padding-left:0; }
.dmr-status .k{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.5px; text-transform:uppercase; color:var(--dmr-brass-2); }
.dmr-status .v{ font-family:'Fraunces',Georgia,serif; font-size:26px; color:#FFFFFF; margin-top:6px; line-height:1.1; }
.dmr-status .s{ font-size:13px; color:#B9B4A6; margin-top:4px; }
.dmr-live{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#3FD07A; margin-right:8px; vertical-align:middle; }
@media (max-width:860px){ .dmr-status .wrap{ grid-template-columns:repeat(2,1fr); } .dmr-status .c:nth-child(3){ border-left:0; padding-left:0; } }

.dmr-eyebrow{ color:var(--dmr-brass) !important; }
.dmr-paper{ background:var(--dmr-paper); }
.dmr-src{ margin-top:18px; font-size:12px; color:var(--text-faint); }
.dmr-src a{ text-decoration:underline; }

/* the meets */
.dmr-meets{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.dmr-meet{ border:1px solid var(--line); background:var(--bg-card); display:flex; flex-direction:column; }
.dmr-meet .top{ height:14px; --s:14px; }
.dmr-meet .in{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.dmr-meet .k{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.4px; text-transform:uppercase; color:var(--dmr-brass); }
.dmr-meet h3{ font-size:26px; font-weight:460; margin:8px 0 6px; }
.dmr-meet .dates{ font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:19px; color:var(--text); }
.dmr-meet p{ font-size:14.5px; color:var(--text-soft); margin:12px 0 0; }
.dmr-meet .pill{ margin-top:auto; padding-top:18px; font:600 11px 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--dmr-ox); }
@media (prefers-color-scheme: dark){ .dmr-meet .pill{ color:#D0757A; } }
@media (max-width:900px){ .dmr-meets{ grid-template-columns:1fr; } }

/* big days */
.dmr-days{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:2px solid var(--dmr-brass); }
.dmr-day{ display:grid; grid-template-columns:96px 1fr; gap:20px; padding:26px 22px 26px 0; border-bottom:1px solid var(--dmr-line); }
.dmr-day:nth-child(odd){ border-right:1px solid var(--dmr-line); }
.dmr-day:nth-child(even){ padding-left:26px; }
.dmr-day .when{ font-family:'Fraunces',Georgia,serif; font-size:40px; line-height:.95; color:var(--dmr-green); }
@media (prefers-color-scheme: dark){ .dmr-day .when{ color:var(--dmr-brass-2); } }
.dmr-day .when small{ display:block; font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-faint); margin-top:6px; }
.dmr-day h3{ font-size:21px; font-weight:560; margin:0 0 6px; }
.dmr-day p{ margin:0; font-size:14.5px; color:var(--text-soft); }
@media (max-width:860px){ .dmr-days{ grid-template-columns:1fr; } .dmr-day:nth-child(odd){ border-right:0; } .dmr-day:nth-child(even){ padding-left:0; } }

/* silks studio */
.dmr-studio{ display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:center; }
.dmr-studio-stage{ background:var(--dmr-ink); border-radius:2px; display:flex; align-items:center; justify-content:center; padding:36px; min-height:420px; position:relative; overflow:hidden; }
.dmr-studio-stage::before{ content:""; position:absolute; inset:0; --a:#1A3326; --b:#203D2D; --s:60px; background:conic-gradient(from 45deg at 50% 50%, var(--a) 0 25%, var(--b) 0 50%, var(--a) 0 75%, var(--b) 0) 0 0 / var(--s) var(--s); opacity:.8; }
.dmr-studio-stage svg{ position:relative; width:min(320px,90%); height:auto; filter:drop-shadow(0 24px 30px rgba(0,0,0,.5)); }
.dmr-studio-name{ position:absolute; left:20px; bottom:16px; font:11px 'IBM Plex Mono',monospace; letter-spacing:1.4px; text-transform:uppercase; color:#C9A66B; }
.dmr-ctl{ margin-top:20px; }
.dmr-ctl .lab{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
.dmr-swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.dmr-swatches button{ width:34px; height:34px; border-radius:50%; border:2px solid var(--bg); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; }
.dmr-swatches button.is-on{ box-shadow:0 0 0 2px var(--text); }
.dmr-patterns{ display:flex; flex-wrap:wrap; gap:8px; }
.dmr-patterns button{ font:500 13px 'Archivo',sans-serif; padding:8px 14px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; border-radius:2px; }
.dmr-patterns button.is-on{ background:var(--dmr-green); color:#F4EFE4; border-color:var(--dmr-green); }
@media (prefers-color-scheme: dark){ .dmr-patterns button.is-on{ background:var(--dmr-brass-2); color:#13261C; border-color:var(--dmr-brass-2); } }
.dmr-studio .note{ font-size:13px; color:var(--text-faint); margin-top:18px; }
@media (max-width:900px){ .dmr-studio{ grid-template-columns:1fr; } .dmr-studio-stage{ min-height:320px; } }

/* racing 101 */
.dmr-101{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.dmr-101 > div{ border-top:2px solid var(--dmr-green); padding-top:16px; }
@media (prefers-color-scheme: dark){ .dmr-101 > div{ border-top-color:var(--dmr-brass-2); } }
.dmr-101 h3{ font-size:20px; font-weight:560; margin:0 0 8px; }
.dmr-101 p{ font-size:14.5px; color:var(--text-soft); margin:0; }
.dmr-101 dl{ margin:10px 0 0; display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:14px; }
.dmr-101 dt{ font-weight:600; }
.dmr-101 dd{ margin:0; color:var(--text-soft); }
@media (max-width:900px){ .dmr-101{ grid-template-columns:1fr; } }

/* history */
.dmr-hist{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.dmr-hist > div{ padding:26px 18px 24px; border-left:1px solid var(--line-soft); }
.dmr-hist > div:first-child{ border-left:0; padding-left:0; }
.dmr-hist b{ display:block; font-family:'Fraunces',Georgia,serif; font-weight:460; font-size:clamp(34px,3.6vw,48px); line-height:1; color:var(--dmr-green); }
@media (prefers-color-scheme: dark){ .dmr-hist b{ color:var(--dmr-brass-2); } }
.dmr-hist h3{ font-size:16px; font-weight:600; margin:12px 0 6px; font-family:'Archivo',sans-serif; }
.dmr-hist p{ margin:0; font-size:14px; color:var(--text-soft); }
@media (max-width:980px){ .dmr-hist{ grid-template-columns:repeat(2,1fr); } .dmr-hist > div{ border-left:0; padding-left:0; border-top:1px solid var(--line-soft); } .dmr-hist > div:nth-child(-n+2){ border-top:0; } }

/* nearby */
.dmr-near{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.dmr-near a{ display:block; border:1px solid var(--line); padding:24px; background:var(--bg-card); transition:border-color .2s; }
.dmr-near a:hover{ border-color:var(--dmr-brass); }
.dmr-near .k{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.4px; text-transform:uppercase; color:var(--dmr-brass); }
.dmr-near h3{ font-size:22px; margin:8px 0 8px; }
.dmr-near p{ margin:0; font-size:14.5px; color:var(--text-soft); }
.dmr-near .go{ display:block; margin-top:14px; font:12.5px 'IBM Plex Mono',monospace; color:var(--dmr-brass); }
@media (max-width:900px){ .dmr-near{ grid-template-columns:1fr; } }

.dmr-form input, .dmr-form textarea{ padding:14px 16px; border-radius:2px; border:1px solid rgba(201,166,107,.35); background:#0F1C14; color:#F5F5F3; font-family:Archivo,sans-serif; font-size:15px; }
.dmr-form button{ background:#C9A66B; color:#13261C; border:0; cursor:pointer; }

/* Del Mar town page: racing banner */
.dmr-banner{ display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; background:#13261C; color:#F4EFE4; padding:0; overflow:hidden; border-radius:2px; }
.dmr-banner .sw{ width:120px; align-self:stretch; --s:30px; }
.dmr-banner .tx{ padding:26px 0; }
.dmr-banner .k{ font:10.5px 'IBM Plex Mono',monospace; letter-spacing:1.5px; text-transform:uppercase; color:#C9A66B; }
.dmr-banner h3{ color:#FFFFFF; font-size:26px; margin:6px 0 4px; }
.dmr-banner p{ margin:0; color:#C9C4B7; font-size:14.5px; }
.dmr-banner .go{ padding-right:28px; font:600 13px 'IBM Plex Mono',monospace; color:#C9A66B; white-space:nowrap; }
@media (max-width:700px){ .dmr-banner{ grid-template-columns:1fr; } .dmr-banner .sw{ height:18px; width:auto; --s:18px; } .dmr-banner .tx, .dmr-banner .go{ padding:0 22px; } .dmr-banner .go{ padding-bottom:22px; } }
