/* ============================================================================
   SHERBIN lib.css — the library-page layer, loaded AFTER styles.css + hub.css.
   Shared by every condition and procedure page (the 26-page library).
   Chrome, tokens, buttons, faq and close bands come from styles.css; crumbs
   and symchip idioms come from hub.css; this file adds only what the library
   needs: a typographic navy hero (no photo; the category pages carry the
   imagery), the article with its sticky on-this-page rail, and the related
   band. Same idiom throughout: hard corners, gold as line, navy-tinted depth.
   ============================================================================ */

/* ---- lib hero: navy, typographic ------------------------------------------ */
.lib-hero{position:relative;background:
  radial-gradient(88% 96% at 100% 0%, rgba(16,64,107,.36), rgba(16,64,107,0) 62%),
  var(--corner-d),
  var(--navy-900);color:#fff;overflow:hidden}
.lib-hero::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.lib-hero .w{position:relative;z-index:1;padding-top:calc(var(--hd-h) + 34px);padding-bottom:64px}
.lib-hero h1{color:#fff;font-size:clamp(36px,4.2vw,56px);margin-top:16px;letter-spacing:-.02em;max-width:20ch}

/* ---- lib hero photo layer: shoot-v2 selects under the house gradient ------- */
/* Additive: pages without the __img div keep the typographic hero above. */
.lib-hero__img{position:absolute;inset:0;z-index:0}
.lib-hero__img img{width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.lib-hero__img::after{content:"";position:absolute;inset:0;background:
  var(--corner-d),
  linear-gradient(78deg,rgba(5,15,28,.94) 16%,rgba(7,30,54,.72) 52%,rgba(7,30,54,.38) 82%),
  linear-gradient(180deg,rgba(5,15,28,.74),rgba(5,15,28,.2) 20%,transparent 44%,transparent 66%,rgba(5,15,28,.55))}

/* ---- the article: sticky rail + verbatim copy (bone) ----------------------- */
.lib-art{background:radial-gradient(78% 62% at 0% 100%, rgba(7,30,54,.06), rgba(7,30,54,0) 68%),var(--bone);color:var(--ink);padding:84px 0 92px;position:relative}
.lib-art::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:200px;opacity:.03;mix-blend-mode:multiply;pointer-events:none}
.lib-art .w{position:relative;z-index:1;display:grid;grid-template-columns:236px minmax(0,1fr);gap:64px;align-items:start}
.lib-rail{position:sticky;top:calc(var(--hd-h) + 18px)}
.lib-rail__k{font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lib-rail nav{margin-top:12px;border-top:2px solid var(--ink)}
.lib-rail nav a{display:block;padding:11px 2px;border-bottom:1px solid var(--edge-l);color:var(--ink);font:500 13.5px/1.35 var(--body);transition:color var(--t-fast),padding-left var(--t-fast) var(--ease)}
.lib-rail nav a:hover{color:var(--marine-700);padding-left:6px}
.lib-call{margin-top:26px;background:var(--paper);border:1px solid var(--edge-l);border-top:2px solid var(--gold-500);padding:18px;box-shadow:var(--e1)}
.lib-rail .lib-more{margin-top:26px;border-top:2px solid var(--gold-500);padding-top:10px}
.lib-rail .lib-more .lib-rail__k{margin:0 0 4px}
.lib-rail .lib-more a{display:block;padding:7px 2px;border-bottom:1px solid var(--edge-l);color:var(--muted);font:500 12.5px/1.35 var(--body);transition:color var(--t-fast),padding-left var(--t-fast) var(--ease)}
.lib-rail .lib-more a:hover{color:var(--marine-700);padding-left:6px}
.lib-call b{display:block;font-family:var(--display);font-weight:400;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.lib-call a{display:block;margin-top:14px;color:var(--ink)}
.lib-call a span{display:block;font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lib-call a b{display:block;font-family:var(--body);font-weight:600;font-size:14.5px;font-variant-numeric:tabular-nums;margin-top:5px;white-space:nowrap;transition:color var(--t-fast)}
.lib-call a:hover b{color:var(--marine-700)}

.lib-sec{scroll-margin-top:calc(var(--hd-h) + 18px)}
.lib-sec + .lib-sec{margin-top:46px;padding-top:42px;border-top:1px solid var(--edge-l)}
.lib-sec h2{font-size:clamp(24px,2.6vw,32px);color:var(--ink);margin-top:10px;letter-spacing:-.015em;max-width:26ch}
.lib-sec h3{font-family:var(--display);font-weight:500;font-size:20px;color:var(--ink);margin-top:28px;letter-spacing:-.01em}
.lib-sec p{color:var(--muted);font-size:15.5px;line-height:1.8;margin-top:14px;max-width:66ch}
.lib-sec p a{color:var(--marine-700);font-weight:600;border-bottom:1px solid var(--gold-500)}
.lib-sec p a:hover{color:var(--marine-600)}
.lib-list{margin-top:14px;max-width:66ch}
.lib-list li{position:relative;padding:10px 0 10px 27px;border-bottom:1px solid var(--edge-l);color:var(--muted);font-size:15px;line-height:1.65}
.lib-list li::before{content:"";position:absolute;left:1px;top:17px;width:9px;height:9px;border-top:2px solid var(--gold-500);border-right:2px solid var(--gold-500)}

/* ---- related band (paper) -------------------------------------------------- */
.lib-next{background:var(--paper);border-top:1px solid var(--edge-l);padding:68px 0 72px;position:relative}
.lib-next h2{margin-top:12px}
.lib-next__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.lib-next__all{margin-top:26px}
.lib-next__all a{color:var(--marine-700);font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--gold-500);padding-bottom:4px;transition:color var(--t-fast)}
.lib-next__all a:hover{color:var(--marine-600)}
.lib-next__all a span{color:var(--gold-600)}

/* ---- utility-page fact furniture (offices, contact, patients, video) ------- */
.lib-facts{margin-top:18px;background:var(--paper);border:1px solid var(--edge-l);border-top:2px solid var(--ink);box-shadow:var(--e1);max-width:66ch}
.lib-facts>div{display:grid;grid-template-columns:148px minmax(0,1fr);gap:16px;padding:13px 18px;border-bottom:1px solid var(--edge-l)}
.lib-facts>div:last-child{border-bottom:0}
.lib-facts dt{font:600 10.5px/1.7 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lib-facts dd{color:var(--ink);font-size:14.5px;line-height:1.65}
.lib-facts dd a{color:var(--marine-700);font-weight:600;border-bottom:1px solid var(--gold-500)}
.lib-facts dd a:hover{color:var(--marine-600)}
.lib-map{display:block;width:100%;max-width:66ch;height:340px;margin-top:18px;border:1px solid var(--edge-l);filter:grayscale(.35) contrast(.95)}
.lib-steps{margin-top:14px;max-width:66ch;counter-reset:step;list-style:none}
.lib-steps li{position:relative;padding:12px 0 12px 46px;border-bottom:1px solid var(--edge-l);color:var(--muted);font-size:15px;line-height:1.65;counter-increment:step}
.lib-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:1px;top:14px;font-family:var(--display);font-size:17px;color:var(--gold-600)}
.lib-steps li b{color:var(--ink);font-weight:600}
.lib-rail__ph{display:block;margin-bottom:20px;aspect-ratio:4/5}
.lib-rail__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
a.member--link{color:inherit;display:block;transition:transform var(--t-fast) var(--ease)}
a.member--link:hover{transform:translateY(-3px)}
.member__go{display:inline-block;margin-top:8px;color:var(--gold-300);font:600 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--gold-400);padding-bottom:3px}
.loc__more{margin-top:14px}
.loc__more a{color:var(--marine-700);font:600 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--gold-500);padding-bottom:3px;transition:color var(--t-fast)}
.loc__more a:hover{color:var(--marine-600)}
.loc__more a span{color:var(--gold-600)}

/* ---- responsive ------------------------------------------------------------ */
@media (max-width:1000px){
  .lib-art .w{display:block}
  .lib-rail{display:none}
  /* a rail that carries a portrait keeps it on phones (the bio
     page lost the photo on mobile) - the photo shows, the nav hides */
  .lib-rail:has(.lib-rail__ph){display:block;position:static;margin:0 0 28px}
  .lib-rail:has(.lib-rail__ph) > :not(.lib-rail__ph){display:none}
  .lib-rail__ph{max-width:200px;margin-bottom:0}
  .lib-next__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .lib-hero .w{padding-top:calc(var(--hd-h) + 22px);padding-bottom:46px}
  .lib-art{padding:56px 0 60px}
  .lib-sec + .lib-sec{margin-top:36px;padding-top:32px}
  .lib-next{padding:52px 0 56px}
  .lib-next__grid{grid-template-columns:1fr;gap:10px}
  .lib-facts>div{grid-template-columns:1fr;gap:4px;padding:12px 16px}
  .lib-map{height:260px}
}

/* ---- srp: the /search results page (shell stamped by the utility generator,
   results injected by the worker's GET /search route between the SRP markers).
   Same idiom as everything else: hard corners, gold as line, paper cards on
   bone. The answer card quotes a page's own reviewed FAQ verbatim; nothing
   on this surface is generated text. ------------------------------------- */
.srp-zone{position:relative;background:radial-gradient(78% 62% at 0% 100%, rgba(7,30,54,.06), rgba(7,30,54,0) 68%),var(--bone);color:var(--ink);padding:72px 0 88px}
.srp-zone .w{position:relative;z-index:1}
.srp-head .kick,.srp-kick{font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.srp-head h2{font-family:var(--display);font-weight:400;letter-spacing:-.02em;font-size:clamp(26px,3vw,34px);margin:8px 0 0;color:var(--ink)}
.srp-doors{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.srp-door{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 12px;background:var(--paper);border:1px solid var(--edge-l);border-top:2px solid var(--gold-500);padding:16px 18px;box-shadow:var(--e1);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.srp-door b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--ink);letter-spacing:-.01em}
.srp-door span{grid-column:1;color:var(--muted);font-size:13px;line-height:1.5}
.srp-door i{grid-row:1 / span 2;color:var(--gold-500);font-style:normal;font-size:18px}
.srp-door:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.srp-count{font-size:15px;color:var(--muted)}
.srp-count b{color:var(--ink)}
.srp-note{margin:8px 0 0;font-size:14px;color:var(--muted);max-width:66ch}
.srp-note a{color:var(--marine-700);font-weight:600}
.srp-answer{margin-top:26px;background:var(--paper);border:1px solid var(--edge-l);border-left:3px solid var(--gold-500);padding:22px 24px;box-shadow:var(--e1);max-width:72ch}
.srp-answer h2{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:-.01em;margin:8px 0 0;color:var(--ink)}
.srp-answer p{margin:10px 0 0;color:var(--ink);font-size:15.5px;line-height:1.75}
.srp-src{display:inline-block;margin-top:12px;color:var(--marine-700);font-weight:600;font-size:13.5px}
.srp-facts{margin-top:26px;display:grid;gap:10px;max-width:72ch}
.srp-facts>div{background:var(--paper);border:1px solid var(--edge-l);padding:12px 16px;font-size:14px;line-height:1.7;color:var(--muted)}
.srp-facts b{color:var(--ink)}
.srp-facts a{color:var(--marine-700);font-weight:600}
.srp-list{margin-top:26px;display:grid;gap:12px;max-width:76ch}
.srp-card{display:block;background:var(--paper);border:1px solid var(--edge-l);padding:16px 18px;box-shadow:var(--e1);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.srp-card:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.srp-card--top{border-top:2px solid var(--gold-500);padding:20px 22px 22px}
.srp-card--top b{font-size:23px}
.srp-card--top>span:last-child{font-size:14.5px;line-height:1.7;margin-top:6px}
.srp-card b{display:block;font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);letter-spacing:-.01em;margin-top:6px}
.srp-card>span:last-child{display:block;color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:4px}
.srp-chip{display:inline-block;font:600 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--marine-700);border:1px solid var(--edge-l);padding:4px 8px;background:#fff}
/* the maker's mark, Algolia-style: one quiet line under the results */
.srp-credit{margin-top:38px;text-align:right;font:600 11.5px/1 var(--body);letter-spacing:.06em;color:var(--muted)}
.srp-credit a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.srp-credit a:hover{color:var(--marine-700)}
.srp-paa{margin-top:26px;max-width:72ch}
/* each question opens in place — the same native-details idiom as the page FAQs */
.srp-qa{border-bottom:1px solid var(--edge-l)}
.srp-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 2px;color:var(--ink);font:500 14px/1.5 var(--body);transition:color var(--t-fast)}
.srp-qa summary::-webkit-details-marker{display:none}
.srp-qa summary:hover{color:var(--marine-700)}
.srp-qa summary::after{content:"+";flex:0 0 auto;color:var(--muted);font-size:19px;line-height:1;transform:translateY(1px);transition:color var(--t-fast)}
.srp-qa[open] summary::after{content:"\2013";color:var(--gold-500)}
.srp-qa__a{padding:0 2px 16px}
.srp-qa__a p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.75;max-width:66ch}
.srp-qa__a .srp-src{margin-top:10px}
@media (max-width:720px){.srp-doors{grid-template-columns:1fr}}

/* ---- The submissions desk: contact + list + landing forms.
   Inputs follow the sbar recipe and the 16px law; hidden validation lives
   offscreen; Turnstile gets the wizard's collapsed-margin treatment. ---- */
.cform{position:relative;margin-top:22px;max-width:640px}
.cform__note{color:var(--muted);font-size:15px;line-height:1.7;margin:12px 0 0;max-width:60ch}
.cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-top:18px}
.cform__f{display:block;font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cform__f--wide{grid-column:1/-1}
.cform__f input,.cform__f textarea{display:block;width:100%;margin-top:9px;padding:14px 16px;font:400 16px/1.4 var(--body);color:var(--ink);background:#fff;border:1px solid var(--edge-l);outline:0;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cform__f input:focus,.cform__f textarea:focus{border-color:var(--marine-600);box-shadow:0 0 0 3px rgba(23,84,136,.12)}
.cform__f textarea{resize:vertical;min-height:120px}
.cform__row{display:flex;gap:10px;margin-top:18px;max-width:560px}
.cform__row input{flex:1 1 auto;min-width:0;padding:14px 16px;font:400 16px/1.4 var(--body);color:var(--ink);background:#fff;border:1px solid var(--edge-l);outline:0;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.cform__row input:focus{border-color:var(--marine-600);box-shadow:0 0 0 3px rgba(23,84,136,.12)}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__ts{margin:14px 0 0}
.cform__err{color:#8A3F27;font-size:14px;margin:12px 0 0}
.cform__ok{margin-top:18px;padding:18px 20px;background:#fff;border-left:3px solid var(--gold-500);font-size:15.5px;line-height:1.7}
.cform__actions{margin-top:16px}
@media (max-width:720px){.cform__grid{grid-template-columns:1fr}.cform__row{flex-direction:column}}

/* ---- The 404 ("gorgeous, overdone" by design): a wrong URL
   becomes a tour. Ghost numerals behind the display serif, the live finder
   with the rotating patient questions, then the SRP's doors. ---- */
.nf-hero{position:relative;overflow:hidden;background:var(--corner-d),linear-gradient(180deg,#0A2036 0%,var(--ink-950) 72%);color:#EAF1F8;padding:150px 0 96px;border-bottom:1px solid var(--edge-d)}
.nf-ghost{position:absolute;top:50%;right:-2vw;transform:translateY(-52%);font:400 clamp(220px,34vw,430px)/1 var(--display);letter-spacing:-.04em;color:rgba(234,241,248,.045);user-select:none;pointer-events:none}
.nf-hero .w{position:relative;max-width:860px}
.nf-pill{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-400);border:1px solid var(--edge-d);padding:8px 12px}
.nf-h1{font:400 clamp(46px,7vw,76px)/1.05 var(--display);letter-spacing:-.015em;margin:26px 0 0}
.nf-lead{margin:22px 0 0;max-width:56ch;color:var(--sky-300);font-size:16.5px;line-height:1.75}
.nf-find{margin-top:44px;max-width:640px}
.nf-find label{display:block;min-height:44px;font:italic 400 15px/1.45 var(--display);letter-spacing:0;color:#EAF1F8;transition:opacity .26s var(--ease)}
.nf-find label.is-swap{opacity:0}
.nf-find .sbar{margin-top:10px}
@media (max-width:720px){.nf-hero{padding:112px 0 72px}.nf-ghost{right:-18vw}}