:root{
  --bg:#070709;
  --ink:#efece6;
  --muted:rgba(239,236,230,.72);
  --max:1180px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family: ui-serif, "Cormorant Garamond", "Georgia", "Times New Roman", serif;
    letter-spacing:.15px;
    overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(var(--max), calc(100% - 52px)); margin:0 auto; }

.noise{
  position:fixed; inset:0; pointer-events:none;
  background-image:url("../img/noise.png");
  background-repeat:repeat;
  opacity:.06;
  mix-blend-mode:overlay;
  z-index:3;
}
.vignette{
  position:fixed; inset:-20vh -10vw; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.78) 78%, rgba(0,0,0,.92) 100%);
  z-index:2;
}

/* Header */
.topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:10;
  padding:16px 0;
  background: rgba(8,8,10,.9);
  border-bottom: 1px solid rgba(239,236,230,.08);
}
.topbar__row{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{
  font-family:"UnifrakturCook", ui-serif, serif;
  font-size:30px;
  letter-spacing:.5px;
  font-weight:700;
}
.nav{ display:flex; gap:26px; font-size:14px; color:rgba(239,236,230,.80); }
.nav a{ padding:6px 0; }
.nav a:hover{ color:rgba(239,236,230,.98); }

.burger{
  display:none;
  width:44px; height:44px;
  border:0; background:transparent;
  cursor:pointer;
}
.burger span{
  display:block;
  width:22px; height:2px;
  margin:5px auto;
  background:rgba(239,236,230,.70);
}

.hero-wrap{
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

/* One image, but container is taller than hero */
.hero-wrap::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-6vh;          /* a bit higher */
    height: 140vh;     /* key: extends below hero */
    z-index:0;

    background: url("../img/top-bg-castle.webp") no-repeat;
    background-size: cover;
    background-position: center 20%;

    filter: saturate(.92) contrast(1.05);
    transform: scale(1.02);
}

/* Bottom fog/blur so image "goes into blur" */
.hero-wrap::after{
    content:"";
    position:absolute;
    left:-12%;
    right:-12%;
    top: calc(100vh - 40px); /* starts near hero bottom */
    height: 55vh;            /* how long it fades down */
    z-index:1;
    pointer-events:none;

    background:
            radial-gradient(ellipse at center,
            rgba(7,7,9,0) 0%,
            rgba(7,7,9,.35) 38%,
            rgba(7,7,9,.85) 78%,
            rgba(7,7,9,1) 100%
            );

    filter: blur(28px);
    opacity: .95;
}

/* Hero */
.hero{
    position: relative;
    min-height: 100vh;
    padding-top: -86px;
    z-index: 2; /* above image */
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
            linear-gradient(180deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.18) 36%,
            rgba(0,0,0,.45) 100%
            ),
            radial-gradient(ellipse at center,
            rgba(0,0,0,0) 44%,
            rgba(0,0,0,.52) 78%,
            rgba(0,0,0,.88) 100%
            );
}

.hero__inner{
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 86px);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.main{
    position: relative;
    z-index: 2;
    margin-top: -22vh;  /* key: pulls content up over the extended image */
    padding: 22vh 0 76px; /* compensate spacing */

    /* subtle plate for readability, but lets bg be visible */
    background: linear-gradient(
            180deg,
            rgba(7,7,9,0) 0%,
            rgba(7,7,9,.55) 240px,
            rgba(7,7,9,.92) 720px,
            rgba(7,7,9,1) 100%
    );
}

.hero__title{
  font-family:"UnifrakturCook", ui-serif, serif;
  margin:0;
  font-size:clamp(54px, 7vw, 92px);
  line-height:1;
  text-shadow: 0 20px 70px rgba(0,0,0,.85);
}
.hero__kicker{
  margin-top:14px;
  font-size:15px;
  letter-spacing:1.6px;
  color:rgba(239,236,230,.78);
}
.hero__sub{
  margin:10px 0 0;
  font-size:15px;
  letter-spacing:1.6px;
  color:rgba(239,236,230,.66);
}
.cta{
  margin-top:26px;
  display:inline-flex;
  padding:12px 22px;
  border-radius:10px;
  border:1px solid rgba(239,236,230,.26);
  background:rgba(0,0,0,.24);
  color:rgba(239,236,230,.92);
  font-size:13px;
  letter-spacing:1.4px;
  cursor:pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.cta:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.36);
  border-color:rgba(239,236,230,.36);
}

