/* Dr. Abhishek Nighot · site.css
   1 Tokens · 2 Base · 3 Frame and identity panel · 4 Content blocks
   5 Procedure pages · 6 Mobile call bar · 7 Motion · 8 Responsive */

/* 1 Tokens ------------------------------------------------------------- */
:root{
  --paper:#FAF7EF;
  --panel:#F2ECDF;
  --ink:#241F1A;
  --soft:#57503F;
  --oxblood:#6E2F3C;
  --oxblood-deep:#59242F;
  --line:#E0D8C6;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Source Serif 4',Georgia,'Times New Roman',serif;
  --panel-w:400px;
  --page-max:1440px;
  --gutter:76px;
  --ease:cubic-bezier(.2,.6,.2,1);
  color-scheme:light;
}

/* 2 Base --------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
b,strong{font-weight:600}
address{font-style:normal}
ol,ul{list-style:none}
::selection{background:rgba(110,47,60,.14)}
:focus-visible{outline:2px solid var(--oxblood);outline-offset:3px}

/* 3 Frame and identity panel ------------------------------------------- */
.frame{
  display:grid;grid-template-columns:var(--panel-w) minmax(0,1fr);
  min-height:100vh;max-width:var(--page-max);margin:0 auto;
}
.panel{
  background:var(--panel);border-right:1px solid var(--line);
  padding:52px 44px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
}
.identity,.contact{flex-shrink:0}
.kicker{font-family:var(--display);font-size:15px;font-style:italic;color:var(--oxblood)}
.name{
  font-family:var(--display);font-weight:600;
  font-size:42px;line-height:1.06;margin:12px 0 8px;letter-spacing:-.01em;
}
.name a{text-decoration:none}
.creds{font-size:15.5px;font-weight:500;color:var(--soft);letter-spacing:.05em}

/* The portrait gives way first on short screens, so the button stays in view. */
.portrait{margin:28px 0 24px;display:flex;flex:0 1 auto;min-height:120px}
.portrait picture{display:flex;width:100%;min-height:0}
.portrait img{width:100%;min-height:0;max-height:380px;object-fit:cover;object-position:50% 0}

.contact{margin-top:auto;font-size:16px;font-weight:500;line-height:1.75}
.contact a{text-decoration:none;border-bottom:1px solid var(--line)}
.contact a:hover{border-color:var(--oxblood)}

.btn{
  display:block;text-align:center;
  background:var(--oxblood);color:var(--paper);
  font-family:var(--display);font-size:16px;font-weight:500;letter-spacing:.04em;
  padding:16px 0;text-decoration:none;transition:background .25s;
}
.btn:hover,.btn:focus-visible{background:var(--oxblood-deep)}
.contact .btn{margin-top:22px;color:var(--paper);border-bottom:none}

/* 4 Content blocks ----------------------------------------------------- */
.content{min-width:0}
.block{padding:76px var(--gutter) 68px;border-bottom:1px solid var(--line)}

.label{
  font-family:var(--display);font-size:17px;font-style:italic;font-weight:400;
  color:var(--oxblood);margin-bottom:26px;
}
.label a{text-decoration:none}
.label a:hover{text-decoration:underline;text-underline-offset:4px}

.display{
  font-family:var(--display);font-weight:500;
  font-size:clamp(36px,3.8vw,52px);line-height:1.12;letter-spacing:-.01em;
  max-width:640px;text-wrap:balance;
}
.display em{font-style:italic;font-weight:500;color:var(--oxblood)}

.intro-copy{max-width:580px;margin-top:28px;font-size:19px}
.intro-copy p+p{margin-top:1em}
.intro-copy a,.fine a,.soc a,.qa a{text-decoration:none;border-bottom:1px solid var(--line)}
.intro-copy a:hover,.fine a:hover,.soc a:hover,.qa a:hover{border-color:var(--oxblood)}

/* Quotation on the deeper panel tint */
.quote{background:var(--panel)}
.quote blockquote p{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(24px,2.6vw,32px);line-height:1.4;max-width:720px;text-wrap:balance;
}
.quote figcaption{margin-top:22px;font-size:15.5px;font-weight:600;color:var(--oxblood);letter-spacing:.04em}

/* Full-width photograph with a caption tucked into its corner */
.wide{border-bottom:1px solid var(--line);position:relative}
.wide img{width:100%;max-height:440px;object-fit:cover}
.wide figcaption{
  position:absolute;left:0;bottom:0;background:var(--paper);
  padding:12px 26px 12px var(--gutter);
  font-size:15px;font-style:italic;color:var(--soft);
}
.wide img,.tl-figs img{filter:sepia(.12) saturate(.8) contrast(1.02)}

