/* ============================================================================
   Colitis Compass — shared ground for every page of the site.

   The product is a document a patient keeps, so the site is set like one: cool
   near-white stock, ink rather than black, hairlines, one measured column of
   prose. Colour is spent on one thing only, the three levels of evidence,
   because keeping them apart is what the product is for. Nothing else is tinted.

   Page-specific rules live in each page's own <style> block. Tokens, header,
   footer, buttons and base type live here so the four pages cannot drift apart.
   ==========================================================================*/
:root{
  --paper:#F7F8F6; --card:#FFFFFF; --sunk:#F0F2EE;
  --ink:#172420; --ink-2:#4A5A55; --ink-3:#63726D;
  --rule:#DFE3DE; --rule-2:#C6CEC9;

  /* the three levels of evidence, carried over from the product itself */
  --research:#1A5FA8; --clinical:#6941A8; --anecdotal:#9C5B06;
  /* the product's flare/remission ratings */
  --lean:#136C33; --caution:#8A6100; --avoid:#B3202C;

  --shell:1140px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.62 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--research);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 28px}

/* --- shared type ---------------------------------------------------------*/
.label{font:500 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.08}
h1{font-size:clamp(2.55rem,5.6vw,4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.45rem)}
h3{font-size:1.35rem}
.lede{font-size:1.1875rem;line-height:1.58;color:var(--ink-2)}

/* --- header --------------------------------------------------------------*/
.top{position:sticky;top:0;z-index:20;background:rgba(247,248,246,.88);backdrop-filter:saturate(1.6) blur(10px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{font-family:var(--serif);font-size:1.28rem;letter-spacing:-.015em}
.top nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.top nav a{font-size:.9375rem;color:var(--ink-2);text-decoration:none;transition:color .15s}
.top nav a:hover{color:var(--ink)}
.top .demo-link{font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--ink)}

/* --- buttons -------------------------------------------------------------*/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 .9375rem/1 var(--sans);
     padding:14px 22px;border-radius:9px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);
     text-decoration:none;cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(23,36,32,.18)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{border-color:var(--ink);box-shadow:0 6px 18px rgba(23,36,32,.08)}
.btn.buy[aria-disabled="true"]{background:transparent;color:var(--ink-3);border-color:var(--rule-2);cursor:not-allowed}
.btn.buy[aria-disabled="true"]:hover{transform:none;box-shadow:none;border-color:var(--rule-2)}

/* --- clickwrap -----------------------------------------------------------*/
.agree{display:flex;gap:10px;align-items:flex-start;width:100%;font-size:.875rem;line-height:1.45;color:var(--ink-2);cursor:pointer}
.agree input{width:17px;height:17px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--ink);cursor:pointer}
.agree a{color:var(--research)}
.agree.nudge{color:var(--avoid)}
.agree.nudge a{color:var(--avoid)}

/* --- red-flag box, identical wherever it appears -------------------------*/
.flag{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--avoid);
      border-radius:12px;padding:22px 24px;font-size:.9063rem;line-height:1.6;color:var(--ink-2)}
.flag b{color:var(--avoid);font-weight:600}
.flag a{color:var(--research)}

/* --- footer --------------------------------------------------------------*/
footer{border-top:1px solid var(--rule);background:var(--sunk);padding:56px 0 64px;font-size:.875rem;color:var(--ink-3)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px;margin-bottom:40px}
.fgrid h4{font:500 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);margin-bottom:15px}
.fgrid a{display:block;color:var(--ink-2);text-decoration:none;padding:5px 0;line-height:1.4}
.fgrid a:hover{color:var(--ink)}
.fgrid p{max-width:34ch;line-height:1.6}
.fbrand{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.fbrand img{width:34px;height:34px;border-radius:9px}
.fbrand span{font-family:var(--serif);font-size:1.22rem;color:var(--ink)}
.fnote{padding-top:26px;border-top:1px solid var(--rule);line-height:1.65;max-width:78ch}

/* --- page-load sequence --------------------------------------------------*/
@media (prefers-reduced-motion: no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .62s cubic-bezier(.22,.7,.3,1) forwards}
  .rise.d1{animation-delay:.06s} .rise.d2{animation-delay:.13s} .rise.d3{animation-delay:.2s}
  .rise.d4{animation-delay:.3s} .rise.d5{animation-delay:.38s} .rise.d6{animation-delay:.46s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* --- responsive ----------------------------------------------------------*/
@media(max-width:940px){
  .top nav a:not(.demo-link){display:none}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .fgrid{grid-template-columns:1fr}
}

/* --- document pages (about / ulcerative-colitis / method) ----------------*/
.doc{padding:64px 0 96px}
.doc-head{max-width:64ch;margin-bottom:8px}
.doc-head h1{font-size:clamp(2.2rem,4.8vw,3.3rem);margin:16px 0 20px}
.doc-head .lede{max-width:58ch}
.doc-body{max-width:68ch;margin-top:48px}
.doc-body h2{font-size:clamp(1.5rem,2.6vw,1.95rem);margin:56px 0 16px;padding-top:26px;border-top:1px solid var(--rule)}
.doc-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc-body h3{font-size:1.2rem;margin:32px 0 8px}
.doc-body p{margin-bottom:16px;color:var(--ink-2)}
.doc-body b,.doc-body strong{color:var(--ink);font-weight:600}
.doc-body ul{list-style:none;margin:0 0 20px}
.doc-body li{position:relative;padding-left:21px;margin-bottom:10px;color:var(--ink-2)}
.doc-body li:before{content:"";position:absolute;left:3px;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--rule-2)}
.doc-body a{color:var(--research)}
.doc-body .flag{margin:32px 0}
.doc-body .pull{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--edge,var(--rule-2));
                border-radius:12px;padding:20px 24px;margin:28px 0;color:var(--ink-2)}
.doc-body .pull p:last-child{margin-bottom:0}
.doc-body .pull .label{margin-bottom:10px;color:var(--edge,var(--ink-3))}
.pull.e-res{--edge:var(--research)} .pull.e-clin{--edge:var(--clinical)} .pull.e-anec{--edge:var(--anecdotal)} .pull.e-lean{--edge:var(--lean)}

/* portrait header, About page only */
.doc-head.person{max-width:none}
.person{display:flex;gap:38px;align-items:flex-start}
.person > div{max-width:52ch}
.person img{width:150px;height:150px;border-radius:14px;flex:0 0 auto;border:1px solid var(--rule)}

/* the strip that closes every document page */
.next{border-top:1px solid var(--rule);margin-top:72px;padding-top:34px;max-width:68ch}
.next h3{margin-bottom:8px}
.next p{color:var(--ink-2);margin-bottom:18px}
.next .row{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:560px){
  .doc{padding:44px 0 72px}
  .person{flex-direction:column;gap:20px}
  .person img{width:116px;height:116px}
  .next .row .btn{width:100%}
}
.person figure{flex:0 0 auto}
.person figure img{width:190px;height:190px;border-radius:14px;border:1px solid var(--rule)}
.person figcaption{margin-top:12px;font:500 11px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.person figcaption span{color:var(--ink-3);letter-spacing:.07em}
@media(max-width:560px){.person figure img{width:130px;height:130px}}