/*
Theme Name: Cabo London
Theme URI: https://cabolondon.com
Description: Charcoal and clay. A chic, quiet theme for Cabo London — the Aldgate room. Built to be read on a phone, at night, by someone deciding where to spend their evening.
Author: Cococure
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: cabo
*/

/* ─────────────────────────────────────────────────────────────
   Palette. Charcoal that is warm rather than black, bone rather
   than white, and one clay accent that does all the pointing.
   Nothing here is pure #000 or #fff: both read cold on a phone
   at night and flatten warm skin tones in photography.
   ───────────────────────────────────────────────────────────── */
:root{
  --ground:#0E0C0B;
  --surface:#171412;
  --surface-2:#1F1A17;
  --clay:#C67A3C;
  --clay-deep:#B54118;
  --bone:#F0EBE5;
  --muted:#A2988D;
  --rule:#2A2522;

  --display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --body:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  --gutter:clamp(20px,5vw,64px);
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--bone);
  font-family:var(--body);font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:300;margin:0;line-height:1.05}
p{margin:0 0 1.1em}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--clay);font-weight:400;margin-bottom:18px;
}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ── Header ─────────────────────────────────────────────── */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  background:linear-gradient(to bottom,rgba(14,12,11,.92),rgba(14,12,11,0));
  transition:background .4s ease,padding .4s ease;
}
.site-head.is-stuck{background:var(--ground);padding-block:14px;border-bottom:1px solid var(--rule)}
.brand{font-family:var(--display);font-size:23px;letter-spacing:.3em;text-transform:uppercase}
.brand span{color:var(--clay)}
.nav{display:flex;gap:30px;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:var(--muted);transition:color .3s ease}
.nav a:hover{color:var(--bone)}
@media(max-width:820px){.nav{display:none}}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;align-items:center;position:relative;
  padding:120px 0 90px;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(198,122,60,.16),transparent 55%),
    radial-gradient(90% 70% at 10% 95%,rgba(181,65,24,.10),transparent 60%),
    var(--ground);
}
.hero h1{
  font-size:clamp(50px,11vw,132px);letter-spacing:.02em;margin-bottom:8px;
}
.hero h1 em{font-style:italic;color:var(--clay)}
.hero .lede{
  max-width:33ch;color:var(--muted);font-size:clamp(17px,2.1vw,21px);
  margin-top:26px;
}
.hero .meta{
  margin-top:44px;display:flex;flex-wrap:wrap;gap:14px 34px;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.hero .meta b{color:var(--bone);font-weight:400}

/* ── Buttons ────────────────────────────────────────────── */
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 30px;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;border:1px solid var(--clay);
  background:var(--clay);color:var(--ground);font-weight:500;
  transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.btn:hover{background:var(--clay-deep);border-color:var(--clay-deep);color:var(--bone)}
.btn--ghost{background:transparent;color:var(--bone);border-color:var(--rule)}
.btn--ghost:hover{background:transparent;border-color:var(--bone);color:var(--bone)}

/* ── Sections ───────────────────────────────────────────── */
.section{padding:clamp(72px,10vw,132px) 0}
.section--surface{background:var(--surface)}
.section h2{font-size:clamp(32px,5.2vw,58px);margin-bottom:22px}
.section .intro{max-width:52ch;color:var(--muted)}

.grid{display:grid;gap:2px;background:var(--rule);margin-top:56px}
@media(min-width:760px){.grid--3{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--surface);padding:clamp(28px,4vw,46px)}
.section--surface .cell{background:var(--ground)}
.cell h3{font-size:26px;margin-bottom:12px}
.cell p{color:var(--muted);font-size:16px;margin:0}
.cell .num{
  font-family:var(--display);font-size:15px;color:var(--clay);
  display:block;margin-bottom:20px;letter-spacing:.2em;
}

/* ── Nights list ────────────────────────────────────────── */
.nights{margin-top:52px;border-top:1px solid var(--rule)}
.night{
  display:grid;gap:6px 30px;padding:28px 0;border-bottom:1px solid var(--rule);
  align-items:baseline;
}
@media(min-width:760px){.night{grid-template-columns:150px 1fr auto}}
.night .day{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--clay);
}
.night h3{font-size:clamp(24px,3.4vw,34px)}
.night p{color:var(--muted);font-size:15px;margin:6px 0 0}
.night .time{font-size:13px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}

/* ── Visit ──────────────────────────────────────────────── */
.visit{display:grid;gap:2px;background:var(--rule);margin-top:56px}
@media(min-width:760px){.visit{grid-template-columns:1fr 1fr}}
.visit .cell address{font-style:normal;color:var(--muted);font-size:16px;line-height:1.9}
.visit .cell a{color:var(--clay)}
.visit .cell a:hover{color:var(--bone)}

/* ── Footer ─────────────────────────────────────────────── */
.site-foot{padding:64px 0 46px;border-top:1px solid var(--rule);background:var(--ground)}
.site-foot .row{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between;align-items:center}
.site-foot small{color:var(--muted);font-size:13px;letter-spacing:.05em}

/* ── Motion, kept quiet ─────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
::selection{background:var(--clay);color:var(--ground)}

/* ── Photography ────────────────────────────────────────────
   Type never sits directly on a photograph: the hero image is
   dropped behind a scrim heavy enough that the headline keeps its
   contrast whatever the picture turns out to be. Images are graded
   warm to match the room rather than left neutral.
   ───────────────────────────────────────────────────────── */
.hero--img{
  background:
    linear-gradient(to right,rgba(14,12,11,.94) 0%,rgba(14,12,11,.78) 46%,rgba(14,12,11,.55) 100%),
    var(--hero) center/cover no-repeat,
    var(--ground);
}
@media(max-width:760px){
  .hero--img{
    background:
      linear-gradient(to bottom,rgba(14,12,11,.72) 0%,rgba(14,12,11,.93) 62%,var(--ground) 100%),
      var(--hero) center/cover no-repeat,
      var(--ground);
  }
}
.shots{display:grid;gap:2px;background:var(--rule);margin-top:52px}
@media(min-width:760px){.shots{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.shot{margin:0;overflow:hidden;background:var(--surface)}
.shot img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  filter:saturate(1.02) contrast(1.02);
  transition:transform 1.2s cubic-bezier(.2,0,0,1);
}
.shot:hover img{transform:scale(1.03)}