/* ==========================================================================
   landing.css — the public face of playtystnad.com
   Loads AFTER tystnad.css: tokens, fonts, and base come from there; this
   file styles only .landing / .land-* and touches nothing of the app.
   Design language: modern game-store presentation (cinematic hero, bento
   feature grid, edition-style pricing, atmospheric glows) carried by the
   site's blood-on-ash identity. No JavaScript; all motion is hover-only
   and guarded by prefers-reduced-motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body.landing {
  min-height: 100vh;
  overflow-x: hidden;
}

.landing main { display: block; }

/* ============ TOP BAR ============ */

.land-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(12, 10, 11, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(161, 30, 36, 0.35);
}

.land-topbar-logo img {
  display: block;
  height: 30px;
  width: auto;
}

.land-topbar-nav {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}

.land-topbar-nav a {
  color: var(--ash);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 0;
  transition: color 140ms ease;
}

.land-topbar-nav a:hover { color: var(--bone); }

/* ============ BUTTONS ============ */

.land-btn {
  display: inline-block;
  clip-path: var(--chamfer-8);
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease, filter 150ms ease, transform 150ms ease;
}

.land-btn-blood {
  background: linear-gradient(170deg, var(--blood-bright), var(--blood) 55%, #7c161b);
  color: #f2ece3;
  filter: drop-shadow(0 0 14px rgba(217, 43, 50, 0.35));
}

.land-btn-blood:hover {
  background: linear-gradient(170deg, #e83b42, var(--blood-bright) 55%, var(--blood));
  filter: drop-shadow(0 0 22px rgba(217, 43, 50, 0.55));
}

.land-btn-ghost {
  background: rgba(32, 28, 30, 0.85);
  color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line);
}

.land-btn-ghost:hover { background: #2a2528; }

.land-btn-panel {
  background: var(--panel-hi);
  color: var(--bone);
  box-shadow: inset 0 0 0 1px var(--line);
}

.land-btn-panel:hover { background: var(--blood); color: #f2ece3; }

@media (prefers-reduced-motion: no-preference) {
  .land-btn:hover { transform: translateY(-2px); }
}

.land-topbar-signin {
  padding: 0.55rem 1.3rem;
  font-size: 0.85rem;
  filter: none;
}

/* ============ HERO ============ */

.land-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem 1.25rem 4.5rem;
}

/* Cinematic layering: world art under a lighter scrim than the app's,
   an ember glow low in the frame, a vignette at the edges, and a fade
   to full ink at the bottom so the page below starts clean. */
.land-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 100%, rgba(185, 106, 51, 0.16), transparent 70%),
    radial-gradient(ellipse 140% 100% at 50% 40%, transparent 55%, rgba(12, 10, 11, 0.75)),
    linear-gradient(rgba(12, 10, 11, 0.5), rgba(12, 10, 11, 0.5)),
    linear-gradient(to bottom, rgba(12, 10, 11, 0.4) 0%, rgba(12, 10, 11, 0) 35%, rgba(12, 10, 11, 1) 97%),
    url("../TYSTNAD_Background_1920.jpg");
  background-size: auto, auto, auto, auto, cover;
  background-position: center;
  background-repeat: no-repeat;
}

.land-hero-inner {
  position: relative;
  max-width: 54rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.land-hero-kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 0.5rem 1.2rem;
  background: rgba(23, 20, 22, 0.7);
  clip-path: var(--chamfer-6);
  box-shadow: inset 0 0 0 1px rgba(161, 30, 36, 0.5);
}

.land-hero-logo {
  width: min(420px, 74vw);
  height: auto;
  margin-top: 1.8rem;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 60px rgba(217, 43, 50, 0.12));
}

.land-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5.5vw, 3.7rem);
  line-height: 1.08;
  color: var(--bone);
  margin-top: 2rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.75);
}

.land-hero-accent {
  background: linear-gradient(100deg, var(--bone) 20%, var(--ember-light) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ember-light); /* fallback when clip is unsupported */
}

.land-hero-sub {
  margin-top: 1.4rem;
  max-width: 44rem;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--bone);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85);
}

.land-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.4rem;
}

.land-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.6rem;
  padding: 0;
}

.land-meta li {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 0.5rem 1rem;
  background: rgba(23, 20, 22, 0.75);
  clip-path: var(--chamfer-6);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ============ STATEMENT — the hybrid claim ============ */

.land-statement {
  position: relative;
  border-top: 1px solid rgba(161, 30, 36, 0.35);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 80% at 85% 50%, rgba(185, 106, 51, 0.1), transparent 70%),
    var(--panel);
  overflow: hidden;
}

