/*
Theme Name: Knock Society
Theme URI: https://knocksociety.com
Author: Starus and Co.
Description: Apparel for people who knock doors. Landing sequence, polaroid wall, and a fully editable front page. Every piece of copy and every image is editable under Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: knock-society
*/

/* ============================================
   DESIGN TOKENS
   ============================================ */
:root{
  --paper: #FFFFFF;
  --ink: #0D0910;
  --knock-pink: #DE95DD;
  --pink-deep: #C972BB;
  --pink-wash: #F7E9F6;
  --cork: #B8916A;
  --ink-60: rgba(13,9,16,0.6);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-utility: 'Inter', -apple-system, sans-serif;
  --font-hand: 'Caveat', cursive;

  --rule: 1px solid var(--ink);
  --land-footer-h: 64px;
  --land-header-h: 132px;
}
@media (max-width: 640px){ :root{ --land-footer-h: 56px; --land-header-h: 104px; } }

/* ============================================
   BASE
   ============================================ */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-utility);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }
button{ font-family: inherit; cursor: pointer; }
h1,h2,h3,p{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }

.font-display{ font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; }
.label-utility{
  text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 11px; font-weight: 600; color: var(--ink-60);
}
.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  padding: 12px 20px; z-index: 10000; border: var(--rule);
}
.skip-link:focus{ left: 12px; top: 12px; }

/* Buttons: pink is the button color */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 30px;
  background: var(--knock-pink); color: var(--ink);
  border: none; border-radius: 999px;
  font-size: 13px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.btn:hover{ background: var(--pink-deep); }
.btn:active{ transform: scale(0.98); }
.btn--ghost{
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
}
.btn--ghost:hover{ background: var(--ink); color: var(--paper); }
.textlink{
  font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}

/* ============================================
   LANDING SEQUENCE
   ============================================ */
#land{
  position: fixed; inset: 0; z-index: 9999;
  /* paper, so an elastic pull reads as the footer stretching rather than
     opening a hole onto a dark backdrop */
  background: var(--paper);
  overflow: hidden;
}
#land.gone{ display: none; }

/* The whole video frame stays visible, caption included, at its own aspect
   ratio. A blurred, over scaled copy of the same footage fills whatever
   margin is left, so the landing reads edge to edge instead of letterboxed
   and the fill still matches once the shot moves through into open sky. */
.land-stage{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: var(--land-footer-h);
  overflow: hidden;
  background: linear-gradient(to bottom, #1f6586 0%, #5b88a0 60%, #7294a0 100%);
}
/* blurred header band carrying the mark, centred over the sky */
.land-header{
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--land-header-h);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 4;
  pointer-events: none;
}
.land-header img{
  height: 88px; width: auto;
  filter: brightness(0) invert(1);   /* white mark against the sky */
  opacity: 0.95;
}

/* The door itself never moves. Only this layer scrolls, and it can travel
   exactly the height of the outro, so the footage stays on screen. */
.land-scroll{
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 2;
}
.land-scroll::-webkit-scrollbar{ width: 0; height: 0; }
.land-scroll{ scrollbar-width: none; }
.land-spacer{
  height: calc(100vh - var(--land-footer-h));
  height: calc(100dvh - var(--land-footer-h));
  pointer-events: none;
}

/* the footage sits flush on paper, and the rest of the footer is one
   scroll away underneath it */
.land-outro{
  background: var(--paper);
  border-top: var(--rule);
}
.land-outro-links{
  height: var(--land-footer-h);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 5vw, 44px);
  padding: 0 16px;
  border-bottom: 1px solid rgba(13,9,16,0.12);
}
.land-outro-links a{
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); text-decoration: none;
  padding: 8px 2px;
}
.land-outro-links a:hover{ color: var(--pink-deep); text-decoration: underline; text-underline-offset: 5px; }

