/* fasting.com sitewide styles. Contract: /workspace/DESIGN.md (tokens, type scale, layout, components). */

/* Fonts: self-hosted latin subset, OFL (licences in /assets/fonts/). */
@font-face{font-family:"PT Serif";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/pt-serif-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/open-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/open-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/open-sans-latin-700-normal.woff2") format("woff2")}

:root{
  --ink:#1f2933;
  --muted:#53606b;
  --teal:#15607a;
  --tint:#f4f6f8;
  --zebra:#f9fafb;
  --hairline:#c7d0d8;
  --caution:#8a3324;
  --page:#ffffff;
  --serif:"PT Serif",Georgia,"Times New Roman",serif;
  --sans:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:56px;
  --rule:3px solid var(--teal);
  --line:1px solid var(--hairline);
  --gutter:16px;
  --box-pad:16px;
  --section-gap:var(--s6);
  color-scheme:light;
}
@media (min-width:44em){
  :root{--gutter:24px;--box-pad:24px;--section-gap:var(--s7)}
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  overflow-wrap:break-word;
}
@media (min-width:44em){body{font-size:1.125rem}}

h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--ink);margin:0}
h1{font-size:2rem;line-height:1.25}
h2{font-size:1.5rem;line-height:1.3}
h3{font-size:1.25rem;line-height:1.35}
@media (min-width:44em){
  h1{font-size:2.5rem}
  h2{font-size:1.75rem}
  h3{font-size:1.375rem}
}
p,ul,ol{margin:0 0 1em}

a{
  color:var(--teal);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.18em;
  transition:text-decoration-thickness 120ms cubic-bezier(0.25,1,0.5,1);
}
a:visited{color:var(--teal)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
main:focus{outline:none}
time{font-variant-numeric:tabular-nums}

.container{width:min(70rem,100% - 2 * var(--gutter));margin-inline:auto}

/* Skip link */
.skip-link{
  position:absolute;left:var(--s4);top:var(--s2);z-index:10;
  padding:var(--s3) var(--s4);background:var(--teal);color:var(--page);font-weight:600;
  transform:translateY(-200%);
}
.skip-link:visited{color:var(--page)}
.skip-link:focus{transform:none}

/* Utility strip */
.utility{
  background:var(--ink);color:var(--page);font-size:0.9375rem;line-height:1.4;
  min-height:38px;display:flex;align-items:center;
  padding:var(--s2) var(--gutter);
}
@media (min-width:73em){.utility{padding-inline:calc((100% - 70rem) / 2)}}
.utility p{margin:0}

/* Masthead */
.masthead .container{padding-block:var(--s5) var(--s4)}
.wordmark{
  display:inline-block;font-family:var(--serif);font-weight:700;color:var(--teal);
  font-size:1.75rem;line-height:1.2;text-decoration:none;
}
.wordmark:visited{color:var(--teal)}
.wordmark:hover{text-decoration:underline;text-decoration-thickness:2px}
.tagline{margin:var(--s1) 0 0;color:var(--muted);font-size:0.9375rem;line-height:1.6}
@media (min-width:44em){
  .masthead .container{padding-block:var(--s6) var(--s5)}
  .wordmark{font-size:2.25rem}
  .tagline{font-size:1rem}
}

/* Main nav: 2-column grid on phones, wrapping tab row from 44em. No JS, no hover-only behavior. */
.site-nav{background:var(--tint);border-top:var(--rule);border-bottom:var(--line)}
.site-nav ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);
  border-inline:var(--line);
}
.site-nav li{display:flex;background:var(--tint)}
.site-nav li:last-child:nth-child(odd){grid-column:1 / -1}
.site-nav a{
  flex:1;display:flex;align-items:center;min-height:44px;padding:var(--s3) var(--s4);
  font-weight:600;font-size:0.9375rem;line-height:1.35;color:var(--teal);text-decoration:none;
}
.site-nav a:visited{color:var(--teal)}
.site-nav a:hover{text-decoration:underline;text-decoration-thickness:2px}
.site-nav a[aria-current]{background:var(--teal);color:var(--page)}
.site-nav a:focus-visible{outline-offset:-3px}
.site-nav a[aria-current]:focus-visible{outline-color:var(--page)}
@media (min-width:44em){
  .site-nav ul{display:flex;flex-wrap:wrap;gap:0;background:none;border-inline:0}
  .site-nav li{background:none;border-right:var(--line)}
  .site-nav li:last-child{border-right:0}
  .site-nav a{font-size:1rem}
}

/* Page header (breadcrumb, H1, lede), full width above the columns */
.page-header{padding-block:var(--s6) var(--s5);border-bottom:var(--line)}
.page-header h1{max-width:50rem}
.lede{margin:var(--s4) 0 0;max-width:50rem;font-size:1.125rem;line-height:1.6}
@media (min-width:44em){
  .page-header{padding-block:var(--s7) var(--s6)}
  .lede{font-size:1.25rem}
}