/* Two-column rows: a heading on the left, plain language on the right */
.rows{max-width:880px}
.row{
  display:grid;grid-template-columns:270px 1fr;gap:34px;
  padding:30px 0;border-top:1px solid var(--line);
}
.row:first-child{border-top:none;padding-top:0}
.row h3{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.22}
.row h3 a{
  text-decoration:underline;text-decoration-color:var(--line);
  text-decoration-thickness:1px;text-underline-offset:.28em;
  transition:color .2s,text-decoration-color .2s;
}
.row h3 a:hover{color:var(--oxblood);text-decoration-color:var(--oxblood)}
.row p{font-size:17.5px;color:var(--soft)}

/* Training timeline */
.tl{max-width:880px}
.tl-row{
  display:grid;grid-template-columns:84px 1fr;gap:26px;
  padding:17px 0;border-top:1px solid var(--line);
}
.tl-row:first-child{border-top:none;padding-top:0}
.yr{
  font-family:var(--display);font-weight:600;font-size:18px;color:var(--oxblood);
  padding-top:2px;font-variant-numeric:tabular-nums;
}
.tl-row p{font-size:17px;color:var(--soft)}
.tl-figs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:42px;max-width:880px}
.tl-figs figure{background:rgba(255,255,255,.53);border:1px solid var(--line);padding:11px}
.tl-figs img{width:100%;aspect-ratio:3/2;object-fit:cover}
.tl-figs figcaption{font-size:14.5px;font-style:italic;color:var(--soft);padding:10px 4px 2px}

/* The four steps of care. Numbered because the order is real. */
.journey{display:grid;grid-template-columns:repeat(4,1fr);max-width:1020px}
.j{border-left:1px solid var(--line);padding:4px 28px 0}
.j:first-child{border-left:none;padding-left:0}
.no{font-family:var(--display);font-size:28px;font-weight:500;color:var(--oxblood)}
.j h3{font-family:var(--display);font-size:20px;font-weight:600;margin:12px 0 8px}
.j p{font-size:16px;color:var(--soft)}

/* Affiliations and cross-links, set as one italic line */
.soc{font-size:17px;font-style:italic;color:var(--soft);line-height:2;max-width:740px}
.soc span{color:var(--oxblood);font-style:normal;padding:0 6px}

/* Closing block */
.close .display{max-width:580px}
.fine{margin-top:28px;font-size:17px;font-weight:500;color:var(--soft);max-width:540px;line-height:1.75}

.foot{
  padding:26px var(--gutter);
  font-size:14.5px;font-weight:500;color:var(--soft);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* 5 Procedure pages ---------------------------------------------------- */
.faq{max-width:640px}
.qa{padding:24px 0;border-top:1px solid var(--line)}
.qa:first-child{border-top:none;padding-top:0}
.qa h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.3;margin-bottom:8px}
.qa p{font-size:17.5px;color:var(--soft)}

/* 6 Mobile call bar ---------------------------------------------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  display:none;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--line);
  transform:translateY(100%);visibility:hidden;
  transition:transform .35s var(--ease),visibility 0s .35s;
}
.callbar.is-shown{transform:none;visibility:visible;transition:transform .35s var(--ease)}
.callbar-name{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.1}
.callbar .btn{padding:12px 18px;font-size:15px;white-space:nowrap}

/* 7 Motion ------------------------------------------------------------- */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
@media (min-width:1061px){.panel{view-transition-name:panel}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .callbar{transition:none}
  @view-transition{navigation:none}
}

/* 8 Responsive --------------------------------------------------------- */
@media (max-width:1060px){
  :root{--gutter:28px}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .frame{grid-template-columns:1fr}
  .panel{
    position:static;height:auto;overflow:visible;
    border-right:none;border-bottom:1px solid var(--line);
    padding:44px 28px;
  }
  .portrait{margin-bottom:20px;min-height:0}
  .portrait img{max-height:none;object-fit:contain}
  .contact .btn{margin-top:26px}
  .block{padding:56px var(--gutter) 50px}
  .wide figcaption{position:static;padding:10px var(--gutter) 0;background:none}
  .row{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .journey{grid-template-columns:1fr 1fr;gap:30px 0}
  .j:nth-child(3){border-left:none;padding-left:0}
  .callbar{display:flex}
}
/* Tablets: the panel becomes a two-column header, portrait beside the details */
@media (min-width:641px) and (max-width:1060px){
  .panel{
    display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;
    padding:44px 40px;
  }
  .identity{grid-column:1;grid-row:1;align-self:start}
  .contact{grid-column:1;grid-row:2;align-self:end}
  .portrait{grid-column:2;grid-row:1 / span 2;margin:0}
}
@media (max-width:640px){
  .tl-figs{grid-template-columns:1fr}
  .tl-row{grid-template-columns:1fr;gap:4px;padding:20px 0}
  .journey{grid-template-columns:1fr}
  .j{border-left:none;padding:0}
}