/* ===========================================================================
   FOLHA — a descida molecular de um prato
   Editorial de longevidade · direção de arte generativa
   =========================================================================== */

:root{
  /* paleta duotone editorial */
  --paper:      #efe7d7;   /* osso / papel quente */
  --paper-2:    #e7dcc6;
  --ink:        #1a1d15;   /* verde-tinta quase preto */
  --ink-soft:   #3a3f30;
  --cell:       #12140d;   /* fundo profundo (célula) */
  --ember:      #d9743f;   /* salmão / brasa */
  --leaf:       #5f7d4e;   /* couve */
  --oil:        #c39a3f;   /* azeite */
  --berry:      #8d5a86;   /* fitoquímicos */

  /* acento por objetivo (default = inflamação) */
  --accent:     #d9743f;
  --accent-2:   #f0a877;

  --line:       color-mix(in oklab, var(--ink) 16%, transparent);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --measure: 34rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,1.02vw + 12px,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:fixed;left:50%;top:-60px;transform:translateX(-50%);
  z-index:200;background:var(--ink);color:var(--paper);
  padding:.55rem 1rem;border-radius:0 0 10px 10px;font:600 .8rem/1 var(--sans);
  transition:top .2s var(--ease);text-decoration:none;
}
.skip:focus{ top:0; }

a{ color:inherit; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* --------------------------------------------------------- tela contínua */
#descent{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block; pointer-events:none;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* content sits above the canvas */
.masthead,main,.consulta,.site-foot,.rail,.skip{ position:relative; z-index:3; }

/* ----------------------------------------------------------------- rail */
.rail{
  position:fixed; right:max(1.1rem,2.2vw); top:50%; transform:translateY(-50%);
  z-index:6; display:flex; align-items:center; gap:.8rem;
  mix-blend-mode:normal;
}
.rail ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem; text-align:right; }
.rail button{
  appearance:none; background:none; border:0; cursor:pointer;
  display:flex; align-items:baseline; justify-content:flex-end; gap:.5rem;
  font:500 .72rem/1.2 var(--sans); color:color-mix(in oklab,var(--fg,var(--ink)) 52%,transparent);
  padding:.18rem .1rem; letter-spacing:.02em; transition:color .25s, transform .25s;
}
.rail button i{ font:500 .62rem/1 var(--mono); font-style:normal; opacity:.7; }
.rail button span{ max-width:11rem; overflow:hidden; white-space:nowrap; opacity:.55; transition:opacity .3s,color .25s; }
.rail button:hover{ color:var(--accent); }
.rail button:hover span,.rail li:hover button span{ opacity:1; }
.rail button[aria-current="true"]{ color:var(--fg,var(--ink)); font-weight:600; }
.rail button[aria-current="true"] span{ opacity:1; }
.rail button[aria-current="true"] i{ color:var(--accent); opacity:1; }
.rail__depth{ width:2px; height:34vh; background:var(--line); border-radius:2px; position:relative; overflow:hidden; }
#rail-fill{ position:absolute; left:0; top:0; width:100%; height:0%;
  background:linear-gradient(var(--accent),var(--accent-2)); border-radius:2px; }

/* set --fg per theme so rail/text adapt */
body{ --fg:var(--ink); }

