/* Craig Becker — coming soon
   Palette: forest black, deep green, brushed gold, bone, sage */

:root{
  --ink:        #07110C;
  --forest:     #0E241A;
  --forest-lit: #163525;
  --gold:       #C9A961;
  --gold-soft:  #E3C98C;
  --bone:       #F2EDE3;
  --sage:       #7E9B87;

  --display: "Bodoni Moda", "Didot", Georgia, serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --rule: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--text);
  font-size:clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--gold); color:var(--ink);
  padding:.75rem 1rem; font-weight:600; text-decoration:none;
}
.skip:focus{ left:1rem; top:1rem; }

/* Film grain over everything, very light */
.grain{
  position:fixed; inset:-50%;
  z-index:40; pointer-events:none; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ── Masthead ─────────────────────────────────────────── */
.masthead{
  position:absolute; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem;
  padding:clamp(1.1rem,2.4vw,1.9rem) var(--gutter);
}
.wordmark{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.7vw,1.45rem);
  letter-spacing:.02em;
  color:var(--gold-soft);
  text-decoration:none;
}
.masthead nav{ display:flex; gap:clamp(1rem,2.5vw,2.25rem); }
.masthead nav a{
  font-size:.8125rem; letter-spacing:.06em;
  text-decoration:none; color:color-mix(in srgb, var(--bone) 78%, transparent);
  padding-bottom:.2rem;
  border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.masthead nav a:hover{ color:var(--bone); border-bottom-color:var(--gold); }

/* ── Hero ─────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:end;
  padding:9rem var(--gutter) clamp(3rem,7vh,5.5rem);
  isolation:isolate;
  background:
    radial-gradient(120% 90% at 12% 18%, #12291D 0%, transparent 62%),
    linear-gradient(168deg, var(--forest) 0%, var(--ink) 58%, #050C08 100%);
  overflow:hidden;
}

/* soft light that tracks the pointer; JS sets --mx/--my */
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,60%) var(--my,35%),
             rgba(201,169,97,.16), transparent 70%);
  transition:opacity .4s ease;
}

.hero__portrait{
  position:absolute; z-index:1;
  right:clamp(-4rem,-2vw,0rem); bottom:0; margin:0;
  height:min(92svh,1020px); width:auto;
  filter:contrast(1.06) saturate(.72) brightness(.96);
  -webkit-mask-image:linear-gradient(to bottom, #000 72%, transparent 99%);
          mask-image:linear-gradient(to bottom, #000 72%, transparent 99%);
}
.hero__portrait img{ height:100%; width:auto; object-fit:contain; object-position:bottom right; }
.hero__portrait::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(14,36,26,.55), rgba(7,17,12,.15) 55%);
  mix-blend-mode:multiply;
}

.hero__type{
  position:relative; z-index:2;
  grid-column:1;
  max-width:34ch;
}

.status{
  display:inline-flex; align-items:center; gap:.6rem;
  margin:0 0 1.6rem;
  font-size:.8125rem; letter-spacing:.08em;
  color:var(--sage);
}
.status__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,169,97,.55);
  animation:pulse 3.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(201,169,97,.5); }
  70%,100%{ box-shadow:0 0 0 12px rgba(201,169,97,0); }
}

.display{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3.6rem, 12.5vw, 11rem);
  line-height:.84;
  letter-spacing:-.025em;
  margin:0 0 1.75rem;
  color:var(--bone);
}
.display__line{
  display:block;
  clip-path:inset(0 0 110% 0);
  animation:rise 1.05s cubic-bezier(.16,.84,.32,1) forwards;
  animation-delay:calc(var(--i) * 140ms + 120ms);
}
.display__line:last-child{
  padding-left:.1em;
  color:var(--gold-soft);
  font-style:italic;
}
@keyframes rise{ to{ clip-path:inset(-25% -15% -25% -5%); } }

.lede{
  margin:0 0 2.25rem;
  max-width:38ch;
  color:color-mix(in srgb, var(--bone) 80%, transparent);
  text-wrap:pretty;
}

.cta{
  display:inline-block;
  padding:.95rem 2rem;
  font-size:.9375rem; font-weight:500; letter-spacing:.03em;
  text-decoration:none;
  color:var(--ink);
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  border-radius:999px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(201,169,97,.7); }

@media (prefers-reduced-motion: reduce){
  .display__line{ animation:none; clip-path:none; }
  .status__dot{ animation:none; }
  .cta:hover{ transform:none; }
}

