/*
Theme Name: Aether Musings Editorial
Theme URI: https://aethermusings.com/
Author: Aether Musings
Description: A moody, mysterious, high-fashion editorial WordPress theme built for Aether Musings.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: aether-musings
*/

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --aether-ink:#031414;
  --aether-ink-2:#071c1b;
  --aether-green:#0b2c29;
  --aether-cream:#e9dfcf;
  --aether-cream-2:#cfc1ab;
  --aether-gold:#b9965a;
  --aether-gold-soft:#8f7448;
  --aether-line:rgba(185,150,90,.28);
  --aether-text:#f0e7d8;
  --aether-muted:#b9aa95;
  --aether-shadow:0 30px 80px rgba(0,0,0,.38);
  --serif:"Bodoni Moda", Georgia, serif;
  --sans:"Inter", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--aether-ink);
  color:var(--aether-text);
  font-family:var(--sans);
  font-weight:300;
  letter-spacing:.01em;
}
body.admin-bar .site-header{top:32px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}

.site-shell{background:
  radial-gradient(circle at 20% 5%, rgba(27,77,70,.12), transparent 27%),
  linear-gradient(180deg,#020f0f 0%,#031414 100%);
  overflow:hidden;
}
.site-header{
  position:absolute; z-index:30; top:0; left:0; width:100%;
  padding:34px 42px;
  display:grid;grid-template-columns:400px 1fr 80px;align-items:center;
}
.brand-mark{font-family:var(--serif);font-size:34px;line-height:.8;color:var(--aether-cream);position:relative;transform:translateY(1px);}
.brand-mark small{font-family:var(--sans);font-size:8px;letter-spacing:.35em;display:block;margin-left:3px;margin-top:7px;text-transform:uppercase}
.brand-mark .star{color:var(--aether-gold);font-size:14px;position:absolute;left:34px;top:-2px}
.main-nav{
    position:absolute;
    left:36%;
    width:44%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    font-size:11px;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
}
.main-nav a{opacity:.88;position:relative;padding:8px 0}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--aether-gold)}
.menu-toggle{justify-self:end;background:none;border:0;color:var(--aether-cream);display:flex;align-items:center;gap:10px;cursor:pointer;letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.menu-lines{width:20px;height:12px;display:grid;align-content:space-between}
.menu-lines span{height:1px;background:var(--aether-cream);display:block}

.hero{
  min-height:620px;display:grid;grid-template-columns:36% 44% 20%;
  position:relative;border-bottom:1px solid var(--aether-line);
}
.hero-copy{padding:165px 42px 45px;display:flex;flex-direction:column;justify-content:center}
.hero-kicker{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--aether-gold);margin-bottom:16px}
.hero h1{font-family:var(--serif);font-size:76px;line-height:.92;font-weight:400;letter-spacing:.015em;margin:0 0 24px}
.hero-tagline{font-family:var(--serif);font-size:18px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase;max-width:340px;border-left:1px solid var(--aether-gold);padding-left:22px}
.hero-enter{margin-top:55px;font-size:9px;text-transform:uppercase;letter-spacing:.25em;color:var(--aether-cream-2)}
.hero-enter b{display:block;font-weight:400;margin-top:8px}

.hero-visual{
  position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.03)),
    var(--hero-image, linear-gradient(180deg,#19302f,#071615));
  background-size:cover;background-position:center;
  clip-path:ellipse(76% 105% at 56% 50%);
}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.4))}
.hero-side{padding:105px 18px 40px;border-left:1px solid var(--aether-line);display:flex;flex-direction:column;justify-content:center;background:rgba(0,0,0,.11);box-sizing:border-box;
min-width:0;}

.hero-side .issue{font-size:9px;letter-spacing:.23em;text-transform:uppercase;color:var(--aether-gold);line-height:1.8}
.hero-side h2{
    font-family:var(--serif);
    font-weight:400;
    font-size:clamp(21px,1.55vw,26px);
    line-height:1.05;
    letter-spacing:-0.025em;
    margin:18px 0;
    max-width:100%;
    white-space:normal;
}
.hero-side p{font-size:10px;line-height:1.75;letter-spacing:.12em;text-transform:uppercase;color:var(--aether-cream-2)}
.text-link{display:inline-flex;gap:18px;align-items:center;margin-top:22px;color:var(--aether-gold);font-size:9px;text-transform:uppercase;letter-spacing:.2em}
.text-link:after{content:"→";font-size:18px;line-height:1}

