/* ===========================================================
   TAILORED PEPTIDES — Practitioner Playbook
   Design tokens: cream/ink/gold, Playfair Display + Inter,
   framed-folio motif echoing the printed playbook page.
   =========================================================== */

:root{
  --cream:        #FAF7F0;
  --cream-deep:    #F3EEE2;
  --paper:        #FFFFFF;
  --ink:          #1C1A15;
  --ink-soft:      #55503F;
  --ink-faint:     #8B8570;
  --gold:         #A2803D;
  --gold-deep:     #8A6C2F;
  --gold-soft:     #CBAA6A;
  --gold-wash:     rgba(162,128,61,0.10);
  --line:         #E4DDC9;
  --line-strong:   #D3C9AC;
  --shadow:        0 20px 50px -30px rgba(28,26,21,0.35);
  --radius:        2px;
  --display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif:   var(--display); /* legacy alias kept so older selectors still resolve */
  --maxw:   1180px;
  --ease:   cubic-bezier(.25,.8,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Framed-folio motif: a hairline border inset from the viewport,
   echoing the bordered cover page of the printed playbook. */
.frame{
  position:fixed; inset:10px;
  border:1px solid var(--line-strong);
  pointer-events:none;
  z-index:200;
}
@media (max-width:640px){ .frame{ inset:6px; } }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:var(--cream); padding:12px 18px;
  z-index:999; font-family:var(--sans); font-size:14px;
}
.skip-link:focus{ left:20px; top:20px; }

a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--gold-soft); color:var(--ink); }

/* ---------- HEADER ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,240,0.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:11px; }
.brand-mark{ display:block; height:36px; width:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; gap:2px; }
.brand-eyebrow{
  font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
}
.brand-word{
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:0.02em;
}
.main-nav{ display:flex; gap:6px; }
.nav-link{
  background:none; border:none; color:var(--ink-soft);
  font-size:13px; letter-spacing:0.03em; font-weight:600;
  padding:9px 14px; border-radius:var(--radius);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav-link:hover{ color:var(--ink); background:var(--gold-wash); }
.header-badge{
  font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-deep); border:1px solid var(--gold-soft);
  padding:6px 11px; white-space:nowrap; font-weight:700;
  background:var(--gold-wash);
}
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; padding:0;
}
.menu-toggle span{ display:block; width:100%; height:1.5px; background:var(--ink); transition:transform .2s var(--ease), opacity .2s; }
.mobile-nav{
  display:none; flex-direction:column; padding:6px 28px 18px;
  border-top:1px solid var(--line);
}
.mobile-nav .nav-link{ text-align:left; padding:12px 4px; border-bottom:1px solid var(--line); border-radius:0; }

@media (max-width:860px){
  .main-nav, .header-badge{ display:none; }
  .menu-toggle{ display:flex; }
  .mobile-nav.open{ display:flex; }
}

/* ---------- HERO ---------- */
.hero{
  padding:76px 28px 56px;
  text-align:center;
  background:
    radial-gradient(ellipse 900px 420px at 50% -10%, var(--gold-wash), transparent 60%),
    var(--cream);
}
.hero-inner{ max-width:760px; margin:0 auto; }
.hero-eyebrow{
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; margin:0 0 22px;
}
.hero-logo{
  display:block; width:min(560px, 88%); height:auto; margin:0 auto;
}
.hero-rule{ width:64px; height:1px; background:var(--gold-soft); margin:30px auto; }
.hero-tagline{
  font-family:var(--display); font-style:italic; font-weight:600;
  color:var(--gold-deep); font-size:clamp(1.15rem,2.6vw,1.5rem);
  margin:0 0 10px; padding-bottom:14px; border-bottom:1px solid var(--line);
  display:inline-block;
}
.hero-title{
  font-family:var(--sans); font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  font-size:13px; color:var(--ink-soft); margin:16px 0 26px;
}
.hero-tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-bottom:34px;
}
.hero-tags span{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft);
  border:1px solid var(--line-strong); padding:7px 14px;
}
.hero-copy{
  font-size:16px; line-height:1.75; color:var(--ink-soft);
  max-width:620px; margin:0 auto 52px;
}
.hero-pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  text-align:left; border-top:1px solid var(--line); padding-top:40px;
}
.hero-footnote{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
  border-top:1px solid var(--line); margin-top:40px; padding-top:20px;
  font-size:11.5px; color:var(--ink-faint);
}
.hero-footnote a{ color:var(--gold-deep); text-decoration:none; font-weight:600; }
.hero-footnote a:hover{ text-decoration:underline; }
.hero-footnote p{ margin:0; max-width:60ch; }
.pillar .pillar-num{
  font-family:var(--serif); font-style:italic; color:var(--gold);
  font-size:14px; display:block; margin-bottom:8px;
}
.pillar h3{
  font-family:var(--serif); font-size:18px; margin:0 0 8px; font-weight:600;
}
.pillar p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.65; }

