/* =========================================================================
   comesichiama.it — Design System
   Editorial · warm · data-forward. "La Treccani dei nomi del 2026."
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- Paper & ink (warm neutrals) ---- */
  --paper:      #FCFAF4;   /* page background, warm ivory */
  --paper-2:    #F3EEE2;   /* sunk panels, alt rows */
  --card:       #FFFFFF;   /* raised surfaces */
  --ink:        #2A2420;   /* primary text, warm near-black */
  --ink-2:      #6F665C;   /* secondary text */
  --ink-3:      #9A9085;   /* tertiary / captions */
  --line:       #EBE4D6;   /* hairlines / borders */
  --line-2:     #DED4C2;   /* stronger borders */

  /* ---- Brand & accents ---- */
  --clay:       #BE5638;   /* primary — terracotta */
  --clay-deep:  #9C4129;   /* primary pressed/hover */
  --clay-tint:  #F7E7DF;   /* primary wash */
  --pine:       #2F6E57;   /* data accent — growth/charts */
  --pine-tint:  #E2EDE6;   /* data wash */
  --gold:       #C79A45;   /* liturgical — santo del giorno only */
  --gold-deep:  #A47E2E;
  --gold-tint:  #F6ECD6;

  /* ---- Type ---- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:  'Spline Sans Mono', ui-monospace, monospace;

  /* ---- Radius & shadow ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --shadow-sm: 0 1px 2px rgba(42,36,32,.05), 0 1px 1px rgba(42,36,32,.04);
  --shadow-md: 0 4px 16px -6px rgba(42,36,32,.16), 0 2px 6px -3px rgba(42,36,32,.10);
  --shadow-lg: 0 24px 60px -22px rgba(42,36,32,.28), 0 8px 22px -12px rgba(42,36,32,.16);

  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--clay-tint); }

/* ---------- Typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.01em;
}
.serif{ font-family:var(--serif); }
.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.lede{ font-size:18px; color:var(--ink-2); line-height:1.6; }
.muted{ color:var(--ink-2); }
.tiny{ font-size:12.5px; }

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.between{ display:flex; align-items:center; justify-content:space-between; }
.gap-2{ gap:8px } .gap-3{ gap:12px } .gap-4{ gap:16px } .gap-5{ gap:24px }

/* ---------- Logo ---------- */
.logo{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
  display:inline-block;
  white-space:nowrap;
  font-size:23px;
}
.logo > span{ display:inline; }

/* brand lockup: «chi» mark + wordmark */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.mark-chi{
  display:inline-grid; place-items:center;
  background:var(--clay); color:#fff;
  font-family:var(--serif); font-weight:600; line-height:1;
  border-radius:8px; height:31px; padding:0 9px;
  font-size:18px; letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.brand:hover .mark-chi{ background:var(--clay-deep); }
.logo .chi{ color:var(--clay); }
.logo .dotit{ color:var(--ink-3); font-weight:500; margin-left:2px; }
.logo-q{ color:var(--clay); margin-left:1px; }

/* name-tag chip icon */
.tag-icon{
  display:inline-grid;
  place-items:center;
  background:var(--clay);
  color:#fff;
  font-family:var(--serif);
  font-weight:600;
  border-radius:9px;
  width:34px; height:34px;
  font-size:20px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  position:relative;
}
.tag-icon::before{ /* the punch-hole of a name tag */
  content:"";
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:9px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.45);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:11px 18px; border-radius:999px;
  border:1px solid transparent; background:transparent; color:var(--ink);
  transition:.15s ease; line-height:1;
}
.btn-primary{ background:var(--clay); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--clay-deep); }
.btn-ghost{ border-color:var(--line-2); background:var(--card); }
.btn-ghost:hover{ border-color:var(--ink-3); }
.btn-quiet:hover{ background:var(--paper-2); }
.btn-sm{ padding:8px 13px; font-size:13.5px; }
.btn-lg{ padding:14px 24px; font-size:16px; }

/* ---------- Badges / chips ---------- */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-2);
  border:1px solid var(--line);
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-up{ color:var(--pine); background:var(--pine-tint); border-color:transparent; }
.badge-down{ color:var(--clay); background:var(--clay-tint); border-color:transparent; }
.badge-classic{ color:var(--gold-deep); background:var(--gold-tint); border-color:transparent; }
.badge-rare{ color:var(--ink-2); background:var(--paper-2); }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px;
  background:var(--card); border:1px solid var(--line-2);
  font-size:14px; font-weight:500; color:var(--ink);
  transition:.14s ease;
}
.chip:hover{ border-color:var(--ink-3); }
.chip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Search bar ---------- */
.search{
  display:flex; align-items:center; gap:12px;
  background:var(--card);
  border:1.5px solid var(--line-2);
  border-radius:999px;
  padding:0 8px 0 20px;
  box-shadow:var(--shadow-md);
  transition:.18s ease;
}
.search:focus-within{ border-color:var(--clay); box-shadow:0 0 0 4px var(--clay-tint), var(--shadow-md); }
.search input{
  flex:1; border:0; outline:0; background:transparent;
  font-family:var(--serif); font-size:22px; color:var(--ink);
  padding:18px 0;
}
.search input::placeholder{ color:var(--ink-3); }
.search .ic{ color:var(--ink-3); flex:none; }

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
}

/* name card */
.namecard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px 16px 14px;
  transition:.16s ease;
  position:relative;
  display:flex; flex-direction:column; gap:9px;
}
.namecard:hover{ box-shadow:var(--shadow-md); border-color:var(--line-2); transform:translateY(-2px); }
.namecard h3{ font-family:var(--serif); font-weight:500; font-size:27px; margin:0; line-height:1; }
.namecard .meaning{ font-size:13.5px; color:var(--ink-2); line-height:1.4; }
.namecard .foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; }

/* ---------- Stat / big numbers ---------- */
.stat{ display:flex; flex-direction:column; gap:3px; }
.stat .num{ font-family:var(--serif); font-weight:500; font-size:44px; line-height:.95; letter-spacing:-.02em; }
.stat .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- Misc ---------- */
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.kbd{ font-family:var(--mono); font-size:11px; padding:2px 6px; border-radius:5px; background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2); }
.swatch{ border-radius:12px; height:74px; border:1px solid rgba(0,0,0,.06); }

/* placeholder hatch (for imagery / map) */
.ph{
  background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 11px, transparent 11px 22px),
    var(--card);
  border:1px dashed var(--line-2);
  border-radius:var(--r-md);
  display:grid; place-items:center;
  color:var(--ink-3); font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}

/* scrollbar tidy */
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }