/* ABOUTME: Shared light styling (heyitsme palette) for index + person pages. */
/* ABOUTME: Self-hosted Fraunces (titles/names) + DM Sans (text); portraits on dark cards. */
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 900;
  font-display:swap; src:url(fonts/DMSans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 900;
  font-display:swap; src:url(fonts/DMSans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:100 900;
  font-display:swap; src:url(fonts/Fraunces-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:normal; font-weight:100 900;
  font-display:swap; src:url(fonts/Fraunces-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:100 900;
  font-display:swap; src:url(fonts/Fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Fraunces'; font-style:italic; font-weight:100 900;
  font-display:swap; src:url(fonts/Fraunces-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root { --bg:#EFF4F9; --surface:#FFFFFF; --ink:#1E293B; --muted:#64748B;
  --accent:#FD851E; --line:rgba(30,41,59,.12); --portrait-bg:#141019;
  --sans:'DM Sans',-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; padding:32px; background:var(--bg); color:var(--ink);
  font-family:var(--sans); line-height:1.55; }
img { max-width:100%; height:auto; }
h1 { font-family:var(--serif); font-weight:700; letter-spacing:-.5px;
  font-size:clamp(28px,6vw,46px); margin:0 0 6px; }
h2 { font-family:var(--serif); font-weight:600; font-size:15px;
  text-transform:uppercase; letter-spacing:2px; color:var(--muted);
  margin:36px 0 10px; text-align:center; }
body.index { max-width:1100px; margin:0 auto; }
body.index h1 { text-align:center; margin-top:18px; }
.lede { color:var(--muted); max-width:560px; margin:0 auto 8px;
  text-align:center; font-size:15px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:20px; margin-top:30px; }
.card { display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:14px; padding:14px;
  transition:transform .15s ease, box-shadow .15s ease; }
.card:hover { transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(30,41,59,.12); }
.card img { width:100%; aspect-ratio:.72; object-fit:cover; border-radius:9px;
  background:var(--portrait-bg); }
.name, .sig { font-family:var(--serif); }
.name { margin-top:12px; font-size:17px; text-align:center;
  line-height:1.25; }
.name .fn, .sig .fn { font-weight:700; font-style:normal;
  color:var(--accent); }
.name .ln, .sig .ln { font-weight:300; font-style:italic;
  color:var(--ink); }
body.person { max-width:760px; margin:0 auto; }
.back { font-family:var(--sans); font-size:12px; color:var(--muted);
  letter-spacing:.5px; text-decoration:none; }
.back:hover { color:var(--accent); }
.portrait { display:block; width:auto; max-width:min(260px,80vw);
  margin:16px auto 6px; padding:14px; border-radius:16px;
  background:var(--portrait-bg);
  box-shadow:0 10px 26px rgba(30,41,59,.14); }
.sig { font-size:30px; text-align:center; line-height:1.2; }
.explain { color:var(--muted); font-size:13px; text-align:center;
  max-width:560px; margin:0 auto 6px; }
.downloads, .controls { text-align:center; margin:14px 0; }
.btn { display:inline-block; background:#000; border:1px solid #000;
  color:#fff; padding:9px 18px; border-radius:8px; font-size:13px;
  font-weight:600; cursor:pointer; text-decoration:none; margin:4px;
  transition:background .15s ease, transform .12s ease; }
.btn:hover { background:#1E293B; transform:translateY(-1px); }
.btn[disabled] { opacity:.4; cursor:progress; transform:none; }
.strip { display:flex; gap:3px; justify-content:center; align-items:flex-end;
  height:48px; margin:6px 0; flex-wrap:wrap; }
.strip i { width:7px; display:block; border-radius:2px;
  background:linear-gradient(var(--accent),#FFB266); opacity:.9; }
.strip i.rest { opacity:.22; }
table.legend { width:100%; max-width:560px; margin:14px auto;
  border-collapse:collapse; font-size:12.5px; }
table.legend td, table.legend th { padding:6px 8px;
  border-bottom:1px solid var(--line); text-align:left;
  word-break:break-word; }
table.legend th { color:var(--muted); font-weight:600; }

.smell { display:flex; align-items:center; justify-content:center; gap:10px;
  margin:8px 0 4px; }
.smell-icon svg { width:34px; height:34px; color:var(--accent);
  display:block; }
.smell-name { font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:26px; color:var(--ink); }
.tiles { display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  max-width:560px; margin:8px auto; }
.tile { position:relative; min-width:30px; height:34px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); background:#FBEFD6; color:#5A3A12;
  border:1px solid rgba(30,41,59,.2); border-radius:5px;
  font-weight:700; font-size:17px;
  box-shadow:0 1px 2px rgba(30,41,59,.14); }
.tile sub { position:absolute; right:3px; bottom:1px; font-size:9px;
  font-weight:600; opacity:.7; }
.tiles-sum { text-align:center; font-size:14px; margin:6px 0 0; }
.tiles-sum b { color:var(--accent); font-size:17px; }
table.bands .band-cell { display:flex; align-items:center; gap:8px; }
table.bands svg { width:20px; height:20px; color:var(--accent);
  vertical-align:middle; }
table.valuechart td:first-child { color:var(--accent); font-weight:700;
  width:64px; }

@media (max-width:600px) {
  body { padding:16px; }
  h2 { margin:26px 0 8px; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
  .name { font-size:15px; }
  .sig { font-size:25px; }
  table.legend { font-size:11.5px; }
  table.legend td, table.legend th { padding:5px 6px; }
  .downloads .btn, .controls .btn { display:block; width:100%; margin:6px 0; }
  .smell-name { font-size:22px; }
  .smell-icon svg { width:28px; height:28px; }
  .tile { min-width:26px; height:30px; font-size:15px; }
}