/*
  Human Fund 2025 (isolated design system)
  ---------------------------------------
  Goal: dark, corporate-liminal Christmas
  - Rigid grid, strict spacing rhythm, precise typography
  - Matte charcoal / deep navy background
  - Restrained accents: evergreen + burgundy
  - Subtle vignette + low-opacity noise overlay
  - Premium “string lights” trim + optional gentle snow overlay
*/

:root{
  /* Color palette */
  --hf-bg: #0b0f14;
  --hf-surface: #0f1620;
  --hf-surface-2: #121b26;
  --hf-text: rgba(255,255,255,.92);
  --hf-muted: rgba(255,255,255,.70);
  --hf-faint: rgba(255,255,255,.52);
  --hf-border: rgba(255,255,255,.12);
  --hf-shadow: 0 18px 52px rgba(0,0,0,.55);

  /* Restrained holiday accents */
  --hf-evergreen: #1f4b3a;
  --hf-burgundy: #6b1d2b;
  --hf-ice: #7aa6b6;

  /* Typography */
  --hf-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --hf-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Spacing rhythm */
  --hf-1: 8px;
  --hf-2: 16px;
  --hf-3: 24px;
  --hf-4: 32px;
  --hf-5: 48px;
  --hf-6: 64px;

  --hf-max: 1180px;
  --hf-gutter: clamp(16px, 3.2vw, 44px);
  --hf-radius: 14px;
}

*{ box-sizing: border-box; }
html{ color-scheme: dark; }
body{
  margin: 0;
  font-family: var(--hf-sans);
  color: var(--hf-text);
  background: var(--hf-bg);
  line-height: 1.55;
}

/* Christmas lights: real bulbs in a decorative container */
.xmas-lights{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  pointer-events: none;
  z-index: 4;
  opacity: .65;
}
.xmas-lights::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 1px;
  background: rgba(255,255,255,.10);
}
.xmas-lights .bulb{
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: .72;
  filter: saturate(.85);
  box-shadow:
    0 0 10px rgba(255,255,255,.14),
    0 0 22px rgba(255,255,255,.06);
}
.xmas-lights .bulb.warm{
  background: rgba(255,243,224,.55);
  box-shadow:
    0 0 10px rgba(255,243,224,.18),
    0 0 24px rgba(255,243,224,.08);
}
.xmas-lights .bulb.green{
  background: rgba(31,75,58,.60);
  box-shadow:
    0 0 10px rgba(31,75,58,.16),
    0 0 24px rgba(31,75,58,.07);
}
.xmas-lights .bulb.burgundy{
  background: rgba(107,29,43,.58);
  box-shadow:
    0 0 10px rgba(107,29,43,.14),
    0 0 24px rgba(107,29,43,.06);
}
/* Slight unevenness (natural string feel) */
.xmas-lights .bulb:nth-child(3n){ transform: translateY(-1px); }
.xmas-lights .bulb:nth-child(4n){ transform: translateY(1px); }
.xmas-lights .bulb:nth-child(5n){ transform: translateY(-2px); }
.xmas-lights .bulb:nth-child(7n){ transform: translateY(2px); }
@media (max-width: 520px){
  /* Fewer bulbs on small screens */
  .xmas-lights .bulb:nth-child(n+13){ display: none; }
}

/* Liminal overlays: subtle noise + vignette */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Low-cost “grain”: layered gradients (no external images) */
  background:
    radial-gradient(1000px 620px at 20% 0%, rgba(31,75,58,.22), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(107,29,43,.18), transparent 58%),
    radial-gradient(850px 520px at 55% 110%, rgba(122,166,182,.10), transparent 62%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: screen;
  opacity: .35;
}
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.04), transparent 48%),
    radial-gradient(circle at 50% 40%, transparent 56%, rgba(0,0,0,.55) 100%);
  opacity: .72;
}

main, header, footer{ position: relative; z-index: 3; }

a{ color: inherit; }

.hf-skip{
  position: absolute;
  left: 12px;
  top: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(18,27,38,.92);
  border: 1px solid rgba(255,255,255,.14);
  transform: translateY(-140%);
  transition: transform 160ms ease;
  z-index: 5;
}
.hf-skip:focus{ transform: translateY(0); }

:focus-visible{
  outline: 2px solid rgba(31,75,58,.55);
  outline-offset: 2px;
}

.hf-topbar{
  position: sticky;
  top: 22px; /* sits below decorative lights */
  z-index: 3;
  background: rgba(11,15,20,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hf-border);
}
.hf-topbar-inner{
  max-width: var(--hf-max);
  margin: 0 auto;
  padding: 12px var(--hf-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hf-2);
  position: relative;
}
.hf-brand{
  display: inline-flex;
  gap: var(--hf-2);
  align-items: center;
}
.hf-mark{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,243,224,.18);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
}
.hf-brand-title{
  font-family: var(--hf-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}
.hf-brand-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--hf-faint);
}
.hf-topbar-right{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.hf-pill{
  font-family: var(--hf-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--hf-border);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.78);
}

