/* dupenote homepage — dark editorial "old-money" dupe finder.
 * Self-contained; loaded only by index.html. Namespaced .dn-* so it never
 * collides with style.css (which the articles/disclosure pages use). */

:root {
  --dn-bg: #0c0b0a;
  --dn-accent: #e2dac6;               /* themeable: soft ivory (see options in README) */
  --dn-accent-text: #1a1714;          /* text on accent fills (light accent) */
  --dn-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --dn-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --dn-max: 1120px;
}

.dn body, body.dn { }

/* base ------------------------------------------------------------------ */
body.dn {
  margin: 0;
  background: var(--dn-bg);
  color: #fff;
  font-family: var(--dn-font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.dn * { box-sizing: border-box; }
body.dn a { color: inherit; text-decoration: none; }

.dn-wrap { position: relative; z-index: 1; max-width: var(--dn-max); margin: 0 auto; padding: 0 24px; }

/* ambient background ---------------------------------------------------- */
.dn-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dn-bg span { position: absolute; display: block; }
.dn-bg .g1 { top: -20%; left: 50%; width: 960px; height: 960px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201,168,106,0.16), transparent 64%);
  animation: dnGlow 12s ease-in-out infinite; }
.dn-bg .g2 { top: 34%; right: -14%; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 68%); }
.dn-bg .g3 { bottom: -16%; left: -10%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(120,52,52,0.10), transparent 68%); }
@keyframes dnGlow { 0%,100% { opacity: 0.55; } 50% { opacity: 0.8; } }
@keyframes dnRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* wordmark -------------------------------------------------------------- */
.dn-mark { font-family: var(--dn-font-display); font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.dn-mark b { color: var(--dn-accent); font-weight: 700; }

/* nav ------------------------------------------------------------------- */
.dn-nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.dn-nav .dn-mark { font-size: 22px; }
.dn-nav-links { display: flex; gap: 28px; }
.dn-nav-links a { font-family: var(--dn-font-display); font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.72); }
.dn-nav-links a:hover { color: #fff; }

/* hero ------------------------------------------------------------------ */
.dn-hero { text-align: center; padding: 56px 0 20px; }
.dn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.8); margin-bottom: 26px; }
.dn-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--dn-accent); display: block; }
.dn-h1 { font-family: var(--dn-font-display); font-size: clamp(40px, 8vw, 68px); line-height: 1.02;
  font-weight: 800; letter-spacing: -2.2px; margin: 0 auto; max-width: 780px; }
.dn-h1 span { color: var(--dn-accent); }
.dn-sub { font-family: var(--dn-font-text); font-size: 19px; line-height: 1.5; font-weight: 400;
  color: rgba(255,255,255,0.62); max-width: 560px; margin: 22px auto 0; }

/* tool ------------------------------------------------------------------ */
.dn-tool { margin-top: 34px; }
.dn-search { position: relative; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); border-radius: 16px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 6px 6px 6px 20px; }
.dn-search svg.dn-ic { flex: none; opacity: 0.55; }
.dn-search input { flex: 1; background: transparent; border: none; outline: none; color: #fff;
  font-family: var(--dn-font-text); font-size: 17px; padding: 14px 0; }
.dn-search input::placeholder { color: rgba(255,255,255,0.4); }
.dn-find { flex: none; background: var(--dn-accent); color: var(--dn-accent-text); border: none;
  border-radius: 12px; padding: 12px 22px; font-family: var(--dn-font-display); font-size: 15px; font-weight: 600; cursor: pointer; }

/* autocomplete dropdown */
.dn-drop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: #17140f; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55); overflow: hidden; }
.dn-drop[hidden] { display: none; }
.dn-drop-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
  width: 100%; background: none; border: none; border-top: 1px solid rgba(255,255,255,0.06);
  color: #fff; font-family: var(--dn-font-text); text-align: left; }
.dn-drop-row:first-child { border-top: none; }
.dn-drop-row:hover { background: rgba(255,255,255,0.06); }
.dn-drop-row .nm { font-family: var(--dn-font-display); font-size: 15px; font-weight: 600; }
.dn-drop-row .mt { font-size: 13px; color: rgba(255,255,255,0.5); }
.dn-drop-row .dc { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--dn-accent); white-space: nowrap; }

/* trending chips */
.dn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.dn-chips .lbl { color: rgba(255,255,255,0.4); font-size: 13.5px; align-self: center; }
.dn-chip { border-radius: 999px; padding: 8px 15px; font-family: var(--dn-font-display); font-size: 13.5px; font-weight: 600;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.75);
  cursor: pointer; transition: all 0.15s ease; }
.dn-chip:hover { border-color: rgba(255,255,255,0.4); }
.dn-chip.on { background: var(--dn-accent); border-color: var(--dn-accent); color: var(--dn-accent-text); }

