/* =========================================================
   MIMI BOND — Issue 8 — comic-magazine art direction
   ========================================================= */

:root{
  --paper: #f4ede0;
  --paper-shade: #e9dfcd;
  --ink: #0c0c0c;
  --ink-soft: #1c1a18;
  --pop: #ff2d6e;      /* primary neon pop */
  --pop-2: #ffe600;    /* secondary neon */
  --pop-3: #2845ff;    /* spy blue */
  --pop-4: #ff4d1a;    /* orange siren */
  --rule: 3px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- the page paper texture ---------- */
.paper{
  background:
    radial-gradient(circle at 25% 15%, rgba(255,45,110,.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(40,69,255,.05), transparent 45%),
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.4px) 0 0 / 4px 4px,
    var(--paper);
  position: relative;
}
.paper::before{
  content: none;
}

/* ---------- typography ---------- */
.display, h1, h2, h3{
  font-family: "Bowlby One SC", "Archivo Black", system-ui, sans-serif;
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.sfx{
  font-family: "Bangers", "Bowlby One SC", sans-serif;
  letter-spacing: .04em;
  line-height: .92;
}
.script{
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-weight: 400;
}
.mono{
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .03em;
}
em.flag{
  font-style: normal;
  background: var(--ink);
  color: var(--paper);
  padding: 1px 8px 3px;
  font-family: "Bowlby One SC", sans-serif;
}
em.pop{
  font-style: normal;
  background: var(--pop);
  color: var(--ink);
  padding: 1px 8px 3px;
  font-family: "Bowlby One SC", sans-serif;
}

/* ---------- layout ---------- */
.shell{
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 32px 0;
  position: relative;
  z-index: 1;
}
.shell.tight{ max-width: 1180px; }
section{ position: relative; }

/* ---------- top nav: thought bubble ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10001;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  background: linear-gradient(var(--paper) 70%, transparent);
  backdrop-filter: blur(2px);
}
.wordmark{
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 22px;
  letter-spacing: .01em;
}
.wordmark .dot{
  width: 10px; height: 10px;
  background: var(--pop);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-2px);
}
.navbubble{
  position: relative;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 999px;
  padding: 10px 22px;
  box-shadow: 4px 4px 0 var(--ink);
}
.navbubble::after{
  content:"";
  position:absolute;
  bottom: -14px; left: 36px;
  width: 18px; height: 18px;
  background: var(--paper);
  border-right: var(--rule) solid var(--ink);
  border-bottom: var(--rule) solid var(--ink);
  transform: rotate(45deg);
}
.navbubble ul{
  list-style:none; margin:0; padding:0;
  display:flex; gap: 22px;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
}
.navbubble a{
  color: var(--ink);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 3px solid transparent;
  transition: border .15s, color .15s;
}
.navbubble a:hover{ border-bottom-color: var(--pop); color: var(--ink); }
.issue{
  font-family: "Bowlby One SC", sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 999px;
}

/* ---------- comic panels ---------- */
.panel{
  position: relative;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
}
.panel.shadow-pop{ box-shadow: 6px 6px 0 var(--pop); }
.panel.shadow-yel{ box-shadow: 6px 6px 0 var(--pop-2); }
.panel.shadow-blu{ box-shadow: 6px 6px 0 var(--pop-3); }

.panel-img{
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}
.g1 .c1 .panel-img,
.g1 .c8 .panel-img,
.g1 .c9 .panel-img,
.g1 .c7 .panel-img,
.g1 .c3 .panel-img,
.g1 .c2 .panel-img{
  filter: none;
  image-rendering: auto;
}

/* ---------- halftone overlay ---------- */
.halftone{
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(0,0,0,.55) 1.4px, transparent 1.8px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}
.halftone.on{ opacity: var(--halftone, .35); }
.halftone.heavy{ background-size: 5px 5px; opacity: .55; }
.halftone.pop{
  background-image: radial-gradient(var(--pop) 1.4px, transparent 1.8px);
  mix-blend-mode: screen;
}

/* ---------- speech / thought bubbles ---------- */
.bubble{
  position: relative;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 28px;
  padding: 14px 20px 16px;
  box-shadow: 4px 4px 0 var(--ink);
  display: inline-block;
  font-family: "Bangers", sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .04em;
}
.bubble.pop{ background: var(--pop); color: var(--ink); }
.bubble.yel{ background: var(--pop-2); color: var(--ink); }
.bubble.blu{ background: var(--pop-3); color: var(--paper); }
.bubble.black{ background: var(--ink); color: var(--paper); }
.bubble .tail{
  position: absolute;
  width: 22px; height: 22px;
  background: inherit;
  border: var(--rule) solid var(--ink);
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.bubble.tail-bl .tail{ bottom: -14px; left: 28px; }
.bubble.tail-br .tail{ bottom: -14px; right: 28px; }
.bubble.tail-tl .tail{ top: -14px; left: 28px;  transform: rotate(225deg); }
.bubble.tail-tr .tail{ top: -14px; right: 28px; transform: rotate(225deg); }

.thoughtbubble{
  position: relative;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 50%;
  padding: 22px 28px;
  box-shadow: 4px 4px 0 var(--ink);
  display: inline-block;
}
.thoughtbubble::before,
.thoughtbubble::after{
  content:""; position:absolute; left: 28px;
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 50%;
}
.thoughtbubble::before{ width: 18px; height: 18px; bottom: -22px; }
.thoughtbubble::after{ width: 10px; height: 10px; bottom: -36px; left: 22px; }

/* ---------- starburst sticker ---------- */
.burst{
  position: absolute;
  font-family: "Bangers", sans-serif;
  background: var(--pop);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  padding: 18px 22px;
  text-align: center;
  font-size: 28px;
  line-height: 1;
  clip-path: polygon(
    50% 0%, 60% 12%, 75% 5%, 78% 22%, 95% 22%, 86% 36%,
    100% 45%, 88% 55%, 100% 70%, 80% 72%, 80% 90%, 65% 80%,
    55% 100%, 45% 88%, 30% 100%, 28% 80%, 8% 85%, 18% 65%,
    0% 55%, 14% 45%, 0% 30%, 18% 28%, 12% 12%, 30% 18%, 38% 4%
  );
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-8deg);
}
.burst.yel{ background: var(--pop-2); }
.burst.blu{ background: var(--pop-3); color: var(--paper); }

/* ---------- stamps ---------- */
.stamp{
  display: inline-block;
  border: 3px double currentColor;
  padding: 4px 14px;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 14px;
  letter-spacing: .14em;
  transform: rotate(-6deg);
  color: var(--pop);
  opacity: .9;
}
.stamp.redacted{ color: var(--ink); }
.stamp.cleared{ color: var(--pop-3); }

/* ---------- speed lines ---------- */
.speedlines{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      var(--ink) 0 1px,
      transparent 1px 14px
    );
  -webkit-mask-image: radial-gradient(circle at var(--mx,80%) var(--my,40%), transparent 90px, black 380px);
          mask-image: radial-gradient(circle at var(--mx,80%) var(--my,40%), transparent 90px, black 380px);
  pointer-events: none;
}

/* ---------- shared: pill button ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 14px 22px;
  border: var(--rule) solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pop);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--pop); }
.btn.ghost{
  background: var(--paper); color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn.ghost:hover{ box-shadow: 6px 6px 0 var(--ink); }

/* ---------- diagonal section divider ---------- */
.divider{
  margin: 80px 0;
  height: 60px;
  background:
    repeating-linear-gradient(135deg,
      var(--ink) 0 18px,
      var(--paper-shade) 18px 36px);
  border-top: var(--rule) solid var(--ink);
  border-bottom: var(--rule) solid var(--ink);
}

/* =========================================================
   01 COVER
   ========================================================= */
.cover{
  padding: 30px 0 100px;
  min-height: 92vh;
  position: relative;
}
.cover-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  position: relative;
  margin-top: 24px;
}
.cover-left{
  position: relative;
  height: 720px;
  transform: rotate(-3deg) translateX(20px);
  z-index: 1;
}
.cover-right{
  position: relative;
  height: 720px;
  transform: rotate(3deg) translateX(-20px);
  z-index: 1;
  margin-top: 40px;
}
.cover-title{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-2deg);
  z-index: 10;
  text-align: center;
  pointer-events: none;
}
.cover-title h1{
  font-size: clamp(64px, 11vw, 180px);
  color: var(--paper);
  -webkit-text-stroke: 4px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    7px 7px 0 var(--ink),
    11px 7px 0 var(--pop);
  margin: 0;
}
.cover-title .ampersand{
  display: block;
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-size: clamp(26px, 3.6vw, 56px);
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 12px;
  margin-bottom: -10px;
}

