/* =========================================================
   ALPHA Hotels & Resorts — "Prospekt"
   Local fonts · petrol accent · exposé layout
   ========================================================= */

/* ---------- local fonts ---------- */
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Spectral";src:url("fonts/spectral-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Spectral";src:url("fonts/spectral-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Spectral";src:url("fonts/spectral-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Spectral";src:url("fonts/spectral-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#141210;        /* near-black */
  --ink-soft:#3a352e;
  --paper:#faf9f7;      /* paper white */
  --sand:#e8e2d6;       /* warm sand block */
  --sand-line:#d9d1c2;
  --petrol:#1f4a47;     /* deep muted teal accent */
  --petrol-hi:#2f6b66;
  --line:rgba(20,18,16,.16);
  --line-soft:rgba(20,18,16,.09);
  --line-onink:rgba(250,249,247,.16);

  --grotesk:"Archivo",system-ui,sans-serif;
  --serif:"Spectral",Georgia,serif;
  --mono:"Plex Mono",ui-monospace,monospace;

  --wrap:1240px;
  --gut:clamp(1.25rem,4.5vw,3.5rem);   /* outer padding */
  --rail:clamp(2.5rem,9vw,7rem);        /* left index rail */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1rem,.96rem + .18vw,1.08rem);
  line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--petrol);color:var(--paper)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* ---------- utility type ---------- */
.tag{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--petrol);
}
.tag--onink{color:#9dc2be}
.reg{ /* running section register marker */
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
}
.h-display{
  font-family:var(--grotesk);font-weight:700;
  letter-spacing:-.02em;line-height:.96;
  text-transform:uppercase;
}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.brand__mark{font-family:var(--grotesk);font-weight:700;font-size:1.3rem;letter-spacing:.02em}
.brand__sub{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.nav a{font-family:var(--grotesk);text-decoration:none;font-size:.82rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.nav a:not(.nav__call):hover{color:var(--petrol)}
.nav__call{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  background:var(--petrol);color:var(--paper);padding:.5rem .85rem;
  border-radius:0;transition:background .2s;
}
.nav__call:hover{background:var(--petrol-hi)}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--paper);overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(105deg,rgba(20,18,16,.86) 0%,rgba(20,18,16,.5) 55%,rgba(31,74,71,.3) 100%);}
.hero__inner{
  display:grid;grid-template-columns:var(--rail) 1fr;
  min-height:min(90vh,820px);
  padding-block:clamp(3rem,8vh,5.5rem);
  align-items:end;
}
.hero__rail{writing-mode:vertical-rl;transform:rotate(180deg);
  align-self:stretch;display:flex;align-items:center;
  border-right:1px solid var(--line-onink);
  color:#c7d6d4;letter-spacing:.24em;}
.hero__body{padding-left:clamp(1.5rem,4vw,3.5rem)}
.hero__tag{margin-bottom:1.6rem}
.hero__title{
  font-family:var(--grotesk);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.7rem,1.4rem + 6vw,6.4rem);
  line-height:.92;letter-spacing:-.025em;
}
.hero__title em{font-style:normal;color:#9ecfca}
.hero__lede{
  margin-top:1.8rem;max-width:46ch;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  line-height:1.5;color:rgba(250,249,247,.9);
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:0;margin-top:2.4rem;
  border-top:1px solid var(--line-onink);max-width:640px;
}
.hero__meta span{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
  color:rgba(250,249,247,.78);
  padding:.9rem 1.4rem .9rem 0;flex:1 1 auto;
}

/* ---------- generic section frame with index rail ---------- */
.sec{border-bottom:1px solid var(--line)}
.sec__grid{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100%}
.sec__rail{
  border-right:1px solid var(--line);
  padding:clamp(2.5rem,6vw,4.5rem) 0 0;
}
.sec__rail .reg{writing-mode:vertical-rl;transform:rotate(180deg);
  position:sticky;top:90px;letter-spacing:.22em;color:var(--petrol);}
.sec__main{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)
  clamp(1.5rem,4vw,3.5rem);padding-right:var(--gut)}

.sec-title{
  font-family:var(--grotesk);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem);
  line-height:1;letter-spacing:-.02em;
}

/* ---------- about ---------- */
.about__lead{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1.4vw,2.05rem);
  line-height:1.28;letter-spacing:-.01em;margin:1.6rem 0 1.4rem;max-width:26ch;
}
.about__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);
  margin-top:2rem;max-width:60ch}
.about__cols p{color:var(--ink-soft)}
.about strong{font-weight:500;color:var(--ink)}
.pillars{list-style:none;margin-top:3rem;border-top:1px solid var(--line)}
.pillars li{display:grid;grid-template-columns:3.5rem 1fr;gap:1.2rem;align-items:baseline;
  padding:1.15rem 0;border-bottom:1px solid var(--line-soft)}
.pillars__no{font-family:var(--mono);font-size:.78rem;color:var(--petrol)}
.pillars__t{font-family:var(--grotesk);font-weight:600;font-size:1.15rem;letter-spacing:-.01em}
.pillars__d{grid-column:2;font-size:.95rem;color:var(--ink-soft);margin-top:.15rem}