/* results --------------------------------------------------------------- */
.dn-results { margin-top: 44px; animation: dnRise 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .dn-results { animation: none; } .dn-bg .g1 { animation: none; } }

.dn-orig { display: flex; align-items: center; gap: 22px; padding: 22px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; }
.dn-orig .eyebrow { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255,255,255,0.42); }
.dn-orig .nm { font-family: var(--dn-font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.8px; margin: 2px 0; }
.dn-orig .ha { font-size: 15px; color: rgba(255,255,255,0.6); }
.dn-orig .price { margin-left: auto; text-align: right; flex: none; }
.dn-orig .price .l { font-size: 12.5px; color: rgba(255,255,255,0.42); text-transform: uppercase; letter-spacing: 0.4px; }
.dn-orig .price .n { font-family: var(--dn-font-display); font-size: 28px; font-weight: 700; }

.dn-res-head { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 4px 16px; }
.dn-res-head h2 { font-family: var(--dn-font-display); font-size: 22px; font-weight: 700; margin: 0; }
.dn-res-head .r { font-size: 13px; color: rgba(255,255,255,0.5); }

.dn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dn-grid.list { grid-template-columns: 1fr; }

.dn-card { display: flex; flex-direction: column; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 20px;
  transition: transform 0.15s, border-color 0.15s; }
.dn-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.24); }
.dn-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dn-card .house { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--dn-accent); }
.dn-card .pname { font-family: var(--dn-font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin-top: 3px; }
.dn-card .match { text-align: right; flex: none; }
.dn-card .match .pct { font-family: var(--dn-font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.8px; line-height: 1; }
.dn-card .match .ml { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px; color: rgba(255,255,255,0.45); margin-top: 3px; }
.dn-card .notes { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.55); margin: 12px 0 16px; }

.dn-bars { margin-top: auto; display: flex; flex-direction: column; gap: 11px; }
.dn-bar { display: flex; align-items: center; gap: 10px; }
.dn-bar .bl { width: 62px; flex: none; font-size: 12px; color: rgba(255,255,255,0.45); }
.dn-bar .track { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,0.14); overflow: hidden; }
.dn-bar .fill { display: block; height: 100%; border-radius: 6px; }
.dn-bar .fill.long { background: rgba(255,255,255,0.85); }
.dn-bar .fill.sil { background: var(--dn-accent); }
.dn-bar .bv { width: 44px; flex: none; text-align: right; font-size: 12.5px; font-weight: 600; }

.dn-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.09); padding-top: 16px; margin-top: 18px; }
.dn-card .foot .p { font-family: var(--dn-font-display); font-size: 22px; font-weight: 700; }
.dn-card .foot .was { font-size: 12.5px; color: rgba(255,255,255,0.45); margin-left: 6px; }
.dn-shop { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 11px; padding: 9px 16px; font-size: 14px; font-weight: 600;
  color: #fff; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.dn-shop:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }

.dn-disclaimer { text-align: center; font-size: 12.5px; color: rgba(255,255,255,0.36); margin-top: 18px; }
.dn-disclaimer a { color: rgba(255,255,255,0.55); text-decoration: underline; }

/* guides ---------------------------------------------------------------- */
.dn-guides { margin-top: 96px; text-align: center; }
.dn-guides h2 { font-family: var(--dn-font-display); font-size: clamp(28px, 5vw, 38px); font-weight: 800; letter-spacing: -1.2px; margin: 0; }
.dn-guides .gsub { font-size: 16px; color: rgba(255,255,255,0.55); margin: 12px auto 34px; max-width: 620px; }
.dn-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.dn-guide { display: flex; flex-direction: column; gap: 10px; padding: 24px; min-height: 168px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  transition: background 0.15s, border-color 0.15s; }
.dn-guide:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.26); }
.dn-guide .tag { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dn-accent); }
.dn-guide .gt { font-family: var(--dn-font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; }
.dn-guide .gb { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.dn-guide .more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--dn-accent); }

/* footer ---------------------------------------------------------------- */
.dn-footer { margin-top: 96px; border-top: 1px solid rgba(255,255,255,0.09); padding: 40px 0 56px; }
.dn-footer .inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.dn-footer .dn-mark { font-size: 20px; }
.dn-footer .fine { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 8px; }
.dn-footer .flinks { display: flex; gap: 24px; flex-wrap: wrap; }
.dn-footer .flinks a { font-size: 14px; color: rgba(255,255,255,0.6); }
.dn-footer .flinks a:hover { color: #fff; }

/* responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
  .dn-grid, .dn-guide-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .dn-grid, .dn-guide-grid { grid-template-columns: 1fr; }
  .dn-nav-links { gap: 18px; }
  .dn-orig { flex-wrap: wrap; }
  .dn-orig .price { margin-left: 0; text-align: left; width: 100%; }
  .dn-find { padding: 12px 16px; }
  .dn-footer .inner { flex-direction: column; align-items: flex-start; }
}