/* =========================================================
   IMAGE CONFIGURATION — replace any value below with your own
   photo, e.g.  url('images/hero.jpg') center/cover no-repeat
   Nothing else in this file needs to change.
   ========================================================= */
:root{
  --BACKGROUND_HERO: linear-gradient(180deg, rgba(10,9,8,.35), rgba(10,9,8,.9)), url('84724036736590485.jpg');
  --BACKGROUND_QUOTE:   linear-gradient(180deg, rgba(10,9,8,.75), rgba(10,9,8,.92)), url('https://picsum.photos/seed/vault-quote/1920/1200?grayscale&blur=2');
  --BACKGROUND_GALLERY: linear-gradient(
  180deg,
  rgba(10,9,8,.55),
  rgba(10,9,8,.9)
), url("5277724558596900.jpg");
  --BACKGROUND_VAULT: linear-gradient(
  180deg,
  rgba(10,9,8,.45),
  rgba(10,9,8,.9)
), url("Pologne (1840-1918)_ Peindre L’âme d’une Nation at the Louvre-Lens Museum.jpg");
  --THINKER_1: url("9007268001665154.jpg");
  --THINKER_3: url("Franz Kafka.jpg");
  --THINKER_4: url("11399805454177295.jpg");
  --GALLERY_1: url('Know Yourself (Socrates).jpg');
  --GALLERY_2: url('Marcus Aurelius (1).jpg');
  --GALLERY_3: url('564287028333026655.jpg');
  --GALLERY_4: url('aristotle if he served.jpg');

  --obsidian:#0a0908; --charcoal:#151109; --marble:#d9d0bd;
  --ivory:#f2ede2; --bronze:#a9835a; --bronze-dim:#6b5636;
  --serif:'Cormorant Garamond', serif; --sans:'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scrollbar-color:var(--bronze-dim) var(--obsidian)}
html,body{max-width:100%; overflow-x:hidden}
body{background:var(--obsidian); color:var(--ivory); font-family:var(--sans);
  -webkit-font-smoothing:antialiased}
::selection{background:var(--bronze-dim); color:var(--ivory)}
a{color:inherit}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}}

/* ---------- loader ---------- */
.loader{position:fixed; inset:0; background:var(--obsidian); z-index:999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  animation:loaderOut .6s ease 1.1s forwards}
.loader-word{font-family:var(--serif); font-size:1.4rem; letter-spacing:.35em; color:var(--marble);
  opacity:0; animation:loaderWord 1s ease forwards .1s}
.loader-line{width:120px; height:1px; background:rgba(217,208,189,.15); overflow:hidden}
.loader-line span{display:block; height:100%; width:0; background:var(--bronze); animation:loaderBar 1s ease forwards .2s}
@keyframes loaderWord{to{opacity:1}}
@keyframes loaderBar{to{width:100%}}
@keyframes loaderOut{to{opacity:0; visibility:hidden; pointer-events:none}}

/* ---------- nav ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center;
  justify-content:space-between; padding:1.6rem 5%; transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,9,8,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:rgba(217,208,189,.08)}
.nav-mark{font-family:var(--serif); font-size:1.05rem; letter-spacing:.08em; color:var(--ivory)}
.nav-links{display:flex; gap:2.2rem; list-style:none}
.nav-links a{text-decoration:none; font-size:.82rem; letter-spacing:.04em; color:var(--marble);
  opacity:.8; transition:opacity .3s, color .3s}
.nav-links a:hover, .nav-links a:focus-visible{opacity:1; color:var(--bronze)}
.nav-toggle{display:none; background:none; border:none; color:var(--ivory); font-size:1.2rem; cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative; height:100svh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; overflow:hidden; background:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat;}
.hero-parallax{position:absolute; inset:-10% -10%; z-index:1; will-change:transform}
.hero-fog i{position:absolute; width:70%; height:40%; border-radius:50%; filter:blur(60px);
  background:radial-gradient(circle, rgba(217,208,189,.10), transparent 70%); animation:drift 42s linear infinite}
.hero-fog i:nth-child(1){top:8%; left:-20%}
.hero-fog i:nth-child(2){top:42%; left:40%; animation-duration:58s; animation-direction:reverse}
.hero-fog i:nth-child(3){top:68%; left:-10%; animation-duration:72s}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(60vw)}}
.hero-columns{position:absolute; inset:auto 0 -6% 0; display:flex; justify-content:space-evenly; opacity:.35}
.hero-columns span{width:2.4vw; max-width:34px; height:38vh; background:linear-gradient(180deg, rgba(217,208,189,.16), rgba(217,208,189,.02)); border-radius:2px 2px 0 0}
.hero-grain{position:absolute; inset:0; z-index:2; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-vignette{position:absolute; inset:0; z-index:2; background:radial-gradient(120% 90% at 50% 100%, rgba(0,0,0,.55), transparent 60%)}
.hero-copy{position:relative; z-index:3; padding:0 6%}
.eyebrow{font-size:.78rem; letter-spacing:.22em; color:var(--bronze); margin-bottom:1.4rem; text-transform:uppercase}
.hero-title{font-family:var(--serif); font-weight:500; font-size:clamp(4rem,12vw,10rem); text-shadow: 0 0 30px rgba(169,131,90,.25);
  line-height:.95; color:var(--ivory); animation:riseIn 1.3s ease .3s both}
@keyframes riseIn{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:translateY(0)}}
.hero-sub{font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--marble); margin-top:1.6rem; opacity:.85}
.scroll-cue{position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--marble); text-decoration:none;
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; opacity:.75; transition:opacity .3s}
.scroll-cue:hover{opacity:1}
.scroll-cue svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:1;
  transform:none;
}
.reveal.in-view{opacity:1; transform:translateY(0)}

/* ---------- shared editorial ---------- */
.label{font-size:.75rem; letter-spacing:.18em; color:var(--bronze); text-transform:uppercase; margin-bottom:1.2rem}
section{padding:9rem 8%}
.archive{max-width:900px; margin:0 auto; text-align:center}
.statement{font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4vw,3rem); line-height:1.25; color:var(--ivory)}
.lede{font-size:1.02rem; line-height:1.75; color:var(--marble); max-width:620px; margin:1.6rem auto 0; opacity:.9}

