/* Fells Coffee — coming soon / Cloudflare Pages. All type stays real HTML. */
:root {
  color-scheme: light;
  --paper: #fbfaf8;
  --ink: #292e2c;
  --muted: #666e69;
  --serif: Georgia, "Times New Roman", serif;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}
*,*::before,*::after { box-sizing: border-box; }
html { min-height:100%; background:var(--paper); }
body { min-height:100%; margin:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
.hero {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  text-align:center;
  background:var(--paper);
}
/* Defense in depth: native hidden attribute plus initial inline style.
   This rule is deliberately !important to defeat transitions on first paint. */
.reveal-art[hidden],.close-peek[hidden] { display:none !important; }
.reveal-art {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:scale(1.025);
  transform-origin:center 75%;
  transition:
    opacity 2500ms cubic-bezier(.48,.04,.18,1),
    transform 2900ms cubic-bezier(.48,.04,.18,1),
    visibility 0s linear 2900ms;
}
.hero.is-revealed .reveal-art {
  opacity:1;
  visibility:visible;
  transform:scale(1);
  transition:
    opacity 3350ms cubic-bezier(.44,.06,.14,1) 130ms,
    transform 3550ms cubic-bezier(.44,.06,.14,1) 80ms,
    visibility 0s linear 0s;
}
.scene-picture,.fog-veil { position:absolute; inset:0; display:block; }
.scene-picture img {
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center bottom;
  filter:saturate(.72) contrast(.92) blur(.28px);
  user-select:none;
}
/* Soft optical haze—there is no vignette frame or horizontal image boundary. */
.fog-veil {
  background:
    radial-gradient(ellipse 82% 57% at 50% 78%, rgba(251,250,248,.04) 0%, rgba(251,250,248,.17) 51%, rgba(251,250,248,.42) 100%),
    linear-gradient(180deg, rgba(251,250,248,.05) 0%, rgba(251,250,248,.10) 55%, rgba(251,250,248,.23) 100%);
}
.fog-wisp {
  position:absolute;
  left:-20%;
  width:140%;
  height:24%;
  pointer-events:none;
  opacity:.24;
  filter:blur(30px);
  background:radial-gradient(ellipse at 50% 50%, rgba(251,250,248,.7), rgba(251,250,248,0) 70%);
  animation:mistdrift 22s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.fog-wisp--a { bottom:27%; }
.fog-wisp--b { bottom:7%; animation-duration:29s; animation-direction:alternate-reverse; }
.is-revealed .fog-wisp { animation-play-state:running; }
@keyframes mistdrift { from { transform:translateX(-3%); } to { transform:translateX(3%); } }

.content {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  flex-direction:column;
  width:min(100%,1100px);
  padding:clamp(38px,5.4vh,65px) 24px 12px;
}
.brand {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font:400 clamp(20px,2.1vw,27px)/1.3 var(--serif);
  letter-spacing:.265em;
  white-space:nowrap;
}
.mountain-mark { display:block; width:110px; height:40px; }
.rule {
  flex:none;
  width:38px; height:1px;
  margin:clamp(34px,5.8vh,58px) 0 25px;
  background:#c4b6a7;
}
h1 {
  margin:0;
  font:400 clamp(43px,5.1vw,76px)/1.07 var(--serif);
  letter-spacing:-.055em;
  text-wrap:balance;
}
.details {
  max-width:530px;
  margin:23px 0 24px;
  font:400 clamp(15px,1.26vw,18px)/1.61 var(--serif);
  color:#5d6560;
  text-wrap:pretty;
}
.quote-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:51px;
  padding:13px 27px;
  border-radius:999px;
  color:#fff;
  background:var(--ink);
  font:16px/1.25 var(--serif);
  text-decoration:none;
  box-shadow:0 7px 22px rgba(28,31,29,.13);
  transition:transform .35s ease,background .35s ease;
}
.quote-link:hover { background:#414b46; transform:translateY(-2px); }
.quote-arrow { display:block; flex:none; transition:transform .4s ease; }
.quote-link:hover .quote-arrow,.quote-link:focus-visible .quote-arrow { transform:translateX(3px); }
.peek-trigger {
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  justify-content:center;
  margin-top:10px;
  min-height:44px;
  padding:10px 8px;
  border:none;
  border-radius:0;
  background:transparent;
  color:#626b65;
  font:13px/1.3 Arial,Helvetica,sans-serif;
  letter-spacing:.03em;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:#aeb4ae;
  text-underline-offset:6px;
  transition:opacity .45s ease, color .25s ease, visibility 0s linear 0s;
}
.peek-trigger:hover { color:#202923; }
.is-revealed .peek-trigger {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease,visibility 0s linear .4s;
}
/* Intentionally a TEXT LINK, not a pill. No box, circle or focus halo on click. */
.close-peek {
  appearance:none;
  position:absolute;
  z-index:4;
  top:max(28px,env(safe-area-inset-top));
  right:max(32px,env(safe-area-inset-right));
  display:inline-flex;
  gap:9px;
  align-items:center;
  min-height:40px;
  padding:6px 2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#515b55;
  font:13px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  text-decoration:none;
  opacity:0;
  transition:opacity .7s ease .4s,color .2s ease;
}
.close-peek span { border-bottom:1px solid #a2aaa3; padding-bottom:5px; }
.close-peek svg { transform:translateY(-2px); }
.hero.is-revealed .close-peek { opacity:1; }
.close-peek:hover { color:#151e1a; }
/* Keyboard users get a compact accessible outline, not an enormous capsule. */
button:focus-visible,a:focus-visible { outline:2px solid #65776d; outline-offset:4px; }
.bottom-caption {
  position:relative;
  z-index:2;
  margin:auto auto 0;
  padding:20px 12px max(18px,env(safe-area-inset-bottom));
  color:#777c77;
  font:10px/1.6 Arial,Helvetica,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:opacity .95s ease;
}
.bottom-caption span { padding:0 7px; }
.hero.is-revealed .bottom-caption { opacity:0; }
@media (max-width:700px) {
  .hero { min-height:max(100svh,720px); }
  .content { padding:30px 20px clamp(280px,36vh,400px); }
  .brand { font-size:clamp(18px,5vw,22px); letter-spacing:.2em; }
  .mountain-mark { width:98px; height:35px; }
  .rule { margin:34px 0 24px; }
  h1 { font-size:clamp(41px,9.5vw,57px); line-height:1.05; }
  .details { max-width:420px; font-size:15px; margin:18px 0 21px; line-height:1.56; }
  .quote-link { min-height:50px; padding:13px 21px; font-size:15px; }
  .peek-trigger { margin-top:8px; }
  .close-peek { top:max(10px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); font-size:12px; }
  .fog-veil { background:
    radial-gradient(ellipse 100% 44% at 50% 78%,rgba(251,250,248,.04),rgba(251,250,248,.27) 80%,rgba(251,250,248,.39)),
    linear-gradient(to bottom,rgba(251,250,248,.03),rgba(251,250,248,.17)); }
  .bottom-caption { font-size:9px; }
}
@media (max-width:360px) {
  .content { padding-left:14px; padding-right:14px; }
  h1 { font-size:41px; }
  .details { font-size:14px; }
  .brand { letter-spacing:.17em; }
  .bottom-caption { letter-spacing:.1em; }
}
@media (max-height:720px) and (min-width:701px) {
  .content { padding-top:19px; }
  .rule { margin:20px 0 15px; }
  h1 { font-size:clamp(40px,4.8vw,65px); }
  .details { margin:15px 0 17px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal-art { transform:none !important; }
  .quote-link:hover { transform:none !important; }
}