.bubble-step{
  position: absolute;
  top: 70px;
  right: 30px;
  z-index: 20;
  font-size: 26px;
  max-width: 280px;
  text-align: center;
  transform: rotate(6deg);
}
.bubble-play{
  position: absolute;
  top: 46%;
  left: -5px;
  z-index: 20;
  font-size: 30px;
  transform: rotate(-5deg);
}
.cover-burst{
  top: 28px; left: 30px;
  z-index: 25;
}
.cover-stamp{
  position: absolute;
  bottom: 40px; right: 60px;
  z-index: 15;
}

.cover-meta{
  display:flex; justify-content: space-between; align-items: flex-end;
  margin-top: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cover-meta .barcode{
  height: 28px;
  display: inline-block;
  background:
    repeating-linear-gradient(90deg,
      var(--ink) 0 1px,
      transparent 1px 3px,
      var(--ink) 3px 5px,
      transparent 5px 9px);
  width: 110px;
}

/* =========================================================
   02 ABOUT
   ========================================================= */
.about{
  padding: 80px 0;
}
.section-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  margin-bottom: 36px;
}
.section-head .num{
  font-family: "Bowlby One SC", sans-serif;
  font-size: 16px;
  background: var(--ink); color: var(--paper);
  padding: 6px 10px;
}
.section-head h2{
  font-size: clamp(46px, 7vw, 96px);
  margin: 0;
  line-height: .85;
}
.section-head .tag{
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}