/* ---------- quote chamber ---------- */
.chamber{background:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat; text-align:center; position:relative; min-height:70vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center}
.chamber-mark{font-family:var(--serif); font-size:6rem; color:var(--bronze-dim); line-height:0; margin-bottom:1rem}
.chamber-quote p{font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.6rem); font-style:italic;
  max-width:840px; margin:0 auto; line-height:1.4; color:var(--ivory); transition:opacity .4s, filter .4s}
.chamber-quote footer{margin-top:2rem; display:flex; flex-direction:column; gap:.3rem}
.chamber-quote cite{font-style:normal; letter-spacing:.06em; color:var(--bronze)}
.chamber-quote footer span{font-size:.8rem; color:var(--marble); opacity:.7}
.chamber-controls{margin-top:3rem; display:flex; align-items:center; gap:1.6rem; color:var(--marble)}
.chamber-controls button{background:none; border:1px solid rgba(217,208,189,.25); color:var(--ivory);
  width:2.4rem; height:2.4rem; border-radius:50%; cursor:pointer; transition:border-color .3s, color .3s}
.chamber-controls button:hover, .chamber-controls button:focus-visible{border-color:var(--bronze); color:var(--bronze)}
.chamber-controls span{font-size:.78rem; letter-spacing:.1em}
.fading{opacity:0; filter:blur(6px)}

/* ---------- thinkers ---------- */
.thinker-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem}
.thinker-card{position:relative; aspect-ratio:3/4; background:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:2px; overflow:hidden; transition:transform .5s}
.thinker-meta{position:absolute; left:0; right:0; bottom:0; padding:1.6rem;
  background:linear-gradient(0deg, rgba(0,0,0,.65), transparent 70%); transition:transform .5s}
.thinker-meta h3{font-family:var(--serif); font-size:1.5rem; color:var(--ivory)}
.thinker-meta p{font-size:.75rem; letter-spacing:.08em; color:var(--bronze); margin-top:.2rem}
.thinker-meta span{display:block; font-size:.85rem; color:var(--marble); opacity:0; max-height:0;
  transition:opacity .4s, max-height .4s}
.thinker-card:hover, .thinker-card:focus-within{transform:translateY(-6px)}
.thinker-card:hover .thinker-meta span, .thinker-card:focus-within .thinker-meta span{opacity:.85; max-height:3rem; margin-top:.6rem}

/* ---------- ancient world ---------- */
.world{background:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat; min-height:70vh; display:flex; align-items:center; justify-content:center}
.world-copy{max-width:640px; text-align:center}

/* ---------- vault ---------- */
.vault{background:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat; text-align:center; min-height:70vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; position:relative}
.vault-door{
  width:180px;
  height:260px;
  border:1px solid rgba(217,208,189,.25);
  border-radius:0;
  background:url("351912460468578.jpg") center/cover no-repeat;
  box-shadow:0 0 80px 10px rgba(169,131,90,.15) inset;
  margin-bottom:1rem;
}
.vault h2{font-family:var(--serif); font-size:2.4rem; color:var(--ivory)}
.vault p{font-family:var(--serif); font-style:italic; color:var(--marble)}