.land-outro-body{
  max-width: 760px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; padding: 36px 28px 30px;
}
.outro-col h4{
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 600; color: var(--ink-60); margin: 0 0 14px;
}
.outro-col ul{ display: flex; flex-direction: column; gap: 10px; }
.outro-col a{ font-size: 14px; font-weight: 500; text-decoration: none; }
.outro-col a:hover{ color: var(--pink-deep); text-decoration: underline; text-underline-offset: 4px; }
.land-outro-base{
  max-width: 1240px; margin: 0 auto;
  border-top: 1px solid rgba(13,9,16,0.12);
  padding: 16px 28px 20px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-60);
}
@media (max-width: 820px){
  .land-outro-body{ grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px 20px 24px; }
}
@media (max-width: 420px){
  /* stays two up: a single column grows tall enough to reach the knock button */
  .land-outro-links a{ font-size: 10px; letter-spacing: 0.1em; }
  .land-outro-body{ gap: 22px; padding: 22px 18px 18px; }
}
.land-video-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);   /* just enough overscan to hide the blur bleed */
  filter: blur(30px);
}
#landVideo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: 1;
}

/* Retro knock button: tactile, beveled, warm inner glow */
.knock-btn{
  position: fixed;       /* stays put while the outro scrolls past it */
  /* starting guess only: JS repositions this onto the door in the footage,
     which is the one placement that survives every viewport shape */
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 148px; height: 148px;
  min-width: 56px; min-height: 56px;
  border-radius: 50%;
  border: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
  background:
    radial-gradient(circle at 35% 30%, #F7E9F6 0%, #DE95DD 45%, #C972BB 100%);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.75),
    inset 0 -5px 10px rgba(120,50,110,0.45),
    0 0 34px 6px rgba(255,255,255,0.5);
  animation: knock-pulse 2100ms ease-in-out infinite;
}
.knock-btn:hover{
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.8),
    inset 0 -5px 10px rgba(120,50,110,0.5),
    0 0 52px 14px rgba(255,255,255,0.75);
}
.knock-btn:active{ transform: translate(-50%, -50%) scale(0.96); }
/* the knock rhythm: two quick pulses, ~900ms rest, loop */
@keyframes knock-pulse{
  0%   { box-shadow: inset 0 3px 6px rgba(255,255,255,0.75), inset 0 -5px 10px rgba(120,50,110,0.45), 0 0 30px 4px rgba(255,255,255,0.42); }
  7%   { box-shadow: inset 0 3px 6px rgba(255,255,255,0.9),  inset 0 -5px 10px rgba(120,50,110,0.45), 0 0 66px 20px rgba(255,255,255,0.95); }
  14%  { box-shadow: inset 0 3px 6px rgba(255,255,255,0.75), inset 0 -5px 10px rgba(120,50,110,0.45), 0 0 30px 4px rgba(255,255,255,0.42); }
  21%  { box-shadow: inset 0 3px 6px rgba(255,255,255,0.9),  inset 0 -5px 10px rgba(120,50,110,0.45), 0 0 66px 20px rgba(255,255,255,0.95); }
  28%  { box-shadow: inset 0 3px 6px rgba(255,255,255,0.75), inset 0 -5px 10px rgba(120,50,110,0.45), 0 0 30px 4px rgba(255,255,255,0.42); }
  100% { box-shadow: inset 0 3px 6px rgba(255,255,255,0.75), inset 0 -5px 10px rgba(120,50,110,0.45), 0 0 30px 4px rgba(255,255,255,0.42); }
}
#land.playing .knock-btn{
  opacity: 0; pointer-events: none;
  transition: opacity 400ms ease;
}

.land-fade{
  position: absolute; inset: 0; z-index: 4;
  background: var(--paper);
  opacity: 0; pointer-events: none;
  transition: opacity 420ms ease-out;
}
#land.fading .land-fade{ opacity: 1; }
#land.fading-fast .land-fade{ transition-duration: 300ms; opacity: 1; }

