/* Two sections, two border colours, set by Dom 2026-07-29 — the feed in light neon blue and the
   records in their own colour, so the wall below never reads as a continuation of the grid above. */
:root{ --ground:#050509; --panel:#101018; --ink:#FFFFFF; --cyan:#00E5FF; --hot:#FF1F8F;
       --violet:#8A2BE2;
       --ice:#5CE1FF;          /* light neon blue — the FEED cards */
       --line:#FF1F8F; }       /* hot magenta — the RECORDS grid */
*{box-sizing:border-box}

/* CYBERPUNK GROUND — static only. Dom killed a moving background on sight once ("I don't need a
   magic background; just the colour is okay"), and this page scrolls an infinite grid of album art,
   so anything animated would repaint behind every card. Everything below is painted once.
   All of it is LIGHT, not colour: neon glow bleeding off a city skyline and a faint floor grid, so
   the Rule 46 carve-out applies (translucent is allowed BEHIND content, never on a label you read).
   No background-attachment:fixed — that forces a repaint per scroll frame in Safari. */
body{margin:0;color:var(--ink);
     font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15.4px;line-height:1.5;
     -webkit-font-smoothing:antialiased;
     background-color:var(--ground);
     background-image:
       /* the horizon: cyan haze pouring down behind the portrait */
       radial-gradient(1400px 640px at 50% -190px, rgba(0,229,255,.34), transparent 72%),
       /* magenta on the left, violet on the right — the two-tone neon street */
       radial-gradient(1000px 780px at -6% 6%,  rgba(255,31,143,.26), transparent 70%),
       radial-gradient(1000px 780px at 106% 4%, rgba(138,43,226,.26), transparent 70%),
       /* a second magenta bloom low down, so the foot of the page is not dead black */
       radial-gradient(1100px 520px at 50% 100%, rgba(255,31,143,.20), transparent 72%),
       /* the floor grid */
       repeating-linear-gradient(90deg, rgba(0,229,255,.09) 0 1px, transparent 1px 72px),
       repeating-linear-gradient(0deg,  rgba(255,31,143,.07) 0 1px, transparent 1px 72px);
     background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat}
a{color:var(--cyan);text-decoration:none}

.head{text-align:center;padding:44px 20px 8px}
/* The portrait is the way into ABOUT, so it says so on hover rather than looking like decoration. */
.head .logo{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block;
            margin:0 auto 24px;border:2px solid var(--cyan);cursor:pointer;
            box-shadow:0 0 34px rgba(0,229,255,.55);transition:box-shadow .3s ease}
.head .logo:hover{box-shadow:0 0 48px var(--cyan)}
/* "WELCOME TO" sits above the name rather than inside it: one 44px line reading WELCOME TO BLAEKMUSK
   would either wrap or shrink the name to nothing on a phone. Read together they are still the one
   sentence Dom asked for on top. */
.head .welcome{font-size:14.3px;font-weight:800;letter-spacing:.42em;color:var(--ink);
               margin-bottom:10px}
.head h1{margin:0;font-size:48.4px;font-weight:900;letter-spacing:.22em;color:var(--cyan);
         text-shadow:0 0 26px rgba(0,229,255,.5)}
.head .desc{margin-top:12px;letter-spacing:.14em;font-size:13.2px;font-weight:700;color:var(--hot)}

/* Socials, centred under the name — the original site's arrangement. */
.socials{display:flex;gap:20px;justify-content:center;align-items:center;margin:24px 0 4px}
.socials a{width:42px;height:42px;border:1.5px solid var(--cyan);border-radius:50%;
           display:flex;align-items:center;justify-content:center;color:var(--cyan);
           box-shadow:0 0 16px rgba(0,229,255,.35)}
.socials a svg{width:20px;height:20px;fill:currentColor;display:block}
.socials a:hover{background:var(--cyan);color:var(--ground);box-shadow:0 0 26px var(--cyan)}

.booking-link{display:inline-block;margin:22px auto 0;font-size:16.5px;font-weight:900;
              letter-spacing:.24em;color:var(--ground);background:var(--hot);
              padding:13px 34px;border-radius:999px;box-shadow:0 0 26px rgba(255,31,143,.6)}
.booking-link:hover{background:var(--cyan);color:var(--ground);box-shadow:0 0 30px var(--cyan)}

/* No count anywhere on this site — Dom, 2026-07-29: "I told you, I don't like counts." The FEED
   heading and "( end )" marker are gone with them; the two walls are told apart by their border
   colour, not a label. The rules that styled all three were removed rather than left orphaned. */

/* Square colour grid — SIX per row, set by Dom 2026-07-29. Six, not "six until the window is big":
   at 2000px that is a 333px card, which still fills the width, so Rule 47 holds without adding
   columns. The top edge is the neon horizon line, glowing rather than a plain hairline. */
/* ONE GRID, AND IT IS A REAL MASONRY. A record is a square; a post is as tall as its own content, which
   is what makes the posts read as posts and not as more sleeves — Dom, 2026-07-29: "the articles
   differentiate because they are not square."
   Both live in the same six columns with no gaps, which needs row SPANS rather than rows: the grid is
   ruled in 4px lines, every card is measured and told how many lines it occupies, and `dense` packing
   then fills the holes — including the three that were left dark at the end of the records. The
   measuring is in the script (see layoutGrid). CSS alone cannot do this: `columns` gives natural heights
   but its own separate wall, and a plain grid gives one wall but forces a uniform row height. */
.grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:4px;grid-auto-flow:row dense;
      margin-top:28px;border-top:1px solid var(--line);box-shadow:0 -1px 22px rgba(255,31,143,.5)}
