/* The Eight Ranks Method — website v4 (24 October 2026). © 2026 Moheb Girgis. All rights reserved. The Eight Ranks Method™. */
:root{
  --navy:#1B3A5C;--navy-2:#14304d;--gold:#F2C14E;--gold-d:#C9971F;--ivory:#FBF7EF;--oak:#B58863;--ink:#1D1D1B;
  --bg:#FBF7EF;--surface:#FFFFFF;--surface-2:#F3ECDD;--text:#1D1D1B;--muted:#5B5A55;--line:#E4DCCB;--head:#1B3A5C;--accent:#C9971F;
  --btn:#1B3A5C;--btn-text:#FFFFFF;--shadow:0 18px 40px -18px rgba(27,58,92,.35);
  --w-white:#F4F4F2;--w-yellow:#F6D55C;--w-orange:#F28C28;--w-green:#2E8B57;--w-blue:#2F6DB5;--w-purple:#6B3FA0;--w-brown:#7B4B2A;--w-black:#1D1D1B;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141414;--surface:#1E1E1E;--surface-2:#262523;--text:#F1ECE2;--muted:#B3ADA2;--line:#34322E;--head:#F6EBD3;--accent:#F2C14E;
  --btn:#F2C14E;--btn-text:#1D1D1B;--shadow:0 18px 40px -18px rgba(0,0,0,.7);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#141414;--surface:#1E1E1E;--surface-2:#262523;--text:#F1ECE2;--muted:#B3ADA2;--line:#34322E;--head:#F6EBD3;--accent:#F2C14E;
  --btn:#F2C14E;--btn-text:#1D1D1B;--shadow:0 18px 40px -18px rgba(0,0,0,.7);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;color:var(--head);line-height:1.15;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.5rem,6vw,4.6rem);letter-spacing:-.02em}h2{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.01em}h3{font-size:1.3rem}
p{margin:0 0 1em}a{color:var(--head)}img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}.narrow{max-width:780px}.center{text-align:center}.mx{margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);padding:8px 12px}
.eyebrow{font:700 .78rem/1 Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.lead{font-size:1.2rem;color:var(--muted);max-width:640px}
.muted{color:var(--muted)}.small{font-size:.9rem}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--btn);color:var(--btn-text);border:2px solid var(--btn);border-radius:999px;padding:13px 24px;font:700 1rem Helvetica,Arial,sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1D1D1B}.btn.line{background:transparent;color:var(--head);border-color:currentColor}
.btn.sm{padding:8px 16px;font-size:.9rem}
/* header */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;min-height:84px}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--head);flex-shrink:0}
.logo img{width:56px;height:56px;border-radius:12px}
.logo b{font:700 1.35rem/1.05 Georgia,serif;display:block}.logo small{font:600 .72rem/1.2 Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.menu{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.menu a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);font-weight:600;font-size:.98rem}
.menu a:hover,.menu a.on{background:var(--surface-2);color:var(--head)}
.menu a.btn{color:#1D1D1B;margin-left:6px}
.iconbtn{background:none;border:1px solid var(--line);color:var(--text);border-radius:999px;width:42px;height:42px;font-size:1.1rem;cursor:pointer}
.burger{display:none}
@media (max-width:1020px){.menu{display:none;position:absolute;left:0;right:0;top:84px;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--line)}.menu.open{display:flex}.burger{display:inline-block;margin-left:auto}.menu a.btn{margin:8px 0 0;justify-content:center}}
/* hero */
.hero{position:relative;overflow:hidden;padding:72px 0 64px;background:radial-gradient(1200px 500px at 85% 10%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 60%),var(--bg)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1 .u{position:relative;white-space:nowrap}.hero h1 .u:after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.16em;background:var(--gold);z-index:-1;transform-origin:left;animation:draw 1.2s .4s both cubic-bezier(.2,.8,.2,1)}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .sub{font-size:1.28rem;color:var(--muted);max-width:560px;margin:18px 0 28px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;color:var(--muted);font-size:.95rem}.facts b{display:block;font:700 1.6rem Georgia,serif;color:var(--head)}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}.hero{padding:44px 0}}
/* animated book stage */
.stage{position:relative;height:520px;perspective:1600px}
.stage .bk{position:absolute;left:50%;top:40px;width:270px;aspect-ratio:8.5/11;margin-left:-135px;border-radius:6px 12px 12px 6px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.45),inset 4px 0 0 rgba(0,0,0,.18);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity 1.1s,filter 1.1s;will-change:transform}
.stage .bk img{width:100%;height:100%;object-fit:cover}
.stage .glow{position:absolute;left:50%;bottom:24px;width:360px;height:40px;margin-left:-180px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.25),transparent)}
.rankbar{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:6px}
.rankbar i{width:30px;height:12px;border-radius:4px;opacity:.28;transition:opacity .5s,transform .5s;border:1px solid rgba(0,0,0,.15)}
.rankbar i.on{opacity:1;transform:scaleY(1.5)}
.playfilm{position:absolute;right:6%;top:6px;z-index:5}
@media (max-width:560px){.stage{height:430px}.stage .bk{width:210px;margin-left:-105px}}
/* sections */
section.s{padding:84px 0}section.alt{background:var(--surface-2)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow)}
.card h3{margin-top:4px}.card .ico{font-size:1.9rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}@media (max-width:820px){.two{grid-template-columns:1fr}}
.path{border-top:6px solid var(--gold)}.path.b{border-top-color:var(--navy)}
.ticks{list-style:none;padding:0;margin:0 0 20px}.ticks li{padding:6px 0 6px 30px;position:relative}.ticks li:before{content:"✓";position:absolute;left:0;top:6px;color:var(--accent);font-weight:700}
.nots li:before{content:"–";color:var(--muted)}
/* belts */
.belts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:28px 0}
.belt{border:2px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 16px 9px 10px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px}
.belt .sw{width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.25)}.belt[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 35%,transparent)}
.beltpanel{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;max-width:900px;margin:0 auto}.beltpanel img{border-radius:10px;box-shadow:var(--shadow)}
@media (max-width:700px){.beltpanel{grid-template-columns:1fr}.beltpanel img{max-width:200px;margin:0 auto}}
/* books */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px}
.book{display:flex;flex-direction:column}.book img{border-radius:6px 10px 10px 6px;box-shadow:var(--shadow);aspect-ratio:8.5/11;object-fit:cover;transition:transform .25s}.book img:hover{transform:translateY(-6px) rotate(-1deg)}
.book h3{font-size:1.05rem;margin:14px 0 2px}.price{font:700 1.25rem Georgia,serif;color:var(--head)}.price small{display:block;font:500 .78rem Helvetica,Arial,sans-serif;color:var(--muted)}
.book .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.steps li{list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px 20px;position:relative}
.steps li:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#1D1D1B;font:700 1.1rem Georgia,serif;margin-bottom:10px}
.steps{padding:0;margin:0}
/* tables */
table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:14px;overflow:hidden}th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:var(--surface-2);font-family:Georgia,serif;color:var(--head)}
.pricecell{font:700 1.3rem Georgia,serif;color:var(--head);white-space:nowrap}
/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:12px}summary{cursor:pointer;font-weight:700;color:var(--head)}details p{margin:12px 0 0}
/* forms */
form .f{display:grid;gap:6px;margin-bottom:14px}label{font-weight:700;font-size:.95rem}input,select,textarea{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
/* challenge */
.chal{display:grid;grid-template-columns:420px 1fr;gap:40px;align-items:center}@media (max-width:860px){.chal{grid-template-columns:1fr}}
.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border-radius:10px;overflow:hidden;box-shadow:var(--shadow);border:6px solid var(--navy);max-width:420px}
.sq{position:relative;display:grid;place-items:center;font-size:clamp(1.4rem,4.6vw,2.4rem);cursor:pointer;user-select:none}.sq.l{background:#F0E3C6}.sq.d{background:#B58863}
.sq.sel{box-shadow:inset 0 0 0 4px var(--gold)}.sq.ok{background:#7FB77E}.sq.bad{background:#D9776C}
.pc-w{color:#fff;text-shadow:0 0 2px #000,0 0 1px #000}.pc-b{color:#111}
.timer{font:700 3rem Georgia,serif;color:var(--head)}.dots i{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--line);margin-right:6px}.dots i.ok{background:#2E8B57}.dots i.miss{background:#C0392B}
/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;place-items:center;z-index:90;padding:20px}.modal.on{display:grid}.modal video{width:min(960px,100%);border-radius:12px;background:#000}.modal .x{position:absolute;top:16px;right:20px;font-size:2rem;color:#fff;background:none;border:0;cursor:pointer}
/* notice */
.notice{border-left:5px solid var(--gold);background:var(--surface);padding:16px 20px;border-radius:0 12px 12px 0;margin:20px 0}
/* footer */
footer{background:#1D1D1B;color:#D9D3C7;padding:64px 0 30px;margin-top:0}footer a{color:#F6EBD3}footer h4{color:#F2C14E;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-family:Helvetica,Arial,sans-serif}
footer .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}footer ul{list-style:none;padding:0;margin:0}footer li{margin:6px 0}
footer .slogan{font:700 1.6rem Georgia,serif;color:#fff;margin:14px 0}
footer .legal{border-top:1px solid #333;margin-top:40px;padding-top:20px;font-size:.84rem;color:#A8A196}
@media (max-width:820px){footer .grid{grid-template-columns:1fr 1fr}}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
.hero h1{isolation:isolate}.prose{max-width:760px}

.menu a{white-space:nowrap}
@media (max-width:1020px){.nav{gap:10px}#mode{margin-left:auto}.burger{margin-left:0}}
@media (max-width:560px){.logo img{width:44px;height:44px}.logo b{font-size:1.05rem}.logo small{display:none}.nav{min-height:70px}.menu{top:70px}.facts{gap:18px}}

/* logo bigger (24 October 2026, Mo's request): the checkerboard-and-pawn mark */
.nav{min-height:118px}.logo img{width:96px;height:96px;border-radius:18px;box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.logo b{font-size:1.75rem}.logo small{font-size:.8rem}
.menu{top:118px}
footer .logo img{width:150px;height:150px;border-radius:26px}footer .logo{flex-direction:column;align-items:flex-start;gap:16px}footer .logo b{font-size:1.6rem}
@media (max-width:1020px){.menu{top:118px}}
@media (max-width:1180px) and (min-width:1021px){.logo b{font-size:1.4rem}.logo img{width:80px;height:80px}.menu a{padding:10px 8px}}
@media (max-width:560px){.nav{min-height:92px}.menu{top:92px}.logo img{width:68px;height:68px;border-radius:14px}.logo b{font-size:1.15rem}}
.iconbtn{flex-shrink:0}@media (max-width:1300px) and (min-width:1021px){.menu a{padding:10px 9px;font-size:.95rem}.nav{gap:14px}}
@media (max-width:560px){.logo{min-width:0;gap:10px}.logo b{font-size:1rem;max-width:140px}.nav{gap:8px}.iconbtn{width:40px;height:40px}}
/* v5 additions (28 October 2026) */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.previewbar{background:#7B4B2A;color:#fff;font:700 .85rem Helvetica,Arial,sans-serif;text-align:center;padding:8px 12px}
.draftbox{border:3px dashed #B3261E;background:#FFF4F2;color:#5A1410;border-radius:12px;padding:16px 20px;margin:24px auto;max-width:900px;font-size:.95rem}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pressgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.pressgrid figure{margin:0}.pressgrid img{width:100%;height:220px;object-fit:contain;background:#fff;border-radius:8px}
.rankcard{display:grid;grid-template-columns:150px 1fr;gap:26px;margin-bottom:22px}@media (max-width:560px){.rankcard{grid-template-columns:1fr}.rankcard img{max-width:160px}}
footer h2.fh{color:#F2C14E;font:700 .82rem Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.h3{font-size:1.3rem}
.newsletter form .f{margin-bottom:10px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #C9971F;outline-offset:2px}
/* v5: contrast (WCAG AA), the eight-item menu, the board as buttons */
:root:not([data-theme="dark"]){--accent:#8A6410}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent:#F2C14E}}
:root[data-theme="dark"]{--accent:#F2C14E}
@media (max-width:1240px){.menu{display:none;position:absolute;left:0;right:0;top:118px;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--line)}.menu.open{display:flex}.burger{display:inline-block;margin-left:0}#mode{margin-left:auto}.menu a.btn{margin:8px 0 0;justify-content:center}.nav{gap:10px}}
@media (max-width:560px){.menu{top:92px}}
@media (min-width:1241px) and (max-width:1420px){.menu a{padding:10px 7px;font-size:.93rem}.logo b{font-size:1.4rem}.logo img{width:80px;height:80px}.nav{gap:12px}}
.board button.sq{border:0;padding:0;margin:0;font-family:inherit;font-size:clamp(1.4rem,4.6vw,2.4rem);line-height:1;cursor:pointer;display:grid;place-items:center;width:100%;height:100%}
.board{grid-template-rows:repeat(8,1fr)}.board button.sq{aspect-ratio:1;height:auto;min-height:0;overflow:hidden}
[id]{scroll-margin-top:136px}@media (max-width:560px){[id]{scroll-margin-top:104px}}