@media (max-width:720px){
  .hero-pillars{ grid-template-columns:1fr; gap:26px; }
}

/* ---------- SEARCH ---------- */
.search-bar-wrap{
  max-width:var(--maxw); margin:0 auto; padding:0 28px 8px;
}
.search-bar{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); background:var(--paper);
  padding:14px 18px; max-width:640px; margin:0 auto;
}
.search-icon{ width:18px; height:18px; color:var(--ink-faint); flex:none; }
.search-bar input{
  border:none; outline:none; background:none; font-family:var(--sans);
  font-size:15px; color:var(--ink); flex:1; min-width:0;
}
.search-bar input::placeholder{ color:var(--ink-faint); }
.search-clear{
  border:none; background:none; color:var(--ink-faint); font-size:20px;
  line-height:1; padding:0 2px;
}
.search-clear:hover{ color:var(--ink); }
.search-status{
  text-align:center; font-size:12.5px; color:var(--ink-faint);
  min-height:18px; margin:10px 0 0;
}

/* ---------- SECTION SHELL ---------- */
.section{
  max-width:var(--maxw); margin:0 auto;
  padding:64px 28px 20px;
  scroll-margin-top:84px;
}
.section-head{ margin-bottom:36px; max-width:640px; }
.section-eyebrow{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin:0 0 10px;
}
.section-title{
  font-family:var(--serif); font-size:clamp(1.7rem,3.6vw,2.3rem);
  font-weight:700; margin:0 0 12px;
}
.section-copy{ color:var(--ink-soft); margin:0; font-size:15px; }

/* ---------- DIRECTORY (quick-jump index) ---------- */
.directory{ margin-bottom:52px; }
.directory-group{ margin-bottom:26px; }
.directory-group-label{
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; margin:0 0 12px;
  display:flex; align-items:center; gap:10px;
}
.directory-group-label::after{
  content:''; flex:1; height:1px; background:var(--line);
}
.directory-items{ display:flex; flex-wrap:wrap; gap:8px; }
.dir-pill{
  display:flex; align-items:baseline; gap:8px;
  background:var(--paper); border:1px solid var(--line-strong);
  padding:9px 14px; font-size:13.5px; font-weight:500; color:var(--ink);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.dir-pill:hover{ border-color:var(--gold); background:var(--gold-wash); transform:translateY(-1px); }
.dir-pill .dir-num{
  font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:12px;
}
.dir-pill[hidden]{ display:none; }

/* ---------- ACCORDION ---------- */
.accordion-group{ margin-bottom:6px; }
.accordion-group-head{
  display:flex; align-items:baseline; gap:14px; margin:44px 0 4px;
}
.accordion-group-head:first-child{ margin-top:0; }
.accordion-group-title{
  font-family:var(--serif); font-size:20px; font-weight:600; margin:0; white-space:nowrap;
}
.accordion-group-rule{ flex:1; height:1px; background:var(--line-strong); }

.acc-item{
  border-bottom:1px solid var(--line);
  scroll-margin-top:84px;
}
.acc-item:first-of-type{ border-top:1px solid var(--line); }

.acc-header{
  width:100%; display:flex; align-items:center; gap:18px;
  background:none; border:none; text-align:left;
  padding:20px 6px; color:var(--ink);
}
.acc-num{
  font-family:var(--serif); font-style:italic; color:var(--gold-deep);
  font-size:13px; width:52px; flex:none;
}
.acc-titles{ flex:1; min-width:0; }
.acc-eyebrow{
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600; display:block; margin-bottom:5px;
}
.acc-title{ font-family:var(--serif); font-weight:600; font-size:19px; margin:0 0 2px; }
.acc-tagline{ font-size:13px; color:var(--ink-soft); margin:0; }
.acc-subtitle{
  font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; display:block; margin-bottom:4px;
}
.acc-meta{
  font-size:11px; color:var(--ink-faint); flex:none; text-align:right;
  display:none;
}
@media(min-width:640px){ .acc-meta{ display:block; } }
.acc-chevron{
  flex:none; width:20px; height:20px; color:var(--ink-faint);
  transition:transform .25s var(--ease);
}
.acc-item.open .acc-chevron{ transform:rotate(135deg); }
.acc-item.open .acc-header{ color:var(--ink); }
.acc-item.flash{ animation:flash 1.5s var(--ease); }
@keyframes flash{
  0%{ background:var(--gold-wash); }
  100%{ background:transparent; }
}

.acc-panel{
  max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease);
}
.acc-panel-inner{ padding:0 6px 34px 6px; }

