/* Peakline Intelligence — temporary marker page
   Concept: "the ridge". A survey instrument reading terrain in the dark.
   The name is the visual: peak lines = topographic contours. */

:root{
  --void:      #05070A;
  --ink:       #080C11;
  --text:      #C6D2D7;
  --text-dim:  #64757E;
  --text-ghost:#33424B;
  --signal:    #C8763A;
  --signal-lit:#EFA164;
  --hair:      rgba(120,160,170,.13);

  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gut: clamp(22px, 5vw, 68px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── the field ─────────────────────────────────────────── */
#field{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
}

/* radial darkening so the centre reads and edges recede */
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 52% 44%, transparent 0%, rgba(5,7,10,.18) 64%, rgba(5,7,10,.80) 100%);
}
/* fine film grain — kills banding, adds tooth */
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.11; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)} 33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)} 66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,3%)} 100%{transform:translate(0,0)}
}

main{ position:relative; z-index:3; }

/* ── corner readouts ───────────────────────────────────── */
.readout{
  position:fixed; z-index:4;
  display:flex; gap:.6em; align-items:baseline;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-ghost);
  pointer-events:none;
  opacity:0; animation:fadein 1.4s 1.1s forwards;
}
.readout--tl{ top:var(--gut); left:var(--gut); }
.readout--tr{ top:var(--gut); right:var(--gut); }
.readout--bl{ bottom:var(--gut); left:var(--gut); }
.readout--br{ bottom:var(--gut); right:var(--gut); }
.rk{ color:var(--text-ghost); opacity:.55; }
.rv{ color:var(--text-dim); }
@keyframes fadein{ to{ opacity:1 } }

/* ── stage ─────────────────────────────────────────────── */
.stage{
  min-height:100svh;
  display:grid; align-items:center;
  padding:calc(var(--gut) * 2.4) var(--gut);
}
.stage__inner{ max-width:min(980px, 100%); }

.eyebrow{
  margin:0 0 clamp(28px,5vh,54px);
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-ghost);
}

/* the wordmark: thin + very wide = precision instrument, not startup */
.wordmark{
  margin:0;
  font-family:var(--sans);
  font-weight:200;
  font-size:clamp(38px, 9.2vw, 118px);
  line-height:.94;
  letter-spacing:-.005em;
  color:#EAF1F3;
  text-wrap:balance;
}
.wordmark__line{ display:block; }
.wordmark__line--2{
  /* the second word sits under the first, tracked out — a ridge stepping down */
  padding-left:.055em;
  letter-spacing:.055em;
  font-size:.62em;
  color:#9FB2BA;
  margin-top:.18em;
}

.lede{
  margin:clamp(30px,5.5vh,58px) 0 0;
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(17px,2.1vw,23px);
  line-height:1.5;
  letter-spacing:.005em;
  color:#B9C7CD;
  max-width:34ch;
}
.lede__dim{ color:var(--text-dim); }

