/* ==========================================================================
   BLACKWORK SPECTRUM  ::  Eleven Eleven Paper Co
   Terminal-monospace type, heavy black linework, rainbow accents.
   Same system as getqrcodepro.com, retuned for this site's own class names.

   Loaded AFTER meaning.css (and after index.html's inline <style>), so
   equal-specificity rules here win.

   Gold is reserved: it only ever marks the shop action. Nothing else is gold.
   Each angel number owns one hue, set by data-angel on <body>, so the rainbow
   carries meaning instead of decorating.
   ========================================================================== */

:root {
    --bw-ink: #141414;
    --bw-ink-soft: #4A4A4A;
    --bw-paper: #FDF6EC;          /* the existing cream, kept for brand continuity */
    --bw-paper-2: #F4EADB;
    --bw-white: #FFFFFF;

    /* spectrum for linework and fills */
    --bw-red: #E23636;
    --bw-gold: #F0A020;
    --bw-green: #1E9E5A;
    --bw-teal: #12A5B8;
    --bw-blue: #2A5DD9;
    --bw-violet: #7B3FF2;
    --bw-pink: #E2559B;

    /* text-safe variants: these clear 4.5:1 on cream and white.
       the vivid ones above do not, so they never carry type. */
    --bw-red-text: #C81E1E;
    --bw-green-text: #116B3B;
    --bw-teal-text: #0E6E7A;
    --bw-pink-text: #B32570;

    --bw-line: 3px;
    --bw-line-thick: 5px;
    --bw-shadow: 7px 7px 0 var(--bw-ink);
    --bw-shadow-sm: 4px 4px 0 var(--bw-ink);
    --bw-shadow-lg: 11px 11px 0 var(--bw-ink);

    --bw-mono: Monaco, Menlo, "SF Mono", ui-monospace, SFMono-Regular,
               "DejaVu Sans Mono", Consolas, "Liberation Mono", "Courier New", monospace;

    /* retarget this site's own tokens */
    --font: var(--bw-mono);
    --cream: #FDF6EC;
    --black: #141414;
    --gray: #4A4A4A;      /* was #5C5C5C, darkened for contrast at mono weights */

    /* default page hue, overridden per number below */
    --bw-section: var(--bw-violet);
}

/* ---- per-number hues: the rainbow, mapped to content ---- */
body[data-angel="000"]  { --bw-section: var(--bw-violet); }
body[data-angel="111"]  { --bw-section: var(--bw-red); }
body[data-angel="222"]  { --bw-section: var(--bw-pink); }
body[data-angel="333"]  { --bw-section: var(--bw-green); }
body[data-angel="444"]  { --bw-section: var(--bw-blue); }
body[data-angel="555"]  { --bw-section: var(--bw-teal); }
body[data-angel="666"]  { --bw-section: var(--bw-red); }
body[data-angel="777"]  { --bw-section: var(--bw-violet); }
body[data-angel="888"]  { --bw-section: var(--bw-green); }
body[data-angel="999"]  { --bw-section: var(--bw-blue); }
body[data-angel="1010"] { --bw-section: var(--bw-teal); }
body[data-angel="1111"] { --bw-section: var(--bw-pink); }
body[data-angel="1212"] { --bw-section: var(--bw-violet); }
body[data-angel="1234"] { --bw-section: var(--bw-blue); }

/* ==========================================================================
   BASE
   ========================================================================== */

body {
    font-family: var(--bw-mono);
    font-size: 17px;
    line-height: 1.62;
    color: var(--bw-ink);
    background: var(--bw-paper);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

body, a, p, h1, h2, h3, h4, li, div, span, strong, em, small, button, input {
    font-family: var(--bw-mono);
}

::selection { background: var(--bw-gold); color: var(--bw-ink); }

a:focus-visible, button:focus-visible {
    outline: var(--bw-line) solid var(--bw-section);
    outline-offset: 3px;
}

/* the rainbow rule, pinned to the very top of every page */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 6px;
    z-index: 2000;
    background: linear-gradient(90deg,
        var(--bw-red)    0 14.28%,
        var(--bw-gold)   14.28% 28.56%,
        var(--bw-green)  28.56% 42.84%,
        var(--bw-teal)   42.84% 57.12%,
        var(--bw-blue)   57.12% 71.4%,
        var(--bw-violet) 71.4% 85.68%,
        var(--bw-pink)   85.68% 100%);
}

