/* ============================================================
   KEEPER'S LIGHT — Sleep in a living lighthouse
   Nocturnal coastal · lamp-amber on ink-navy · salt-worn
   Fonts: Bodoni Moda (display) · Karla (text) · Space Mono (data)
   ============================================================ */

:root{
  /* nocturnal coastal palette */
  --ink:      #070c14;   /* deepest night */
  --sea:      #0a1826;   /* dark sea */
  --navy:     #0e1f31;   /* panel navy */
  --navy-2:   #143049;   /* raised navy */
  --steel:    #33506b;   /* cold steel line */
  --lamp:     #f4b45e;   /* lamp amber — the accent */
  --lamp-dk:  #d98f3e;
  --beam:     #ffe6b0;   /* pale beam */
  --brass:    #caa25a;   /* weathered brass detailing */
  --red:      #c1503f;   /* daymark red */
  --beige:    #ece0c9;   /* weathered beige — primary text */
  --beige-dk: #c7bda6;
  --fog:      #8ea3b5;   /* fog-muted secondary */
  --fog-dk:   #647c90;

  --f-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --f-text: "Karla", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;

  --edge: clamp(20px, 5vw, 92px);
  --maxw: 1300px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-text);
  color:var(--beige);
  background:var(--ink);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   AMBIENT SIGNATURE LAYERS (fixed, behind content)
   ============================================================ */
.sea{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -20%, #10263c 0%, transparent 55%),
    linear-gradient(to bottom, #070c14 0%, #08131f 46%, #0a1a2a 72%, #0c2338 100%);
}
/* the drifting-fog canvas */
#fog{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  width:100%; height:100%;
  opacity:.9;
}

/* THE RAKING BEAM — rotating wide light wedge from the lantern.
   Sits ABOVE content (z 55) but below the nav (z 60), so its
   screen blend briefly brightens text/sections as it sweeps past. */
.beamwrap{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}
.lantern-glow{
  position:absolute; left:50%; top:6%;
  width:min(46vw,340px); height:min(46vw,340px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,230,176,.5) 0%, rgba(255,220,150,.14) 34%, transparent 68%);
}
.beam{
  position:absolute; left:50%; top:6%;
  width:260vmax; height:260vmax;
  margin-left:-130vmax; margin-top:-130vmax;
  transform-origin:50% 50%;
  background:conic-gradient(from -10deg at 50% 50%,
    transparent 0deg,
    rgba(255,231,183,.02) 3deg,
    rgba(255,231,183,.09) 8deg,
    rgba(255,244,214,.30) 13deg,
    rgba(255,231,183,.09) 18deg,
    rgba(255,231,183,.02) 23deg,
    transparent 30deg,
    transparent 360deg);
  animation:sweep 10s linear infinite;
  will-change:transform;
}
@keyframes sweep{ to { transform:rotate(360deg); } }

/* Reduced motion: park the beam lit across the hero, keep the page bright. */
@media (prefers-reduced-motion: reduce){
  .beam{ animation:none; transform:rotate(158deg); }
  .lantern-glow{ opacity:1; }
}

/* ---- skip link ---- */
.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--lamp); color:var(--ink); padding:10px 16px;
  border-radius:6px; text-decoration:none; font-family:var(--f-mono);
  font-size:12px; font-weight:700; transition:top .18s ease;
}
.skip:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--lamp); outline-offset:3px; border-radius:2px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px var(--edge);
  background:hsl(210 44% 6% / .72);
  backdrop-filter:blur(11px) saturate(1.1);
  -webkit-backdrop-filter:blur(11px) saturate(1.1);
  border-bottom:1px solid hsl(38 40% 62% / .16);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand svg{ width:28px; height:28px; flex:0 0 auto; display:block; }
