/* Duonaris — landing page.
   The palette and faces are the game's own; this page is its front door, not a
   second identity. It commits to one visual world (a fire-lit night), so there
   is no light theme — only a guard so a forced light preference doesn't break
   text over the artwork. */

:root{
  --ink:#0b0710;
  --ink-2:#140c17;          /* violet-biased near-black, not neutral grey */
  --ink-3:#1c1220;
  --parchment:#f0e2c8;
  --parchment-dim:rgba(240,226,200,.62);
  --parchment-faint:rgba(240,226,200,.4);
  --amber:#ffc169;
  --amber-deep:#c2762f;
  --arcane:#8fd8ff;
  --ember:#ff7a2f;
  --rule:rgba(255,193,105,.16);

  --measure:62ch;
  --pad:clamp(20px,5vw,72px);

  --step-0:clamp(16px,.6vw + 15px,19px);
  --step-1:clamp(19px,1vw + 17px,23px);
  --step-2:clamp(26px,2vw + 20px,38px);
  --step-3:clamp(32px,4.4vw + 16px,68px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

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

/* shared type roles ------------------------------------------------------- */

.eyebrow{
  margin:0 0 18px;
  font-family:"Cinzel",serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--amber);
}

h1,h2,h3{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:600;
  text-wrap:balance;
  margin:0;
}

/* ============================================================== hero ==== */

.hero{
  position:relative;
  min-height:min(100svh,880px);
  display:flex;
  flex-direction:column;
  isolation:isolate;
  overflow:hidden;
}

.hero-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 50%;      /* keeps the twins in frame as it narrows */
  z-index:-3;
}

/* Two scrims: one lifting the bottom-left for the headline, one cooling the
   top so the nav reads over the sky. */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(11,7,16,.86) 24%, rgba(11,7,16,.1) 62%, rgba(11,7,16,.55) 100%),
    linear-gradient(to right, rgba(11,7,16,.92) 0%, rgba(11,7,16,.5) 38%, rgba(11,7,16,0) 68%);
}

.hero-embers{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* --- top bar --- */

.topbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding:22px var(--pad) 18px;
}

.brand{display:flex;align-items:center;gap:13px}
.crest{color:var(--amber);display:block;filter:drop-shadow(0 0 14px rgba(255,150,60,.35))}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-kicker{
  font-family:"Cinzel",serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--parchment-faint);
  margin-bottom:2px;
}
.brand-text strong{
  font-family:"Cinzel",serif;
  font-weight:700;
  font-size:21px;
  letter-spacing:.13em;
  color:var(--parchment);
}
.brand-sub{
  font-family:"Cinzel",serif;
  font-size:10px;
  font-weight:400;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--parchment-faint);
  margin-top:3px;
}

