:root {
--brutalist-border: 2px solid var(--fnv-ink);
--accent-yellow: var(--fnv-acad-accent);
--accent-blue: var(--fnv-gamma-pos);
--accent-pink: var(--fnv-gamma-neg-text);
}
.og-page { direction: rtl; font-family: 'Readex Pro', sans-serif; background: var(--fnv-surface); }
.acad-masthead { border-bottom: var(--brutalist-border); padding: 12px 0; background: var(--fnv-surface); position: relative; z-index: 10; }
.acad-masthead-inner { display: flex; align-items: center; justify-content: space-between; direction: rtl; }
.acad-masthead-brand { font-family:'Readex Pro', sans-serif; font-size: .8125rem; font-weight: 800; letter-spacing: .15em; color: var(--fnv-ink); text-transform: uppercase; }
.acad-masthead-tagline { font-family: 'Readex Pro', sans-serif; font-size: .85rem; font-weight: 700; color: var(--fnv-dark-bg); background: var(--accent-yellow); padding: 2px 8px; border: 1px solid var(--fnv-ink); }
.acad-masthead-line { flex: 1; height: 2px; background: var(--fnv-ink); margin: 0 20px; }
.og-hero {
padding: 56px 0 40px;
border-bottom: var(--brutalist-border);
background-color: var(--fnv-surface);
background-image: var(--fnv-paper);
background-size: var(--fnv-paper-size);
background-position: center center;
position: relative;
}
.hero-eyebrow {
font-family: 'Readex Pro', sans-serif;
font-size: .8125rem;
font-weight: 700;
color: var(--fnv-dark-bg);
margin-bottom: 24px;
display: inline-block;
background: var(--accent-yellow);
padding: 4px 12px;
border: 1px solid var(--fnv-ink);
}
.hero-headline { font-family: 'Readex Pro', sans-serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1.45; color: var(--fnv-ink); margin-bottom: 20px; text-shadow: 2px 2px 0px var(--fnv-surface); }
.hero-subtext { font-family: 'Readex Pro', sans-serif; font-size: 1.1rem; color: var(--fnv-ink); font-weight: 500; line-height: 1.8; max-width: none; margin: 0; background: color-mix(in srgb, var(--fnv-surface) 92%, transparent); padding: 12px 16px; border: 1px solid var(--fnv-ink); }
.og-tabs {
display: flex; gap: 0; margin: 0 0 40px; border: var(--brutalist-border); width: fit-content; flex-wrap: wrap;
box-shadow: none; background: var(--fnv-surface);
}
.og-tab-btn {
padding: 16px 32px; border: none; border-left: 2px solid var(--fnv-ink); background: var(--fnv-surface);
color: var(--fnv-ink); font-weight: 800; font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; font-family: 'Readex Pro', sans-serif;
}
.og-tab-btn:first-child { border-left: none; }
.og-tab-btn:hover { background: var(--accent-yellow); }
.og-tab-btn.active { background: var(--fnv-dark-bg); color: var(--accent-yellow); }
.og-tab-content { display: none; }
.og-tab-content.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.og-table-wrap {
background: var(--fnv-surface); border: var(--brutalist-border); margin-bottom: 40px;
box-shadow: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.og-table-head {
background: var(--fnv-dark-bg); border-bottom: var(--brutalist-border); padding: 16px 24px;
font-size: 14px; color: var(--accent-yellow);
font-weight: 800; font-family: 'Readex Pro', sans-serif;
}
.og-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.og-table th { padding: 16px 24px; text-align: right; font-size: 14px; color: var(--fnv-ink); font-weight: 800; border-bottom: 2px solid var(--fnv-ink); background: var(--fnv-grid); }
.og-table td { padding: 20px 24px; border-bottom: 1px solid var(--fnv-ink); font-size: 15px; font-weight: 500; color: var(--fnv-ink); vertical-align: middle; }
.og-table tr:last-child td { border-bottom: none; }
.og-table tr:hover { background: var(--fnv-surface-2); }
.og-greek-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; font-weight: 900; font-size: 24px; font-family: serif;
background: var(--fnv-dark-bg); color: var(--accent-yellow); border: 2px solid var(--fnv-ink);
box-shadow: none;
}
.og-range-badge {
display: inline-block; padding: 6px 12px;
background: var(--fnv-surface); border: 1px solid var(--fnv-ink);
font-size: 13px; color: var(--fnv-ink); font-weight: 800;
font-family:'Readex Pro', sans-serif; white-space: nowrap;
box-shadow: none;
}
.og-detail-card {
background: var(--fnv-surface); border: var(--brutalist-border); padding: 32px; height: 100%;
box-shadow: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; position: relative;
}
.og-detail-card:hover { transform: translate(-4px, -4px); box-shadow: none; }
.og-detail-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--accent-blue); display:none; }
.og-detail-card:hover::before { display:block; background:var(--accent-yellow); }
.og-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.og-detail-icon {
width: 64px; height: 64px; background: var(--fnv-ink); border: 2px solid var(--fnv-ink);
display: flex; align-items: center; justify-content: center;
font-size: 32px; font-weight: 900; color: var(--fnv-surface); font-family: serif;
box-shadow: none;
}
.og-detail-card:hover .og-detail-icon { background: var(--accent-yellow); color: var(--fnv-dark-bg); box-shadow: none; }
.og-detail-title { font-size: 24px; font-weight: 900; color: var(--fnv-ink); margin: 0; }
.og-detail-subtitle { font-size: 14px; font-weight: 700; color: var(--fnv-ink-muted); }
.og-detail-body { font-size: 16px; line-height: 1.8; color: var(--fnv-ink); font-weight: 500; }
.og-detail-tip {
background: var(--fnv-grid); border-left: 4px solid var(--fnv-ink); padding: 16px 20px;
font-size: 15px; color: var(--fnv-ink); font-weight: 700; margin-top: 24px; border: 1px solid var(--fnv-ink);
}
.og-strategy-selector {
background: var(--fnv-surface); border: var(--brutalist-border); padding: 32px; margin-bottom: 32px;
box-shadow: none;
}
.og-select-box {
width: 100%; background: var(--fnv-surface); color: var(--fnv-dark-bg); border: 2px solid var(--fnv-ink); padding: 16px 20px;
font-size: 16px; font-weight: 800; cursor: pointer; outline: none; font-family: 'Readex Pro', sans-serif;
box-shadow: none; transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.og-select-box:focus { background: var(--accent-yellow); }
.og-strategy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.og-strategy-card {
background: var(--fnv-surface); border: var(--brutalist-border); padding: 24px; cursor: pointer;
display: block; width: 100%; text-align: start; font-family: inherit; color: inherit;
box-shadow: none; transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.og-strategy-card .og-strat-name {
display: block; font-size: 20px; font-weight: 900; margin-bottom: 12px;
font-family: 'Readex Pro', sans-serif;
}
.og-strategy-card .og-strat-desc { display: block; font-size: 15px; margin: 0; font-weight: 500; }
.og-strategy-card:hover .og-strat-name, .og-strategy-card:hover .og-strat-desc { color: var(--fnv-surface); }
.og-strategy-card:hover { transform: translate(-4px, -4px); box-shadow: none; background: var(--fnv-ink); color: var(--fnv-surface); }
.og-strategy-card:hover h5, .og-strategy-card:hover p { color: var(--fnv-surface); }
.og-strat-type {
display: inline-block; padding: 4px 12px; font-size: .8125rem; font-weight: 800;
background: var(--fnv-dark-bg); color: var(--accent-yellow); border: 1px solid var(--fnv-ink); margin-bottom: 16px;
}
.og-strategy-card:hover .og-strat-type { background: var(--accent-yellow); color: var(--fnv-dark-bg); }
#strategyDetail {
background: var(--fnv-surface); border: var(--brutalist-border); box-shadow: none; margin-bottom: 40px; overflow: hidden;
}
#stratDetailHeader {
padding: 24px 32px; border-bottom: var(--brutalist-border); background: var(--fnv-dark-bg); color: var(--fnv-dark-text);
}
#stratDetailBadge {
font-size: 18px; font-weight: 900; padding: 6px 16px; border: 2px solid var(--fnv-dark-text); background: var(--accent-pink); color: var(--fnv-ink);
}
.strat-chart-wrap { border: var(--brutalist-border); background: var(--fnv-surface); box-shadow: none; margin-top: 24px; }
.strat-chart-header { padding: 16px 24px; font-size: 14px; font-weight: 800; color: var(--fnv-dark-bg); border-bottom: var(--brutalist-border); background: var(--accent-yellow); font-family: 'Readex Pro', sans-serif; }
@media (max-width: 768px) {
.og-tab-btn { padding: 12px 16px; font-size: 14px; flex: 1; text-align: center; border-bottom: 1px solid var(--fnv-ink); }
.og-tabs { width: 100%; flex-direction: column; }
.og-tab-btn:first-child { border-left: 2px solid var(--fnv-ink); }
}