/* ---------- gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto; gap:1rem; margin-top:2rem}
.g-item{background:var(--bg); background-size:cover; background-position:center; background-repeat:no-repeat; min-height:220px; cursor:pointer; position:relative; overflow:hidden; transition:filter .4s; border:none}
.g-large{grid-row:span 2}
.g-item:hover, .g-item:focus-visible{filter:brightness(1.15)}
.g-item::after{content:attr(data-title); position:absolute; left:1rem; bottom:1rem; font-size:.8rem;
  color:var(--ivory); opacity:0; transition:opacity .3s}
.g-item:hover::after, .g-item:focus-visible::after{opacity:1}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; background:rgba(10,9,8,.94); z-index:200; display:none;
  align-items:center; justify-content:center; padding:5%}
.lightbox.open{display:flex}
.lb-body{max-width:800px; text-align:center}
.lb-img{width:100%; aspect-ratio:16/10; background:linear-gradient(150deg,#332a1a,#100e0a); background-size:cover; background-position:center; background-repeat:no-repeat; margin-bottom:1.2rem}
.lb-body h3{font-family:var(--serif); font-size:1.6rem; color:var(--ivory)}
.lb-body p{color:var(--marble); margin-top:.5rem; font-size:.9rem}
.lb-close{position:absolute; top:2rem; right:3rem; background:none; border:none; color:var(--ivory);
  font-size:2rem; cursor:pointer}

/* ---------- footer ---------- */
.site-footer{text-align:center; padding:7rem 8% 4rem; border-top:1px solid rgba(217,208,189,.08)}
.site-footer h2{font-family:var(--serif); font-size:2rem; color:var(--ivory)}
.site-footer p{color:var(--marble); margin-top:1rem; line-height:1.6}
.footer-links{list-style:none; display:flex; justify-content:center; gap:2rem; margin:2.2rem 0; flex-wrap:wrap}
.footer-links a{text-decoration:none; font-size:.85rem; color:var(--marble); opacity:.8}
.footer-links a:hover{opacity:1; color:var(--bronze)}
.footer-fine{font-size:.72rem; opacity:.4; margin-top:1rem}

/* ---------- responsive ---------- */
@media(max-width:800px){
  .nav-toggle{display:block}
  .nav-links{position:fixed; top:0; right:-100%; height:100svh; width:70%; max-width:300px;
    background:rgba(10,9,8,.96); backdrop-filter:blur(14px); flex-direction:column; justify-content:center;
    align-items:center; gap:2rem; transition:right .4s ease}
  .nav-links.open{right:0}
  section{padding:6rem 6%}
  .thinker-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr; grid-template-rows:auto}
  .g-large{grid-row:auto}
  .hero-columns{display:none}
}
.archive-image {
  display: block !important;
  width: 70% !important;
  max-width: 500px !important;
  height: auto !important;
  margin: 30px auto 0 !important;
}

@media (max-width: 768px) {
  .archive-image {
    width: 65vw !important;
    max-width: 280px !important;
    height: auto !important;
  }
}
/* =========================================================
   RANDOM QUOTE — LUXURY BUTTON
   ========================================================= */

#randomQuote {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  min-width: 245px;
  height: 52px;
  padding: 0 24px;

  border: 1px solid rgba(217, 208, 189, 0.38);
  border-radius: 2px;

  background:
    linear-gradient(
      135deg,
      rgba(217, 208, 189, 0.10),
      rgba(169, 131, 90, 0.04)
    );

  color: var(--ivory);
  font-family: var(--serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  cursor: pointer;
  overflow: hidden;

  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* small decorative arrow */
#randomQuote::after {
  content: "↗";
  font-size: 1rem;
  opacity: 0.65;
  transform: translate(0, 0);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

/* elegant shine */
#randomQuote::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.10),
    transparent
  );

  transform: skewX(-20deg);
  transition: left 0.65s ease;
}

/* hover */
#randomQuote:hover {
  border-color: rgba(217, 208, 189, 0.75);

  background:
    linear-gradient(
      135deg,
      rgba(217, 208, 189, 0.16),
      rgba(169, 131, 90, 0.08)
    );

  transform: translateY(-2px);

  box-shadow:
    0 8px 28px rgba(0,0,0,0.28),
    inset 0 0 18px rgba(217,208,189,0.035);
}

#randomQuote:hover::before {
  left: 140%;
}

#randomQuote:hover::after {
  transform: translate(3px, -3px);
  opacity: 1;
}

/* click */
#randomQuote:active {
  transform: translateY(0) scale(0.98);
}

/* keyboard focus */
#randomQuote:focus-visible {
  outline: 1px solid rgba(217,208,189,0.8);
  outline-offset: 4px;
}