.land-skip{
  position: absolute; top: 20px; right: 20px; z-index: 5;
  background: transparent; border: none;
  color: rgba(255,255,255,0.8);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  padding: 12px 14px; min-height: 44px;
}
.land-skip:hover{ color: #fff; }
.land-mute{
  position: absolute; top: 20px; left: 20px; z-index: 5;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.8);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  padding: 9px 14px; min-height: 44px; border-radius: 999px;
}
.land-mute[aria-pressed="true"]{ color: #fff; border-color: #fff; }

@media (prefers-reduced-motion: reduce){
  .knock-btn{ animation: none; }
}
@media (max-width: 640px){
  .knock-btn{ width: 120px; height: 120px; font-size: 18px; }
  .land-header img{ height: 56px; }
  .land-mute{ font-size: 10px; padding: 8px 10px; letter-spacing: 0.06em; }
  .land-skip{ font-size: 11px; padding: 12px 10px; }
}
/* On screens narrower than the footage the letter fit would leave a huge
   blurred band, so fill instead. The caption and door are centred, so the
   small horizontal crop never reaches either. */
@media (max-aspect-ratio: 4/5){
  #landVideo{ object-fit: cover; }
}

body:not(.js) #land{ display: none; }
/* page cannot scroll behind the landing overlay */
html.land-lock, html.land-lock body{ overflow: hidden; height: 100%; }

/* ============================================
   NAV
   ============================================ */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
}
/* The peaks and valleys mark sits ahead of the wordmark and reads as
   possession: the peaks and valleys' Knock Society. */
.nav-wordmark{ display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-stack{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand-mark{ height: 30px; width: auto; display: block; flex: none; }
.nav-logo{ height: 46px; width: auto; display: block; }
/* the line sits under the mark, small and wide, in both the nav and the footer */
.brand-tagline{
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-60); line-height: 1;
}
@media (max-width: 620px){
  .nav-logo{ height: 36px; }
  .nav-wordmark{ gap: 9px; }
  .nav-wordmark .brand-mark{ height: 23px; }
  .nav-wordmark .brand-tagline{ font-size: 7px; letter-spacing: 0.16em; }
}
.nav-links{ display: flex; align-items: center; gap: 28px; }
.nav-links a{ text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-links a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.nav-cart{
  display: inline-flex; align-items: center;
  background: var(--knock-pink); border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700; text-decoration: none;
}
.nav-cart:hover{ background: var(--pink-deep); }
@media (max-width: 760px){ .nav-links a{ display: none; } }

/* ============================================
   LAYOUT
   ============================================ */
.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section{ padding: 110px 0; }
.hairline{ border-top: var(--rule); }
.section-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 48px; flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(30px, 3.6vw, 44px); }

/* ============================================
   HERO: background layer, content plane, product overlay
   ============================================ */
.hero{
  position: relative;
  min-height: 86vh;
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center 30%;
}
.hero-bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,9,16,0.25), rgba(13,9,16,0) 55%);
}
.hero-inner{
  position: relative; z-index: 2;
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  align-items: center; gap: 48px;
}
.hero-plane{
  background: rgba(255,255,255,0.94);
  padding: 56px 48px;
  display: flex; flex-direction: column; gap: 22px;
}
.hero-plane h1{ font-size: clamp(34px, 4.6vw, 62px); line-height: 0.95; }
.hero-sub{ font-size: 17px; color: var(--ink-60); font-weight: 500; }
.hero-ctas{ display: flex; align-items: center; gap: 24px; margin-top: 6px; flex-wrap: wrap; }
.hero-product{
  justify-self: end; align-self: end;
  margin-bottom: 6vh;
  background: var(--paper);
  padding: 18px 18px 14px;
  width: clamp(190px, 24vw, 300px);
  box-shadow: 0 24px 60px rgba(13,9,16,0.25);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.hero-product img{ width: 100%; }
.hero-product-meta{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding-top: 12px; font-size: 14px; font-weight: 600;
}
/* below the two column threshold the plane stacks and the product
   becomes a compact row card rather than disappearing */
@media (max-width: 820px){
  .hero{ min-height: 76vh; align-items: flex-end; }
  .hero-inner{ grid-template-columns: 1fr; gap: 0; padding-bottom: 32px; }
  .hero-plane{ padding: 36px 24px; }
  .hero-product{
    justify-self: stretch; align-self: auto;
    margin-bottom: 0; width: auto;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px; box-shadow: none;
    border-top: 1px solid rgba(13,9,16,0.12);
  }
  .hero-product img{ width: 68px; height: 68px; object-fit: cover; flex: none; }
  .hero-product-meta{ flex: 1; padding-top: 0; }
}

/* ============================================
   THE PEAKS AND THE VALLEYS
   ============================================ */
.peaks-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
}
.peaks-col{ padding: 0 48px 0 0; }
/* the hairline between the two columns is the divider, matching the rest
   of the site rather than introducing a new rule treatment */