/* ------------------------------------------------------------- masthead */
.masthead{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(1.4rem,5vw,5rem); padding-right:clamp(3.5rem,8vw,7rem);
}
.masthead__inner{ max-width:52rem; }
.kicker{
  font:600 .74rem/1.3 var(--sans); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 clamp(1rem,4vh,2.6rem);
}
.wordmark{
  font-family:var(--serif);
  font-optical-sizing:auto; font-weight:340;
  font-size:clamp(5.5rem,26vw,20rem); line-height:.82; letter-spacing:-.02em;
  margin:0; color:var(--ink);
  font-variation-settings:"opsz" 144;
}
.standfirst{
  font-family:var(--serif); font-weight:360; font-size:clamp(1.15rem,2.3vw,1.7rem);
  line-height:1.42; max-width:38rem; margin:clamp(1.4rem,4vh,2.4rem) 0 0;
  color:var(--ink-soft);
}
.standfirst em{ font-style:italic; color:var(--ink); }
.edition{
  font:500 .82rem/1.5 var(--sans); letter-spacing:.01em; color:var(--ink-soft);
  margin:1.6rem 0 0; max-width:30rem;
}
.edition span{
  font:600 .64rem/1 var(--mono); text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent); border:1px solid var(--line); border-radius:100px;
  padding:.28rem .55rem; margin-right:.6rem;
}
.masthead__cue{
  font:600 .8rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin:clamp(2rem,6vh,3.4rem) 0 0; display:flex; align-items:center; gap:.5rem;
}
.masthead__cue .arrow{ font-size:1.2rem; animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.masthead__disc{
  margin:clamp(2rem,5vh,3rem) 0 0; max-width:34rem;
  font:400 .74rem/1.55 var(--sans); color:color-mix(in oklab,var(--ink) 60%,transparent);
}
.masthead__disc strong{ color:var(--ink-soft); }

/* -------------------------------------------------------------- strata */
.stratum{
  min-height:104svh; display:flex; align-items:center;
  padding:8svh clamp(1.4rem,5vw,5rem);
}
.spread{ width:100%; max-width:42rem; }
.spread--left{ margin-right:auto; }
.spread--right{ margin-left:auto; text-align:left; }
@media (min-width:900px){
  .spread--right{ margin-left:auto; margin-right:clamp(3rem,7vw,7rem); }
  .spread--left{ margin-left:clamp(1rem,4vw,4rem); }
}

.folio{
  font:500 .72rem/1 var(--mono); letter-spacing:.06em;
  color:color-mix(in oklab,var(--fg) 55%,transparent); margin:0 0 1.1rem;
  display:flex; gap:.2rem; align-items:baseline; text-transform:uppercase;
}
.folio b{ color:var(--accent); font-weight:500; }
.over{
  font:600 .78rem/1 var(--sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .7rem;
}
.head{
  font-family:var(--serif); font-weight:380; font-optical-sizing:auto;
  font-size:clamp(2.3rem,6.2vw,4.6rem); line-height:1.02; letter-spacing:-.018em;
  margin:0 0 1.3rem; color:var(--fg); font-variation-settings:"opsz" 120;
}
.body{ max-width:var(--measure); }
.body p{
  font-family:var(--serif); font-weight:360; font-size:clamp(1.02rem,1.5vw,1.24rem);
  line-height:1.62; margin:0 0 1rem; color:color-mix(in oklab,var(--fg) 88%,transparent);
}
.body p em{ font-style:italic; color:var(--fg); }
.body p.tiny{ font-family:var(--sans); font-size:.82rem; line-height:1.5; color:color-mix(in oklab,var(--fg) 66%,transparent); }
.body p.tiny strong{ color:var(--accent); }

.goal-note{
  margin:1.4rem 0 0; padding:.85rem 1.05rem; max-width:var(--measure);
  border-left:2.5px solid var(--accent);
  background:color-mix(in oklab,var(--accent) 8%,transparent);
  font:500 .9rem/1.5 var(--sans); color:var(--fg); border-radius:0 8px 8px 0;
}
.goal-note b{ color:var(--accent); }

.spec{
  margin:1.5rem 0 0; font:500 .72rem/1.4 var(--mono); letter-spacing:.02em;
  color:color-mix(in oklab,var(--fg) 60%,transparent);
  display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap;
}
.spec span{ color:var(--accent); text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; }
.cap{
  margin:1rem 0 0; font:400 italic .82rem/1.45 var(--serif);
  color:color-mix(in oklab,var(--fg) 62%,transparent); max-width:26rem;
}

/* listas de dados */
.ingredients,.macros,.molecules,.pathways,.markers{
  list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.55rem; max-width:var(--measure);
}
.ingredients li,.macros li{
  display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:baseline;
  padding:.6rem 0; border-top:1px solid var(--line);
}
.ingredients li .swatch,.macros li .swatch{
  width:.85rem; height:.85rem; border-radius:3px; align-self:center;
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--fg) 20%,transparent);
}
.ingredients li b,.macros li b{ font:500 1rem/1.2 var(--serif); color:var(--fg); }
.ingredients li span,.macros li span{ font:400 .82rem/1.35 var(--sans); color:color-mix(in oklab,var(--fg) 66%,transparent); grid-column:2; }
.ingredients li em,.macros li em{ font:500 .7rem/1 var(--mono); font-style:normal; color:var(--accent); white-space:nowrap; }

