.page-shell { width: 100%; max-width: 1100px; margin: 0 auto; }
.clear { clear: both; height: 0; overflow: hidden; }

.hero-guide {
    position: relative;
    min-height: 272px;
    overflow: hidden;
    border: 1px solid #6e1a50;
    background: #130912 url('../img/guide/hero-codex.jpg') no-repeat center center;
    background-size: cover;
    box-shadow: inset 0 0 45px rgba(0,0,0,.55), inset 0 0 0 4px rgba(255,255,255,.018), 0 12px 26px rgba(0,0,0,.38);
}
.hero-guide:before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: -webkit-linear-gradient(left, rgba(8,4,8,.96) 0%, rgba(15,6,14,.79) 47%, rgba(15,6,14,.12) 78%);
    background: linear-gradient(to right, rgba(8,4,8,.96) 0%, rgba(15,6,14,.79) 47%, rgba(15,6,14,.12) 78%);
}
.hero-guide__content { position: relative; z-index: 2; width: 55%; padding: 32px 30px 28px; }
.hero-guide__content:after { content: ""; display: block; width: 74px; height: 1px; margin-top: 17px; background: #dd2b91; box-shadow: 25px 0 0 #6e1b50, 50px 0 0 #371027; }
.eyebrow, .page-kicker { color: #ff70bf; font-size: 9px; font-weight: bold; letter-spacing: 2.2px; text-transform: uppercase; }
.hero-guide h1, .page-head h1 {
    margin: 8px 0 10px;
    color: #fff3fb;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.05;
    text-shadow: 0 0 18px rgba(230,44,155,.38);
}
.hero-guide p { color: #d8c5d2; font-size: 12px; line-height: 1.65; }
.hero-chips { margin-top: 17px; }
.hero-chip {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 6px 9px;
    color: #ff9ed4;
    border: 1px solid #7e205a;
    background: rgba(15,6,14,.84);
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
}

.page-head { position: relative; overflow: hidden; padding: 6px 0 15px 17px; border-left: 2px solid #e62c9b; }
.page-head:after { content: ""; position: absolute; left: 17px; right: 74px; bottom: 3px; height: 1px; background: -webkit-linear-gradient(left, #6b1a4c, rgba(107,26,76,0)); background: linear-gradient(to right, #6b1a4c, rgba(107,26,76,0)); }
.page-head h1 { margin: 6px 0 5px; font-size: 26px; }
.page-head p { max-width: 720px; color: #a98e9f; font-size: 12px; line-height: 1.55; }
.page-mark { position: absolute; top: 0; right: 3px; color: #48213a; font-family: Georgia, serif; font-size: 50px; }

.quick-table, .two-col, .stat-strip { display: table; width: 100%; table-layout: fixed; border-spacing: 10px; margin: 8px -10px 0; }
.quick-card, .col, .stat-cell { display: table-cell; vertical-align: top; }
.quick-card {
    position: relative;
    height: 116px;
    padding: 15px 14px 13px 86px;
    color: #cdbac7;
    border: 1px solid #3e172f;
    background: #120a11;
    background: -webkit-linear-gradient(135deg, #180c16, #0e080e);
    background: linear-gradient(135deg, #180c16, #0e080e);
    cursor: pointer;
    box-shadow: inset 0 0 22px rgba(0,0,0,.24);
}
.quick-card:before { content: ""; position: absolute; left: -1px; top: 18px; width: 2px; height: 38px; background: #e52d99; box-shadow: 0 0 8px #e52d99; }
.quick-card:hover { border-color: #b8287c; background: #1b0b17; box-shadow: inset 0 0 25px rgba(226,39,151,.07), 0 0 13px rgba(226,39,151,.10); }
.quick-card img { position: absolute; left: 9px; top: 12px; width: 67px; height: 67px; padding: 4px; object-fit: contain; border: 1px solid #3e1630; background: #0a060a; }
.quick-card h3, .section-title { color: #fff1f9; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.2; }
.quick-card p { margin-top: 7px; color: #9e8294; font-size: 10px; line-height: 1.45; }
.quick-card .card-link { display: block; margin-top: 7px; color: #ff66b7; font-size: 9px; font-weight: bold; letter-spacing: 1px; }

.section-panel {
    position: relative;
    margin-top: 12px;
    padding: 17px 18px;
    border: 1px solid #351229;
    background: #10090f;
    background: -webkit-linear-gradient(135deg, rgba(25,10,21,.96), rgba(12,7,12,.98));
    background: linear-gradient(135deg, rgba(25,10,21,.96), rgba(12,7,12,.98));
    box-shadow: inset 3px 0 0 rgba(217,39,143,.24);
}
.section-panel:before { content: ""; position: absolute; top: -1px; right: -1px; width: 24px; height: 1px; background: #a62672; }
.section-panel--dark { background: #0b070b; }
.section-title { position: relative; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid #2d1125; }
.section-title:after { content: ""; position: absolute; left: 0; bottom: -1px; width: 38px; height: 1px; background: #d72b90; }
.section-title span { color: #e62c9b; }
.section-copy, .section-panel p { color: #b7a2b0; font-size: 11px; line-height: 1.6; }
.accent { color: #ff6aba; font-weight: bold; }

.two-col { border-spacing: 12px; margin: 0 -12px; }
.col { width: 50%; }
.stat-strip { border-spacing: 1px; margin: 3px 0 12px; background: #39142c; }
.stat-cell { position: relative; padding: 12px 8px; text-align: center; background: #120a11; }
.stat-cell:after { content: "◆"; display: block; margin-top: 5px; color: #54203f; font-size: 6px; }
.stat-cell small { display: block; margin-bottom: 5px; color: #896a7e; font-size: 8px; font-weight: bold; letter-spacing: 1.4px; }
.stat-cell strong { color: #ff6fbe; font-family: Georgia, serif; font-size: 17px; }

.step-list { counter-reset: soulstep; }
.step-item { position: relative; min-height: 44px; margin: 9px 0; padding: 2px 8px 7px 46px; border-bottom: 1px dotted #3c1730; }
.step-number {
    position: absolute; left: 0; top: 0;
    width: 32px; height: 32px;
    color: #ff9dd3; border: 1px solid #8f2364; background: #1b0c17;
    font-family: Georgia, serif; font-size: 14px; line-height: 31px; text-align: center;
}
.step-item strong { display: block; margin-bottom: 4px; color: #f3dfe9; font-size: 11px; }
.step-item p { color: #9e8795; font-size: 10px; line-height: 1.45; }

.info-table { width: 100%; margin-top: 9px; border: 1px solid #3b162e; background: #0b070b; }
.info-table th { padding: 8px 9px; color: #d483b1; border-bottom: 1px solid #552040; background: #1c0b18; font-size: 8px; font-weight: bold; letter-spacing: 1px; text-align: left; }
.info-table td { padding: 8px 9px; color: #bba8b4; border-bottom: 1px solid #25101f; font-size: 10px; line-height: 1.35; vertical-align: middle; }
.info-table tr:nth-child(odd) td { background: rgba(35,13,29,.25); }
.info-table tr:hover td { background: rgba(105,25,76,.18); }
.info-table tr:last-child td { border-bottom: 0; }
.info-table td strong { color: #f3d7e7; }
.info-table .accent { color: #ff6aba; font-weight: bold; }
.info-table .good { color: #55dda0; font-weight: bold; }
.info-table .gold { color: #e6b958; font-weight: bold; }

.note { margin-top: 12px; padding: 11px 13px; color: #c6acbc; border: 1px solid #4e1a3a; background: #180b15; font-size: 10px; line-height: 1.5; }
.note strong { color: #ff88c9; }
.note--warning { color: #d8c4ae; border-color: #725427; background: #1c160b; }
.note--warning strong { color: #f3c45d; }
.note--good { border-color: #1c6149; background: #091b16; }
.note--good strong { color: #5be1aa; }

.class-list, .event-list { margin: 7px -6px 0; }
.class-card, .event-card {
    position: relative;
    display: inline-block;
    width: 48.2%;
    min-height: 112px;
    margin: 6px;
    padding: 12px;
    vertical-align: top;
    border: 1px solid #3a152d;
    background: #10090f;
    background: -webkit-linear-gradient(135deg, #150a13, #0c070c);
    background: linear-gradient(135deg, #150a13, #0c070c);
    box-shadow: inset 0 0 18px rgba(0,0,0,.24);
}
.class-card:after, .event-card:after { content: ""; position: absolute; top: -1px; right: -1px; width: 17px; height: 17px; border-top: 1px solid #a42772; border-right: 1px solid #a42772; }
.class-card:hover, .event-card:hover { border-color: #762052; box-shadow: inset 0 0 22px rgba(217,39,143,.05); }
.class-card img, .event-card img { float: left; width: 82px; height: 82px; margin-right: 12px; object-fit: contain; background: #080608; border: 1px solid #471a36; }
.class-card h3, .event-card h3 { margin: 3px 0 6px; color: #fff0f8; font-family: Georgia, serif; font-size: 15px; }
.class-card h3 span, .event-card h3 span { color: #e62c9b; }
.class-card p, .event-card p { color: #9e8796; font-size: 10px; line-height: 1.45; }
.class-card .role { display: block; margin-top: 7px; color: #de6bac; font-size: 8px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; }
.event-card { min-height: 129px; }
.event-card img { width: 94px; height: 94px; }
.event-schedule { display: block; margin-top: 6px; color: #61d9aa; font-family: 'Courier New', monospace; font-size: 9px; font-weight: bold; }

.item-row { display: table; width: 100%; min-height: 62px; margin-top: 8px; border: 1px solid #301329; background: #0d080d; box-shadow: inset 2px 0 0 #6e1d50; }
.item-icon, .item-copy { display: table-cell; vertical-align: middle; }
.item-icon { width: 68px; padding: 7px; text-align: center; background: #090609; }
.item-icon img { max-width: 50px; max-height: 50px; }
.item-copy { padding: 9px 11px; }
.item-copy strong { display: block; margin-bottom: 4px; color: #efdaea; font-size: 11px; }
.item-copy p { color: #957d8c; font-size: 9px; line-height: 1.4; }

.command-grid { margin-top: 8px; }
.command-row { display: table; width: 100%; border-bottom: 1px solid #2a1022; }
.command-row code, .command-row span { display: table-cell; padding: 8px 10px; vertical-align: middle; }
.command-row code { width: 145px; color: #ff7cc2; background: #120911; border-left: 2px solid #642047; font-family: 'Courier New', monospace; font-size: 10px; font-weight: bold; }
.command-row span { color: #ae96a5; font-size: 10px; line-height: 1.4; }

.chapter-footer { margin: 18px 0 3px; color: #62475a; font-size: 8px; letter-spacing: 1px; text-align: center; text-transform: uppercase; }
.chapter-footer:before, .chapter-footer:after { content: " ◆ "; color: #9b286d; }

@media screen and (max-width: 980px) {
    .hero-guide__content { width: 62%; }
    .class-card, .event-card { width: 47.8%; }
}