/* ======================================================================= NECK & THE HEADS :: neck.css Pre-war blues in a dark, smoky juke joint. Two things at once, the way the Frost page splits Frost from Dirty Whiskey: NECK is the man and the old records — a warm handbill lit by a low amber bulb; THE HEADS are the band that plays those songs loud — the dark stage at the back with the fuzz on it. A 1930s race-record handbill nailed to the wall of a whiskey bar. All colours live in :root below. Nothing here is loaded from outside the site except the four Google fonts in the . ======================================================================= */ :root{ /* THE ROOM — the juke joint itself: smoke, dark wood, one low bulb. The page column and its paper cards sit inside this dark room and read as lit posters; the room only shows in the gaps and behind the dark sections. */ --room-1: #0c0908; /* the far dark */ --room-2: #17110c; /* the wall, top-lit */ --room-3: #241811; /* wood catching the light */ /* WHISKEY — the light in the room. Amber off a low bulb and a full glass. This is the accent that replaces the Frost page's ice-blue: warm, dim, the colour everything in here is lit by. */ --whiskey: #c9872b; --whiskey-lit: #e8b24a; --whiskey-deep:#7a4e14; --bulb: rgba(232,178,72,.22); /* the pool of light from up top */ --smoke: rgba(150,124,92,.10); /* Aged paper, four values from highlight to the deepest fold. Unchanged from the daylight version — under the bulb it just reads as a lit poster. */ --paper-1: #f3e6cd; /* lit paper */ --paper-2: #e8d3a9; /* the field */ --paper-3: #d8bd8a; /* shadowed paper */ --paper-4: #c8a86e; /* deep crease */ /* Ink. Never pure black — a letterpress laid ink that browned with age. */ --ink: #241a12; --ink-soft: #4a3626; --ink-faint:#6f5638; /* The two accents a race-record label actually used: a barn red and a shellac gold. Used the way the originals used them — sparingly, loud. */ --red: #9e2b1e; --red-deep: #6f1c14; --gold: #b0791f; --gold-lit: #d9a842; /* The dark leaf (THE LINEAGE) is the inside of the sleeve: not black, a very dark oxblood so the paper still reads warm through it. */ --sleeve: #1c1310; --sleeve-2: #2a1c16; --shellac: #120c09; /* the disc itself */ --line: #b79a68; /* THE BOOTH — the oxblood leather the sections are now upholstered in. The light handbill paper is gone: every section is a deep wine-leather panel, piped in gold, lit by the same low amber bulb. Warm cream ink rides on top, the way gold lettering sits on the back of a good booth. */ --booth-1: #43151b; /* leather catching the bulb (upper) */ --booth-2: #2e0f14; /* the field */ --booth-3: #200a0e; /* deep crease / lower fold */ --seam: #120608; /* the dark stitched seam / panel edge */ --cream: #efdcb4; /* body ink, on the leather */ --cream-soft: #d6bf95; /* secondary copy */ --cream-faint:#a98f6a; /* fineprint / tertiary */ --red-lit: #cf4a3b; /* barn red, lifted to read on the dark leather */ --ornament: "Rye", "Georgia", serif; /* woodtype display */ --poster: "Ultra", "Georgia", serif; /* fat slab, the name */ --type: "Special Elite", "Courier New", monospace;/* struck typewriter */ --serif: "Libre Baskerville", Georgia, "Times New Roman", serif; /* body */ } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--serif); /* Default text stays dark INK, because almost all copy lives inside the lit paper cards. Anything that sits directly on the dark room (the footer) is given a light colour explicitly, further down. */ color:var(--ink); line-height:1.7; background-color:var(--room-1); /* The room is built entirely from gradients — no image file. A low amber bulb pooling from up top, two soft banks of smoke, a faint amber speckle (bar-light dust), and the dark wall fading top-lit to pitch at the floor. PERFORMANCE — deliberately NOT background-attachment:fixed, and the grain is a background layer here rather than its own fixed overlay. A fixed background forces a repaint of this whole gradient stack every scroll frame; with the grain's tiny dot tiles on top of it that stalled the compositor and blanked the page mid-scroll. Painted normally (scrolling with the page), the grain tiles down the full document for free and scrolling stays on the fast path. */ background-image: radial-gradient(rgba(232,178,72,.05) .5px, transparent .5px), radial-gradient(rgba(0,0,0,.22) .5px, transparent .5px), radial-gradient(95% 48% at 50% -8%, var(--bulb) 0%, transparent 55%), radial-gradient(52% 30% at 14% 30%, var(--smoke) 0%, transparent 60%), radial-gradient(56% 34% at 86% 66%, var(--smoke) 0%, transparent 60%), linear-gradient(180deg, var(--room-2) 0%, var(--room-1) 58%, #070505 100%); background-size:3px 3px, 4px 4px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-position:0 0, 1px 2px, 0 0, 0 0, 0 0, 0 0; background-repeat:repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; } /* The bulb never holds steady. A wide amber pool up top guttering slowly, the way a single low filament does in a back room — it lifts and dips the whole room's light a hair. Fixed and cheap (only opacity animates), sits behind the page column, pointer-events off. Stilled under reduced motion (bottom of file). */ body::after{ content:""; position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 78% at 50% -12%, rgba(232,178,72,.06) 0%, transparent 58%); animation:gutter 7.5s ease-in-out infinite; } @keyframes gutter{ 0%,100%{ opacity:.72; } 40%{ opacity:1; } 58%{ opacity:.5; } 74%{ opacity:.92; } } a{ color:var(--red); text-underline-offset:2px; } a:hover{ color:var(--red-deep); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Honeypot — same trick as the Frost page: real people never see it, and a bot that fills it flags itself. Off-screen rather than display:none because many bots skip hidden fields but happily complete a visible-to-them one. */ .hp{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; } /* ---------- THE RAISED — embers & smoke off the floor ---------- */ /* The Frost page's counterpart is snow falling. This room's weather does the opposite and is the whole thesis of the page: heat RISING. Embers lift off the floor of the juke, catch the bulb, sway, cool, and go out; slow smoke curls up with them. It's the séance made ambient — the ghosts he raises, drifting up out of the boards. The layer paints nothing itself; only the motes animate, on composited transform+opacity, so it never costs a scroll repaint the way a fixed *background* would. pointer-events:none, and killed entirely under prefers-reduced-motion (block at the very bottom of the file). JS (js/neck.js) sets each mote's size, lane, duration, and its two --sway values, which give the climb an S-curve instead of a straight diagonal. */ #dust{ position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden; } .mote{ position:absolute; bottom:-26px; border-radius:50%; will-change:transform, opacity; animation-name:rise; animation-iteration-count:1; } /* An ember: a hot amber coal, small and bright, with a glow that reads through the smoke. Cools from gold toward the label's barn red as it climbs. */ .mote--ember{ animation-timing-function:ease-out; background:radial-gradient(circle at 45% 40%, #ffe7ab 0%, var(--whiskey-lit) 42%, rgba(158,43,30,.55) 76%, transparent 100%); box-shadow:0 0 6px rgba(232,178,72,.85), 0 0 13px rgba(201,88,36,.4); } /* Smoke: soft, near-transparent, blurred; it expands as it lifts. */ .mote--smoke{ animation-timing-function:ease-in-out; filter:blur(3px); background:radial-gradient(circle at 40% 35%, rgba(214,190,152,.26), rgba(120,96,70,.13) 60%, transparent 72%); box-shadow:none; } @keyframes rise{ 0% { transform:translateY(0) translateX(0) scale(.55); opacity:0; } 10% { opacity:var(--op,.85); } 50% { transform:translateY(-52vh) translateX(var(--sway-mid,12px)) scale(1); } 85% { opacity:calc(var(--op,.85) * .45); } 100%{ transform:translateY(-112vh) translateX(var(--sway,-16px)) scale(1.4); opacity:0; } } /* ---------- NOTICE STRIP (the ticker) ---------- */ .notice{ position:relative; z-index:4; background:var(--ink); color:var(--paper-1); border-bottom:3px double var(--gold); font-family:var(--type); letter-spacing:.14em; font-size:.82rem; overflow:hidden; white-space:nowrap; } .notice__track{ display:inline-block; padding:7px 0; will-change:transform; animation:crawl 34s linear infinite; } @keyframes crawl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* ---------- SHEET (the page column) ---------- */ .sheet{ position:relative; z-index:4; max-width:1000px; margin:0 auto; padding:0 18px 60px; } /* ---------- RULES ---------- */ .rule{ border:0; border-top:1px solid var(--gold); margin:16px auto; width:100%; opacity:.5; } .rule--fat{ border:0; height:6px; opacity:.85; border-top:2px solid var(--gold); border-bottom:2px solid var(--gold); background:transparent; margin:14px auto; } /* ======================================================================= THE HANDBILL (hero) ======================================================================= */ .bill{ position:relative; margin-top:26px; padding:30px 26px 34px; text-align:center; /* Oxblood leather stretched over the handbill: a soft sheen off the bulb up top, the far corner falling into shadow, a fine diagonal grain, and a barn- red watermark still bled through the hide. */ background: radial-gradient(120% 85% at 20% -6%, rgba(232,178,72,.10) 0%, transparent 46%), radial-gradient(150% 130% at 92% 114%, rgba(0,0,0,.5) 0%, transparent 56%), repeating-linear-gradient(48deg, rgba(0,0,0,.05) 0 3px, transparent 3px 7px), repeating-linear-gradient(45deg, rgba(207,74,59,.05) 0 12px, transparent 12px 24px), linear-gradient(180deg, var(--booth-1) 0%, var(--booth-2) 58%, var(--booth-3) 100%); border:2px solid var(--seam); /* Seated in the dark room and lit by the bulb: a stitched-dark edge, a gold piping line just inside it, a deep drop, and a wide amber halo. */ box-shadow: inset 0 0 0 1.5px rgba(232,178,72,.22), inset 0 2px 26px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.6), 0 0 70px rgba(232,178,72,.13); } /* The two woodcut hands / decorative bands top and bottom of the bill. */ .bill__edge{ height:14px; margin:0 auto; background:repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px); opacity:.7; } .bill__edge--top{ margin-bottom:16px; } .bill__edge--bottom{ margin-top:22px; } .bill__eyebrow{ font-family:var(--type); letter-spacing:.2em; font-size:.8rem; color:var(--whiskey-lit); margin:0 0 4px; text-transform:uppercase; } /* The name. Three weights stacked the way a jobbing printer would set it to fill the plate: small word, script connector, then the big slab. */ .wordmark{ margin:6px 0; line-height:.9; } .wordmark__small{ display:block; font-family:var(--ornament); color:var(--cream); font-size:clamp(2rem,7vw,3.4rem); letter-spacing:.04em; } .wordmark__amp{ display:block; font-family:var(--serif); font-style:italic; font-weight:700; color:var(--red); font-size:clamp(1rem,3vw,1.5rem); letter-spacing:.08em; margin:2px 0; } .wordmark__big{ display:block; font-family:var(--poster); color:var(--cream); font-size:clamp(3.2rem,15vw,7.5rem); letter-spacing:.01em; /* Gold-leaf lettering pressed into the leather: a red offset behind, a dark seam under the top edge, and a low amber glow so the name lifts off the hide. */ text-shadow: 2px 2px 0 rgba(158,43,30,.45), 0 1px 0 rgba(0,0,0,.5), 0 2px 22px rgba(232,178,72,.28); } .bill__sub{ font-family:var(--type); letter-spacing:.16em; font-size:clamp(.75rem,2.2vw,1rem); margin:10px 0 2px; color:var(--cream-soft); } .bill__where{ font-family:var(--ornament); font-size:clamp(1.1rem,4vw,1.8rem); color:var(--red-lit); margin:2px 0 0; letter-spacing:.05em; } /* The split line: "the records" on one side, "loud" on the other. */ .bill__split{ font-family:var(--type); font-size:clamp(.66rem,2vw,.82rem); letter-spacing:.1em; color:var(--whiskey); margin:10px 0 0; text-transform:uppercase; } /* THE STANDING GIG — the weekly Thursday residency, lifted out of the fine print and made a headline in its own right: the one recurring fact a walk-up fan needs. A lit marquee panel on the leather, gold on a barn-red-piped card. */ .bill__resident{ margin:18px auto 4px; max-width:34ch; padding:12px 18px; border:1.5px solid var(--red-lit); background:radial-gradient(120% 120% at 50% -10%, rgba(232,178,72,.12) 0%, transparent 60%), rgba(158,43,30,.14); box-shadow:inset 0 0 0 1px rgba(232,178,72,.18), 0 6px 18px rgba(0,0,0,.4); } .bill__resident-kicker{ display:block; font-family:var(--type); font-size:.7rem; letter-spacing:.2em; color:var(--whiskey-lit); text-transform:uppercase; margin-bottom:4px; } .bill__resident-head{ display:block; font-family:var(--poster); line-height:1.05; letter-spacing:.01em; font-size:clamp(1.15rem,4.4vw,2rem); color:var(--gold-lit); text-shadow:1px 1px 0 rgba(158,43,30,.5), 0 2px 16px rgba(232,178,72,.28); } .bill__resident-sub{ display:block; margin-top:6px; font-family:var(--type); font-size:clamp(.6rem,1.9vw,.74rem); letter-spacing:.1em; color:var(--cream-soft); text-transform:uppercase; } .bill__pitch{ font-style:italic; color:var(--cream-soft); max-width:44ch; margin:10px auto 0; font-size:1.02rem; } .bill__buttons{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px; } /* The band logo stamped on the handbill. The source (neck-heads-logo.png) is the line-art keyed onto a TRANSPARENT field — the original JPG's light-grey background was only near-black once inverted, so a screen blend left a faint grey box around it on the leather. With a real alpha channel the field just isn't there, and invert(1)+sepia recolours the black ink to warm gold so it reads as a gold-ink seal branded into the hide rather than a pasted sticker. */ .bill__seal{ display:block; width:clamp(96px,20vw,132px); height:auto; margin:24px auto 0; filter:invert(1) sepia(.5) saturate(1.6) hue-rotate(-8deg) brightness(1.02); opacity:.92; transform:rotate(-4deg); } /* A rubber approval stamp slapped in the corner, ink half dry so it prints uneven. multiply drops it into the paper; it sits askew like a real stamp. */ .bill__stamp{ position:absolute; top:14px; right:12px; z-index:2; pointer-events:none; width:98px; height:98px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(-13deg); color:var(--red-lit); border:2.5px solid var(--red-lit); box-shadow:inset 0 0 0 2px var(--red-lit); opacity:.7; mix-blend-mode:screen; filter:contrast(1.1); } .bill__stamp b{ font-family:var(--type); font-size:.56rem; letter-spacing:.16em; display:block; } .bill__stamp span{ font-family:var(--ornament); font-size:.9rem; line-height:.95; margin:3px 0; letter-spacing:.02em; } .bill__stamp i{ font-style:normal; font-family:var(--type); font-size:.42rem; letter-spacing:.24em; } /* The bottom matter every handbill carried in tiny wood type — the house rules, half of them a joke, exactly the register the Frost page's marquee runs in. */ .bill__matter{ font-family:var(--type); font-size:clamp(.58rem,1.9vw,.72rem); letter-spacing:.08em; color:var(--cream-faint); text-transform:uppercase; margin:20px auto 0; max-width:46ch; line-height:1.7; } /* ======================================================================= INK BUTTONS A pressed-metal stamp: paper-coloured plate, hard ink border, a shove down on click. The red variant is the label's spot colour. ======================================================================= */ .ink-btn{ --bg:var(--paper-1); --fg:var(--ink); --bd:var(--ink); display:inline-block; cursor:pointer; font-family:var(--type); letter-spacing:.1em; text-transform:uppercase; font-size:1rem; text-decoration:none; color:var(--fg); background:var(--bg); border:2px solid var(--bd); padding:11px 20px; box-shadow:3px 3px 0 var(--bd); transition:transform .05s, box-shadow .05s, background .15s; } .ink-btn:hover{ background:var(--paper-2); color:var(--fg); } .ink-btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--bd); } .ink-btn:focus-visible{ outline:3px dashed var(--gold); outline-offset:3px; } .ink-btn--red{ --bg:var(--red); --fg:var(--paper-1); --bd:var(--red-deep); } .ink-btn--red:hover{ background:var(--red-deep); color:var(--paper-1); } .ink-btn--sm{ font-size:.8rem; padding:7px 13px; box-shadow:2px 2px 0 var(--bd); } .ink-btn--sm:active{ transform:translate(2px,2px); } /* ======================================================================= NAV TABS Filing-cabinet tabs pinned under the handbill. ======================================================================= */ .tabs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:22px 0 8px; padding:0 4px; } .tab{ font-family:var(--type); font-size:.82rem; letter-spacing:.08em; text-decoration:none; color:var(--cream); background:linear-gradient(180deg, #3a161c, #280f13); padding:8px 14px 10px; border:2px solid var(--seam); border-bottom:none; border-radius:8px 8px 0 0; box-shadow:inset 0 3px 0 rgba(232,178,72,.16); } .tab:hover{ background:var(--gold-lit); color:var(--ink); } /* ======================================================================= LEAF (a section = a page in the folio) ======================================================================= */ .leaf{ position:relative; margin:22px 0; padding:26px 24px 30px; /* An upholstered oxblood-leather panel, not a flat fill: a sheen off the bulb up top, the far corner falling into shadow, and a fine diagonal grain in the hide. The dark/stage leaves below reset all of this with their own background shorthand. */ background: radial-gradient(120% 85% at 22% -4%, rgba(232,178,72,.09) 0%, transparent 44%), radial-gradient(140% 120% at 90% 112%, rgba(0,0,0,.45) 0%, transparent 55%), repeating-linear-gradient(48deg, rgba(0,0,0,.045) 0 3px, transparent 3px 7px), linear-gradient(180deg, var(--booth-1) 0%, var(--booth-2) 58%, var(--booth-3) 100%); border:1.5px solid var(--seam); /* A lit booth in a dark room: a gold piping line just inside the seam, a deep drop, and a faint amber halo picked up off the bulb. */ box-shadow: inset 0 0 0 1px rgba(232,178,72,.16), 0 14px 34px rgba(0,0,0,.55), 0 0 46px rgba(232,178,72,.06); } /* The leather sections read light-on-dark now, so their default ink is warm cream. Anything sitting on its own light surface inside them (a record label, a gold disc centre, a paper ticket button) sets its own colour and overrides this. The two already-dark leaves keep their own copy colours. */ .bill, .leaf:not(.leaf--dark):not(.leaf--stage){ color:var(--cream); } .leaf--dark{ background: radial-gradient(120% 100% at 50% 0%, rgba(158,43,30,.10) 0%, transparent 55%), linear-gradient(180deg, var(--sleeve-2), var(--sleeve)); border-color:#000; color:var(--paper-2); } /* THE STAGE — the dark leaf The Heads play on. Same sleeve-dark as the lineage but lit from the floor by a hot amber footlight and edged in whiskey, so it reads as the loud end of the room rather than the quiet record sleeve. */ .leaf--stage{ background: radial-gradient(120% 80% at 50% 108%, rgba(232,178,72,.16) 0%, transparent 58%), radial-gradient(120% 90% at 50% 0%, rgba(158,43,30,.12) 0%, transparent 55%), linear-gradient(180deg, #1a120c, var(--sleeve)); border:1.5px solid var(--whiskey-deep); color:var(--paper-2); box-shadow: 0 14px 34px rgba(0,0,0,.6), 0 0 60px rgba(232,178,72,.10); } .head{ /* position:relative is load-bearing: the flanking gold rules below are absolutely positioned, so without it they resolve against the .leaf and land halfway down the whole section, striking across the content instead of through the title. Anchoring them to the header keeps them on its line. */ text-align:center; margin:2px 0 6px; position:relative; font-family:var(--poster); font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.02em; color:var(--cream); } .head span{ display:inline-block; padding:0 16px; position:relative; z-index:1; } /* The ruled line through a section head, broken by the words. Sits behind the title (z-index:1 on the span) and runs from each edge to a clear gap either side of the centred words. */ .head::before,.head::after{ content:""; display:block; height:3px; background:var(--gold); position:absolute; top:50%; width:calc(50% - 8ch); } .head::before{ left:0; } .head::after{ right:0; } .head--light{ color:var(--gold-lit); } .head--light::before,.head--light::after{ background:var(--gold); } .dek{ text-align:center; max-width:60ch; margin:0 auto 18px; font-style:italic; color:var(--cream-soft); } .dek--light{ color:var(--paper-3); } .dek--tight{ margin-bottom:10px; } .fineprint{ font-family:var(--type); font-size:.78rem; color:var(--cream-faint); line-height:1.5; } .leaf--dark .fineprint{ color:var(--paper-4); } code{ font-family:var(--type); background:rgba(232,178,72,.12); color:var(--cream); padding:1px 5px; border-radius:3px; } .leaf--dark code{ background:rgba(255,248,228,.12); color:var(--paper-1); } .minihead{ font-family:var(--ornament); font-size:1.15rem; color:var(--red-lit); margin:20px 0 6px; letter-spacing:.03em; } /* ======================================================================= THE VICTROLA ======================================================================= */ .victrola{ display:grid; grid-template-columns:minmax(220px,320px) 1fr; gap:26px; align-items:center; } .victrola__deck{ display:flex; justify-content:center; } /* The turntable. .platter is the box, .platter__disc the black shellac record that JS sets spinning by adding the .spinning class. */ .platter{ position:relative; width:min(300px,80vw); aspect-ratio:1; } .platter__disc{ position:absolute; inset:0; border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.045) 0 1px, transparent 1px 3px), radial-gradient(circle at 42% 38%, #3a2c22 0%, var(--shellac) 32%, #000 100%); box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 0 40px rgba(0,0,0,.8); border:1px solid #000; } .platter__label{ position:absolute; inset:30%; border-radius:50%; background:radial-gradient(circle at 45% 40%, var(--gold-lit), var(--gold) 60%, #8a5c14 100%); color:var(--ink); border:1px solid #6f4a12; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:16% 8%; box-shadow:inset 0 0 10px rgba(0,0,0,.35); } /* Text clusters at the top and bottom, leaving a clear band across the middle for the spindle hole — the way a real record label reserves its centre, so the hole never lands on a letter. */ .platter__label-cluster{ display:flex; flex-direction:column; align-items:center; } .platter__label-top{ font-family:var(--type); font-size:.5rem; letter-spacing:.14em; } .platter__label-mid{ font-family:var(--ornament); font-size:.82rem; line-height:1; } .platter__label-bot{ font-family:var(--type); font-size:.42rem; letter-spacing:.1em; opacity:.8; } .platter__hole{ position:absolute; top:50%; left:50%; width:4.5%; height:4.5%; border-radius:50%; background:#120c09; box-shadow:0 0 0 1.5px rgba(255,248,224,.35), inset 0 0 2px #000; transform:translate(-50%,-50%); } .platter__disc.spinning{ animation:spin78 .77s linear infinite; } /* ~78rpm feel */ @keyframes spin78{ to{ transform:rotate(360deg); } } /* The tonearm, hinged top-right. Swings onto the record when it plays. */ .platter__arm{ position:absolute; top:-6%; right:-4%; width:52%; height:10%; transform-origin:92% 50%; transform:rotate(-22deg); transition:transform .6s cubic-bezier(.5,-0.2,.3,1.2); } .platter__arm i{ position:absolute; right:0; top:20%; width:100%; height:22%; background:linear-gradient(180deg,#cbb48a,#7d6338); border:1px solid #4a3826; border-radius:3px; } .platter__arm::after{ /* headshell */ content:""; position:absolute; left:-2%; top:6%; width:16%; height:52%; background:#3a2c22; border:1px solid #000; border-radius:2px; } .platter.playing .platter__arm{ transform:rotate(4deg); } .victrola__panel{ align-self:center; } .victrola__note{ font-style:italic; color:var(--cream-soft); margin:12px 0; } /* ======================================================================= THE SIDES (the band's own records) ======================================================================= */ .sides{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:22px; } .side{ background:linear-gradient(180deg, #351319, #250c11); border:1.5px solid var(--seam); box-shadow:inset 0 0 0 1px rgba(232,178,72,.14), 0 4px 12px rgba(0,0,0,.4); padding:18px 16px 16px; text-align:center; } .side__disc{ position:relative; width:150px; height:150px; margin:0 auto 14px; border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), radial-gradient(circle at 42% 38%, #3a2c22 0%, var(--shellac) 34%, #000 100%); box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 0 24px rgba(0,0,0,.75); transition:transform .3s; } .side:hover .side__disc{ transform:rotate(8deg); } .side__label{ position:absolute; inset:26%; border-radius:50%; background:radial-gradient(circle at 45% 40%, #efe0bf, #d9c39a 65%, #b89e6f 100%); border:1px solid #7d6338; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px; } .side__num{ font-family:var(--poster); font-size:1.2rem; line-height:1; } .side__title{ font-family:var(--type); font-size:.62rem; letter-spacing:.06em; margin:2px 0; } .side__credit{ font-family:var(--type); font-size:.42rem; letter-spacing:.08em; opacity:.75; } .side__hole{ position:absolute; top:50%; left:50%; width:8%; height:8%; border-radius:50%; background:#120c09; box-shadow:0 0 0 1px rgba(0,0,0,.4); transform:translate(-50%,-50%); } .side__cat{ display:block; font-family:var(--type); font-size:.72rem; color:var(--cream-faint); letter-spacing:.06em; } .side__play{ display:none; margin:8px auto 0; } .side__pending{ display:block; margin-top:8px; font-family:var(--type); font-size:.72rem; letter-spacing:.12em; color:var(--gold); border:1px dashed var(--gold); padding:4px 8px; } /* A side with a real URL flips from "AWAITING PRESSING" to a PLAY button. JS adds .side--live once it verifies the data-url isn't the placeholder. */ .side--live .side__pending{ display:none; } .side--live .side__play{ display:inline-block; } /* ======================================================================= THE LINEAGE (flip cards, styled as 78s in their sleeves) ======================================================================= */ .lineage{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:26px; margin-bottom:22px; } /* The flip mechanism: .disc is the stage (perspective), .disc__inner rotates, the two faces sit back-to-back. Flipping is driven by a class JS toggles, NOT by :hover — a hover flip is a trap on touch and unreachable by keyboard. Under reduced motion the rotate becomes an instant swap (bottom of file). */ .disc{ perspective:1400px; } /* The card's height is driven by JS (js/neck.js): it sits at 380px showing the front, and grows to fit the liner-notes back when flipped, then shrinks back. That's what fixed the mobile lineage — the back used to be locked into a 420px box and its ~1000px of notes were clipped into a tiny inner scroll. NOTE: no overflow property here — a non-visible overflow on a preserve-3d element flattens it and kills the flip; the clipping lives on the faces. */ .disc__inner{ position:relative; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.4,.1,.2,1), height .5s ease; height:380px; } .disc.flipped .disc__inner{ transform:rotateY(180deg); } .disc__face{ position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; border:1.5px solid #000; padding:20px 18px; background:linear-gradient(180deg,#241a14,#140d0a); } .disc__face--front{ justify-content:center; gap:16px; } .disc__face--back{ transform:rotateY(180deg); background:var(--paper-1); border-color:var(--ink); align-items:stretch; } /* Front: a big black 78 with a printed label. The printed matter is stacked (flex-direction:column) and width-capped so it stays inside the paper centre rather than spilling onto the black — the paper ::before is grown to ~72% so a two-line name and the imprint lines all fit within the circle. */ .disc__label{ position:relative; width:190px; height:190px; border-radius:50%; background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), radial-gradient(circle at 42% 38%, #3a2c22 0%, var(--shellac) 30%, #000 100%); box-shadow:0 8px 18px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; margin-top:6px; } .disc__label::before{ /* the paper centre */ content:""; position:absolute; inset:14%; border-radius:50%; background:radial-gradient(circle at 45% 40%, #e9d7ac, #cdb684 70%, #a98f5f 100%); border:1px solid #7d6338; } .disc__label--red::before{ background:radial-gradient(circle at 45% 40%, #c94336, var(--red) 60%, var(--red-deep) 100%); } /* Every line sits above the paper and is capped to a chord that stays inside the circle, so nothing reaches the black. */ .disc__label > *{ position:relative; z-index:1; text-align:center; max-width:118px; } .disc__label-top{ font-family:var(--type); font-size:.46rem; letter-spacing:.08em; color:var(--ink); } .disc__label--red .disc__label-top{ color:var(--paper-1); } .disc__name{ font-family:var(--poster); font-size:.92rem; line-height:1; color:var(--ink); margin:3px 0; } .disc__label--red .disc__name{ color:var(--paper-1); } .disc__years{ font-family:var(--type); font-size:.54rem; color:var(--ink-soft); display:block; } .disc__label--red .disc__years{ color:#f0d9c0; } .disc__place{ font-family:var(--type); font-size:.46rem; letter-spacing:.05em; color:var(--ink-faint); display:block; } .disc__label--red .disc__place{ color:#e8c9b8; } .disc__hole{ position:absolute; top:50%; left:50%; width:5%; height:5%; border-radius:50%; background:#120c09; transform:translate(-50%,-50%); z-index:2; } .disc__tag{ font-family:var(--ornament); color:var(--gold-lit); font-size:1rem; text-align:center; margin:14px 0 12px; letter-spacing:.03em; } .disc__flip{ align-self:center; } /* Back: the liner notes. */ .disc__backhead{ font-family:var(--poster); font-size:1.15rem; color:var(--red-deep); text-align:center; margin:0 0 10px; letter-spacing:.02em; } .facts{ margin:0 0 12px; font-size:.86rem; } .facts dt{ font-family:var(--type); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-top:8px; } .facts dd{ margin:1px 0 0; color:var(--ink-soft); } .facts i{ color:var(--ink); } .notes{ font-style:italic; color:var(--ink); font-size:.88rem; line-height:1.6; border-top:1px dashed var(--ink-faint); padding-top:10px; margin:10px 0 12px; } .notes b{ font-style:normal; font-family:var(--type); font-size:.72rem; letter-spacing:.08em; color:var(--red-deep); } .thread{ max-width:70ch; margin:6px auto 0; text-align:center; font-size:.94rem; color:var(--paper-2); line-height:1.8; } .thread b{ font-family:var(--type); color:var(--gold-lit); letter-spacing:.08em; } /* ======================================================================= THE CARD CATALOG (timeline) ======================================================================= */ .rail{ position:relative; padding:20px 0 8px; } .rail__line{ position:absolute; left:0; right:0; top:38px; height:3px; background:var(--gold); opacity:.4; } .rail__years{ /* safe center: centre the year chips when they fit (they don't fill the rail, so flush-left left a wide dead gap on the right), but fall back to flex-start when the row overflows on a narrow screen so the first year is never clipped out of reach behind the scroll. */ display:flex; gap:10px; justify-content:safe center; overflow-x:auto; padding:6px 2px 14px; scroll-snap-type:x proximity; } .year{ flex:0 0 auto; scroll-snap-align:center; cursor:pointer; font-family:var(--type); font-size:.9rem; letter-spacing:.04em; background:linear-gradient(180deg, #351319, #250c11); color:var(--cream); border:2px solid var(--seam); padding:8px 12px; box-shadow:2px 2px 0 var(--seam); position:relative; } .year::before{ /* the tick down to the rail line */ content:""; position:absolute; left:50%; top:-14px; width:2px; height:12px; background:var(--gold); transform:translateX(-50%); } .year:hover{ background:var(--gold-lit); color:var(--ink); } .year.on{ background:var(--red); color:var(--paper-1); border-color:var(--red-deep); } .year:focus-visible{ outline:3px dashed var(--gold); outline-offset:2px; } .drawer{ margin-top:16px; min-height:96px; } .card{ background:linear-gradient(180deg, #351319, #250c11); border:1.5px solid var(--seam); border-left:6px solid var(--red); padding:14px 18px; box-shadow:inset 0 0 0 1px rgba(232,178,72,.12), 0 4px 12px rgba(0,0,0,.4); animation:pull .35s ease; } @keyframes pull{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .card__year{ font-family:var(--poster); font-size:1.6rem; color:var(--red-lit); line-height:1; } .card__head{ font-family:var(--ornament); font-size:1.15rem; color:var(--cream); margin:2px 0 6px; } .card__body{ color:var(--cream-soft); margin:0; } /* ======================================================================= WHO'S NECK ======================================================================= */ .about{ display:grid; grid-template-columns:minmax(150px,210px) 1fr; gap:28px; align-items:start; } .about__plate{ position:relative; text-align:center; } .about__img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 42%; display:block; border:6px solid #d9c39a; outline:2px solid var(--seam); box-shadow:0 6px 16px rgba(0,0,0,.5); filter:sepia(.18) contrast(1.04) saturate(.96); } /* Photo not supplied yet: the fails to load, JS reveals the pending card and hides the broken frame. */ .about__pending{ aspect-ratio:4/5; display:none; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:linear-gradient(180deg, #351319, #250c11); border:2px dashed var(--gold-deep, #7a4e14); color:var(--cream-soft); font-family:var(--type); } .about__pending b{ font-size:1rem; letter-spacing:.12em; color:var(--red-lit); } .about__pending span{ font-size:.78rem; } .about.no-photo .about__img{ display:none; } .about.no-photo .about__pending{ display:flex; } .about__cap{ font-family:var(--ornament); color:var(--red-lit); margin-top:8px; font-size:1.2rem; letter-spacing:.08em; } .about__body .lede{ font-family:var(--ornament); font-size:1.4rem; color:var(--cream); margin:0 0 10px; } /* His mission statement, quoted straight from neckbarham.com. A pressed-in pull-quote: barn-red rule down the side, shellac-gold opening mark. */ .creed{ position:relative; margin:16px 0; padding:6px 4px 6px 20px; border-left:4px solid var(--red); font-style:italic; font-size:1.06rem; line-height:1.6; color:var(--cream-soft); } .creed cite{ display:block; margin-top:8px; font-style:normal; font-family:var(--type); font-size:.78rem; letter-spacing:.08em; color:var(--red-lit); } .stamps{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; } .stamp{ font-family:var(--type); font-size:.62rem; letter-spacing:.08em; text-align:center; line-height:1.3; color:var(--red-lit); border:2px solid var(--red-lit); padding:8px 10px; transform:rotate(-3deg); background:rgba(207,74,59,.08); } .stamp:nth-child(even){ transform:rotate(2deg); } .stamp b{ font-size:.82rem; color:var(--red-lit); } /* ======================================================================= THE HEADS (the band / the stage) The loud half of the split. Everything here lives on the dark .leaf--stage, so its type is light and its accent is whiskey. ======================================================================= */ .heads{ display:grid; grid-template-columns:1fr minmax(270px,40%); gap:28px; align-items:start; } .heads__body p{ color:var(--paper-2); } .heads__body b{ color:var(--paper-1); } .heads__body a{ color:var(--whiskey-lit); } .lede--light{ font-family:var(--ornament); font-size:1.4rem; color:var(--whiskey-lit); margin:0 0 10px; line-height:1.35; } /* The fuzz demo — a synthesised dirty chord (see js/neck.js). Its own hot amber button so it reads as an amp switch, not a paper stamp. */ .fuzz{ margin-top:20px; } .ink-btn--amp{ --bg:var(--whiskey); --fg:#170f08; --bd:var(--whiskey-deep); box-shadow:3px 3px 0 var(--bd), 0 0 22px rgba(232,178,72,.25); } .ink-btn--amp:hover{ background:var(--whiskey-lit); color:#170f08; } .ink-btn--amp[aria-pressed="true"]{ --bg:var(--red); --fg:var(--paper-1); --bd:var(--red-deep); box-shadow:3px 3px 0 var(--bd), 0 0 26px rgba(166,47,32,.5); } .fuzz__note{ font-style:italic; color:var(--paper-3); margin:10px 0 0; font-size:.92rem; } /* THE VOICE — the one thing on this stage with nothing on it. A struck panel holding the signal-chain diagram that makes the point visually. */ .voice{ background:rgba(9,7,6,.55); border:1px solid var(--whiskey-deep); border-left:5px solid var(--whiskey); padding:16px 18px; box-shadow:inset 0 0 34px rgba(0,0,0,.45); } .voice__head{ font-family:var(--type); letter-spacing:.14em; font-size:.8rem; color:var(--whiskey-lit); margin:0 0 12px; } .voice__note{ color:var(--paper-2); font-size:.9rem; line-height:1.6; margin:12px 0 0; } .voice__note b{ color:var(--paper-1); font-family:var(--type); font-size:.78rem; letter-spacing:.06em; } /* The signal chain: guitar runs through fuzz + amp and comes out dirty; the voice runs through NOTHING and comes out dirty anyway. */ .chain{ display:flex; flex-direction:column; gap:12px; } .chain__row{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-family:var(--type); font-size:.68rem; letter-spacing:.05em; } .chain__from{ color:var(--paper-3); min-width:64px; } .chain__row--voice .chain__from{ color:var(--whiskey-lit); } .chain__arrow{ color:var(--whiskey); opacity:.8; } .chain__box{ padding:5px 9px; border-radius:3px; letter-spacing:.08em; } .chain__box--hot{ color:#170f08; background:var(--whiskey-lit); border:1.5px solid var(--whiskey-deep); box-shadow:0 0 12px rgba(232,178,72,.4); } .chain__box--none{ color:var(--paper-4); background:transparent; border:1.5px dashed var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--red); } .chain__out{ color:var(--red); font-weight:700; letter-spacing:.08em; } .chain__row--voice .chain__out{ color:var(--whiskey-lit); } /* Stage stamps: amber on the dark, the mirror of the paper stamps in WHO'S NECK. */ .stamps--stage{ justify-content:center; margin-top:26px; } .stamp--stage{ color:var(--whiskey-lit); border-color:var(--whiskey); background:rgba(232,178,72,.06); } .stamp--stage b{ color:var(--paper-1); } /* FROM THE FLOOR — real live shots, tacked to the stage wall like photos in a juke joint. Each sits in a dark mount with a whiskey edge; a small tilt and a hover lift so they read as pinned prints, not a stock grid. */ /* Small prints tacked to the stage wall — deliberately modest, not a hero band. A strip of tape holds each one; they tilt, and straighten on hover. */ .floor{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:28px; max-width:760px; margin-left:auto; margin-right:auto; } .floor__shot{ position:relative; margin:0; overflow:visible; background:#0c0806; border:3px solid #0c0806; outline:1px solid var(--whiskey-deep); box-shadow:0 10px 20px rgba(0,0,0,.6); transition:transform .15s, box-shadow .15s; } .floor__shot img{ display:block; width:100%; height:150px; object-fit:cover; filter:contrast(1.04) saturate(.97); } /* the tape strip */ .floor__shot::before{ content:""; position:absolute; top:-9px; left:50%; z-index:2; width:48px; height:16px; transform:translateX(-50%) rotate(-4deg); background:linear-gradient(180deg, rgba(224,198,148,.62), rgba(198,168,110,.5)); border:1px solid rgba(120,92,52,.4); box-shadow:0 1px 3px rgba(0,0,0,.35); } .floor__shot:nth-child(odd){ transform:rotate(-1.8deg); } .floor__shot:nth-child(even){ transform:rotate(1.8deg); } .floor__shot:nth-child(even)::before{ transform:translateX(-50%) rotate(5deg); } .floor__shot:hover{ transform:rotate(0) translateY(-3px); box-shadow:0 16px 30px rgba(0,0,0,.7), 0 0 26px rgba(232,178,72,.14); } .floor__cap{ text-align:center; font-family:var(--type); font-size:.78rem; letter-spacing:.12em; color:var(--whiskey-lit); margin:14px 0 0; } /* ======================================================================= THE FEATURED PRESSING (the latest single's Spotify embed) Mirrors the Frost page's pinned player, dressed as a record in a frame. ======================================================================= */ .press{ margin:0 auto 24px; max-width:640px; background:linear-gradient(180deg, #351319, #250c11); border:2px solid var(--seam); box-shadow:inset 0 0 0 1px rgba(232,178,72,.16), 0 14px 30px rgba(0,0,0,.55), 0 0 40px rgba(232,178,72,.08); } .press__bar{ display:flex; align-items:center; gap:10px; background:var(--ink); color:var(--paper-1); font-family:var(--type); letter-spacing:.1em; font-size:.78rem; padding:9px 13px; } .press__dot{ width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); flex:0 0 auto; } .press iframe{ display:block; width:100%; border:0; } .press__links{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px; } /* A single's streaming links — the same struck-metal look as the social chips, but its own class so the #REPLACE-hiding pass never touches these real ones. */ .play-link{ font-family:var(--type); font-size:.74rem; letter-spacing:.08em; text-decoration:none; color:var(--cream); background:linear-gradient(180deg, #3a161c, #260d12); border:2px solid var(--whiskey-deep); padding:6px 11px; box-shadow:2px 2px 0 var(--seam); } .play-link:hover{ background:var(--gold-lit); color:var(--ink); border-color:var(--seam); } .side__plays{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px; } /* ======================================================================= THE DATES ======================================================================= */ .dates-wrap{ overflow-x:auto; } .dates{ width:100%; border-collapse:collapse; } .dates th{ font-family:var(--type); font-size:.8rem; letter-spacing:.12em; text-align:left; color:var(--paper-1); background:var(--ink); padding:10px 12px; } .dates td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:top; } .dates tbody tr:hover{ background:rgba(158,43,30,.05); } .dates__with{ font-family:var(--type); font-size:.72rem; color:var(--red-lit); letter-spacing:.06em; } .dates__empty td{ text-align:center; font-family:var(--type); color:var(--cream-faint); letter-spacing:.08em; } /* The standing Thursday gig, marked with a faint amber wash and a gold date. */ .dates__residency{ background:rgba(232,178,72,.05); } .dates__residency td:first-child{ font-family:var(--type); color:var(--gold-lit); letter-spacing:.06em; font-size:.9rem; } /* The after-hours portal into the Frost Lounge's Dizzy Rooster, centred under the dates table: the button is the door, the note the aside beneath it. */ .dates__lounge{ text-align:center; margin:22px 0 4px; } .dates__lounge-note{ text-align:center; max-width:54ch; margin:0 auto; font-style:italic; color:var(--cream-soft); font-size:.94rem; } .dates__lounge-note a{ color:var(--gold-lit); } /* ======================================================================= THE SONG MENU The request/tip card he runs at the Dizzy Rooster, set as a leather menu: each drink-deal tier is its own panel, every song ruled off to its price with a dotted leader. Mostly covers; the red tier is SPECIAL REQUESTS. ======================================================================= */ .menu__where{ text-align:center; font-family:var(--type); letter-spacing:.12em; font-size:clamp(.66rem,2vw,.82rem); color:var(--whiskey-lit); text-transform:uppercase; margin:-6px 0 22px; } .menu{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:start; } .menu__tier{ background:linear-gradient(180deg,#351319,#250c11); border:1.5px solid var(--seam); box-shadow:inset 0 0 0 1px rgba(232,178,72,.14), 0 4px 12px rgba(0,0,0,.4); padding:16px 20px 18px; } /* The SPECIAL REQUESTS tier gets the barn-red spot piping instead of gold. */ .menu__tier--red{ box-shadow:inset 0 0 0 1px rgba(207,74,59,.32), 0 4px 12px rgba(0,0,0,.4); } .menu__deal{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-family:var(--ornament); font-size:1.2rem; letter-spacing:.02em; color:var(--cream); margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--gold); } .menu__tier--red .menu__deal{ color:var(--red-lit); border-bottom-color:var(--red-lit); } .menu__deal small{ font-family:var(--type); font-size:.6rem; letter-spacing:.12em; color:var(--whiskey-lit); white-space:nowrap; align-self:center; } .menu__list{ list-style:none; margin:0; padding:0; } .menu__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; padding:5px 0; font-size:.98rem; } .menu__song{ color:var(--cream); } /* The dotted leader that runs a song out to its price. Empty span, nudged up so the dots sit on the type's baseline rather than under it. */ .menu__dots{ flex:1 1 auto; min-width:14px; align-self:baseline; border-bottom:2px dotted rgba(232,178,72,.42); position:relative; top:-.3em; } .menu__price{ font-family:var(--type); font-size:.9rem; color:var(--gold-lit); white-space:nowrap; } .menu__tier--red .menu__price{ color:var(--red-lit); } .menu__by{ flex-basis:100%; margin-top:-1px; font-style:italic; font-size:.74rem; color:var(--whiskey); line-height:1.2; } .menu__note{ text-align:center; max-width:62ch; margin:18px auto 0; } .menu__note b{ color:var(--red-lit); font-family:var(--type); font-size:.72rem; letter-spacing:.06em; } /* ======================================================================= BOOKING ======================================================================= */ .booking{ display:grid; grid-template-columns:1fr 1fr; gap:30px; } .booking__mail{ font-family:var(--ornament); font-size:1.3rem; } .booking__mail a{ color:var(--red-lit); } .links{ display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 6px; } .chip{ font-family:var(--type); font-size:.78rem; letter-spacing:.1em; text-decoration:none; color:var(--cream); background:linear-gradient(180deg, #3a161c, #260d12); border:2px solid var(--whiskey-deep); padding:6px 12px; box-shadow:2px 2px 0 var(--seam); } .chip:hover{ background:var(--gold-lit); color:var(--ink); border-color:var(--seam); } /* A chip still holding #REPLACE is hidden by JS (.chip--dead), same policy as the Frost page: a dead social link reads worse than a missing one. */ .chip--dead{ display:none; } .subscribe{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .subscribe input[type=email]{ flex:1 1 200px; font-family:var(--type); font-size:.95rem; color:var(--cream); background:rgba(9,6,5,.5); border:2px solid var(--whiskey-deep); padding:10px 12px; } .subscribe input[type=email]::placeholder{ color:var(--cream-faint); } .subscribe input[type=email]:focus-visible{ outline:3px dashed var(--gold); outline-offset:2px; } .form-msg{ flex-basis:100%; margin:4px 0 0; font-family:var(--type); font-size:.82rem; color:var(--red-lit); min-height:1em; } /* ======================================================================= FOOTER ======================================================================= */ /* The footer sits directly on the dark room, so its ink here is light. */ .foot{ margin-top:34px; text-align:center; } .foot .rule--fat{ border-top-color:var(--whiskey); border-bottom-color:var(--whiskey); opacity:.8; } .foot__line{ font-family:var(--type); letter-spacing:.06em; color:var(--paper-3); margin:6px 0; } .foot__small{ font-size:.8rem; color:var(--paper-4); } .foot a{ color:var(--whiskey-lit); } .foot a:hover{ color:var(--paper-1); } /* The colophon badges — the room's answer to the Frost page's "MADE WITH NOTEPAD" web-buttons. Little pressed seals on the dark, in whiskey. */ .marks{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:16px 0 4px; } .mark{ font-family:var(--type); font-size:.58rem; letter-spacing:.1em; line-height:1.35; text-align:center; color:var(--whiskey-lit); border:1.5px solid var(--whiskey-deep); background:rgba(232,178,72,.05); padding:7px 10px; box-shadow:2px 2px 0 rgba(0,0,0,.5); } .mark:nth-child(odd){ transform:rotate(-2deg); } .mark:nth-child(even){ transform:rotate(1.5deg); } .mark b{ font-size:.74rem; color:var(--paper-1); letter-spacing:.06em; } /* ======================================================================= RESPONSIVE ======================================================================= */ @media (max-width:720px){ .sheet{ padding:0 12px 48px; } .leaf{ padding:22px 16px 24px; } .victrola{ grid-template-columns:1fr; } .heads{ grid-template-columns:1fr; } .floor{ grid-template-columns:repeat(2,1fr); max-width:none; gap:22px; } .floor__shot img{ height:150px; } .about{ grid-template-columns:1fr; } .about__plate{ max-width:240px; margin:0 auto; } .booking{ grid-template-columns:1fr; } /* On a phone the section title nearly fills the column, so the ink rules that flank it would strike through the letters. Drop them and just centre it. */ .head::before,.head::after{ display:none; } .head span{ padding:0; } /* The filing tabs become one swipeable row instead of a five-deep block. */ .tabs{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; padding:0 4px 2px; } .tab{ flex:0 0 auto; scroll-snap-align:start; } /* Tighter liner notes so the auto-sized flip cards aren't a mile tall. */ .facts{ font-size:.82rem; } .notes{ font-size:.85rem; } /* Pull the corner stamp in so it clears the wordmark. */ .bill{ padding:26px 18px 30px; } .bill__stamp{ width:74px; height:74px; top:8px; right:6px; } .bill__stamp span{ font-size:.74rem; } /* Table → cards, the same pattern the Frost tour table uses. */ .dates thead{ display:none; } .dates, .dates tbody, .dates tr, .dates td{ display:block; width:100%; } .dates tr{ margin-bottom:14px; border:1.5px solid var(--seam); background:linear-gradient(180deg, #351319, #250c11); } .dates td{ border:none; padding:8px 12px; } .dates td::before{ content:attr(data-label) ": "; font-family:var(--type); font-size:.7rem; letter-spacing:.08em; color:var(--red); text-transform:uppercase; } .dates__empty td::before{ content:""; } } /* ======================================================================= REDUCED MOTION Kill every animation and the perspective flip; the flip becomes a swap, the record stops spinning, dust and the crawl stop dead. ======================================================================= */ @media (prefers-reduced-motion: reduce){ .notice__track{ animation:none; } .platter__disc.spinning{ animation:none; } .mote{ animation:none; } #dust{ display:none; } body::after{ animation:none; } .card{ animation:none; } .disc__inner{ transition:none; } .side:hover .side__disc{ transform:none; } .side__disc, .platter__arm{ transition:none; } html{ scroll-behavior:auto; } }