/* mobile */
@media (max-width: 600px) {
  #randomQuote {
    min-width: 210px;
    height: 50px;
    padding: 0 18px;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
  }
}
/* =========================================================
   WISDOM THEMES — LUXURY ARCHIVE
========================================================= */
.themes{
position:relative;
padding:10rem 8%;
text-align:center;
overflow:hidden;

background:
linear-gradient(
180deg,
rgba(10,9,8,.75),
rgba(10,9,8,.92)
),
url("585890232792637023.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}

.themes::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:1px;
height:120px;
background:linear-gradient(
to bottom,
transparent,
rgba(217,208,189,.35),
transparent
);
}

.themes-title{
font-family:var(--serif);
font-size:clamp(2.4rem,5vw,4.8rem);
font-weight:500;
line-height:1.1;
max-width:800px;
margin:0 auto 4rem;
color:var(--ivory);
}

.theme-buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:16px;
max-width:1100px;
margin:0 auto 4rem;
}

/* ===== BUTTON ===== */

.theme-btn{

position:relative;
overflow:hidden;

min-width:180px;
height:64px;

padding:0 28px;

border:1px solid rgba(217,208,189,.12);

background:
linear-gradient(
180deg,
rgba(255,255,255,.02),
rgba(255,255,255,.01)
);

backdrop-filter:blur(12px);

color:var(--marble);

font-family:var(--serif);
font-size:.95rem;
letter-spacing:.12em;
text-transform:uppercase;

cursor:pointer;

transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease,
color .35s ease;
}

/* bronze glow line */

.theme-btn::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:2px;

background:linear-gradient(
90deg,
transparent,
var(--bronze),
transparent
);

opacity:0;
transition:.4s;
}

/* hover */

.theme-btn:hover{

transform:translateY(-5px);

border-color:rgba(217,208,189,.35);

box-shadow:
0 15px 35px rgba(0,0,0,.35),
0 0 35px rgba(169,131,90,.08);

color:var(--ivory);
}

.theme-btn:hover::before{
opacity:1;
}

/* active */

.theme-btn.active{

border-color:rgba(217,208,189,.45);

background:
linear-gradient(
135deg,
rgba(217,208,189,.12),
rgba(169,131,90,.08)
);

box-shadow:
0 20px 40px rgba(0,0,0,.45),
0 0 60px rgba(169,131,90,.12);

color:var(--ivory);
}

.theme-btn.active::before{
opacity:1;
}

/* ===== QUOTE CARD ===== */

.theme-card{

position:relative;

max-width:1000px;
margin:auto;

padding:4rem;

border:1px solid rgba(217,208,189,.10);

background:
linear-gradient(
180deg,
rgba(255,255,255,.03),
rgba(255,255,255,.01)
);

backdrop-filter:blur(18px);

box-shadow:
0 20px 60px rgba(0,0,0,.35);

}

/* top ornament */

.theme-card::before{

content:"✦";

position:absolute;
top:-18px;
left:50%;

transform:translateX(-50%);

color:var(--bronze);
font-size:1rem;
letter-spacing:10px;
}

#themeQuote{

font-family:var(--serif);

font-size:clamp(
1.9rem,
3vw,
3rem
);

line-height:1.5;

font-style:italic;

color:var(--ivory);

max-width:850px;

margin:0 auto 2rem;
}

#themeAuthor{

display:block;

font-size:.78rem;

letter-spacing:.24em;

text-transform:uppercase;

color:var(--bronze);

opacity:.9;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.themes{
padding:7rem 6%;
}

.themes-title{
font-size:2.2rem;
margin-bottom:3rem;
}

.theme-buttons{
gap:10px;
}

.theme-btn{

flex:1 1 calc(50% - 10px);

min-width:unset;

height:58px;

font-size:.75rem;

letter-spacing:.08em;
}

.theme-card{
padding:2rem 1.5rem;
}

#themeQuote{
font-size:1.5rem;
}

}
/* =========================================================
   SEVEN DEADLY SINS — THE HUMAN SHADOW
========================================================= */

.sins{
  position:relative;
  overflow:hidden;
  text-align:center;

  padding:9rem 8% 8rem;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(169,131,90,.08),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #0a0908 0%,
      #0d0b09 50%,
      #080706 100%
    );
}

/* subtle background texture */

.sins::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(217,208,189,.025),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(169,131,90,.025),
      transparent 30%
    );

  pointer-events:none;
}


/* ================= HEADER ================= */

.sins-header{
  position:relative;
  z-index:2;

  max-width:850px;
  margin:0 auto;
}

.sins-header .label{
  margin-bottom:1rem;
}

.sins-title{
  font-family:var(--serif);
  font-weight:500;

  font-size:clamp(
    2.8rem,
    6vw,
    5.5rem
  );

  line-height:1;

  color:var(--ivory);

  letter-spacing:-.025em;
}

