/* codestorm.net — landing page styles **/

@font-face{
    font-family:"IBM Plex Mono";
    src:url("fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
    font-family:"IBM Plex Mono";
    src:url("fonts/ibm-plex-mono-600.woff2") format("woff2");
    font-weight:600;font-style:normal;font-display:swap;
}

:root{
    --bg:#000;
    --panel:#000;
    --fg:#cfcfc8;
    --bright:#f4f4ee;
    --dim:#8e8e84;           /* 5.75:1 on black — AA for the descriptive text */
    
    /* bi-flag palette (#D60270 · #9B4F96 · #0038A8). Saturated hues stay on
     b orders only; text colours above are AA on black. */        *
     --frame:#7f77dd;         /* violet chrome */
     --label:#e08cbe;         /* pink section headers */
     --alert:#d6027a;
     --alert-text:#f07ab0;
     --line:rgba(207,207,200,.14);
     --triad:linear-gradient(120deg,
                             rgba(214,2,112,.7) 0%,rgba(155,79,150,.7) 50%,rgba(0,56,168,.7) 100%);
     --triad-h:linear-gradient(90deg,
                               rgba(214,2,112,.7),rgba(155,79,150,.7),rgba(0,56,168,.7));
     
     --measure:78ch;          /* the whole layout scales from this */
     --mono:"IBM Plex Mono","DejaVu Sans Mono","Liberation Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}

body{
    margin:0;
    padding:clamp(1rem,4vw,2.5rem) clamp(.9rem,4vw,2rem);
    background:var(--bg);
    color:var(--fg);
    font-family:var(--mono);
    font-size:14.5px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
}

.screen{max-width:var(--measure);margin:0 auto}

/* frames — 2px gradient ring via a masked pseudo-element; reflows and stays
 silent to screen readers. +2px padding compensates for the rin*g. */
.frame{
    border:0;
    position:relative;
    padding:calc(clamp(.9rem,3vw,1.4rem) + 2px) calc(clamp(.9rem,3.5vw,1.6rem) + 2px);
    background:var(--panel);
}
.frame::before{
    content:"";
    position:absolute;
    inset:0;
    padding:2px;
    border-radius:2px;
    background:var(--triad);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.frame + .frame{margin-top:1.6rem}

/* masthead */
.mast{margin:0 0 1.6rem}
.wordmark{
    margin:0;
    color:var(--bright);
    font-size:clamp(7px,1.72vw,13px);
    line-height:1.06;
    overflow:hidden;
}
/* below ~620px the ASCII wordmark can't fit legibly; plain type takes over */
.wordmark-text{
    display:none;margin:0;
    color:var(--bright);font-weight:600;font-size:1.5rem;
    letter-spacing:.24em;text-transform:uppercase;
}
@media (max-width:620px){
    .wordmark{display:none}
    .wordmark-text{display:block}
}
.tagline{
    margin:.85rem 0 0;color:var(--dim);
    font-size:.8rem;letter-spacing:.05em;
}
.tagline a{color:var(--dim)}

/* section rule — flex row so the trailing line always reaches the edge */
.rule{
    display:flex;align-items:center;gap:.75rem;
    margin:0 0 .9rem;
    color:var(--label);
    font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
}
.rule::before{content:"──";letter-spacing:0;flex:0 0 auto}
.rule::after{content:"";flex:1;height:1px;background:var(--triad-h)}
.rule + .rule{margin-top:2rem}
.stack > .rule:not(:first-child){margin-top:2.1rem}

/* menu — fixed ch tracks so the description column aligns across blocks */
.item{
    display:grid;
    grid-template-columns:4ch 17ch minmax(1.5rem,1fr) minmax(0,32ch);
    column-gap:.75rem;align-items:baseline;
    padding:.28rem .4rem;margin:0 -.4rem;
    color:var(--fg);text-decoration:none;
}
.item:hover,.item:focus-visible{background:rgba(127,119,221,.15)}
.item:hover .name,.item:focus-visible .name{color:var(--bright)}
.key{color:var(--frame)}
.name{color:var(--fg);font-weight:600}
.leader{border-bottom:1px dotted var(--line);transform:translateY(-.3em)}
.desc{color:var(--dim);font-size:.9rem}
.item:hover .leader,.item:focus-visible .leader{border-bottom-color:rgba(127,119,221,.5)}

/* below 640px the description drops under the name and the leader retires */
@media (max-width:640px){
    .item{
        grid-template-columns:4ch minmax(0,1fr);
        padding:.4rem;
    }
    .leader{display:none}
    .desc{grid-column:2;font-size:.86rem}
}

/* prose */
.prose{max-width:66ch}
.prose p{margin:0 0 1.05rem}
.prose p:last-child{margin-bottom:0}
a{color:var(--frame)}
a:hover,a:focus-visible{color:var(--bright)}
strong{color:var(--bright);font-weight:600}
.dim{color:var(--dim)}
.alert{color:var(--alert-text)}

/* buttons wall — 88x31 at native size */
.wall{
    display:flex;flex-wrap:wrap;gap:.45rem;
    margin:0;padding:0;list-style:none;
}
.wall li{display:block}
.wall a{
    display:block;line-height:0;
    border:1px solid var(--line);
    padding:1px;
}
.wall a:hover,.wall a:focus-visible{border-color:var(--frame)}
.wall img{
    display:block;width:88px;height:31px;
    image-rendering:pixelated;
}
.wall img[src*="svg"]{image-rendering:auto}
.wall-mine a{border-color:rgba(214,2,122,.6)}

footer{
    max-width:var(--measure);margin:1.8rem auto 0;
    color:var(--dim);font-size:.78rem;letter-spacing:.04em;
}
footer p{margin:0 0 .3rem}

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