/* Crescent Bioresearch Journal. Brand: teal #0F6E56, ink #1C1C1A, cream #F7F6F2, gold #8F7038 / #A8874E.
   Hard-baked px per breakpoint (desktop / <=768 phone). */
:root{
  --ground:#F7F6F2; --paper:#FDFCFA; --ink:#1C1C1A; --ink2:#3d3b37; --muted:#6f6c66;
  --rule:#e3dfd6; --teal:#0F6E56; --teal-d:#0a4e3d; --mint:#1D9E75; --gold:#8F7038; --gold-l:#A8874E;
  --band:#efe9dc; --night:#14201b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--ink);font-family:Raleway,'Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:18px;line-height:1.75;font-variant-numeric:lining-nums}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(15,110,86,.35)}
a:hover{border-bottom-color:var(--teal)}
.cin{font-family:Cinzel,'Times New Roman',serif}

/* ---------- masthead ---------- */
.mast{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:22px 48px;max-width:1280px;margin:0 auto}
.mast a{border:0;color:inherit}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:58px;height:58px}
.brand .bn{font-family:Cinzel,serif;font-size:15px;letter-spacing:4px;text-transform:uppercase;line-height:1.3}
.brand .bn small{display:block;font-family:Raleway,sans-serif;font-size:11px;letter-spacing:5px;color:var(--gold);font-weight:500}
.mast nav{display:flex;gap:30px;font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:500}
.mast nav a{color:var(--ink2)}
.mast nav a:hover{color:var(--teal)}

/* ---------- article hero (photo fades into ground, the social-feed look) ---------- */
.hero{position:relative;height:640px;overflow:hidden}
.hero .ph{position:absolute;inset:0;background-size:cover;background-position:center 40%}
.hero .fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(247,246,242,.88) 0%,rgba(247,246,242,.55) 9%,rgba(247,246,242,0) 22%,rgba(247,246,242,0) 42%,rgba(247,246,242,.86) 70%,var(--ground) 100%)}
.hero .w{position:absolute;left:0;right:0;bottom:0;max-width:1080px;margin:0 auto;padding:0 48px 30px}
.kick{display:flex;align-items:center;gap:16px;font-family:Cinzel,serif;font-size:13px;letter-spacing:6px;text-transform:uppercase;color:var(--gold)}
.kick::before{content:"";width:46px;height:1px;background:rgba(143,112,56,.5)}
h1.t{font-family:Cinzel,serif;font-weight:400;font-size:76px;line-height:1.06;margin-top:20px;text-wrap:balance;color:var(--ink)}
h1.t em{display:block;font-style:italic;color:var(--gold-l)}
.dek{max-width:760px;margin:26px auto 0;padding:0 48px;font-size:22px;line-height:1.6;font-weight:300;color:var(--ink2)}
.byline{max-width:760px;margin:22px auto 0;padding:0 48px;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:500}

