/* ===========================================================
   ragaire — shared site styles
   lo-fi / minimal / sketchy. black ground, white ink.
   =========================================================== */

* { box-sizing: border-box; }

:root { --accent: #33ff33; } /* menu hover / active colour */

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: #fff; }

img { display: block; max-width: 100%; }

/* ---------- header: cart · logo · menu toggle ---------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 26px;
    z-index: 70;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.brand img { height: 52px; width: auto; }

/* cart (top-left) */
.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-decoration: none;
    z-index: 71;
}
.cart-link svg { width: 26px; height: 26px; display: block; }
.cart-count { font-size: 15px; }

/* hamburger that morphs into an X (top-right) */
.menu-toggle {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 34px;
    height: 22px;
    position: relative;
    z-index: 71;
}
.menu-toggle .bar {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #fff;
    transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
}
.menu-toggle .bar:nth-child(1) { top: 5px; }
.menu-toggle .bar:nth-child(2) { bottom: 5px; }
body.menu-open .menu-toggle .bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
body.menu-open .menu-toggle .bar:nth-child(2) { bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* full-screen overlay menu */
.overlay-menu {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 0 9vw;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
body.menu-open { overflow: hidden; }
body.menu-open .overlay-menu { opacity: 1; visibility: visible; }
.overlay-menu a {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(38px, 7vw, 80px);
    line-height: 1.08;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s ease;
}
.overlay-menu a:hover,
.overlay-menu a:focus,
.overlay-menu a.is-active { color: var(--accent); }
.overlay-menu a.ig { font-size: clamp(20px, 3vw, 28px); opacity: 0.55; margin-top: 18px; }

/* ---------- page scaffold ---------- */
main.page {
    padding: 130px 28px 90px;
    max-width: 1200px;
    margin: 0 auto;
}

.page-title {
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(34px, 6vw, 60px);
    margin: 18px 0 48px;
    letter-spacing: 0.01em;
}

/* ===========================================================
   HOME — featured recent drop + scattered archive collage
   =========================================================== */

.featured {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 8px auto 70px;
    max-width: 760px;
}
.featured a { text-decoration: none; color: #fff; }
.featured .featured-img {
    width: 320px;
    max-width: 80vw;
    transform: rotate(-2deg);
}
.featured-meta .kicker {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 10px;
}
.featured-meta h2 {
    font-weight: 400;
    font-size: 26px;
    margin: 0 0 6px;
}
.featured-meta .price { opacity: 0.8; }
.featured-meta .shop-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
}

/* masonry-ish archive wall (used on home page) */
.archive-wall {
    column-count: 4;
    column-gap: 18px;
}
.archive-wall .tile {
    break-inside: avoid;
    margin: 0 0 18px;
    position: relative;
    display: block;
}
.archive-wall .tile img {
    width: 100%;
    filter: grayscale(15%);
    transition: filter 0.2s ease, transform 0.2s ease;
}
.archive-wall .tile:hover img { filter: none; transform: scale(1.01); }
.archive-wall .tile:nth-child(3n)   { transform: rotate(1.2deg); }
.archive-wall .tile:nth-child(4n)   { transform: rotate(-1.5deg); }
.archive-wall .tile:nth-child(5n)   { transform: rotate(0.6deg); }
.archive-wall .tile .cap {
    font-size: 11px;
    opacity: 0.45;
    margin-top: 5px;
    letter-spacing: 0.03em;
}

@media (max-width: 1000px) { .archive-wall { column-count: 3; } }
@media (max-width: 680px)  { .archive-wall { column-count: 2; } }

/* ===========================================================
   ARCHIVE PAGE — interactive scatter
   =========================================================== */

.archive-header {
    padding: 108px 28px 0;
    text-align: center;
    pointer-events: none;
}
.archive-header h1 {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(34px, 6vw, 60px);
    margin: 0 0 10px;
    letter-spacing: 0.01em;
}
.archive-header p {
    font-size: 13px;
    opacity: 0.38;
    margin: 0 0 14px;
    letter-spacing: 0.02em;
}

.scatter-field {
    position: relative;
    width: 100%;
    /* height injected by JS */
}

#conspiracy-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

.pin {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    background: radial-gradient(circle at 35% 35%, #ff6644, #aa1100);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.25);
    z-index: 10;
    pointer-events: none;
}

.scatter-tile {
    position: absolute;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
}

.scatter-tile img,
.scatter-tile video {
    display: block;
    width: 100%;
    box-shadow: 4px 6px 24px rgba(0,0,0,0.8);
    border: 1px solid #1c1c1c;
    pointer-events: none;
}

.s-cap {
    display: block;
    font-size: 10px;
    opacity: 0.38;
    margin-top: 5px;
    letter-spacing: 0.04em;
    text-align: center;
    pointer-events: none;
}

/* lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.93);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    box-shadow: 0 0 80px rgba(0,0,0,0.5);
    cursor: default;
}
.lightbox iframe {
    display: none;
    width: min(90vw, 900px);
    height: min(80vh, calc(min(90vw, 900px) * 0.5625));
    border: none;
}
.lightbox video {
    display: none;
    max-width: 90vw;
    max-height: 85vh;
    outline: none;
    cursor: default;
}
.lightbox-cap {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    opacity: 0.42;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.lightbox-close {
    position: absolute;
    top: 22px;
    right: 26px;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    opacity: 0.5;
    line-height: 1;
    padding: 6px 10px;
    transition: opacity 0.15s;
}
.lightbox-close:hover { opacity: 1; }

/* ===========================================================
   SHOP — product grid
   =========================================================== */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 40px 30px;
}
.product {
    text-decoration: none;
    color: #fff;
    display: block;
}
.product-thumb {
    background: #0c0c0c;
    border: 1px solid #161616;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.product-info {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}
.product-info h3 { font-weight: 400; font-size: 17px; margin: 0; }
.product-info .price { opacity: 0.8; font-size: 15px; white-space: nowrap; }
.product .soldout { color: #b06bff; font-size: 14px; }
.product .buy {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    opacity: 0.7;
    border-bottom: 1px solid #444;
    padding-bottom: 1px;
}
.product:hover .buy { opacity: 1; border-bottom-color: #fff; }

/* ===========================================================
   WHY — plain narrow text column
   =========================================================== */

.why-wrap {
    max-width: 560px;
    margin: 20px auto 0;
    line-height: 1.9;
    font-size: 17px;
}
.why-wrap p { margin: 0 0 1.5em; }
.why-wrap .scrawl {
    font-style: italic;
    opacity: 0.7;
}
.why-wrap img.why-mark {
    width: 120px;
    margin: 40px auto 0;
    opacity: 0.8;
    transform: rotate(-3deg);
}

/* ---------- footer ---------- */
.site-footer {
    text-align: center;
    padding: 40px 20px 60px;
    font-size: 12px;
    opacity: 0.4;
    letter-spacing: 0.04em;
}

/* ---------- small screens header ---------- */
@media (max-width: 560px) {
    .site-header { padding: 16px; }
    .brand img { height: 42px; }
}