.quote-band{
  display:grid;grid-template-columns:110px 1fr 240px;
  min-height:132px;border-bottom:1px solid var(--aether-line);
  background:linear-gradient(90deg,#061b1a,#08201f 70%,#041616);
}
.quote-label{border-right:1px solid var(--aether-line);display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;text-transform:uppercase;letter-spacing:.28em;color:var(--aether-gold)}
.quote-text{display:flex;align-items:center;padding:20px 42px;font-family:var(--serif);font-size:27px;line-height:1.2}
.quote-credit{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:18px 28px;border-left:1px solid var(--aether-line);font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:var(--aether-cream-2)}

.realms{border-top:0}
.realm{
  display:grid;grid-template-columns:110px 245px minmax(0,1fr) 160px;
  min-height:245px;border-bottom:1px solid var(--aether-line);
}
.realm-number{border-right:1px solid var(--aether-line);padding:24px 18px;font-family:var(--serif);font-size:66px;color:var(--aether-cream);position:relative}
.realm-number small{position:absolute;bottom:20px;left:40px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--aether-gold)}
.realm-copy{padding:28px 26px;border-right:1px solid var(--aether-line);display:flex;flex-direction:column;justify-content:center}
.realm-copy h3{font-family:var(--serif);font-size:31px;font-weight:400;margin:0 0 14px;text-transform:uppercase}
.realm-copy p{font-size:11px;line-height:1.7;color:var(--aether-cream-2);max-width:190px}
.realm-visual{min-height:245px;background:var(--realm-image,linear-gradient(135deg,#0b2321,#111));background-size:cover;background-position:center;position:relative;overflow:hidden}
.realm-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.05))}
.realm-verbs{border-left:1px solid var(--aether-line);padding:26px 20px;display:flex;align-items:center;font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--aether-cream-2)}
.realm:hover{background:#061d1c}
.realm:hover .realm-copy h3,.realm:hover .realm-number{color:#fff}

.site-footer{
  display:grid;grid-template-columns:100px 1.1fr .8fr 150px;gap:0;
  min-height:190px;border-bottom:1px solid var(--aether-line);
}
.footer-est{border-right:1px solid var(--aether-line);display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.27em;line-height:1.6;text-transform:uppercase;color:var(--aether-gold)}
.footer-manifesto{padding:28px 42px;border-right:1px solid var(--aether-line);font-family:var(--serif);font-size:27px;line-height:1.15}
.footer-manifesto small{display:block;font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.25em;color:var(--aether-gold);margin-top:20px}
.footer-signup{padding:30px 36px;border-right:1px solid var(--aether-line)}
.footer-signup h4,.footer-social h4{margin:0 0 14px;font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:var(--aether-gold)}
.footer-signup p{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--aether-cream-2)}
.signup-line{display:flex;border-bottom:1px solid var(--aether-gold-soft);margin-top:18px}
.signup-line input{width:100%;background:transparent;border:0;outline:0;color:var(--aether-cream);padding:9px 0;font-size:11px}
.signup-line button{background:transparent;border:0;color:var(--aether-gold);cursor:pointer;font-size:18px}
.footer-social{padding:30px 22px;font-size:10px;line-height:2;text-transform:uppercase;letter-spacing:.14em}
.copyright{font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:#857965;padding:14px 24px;border-top:0}

.drawer{
  position:fixed;right:0;top:0;height:100vh;width:min(420px,100vw);z-index:99;
  background:rgba(2,15,15,.98);backdrop-filter:blur(16px);
  border-left:1px solid var(--aether-line);padding:90px 40px 40px;
  transform:translateX(105%);transition:transform .35s ease;
}
.drawer.open{transform:translateX(0)}
.drawer a{display:block;padding:15px 0;border-bottom:1px solid var(--aether-line);font-family:var(--serif);font-size:30px}
.drawer-close{position:absolute;right:30px;top:28px;background:none;border:0;color:var(--aether-cream);font-size:26px;cursor:pointer}

@media(max-width:1050px){
  .site-header{grid-template-columns:80px 1fr 55px;padding:22px}
  .main-nav{display:none}
  .hero{grid-template-columns:44% 56%;min-height:690px}
  .hero-side{display:none}
  .hero h1{font-size:60px}
  .realm{grid-template-columns:80px 220px 1fr}
  .realm-verbs{display:none}
  .site-footer{grid-template-columns:80px 1fr 1fr}
  .footer-social{display:none}
}
@media(max-width:760px){
  body.admin-bar .site-header{top:46px}
  .site-header{position:absolute;grid-template-columns:1fr 50px}
  .brand-mark{font-size:28px}
  .hero{display:block;min-height:auto;padding-top:84px}
  .hero-copy{padding:72px 24px 35px}
  .hero h1{font-size:58px}
  .hero-tagline{font-size:15px}
  .hero-visual{height:420px;clip-path:ellipse(90% 92% at 50% 47%)}
  .quote-band{grid-template-columns:55px 1fr}
  .quote-text{font-size:22px;padding:22px}
  .quote-credit{display:none}
  .realm{display:grid;grid-template-columns:72px 1fr}
  .realm-number{font-size:45px;grid-row:1 / span 2}
  .realm-copy{border-right:0;padding:24px 20px}
  .realm-visual{grid-column:2;height:220px}
  .site-footer{display:block}
  .footer-est{display:none}
  .footer-manifesto,.footer-signup{border-right:0;border-bottom:1px solid var(--aether-line);padding:28px 24px}
}