/* Field Guide design, buyguide archetype. Palette, type, grid and class
   prefix are pinned in DESIGN-SPECS.md section B. Values written as CSS
   custom properties, referenced with var(). CSS grid for page layout,
   logical properties throughout, prefix fg-. */

:root{
  color-scheme: light;
  --fg-page:#FFFFFF;
  --fg-panel:#F2F5F7;
  --fg-ink:#10161C;
  --fg-accent:#16607A;
  --fg-rule:#D3DCE3;
  --fg-muted:#55636E;
  --fg-sans:Inter,"Helvetica Neue",Arial,sans-serif;
  --fg-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --fg-shell:76rem;
  --fg-measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin-block:0;
  margin-inline:0;
  background-color:var(--fg-page);
  color:var(--fg-ink);
  font-family:var(--fg-sans);
  font-size:1.0625rem;
  line-height:1.62;
}

h1,h2,h3{font-family:var(--fg-sans);line-height:1.22;letter-spacing:-0.01em;margin-block:0 0.6rem}
h1{font-size:1.8rem;font-weight:700}
h2{
  font-size:1.32rem;font-weight:600;
  margin-block-start:2.5rem;
  padding-block-end:0.45rem;
  border-block-end:1px solid var(--fg-rule);
}
h3{font-size:1.04rem;font-weight:600;margin-block-start:1.6rem}
p{margin-block:0 1rem;max-inline-size:var(--fg-measure)}
ul{margin-block:0 1rem;padding-inline-start:1.15rem;max-inline-size:var(--fg-measure)}
li{margin-block-end:0.35rem}

a{color:var(--fg-accent);text-decoration:underline;text-underline-offset:0.16em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--fg-accent);
  outline-offset:2px;
  border-radius:2px;
}

.fg-visually-hidden{
  position:absolute;
  inline-size:1px;block-size:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.fg-skip{
  position:absolute;inset-block-start:-3rem;inset-inline-start:0.75rem;
  background-color:var(--fg-panel);color:var(--fg-ink);
  padding-block:0.5rem;padding-inline:0.75rem;
  font-family:var(--fg-mono);font-size:0.8rem;
  z-index:5;
}
.fg-skip:focus-visible{inset-block-start:0.5rem}

/* nav: left wordmark, right link row, thin bottom rule, not sticky */
.fg-nav{border-block-end:1px solid var(--fg-rule);background-color:var(--fg-page)}
.fg-nav__inner{
  max-inline-size:var(--fg-shell);
  margin-inline:auto;
  padding-inline:1.25rem;padding-block:0.9rem;
  display:grid;gap:0.65rem;
}
.fg-nav__mark{
  font-family:var(--fg-mono);font-size:0.9rem;
  text-transform:none;letter-spacing:0.04em;
  color:var(--fg-ink);text-decoration:none;
  justify-self:start;
}
.fg-nav__mark:hover{color:var(--fg-accent)}
.fg-nav__links{
  display:grid;grid-template-columns:repeat(3,auto);
  gap:0.4rem 1.2rem;justify-content:start;
  list-style:none;margin-block:0;padding-inline-start:0;
}
.fg-nav__links a{
  font-family:var(--fg-mono);font-size:0.78rem;
  text-transform:uppercase;letter-spacing:0.07em;
  text-decoration:none;color:var(--fg-muted);
}
.fg-nav__links a:hover{color:var(--fg-accent);text-decoration:underline}

/* page shell: two column grid on desktop, article left, rail right */
.fg-shell{
  max-inline-size:var(--fg-shell);
  margin-inline:auto;
  padding-inline:1.25rem;padding-block:2rem 3rem;
  display:grid;gap:2rem;
}
.fg-head{max-inline-size:var(--fg-measure)}
.fg-deck{color:var(--fg-muted);font-size:1.08rem}

.fg-meta{
  font-family:var(--fg-mono);font-size:0.72rem;
  text-transform:uppercase;letter-spacing:0.06em;
  color:var(--fg-muted);
  border-block:1px solid var(--fg-rule);
  padding-block:0.6rem;
  margin-block:1.25rem;
  max-inline-size:none;
}
.fg-meta span{margin-inline-end:0.9rem;white-space:nowrap}

.fg-panel{
  background-color:var(--fg-panel);
  border-inline-start:3px solid var(--fg-accent);
  padding-block:1rem;padding-inline:1.1rem;
  margin-block:1.5rem;
}
.fg-panel h2{margin-block-start:0;border-block-end:0;padding-block-end:0;font-size:1.05rem}
.fg-panel p:last-child{margin-block-end:0}

/* two sentence state summary that opens the supporting pages */
.fg-summary{
  border-block:2px solid var(--fg-ink);
  padding-block:0.9rem;padding-inline:1.1rem;
  margin-block:1.5rem;
  font-size:1.06rem;
}
.fg-summary p{margin-block:0;max-inline-size:none}
.fg-summary p+p{margin-block-start:0.5rem}

/* research use / decided silence note */
.fg-note{
  border-inline-start:3px solid var(--fg-rule);
  padding-inline-start:1rem;
  margin-block:1.5rem;
  color:var(--fg-ink);
}

/* rail */
.fg-rail{
  background-color:var(--fg-panel);
  padding-block:1rem;padding-inline:1rem;
  font-size:0.9rem;
}
.fg-rail h2{
  font-family:var(--fg-mono);font-size:0.72rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.09em;color:var(--fg-muted);
  margin-block:0 0.6rem;padding-block-end:0.4rem;
  border-block-end:1px solid var(--fg-rule);
}
.fg-rail ul{list-style:none;margin-block:0;padding-inline-start:0;max-inline-size:none}
.fg-rail li{margin-block-end:0.45rem}
.fg-rail a{text-decoration:none}
.fg-rail a:hover{text-decoration:underline}
.fg-rail__note{
  font-family:var(--fg-mono);font-size:0.68rem;line-height:1.5;
  color:var(--fg-muted);
  margin-block:0.9rem 0;padding-block-start:0.6rem;
  border-block-start:1px solid var(--fg-rule);
  max-inline-size:none;
}

/* comparison table, horizontally scrollable wrapper */
.fg-scrollnote{
  font-family:var(--fg-mono);font-size:0.7rem;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--fg-muted);
  margin-block:0 0.4rem;max-inline-size:none;
}
.fg-tablewrap{
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  border-block:1px solid var(--fg-rule);
  border-inline:1px solid var(--fg-rule);
  scrollbar-color:var(--fg-muted) var(--fg-panel);
  scrollbar-width:thin;
}
.fg-tablewrap::-webkit-scrollbar{block-size:12px}
.fg-tablewrap::-webkit-scrollbar-track{background-color:var(--fg-panel)}
.fg-tablewrap::-webkit-scrollbar-thumb{background-color:var(--fg-muted)}
.fg-table{
  border-collapse:collapse;
  inline-size:100%;min-inline-size:52rem;
  font-size:0.92rem;
}
.fg-table caption{
  caption-side:top;text-align:start;
  font-family:var(--fg-mono);font-size:0.72rem;line-height:1.55;
  color:var(--fg-muted);
  background-color:var(--fg-panel);
  padding-block:0.6rem;padding-inline:0.85rem;
  border-block-end:1px solid var(--fg-rule);
}
.fg-table th,.fg-table td{
  text-align:start;vertical-align:top;
  padding-block:0.7rem;padding-inline:0.85rem;
  border-block-end:1px solid var(--fg-rule);
}
.fg-table thead th{
  font-family:var(--fg-mono);font-size:0.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--fg-muted);
  background-color:var(--fg-panel);
  border-block-end:2px solid var(--fg-rule);
  white-space:nowrap;
}
.fg-table tbody th{font-weight:600;color:var(--fg-ink)}
.fg-table tbody tr:last-child th,.fg-table tbody tr:last-child td{border-block-end:0}
.fg-state{
  font-family:var(--fg-mono);font-size:0.72rem;
  text-transform:uppercase;letter-spacing:0.06em;
  color:var(--fg-muted);
}
/* the single dated mark that appears once in Table 1 column four */
.fg-mark{
  font-family:var(--fg-mono);font-size:0.72rem;
  color:var(--fg-ink);font-weight:600;
}
.fg-mark small{display:block;font-weight:400;color:var(--fg-muted);letter-spacing:0.04em}
.fg-tablefoot{
  font-family:var(--fg-mono);font-size:0.7rem;line-height:1.6;
  color:var(--fg-muted);
  margin-block:0.55rem 0;max-inline-size:none;
  white-space:pre-wrap;
}

