/* ════════════════════════════════════════════════════════════════════
   Epic Woman · epicwoman.flowme.one
   One display face, one text face, one easing curve, one accent sweep.
   Nothing here borrows the FlowBond force hues (gold, teal, violet):
   those belong to the protocol and must stay legible as themselves.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* ground */
  --ink:      #120C10;
  --ink-2:    #1A1116;
  --raised:   #221720;
  --line:     rgba(244,235,228,.12);
  --line-2:   rgba(244,235,228,.06);

  /* text */
  --bone:     #F4EBE4;
  --bone-dim: #B9A79F;
  --bone-dim2:#8A7A75;

  /* the sweep: sunrise to dusk */
  --ember:    #F4532B;
  --rose:     #E0466B;
  --plum:     #8E2F6B;
  --sweep:    linear-gradient(115deg, var(--ember), var(--rose) 52%, var(--plum));

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast:.28s; --dur:.55s; --dur-slow:.9s;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 56px);

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

/* Any author rule that sets `display` beats the UA sheet's [hidden]
   { display:none }, so a `.field` or `.panel` marked hidden stays on screen.
   This one line is the difference between a hidden key field and a member
   locked out of her own room. */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--text); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button,input,textarea,select{ font:inherit; color:inherit }

/* the grain: one repeated svg, no image request */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ─── shell ─────────────────────────────────────────────────────── */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad) }
main{ position:relative; z-index:1 }
section{ position:relative }

/* ─── type ──────────────────────────────────────────────────────── */
.eyebrow{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-dim2); font-weight:500; margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--ember); flex:none;
}
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.02;
  letter-spacing:-.02em; text-wrap:balance; margin:0 }
h1{ font-size:clamp(2.9rem, 8.5vw, 6.4rem) }
h2{ font-size:clamp(2rem, 4.6vw, 3.4rem); max-width:16ch }
h3{ font-size:clamp(1.15rem, 2vw, 1.5rem); letter-spacing:-.01em }
.lede{ font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--bone-dim);
  max-width:56ch; line-height:1.62 }
p{ max-width:60ch }
.ital{ font-style:italic; font-variation-settings:'SOFT' 40 }
.grad{ background:var(--sweep); -webkit-background-clip:text; background-clip:text;
  color:transparent; }

/* ─── buttons ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.6rem; border-radius:999px; border:1px solid transparent;
  font-size:.9rem; font-weight:500; letter-spacing:.01em; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  background:transparent; text-align:center;
}
.btn:disabled{ opacity:.42; cursor:not-allowed }
.btn:not(:disabled):hover{ transform:translateY(-2px) }
.btn:not(:disabled):active{ transform:translateY(0) }
.btn-primary{ background:var(--sweep); color:#fff; font-weight:600;
  box-shadow:0 10px 34px -14px var(--ember) }
.btn-ghost{ border-color:var(--line); color:var(--bone) }
.btn-ghost:hover{ border-color:rgba(244,235,228,.34) }
.btn-sm{ padding:.55rem 1rem; font-size:.8rem }
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rose); outline-offset:3px; border-radius:6px;
}

/* ─── topbar ────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(18px) saturate(1.3);
  background:color-mix(in srgb, var(--ink) 78%, transparent);
  border-bottom:1px solid var(--line-2);
}
.topbar-in{ display:flex; align-items:center; gap:1.4rem;
  height:64px; }
.brand{ display:flex; align-items:center; gap:.62rem; font-family:var(--display);
  font-size:1.06rem; letter-spacing:-.01em; margin-right:auto; flex:none }
.brand svg{ width:26px; height:26px; flex:none }
.navlinks{ display:flex; gap:1.5rem; align-items:center }
.navlinks a{ font-size:.86rem; color:var(--bone-dim); transition:color var(--dur-fast) var(--ease) }
.navlinks a:hover,.navlinks a[aria-current="page"]{ color:var(--bone) }
.langtoggle{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; flex:none }
.langtoggle button{
  background:none; border:0; padding:.34rem .66rem; font-size:.72rem; font-weight:600;
  letter-spacing:.08em; color:var(--bone-dim2); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.langtoggle button[aria-pressed="true"]{ background:var(--sweep); color:#fff }
@media (max-width:760px){
  .navlinks{ display:none }
  .navlinks.open{
    display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:0; padding:.5rem var(--pad) 1.1rem;
    background:var(--ink-2); border-bottom:1px solid var(--line);
  }
  .navlinks.open a{ padding:.8rem 0; width:100%; border-bottom:1px solid var(--line-2) }
}
.burger{ display:none; background:none; border:1px solid var(--line);
  border-radius:10px; width:38px; height:38px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex:none }
.burger span{ display:block; width:16px; height:1.5px; background:var(--bone);
  position:relative; transition:transform var(--dur-fast) var(--ease) }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0;
  width:16px; height:1.5px; background:var(--bone); transition:transform var(--dur-fast) var(--ease) }
.burger span::before{ top:-5px } .burger span::after{ top:5px }
@media (max-width:760px){ .burger{ display:inline-flex } }

/* ─── reveal ────────────────────────────────────────────────────── */
.rv{ opacity:0; transform:translateY(20px);
  transition:opacity var(--dur-slow) var(--ease) var(--d,0ms),
             transform var(--dur-slow) var(--ease) var(--d,0ms) }
