/* Sol Food · A Field Guide to Frequency (SF-ENHANCE).
   Deliberately a different "paper": a cream field-journal insert with ink type, so it reads as
   education, visibly apart from the dark-gold product pages. Brand fonts and rules carry over.
   Contrast (WCAG): ink 15.4:1, ink-2 9.7:1, accent 6:1, every tier colour >= 5.9:1 on paper. */

.fg{
  --paper:#f4ead2;--card:#fffaf0;--ink:#1d1108;--ink-2:#4b3419;--accent:#7a4f0c;--link:#6b3f0a;--hair:rgba(29,17,8,.16);
  position:relative;padding:var(--sec) 0;color:var(--ink);font-family:var(--f-serif);
  background:radial-gradient(120% 60% at 50% 0%,#f8f0dc 0%,var(--paper) 60%),var(--paper)}
.fg::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;pointer-events:none;
  background:linear-gradient(var(--ink),var(--ink)) 0 0/100% 3px no-repeat,linear-gradient(var(--gold-thin),var(--gold-thin)) 0 6px/100% 1px no-repeat}
.fg ::selection{background:#e9c25a;color:var(--ink)}
.fg :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fg a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.16em}
.fg a:hover{text-decoration-thickness:2px}

/* the standing strip: rides along while you read the guide */
.fg-strip{position:sticky;top:4.6rem;z-index:6;margin:0 0 1.2rem;padding:.45rem .9rem;background:var(--ink);color:var(--paper);
  font:700 .66rem/1.35 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;text-align:center;box-shadow:0 8px 20px -14px rgba(0,0,0,.6)}
@media (min-width:960px){.fg-strip{top:5.2rem}}

.fg-banner{border:1.5px solid var(--ink);background:var(--card);padding:1.1rem 1.3rem;margin-bottom:clamp(2.5rem,6vw,4rem);box-shadow:4px 4px 0 var(--ink)}
.fg-banner-tag{font:700 .72rem/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.fg-banner p:last-child{margin:0;font-family:var(--f-sans);font-size:1rem;line-height:1.55;color:var(--ink)}

.fg-head{max-width:46rem;margin-bottom:2.2rem}
.fg-eyebrow{font-family:var(--f-caps);font-size:.8rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
.fg h2{color:var(--ink);font-size:clamp(2.6rem,7vw,4.6rem)}
.fg h2 em{color:var(--accent)}
.fg-sub{color:var(--ink-2);font-size:1.12em;margin:1.2rem 0 0;max-width:40rem}

/* tiers */
.tier{--t:var(--ink-2);display:inline-block;padding:.22rem .6rem;border:1.5px solid var(--t);border-radius:999px;color:var(--t);background:var(--card);
  font:700 .68rem/1.2 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;vertical-align:.1em}
@supports (background:color-mix(in srgb,red 10%,white)){.tier{background:color-mix(in srgb,var(--t) 9%,var(--card))}}
.tier[data-tier=established]{--t:#1e5b3c}
.tier[data-tier=emerging]{--t:#1b4e72}
.tier[data-tier=preliminary]{--t:#87470a}
.tier[data-tier=traditional]{--t:#5c2d72}
.tier[data-tier=contradicted]{--t:#9a2a1c}
.tier[data-tier=history]{--t:var(--ink-2)}

.fg-legend{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:1.2rem 0;margin-bottom:clamp(3rem,7vw,5rem)}
.fg-legend ul{display:grid;gap:.6rem 2rem}
.fg-legend li{font-family:var(--f-sans);font-size:.95rem;line-height:1.45;color:var(--ink-2)}
.fg-legend .tier{margin-right:.5rem}
@media (min-width:860px){.fg-legend ul{grid-template-columns:1fr 1fr}}
.fg-mini{font:700 .72rem/1.2 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin:0 0 .8rem}

.fg-part{margin-bottom:clamp(4rem,9vw,7rem)}
.fg-h3{display:flex;align-items:baseline;gap:.9rem;font-family:var(--f-caps);font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 1rem;padding-bottom:.9rem;border-bottom:2px solid var(--ink);box-shadow:0 4px 0 -3px var(--gold-thin)}
.fg-num{font-family:var(--f-serif);font-style:italic;font-weight:600;font-size:1.7em;letter-spacing:0;text-transform:none;color:var(--accent)}
.fg-lead{color:var(--ink-2);max-width:42rem;margin:0 0 1.8rem}
.fg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .8rem;margin:.6rem 0 0;font-family:var(--f-sans);font-size:.9rem;line-height:1.4}
.fg-fine{font-family:var(--f-sans);font-size:.85rem;color:var(--ink-2);margin:1rem 0 0}

/* ---------- I. timeline ---------- */
.fg-tl{--tl:1;position:relative;padding:.4rem 0 0 2rem;margin-top:2rem}
.fg-tl::before,.fg-tl::after{content:"";position:absolute;left:.45rem;top:0;bottom:0;width:2px;background:var(--hair)}
.fg-tl::after{background:linear-gradient(var(--gold),var(--accent));transform-origin:top;transform:scaleY(var(--tl))}
.fg-node{position:relative;padding:0 0 2rem}
.fg-node::before{content:"";position:absolute;left:calc(-2rem + .45rem - 6px);top:.45rem;width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);background:var(--accent);box-shadow:0 0 0 4px var(--paper)}
.fg-year{font-family:var(--f-caps);font-weight:700;font-size:1.25rem;letter-spacing:.06em;color:var(--accent);margin:0 0 .2rem}
.fg-what{margin:0;color:var(--ink);max-width:40rem}
@media (min-width:860px){
  .fg-tl{padding-left:0}
  .fg-tl::before,.fg-tl::after{left:9.5rem}
  .fg-node{display:grid;grid-template-columns:8rem 1fr;gap:3rem;padding-bottom:2.4rem}
  .fg-node::before{left:calc(9.5rem - 6px)}
  .fg-year{text-align:right;font-size:1.4rem}
}
/* scroll drawing: native view-timeline, or the JS fallback (.fg-tl-js) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .fg-js .fg-tl{view-timeline-name:--fgtl}
    .fg-js .fg-tl::after{animation:fg-fill linear both;animation-timeline:--fgtl;animation-range:cover 12% cover 78%}
    .fg-js .fg-node::before{animation:fg-dot linear both;animation-timeline:view();animation-range:entry 70% cover 45%}
    .fg-js .fg-node > div,.fg-js .fg-year{animation:fg-in linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
  .fg-tl-js::after{transition:transform .12s linear}
  .fg-tl-js .fg-node::before{background:var(--paper);transition:background-color .35s,transform .35s var(--ease-out,ease)}
  .fg-tl-js .fg-node.is-on::before{background:var(--accent);transform:scale(1.15)}
}
@keyframes fg-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fg-dot{from{background:var(--paper);scale:.6}to{background:var(--accent);scale:1}}
@keyframes fg-in{from{opacity:.25;translate:0 14px}to{opacity:1;translate:0 0}}

/* ---------- II. spectrum ---------- */
.fg-spec-card{--stop:0;position:relative;background:var(--card);border:1.5px solid var(--ink);padding:1.4rem 1.3rem 1.2rem;box-shadow:4px 4px 0 var(--ink)}
.fg-wave{display:block;width:100%;height:7rem;margin:0 0 1rem;overflow:visible}
.fg-wave path{fill:none;stroke:var(--accent);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.fg-range{-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;background:transparent;cursor:pointer;margin:0}
.fg-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#5a2e12,#9b5b12 30%,var(--gold) 65%,#fff1b8)}
.fg-range::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#5a2e12,#9b5b12 30%,var(--gold) 65%,#fff1b8)}
.fg-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;background:var(--gold);border:3px solid var(--ink);box-shadow:0 0 0 4px rgba(217,165,33,.25);transition:transform .2s}
.fg-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);border:3px solid var(--ink)}
.fg-range:active::-webkit-slider-thumb{transform:scale(1.12)}
.fg-range:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.fg-ticks{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;margin:.2rem 0 1.2rem;font:600 .72rem/1.25 var(--f-sans);color:var(--ink-2);text-align:center}
.fg-ticks li{cursor:pointer;padding-top:.3rem}
.fg-ticks li:first-child{text-align:left}.fg-ticks li:last-child{text-align:right}
.fg-spec-out{min-height:9.5rem;border-top:1px solid var(--hair);padding-top:1rem}
.fg-spec-out p{margin:0 0 .5rem;max-width:44rem}
.fg-spec-hz{font-family:var(--f-caps);font-weight:700;font-size:1.15rem;letter-spacing:.06em;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.fg-spec-out.is-swap{animation:fg-swap .45s var(--ease-out,ease)}}
@keyframes fg-swap{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* ---------- III. evidence explorer ---------- */
.fg-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.6rem}
.fg-filters button{min-height:2.75rem;padding:.5rem 1rem;border:1.5px solid var(--ink);border-radius:999px;background:var(--card);color:var(--ink);font:700 .78rem/1 var(--f-sans);letter-spacing:.06em;cursor:pointer;transition:background-color .2s,color .2s,transform .15s}
.fg-filters button:hover{background:#f1e2bd}
.fg-filters button:active{transform:scale(.97)}
.fg-filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.fg-cards{display:grid;gap:1.1rem}
@media (min-width:700px){.fg-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.fg-cards{grid-template-columns:repeat(3,1fr)}}
.fg-card{display:flex;flex-direction:column;gap:.55rem;background:var(--card);border:1px solid var(--hair);padding:1.3rem 1.3rem 1rem;box-shadow:0 1px 0 rgba(29,17,8,.05),0 18px 34px -26px rgba(29,17,8,.45);
  transition:transform .35s var(--ease-out,ease),box-shadow .35s var(--ease-out,ease)}
.fg-card[hidden]{display:none}
.fg-card:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(29,17,8,.05),0 26px 40px -24px rgba(29,17,8,.5)}
.fg-card > .tier{align-self:flex-start}
.fg-card > .tier + .tier{margin-top:-.25rem}
.fg-card h4{font-family:var(--f-serif);font-size:1.55rem;font-weight:600;line-height:1.15;margin:.2rem 0 0;color:var(--ink)}
.fg-card > p{margin:0;color:var(--ink-2);font-size:1.02em;line-height:1.45}
.fg-card details{margin-top:auto;border-top:1px solid var(--hair);padding-top:.4rem}
.fg-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:2.75rem;font:700 .8rem/1 var(--f-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.fg-card summary::-webkit-details-marker{display:none}
.fg-card summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -25%;transition:rotate .3s var(--ease-out,ease)}
.fg-card details[open] summary::after{rotate:225deg;translate:0 25%}
.fg-card dl{margin:.4rem 0 .4rem}
.fg-card dl div{padding:.55rem 0;border-top:1px dashed var(--hair)}
.fg-card dl div:first-child{border-top:0}
.fg-card dt{font:700 .7rem/1.2 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.2rem}
.fg-card dd{margin:0;font-family:var(--f-sans);font-size:.95rem;line-height:1.5;color:var(--ink)}
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .fg-card details{interpolate-size:allow-keywords}
    .fg-card details::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .4s var(--ease-out,ease),opacity .3s,content-visibility .4s allow-discrete}
    .fg-card details[open]::details-content{block-size:auto;opacity:1}
  }
}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* ---------- IV. two meanings ---------- */
.fg-tabs{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);border-radius:999px;padding:4px;margin:0 0 1.4rem;background:var(--card);max-width:100%}
.fg-tabs[hidden]{display:none}
.fg-tabs button{position:relative;z-index:1;min-height:2.75rem;padding:.5rem 1.1rem;border:0;border-radius:999px;background:transparent;color:var(--ink);font:700 .8rem/1.2 var(--f-sans);letter-spacing:.06em;cursor:pointer;transition:color .3s}
.fg-tabs button[aria-selected=true]{color:var(--paper)}
.fg-tab-ink{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ink);translate:calc(var(--tab,0) * 100%) 0;transition:translate .45s var(--ease-out,ease)}
.fg-panes{display:grid;gap:1.1rem}
@media (min-width:860px){.fg-panes{grid-template-columns:1fr 1fr}}
.fg-meanings.is-tabbed .fg-panes{grid-template-columns:1fr}
.fg-pane{background:var(--card);border:1.5px solid var(--ink);padding:1.4rem 1.4rem .6rem;box-shadow:4px 4px 0 var(--ink);max-width:52rem}
.fg-pane[hidden]{display:none}
.fg-pane-h{font-family:var(--f-caps);font-size:.95rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.fg-meanings.is-tabbed .fg-pane-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fg-pane p{color:var(--ink);font-size:1.05em}
@media (prefers-reduced-motion:no-preference){.fg-meanings.is-tabbed .fg-pane:not([hidden]){animation:fg-swap .45s var(--ease-out,ease)}}

/* ---------- V. open questions ---------- */
.fg-qs{counter-reset:q;display:grid;gap:.2rem;max-width:48rem}
.fg-qs li{counter-increment:q;display:grid;grid-template-columns:3rem 1fr;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--hair);font-size:1.18em;line-height:1.4}
.fg-qs li::before{content:counter(q);font-style:italic;font-weight:600;font-size:1.8rem;color:var(--accent);line-height:1}
.fg-invite{margin:1.6rem 0 0;font-size:1.1em;color:var(--ink)}
.fg-open{margin-bottom:0}

/* the new blocks' reveals need ink-aware defaults on paper */
@media (prefers-reduced-motion:no-preference){
  .js .fg [data-sfx-reveal]{opacity:0;translate:0 24px}
  .js .fg [data-sfx-reveal].is-in{opacity:1;translate:0 0}
}

/* standalone page (field-guide.html) */
.fg-page{background:var(--bg2)}
.fg .fg-h1{font-size:clamp(2.6rem,7vw,4.6rem);color:var(--ink);font-weight:500;line-height:1.05}
.fg .fg-h1 em{color:var(--accent);font-style:italic}
.fg-page .fg{padding-top:clamp(2rem,5vw,3.5rem)}
.fg-foot{padding:2.5rem 0 3rem}
.fg-foot .footer-base{border-top:0;padding-top:0}