/* =========================================================================
   World of Minecraft — landing page stylesheet
   -------------------------------------------------------------------------
   Standalone on purpose. It inherits the design LANGUAGE of assets/site.css
   (cool slate ground, warm brass ornament, nothing round, display serif with
   monospace for data, committed dark) but not the file: site.css carries a
   lot of machinery this page never uses, and a public page should not change
   shape because an internal stylesheet was edited.

   The composition rule here is the one thing that differs. Images run full
   bleed, edge to edge; every word on the page is held to one measure and
   pinned to one left margin. The page is built on that vertical line.

   Committed dark, single theme, every colour painted explicitly so the page
   never borrows a ground.
   ========================================================================= */

:root {
  color-scheme: dark;

  --ground:      #0d0f12;
  --ground-deep: #08090b;
  --stone:       #14171c;
  --stone-hi:    #232830;
  --edge:        #262c35;
  --edge-strong: #39414d;

  --ink:       #dde1e6;
  --ink-dim:   #99a1ac;
  --ink-faint: #6b7683;

  --brass:     #c8a44d;
  --brass-lit: #f0d693;

  --ok: #62b16a;

  /* Canonical WoW class colours. Chroma that carries data, never decoration. */
  --c-warrior: #c79c6e;
  --c-paladin: #f58cba;
  --c-hunter:  #abd473;
  --c-mage:    #69ccf0;
  --c-warlock: #9482c9;

  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
             "Times New Roman", Georgia, serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  /* Quantised ladder — the sizes are chosen, the way block dimensions are. */
  --t-11: 0.6875rem; --t-12: 0.75rem;   --t-13: 0.8125rem;
  --t-14: 0.875rem;  --t-15: 0.9375rem; --t-17: 1.0625rem;
  --t-21: 1.3125rem; --t-27: 1.6875rem; --t-34: 2.125rem;

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

  --measure: 66ch;
  --col: 1180px;
}

/* =========================================================================
   Reset
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-15);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.14;
  text-wrap: balance;
  color: var(--ink);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

a { color: var(--brass); text-decoration-color: rgba(200, 164, 77, 0.4); text-underline-offset: 3px; }
a:hover { color: var(--brass-lit); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 3px; }

::selection { background: rgba(200, 164, 77, 0.28); color: #fff; }

/* =========================================================================
   Primitives
   ========================================================================= */

.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--s5);
}
@media (max-width: 640px) { .wrap { padding-inline: var(--s4); } }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  z-index: 100;
  padding: var(--s2) var(--s4);
  background: var(--brass);
  color: #14100a;
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.skip:focus { left: var(--s4); }

/* The mono utility voice: every eyebrow, caption, key and spec line. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow::before { content: ""; width: 10px; height: 2px; background: var(--brass); flex: none; }

.lede {
  max-width: 58ch;
  color: var(--ink-dim);
  font-size: var(--t-17);
  line-height: 1.66;
}
.prose { max-width: var(--measure); color: var(--ink-dim); line-height: 1.72; }
.lede strong, .prose strong { color: var(--ink); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border: 1px solid var(--edge-strong);
  background: linear-gradient(180deg, var(--stone-hi), var(--stone));
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.btn:hover { background: linear-gradient(180deg, #2a3038, var(--stone-hi)); border-color: #4a5462; color: #fff; }

.btn--brass {
  border-color: var(--brass);
  background: linear-gradient(180deg, var(--brass-lit), var(--brass));
  color: #17120a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn--brass:hover {
  background: linear-gradient(180deg, #fbe6ae, var(--brass-lit));
  border-color: var(--brass-lit);
  color: #17120a;
}

/* =========================================================================
   Sections. One head shape, one rhythm.
   ========================================================================= */

.section { padding-block: var(--s9); border-top: 1px solid var(--edge); }
.section--flush { border-top: 0; }

.section__head { margin-bottom: var(--s6); }
.section__head h2 {
  margin-top: var(--s3);
  font-size: var(--t-34);
}
.section__head .lede { margin-top: var(--s4); }

/* Inside a stack the gap already separates the head from what follows; its own
   margin would be added to that and open a 128px hole. */
.stack > .section__head { margin-bottom: 0; }

/* A band already draws its own top and bottom hairline, so the next section
   must not draw a second one a pixel below it. */
.band + .section { border-top: 0; }

@media (max-width: 640px) {
  .section { padding-block: var(--s8); }
  .section__head h2 { font-size: var(--t-27); }
}

/* =========================================================================
   Hero. The screenshot is the thesis, so the scrim is weighted to the bottom
   edge where the type sits and the sky is left alone.
   ========================================================================= */

.hero {
  position: relative;
  background: var(--ground-deep);
  border-bottom: 1px solid var(--edge);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(13, 15, 18, 0.55) 0%,
      rgba(13, 15, 18, 0.12) 22%,
      rgba(13, 15, 18, 0.30) 55%,
      rgba(13, 15, 18, 0.94) 100%),
    linear-gradient(90deg, rgba(13, 15, 18, 0.72) 0%, transparent 46%);
}

.hero__in {
  position: relative;
  padding-top: clamp(120px, 26vw, 300px);
  padding-bottom: clamp(var(--s7), 6vw, var(--s9));
}

.hero h1 {
  margin-top: var(--s5);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  color: #f7f2e6;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.8);
}