.rv.in{ opacity:1; transform:none }
.d1{ --d:80ms } .d2{ --d:160ms } .d3{ --d:240ms }

/* ─── hero ──────────────────────────────────────────────────────── */
.hero{ position:relative; padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem); overflow:hidden }
.hero-glow{
  position:absolute; top:-28%; left:50%; translate:-50% 0;
  width:min(1000px,130vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(244,83,43,.19), rgba(142,47,107,.10) 42%, transparent 68%);
  filter:blur(30px); pointer-events:none; z-index:0;
  animation:breathe 14s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.09); opacity:1 } }
.hero-grid{ position:relative; z-index:1; display:grid; gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr; align-items:center }
@media (min-width:940px){ .hero-grid{ grid-template-columns:1.06fr .94fr } }
.hero h1 .l2{ display:block }
.hero .lede{ margin:1.7rem 0 2.3rem }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem }

/* ─── the ring ──────────────────────────────────────────────────── */
.ringwrap{ position:relative; display:grid; place-items:center; aspect-ratio:1;
  width:100%; max-width:520px; margin-inline:auto }
.ring{ width:100%; height:auto; overflow:visible }
.ring .arc{ fill:none; stroke-linecap:round; transform-origin:center;
  animation:arcdraw 1.4s var(--ease) backwards }
@keyframes arcdraw{ from{ stroke-dashoffset:var(--len); opacity:0 } to{ stroke-dashoffset:0; opacity:1 } }
.ring .spin{ transform-origin:center; animation:spin 90s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.ring-core{ position:absolute; text-align:center; pointer-events:none }
.ring-n{ font-family:var(--display); font-size:clamp(2.6rem,7vw,4.1rem);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.ring-l{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-dim2); margin-top:.55rem }

/* ─── pulse strip ───────────────────────────────────────────────── */
.pulse{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-2); border-block:1px solid var(--line-2) }
@media (min-width:700px){ .pulse{ grid-template-columns:repeat(4,1fr) } }
.pulse div{ background:var(--ink); padding:1.6rem 1.2rem; text-align:center }
.pulse b{ display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,3.4vw,2.5rem); line-height:1; font-variant-numeric:tabular-nums }
.pulse span{ display:block; margin-top:.5rem; font-size:.66rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--bone-dim2) }

/* ─── generic section ───────────────────────────────────────────── */
.band{ padding:clamp(3.6rem,8vw,6.5rem) 0 }
.band-line{ border-top:1px solid var(--line-2) }
.band-head{ margin-bottom:clamp(2rem,4vw,3rem) }
.band-head .lede{ margin-top:1.1rem }

/* ─── steps ─────────────────────────────────────────────────────── */
.steps{ display:grid; gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:18px; overflow:hidden }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr) } }
.step{ background:var(--ink-2); padding:clamp(1.6rem,3vw,2.3rem);
  transition:background var(--dur) var(--ease) }
.step:hover{ background:var(--raised) }
.step-n{ font-family:var(--display); font-size:1rem; color:var(--ember);
  display:block; margin-bottom:1rem; font-variant-numeric:tabular-nums }
.step h3{ margin-bottom:.7rem }
.step p{ color:var(--bone-dim); font-size:.94rem; margin:0 }

