/* The Underworld Hub — visual layer
 *
 * Direction: verified style `dark-mode-oled` (dark only; requires 4.5:1 text, keyboard
 * operation, visible focus, reduced-motion support) with the verified pairing
 * "Classic Elegant" (Playfair Display display face + Inter body).
 *
 * Tokens are COPIED VERBATIM from /uwrules/ and /uwbuilder/ so all three apps are one
 * system. Do not re-pick a palette here — the brief is "match this product", and the
 * two tools already shipped these exact values.
 */

/* ---- Tokens (identical to both tools) -------------------------------- */
:root {
  --ink:        #0A0A0C;
  --ink-2:      #121116;
  --ink-3:      #1A181F;
  --ink-4:      #24212B;
  --line:       rgba(237, 230, 218, 0.12);
  --line-soft:  rgba(237, 230, 218, 0.06);

  --parchment:       #EDE6DA;
  --parchment-dim:   #A89F93;   /* 7.58:1 on --ink — use this for any real text */
  /* --parchment-faint is 4.00:1 on --ink, i.e. BELOW the 4.5:1 this style
     requires, so it is not used for text anywhere on this page. It stays in the
     token list only because the two tools share this set. Measured, not assumed. */
  --parchment-faint: #776F66;

  --blood:      #A8142A;
  --blood-hi:   #C81D33;
  --blood-text: #FF8A95;
  --gold:       #C9A227;
  --gold-hi:    #E0B733;
  --celestial:  #9FC4E8;

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.55);

  --tap: 36px;
}
@media (pointer: coarse) { :root { --tap: 44px; } }

/* ---- Reset & base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 50% at 18% -8%, rgba(168, 20, 42, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 45% at 88% 4%, rgba(159, 196, 232, 0.07), transparent 60%),
    var(--ink);
  background-attachment: fixed;
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'kern' 1;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0; }
a { color: inherit; }

.skip { position:absolute; left:-9999px; top:var(--s2); z-index:100;
  background:var(--ink-3); color:var(--parchment); padding:var(--s3) var(--s4);
  border:1px solid var(--gold); border-radius:var(--radius-sm); }
.skip:focus { left: var(--s2); }

/* Visible focus everywhere — a requirement of the chosen style, not a nicety. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---- Topbar (same 61px shape as the two tools) ----------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10,10,12,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4);
}
.brand { display:flex; align-items:center; gap:var(--s3); text-decoration:none;
  flex:0 0 auto; min-height:var(--tap); }
.brand svg { color: var(--blood-hi); flex:0 0 auto; }
.brand b { font-family:var(--font-display); font-size:19px; letter-spacing:.2px; display:block; }
.brand .sub { font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parchment-dim); display:block; }

.toolnav { margin-left:auto; display:flex; gap:var(--s1); flex-wrap:wrap; justify-content:flex-end; }
.toolnav-link {
  display:inline-flex; align-items:center; min-height:var(--tap);
  padding:var(--s2) var(--s3); border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:500; color:var(--parchment-dim); text-decoration:none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.toolnav-link:hover { background:var(--ink-2); color:var(--parchment); }

/* ---- Layout ---------------------------------------------------------- */
.wrap { max-width: 1040px; margin: 0 auto; padding: var(--s8) var(--s5) var(--s7); }

/* ---- Hero ------------------------------------------------------------ */
.hero { margin-bottom: var(--s8); }
.eyebrow {
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0 0 var(--s4); font-weight:700;
}
.hero h1 { font-size: clamp(32px, 6.2vw, 54px); letter-spacing:-.4px; }
.lead {
  max-width: 60ch; margin: var(--s5) 0 0;
  font-size: clamp(15px, 1.6vw, 17.5px);
  color: var(--parchment-dim); line-height: 1.65;
}
.herostats { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6); margin-top:var(--s6); }
.herostats span {
  font-size:12.5px; color:var(--parchment-dim);
  text-transform:uppercase; letter-spacing:.1em;
}
.herostats b {
  font-family:var(--font-display); font-size:19px; color:var(--gold-hi);
  margin-right:var(--s1); letter-spacing:0;
}