.hero__kicker {
  display: block;
  /* The h1's 1.14 line-height is set for the display serif; the kicker needs its
     own breathing room or the two lines touch at the large end of the clamp. */
  margin-bottom: var(--s4);
  line-height: 1.4;
  font-family: var(--mono);
  font-size: clamp(var(--t-11), 1.5vw, var(--t-13));
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brass-lit);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.hero__lede {
  max-width: 50ch;
  margin-top: var(--s5);
  color: #d5dae1;
  font-size: var(--t-17);
  line-height: 1.62;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
}
.hero__lede strong { color: #fff; font-weight: 600; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.hero__credit {
  margin-top: var(--s6);
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa3ae;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* =========================================================================
   Fact strip. Real numbers only, monospace, no decoration. Six cells so the
   grid divides by three and by two with no cell left showing seam colour.
   ========================================================================= */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.facts li { background: var(--stone); padding: var(--s5); }
.facts b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.2rem, 2.6vw, var(--t-27));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.1;
  color: var(--brass-lit);
}
.facts span {
  display: block;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.stack { display: grid; gap: var(--s6); }

/* =========================================================================
   Plates and bands — the full-bleed imagery
   ========================================================================= */

.band { border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); background: var(--ground-deep); }
.band img { width: 100%; height: clamp(240px, 42vw, 520px); object-fit: cover; }

.band__cap {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--edge);
  background: var(--stone);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--ink-faint);
}
.band__cap b { color: var(--ink-dim); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* The labelled map gets a plate of its own: framed, uncropped, room to read. */
.plate { border: 1px solid var(--edge-strong); background: var(--ground-deep); }
.plate img { width: 100%; }
.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--edge);
  background: var(--stone);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--ink-faint);
}
.plate figcaption b { color: var(--ink); font-weight: 600; }

/* Screenshot strip. Plain figures, not buttons: with no JavaScript on the
   page a zoom affordance would be a lie. */
.strip {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.shot { border: 1px solid var(--edge); background: var(--ground-deep); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot figcaption { padding: var(--s3) var(--s4); border-top: 1px solid var(--edge); background: var(--stone); }
.shot b { display: block; font-family: var(--display); font-size: var(--t-15); font-weight: 600; color: var(--ink); }
.shot span { display: block; margin-top: 2px; font-size: var(--t-13); line-height: 1.45; color: var(--ink-faint); }

/* =========================================================================
   Classes. Rows, not cards — this is a table of five things with the same
   five properties, and it should read like one.
   ========================================================================= */

.classes { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); }

.klass {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: var(--s3) var(--s6);
  padding: var(--s5);
  background: var(--stone);
}
@media (max-width: 760px) { .klass { grid-template-columns: minmax(0, 1fr); } }

.klass__name {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-family: var(--display);
  font-size: var(--t-21);
  font-weight: 600;
  color: var(--tint, var(--ink));
}
/* A square block, not a rail down the side of a card — the same 6px marker
   the built/not-built dots use, and Minecraft's own unit. */
.klass__name::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--tint, var(--brass));
  align-self: center;
}

.klass__res {
  margin-top: var(--s2);
  padding-left: 22px;
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.klass__body p { color: var(--ink-dim); line-height: 1.65; max-width: 52ch; }

.klass__spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: var(--t-12);
  color: var(--ink-faint);
}
.klass__spec b { color: var(--ink-dim); font-weight: 600; }

.klass--warrior { --tint: var(--c-warrior); }
.klass--paladin { --tint: var(--c-paladin); }
.klass--hunter  { --tint: var(--c-hunter); }
.klass--mage    { --tint: var(--c-mage); }
.klass--warlock { --tint: var(--c-warlock); }

/* =========================================================================
   State. Built and not built, carried by form as well as by colour.
   ========================================================================= */

.state-cols {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--edge);
  border: 1px solid var(--edge);
}
@media (max-width: 760px) { .state-cols { grid-template-columns: minmax(0, 1fr); } }
.state-cols > div { background: var(--stone); padding: var(--s5); }

.state-cols h3 {
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.state-cols ul { margin-top: var(--s4); display: grid; gap: var(--s3); }
.state-cols li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  font-size: var(--t-14);
  line-height: 1.55;
  color: var(--ink-dim);
}
.state-cols li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; }
.is-built li::before { background: var(--ok); }
.is-todo li::before { box-shadow: inset 0 0 0 1px var(--ink-faint); }
.state-cols li b { color: var(--ink); font-weight: 600; }

/* =========================================================================
   Help wanted
   ========================================================================= */

.roles {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--edge);
  border: 1px solid var(--edge);
}
@media (max-width: 900px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roles { grid-template-columns: minmax(0, 1fr); } }

.role { background: var(--stone); padding: var(--s5); }
.role h3 { font-size: var(--t-17); color: var(--brass-lit); }
.role .tag {
  display: block;
  margin-bottom: var(--s3);
  font-family: var(--mono);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.role p { margin-top: var(--s2); font-size: var(--t-14); line-height: 1.62; color: var(--ink-dim); }

/* =========================================================================
   Close
   ========================================================================= */

.close { border-top: 1px solid var(--edge); background: var(--stone); }
.close__in {
  padding-block: var(--s9);
  display: grid;
  gap: var(--s6);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
@media (max-width: 760px) { .close__in { grid-template-columns: minmax(0, 1fr); } }
.close h2 { font-size: var(--t-34); margin-top: var(--s3); }
.close .prose { margin-top: var(--s4); }
@media (max-width: 640px) { .close h2 { font-size: var(--t-27); } }

.footer { border-top: 1px solid var(--edge); background: var(--ground-deep); }
.footer__in {
  padding-block: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.footer b { color: var(--ink-dim); font-weight: 600; }

/* =========================================================================
   Motion. There is very little of it; what there is, goes away on request.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}