/* Kent Prep — stage4 theme variation: "White & Black"
   Loaded after site.css when THEME = 'bw' in build.py.
   Gallery white, ink black, soft greys; photography stays in full colour.
   Same greys as es/zh/ja/ko/fr.kentprep.com so the language family matches. */
:root{
  --white:#FFFFFF;
  --ivory:#F7F7F7;
  --pearl:#F3F3F3;
  --sand:#E9E9E9;
  --gold:#0A0A0A;          /* former champagne accents -> black */
  --gold-lt:#BDBDBD;
  --gold-dk:#5A5A5A;
  --silver:#9A9A9A;
  --silver-lt:#DADADA;
  --pewter:#767676;
  --espresso:#0A0A0A;      /* dark bands, headings */
  --espresso-2:#1A1A1A;
  --brown:#333333;
  --burgundy:#111111;      /* former text accents -> ink */
  --burgundy-dk:#000000;
  --ink:#111111;
  --muted:#5A5A5A;
  --rule:#E0E0E0;
  --rule-dark:rgba(255,255,255,.16);
  --black:#000000;
  --black-2:#2A2A2A;
}
html{background:#FFFFFF}
body{background:#F7F7F7}
.skip{background:#000;color:#fff}

/* type: a little more contrast and air, the way a monochrome page needs */
h1,h2,h3,h4{color:#0A0A0A}
.kicker{color:#5A5A5A;letter-spacing:.01em}
.sec-head h2{letter-spacing:-.01em}

/* ornament: black hairline + small black diamond */
.rule::before{border-top-color:#0A0A0A}
.rule::after{background:#0A0A0A}

/* header */
.site-header{border-bottom-color:#E0E0E0}
.site-header.scrolled{box-shadow:0 14px 30px -24px rgba(0,0,0,.35)}
.nav-row{border-top-color:#EDEDED}
.nav>ul>li>a,.nav>ul>li>button{color:#111}
.nav>ul>li.current>a,.nav>ul>li.current>button{color:#000}
.nav .chev{color:#111}
.sub{border-top:2px solid #000;box-shadow:0 26px 50px -30px rgba(0,0,0,.35)}
.sub a:hover,.sub a[aria-current]{background:#F3F3F3;color:#000}

/* buttons: black on light, white on dark */
.btn-primary{background:#000;color:#fff;border-color:#000}
.btn-primary:hover{background:#fff;color:#000;border-color:#000}
.btn-brass{background:#fff;color:#000;border-color:#fff}
.btn-brass:hover{background:transparent;color:#fff;border-color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:#fff;color:#000;border-color:#fff}
.btn-line{border-color:#000;color:#000}
.btn-line:hover{background:#000;color:#fff}
.prose a.btn-primary:hover{color:#000}
.prose a.btn-brass:hover{color:#fff}

/* home hero */
.hero{background:#000}
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.3) 45%,rgba(0,0,0,.74) 100%)}
.hero .lede{color:#E6E6E6}
.video-toggle{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.45)}
.video-toggle:hover{border-color:#fff}

/* finder bar */
.finder{border-top:2px solid #000;box-shadow:0 30px 60px -38px rgba(0,0,0,.45)}
.finder select{color:#0A0A0A;border-bottom-color:#DADADA}
.finder select:focus{border-bottom-color:#000}
.finder .counsel{background:#F3F3F3}
.finder .counsel a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* dark bands */
.bg-espresso,.bg-midnight{background:#0A0A0A;color:#D9D9D9}
.bg-espresso .kicker,.bg-midnight .kicker{color:#BDBDBD}
.bg-espresso .intro,.bg-midnight .intro{color:#BDBDBD}
.bg-espresso .rule::before,.bg-midnight .rule::before{border-top-color:rgba(255,255,255,.55)}
.bg-espresso .rule::after,.bg-midnight .rule::after{background:#fff}
.bg-burgundy,.bg-navy{background:#111;color:#E6E6E6}
.bg-burgundy .kicker,.bg-navy .kicker{color:#BDBDBD}

/* news cards */
.news a{border-color:#E0E0E0}
.news a:hover{border-color:#000}
.news em{color:#000;border-bottom-color:#000}

/* test arches */
.suite .arch{background:#E9E9E9}
.suite:hover h3{color:#000;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* residential arches on black */
.retreat .arch{border-color:rgba(255,255,255,.35)}
.retreat p{color:#BDBDBD}
.retreat .go{color:#fff;border-bottom-color:#fff}

/* admissions columns */
.services{border-top-color:#000;border-bottom-color:#000}
.services a+a{border-left-color:#E0E0E0}
.services em{color:#000}
.services a:hover h3,.services a:hover h2{color:#000;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media(max-width:960px){.services a:nth-child(n+3){border-top-color:#E0E0E0}}
@media(max-width:560px){.services a+a{border-top-color:#E0E0E0}}

/* location card */
.location{background:#000}
.location::after{background:linear-gradient(90deg,rgba(0,0,0,.1),rgba(0,0,0,.42))}
.loc-card{outline:1px solid #000;outline-offset:-14px}
.loc-card address{color:#0A0A0A}
.loc-card p a{color:#000!important}

/* interior page banner */
.page-hero{background:#000}
.page-hero::after{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.7))}
.page-hero h1::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Cline x1='0' y1='5' x2='120' y2='5' stroke='%23FFFFFF' stroke-opacity='.7' stroke-width='1'/%3E%3Crect x='56' y='1' width='8' height='8' fill='%23FFFFFF' transform='rotate(45 60 5)'/%3E%3C/svg%3E")}
.page-hero .lede{color:#E6E6E6}
.crumbs{color:#CFCFCF}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.crumbs span{color:#9A9A9A}
.post-meta{color:#CFCFCF}

/* page body */
.prose a{color:#000;text-decoration-color:#9A9A9A}
.prose a:hover{color:#000;text-decoration-color:#000}
.prose h4{color:#000}
.prose ul li::marker{color:#000}
.prose ol li::marker{color:#000}
.prose blockquote{border-color:#000;color:#222}
.prose th{color:#000;border-bottom-color:#000}
.prose td{border-bottom-color:#E0E0E0}
.video{outline-color:#DADADA}
.facts{border-color:#000;background:#F7F7F7}
.facts dd{color:#0A0A0A}
.facts.words dt{color:#000}
details.faq summary{color:#0A0A0A}
details.faq summary::after{border-color:#000}
.testimonials{border-top-color:#000}
table.schedule td:first-child{color:#000}
.tier{background:#F7F7F7}
.tier-premier{background:#fff;border-color:#000;outline-color:#BDBDBD}
.notice{border-color:#000;background:#F7F7F7}

/* counselor card */
.concierge{background:#0A0A0A;color:#CFCFCF;outline:1px solid rgba(255,255,255,.28);outline-offset:-10px}
.concierge .ttl::after{background:rgba(255,255,255,.55)}
.concierge .line:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.aside-nav .ttl{color:#5A5A5A}
.aside-nav ul{border-top-color:#000}
.aside-nav a:hover,.aside-nav a[aria-current]{color:#000}

/* forms */
.form-section{background:#F3F3F3}
.form-frame{border-color:#000;outline-color:#DADADA}
.form-note a{color:#000}
.kp-form input[type=text],.kp-form input[type=email],.kp-form input[type=tel],.kp-form input[type=number],.kp-form select,.kp-form textarea{background:#FAFAFA;border-color:#D4D4D4}
.kp-form input:focus,.kp-form select:focus,.kp-form textarea:focus{border-color:#000;background-color:#fff;box-shadow:0 0 0 3px rgba(0,0,0,.07)}
.kp-form .amount span{background:#F3F3F3}
.opt input{border-color:#9A9A9A}
.opt input::before{background:#000}
.opt input:checked{border-color:#000}
.f-head{border-top-color:#DADADA}
.f-note a{color:#000}
.f-policy{background:#FAFAFA}
.f-policy li::marker{color:#000}
.f-status.warn{color:#5A5A5A}
.f-status.ok{color:#111}
.school-search input:focus{outline-color:#000;border-color:#000}
.school-list{background:#FAFAFA}
.school-group h4{color:#000}

/* blog */
.post-card .thumb{background:#E9E9E9}
.post-card time{color:#5A5A5A}
.post-card:hover h2{color:#000;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.post-card.feature{border-bottom-color:#000}
.post-nav{border-top-color:#000}
.post-nav a:hover span{color:#000;text-decoration:underline;text-underline-offset:4px}

/* footer: black */
.site-footer{background:#000;color:#A8A8A8}
.foot-brand address,.foot-brand a{color:#E6E6E6}
.foot-brand a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-orn::before{border-top-color:rgba(255,255,255,.3)}
.foot-orn::after{background:#fff}
.foot-col .ttl,.foot-col .ttl a{color:#fff}
.foot-col a{color:#BDBDBD}
.foot-col a:hover{color:#fff}
.foot-legal{color:#8A8A8A}

/* phones/browsers in dark mode: black header band with the white logo */
@media (prefers-color-scheme: dark){
  .site-header{background:#000;border-bottom-color:rgba(255,255,255,.16)}
  .nav-row{border-top-color:rgba(255,255,255,.14)}
  .menu-toggle{color:#fff}
  .crest-right .header-cta{background:#fff;color:#000;border-color:#fff;box-shadow:none}
  .crest-right .header-cta:hover{background:transparent;color:#fff}
  @media (min-width:1121px){
    .nav>ul>li>a,.nav>ul>li>button,.nav .chev{color:#fff}
    .nav>ul>li.current>a,.nav>ul>li.current>button{color:#fff}
    .nav>ul>li>a::after,.nav>ul>li>button::after{background:#fff}
  }
}
.prose .label{color:#000}