.peaks-col + .peaks-col{
  border-left: var(--rule);
  padding: 0 0 0 48px;
}
.peaks-col h3{
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em;
  font-weight: 700; color: var(--pink-deep); margin-bottom: 16px;
}
.peaks-col p{ font-size: 17px; max-width: 42ch; }
.peaks-close{
  margin-top: 56px; padding-top: 28px;
  border-top: var(--rule);
  font-size: 17px; font-weight: 500; max-width: 68ch;
}
@media (max-width: 760px){
  .peaks-grid{ grid-template-columns: 1fr; }
  .peaks-col{ padding: 0 0 28px; }
  .peaks-col + .peaks-col{
    border-left: none; border-top: var(--rule);
    padding: 28px 0 0;
  }
  .peaks-close{ margin-top: 36px; }
}

/* ============================================
   THE DROP
   ============================================ */
.drop{ background: var(--pink-wash); }
.drop-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.product-card{ display: block; text-decoration: none; color: inherit; }
.product-media{
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: var(--paper);
}
.product-media img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 500ms ease, transform 5s ease;
}
.product-media img.img-alt{ opacity: 0; transform: scale(1.07); }
.product-card:hover .product-media img.img-base{ opacity: 0; }
.product-card:hover .product-media img.img-alt{ opacity: 1; }
.product-info{
  padding-top: 14px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.product-info h3{ font-size: 15px; font-weight: 600; }
.product-price{ font-size: 15px; color: var(--ink-60); }
@media (max-width: 760px){ .drop-grid{ grid-template-columns: 1fr; } }

/* ============================================
   POLAROID WALL
   ============================================ */
/* keeps the .wrap side padding: a bare `padding: 110px 0 0` would zero it and
   push the heading flush against the screen edge */
.wall-intro{ padding: 110px 24px 0; }
#wall{ position: relative; }
.wall-scene{ height: 400vh; position: relative; }
.wall-sticky{
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: var(--cork);
  perspective: 1200px;
  perspective-origin: 50% 45%;
}
/* One backdrop for the whole section, on its own layer rather than on the
   scrolling element, so it can never tile or repeat per photo.
   The porch this brand is actually about: a door buried in no soliciting signs. */
.wall-bg{
  position: absolute; inset: 0;
  background: var(--cork) url('assets/wall-signs.jpg') center / cover no-repeat;
  z-index: 0;
}
/* the photograph is mostly white brick, which would swallow the white polaroid
   frames, so it is dimmed back to a backdrop */
.wall-bg::after{
  content: '';
  position: absolute; inset: 0;
  background: rgba(13,9,16,0.52);
}
.wall-cam{
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  z-index: 1;
}
.pframe{
  position: absolute;
  /* scales with the screen so the same 3D wall works on a phone */
  width: clamp(190px, 62vw, 340px);
  background: #FDFDFB;
  padding: 10px 10px 44px;
  box-shadow: 0 10px 24px rgba(30,15,5,0.4);
  will-change: transform, opacity;
}
.pframe::before{ /* pin */
  content: "";
  position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f66, #a11);
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  z-index: 2;
}
.pframe img{
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
}
.pframe.gs img{ filter: grayscale(1) contrast(1.05); }
.pframe figcaption{
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-family: var(--font-hand);
  font-size: 21px; font-weight: 600; color: #3a3430;
}
.pframe.blurred{ filter: blur(3px); }
.pframe.blurred.gs{ filter: blur(3px); } /* grayscale carried on img */

.wall-hint{
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  background: rgba(253,253,251,0.9);
  padding: 8px 18px; border-radius: 999px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--ink);
}
.wall-cta{ padding: 64px 0 110px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* Phones run the same 3D wall, just smaller. The caption and the pin shrink
   with the frame, and the depth blur comes off because it is the expensive
   part and reads as noise at this size. */
@media (max-width: 760px){
  .pframe{ padding: 8px 8px 34px; }
  .pframe figcaption{ font-size: 16px; bottom: 6px; }
  .pframe::before{ width: 11px; height: 11px; margin-left: -5.5px; top: -5px; }
  .pframe.blurred{ filter: none; }
  .wall-hint{ bottom: 16px; font-size: 10px; }
}

/* Reduced motion only: no scroll driven depth, so the wall becomes a plain
   vertical stack with the backdrop pinned behind it. */
.wall-stack-mode .wall-scene{ height: auto; }
.wall-stack-mode .wall-sticky{
  position: static; height: auto; overflow: visible; perspective: none;
  padding: 60px 0;
}
/* pinned so one image covers the section instead of tiling down it */
.wall-stack-mode .wall-bg{
  position: sticky; top: 0;
  height: 100vh;
  margin-bottom: -100vh;
}
.wall-stack-mode .wall-cam{
  position: static; transform-style: flat;
  display: flex; flex-direction: column; align-items: center; gap: 44px;
}
.wall-stack-mode .pframe{
  position: static;
  width: min(360px, 86vw);
  transform: rotate(var(--r, 0deg)) !important;
  opacity: 1 !important;
  transition: transform 500ms ease;
}
.wall-stack-mode .pframe.blurred{ filter: none; }
.wall-stack-mode .pframe.gs.blurred img{ filter: grayscale(1) contrast(1.05); }
.wall-stack-mode .pframe.msnap{ transform: rotate(0deg) scale(1.05) !important; }
.wall-stack-mode .pframe.mhide{ display: none; }
.wall-stack-mode .wall-hint{ display: none; }
body:not(.js) .pframe{ position: static; transform: rotate(var(--r, 0deg)); }

/* ============================================
   THE BULLETIN
   ============================================ */
.bulletin-sub{
  max-width: 52ch; color: var(--ink-60); margin-top: -28px; margin-bottom: 40px;
}
.bulletin-board{
  /* cork, the material the polaroid wall used before it took the porch photo */
  background-color: var(--cork);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='5' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.19 0 0 0 0 0.07 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, rgba(255,235,200,0.20), transparent 60%),
    radial-gradient(ellipse at 75% 85%, rgba(70,42,18,0.32), transparent 55%);
  background-size: 300px 300px, cover, cover;
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: 64px 24px 72px;
}
.bulletin-grid{
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
/* same physical logic as a polaroid: pinned, slightly rotated, contact shadow */
.bcard{
  position: relative;
  background: #FDFDFB;
  padding: 30px 26px 22px;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 10px 24px rgba(30,15,5,0.4);
}
.bcard::before{ /* pin */
  content: "";
  position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f66, #a11);
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  z-index: 2;
}
.bcard-story{ font-size: 16px; line-height: 1.55; }
.bcard-meta{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(13,9,16,0.12);
}
.bcard-who{
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-60);
}
/* location stamps use the same hand as the polaroid captions */
.bcard-where{ font-family: var(--font-hand); font-size: 20px; font-weight: 600; color: #3a3430; }
.bulletin-cta{ display: flex; justify-content: center; margin-top: 56px; }
@media (max-width: 900px){
  .bulletin-grid{ grid-template-columns: 1fr 1fr; gap: 34px 26px; }
}
@media (max-width: 620px){
  .bulletin-grid{ grid-template-columns: 1fr; gap: 30px; }
  .bulletin-board{ padding: 48px 20px 56px; }
  .bcard{ transform: rotate(0deg); }
}

/* ============================================
   ABOUT
   ============================================ */
.about-band{
  position: relative; min-height: 62vh;
  display: flex; align-items: center;
  overflow: hidden; background: var(--ink);
}
.about-band > img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.85;
}
.about-band::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,9,16,0.55), rgba(13,9,16,0.1) 65%);
}
.about-band h2{
  position: relative; z-index: 1;
  color: var(--paper);
  font-size: clamp(34px, 5vw, 58px);
  max-width: 16ch;
  padding: 0 48px;
}
/* keeps the .wrap side padding: a bare `padding: 84px 0` zeroes it and the
   copy runs into the screen edge on a phone */