/* ---------- the certificate line (signature) ---------- */
.lines{max-width:1080px;margin:64px auto 0;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cert{background:var(--paper);border:1px solid var(--rule);padding:26px 28px 24px}
.cert .cap{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--muted);font-weight:500}
.cert .cap b{color:var(--ink);font-weight:600}
.cert table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.cert th{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:0 8px 10px 0;border-bottom:1px solid var(--rule)}
.cert td{padding:12px 8px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cert td.r{font-weight:600}
.cert tr.endo td{background:rgba(15,110,86,.06)}
.cert.word tr.endo td{background:rgba(143,112,56,.08)}
.cert .v{font-size:22px;color:var(--teal);font-weight:600;white-space:nowrap}
.cert .w{font-size:22px;color:var(--gold);font-weight:600;letter-spacing:2px}
.cert .q{margin-top:16px;font-size:14px;line-height:1.6;color:var(--ink2)}
.blank{color:#b9b3a6;font-style:italic}

/* ---------- prose ---------- */
.prose{max-width:760px;margin:0 auto;padding:0 48px}
.prose p{margin-top:24px}
.prose h2{font-family:Cinzel,serif;font-weight:400;font-size:38px;line-height:1.18;margin-top:76px;text-wrap:balance}
.prose h2 .n{display:block;font-family:Raleway,sans-serif;font-size:12px;letter-spacing:5px;color:var(--gold);font-weight:600;margin-bottom:12px}
.prose h3{font-family:Cinzel,serif;font-weight:600;font-size:20px;margin-top:40px;letter-spacing:.5px}
.prose strong{font-weight:600}
.prose .lead{font-size:22px;line-height:1.65;font-weight:300}
.prose .lead::first-letter{font-family:Cinzel,serif;float:left;font-size:84px;line-height:.82;margin:8px 12px 0 0;color:var(--teal)}
.pull{max-width:1000px;margin:72px auto;padding:0 48px;text-align:center}
.pull p{font-family:Cinzel,serif;font-size:40px;line-height:1.25;text-wrap:balance}
.pull p em{font-style:italic;color:var(--gold-l)}
.pull span{display:block;margin-top:16px;font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--muted)}

/* ---------- range chart ---------- */
.range{max-width:1080px;margin:56px auto 0;padding:0 48px}
.range .box{background:var(--paper);border:1px solid var(--rule);padding:30px 34px 26px}
.range .top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.range .top h4{font-family:Cinzel,serif;font-weight:400;font-size:22px}
.range .top p{font-size:14px;color:var(--muted);margin-top:4px;max-width:560px;line-height:1.55}
.tog{display:flex;border:1px solid var(--teal)}
.tog button{font:600 11px Raleway,sans-serif;letter-spacing:2.5px;text-transform:uppercase;padding:11px 16px;border:0;background:transparent;color:var(--teal);cursor:pointer}
.tog button.on{background:var(--teal);color:#fff}
.scale{position:relative;height:172px;margin:34px 6px 0}
.scale .bar{position:absolute;left:0;right:0;top:100px;height:10px;background:rgba(15,110,86,.20)}
.scale .pass{position:absolute;left:0;top:86px;height:38px;background:rgba(143,112,56,.14);border:1px dashed rgba(143,112,56,.6);display:flex;align-items:center;justify-content:center;font:600 13px Raleway,sans-serif;letter-spacing:6px;color:var(--gold);opacity:0;transition:opacity .4s}
.scale .lim{position:absolute;top:74px;height:62px;width:2px;background:var(--ink)}
.scale .limt{position:absolute;top:148px;transform:translateX(-100%);white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:1px;padding-right:2px}
.scale .tk{position:absolute;top:118px;transform:translateX(-50%);font-size:11px;color:var(--muted)}
.mk{position:absolute;top:30px;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--teal);white-space:nowrap;line-height:16px;transition:opacity .35s}
.scale svg{position:absolute;left:0;top:0;overflow:visible;transition:opacity .35s}
.scale.word .mk,.scale.word svg{opacity:0}
.scale.word .pass{opacity:1}
.range .note{margin-top:22px;font-size:14px;line-height:1.6;color:var(--ink2)}
.range .note b{color:var(--teal)}
.range .two{margin-top:30px;padding-top:24px;border-top:1px solid var(--rule)}

/* ---------- figure: survey ---------- */
.survey{max-width:1080px;margin:64px auto 0;padding:0 48px}
.survey .box{background:var(--night);color:#F7F6F2;padding:44px 48px;display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:center}
.survey .big{font-family:Cinzel,serif;font-size:104px;line-height:.9;color:#F7F6F2;white-space:nowrap}
.survey .big small{display:block;white-space:normal;font-family:Raleway,sans-serif;font-size:13px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-l);margin-top:16px;line-height:1.5}
.survey .rows{display:grid;gap:12px}
.survey .row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:16px;font-size:15px;line-height:1.5;color:rgba(247,246,242,.86)}
.survey .row b{font-family:Cinzel,serif;font-size:30px;font-weight:400;color:#F7F6F2;text-align:right}
.survey .row.us b{color:#6fd2ae}
.survey .src{grid-column:1/-1;font-size:12px;color:rgba(247,246,242,.5);border-top:1px solid rgba(168,135,78,.4);padding-top:14px}

/* ---------- checklist ---------- */
.check{max-width:760px;margin:30px auto 0;padding:0 48px;counter-reset:c}
.check li{list-style:none;counter-increment:c;display:grid;grid-template-columns:54px 1fr;gap:6px;padding:20px 0;border-top:1px solid var(--rule)}
.check li::before{content:counter(c,decimal-leading-zero);font-family:Cinzel,serif;font-size:26px;color:var(--gold)}
.check li b{display:block;font-weight:600}
.check li span{color:var(--ink2);font-size:16px;line-height:1.65}

/* ---------- close ---------- */
.close{margin-top:96px;background:var(--night);color:#F7F6F2;padding:96px 0 90px;position:relative;overflow:hidden}
.close .ph{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22}
.close .w{position:relative;max-width:820px;margin:0 auto;padding:0 48px;text-align:center}
.close p{font-size:20px;line-height:1.75;font-weight:300;color:rgba(247,246,242,.9);margin-top:20px}
.close h2{font-family:Cinzel,serif;font-weight:400;font-size:46px;line-height:1.15;text-wrap:balance}
.close h2 em{font-style:italic;color:var(--gold-l)}
.close .go{display:inline-block;margin-top:34px;border:1px solid var(--gold-l);color:#F7F6F2;padding:15px 30px;font:600 12px Raleway,sans-serif;letter-spacing:3.5px;text-transform:uppercase}
.close .go:hover{background:var(--gold-l);color:var(--night)}

/* ---------- sources ---------- */
.refs{max-width:760px;margin:70px auto 0;padding:0 48px}
.refs h3{font-family:Cinzel,serif;font-weight:400;font-size:22px}
.refs ol{margin-top:14px;padding-left:22px}
.refs li{font-size:14px;line-height:1.6;color:var(--ink2);margin-top:10px}

/* ---------- footer ---------- */
footer{margin-top:90px;border-top:1px solid var(--rule);padding:44px 48px 52px;text-align:center;font-size:13px;color:var(--muted);line-height:1.8}
footer .ruo{font-size:14px;color:var(--ink);margin-bottom:10px}
footer a{color:var(--muted);border-bottom-color:transparent}
footer a:hover{color:var(--teal)}
footer .ft{display:flex;justify-content:center;gap:22px;margin-top:10px;flex-wrap:wrap}

/* ---------- home ---------- */
.homehero{position:relative;height:860px;overflow:hidden;background:#0d1310}
.homehero .ph{position:absolute;inset:0;background-size:cover;background-position:62% 50%;opacity:.92}
.homehero .fade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,19,16,.94) 0%,rgba(13,19,16,.80) 38%,rgba(13,19,16,.10) 72%,rgba(13,19,16,0) 100%)}
.homehero .mast{color:#F7F6F2}
.homehero .mast nav a{color:rgba(247,246,242,.82)}
.homehero .w{position:absolute;left:0;right:0;top:200px;max-width:1280px;margin:0 auto;padding:0 48px}
.homehero h1{font-family:Cinzel,serif;font-weight:400;font-size:72px;line-height:1.08;color:#F7F6F2;max-width:640px}
.homehero h1 em{display:block;font-style:italic;color:var(--gold-l)}
.homehero p{max-width:520px;margin-top:26px;font-size:19px;line-height:1.7;font-weight:300;color:rgba(247,246,242,.86)}
.homehero .kick{color:var(--gold-l);white-space:nowrap}
.feat{max-width:1180px;margin:-90px auto 0;padding:0 48px;position:relative;z-index:3}
.feat a.card{display:grid;grid-template-columns:1.1fr 1fr;background:var(--paper);border:1px solid var(--rule);color:var(--ink);box-shadow:0 30px 60px rgba(28,28,26,.10)}
.feat .im{background-size:cover;background-position:center;min-height:440px}
.feat .tx{padding:52px 50px}
.feat .tx h2{font-family:Cinzel,serif;font-weight:400;font-size:40px;line-height:1.14;margin-top:16px}
.feat .tx h2 em{display:block;font-style:italic;color:var(--gold-l)}
.feat .tx p{margin-top:18px;font-size:17px;line-height:1.7;color:var(--ink2)}
.feat .tx .more{display:inline-block;margin-top:26px;font:600 12px Raleway,sans-serif;letter-spacing:3.5px;text-transform:uppercase;color:var(--teal)}
.ledger{max-width:1180px;margin:96px auto 0;padding:0 48px}
.ledger .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-bottom:1px solid var(--ink);padding-bottom:14px}
.ledger .hd h3{font-family:Cinzel,serif;font-weight:400;font-size:30px}
.ledger .hd p{font-size:14px;color:var(--muted);max-width:520px;text-align:right;line-height:1.55}
.ledger .grid{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--rule)}
.ledger .c{padding:22px 18px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ledger .c i{font-style:normal;font-size:11px;letter-spacing:1.5px;color:var(--muted)}
.ledger .c b{display:block;font-size:26px;font-weight:600;color:var(--teal);margin-top:6px;white-space:nowrap}
.ledger .c span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.about{max-width:1180px;margin:96px auto 0;padding:0 48px;display:grid;grid-template-columns:1fr 1fr;gap:64px}
.about h3{font-family:Cinzel,serif;font-weight:400;font-size:34px;line-height:1.2}
.about h3 em{font-style:italic;color:var(--gold-l)}
.about p{font-size:17px;line-height:1.8;color:var(--ink2);margin-top:16px}
.about p:first-child{margin-top:0}

/* ---------- phone ---------- */
@media (max-width:768px){
  body{font-size:17px}
  .mast{padding:16px 18px}
  .brand img{width:46px;height:46px}
  .brand .bn{font-size:12px;letter-spacing:3px}
  .brand .bn small{font-size:9px;letter-spacing:3.5px}
  .mast nav{gap:16px;font-size:10px;letter-spacing:2px}
  .mast nav a.hide-m{display:none}
  .hero{height:520px}
  .hero .w{padding:0 20px 18px}
  .kick{font-size:11px;letter-spacing:4px;gap:12px}
  .kick::before{width:30px}
  h1.t{font-size:40px;line-height:1.1;margin-top:14px}
  .dek{font-size:19px;padding:0 20px;margin-top:20px}
  .byline{padding:0 20px;font-size:11px;letter-spacing:2px}
  .lines{grid-template-columns:1fr;padding:0 16px;gap:16px;margin-top:44px}
  .cert{padding:20px 16px 18px}
  .cert table{font-size:12.5px}
  .cert th{font-size:9px;letter-spacing:1.5px}
  .cert .v,.cert .w{font-size:17px}
  .prose{padding:0 20px}
  .prose h2{font-size:28px;margin-top:60px}
  .prose .lead{font-size:20px}
  .prose .lead::first-letter{font-size:68px}
  .pull{padding:0 20px;margin:54px auto}
  .pull p{font-size:27px}
  .range{padding:0 16px}
  .range .box{padding:22px 16px 20px}
  .range .top h4{font-size:19px}
  .tog button{padding:10px 12px;font-size:10px;letter-spacing:1.5px}
  .mk{font-size:11px}
  .scale .limt{font-size:11px}
  .survey{padding:0 16px}
  .survey .box{grid-template-columns:1fr;gap:26px;padding:32px 22px}
  .survey .big{font-size:76px}
  .survey .row{grid-template-columns:44px 1fr;font-size:14px}
  .survey .row b{font-size:24px}
  .check{padding:0 20px}
  .check li{grid-template-columns:44px 1fr}
  .close{padding:68px 0 64px}
  .close .w{padding:0 22px}
  .close h2{font-size:31px}
  .close p{font-size:18px}
  .refs{padding:0 20px}
  footer{padding:36px 20px 44px}
  .homehero{height:760px}
  .homehero .kick{white-space:normal}
  .homehero .ph{background-position:70% 50%}
  .homehero .fade{background:linear-gradient(180deg,rgba(13,19,16,.55) 0%,rgba(13,19,16,.35) 30%,rgba(13,19,16,.88) 62%,rgba(13,19,16,.96) 100%)}
  .homehero .w{top:auto;bottom:120px;padding:0 20px}
  .homehero h1{font-size:40px}
  .homehero p{font-size:17px}
  .feat{padding:0 16px;margin-top:-70px}
  .feat a.card{grid-template-columns:1fr}
  .feat .im{min-height:240px}
  .feat .tx{padding:30px 22px}
  .feat .tx h2{font-size:28px}
  .ledger{padding:0 16px;margin-top:70px}
  .ledger .hd{flex-direction:column;align-items:flex-start}
  .ledger .hd p{text-align:left}
  .ledger .grid{grid-template-columns:repeat(2,1fr)}
  .ledger .c b{font-size:21px}
  .about{grid-template-columns:1fr;gap:28px;padding:0 20px;margin-top:70px}
  .about h3{font-size:28px}
}
