/* ==========================================================
   THE LITTLE SORCERER — GRIMOIRE ARTICLES v0.1
   ========================================================== */

.grimoire-page {
  background:
    radial-gradient(circle at 50% 8%, rgba(98,60,121,.14), transparent 30%),
    #08080a;
  color:#d8cebf;
}

.grimoire-main {
  max-width: 1460px;
  margin: 0 auto;
  padding: 112px 5vw 110px;
}

.grimoire-back {
  display:inline-flex;
  gap:10px;
  align-items:center;
  margin: 0 0 32px;
  color:#b79352;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.62rem;
}

.grimoire-hero {
  position:relative;
  min-height:640px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  border:1px solid rgba(198,168,120,.23);
  background:#0d0c10;
  overflow:hidden;
}

.grimoire-hero-image {
  position:relative;
  min-height:640px;
  overflow:hidden;
}

.grimoire-hero-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(1.05) brightness(.78);
  transform:scale(1.01);
}

.grimoire-hero-image::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 58%, #0d0c10 100%),
    linear-gradient(0deg, rgba(6,6,8,.55), transparent 45%);
}

.grimoire-hero-copy {
  position:relative;
  z-index:2;
  padding: clamp(45px,6vw,88px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.grimoire-kicker {
  color:#b99350;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.63rem;
  margin:0 0 17px;
}

.grimoire-hero h1 {
  margin:0;
  max-width:760px;
  color:#f0e6d7;
  font-family:"Libre Caslon Display","Cormorant Garamond",serif;
  font-size:clamp(3.8rem,5.6vw,7rem);
  font-weight:400;
  line-height:.93;
  letter-spacing:-.03em;
  text-transform:none;
}

.grimoire-deck {
  max-width:690px;
  margin:28px 0 0;
  color:#ad9f8e;
  font-family:"Cormorant Garamond",serif;
  font-size:1.35rem;
  line-height:1.6;
}

.grimoire-meta {
  display:flex;
  gap:13px;
  flex-wrap:wrap;
  margin-top:28px;
  color:#776d63;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.56rem;
}

.grimoire-meta span:not(:last-child)::after {
  content:"✦";
  color:#8a6d40;
  margin-left:13px;
}

.rune-corner {
  position:absolute;
  z-index:5;
  width:86px;
  height:86px;
  color:rgba(203,170,104,.62);
  font-family:"Segoe UI Symbol","Noto Sans Runic",serif;
  font-size:1.05rem;
  line-height:1;
  pointer-events:none;
}

.rune-corner::before,
.rune-corner::after {
  content:"";
  position:absolute;
  background:rgba(185,148,82,.46);
}

.rune-corner.tl {top:16px;left:16px;border-top:1px solid rgba(185,148,82,.52);border-left:1px solid rgba(185,148,82,.52)}
.rune-corner.tr {top:16px;right:16px;border-top:1px solid rgba(185,148,82,.52);border-right:1px solid rgba(185,148,82,.52);text-align:right}
.rune-corner.bl {bottom:16px;left:16px;border-bottom:1px solid rgba(185,148,82,.52);border-left:1px solid rgba(185,148,82,.52)}
.rune-corner.br {bottom:16px;right:16px;border-bottom:1px solid rgba(185,148,82,.52);border-right:1px solid rgba(185,148,82,.52);text-align:right}
.rune-corner span {position:absolute;padding:9px}
.rune-corner.tl span{top:0;left:0}
.rune-corner.tr span{top:0;right:0}
.rune-corner.bl span{bottom:0;left:0}
.rune-corner.br span{bottom:0;right:0}

.grimoire-article-shell {
  max-width:1180px;
  margin:72px auto 0;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:clamp(50px,7vw,95px);
  align-items:start;
}

.grimoire-toc {
  position:sticky;
  top:105px;
  padding:22px 0;
  border-top:1px solid rgba(198,168,120,.18);
  border-bottom:1px solid rgba(198,168,120,.18);
}

.grimoire-toc small {
  display:block;
  color:#8c7248;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.56rem;
  margin-bottom:15px;
}

.grimoire-toc a {
  display:block;
  padding:8px 0;
  color:#8e8376;
  font-size:.72rem;
  line-height:1.35;
  border-bottom:1px solid rgba(198,168,120,.07);
}
.grimoire-toc a:last-child{border-bottom:0}
.grimoire-toc a:hover{color:#d1b16e}

.grimoire-prose {
  max-width:800px;
}

.grimoire-prose .lead {
  margin:0 0 42px;
  color:#e0d3c2;
  font-family:"Cormorant Garamond",serif;
  font-size:1.7rem;
  line-height:1.58;
}

.grimoire-prose h2 {
  scroll-margin-top:120px;
  margin:62px 0 18px;
  color:#eadfce;
  font-family:"Libre Caslon Display","Cormorant Garamond",serif;
  font-size:clamp(2.25rem,3.4vw,3.8rem);
  font-weight:400;
  letter-spacing:-.02em;
  text-transform:none;
  line-height:1;
}

.grimoire-prose h3 {
  margin:34px 0 11px;
  color:#d6bd86;
  font-family:"Cormorant Garamond",serif;
  font-size:1.5rem;
}

.grimoire-prose p {
  color:#b2a697;
  line-height:1.9;
  margin:0 0 21px;
}

.grimoire-prose strong {color:#dacdbb}

.grimoire-quote {
  position:relative;
  margin:46px 0;
  padding:30px 36px;
  border-left:1px solid #b38d4e;
  background:
    linear-gradient(90deg,rgba(103,72,131,.12),transparent 70%);
  color:#decdb5;
  font-family:"Cormorant Garamond",serif;
  font-size:1.55rem;
  font-style:italic;
  line-height:1.55;
}

.grimoire-quote::before {
  content:"ᚱ";
  position:absolute;
  top:-13px;
  left:-13px;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  color:#bc9856;
  background:#08080a;
  font-style:normal;
}

.grimoire-note {
  margin:38px 0;
  padding:24px 26px;
  border:1px solid rgba(198,168,120,.20);
  background:rgba(14,13,17,.82);
}

.grimoire-note span {
  display:block;
  margin-bottom:7px;
  color:#b69150;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.56rem;
}

.grimoire-note p {margin:0;color:#9f9385}

.rune-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:8px;
  margin:32px 0 42px;
}

.rune-cell {
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border:1px solid rgba(198,168,120,.17);
  background:#0d0c10;
}

.rune-cell b {
  color:#d3b16d;
  font-family:"Segoe UI Symbol","Noto Sans Runic",serif;
  font-size:1.55rem;
  font-weight:400;
}
.rune-cell small {
  margin-top:6px;
  color:#6f665d;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.48rem;
}

.wheel-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:30px 0 42px;
}

.wheel-day {
  padding:19px 20px;
  border:1px solid rgba(198,168,120,.17);
  background:#0e0d10;
}
.wheel-day strong {
  display:block;
  color:#d7b978;
  font:600 1.3rem "Cormorant Garamond",serif;
  margin-bottom:4px;
}
.wheel-day span {
  color:#867a6d;
  font-size:.68rem;
  line-height:1.45;
}

.article-cta {
  margin-top:70px;
  padding:38px;
  border:1px solid rgba(198,168,120,.22);
  background:
    radial-gradient(circle at 100% 0,rgba(104,70,133,.18),transparent 40%),
    #0d0c10;
}
.article-cta small {
  color:#8f7449;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.56rem;
}
.article-cta h3 {
  margin:8px 0 12px;
  color:#eadfce;
  font-family:"Libre Caslon Display","Cormorant Garamond",serif;
  font-size:2.4rem;
  font-weight:400;
}
.article-cta p {max-width:650px;margin-bottom:20px}

.grimoire-next {
  max-width:1180px;
  margin:85px auto 0;
  padding-top:30px;
  border-top:1px solid rgba(198,168,120,.18);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.grimoire-next a {
  min-height:160px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(198,168,120,.16);
  background:#0d0c10;
  transition:.25s;
}
.grimoire-next a:hover {
  border-color:rgba(198,168,120,.45);
  transform:translateY(-3px);
}
.grimoire-next small {
  color:#806a48;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.52rem;
}
.grimoire-next strong {
  margin-top:8px;
  color:#e0d3c2;
  font:600 1.45rem "Cormorant Garamond",serif;
}

@media(max-width:980px){
  .grimoire-hero{grid-template-columns:1fr}
  .grimoire-hero-image{min-height:460px}
  .grimoire-hero-image::after{background:linear-gradient(0deg,#0d0c10 0%,transparent 50%)}
  .grimoire-article-shell{grid-template-columns:1fr}
  .grimoire-toc{position:relative;top:auto}
}

@media(max-width:640px){
  .grimoire-main{padding:95px 4vw 70px}
  .grimoire-hero-image{min-height:360px}
  .grimoire-hero-copy{padding:34px 24px 42px}
  .rune-grid{grid-template-columns:repeat(4,1fr)}
  .wheel-list{grid-template-columns:1fr}
  .grimoire-next{grid-template-columns:1fr}
  .rune-corner{width:58px;height:58px}
}