/* ============================================================
   license.broker — graffiti-tagged technical reference manual
   palette: high-contrast / typography: frutiger-clean (Asap)
   layout: bento-box on noise-grain concrete
   ============================================================ */

:root {
    --concrete-cream: #F2EDE3;
    --graphite-tag: #0E0F12;
    --persimmon-bomb: #FF3B1F;
    --acid-lime: #C7FF2A;
    --bruise-violet: #5A2BFF;
    --bone-noise: #E0D8C7;

    --font-body: 'Asap', system-ui, sans-serif;
    --font-display: 'Bagel Fat One', 'Asap', sans-serif;
    --font-stencil: 'Bungee Shade', 'Asap', sans-serif;
    --font-mono: 'Space Mono', ui-monospace, monospace;

    --gutter: 6px;
    --cell-radius: 0px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--concrete-cream);
    color: var(--graphite-tag);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.7;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
    /* Noise overlay applied via JS background-image; fallback gradient */
    background-image:
        radial-gradient(circle at 18% 20%, rgba(255, 59, 31, 0.10) 0, transparent 38%),
        radial-gradient(circle at 84% 12%, rgba(90, 43, 255, 0.08) 0, transparent 42%),
        radial-gradient(circle at 30% 88%, rgba(255, 59, 31, 0.07) 0, transparent 36%),
        radial-gradient(circle at 90% 78%, rgba(199, 255, 42, 0.06) 0, transparent 30%);
}

body::before {
    /* Noise overlay layer - JS will set background-image to canvas data URL */
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.06;
    mix-blend-mode: screen;
    background-color: transparent;
}

body.noise-ready::before {
    background-image: var(--noise-bg);
    background-repeat: repeat;
}

/* Spray-fleck overlay */
.spray-flecks {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.85;
}

.spray-flecks .fleck {
    position: absolute;
    width: 1.4px;
    height: 1.4px;
    border-radius: 50%;
    opacity: 0.12;
}

/* ============================================================
   Bento grid
   ============================================================ */

.bento {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.4fr;
    grid-template-rows: 0.7fr 1.3fr 1fr;
    grid-template-areas:
        "a a b"
        "c d b"
        "e e f"
        "g h f";
    grid-template-rows: 36vh 38vh 40vh 32vh;
    gap: var(--gutter);
    padding: var(--gutter);
    width: 100vw;
    min-height: 100vh;
}

.cell {
    position: relative;
    background: var(--concrete-cream);
    border: 2px solid var(--graphite-tag);
    overflow: hidden;
    padding: 22px 24px;
}

/* Stencil-cut noise edge effect */
.cell::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 2px solid var(--graphite-tag);
    box-shadow: inset 0 0 0 1px rgba(14, 15, 18, 0.06);
    opacity: 0.6;
}

.cell::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--noise-bg);
    background-repeat: repeat;
    opacity: 0.05;
    mix-blend-mode: multiply;
}

.cell-a { grid-area: a; background: var(--concrete-cream); }
.cell-b { grid-area: b; background: var(--bone-noise); }
.cell-c { grid-area: c; background: var(--bone-noise); }
.cell-d { grid-area: d; background: var(--concrete-cream); }
.cell-e { grid-area: e; background: var(--concrete-cream); }
.cell-f { grid-area: f; background: var(--bone-noise); }
.cell-g { grid-area: g; background: var(--concrete-cream); }
.cell-h { grid-area: h; background: var(--graphite-tag); }

/* ============================================================
   Cell heads (shared)
   ============================================================ */

.cell-head {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1.5px solid var(--graphite-tag);
    padding-bottom: 10px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.cell-head-glyph {
    flex: 0 0 auto;
}

.cell-head-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: var(--persimmon-bomb);
}

.cell-head-mono {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--graphite-tag);
    opacity: 0.8;
}