.nav{display:flex;align-items:center;gap:8px}
.nav a{
  font-family:"Cinzel",serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  padding:11px 14px;
  transition:color .25s ease;
}
.nav a:hover{color:var(--parchment)}
.nav .nav-cta{
  color:var(--amber);
  border:1px solid rgba(255,193,105,.42);
  padding:11px 22px;
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.nav .nav-cta:hover{
  color:var(--ink);
  background:var(--amber);
  border-color:var(--amber);
}

/* the hairline under the bar is the bond, animated in landing.js */
.bond-rule{
  position:relative;
  display:block;
  width:100%;
  height:26px;
  margin-top:-13px;
  pointer-events:none;
}

/* --- hero copy --- */

.hero-body{
  position:relative;
  margin-top:auto;
  padding:0 var(--pad) clamp(44px,7vh,88px);
  max-width:min(980px,74vw);
}

.hero h1{
  font-size:var(--step-3);
  line-height:1.03;
  text-wrap:nowrap;
  letter-spacing:-.015em;
  margin-bottom:22px;
  text-shadow:0 4px 40px rgba(0,0,0,.85);
}

.lede{
  margin:0 0 32px;
  max-width:46ch;
  font-size:var(--step-1);
  line-height:1.55;
  color:rgba(240,226,200,.82);
  text-shadow:0 2px 20px rgba(0,0,0,.8);
}

/* --- call to action --- */

.cta{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--amber);
  color:#241206;
  font-family:"Cinzel",serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding:19px 40px;
  border:1px solid var(--amber);
  box-shadow:0 10px 40px rgba(255,140,50,.22);
  transition:background .25s ease,box-shadow .25s ease,transform .25s ease,color .25s ease;
}
.cta span{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cta:hover{
  background:#ffd79a;
  box-shadow:0 12px 52px rgba(255,150,60,.36);
  transform:translateY(-2px);
}
.cta:hover span{transform:translateX(5px)}

.cta-quiet{
  background:transparent;
  color:var(--amber);
  box-shadow:none;
  border-color:rgba(255,193,105,.4);
}
.cta-quiet:hover{background:var(--amber);color:#241206}

.meta{
  margin:20px 0 0;
  font-family:"Cinzel",serif;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--parchment-faint);
}

/* ============================================================ sections == */

.section{
  padding:clamp(84px,13vh,150px) var(--pad);
  max-width:1180px;
  margin-inline:auto;
}

.section h2{
  font-size:var(--step-2);
  line-height:1.15;
  letter-spacing:-.01em;
  max-width:20ch;
  margin-bottom:26px;
}

.section-lede{
  margin:0 0 52px;
  max-width:var(--measure);
  font-size:var(--step-1);
  color:rgba(240,226,200,.74);
}

/* --- the three twins cards --- */

.trio{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2px;
  background:var(--rule);
  border:1px solid var(--rule);
}

.card{
  background:var(--ink-2);
  padding:34px 30px 38px;
  position:relative;
  transition:background .35s ease;
}
.card:hover{background:var(--ink-3)}

/* a hairline of the character's own colour, top edge only */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:currentColor;
  opacity:.5;
}
.card-mage{color:var(--arcane)}
.card-bond{color:var(--parchment)}
.card-warrior{color:var(--ember)}

.card h3{
  font-size:27px;
  color:var(--parchment);
  margin-bottom:4px;
}
.card .role{
  margin:0 0 16px;
  font-family:"Cinzel",serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:currentColor;
}
.card p:last-child{
  margin:0;
  color:rgba(240,226,200,.7);
}

.pull{
  margin:52px 0 0;
  padding-left:26px;
  border-left:2px solid var(--amber);
  max-width:var(--measure);
  font-size:var(--step-1);
  font-style:italic;
  color:rgba(240,226,200,.88);
}

/* ============================================================= footer === */

.footer{
  border-top:1px solid var(--rule);
  padding:clamp(60px,9vh,100px) var(--pad) clamp(52px,7vh,80px);
  background:
    radial-gradient(ellipse 70% 140% at 50% 120%, rgba(255,120,40,.1), transparent 68%),
    var(--ink);
}
.footer-inner{
  max-width:620px;
  margin-inline:auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.footer .crest{filter:drop-shadow(0 0 18px rgba(255,150,60,.4))}
.footer-title{
  margin:0;
  font-family:"Cinzel",serif;
  font-size:13px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--parchment-dim);
}
.footer-note{
  margin:0 0 12px;
  color:rgba(240,226,200,.55);
  max-width:44ch;
}

/* ============================================================== theme === */
/* Deliberately single-theme: the page is a fire-lit night over artwork that
   only works on a dark ground. This keeps a forced light preference legible
   rather than inverting into an unreadable page. */
:root[data-theme="light"]{
  color-scheme:dark;
}
:root[data-theme="light"] body{
  background:var(--ink);
  color:var(--parchment);
}

@media (max-width:640px){
  .topbar{padding-bottom:14px}
  .nav a{padding:9px 10px}
  .nav .nav-cta{padding:10px 18px}
  /* nowrap keeps the two authored lines intact on wide screens, but on a
     narrow phone it would push past the viewport — let it wrap there. */
  .hero h1{line-height:1.08;text-wrap:wrap}
  .pull{margin-top:40px}
}