/* ── Crafts ───────────────────────────────────────────── */
.crafts{
  padding:clamp(4.5rem,10vh,8rem) var(--gutter);
  background:var(--ink);
}
.section-title{
  font-family:var(--display);
  font-weight:400; font-style:italic;
  font-size:clamp(1.4rem,3vw,2.1rem);
  margin:0 0 clamp(2rem,5vh,3.25rem);
  color:var(--gold-soft);
}
.craft-list{
  list-style:none; margin:0; padding:0;
  border-top:var(--rule);
}
.craft{
  display:grid;
  grid-template-columns:minmax(9rem,20%) 1fr;
  gap:clamp(1rem,4vw,3rem);
  align-items:baseline;
  padding:clamp(1.25rem,3vh,2rem) 0;
  border-bottom:var(--rule);
}
.craft h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.05;
  margin:0;
  color:var(--bone);
}
.craft p{
  margin:0;
  max-width:56ch;
  color:color-mix(in srgb, var(--bone) 66%, transparent);
}

/* ── Notify ───────────────────────────────────────────── */
.notify{
  padding:clamp(4rem,9vh,7rem) var(--gutter);
  background:
    radial-gradient(90% 140% at 50% 0%, #12291D 0%, transparent 70%),
    var(--forest);
  border-top:var(--rule);
}
.notify__inner{ max-width:44rem; }
.notify h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.75rem,4.4vw,3rem);
  line-height:1.06;
  margin:0 0 .75rem;
}
.notify__sub{
  margin:0 0 2rem;
  color:color-mix(in srgb, var(--bone) 68%, transparent);
  max-width:42ch;
}
.signup__label{
  display:block; margin-bottom:.55rem;
  font-size:.8125rem; letter-spacing:.05em;
  color:var(--sage);
}
.signup__row{
  display:flex; flex-wrap:wrap; gap:.6rem;
  max-width:36rem;
}
.signup input{
  flex:1 1 15rem;
  min-width:0;
  padding:.95rem 1.15rem;
  font:inherit; font-size:1rem;
  color:var(--bone);
  background:rgba(7,17,12,.55);
  border:1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius:999px;
  transition:border-color .25s ease, background .25s ease;
}
.signup input::placeholder{ color:color-mix(in srgb, var(--bone) 38%, transparent); }
.signup input:focus{ background:rgba(7,17,12,.8); border-color:var(--gold); }
.signup button{
  flex:0 0 auto;
  padding:.95rem 1.8rem;
  font:inherit; font-size:.9375rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink);
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  border:0; border-radius:999px; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.signup button:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -14px rgba(201,169,97,.8); }
.signup button:disabled{ opacity:.55; cursor:progress; transform:none; box-shadow:none; }
.signup__msg{
  min-height:1.4rem; margin:.9rem 0 0;
  font-size:.875rem;
  color:var(--sage);
}
.signup__msg[data-state="error"]{ color:#E9A98A; }
.signup__msg[data-state="done"]{ color:var(--gold-soft); }

@media (prefers-reduced-motion: reduce){
  .signup button:hover{ transform:none; }
}

/* ── Footer ───────────────────────────────────────────── */
.foot{
  padding:clamp(3rem,7vh,5rem) var(--gutter) 2.5rem;
  background:var(--ink);
  border-top:var(--rule);
}
.tagline{
  font-family:var(--display);
  font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,5.5vw,3.4rem);
  line-height:1;
  margin:0 0 clamp(2rem,5vh,3rem);
  color:var(--gold);
}
.foot__meta{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between; align-items:center;
  font-size:.875rem;
  color:color-mix(in srgb, var(--bone) 55%, transparent);
}
.social{
  display:flex; gap:1.5rem;
  list-style:none; margin:0; padding:0;
}
.social a{
  text-decoration:none;
  padding-bottom:.15rem;
  border-bottom:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  transition:color .25s ease, border-color .25s ease;
}
.social a:hover{ color:var(--gold-soft); border-bottom-color:var(--gold-soft); }
.copy{ margin:0; }

/* ── Narrow screens ───────────────────────────────────── */
@media (max-width: 880px){
  .hero{
    grid-template-columns:1fr;
    align-items:end;
    padding-top:7rem;
    padding-bottom:3rem;
  }
  .hero__portrait{
    height:62svh;
    right:-18%;
    opacity:.55;
    -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent 92%);
            mask-image:linear-gradient(to bottom, #000 55%, transparent 92%);
  }
  .hero__type{ max-width:none; }
  .lede{ max-width:34ch; }
  .craft{ grid-template-columns:1fr; gap:.4rem; }
}

@media (max-width: 520px){
  .masthead nav a:first-child{ display:none; }
  .signup button{ flex:1 1 100%; }
}