/*
  Home hero — spectral field.

  The rest of the page styles itself with inline attributes (it is a Claude
  Design export). The hero is the one section that needs real CSS — hover,
  keyframes and media queries that inline styles cannot express — so it keeps
  its own stylesheet and its own `hf-` prefix.
*/

.hf-hero{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#0F0E0C;
  padding-top:clamp(84px,12vh,140px);
}
@supports (min-height:100svh){ .hf-hero{ min-height:100svh } }

/* --- the field ----------------------------------------------------------- */
.hf-field{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:#000;
}
.hf-field canvas{
  display:block; width:100%; height:100%;
  /* Held back until the first frame lands, so a cold start shows the ground
     colour rather than a white flash of unpainted canvas. */
  opacity:0; transition:opacity .9s cubic-bezier(.16,1,.3,1);
}
.hf-field canvas.is-live{ opacity:1 }

/* Blends the field's black edge into the page ground below, and darkens the
   top so the fixed nav stays readable over a bright peak. */
.hf-veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(15,14,12,.86) 0%,
    rgba(15,14,12,.20) 22%,
    rgba(15,14,12,.16) 55%,
    rgba(15,14,12,.80) 86%,
    #0F0E0C 100%);
}
/* A whisper of the brand accent, low in the frame, so the cool field still
   reads as part of this site. */
.hf-warm{
  position:absolute; inset:0;
  background:radial-gradient(120% 70% at 50% 92%, rgba(200,85,61,.13), rgba(15,14,12,0) 62%);
}
/* The field's peak is bright enough to swallow body copy outright. This holds
   the left column — where all the type lives — dark, and lets the field come
   through at full strength on the right. */
.hf-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(15,14,12,.94) 0%,
    rgba(15,14,12,.86) 24%,
    rgba(15,14,12,.42) 48%,
    rgba(15,14,12,0) 72%);
}
/* Narrow screens have no free right-hand side to protect — the copy spans the
   full width, so the scrim flattens into an even darkening. */
@media (max-width:860px){
  .hf-scrim{ background:rgba(15,14,12,.62) }
}

/* --- copy ---------------------------------------------------------------- */
.hf-inner{
  position:relative; z-index:10;
  /* Centred between the nav and the corner marks rather than pinned to the
     top: on a tall viewport a top-aligned block leaves the middle of the
     frame empty, and the field is not busy enough to carry that alone. */
  width:100%; max-width:1440px; margin:auto;
  padding:0 clamp(20px,3.4vw,56px);
  display:flex; flex-direction:column; gap:clamp(18px,2.6vh,32px);
}

@keyframes hf-rise{ from{ opacity:0; transform:translateY(15px) } to{ opacity:1; transform:none } }

.hf-eyebrow{
  display:flex; align-items:center; gap:11px;
  font-family:ui-monospace,Menlo,monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:#9A9284;
  animation:hf-rise .8s cubic-bezier(.22,1,.36,1) both;
}
.hf-eyebrow i{ flex:none; width:5px; height:5px; border-radius:50%; background:#C8553D }

.hf-h1{
  margin:0; max-width:19ch;
  font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(34px,5.6vw,76px); line-height:1.02; letter-spacing:-.025em;
  color:#8D8578; text-wrap:balance;
  /* The field runs bright under the headline; the shadow is what keeps the
     muted second clause legible against a peak. */
  text-shadow:0 2px 40px rgba(0,0,0,.9);
  animation:hf-rise .85s cubic-bezier(.22,1,.36,1) .06s both;
}
.hf-h1 .hf-lead{ color:#EDE7DD }
.hf-h1 em{ font-style:italic; color:#C8553D }

.hf-lede{
  margin:0; max-width:54ch;
  font-size:clamp(14px,1.15vw,16.5px); line-height:1.62; color:#B7AFA2;
  text-wrap:pretty; text-shadow:0 1px 24px rgba(0,0,0,.8);
  animation:hf-rise .85s cubic-bezier(.22,1,.36,1) .12s both;
}
.hf-lede em{ font-style:italic; color:#EDE7DD }

.hf-cta{
  align-self:flex-start;
  background:#EDE7DD; color:#0F0E0C; font-size:13.5px;
  padding:13px 22px; border-radius:999px;
  display:inline-flex; align-items:center; gap:10px;
  transition:background .25s,color .25s,transform .25s;
  animation:hf-rise .85s cubic-bezier(.22,1,.36,1) .18s both;
}
.hf-cta:hover{ background:#C8553D; color:#EDE7DD; transform:translateY(-1px) }
.hf-cta span{ transition:transform .35s cubic-bezier(.16,1,.3,1) }
.hf-cta:hover span{ transform:translateX(3px) }

/* --- corner marks -------------------------------------------------------- */
.hf-foot{
  position:relative; z-index:10;
  width:100%; max-width:1440px; margin:0 auto;
  padding:clamp(28px,5vh,64px) clamp(20px,3.4vw,56px) clamp(13px,1.7vw,22px);
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  font-family:ui-monospace,Menlo,monospace; font-size:10px;
  letter-spacing:.18em; color:#7C7568;
}
.hf-mark{ text-align:right }

/* Says what the pointer does, then gets out of the way. */
@keyframes hf-hint{ 0%,62%{ opacity:1 } 100%{ opacity:0 } }
.hf-hint{
  text-align:center;
  animation:hf-hint 6.5s cubic-bezier(.16,1,.3,1) both;
}

@media (max-width:860px){
  .hf-foot{ flex-direction:column; align-items:flex-start; gap:8px }
  .hf-mark{ text-align:left }
  .hf-hint{ text-align:left }
}

@media (prefers-reduced-motion:reduce){
  .hf-hint{ display:none }
  .hf-field canvas{ transition:none }
  .hf-eyebrow,.hf-h1,.hf-lede,.hf-cta{ animation:none }
}