.sins-line{
  width:90px;
  height:1px;

  margin:2rem auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--bronze),
      transparent
    );

  opacity:.7;
}


/* ================= MAIN ART ================= */

.sins-art-wrap{
  position:relative;

  width:min(360px, 70vw);

  margin:3.5rem auto 4.5rem;

  display:flex;
  justify-content:center;
  align-items:center;
}

.sins-art{
  position:relative;
  z-index:2;

  display:block;

  width:100%;
  height:auto;

  max-height:430px;

  object-fit:contain;

  filter:
    brightness(.72)
    contrast(1.08)
    saturate(.72);

  opacity:.94;

  transition:
    transform .7s ease,
    filter .7s ease;
}

.sins-art-wrap:hover .sins-art{
  transform:scale(1.025);

  filter:
    brightness(.82)
    contrast(1.08)
    saturate(.78);
}


/* soft light behind artwork */

.sins-art-glow{
  position:absolute;

  width:75%;
  aspect-ratio:1;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(169,131,90,.16),
      rgba(169,131,90,.045) 35%,
      transparent 70%
    );

  filter:blur(25px);

  pointer-events:none;
}


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

.sins-grid{
  position:relative;
  z-index:3;

  width:min(1000px, 100%);

  margin:0 auto;

  display:grid;

  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap:12px;
}


/* individual button */

.sin-card{
  position:relative;

  min-height:78px;

  border:1px solid rgba(217,208,189,.13);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.008)
    );

  color:var(--marble);

  font-family:var(--serif);

  font-size:1.25rem;

  letter-spacing:.08em;

  cursor:pointer;

  overflow:hidden;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  transition:
    transform .4s ease,
    border-color .4s ease,
    color .4s ease,
    background .4s ease,
    box-shadow .4s ease;
}


/* tiny bronze line */

.sin-card::before{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  width:0;
  height:1px;

  transform:translateX(-50%);

  background:var(--bronze);

  transition:width .45s ease;
}


/* soft inner light */

.sin-card::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(169,131,90,.13),
      transparent 55%
    );

  opacity:0;

  transition:opacity .45s ease;

  pointer-events:none;
}


/* hover */
/* individual button */
.sins{
  position:relative;
  overflow:hidden;
  text-align:center;

  padding:9rem 8% 8rem;

  background:
    linear-gradient(
      180deg,
      rgba(10,9,8,.50),
      rgba(10,9,8,.88)
    ),
    url("10766486607571966.jpg");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}


/* click */

.sin-card:active{
  transform:translateY(-2px) scale(.985);
}


/* keyboard */

.sin-card:focus-visible{
  outline:1px solid var(--bronze);

  outline-offset:4px;
}


/* ================= INDIVIDUAL SIN MOOD ================= */

/* very subtle differences */

.sin-card[data-sin="pride"]:hover{
  box-shadow:
    0 16px 35px rgba(0,0,0,.4),
    0 0 35px rgba(170,140,100,.10);
}

.sin-card[data-sin="greed"]:hover{
  box-shadow:
    0 16px 35px rgba(0,0,0,.4),
    0 0 35px rgba(170,145,80,.10);
}

.sin-card[data-sin="lust"]:hover{
  box-shadow:
    0 16px 35px rgba(0,0,0,.4),
    0 0 35px rgba(130,60,60,.10);
}

.sin-card[data-sin="envy"]:hover{
  box-shadow:
    0 16px 35px rgba(0,0,0,.4),
    0 0 35px rgba(75,100,70,.10);
}

.sin-card[data-sin="gluttony"]:hover{
  box-shadow:
    0 16px 35px rgba(0,0,0,.4),
    0 0 35px rgba(140,95,60,.10);
}

.sin-card[data-sin="wrath"]:hover{
  box-shadow:
    0 16px 35px rgba(0,0,0,.4),
    0 0 35px rgba(130,55,45,.12);
}

.sin-card[data-sin="sloth"]:hover{
  box-shadow:
    0 16px 35px rgba(0,0,0,.4),
    0 0 35px rgba(75,75,75,.12);
}


/* ================= MOBILE ================= */

@media(max-width:800px){

  .sins{
    padding:7rem 6% 6rem;
  }

  .sins-title{
    font-size:2.8rem;
  }

  .sins-art-wrap{
    width:min(290px,72vw);
    margin:3rem auto 3.5rem;
  }

  .sins-art{
    max-height:340px;
  }

  .sins-grid{
    grid-template-columns:repeat(2,1fr);
    gap:9px;
  }

  .sin-card{
    min-height:68px;
    font-size:1.05rem;
  }

  .sin-card:last-child{
    grid-column:1 / -1;
    width:50%;
    margin:0 auto;
  }
}


