/* ============================================================
   DIRECTION: Light Editorial — Sylvia A. Gisi, M.D.
   Paper hero with NO media behind the text. Video and photography
   are CONTAINED, with margin, below the headline. Hairline rules
   instead of boxes, ruled index rows instead of cards, a drop cap,
   oversized editorial numerals, and a pull-quote that overlaps the
   portrait.

   Accent is the plum from the practice's real logo (#693E55 /
   #A3768E), deepened for contrast — the sister variation leads
   with the teal from the same logo.

   NOTE: deliberately does NOT follow prefers-color-scheme; an OS
   dark-mode setting was repainting the light directions dark.
   ============================================================ */
:root{
  --paper:#FBF9F7;
  --surface:#FFFFFF;
  --ink:#171114;
  --ink-2:#4E434A;
  --ink-3:#8B7F86;
  --line:#E6DEE2;
  --accent:#6E3B53;
  --accent-soft:#A3768E;
  --teal:#2F7695;
}
:root[data-theme="dark"]{
  --paper:#141013;--surface:#1C171A;--ink:#F3EDF0;--ink-2:#B6A9B0;--ink-3:#867A81;
  --line:#2E262B;--accent:#D9A8C0;--accent-soft:#C08FA8;--teal:#7FC3E0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:1.0625rem;line-height:1.64;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:400;
  letter-spacing:-.012em;line-height:1.08;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;height:auto;}
ul,ol{margin:0;padding:0;list-style:none;}
dl,dd{margin:0;}
figure{margin:0;}

.wrap{max-width:1060px;margin:0 auto;padding:0 clamp(22px,6vw,72px);}
.wide{max-width:1280px;margin:0 auto;padding:0 clamp(22px,4vw,40px);}
.label{font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);font-weight:600;}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;gap:20px;max-width:1280px;margin:0 auto;
  padding:14px clamp(22px,4vw,40px);}
.brand{margin-right:auto;text-decoration:none;display:flex;align-items:center;}
.brand img{height:40px;width:auto;object-fit:contain;}
nav .links{display:flex;align-items:center;gap:26px;}
nav .links a{font-size:.79rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  font-weight:600;color:var(--ink-2);}
nav .links a:hover{color:var(--accent);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:0;
  padding:9px 10px;cursor:pointer;color:var(--ink);line-height:0;}
.btn{display:inline-flex;align-items:center;gap:.5em;font-size:.77rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;text-decoration:none;padding:13px 22px;
  border:1px solid var(--ink);border-radius:0;background:none;color:var(--ink);cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn--accent{border-color:var(--accent);color:var(--accent);}
.btn--accent:hover{background:var(--accent);color:var(--surface);border-color:var(--accent);}
.nav-cta{padding:11px 18px;}

/* ---------- hero: paper, no media behind text ---------- */
.hero{padding:clamp(56px,9vw,124px) 0 0;}
.hero h1{font-size:clamp(2.5rem,6vw,5rem);max-width:15ch;}
.hero h1 em{font-style:italic;color:var(--accent);}
.standfirst{max-width:54ch;margin-top:26px;font-size:1.13rem;color:var(--ink-2);}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}

/* contained figure — the margin IS the direction */
.figure{max-width:1280px;margin:clamp(50px,7vw,92px) auto 0;padding:0 clamp(22px,4vw,40px);}
.figure video,.figure img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block;}
.figure figcaption{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-top:14px;font-weight:600;}
.figure--plate{max-width:720px;}
.figure--plate video,.figure--plate img{aspect-ratio:4/3;}
@media (prefers-reduced-motion: reduce){
  .figure video{display:none;}
  .figure--hero{background:url('img/poster-hero.jpg') center/cover no-repeat;aspect-ratio:16/7;}
}

/* ---------- sections ---------- */
.sec{border-top:1px solid var(--line);padding:clamp(54px,7.5vw,110px) 0;
  margin-top:clamp(54px,7.5vw,110px);position:relative;}