.cryptic{
  margin:clamp(24px,4vh,40px) 0 0;
  max-width:52ch;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--text-dim);
  border-left:1px solid var(--hair);
  padding-left:1.1em;
  cursor:default;
  transition:color .5s ease, border-color .5s ease;
}
.cryptic:hover{ color:#A9BAC1; border-color:rgba(200,118,58,.5); }

.scrollcue{
  margin-top:clamp(44px,8vh,86px);
  width:1px; height:clamp(38px,7vh,64px);
  background:linear-gradient(var(--hair), transparent);
  position:relative; overflow:hidden;
}
.scrollcue span{
  position:absolute; left:0; top:0; width:1px; height:34%;
  background:linear-gradient(transparent, var(--signal));
  animation:drop 2.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes drop{ 0%{transform:translateY(-110%)} 70%,100%{transform:translateY(330%)} }

/* ── doors panel ───────────────────────────────────────── */
.panel{ padding:clamp(72px,14vh,150px) var(--gut) clamp(56px,9vh,96px); }
.panel__inner{ max-width:980px; }

.section-label{
  margin:0 0 clamp(26px,4vh,44px);
  font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-ghost);
}

.doors{ display:grid; gap:1px; background:var(--hair); border-block:1px solid var(--hair); }

.door{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(16px,3vw,38px);
  align-items:start;
  padding:clamp(26px,4vw,42px) clamp(4px,1.5vw,18px);
  background:rgba(5,7,10,.62);
  text-decoration:none; color:inherit;
  transition:background .45s ease, padding-left .45s cubic-bezier(.2,.7,.3,1);
  overflow:hidden;
}
.door::before{ /* the signal edge that slides in */
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--signal); transform:scaleY(0); transform-origin:top;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.door:hover, .door:focus-visible{
  background:rgba(14,20,26,.78);
  padding-left:clamp(16px,2.4vw,32px);
  outline:none;
}
.door:hover::before, .door:focus-visible::before{ transform:scaleY(1); }

.door__idx{
  font-size:10.5px; letter-spacing:.2em; color:var(--text-ghost);
  padding-top:.45em;
}
.door__title{
  display:block;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(20px,2.9vw,32px); letter-spacing:.012em; line-height:1.15;
  color:#E4ECEF;
}
.door__desc{
  display:block; margin-top:.85em; max-width:46ch;
  font-size:13px; line-height:1.7; color:var(--text-dim);
}
.door__meta{
  display:block; margin-top:1.15em;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-ghost);
  transition:color .45s ease;
}
.door:hover .door__meta, .door:focus-visible .door__meta{ color:var(--signal-lit); }
.door__arrow{
  font-size:17px; color:var(--text-ghost); padding-top:.15em;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), color .4s ease;
}
.door:hover .door__arrow, .door:focus-visible .door__arrow{
  transform:translate(4px,-4px); color:var(--signal-lit);
}

.fineprint{
  margin:clamp(40px,7vh,72px) 0 0;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--text-ghost);
}

footer{
  display:flex; flex-wrap:wrap; gap:.75em;
  padding:0 var(--gut) clamp(96px,15vh,150px);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-ghost);
}
.dot{ opacity:.45; }

/* reveal-on-scroll */
[data-reveal]{ opacity:0; transform:translateY(14px); }
[data-reveal].in{ opacity:1; transform:none; transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1); }

/* decoding glyphs sit dimmer than resolved text */
.glyph{ color:var(--text-ghost); }

@media (max-width:640px){
  .readout--tl,.readout--tr,.readout--bl,.readout--br{ display:none; }
  .door{ grid-template-columns:auto 1fr; }
  .door__arrow{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain, .scrollcue span{ animation:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .readout{ opacity:1; animation:none; }
}


/* ── booking sheet ─────────────────────────────────────── */
.sheet{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:clamp(12px,3vw,44px); }
.sheet[hidden]{ display:none; }
.sheet__scrim{
  position:absolute; inset:0;
  background:rgba(3,5,7,.82);
  backdrop-filter:blur(7px) saturate(.7);
  animation:scrimIn .45s ease both;
}
@keyframes scrimIn{ from{ opacity:0 } to{ opacity:1 } }

.sheet__panel{
  position:relative;
  width:min(920px,100%); height:min(760px,88vh);
  display:flex; flex-direction:column;
  background:#080C11;
  border:1px solid rgba(120,160,170,.22);
  box-shadow:0 40px 120px rgba(0,0,0,.7);
  animation:panelIn .55s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) scale(.985) } to{ opacity:1; transform:none } }

.sheet__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px 14px 20px;
  border-bottom:1px solid rgba(120,160,170,.18);
}
.sheet__title{ font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-dim); }
.sheet__close{
  background:none; border:1px solid rgba(120,160,170,.22); color:var(--text-dim);
  width:30px; height:30px; cursor:pointer; font-size:12px; line-height:1;
  transition:color .3s ease, border-color .3s ease;
}
.sheet__close:hover, .sheet__close:focus-visible{ color:var(--signal-lit); border-color:rgba(200,118,58,.55); outline:none; }

.sheet__frame{ flex:1; width:100%; border:0; background:#0A0E13; }
.sheet__fallback{
  margin:0; padding:11px 20px; font-size:11px; letter-spacing:.06em; color:var(--text-ghost);
  border-top:1px solid rgba(120,160,170,.14);
}
.sheet__fallback a{ color:var(--text-dim); }
.sheet__fallback a:hover{ color:var(--signal-lit); }

body.sheet-open{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .sheet__scrim, .sheet__panel{ animation:none; }
}