.molecules li{
  padding:.7rem 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr auto; gap:.3rem .7rem; align-items:baseline;
  transition:opacity .3s;
}
.molecules li b{ font:500 1.05rem/1.2 var(--serif); color:var(--fg); }
.molecules li .formula{ font:500 .74rem/1 var(--mono); color:var(--accent); }
.molecules li span{ grid-column:1/-1; font:400 .84rem/1.4 var(--sans); color:color-mix(in oklab,var(--fg) 68%,transparent); }
.molecules li.dim,.pathways li.dim{ opacity:.32; }

.pathways li{
  padding:.7rem 0; border-top:1px solid var(--line); transition:opacity .3s;
}
.pathways li .rowh{ display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
.pathways li b{ font:500 1.02rem/1.2 var(--serif); color:var(--fg); }
.pathways li .arrow{ font:500 .74rem/1 var(--mono); color:var(--accent); }
.pathways li span{ display:block; margin-top:.25rem; font:400 .84rem/1.45 var(--sans); color:color-mix(in oklab,var(--fg) 68%,transparent); }

.markers li{
  padding:.85rem 0; border-top:1px solid var(--line); transition:opacity .3s;
}
.markers li.hot{ opacity:1; }
.markers li.cool{ opacity:.5; }
.marker__top{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.marker__top b{ font:500 1.02rem/1.2 var(--serif); color:var(--fg); }
.marker__delta{ font:500 .8rem/1 var(--mono); color:var(--accent); }
.marker__bar{ margin-top:.5rem; height:8px; border-radius:5px; position:relative;
  background:color-mix(in oklab,var(--fg) 12%,transparent); overflow:hidden; }
.marker__from{ position:absolute; top:0; left:0; height:100%; border-radius:5px;
  background:color-mix(in oklab,var(--fg) 26%,transparent); }
.marker__to{ position:absolute; top:0; left:0; height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.marker__unit{ margin-top:.35rem; font:400 .72rem/1 var(--mono); color:color-mix(in oklab,var(--fg) 55%,transparent); }

/* --------------------------------------------------------------- coda */
.coda{
  min-height:92svh; display:flex; flex-direction:column; justify-content:center;
  padding:8svh clamp(1.4rem,5vw,5rem); max-width:46rem; margin:0 auto; text-align:center;
}
.coda .over{ color:var(--accent); }
.coda .head{ margin-left:auto; margin-right:auto; }
.coda__lede{
  font-family:var(--serif); font-weight:360; font-size:clamp(1.1rem,2vw,1.5rem);
  line-height:1.5; color:color-mix(in oklab,var(--fg) 86%,transparent); margin:.4rem auto 2rem; max-width:34rem;
}
.coda__lede em{ font-style:italic; color:var(--fg); }
.coda__actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; text-decoration:none; font:600 .86rem/1 var(--sans);
  padding:.85rem 1.4rem; border-radius:100px; background:var(--accent); color:#fff;
  border:1px solid transparent; transition:transform .2s,background .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--line); }

/* ------------------------------------------------------------ consulta */
.consulta{
  position:fixed; left:50%; transform:translateX(-50%); bottom:max(.7rem,env(safe-area-inset-bottom));
  z-index:20; display:flex; flex-direction:column; gap:.4rem;
  padding:.6rem .7rem; border-radius:16px;
  background:color-mix(in oklab,var(--panel,#efe7d7) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid color-mix(in oklab,var(--fg) 14%,transparent);
  box-shadow:0 10px 40px -12px rgba(0,0,0,.4);
  max-width:calc(100vw - 1.4rem);
}
body{ --panel:#efe7d7; }
.consulta__cap{
  margin:0 0 .1rem; text-align:center;
  font:600 .58rem/1.2 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  color:color-mix(in oklab,var(--fg) 52%,transparent);
}
.consulta__cap b{ color:var(--accent); font-weight:600; }
.consulta__row{ display:flex; align-items:center; gap:.5rem; flex-wrap:nowrap; }
.consulta__lbl{
  font:600 .6rem/1 var(--mono); text-transform:uppercase; letter-spacing:.12em;
  color:color-mix(in oklab,var(--fg) 62%,transparent); flex:0 0 auto; width:3.6rem;
}
.segmented{ display:flex; gap:.25rem; flex:1 1 auto; min-width:0; }
.segmented button{
  appearance:none; cursor:pointer; flex:1 1 0; min-width:0; white-space:nowrap;
  font:600 .74rem/1 var(--sans); padding:.5rem .5rem; border-radius:10px;
  border:1px solid color-mix(in oklab,var(--fg) 16%,transparent);
  background:color-mix(in oklab,var(--fg) 4%,transparent); color:var(--fg);
  transition:background .2s,color .2s,border-color .2s; overflow:hidden; text-overflow:ellipsis;
}
.segmented button:hover{ border-color:var(--accent); }
.segmented button[aria-checked="true"]{ background:var(--accent); color:#fff; border-color:var(--accent); }
.consulta__motion{
  appearance:none; cursor:pointer; flex:0 0 auto;
  font:600 .58rem/1 var(--mono); text-transform:uppercase; letter-spacing:.06em;
  padding:.5rem .55rem; border-radius:10px; color:color-mix(in oklab,var(--fg) 62%,transparent);
  border:1px solid color-mix(in oklab,var(--fg) 16%,transparent); background:transparent;
}
.consulta__motion[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }

/* --------------------------------------------------------------- foot */
.site-foot{
  padding:clamp(2.5rem,7vw,5rem) clamp(1.4rem,5vw,5rem) 8rem;
  border-top:1px solid var(--line); max-width:48rem;
  background:var(--cell); color:#cdd3c4;
}
.site-foot p{ margin:0 0 .8rem; font:400 .82rem/1.6 var(--sans); }
.site-foot strong{ color:#e9ecdf; }
.site-foot__disc{ color:color-mix(in oklab,#cdd3c4 78%,transparent); }
.site-foot a{ color:var(--ember); text-decoration:underline; text-underline-offset:3px; }

/* --------------------------------------------------- theme per stratum
   O corpo do texto herda o tema do estrato ativo, controlado por JS via
   [data-active-theme] no <body>. Transição suave de cor de texto. */
body{ transition:color .6s var(--ease); }
body[data-active-theme="dark"]{ --fg:#e9ecdf; --panel:#171a11; }
body[data-active-theme="dark"] .consulta__lbl{ color:color-mix(in oklab,#e9ecdf 62%,transparent); }
body[data-active-theme="light"]{ --fg:var(--ink); --panel:#efe7d7; }

/* legibilidade: leve painel atrás dos blocos quando sobre a arte densa */
.spread{
  padding:clamp(1.1rem,2.4vw,1.8rem);
  border-radius:14px;
  background:color-mix(in oklab,var(--panel) 42%,transparent);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .rail{ right:.5rem; gap:.4rem; }
  .rail__depth{ height:26vh; }
  .rail button span{ display:none; }
  .rail button[aria-current="true"] span{ display:none; }
  .spread{ max-width:100%; }
}
@media (max-width:560px){
  .rail{ display:none; }
  .masthead{ padding:1.15rem; padding-top:11svh; justify-content:flex-start; }
  .masthead__inner{ width:100%; max-width:100%; }
  .kicker{ font-size:.6rem; letter-spacing:.12em; }
  .wordmark{ font-size:clamp(4rem,26vw,7rem); }
  .standfirst{ font-size:clamp(1rem,4.4vw,1.22rem); max-width:100%; }
  .edition,.masthead__disc{ max-width:100%; }
  .stratum{ padding:7svh 1.1rem; }
  .head{ font-size:clamp(2rem,8.5vw,3rem); }
  .consulta{ padding:.5rem .55rem; gap:.35rem; width:calc(100vw - .8rem); max-width:none; }
  .consulta__lbl{ width:2.6rem; font-size:.52rem; }
  .segmented{ gap:.2rem; }
  .segmented button{ font-size:.66rem; padding:.5rem .25rem; }
  .consulta__motion{ display:none; }
  .body,.goal-note,.ingredients,.macros,.molecules,.pathways,.markers,.spec{ max-width:100%; }
}
/* universal safety against horizontal overflow */
.standfirst,.body p,.head,.kicker,.coda__lede{ overflow-wrap:break-word; }
.masthead,main,.coda{ max-width:100vw; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .masthead__cue .arrow{ animation:none; }
  *{ transition-duration:.01ms!important; }
}