.brand b{
  font-family:var(--f-display); font-weight:700; font-size:17px;
  letter-spacing:.02em; line-height:1; color:var(--beige);
}
.brand .txt>span{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--fog); display:block; margin-top:4px;
}
.navlinks{ display:flex; gap:26px; align-items:center; }
.navlinks a{
  color:var(--beige-dk); text-decoration:none; font-size:13.5px;
  letter-spacing:.01em; font-weight:500; position:relative; padding:4px 0;
}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--lamp); transition:width .3s cubic-bezier(.22,1,.36,1);
}
.navlinks a:hover{ color:var(--beige); }
.navlinks a:hover::after{ width:100%; }
.navlinks .tag{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--lamp);
  border:1px solid hsl(38 60% 55% / .4); padding:5px 10px; border-radius:20px;
}
.navlinks .tag::after{ display:none; }
.navtoggle{
  display:none; flex-direction:column; gap:5px; width:40px; height:36px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.navtoggle span{ height:2px; width:100%; background:var(--beige); border-radius:2px; transition:transform .25s, opacity .25s; }
.navtoggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navtoggle.open span:nth-child(2){ opacity:0; }
.navtoggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   SHARED
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); position:relative; z-index:2; }
main{ position:relative; z-index:2; }
section{ position:relative; }

.kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--lamp); display:flex; align-items:center; gap:12px; margin:0 0 18px;
}
.kicker .idx{ color:var(--fog-dk); }
.kicker::before{ content:""; width:26px; height:1px; background:var(--brass); opacity:.6; }
.h2{
  font-family:var(--f-display); font-weight:700; letter-spacing:.005em;
  font-size:clamp(28px,4.6vw,52px); line-height:1.06; margin:0 0 20px; color:var(--beige);
}
.lead{ font-size:clamp(16px,1.9vw,19px); color:var(--beige-dk); max-width:58ch; margin:0; }
.sec-head{ max-width:70ch; margin:0 0 clamp(40px,6vw,72px); }

.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; font-weight:700;
  color:var(--ink); background:var(--lamp); padding:13px 22px; border-radius:2px; border:0; cursor:pointer;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .2s;
  box-shadow:0 0 0 rgba(244,180,94,0);
}
.btn:hover{ transform:translateY(-2px); background:var(--beam); box-shadow:0 10px 34px -12px rgba(255,220,150,.6); }
.btn.wide{ width:100%; justify-content:center; margin-top:6px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:clamp(640px,96svh,940px);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:"copy art";
  align-items:center; gap:40px;
  padding:clamp(40px,8vh,110px) var(--edge) clamp(120px,16vh,160px);
  max-width:var(--maxw); margin:0 auto; position:relative;
}
.hero-inner{ grid-area:copy; max-width:640px; }
.eyebrow{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lamp); margin:0 0 24px; padding-left:2px;
}
.hero h1{
  font-family:var(--f-display); font-weight:900; letter-spacing:-.01em;
  font-size:clamp(44px,7.6vw,92px); line-height:.98; margin:0 0 28px; color:var(--beige);
}
.hero h1 .amber{ color:var(--lamp); font-style:italic; font-weight:700; }
.hero-lede{
  font-size:clamp(16px,2vw,20px); color:var(--beige-dk); max-width:52ch; margin:0 0 34px;
}
.hero-lede em{ color:var(--beige); font-style:italic; }
.hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

.horn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:transparent; border:1px solid hsl(38 40% 62% / .34); border-radius:2px;
  padding:12px 18px; color:var(--beige-dk); font-family:var(--f-mono);
  font-size:12px; letter-spacing:.04em; transition:border-color .2s, color .2s;
}
.horn:hover{ border-color:var(--lamp); color:var(--beige); }
.horn-dot{
  width:9px; height:9px; border-radius:50%; background:var(--fog-dk);
  box-shadow:0 0 0 0 rgba(244,180,94,0); transition:background .2s;
}
.horn[aria-pressed="true"]{ border-color:var(--lamp); color:var(--beige); }
.horn[aria-pressed="true"] .horn-dot{ background:var(--lamp); animation:hornpulse 2.4s ease-in-out infinite; }
@keyframes hornpulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(244,180,94,.5); }
  50%{ box-shadow:0 0 0 8px rgba(244,180,94,0); }
}
@media (prefers-reduced-motion: reduce){ .horn[aria-pressed="true"] .horn-dot{ animation:none; } }

