/* =========================================================
   Psychosis — Horde guild (psychosis.rip)
   Clean, flat, modern. Plain CSS, no build step.
   Artwork: the Horde logo (assets/horde-logo.webp, hero + favicon) is
   Blizzard Entertainment property, owner-supplied, used on this
   non-commercial fan page only (see README.md). The page background is a
   plain CSS gradient stack; no images, textures or noise.
   Body text: system font stack.
   Display font (hero title "PSYCHOSIS" + hero tagline + dictionary
   headword + section headings + closing CTA): Friz Quadrata
   (Ernst Friz / ITC, Linotype), self-hosted from /fonts.
   Optimus Princeps (Manfred Klein, 2004, free for personal use) is still
   registered and shipped in /fonts as the alternative hero-title face
   (see .guild-name for the one-line switch). Neither is an open-licensed
   font; both are used here for a non-commercial fan page only (see
   README.md).
   ========================================================= */

/* Friz Quadrata TT Regular only (no bold cut is shipped); nothing on the
   page asks for a bolder weight, so the browser never synthesises one. */
@font-face {
  font-family: "Friz Quadrata";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/FrizQuadrata.woff2") format("woff2"),
       url("fonts/FrizQuadrata.ttf") format("truetype");
}

/* Optimus Princeps ships Regular (OS/2 weight 500) and SemiBold (600).
   Both are registered so the browser never has to synthesise bold. Not
   used by default any more (the hero title is set in Friz Quadrata), but
   kept so the title can be flipped back; see .guild-name. */
@font-face {
  font-family: "Optimus Princeps";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/OptimusPrinceps.woff2") format("woff2"),
       url("fonts/OptimusPrinceps.ttf") format("truetype");
}

@font-face {
  font-family: "Optimus Princeps";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/OptimusPrincepsSemiBold.woff2") format("woff2"),
       url("fonts/OptimusPrincepsSemiBold.ttf") format("truetype");
}

:root {
  --bg: #0f0f12;
  --bg-footer: #0a0a0d;
  --bg-card: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --red: #c8102e;          /* primary / accent */
  --red-deep: #8c1c13;     /* hover / depth */
  --gold: #c9a449;         /* tiny trim only, never text */
  --text: #f3f1ee;
  --muted: #9a9aa6;
  --glow-red: 0 0 24px rgba(200, 16, 46, 0.35);
  --focus: #ffffff;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Friz Quadrata is a sturdy, slightly flared glyphic serif (the WoW UI face);
     the fallbacks are wide old-style serifs so the layout holds if it fails. */
  --font-display: "Friz Quadrata", "Friz Quadrata TT", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  /* Alternative hero-title stack, currently unused: .guild-name points at
     --font-display. Optimus Princeps is a Trajan-style Roman capital face,
     so the fallbacks are the same inscriptional-serif family. */
  --font-title: "Optimus Princeps", "Trajan Pro", Cinzel, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--bg-footer);
  scroll-behavior: smooth;
}

/* Page background: smooth CSS-only gradients, no images, no noise.
   A soft crimson glow sits top-right and a fainter deep-red one bottom-left,
   both fading into the opaque near-black base. The glows are sized in px
   (not %) so they never stretch with document height, and each one carries
   several stops with slowly decaying alpha so dark browsers do not band.
   The whole stack is fixed to the viewport (see the mobile fallback
   further down).
   Contrast: at the brightest point (top-right, ~14% crimson over #0f0f12
   = ~#290f16) white text is ~18:1 and --muted (#9a9aa6) is ~6.4:1, so every
   AA ratio on the page is unchanged. */