/* Snow toggle: system-like control (header, top-right) */
.hf-control{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 8px 10px;
  font-family: var(--hf-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
}
.hf-control[aria-pressed="true"]{
  border-color: rgba(31,75,58,.35);
  background: rgba(31,75,58,.16);
  color: rgba(255,255,255,.86);
}
.hf-control[aria-pressed="false"]{
  border-color: rgba(107,29,43,.25);
  background: rgba(255,255,255,.04);
}
.hf-control:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.hf-shell{
  min-height: calc(100vh - 58px);
  display: flex;
  flex-direction: column;
}

.hf-container{
  max-width: var(--hf-max);
  margin: 0 auto;
  padding: var(--hf-5) var(--hf-gutter) var(--hf-6);
}

.hf-section{
  flex: 1;
}

.hf-h1{
  margin: 0 0 var(--hf-2);
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -0.02em;
}
.hf-intro{
  margin: 0 0 var(--hf-4);
  max-width: 80ch;
  color: var(--hf-muted);
}

.hf-grid{
  display: grid;
  gap: var(--hf-3);
  align-items: start;
}
@media (min-width: 900px){
  .hf-grid{
    grid-template-columns: 1fr 1.2fr;
  }
}

.hf-card{
  background: rgba(15,22,32,.92);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius);
  box-shadow: var(--hf-shadow);
  padding: var(--hf-3);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hf-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 52px rgba(18,19,22,.10);
}

@media (prefers-reduced-motion: reduce){
  .hf-card{ transition: none; }
  .hf-card:hover{ transform: none; }
}

.hf-form{
  display: grid;
  gap: var(--hf-3);
}
.hf-field{
  display: grid;
  gap: 10px;
}
.hf-label{
  font-family: var(--hf-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(18,19,22,.82);
}
.hf-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,15,20,.55);
  color: rgba(255,255,255,.92);
  font: inherit;
}
.hf-input::placeholder{ color: rgba(255,255,255,.42); }
.hf-help{
  font-size: 12px;
  color: rgba(255,255,255,.56);
}

.hf-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hf-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,27,38,.72);
  color: rgba(255,255,255,.84);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--hf-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.hf-btn:hover{
  transform: translateY(-1px);
  background: rgba(18,27,38,.92);
  border-color: rgba(255,255,255,.20);
}
.hf-btn-primary{
  border-color: rgba(31,75,58,.38);
  background: rgba(31,75,58,.18);
}
.hf-btn-primary:hover{
  background: rgba(31,75,58,.24);
}

.hf-results{
  min-height: 320px;
}
.hf-placeholder-title{
  font-family: var(--hf-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}
.hf-placeholder-sub{
  margin-top: 8px;
  color: rgba(255,255,255,.52);
  font-size: 13px;
}

/* Report rendering */
.hf-report{
  display: grid;
  gap: var(--hf-3);
  animation: hf-fade 220ms ease both;
}
@keyframes hf-fade{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hf-report{ animation: none; }
}

.hf-report-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hf-2);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-bottom: var(--hf-2);
}
.hf-report-title{
  margin: 0;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--hf-mono);
}
.hf-report-id{
  color: rgba(255,255,255,.52);
  font-family: var(--hf-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hf-kv{
  display: grid;
  gap: 10px;
}
.hf-kv-row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--hf-2);
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.hf-k{
  font-family: var(--hf-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}
.hf-v{
  color: rgba(255,255,255,.86);
}
.hf-outcomes{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
}
.hf-outcomes li{ margin: 8px 0; }

.hf-chart-title{
  margin: 0 0 10px;
  font-family: var(--hf-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}
.hf-chart{
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(11,15,20,.45);
  padding: var(--hf-2);
}

.hf-error{
  border-left: 3px solid rgba(107,29,43,.62);
  background: rgba(107,29,43,.10);
  padding: var(--hf-2);
  border-radius: 10px;
  color: rgba(255,255,255,.86);
}
.hf-error-title{
  margin: 0 0 6px;
  font-family: var(--hf-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}

.hf-footer{
  border-top: 1px solid var(--hf-border);
  background: rgba(11,15,20,.70);
}
.hf-footer-inner{
  padding: var(--hf-3) var(--hf-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--hf-2);
  align-items: center;
  justify-content: space-between;
}
.hf-footer-left{
  color: rgba(255,255,255,.48);
  font-size: 12px;
  font-family: var(--hf-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hf-footer-right{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}
.hf-link{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.hf-link:hover{
  border-bottom-color: rgba(31,75,58,.65);
}
.hf-dot{ opacity: .55; }

/* Footer toggle button should look like a link but behave like a control */
/* Snow overlay */
#snow-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above background, below UI content */
}
@media (prefers-reduced-motion: reduce){
  #snow-canvas{ display: none; }
}

/* Supplemental media (attachments) */
.hf-attachments{
  display: grid;
  gap: var(--hf-2);
}
.hf-attach-grid{
  display: grid;
  gap: var(--hf-2);
}
@media (min-width: 760px){
  .hf-attach-grid{ grid-template-columns: 1fr 1fr; }
}
.hf-attach{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(11,15,20,.35);
  overflow: hidden;
}
.hf-attach-head{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-family: var(--hf-mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hf-attach-body{
  padding: 12px;
}
.hf-attach img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.hf-attach-cap{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.58);
}

@media (max-width: 520px){
  .hf-kv-row{ grid-template-columns: 1fr; }
}