.cell-sub {
    font-size: 13px;
    font-weight: 300;
    color: var(--graphite-tag);
    opacity: 0.75;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

/* ============================================================
   Cell A — Tag Wall
   ============================================================ */

.cell-a {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 36px;
}

.wordmark {
    font-family: var(--font-display);
    font-size: 22vw;
    line-height: 0.85;
    letter-spacing: -0.02em;
    color: var(--persimmon-bomb);
    text-shadow:
        -4px 4px 0 var(--graphite-tag),
        0 0 0 #fff;
    -webkit-text-stroke: 1.5px var(--concrete-cream);
    margin: 0;
    position: relative;
    z-index: 3;
    clip-path: inset(0 100% 0 0);
    animation: wordmark-reveal 1100ms cubic-bezier(.6,.2,.2,1) forwards;
    user-select: none;
}

.wordmark .word-line {
    display: inline-block;
}

.wordmark .word-dot {
    color: var(--bruise-violet);
    -webkit-text-stroke: 1.5px var(--concrete-cream);
    display: inline-block;
    transform: translateY(-0.12em);
    margin: 0 -0.04em;
}

@keyframes wordmark-reveal {
    0% {
        clip-path: inset(0 100% 0 0);
        text-shadow: 0 0 0 var(--graphite-tag), 0 0 0 #fff;
    }
    78% {
        clip-path: inset(0 0 0 0);
        text-shadow: 0 0 0 var(--graphite-tag), 0 0 0 #fff;
    }
    100% {
        clip-path: inset(0 0 0 0);
        text-shadow: -4px 4px 0 var(--graphite-tag), 0 0 0 #fff;
    }
}

.wall-meta {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    border-top: 1.5px solid var(--graphite-tag);
    padding-top: 10px;
}

.meta-text {
    font-weight: 500;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 0.95vw, 1rem);
}

.meta-mono {
    font-family: var(--font-mono);
    font-weight: 400;
    text-transform: none;
    color: var(--bruise-violet);
    margin-left: 6px;
}

.wall-thesis {
    position: relative;
    z-index: 3;
    max-width: 56ch;
    margin-top: 14px;
    border-left: 4px solid var(--persimmon-bomb);
    padding-left: 14px;
}

.wall-thesis p {
    font-size: clamp(0.95rem, 1vw, 1.05rem);
    line-height: 1.55;
}

.wall-thesis .thesis-sub {
    margin-top: 6px;
    font-weight: 300;
    font-size: 13px;
    color: var(--graphite-tag);
    opacity: 0.85;
}

.drips {
    position: absolute;
    inset: auto 0 -2px 0;
    pointer-events: none;
    z-index: 4;
    height: 60px;
}

.drip {
    position: absolute;
    bottom: -10px;
    transform-origin: top;
    transform: scaleY(0);
    animation: drip-fall 360ms cubic-bezier(.5,1.6,.4,1) forwards;
}

.drip-1 { left: 18%; animation-delay: 1100ms; }
.drip-2 { left: 46%; animation-delay: 1190ms; }
.drip-3 { left: 78%; animation-delay: 1280ms; }

@keyframes drip-fall {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

.corner-mark {
    position: absolute;
    z-index: 3;
}

.corner-tl { top: 8px; left: 8px; }
.corner-tr { top: 8px; right: 8px; }
.corner-bl { bottom: 8px; left: 8px; }

.stain {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(36px);
    opacity: 0.55;
    z-index: 1;
}

.stain-1 {
    top: -10%;
    left: 12%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(255, 59, 31, 0.18), transparent 60%);
}

.stain-2 {
    bottom: -12%;
    right: 8%;
    width: 36%;
    height: 60%;
    background: radial-gradient(circle, rgba(90, 43, 255, 0.14), transparent 65%);
}

/* ============================================================
   Cell B — Tutorial Column
   ============================================================ */

.cell-b {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.cell-b .cell-head-title { color: var(--persimmon-bomb); }

.tutorial-steps {
    list-style: none;
    counter-reset: step;
    position: relative;
    z-index: 2;
}

.step {
    position: relative;
    margin-bottom: 22px;
    padding-left: 4px;
    width: 32ch;
    max-width: 100%;
}

.step-arrow {
    display: block;
    margin-bottom: 4px;
    transform: rotate(-90deg);
    transform-origin: left center;
    transition: transform 240ms cubic-bezier(.5,1.6,.4,1);
}

.step.revealed .step-arrow {
    transform: rotate(0deg);
}

.step-numeral {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--persimmon-bomb);
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.step-body {
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--graphite-tag);
    min-height: 1em;
}

.step-body.typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--persimmon-bomb);
    margin-left: 2px;
    vertical-align: -2px;
    animation: caret-blink 909ms steps(2) infinite;
}

@keyframes caret-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ============================================================
   Cell C — Glossary Throw-Up
   ============================================================ */

.throwups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.throwup {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    perspective: 800px;
    aspect-ratio: 1.4 / 1;
    font-family: inherit;
}

.throwup-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 380ms cubic-bezier(.6,.2,.2,1);
    display: block;
}

