/* Craps Online */
:root{--site-id:'d933e599a3ca';}
/* Informational archetype — Wall D2 article-wrapper skin.
 *
 * TOKEN-DRIVEN: every color / font / radius decision reads the SAME --hp-*
 * custom properties the D1 homepage uses. The :root block below carries the
 * serif-editorial defaults; the build appends the site's selected theme
 * block AFTER this file (orchestration/article_theme.py -> sync_article_theme,
 * reusing homepage_template._theme_tokens_css), so the appended tokens win
 * the cascade and the article wrapper matches the homepage skin exactly.
 *
 * SCOPING RULE: everything is scoped under .artx (the class ArticleLayout
 * adds ONLY when site-config.json carries article_theme, i.e. informational
 * archetype builds) or under body:has(.artx) for page-level chrome that
 * lives outside the article column (background, progress bar, back-to-top).
 * No bare element selectors — nothing here can cascade into the site
 * header/footer or into non-themed pages (the bare-nav footer bug from the
 * gambling archetype must never recur).
 *
 * This file is served per-site as /_assets/article.{fingerprint}.css with a
 * personalization header + theme tokens appended — never byte-shared across
 * the portfolio (anti-footprint, same contract as the homepage CSS).
 */

:root {
    --hp-bg: #f6f3ea;
    --hp-surface: #fffdf6;
    --hp-ink: #1f2a26;
    --hp-ink-2: #5a665f;
    --hp-line: #ddd6c4;
    --hp-accent: #8a6d1f;
    --hp-accent-ink: #fffdf4;
    --hp-accent-soft: #f1ead3;
    --hp-hero-bg: linear-gradient(160deg, #17352b 0%, #204435 100%);
    --hp-hero-ink: #f2efe2;
    --hp-hero-ink-2: #c9d4c8;
    --hp-hero-line: rgba(242, 239, 226, 0.22);
    --hp-radius: 10px;
    --hp-radius-btn: 8px;
    --hp-font-heading: 'Lora', Georgia, 'Times New Roman', serif;
    --hp-font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}

/* ---- page-level chrome (only when a themed article is on the page) ---- */

body:has(.artx) {
    background-color: var(--hp-bg);
}

body:has(.artx) #progress-bar {
    background-color: var(--hp-accent);
}

body:has(.artx) #back-to-top {
    background-color: var(--hp-accent);
    color: var(--hp-accent-ink);
}

body:has(.artx) #back-to-top:hover {
    background-color: var(--hp-accent);
    filter: brightness(0.92);
}

/* ---- base typography ---- */

.artx {
    font-family: var(--hp-font-body);
    color: var(--hp-ink);
}

.artx h1,
.artx h2,
.artx h3 {
    font-family: var(--hp-font-heading);
    line-height: 1.2;
    text-wrap: balance;
}

.artx a:focus-visible {
    outline: 2px solid var(--hp-accent);
    outline-offset: 2px;
}

/* Tailwind grey-chrome retint — the wrapper's utility classes are stable
   layout hooks; inside .artx they read theme ink/line/surface instead of
   the generic grey scale. Scoped depth (0,2,0) beats the utility (0,1,0). */

.artx .text-gray-900 {
    color: var(--hp-ink);
}

.artx .text-gray-700 {
    color: var(--hp-ink);
}

.artx .text-gray-600,
.artx .text-gray-500 {
    color: var(--hp-ink-2);
}

.artx .border-gray-200 {
    border-color: var(--hp-line);
}

.artx .bg-gray-50 {
    background-color: var(--hp-surface);
}

.artx .bg-gray-100 {
    background-color: var(--hp-accent-soft);
}

.artx .text-brand-600 {
    color: var(--hp-accent);
}

.artx .bg-brand-600 {
    background-color: var(--hp-accent);
    color: var(--hp-accent-ink);
}

.artx .hover\:text-brand-600:hover,
.artx .hover\:text-brand-800:hover {
    color: var(--hp-accent);
}

.artx .hover\:border-brand-300:hover {
    border-color: var(--hp-accent);
}

.artx .group:hover .group-hover\:text-brand-600 {
    color: var(--hp-accent);
}

.artx .rounded-lg,
.artx .rounded-xl {
    border-radius: var(--hp-radius);
}

/* ArticleCard imageless placeholder: flat theme wash instead of brand gradient */
.artx .bg-gradient-to-br {
    background-image: none;
    background-color: var(--hp-accent-soft);
}