.sec--tight{margin-top:0;}
.sec::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.22,.7,.28,1);}
.sec.drawn::before{transform:scaleX(1);}
.sec-label{margin-bottom:clamp(26px,4vw,50px);display:flex;gap:14px;align-items:baseline;}
.sec-label b{font-family:'Newsreader',Georgia,serif;font-weight:500;color:var(--accent);font-size:.9rem;}
h2{font-size:clamp(1.95rem,4vw,3.15rem);max-width:20ch;}
.lede{max-width:58ch;margin-top:22px;color:var(--ink-2);font-size:1.07rem;}

/* ---------- ruled index ---------- */
.index{margin-top:clamp(32px,4vw,54px);border-top:1px solid var(--line);}
.index li{display:grid;grid-template-columns:3.4rem 1fr auto;gap:22px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line);transition:background .25s ease,padding .25s ease;}
.index li:hover{background:var(--surface);padding-left:14px;padding-right:14px;}
.index .n{font-family:'Newsreader',Georgia,serif;color:var(--accent);font-size:1rem;}
.index h3{font-size:1.3rem;margin-bottom:7px;}
.index p{color:var(--ink-2);font-size:.98rem;max-width:60ch;}
.index .meta{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;white-space:nowrap;}

/* ---------- glance strip ---------- */
.glance{border-top:1px solid var(--line);}
.glance li{display:grid;grid-template-columns:3.4rem 1fr auto;gap:22px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);}
.glance h3{font-size:1.16rem;margin-bottom:5px;}
.glance p{color:var(--ink-2);font-size:.95rem;}
.glance .meta{font-size:.73rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  font-weight:600;white-space:nowrap;}
.glance a{color:inherit;text-decoration:none;}
.glance a:hover{color:var(--accent);}

/* ---------- about: drop cap + overlapping pull quote ---------- */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start;}
.about-copy p + p{margin-top:20px;color:var(--ink-2);}
.dropcap::first-letter{float:left;font-family:'Newsreader',Georgia,serif;font-size:4.2em;
  line-height:.84;padding:8px 12px 0 0;color:var(--accent);}
.about-media{position:relative;}
.about-media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;}
.pullquote{
  /* blockquote carries a UA default margin:1em 40px — zero it with the shorthand
     or the panel stops short of the photo's edge */
  position:relative;margin:-54px 0 0 -16%;width:auto;
  background:var(--paper);padding:30px 30px 6px 0;
  font-family:'Newsreader',Georgia,serif;font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.3;letter-spacing:-.01em;
}
.pullquote cite{display:block;font-family:'Inter',sans-serif;font-style:normal;font-size:.71rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:16px;font-weight:600;}

/* ---------- editorial numerals ---------- */
.figures{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(30px,4vw,52px);
  border-top:1px solid var(--line);}
.figures div{padding:30px 22px 0 0;border-right:1px solid var(--line);}
.figures div:last-child{border-right:none;}
.figures b{display:block;font-family:'Newsreader',Georgia,serif;font-weight:400;
  font-size:clamp(2.3rem,4.8vw,3.5rem);line-height:1;letter-spacing:-.03em;}
.figures span{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-top:12px;font-weight:600;}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(28px,4vw,46px);border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;
  font-family:'Newsreader',Georgia,serif;font-size:1.2rem;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:'Inter',sans-serif;font-size:1.15rem;
  color:var(--accent);flex:none;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq details[open] summary{color:var(--accent);}
.faq .faq-a{padding:0 0 24px;color:var(--ink-2);max-width:72ch;}

/* ---------- visit ---------- */
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);margin-top:clamp(26px,4vw,46px);}
.hours{border-top:1px solid var(--line);}
.hours > div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);}
.hours > div.today dt,.hours > div.today dd{color:var(--accent);font-weight:700;}
.hours dt{color:var(--ink-2);font-weight:500;}
.hours dd{font-variant-numeric:tabular-nums;font-weight:600;}
.info{border-top:1px solid var(--line);}
.info div{padding:16px 0;border-bottom:1px solid var(--line);}
.info dt{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;}
.info dd{font-weight:600;margin-top:5px;}
.info a{color:var(--accent);text-underline-offset:3px;}