.land-statement-grid {
  max-width: 68rem;
  margin: 0 auto;
  padding: 4.5rem 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 2rem;
  align-items: center;
}

.land-statement-text { text-align: left; }

.land-statement-text .land-h2 { margin-top: 0.6rem; }

.land-statement-text p:not(.land-kicker) {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bone);
  max-width: 38rem;
}

.land-statement-art { margin: 0; }

.land-statement-art img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 34px rgba(185, 106, 51, 0.25));
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* ============ SECTIONS ============ */

.land-section {
  position: relative;
  max-width: 68rem;
  margin: 0 auto;
  padding: 5rem 1.25rem 1rem;
  text-align: center;
}

.land-kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blood-bright);
}

.land-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  color: var(--bone);
  margin-top: 0.6rem;
}

.land-section-sub {
  margin-top: 0.8rem;
  color: var(--bone);
  font-size: 1.05rem;
}

/* ============ FEATURE BENTO ============ */

.land-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
  text-align: left;
}

.land-card {
  position: relative;
  grid-column: span 2;
  background: linear-gradient(160deg, var(--panel-hi), var(--panel) 60%);
  clip-path: var(--chamfer-8);
  padding: 1.7rem 1.6rem 1.6rem;
  overflow: hidden;
  transition: background-color 160ms ease, filter 160ms ease, transform 160ms ease;
}

.land-card-wide { grid-column: span 2; }

@media (min-width: 900px) {
  .land-card { grid-column: span 1; }
  .land-card-wide { grid-column: span 2; }
}

@media (prefers-reduced-motion: no-preference) {
  .land-card:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 16px rgba(217, 43, 50, 0.14));
  }
}

.land-card-num {
  position: absolute;
  top: 0.4rem;
  right: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(125, 118, 111, 0.16);
  pointer-events: none;
}

.land-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--bone);
}

.land-card p {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bone);
}

/* ============ BESTIARY SHOWCASE ============ */

.land-showcase {
  position: relative;
  margin-top: 5rem;
  padding: 4.5rem 1.25rem 4rem;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 70% at 50% 100%, rgba(161, 30, 36, 0.1), transparent 70%),
    var(--panel);
}

.land-showcase-grid {
  max-width: 68rem;
  margin: 2.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: end;
}

.land-beast { margin: 0; }

.land-beast img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 180ms ease, transform 180ms ease;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
}

@media (prefers-reduced-motion: no-preference) {
  .land-beast:hover img {
    transform: translateY(-5px) scale(1.03);
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 24px rgba(185, 106, 51, 0.3));
  }
}

.land-beast figcaption {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.land-beast-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bone);
}

.land-beast-tag {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ============ STEPS ============ */

.land-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem 1.5rem;
  margin-top: 2.5rem;
  padding: 0;
}

.land-step { text-align: center; }

.land-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ember-light);
  background: var(--panel);
  clip-path: var(--chamfer-8);
  box-shadow: inset 0 0 0 1px rgba(185, 106, 51, 0.4);
}

.land-step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--bone);
  margin-top: 0.9rem;
}

.land-step p {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--bone);
}

/* ============ PRICING — editions ============ */

.land-prices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

/* Chamfered 1px frame: an accent-colored chamfered wrapper with the panel
   chamfered 1px inside it (the login frame pattern). */
.land-price-frame {
  clip-path: var(--chamfer-8);
  background: var(--line);
  padding: 1px;
  display: flex;
  transition: filter 180ms ease, transform 180ms ease;
}

.land-price-featured {
  background: linear-gradient(170deg, var(--blood-bright), var(--blood) 60%, #6e1317);
  filter: drop-shadow(0 0 26px rgba(217, 43, 50, 0.22));
}

@media (prefers-reduced-motion: no-preference) {
  .land-price-frame:hover { transform: translateY(-4px); }
  .land-price-featured:hover { filter: drop-shadow(0 0 36px rgba(217, 43, 50, 0.35)); }
}

@media (min-width: 1000px) {
  .land-price-featured { transform: scale(1.03); }
  @media (prefers-reduced-motion: no-preference) {
    .land-price-featured:hover { transform: scale(1.03) translateY(-4px); }
  }
}

.land-price {
  clip-path: var(--chamfer-7);
  background: linear-gradient(175deg, var(--panel-hi), var(--panel) 45%);
  padding: 2.1rem 1.5rem 1.8rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.land-price-featured .land-price {
  background: linear-gradient(175deg, #241417, #1a0f11 50%);
}

.land-price-badge {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember-light);
  margin-bottom: 0.5rem;
}

.land-price h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--bone);
}

.land-price-for {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ash);
  margin-top: 0.2rem;
}

.land-price-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--bone);
  margin-top: 1.1rem;
}