/* ---- breadcrumbs ---- */

.artx nav[aria-label="Breadcrumb"] ol {
    color: var(--hp-ink-2);
}

.artx nav[aria-label="Breadcrumb"] a:hover {
    color: var(--hp-accent);
}

.artx nav[aria-label="Breadcrumb"] [aria-current="page"] {
    color: var(--hp-accent);
    font-weight: 600;
}

/* ---- byline row (Wall D2, persona-gated) ---- */

.artx-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    margin-top: 16px;
    border-top: 1px solid var(--hp-line);
    border-bottom: 1px solid var(--hp-line);
}

.artx-byline-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--hp-accent);
    object-fit: cover;
    flex: none;
}

.artx-byline-avatar-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hp-hero-bg);
    color: var(--hp-hero-ink);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.artx-byline-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--hp-ink-2);
}

.artx-byline-text b {
    display: block;
    font-size: 13.5px;
    color: var(--hp-ink);
}

/* ---- hero image ---- */

.artx > figure img {
    border-radius: var(--hp-radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

/* ---- verdict box (Wall D2, answer-first) ---- */

.artx-verdict {
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    border-left: 4px solid var(--hp-accent);
    border-radius: var(--hp-radius);
    padding: 16px 20px;
    margin: 0 0 28px;
}

.artx-verdict-kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hp-accent);
}

.artx-verdict p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--hp-ink);
}

/* ---- table of contents ---- */

.artx > aside {
    background-color: var(--hp-surface);
    border-color: var(--hp-line);
    border-radius: var(--hp-radius);
}

/* ---- article body ---- */

.artx .prose {
    color: var(--hp-ink);
    font-family: var(--hp-font-body);
}

.artx .prose h2,
.artx .prose h3,
.artx .prose h4 {
    font-family: var(--hp-font-heading);
    color: var(--hp-ink);
}

.artx .prose a {
    color: var(--hp-accent);
}

.artx .prose strong {
    color: var(--hp-ink);
}

.artx .prose blockquote {
    border-left-color: var(--hp-accent);
    color: var(--hp-ink-2);
}

.artx .prose table th {
    color: var(--hp-ink);
    border-bottom: 1px solid var(--hp-line);
}

.artx .prose table td {
    border-bottom: 1px solid var(--hp-line);
}

.artx .prose hr {
    border-color: var(--hp-line);
}

.artx .prose code {
    color: var(--hp-ink);
    background: var(--hp-accent-soft);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ---- visible FAQ ---- */

.artx #faq .faq-item {
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius);
    padding: 14px 18px;
}

.artx #faq .faq-item h3 {
    font-family: var(--hp-font-body);
    text-wrap: initial;
}

/* ---- sources & method strip (Wall D2) ---- */

.artx-sources {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px dashed var(--hp-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--hp-ink-2);
}

.artx-sources b {
    font-weight: 600;
    color: var(--hp-ink);
}

/* ---- small screens ---- */

@media (max-width: 640px) {
    .artx-byline {
        gap: 10px;
    }
}

/* Informational archetype — Wall D3 about-page skin.
 *
 * Served as part of the SAME per-site stylesheet as the article skin:
 * orchestration/article_theme.py appends this file after
 * article-informational.css inside /_assets/article.{fingerprint}.css, then
 * appends the site's theme-token block AFTER both (tokens win the cascade).
 * One asset, one seam, one purge path — the about page is a single page and
 * a separate stylesheet would only widen the shared-workspace contamination
 * surface (hard rule #4).
 *
 * TOKEN-DRIVEN: consumes the SAME --hp-* custom-property contract as the D1
 * homepage and D2 article skin (defaults live in article-informational.css's
 * :root block, which always precedes this file in the served asset).
 *
 * SCOPING RULE: every selector is scoped under .abx — the marker class
 * about/index.astro adds to <main> ONLY when site-config.json carries
 * article_theme (informational archetype builds; the wrapper also carries
 * .artx so the article skin's typography/prose/breadcrumb retints apply).
 * No bare element selectors — nothing here can cascade into the site header
 * or footer (the gambling bare-nav bug must never recur).
 */

/* ---- persona card (Wall D3 E-E-A-T comp: avatar + credential story) ---- */

.abx .abx-persona {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius);
    padding: 20px 22px;
    margin: 28px 0;
}