/* the thin centred rule becomes real linework in the page hue */
.divider {
    width: 84px;
    height: var(--bw-line);
    background: var(--bw-section);
}

/* ==========================================================================
   TYPE
   ========================================================================== */

h1, h2, h3 {
    font-family: var(--bw-mono);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--bw-ink);
}

.ah-title, h1 { font-size: clamp(1.9rem, 4.4vw, 3.1rem); }

/* the big numeral is the hero of every number page */
.ah-numeral, .hero-numeral {
    font-family: var(--bw-mono);
    font-weight: 700;
    font-size: clamp(4.4rem, 15vw, 9rem);
    letter-spacing: -0.06em;
    line-height: 1;
    color: var(--bw-section);
    -webkit-text-stroke: 3px var(--bw-ink);
    paint-order: stroke fill;
}

.hero-label, .section-label, .meaning-cards .mc .mc-label, .related .section-label {
    font-family: var(--bw-mono);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bw-ink-soft);
}

/* terminal prompt marker on section headings */
.section-title::before, .faq h2::before, .related .section-label::before {
    content: "> ";
    color: var(--bw-section);
    font-weight: 700;
}

.article-body h2, .article-body h3 { color: var(--bw-ink); letter-spacing: -0.03em; }
.article-body h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.article-body h3 { font-size: 1.2rem; line-height: 1.25; }

.article-body p, .faq-item p, .about p { color: var(--bw-ink); }

/* italic serif lead becomes upright mono; italic monospace reads as a glitch */
.article-body .lead {
    font-style: normal;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bw-ink);
    border-left: var(--bw-line-thick) solid var(--bw-section);
    padding-left: 18px;
}

.article-body strong { font-weight: 700; }

/* keep prose to a readable measure: monospace runs wide */
.article-body p, .faq-item p { max-width: 74ch; }

/* ==========================================================================
   NAV
   ========================================================================== */

nav {
    background: var(--bw-ink);
    border-bottom: var(--bw-line) solid var(--bw-ink);
    padding-top: 6px;   /* clears the fixed rainbow rule */
}

nav .logo {
    color: var(--bw-paper);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

nav .nav-links a, nav .nav-link {
    color: var(--bw-paper);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

nav .nav-link:hover { color: var(--bw-gold); }

/* the shop link is an action, so it is the reserved gold */
nav .shop-link {
    background: var(--bw-gold);
    color: var(--bw-ink);
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
    transition: transform .08s steps(2), box-shadow .08s steps(2);
}

nav .shop-link:hover {
    background: var(--bw-gold);
    color: var(--bw-ink);
    border-color: var(--bw-ink);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bw-ink);
}

.breadcrumb { color: var(--bw-ink-soft); }
.breadcrumb a { color: var(--bw-ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--bw-ink); }

/* ==========================================================================
   CARDS AND BLOCKS
   Every card is the same object: black border, hard shadow, zero radius.
   ========================================================================== */

.meaning-cards .mc, .faq-item, .poster-card, .grid-item, .product-cta {
    background: var(--bw-white);
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
    transition: transform .08s steps(2), box-shadow .08s steps(2);
}

.meaning-cards .mc, .poster-card, .grid-item {
    border-top: var(--bw-line-thick) solid var(--bw-section);
}

.poster-card:hover, .grid-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--bw-shadow);
}

/* faq items were separated by a hairline; give them real weight */
.faq-item { padding: 20px 22px; margin-bottom: 16px; border-top: var(--bw-line-thick) solid var(--bw-section); }

.product-cta { background: var(--bw-paper-2); box-shadow: var(--bw-shadow); }

.product-cta img, .poster-card img, .grid-item img {
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
}

/* product photography keeps its own colour: no filters, no tints */

.related-grid a, .hub-grid a {
    background: var(--bw-white);
    color: var(--bw-ink);
    font-weight: 700;
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow-sm);
    transition: transform .08s steps(2), box-shadow .08s steps(2);
}

.related-grid a:hover, .hub-grid a:hover {
    background: var(--bw-white);
    color: var(--bw-ink);
    transform: translate(-2px, -2px);
    box-shadow: var(--bw-shadow);
}

.hub-grid .hn { font-weight: 700; color: var(--bw-section); font-size: 1.5rem; letter-spacing: -0.04em; }
.hub-grid .hl { color: var(--bw-ink-soft); }