body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 760px at 88% -8%,
      rgba(200, 16, 46, 0.14) 0%,
      rgba(200, 16, 46, 0.11) 18%,
      rgba(200, 16, 46, 0.075) 36%,
      rgba(200, 16, 46, 0.045) 54%,
      rgba(200, 16, 46, 0.02) 72%,
      rgba(200, 16, 46, 0.006) 88%,
      rgba(200, 16, 46, 0) 100%),
    radial-gradient(900px 620px at 10% 108%,
      rgba(140, 28, 19, 0.10) 0%,
      rgba(140, 28, 19, 0.075) 20%,
      rgba(140, 28, 19, 0.05) 40%,
      rgba(140, 28, 19, 0.028) 58%,
      rgba(140, 28, 19, 0.012) 76%,
      rgba(140, 28, 19, 0.004) 90%,
      rgba(140, 28, 19, 0) 100%),
    linear-gradient(180deg, #0f0f12 0%, #0e0e11 50%, #0c0c0f 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* Mobile fallback: background-attachment: fixed repaints on every scroll
   tick on many touch browsers (and iOS Safari ignores it or jitters), so
   let the gradient scroll with the page there. The px-sized glows stay
   anchored to the top-right / bottom-left corners of the document. */
@media (hover: none) and (pointer: coarse), (max-width: 600px) {
  body {
    background-attachment: scroll;
  }
}

body > * {
  position: relative;
  z-index: 1;
}

/* Accessibility */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 8px 14px;
  background: var(--red);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  z-index: 100;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Top nav */
.top-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 40px;
}

.nav-pill {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}

.nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 20px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.nav-link:hover {
  color: var(--text);
  background: rgba(200, 16, 46, 0.1);
}

/* Hero */
.hero {
  padding: 48px 40px 32px;
  text-align: center;
}

.hero-content {
  max-width: 640px;
  margin: 0 auto;
}

/* Horde logo (recessed, brushed-red version). The file is a transparent
   WebP cut to the crest silhouette only (no baked halo or shadow, see
   README); the width/height attributes on the <img> reserve the box, CSS
   sets the rendered size. No glow, drop-shadow or filter of any kind: a
   blurred shadow on this near-black background quantises into visible
   stepped rings, and the artwork's own bevel already gives it depth. */
.crest {
  display: block;
  width: auto;
  height: 120px;
  margin: 0 auto 20px;
}

.guild-name {
  /* Hero title in Friz Quadrata, the same face and @font-face as the
     tagline and headings (var(--font-display)).
     TO SWITCH BACK to Optimus Princeps SemiBold: change the next line to
     `font-family: var(--font-title);`, set `font-weight: 600;`,
     `font-size: clamp(46px, 12vw, 104px);` and `letter-spacing: 0.06em;`.
     The Optimus @font-face rules, --font-title and the /fonts files are
     all still in place. */
  font-family: var(--font-display);
  /* Friz Quadrata ships Regular only (registered above as 400). Asking for
     anything heavier would make the browser smear a faux bold over the
     outline, so the weight stays at 400. */
  font-weight: 400;
  /* Friz Quadrata "PSYCHOSIS" is 5.58em of glyph advances (measured from
     fonts/FrizQuadrata.ttf, kerning not counted); with 0.05em tracking on
     9 letters it is ~6.03em wide. 100px (~603px) is the ceiling that still
     fits the 640px hero column on one line; 44px (~265px) fits the 280px of
     content width on a 320px phone. */
  font-size: clamp(44px, 12vw, 100px);
  letter-spacing: 0.05em;
  /* Stays uppercase: the tracked caps keep the title reading as a title. */
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  margin-bottom: 14px;
  /* Black outline + shadow so the white title lifts off the crimson glow.
     Built from text-shadow only, because a centred -webkit-text-stroke eats
     the letterforms and paint-order is not honoured for HTML text
     everywhere. The outline is a solid ~3px black band drawn OUTSIDE the
     glyphs by stacking unblurred black copies in three rings: 8 offsets at
     1px, 16 at 2px and 24 at 3px (every 15 degrees). The dense rings keep
     the band round at corners and gap-free along diagonals, and the white
     fill paints on top so no counter or serif is lost. After the rings a
     hard 4px drop and two wide dark blurs push the whole word off the
     crimson glow. Colour and size are unchanged. */
  text-shadow:
    /* ring 1: 1px, 8 directions */
    -1px   -1px   0 #000,   1px   -1px   0 #000,
    -1px    1px   0 #000,   1px    1px   0 #000,
    -1px    0     0 #000,   1px    0     0 #000,
     0     -1px   0 #000,   0      1px   0 #000,
    /* ring 2: 2px, 16 directions (every 22.5 degrees) */
     2px    0     0 #000,   1.8px  0.8px 0 #000,
     1.4px  1.4px 0 #000,   0.8px  1.8px 0 #000,
     0      2px   0 #000,  -0.8px  1.8px 0 #000,
    -1.4px  1.4px 0 #000,  -1.8px  0.8px 0 #000,
    -2px    0     0 #000,  -1.8px -0.8px 0 #000,
    -1.4px -1.4px 0 #000,  -0.8px -1.8px 0 #000,
     0     -2px   0 #000,   0.8px -1.8px 0 #000,
     1.4px -1.4px 0 #000,   1.8px -0.8px 0 #000,
    /* ring 3: 3px, 24 directions (every 15 degrees) */
     3px    0     0 #000,   2.9px  0.8px 0 #000,
     2.6px  1.5px 0 #000,   2.1px  2.1px 0 #000,
     1.5px  2.6px 0 #000,   0.8px  2.9px 0 #000,
     0      3px   0 #000,  -0.8px  2.9px 0 #000,
    -1.5px  2.6px 0 #000,  -2.1px  2.1px 0 #000,
    -2.6px  1.5px 0 #000,  -2.9px  0.8px 0 #000,
    -3px    0     0 #000,  -2.9px -0.8px 0 #000,
    -2.6px -1.5px 0 #000,  -2.1px -2.1px 0 #000,
    -1.5px -2.6px 0 #000,  -0.8px -2.9px 0 #000,
     0     -3px   0 #000,   0.8px -2.9px 0 #000,
     1.5px -2.6px 0 #000,   2.1px -2.1px 0 #000,
     2.6px -1.5px 0 #000,   2.9px -0.8px 0 #000,
    /* depth: hard drop, tight dark halo, wide soft shadow */
     0      4px   4px rgba(0, 0, 0, 0.9),
     0      0    18px rgba(0, 0, 0, 0.85),
     0     10px  40px rgba(0, 0, 0, 0.7);
  /* Single word, so it should never need to break; this is the last resort
     if a fallback font is much wider than measured. */
  overflow-wrap: anywhere;
}