@media(max-width:480px){

  .sins{
    padding:6rem 5% 5rem;
  }

  .sins-title{
    font-size:2.45rem;
  }

  .sins-art-wrap{
    width:65vw;
    margin:2.7rem auto 3rem;
  }

  .sins-grid{
    gap:8px;
  }

  .sin-card{
    min-height:62px;

    font-size:.95rem;

    letter-spacing:.06em;
  }
}
/* ============ SIN FULLSCREEN OVERLAY ============ */

.sin-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(5,4,3,.96);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}

.sin-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.sin-page{
  width:min(900px,100%);
  max-height:90vh;
  overflow:auto;
  text-align:center;
  padding:50px 30px;
  border:1px solid rgba(169,131,90,.3);
  background:linear-gradient(145deg,#151109,#0a0908);
  box-shadow:0 30px 100px rgba(0,0,0,.7);
}

.sin-page h2{
  margin-bottom:25px;
  font-family:var(--serif);
  font-size:clamp(3rem,7vw,6rem);
  font-weight:400;
  color:var(--ivory);
  letter-spacing:.05em;
}

.sin-image{
  width:min(600px,100%);
  margin:0 auto 30px;
}

.sin-image img{
  display:block;
  width:100%;
  max-height:55vh;
  object-fit:cover;
}

.sin-page p{
  max-width:650px;
  margin:auto;
  font-family:var(--serif);
  font-size:1.5rem;
  line-height:1.6;
  color:var(--marble);
}

.sin-close{
  position:absolute;
  top:25px;
  right:30px;
  border:0;
  background:none;
  color:var(--marble);
  font-size:3rem;
  font-weight:200;
  cursor:pointer;
  transition:.3s ease;
}

.sin-close:hover{
  color:var(--bronze);
  transform:rotate(90deg);
}

@media(max-width:600px){
  .sin-overlay{
    padding:15px;
  }

  .sin-page{
    padding:40px 20px;
  }

  .sin-page p{
    font-size:1.2rem;
  }

  .sin-close{
    top:12px;
    right:18px;
  }
}
.sin-chamber{
  width:min(1100px, 95%);
  max-height:90vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  padding:40px;
  border:1px solid rgba(169,131,90,.3);
  background:#0d0b09;
}

.sin-chamber-image{
  width:100%;
  height:500px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.sin-chamber-content{
  text-align:left;
}

.sin-chamber-content h2{
  font-family:var(--serif);
  font-size:clamp(3rem,6vw,6rem);
  color:var(--ivory);
}

.sin-chamber-description{
  color:var(--marble);
  font-family:var(--serif);
  font-size:1.3rem;
  line-height:1.7;
}

@media(max-width:700px){
  .sin-chamber{
    grid-template-columns:1fr;
    padding:25px;
    overflow:auto;
  }

  .sin-chamber-image{
    height:300px;
  }

  .sin-chamber-content{
    text-align:center;
  }
}
/* ===== MOBILE BACKGROUND FIX ===== */

@media (max-width: 800px){

  /* Seven Deadly Sins */
  .sins{
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }

  /* Wisdom Themes */
  .themes{
    background-attachment: scroll;
    background-size: cover;
    background-position: center center;
  }

}
/* ============ FINAL 3 IMAGE ROW ============ */

.final-image-trio {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 100px 5vw;
  box-sizing: border-box;
}

.final-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.final-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}


/* MOBILE */

@media (max-width: 700px) {

  .final-image-trio {
    flex-direction: column;
    gap: 35px;
    padding: 70px 20px;
  }

  .final-image {
    width: 100%;
  }

  .final-image img {
    width: 100%;
    height: auto;
  }

}
/* ===== IMAGE TRIO BACKGROUND ===== */

.final-image-trio {
  position: relative;
  background-image:
    linear-gradient(
      rgba(10, 10, 10, 0.72),
      rgba(10, 10, 10, 0.72)
    ),
    url("Emotional Freedom vs_ Financial Freedom _ The Philosopher and The King.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 100px 5vw;
}
/* ============ FINAL INSTAGRAM ============ */

.final-instagram {
  text-align: center;
  padding: 120px 20px 100px;
}

.instagram-button {
  display: inline-block;
  padding: 16px 34px;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all .35s ease;
}

.instagram-button:hover {
  background: #fff;
  color: #111;
  transform: translateY(-3px);
}

.final-quote {
  margin: 32px auto 0;
  max-width: 700px;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
}
/* ============ THE VAULT — SCHOOL OF ATHENS ============ */

.vault {
  background-image:
    linear-gradient(
      rgba(8, 7, 5, 0.45),
      rgba(8, 7, 5, 0.55)
    ),
    url("The School of Athens.jpg") !important;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =====================================================
   THE MIRROR — EDITORIAL VERSION
   ===================================================== */

.mirror {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(
      to bottom,
      rgba(10,9,8,.18),
      rgba(10,9,8,.92)
    ),
    url("Mirror to another World.jpg") center / cover no-repeat;
  border-top: 1px solid rgba(217,208,189,.08);
}

.mirror::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      transparent 15%,
      rgba(10,9,8,.72) 100%
    );
  pointer-events: none;
}

.mirror-inner {
  position: relative;
  z-index: 2;
  width: min(760px, 90%);
  text-align: center;
  padding: 8rem 0;
}

.mirror-kicker {
  margin: 0 0 1.6rem;
  color: var(--bronze);
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.mirror-heading {
  margin: 0;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.8rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.025em;
}

.mirror-description {
  margin: 2rem auto 2.8rem;
  max-width: 470px;
  color: rgba(242,237,226,.58);
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.9;
  letter-spacing: .03em;
}

.mirror-intro-image {
  width: 190px;
  height: 250px;
  margin: 0 auto 2.8rem;
  overflow: hidden;
  border: 1px solid rgba(169,131,90,.35);
}

.mirror-intro-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: grayscale(18%) contrast(1.04);
}

.mirror-enter {
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(169,131,90,.65);
  background: transparent;
  color: var(--ivory);
  padding: .7rem .1rem;
  font-family: var(--sans);
  font-size: .67rem;
  letter-spacing: .25em;
  cursor: pointer;
  transition:
    color .35s ease,
    border-color .35s ease,
    letter-spacing .35s ease;
}

.mirror-enter span {
  margin-left: .8rem;
  color: var(--bronze);
  transition: transform .35s ease;
}

.mirror-enter:hover {
  color: var(--bronze);
  border-color: var(--ivory);
  letter-spacing: .31em;
}

.mirror-enter:hover span {
  display: inline-block;
  transform: translate(4px, -4px);
}


/* =====================================================
   FULLSCREEN EXPERIENCE
   ===================================================== */

.mirror-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  background: #090807;
  color: var(--ivory);
  overflow-y: auto;
}

