/* =============================================================================
   AMI public site

   The design system from the agreed prototype: the moving aurora background,
   the drifting blobs, the glass panels, the white logo card beside a floating
   navigation pill, and the white on red button pair.

   Everything here comes from the prototype. What has been added is the handful
   of components the prototype showed as pictures and the live site needs as
   working things: the register list, the forms, and the article body.

   One stylesheet for every page, because seven pages sharing a look is one file
   rather than seven.
   ============================================================================= */

:root{
  --body:#0a0405; --txt:#fff; --muted:#e6d2d4; --eyebrow:#ffc9cd;
  --bg-grad:linear-gradient(130deg,#170103,#3d0207,#0a0405,#5c0208,#170103);
  --blob1:#E40613; --blob2:#8a0209; --blob3:#ff2d3a; --blobop:.55;
  --glass:rgba(255,255,255,.07); --glass-bd:rgba(255,255,255,.16);
  --glass-soft:rgba(255,255,255,.06); --glass-soft-bd:rgba(255,255,255,.12);
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --input-bg:rgba(0,0,0,.25); --input-bd:rgba(255,255,255,.25);
  --btnp-bg:#fff; --btnp-col:#B50410;
  --btng-bg:rgba(255,255,255,.12); --btng-bd:rgba(255,255,255,.4); --btng-col:#fff;
  --footer:rgba(0,0,0,.4); --link:#ffb0b5;
  --finder-bg:rgba(255,255,255,.13); --finder-bd:rgba(255,255,255,.3);
  --ok:#4ade80; --warn:#ffc978;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',Arial,sans-serif;color:var(--txt);background:var(--body);
  line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative;z-index:2}

/* ---------- the background ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg-grad);
  background-size:300% 300%;animation:aurora 22s ease infinite}
@keyframes aurora{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.blob{position:absolute;border-radius:50%;filter:blur(90px)}
.b1{width:620px;height:620px;background:var(--blob1);opacity:var(--blobop);top:-160px;left:-120px;animation:f1 16s ease-in-out infinite}
.b2{width:540px;height:540px;background:var(--blob2);opacity:var(--blobop);top:36%;right:-140px;animation:f2 19s ease-in-out infinite}
.b3{width:420px;height:420px;background:var(--blob3);opacity:calc(var(--blobop) * .6);top:72%;left:28%;animation:f1 13s ease-in-out infinite}
@keyframes f1{50%{transform:translate(60px,70px) scale(1.08)}}
@keyframes f2{50%{transform:translate(-70px,-50px) scale(1.05)}}
@media (prefers-reduced-motion: reduce){.bg{animation:none}.blob{animation:none !important}}

/* ---------- glass ---------- */
.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid var(--glass-bd);
  border-radius:22px;box-shadow:var(--shadow)}
.glass-soft{background:var(--glass-soft);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-soft-bd);border-radius:18px}
.glass-red{background:linear-gradient(160deg,rgba(228,6,19,.55),rgba(228,6,19,.18));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.28);border-radius:22px;color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-weight:700;font-size:15px;padding:14px 28px;border-radius:40px;
  cursor:pointer;transition:.16s;border:1px solid transparent;font-family:inherit}