.tagline {
  /* "Lok'tar Ogar" in Friz Quadrata, the same display face as the section
     headings. Mixed case on purpose (the Horde greeting is a phrase, not a
     label) with light 0.06em tracking so it sits as a subtitle under the
     tracked PSYCHOSIS title without competing with it. Weight 400 is the
     only Friz Quadrata cut shipped, so no faux bold is ever synthesised.
     ~7.6em of glyphs tracked: 26px (~200px) on desktop, 20px (~150px) on
     a 320px phone, both far inside the hero column. The hero has no buttons
     (Apply / Discord live in the top nav and the closing CTA); the tagline
     carries no bottom margin, the dictionary card below sets its own top
     margin and the hero's bottom padding sets the gap to About. */
  font-family: var(--font-display);
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: none;
  color: var(--red);
  margin-bottom: 0;
}

/* Dictionary excerpt under the tagline (Google / Oxford style entry).
   Deliberately small and quiet: a little subtitle under "Lok'tar Ogar",
   not a second hero card. Same flat surface as the other cards (4% white,
   the same neutral 1px 8% border on all four sides, no accent rule), 8px
   radius, no hover lift, no glow, it is not interactive. Left-aligned text
   inside a centered 360px column. Contrast on the card surface (~#191a1d):
   --text ~14:1, --muted ~5.6:1, both AA (>= 4.5:1) at the 11-13px sizes
   used here. The 18px top margin plus the hero's 32px bottom padding keeps
   the tagline -> card -> About rhythm even; About's own padding is
   unchanged, so no extra gap opens above it. */
.dict {
  max-width: 360px;
  margin: 18px auto 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}

/* Headword in Friz Quadrata. The font ships U+00B7 (middle dot), so the
   syllable breaks render in the display face, not a fallback. <dfn>
   defaults to italic; reset so the glyphic serif keeps its upright shape.
   ~5.6em of glyphs: 20px (~112px) desktop, 18px (~101px) on a 320px phone,
   inside the 250px content width (320 - 2*20 hero padding - 2*14 card
   padding at <= 600px - 2px border) with room to spare. */
.dict-word {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 20px);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text);
}

.dict-word dfn {
  font-style: normal;
}

/* Respelling. Friz Quadrata has no ī (U+012B) or ˈ (U+02C8), so this line
   uses a sans stack that carries those marks on every platform: Segoe UI
   (Windows), Noto Sans (Android / most Linux), DejaVu Sans (Linux), then
   system-ui (San Francisco on Apple). No web font request. */
