/* Obleek — scoped to .obleek-page; builds on ../styles.css tokens */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 500; font-display: swap; src: url(unbounded-latin.woff2) format('woff2'); }
.obleek-page { border-top: 3px solid var(--cyan); --card-font: 'Unbounded', 'Arial Black', Arial, sans-serif; }
.obleek-page .header { justify-content: center; }
.obleek-page .header a { display: block; line-height: 0; }
.obleek-page #site-logo { margin: 0 auto; }
.obleek-page .ob-main { max-width: 860px; margin: 40px auto 60px; }
.ob-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ob-card {
    position: relative; min-height: 340px; padding: 36px 36px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: #0d0f12; border: 2px solid var(--cyan);
    box-shadow: 5px 5px 0 var(--shadow-magenta), -3px -3px 0 var(--shadow-cyan);
    margin: 0 0 26px;
}
.ob-card::before, .ob-card::after { content: ''; position: absolute; width: 34px; height: 34px; pointer-events: none; }
.ob-card::before { top: -8px; left: -8px; border-top: 1px solid var(--cyan); border-left: 1px solid var(--cyan); }
.ob-card::after { bottom: -8px; right: -8px; border-bottom: 1px solid var(--magenta); border-right: 1px solid var(--magenta); }
.ob-text {
    margin: 0; width: 100%;
    font: 500 clamp(22px, 4.2vw, 42px)/1.3 var(--card-font);
    letter-spacing: -.5px; overflow-wrap: anywhere; color: var(--text-color);
    text-shadow: 2px 1px var(--magenta), -2px -1px var(--cyan);
}
/* Oblique (existing card): solid cyan frame. Ephemeral: dashed magenta frame. */
.ob-card.is-new { border: 2px dashed var(--magenta); box-shadow: 5px 5px 0 var(--shadow-cyan), -3px -3px 0 var(--shadow-magenta); }
/* Nothing drawn yet: two overlapping registration rings, like the masthead */
.ob-card.is-empty .ob-text { display: none; }
.ob-card.is-empty { background-image:
    radial-gradient(circle at calc(50% - 10px) calc(50% - 6px), transparent 46px, var(--cyan) 46px 47px, transparent 47px),
    radial-gradient(circle at calc(50% + 10px) calc(50% + 6px), transparent 46px, var(--magenta) 46px 47px, transparent 47px); }
.ob-card.is-error .ob-text { color: var(--text-muted); text-shadow: none; font-size: 18px; }
.ob-flip { animation: ob-flip .35s ease-out; }
@keyframes ob-flip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ob-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 44px; }
.ob-btn {
    min-height: 64px; padding: 16px 20px; cursor: pointer;
    font: 500 18px/1.3 var(--card-font); letter-spacing: .5px;
    background: transparent; color: var(--text-color);
    border: 2px solid var(--cyan); box-shadow: 4px 4px 0 var(--shadow-magenta);
    transition: box-shadow .12s, color .12s;
}
.ob-btn-gen { border-color: var(--magenta); border-style: dashed; box-shadow: 4px 4px 0 var(--shadow-cyan); }
.ob-btn:hover { color: var(--cyan); box-shadow: 2px 2px 0 var(--shadow-magenta); }
.ob-btn-gen:hover { color: #ff6a9e; box-shadow: 2px 2px 0 var(--shadow-cyan); }
.ob-btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ob-btn:active { box-shadow: none; }
.ob-btn:disabled { opacity: .55; cursor: progress; box-shadow: 4px 4px 0 var(--shadow-cyan); color: var(--text-muted); }
.ob-more { display: block; width: max-content; margin: 0 auto; font: 13px/1.4 Arial, Helvetica, sans-serif; letter-spacing: .5px; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--line); padding: 4px 0; }
.ob-more:hover { color: var(--cyan); border-color: var(--cyan); }
.ob-more:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 600px) {
    .obleek-page .container { padding: 0 16px; }
    .obleek-page .header { padding: 12px 0 10px; }
    .obleek-page #site-logo { width: 100%; max-width: 230px; }
    .obleek-page .ob-main { margin: 18px auto 30px; }
    .ob-card { padding: 22px 16px; min-height: 230px; margin-bottom: 20px; }
    .ob-text { font-size: clamp(18px, 5.4vw, 26px); }
    .ob-actions { grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; }
    .ob-btn { min-height: 54px; padding: 12px 16px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .ob-flip { animation: none; }
    .ob-btn { transition: none; }
}
/* /obliquestrategies info page */
.ob-info { font: 17px/1.65 var(--paper-font); color: var(--text-muted); max-width: 760px; }
.ob-info .ob-title { font: 500 clamp(30px, 6vw, 56px)/1.15 var(--card-font); letter-spacing: -1px; margin: 12px 0 18px; color: var(--text-color); text-shadow: 2px 1px var(--magenta), -2px -1px var(--cyan); }
.ob-info h2 { font: 500 22px/1.3 var(--card-font); color: var(--text-color); margin: 34px 0 8px; }
.ob-lead { font-size: 19px; color: var(--text-color); }
.ob-info strong { color: var(--text-color); }
.ob-info li { margin-bottom: 12px; }