/* hero art — tower + character */
.hero-art{ grid-area:art; display:flex; flex-direction:column; align-items:center; gap:22px; position:relative; }
.tower{ width:min(64%,240px); height:auto; filter:drop-shadow(0 26px 40px rgba(0,0,0,.5)); }
.lamp-halo{ animation:lampbreath 10s ease-in-out infinite; transform-origin:center; }
@keyframes lampbreath{ 0%,100%{ opacity:.5; } 8%{ opacity:1; } 20%{ opacity:.55; } }
@media (prefers-reduced-motion: reduce){ .lamp-halo{ animation:none; opacity:1; } }

.char{
  display:flex; align-items:center; gap:14px;
  background:hsl(210 42% 8% / .7); border:1px solid hsl(38 40% 62% / .2);
  border-radius:3px; padding:12px 18px; backdrop-filter:blur(4px);
}
.char-flash{
  width:16px; height:16px; border-radius:50%; background:var(--fog-dk);
  box-shadow:0 0 0 rgba(255,230,176,0);
}
.char-flash.lit{ background:var(--beam); box-shadow:0 0 18px 4px rgba(255,230,176,.85); }
.char-txt b{ font-family:var(--f-mono); font-size:15px; color:var(--lamp); display:block; letter-spacing:.06em; }
.char-txt span{ font-size:11.5px; color:var(--fog); }

.readout{
  position:absolute; left:var(--edge); right:var(--edge); bottom:clamp(28px,7vh,54px);
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:hsl(38 40% 62% / .16);
  border:1px solid hsl(38 40% 62% / .16); border-radius:3px; overflow:hidden;
}
.ro{ display:flex; flex-direction:column; gap:4px; padding:14px 18px; background:hsl(210 44% 6% / .82); }
.ro .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fog-dk); }
.ro .v{ font-family:var(--f-mono); font-size:14px; color:var(--beige); }
.ro .v.ok{ color:var(--lamp); }

/* ============================================================
   THE LIGHTS
   ============================================================ */
.lights{ padding:clamp(70px,11vh,130px) 0; }
.plates{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,34px); }
.plate{
  display:grid; grid-template-columns:132px 1fr; gap:22px;
  background:linear-gradient(180deg, hsl(210 42% 10% / .82), hsl(210 46% 7% / .82));
  border:1px solid hsl(38 40% 62% / .16); border-radius:4px;
  padding:26px; align-items:start;
  transition:border-color .35s, transform .4s cubic-bezier(.22,1,.36,1);
}
.plate:hover{ border-color:hsl(38 60% 60% / .5); transform:translateY(-4px); }
.plate-art{
  background:radial-gradient(120% 90% at 50% 0%, #10273d 0%, #081321 80%);
  border:1px solid hsl(210 40% 30% / .4); border-radius:3px; padding:8px;
  display:flex; align-items:flex-end; justify-content:center;
}
.plate-art svg{ width:100%; height:auto; display:block; }
.plate-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.plate h3{ font-family:var(--f-display); font-weight:700; font-size:23px; margin:0; color:var(--beige); }
.est{ font-family:var(--f-mono); font-size:12px; color:var(--brass); }
.coord{ font-family:var(--f-mono); font-size:11.5px; color:var(--lamp); margin:0 0 12px; letter-spacing:.02em; }
.plate .desc{ font-size:14.5px; color:var(--beige-dk); margin:0 0 16px; }
.specs{ display:flex; gap:22px; margin:0; flex-wrap:wrap; }
.specs>div{ display:flex; flex-direction:column; gap:2px; }
.specs dt{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog-dk); }
.specs dd{ font-family:var(--f-mono); font-size:13px; color:var(--beige); margin:0; }