.mirror-overlay.active {
  display: block;
}

.mirror-experience {
  position: relative;
  min-height: 100svh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 7vw;
  background: #090807;
}


/* CLOSE */

.mirror-close {
  position: fixed;
  z-index: 10;
  top: 2rem;
  right: 2.5rem;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(217,208,189,.2);
  border-radius: 50%;
  background: transparent;
  color: rgba(242,237,226,.7);
  font-size: 1.5rem;
  font-weight: 300;
  cursor: pointer;
  transition: .3s ease;
}

.mirror-close:hover {
  border-color: var(--bronze);
  color: var(--ivory);
  transform: rotate(90deg);
}


/* TOP BAR */

.mirror-top {
  position: absolute;
  top: 2.3rem;
  left: 7vw;
  right: 7vw;
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: rgba(242,237,226,.35);

  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.mirror-top b {
  color: var(--ivory);
  font-weight: 400;
}

.mirror-top i {
  margin: 0 .4rem;
  color: var(--bronze);
  font-style: normal;
}


/* =====================================================
   QUESTION
   ===================================================== */

.mirror-question {
  width: min(1060px, 100%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}


/* PORTRAIT IMAGE */

.mirror-visual {
  width: 270px;
  height: 370px;
  overflow: hidden;
  border: 1px solid rgba(169,131,90,.28);
  background: #11100e;
}

.mirror-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: grayscale(15%);
}


/* TEXT */

.mirror-content {
  max-width: 650px;
}

.mirror-number {
  margin: 0 0 1.4rem;

  color: var(--bronze);

  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.mirror-number span {
  color: rgba(242,237,226,.6);
}

.mirror-content h2 {
  margin: 0 0 2.8rem;

  max-width: 690px;

  color: var(--ivory);

  font-family: var(--serif);
  font-size: clamp(2rem, 3.2vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
}


/* =====================================================
   OPTIONS — NOT GIANT BUTTONS
   ===================================================== */

.mirror-options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(217,208,189,.13);
}

.mirror-option {
  width: 100%;
  min-height: 58px;

  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 1rem;

  padding: .8rem 0;

  border: 0;
  border-bottom: 1px solid rgba(217,208,189,.13);

  background: transparent;

  color: rgba(242,237,226,.62);

  text-align: left;
  font-family: var(--sans);
  font-size: .76rem;
  line-height: 1.5;

  cursor: pointer;

  transition:
    color .3s ease,
    padding-left .3s ease,
    border-color .3s ease;
}

.mirror-option-number {
  color: var(--bronze);
  font-family: var(--serif);
  font-size: .9rem;
}

.mirror-option:hover {
  color: var(--ivory);
  padding-left: .6rem;
  border-color: rgba(169,131,90,.5);
}

.mirror-option:hover .mirror-option-number {
  color: var(--ivory);
}


/* =====================================================
   RESULT
   ===================================================== */

.mirror-result {
  display: none;
  width: min(720px, 100%);
  margin: 0 auto;
  text-align: center;
}

.mirror-result.active {
  display: block;
}

.mirror-result-kicker {
  margin: 0 0 1.8rem;
  color: var(--bronze);
  font-family: var(--sans);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.mirror-result h2 {
  margin: 0 0 1.5rem;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: .95;
}

#mirrorResultText {
  max-width: 560px;
  margin: 0 auto 3.5rem;
  color: rgba(242,237,226,.6);
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.9;
}

.mirror-result-question,
.mirror-result-thought {
  max-width: 580px;
  margin: 0 auto 2rem;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(217,208,189,.12);
}

.mirror-result-question span,
.mirror-result-thought span {
  display: block;
  margin-bottom: .8rem;

  color: var(--bronze);

  font-family: var(--sans);
  font-size: .55rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.mirror-result-question p,
.mirror-result-thought p {
  margin: 0;
  color: rgba(242,237,226,.72);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
}

.mirror-restart {
  margin-top: 1.5rem;

  border: 0;
  border-bottom: 1px solid rgba(169,131,90,.65);

  background: transparent;
  color: var(--ivory);

  padding: .7rem 0;

  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .25em;

  cursor: pointer;
  transition: .3s ease;
}

.mirror-restart:hover {
  color: var(--bronze);
  letter-spacing: .3em;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 700px) {

  .mirror {
    min-height: 78vh;
  }

  .mirror-inner {
    width: 88%;
    padding: 6rem 0;
  }

  .mirror-heading {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
  }

  .mirror-description {
    font-size: .75rem;
    line-height: 1.8;
  }

  .mirror-intro-image {
    width: 145px;
    height: 200px;
    margin-bottom: 2.2rem;
  }

  /* =========================
     MIRROR MOBILE EXPERIENCE
     ========================= */

  .mirror-experience {
    min-height: 100svh;
    padding: 5.8rem 7vw 3.5rem;
    justify-content: flex-start;
    overflow-y: auto;
  }

  .mirror-close {
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }

  .mirror-top {
    top: 1.35rem;
    left: 7vw;
    right: 7vw;
    font-size: .48rem;
    letter-spacing: .18em;
  }

  /* IMAGE */
  .mirror-question {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    align-items: center;
  }

  .mirror-visual {
    width: min(175px, 48vw);
    height: min(235px, 64vw);
    margin: 0 auto;
    flex-shrink: 0;
  }

  .mirror-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* QUESTION */
  .mirror-content {
    width: 100%;
    max-width: 100%;
  }

  .mirror-number {
    margin-bottom: .8rem;
    font-size: .5rem;
    letter-spacing: .25em;
  }

  .mirror-content h2 {
    margin: 0 0 1.5rem;
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1.18;
    letter-spacing: -.01em;
  }

  /* OPTIONS */
  .mirror-options {
    width: 100%;
  }

  .mirror-option {
    width: 100%;
    min-height: 48px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .65rem;
    padding: .65rem 0;

    font-size: .67rem;
    line-height: 1.45;
  }

  .mirror-option-number {
    font-size: .78rem;
  }

  .mirror-option:hover {
    padding-left: 0;
  }

  /* RESULT */
  .mirror-result {
    width: 100%;
    padding: 1rem 0;
  }

  .mirror-result-kicker {
    font-size: .52rem;
    letter-spacing: .24em;
    margin-bottom: 1.3rem;
  }

  .mirror-result h2 {
    font-size: clamp(2.6rem, 13vw, 4rem);
    line-height: .95;
    margin-bottom: 1.2rem;
  }

  #mirrorResultText {
    width: 100%;
    font-size: .72rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
  }

  .mirror-result-question,
  .mirror-result-thought {
    padding: 1rem 0;
    margin-bottom: 1.3rem;
  }

  .mirror-result-question p,
  .mirror-result-thought p {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .mirror-restart {
    font-size: .56rem;
    letter-spacing: .2em;
  }
}
@media (max-width: 700px) {

  .mirror-overlay .mirror-question {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 1.8rem !important;
  }

  .mirror-overlay .mirror-visual {
    width: 175px !important;
    height: 235px !important;
    margin: 0 auto !important;
    flex: none !important;
  }

  .mirror-overlay .mirror-content {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }

  .mirror-overlay .mirror-content h2 {
    width: 100% !important;
    text-align: center !important;
  }

  .mirror-overlay .mirror-options {
    width: 100% !important;
  }
}