/* ---------- projects / objekte ---------- */
.obj{border-bottom:1px solid var(--line)}
.obj:last-child{border-bottom:0}
.obj__grid{display:grid;grid-template-columns:var(--rail) 1fr;}
.obj__rail{border-right:1px solid var(--line);padding-top:clamp(2.5rem,6vw,4rem)}
.obj__rail .reg{writing-mode:vertical-rl;transform:rotate(180deg);color:var(--petrol)}
.obj__main{padding:clamp(2.5rem,6vw,4rem) var(--gut) clamp(3rem,7vw,4.5rem)
  clamp(1.5rem,4vw,3.5rem);
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.obj--alt .obj__main{grid-template-columns:1fr 1.1fr}
.obj--alt .obj__figure{order:2}
.obj__figure{position:relative;background:var(--sand);border:1px solid var(--line)}
.obj__figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.obj__no{position:absolute;top:0;left:0;font-family:var(--mono);font-size:.72rem;
  background:var(--ink);color:var(--paper);padding:.4rem .7rem;letter-spacing:.08em}
.obj__ey{font-family:var(--grotesk);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);line-height:1;letter-spacing:-.02em}
.obj__by{display:block;font-family:var(--mono);font-size:.72rem;font-weight:400;
  letter-spacing:.14em;color:var(--petrol);margin-top:.6rem;text-transform:uppercase}
.obj__lede{font-family:var(--serif);font-weight:300;font-size:1.15rem;line-height:1.45;
  margin:1.2rem 0 1.8rem;color:var(--ink-soft);max-width:42ch}
.spec{border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid var(--line-soft)}
.spec dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:.2rem}
.spec dd{font-family:var(--grotesk);font-weight:500;font-size:.98rem}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:var(--paper)}
.contact .sec__grid{grid-template-columns:var(--rail) 1fr}
.contact .sec__rail{border-right-color:var(--line-onink)}
.contact .sec__rail .reg{color:#9dc2be}
.contact__flex{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);
  padding:clamp(2.5rem,6vw,4.5rem) var(--gut) clamp(3rem,7vw,5rem) clamp(1.5rem,4vw,3.5rem)}
.contact__title{font-family:var(--grotesk);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,1.3rem + 3vw,3.6rem);line-height:.98;letter-spacing:-.02em}
.contact__title em{font-style:normal;color:#7db3ad}
.contact__cards{display:grid;gap:0;border-top:1px solid var(--line-onink)}
.ccard{padding:1.3rem 0;border-bottom:1px solid var(--line-onink);
  display:grid;grid-template-columns:7rem 1fr;gap:1rem;align-items:baseline}
.ccard__l{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#9dc2be}
.ccard__v a{display:block;color:var(--paper);text-decoration:none;font-family:var(--grotesk);
  font-size:1.02rem;word-break:break-word;transition:color .2s}
.ccard__v a:hover{color:#7db3ad}
.ccard__v address{font-style:normal;color:rgba(250,249,247,.85);line-height:1.5}

/* ---------- footer ---------- */
.site-foot{background:var(--petrol);color:var(--paper)}
.foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:2.4rem}
.foot__brand{display:flex;flex-direction:column;gap:.25rem}
.foot__brand .brand__mark{color:var(--paper)}
.foot__brand p{font-family:var(--mono);font-size:.72rem;color:rgba(250,249,247,.7)}
.foot__nav{display:flex;gap:1.6rem}
.foot__nav a{font-family:var(--grotesk);font-size:.85rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.02em;color:var(--paper);text-decoration:none}
.foot__nav a:hover{opacity:.7}
.foot__copy{width:100%;padding-top:1.4rem;border-top:1px solid var(--line-onink);
  font-family:var(--mono);font-size:.7rem;color:rgba(250,249,247,.7)}

/* ---------- legal pages ---------- */
.legal .sec__main{max-width:80ch}
.legal h1{font-family:var(--grotesk);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,1.4rem + 2.4vw,3rem);letter-spacing:-.02em;line-height:1;margin-top:.6rem}
.legal-body{max-width:70ch;margin-top:2.5rem}
.legal-body h2{font-family:var(--grotesk);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;
  margin:2.4rem 0 .7rem;padding-top:1.4rem;border-top:1px solid var(--line-soft)}
.legal-body h3{font-family:var(--grotesk);font-weight:600;font-size:1rem;margin:1.4rem 0 .4rem}
.legal-body p{margin-bottom:1rem;color:var(--ink-soft)}
.legal-body a{color:var(--petrol);text-decoration:underline;text-underline-offset:2px}
.legal-body ul{margin:0 0 1rem 1.1rem}
.legal-body li{margin-bottom:.4rem;color:var(--ink-soft)}
.legal-body strong{color:var(--ink);font-weight:500}
.note{background:var(--sand);border-left:3px solid var(--petrol);padding:1rem 1.2rem;
  font-family:var(--mono);font-size:.8rem;line-height:1.55;margin:1.5rem 0;color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:880px){
  :root{--rail:0px}
  .hero__inner{grid-template-columns:1fr}
  .hero__rail{display:none}
  .hero__body{padding-left:0}
  .sec__grid,.obj__grid,.contact .sec__grid{grid-template-columns:1fr}
  .sec__rail,.obj__rail{display:none}
  .sec__main,.obj__main,.contact__flex{padding-left:var(--gut)}
  .obj__main{grid-template-columns:1fr;gap:1.8rem}
  .obj--alt .obj__figure{order:0}
  .about__cols,.contact__flex{grid-template-columns:1fr}
  .nav a:not(.nav__call){display:none}
}
@media(max-width:520px){
  .spec>div,.ccard{grid-template-columns:1fr;gap:.15rem}
  .pillars li{grid-template-columns:2.5rem 1fr}
  .foot-inner{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}