.dict-pron {
  margin-top: 2px;
  font-family: "Segoe UI", "Noto Sans", "DejaVu Sans", system-ui, -apple-system, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* Part of speech: small italic serif, the dictionary convention. */
.dict-pos {
  margin-top: 4px;
  font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.dict-def {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dict-example {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  font-style: italic;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Visually hidden, still read by assistive tech (used for the spoken
   pronunciation in the dictionary card). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Buttons (closing CTA) */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 160px;
  padding: 16px 32px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s, border-color 0.25s, color 0.25s;
}

.btn-primary {
  background: var(--red);
  border-color: rgba(200, 16, 46, 0.6);
  color: #fff;
}

.btn-primary:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
  box-shadow: var(--glow-red);
}

.btn-secondary {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--glow-red);
}

/* Sections */
.section {
  padding: 32px 40px;
  text-align: center;
}

.section-label {
  font-family: var(--font-display);
  /* Friz Quadrata has solid strokes and wide caps, so small labels can drop to
     22px and still read clearly. Caps + 0.08em tracking keep them label-like
     and distinct from the mixed-case CTA below. "RAID SCHEDULE" is ~8.9em
     tracked (~195px), well inside a 320px phone. */
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  opacity: 0.85;
  margin-bottom: 24px;
}

.prose {
  max-width: 560px;
  margin: 0 auto;
  font-size: 15px;
  color: var(--muted);
}

.prose p + p {
  margin-top: 14px;
}

/* Card */
.card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--red);
  border-radius: 12px;
  padding: 8px 24px 20px;
  text-align: left;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.card:hover {
  border-color: rgba(200, 16, 46, 0.4);
  border-top-color: var(--red);
  box-shadow: var(--glow-red);
  transform: translateY(-3px);
}

.raid-list {
  list-style: none;
}

.raid-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.raid-row:last-child {
  border-bottom: none;
}

.raid-day {
  font-weight: 600;
  color: var(--text);
}

.raid-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Small subtext under the schedule rows: same quiet 11-12px lettering as the
   footer legal line, left-aligned to match the raid rows. --muted (#9a9aa6)
   on the card surface (#0f0f12 + 4% white, ~#191a1d) measures ~6.3:1, above
   AA 4.5:1 even at this size. No media query overrides it. */
.raid-note {
  margin-top: 10px;
  font-size: 0.72rem; /* 11.5px at the 16px root */
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--muted);
}

/* Closing CTA. Sits directly on the page gradient, no backdrop art. */
.cta-section {
  padding-top: 56px;
  padding-bottom: 64px;
}

.cta-title {
  font-family: var(--font-display);
  /* Mixed case on purpose: Friz Quadrata's lowercase is its signature look (it
     is how WoW sets its own headers) and "Ready to Join?" reads warmer and
     clearer than tracked caps at this size. ~6.9em wide at 0.02em tracking:
     44px (~300px) on desktop, 28px (~195px) on a 320px phone. */
  font-size: clamp(28px, 5.5vw, 44px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: none;
  color: #fff;
  margin-bottom: 12px;
}

.cta-copy {
  font-size: 14px;
  color: var(--muted);
  max-width: 450px;
  margin: 0 auto 24px;
}

/* Footer */
footer {
  padding: 32px 40px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  background: var(--bg-footer);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

footer p + p {
  margin-top: 6px;
}

/* Blizzard trademark notice: quiet but still readable.
   #85858f on the #0a0a0d footer is ~5.1:1 (WCAG AA for body text). */
footer .legal {
  max-width: 640px;
  margin: 12px auto 0;
  font-size: 11px;
  line-height: 1.55;
  color: #85858f;
}

/* Responsive */
@media (max-width: 600px) {
  .top-nav { padding: 12px 20px; }
  .nav-link { font-size: 12px; padding: 6px 14px; }
  .hero { padding: 32px 20px 24px; }
  .dict { margin-top: 16px; padding: 10px 14px; }
  .section { padding: 24px 20px; }
  .cta-group { gap: 10px; }
  .btn { padding: 14px 24px; font-size: 14px; min-width: 140px; }
  .card { padding: 4px 18px 16px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover, .card:hover { transform: none; }
}