.acc-lead{ font-size:15px; color:var(--ink-soft); margin:0 0 26px; line-height:1.75; max-width:74ch; }

.acc-block-label{
  font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin:0 0 12px;
}

.comp-table{ margin-bottom:28px; }
.comp-row{
  display:grid; grid-template-columns:1.1fr auto; gap:4px 16px;
  padding:12px 0; border-top:1px solid var(--line);
}
.comp-row:last-child{ border-bottom:1px solid var(--line); }
.comp-name{ font-weight:600; font-size:14.5px; }
.comp-name .link-chip{ font-weight:600; }
.comp-dose{
  font-family:var(--serif); font-style:italic; color:var(--gold-deep);
  font-size:14px; text-align:right;
}
.comp-desc{ grid-column:1 / -1; font-size:13.5px; color:var(--ink-soft); margin:2px 0 0; line-height:1.6; }

.acc-para{ font-size:14.5px; color:var(--ink-soft); line-height:1.75; margin:0 0 28px; max-width:74ch; }

.pairs-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.pairs-list.simple{ flex-direction:row; flex-wrap:wrap; gap:10px; }
.pair-item{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }

.key-points{ list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:10px; }
.key-points li{
  font-size:14px; color:var(--ink-soft); padding-left:20px; position:relative; line-height:1.6;
}
.key-points li::before{
  content:''; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--gold);
}

.indications{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:10px; }
.indications li{
  font-size:14px; color:var(--ink); padding-left:20px; position:relative; line-height:1.6;
}
.indications li::before{
  content:''; position:absolute; left:0; top:8px; width:10px; height:1px; background:var(--gold);
}

.link-chip{
  background:var(--gold-wash); border:1px solid var(--gold-soft); color:var(--gold-deep);
  padding:4px 10px; font-size:12.5px; font-weight:600; border-radius:1px;
  transition:background .18s var(--ease), border-color .18s var(--ease);
  display:inline-block;
}
.link-chip:hover{ background:var(--gold-soft); color:var(--ink); }

.acc-grid{ display:grid; grid-template-columns:1fr; gap:0; }
@media(min-width:860px){
  .acc-grid-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; }
}
.acc-side-label{
  font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; margin:0 0 10px;
}
.safety-box{
  border-left:2px solid var(--gold-soft); padding-left:16px;
  font-size:13.5px; color:var(--ink-soft); line-height:1.7;
}