.throwup.flipped .throwup-inner {
    transform: rotateY(180deg);
}

.throwup-front, .throwup-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 2px solid var(--graphite-tag);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    text-align: center;
}

.throwup-front {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    color: var(--graphite-tag);
    -webkit-text-stroke: 1px var(--graphite-tag);
    letter-spacing: -0.02em;
    line-height: 1;
}

.throwup-back {
    transform: rotateY(180deg);
    background: var(--graphite-tag);
    color: var(--concrete-cream);
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 400;
}

.throwup-back em {
    color: var(--persimmon-bomb);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: 10.5px;
    margin-right: 4px;
    display: inline-block;
}

.throwup[data-color="persimmon"] .throwup-front { background: var(--persimmon-bomb); color: var(--graphite-tag); }
.throwup[data-color="lime"] .throwup-front { background: var(--acid-lime); color: var(--graphite-tag); }
.throwup[data-color="violet"] .throwup-front { background: var(--bruise-violet); color: var(--concrete-cream); }

.throwup:hover .throwup-front { transform: scale(1.02); transition: transform 160ms ease-out; }

/* ============================================================
   Cell D — License Type Bento
   ============================================================ */

.type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    position: relative;
    z-index: 2;
    height: calc(100% - 60px);
}

.type-tile {
    position: relative;
    border: 2px solid var(--graphite-tag);
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    transition: transform 200ms ease-out;
}

.type-tile:hover { transform: translate(-1px, -1px); }

.type-software { background: var(--concrete-cream); color: var(--graphite-tag); }
.type-music { background: var(--bruise-violet); color: var(--concrete-cream); }
.type-patent { background: var(--acid-lime); color: var(--graphite-tag); }
.type-franchise { background: var(--persimmon-bomb); color: var(--graphite-tag); }

.type-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1rem, 1.4vw, 1.4rem);
    letter-spacing: -0.01em;
    line-height: 1;
}

.type-mono {
    font-family: var(--font-mono);
    font-size: 10.5px;
    opacity: 0.85;
}

.type-sprig {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

/* ============================================================
   Cell E — Step-by-Step Manual
   ============================================================ */

.cell-e {
    overflow-y: auto;
}

.manual-body {
    max-width: 64ch;
    position: relative;
    z-index: 2;
}

.manual-body h3.manual-tag {
    font-family: var(--font-stencil);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1;
    letter-spacing: 0.01em;
    margin: 28px 0 12px -22px;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 var(--graphite-tag);
    transform: rotate(-1.2deg);
}

.manual-body h3.manual-tag:first-child { margin-top: 0; }

.manual-body h3[data-accent="persimmon"] { color: var(--persimmon-bomb); }
.manual-body h3[data-accent="lime"] { color: var(--acid-lime); text-shadow: 3px 3px 0 var(--graphite-tag); }
.manual-body h3[data-accent="violet"] { color: var(--bruise-violet); text-shadow: 3px 3px 0 var(--graphite-tag); }

.manual-body p {
    font-size: 16.5px;
    line-height: 1.7;
    margin-bottom: 14px;
    color: var(--graphite-tag);
}

.manual-body strong {
    background: var(--acid-lime);
    padding: 0 4px;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.link-violet {
    color: var(--bruise-violet);
    font-weight: 500;
    border-bottom: 2px solid var(--bruise-violet);
    cursor: pointer;
}

/* ============================================================
   Cell F — Sidebar Tag-Index
   ============================================================ */

.cell-f {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.tag-index {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-item {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--graphite-tag);
    padding: 5px 0;
    border-bottom: 1px dashed rgba(14, 15, 18, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.tag-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 0%;
    background: var(--persimmon-bomb);
    transition: width 220ms cubic-bezier(.6,.2,.2,1);
}

.tag-item.met::after {
    width: 100%;
}

.tag-item.met {
    color: var(--graphite-tag);
}

.tag-mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--graphite-tag);
    background: transparent;
    transition: background 200ms ease-out;
}

.tag-item.met .tag-mark {
    background: var(--persimmon-bomb);
}

.tag-mailto {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 6px 10px;
    border: 1.5px solid var(--graphite-tag);
    color: var(--graphite-tag);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--acid-lime);
    align-self: flex-start;
    transform: rotate(-1.4deg);
    transition: transform 180ms;
}

.tag-mailto:hover { transform: rotate(0); }

.mono-stamp {
    font-family: var(--font-mono);
    font-size: 10px;
    opacity: 0.6;
    margin-top: 10px;
}

/* ============================================================
   Cell G — Stencil Diagram
   ============================================================ */

.diagram {
    width: 100%;
    height: calc(100% - 48px);
    position: relative;
    z-index: 2;
}

/* ============================================================
   Cell H — Floral Tag Border
   ============================================================ */

.cell-h {
    background: var(--graphite-tag);
    overflow: hidden;
}

.cell-h::after { opacity: 0.08; }

.floral-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.4;
    color: var(--concrete-cream);
}