/* ============================================================
   A NIGHT IN THE TOWER
   ============================================================ */
.night{ padding:clamp(70px,11vh,130px) 0; }
.night-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(34px,5vw,72px); align-items:start; }
.night .big{
  font-family:var(--f-display); font-weight:500; font-style:italic;
  font-size:clamp(20px,2.6vw,28px); line-height:1.3; color:var(--beige); margin:0 0 22px;
}
.night p{ color:var(--beige-dk); margin:0 0 18px; max-width:56ch; }
.night-log{
  background:linear-gradient(180deg, hsl(210 42% 10% / .82), hsl(210 46% 7% / .82));
  border:1px solid hsl(38 40% 62% / .18); border-radius:4px; padding:clamp(24px,3vw,34px);
  position:relative;
}
.log-h{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--lamp); margin:0 0 18px; }
.log{ list-style:none; margin:0 0 20px; padding:0; }
.log li{
  display:flex; gap:16px; padding:12px 0; font-size:14.5px; color:var(--beige-dk);
  border-bottom:1px dashed hsl(210 30% 40% / .3);
}
.log li:last-child{ border-bottom:0; }
.log .t{ font-family:var(--f-mono); font-size:12.5px; color:var(--lamp); flex:0 0 46px; }
.log-note{ font-size:13px; color:var(--fog); font-style:italic; margin:0; }

/* ============================================================
   THE KEEPERS
   ============================================================ */
.keepers{ padding:clamp(70px,11vh,130px) 0; }
.heritage{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:hsl(38 40% 62% / .16); border:1px solid hsl(38 40% 62% / .16);
  border-radius:4px; overflow:hidden;
}
.her{ background:hsl(210 44% 7% / .9); padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:10px; }
.her-n{ font-family:var(--f-mono); font-size:13px; color:var(--lamp); letter-spacing:.06em; }
.her h4{ font-family:var(--f-display); font-weight:700; font-size:19px; margin:0; color:var(--beige); line-height:1.15; }
.her p{ font-size:13.5px; color:var(--beige-dk); margin:0; }

/* ============================================================
   HOW TO STAY
   ============================================================ */
.stay{ padding:clamp(70px,11vh,130px) 0; }
.stay-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(34px,5vw,72px); align-items:start; }
.rules{ list-style:none; margin:28px 0 0; padding:0; }
.rules li{
  position:relative; padding:16px 0 16px 34px; font-size:15px; color:var(--beige-dk);
  border-top:1px solid hsl(210 30% 40% / .28);
}
.rules li:first-child{ border-top:0; }
.rules li b{ color:var(--beige); font-weight:700; }
.rules li::before{
  content:""; position:absolute; left:4px; top:22px; width:9px; height:9px; border-radius:50%;
  background:var(--lamp); box-shadow:0 0 10px 1px rgba(244,180,94,.5);
}
.booking{
  background:linear-gradient(180deg, hsl(210 44% 11% / .9), hsl(210 48% 7% / .9));
  border:1px solid hsl(38 40% 62% / .22); border-radius:4px; padding:clamp(26px,3vw,36px);
  position:sticky; top:92px;
}
.booking h3{ font-family:var(--f-display); font-weight:700; font-size:26px; margin:0 0 6px; color:var(--beige); }
.booking .sub{ font-size:13.5px; color:var(--fog); margin:0 0 22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fog-dk); margin-bottom:7px; }
.field input, .field select{
  width:100%; background:hsl(210 44% 5% / .7); border:1px solid hsl(210 30% 40% / .45);
  border-radius:3px; padding:12px 14px; color:var(--beige); font-family:var(--f-text); font-size:14.5px;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:var(--fog-dk); }
