@font-face{
  font-family:"Game of Thrones";
  src:url("../fonts/game-of-thrones.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

.got-page{
  --got-title-font:"Game of Thrones", "Cinzel", Georgia, serif;
  --got-ink:#120d0a;
  --got-panel:rgba(24, 19, 15, .82);
  --got-panel-deep:rgba(10, 8, 7, .92);
  --got-card-line:rgba(215, 184, 112, .24);
  --got-gold:#dfc06f;
  --got-gold-soft:#f0dfad;
  --got-cream:#fff3dc;
  --got-muted:rgba(255, 243, 220, .78);
  --got-wine:#52201c;
  --got-green:#4d5834;
  --ray-x:-12vw;
  --ray-y:-76vh;
  --ray-rot:58deg;
  --ray-intensity:.42;
  min-height:100vh;
  padding-top:1.35rem;
  overflow-x:hidden;
  color:var(--got-cream);
  background-color:#0d0907;
  background-image:url("../images/fandom/got/bg-got.webp");
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-family:"EB Garamond", Georgia, serif;
}

.got-wash,
.got-vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.got-wash{
  z-index:0;
  background:
    radial-gradient(760px 520px at 15% 8%, rgba(245, 205, 112, .13), transparent 62%),
    radial-gradient(720px 520px at 28% 86%, rgba(185, 67, 42, .1), transparent 64%),
    radial-gradient(820px 640px at 78% 18%, rgba(79, 67, 50, .2), transparent 68%),
    linear-gradient(180deg, rgba(13, 10, 7, .12), rgba(5, 4, 3, .58));
  mix-blend-mode:multiply;
}

.got-vignette{
  z-index:1;
  background:
    radial-gradient(circle at 42% 28%, transparent 0 48%, rgba(4, 3, 2, .58) 100%),
    linear-gradient(180deg, rgba(9, 6, 4, .06), rgba(9, 6, 4, .34));
}

.got-page .godrays{
  opacity:.26;
  filter:hue-rotate(350deg) saturate(78%);
}

.got-page .firefly{
  background:rgba(244, 228, 173, .86);
  box-shadow:
    0 0 7px rgba(244, 228, 173, .78),
    0 0 18px rgba(232, 199, 114, .45),
    0 0 32px rgba(99, 32, 29, .2);
}

.got-nav,
.got-hero,
.got-shell{
  position:relative;
  z-index:4;
  box-sizing:border-box;
}

.got-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.55rem 1rem;
  max-width:980px;
  margin:0 auto 2.3rem;
  padding:0 3.5rem;
  font-size:1.05rem;
}

.got-nav a{
  margin:0;
  color:var(--got-gold);
  border-bottom:1px dashed rgba(232, 199, 114, .42);
  text-shadow:0 0 12px rgba(99, 32, 29, .32);
}

.got-nav a:hover{
  color:var(--got-cream);
  border-bottom-color:rgba(255, 244, 221, .72);
}

.got-moon{
  position:fixed;
  left:clamp(.85rem, 2.6vw, 2rem);
  top:clamp(.85rem, 2.6vw, 2rem);
  width:42px;
  height:42px;
  color:var(--got-gold);
  z-index:6;
  opacity:.95;
  animation:none;
  transform:none;
  filter:
    drop-shadow(0 0 8px rgba(232, 199, 114, .56))
    drop-shadow(0 0 18px rgba(99, 32, 29, .34));
}

.got-moon svg{
  width:100%;
  height:100%;
  display:block;
}

.got-hero{
  max-width:1120px;
  margin:0 auto 1.2rem;
  padding:0 1rem;
}

.got-page .eyebrow,
.card-kicker{
  margin:0 0 .4rem;
  color:var(--got-gold);
  font-family:"Cinzel", Georgia, serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(232, 199, 114, .3);
}

.got-hero h1{
  margin:0 0 .75rem;
  color:var(--got-cream);
  font-family:var(--got-title-font);
  font-size:clamp(2.45rem, 6.4vw, 4.8rem);
  line-height:.95;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:
    0 1px 0 rgba(40, 22, 10, .96),
    0 2px 0 rgba(108, 79, 35, .54),
    0 0 14px rgba(223, 192, 111, .32),
    0 8px 24px rgba(0,0,0,.76);
}

.hero-copy{
  max-width:68rem;
  margin:0;
  color:rgba(255, 244, 221, .92);
  font-size:clamp(1.16rem, 2.2vw, 1.5rem);
  line-height:1.28;
  text-shadow:0 2px 12px rgba(0,0,0,.76);
}

.got-shell{
  max-width:1120px;
  margin:0 auto 4rem;
  padding:0 1rem;
}

.got-lede{
  margin:0 0 1rem;
  padding:1rem 1.1rem;
  border:1px solid var(--got-card-line);
  border-radius:10px;
  background:
    radial-gradient(520px 240px at 4% 0%, rgba(223, 192, 111, .1), transparent 70%),
    linear-gradient(180deg, rgba(24, 19, 15, .78), rgba(10, 8, 7, .86));
  box-shadow:
    0 16px 36px rgba(0,0,0,.3),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.got-lede p{
  margin:0;
  color:rgba(255, 244, 221, .9);
  font-size:1.15rem;
  line-height:1.45;
}

.quote-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.75rem;
  margin:0 0 1rem;
}

.quote-strip figure,
.book-quote{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--got-gold-soft);
  border:1px solid rgba(223, 192, 111, .24);
  background:
    radial-gradient(220px 110px at 12% 0%, rgba(223, 192, 111, .12), transparent 72%),
    linear-gradient(180deg, rgba(39, 29, 19, .74), rgba(13, 10, 8, .78));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.22);
}