.floral-pattern svg use {
    color: var(--bone-noise);
}

.floral-tag {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    text-align: center;
    pointer-events: none;
}

.floral-tag-glyph {
    display: block;
    margin: 0 auto;
}

.floral-tag-text {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--persimmon-bomb);
    -webkit-text-stroke: 1.2px var(--concrete-cream);
    letter-spacing: -0.02em;
    text-shadow: 2px 2px 0 var(--graphite-tag);
    line-height: 1;
    margin-top: 4px;
}

.floral-drip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10%);
}

/* ============================================================
   Cell I — Footer Tag-Bombed Manifesto
   ============================================================ */

.cell-i {
    position: relative;
    z-index: 3;
    width: 100vw;
    margin-left: 0;
    margin-top: var(--gutter);
    padding: 50px 60px 40px;
    border-top: 2.5px solid var(--graphite-tag);
    background: var(--concrete-cream);
    min-height: 220px;
    overflow: hidden;
}

.cell-i::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--noise-bg);
    background-repeat: repeat;
    opacity: 0.05;
    mix-blend-mode: multiply;
}

.footer-ivy {
    position: absolute;
    top: 30px;
    left: 20px;
    color: var(--graphite-tag);
    z-index: 2;
}

.manifesto {
    position: relative;
    z-index: 1;
    max-width: 60ch;
    margin: 0 auto;
    text-align: center;
    padding: 8px 0;
}

.manifesto-line {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.6vw, 1.6rem);
    line-height: 1.5;
    color: var(--graphite-tag);
    letter-spacing: 0.005em;
}

.manifesto-attribution {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--graphite-tag);
    opacity: 0.7;
}

.manifesto-attribution .mono { color: var(--bruise-violet); }

.redactions {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.redaction {
    position: absolute;
    cursor: grab;
    user-select: none;
    pointer-events: auto;
    transition: transform 100ms ease-out;
    will-change: transform;
    filter: drop-shadow(2px 3px 0 rgba(14, 15, 18, 0.3));
}

.redaction.dragging {
    cursor: grabbing;
    transition: none;
}

.redaction.released {
    transition: transform 800ms cubic-bezier(.6,.2,.2,1), opacity 800ms ease-out;
    pointer-events: none;
}

.redaction-1 { top: 38%; left: 18%; transform: rotate(-8deg); }
.redaction-2 { top: 32%; left: 42%; transform: rotate(4deg); }
.redaction-3 { top: 42%; right: 14%; transform: rotate(-3deg); }

.footer-mono {
    position: absolute;
    bottom: 14px;
    right: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--graphite-tag);
    opacity: 0.65;
    z-index: 5;
}

/* ============================================================
   Mobile collapse — single column
   ============================================================ */

@media (max-width: 900px) {
    .bento {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "a"
            "b"
            "c"
            "d"
            "e"
            "g"
            "h"
            "f";
        gap: var(--gutter);
        padding: var(--gutter);
    }

    .cell { min-height: 360px; padding: 20px 18px; }
    .cell-a { min-height: 50vh; }

    .wordmark { font-size: 28vw; }

    .step { width: 100%; }

    .throwups { grid-template-columns: 1fr 1fr; }

    .manual-body h3.manual-tag {
        margin-left: -8px;
        font-size: 1.6rem;
    }

    .cell-i { padding: 36px 24px 30px; }
    .footer-ivy { display: none; }
    .redaction-1 { left: 8%; top: 26%; }
    .redaction-2 { left: 35%; top: 20%; }
    .redaction-3 { right: 8%; top: 28%; }
}

@media (max-width: 560px) {
    body { font-size: 15.5px; }
    .wordmark { font-size: 30vw; }
    .throwups { grid-template-columns: 1fr; }
    .type-grid { height: auto; min-height: 280px; }
    .manifesto-line { font-size: 1rem; }
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
    background: var(--persimmon-bomb);
    color: var(--concrete-cream);
}