/* ─── cards ─────────────────────────────────────────────────────── */
.cards{ display:grid; gap:1.1rem }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1060px){ .cards-3{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.card{
  position:relative; background:var(--ink-2); border:1px solid var(--line-2);
  border-radius:16px; padding:1.5rem 1.5rem 1.35rem; overflow:hidden;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  display:flex; flex-direction:column; gap:.9rem; min-width:0;
}
.card:hover{ border-color:var(--line); transform:translateY(-3px) }
.card::after{ content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px;
  background:var(--sweep); opacity:0; transition:opacity var(--dur) var(--ease) }
.card:hover::after{ opacity:1 }
.card-head{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap }
.card h3{ font-size:1.22rem; line-height:1.22 }
.card p{ color:var(--bone-dim); font-size:.93rem; margin:0 }
.card-foot{ margin-top:auto; padding-top:.4rem; display:flex; align-items:center;
  gap:.8rem; flex-wrap:wrap; font-size:.78rem; color:var(--bone-dim2) }

/* who wrote it */
.by{ display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--bone-dim) }
.av{ width:28px; height:28px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:.72rem; font-weight:600; color:#fff;
  background:var(--sweep); letter-spacing:.02em }

/* ─── chips ─────────────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:.45rem }
.chip{
  display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .68rem;
  border-radius:999px; border:1px solid var(--line); font-size:.72rem;
  color:var(--bone-dim); background:none; cursor:pointer; white-space:nowrap;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease);
}
.chip:hover{ color:var(--bone); border-color:rgba(244,235,228,.3) }
.chip[aria-pressed="true"],.chip.on{
  background:var(--sweep); border-color:transparent; color:#fff; font-weight:500 }
.chip-static{ cursor:default }
.chip-static:hover{ color:var(--bone-dim); border-color:var(--line) }

/* status pips */
.pip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bone-dim2) }
.pip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bone-dim2) }
.pip-open::before{ background:var(--ember); box-shadow:0 0 0 3px rgba(244,83,43,.16) }
.pip-motion::before{ background:var(--rose); box-shadow:0 0 0 3px rgba(224,70,107,.16) }
.pip-won::before{ background:#5BD6A0; box-shadow:0 0 0 3px rgba(91,214,160,.16) }

/* ─── forms ─────────────────────────────────────────────────────── */
.field{ display:block; margin-bottom:1.1rem }
.field > span{ display:block; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bone-dim2); margin-bottom:.5rem }
.input,textarea.input,select.input{
  width:100%; background:var(--ink-2); border:1px solid var(--line);
  border-radius:12px; padding:.86rem 1rem; font-size:.95rem; color:var(--bone);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.input::placeholder{ color:var(--bone-dim2) }
.input:focus{ outline:none; border-color:var(--rose); background:var(--raised) }
textarea.input{ resize:vertical; min-height:110px; line-height:1.55; font-family:var(--text) }
select.input{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23B9A79F' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem }
.hint{ font-size:.78rem; color:var(--bone-dim2); margin:.45rem 0 0 }
.count{ float:right; font-variant-numeric:tabular-nums }
.row2{ display:grid; gap:0 1rem; grid-template-columns:1fr }
@media (min-width:620px){ .row2{ grid-template-columns:1fr 1fr } }

/* the key input: read aloud, typed by hand */
.keyinput{ font-family:var(--display); font-size:1.7rem; letter-spacing:.22em;
  text-align:center; text-transform:uppercase; padding:1rem }

/* ─── panels ────────────────────────────────────────────────────── */
.panel{ background:var(--ink-2); border:1px solid var(--line-2);
  border-radius:18px; padding:clamp(1.5rem,3vw,2.2rem) }
.panel + .panel{ margin-top:1.1rem }

/* ─── notices ───────────────────────────────────────────────────── */
.notice{ border-radius:12px; padding:.85rem 1.05rem; font-size:.88rem;
  border:1px solid var(--line); background:var(--ink-2); margin:0 0 1.1rem }
.notice-bad{ border-color:rgba(244,83,43,.5); background:rgba(244,83,43,.09); color:#FFC9BB }
.notice-good{ border-color:rgba(91,214,160,.45); background:rgba(91,214,160,.08); color:#B6F0D6 }

/* ─── empty state ───────────────────────────────────────────────── */
.empty{ text-align:center; padding:clamp(2.6rem,6vw,4.5rem) 1.5rem;
  border:1px dashed var(--line); border-radius:18px; color:var(--bone-dim) }
.empty h3{ margin-bottom:.7rem }
.empty p{ margin:0 auto; max-width:44ch }

/* ─── skeleton ──────────────────────────────────────────────────── */
.skel{ border-radius:16px; background:linear-gradient(90deg,var(--ink-2),var(--raised),var(--ink-2));
  background-size:220% 100%; animation:sheen 1.5s linear infinite; min-height:150px }
@keyframes sheen{ to{ background-position:-220% 0 } }

/* ─── footer ────────────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line-2); padding:3rem 0 3.6rem; margin-top:3rem;
  color:var(--bone-dim2); font-size:.84rem; position:relative; z-index:1 }
.foot-in{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; justify-content:space-between }
footer a:hover{ color:var(--bone) }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ember);
  color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0 }
.skip:focus{ left:0 }

/* ─── reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important }
  .rv{ opacity:1; transform:none }
}