/* Fieldguide theme: deep navy page, gold accents. Loads after style.css and overrides its light defaults. */
:root{color-scheme:dark;--ink:#f1f4f9;--muted:#9db0c7;--green:#d8ac63;--lime:#d8ac63;--bg:#0f2034;--line:#27415f;--surface:#152a45;--surface-2:#1b3556;--navy-deep:#0a1727;--gold:#d8ac63;--gold-hi:#ecc983}
body{background:var(--bg);color:var(--ink)}
a{color:var(--gold-hi)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Top bar */
.notice{background:var(--navy-deep);color:var(--gold-hi);border-bottom:1px solid var(--line)}
header{background:var(--bg);border-bottom:1px solid var(--line);padding:18px 5%}
.brand{letter-spacing:0;font-size:22px;font-weight:700;font-family:Manrope,system-ui,sans-serif;color:#fff}
.brand .logo{width:30px;height:30px;color:var(--gold);flex:none}
.brand small{color:var(--muted);font-family:'DM Sans',system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:.4px;border-left:1px solid var(--line)}
nav a{color:#d6dfeb}
nav a:hover{color:#fff}
nav a.active{color:var(--gold-hi);font-weight:700}

/* Hero */
.intro{text-align:center;max-width:1000px;margin:34px auto 40px}
.intro .eyebrow{color:var(--gold);letter-spacing:.14em;font-size:12px}
.intro h1{font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:600;margin:18px auto 20px;color:#fff}
.intro .lead{font-size:clamp(1rem,1.6vw,1.2rem);color:#cdd8e6;max-width:640px;margin:0 auto 34px}
.hero-search{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 10px 10px 18px;max-width:1100px;margin:0 auto;text-align:left}
.hero-search>svg{flex:none;width:20px;height:20px;color:#5b6778}
.hero-search input{border:0;background:transparent;color:#1a2536;font-size:16px;padding:12px 4px;border-radius:0;flex:1;min-width:0}
.hero-search input::placeholder{color:#5f6b7c}
.hero-search input:focus{outline:none}
.hero-search:focus-within{box-shadow:0 0 0 3px var(--gold-hi)}
.hero-search button{flex:none;width:48px;height:48px;padding:0;border-radius:12px;display:grid;place-items:center}

/* Two feature cards */
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:60px}
.feature{display:block;color:var(--ink);text-decoration:none}
.feature-art{aspect-ratio:16/10;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--surface) center/cover no-repeat}
.feature:hover .feature-art,.feature:focus-visible .feature-art{border-color:var(--gold)}
.feature h2{font-size:18px;font-weight:600;letter-spacing:0;margin:14px 0 2px;color:#fff}
.feature p{margin:0;font-size:14px;color:var(--muted)}
.art-house{background-image:url('brownstones.svg')}
.art-academy{background:linear-gradient(135deg,#17365b,#0d1c30);display:grid;place-items:center;padding:8%}
.lessons{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.lessons span{min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;aspect-ratio:3/4}
.lessons strong{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;border-radius:6px;padding:10px;background:linear-gradient(135deg,var(--gold),#b78d3f);color:#0f2034;font-size:clamp(.72rem,1.15vw,.95rem);line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.lessons small{font-size:.68em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}

/* Section headings and filters */
.section-head{scroll-margin-top:20px}
.eyebrow{color:var(--gold)}
.pill,.badge{background:rgba(216,172,99,.14);color:var(--gold-hi);border:1px solid rgba(216,172,99,.35);font-size:11px}
.filters,.panel,.card,.empty{background:var(--surface);border:1px solid var(--line)}
.empty{border-style:dashed;color:var(--muted)}
label{color:var(--muted)}
input,select,textarea{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
input::placeholder,textarea::placeholder{color:#7c90a9}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-hi);outline-offset:1px}

/* Buttons */
button,.button{background:var(--gold);color:#0f2034;font-family:inherit;font-size:13px;font-weight:700}
button:hover,.button:hover{background:var(--gold-hi);filter:none}
button.secondary,.button.secondary{background:transparent;color:var(--ink);border:1px solid #3a5778}
button.secondary:hover,.button.secondary:hover{background:var(--surface-2);border-color:var(--gold)}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}

/* Property cards */
.card h3{color:#fff}
.card a{color:var(--gold-hi)}
.price{color:var(--gold-hi)}
.house .badge{background:var(--navy-deep);color:var(--gold-hi);border:1px solid rgba(216,172,99,.45)}
.save{background:var(--navy-deep);color:var(--ink);border:1px solid var(--line)}
.save.saved{background:var(--gold);color:#0f2034;border-color:var(--gold)}
.card:hover{border-color:#3a5778}

/* Panels, tables, calculator */
.metric{background:var(--bg);border:1px solid var(--line)}
.metric b{color:var(--gold-hi)}
.warning{background:rgba(216,172,99,.12);color:#ecd9aa;border:1px solid rgba(216,172,99,.35)}
th{color:var(--muted)}
th,td,.card-bottom,.detail-data div{border-color:var(--line)}
td a,.back,.lesson a{color:var(--gold-hi)}
.course .number{color:var(--gold)}
.progress{background:#27415f}
.progress span{background:var(--gold)}
.callout{background:linear-gradient(110deg,var(--surface),var(--surface-2));border:1px solid var(--line);border-top:3px solid var(--gold)}
.callout p{color:#cdd8e6}
.callout .button{background:var(--gold);color:#0f2034}

/* Footer and toast */
footer{background:var(--navy-deep);color:var(--ink);border-top:1px solid var(--line)}
footer b{color:var(--gold);font-family:Manrope,system-ui,sans-serif;font-size:15px}
footer span{color:#d6dfeb}
footer p{color:var(--muted)}
#toast{background:var(--surface-2);color:#fff;border:1px solid var(--gold)}

@media(max-width:900px){
  nav{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}
  nav a{white-space:nowrap}
  .features{gap:14px}
}
@media(max-width:600px){
  .intro{margin-top:18px}
  .hero-search{padding-left:14px}
  .brand small{display:none}
}

/* Narrow screens: stack the Academy course labels as rows so nothing breaks mid-word */
@media(max-width:820px){
  .features{grid-template-columns:1fr}
  .art-academy{aspect-ratio:auto;padding:16px}
  .lessons{grid-template-columns:1fr;gap:8px}
  .lessons span{aspect-ratio:auto;padding:0;border:0;background:none}
    .lessons strong{flex:none;margin:0;padding:11px 14px;flex-direction:row;align-items:baseline;gap:10px;font-size:.95rem}
  .lessons small{white-space:nowrap}
}
.detail-photo{background-position:center 80%}