/* Bloody Wyverian - core styles */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/barlow-condensed-500.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700.ttf") format("truetype");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-400.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-500.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-600.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-700.ttf") format("truetype");
}

:root{
--ink:#0b0b0c;
--paper:#e8e1d4;
--muted:#9d9992;
--red:#e9442f;
--line:rgba(232,225,212,.16)}
*{
box-sizing:border-box}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:"DM Sans",sans-serif;
overflow-x:hidden}
.grain{
position:fixed;
z-index:20;
inset:0;
pointer-events:none;
opacity:.08;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.cursor-glow{
position:fixed;
width:480px;
height:480px;
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle,rgba(203,48,31,.12),transparent 67%);
transform:translate(-50%,-50%);
z-index:0}
.site-header{
height:82px;
padding:0 6vw;
position:absolute;
z-index:10;
top:0;
width:100%;
display:flex;
align-items:center;
gap:40px;
border-bottom:1px solid var(--line);
transition:.3s}
.site-header.scrolled{
position:fixed;
background:rgba(11,11,12,.78);
backdrop-filter:blur(15px);
height:68px}
.brand{
font-family:"Barlow Condensed",sans-serif;
font-weight:800;
font-size:20px;
letter-spacing:1px;
text-decoration:none;
color:var(--paper);
display:flex;
align-items:center;
line-height:.8;
white-space:nowrap}
.brand em{
font-style:normal;
color:var(--red)}
.main-nav{
display:flex;
gap:26px;
margin:auto}
.main-nav a,.header-cta,footer a{
color:var(--paper);
text-decoration:none;
font-size:12px;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase}
.main-nav a{
color:#bbb7b0;
position:relative}
.main-nav a:hover,.main-nav .active{
color:var(--paper)}
.main-nav .active:after{
content:"";
height:2px;
width:15px;
bottom:-10px;
left:0;
position:absolute;
background:var(--red)}
.header-cta{
display:flex;
gap:12px;
align-items:center}
.header-cta b{
font-size:18px;
color:var(--red)}
.menu-button{
display:none}
.hero{
height:min(825px,100vh);
min-height:700px;
padding:190px 8vw 80px;
position:relative;
isolation:isolate;
overflow:hidden;
background:radial-gradient(ellipse at 80% 43%,#462019 0%,#1c1413 26%,#0b0b0c 64%)}
.hero:after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(90deg,rgba(11,11,12,.45),transparent 65%),linear-gradient(0deg,#0b0b0c,transparent 20%)}
.hero-copy{
max-width:670px;
position:relative;
z-index:2}
.eyebrow{
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
font-weight:700;
color:#c5bfb5;
margin:0 0 17px;
display:flex;
align-items:center;
gap:10px}
.eyebrow span{
width:27px;
height:1px;
background:var(--red)}
h1,h2,h3{
font-family:"Barlow Condensed",sans-serif;
text-transform:uppercase;
margin:0;
font-weight:800}
h1{
font-size:clamp(68px,9vw,136px);
line-height:.78;
letter-spacing:-.035em}
h1 em,h2 em{
font-style:normal;
color:var(--red)}
h1 span{
font-size:.58em;
letter-spacing:.02em}
.hero-text{
font-size:16px;
line-height:1.65;
color:#c1bcb5;
max-width:430px;
margin:30px 0}
.hero-actions{
display:flex;
gap:14px}
.button{
display:inline-flex;
align-items:center;
gap:10px;
text-transform:uppercase;
letter-spacing:.1em;
font-size:11px;
font-weight:700;
text-decoration:none;
padding:16px 20px;
transition:.25s}
.button-primary{
color:white;
background:var(--red);
box-shadow:0 10px 30px rgba(212,54,37,.19)}
.button-primary:hover{
transform:translateY(-3px);
box-shadow:0 13px 35px rgba(212,54,37,.35)}
.button-ghost{
color:#d6d0c7;
border:1px solid var(--line)}
.button-ghost:hover{
border-color:var(--red);
color:var(--red)}
.play{
font-size:9px}
.hero-art{
position:absolute;
inset:0 0 0 42%;
z-index:1;
overflow:hidden}
.moon{
position:absolute;
width:450px;
height:450px;
border-radius:50%;
right:12%;
top:11%;
background:radial-gradient(circle at 35% 32%,#e5b89b,#a74e38 55%,#59271f 70%);
opacity:.85;
filter:blur(.3px)}
.mountain{
position:absolute;
bottom:0;
clip-path:polygon(0 100%,0 72%,16% 50%,30% 68%,50% 18%,67% 59%,82% 33%,100% 64%,100% 100%)}
.mountain-back{
background:#211716;
width:125%;
height:58%;
right:-5%;
opacity:.9}
.mountain-front{
background:#120f10;
width:115%;
height:42%;
right:-5%;
filter:drop-shadow(0 -13px 17px rgba(209,52,35,.15))}
.wyvern{
position:absolute;
top:30%;
right:24%;
width:270px;
height:150px;
filter:drop-shadow(0 15px 16px #120708);
animation:soar 7s ease-in-out infinite}
.wyvern span{
position:absolute;
display:block;
background:#130d0d}
.wing{
width:130px;
height:72px;
top:5px}
.wing.left{
left:14px;
clip-path:polygon(100% 30%,82% 14%,46% 0,12% 40%,0 100%,52% 61%)}
.wing.right{
right:15px;
clip-path:polygon(0 30%,18% 14%,54% 0,88% 40%,100% 100%,48% 61%)}
.body{
height:65px;
width:20px;
left:125px;
top:35px;
transform:rotate(18deg);
border-radius:50%}
.tail{
width:105px;
height:15px;
top:75px;
left:62px;
transform:rotate(20deg);
clip-path:polygon(0 35%,100% 0,84% 60%,23% 100%)}
.embers i{
position:absolute;
width:4px;
height:4px;
background:#f2643b;
box-shadow:0 0 12px #ff6138;
animation:ember 4s linear infinite}
.embers i:nth-child(1){
left:61%;
bottom:23%}
.embers i:nth-child(2){
left:80%;
bottom:18%;
animation-delay:1s}
.embers i:nth-child(3){
left:48%;
bottom:32%;
animation-delay:2s}
.embers i:nth-child(4){
left:74%;
bottom:44%;
animation-delay:2.7s}
.embers i:nth-child(5){
left:91%;
bottom:30%;
animation-delay:.7s}
.embers i:nth-child(6){
left:57%;
bottom:13%;
animation-delay:3.3s}
.rune{
position:absolute;
color:rgba(235,201,168,.4);
font-size:28px;
z-index:2;
animation:float 5s ease-in-out infinite}
.rune-one{
right:8%;
top:25%}
.rune-two{
right:44%;
top:17%;
animation-delay:1s}
.rune-three{
right:21%;
bottom:28%;
animation-delay:2.5s}
.hero-haze{
position:absolute;
filter:blur(45px);
border-radius:50%;
opacity:.4}
.haze-one{
background:#cf3929;
width:420px;
height:90px;
right:-70px;
bottom:18%;
transform:rotate(-15deg)}
.haze-two{
background:#c3a391;
width:260px;
height:40px;
right:17%;
bottom:13%}
.scroll-cue{
position:absolute;
bottom:25px;
left:8vw;
color:#9f9991;
text-decoration:none;
text-transform:uppercase;
font-size:9px;
letter-spacing:.15em;
display:flex;
align-items:center;
gap:10px;
z-index:3}
.scroll-cue span{
width:42px;
height:1px;
background:var(--red)}
.stats-wrap{
padding:0 8vw;
position:relative;
z-index:3}
.stats{
background:#171617;
margin-top:-38px;
position:relative;
display:grid;
grid-template-columns:repeat(3,1fr);
padding:25px 7%;
border-top:2px solid var(--red)}
.stats div{
padding:0 10%;
border-left:1px solid var(--line)}
.stats div:first-child{
border:0}
.stats strong{
font-family:"Barlow Condensed";
font-size:42px;
letter-spacing:-.02em;
display:block;
line-height:1}
.stats strong span{
color:var(--red)}
.stats small{
font-size:9px;
font-weight:bold;
letter-spacing:.12em;
color:var(--muted)}
.content-section{
padding:140px 8vw}
.section-heading{
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:46px}
.section-heading h2,.journal-intro h2,.about-section h2{
font-size:clamp(46px,5vw,72px);
line-height:.85;
letter-spacing:-.025em}
.text-link{
font-size:11px;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--paper);
text-decoration:none;
border-bottom:1px solid var(--red);
padding-bottom:7px}
.text-link b{
color:var(--red);
font-size:17px;
margin-left:5px}
.video-grid{
display:grid;
grid-template-columns:1.45fr 1fr 1fr;
gap:17px}
.video-card{
background:#171617;
transition:.3s}
.video-card:hover{
transform:translateY(-7px);
background:#1c1b1a}
.card-image{
height:210px;
position:relative;
overflow:hidden;
background-color:#30221e}
.featured .card-image{
height:270px}
.card-image:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(145deg,transparent,rgba(5,5,5,.62)),repeating-linear-gradient(112deg,transparent 0 21px,rgba(255,255,255,.04) 22px 23px)}
.tag,.duration{
position:absolute;
font-size:9px;
font-weight:bold;
letter-spacing:.1em;
padding:5px 7px}
.tag{
top:13px;
left:13px;
background:var(--red);
color:#fff}
.duration{
bottom:12px;
right:12px;
background:#111;
color:#ddd}
.card-play{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border:1px solid rgba(255,255,255,.5);
width:43px;
height:43px;
border-radius:50%;
display:grid;
place-items:center;
padding-left:2px;
font-size:11px;
color:#fff;
transition:.2s}
.video-card:hover .card-play{
background:var(--red);
border-color:var(--red)}
.card-content{
padding:22px 22px 24px}
.meta{
font-size:9px;
font-weight:bold;
letter-spacing:.14em;
color:var(--red);
margin:0 0 10px}
.card-content h3{
font-size:25px;
line-height:.95;
letter-spacing:-.01em}
.card-content p:not(.meta){
font-size:12px;
color:var(--muted);
line-height:1.55}
.card-content a{
font-size:10px;
text-transform:uppercase;
letter-spacing:.1em;
text-decoration:none;
color:#d7d0c6}
.card-content a b{
color:var(--red);
font-size:16px;
margin-left:6px}
.journal-section{
min-height:650px;
padding:115px 8vw;
display:grid;
grid-template-columns:.75fr 1.25fr;
gap:8vw;
align-items:center;
background:#d6cec0;
color:#151313;
position:relative;
overflow:hidden}
.journal-section:before{
content:"";
position:absolute;
inset:0;
opacity:.16;
background-image:repeating-linear-gradient(90deg,transparent 0 37px,#685e51 38px 39px),repeating-linear-gradient(0deg,transparent 0 37px,#685e51 38px 39px)}
.journal-intro,.journal-cards{
position:relative}
.journal-intro .eyebrow{
color:#4f433c}
.journal-intro p:not(.eyebrow){
font-size:15px;
line-height:1.65;
max-width:380px;
color:#5d554e;
margin:28px 0}
.journal-cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px}
.journal-card{
background:#201e1e;
color:#e8e1d4;
min-height:195px;
padding:25px;
display:flex;
flex-direction:column;
text-decoration:none;
position:relative;
overflow:hidden;
transition:.3s}
.journal-card:hover{
transform:translateY(-6px);
background:#2b2524}
.journal-card.large{
grid-row:span 2;
min-height:405px;
background:#4d2521;
justify-content:flex-end}
.journal-card.large:before{
content:"";
position:absolute;
width:220px;
height:220px;
border:1px solid rgba(230,200,170,.2);
border-radius:50%;
top:35px;
left:50%;
transform:translateX(-50%)}
.journal-icon{
font-family:"Barlow Condensed";
font-size:60px;
color:#df4932;
position:relative}
.journal-card small{
font-size:9px;
letter-spacing:.16em;
font-weight:bold;
color:#c2b6a8;
margin-top:auto}
.journal-card strong{
font-family:"Barlow Condensed";
font-size:27px;
text-transform:uppercase;
line-height:.9;
max-width:160px}
.journal-card b{
position:absolute;
right:20px;
bottom:19px;
font-size:20px;
color:var(--red)}
.community-section{
text-align:center;
padding:135px 20px;
background:radial-gradient(circle at 50% 55%,#48221f,#1b1213 46%,#0b0b0c 75%);
position:relative;
overflow:hidden}
.community-section:before{
content:"";
position:absolute;
width:550px;
height:550px;
border:1px solid rgba(241,99,70,.22);
border-radius:50%;
left:50%;
top:50%;
transform:translate(-50%,-50%)}
.community-section>*{
position:relative}
.community-section .eyebrow{
justify-content:center}
.community-section h2{
font-size:clamp(60px,8vw,115px);
line-height:.78;
letter-spacing:-.03em}
.community-section p:not(.eyebrow){
max-width:420px;
margin:25px auto;
color:#c1bbb2;
font-size:15px;
line-height:1.6}
.community-symbol{
font-size:30px;
color:var(--red);
margin-bottom:20px}
.button-light{
background:var(--paper);
color:#1b1817}
.about-section{
padding:120px 20vw;
background:#0b0b0c;
text-align:center}
.about-section .eyebrow{
justify-content:center}
.about-section p:not(.eyebrow){
max-width:570px;
margin:28px auto 0;
color:var(--muted);
line-height:1.75;
font-size:15px}
footer{
border-top:1px solid var(--line);
padding:38px 6vw;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px}
footer p{
color:#77726d;
font-size:10px;
letter-spacing:.06em}
footer div{
display:flex;
gap:18px}
footer a{
font-size:9px;
color:#aaa49c}
@keyframes ember{
to{
transform:translate(80px,-170px);
opacity:0}
}
@keyframes float{
50%{
transform:translateY(-11px);
opacity:.2}
}
@keyframes soar{
50%{
transform:translate(-16px,-7px) rotate(-2deg)}
}

/* Inhalte und Bildmaterial des Bloody-Wyverian-Kanals */
.channel-logo {
  width: 34px;
  height: 34px;
  margin-right: 10px;
  object-fit: cover;
  border: 1px solid rgba(232, 225, 212, 0.35);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(228, 68, 47, 0.14);
}

.card-image {
  display: block;
  text-decoration: none;
}

.card-image::before,
.card-image .tag,
.card-image .duration,
.card-image .card-play {
  z-index: 1;
}

.card-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.video-card:hover .card-image > img {
  transform: scale(1.05);
}







.affiliate-card {
  position: relative;
  min-height: 292px;
  padding: 29px;
  overflow: hidden;
  background: #1a1818;
  border: 1px solid rgba(232, 225, 212, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.affiliate-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.affiliate-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 225, 212, 0.2);
  background: #211d1d;
}

.affiliate-card:hover::before {
  transform: scaleX(1);
}



.affiliate-number {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  color: rgba(232, 225, 212, 0.1);
}

.affiliate-card h3 {
  max-width: 245px;
  font-size: 33px;
  line-height: 0.9;
}

.affiliate-card > p:not(.meta) {
  max-width: 310px;
  margin: 17px 0 25px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.affiliate-card a {
  position: absolute;
  bottom: 25px;
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.affiliate-card a b {
  margin-left: 6px;
  color: var(--red);
  font-size: 16px;
}

.setup-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  gap: 8vw;
  padding: 130px 8vw;
  background: #d6cec0;
  color: #171313;
}

.setup-copy .eyebrow {
  color: #4f433c;
}

.setup-copy h2 {
  max-width: 440px;
  font-size: clamp(50px, 5vw, 78px);
  line-height: 0.84;
}

.setup-lead {
  max-width: 390px;
  margin: 25px 0;
  color: #5d554e;
  line-height: 1.65;
}

.affiliate-disclosure {
  max-width: 420px;
  padding-top: 19px;
  border-top: 1px solid rgba(47, 35, 30, 0.25);
}

.affiliate-disclosure p {
  margin: 0 0 14px;
  color: #5d554e;
  font-size: 12px;
  line-height: 1.6;
}

.affiliate-links {
  display: grid;
  gap: 12px;
  align-content: center;
}

.affiliate-card {
  min-height: 164px;
  padding: 24px 27px;
  background: #242020;
}

.affiliate-card h3 {
  font-size: 29px;
}

.affiliate-card > p:not(.meta) {
  margin: 9px 0 0;
  padding-right: 130px;
}

.affiliate-pending {
  position: absolute;
  right: 25px;
  bottom: 25px;
  color: #bdb5aa;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}





.hunter-hub {
  padding: 105px 8vw 125px;
  background: #171516;
}

.hub-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.hub-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #aba49a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.hub-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e9442f;
  box-shadow: 0 0 10px rgba(233, 68, 47, 0.9);
}

.hub-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 45px;
}

.hub-heading h2 {
  font-size: clamp(48px, 6.5vw, 88px);
  line-height: 0.8;
}

.hub-heading > p {
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(320px, 0.66fr);
  gap: 17px;
}

.event-feature {
  position: relative;
  display: flex;
  min-height: 400px;
  padding: 48px;
  overflow: hidden;
  background: radial-gradient(circle at 80% 38%, #6a2920 0%, #351b1b 25%, #1b1717 61%);
  border: 1px solid rgba(232, 225, 212, 0.13);
}

.event-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(130deg, transparent 0 58%, rgba(255, 255, 255, 0.04) 58% 58.2%, transparent 58.2% 100%);
  pointer-events: none;
}

.event-feature-copy {
  position: relative;
  z-index: 1;
  max-width: 405px;
}

.event-feature h3 {
  margin: 12px 0 17px;
  font-size: clamp(42px, 5vw, 67px);
  line-height: 0.79;
}

.event-feature-copy > p:not(.meta) {
  max-width: 380px;
  margin: 0 0 25px;
  color: #c8beb2;
  font-size: 13px;
  line-height: 1.65;
}

.event-radar {
  position: absolute;
  right: 6%;
  bottom: -92px;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(232, 225, 212, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(232, 225, 212, 0.04), 0 0 0 58px rgba(232, 225, 212, 0.025);
}

.event-radar::before,
.event-radar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 100%;
  background: rgba(232, 225, 212, 0.16);
  transform: translate(-50%, -50%);
}

.event-radar::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.event-radar span,
.event-radar strong {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.event-radar span {
  top: 90px;
  color: #d9d0c6;
  font-size: 13px;
}

.event-radar strong {
  top: 106px;
  color: var(--red);
  font-size: 31px;
}

.event-radar i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px var(--red);
}

.event-radar i:nth-of-type(1) { top: 29px; left: 72px; }
.event-radar i:nth-of-type(2) { top: 76px; right: 23px; }
.event-radar i:nth-of-type(3) { bottom: 40px; left: 47px; }

.hub-links {
  display: grid;
  gap: 12px;
}

.hub-link {
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 25px 22px;
  color: var(--paper);
  text-decoration: none;
  background: #201d1d;
  border: 1px solid rgba(232, 225, 212, 0.09);
  transition: 0.25s ease;
}

.hub-link:hover {
  transform: translateX(5px);
  background: #292222;
  border-color: rgba(232, 225, 212, 0.22);
}

.hub-icon {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: var(--red);
  font-size: 19px;
  border: 1px solid rgba(233, 68, 47, 0.38);
  border-radius: 50%;
}

.hub-link small {
  display: block;
  margin-bottom: 4px;
  color: var(--red);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.hub-link strong {
  display: block;
  font-family: "Barlow Condensed", sans-serif;
  font-size: 23px;
  line-height: 0.92;
  text-transform: uppercase;
}

.hub-link > b {
  color: var(--red);
  font-size: 21px;
}





.single-journal .journal-card.large {
  grid-column: 1 / -1;
}

.single-journal .journal-card.large > p {
  max-width: 245px;
  margin: 14px 0 0;
  color: #c9bdb0;
  font-size: 12px;
  line-height: 1.55;
}

body.subpage .site-header,
body.subpage .site-header.scrolled {
  position: sticky;
  top: 0;
  background: #111011;
}

.workshop-hero {
  position: relative;
  min-height: 560px;
  padding: 135px 8vw 100px;
  overflow: hidden;
  background: radial-gradient(ellipse at 78% 44%, #4d241f 0%, #251817 33%, #111011 67%);
}

.workshop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(17, 16, 17, 0.4), transparent 69%), linear-gradient(0deg, #111011, transparent 30%);
}

.workshop-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.workshop-hero h1 {
  font-size: clamp(70px, 10vw, 142px);
}

.workshop-hero-copy > p:not(.eyebrow) {
  max-width: 470px;
  margin: 30px 0;
  color: #c5bdb4;
  font-size: 16px;
  line-height: 1.65;
}

.workshop-sigil {
  position: absolute;
  right: 12vw;
  top: 105px;
  display: grid;
  width: 330px;
  height: 330px;
  place-items: center;
  border: 1px solid rgba(232, 225, 212, 0.17);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(232, 225, 212, 0.035), 0 0 0 74px rgba(232, 225, 212, 0.022);
}

.workshop-sigil::before,
.workshop-sigil::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background: rgba(232, 225, 212, 0.16);
}

.workshop-sigil::after {
  transform: rotate(90deg);
}

.workshop-sigil span {
  color: var(--red);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 123px;
  font-weight: 800;
  letter-spacing: -0.09em;
}

.workshop-content {
  padding: 125px 8vw;
  background: #111011;
}

.guide-feature {
  display: grid;
  grid-template-columns: minmax(290px, 0.95fr) minmax(290px, 1.05fr);
  overflow: hidden;
  background: #1a1818;
  border: 1px solid rgba(232, 225, 212, 0.1);
}

.guide-thumbnail {
  position: relative;
  display: block;
  min-height: 385px;
  overflow: hidden;
  background: #2b2020;
}

.guide-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(13, 12, 12, 0.68));
}

.guide-thumbnail img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.guide-thumbnail:hover img {
  transform: scale(1.05);
}

.guide-thumbnail .card-play,
.guide-thumbnail .duration {
  z-index: 1;
}

.guide-copy {
  padding: 53px;
}

.guide-copy h3 {
  margin: 12px 0 18px;
  font-size: clamp(43px, 4.7vw, 65px);
  line-height: 0.8;
}

.guide-copy > p:not(.meta) {
  max-width: 400px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.build-lab {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 9vw;
  padding: 120px 8vw;
  color: #181313;
  background: #d6cec0;
}

.build-lab .eyebrow {
  color: #574941;
}

.build-lab h2 {
  font-size: clamp(52px, 6vw, 85px);
  line-height: 0.82;
}

.build-lab-copy > p:not(.eyebrow) {
  max-width: 410px;
  margin: 25px 0;
  color: #5d554e;
  font-size: 15px;
  line-height: 1.65;
}

.lab-notes {
  display: grid;
  align-content: center;
  gap: 0;
  border-top: 1px solid rgba(39, 32, 28, 0.24);
}

.lab-notes article {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 19px;
  padding: 25px 0;
  border-bottom: 1px solid rgba(39, 32, 28, 0.24);
}

.lab-notes span {
  grid-row: span 2;
  color: var(--red);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 37px;
  font-weight: 800;
}

.lab-notes h3 {
  font-size: 27px;
  line-height: 0.9;
}

.lab-notes p {
  margin: 8px 0 0;
  color: #5d554e;
  font-size: 13px;
  line-height: 1.55;
}