.quote-strip figure{
  min-height:8.4rem;
  padding:.9rem .95rem;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.quote-strip figure::before,
.book-quote::before{
  content:"";
  position:absolute;
  inset:.42rem;
  pointer-events:none;
  border:1px solid rgba(223, 192, 111, .1);
  border-radius:7px;
}

.quote-strip blockquote,
.book-quote blockquote{
  margin:0;
  color:var(--got-cream);
  font-size:clamp(1.05rem, 1.7vw, 1.28rem);
  line-height:1.18;
  font-style:italic;
  text-shadow:0 2px 12px rgba(0,0,0,.62);
}

.quote-strip figcaption,
.book-quote figcaption{
  margin:.65rem 0 0;
  color:rgba(232, 199, 114, .86);
  font-family:"Cinzel", Georgia, serif;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.got-grid{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.got-card{
  position:relative;
  width:100%;
  min-height:18rem;
  padding:1rem;
  overflow:hidden;
  scroll-margin-top:1rem;
  border:1px solid var(--got-card-line);
  border-radius:10px;
  background:
    radial-gradient(560px 280px at 94% 0%, rgba(223, 192, 111, .08), transparent 62%),
    linear-gradient(180deg, var(--got-panel), var(--got-panel-deep));
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.035);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.got-card::before{
  content:"";
  position:absolute;
  inset:.46rem;
  pointer-events:none;
  border:1px solid rgba(223, 192, 111, .1);
  border-radius:7px;
}

.got-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(223, 192, 111, .42), transparent);
}

.got-card:hover,
.got-card:focus-within{
  transform:translateY(-2px);
  border-color:rgba(223, 192, 111, .4);
  box-shadow:
    0 18px 42px rgba(0,0,0,.4),
    0 0 18px rgba(223, 192, 111, .1),
    inset 0 0 0 1px rgba(255,255,255,.055);
}

.got-card--legacy{
  min-height:16rem;
  background:
    radial-gradient(620px 340px at 100% 0%, rgba(223, 192, 111, .12), transparent 64%),
    linear-gradient(180deg, rgba(28, 24, 19, .84), rgba(10, 8, 7, .94));
}

.got-card--dorne{
  --got-card-line:rgba(232, 199, 114, .3);
}

.got-card--stag{
  --got-card-line:rgba(190, 198, 204, .24);
}

.got-card--littlefinger{
  background:
    radial-gradient(620px 340px at 100% 0%, rgba(122, 138, 152, .12), transparent 64%),
    linear-gradient(180deg, rgba(16, 19, 22, .84), rgba(7, 7, 8, .94));
}

.got-card--schemes{
  min-height:0;
}

.got-split{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(260px, .58fr) minmax(0, 1fr);
  gap:1rem;
  align-items:start;
}

.got-split--reverse{
  grid-template-columns:minmax(0, 1fr) minmax(260px, .48fr);
}

.got-copy{
  position:relative;
  z-index:1;
}

.got-copy > :first-child{
  margin-top:0;
}

.got-art{
  position:relative;
  z-index:1;
  display:grid;
  gap:.55rem;
  margin:.15rem 0 .85rem;
  border-radius:14px;
}

.got-art img{
  display:block;
  width:100%;
  min-width:0;
  height:auto;
  max-height:420px;
  object-fit:cover;
  object-position:center center;
  border:1px solid rgba(223, 192, 111, .2);
  border-radius:8px;
  background:none;
  box-shadow:
    0 12px 26px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.04);
  filter:saturate(.98) contrast(1.03) brightness(.98);
}

.got-art--duo,
.got-art--legacy,
.got-art--stag{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-items:center;
}