/* Sections */
.main{ position:relative; z-index:5; padding:18px 0 76px; }
.section{ margin-top:34px; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.h2{
  margin:0;
  font-family:"UnifrakturCook", ui-serif, serif;
  font-size:24px;
  font-weight:700;
  letter-spacing:.6px;
  color:rgba(239,236,230,.90);
}
.section__link{
  font-size:12px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:rgba(239,236,230,.55);
}
.section__link:hover{ color:rgba(239,236,230,.92); }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:rgba(10,10,12,.55);
  box-shadow: var(--shadow);
  transform:translateY(0);
  transition:transform .28s ease;
}
.card:hover{ transform:translateY(-2px); }
.card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.86) 100%);
}
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.08); }
.card__body{
  position:relative; z-index:2;
  padding:18px 18px 16px;
  min-height:198px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.card__title{ margin:0; font-size:20px; letter-spacing:.6px; }
.card__meta{ margin-top:8px; font-size:12px; letter-spacing:1.4px; color:rgba(239,236,230,.50); }

/* Latest grid */
.grid{
  display:grid;
  grid-template-columns: 1.65fr 1fr 1fr;
  grid-auto-rows:170px;
  gap:16px;
}
.tile{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:rgba(10,10,12,.55);
  box-shadow: 0 16px 50px rgba(0,0,0,.52);
  transform:translateY(0);
  transition:transform .28s ease;
}
.tile:hover{ transform:translateY(-2px); }
.tile::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.52) 80%, rgba(0,0,0,.82) 100%);
}
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.06); }
.tile--big{ grid-row: span 2; grid-column:1; }

/* Footer */
.footer{ position:relative; z-index:5; padding:46px 0 40px; color:rgba(239,236,230,.62); }
.footer__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  border-top:1px solid rgba(239,236,230,.10);
  padding-top:22px;
}
.footer__name{
  font-family:"UnifrakturCook", ui-serif, serif;
  font-size:24px;
  color:rgba(239,236,230,.86);
}
.footer__nav{ display:flex; gap:22px; font-size:13px; color:rgba(239,236,230,.55); }
.footer__nav a:hover{ color:rgba(239,236,230,.90); }
.social{ display:flex; gap:12px; }
.icon-btn{
  width:34px; height:34px;
  display:grid; place-items:center;
  border:0;
  border-radius:10px;
  background:rgba(0,0,0,.26);
  color:rgba(239,236,230,.72);
  transition:transform .25s ease, background .25s ease;
}
.icon-btn:hover{ transform:translateY(-1px); background:rgba(0,0,0,.42); }

/* Mobile menu minimal (no outlines) */
.mobile{ display:none; }

@media (max-width: 940px){
  .cards{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr 1fr; grid-auto-rows:168px; }
  .tile--big{ grid-column:1 / -1; grid-row: span 1; }
}

@media (max-width: 720px){
  .nav{ display:none; }
  .burger{ display:block; }
  .hero{ padding-top:92px; min-height:88vh; }
  .hero__inner{ min-height: calc(88vh - 150px); }

  .mobile{
    display:block;
    position:fixed; inset:0;
    z-index:30;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  .mobile__backdrop{
    position:absolute; inset:0;
    background:rgba(0,0,0,.66);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .mobile__panel{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
  }
  .mobile__nav{ display:grid; gap:18px; }
  .mobile__nav a{
    font-family:"UnifrakturCook", ui-serif, serif;
    font-size:28px;
    letter-spacing:1px;
    color:rgba(239,236,230,.92);
  }
  .mobile__close{
    position:absolute;
    top:16px; right:16px;
    width:44px; height:44px;
    border:0;
    border-radius:12px;
    background:rgba(0,0,0,.25);
    color:rgba(239,236,230,.92);
    cursor:pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body.menu-open .mobile{ opacity:1; pointer-events:auto; }
}