/* ---------- appointment form (editorial: ruled, no boxes) ---------- */
.book-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,64px);
  margin-top:clamp(30px,4vw,52px);align-items:start;}
.f-row{display:grid;gap:clamp(18px,2.4vw,30px);margin-bottom:clamp(18px,2.4vw,30px);}
.f-row--2{grid-template-columns:1fr 1fr;}
.f-field label{display:block;font-size:.71rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}
.f-field input[type=text],.f-field input[type=tel],.f-field input[type=email],
.f-field input[type=date],.f-field select,.f-field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:none;
  border:none;border-bottom:1px solid var(--line);border-radius:0;padding:11px 0;
  transition:border-color .25s;}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-bottom-color:var(--accent);}
.f-field textarea{min-height:110px;resize:vertical;}
.f-hint{font-size:.79rem;color:var(--ink-3);margin-top:7px;}
.seg{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line);}
.seg input{position:absolute;opacity:0;pointer-events:none;}
.seg label{display:inline-flex;align-items:center;cursor:pointer;margin:0;
  font-size:.88rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);
  padding:11px 0;margin-right:26px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;}
.seg input:checked + label{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
.seg input:focus-visible + label{color:var(--accent);}
.f-check{display:flex;gap:11px;align-items:flex-start;margin-top:6px;}
.f-check input{margin-top:4px;width:16px;height:16px;accent-color:var(--accent);}
.f-check label{font-size:.92rem;color:var(--ink-2);font-weight:400;letter-spacing:0;text-transform:none;}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.f-note{font-size:.86rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:16px;margin-top:22px;}
.side-list{border-top:1px solid var(--line);}
.side-list a{display:block;text-decoration:none;padding:22px 0;border-bottom:1px solid var(--line);
  transition:padding .25s ease,background .25s ease;}
.side-list a:hover{padding-left:12px;background:var(--surface);}
.side-list h3{font-size:1.14rem;margin-bottom:6px;}
.side-list p{color:var(--ink-2);font-size:.93rem;}
.side-list .go{display:inline-block;margin-top:10px;color:var(--accent);font-weight:600;font-size:.9rem;}
.rating-line{display:flex;align-items:baseline;gap:12px;}
.rating-line b{font-family:'Newsreader',Georgia,serif;font-size:2.1rem;line-height:1;}
.rating-line .stars{color:var(--accent-soft);font-size:.95rem;letter-spacing:.12em;}
.rating-line span{font-size:.78rem;color:var(--ink-3);font-weight:600;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:clamp(54px,7.5vw,110px);padding:44px 0 56px;}
.foot{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between;align-items:baseline;}
.foot a{font-size:.77rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  text-decoration:none;color:var(--ink-2);}
.foot a:hover{color:var(--accent);}
.disclaimer{margin-top:26px;font-size:.78rem;color:var(--ink-3);}

.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--accent);color:var(--surface);text-align:center;padding:15px;
  font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;text-decoration:none;}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .sec::before{transform:scaleX(1);transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .nav-toggle{display:block;}
  nav .links{display:none;}
  nav.open .links{display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    padding:24px clamp(22px,4vw,40px);border-bottom:1px solid var(--line);}
  .nav-in{position:relative;}
  .about{grid-template-columns:1fr;}
  .about-media{max-width:460px;}
  .pullquote{margin:26px 0 0 0;width:auto;padding:0 0 0 22px;border-left:2px solid var(--accent);}
  .visit-grid{grid-template-columns:1fr;}
  .figures{grid-template-columns:repeat(2,1fr);}
  .figures div:nth-child(2){border-right:none;}
  .figures div:nth-child(n+3){border-top:1px solid var(--line);margin-top:26px;}
  .figure video,.figure img{aspect-ratio:3/2;}
}
@media (max-width:620px){
  .sticky-cta{display:block;}
  footer{padding-bottom:92px;}
  .index li,.glance li{grid-template-columns:2.4rem 1fr;gap:14px;}
  .index .meta,.glance .meta{grid-column:2;margin-top:8px;white-space:normal;}
  .figures{grid-template-columns:1fr;}
  .figures div{border-right:none;border-top:1px solid var(--line);margin-top:22px;padding-right:0;}
  .figures div:first-child{border-top:none;margin-top:0;}
  .hero h1{font-size:2.5rem;}
  .dropcap::first-letter{font-size:3.3em;}
}
@media (max-width:480px){
  .nav-in .nav-cta{display:none;}
  .brand img{height:32px;}
}