.about-body{ padding: 84px 24px; }
.about-body .prose{
  max-width: 60ch; margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
}
.about-facts{ margin: 64px auto 0; max-width: 60ch; }
.about-fact{
  display: flex; justify-content: space-between; gap: 24px;
  padding: 18px 0; border-top: var(--rule); font-size: 14px;
}
.about-fact:last-child{ border-bottom: var(--rule); }
.about-fact span:last-child{ font-weight: 700; text-align: right; }
.about-close{
  margin: 64px auto 0; max-width: 60ch;
  display: flex; justify-content: center;
}

/* ============================================
   JOURNAL
   ============================================ */
.journal-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.journal-card{ text-decoration: none; color: inherit; display: block; }
.journal-media{ aspect-ratio: 4/3; overflow: hidden; margin-bottom: 16px; }
.journal-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease;
}
.journal-card:hover .journal-media img{ transform: scale(1.03); }
.journal-card h3{ font-size: 22px; margin-bottom: 8px; }
.journal-card p{ font-size: 15px; color: var(--ink-60); margin-bottom: 10px; }
.journal-date{
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-60);
}
@media (max-width: 900px){ .journal-grid{ grid-template-columns: 1fr; } }

/* ============================================
   FOOTER
   ============================================ */
.footer{ border-top: var(--rule); padding: 80px 0 32px; }
.footer-top{
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 72px;
}
.footer-top > *{ min-width: 0; }
.footer-logo{ width: min(340px, 72%); height: auto; display: block; }
.footer-logo-lockup{ display: flex; align-items: center; gap: 18px; }
.footer-logo-lockup .brand-mark{ height: 54px; }
.footer-logo-lockup .brand-stack{ display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-logo-lockup .brand-tagline{ font-size: 11px; letter-spacing: 0.24em; }
@media (max-width: 620px){
  .footer-logo-lockup{ gap: 12px; }
  .footer-logo-lockup .brand-mark{ height: 40px; }
  .footer-logo-lockup .brand-tagline{ font-size: 9px; letter-spacing: 0.18em; }
}
.footer-col h4{
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 16px;
}
.footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ text-decoration: none; font-size: 14px; }
.footer-col a:hover{ text-decoration: underline; }
.footer-newsletter{ display: flex; gap: 10px; margin-top: 20px; max-width: 360px; }
.footer-newsletter input{
  flex: 1; min-height: 48px; border: var(--rule); border-radius: 999px;
  padding: 0 18px; font-family: var(--font-utility); font-size: 14px;
}
.footer-newsletter .btn{ padding: 13px 24px; }
.footer-bottom{
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 28px; border-top: var(--rule);
  font-size: 12px; color: var(--ink-60);
}
@media (max-width: 860px){
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child{ grid-column: 1 / -1; }
}
@media (max-width: 480px){ .footer-top{ grid-template-columns: 1fr; } }

/* ============================================
   SUBMISSION MODAL
   ============================================ */
.modal-backdrop{
  position: fixed; inset: 0; background: rgba(13,9,16,0.6); z-index: 500;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.open{ display: flex; }
.modal{ background: var(--paper); max-width: 480px; width: 100%; padding: 36px; }
.modal h3{ font-size: 24px; margin-bottom: 8px; }
.modal p{ font-size: 14px; color: var(--ink-60); margin-bottom: 20px; }
.modal label{
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; margin: 16px 0 6px;
}
.modal input, .modal textarea{
  width: 100%; border: var(--rule); padding: 10px 14px;
  font-family: var(--font-utility); font-size: 14px; min-height: 44px;
}
.modal textarea{ min-height: 80px; resize: vertical; }
.modal-optional{
  text-transform: none; letter-spacing: 0; font-weight: 500;
  color: var(--ink-60); font-size: 11px; margin-left: 6px;
}
/* the form got taller with the story field, so let it scroll on short screens */
.modal{ max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-actions{ display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.modal-close{
  background: none; border: none; float: right;
  font-size: 22px; min-height: 44px; min-width: 44px;
}