/* =================================================================
   2DAMNDOPE — the writer's terminal
   graffiti street-art × dark terminal. one wall, server-rendered.
   ================================================================= */

:root {
    /* surfaces — asphalt at night */
    --void:     #0a0a0b;
    --concrete: #131317;
    --panel:    #17171c;
    --smoke:    #2a2a32;
    --ghost:    #7d7d8a;
    --chrome:   #ECECF1;   /* silver fill / primary text */

    /* spray palette — graffiti is colourful, so the accent is plural */
    --cyan:    #18E0FF;
    --magenta: #FF2E88;
    --toxic:   #C6FF3A;
    --orange:  #FF6B1A;
    --violet:  #9D4EDD;

    --term-green: #6BE675;  /* boot log success */

    --maxw: 1100px;
    --gap:  clamp(1rem, 3vw, 2rem);
    --r:    4px;            /* graffiti = hard edges, minimal radius */

    --f-display: 'Bungee', system-ui, sans-serif;
    --f-mark:    'Permanent Marker', cursive;
    --f-mono:    'JetBrains Mono', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: var(--void);
    /* concrete: layered washes + a fine grain via svg noise */
    background-image:
        radial-gradient(120% 80% at 80% -10%, rgba(157,78,221,.10), transparent 60%),
        radial-gradient(90% 60% at -10% 110%, rgba(24,224,255,.07), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    color: var(--chrome);
    font-family: var(--f-mono);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
code {
    font-family: var(--f-mono);
    background: var(--panel);
    border: 1px solid var(--smoke);
    padding: .05em .4em;
    border-radius: var(--r);
    color: var(--toxic);
    font-size: .9em;
}

.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--toxic); color: var(--void);
    padding: .6rem 1rem; font-weight: 700; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

/* ---------- terminal frame ---------- */
.frame {
    max-width: var(--maxw);
    margin: clamp(1rem, 4vw, 3rem) auto;
    padding: 0 var(--gap) var(--gap);
    border: 1px solid var(--smoke);
    border-radius: 6px;
    background:
        linear-gradient(var(--concrete), var(--concrete)) padding-box;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 80px -40px rgba(0,0,0,.9);
}

.term {
    margin: 0 calc(-1 * var(--gap)) var(--gap);
    border-bottom: 1px solid var(--smoke);
    position: sticky; top: 0; z-index: 10;
    background: rgba(19,19,23,.86);
    backdrop-filter: blur(8px);
}
.term__bar {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem var(--gap);
    font-size: .82rem;
}
.term__dot {
    width: 11px; height: 11px; border-radius: 50%;
    display: inline-block; flex: none;
    box-shadow: 0 0 8px currentColor;
}
.term__dot[data-c="magenta"] { background: var(--magenta); color: var(--magenta); }
.term__dot[data-c="cyan"]    { background: var(--cyan);    color: var(--cyan); }
.term__dot[data-c="toxic"]   { background: var(--toxic);   color: var(--toxic); }
.term__path { margin-left: .6rem; color: var(--ghost); letter-spacing: .02em; }

/* ---------- hero: boot + sprayed piece ---------- */
.hero { padding: clamp(1rem, 4vw, 2.5rem) 0 clamp(2rem, 6vw, 4rem); }

.boot {
    font-family: var(--f-mono);
    font-size: clamp(.72rem, 1.6vw, .9rem);
    color: var(--ghost);
    margin: 0 0 clamp(1.5rem, 5vw, 3rem);
    white-space: pre-wrap;
    min-height: 7.5em;          /* reserve space so the piece doesn't jump */
}
.boot .ok   { color: var(--term-green); }
.boot .warn { color: var(--orange); }
.boot .cmd  { color: var(--chrome); }
.boot .cur  {
    display: inline-block; width: .6em; height: 1.05em;
    background: var(--toxic); vertical-align: -.18em;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* the signature: the wordmark sprayed onto the wall */
.piece {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
}
.piece.is-up { opacity: 1; transform: none; }

.piece__mark {
    position: relative;
    display: inline-block;
    margin: 0;
    font-family: var(--f-display);
    font-size: clamp(3rem, 13vw, 9rem);
    line-height: .92;
    letter-spacing: -.01em;
    text-transform: uppercase;
    word-break: break-word;
    /* the base layer is the dark outline + hard graffiti shadow */
    color: var(--concrete);
    -webkit-text-stroke: 2px var(--smoke);
    text-shadow:
        4px 4px 0 rgba(0,0,0,.55),
        8px 8px 0 rgba(0,0,0,.30);
}
/* colour fill — the spray gradient, clipped to the letters, sitting
   exactly over the dark base so the 2px stroke reads as an outline. */
.piece__mark::before {
    content: attr(data-text);
    position: absolute; left: 0; top: 0;
    -webkit-text-stroke: 0;
    background-image: linear-gradient(
        100deg,
        var(--magenta) 0%,
        var(--orange)  28%,
        var(--toxic)   52%,
        var(--cyan)    74%,
        var(--violet) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 18px rgba(24,224,255,.22));
}
/* RGB-split glitch on hover — the one trick, reusing the fill layer. */
.piece:hover .piece__mark::before { animation: glitch .45s steps(2) 1; }
@keyframes glitch {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(-3px, 2px); filter: drop-shadow(2px 0 0 var(--magenta)); }
    50%  { transform: translate(3px,-2px); filter: drop-shadow(-2px 0 0 var(--cyan)); }
    75%  { transform: translate(-2px,-1px); }
    100% { transform: translate(0,0); }
}
/* drips off the bottom of the piece */
.piece__mark::after {
    content: "";
    position: absolute; left: 6%; right: 14%; bottom: -.16em;
    height: .9em;
    pointer-events: none;
    background:
        radial-gradient(5px 16px at 10% 0, var(--magenta) 58%, transparent 60%),
        radial-gradient(4px 26px at 34% 0, var(--toxic)   58%, transparent 60%),
        radial-gradient(6px 20px at 58% 0, var(--cyan)    58%, transparent 60%),
        radial-gradient(4px 30px at 80% 0, var(--orange)  58%, transparent 60%);
    background-repeat: no-repeat;
    opacity: .8;
    -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
}

.piece__tag {
    font-family: var(--f-mark);
    font-size: clamp(1.1rem, 3.4vw, 1.9rem);
    color: var(--chrome);
    transform: rotate(-2.5deg);
    margin: .8rem 0 0;
    opacity: .92;
}

.status {
    list-style: none; margin: clamp(1.5rem,4vw,2.5rem) 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.status__item {
    display: flex; gap: .5rem; align-items: baseline;
    border: 1px solid var(--smoke);
    border-radius: var(--r);
    padding: .35rem .7rem;
    font-size: .8rem;
    background: var(--panel);
}
.status__k { color: var(--ghost); }
.status__k::after { content: ":"; }
.status__v { color: var(--toxic); font-weight: 700; }

/* ---------- section heads ---------- */
.sec-head {
    display: flex; align-items: baseline; gap: 1rem;
    margin: clamp(2.5rem, 7vw, 4.5rem) 0 1.5rem;
    border-bottom: 1px solid var(--smoke);
    padding-bottom: .6rem;
    flex-wrap: wrap;
}
.sec-head__no {
    font-family: var(--f-mono);
    color: var(--magenta);
    font-size: .8rem;
}
.sec-head__title {
    font-family: var(--f-display);
    font-size: clamp(1.3rem, 4vw, 2rem);
    margin: 0; text-transform: lowercase;
    letter-spacing: -.01em;
}
.sec-head__count { margin-left: auto; color: var(--ghost); font-size: .8rem; }

/* ---------- the wall: gallery ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(.8rem, 2vw, 1.2rem);
}
.brick {
    margin: 0; position: relative;
    border: 1px solid var(--smoke);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--panel);
    transform: rotate(-.4deg);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.brick:nth-child(even) { transform: rotate(.5deg); }
.brick:hover {
    transform: rotate(0) translateY(-4px);
    border-color: var(--cyan);
    box-shadow: 0 16px 40px -20px rgba(24,224,255,.5);
    z-index: 2;
}
.brick__img {
    display: block; width: 100%; height: 100%;
    aspect-ratio: 4 / 3; object-fit: cover;
}
.brick__cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .5rem .6rem;
    font-size: .74rem; color: var(--chrome);
    background: linear-gradient(transparent, rgba(0,0,0,.85));
}

.empty {
    border: 1px dashed var(--smoke);
    border-radius: var(--r);
    padding: clamp(1.5rem, 5vw, 3rem);
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 12px,
        rgba(255,255,255,.015) 12px, rgba(255,255,255,.015) 24px);
}
.empty__line { color: var(--term-green); margin: 0 0 .6rem; }
.empty__hint { color: var(--ghost); margin: 0; max-width: 52ch; }

/* ---------- manifest ---------- */
.manifest__body { display: grid; gap: .6rem; }
.manifest__line {
    margin: 0; display: flex; gap: 1rem; align-items: baseline;
    font-size: clamp(1rem, 2.6vw, 1.3rem);
    color: var(--chrome);
}
.manifest__n { color: var(--violet); font-size: .8em; flex: none; }

/* ---------- tag wall ---------- */
.tagform {
    display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem;
}
.tagform__hp { position: absolute; left: -9999px; }
.tagform__in {
    background: var(--void); border: 1px solid var(--smoke);
    border-radius: var(--r); color: var(--chrome);
    font-family: var(--f-mono); padding: .6rem .8rem; font-size: .9rem;
}
.tagform__in::placeholder { color: var(--ghost); }
.tagform__in--wide { flex: 1 1 280px; }
.tagform__in:focus { border-color: var(--cyan); outline: none; }
.tagform__btn {
    background: var(--toxic); color: var(--void);
    border: none; border-radius: var(--r);
    font-family: var(--f-display); font-size: .85rem;
    padding: 0 1.2rem; cursor: pointer; text-transform: lowercase;
    transition: transform .12s ease, filter .12s ease;
}
.tagform__btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.tagform__btn:active { transform: translateY(0); }
.tagwall__err { color: var(--orange); }

.tags { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tags__item {
    display: flex; gap: .8rem; align-items: baseline;
    border-left: 2px solid var(--magenta);
    padding: .4rem .8rem; background: var(--panel);
    border-radius: 0 var(--r) var(--r) 0;
}
.tags__who { color: var(--toxic); font-weight: 700; flex: none; }
.tags__what { color: var(--chrome); }
.tags__item--empty { color: var(--ghost); border-left-color: var(--smoke); }

/* ---------- links ---------- */
.links__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
    border: 1px solid var(--smoke); border-radius: 999px;
    padding: .45rem 1rem; color: var(--chrome);
    font-size: .85rem; transition: all .2s ease;
}
.chip:hover {
    border-color: var(--cyan); color: var(--cyan);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px var(--cyan);
}

/* ---------- footer ---------- */
.foot {
    margin-top: clamp(3rem, 8vw, 5rem);
    border-top: 1px solid var(--smoke);
    padding-top: 1.2rem;
}
.foot__line { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.foot__tag {
    font-family: var(--f-display);
    background-image: linear-gradient(100deg, var(--magenta), var(--cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.foot__meta { color: var(--ghost); font-size: .8rem; }
.foot__sig { color: var(--smoke); font-size: .75rem; margin: .6rem 0 0; }

/* ---------- motion / responsive ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .piece { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .frame { margin: .5rem; padding: 0 1rem 1rem; }
    .term { margin: 0 -1rem 1rem; }
    .term__bar { padding: .6rem 1rem; }
    .term__path { display: none; }
    .status { gap: .4rem; }
}