/* ---------- multi-level navigation ---------- */
nav .links > li{position:relative;}
nav .links > li.has-sub > button{display:inline-flex;align-items:center;gap:6px;background:none;
  border:none;padding:0;cursor:pointer;font:inherit;font-size:.79rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ink-2);}
nav .links > li.has-sub > button:hover{color:var(--accent);}
nav .links > li.has-sub > button svg{transition:transform .25s ease;}
nav .links > li.has-sub[data-open="true"] > button svg{transform:rotate(180deg);}
.sub{position:absolute;top:calc(100% + 16px);left:-18px;min-width:266px;background:var(--paper);
  border:1px solid var(--line);border-radius:0;padding:6px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;z-index:80;}
nav .links > li.has-sub:hover .sub,
nav .links > li.has-sub[data-open="true"] .sub{opacity:1;visibility:visible;transform:none;}
.sub a{display:block;padding:11px 18px;font-size:.86rem;letter-spacing:0;text-transform:none;
  font-weight:500;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);}
.sub a:last-child{border-bottom:none;}
.sub a:hover{color:var(--accent);background:var(--surface);}
.sub a small{display:block;font-size:.75rem;color:var(--ink-3);margin-top:2px;}

/* breadcrumbs */
.crumbs{padding:20px 0 0;font-size:.78rem;letter-spacing:.06em;color:var(--ink-3);}
.crumbs a{color:var(--ink-2);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs span{margin:0 9px;opacity:.5;}

/* interior page header */
.page-head{padding:clamp(30px,4.5vw,64px) 0 clamp(30px,4vw,54px);}
.page-head h1{font-size:clamp(2.2rem,4.6vw,3.5rem);max-width:19ch;margin-top:16px;}
.page-head .lede{max-width:60ch;margin-top:22px;color:var(--ink-2);font-size:1.08rem;}
.prose{max-width:68ch;}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-top:clamp(36px,4vw,56px);
  padding-top:clamp(18px,2vw,26px);border-top:1px solid var(--line);}
.prose h2:first-child{margin-top:0;border-top:none;padding-top:0;}
.prose p{margin-top:17px;color:var(--ink-2);}
.prose ul{margin-top:17px;}
.prose ul li{display:grid;grid-template-columns:1.4rem 1fr;gap:10px;margin-top:11px;color:var(--ink-2);}
.prose ul li::before{content:"—";color:var(--accent);}
.prose strong{color:var(--ink);font-weight:600;}
.page-grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(30px,5vw,68px);align-items:start;}
.rail{position:sticky;top:100px;}
.rail-card{border-top:1px solid var(--line);padding:20px 0;}
.rail-card h3{font-size:1.02rem;margin-bottom:9px;}
.rail-card p{font-size:.91rem;color:var(--ink-2);}
.rail-card a{color:var(--accent);font-weight:600;text-decoration:none;font-size:.91rem;}
.rail-list{border-top:1px solid var(--line);}
.rail-list li{border-bottom:1px solid var(--line);}
.rail-list a{display:block;padding:11px 0;font-size:.91rem;font-weight:500;color:var(--ink-2);text-decoration:none;}
.rail-list a:hover,.rail-list a[aria-current="page"]{color:var(--accent);}
@media (max-width:940px){
  nav.open .links > li.has-sub > button{display:none;}
  nav.open .sub{position:static;opacity:1;visibility:visible;transform:none;
    border:none;background:none;padding:0;min-width:0;}
  nav.open .sub a{padding:7px 0;border-bottom:none;}
  .page-grid{grid-template-columns:1fr;}
  .rail{position:static;}
}