.got-art--duo img,
.got-art--stag img{
  width:100%;
  height:clamp(240px, 28vw, 340px);
}

.got-art--duo img:first-child{
  object-position:50% 32%;
}

.got-art--duo img:last-child{
  object-position:50% 38%;
}

.got-art--legacy{
  grid-template-columns:minmax(180px, .58fr) minmax(0, 1.42fr);
}

.got-art--legacy img{
  width:100%;
  height:clamp(230px, 24vw, 320px);
}

.got-art--legacy img:first-child{
  object-position:50% 22%;
}

.got-art--legacy img:last-child{
  object-position:50% 45%;
}

.got-art--wide img{
  width:100%;
  height:clamp(250px, 26vw, 380px);
  max-height:none;
  object-fit:cover;
}

.got-art--baratheon{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:0;
  overflow:hidden;
  border:1px solid rgba(223, 192, 111, .2);
  border-radius:8px;
  box-shadow:0 12px 26px rgba(0,0,0,.34);
}

.got-art--baratheon{
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:10px;
  margin:clamp(14px, 1.8vw, 24px) 0;
}

.got-art--baratheon img{
  display:block;
  width:100%;
  height:clamp(260px, 32vw, 430px);
  max-height:none;

  object-fit:cover;
  object-position:50% 50%;

  border:0;
  border-radius:inherit;
  box-shadow:none;

  filter:saturate(.86) contrast(1.04) brightness(.98);
}

.got-art--portrait{
  width:min(100%, 22rem);
  margin:.15rem auto .85rem;
}

.got-art--portrait img{
  width:100%;
  height:clamp(280px, 34vw, 410px);
  max-height:none;
  object-fit:cover;
}

.got-art--triptych{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:center;
}

.got-art--triptych img{
  width:100%;
  height:clamp(220px, 24vw, 320px);
  object-position:50% 25%;
}

.got-art--triptych img:nth-child(1){
  object-position:50% 14%;
}

.got-art--triptych img:nth-child(2){
  object-position:50% 18%;
}

.got-art--triptych img:nth-child(3){
  object-position:50% 18%;
}

.got-art--side{
  margin:.05rem 0 0;
}

.got-art--side img{
  height:clamp(300px, 32vw, 430px);
  max-height:none;
  object-position:50% 30%;
}

.got-split--bloodline .got-art--side img{
  object-position:50% 40%;
}

/* Bloodline card: stack the three side images evenly */
.got-split--bloodline .got-art--side{
  height:100%;
  align-self:stretch;

  display:flex;
  flex-direction:column;
  justify-content:space-evenly; /* equal space above, between, and below */
  gap:clamp(10px, 1.4vw, 18px);

  margin:0;
}

/* Keep the images the same size/shape, but let the container place them */
.got-split--bloodline .got-art--side img{
  width:100%;
  height:clamp(180px, 18vw, 250px);
  object-fit:cover;
  object-position:50% 40%;
  border-radius:10px;
}

/* --- BLOODLINE CARD: distribute images vertically --- */
.got-split--bloodline{
  display:grid;
  grid-template-columns:minmax(260px, 38%) minmax(0, 1fr);
  gap:clamp(18px, 2vw, 30px);
  align-items:stretch; /* important: lets the left image column match the text column */
}

/* Left image column: first image at top, last image at bottom */
.got-split--bloodline .got-art--side{
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* moves leftover space between images */
  gap:clamp(18px, 2vw, 32px);

  margin:0;
  min-height:0;
  align-self:stretch;
}

/* Images: keep exact ratio, no crop */
.got-split--bloodline .got-art--side img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;

  object-fit:contain;
  object-position:50% 50%;

  border-radius:10px;
}

/* Right text column */
.got-split--bloodline .got-copy{
  display:block;
  min-height:0;
  align-self:start;
}

.got-split--littlefinger .got-art--side img{
  height:clamp(300px, 34vw, 420px);
  object-position:50% 18%;
}

.got-split--schemes{
  grid-template-columns:minmax(280px, .78fr) minmax(260px, .95fr);
  align-items:stretch;
  gap:clamp(.9rem, 2vw, 1.35rem);
  margin:.3rem 0 .95rem;
}

.got-split--schemes .got-art--contain{
  align-self:stretch;
  margin:0;
}

.got-split--schemes .got-art--contain img{
  width:100%;
  height:100%;
  min-height:clamp(230px, 22vw, 320px);
  object-fit:cover;
  object-position:50% 46%;
}

.book-quote--schemes{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:none;
  min-height:clamp(230px, 22vw, 320px);
  margin:0;
}

.got-copy--schemes{
  max-width:74rem;
}