.btn-p{background:var(--btnp-bg);color:var(--btnp-col)}
.btn-p:hover{transform:translateY(-2px)}
.btn-red{background:#E40613;color:#fff}
.btn-red:hover{background:#B50410}
.btn-g{background:var(--btng-bg);border-color:var(--btng-bd);color:var(--btng-col)}
.btn-g:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-s{padding:9px 18px;font-size:13px}

/* ---------- type ---------- */
.eyebrow{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--eyebrow);
  font-weight:600;margin-bottom:16px}
.tri{width:0;height:0;border-left:8px solid #E40613;border-top:5px solid transparent;
  border-bottom:5px solid transparent;display:inline-block;flex:none}
.tri.white{border-left-color:#fff}
section{padding:60px 0}
.sec-head{max-width:680px;margin:0 auto 40px;text-align:center}
.sec-head .eyebrow{text-align:center}
.sec-head h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.5px}
.sec-head p{font-size:17px;color:var(--muted);margin-top:12px}

/* ---------- navigation ---------- */
nav.top{position:sticky;top:16px;z-index:50;margin:16px auto 0;max-width:1200px;
  display:flex;gap:14px;align-items:stretch;padding:0 28px}
.brandcard{background:#fff;border-radius:16px;padding:10px 22px;display:flex;align-items:center;
  box-shadow:var(--shadow);flex:none}
.brandcard img{height:56px;width:auto}
.navbar{flex:1;display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 12px 28px;border-radius:34px}
.navbar ul{display:flex;gap:24px;list-style:none;font-size:15px;font-weight:600}
.navbar ul a:hover,.navbar ul a.active{color:#E40613}
.navbar .right{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:none;color:var(--txt);font-size:24px;cursor:pointer}

@media(max-width:1080px){
  .navbar ul{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(10,4,5,.96);backdrop-filter:blur(20px);border:1px solid var(--glass-bd);
    border-radius:22px;padding:10px 0;box-shadow:var(--shadow)}
  .navbar ul.open{display:flex}
  .navbar ul li a{display:block;padding:13px 28px}
  .navbar{position:relative}
  .burger{display:block;order:3}
  .navbar .right{margin-left:auto}
  .brandcard img{height:42px}
}
@media(max-width:760px){
  /* Three controls and a logo do not fit on a telephone. Check a member is in
     the menu and on every page anyway, so Join AMI is the one that stays. */
  .navbar .right .btn-g{display:none}
  .navbar .right .btn{padding:11px 18px;font-size:14px}
  nav.top{gap:10px;padding:0 16px}
  .wrap{padding:0 18px}
}

.crumb{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:#E40613}
.crumb b{color:var(--link);font-weight:600}

/* ---------- photographs ---------- */
.ph{background-size:cover;background-position:center;filter:brightness(1.16) contrast(1.02) saturate(1.08)}

/* ---------- hero ---------- */
.hero{padding:60px 0 20px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;line-height:1.05;letter-spacing:-1.3px}
.hrot{position:relative}
.hrot-space{visibility:hidden;display:block}
.hrot-item{position:absolute;left:0;right:0;top:0;opacity:0;transition:opacity 1.4s ease}
.hrot-item.on{opacity:1}
.hero p.lede{font-size:19px;color:var(--muted);max-width:560px;margin:22px 0 32px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-pic{height:440px;border-radius:26px;position:relative;overflow:hidden}
.hero-pic .badge{position:absolute;left:20px;bottom:20px;padding:11px 18px;font-weight:700;
  font-size:14px;border-radius:30px;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.tlist{list-style:none}
.tlist li{position:relative;padding:6px 0 6px 22px;color:var(--muted);font-size:15px}
.tlist li:before{content:'';position:absolute;left:0;top:14px;width:0;height:0;
  border-left:7px solid #E40613;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-pic{height:300px}
}

/* ---------- the finder ---------- */
.finder{margin:40px 0 0;padding:22px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:16px;
  align-items:end;background:var(--finder-bg);border:1px solid var(--finder-bd);border-radius:22px;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(228,6,19,.22)}
.finder label{display:block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt);margin:0 0 8px 4px}
.finder input,.finder select{width:100%;padding:15px 16px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.96);color:#171416;font-size:15px;
  font-weight:500;font-family:inherit;outline:none;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.finder input::placeholder{color:#8a8a8a}
.finder input:focus,.finder select:focus{border-color:#E40613;box-shadow:0 0 0 3px rgba(228,6,19,.25)}
.finder select option{color:#111}
.finder .btn-red{box-shadow:0 10px 26px rgba(228,6,19,.5);padding:15px 26px}
@media(max-width:820px){.finder{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.cards3{grid-template-columns:1fr}}
.qcard{padding:30px 26px;transition:.18s}
.qcard:hover{transform:translateY(-5px)}
.qicon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;background:#E40613;color:#fff;box-shadow:0 8px 20px rgba(228,6,19,.35)}
.qicon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.qcard h3{font-size:21px;font-weight:800;margin-bottom:10px}
.qcard p{font-size:15px;color:var(--muted);margin-bottom:16px}
.qcard .more{color:var(--link);font-weight:700;font-size:15px}

.stats{padding:34px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat .num{font-size:44px;font-weight:800;line-height:1}
.stat .num span{color:#E40613}
.stat .lbl{font-size:14px;color:var(--muted);margin-top:8px;font-weight:600}

.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.newsgrid{grid-template-columns:1fr}}
.ncard{overflow:hidden;transition:.18s;display:block}
.ncard:hover{transform:translateY(-5px)}
.nimg{height:180px;position:relative}
.nimg .cat{position:absolute;bottom:12px;left:12px;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.5px;padding:5px 12px;border-radius:20px;text-transform:uppercase}
.ncard .body{padding:22px}
.ncard .date{font-size:13px;color:var(--link);font-weight:700;margin-bottom:8px}
.ncard h4{font-size:18px;font-weight:700;line-height:1.3;margin-bottom:12px}
.ncard p{font-size:14px;color:var(--muted);margin-bottom:12px}
.ncard .more{color:var(--link);font-weight:700;font-size:14px}

.cta{padding:60px 40px;text-align:center}
.cta h2{font-size:clamp(30px,4vw,44px);font-weight:800;margin-bottom:14px}
.cta p{font-size:18px;max-width:600px;margin:0 auto 26px;color:#ffe0e2}

/* ---------- inner page banner ---------- */
.pbanner{overflow:hidden;position:relative;padding:56px 0 10px;margin-top:22px}
.pbanner h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-1px}
.pbanner p{font-size:18px;margin-top:12px;max-width:640px;color:var(--muted)}

/* ---------- the register ---------- */
.reg-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin:22px 0}
.reg-count{font-size:14px;color:var(--muted)}
.mcard{display:flex;gap:18px;padding:20px 22px;margin-bottom:14px;align-items:center;transition:.16s}
.mcard:hover{transform:translateY(-3px)}
.mcard .av{width:70px;height:70px;border-radius:16px;flex:none;background:rgba(255,255,255,.09);
  border:1px solid var(--glass-bd);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:22px;letter-spacing:-1px;color:#ffb0b5;background-size:cover;background-position:center}
.mcard .grade-b{display:inline-block;background:#E40613;color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:6px}
.mcard h4{font-size:18px;font-weight:800}
.mcard .loc{font-size:13px;color:var(--muted);margin-top:2px}
.mcard .tags{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.mcard .tags span{font-size:12px;padding:4px 10px;border-radius:20px;background:var(--glass-soft);
  color:var(--muted)}
.mcard .view{margin-left:auto;flex:none}
@media(max-width:640px){
  .mcard{flex-wrap:wrap}
  .mcard .view{margin-left:0;width:100%}
}
.pager{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}
.pager span{font-size:14px;color:var(--muted)}

/* ---------- a member's page ---------- */
.profile{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start;padding:34px}
@media(max-width:760px){.profile{grid-template-columns:1fr}}
.photo{width:230px;height:230px;border-radius:20px;object-fit:cover;border:1px solid var(--glass-bd);
  background:rgba(255,255,255,.08)}
.photo.blank{display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:800;
  color:#ffb0b5;letter-spacing:-2px}
.facts{list-style:none;margin-top:22px}
.facts li{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--glass-soft-bd);font-size:15px;
  flex-wrap:wrap}
.facts li:last-child{border-bottom:none}
.facts li b{min-width:200px;font-weight:600;color:var(--muted)}

/* ---------- badges ---------- */
.badge-t{display:inline-block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;
  padding:5px 12px;border-radius:20px;background:var(--glass-soft);color:var(--muted);
  border:1px solid var(--glass-soft-bd)}
.badge-t.ok{background:rgba(74,222,128,.16);color:#9df3bd;border-color:rgba(74,222,128,.35)}
.badge-t.red{background:#E40613;color:#fff;border-color:transparent}

/* ---------- forms ---------- */
form.stack{max-width:700px}
.field{margin-bottom:20px}
.field label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:0 0 8px 4px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border-radius:12px;
  border:1px solid var(--input-bd);background:var(--input-bg);color:var(--txt);font-size:15px;
  font-family:inherit;outline:none}
.field textarea{resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#E40613;
  box-shadow:0 0 0 3px rgba(228,6,19,.25)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.45)}
.field select option{color:#111}
.field .hint{font-size:13px;color:var(--muted);margin-top:7px;padding-left:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.note{padding:16px 18px;border-radius:14px;font-size:15px;margin:20px 0;line-height:1.55}
.note.err{background:rgba(228,6,19,.18);border:1px solid rgba(255,120,130,.5)}
.note.ok{background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.4)}
.note.info{background:var(--glass-soft);border:1px solid var(--glass-soft-bd)}

/* ---------- article ---------- */
.prose{max-width:70ch;font-size:17px;color:#f3e6e7}
.prose p{margin-bottom:1.15em}
.prose h2{font-size:26px;margin:1.6em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.15em 1.3em}
.prose li{margin-bottom:.4em}

/* ---------- states ---------- */
.state{padding:56px 20px;text-align:center;color:var(--muted)}
.spin{display:inline-block;width:24px;height:24px;border:3px solid rgba(255,255,255,.2);
  border-top-color:#E40613;border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- footer ---------- */
footer{background:var(--footer);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  margin-top:60px;padding:52px 0 30px;position:relative;z-index:2;
  border-top:1px solid var(--glass-soft-bd)}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px;margin-bottom:34px}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
footer h4{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#fff;font-weight:800;
  margin-bottom:14px}
footer a{display:block;padding:5px 0;color:var(--muted);font-size:15px}
footer a:hover{color:#fff}
footer p{color:var(--muted);font-size:15px}
footer .base{border-top:1px solid var(--glass-soft-bd);padding-top:22px;display:flex;gap:16px;
  flex-wrap:wrap;justify-content:space-between;font-size:13px;color:var(--muted)}
footer .flogo{background:#fff;border-radius:12px;padding:8px 16px;display:inline-flex;margin-bottom:16px}
footer .flogo img{height:38px;width:auto}

.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:#fff;color:#B50410;padding:10px 16px;border-radius:8px;z-index:99}


/* ---------- band, a photograph with words over it ---------- */
.band{border-radius:26px;overflow:hidden;position:relative;padding:70px 54px;color:#fff}
.band h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;max-width:560px;line-height:1.12}
.band p{font-size:17px;color:#f0dcde;margin:14px 0 24px;max-width:520px}
@media(max-width:700px){.band{padding:48px 26px}}

/* ---------- grades ---------- */
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.grades{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.grades{grid-template-columns:1fr}}
.grade{padding:28px 22px;text-align:center;transition:.18s}
.grade:hover{transform:translateY(-5px)}
.grade .tag{display:inline-block;background:var(--glass-soft);font-weight:700;font-size:12px;
  letter-spacing:1px;padding:5px 14px;border-radius:20px;margin-bottom:14px;text-transform:uppercase}
.grade.feat .tag{background:#fff;color:#B50410}
.grade h4{font-size:18px;font-weight:800;margin-bottom:8px}
.grade p{font-size:14px;color:var(--muted)}
.grade .price{font-size:30px;font-weight:800;margin-top:12px}
.grade .price span{font-size:14px;opacity:.7}
.grade.feat p{color:#ffe3e5}

/* ---------- support grid ---------- */
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.support-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.support-grid{grid-template-columns:1fr}}
.scard{padding:24px}
.scard h4{font-size:17px;font-weight:700;margin-bottom:8px}
.scard .sicon{width:44px;height:44px;border-radius:12px;background:#E40613;color:#fff;display:flex;
  align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 6px 16px rgba(228,6,19,.3)}
.scard .sicon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.scard p{font-size:14px;color:var(--muted)}

/* ---------- split, intro, steps, faq ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:22px;overflow:hidden}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.split .pic{min-height:360px}
.split .txt{padding:44px}
.split h2{font-size:28px;font-weight:800;margin-bottom:14px}
.split p{font-size:16px;color:var(--muted);margin-bottom:14px}

.intro-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:44px;align-items:start}
@media(max-width:900px){.intro-grid{grid-template-columns:1fr}}
.intro h2{font-size:30px;font-weight:800;margin-bottom:16px}
.intro p{font-size:16px;color:var(--muted);margin-bottom:14px}
.aside{padding:28px}
.aside h3{font-size:18px;font-weight:800;margin-bottom:14px}
.aside ul{list-style:none}
.aside li{font-size:15px;padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--glass-soft-bd)}
.aside li:last-child{border-bottom:none}
.aside li::before{content:"\2713";color:#E40613;font-weight:800;position:absolute;left:0}

.steprow{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.steprow{grid-template-columns:1fr}}
.step{padding:28px 24px}
.step .n{width:46px;height:46px;border-radius:50%;background:#E40613;color:#fff;font-weight:800;
  font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h4{font-size:19px;font-weight:700;margin-bottom:8px}
.step p{font-size:14px;color:var(--muted)}

.faq{max-width:820px;margin:0 auto}
.faq details{padding:2px 22px;margin-bottom:12px}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:16px;padding:18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;color:#E40613;font-size:22px}
.faq details[open] summary::after{content:"\2212"}
.faq p{font-size:15px;color:var(--muted);padding:0 0 18px}

/* Sections fade up as they arrive, as they did in the prototype. Anything that
   has not been revealed yet is still readable if the script never runs. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}