/* Nahel Yanni, DDS — site-specific styles. Design plan: brand.md §6. */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:optional;src:url(https://fonts.gstatic.com/s/newsreader/v26/cY9VfjOCX1hbuyalUrK49dLafXjalZCsZBsSBgbNJYQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:optional;src:url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

h1,h2,h3{font-weight:500;letter-spacing:-.01em;color:var(--brand)}
h3{font-size:var(--fs-lg)}
.btn{font-weight:600;border-radius:var(--radius)}
.btn-primary{box-shadow:none}
.nav a{font-weight:600}
:focus-visible{outline-color:var(--accent)}

/* Header: logo, nav, a call button that stays visible on phones */
.site-header .container{gap:var(--s-3)}
.brand img{height:34px;width:auto}
.header-actions{display:flex;align-items:center;gap:var(--s-2)}
.header-actions .btn{padding:.65em 1em;min-height:44px}
.nav-toggle{min-width:44px;min-height:44px}
@media(max-width:860px){
  .site-header .container{flex-wrap:nowrap}
  .header-actions{order:2;margin-left:auto}
  .nav{order:3}
}
@media(max-width:420px){
  .brand img{height:26px}
  .call-long{display:none}
}
@media(min-width:421px){.call-short{display:none}}

/* Hero: headline and the call on the left, the real doctor on the right */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,4.5rem)}
.hero-grid{display:grid;gap:var(--s-6);align-items:center}
@media(min-width:880px){.hero-grid{grid-template-columns:1.15fr .85fr;gap:var(--s-8)}}
.hero h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.4rem);line-height:1.04;max-width:14ch;color:var(--ink)}
.hero .lede{color:var(--ink-2)}
.hero .when{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--ink-2)}
.hero .when strong{color:var(--ink)}
.portrait{margin:0;position:relative;max-width:440px;justify-self:center;width:100%}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border-radius:var(--radius);animation:settle 1.1s var(--ease) both}
.portrait figcaption{margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink-2)}
@keyframes settle{from{transform:scale(1.035)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.portrait img{animation:none}}
@media(max-width:879px){.portrait{max-width:360px;justify-self:start}}

/* The memorable thing: a patient's own words, set large on linen */
.voice{background:var(--linen);padding-block:clamp(3rem,7vw,6rem)}
.voice blockquote{margin:0;max-width:30ch;font-family:var(--font-display);font-size:clamp(1.8rem,1.2rem + 2.6vw,3.3rem);line-height:1.18;color:var(--ink)}
.voice blockquote p{max-width:none;margin:0}
.voice .who{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--ink-2)}

/* Two-column editorial sections */
.cols{display:grid;gap:var(--s-6)}
@media(min-width:880px){.cols{grid-template-columns:.9fr 1.1fr;gap:var(--s-8)}}
.cols>div>h2{margin-bottom:var(--s-4)}

.calm{list-style:none;margin:0;padding:0;border-top:1px solid var(--mist)}
.calm li{padding:var(--s-5) 0;border-bottom:1px solid var(--mist)}
.calm h3{margin:0 0 var(--s-2);color:var(--ink);font-size:var(--fs-xl)}
.calm p{margin:0;color:var(--ink-2)}

.list-rows{border-top-color:var(--mist)}
.list-rows li{grid-template-columns:minmax(10rem,14rem) 1fr;border-bottom-color:var(--mist);padding:var(--s-5) 0;gap:var(--s-5)}
.list-rows li>p{margin:0;color:var(--ink-2);font-size:var(--fs-md)}
.list-rows h3{color:var(--ink);font-size:var(--fs-xl)}
@media(max-width:620px){.list-rows li{grid-template-columns:1fr;gap:var(--s-2)}}

/* Dr. Yanni: training in order */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:4.5rem 1fr;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.timeline b{font-family:var(--font-display);font-weight:500;font-size:var(--fs-lg);color:var(--brand)}
.aside-note{margin-top:var(--s-6);padding-left:var(--s-5);border-left:3px solid var(--mist);color:var(--ink-2)}

/* More patients' words */
.letters{columns:1;column-gap:var(--s-8)}
@media(min-width:760px){.letters{columns:2}}
.letters figure{break-inside:avoid;margin:0 0 var(--s-7)}
.letters blockquote{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);line-height:1.4;color:var(--ink)}
.letters blockquote p{margin:0}
.letters figcaption{margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--ink-2)}

/* Visit */
.visit-grid{display:grid;gap:var(--s-7)}
@media(min-width:880px){.visit-grid{grid-template-columns:1fr 1.1fr;align-items:start}}
.visit address{font-style:normal;font-size:var(--fs-lg);margin-bottom:var(--s-5)}
.hours{font-size:var(--fs-md);max-width:22rem}
.hours dt{color:var(--ink-2)}
.hours dd{font-weight:600}
.visit .note{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--ink-2)}
.map{aspect-ratio:4/3}

.site-footer{background:#16323f}
.site-footer .footer-logo{background:#fff;display:inline-block;padding:.6rem .8rem;border-radius:var(--radius)}
.site-footer .footer-logo img{height:30px;width:auto}
.site-footer p{max-width:40ch}