/*
Theme Name: The Nightjar
Theme URI: https://example.com/the-nightjar
Author: Portfolio Project
Author URI: https://example.com
Description: A speakeasy told in four chapters — cinematic dark theme with cursor glow, orbiting rings, scroll-reveal chapters, and a candlelit hero. Built as a portfolio piece. Not a real establishment.
Version: 1.0
Requires at least: 5.0
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nightjar
*/


  :root{
    --ink:#0D0B0A;
    --ink-soft:#17110F;
    --cream:#EDE4D6;
    --muted:#A69B8C;
    --wine:#6E2436;
    --wine-light:#8F3C50;
    --gold:#C5A168;
    --gold-light:#E5B576;
    --mx:60%; --my:25%; --px:0px; --py:0px;
    --line: rgba(237,228,214,0.1);
    --shadow: 0 24px 60px rgba(0,0,0,0.55);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--ink);
    color:var(--cream);
    font-family:'DM Sans', sans-serif;
    font-weight:300;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
    .heroArt{transform:none !important;}
  }
  h1,h2,h3,h4{font-family:'Cormorant Garamond', serif; font-weight:600; color:var(--cream); line-height:1.05;}
  a{color:inherit; text-decoration:none;}
  .mono{font-family:'Space Mono', monospace;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 36px;}
  section{position:relative;}
  :focus-visible{outline:2px solid var(--gold); outline-offset:4px;}

  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold-light);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--gold); display:inline-block;}

  /* ============ GLOBAL VIBE LAYERS ============ */
  .grain{
    position:fixed; inset:-50%; opacity:0.05; pointer-events:none; z-index:200; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    animation: noise 0.25s steps(2) infinite;
  }
  .cursorGlow{
    position:fixed; width:520px; height:520px; z-index:1;
    left:calc(var(--mx) - 260px); top:calc(var(--my) - 260px);
    background:radial-gradient(circle, rgba(197,161,104,0.07), transparent 68%);
    pointer-events:none; transition:left 0.09s, top 0.09s;
  }
  @media (max-width:760px){ .cursorGlow{display:none;} }

  /* ============ HEADER ============ */
  .siteHeader{
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:92px;
    padding:0 clamp(24px,5vw,60px);
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(180deg, rgba(13,11,10,0.85), transparent);
    border-bottom:1px solid transparent;
    transition:background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
  }
  .siteHeader.scrolled{
    background:rgba(13,11,10,0.86);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
  }
  .brand{font:600 25px 'Cormorant Garamond', serif; display:flex; gap:12px; align-items:center;}
  .brand i{color:var(--gold); font-style:italic; font-weight:500;}
  .brandBird{font-size:18px; color:var(--gold); transform:rotate(-20deg); display:inline-block;}
  .siteNav{display:flex; gap:34px;}
  .siteNav a{
    font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
    color:rgba(237,228,214,0.65); position:relative;
  }
  .siteNav a::after{content:''; position:absolute; left:0; right:100%; bottom:-9px; height:1px; background:var(--gold); transition:right 0.35s;}
  .siteNav a:hover{color:var(--cream);}
  .siteNav a:hover::after{right:0;}
  .reserve{
    height:45px; padding:0 6px 0 20px;
    border:1px solid rgba(197,161,104,0.45);
    display:flex; align-items:center; gap:20px;
    font-family:'Space Mono', monospace; font-size:10px; letter-spacing:0.13em; text-transform:uppercase;
    transition:0.3s;
  }
  .reserve b{
    width:32px; height:32px; display:grid; place-items:center;
    background:var(--gold); color:#18110E; font-size:15px; font-style:normal;
  }
  .reserve:hover{background:var(--cream); color:var(--ink);}
  .menuToggle{display:none; background:none; border:0; padding:12px; cursor:pointer;}
  .menuToggle span{display:block; width:24px; height:1px; background:var(--cream); margin:7px 0; transition:0.3s;}
  @media (max-width:850px){
    .siteHeader{height:76px;}
    .siteNav{
      display:none; position:absolute; top:76px; left:0; right:0;
      padding:25px; background:#110E0D; flex-direction:column; text-align:center; gap:22px;
      border-bottom:1px solid var(--line);
    }
    .siteNav.open{display:flex;}
    .reserve{display:none;}
    .menuToggle{display:block;}
  }

  /* ============ HERO ============ */
  .hero{
    min-height:100svh; position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 75% 45%, rgba(110,36,54,0.30), transparent 45%),
      radial-gradient(circle at 17% 20%, rgba(110,36,54,0.16), transparent 42%),
      linear-gradient(120deg, #0B0908 35%, #17110F 100%);
  }
  .hero::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, transparent 49.9%, rgba(197,161,104,0.08) 50%, transparent 50.1%);
  }
  .orb{position:absolute; border-radius:50%; filter:blur(2px); border:1px solid rgba(197,161,104,0.12); pointer-events:none;}
  .orbOne{width:420px; height:420px; right:-240px; top:-220px; animation:float 11s ease-in-out infinite;}
  .orbTwo{width:280px; height:280px; left:-180px; bottom:-150px; animation:float 8s ease-in-out infinite reverse;}

  .heroGrid{
    width:min(1450px, 100%); min-height:calc(100svh - 92px); margin:0 auto;
    padding:60px clamp(28px,7vw,90px) 90px;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:40px; align-items:center;
    position:relative; z-index:3;
  }
  .heroCopy{padding-left:clamp(0px,3vw,40px);}
  .kicker{display:flex; align-items:center; gap:14px; margin-bottom:0;}
  .kicker span{width:34px; height:1px; background:var(--gold);}
  .hero h1{
    font:500 clamp(3.4rem,7.6vw,7.4rem)/0.98 'Cormorant Garamond', serif;
    letter-spacing:-0.02em; margin:36px 0 30px; position:relative; z-index:5;
  }
  .hero h1 .line{display:block; white-space:nowrap;}
  .hero h1 .line:nth-child(2){padding-left:clamp(20px,4vw,64px);}
  .hero h1 em{font-style:italic; font-weight:500; color:var(--gold);}
  .hero h1 i{font-style:normal; -webkit-text-stroke:1px var(--gold); color:transparent;}
  .hero .lede{max-width:440px; margin-left:clamp(0px,4vw,60px); font-size:0.95rem; line-height:1.85; color:rgba(237,228,214,0.62);}
  .heroActions{display:flex; align-items:center; gap:34px; margin:32px 0 0 clamp(0px,4vw,60px); flex-wrap:wrap;}
  .primary{
    font-family:'Space Mono', monospace; font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
    border-bottom:1px solid var(--gold); padding:0 0 9px;
  }
  .primary span{display:inline-block; margin-left:16px; transition:0.3s;}
  .primary:hover span{transform:translate(5px,5px);}
  .openNow{font-family:'Space Mono', monospace; font-size:9px; letter-spacing:0.14em; color:var(--muted); display:flex; align-items:center; gap:10px;}
  .openNow b{width:6px; height:6px; border-radius:50%; background:#849A77; box-shadow:0 0 0 5px rgba(132,154,119,0.1); animation:pulse 2s infinite; display:inline-block;}

  .reveal{opacity:0; transform:translateY(25px); animation:reveal 0.9s forwards;}
  .r1{animation-delay:0.35s;} .r2{animation-delay:0.48s;} .r3{animation-delay:0.62s;}
  .r4{animation-delay:0.8s;} .r5{animation-delay:0.95s;}

  /* ---- Hero art: real photo in orbiting glow frame ---- */
  .heroArt{
    height:min(640px,70vh); position:relative; display:grid; place-items:center;
    transform:translate(var(--px), var(--py));
    transition:transform 0.5s cubic-bezier(.2,.8,.2,1);
  }
  .moonGlow{
    position:absolute; width:min(440px,36vw); aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle at 40% 35%, #8F3C50 0, #642333 45%, #3E1721 71%);
    box-shadow:0 0 100px rgba(110,36,54,0.48);
    animation:breathe 7s ease-in-out infinite;
  }
  .orbit{position:absolute; border:1px solid rgba(197,161,104,0.3); border-radius:50%; animation:spin 18s linear infinite;}
  .orbit::after{content:''; position:absolute; width:7px; height:7px; background:var(--gold); border-radius:50%; top:18%; left:8%; box-shadow:0 0 14px var(--gold);}
  .orbitA{width:min(500px,40vw); height:min(380px,30vw); transform:rotate(-28deg);}
  .orbitB{width:min(380px,29vw); height:min(500px,40vw); transform:rotate(42deg); animation-duration:25s; animation-direction:reverse;}

  .heroPhoto{
    position:relative; z-index:3;
    width:min(320px,58vw); aspect-ratio:1; border-radius:50%; overflow:hidden;
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 9px rgba(13,11,10,0.9), var(--shadow);
    animation:glassFloat 5s ease-in-out infinite;
  }
  .heroPhoto img{width:100%; height:100%; object-fit:cover; display:block;}
  .heroPhoto img.kenburns{
    animation:kenburns 22s ease-in-out infinite alternate;
    transform-origin:38% 55%;
  }
  .heroPhoto.flicker::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(circle at 30% 65%, rgba(229,181,118,0.22), transparent 55%);
    animation:candleflicker 5s ease-in-out infinite;
    mix-blend-mode:soft-light;
  }
  .garnish{position:absolute; z-index:4; right:8%; top:10%; color:var(--gold-light); font-size:36px; filter:drop-shadow(0 0 10px rgba(229,181,118,0.5)); animation:twinkle 2.5s ease-in-out infinite;}

  .chapterTag{position:absolute; right:2%; top:6%; display:flex; flex-direction:column; font-family:'Space Mono', monospace; font-size:9px; letter-spacing:0.14em; color:var(--muted); z-index:5;}
  .chapterTag strong{font:500 24px 'Cormorant Garamond'; color:var(--cream); margin-top:3px;}
  .signature{position:absolute; left:-2%; bottom:4%; display:flex; flex-direction:column; padding-left:20px; border-left:1px solid var(--gold); z-index:5;}
  .signature span, .signature small{font-family:'Space Mono', monospace; font-size:8px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);}
  .signature strong{font:italic 500 24px 'Cormorant Garamond'; margin:4px 0; display:block;}

  .sideNote{
    position:absolute; left:25px; top:50%; z-index:5;
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:'Space Mono', monospace; font-size:8px; letter-spacing:0.15em; color:rgba(237,228,214,0.35);
  }
  .scrollCue{
    position:absolute; right:6%; bottom:25px; z-index:6;
    display:flex; align-items:center; gap:15px;
    font-family:'Space Mono', monospace; font-size:8px; letter-spacing:0.15em; color:var(--muted);
  }
  .scrollCue i{display:block; width:55px; height:1px; background:var(--gold); position:relative; overflow:hidden;}
  .scrollCue i::after{content:''; position:absolute; width:20px; height:100%; background:var(--cream); animation:scan 2s infinite;}

  @media (max-width:850px){
    .heroGrid{min-height:calc(100svh - 76px); grid-template-columns:1fr; padding-top:50px;}
    .heroArt{position:absolute; right:-18%; bottom:-8%; height:52vh; width:64%; opacity:0.8;}
    .moonGlow{width:65vw;}
    .orbitA, .orbitB{width:75vw; height:55vw;}
    .heroCopy{align-self:start; position:relative; z-index:5; padding-left:0;}
    .hero h1{margin:30px 0;}
    .hero .lede{margin-left:0; max-width:340px;}
    .heroActions{margin-left:0;}
    .signature, .chapterTag{display:none;}
    .sideNote{display:none;}
  }
  @media (max-width:520px){
    .hero h1 .line:nth-child(2){padding-left:16px;}
    .openNow{display:none;}
    .heroArt{right:-24%; bottom:-4%; width:75%; height:40vh;}
  }

  /* ============ ROOM / CHAPTER RAIL ============ */
  .room{
    padding:110px 0 0;
    background:linear-gradient(130deg, #15110F, #0C0A09);
    border-top:1px solid var(--line);
  }
  .room-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; padding-bottom:70px;}
  .room h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin:16px 0 22px;}
  .room h2 em{font-style:italic; color:var(--gold-light); font-weight:500;}
  .room p{color:var(--muted); max-width:52ch; margin-bottom:16px;}
  .room-stats{display:grid; gap:20px;}
  .room-stat{border-left:2px solid var(--gold); padding-left:20px;}
  .room-stat .num{font-family:'Cormorant Garamond', serif; font-size:2.2rem; font-weight:600; color:var(--gold-light);}
  .room-stat .label{font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:4px;}

  .chapterRail{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
    padding:38px 0; border-top:1px solid var(--line);
    font-family:'Space Mono', monospace; font-size:10px; letter-spacing:0.13em; color:var(--muted);
  }
  .chapterRail a{position:relative; padding-bottom:8px; transition:color 0.2s;}
  .chapterRail a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right 0.35s;}
  .chapterRail a:hover{color:var(--cream);}
  .chapterRail a:hover::after{right:0;}

  /* ============ DOT NAV ============ */
  .dotnav{position:fixed; right:30px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:16px;}
  .dotnav button{width:9px; height:9px; border-radius:50%; border:1px solid var(--gold); background:transparent; cursor:pointer; padding:0; transition:all 0.3s; position:relative;}
  .dotnav button::after{
    content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%);
    font-family:'Space Mono', monospace; font-size:0.65rem; letter-spacing:0.06em; color:var(--muted); white-space:nowrap;
    opacity:0; transition:opacity 0.2s; pointer-events:none;
  }
  .dotnav button:hover::after{opacity:1;}
  .dotnav button.active{background:var(--gold); transform:scale(1.3);}
  @media (max-width:900px){ .dotnav{display:none;} }

  /* ============ CHAPTERS ============ */
  .chapter{min-height:100vh; display:flex; align-items:center; padding:100px 0; position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
  .chapter-watermark{
    position:absolute; font-family:'Space Mono', monospace; font-weight:700;
    font-size:clamp(10rem,28vw,24rem); color:rgba(237,228,214,0.035);
    top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:0; user-select:none; pointer-events:none; line-height:1; white-space:nowrap;
  }
  .chapter .wrap{position:relative; z-index:2;}
  .chapter-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:center;}
  .chapter.reverse .chapter-grid{grid-template-columns:0.9fr 1.1fr;}
  .chapter.reverse .chapter-text{order:2;}
  .chapter.reverse .chapter-visual{order:1;}

  .chapter-text{opacity:0; transform:translateY(28px); transition:opacity 0.8s ease, transform 0.8s ease;}
  .chapter-text.in-view{opacity:1; transform:translateY(0);}
  .chapter-eyebrow{margin-bottom:20px;}
  .chapter h2{font-size:clamp(2.2rem,4.2vw,3.4rem); margin-bottom:20px;}
  .chapter h2 em{font-style:italic; color:var(--gold-light); font-weight:500; display:block;}
  .chapter p.desc{color:var(--muted); max-width:48ch; margin-bottom:30px;}

  .pour-list{display:grid; gap:14px;}
  .pour-item{display:flex; justify-content:space-between; align-items:baseline; padding-bottom:14px; border-bottom:1px dashed var(--line); max-width:440px;}
  .pour-item .name{font-size:1.02rem; color:var(--cream);}
  .pour-item .note{font-family:'Space Mono', monospace; font-size:0.68rem; color:var(--muted); letter-spacing:0.04em; margin-top:3px;}
  .pour-item .price{font-family:'Space Mono', monospace; font-size:0.92rem; color:var(--gold-light);}

  .chapter-visual{display:flex; flex-direction:column; align-items:center; gap:22px; opacity:0; transform:scale(0.9); transition:opacity 1s ease, transform 1s ease; position:relative;}
  .chapter-visual.in-view{opacity:1; transform:scale(1);}

  .porthole{
    width:min(380px,80vw); aspect-ratio:1; border-radius:50%; position:relative;
    box-shadow:
      0 0 0 2px var(--gold),
      0 0 0 9px rgba(13,11,10,0.92),
      0 0 70px rgba(110,36,54,0.35),
      var(--shadow);
    overflow:hidden;
    animation:breathe 8s ease-in-out infinite;
    transition:transform 0.4s ease;
  }
  .porthole img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02);}
  .porthole::before{
    content:''; position:absolute; inset:0; z-index:2;
    background:conic-gradient(from 220deg at 50% 50%, transparent 0deg, rgba(229,181,118,0.4) 8deg, transparent 20deg, transparent 360deg);
    opacity:0; transition:opacity 0.5s ease, transform 1.2s ease; transform:rotate(0deg);
  }
  .porthole:hover{transform:translateY(-6px) scale(1.015);}
  .porthole:hover::before{opacity:1; transform:rotate(300deg);}

  .pouring-now{text-align:center;}
  .pouring-now .eyebrow{margin-bottom:8px; justify-content:center;}
  .pouring-now .eyebrow::before{display:none;}
  .pouring-now h4{font-size:1.5rem; font-style:italic; font-weight:500;}

  /* ============ VISIT ============ */
  .visit{padding:110px 0; background:linear-gradient(130deg, #15110F, #0C0A09);}
  .visit-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  .visit h2{font-size:clamp(2rem,3.6vw,2.8rem); margin:16px 0 26px;}
  .visit h2 em{font-style:italic; color:var(--gold-light); font-weight:500;}
  .hours-table{width:100%; border-collapse:collapse;}
  .hours-table tr{border-bottom:1px solid var(--line);}
  .hours-table td{padding:13px 0; font-size:0.95rem; color:var(--muted);}
  .hours-table td:first-child{color:var(--cream); font-weight:500;}
  .hours-table td:last-child{text-align:right; font-family:'Space Mono', monospace; font-size:0.85rem;}
  .hours-table tr.closed td:last-child{color:var(--wine-light);}
  .visit-card{background:rgba(237,228,214,0.03); border:1px solid var(--line); border-radius:6px; padding:36px; display:flex; flex-direction:column; gap:18px; justify-content:center;}
  .visit-card p{color:var(--muted); font-size:0.96rem;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:2px;
    font-family:'Space Mono', monospace; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
    border:1px solid var(--gold); color:var(--cream); transition:background 0.2s, color 0.2s; align-self:flex-start;
  }
  .btn:hover{background:var(--gold); color:var(--ink);}

  footer{padding:50px 0 34px; border-top:1px solid var(--line);}
  .footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
  .footer-brand{font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.2rem;}
  .footer-note{font-family:'Space Mono', monospace; font-size:0.7rem; color:var(--muted); letter-spacing:0.04em;}

  @media (max-width:900px){
    .chapter-grid, .chapter.reverse .chapter-grid{grid-template-columns:1fr; gap:50px;}
    .chapter.reverse .chapter-text{order:1;}
    .chapter.reverse .chapter-visual{order:2;}
    .room-grid, .visit-grid{grid-template-columns:1fr;}
  }
  @media (max-width:520px){
    .wrap{padding:0 22px;}
    .chapter{padding:80px 0;}
  }

  @keyframes reveal{ to{opacity:1; transform:none;} }
  @keyframes float{ 50%{transform:translate(20px,14px);} }
  @keyframes breathe{ 50%{transform:scale(1.035); filter:saturate(1.15);} }
  @keyframes glassFloat{ 50%{transform:translateY(-12px);} }
  @keyframes twinkle{ 50%{transform:rotate(18deg) scale(0.8); opacity:0.6;} }
  @keyframes spin{ to{rotate:360deg;} }
  @keyframes pulse{ 50%{opacity:0.4;} }
  @keyframes scan{ from{left:-20px;} to{left:60px;} }
  @keyframes noise{ 0%{transform:translate(0);} 25%{transform:translate(3%,1%);} 50%{transform:translate(-2%,3%);} 75%{transform:translate(1%,-2%);} }
  @keyframes kenburns{ from{transform:scale(1);} to{transform:scale(1.1);} }
  @keyframes candleflicker{
    0%, 100%{opacity:0.5;}
    18%{opacity:0.8;}
    32%{opacity:0.4;}
    47%{opacity:0.75;}
    61%{opacity:0.45;}
    80%{opacity:0.7;}
  }