.dossier{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
}
.dossier-card{
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 28px 30px;
  position: relative;
}
.dossier-card h3{
  font-size: 28px;
  margin: 0 0 16px;
}
.dossier-card p{
  font-size: 16px;
  margin: 0 0 14px;
}
.dossier-card .stamp{ position: absolute; top: 18px; right: 18px; }

.fact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  margin-top: 18px;
}
.fact-grid > div{
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 12px 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .08em;
}
.fact-grid > div b{
  display: block;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  margin-bottom: 2px;
  color: var(--ink-soft);
}

.about-photo{
  position: relative;
  min-height: 660px;
  z-index: auto;
}
.about-photo .panel{
  position: absolute;
}
.about-photo .pa{
  width: 100%; height: 380px;
  top: 0; left: 0;
  transform: rotate(-2deg);
}
.about-photo .pb{
  width: 85%; height: 340px;
  bottom: -40px; right: 0;
  transform: rotate(3deg);
  z-index: 9999;
  isolation: isolate;
}
.about-photo .pb::after{ content:""; position:absolute; inset:0; background: var(--paper); z-index:-1; pointer-events:none; }

/* =========================================================
   03 GALLERY
   ========================================================= */
.gallery{
  padding: 60px 0 100px;
}
.volume{
  margin-top: 96px;
}
.volume-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 10px;
  margin-bottom: 22px;
}
.volume-head h3{
  font-size: clamp(28px, 4vw, 48px);
  margin: 0;
}
.volume-head .meta{
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.volume-head .pill{
  font-family: "Bowlby One SC", sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
}
.volume-head .pill.current{ background: var(--pop); color: var(--ink); }

.grid-comic{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 90px;
  gap: 8px;
}
.grid-comic .panel{ overflow:hidden; }
.grid-comic .panel > .label{
  position: absolute;
  bottom: 10px; left: 12px;
  background: var(--ink); color: var(--paper);
  padding: 3px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .1em;
  z-index: 3;
}

/* layout 1 — current issue */
/* Plate 01 explicit clean — sits in its own layer above the page-wide newsprint overlay */
.gallery, .gallery .shell, .gallery .volume, .gallery .grid-comic { z-index: auto !important; }
.g1 .c1 { z-index: 9999 !important; position: relative !important; isolation: isolate; }
.g1 .c1::after { content:""; position:absolute; inset:0; background: var(--paper); z-index:-1; pointer-events:none; }
.g1 .c9 { z-index: 9999 !important; position: relative !important; isolation: isolate; }
.g1 .c9::after { content:""; position:absolute; inset:0; background: var(--paper); z-index:-1; pointer-events:none; }
.g1 .c5 { z-index: 9999 !important; position: relative !important; isolation: isolate; }
.g1 .c5::after { content:""; position:absolute; inset:0; background: var(--paper); z-index:-1; pointer-events:none; }
.g1 .c8 { z-index: 9999 !important; position: relative !important; isolation: isolate; }
.g1 .c8::after { content:""; position:absolute; inset:0; background: var(--paper); z-index:-1; pointer-events:none; }
.g1 .c2 { z-index: 9999 !important; position: relative !important; isolation: isolate; }
.g1 .c2::after { content:""; position:absolute; inset:0; background: var(--paper); z-index:-1; pointer-events:none; }

.g1 .c1{  grid-column:  1 / span 4; grid-row:  1 / span 6; transform: rotate(-1.5deg); aspect-ratio: 2/3; align-self: start; }
.g1 .c10{ grid-column:  5 / span 4; grid-row:  1 / span 6; transform: rotate( 1deg);   aspect-ratio: 2/3; align-self: start; }
.g1 .c3{  grid-column:  9 / span 4; grid-row:  1 / span 6; transform: rotate(-2deg);   aspect-ratio: 2/3; align-self: start; }

.g1 .c11{ grid-column:  1 / span 4; grid-row:  7 / span 6; transform: rotate( 2deg);   aspect-ratio: 2/3; align-self: start; }
.g1 .c9{  grid-column:  5 / span 4; grid-row:  7 / span 6; transform: rotate(-1deg);   aspect-ratio: 2/3; align-self: start; }
.g1 .c5{  grid-column:  9 / span 4; grid-row:  7 / span 6; transform: rotate( 1.5deg); aspect-ratio: 2/3; align-self: start; }

.g1 .c2{  grid-column:  1 / span 6; grid-row: 13 / span 4; transform: rotate( 1deg);   aspect-ratio: 3/2; align-self: start; }
.g1 .c6{  grid-column:  7 / span 6; grid-row: 13 / span 4; transform: rotate(-1.5deg); aspect-ratio: 3/2; align-self: start; }

.g1 .c12{ grid-column:  1 / span 4; grid-row: 17 / span 6; transform: rotate(-1.5deg); aspect-ratio: 2/3; align-self: start; }
.g1 .c7{  grid-column:  5 / span 4; grid-row: 17 / span 6; transform: rotate( 1deg);   aspect-ratio: 2/3; align-self: start; }
.g1 .c8{  grid-column:  9 / span 4; grid-row: 17 / span 6; transform: rotate( 1.5deg); aspect-ratio: 2/3; align-self: start; }

/* layout 2 — vol 2 */
.g2 .c1{ grid-column: 1 / span 4; grid-row: 1 / span 4; transform: rotate(1deg); }
.g2 .c2{ grid-column: 5 / span 4; grid-row: 1 / span 5; transform: rotate(-1deg); }
.g2 .c3{ grid-column: 9 / span 4; grid-row: 1 / span 4; transform: rotate(1.5deg); }
.g2 .c4{ grid-column: 1 / span 4; grid-row: 5 / span 5; transform: rotate(-1deg) scale(0.92); aspect-ratio: 2/3; align-self: start; transform-origin: top left; }
.g2 .c5{ grid-column: 9 / span 4; grid-row: 5 / span 5; transform: rotate(-2deg) scale(0.92); aspect-ratio: 2/3; align-self: start; transform-origin: top right; }
.g2 .c6{ grid-column: 5 / span 4; grid-row: 6 / span 2; transform: rotate(1deg); }
.g2 .c7{ grid-column: 5 / span 4; grid-row: 8 / span 2; transform: rotate(-1deg); aspect-ratio: 7/3; align-self: start; }

/* layout 3 — vol 1 */
.g3 .c1{ grid-column: 1 / span 3; grid-row: 1 / span 5; transform: rotate(-1deg); aspect-ratio: 2/3; align-self: start; }
.g3 .c3{ grid-column: 4 / span 3; grid-row: 1 / span 5; transform: rotate(1deg); aspect-ratio: 2/3; align-self: start; }
.g3 .c5{ grid-column: 7 / span 3; grid-row: 1 / span 5; transform: rotate(-1deg); aspect-ratio: 2/3; align-self: start; }
.g3 .c6{ grid-column: 10 / span 3; grid-row: 1 / span 5; transform: rotate(1deg); aspect-ratio: 2/3; align-self: start; }

/* =========================================================
   04 CONSIDERATION (rates casefile)
   ========================================================= */
.consideration{
  padding: 90px 0;
  background: var(--ink);
  color: var(--paper);
}
.consideration .section-head h2,
.consideration .section-head .tag{ color: var(--paper); }
.consideration .section-head .num{ background: var(--pop); color: var(--ink); }

.casefile{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
}
.rate-card{
  background: var(--paper);
  color: var(--ink);
  border: var(--rule) solid var(--paper);
  box-shadow: 6px 6px 0 var(--pop);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.rate-card .head{
  background: var(--ink); color: var(--paper);
  padding: 14px 20px;
  font-family: "Bowlby One SC", sans-serif;
  letter-spacing: .06em;
  font-size: 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.rate-card .head .tag{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  background: var(--pop); color: var(--ink);
  padding: 3px 8px;
}
.rate-card .body{ padding: 16px 22px 22px; }
.rate-card table{ width: 100%; border-collapse: collapse; font-family: "JetBrains Mono", monospace; font-size: 14px; }
.rate-card table tr{ border-bottom: 1px dashed rgba(0,0,0,.25); }
.rate-card table tr:last-child{ border-bottom: none; }
.rate-card table td{ padding: 10px 0; }
.rate-card table td:first-child{ letter-spacing: .04em; padding-right: 14px; }
.rate-card table td:last-child{
  text-align: right;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 16px;
  white-space: nowrap;
  vertical-align: top;
  padding-top: 12px;
}
.rate-card .rate-line{
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: lowercase;
}
.rate-card .rate-quote{
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
  margin-top: 4px;
  color: rgba(0,0,0,.72);
  text-transform: none;
}

.consider-notes{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 22px;
  margin-top: 28px;
}
.note-strip{
  background: var(--paper); color: var(--ink);
  border: var(--rule) solid var(--paper);
  padding: 20px 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
}
.note-strip b{ font-family: "Bowlby One SC", sans-serif; font-size: 15px; letter-spacing:.04em; }
.note-strip p{ margin: 6px 0; }
.note-photo{
  position: relative;
}

/* =========================================================
   05 ETIQUETTE / FAQ
   ========================================================= */
.etiquette{
  padding: 90px 0;
}
.etiquette-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}
.etiq-card{
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 6px 6px 0 var(--pop-3);
  padding: 26px 30px;
}
.etiq-card ol{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rules;
}
.etiq-card ol li{
  counter-increment: rules;
  position: relative;
  padding: 12px 0 12px 56px;
  border-bottom: 2px dashed rgba(0,0,0,.18);
  font-size: 16px;
}
.etiq-card ol li:last-child{ border-bottom: none; }
.etiq-card ol li::before{
  content: "№" counter(rules);
  position: absolute;
  left: 0; top: 12px;
  font-family: "Bowlby One SC", sans-serif;
  background: var(--ink); color: var(--paper);
  padding: 4px 8px;
  font-size: 13px;
  letter-spacing: .04em;
}

.etiq-side{
  position: relative;
  aspect-ratio: 4/5;
  min-height: 0;
}

.faq{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.faq-item{
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  user-select: none;
  transition: box-shadow .12s, transform .12s;
}
.faq-item:hover{ box-shadow: 6px 6px 0 var(--pop); transform: translate(-2px,-2px); }
.faq-item.open{ box-shadow: 6px 6px 0 var(--pop); }
.faq-q{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.05;
}
.faq-q .twirl{
  width: 28px; height: 28px;
  background: var(--ink); color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Bangers", sans-serif;
  font-size: 22px;
  flex-shrink: 0;
  transition: transform .25s;
}
.faq-item.open .twirl{ transform: rotate(45deg); background: var(--pop); color: var(--ink); }
.faq-a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .25s;
  padding: 0 20px;
  font-size: 15px;
  line-height: 1.5;
}
.faq-item.open .faq-a{
  max-height: 360px;
  padding: 0 20px 18px;
}

/* =========================================================
   06 CONTACT
   ========================================================= */
.contact{
  padding: 90px 0 60px;
}
.contact-grid{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.contact-card{
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 28px 30px;
  position: relative;
}
.contact-card h3{
  font-size: 36px;
  margin: 0 0 14px;
}
.contact-card .lead{
  font-family: "DM Serif Display", serif;
  font-style: italic;
  font-size: 22px;
  margin: 0 0 18px;
}
.contact-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.contact-form .full{ grid-column: 1 / -1; }
/* honeypot — invisible to humans, reachable by bots */
.contact-form .hp-field{
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.contact-form label{
  display: block;
  font-family: "Bowlby One SC", sans-serif;
  font-size: 11px;
  letter-spacing: .12em;
  margin-bottom: 6px;
}
.contact-form input,
.contact-form textarea{
  width: 100%;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
  outline: none;
  transition: box-shadow .12s, transform .12s;
}
.contact-form input:focus,
.contact-form textarea:focus{
  box-shadow: 4px 4px 0 var(--pop);
  transform: translate(-2px,-2px);
}

.contact-side{
  position: relative;
}
.contact-side .panel{
  position: absolute; width: 80%; height: 80%; top: 10%; left: 10%;
  transform: rotate(-3deg);
}

/* =========================================================
   FOOTER — silhouette on heartbeat
   ========================================================= */
.footer{
  margin-top: 80px;
  background: var(--ink);
  color: var(--paper);
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.footer-meta{
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
  padding: 0 32px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 900px){
  .topbar{ padding: 12px 18px; }
  .navbubble{ display:none; }
  .shell{ padding: 18px 18px 0; }
  .cover-grid{ grid-template-columns: 1fr; }
  .cover-left, .cover-right{ height: 460px; }
  .cover-title h1{ font-size: 90px; -webkit-text-stroke: 3px var(--ink); text-shadow: 4px 4px 0 var(--ink), 7px 4px 0 var(--pop); }
  .dossier, .casefile, .consider-notes, .etiquette-top, .contact-grid, .faq{ grid-template-columns: 1fr; }
  .grid-comic{ grid-auto-rows: 60px; gap: 12px; }
  .g1 .c1, .g1 .c2, .g1 .c3, .g1 .c4, .g1 .c5, .g1 .c6,
  .g1 .c7, .g1 .c8, .g1 .c9, .g1 .c10, .g1 .c11, .g1 .c12,
  .g2 .c1, .g2 .c2, .g2 .c3, .g2 .c4, .g2 .c5, .g2 .c6, .g2 .c7,
  .g3 .c1, .g3 .c2, .g3 .c3, .g3 .c4, .g3 .c5, .g3 .c6{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    transform: none !important;
    transform-origin: center !important;
    aspect-ratio: 3 / 4;
    align-self: auto !important;
    width: 100%;
    max-width: 100%;
  }
  /* Force the floating bits (burst/bubble/stamp/face-cover) back inside the viewport */
  .cover-title{ position: static !important; transform: none !important; padding: 8px 0 24px; text-align: left; }
  .cover-bubble, .cover-stamp, .cover-burst, .cover-side-burst{ display: none !important; }
}

/* phone-specific tweaks below the tablet break */
@media (max-width: 560px){
  .shell{ padding: 14px 14px 0; }
  .topbar{ padding: 10px 14px; }
  .topbar nav{ display: none; }

  /* section heads stack — never let the big display headline get squeezed into a 1fr middle column */
  .section-head{ grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 24px !important; }
  .section-head h2{
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: .92 !important;
    /* don't break mid-word — many of these headings use a <br/> as the only separator
       between words ("manners<br>you"), so word-break would glue them together. */
  }
  .section-head .num{ justify-self: start; }
  .section-head .tag{ justify-self: start; }

  .cover-left, .cover-right{ height: 340px; }
  .cover-title h1{ font-size: 64px; -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink), 5px 3px 0 var(--pop); }

  /* contact form — single column on phones */
  .contact-form{ grid-template-columns: 1fr; gap: 12px; }
  .contact-form .full{ grid-column: 1 / -1; }

  /* generic display headings come down a notch */
  .display, h2.display{ font-size: 44px !important; line-height: .95; }
  .lead{ font-size: 17px; }

  /* gallery — natural height, no aspect-ratio override, just stack normally */
  .grid-comic{ display: flex !important; flex-direction: column; gap: 16px; grid-auto-rows: auto; }
  .grid-comic .panel{
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    transform: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* the wide landscape / banner plates look better with their own ratio */
  .g1 .c2, .g1 .c6, .g2 .c7{ aspect-ratio: 4 / 3 !important; }

  /* hide decorative absolute-positioned chrome that ends up off-screen */
  .footer-ekg{ display: none; }
  /* contact-side decorations are absolutely positioned with desktop coords —
     on mobile they overlap the form's send button and the side photo. Hide them. */
  .contact-side{ display: none !important; }

  /* about-photo: hard-reset and stack the two photos */
  .about-photo{ display: flex !important; flex-direction: column; gap: 16px; min-height: 0 !important; height: auto !important; }
  .about-photo .panel,
  .about-photo .pa,
  .about-photo .pb{
    position: static !important;
    width: 100% !important;
    height: 320px !important;
    transform: none !important;
    inset: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    /* iOS Safari + backdrop-filter (.topbar) bug: panels without their own
       stacking context skip paint until interaction. Force a paint layer. */
    isolation: isolate;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }
}