.sectionhead {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--parchment-dim); font-family:var(--font-body); font-weight:700;
  padding-bottom:var(--s3); border-bottom:1px solid var(--line);
  margin-bottom:var(--s6); scroll-margin-top:80px;
}

/* ---- Tool cards ------------------------------------------------------ */
/* Two tools, so two equal tracks. minmax(0,1fr) because a 1fr track cannot
   shrink below its content and the chip rows would otherwise force overflow. */
.cards {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--s5); margin-bottom:var(--s8);
}
.card {
  display:flex; flex-direction:column;
  background:
    linear-gradient(180deg, rgba(237,230,218,.03), transparent 40%),
    var(--ink-2);
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--s6); text-decoration:none;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease-out),
              box-shadow 220ms var(--ease);
}
.card:hover {
  border-color: rgba(201,162,39,.45);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.card-ic {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--radius-md);
  background:rgba(168,20,42,.14); border:1px solid rgba(168,20,42,.3);
  color:var(--blood-text); margin-bottom:var(--s5);
}
.card h3 { font-size:24px; margin-bottom:var(--s1); }
.card-sub {
  margin:0 0 var(--s4); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold);
}
.card-body { margin:0 0 var(--s5); color:var(--parchment-dim); font-size:14.5px; }
.chips { list-style:none; margin:0 0 var(--s6); padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s2); }
.chips li {
  font-size:12px; color:var(--parchment-dim);
  border:1px solid var(--line); background:var(--ink-3);
  padding:4px 10px; border-radius:999px;
}
.card-go {
  margin-top:auto; display:inline-flex; align-items:center; gap:var(--s2);
  min-height:var(--tap);
  font-size:14px; font-weight:600; color:var(--gold-hi);
}
.card-go svg { transition: transform 220ms var(--ease-out); }
.card:hover .card-go svg { transform: translateX(3px); }

/* ---- Notes ----------------------------------------------------------- */
.notes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--s5); margin-bottom:var(--s8); }
.note { display:flex; gap:var(--s4); align-items:flex-start;
  border:1px solid var(--line-soft); border-radius:var(--radius-md);
  background:var(--ink-2); padding:var(--s5); }
.note-ic { color:var(--celestial); flex:0 0 auto; margin-top:2px; }
.note h4 { font-size:15.5px; margin-bottom:var(--s1); }
.note p { margin:0; font-size:13.5px; color:var(--parchment-dim); line-height:1.6; }

/* ---- Footer ---------------------------------------------------------- */
.foot { border-top:1px solid var(--line); padding-top:var(--s5); }
.foot p { margin:0 0 var(--s2); font-size:13px; color:var(--parchment-dim); max-width:72ch; }
.foot b { color:var(--parchment-dim); }
.foot-v { font-size:11.5px; letter-spacing:.04em; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 760px) {
  .wrap { padding: var(--s7) var(--s4) var(--s6); }
  .cards, .notes { grid-template-columns: minmax(0,1fr); }
  .card { padding: var(--s5); }
  .brand .sub { display:none; }     /* keeps the 61px bar from wrapping on a phone */
  .toolnav { width:100%; margin-left:0; justify-content:flex-start; }
  .topbar { flex-wrap:wrap; gap:var(--s2); }
}
/* iOS force-zooms any focused field under 16px and never zooms back. No fields here,
   but keep tap targets at the coarse size — set via --tap above. */

/* ---- Motion ---------------------------------------------------------- */
/* Subtle stagger on load only (motion dial 3/10: 250-350ms, no choreography). */
@media (prefers-reduced-motion: no-preference) {
  .hero, .card, .note {
    animation: rise 320ms var(--ease-out) both;
  }
  .cards .card:nth-child(2) { animation-delay: 60ms; }
  .notes .note:nth-child(2) { animation-delay: 60ms; }
  @keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .card:hover { transform: none; }
}