/* nez.kuppurao.com: styled after kuppurao.com (palette, Space Grotesk + DM Sans, pills, rounded tiles,
   hairlines, numbered labels). Body text 13–15px; the small uppercase style is for labels only. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --bg: #0b0a10;
  --fg: #f8f4ff;
  --muted: #aaa2b7;
  --line: #ffffff20;
  --tile: #ffffff05;
  --purple: #b19aff;
  --pink: #ff6482;
  --orange: #ff9b64;
  --ink: #1a0c1c;
  --gradient: linear-gradient(100deg, #b39aff 0%, #ed94d3 55%, #ff8d79 100%);
  --display: "Space Grotesk", system-ui, sans-serif;
  --text: "DM Sans", system-ui, sans-serif;
  --radius: 22px;
  --gap: 20px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg); font: 15px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; top: 0; right: 0; width: 70%; height: 900px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 85% 30%, #702de12b, transparent 65%);
}
a { color: inherit; text-decoration-color: #ffffff50; text-underline-offset: 3px; }
a:hover { color: var(--pink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; }
p { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip { position: absolute; left: 16px; top: -60px; background: var(--pink); color: var(--ink); padding: 10px 16px; border-radius: 50px; z-index: 10; }
.skip:focus { top: 16px; }

/* ---------- shell ---------- */

.site-header, .site-main, .site-footer { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 48px; padding-right: 48px; }
.site-header {
  display: flex; align-items: center; gap: 32px; padding-top: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.wordmark { font: 700 28px/1 var(--display); letter-spacing: -1.5px; text-decoration: none; }
.wordmark-dot { color: var(--pink); }
.nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.nav a { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--pink); }
.nav-admin a { color: var(--orange); }
.search { margin-left: auto; width: 260px; flex-shrink: 0; }
.site-main { flex: 1; padding-top: 40px; padding-bottom: 64px; outline: none; }
.site-footer {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 24px; padding-bottom: 32px;
  font-size: 11px; letter-spacing: 1px; color: var(--muted);
}
.site-footer a { text-decoration: none; }
.mode { color: var(--orange); text-transform: uppercase; letter-spacing: 1.5px; }
.loading { padding: 40px 0; }

/* ---------- page heads ---------- */