.breadcrumb{font-size:0.9375rem;line-height:1.6;color:var(--muted);margin-bottom:var(--s2)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.breadcrumb li+li::before{content:"/";padding-inline:var(--s2);color:var(--muted)}
.breadcrumb a{display:inline-block;padding-block:10px}
@media (min-width:44em){.breadcrumb{font-size:1rem}}

/* Two-column layout from 60em. Main is a subgrid so the page header spans both columns
   while the sidebar starts beside the body, as in the comp. */
.main-body{padding-top:var(--s6);min-width:0}
.sidebar{display:grid;gap:var(--s5);align-content:start;margin-top:var(--section-gap);max-width:46rem}
@media (min-width:60em){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s7)}
  .main{grid-column:1}
  .sidebar{grid-column:2;margin-top:0;padding-top:var(--s6)}
  @supports (grid-template-rows:subgrid){
    .layout{grid-template-rows:auto 1fr}
    .main{grid-column:1 / -1;grid-row:1 / -1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
    .page-header{grid-column:1 / -1}
    .main-body{grid-column:1;grid-row:2}
    .sidebar{grid-row:2}
  }
}

/* Sidebar boxes */
.box{border:var(--line);background:var(--page)}
.box-title{font-family:var(--sans);font-weight:600;font-size:0.9375rem;line-height:1.4;margin:0}
.box-about{background:var(--tint)}
.box-about .box-title{background:var(--ink);color:var(--page);padding:var(--s3) var(--box-pad)}
.box-about .box-body{padding:var(--box-pad)}
.box-body p:last-child{margin-bottom:0}
.box-review .box-title{padding:var(--s3) var(--box-pad);border-bottom:var(--line)}
.box-review ol{margin:0;padding:var(--box-pad) var(--box-pad) var(--box-pad) calc(var(--box-pad) + 1.25em)}
.box-review li+li{margin-top:var(--s2)}
.sidebar{font-size:1rem;line-height:1.6}

/* What the evidence actually supports (front matter evidence_summary): the About box idiom (ink bar, tint body) */
.box-evidence{background:var(--tint);margin-block:var(--section-gap) 0;max-width:46rem}
.box-evidence .box-title{background:var(--ink);color:var(--page);padding:var(--s3) var(--box-pad);margin:0}
.box-evidence .box-body{padding:var(--box-pad)}
.box-evidence h3,.prose .box-evidence h3{font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1.4;margin:var(--s4) 0 var(--s2)}
.box-evidence .box-body>:first-child{margin-top:0}
.box-evidence .box-body>:last-child{margin-bottom:0}

/* Medical caution */
.caution{border:3px solid var(--caution);background:var(--page);padding:var(--box-pad);margin-block:var(--s5)}
.caution-title{font-family:var(--serif);font-size:1.125rem;line-height:1.35;color:var(--caution);margin-bottom:var(--s2)}
.caution p{margin:0}
.sidebar .caution{margin-block:0}

/* Prose */
.prose>*{max-width:46rem}
.prose h2{margin:var(--section-gap) 0 var(--s4)}
.prose h3{margin:var(--s6) 0 var(--s3)}
.prose>:first-child,.prose>section:first-child>h2:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:var(--s2)}

/* Article meta */
.article-meta{color:var(--muted);font-size:0.9375rem;line-height:1.6}
.article-meta p{margin:0}
@media (min-width:44em){.article-meta{font-size:1rem}}

/* Home: method list (one bordered box, rows split by hairlines; not a card grid) */
.methods>h2{margin-bottom:var(--s2)}
.section-intro{color:var(--muted);max-width:46rem}
.method-list{border:var(--line);margin-top:var(--s5)}
.method{padding:var(--box-pad);scroll-margin-top:var(--s4)}
.method+.method{border-top:var(--line)}
.method h3{margin-bottom:var(--s2)}
.method>p{max-width:46rem}
.method>p:last-child{margin-bottom:0}
.guide-links{list-style:none;margin:var(--s3) 0 0;padding:0}
.guide-links li+li{margin-top:var(--s2)}
.guide-links a{display:inline-block;padding-block:var(--s2);margin-block:calc(-1 * var(--s1));font-weight:600}
.guide-links .meta{display:block;color:var(--muted);font-size:0.9375rem;line-height:1.6}
.home-prose{margin-top:var(--section-gap)}

/* Recently reviewed table */
.reviewed{margin-top:var(--section-gap)}
.reviewed-table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.6}
.reviewed-table caption{
  text-align:left;font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1.3;
  margin-bottom:var(--s4);
}
.reviewed-table th{
  background:var(--tint);text-align:left;font-weight:600;font-size:0.9375rem;line-height:1.4;
  padding:var(--s3) var(--s4);border:var(--line);
}
.reviewed-table td{padding:var(--s3) var(--s4);border:var(--line);vertical-align:top;overflow-wrap:anywhere}
.reviewed-table tbody tr:nth-child(even){background:var(--zebra)}
.reviewed-table td a{display:inline-block;padding-block:var(--s2);margin-block:calc(-1 * var(--s2))}
@media (min-width:44em){.reviewed-table caption{font-size:1.75rem}}

