/* Tokens (redesign/HANDOFF.md §Tokens). Color meanings are unchanged from SPEC §Colors; only the hues moved. */
:root{
  --paper:#F2ECDC;--paper-2:#FAF6EA;--ink:#2A2922;--muted:#6F6957;--rule:#D3CAB1;--card-line:#CBC1A5;
  --forest:#2F4A35;--forest-2:#263D2B;--ochre:#D9A441;--cream:#F4EEDC;
  --apps:#2D5B78;--apps-soft:#E2E9E8;--apps-line:#9FB6BE;--apps-guess:#86A3B6;
  --now-soft:#E2E9E8;--now-bar:#2D5B78;
  --run:#8A8370;--run-soft:#EAE4D2;--run-line:#CFC6AC;--run-bar:#BFB59B;--run-guess:#DCD4BF;
  --events:#4E7A3B;--today:#B4342A;
  --hover-paper:#FFFDF5;--hover-stone:#EAE4D2;--hover-forest:#E6ECE9;
  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Alegreya Sans','Gill Sans','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.4;overflow-x:hidden}
/* Paper grain over the page background */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .08 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
a{color:var(--apps)}a:hover{color:#1E4660}
button{font:inherit;color:inherit}
:focus-visible{outline-color:var(--forest)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* "SFG" in running text, set like the wordmark */
.sfg{font-family:var(--f-display);font-weight:600;color:var(--ink)}.sfg b{font-weight:500;font-style:italic;color:#B8872C}

/* Header: forest band with an ochre rule; logo, wordmark, tagline, then Newsletter / Mentorship (a menu on phones) */
.fb-bar{background:var(--forest);border-bottom:2px solid var(--ochre)}
.fb-inner{max-width:1120px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:wrap;row-gap:0}
.sfr-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream)}
.sfr-logo:hover{color:var(--cream)}
.sfr-logo{position:relative;isolation:isolate}
.sfr-logo svg{display:block;flex:none;position:relative;z-index:2}
/* Logo: the miner's helmet at 54px; its lamp glows */
.lg-helm{width:54px;height:54px;margin:-9px -6px -9px -8px}
.lg-helm .lens{filter:drop-shadow(0 0 3px #FFE48A)}
/* Headlamp beam: a soft cone from the lens (positioned by forms.js) that sweeps once across the wordmark, then rests */
.fb-bar{overflow:hidden}
.beam{display:block;position:absolute;left:35px;top:23px;width:320px;height:120px;margin-top:-60px;z-index:1;pointer-events:none;transform-origin:0 50%;transform:rotate(0deg);clip-path:polygon(0 47%,100% 8%,100% 92%,0 53%);background:linear-gradient(90deg,rgba(255,228,138,.5),rgba(255,228,138,.18) 45%,rgba(255,228,138,0) 92%);filter:blur(5px);opacity:.8}
.sfr-name{position:relative;z-index:2}
@media (prefers-reduced-motion:no-preference){
  .beam.go{animation:beamSweep 2.6s cubic-bezier(.4,0,.2,1) both}
  @keyframes beamSweep{0%{transform:rotate(-34deg);opacity:0}15%{opacity:.8}45%{transform:rotate(14deg)}100%{transform:rotate(0deg);opacity:.8}}
}
.sfr-name{font-family:var(--f-display);font-weight:600;font-size:21px;letter-spacing:0;color:var(--cream);white-space:nowrap}
.sfr-name b{color:var(--ochre);font-style:italic;font-weight:500}
.fg-tag{display:block;margin:0 0 0 2px;padding:2px 0 2px 16px;border-left:1px solid rgba(244,238,220,.28);font-family:var(--f-display);font-style:italic;font-weight:500;font-size:12.5px;line-height:1.35;color:#CFC8B0;flex:1 1 auto;min-width:0}
.fg-cta{display:inline-flex;gap:8px;margin-left:auto;align-self:center}
.fg-btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid rgba(244,238,220,.38);border-radius:3px;background:none;color:var(--cream);font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.fg-btn:hover{background:rgba(244,238,220,.1);border-color:rgba(244,238,220,.7)}
.fg-btn:focus-visible{outline:2px solid var(--ochre);outline-offset:1px}
.fg-burgerwrap{display:none}
.fg-menu[hidden]{display:none}

/* Page + two columns (SPEC §Layout) */
.page{max-width:1120px;margin:0 auto;padding:20px 16px 24px;display:flex;flex-direction:column;gap:18px}
/* Page tabs: the title is the active tab; coming-soon tabs sit far right under one tag */
.fg-tabs{display:flex;align-items:baseline;gap:28px;border-bottom:1px solid var(--rule);flex-wrap:wrap;row-gap:4px}
.page-title{margin:0 0 -1px;padding-bottom:9px;border-bottom:3px solid var(--ochre);font-family:var(--f-display);font-weight:500;font-size:28px;letter-spacing:0;color:var(--ink)}
.fg-soon-grp{display:inline-flex;align-items:baseline;gap:18px;margin-left:auto;padding-bottom:10px}
.fg-tab{display:inline;font-family:var(--f-display);font-weight:500;font-size:19px;color:#9A917A;text-decoration:none;cursor:default}
.fg-soon-grp .soon{margin-right:2px;font-family:var(--f-body);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#8B8470;border:1px solid #CFC6AC;border-radius:2px;padding:1px 5px;line-height:14px;position:relative;top:-3px}
.cols{display:flex;gap:24px;align-items:flex-start}
.left{width:340px;flex:none;position:sticky;top:16px;display:flex;flex-direction:column;gap:12px;order:-1}
.main{flex:1;min-width:0}
/* Left-column card shell */
.lc{background:var(--paper-2);border:1px solid var(--card-line);border-radius:4px;padding:12px 14px;box-shadow:0 1px 0 rgba(42,41,34,.06)}
.lc-h{font-family:var(--f-display);font-size:16px;font-weight:500;color:var(--ink);padding-bottom:8px}

/* Footer: one line; the links read as plain text until the line is hovered or a link has keyboard focus */
.fg-foot{margin-top:8px;border-top:1px solid var(--rule)}
.fg-foot-in{max-width:1120px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-right,0px)) 28px max(16px,env(safe-area-inset-left,0px));font-size:13px;color:var(--muted)}
.fg-foot a{color:inherit;text-decoration:none}
.fg-foot-in:hover a,.fg-foot a:focus-visible{color:var(--apps);text-decoration:underline;text-decoration-color:rgba(45,91,120,.45);text-underline-offset:2px}

@media (max-width:860px){
  /* Phones and narrow windows: one column. The left column's content moves into the main column
     (Coming Up → Timeline, and the calendar at the foot of Coming Up), so the column itself is hidden. */
  .cols{flex-direction:column}
  .left{display:none}
  .main{width:100%}
  /* Header: logo left, a right-aligned menu holding Newsletter and Mentorship; no tagline or coming-soon tabs */
  .fg-tag,.fg-soon-grp,.fg-cta{display:none}
  .fb-inner{flex-wrap:nowrap}
  .fg-burgerwrap{display:block;position:relative;margin-left:auto}
  .fg-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-8px;border:0;border-radius:3px;background:none;color:var(--cream);cursor:pointer}
  .fg-burger:hover,.fg-burger[aria-expanded="true"]{background:rgba(244,238,220,.12)}
  .fg-burger:focus-visible{outline:2px solid var(--ochre);outline-offset:1px}
  .fg-menu{position:fixed;right:max(12px,env(safe-area-inset-right,0px));top:calc(58px + env(safe-area-inset-top,0px));z-index:150;display:flex;flex-direction:column;min-width:180px;padding:4px;background:var(--paper-2);border:1px solid var(--card-line);border-radius:4px;box-shadow:0 12px 32px rgba(31,51,36,.28)}
  .fg-menu button{font:inherit;font-size:15px;font-weight:600;text-align:left;padding:10px 12px;border:0;border-radius:3px;background:none;color:var(--ink);cursor:pointer}
  .fg-menu button:hover,.fg-menu button:focus-visible{background:var(--hover-stone);outline:none}
}
@media (max-width:640px){.page-title{font-size:25px}}
@media (max-width:520px){
  .page{padding:16px 16px 24px}
  .fb-inner{padding:0 16px}
  .fg-foot-in{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
}