.page-head { margin-bottom: 36px; display: grid; gap: 14px; }
.micro { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 15px #ff648280; flex: none; }
.title { font: 500 clamp(44px, 7.5vw, 104px)/0.98 var(--display); letter-spacing: -0.055em; outline: none; overflow-wrap: anywhere; }
.title-hero { font-size: clamp(56px, 9.5vw, 128px); }
.gradient { background: var(--gradient); color: transparent; -webkit-background-clip: text; background-clip: text; }
.byline { font-size: 15px; color: var(--muted); }
.byline a { color: var(--fg); }
.lede { max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.hero { margin-bottom: 48px; }
.hero .lede { margin-top: 6px; }

/* ---------- pills and buttons ---------- */

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 50px;
  border: 1px solid var(--line); font-size: 13px; text-decoration: none; white-space: nowrap; background: transparent;
}
a.pill:hover { border-color: var(--pink); color: var(--fg); }
.pill-pink { background: var(--pink); border-color: var(--pink); color: var(--ink); font-weight: 600; }
a.pill-pink:hover { color: var(--ink); filter: brightness(1.08); }
.pill-admin { border: 1px dashed var(--orange); color: var(--orange); }
.pill-note.layer-top { border-color: #b19aff70; }
.pill-note.layer-heart { border-color: #ff648270; }
.pill-note.layer-base { border-color: #ff9b6470; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list.inline { display: inline-flex; margin-left: 8px; gap: 6px; }
.pill-list.inline .pill { padding: 2px 10px; font-size: 12px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.button {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 50px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; font-size: 14px; text-decoration: none;
}
.button:hover { border-color: var(--pink); color: var(--fg); }
.button-primary { background: var(--purple); border-color: var(--purple); color: var(--ink); font-weight: 600; }
.button-primary:hover { color: var(--ink); filter: brightness(1.08); }
.button-primary:disabled { opacity: .6; cursor: progress; }
.button-admin { background: var(--orange); border-color: var(--orange); color: #201124; font-weight: 600; }
.button-admin:hover { color: #201124; filter: brightness(1.08); }
.button-ghost { padding: 8px 14px; }
.more { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--purple); text-decoration: none; }
.more:hover { color: var(--pink); }

/* ---------- tiles and grids ---------- */

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid-perfume { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.col { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-home > :last-child { grid-column: 1 / -1; }
.grid-find { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.grid-graph { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.grid-graph .legend { grid-column: 1 / -1; }

.tile {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--tile); padding: 26px 28px;
  display: grid; gap: 12px; min-width: 0;
}
.tile-no { font: 11px var(--display); letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.tile-title { font-size: 26px; letter-spacing: -0.04em; line-height: 1.1; }
.tile-link { text-decoration: none; position: relative; min-height: 170px; align-content: start; transition: transform .25s, border-color .25s; }
.tile-link:hover { transform: translateY(-3px); border-color: var(--pink); color: var(--fg); }
.tile-link .arrow { position: absolute; right: 26px; bottom: 22px; font-size: 26px; color: var(--pink); }
.sub { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-family: var(--text); font-weight: 500; margin-top: 6px; }

/* ---------- pyramid ---------- */

.pyramid { display: grid; gap: 12px; }
.band { border-radius: 16px; padding: 16px 18px; display: grid; gap: 10px; }
.band-label { font: 500 11px var(--text); letter-spacing: 2px; }
.band-top { background: linear-gradient(90deg, #b19aff29, #b19aff08); }
.band-top .band-label { color: var(--purple); }
.band-heart { background: linear-gradient(90deg, #ff648229, #ff648208); }
.band-heart .band-label { color: var(--pink); }
.band-base { background: linear-gradient(90deg, #ff9b6429, #ff9b6408); }
.band-base .band-label { color: var(--orange); }
.band-notes { background: linear-gradient(90deg, #ffffff12, #ffffff04); }
.band-notes .band-label { color: var(--muted); }
.layer-text-top { color: var(--purple); }
.layer-text-heart { color: var(--pink); }
.layer-text-base { color: var(--orange); }

/* ---------- rows and ranks ---------- */

.rows { display: grid; }
.rows li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rows li:last-child { border-bottom: 0; }
.rows a { text-decoration: none; font-size: 15px; }
.rows a:hover { text-decoration: underline; }
.rows-index { columns: 3 260px; column-gap: 40px; display: block; }
.rows-index li { break-inside: avoid; }
.row-detail { color: var(--muted); font-size: 13px; }
.ranks { display: grid; }
.ranks li { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ranks li:last-child { border-bottom: 0; }
.rank { font: 500 26px/1 var(--display); letter-spacing: -0.04em; color: var(--muted); min-width: 52px; }
.rank-first { background: var(--gradient); color: transparent; -webkit-background-clip: text; background-clip: text; }
.rank-body { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.rank-body a { text-decoration: none; font-size: 15px; }
.rank-body a:hover { text-decoration: underline; }
.ranks-big { max-width: 860px; }
.ranks-big .rank { font-size: 40px; min-width: 84px; }
.ranks-big .rank-body a { font-size: 18px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; }
.description { color: var(--muted); line-height: 1.8; white-space: pre-line; }

/* ---------- neighbourhood ---------- */

.hood { width: 100%; height: auto; overflow: visible; }
.hood-edge { stroke: #ffffff30; stroke-width: 1.2; }
.hood-centre { fill: #8c50ea; stroke: #cbb0ff; stroke-width: 2; }
.hood-node { fill: var(--purple); }
.hood a:hover .hood-node, .hood a:focus .hood-node { fill: var(--pink); }
.hood-label { fill: var(--fg); font: 12px var(--text); }
.hood-caption { fill: var(--muted); font: 10px var(--text); }

/* ---------- forms ---------- */

.input {
  width: 100%; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff08;
}
.input:focus { border-color: var(--purple); }
.input-pill { border-radius: 50px; padding: 9px 18px; }
.select { appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.select option { background: var(--bg); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.hint { font-size: 13px; color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { accent-color: var(--pink); width: 16px; height: 16px; }
.filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; max-width: 520px; }
.filter .input { flex: 1; }

.editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.editor .field { display: grid; gap: 6px; }
.editor .field > label { font-weight: 600; font-size: 14px; }
.editor .field-top > label { color: var(--purple); }
.editor .field-heart > label { color: var(--pink); }
.editor .field-base > label { color: var(--orange); }
.editor .field:has(textarea), .editor .actions { grid-column: 1 / -1; }
.editor .check.field { display: flex; flex-direction: row; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }

.find-form { display: grid; gap: 14px; }
.find-rows { display: grid; gap: 8px; }
.find-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px auto; gap: 8px; align-items: center; }
.find-options { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }

.key-form { display: grid; gap: 10px; max-width: 420px; }
.key-form > label { font-weight: 600; }

/* ---------- notices ---------- */

.notice { border-radius: 16px; padding: 14px 18px; margin-bottom: 24px; font-size: 14px; display: grid; gap: 8px; }
.notice ul { margin: 0; padding-left: 18px; }
.notice-ok { background: #2f8f5b26; border: 1px solid #2f8f5b80; }
.notice-error { background: #ff648220; border: 1px solid #ff648280; }
.notice[hidden] { display: none; }

/* ---------- query ---------- */

.table-wrap { overflow-x: auto; }
.table { border-collapse: collapse; width: 100%; font-size: 13px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 500; }

/* ---------- graph ---------- */

.tile-canvas { padding: 0; overflow: hidden; }
.graph-canvas { width: 100%; height: min(70vh, 680px); }
.graph-panel { display: grid; gap: 8px; }
.legend-list { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--muted); }
.legend-list li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 10px; height: 10px; border-radius: 50%; }

.noscript { padding: 40px 48px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .grid, .grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-perfume, .grid-find, .grid-graph { grid-template-columns: minmax(0, 1fr); }
  .site-header { flex-wrap: wrap; gap: 16px 28px; }
  .search { margin-left: 0; width: 100%; order: 3; }
}
@media (max-width: 720px) {
  .site-header, .site-main, .site-footer { padding-left: 20px; padding-right: 20px; }
  .site-main { padding-top: 28px; }
  .grid, .grid-home { grid-template-columns: minmax(0, 1fr); }
  .tile { padding: 22px 20px; }
  .nav ul { gap: 2px 16px; }
  .nav a { font-size: 11px; letter-spacing: 1.5px; }
  .editor { grid-template-columns: minmax(0, 1fr); }
  .find-row { grid-template-columns: 1fr 1fr; }
  .find-row input { grid-column: 1 / -1; grid-row: 1; }
  .ranks-big .rank { font-size: 30px; min-width: 64px; }
  .graph-canvas { height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile-link { transition: none; }
  .tile-link:hover { transform: none; }
}