.land-price-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  flex: 1;
  text-align: left;
  width: 100%;
}

.land-price-list li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.5rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--bone);
}

.land-price-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.35rem;
  color: var(--blood-bright);
  font-weight: 700;
}

.land-price .land-btn { margin-top: 1.5rem; width: 100%; }

.land-fine {
  margin-top: 1.8rem;
  font-size: 0.85rem;
  color: var(--ash);
}

.land-fine a { color: var(--bone); }
.land-fine a:hover { color: var(--blood-bright); }

/* ============ OWNERSHIP BAND ============ */

.land-band {
  margin-top: 5rem;
  padding: 4rem 1.25rem;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(217, 43, 50, 0.12), transparent 70%),
    linear-gradient(rgba(161, 30, 36, 0.14), rgba(161, 30, 36, 0.14)),
    var(--panel);
  border-top: 1px solid rgba(161, 30, 36, 0.35);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.land-band p {
  max-width: 46rem;
  margin: 1.2rem auto 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--bone);
}

/* ============ AI TRANSPARENCY ============ */

.land-ai { padding-top: 4rem; }

.land-ai-text {
  max-width: 42rem;
  margin: 1rem auto 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--bone);
}

/* ============ FAQ ============ */

.land-faq {
  max-width: 44rem;
  margin: 2rem auto 0;
  text-align: left;
}

.land-faq details {
  border-bottom: 1px solid var(--line);
}

.land-faq details:first-child { border-top: 1px solid var(--line); }

.land-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--bone);
  transition: color 140ms ease;
}

.land-faq summary:hover { color: #efe9e0; }

.land-faq summary::-webkit-details-marker { display: none; }

.land-faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--blood-bright);
  flex-shrink: 0;
}

.land-faq details[open] summary::after { content: "\2212"; }

.land-faq details p {
  padding: 0 0.25rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--bone);
}

.land-faq details a { color: var(--bone); text-decoration: underline; }
.land-faq details a:hover { color: var(--blood-bright); }

/* ============ FINAL CTA ============ */

.land-final {
  position: relative;
  max-width: 68rem;
  margin: 0 auto;
  padding: 6rem 1.25rem;
  text-align: center;
}

.land-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 65% at 50% 55%, rgba(161, 30, 36, 0.14), transparent 70%);
  pointer-events: none;
}

.land-final .land-h2,
.land-final .land-cta-row { position: relative; }

/* ============ FOOTER ============ */

.land-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 2.5rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.land-footer-logo {
  height: 34px;
  width: auto;
  opacity: 0.85;
}

.land-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
}

.land-footer nav a {
  color: var(--ash);
  font-size: 0.9rem;
  padding: 0.4rem 0;
  transition: color 140ms ease;
}

.land-footer nav a:hover { color: var(--bone); }

.land-footer-copy {
  font-size: 0.8rem;
  color: var(--ash);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 899px) {
  .land-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .land-card, .land-card-wide { grid-column: span 2; }
  .land-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .land-statement-grid { grid-template-columns: 1fr; text-align: center; }
  .land-statement-text { text-align: center; }
  .land-statement-text p:not(.land-kicker) { margin-left: auto; margin-right: auto; }
  .land-statement-art img { max-width: 280px; }
}

@media (max-width: 640px) {
  .land-topbar { gap: 0.9rem; padding: 0.6rem 0.9rem; }
  .land-topbar-nav { display: none; }
  .land-topbar-signin { margin-left: auto; }
  .land-hero { min-height: 92vh; }
  .land-section { padding-top: 3.5rem; }
  .land-cta-row .land-btn { width: 100%; }
  .land-meta li { font-size: 0.75rem; padding: 0.45rem 0.8rem; }
}

/* Audience triage under the hero (2026-07-20). Three doors: run a game,
   play in one, just looking. The page below stays GM-first, because the
   GM is the buyer; this only sorts people to the right starting point. */
.land-doors {
  margin: 2.4rem auto 0;
  max-width: 62rem;
}
.land-doors-lead {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blood-bright);
  margin: 0 0 .9rem;
}
.land-doors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.land-doors-list a {
  display: block;
  height: 100%;
  padding: .95rem 1.1rem;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid rgba(207, 201, 192, .14);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: border-color .15s ease, background .15s ease;
}
.land-doors-list a:hover,
.land-doors-list a:focus-visible {
  background: var(--panel-hi, var(--panel));
  border-color: var(--blood-bright);
}
.land-doors-list strong {
  display: block;
  color: var(--bone);
  font-size: 1rem;
  margin-bottom: .2rem;
}
.land-doors-list span {
  display: block;
  color: var(--ash);
  font-size: .85rem;
  line-height: 1.4;
}