.field input:focus, .field select:focus{ outline:0; border-color:var(--lamp); box-shadow:0 0 0 3px rgba(244,180,94,.16); }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23caa25a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.note{ font-family:var(--f-mono); font-size:12px; margin:12px 0 0; min-height:1.2em; color:var(--fog); }
.note.ok{ color:var(--lamp); }
.rate{ font-size:13px; color:var(--fog); margin:20px 0 0; padding-top:18px; border-top:1px solid hsl(210 30% 40% / .3); }
.rate b{ color:var(--beige); font-family:var(--f-mono); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(70px,11vh,120px) 0; }
.contact-inner{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(34px,5vw,64px); align-items:start; }
.contact-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.ccol h4{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--lamp); margin:0 0 14px; }
.ccol a{ display:block; color:var(--beige); text-decoration:none; font-size:14.5px; margin-bottom:8px; border-bottom:1px solid transparent; width:fit-content; transition:border-color .2s; }
.ccol a:hover{ border-color:var(--lamp); }
.ccol p{ font-size:13.5px; color:var(--beige-dk); margin:8px 0 0; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ border-top:1px solid hsl(38 40% 62% / .16); padding:clamp(48px,7vh,80px) 0 40px; background:hsl(210 46% 4% / .6); position:relative; z-index:2; }
.ftop{ display:grid; grid-template-columns:minmax(0,1.6fr) 1fr 1fr; gap:40px; margin-bottom:44px; }
.fbrand b{ font-family:var(--f-display); font-weight:700; font-size:22px; color:var(--beige); display:block; margin-bottom:12px; }
.fbrand p{ font-size:13.5px; color:var(--fog); max-width:44ch; margin:0; }
.fcol h4{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--lamp); margin:0 0 14px; }
.fcol a{ display:block; color:var(--beige-dk); text-decoration:none; font-size:14px; margin-bottom:9px; transition:color .2s; }
.fcol a:hover{ color:var(--lamp); }
.fbar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid hsl(210 30% 40% / .24);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--fog-dk);
}
#foot-char{ color:var(--brass); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; grid-template-areas:"art" "copy"; text-align:left; gap:26px; padding-bottom:150px; }
  .hero-art{ order:-1; flex-direction:row; justify-content:flex-start; gap:26px; flex-wrap:wrap; }
  .tower{ width:120px; }
  .plates{ grid-template-columns:1fr; }
  .night-grid, .stay-grid, .contact-inner{ grid-template-columns:1fr; }
  .booking{ position:static; }
  .heritage{ grid-template-columns:repeat(2,1fr); }
  .contact-cols{ grid-template-columns:1fr 1fr; }
  .ftop{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .navlinks{
    position:fixed; inset:60px 0 auto 0; flex-direction:column; align-items:flex-start; gap:0;
    background:hsl(210 46% 5% / .97); backdrop-filter:blur(12px);
    padding:8px var(--edge) 20px; border-bottom:1px solid hsl(38 40% 62% / .16);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .24s, transform .24s;
  }
  .navlinks.open{ transform:none; opacity:1; pointer-events:auto; }
  .navlinks a{ width:100%; padding:13px 0; border-bottom:1px solid hsl(210 30% 40% / .2); font-size:15px; }
  .navlinks .tag{ margin-top:12px; }
  .navtoggle{ display:flex; }
  .readout{ grid-template-columns:repeat(2,1fr); }
  .plate{ grid-template-columns:88px 1fr; gap:16px; padding:18px; }
  .specs{ gap:16px; }
  .heritage{ grid-template-columns:1fr; }
  .contact-cols{ grid-template-columns:1fr; }
  .ftop{ grid-template-columns:1fr; gap:28px; }
  .fbar{ font-size:10px; }
}
@media (max-width:380px){
  .plate{ grid-template-columns:1fr; }
  .plate-art{ max-width:120px; }
}