/* 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}
}
.prose .recipe-photo{margin:0 0 var(--s5)}
.recipe-photo img{display:block;width:100%;height:auto}

/* Consent banner (non-modal, fixed to the viewport bottom). Append to site.css; uses its tokens only.
   Accept and Reject are the same component with the same styles: no colour, size or order nudge. */
.consent{
  position:fixed;inset-inline:0;bottom:0;z-index:5;
  max-height:50vh;max-height:50dvh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--tint);border-top:var(--rule);color:var(--ink);
  font-size:0.9375rem;line-height:1.5;
}
.consent[hidden]{display:none}
.consent-inner{padding-block:var(--s2) max(var(--s2),env(safe-area-inset-bottom))}
/* Phone: the heading runs in as a label at the start of the text, so the banner stays within 35% of 320x568. */
.consent-title{display:inline;font-family:var(--sans);font-weight:600;font-size:0.9375rem;line-height:1.4;margin:0 0.375em 0 0}
.consent-title:focus{outline:none}
.consent-title:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.consent-text{display:inline;margin:0;max-width:46rem}
/* Inline link: the padding widens the tap area to 44px without changing the line box. */
.consent-text a{padding-block:12px;font-weight:600}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
.consent-button{
  min-height:44px;margin:0;padding:var(--s2) var(--s4);
  font:inherit;font-weight:600;line-height:1.35;
  color:var(--teal);background:var(--page);border:2px solid var(--teal);border-radius:0;
  cursor:pointer;
  text-decoration-line:underline;text-decoration-color:transparent;
  text-decoration-thickness:2px;text-underline-offset:0.18em;
}
.consent-button:hover{text-decoration-color:currentColor}
.consent-button:active{background:var(--tint)}

/* Keeps the end of the page readable above the banner while it is open.
   --consent-h is set by the script from the banner's height; the fallbacks fit the placeholder copy. */
body:has(.consent:not([hidden])){padding-bottom:var(--consent-h,12rem)}

@media (min-width:44em){
  .consent{font-size:1rem;line-height:1.6}
  .consent-inner{
    display:flex;align-items:center;justify-content:space-between;gap:var(--s3) var(--s6);
    padding-block:var(--s4) max(var(--s4),env(safe-area-inset-bottom));
  }
  .consent-title{display:block;margin:0 0 var(--s1)}
  .consent-text{display:block}
  .consent-actions{flex:none;grid-template-columns:repeat(2,8rem);margin-top:0}
  body:has(.consent:not([hidden])){padding-bottom:var(--consent-h,9rem)}
}

/* "Cookie settings" in the footer: a button that reads as one of the footer links. */
.footer-button{
  display:inline-block;margin:0;padding:10px 0;border:0;border-radius:0;background:none;
  font:inherit;color:var(--teal);cursor:pointer;text-align:left;
  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);
}
.footer-button:hover{text-decoration-thickness:2px}
.footer-button[hidden]{display:none}

/* No entrance animation by design (DESIGN.md 6: motion is the underline transition only). */
@media (prefers-reduced-motion:reduce){
  .consent,.consent *,.footer-button{transition:none;animation:none}
}
@media print{
  .consent{display:none}
  body:has(.consent){padding-bottom:0}
}

/* Contact form (/contact/). Append to site.css; uses its tokens only.
   Errors are marked in text ("Error:" prefix, ink 600) and by a heavier ink border, not by colour:
   --caution stays reserved for safety content (DESIGN.md 1). */
.contact-form{margin-top:var(--s5)}
.form-field{margin:0 0 var(--s5)}
.form-label{display:block;font-weight:600;font-size:1rem;line-height:1.4;color:var(--ink);margin-bottom:var(--s1)}
.form-req{font-weight:400;color:var(--muted)}
.form-hint{margin:0 0 var(--s2);color:var(--muted);font-size:0.9375rem;line-height:1.5}
.form-error{margin:var(--s2) 0 0;font-weight:600;font-size:0.9375rem;line-height:1.5;color:var(--ink)}
.form-error::before{content:"Error: "}
.form-error:empty{display:none}

/* Inputs inherit body size (17px phone, 18px desktop), so iOS never zooms; the max() is a floor. */
.form-input{
  display:block;width:100%;min-height:44px;margin:0;
  padding:10px var(--s3);
  font:inherit;font-size:max(1rem,1em);line-height:1.5;color:var(--ink);
  background:var(--page);border:2px solid var(--muted);border-radius:0;
}
input.form-input,.form-select{max-width:30rem}
.form-textarea{min-height:12rem;resize:vertical}
.form-select{
  appearance:none;padding-right:var(--s7);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:right 22px center,right 16px center;
  background-size:6px 6px;background-repeat:no-repeat;
}
.form-input[aria-invalid="true"]{border-width:3px;border-color:var(--ink);padding:9px 11px}

/* Honeypot: off-screen, never display:none (bots skip hidden fields). */
.form-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.form-submit{margin-top:var(--s6);padding-top:var(--s5);border-top:var(--line)}
.form-note{margin:0 0 var(--s4);color:var(--muted);font-size:0.9375rem;line-height:1.6}
.form-note a{padding-block:12px}
.form-button{
  display:inline-block;min-height:44px;min-width:10rem;margin:0;padding:10px var(--s5);
  font:inherit;font-weight:600;line-height:1.35;
  color:var(--page);background:var(--teal);border:2px solid var(--teal);border-radius:0;cursor:pointer;
  text-decoration-line:underline;text-decoration-color:transparent;
  text-decoration-thickness:2px;text-underline-offset:0.18em;
}
.form-button:hover{text-decoration-color:currentColor}
.form-button:active{background:var(--ink);border-color:var(--ink)}

/* Status (success: role=status) and problem (role=alert). Box idiom: --line border all sides. */
.form-status{background:var(--tint);border:var(--line);padding:var(--box-pad);margin:0 0 var(--s5)}
.form-status[hidden]{display:none}
.form-status:focus{outline:none}
.form-status:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.form-status-error{background:var(--page);border:3px solid var(--ink)}
.form-status p{margin:0}
.form-status .form-status-title{font-family:var(--serif);font-weight:700;font-size:1.125rem;line-height:1.35;margin-bottom:var(--s2)}
.form-status .form-status-list{list-style:none;margin:var(--s2) 0 0;padding-left:0}
.form-status-list a{display:inline-block;padding-block:10px;margin-block:-6px;font-weight:600}

@media (prefers-reduced-motion:reduce){
  .contact-form *,.form-status *{transition:none;animation:none}
}