/* The pages for signing in and for the account (A2): dusk, in one narrow column, with Fraunces for
   the headings. Scoped to .entry, since every stylesheet loads on every page; the base rules are
   wrapped in :where(.entry) so they weigh no more than plain element and class rules would. */
.entry{
  --amber:#F0A63C;
  --coral:#E5623F;
  --rose:#C94A70;
  --dusk:#3A3572;
  --night:#1B1A3C;
  --ink:#2A1F1A;
  --paper:#FFF7EE;
  --line:rgba(42,31,26,.14);
  --light-ink:#F6EEE4;
  --light-ink-soft:#C9BFD6;
  font-family:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.55;
}
body:has(> .entry){background:#1B1A3C}

:where(.entry) :is(h1,h2,h3){font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:400;line-height:1.05;margin:0;letter-spacing:-.01em}
:where(.entry) h1{font-variation-settings:"opsz" 144,"SOFT" 40}
:where(.entry) p{margin:0 0 1em}
:where(.entry) a{color:inherit}
:where(.entry) .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
:where(.entry) header{padding:22px 0}
:where(.entry) header .wrap{display:flex;align-items:center;gap:16px}
:where(.entry) .brand{font-family:"Fraunces",serif;font-size:1.45rem;font-weight:500;text-decoration:none;display:flex;align-items:center;gap:10px}
:where(.entry) .brand .dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--amber),var(--coral) 70%,var(--rose))}
:where(.entry) .cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;padding:13px 22px;border-radius:999px;font-weight:500;border:0;font:inherit;cursor:pointer;white-space:nowrap}
:where(.entry) .cta:hover{background:var(--coral)}
:where(.entry) .cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);margin-left:10px}
:where(.entry) .cta.ghost:hover{border-color:var(--ink);background:transparent}
:where(.entry) :is(.cta,button,input,a):focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* The steps of signing up and signing in, which answer into one Turbo frame */
:where(.entry) #signup_form{display:block}
:where(.entry) .signup{display:flex;gap:10px;justify-content:center;max-width:520px;margin:0 auto;flex-wrap:wrap}
:where(.entry) .signup input{flex:1;min-width:220px;font:inherit;font-size:1.02rem;padding:12px 16px;border-radius:999px;border:1px solid rgba(246,238,228,.3);background:rgba(246,238,228,.08);color:var(--light-ink)}
:where(.entry) .signup input::placeholder{color:var(--light-ink-soft)}
:where(.entry) .signup .field_with_errors{display:contents} /* Rails' wrapper would take the input's place in the row */
:where(.entry) .signup input[aria-invalid="true"]{border-color:var(--amber)}
:where(.entry) .signup-error{margin:12px auto 0;color:var(--amber);font-size:.95rem}
:where(.entry) .signup-prompt{max-width:46ch;margin:0 auto 16px;color:var(--light-ink);text-wrap:balance}
:where(.entry) .signup-prompt b{font-weight:600;overflow-wrap:anywhere}
:where(.entry) .signup input.code{font-family:"DM Mono",ui-monospace,Menlo,monospace;letter-spacing:.3em;text-align:center}
:where(.entry) .signup-aside{display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap;margin:14px 0 0;font-size:.9rem;color:var(--light-ink-soft)}
:where(.entry) .link-button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

.entry{min-height:100vh;background:linear-gradient(180deg,var(--dusk),var(--night) 70%);color:var(--light-ink)}
.entry .brand{color:var(--light-ink)}
.entry main{max-width:480px;margin:0 auto;padding:clamp(24px,8vw,88px) clamp(18px,4vw,48px) 72px}
.entry h1{font-size:clamp(2.1rem,6vw,3rem);margin-bottom:14px;overflow-wrap:anywhere}
.entry h2{font-size:1.35rem;margin-bottom:8px}
.entry p{color:var(--light-ink-soft)}
.entry p b{color:var(--light-ink);font-weight:600;overflow-wrap:anywhere}
.entry-notice{margin:0 0 28px;padding:12px 16px;border-radius:14px;background:rgba(240,166,60,.16);color:var(--light-ink)}

.entry .signup{justify-content:flex-start;margin:22px 0 0}
.entry .signup-prompt,.entry .signup-error{margin-left:0;margin-right:0}
.entry .signup-aside{justify-content:flex-start}
.entry-form{margin-top:26px}

.entry .cta{background:var(--amber);color:var(--night)}
.entry .cta:hover{background:#FFD98A}
.entry .cta.ghost{background:transparent;color:var(--light-ink);border:1px solid rgba(246,238,228,.3);margin-left:0}
.entry .cta.ghost:hover{border-color:var(--light-ink)}
.entry .cta.warning{background:transparent;color:var(--amber);border:1px solid var(--amber)}
.entry .cta.warning:hover{background:rgba(240,166,60,.12)}

.entry-part{border-top:1px solid rgba(246,238,228,.16);margin-top:36px;padding-top:26px}
.entry-sessions{list-style:none;padding:0;margin:0 0 18px}
.entry-sessions li{display:flex;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;padding:8px 0}
.entry-sessions b{font-weight:500}
.entry-sessions span{color:var(--light-ink-soft)}