/* ==========================================================================
   THE SHOP ACTION
   Gold, black border, hard shadow. The only gold on the page.
   ========================================================================== */

.btn-shop, .hero-cta {
    display: inline-block;
    background: var(--bw-gold);
    color: var(--bw-ink);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    padding: 16px 30px;
    border: var(--bw-line) solid var(--bw-ink);
    border-radius: 0;
    box-shadow: var(--bw-shadow);
    transition: transform .08s steps(2), box-shadow .08s steps(2);
}

.btn-shop:hover, .hero-cta:hover {
    background: var(--bw-gold);
    color: var(--bw-ink);
    box-shadow: var(--bw-shadow-sm);
    transform: translate(3px, 3px);
}

.btn-shop:active, .hero-cta:active { transform: translate(7px, 7px); box-shadow: 0 0 0 var(--bw-ink); }

/* ==========================================================================
   SECTION BANDS
   ========================================================================== */

.featured, .collections, .about, .cta-banner, .faq, .related {
    border-top: var(--bw-line) solid var(--bw-ink);
}

.about { background: var(--bw-paper-2); }

.cta-banner {
    background: var(--bw-ink);
    color: var(--bw-paper);
    border-top: 6px solid var(--bw-gold);
}

.cta-banner .section-title, .cta-banner p { color: var(--bw-paper); }
.cta-banner .section-title::before { color: var(--bw-gold); }
.cta-banner .divider { background: var(--bw-gold); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    background: var(--bw-ink);
    color: var(--bw-paper);
    border-top: 6px solid var(--bw-gold);
}