.got-copy--schemes p:first-child{
  margin-top:0;
}

.got-art--olenna{
  grid-template-columns:minmax(220px, .68fr) minmax(0, 1fr);
}

.got-art--olenna img{
  height:clamp(260px, 28vw, 360px);
  max-height:none;
}

.got-art--olenna img:first-child{
  object-position:50% 18%;
}

.got-art--olenna img:last-child{
  object-position:50% 44%;
}

.lineage-list{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.65rem;
  margin:.85rem 0;
}

.lineage-list section{
  padding:.75rem;
  border:1px solid rgba(223, 192, 111, .16);
  border-radius:8px;
  background:
    radial-gradient(180px 120px at 0% 0%, rgba(223, 192, 111, .1), transparent 70%),
    rgba(255,255,255,.035);
}

.lineage-list h3{
  margin:0 0 .35rem;
  color:var(--got-gold);
  font-family:"Cinzel", Georgia, serif;
  font-size:.92rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.lineage-list p{
  margin:0;
  font-size:1rem;
  line-height:1.32;
}

.book-quote{
  max-width:34rem;
  margin:.2rem 0 .75rem;
  padding:.78rem .9rem;
  border-radius:12px;
}

.book-quote--right{
  margin-left:auto;
}

.got-card h2{
  position:relative;
  z-index:1;
  margin:0 0 .65rem;
  color:var(--got-cream);
  font-family:var(--got-title-font);
  font-size:clamp(1.28rem, 2.05vw, 1.62rem);
  line-height:1.18;
  letter-spacing:.035em;
  word-spacing:.16em;
  text-transform:uppercase;
  text-wrap:balance;
  text-shadow:
    0 0 10px rgba(232, 199, 114, .24),
    0 3px 16px rgba(0,0,0,.64);
}

.got-card h2 .fandom-character-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dashed rgba(223, 192, 111, .38);
}

.got-card h2 .fandom-character-link:hover,
.got-card h2 .fandom-character-link:focus-visible{
  color:var(--got-gold-soft);
  border-bottom-color:var(--got-gold-soft);
}

.got-card p{
  position:relative;
  z-index:1;
  margin:.55rem 0 0;
  color:rgba(255, 244, 221, .9);
  font-size:1.12rem;
  line-height:1.42;
}

.got-card em{
  color:var(--got-gold-soft);
}

body.night.got-page .got-wash{
  background:
    radial-gradient(920px 700px at 22% 10%, rgba(144, 163, 186, .14), transparent 64%),
    radial-gradient(820px 640px at 80% 12%, rgba(59, 44, 78, .22), transparent 62%),
    linear-gradient(180deg, rgba(4, 5, 8, .55), rgba(2, 3, 5, .82));
}

body.night.got-page .godrays{
  opacity:.12;
  filter:hue-rotate(195deg) saturate(70%);
}

body.night.got-page .got-card,
body.night.got-page .got-lede{
  background-color:rgba(8, 8, 12, .78);
  border-color:rgba(196, 210, 232, .2);
}

@media (max-width:760px){
  .got-page{
    padding-top:.85rem;
    background-attachment:scroll;
  }

  .got-nav{
    gap:.45rem .75rem;
    margin-bottom:1.8rem;
    padding:0 3.25rem;
    font-size:1rem;
  }

  .got-moon{
    position:absolute;
    left:.85rem;
    top:.7rem;
    width:34px;
    height:34px;
  }

  .got-hero{
    text-align:center;
    margin-bottom:1rem;
  }

  .got-grid{
    display:flex;
  }

  .quote-strip{
    grid-template-columns:1fr;
  }

  .quote-strip figure{
    min-height:0;
  }

  .got-art--duo,
  .got-art--legacy,
  .got-art--stag,
  .got-art--baratheon,
  .got-art--olenna,
  .got-art--triptych,
  .got-split,
  .got-split--reverse,
  .lineage-list{
    grid-template-columns:1fr;
  }

  .got-split{
    gap:.75rem;
  }

  .got-split--schemes .got-art--contain{
    float:none;
    width:100%;
    margin:.05rem 0 .85rem;
  }

  .got-art--legacy img:last-child,
  .got-art--wide img{
    max-height:none;
  }

  .got-art--baratheon{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .got-art--baratheon img{
    height:clamp(230px, 62vw, 330px);
  }

  .got-art--portrait{
    float:none;
    width:100%;
    max-width:18rem;
    margin:.15rem auto .85rem;
  }
}

@media (pointer:coarse), (max-width:680px){
  .got-page .firefly:nth-child(n+6){
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .got-page .firefly,
  .got-page .godrays,
  .got-page .godrays::after{
    animation:none !important;
  }
}