/* ---------- COMPOSITION SCHEMA (blend chip row) ---------- */
.schema-row{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.schema-chip{
  border:1px solid var(--line-strong); color:var(--ink);
  font-size:12.5px; font-weight:600; padding:6px 12px; background:var(--paper);
}

/* ---------- AGENT DETAIL: 3-column layout ---------- */
.agent-grid-3{ display:grid; grid-template-columns:1fr; gap:28px; }
@media(min-width:860px){
  .agent-grid-3{ grid-template-columns:200px 1.3fr 240px; gap:36px; align-items:start; }
}
.agent-meta-col .acc-side-label:first-child{ margin-top:0; }
.agent-meta-col .acc-side-label{ margin-top:18px; }
.meta-formula{
  font-family:var(--serif); font-size:15px; color:var(--ink); margin:0; line-height:1.4;
}
.meta-mw{ font-size:12px; color:var(--ink-faint); margin:2px 0 0; }
.meta-vial{ font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:15px; margin:0; }
.meta-aka{ font-size:13px; color:var(--ink-soft); margin:0; line-height:1.5; }
.agent-meta-divider{ height:1px; background:var(--line); margin:22px 0 0; }
.pairs-list-short{ display:flex; flex-direction:column; gap:12px; margin:0 0 12px; }
.pair-item-short{ display:flex; flex-direction:column; gap:2px; }
.pair-blurb{ font-size:12.5px; color:var(--ink-soft); }
.pairs-disclaimer{ font-family:var(--serif); font-style:italic; font-size:11.5px; color:var(--ink-faint); margin:0; line-height:1.5; }

.agent-main-col{ min-width:0; }

.kp-table{ display:flex; flex-direction:column; }
.kp-row{
  display:grid; grid-template-columns:150px 1fr; gap:6px 18px;
  padding:12px 0; border-top:1px solid var(--line);
}
.kp-row:last-child{ border-bottom:1px solid var(--line); }
.kp-label{
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700;
}
.kp-text{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.6; }
@media(max-width:520px){
  .kp-row{ grid-template-columns:1fr; gap:4px; }
}

.safety-box-framed{
  border:1px solid var(--line-strong); border-left:2px solid var(--gold-soft);
  padding:16px; background:var(--paper);
}

/* ---------- COMPLIANCE ---------- */
.compliance{ padding-top:56px; padding-bottom:64px; }
.compliance-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px;
  border-top:1px solid var(--line); padding-top:32px; margin-bottom:36px;
}
.compliance-block h3{ font-family:var(--serif); font-size:16px; margin:0 0 8px; font-weight:600; }
.compliance-block p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.7; }
.compliance-notice{
  background:var(--paper); border:1px solid var(--line-strong); padding:28px;
}
.compliance-notice h3{ font-family:var(--serif); font-size:17px; margin:0 0 10px; }
.compliance-notice > p{ font-size:13.5px; color:var(--ink-soft); margin:0 0 14px; }
.compliance-notice ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; }
.compliance-notice li{ font-size:13.5px; color:var(--ink-soft); line-height:1.7; }
.compliance-notice strong{ color:var(--ink); }

@media(max-width:720px){ .compliance-grid{ grid-template-columns:1fr; } }

/* ---------- FOOTER ---------- */
.site-footer{
  border-top:1px solid var(--line-strong); margin-top:20px; padding:42px 28px 56px;
  text-align:center;
}
.footer-inner{ max-width:var(--maxw); margin:0 auto; }
.footer-brand{ display:flex; justify-content:center; }
.footer-logo{ width:min(280px, 70%); height:auto; }
.footer-meta{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin:16px 0 8px; }
.footer-contact{ font-size:12px; color:var(--ink-faint); margin:0 0 26px; }
.footer-contact a{ color:var(--gold-deep); text-decoration:none; font-weight:600; }
.footer-contact a:hover{ text-decoration:underline; }
.to-top{
  background:none; border:1px solid var(--line-strong); color:var(--ink-soft);
  font-size:12px; letter-spacing:0.04em; padding:9px 16px;
  transition:border-color .2s, color .2s;
}
.to-top:hover{ border-color:var(--gold); color:var(--ink); }

/* ---------- JUMP TOAST ---------- */
.jump-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--cream); font-size:12.5px; letter-spacing:0.03em;
  padding:11px 20px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:300; white-space:nowrap;
}
.jump-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- NO RESULTS ---------- */
.no-results{
  text-align:center; padding:40px 20px; color:var(--ink-faint); font-size:14px;
  border:1px dashed var(--line-strong); display:none;
}
.no-results.show{ display:block; }

@media (max-width:640px){
  .header-inner{ padding:14px 18px; }
  .hero{ padding:52px 18px 40px; }
  .section{ padding:44px 18px 12px; }
}