@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/cormorant-upright.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url("/fonts/cormorant-italic.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* abidehost.com — the house that keeps the hours and the seasons */
:root{
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t:1.8s;
  --gutter:clamp(1.25rem,6vw,6rem);
}
html[data-hour="night"]{--bg:#0b1016;--ink:#e9e4d9;--accent:#e3a95c;--veil:11,16,22;--hero-ink:#efe9dc;--hero-shadow:0 1px 24px rgba(0,0,0,.55);--bar-ink:#efe9dc;--bar-shadow:0 1px 18px rgba(0,0,0,.6)}
html[data-hour="dusk"] {--bg:#131d26;--ink:#ece7dc;--accent:#e4a65a;--veil:19,29,38;--hero-ink:#f1ece1;--hero-shadow:0 1px 24px rgba(0,0,0,.5);--bar-ink:#f1ece1;--bar-shadow:0 1px 18px rgba(0,0,0,.55)}
html[data-hour="dawn"] {--bg:#ebe6de;--ink:#2b2f37;--accent:#b3743f;--veil:235,230,222;--hero-ink:#2f2b36;--hero-shadow:0 0 18px rgba(255,250,245,.85),0 0 4px rgba(255,250,245,.7);--bar-ink:#3b3642;--bar-shadow:0 0 14px rgba(255,250,245,.95),0 0 4px rgba(255,250,245,.9)}
html[data-hour="day"]  {--bg:#f1eee6;--ink:#262b32;--accent:#a66e39;--veil:241,238,230;--hero-ink:#262b32;--hero-shadow:0 0 18px rgba(255,255,255,.85),0 0 4px rgba(255,255,255,.7);--bar-ink:#2e3238;--bar-shadow:0 0 14px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--display);font-size:1.1rem;line-height:1.5;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease);-webkit-font-smoothing:antialiased;overflow:hidden}
::selection{background:var(--accent);color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---------- top bar ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:baseline;
  padding:clamp(1.1rem,2.4vh,1.8rem) var(--gutter);color:var(--bar-ink);text-shadow:var(--bar-shadow);transition:color var(--t) var(--ease)}
.mark{font-weight:500;letter-spacing:.32em;text-transform:uppercase;font-size:.78rem;text-decoration:none}
.clock{font-size:.95rem;letter-spacing:.08em;display:flex;gap:.6em;align-items:baseline;font-variant-numeric:tabular-nums}
.clock .dot{opacity:.6}

/* ---------- the scene ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;overflow:clip;isolation:isolate}
.sky{position:absolute;inset:0;z-index:0;background:var(--bg);transition:background-color var(--t) var(--ease)}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% 50%;opacity:0;transition:opacity 2.6s var(--ease)}
.scene.is-on{opacity:1}
.veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--veil),.18) 0%,rgba(var(--veil),0) 26%,rgba(var(--veil),0) 54%,rgba(var(--veil),.55) 78%,rgba(var(--veil),.94) 91%,rgb(var(--veil)) 100%);
  transition:background var(--t) var(--ease)}
.stars,.stars::after{position:absolute;inset:-10% 0 30% 0;pointer-events:none;opacity:0;transition:opacity 3s var(--ease);
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 27% 34%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 12%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1px 1px at 58% 26%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.3px 1.3px at 73% 15%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 86% 31%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.2px 1.2px at 93% 9%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1px 1px at 6% 40%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 49% 42%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.4px 1.4px at 65% 6%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1px 1px at 34% 23%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1px 1px at 80% 44%,rgba(255,255,255,.5),transparent 60%)}
.stars::after{content:"";inset:0;transform:translate(3%,2%) scale(1.15);opacity:0}
html[data-hour="night"] .stars{opacity:.75}
@media (prefers-reduced-motion:no-preference){
  html[data-hour="night"] .stars{animation:twinkle 6s ease-in-out infinite alternate}
  html[data-hour="night"] .stars::after{opacity:.6;animation:twinkle 9s ease-in-out infinite alternate-reverse}
  @keyframes twinkle{from{opacity:.45}to{opacity:.85}}
}
.mist{position:absolute;left:-20%;right:-20%;bottom:8%;height:28%;pointer-events:none;opacity:0;filter:blur(28px);
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.10) 35%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.10) 65%,transparent 100%);
  transition:opacity 3s var(--ease)}
html[data-hour="dawn"] .mist,html[data-hour="dusk"] .mist{opacity:.6}
html[data-season="autumn"][data-hour="dawn"] .mist{opacity:.8}
html[data-season="winter"] .mist{opacity:.25}
@media (prefers-reduced-motion:no-preference){
  .mist{animation:drift 60s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
}
.snow,.snow::after{position:absolute;inset:-12% 0 0 0;pointer-events:none;opacity:0;transition:opacity 3s var(--ease);
  background-image:
    radial-gradient(2px 2px at 8% 12%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1.5px 1.5px at 23% 44%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(2.2px 2.2px at 37% 21%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1.4px 1.4px at 52% 63%,rgba(255,255,255,.65),transparent 60%),
    radial-gradient(2px 2px at 66% 9%,rgba(255,255,255,.8),transparent 60%),
    radial-gradient(1.6px 1.6px at 79% 38%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(2.4px 2.4px at 91% 71%,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1.4px 1.4px at 15% 82%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.8px 1.8px at 45% 92%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 31%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(2px 2px at 85% 55%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.3px 1.3px at 30% 68%,rgba(255,255,255,.55),transparent 60%);
  background-size:420px 420px}
.snow::after{content:"";inset:0;background-size:290px 290px;transform:translateX(7%);opacity:.7}
html[data-season="winter"] .snow{opacity:.55}
html[data-season="winter"][data-hour="day"] .snow,html[data-season="winter"][data-hour="dawn"] .snow{opacity:.35}
@media (prefers-reduced-motion:no-preference){
  html[data-season="winter"] .snow{animation:fall 26s linear infinite}
  html[data-season="winter"] .snow::after{animation:fall 17s linear infinite reverse}
  @keyframes fall{from{background-position:0 -420px}to{background-position:28px 0}}
}

/* ---------- the words ---------- */
.hero-text{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:clamp(7.5rem,18vh,12rem);color:var(--hero-ink);text-shadow:var(--hero-shadow);transition:color var(--t) var(--ease)}
.title{font-weight:300;font-style:italic;font-size:clamp(4.6rem,12vw,11rem);line-height:.9;letter-spacing:-.015em;margin:0 0 .35em -.04em}
.title .full{font-style:normal;color:var(--accent);text-shadow:none}
.lede{margin:0;font-size:clamp(1.15rem,1rem + .8vw,1.6rem);letter-spacing:.04em;font-weight:400}
.stay{margin:.8rem 0 0;font-style:italic;font-size:clamp(1rem,.95rem + .35vw,1.2rem);letter-spacing:.02em;max-width:34em;opacity:0;transition:opacity 1.4s var(--ease)}
.stay.is-on{opacity:.85}

/* ---------- the foot: a note and the choices ---------- */
.foot{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:clamp(1.3rem,3.5vh,2.4rem);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  color:var(--bar-ink);text-shadow:var(--bar-shadow);transition:color var(--t) var(--ease)}
.note{margin:0;max-width:26em;font-weight:500;font-size:.88rem;letter-spacing:.02em;line-height:1.35;opacity:.78}
.choices{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;flex-shrink:0}
.row{display:flex;gap:1.5rem}
.row button{text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;font-weight:500;opacity:.72;padding:.4rem 0;position:relative;transition:opacity .4s}
.row button::after{content:"";position:absolute;left:50%;bottom:-.1rem;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateX(-50%) scale(0);transition:transform .4s var(--ease)}
.row button:hover,.row button[aria-pressed="true"]{opacity:1}
.row button[aria-pressed="true"]::after{transform:translateX(-50%) scale(1)}

@media (max-width:700px){
  .hero-text{bottom:clamp(10.5rem,27vh,13rem)}
  .title{font-size:clamp(3.8rem,15vw,5rem)}
  .foot{flex-direction:column;align-items:flex-start;gap:.9rem}
  .choices{align-items:flex-start}
  .row{gap:1.1rem;flex-wrap:wrap}
  .note{font-size:.8rem;max-width:30em}
  .clock{font-size:.85rem}
}
@media (max-height:560px){
  .hero-text{bottom:6.5rem}
  .title{font-size:clamp(3.4rem,9vw,6rem)}
  .note{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scene{transition:opacity .6s}
  .stay{transition:none}
}