/* ===== Global, mobile-first (sitewide) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { display:block; width:100%; height:100%; overflow-x:hidden; }
:root{ --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem; --header-h: clamp(70px, 14vw, 120px); }
img, video, iframe { max-width:100%; height:auto; }
body{ font-family:"Courier Prime Serif", Sans-serif; font-size:18px; margin:0; color:#fff; background:#121313; min-height:100vh; display:flex; flex-direction:column; overflow-x:hidden; }
body.has-fixed-header{ padding-top: 70px; }

#wip-banner {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffcc00;
  padding: 10px;
  text-align: center;
  z-index: 9999;
}

#wip-banner button {
  margin-left: 10px;
  padding: 4px 8px;
  cursor: pointer;
}

.about {    width: stretch;}

/* Headings / paragraphs center by default */
h1, h2, h3, h4, p { text-align: center; }

h1{ font-family:"EB Garamond", Sans-serif; font-size:34pt; font-weight:bold; color:#f5d2a0; text-shadow:2px 2px 4px rgba(0,0,0,.3); margin:0; }
h2{ font-size:28pt; margin:10px 10px; font-family:"EB Garamond", Sans-serif; color:#f5d2a0; font-style:italic; font-weight:400; text-shadow:2px 2px 4px rgba(0,0,0,.3); }

p{ font-family:"Courier Prime Serif", Sans-serif; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height:1.5; margin-block-start: 0; margin-block-end: 0;}
a{ color:#f5d2a0; text-decoration:none; }

/* ===== Header (mobile-first) ===== */
.search-container{ position:fixed; top:0; left:0; width:100%; z-index:999; background: linear-gradient(90deg, #181919 20%, #0f1d1a); border:1px solid #3a3e43; box-shadow:0 2px 4px rgba(0,0,0,.3); max-width:100%; }
.header-bar{ display:flex; align-items:center; justify-content:space-between; padding:6px 10px; max-width:100%; height: 70px;}
.logo{ display:flex; height:36px; align-items:center; }
.logo img{ width:36px; height:36px; margin-right:12px; }
.logotext{ font-family:"EB Garamond", Sans-serif; font-weight:200; font-size: 25pt; color:#f5d2a0; text-shadow: 2px 2px 4px rgba(0,0,0,.3); margin:0; }
.Social{ padding: .6rem .75rem;}

/* Burger (mobile) */
.nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background:transparent; border:0; padding:0; margin-left:auto; margin-right:6px; cursor:pointer; }
.nav-toggle .bar{ width:24px; height:2px; background:#f5d2a0; display:block; }

/* Collapsible nav (mobile) */
.site-nav{ position:absolute; top:100%; left:0; right:0; background: linear-gradient(90deg, #181919 20%, #0f1d1a); border-bottom:1px solid #3a3e43; box-shadow: 0 4px 12px rgba(0,0,0,.3); padding:8px 12px 12px; max-width:100%; display: flex;
    flex-direction: column;
    align-items: flex-end;}
[hidden]{ display:none !important; }
.site-nav .FlexboxRow{ display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; margin:10px; }
.Menuitem{ font-family:"Cormorant Garamond", Sans-serif; font-size:16pt; font-weight:600; color:#f5d2a0; padding:.6rem .75rem; }

/* ===== Buttons ===== */
.book-now-button{ border:1.8px solid #f5d2a0; color:#f5d2a0; background:transparent; font-family:"EB Garamond", Sans-serif; font-weight:600; letter-spacing:.04em; padding:12px 26px; border-radius:999px; line-height:1.1; font-size: clamp(0.95rem, 3.5vw, 1.05rem); order: 5; }
.book-now-button:focus-visible{ outline:2px solid #f5d2a0; outline-offset:3px; }

/* ===== Hero ===== */
.crypt-hero{ display:flex; flex-direction:column; width:100%; overflow-x:clip;}
.crypt-hero-media{ position:relative; flex:1; overflow:hidden; min-height:40vh; }
.crypt-hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.crypt-hero-panel{ flex:1; display:flex; align-items:center; justify-content: center; flex-direction:column; background-position:center; justify-content: center; background-size:cover; background-repeat:no-repeat; padding:10px; overflow-x:clip; max-width:100%; }
.crypt-hero-header{ max-width: min(90vw, 50rem); display:flex; text-align:center; color:#f5d2a0; font-family:"EB Garamond", Sans-serif; align-items:center; flex-direction:column; }
.header-logo-text{ text-shadow:3px 3px 6px rgb(0 0 0); text-align:center; font-size: clamp(1.6rem, 7vw, 100px); font-weight:400; line-height:1.08; color:#f5d2a0; margin-top:20px; order: 1;}
.gold-divider{ width:120px; display:block; margin:20px; order: 2; }
.header-text{ text-shadow:3px 3px 6px rgb(0 0 0); text-align:center; font-size: 40pt; font-weight:400; font-style:italic; line-height:1.25; color:#f5d2a0; margin: 20px; order: 3;}
@media (max-width:480px){ .header-text{ line-height:1.3; } }
.hero-p{ color:#fff; font-size: clamp(1rem, 3.8vw, 1.0625rem); line-height:1.6;}
.hero-copy-wrap{ width:min(90vw, 600px); margin-bottom:20px; order: 4;}
.hero-sigil{ height:25vw; }
@media (max-width:768px){ .hero-sigil{ display:none !important; } }
.crypt-hero-title{ margin:10px; font-family:"EB Garamond", Sans-serif; color:#f5d2a0; font-style:italic; font-weight:400; text-shadow: 2px 2px 4px rgba(0,0,0,.3); }
@media (max-width:1200px){ .hero-sigil{ display:none !important; } .header-logo-text{display:none !important; } .gold-divider{ order: 4; }  .crypt-hero {min-height: 67vh;}
.TitleboxIndex{ text-align:center; padding: 20px;} .header-text {padding-bottom: 0;}}


/* Ensure hero halves split 50/50 and stretch equally */
.crypt-hero-media,
.crypt-hero-panel {
  flex: 1 1 0%;
}

/* Let the map fill its half */
.crypt-hero-media {
  display: flex;          /* helps iframe stretch reliably across browsers */
}
.crypt-hero-media iframe{
  display: block;
  width: 100%;
  border: 0;
  flex: 1 1 auto;
}

/* Desktop row layout and equal heights */
@media (min-width:900px){
  .crypt-hero{
    flex-direction: row;
    min-height: 67vh;
    align-items: stretch;
  }
  .crypt-hero-media{
    min-height: 0;        /* allow it to match the row height */
  }
}


/* Center hero inner stack */
.crypt-hero-copy{ display:flex; flex-direction:column; align-items:center; text-align:center; padding: 5%;}
.crypt-hero-cta{ display:inline-block; margin-top:3rem; font-size:.85rem; letter-spacing:.15em; color:#f5d2a0; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:.3rem; align-self:center; margin-left:auto; margin-right:auto; }

/* Center the handle links under artist bios */
.artists-at{ display:block; margin:.5rem auto 0; text-align:center; color:#f5d2a0; text-decoration:none; }

/* ===== Title boxes & hard centering ===== */
.Titlebox{ text-align:center; }
.TitleboxIndex, .Titlebox{ display:grid; justify-items:center; width:100%; }
.TitleboxIndex h1, .TitleboxIndex h2, .Titlebox h1, .Titlebox h2{ margin-inline:0 !important; justify-self:center; }
.TitleboxIndex .gold-divider, .Titlebox .gold-divider, .TitleboxIndex img[alt~="gold" i], .Titlebox img[alt~="gold" i]{ display:block; margin-left:auto; margin-right:auto; justify-self:center; }

/* ===== Instagram grid ===== */
.instagram-grid{ display:grid; grid-template-columns:1fr; gap:16px; width:min(92%, 1200px); margin-inline:auto; }
.instagram-grid iframe{ width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden; }

/* ===== Footer ===== */
footer{ margin-top:auto; width: -webkit-fill-available;}
.FlexboxRowFooter{ display:flex; flex-direction:row; justify-content:space-evenly; background: linear-gradient(90deg, #181919 20%, #0f1d1a); border:1px solid #3a3e43; box-shadow: 0 2px 4px rgba(0,0,0,.3); z-index:5; margin-top:60px; flex-wrap:wrap; }
.FlexboxRowFooter a{ display:block; color:#b9b9b9; text-decoration:none; margin-bottom:10px; font-size:9pt; }
.FlexboxRowFooter p{ display:block; color:#fff; margin-bottom:10px; font-size:12px; margin-left:0; }
.FlexboxFooter{ display:flex; flex-direction:column; justify-content:flex-start; padding:5px; }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){ *{ animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ===== Breakpoints ===== */
@media (min-width:480px){ .instagram-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:768px){ .instagram-grid{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:900px){ .crypt-hero{ flex-direction:row; min-height:67vh; } .crypt-hero-media{ min-height:auto; } }

/* ===== Desktop polish (>=1200px) ===== */
@media (min-width: 1200px){
  /* Header/nav layout: brand left, menu centered, socials right */
  .nav-toggle{ display:none; } 
  .search-container{ min-height:70px; }
  .header-bar{ padding: 10px 24px; }
  .search-container{ position:fixed; top:0; left:0; right:0; display:block; }
  .site-nav{
    position:absolute; top:0; left:0; right:0; width:100%; transform:none;
    height: 70px; display:flex !important; align-items:center; justify-content:center; padding:0 24px;
    background:transparent; border:0; box-shadow:none;
  }
  .site-nav .FlexboxRow{ display:flex; flex-direction:row; align-items:center; gap:70px; margin:0; }
  .site-nav .Menuitem{ font-family:"Cormorant Garamond", Sans-serif; font-weight:600; font-size:20px; color:#f5d2a0; padding:0; margin:0; }
  .site-nav .Menuitem:hover{ text-decoration:underline; }
  .site-nav .Social{ position:absolute; right:16px; top:50%; transform:translateY(-50%); display:flex !important; align-items: flex-end; gap:12px; padding: .6rem .75rem; }
  .site-nav .socialicon{ width:30px; height:30px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));}
  .header-text{ order: 3; }
  /* Hero 1 layout: two columns with left-aligned type and right emblem */
  .crypt-hero:first-of-type .crypt-hero-panel{
    display:flex; flex-direction: row; grid-template-columns: 1.2fr 0.8fr; column-gap: min(6vw, 80px); align-items:center; background-attachment:fixed;
  }
  .crypt-hero{min-height:100vh;}
  .crypt-hero:first-of-type .crypt-hero-header{align-items: center; text-align:right; margin-left:min(6vw, 80px); }
  .crypt-hero:first-of-type .header-logo-text{ font-size: clamp(64px, 7vw, 110px); line-height:1.05; margin:0 0 10px 0; }
  .crypt-hero:first-of-type .header-text{ font-size: 40pt; max-width: 550px;}
  .crypt-hero:first-of-type .hero-p{ max-width: 640px; }
  .crypt-hero:first-of-type .hero-sigil{ height: min(36vw, 520px); justify-self:center; align-self:center; }
  .TitleboxIndex{ text-align:center; padding-top: 5%; padding-bottom: 5%; padding-right: 25%; padding-left: 25%;}
}