footer a, .social-links a { color: var(--bw-paper); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover, .social-links a:hover { color: var(--bw-white); }
.footer-copy { color: var(--bw-paper); opacity: .8; }

/* ==========================================================================
   RESPONSIVE  ::  393px is the reference phone width
   ========================================================================== */

@media (max-width: 768px) {
    body { font-size: 16px; }
    :root { --bw-shadow: 5px 5px 0 var(--bw-ink); --bw-shadow-lg: 7px 7px 0 var(--bw-ink); }
    .ah-numeral, .hero-numeral { -webkit-text-stroke-width: 2px; }
    .btn-shop, .hero-cta { display: block; text-align: center; }
    .product-cta { flex-direction: column; }
    table { display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
    .ah-numeral, .hero-numeral { font-size: clamp(3.4rem, 20vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ==========================================================================
   FIXES FOUND BY RENDERING
   ========================================================================== */

/* nav had max-width:1200px with margin auto, so the black band floated inset
   with cream either side. There is no inner wrapper to paint, so the bar goes
   full bleed and the padding does the centring instead. */
nav {
    max-width: none;
    margin: 0;
    padding-left: max(40px, calc((100% - 1200px) / 2));
    padding-right: max(40px, calc((100% - 1200px) / 2));
}

/* The breadcrumb markup has no separator between the section links
   (Wall Art / Shirts / Gifts sit adjacent with only whitespace), so
   underlining them ran the three together into one blob. Spacing and weight
   separate them instead of decoration. */
.breadcrumb a {
    text-decoration: none;
    font-weight: 700;
    margin: 0 6px;
}

.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the page title was running to four lines at desktop width */
.ah-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -0.035em; }

/* the numeral carried 6px of tracking from the serif design, which leaves a
   dangling gap on the right at mono weights */
.ah-numeral { letter-spacing: -0.04em; }

/* ---- the shop link sits inside .nav-links, so `nav .nav-links a` was
   outranking `nav .shop-link` and putting cream type on the gold button ---- */
nav .nav-links a.shop-link, nav a.shop-link { color: var(--bw-ink); }

/* ---- text-safe hue per number ----
   The numeral is huge, so it only needs 3:1, but vivid teal on cream is 2.76.
   These darker fills clear it while reading as the same hue. */
body { --bw-section-text: var(--bw-violet); }
body[data-angel="111"], body[data-angel="666"] { --bw-section-text: var(--bw-red-text); }
body[data-angel="222"], body[data-angel="1111"] { --bw-section-text: var(--bw-pink-text); }
body[data-angel="333"], body[data-angel="888"] { --bw-section-text: var(--bw-green-text); }
body[data-angel="555"], body[data-angel="1010"] { --bw-section-text: var(--bw-teal-text); }
body[data-angel="444"], body[data-angel="999"], body[data-angel="1234"] { --bw-section-text: var(--bw-blue); }

.ah-numeral, .hero-numeral { color: var(--bw-section-text); }
.hub-grid .hn { color: var(--bw-section-text); }

/* ---- mobile: nav overflowed 393px (422px wide), and hub tiles pushed 401px ---- */
@media (max-width: 560px) {
    nav {
        flex-wrap: wrap;
        gap: 12px;
        padding-left: 18px;
        padding-right: 18px;
    }
    nav .nav-links { flex-wrap: wrap; gap: 12px; }
    nav .shop-link { padding: 9px 16px; font-size: 12px; }
    .hub-grid a, .related-grid a { min-width: 0; padding: 18px 8px; }
    .hub-grid .hn { font-size: 1.25rem; }
    .breadcrumb a { margin: 0 3px; }
}

/* the footer link row did not wrap, so its last item pushed past 393px */
.social-links { flex-wrap: wrap; justify-content: center; row-gap: 10px; }

/* ---- the hub and related grids carry no data-angel, so every numeral fell
   back to one hue. Exact href match gives each tile its own colour and keeps
   the rainbow meaningful. Exact, not prefix: 111 would otherwise catch 1111. ---- */
a[href="/000-angel-number-meaning"] .hn,
a[href="/000-angel-number-meaning"] { --bw-section-text: var(--bw-violet); }
a[href="/111-angel-number-meaning"] .hn,
a[href="/111-angel-number-meaning"] { --bw-section-text: var(--bw-red-text); }
a[href="/222-angel-number-meaning"] .hn,
a[href="/222-angel-number-meaning"] { --bw-section-text: var(--bw-pink-text); }
a[href="/333-angel-number-meaning"] .hn,
a[href="/333-angel-number-meaning"] { --bw-section-text: var(--bw-green-text); }
a[href="/444-angel-number-meaning"] .hn,
a[href="/444-angel-number-meaning"] { --bw-section-text: var(--bw-blue); }
a[href="/555-angel-number-meaning"] .hn,
a[href="/555-angel-number-meaning"] { --bw-section-text: var(--bw-teal-text); }
a[href="/666-angel-number-meaning"] .hn,
a[href="/666-angel-number-meaning"] { --bw-section-text: var(--bw-red-text); }
a[href="/777-angel-number-meaning"] .hn,
a[href="/777-angel-number-meaning"] { --bw-section-text: var(--bw-violet); }
a[href="/888-angel-number-meaning"] .hn,
a[href="/888-angel-number-meaning"] { --bw-section-text: var(--bw-green-text); }
a[href="/999-angel-number-meaning"] .hn,
a[href="/999-angel-number-meaning"] { --bw-section-text: var(--bw-blue); }
a[href="/1010-angel-number-meaning"] .hn,
a[href="/1010-angel-number-meaning"] { --bw-section-text: var(--bw-teal-text); }
a[href="/1111-angel-number-meaning"] .hn,
a[href="/1111-angel-number-meaning"] { --bw-section-text: var(--bw-pink-text); }
a[href="/1212-angel-number-meaning"] .hn,
a[href="/1212-angel-number-meaning"] { --bw-section-text: var(--bw-violet); }
a[href="/1234-angel-number-meaning"] .hn,
a[href="/1234-angel-number-meaning"] { --bw-section-text: var(--bw-blue); }

/* the tile border keeps the vivid hue: linework does not carry text */
.hub-grid a[href="/000-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-violet); }
.hub-grid a[href="/111-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-red); }
.hub-grid a[href="/222-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-pink); }
.hub-grid a[href="/333-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-green); }
.hub-grid a[href="/444-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-blue); }
.hub-grid a[href="/555-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-teal); }
.hub-grid a[href="/666-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-red); }
.hub-grid a[href="/777-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-violet); }
.hub-grid a[href="/888-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-green); }
.hub-grid a[href="/999-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-blue); }
.hub-grid a[href="/1010-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-teal); }
.hub-grid a[href="/1111-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-pink); }
.hub-grid a[href="/1212-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-violet); }
.hub-grid a[href="/1234-angel-number-meaning"] { border-top: var(--bw-line-thick) solid var(--bw-blue); }

/* italic monospace reads as a rendering fault, not as emphasis. The hero
   tagline and any other italic run go upright; weight carries the emphasis. */
.hero-tagline, .article-body em, .lead, em {
    font-style: normal;
}

.hero-tagline {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--bw-ink);
    text-transform: none;
}

.article-body em { font-weight: 700; }