.abx .abx-persona-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid var(--hp-accent);
    object-fit: cover;
    flex: none;
    /* the card lives inside .prose — reset the typography plugin's img margins */
    margin: 0;
}

.abx .abx-persona-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hp-hero-bg);
    color: var(--hp-hero-ink);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.02em;
}

.abx .abx-persona-body h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
    font-family: var(--hp-font-heading);
    color: var(--hp-ink);
}

.abx .abx-persona-role {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hp-accent);
}

.abx .abx-persona-bio {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--hp-ink-2);
    max-width: 70ch;
}

/* ---- small screens ---- */

@media (max-width: 640px) {
    .abx .abx-persona {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Informational archetype — Wall D4 category-hub skin.
 *
 * Served as part of the SAME per-site stylesheet as the article + about
 * skins: orchestration/article_theme.py appends this file after
 * about-informational.css inside /_assets/article.{fingerprint}.css, then
 * appends the site's theme-token block AFTER all skins (tokens win the
 * cascade). One asset, one seam, one purge path (hard rule #4) — the same
 * reasoning as the D3 about skin.
 *
 * TOKEN-DRIVEN: consumes the SAME --hp-* custom-property contract as the D1
 * homepage, D2 article skin, and D3 about skin (defaults live in
 * article-informational.css's :root block, which always precedes this file
 * in the served asset).
 *
 * SCOPING RULE: every selector is scoped under .hbx — the marker class
 * [category]/index.astro adds to its wrapper ONLY when site-config.json
 * carries article_theme (informational archetype builds; the wrapper also
 * carries .artx so the article skin's typography/prose/breadcrumb/Tailwind
 * retints apply to the inline sub-pillar body for free). No bare element
 * selectors — nothing here can cascade into the site header or footer
 * (the gambling bare-nav bug must never recur).
 *
 * SILO RULE: styling only. This file restyles the EXISTING hub link set
 * (breadcrumbs + ArticleCard cluster cards) — it adds no link surfaces.
 */

/* ---- kicker (Wall D4 comp: "Topic hub · N guides") ---- */

.hbx .hbx-kicker {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hp-accent);
}

/* ---- answer-first hub intro (sub-pillar answer_summary, lead bolded) ---- */

.hbx .hbx-intro {
    margin: 0;
    max-width: 66ch;
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--hp-ink-2);
}

.hbx .hbx-intro strong {
    color: var(--hp-ink);
}

/* ---- cluster-card section ("More in {Category}") ----
   The section's border-top + heading inks are already retinted by the D2
   article skin (.artx .border-gray-200 / .text-gray-*); rules below add the
   comp's boxed-card treatment on top of ArticleCard's existing markup. */

.hbx .hbx-cluster .grid {
    gap: 18px;
}

.hbx .hbx-cluster article {
    background: var(--hp-surface);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.hbx .hbx-cluster article:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
    border-color: var(--hp-accent);
}

/* card imagery sits flush against the card edges (comp treatment) */
.hbx .hbx-cluster article .aspect-video {
    margin-bottom: 0;
    border-radius: 0;
}

/* card body padding (text container is the last div inside the card link) */
.hbx .hbx-cluster article a > div:last-child {
    padding: 12px 14px 14px;
}

/* reading-time pill picks up the theme wash (text ink comes from the D2
   .artx .text-brand-600 retint) */
.hbx .hbx-cluster .bg-brand-50 {
    background-color: var(--hp-accent-soft);
}

/* ---- motion preferences ---- */

@media (prefers-reduced-motion: reduce) {
    .hbx .hbx-cluster article,
    .hbx .hbx-cluster article:hover {
        transition: none;
        transform: none;
    }
}

:root { --hp-bg: #f6f3ea; --hp-surface: #fffdf6; --hp-ink: #1f2a26; --hp-ink-2: #5a665f; --hp-line: #ddd6c4; --hp-accent: #8a6d1f; --hp-accent-ink: #fffdf4; --hp-accent-soft: #f1ead3; --hp-hero-bg: linear-gradient(160deg, #17352b 0%, #204435 100%); --hp-hero-ink: #f2efe2; --hp-hero-ink-2: #c9d4c8; --hp-hero-line: rgba(242, 239, 226, 0.22); --hp-radius: 10px; --hp-radius-btn: 8px; --hp-font-heading: 'Lora', Georgia, 'Times New Roman', serif; --hp-font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; }