/* Kerdiva coming-soon site. Based on the approved m1-anticipation mockup (14 Oct 2026).
   Layout: one full "vault" screen. Turning coin left, myth headline + waitlist form right; stacks on phones. */
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/marcellus-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/dmsans-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jbmono-latin.woff2) format("woff2")}
:root{
  --ink:#0d1a17;--ink-2:#13241f;--line:#26413a;--field-line:#5f7f76;--ivory:#efe9dc;--muted:#a7b3ad;--brass:#c9a35b;--brass-soft:#8a7444;--error:#f2a98f;
  --display:"Marcellus","Trajan Pro",Georgia,serif;--body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--body);font-size:17px;line-height:1.6;
  background-image:radial-gradient(1200px 600px at 15% -10%,#1d3a32 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#1a2f29 0%,transparent 55%);}
a{color:var(--brass);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-60px;background:var(--brass);color:var(--ink);padding:10px 14px;border-radius:8px;z-index:10;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:24px;padding-block:28px 40px;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:40px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory);min-height:44px}
.brand span{font-family:var(--display);font-size:22px;letter-spacing:.32em}
.pill{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass-soft);border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:8px}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--brass);display:inline-block;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
main.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;flex:1}
.coin{width:100%;max-width:440px;aspect-ratio:1;justify-self:center}
.coin svg{width:100%;height:100%;display:block}
.ring{transform-origin:200px 200px;animation:spin 90s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 16px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,6.2vw,78px);line-height:1.04;margin:0 0 22px;text-wrap:balance}
h1 em{font-style:normal;color:var(--brass)}
.lede{color:var(--muted);font-size:20px;max-width:46ch;margin:0 0 26px}
.lede span{color:var(--ivory)}
/* Teaser: the gold "fuse" dash sits 11px before the first word and lines up with the first line when the text wraps.
   It grows from its right end, so the gap to the text never changes while it animates. */
.tease{display:flex;align-items:flex-start;gap:11px;font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.35;letter-spacing:.04em;color:var(--brass);margin:0 0 26px}
.tease i{flex:0 0 30px;height:1px;margin-top:.68em;background:var(--brass);display:block;animation:grow 2.6s ease-in-out infinite;transform-origin:right center}
@keyframes grow{0%,100%{transform:scaleX(.3);opacity:.5}50%{transform:scaleX(1);opacity:1}}
.reveal{opacity:0;transform:translateY(8px);animation:rise .9s ease forwards}
.d1{animation-delay:.2s}.d2{animation-delay:1.1s}.d3{animation-delay:2.1s}.d4{animation-delay:3s}
@keyframes rise{to{opacity:1;transform:none}}
.inscr{font-family:var(--display);letter-spacing:.55em;color:var(--brass-soft);font-size:17px;margin:0}

/* Waitlist form */
.signup{max-width:560px;margin:0 0 26px;border:1px solid var(--line);border-radius:14px;padding:22px;background:rgba(19,36,31,.78);box-sizing:border-box}
.signup h2{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.2;margin:0 0 16px;letter-spacing:.02em}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:16px;color:var(--ivory)}
.field label .opt{color:var(--muted)}
.field input,.field select{box-sizing:border-box;width:100%;min-height:48px;font:inherit;font-size:17px;color:var(--ivory);background:var(--ink);border:1px solid var(--field-line);border-radius:8px;padding:10px 12px}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a35b' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field input:focus-visible,.field select:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-color:var(--brass)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:var(--error)}
.field .err{color:var(--error);font-size:16px;margin:0}
.field .err:empty{display:none}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px}
.btn{min-height:48px;padding:0 24px;border:0;border-radius:8px;background:var(--brass);color:var(--ink);font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.btn:hover{background:#d6b26c}
.btn:focus-visible{outline:2px solid var(--ivory);outline-offset:3px}
.btn[disabled]{opacity:.7;cursor:progress}
.note{color:var(--muted);font-size:16px;margin:14px 0 0}
.status{margin:12px 0 0;font-size:16px;color:var(--error)}
.status:empty{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.done{outline:none}
.done p{font-family:var(--display);font-size:clamp(22px,2.4vw,28px);line-height:1.25;color:var(--ivory);margin:0}
.done p em{font-style:normal;color:var(--brass)}
#ts{margin:0}

footer{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:16px}
footer .greek{font-family:var(--display);letter-spacing:.06em}
footer .greek b{color:var(--brass);font-weight:400}

/* Plain pages: privacy, unsubscribe, 404 */
.doc{max-width:68ch;flex:1}
.doc h1{font-size:clamp(34px,5vw,52px);margin-bottom:18px}
.doc h2{font-family:var(--display);font-weight:400;font-size:24px;margin:30px 0 8px;color:var(--brass)}
.doc p,.doc li{color:#d9d3c5}
.doc ul{padding-left:22px}
.doc form{margin:18px 0}
.doc .meta{color:var(--muted);font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase}

@media (max-width:860px){main.hero{grid-template-columns:minmax(0,1fr);gap:28px}.coin{max-width:250px}}
@media (max-width:560px){.grid{grid-template-columns:minmax(0,1fr)}.signup{padding:18px}.btn{width:100%}}
@media (max-width:420px){.wrap{padding-inline:16px}.brand span{font-size:18px}.lede{font-size:18px}.tease i{flex-basis:24px}}
@media (prefers-reduced-motion:reduce){.pill i,.ring,.tease i{animation:none!important}.tease i{transform:none}.reveal{opacity:1;transform:none;animation:none}}