/* Phone: stacked labelled rows; explicit roles in the markup keep table semantics. */
@media (max-width:43.99em){
  .reviewed-table,.reviewed-table tbody,.reviewed-table tr,.reviewed-table caption{display:block}
  .reviewed-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .reviewed-table tbody{border-top:var(--line)}
  .reviewed-table tr{padding:var(--s3);border-bottom:var(--line)}
  .reviewed-table td{display:inline;padding:0;border:0}
  .reviewed-table td[data-label="Page"]{display:block;margin-bottom:var(--s1)}
  .reviewed-table td[data-label="Page"] a{display:block;padding-block:10px;margin-block:-6px 0}
  .reviewed-table td:not([data-label="Page"]){color:var(--muted);font-size:0.9375rem}
  .reviewed-table td:not([data-label="Page"])::before{content:attr(data-label) ": "}
  .reviewed-table td[data-label="Last reviewed"]{margin-right:var(--s4)}
}

/* Trial-by-trial evidence table. A container query (not the viewport) decides table vs stacked rows,
   because the main column is narrowest beside the sidebar (564px at 960). Words never split, so the
   real table needs its min-content width (767px with 8px cell inline padding): stack below 48rem. */
.prose>.trials{max-width:none}
.trials{container-type:inline-size;margin-block:var(--s6)}
.trials-table{width:100%;border-collapse:collapse;font-size:0.9375rem;line-height:1.5}
.trials-table caption{text-align:left;font-family:var(--serif);font-weight:700;font-size:1.25rem;line-height:1.35;margin-bottom:var(--s3)}
.trials-table th,.trials-table td{padding:var(--s3) var(--s2);border:var(--line);text-align:left;vertical-align:top;overflow-wrap:break-word;hyphens:manual}
.trials-table thead th:nth-child(1){width:7.5rem}
.trials-table thead th:nth-child(3){width:8.5rem}
.trials-table thead th:nth-child(6){width:6.5rem}
.trials-table thead th{background:var(--tint);font-weight:600;line-height:1.4}
.trials-table tbody th{font-weight:600}
.trials-table tbody tr:nth-child(even){background:var(--zebra)}
.trials-table td[data-label="Design"] span{display:block}
.trials-table td[data-label="Design"] span+span,.trials-table td[data-label="Finding"]{color:var(--muted)}
.trials-table td[data-label="Finding"]{font-weight:600}
@container (max-width:48rem){
  .trials-table,.trials-table tbody,.trials-table tr,.trials-table caption,.trials-table th,.trials-table td{display:block}
  .trials-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .trials-table tbody{border-top:var(--line)}
  .trials-table tr{padding:var(--s3);border-bottom:var(--line)}
  .trials-table th,.trials-table td{padding:0;border:0;width:auto}
  .trials-table tbody th a{display:block;padding-block:11px;margin-top:-6px}
  .trials-table td{margin-top:var(--s2)}
  .trials-table td:empty{display:none}
  .trials-table td::before{content:attr(data-label) ": ";font-weight:600;color:var(--ink)}
  .trials-table td[data-label="Design"] span{display:inline}
  .trials-table td[data-label="Design"] span+span::before{content:", "}
}

/* Sponsored mention (FMD only, max one; labels the link) */
.sponsored{background:var(--tint);border:var(--line);padding:var(--box-pad);margin-block:var(--section-gap) 0;max-width:46rem}
.sponsored-label{font-weight:600;font-size:0.9375rem;line-height:1.4;margin-bottom:var(--s2)}
.sponsored p:last-child{margin-bottom:0}

/* References */
.references{margin-top:var(--section-gap);max-width:46rem}
.references h2{margin-bottom:var(--s4)}
.references ol{padding-left:1.5em;font-size:0.9375rem;line-height:1.6;overflow-wrap:anywhere}
.references li+li{margin-top:var(--s3)}
.finding{display:block;font-weight:600;color:var(--muted)}
.references li:target{background:var(--tint)}
@media (min-width:44em){.references ol{font-size:1rem}}

/* Footer */
.site-footer{margin-top:var(--s8);background:var(--tint);border-top:var(--rule);color:var(--muted);font-size:0.9375rem;line-height:1.6}
.site-footer .container{padding-block:var(--s6)}
.footer-links{list-style:none;margin:var(--s3) 0 0;padding:0}
.footer-links a{display:inline-block;padding-block:10px}
.site-footer p{margin:0}
@media (min-width:44em){
  .site-footer{font-size:1rem}
  .site-footer .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3) var(--s5)}
  .footer-links{display:flex;flex-wrap:wrap;column-gap:var(--s5);margin:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important}
}