/* minimal reset (the artifact runtime provided this; standalone needs it) */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure { margin: 0; }
input, button, textarea { font: inherit; }

:root {
    --ink: #F2F0EA;
    --muted: #9B97A8;
    --gold: #E0AE4C;
    --line: rgba(242, 240, 234, 0.12);
    --night-hi: #1A1921;
    --night-lo: #0F0E14;
  }
  html { scroll-behavior: smooth; }
  body {
    background: linear-gradient(180deg, var(--night-hi), var(--night-lo) 120vh) fixed var(--night-lo);
    color: var(--ink);
    font-family: "Futura", "Avenir Next", "Trebuchet MS", sans-serif;
    line-height: 1.65;
    overflow-x: hidden;
  }

  /* ---- background star field ---- */
  .field { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
  .bgstar {
    position: absolute;
    opacity: 0;
    animation: twinkle var(--d) ease-in-out calc(-1 * var(--dl)) infinite;
    fill: var(--ink);
  }
  .bgstar.gold { fill: var(--gold); }
  @keyframes twinkle {
    0%, 100% { opacity: calc(var(--o) * 0.35); }
    50% { opacity: var(--o); }
  }

  main { position: relative; z-index: 1; }

  /* ---- hero ---- */
  .hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    gap: 0;
  }
  .mark {
    width: clamp(170px, 26vmin, 232px);
    animation: rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) 1.9s both;
  }
  .mark .s path {
    fill: var(--ink);
    transform-box: fill-box;
    transform-origin: center;
    animation: pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .mark .s0 path {
    fill: var(--gold);
    animation: pop 0.7s cubic-bezier(0.3, 1.7, 0.5, 1) 1.08s both;
  }
  .mark .s1 path { animation-delay: 0.25s; }
  .mark .s2 path { animation-delay: 0.36s; }
  .mark .s3 path { animation-delay: 0.47s; }
  .mark .s4 path { animation-delay: 0.58s; }
  .mark .s5 path { animation-delay: 0.69s; }
  .mark .s6 path { animation-delay: 0.80s; }
  @keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes rise { from { transform: translateY(122px); } to { transform: translateY(0); } }

  .title {
    width: min(76vw, 372px);
    margin-top: 2.6rem;
    overflow: visible;
  }
  .t-name { fill: var(--ink); }
  .t-sub { fill: var(--gold); }

  .fade { opacity: 0; animation: fadeup 0.7s ease-out both; }
  .f1 { animation-delay: 2.15s; }
  .f2 { animation-delay: 2.4s; }
  .f3 { animation-delay: 2.6s; }
  @keyframes fadeup {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .tagline {
    margin-top: 2.2rem;
    max-width: 30rem;
    font-size: 1.06rem;
    color: var(--muted);
    text-wrap: balance;
  }
  .tagline strong { color: var(--ink); font-weight: 500; }

  .cta {
    margin-top: 2.4rem;
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    padding: 0.95rem 2.1rem;
    border-radius: 2rem;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
  }
  .cta:hover, .cta:focus-visible {
    background: var(--gold);
    color: var(--night-lo);
    border-color: var(--gold);
    outline: none;
  }

  /* ---- sections ---- */
  section { padding: 6.5rem 1.5rem; }
  .inner { max-width: 60rem; margin: 0 auto; }
  .kicker {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2rem;
  }
  .lede {
    font-size: clamp(1.35rem, 3.2vw, 1.9rem);
    font-weight: 500;
    line-height: 1.4;
    max-width: 34ch;
    text-wrap: balance;
  }
  .lede em { font-style: normal; color: var(--gold); }

  .values {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2.5rem 3rem;
  }
  .value h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
  }
  .value h3::before {
    content: "";
    display: block;
    width: 2.2rem;
    border-top: 2px solid var(--gold);
    margin-bottom: 1.1rem;
  }
  .value p { font-size: 0.94rem; color: var(--muted); max-width: 34ch; }

  /* ---- contact ---- */
  .contact .inner { max-width: 34rem; }
  .contact form { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 2.6rem; }
  .contact label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.4rem;
  }
  .contact input, .contact textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    padding: 0.45rem 0.1rem;
    transition: border-color 0.25s;
  }
  .contact input:focus, .contact textarea:focus {
    outline: none;
    border-bottom-color: var(--gold);
  }
  .contact textarea { resize: vertical; min-height: 6.5rem; }
  .send-row { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
  .send {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--night-lo);
    background: var(--gold);
    border: 1px solid var(--gold);
    padding: 0.9rem 2.2rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: background 0.25s, color 0.25s;
  }
  .send:hover, .send:focus-visible { background: transparent; color: var(--gold); outline: none; }
  .alt { font-size: 0.9rem; color: var(--muted); }
  .alt a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .alt a:hover { border-bottom-color: var(--gold); }

  footer {
    padding: 3rem 1.5rem 3.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }
  footer .tiny-star { display: inline-block; width: 0.7em; fill: var(--gold); margin: 0 0.55em; vertical-align: baseline; }

  /* ---- scroll reveal ---- */
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .mark, .mark .s path, .mark .s0 path, .fade { animation: none; opacity: 1; }
    .bgstar { animation: none; opacity: calc(var(--o) * 0.6); }
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ---- contact form status + honeypot ---- */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-status { font-size: 0.9rem; color: var(--muted); min-height: 1.4em; }
  .form-status.is-success { color: var(--gold); }
  .form-status.is-error { color: #E08A6D; }