.tile{position:relative;aspect-ratio:1/1;border-right:1px solid var(--line);
      border-bottom:1px solid var(--line);overflow:hidden;color:var(--ink);display:block;
      background-size:cover;background-position:center;background-color:var(--panel);
      opacity:.25;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease}
.tile.in{opacity:1;transform:none}
/* .25, not 0, from 2026-08-22. Dom landed on the page and the second row was pure black, so the wall
   looked like it ended at row one: "I should start to see the second row... maybe not fully 100%".
   This is the START FRAME of the reveal, not a faded style — every tile still resolves to full
   strength the moment it scrolls in, so Rule 46 is intact. */
/* lighting, not colour: the wash is what makes the title readable over any cover art */
.tile::after{content:"";position:absolute;inset:0;
             background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.72))}
/* Type is sized for a SIX-column card (~280-330px), not the eight-column one it started at — a
   wider card with the same 13px title reads as a small label floating in a big square. */
.tile .bar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 13px 12px;
           background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.88) 55%)}
.tile .pl{font-weight:800;font-size:16.5px;line-height:1.12;text-transform:uppercase;
          letter-spacing:.01em;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.tile .by2{font-size:12.1px;font-weight:700;letter-spacing:.06em;margin-top:5px;color:var(--cyan);
           text-shadow:0 1px 4px rgba(0,0,0,.9)}
.tile:hover{filter:brightness(1.12) saturate(1.1)}
.tile:hover::before{content:"";position:absolute;inset:0;z-index:3;
                    box-shadow:inset 0 0 0 3px var(--hot)}

/* ── ABOUT — one card, opened from the portrait, centred on screen ──────────────
   Dom, 2026-07-29: "put everything in one card, so on the top 'About Domenico Mimmo Capuano' on the
   same line, and then on the bottom the about caption." So: no turn, no second face, no perspective.
   The heading sits at the top on ONE line, the bio at the foot, and the space between them pushes them
   apart rather than being padding nobody chose. The card grows if the text ever needs more room — a
   forced square would eventually clip his own words, which is the one thing it must never do. */
.aboutwrap{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
           background:rgba(0,0,0,.9);padding:24px}
.aboutwrap.open{display:flex}
.aboutwrap .aclose{position:absolute;top:18px;right:24px;color:var(--cyan);font-size:41.8px;
                   line-height:1;cursor:pointer;z-index:2}
.aboutwrap .aclose:hover{color:var(--hot)}

.about{width:min(560px,90vw);min-height:min(430px,72vh);display:flex;flex-direction:column;
       gap:26px;padding:34px 32px;border:2px solid var(--cyan);
       background:linear-gradient(150deg,#12002a,#001d2b 60%,#2a0018);
       box-shadow:0 0 56px rgba(0,229,255,.55)}
/* ABOUT in pink over the name, both centred, sitting in the middle of the space above the bio — Dom,
   2026-07-29: "about is in the middle in a pink color, Domenico Mimmo Capuano in the middle, and on the
   bottom what you have." The heading takes the free room (flex:1, centred) instead of that space being
   an empty gap under a top-aligned line, and the bio stays pinned at the foot. */
.about .ahead{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
              text-align:center;gap:12px}
.about .atitle{font-size:clamp(33px,4.8vw,50.6px);font-weight:900;letter-spacing:.22em;line-height:1;
               color:var(--hot);text-shadow:0 0 28px rgba(255,31,143,.7)}
.about .aname{font-size:clamp(14.3px,1.9vw,20.9px);font-weight:800;letter-spacing:.13em;line-height:1.4;
              color:var(--cyan);text-shadow:0 0 20px rgba(0,229,255,.55)}
/* The bio is all one colour now: pink belongs to ABOUT, and two pinks in one card competed. */
.about .abio p{margin:0 0 15px;font-size:15.4px;line-height:1.55;letter-spacing:.01em;
               color:var(--ink);font-weight:600}
.about .abio p:last-child{margin-bottom:0}
@media (max-width:640px){
  .about{padding:26px 22px;gap:18px}
  .about .abio p{font-size:14.3px;margin-bottom:12px}
}

/* ── FEED — Dom's Instagram posts, under the releases ───────────────────────────
   A column layout, not a grid: `columns` lets every card keep its own natural height, which is what
   makes the wall read in mixed sizes the way the original did. No masonry library, no JS. */
/* No gap and no padding: the wall of cards butts edge to edge, like the records grid above it.
   Dom, 2026-07-29: "they must be with no space between them." */
/* THERE IS ONLY ONE GRID. Dom, 2026-07-29: "don't leave those blocks dark. Start from there with the
   blog post." Twenty records do not fill a six-wide row, so the last row had three empty black cells
   and the feed began underneath them. Records and feed are now items in the SAME grid, so the posts
   flow straight into those cells and there is no gap to leave dark — and "the blog cards should be
   like the records" becomes literally true rather than approximately.
   The price is that a feed card is a square like a record, so a tall photo is cropped to fill it.
   Instagram is square natively, so it costs almost nothing, and the whole picture is one click away. */
/* A POST IS AS TALL AS ITS OWN CONTENT — never a square. Nothing here fixes a height: the picture keeps
   its own aspect ratio, the words take the room they need, and the script converts whatever that comes
   to into a row span. That variety is the point (Dom: "the articles differentiate because they are not
   square"), and it is what the original wall looks like. */
.fcard{position:relative}
.fcard>img,.fcard .front img{width:100%;height:auto;display:block}
.fcard .body{position:static}

/* A PICTURE WITH NO WORDS is just the picture, with its date line over the foot of it. The image sets
   the card's height, so the line is laid on top rather than adding to it. */
.fcard.bare .body{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,
                  rgba(0,0,0,0),rgba(0,0,0,.82) 55%);padding:26px 13px 10px}
.fcard.bare .meta{margin:0;padding:0;border:0;color:#fff}
.fcard.bare .meta a{color:var(--ice)}

/* A CARD WITH A PLAYER stacks: player, then its words under it. Both in normal flow — the player used
   to be centred absolutely with the body laid over the whole card, so the two sat on top of each other
   and the DreamLand card printed its player across its own lyric. */
.fcard.hasplayer iframe{position:static;height:166px}
/* "+3" on a photoset, so a card that is hiding pictures says so instead of pretending it is one shot. */
.fcard .more{position:absolute;top:8px;right:9px;z-index:3;background:var(--ground);color:var(--ice);
             font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:3px;
             border:1px solid var(--ice)}

/* GREYSCALE until you point at it — Dom, 2026-07-29: "the blog cards are black and white and become
   coloured only when I hoover on top." The filter sits on the CARD, so the picture, any player and
   the text all desaturate together and come back together; filtering only the <img> would leave a
   colour text block on a grey photo. Keyboard focus counts as pointing at it, or the colour would be
   unreachable without a mouse. */
/* THE CARD IS THE ORIGINAL TUMBLR CARD — Dom, 2026-07-29: "make them identical to the original."
   That means a WHITE card with dark text on the dark page, the picture full width and uncropped at
   the top, the caption in full underneath, hashtags as links, and a foot line reading how long ago it
   was. Not my earlier dark-panel version with clamped text: the long credits-list card IS a tall card
   on his site too, and cutting it off was me tidying his content instead of reproducing it. */
/* Same scatter-in reveal as the records and as Andronic — Dom, 2026-07-29: "this website has the same
   effect of Andronic Music, so all the cards, records, and also the articles, blogs, they appear
   randomly." One observer now watches every card in the grid, records and posts alike. */
.fcard{margin:0;background:#fff;border:1px solid var(--ice);
       display:block;color:#1b1b1b;
       opacity:0;transform:translateY(18px);
       /* Both states name the SAME filter functions and only change their VALUES. Transitioning to
          `filter:none` destroys the card's composited layer and WebKit paints the layer background
          before the content lands — that is the black flash Dom saw. Nothing is destroyed if the
          filter never leaves. */
       filter:grayscale(1) contrast(1.02);
       transition:filter .4s ease, box-shadow .3s ease, opacity .55s ease, transform .55s ease}
.fcard.in{opacity:1;transform:none}
.fcard:hover,.fcard:focus-within{filter:grayscale(0) contrast(1);
                                 box-shadow:0 0 26px rgba(0,229,255,.55)}
.fcard img{width:100%;display:block}
.fcard .body{padding:16px 18px 12px}

/* ── A FEED CARD TURNS OVER ──────────────────────────────────────────────────────
   Dom, 2026-07-29, after showing me the original: "the original one shows only the picture… make this
   one for the block flip so they can turn like the cards or paint of Domenico Cappuccino. And then in
   the back you have the caption and the hashtag."

   He was right about the original and I had it wrong: checking the Tumblr index markup, NOT ONE photo
   card carries its caption — the caption only exists on the post's own page. So the wall is pictures,
   and the words live on the back. That also disposes of the runaway-height problem on its own terms:
   a thirty-line credits list scrolls on the back of a square instead of stretching a column.

   Height comes from the FRONT, which is in normal flow; only the back is absolutely positioned. A
   fixed height would have to guess, and these pictures are every aspect ratio there is. */
/* A FLIP CARD CARRIES NO FILTER OF ITS OWN — the greyscale moves to its FACES. `filter` on an ancestor
   of a `transform-style: preserve-3d` element FLATTENS the 3D context, so the browser stopped treating
   the two faces as sides of a card and rendered straight through to the near-black page: a black
   rectangle wherever the pointer went. Filtering the faces individually leaves the 3D intact.
   Dom, 2026-07-29: "there's so many post articles they give a black hover." */
.fcard.flip3d{position:relative;perspective:1200px;background:none;border:0;filter:none}
.fcard.flip3d .face{filter:grayscale(1) contrast(1.02);transition:filter .4s ease}
.fcard.flip3d:hover .face,.fcard.flip3d:focus-within .face{filter:grayscale(0) contrast(1)}
/* THE FRONT SUPPLIES THE HEIGHT, the back is laid over it. That relationship is what stops the card
   going black: when the front was absolutely positioned it had no height of its own and the dark page
   showed straight through wherever the pointer went. The front stays in normal flow, always. */
.fcard.flip3d .flip{position:relative;transform-style:preserve-3d;
                    transition:transform .75s cubic-bezier(.4,.15,.2,1)}
/* HOVER ONLY COLOURS THE CARD. CLICK TURNS IT. Dom, 2026-07-29: "don't make the hover turn the card.
   The hover makes the card colorize; if I click on a card, then it shows the back." Two things on one
   gesture was the mistake — moving the mouse across the wall was flipping cards away while he was
   still looking at them. Colour is the passive response, turning it over is a decision. */
.fcard.flip3d{cursor:pointer}
.fcard.flip3d.flipped .flip{transform:rotateY(180deg)}
.fcard.flip3d .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;
                    background:#fff;border:1px solid var(--ice)}
.fcard.flip3d .front{position:relative}
.fcard.flip3d .back{position:absolute;inset:0;transform:rotateY(180deg);
                    overflow-y:auto;-webkit-overflow-scrolling:touch;
                    display:flex;flex-direction:column;justify-content:flex-start}
/* Most of Dom's posts carry no caption and no tags at all — those cards simply do not get a back and
   never flip, rather than turning over to show an empty white square. */
.fcard.flip3d .back .body{padding:18px 18px 14px}
.fcard.flip3d .back .meta{margin-top:auto}
.fcard .t{font-size:16.5px;font-weight:700;line-height:1.3;margin:0 0 10px;color:#1b1b1b}
.fcard .x{font-size:14.3px;line-height:1.6;color:#1b1b1b}
.fcard .x p{margin:0 0 12px}
.fcard .x p:last-child{margin-bottom:0}
/* Hashtags are links on the original, so they are links here. Full-strength blue, never a faded grey
   (Rule 46) — hierarchy comes from their size, not from dimming them. */
.fcard .tags{margin-top:12px;font-size:13.8px;line-height:1.65;word-break:break-word}
.fcard .tags a{color:#1268C3;font-weight:400}
.fcard .tags a:hover{text-decoration:underline}
/* The foot line: how long ago, and the way out to the post. Same shape as the original's
   "7 MONTHS AGO" row. Solid ink, not the original's pale grey. */
.fcard .meta{margin-top:16px;padding:11px 0 2px;border-top:1px solid #d8d8d8;
             display:flex;justify-content:space-between;align-items:center;gap:10px;
             font-size:11px;font-weight:700;letter-spacing:.14em;color:#3a3a3a}
.fcard .meta a{color:#1268C3;font-weight:700}
.fcard iframe{width:100%;display:block;border:0}

footer{text-align:center;padding:30px 20px 44px;color:var(--hot);font-size:12.1px;font-weight:700;
       letter-spacing:.16em}
footer a{color:var(--cyan)}

/* Rule 47 — the grid always spans the whole window; it never grows a margin. Six columns hold from
   the widest screen down to a laptop; below that a card would be too small to read the title, so the
   count drops rather than the type shrinking. */
@media (max-width:1100px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,1fr)}.head h1{font-size:33px}}

/* record pop-up */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
       background:rgba(0,0,0,.86);padding:20px}
.modal.open{display:flex}
.modal .box{background:var(--panel);color:var(--ink);border:2px solid var(--cyan);border-radius:14px;
            max-width:620px;width:100%;max-height:90vh;overflow:auto;
            box-shadow:0 20px 70px rgba(0,229,255,.35)}
.modal .cover{width:100%;aspect-ratio:1/1;background:var(--ground) center/cover no-repeat}
.modal .body{padding:22px 22px 26px;text-align:center}
.modal .body h2{margin:0 0 4px;font-size:24.2px;font-weight:900;color:var(--ink)}
.modal .by{color:var(--cyan);font-size:14.3px;font-weight:700;margin-bottom:6px}
.modal .rdate{color:var(--hot);font-size:12.1px;font-weight:800;letter-spacing:.14em;
              margin-bottom:18px}
.modal .stores{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.modal .stores a{border:1.5px solid var(--cyan);border-radius:999px;padding:8px 15px;font-size:14.3px;
                 font-weight:700;color:var(--cyan);white-space:nowrap}
.modal .stores a:hover{background:var(--cyan);color:var(--ground)}
.modal .share{margin:20px auto 2px;display:block;background:none;border:1.5px solid var(--hot);
              color:var(--hot);border-radius:999px;padding:10px 22px;font-size:14.3px;font-weight:800;
              cursor:pointer}
.modal .share:hover{background:var(--hot);color:var(--ink)}
.modal .close{position:absolute;top:16px;right:20px;color:var(--cyan);font-size:37.4px;cursor:pointer;
              line-height:1}

/* ── BOOKING form ──────────────────────────────────────────────────────────────
   Rule 47 — the panel spans the window with padding, no centred cage; the FIELDS are capped because
   a single-line input 1900px wide is unusable, which is a different thing from caging the content. */
.booking{padding:56px 22px 20px;border-top:1px solid var(--line);margin-top:34px;
         box-shadow:0 -1px 26px rgba(255,31,143,.4)}
.booking h2{text-align:center;margin:0;font-size:28.6px;font-weight:900;letter-spacing:.24em;
            color:var(--hot);text-shadow:0 0 22px rgba(255,31,143,.55)}
.booking .lead{text-align:center;margin:12px auto 30px;font-size:13.2px;font-weight:700;
               letter-spacing:.1em;color:var(--ink);max-width:760px;line-height:1.7}
.bform{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;max-width:1100px;margin:0 auto}
.bform .wide{grid-column:1 / -1}
.bform label{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;color:var(--cyan);
             margin-bottom:7px}
.bform input,.bform textarea,.bform select{width:100%;font-family:inherit;font-size:15.4px;
  padding:11px 12px;background:#0b0b14;color:var(--ink);border:1.5px solid var(--cyan);
  border-radius:4px}
.bform textarea{resize:vertical;min-height:130px}
.bform input:focus,.bform textarea:focus,.bform select:focus{outline:none;border-color:var(--hot);
  box-shadow:0 0 18px rgba(255,31,143,.5)}
.bform .hp{position:absolute;left:-9999px}     /* honeypot — a bot fills it, a person never sees it */
.bform button{grid-column:1 / -1;justify-self:center;font-family:inherit;font-size:16.5px;
  font-weight:900;letter-spacing:.22em;color:var(--ground);background:var(--hot);border:none;
  border-radius:999px;padding:14px 40px;cursor:pointer;box-shadow:0 0 24px rgba(255,31,143,.6)}
.bform button:hover{background:var(--cyan);box-shadow:0 0 28px var(--cyan)}
.bform button:disabled{background:none;color:#FF3B30;border:1.5px solid #FF3B30;box-shadow:none;
                       cursor:default}
.bstatus{grid-column:1 / -1;text-align:center;font-size:13.8px;font-weight:800;letter-spacing:.08em;
         min-height:18px;color:var(--cyan)}
.bstatus.err{color:#FF6B6B}
.bstatus.ok{color:#00FF88}
@media (max-width:700px){.bform{grid-template-columns:1fr}}