/* ==========================================================================
   Brand Lucid - stylesheet
   Structure: tokens -> backdrop -> layout -> hero -> type -> form -> states
   Images referenced from ../images/, fonts from ../fonts/
   ========================================================================== */

@font-face{
    font-family:'Open Sauce Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("../fonts/open-sauce-sans-400.woff2") format("woff2");
  }
  @font-face{
    font-family:'Open Sauce Sans';
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url("../fonts/open-sauce-sans-600.woff2") format("woff2");
  }

  :root{
    --bg:#0b0a10;
    --panel:rgba(19,16,13,0.82);
    --panel-border:rgba(201,162,75,0.38);
    --panel-border-strong:rgba(224,189,110,0.75);
    --gold:#c9a24b;
    --gold-bright:#e0bd6e;
    --lavender:#a894cf;
    --ink:#efe7d8;
    --ink-dim:#b7ac97;
    --danger:#d98a7a;
    --ok:#9fbf8f;
    --shadow: 0 30px 70px rgba(0,0,0,0.55);
  }

  *{box-sizing:border-box;}
  html{
    background:var(--bg);
  }
  html, body{
    margin:0;
    color:var(--ink);
    font-family:'Jost', system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  body{position:relative;}

  /*
    The dune backdrop. Earlier this was a 100vh element that JS kept pinned by
    translating it against the scroll offset -- a workaround for `position:
    fixed` being unreliable inside the claude.ai preview frame. This page is
    hosted normally now, so fixed positioning is simply correct: it pins to the
    viewport with no JS, covers every scroll depth rather than only the first
    screen, and can't drift or lag.
    Two bugs are fixed here at once. The layer sat at z-index:-1 as a child of
    body, and body carried an opaque background -- per CSS painting order a
    body background paints ABOVE a negative-z descendant, so the dunes were
    covered completely (measured: the page gutter was exactly #0b0a10, the
    background token, at every scroll position). Background now lives on html
    only, and the layer sits at z-index 0 with the content above it at 1.
    The veil was also stacking a 0.92-alpha radial over a 0.85-alpha linear on
    top of an image already at 0.38 brightness -- effectively opaque. Values
    below are tuned so the dunes are visibly present while the panels, which
    carry their own 0.82-alpha background, stay comfortably readable.
  */
  .bg-layer{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
  }
  .bg-fixed{
    position:absolute;
    inset:0;
    background-image:url("../images/dunes.webp");
    background-size:cover;
    background-position:center;
    filter:brightness(1.15) saturate(1.05) contrast(1.15);
  }
  .bg-veil{
    position:absolute;
    inset:0;
    background:
      radial-gradient(130% 75% at 50% 20%, rgba(11,10,16,0.05) 0%, rgba(11,10,16,0.20) 65%, rgba(11,10,16,0.34) 100%),
      linear-gradient(180deg, rgba(11,10,16,0.10) 0%, rgba(11,10,16,0.18) 50%, rgba(11,10,16,0.28) 100%);
  }

  main{
    position:relative;
    z-index:1;
    max-width:760px;
    margin:0 auto;
    padding:clamp(28px,6vw,64px) clamp(16px,5vw,24px) 96px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(28px,6vw,52px);
  }

  .panel{
    width:100%;
    background:var(--panel);
    border:1px solid var(--panel-border);
    box-shadow:var(--shadow);
    padding:clamp(24px,5vw,44px);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }

  /* Hero */
  .hero-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(18px,4vw,28px);
    padding-top:clamp(20px,4vw,32px);
  }
  .hero-frame{
    position:relative;
    padding:10px;
    border:1px solid var(--panel-border-strong);
    max-width:420px;
    width:100%;
  }
  .hero-frame::before{
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid rgba(201,162,75,0.28);
    pointer-events:none;
  }
  .hero-frame img{
    display:block;
    width:100%;
    height:auto;
  }
  .welcome-line{
    font-family:'Open Sauce Sans', sans-serif;
    font-weight:400;
    font-size:22px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    text-align:center;
    color:#ffffff;
    margin:0;
  }
  /* Same treatment as the "Welcome to" line in the hero: thin, white,
     letter-spaced caps. Used to lift a phrase out of a paragraph and let the
     sentence continue lowercase beneath it. */
  .lead-line{
    font-family:'Open Sauce Sans', sans-serif;
    font-weight:400;
    font-size:22px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:#ffffff;
    margin:0 0 0.5em;
  }

  .banner-frame{
    width:100%;
    max-width:520px;
  }
  .banner-frame img{
    display:block;
    width:100%;
    height:auto;
  }
  .eyebrow{
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.34em;
    text-transform:uppercase;
    color:var(--gold);
    text-align:center;
  }

  /* Section headings (mini-titles) */
  .section-heading{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:400;
    font-size:clamp(1.15rem, 4.4vw, 2.5rem);
    line-height:1.22;
    letter-spacing:0.01em;
    text-transform:uppercase;
    text-align:center;
    color:var(--gold-bright);
    margin:0;
    text-shadow:0 2px 24px rgba(224,189,110,0.25);
  }

  /* Free-floating section headers -- these sit directly on the dune backdrop
     rather than inside a panel, which breaks up the run of identical boxes and
     gives the page some rhythm. Heavier text-shadow because they have no panel
     behind them to guarantee contrast. */
  .free-header{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700;
    font-size:clamp(1.35rem, 4.2vw, 2.3rem);
    line-height:1.25;
    letter-spacing:0.02em;
    text-transform:uppercase;
    text-align:center;
    color:var(--gold-bright);
    margin:0;
    text-shadow:
      0 2px 18px rgba(0,0,0,0.85),
      0 0 40px rgba(11,10,16,0.9),
      0 2px 24px rgba(224,189,110,0.2);
  }

  .prose-tight{
    line-height:1.5;
  }

  .closing-line{
    font-weight:600;
    color:var(--gold-bright);
  }

  .btn{
    font-family:'Jost', sans-serif;
    font-size:0.95rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:500;
    color:#1a1409;
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    border:1px solid var(--gold-bright);
    padding:16px 40px;
    cursor:pointer;
    box-shadow:0 8px 30px rgba(201,162,75,0.28);
    transition:transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    text-decoration:none;
    text-align:center;
  }
  a.btn:visited{color:#1a1409;}
  .btn:hover{transform:translateY(-2px); box-shadow:0 12px 36px rgba(201,162,75,0.4); filter:brightness(1.06);}
  .btn:focus-visible{outline:2px solid var(--lavender); outline-offset:3px;}
  .btn:disabled{opacity:0.55; cursor:not-allowed; transform:none;}
  .btn-block{width:100%;}

  /* Prose (paragraph copy) */
  .prose{
    font-family:'Open Sauce Sans', sans-serif;
    font-weight:400;
    font-size:clamp(17px, 2.6vw, 22px);
    line-height:1.75;
    color:var(--ink);
    max-width:62ch;
    margin:0 auto;
  }
  .prose + .prose{margin-top:1.1em;}

  /* Form */
  #apply.panel{
    position:relative;
    background-image:
      linear-gradient(rgba(19,16,13,0.53), rgba(19,16,13,0.53)),
      url("../images/illustration.webp");
    background-size:cover;
    background-position:center 15%;
    background-blend-mode:normal;
  }
  .form-panel h2{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem,3.6vw,2rem);
    letter-spacing:0.02em;
    color:var(--gold-bright);
    text-align:center;
    margin:0 0 8px;
    text-transform:uppercase;
  }
  .form-panel > p.lede{
    text-align:center;
    color:var(--ink-dim);
    margin:0 0 clamp(24px,4vw,34px);
    font-size:0.98rem;
    font-family:'Jost', sans-serif;
  }

  form{display:flex; flex-direction:column; gap:22px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  @media (max-width:520px){.grid-2{grid-template-columns:1fr;}}

  label{
    display:block;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
    margin-bottom:8px;
  }
  .req{color:var(--gold);}

  input[type="text"],
  input[type="email"],
  input[type="date"],
  select,
  textarea{
    width:100%;
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(201,162,75,0.3);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-size:0.98rem;
    padding:12px 14px;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  textarea{min-height:96px; resize:vertical; line-height:1.6;}
  input::placeholder, textarea::placeholder{color:rgba(183,172,151,0.55);}
  input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:var(--gold-bright);
    background:rgba(0,0,0,0.4);
  }
  input.touched:invalid, textarea.touched:invalid{border-color:var(--danger);}

  fieldset{border:1px solid rgba(201,162,75,0.3); padding:18px 16px; margin:0;}
  fieldset legend{
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
    padding:0 8px;
  }
  .check-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px;}
  @media (max-width:520px){.check-grid{grid-template-columns:1fr;}}
  .check-item{display:flex; align-items:flex-start; gap:10px; font-size:0.95rem; color:var(--ink);}
  .check-item input{
    width:18px; height:18px; flex:0 0 18px; margin-top:2px;
    accent-color:var(--gold);
    background:transparent;
  }

  .field-note{font-size:0.82rem; color:var(--ink-dim); margin-top:6px;}
  #referral-wrap{display:none;}
  #referral-wrap.show{display:block;}

  .status-msg{
    font-size:0.92rem;
    padding:12px 14px;
    border:1px solid transparent;
    display:none;
  }
  .status-msg.show{display:block;}
  .status-msg.error{border-color:rgba(217,138,122,0.5); color:var(--danger); background:rgba(217,138,122,0.08);}
  .status-msg.info{border-color:rgba(201,162,75,0.4); color:var(--gold-bright); background:rgba(201,162,75,0.08);}

  .success-state{
    text-align:center;
    padding:30px 10px;
  }
  .success-state h3{
    font-family:'Plus Jakarta Sans', sans-serif;
    color:var(--gold-bright);
    letter-spacing:0.02em;
    text-transform:uppercase;
    font-size:1.3rem;
    margin:0 0 12px;
  }
  .success-state p{color:var(--ink); line-height:1.7; font-family:'Open Sauce Sans', sans-serif;}

  /* Small tarot illustration closing the page, roughly two inches tall,
     with the italic line beneath it. Framed in the same thin gold as the
     hero portrait so it reads as part of the same visual language. */
  .closing-art{
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  .closing-art img{
    display:block;
    height:200px;
    width:auto;
    border:1px solid var(--panel-border-strong);
    padding:6px;
    background:rgba(11,10,16,0.35);
  }
  .closing-art figcaption{
    font-family:'Open Sauce Sans', sans-serif;
    font-style:italic;
    font-size:clamp(15px, 2.4vw, 19px);
    line-height:1.6;
    color:var(--ink);
    text-align:center;
    max-width:34ch;
    text-shadow:0 2px 14px rgba(0,0,0,0.8), 0 0 28px rgba(11,10,16,0.85);
  }

  .closing-mark{
    color:var(--gold);
    font-size:1.4rem;
    letter-spacing:0.5em;
    opacity:0.6;
  }

  .site-footer{
    width:100%;
    text-align:center;
  }
  .site-footer p{
    font-family:'Open Sauce Sans', sans-serif;
    font-weight:400;
    font-size:13px;
    letter-spacing:0.04em;
    line-height:1.7;
    color:var(--ink-dim);
    opacity:0.75;
    margin:0;
    text-shadow:0 2px 12px rgba(0,0,0,0.8);
  }

  a{color:var(--gold-bright);}