/* the supplier named on this page: entity question and answer pairs */
.fg-entity{border-block-start:1px solid var(--fg-rule);margin-block-start:1.5rem;padding-block-start:0.4rem}
.fg-entity__q{margin-block:1.1rem 0.3rem}
.fg-entity__q strong{font-weight:700}
.fg-entity p{max-inline-size:var(--fg-measure)}

/* faq */
.fg-faq h3{
  padding-block-start:0.9rem;
  border-block-start:1px solid var(--fg-rule);
}

/* footer: one centred row of small text, no columns */
.fg-foot{
  border-block-start:1px solid var(--fg-rule);
  background-color:var(--fg-panel);
  padding-block:1.6rem;padding-inline:1.25rem;
}
.fg-foot__row{
  max-inline-size:64rem;margin-inline:auto;
  text-align:center;
  font-size:0.82rem;line-height:1.65;color:var(--fg-muted);
}
.fg-foot__row p{max-inline-size:none;margin-inline:auto}
.fg-foot__stamp{
  font-family:var(--fg-mono);font-size:0.7rem;
  text-transform:uppercase;letter-spacing:0.07em;
  margin-block-end:0;
}

@media (min-width:640px){
  .fg-nav__inner{grid-template-columns:auto 1fr;align-items:center}
  .fg-nav__links{grid-auto-flow:column;grid-template-columns:none;justify-content:end}
  h1{font-size:2.15rem}
}

@media (min-width:900px){
  .fg-shell{grid-template-columns:minmax(0,1fr) 16rem;gap:3rem;align-items:start}
  .fg-head{grid-column:1 / -1}
  .fg-main{grid-column:1;grid-row:2}
  .fg-rail{grid-column:2;grid-row:2;position:sticky;inset-block-start:1.5rem;align-self:start}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms;transition-duration:0.01ms}
}