/* =========================
   Global / Base
   ========================= */
html, body { max-width: 100%; overflow-x: hidden; } /* stop sideways scroll */

body {
  background: #2cb253;
  font-family: 'Arial Narrow', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Backgrounds per page */
body.home-page{
  background-image: url("eltingville background green.png");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
body.fanart-page{
  background-image: url("crumpled paper green.png");
  background-repeat: repeat;
  background-size: auto;
}
.support-wall {
  background-image: url("cork board green.png");
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
}

/* =========================
   Header / Nav
   ========================= */
header {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0 0;
}
.header-title {
  font-size: 2.5em;
  font-style: italic;
  margin-left: 12px;
  font-family: 'TW Cen MT Condensed', 'Arial Narrow', Arial, sans-serif;
}
nav a {
  color: #fff;
  margin: 0 18px;
  font-size: 1.7em;
  font-style: italic;
  text-decoration: underline;
  font-family: inherit;
}
nav a:focus, nav a:hover { color: #ffde3c; }

/* =========================
   Layout wrappers
   ========================= */
.content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 32px 0 0 0;
  gap: 32px;
}
.sidebar-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  margin-top: 0;
}
.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 420px;
  min-width: 300px;
  max-width: 450px;
}

/* =========================
   GUIDE (slider)
   ========================= */
.guide-area {
  position: relative;
  width: 1200px;
  height: 430px;
  margin: 18px auto 32px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-sizing: border-box;
  background: none;
  overflow: visible;
}

.guide-slider { width: 100%; height: 100%; display: flex; align-items: stretch; position: relative; z-index: 2; }

.guide-slide {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s;
  z-index: 1;
  position: absolute;
  left: 0; top: 0;
  background: none;
  pointer-events: none;
}
.guide-slide.active { opacity: 1; z-index: 2; display: flex; pointer-events: auto; position: relative; }
.guide-slide.fade-in { animation: guide-fadein 0.6s; }
@keyframes guide-fadein { from { opacity: 0; } to { opacity: 1; } }
.guide-slide.slide-left  { animation: guide-slideleft 0.65s; }
.guide-slide.slide-right { animation: guide-slideright 0.65s; }
@keyframes guide-slideleft  { from { transform: translateX(40px);  opacity: 0; } to { transform: translateX(0);  opacity: 1; } }
@keyframes guide-slideright { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0);  opacity: 1; } }

.guide-nav {
  position: absolute; top: 0; bottom: 0; width: 203px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; background: none; outline: none;
}
.guide-nav-left  { left: -74px; }
.guide-nav-right { right: -74px; }
.guide-arrow-symbol {
  font-size: 3.7em; color: #252525;
  text-shadow: 0 1px 8px #fff, 0 0 2px #0008;
  pointer-events: none; user-select: none;
}
.guide-nav:hover .guide-arrow-symbol,
.guide-nav:focus .guide-arrow-symbol { color: #111; text-shadow: 0 1px 10px #0007, 0 0 2px #ffec; }

.guide-bg-greenred {
  width: 100%; height: 100%;
  display: flex; flex-direction: row; position: relative;
  background: linear-gradient(to right, #2cb253 50%, #ca3138 50%);
  box-sizing: border-box;
}
.guide-bg-greenred::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 10px 10px, rgba(255,255,255,0.05) 0 15px, transparent 15px 75px),
    repeating-radial-gradient(circle at 30% 30%, rgba(0,0,0,0.03) 0 12px, transparent 12px 70px),
    repeating-radial-gradient(circle at 76% 65%, rgba(0,0,0,0.03) 0 18px, transparent 18px 75px);
  z-index: 0; pointer-events: none;
}
.guide-col {
  width: 50%;
  padding: 0 40px 48px 54px;
  display: flex; flex-direction: column; justify-content: flex-start;
  box-sizing: border-box;
  font-family: 'TW Cen MT Condensed', 'Arial Narrow', Arial, sans-serif;
  position: relative; z-index: 2;
  font-size: 1.25em; line-height: 1.2; min-width: 0;
}
.guide-col.right { padding-left: 66px; padding-right: 40px; }
.guide-title { font-size: 2.2em; font-family: 'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif; font-weight: 700; display:block; margin-bottom:10px; }
.guide-title.white { color:#fff; }
.guide-title.black { color:#181818; }
.guide-title2 { font-size: 1.15em; font-weight: 700; margin-top: 14px; }
.guide-quote { font-size: 1em; font-style: italic; margin: 8px 0 12px; color: #b4eac8; display:block; padding-left: 10px; }
.examples { font-size: 1em; font-style: italic; margin-top: 4px; }

.guide-bg-orange {
  background: linear-gradient(to bottom, #ffe482 0%, #ffb146 60%, #f37b34 100%);
  width: 100%; height: 100%; position: relative; padding: 44px 46px 36px; overflow: hidden;
}
.guide-bg-orange::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-radial-gradient(circle at 60px 60px, rgba(255,255,255,0.08) 0 18px, transparent 18px 78px);
  z-index: 0; pointer-events: none;
}
.guide-bg-orange > * { position: relative; z-index: 1; }
.guide-bg-orange .guide-title { font-size: 2.1em; margin-bottom: 16px; color:#181818; font-family:'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif; }
.guide-bg-orange ul { font-size: 1.22em; margin-bottom: 24px; color:#222; font-family:'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif; line-height: 1.7; }
.guide-large { font-size: 1.28em; margin-top: 20px; font-weight: 600; color:#181818; }

/* =========================
   Counter / Mail / Tally
   ========================= */
.counter-box {
  background:#fff; border-radius:16px 16px 0 0; padding:28px 22px 20px;
  text-align:center; box-shadow:0 2px 12px #0002; border-bottom:2px solid #e2e2e2;
}
.counter-label { font-size:1.36em; font-weight:700; margin-bottom:3px; }
.counter-value {
  font-size:2em; letter-spacing:2px; margin-bottom:18px; border:2px solid #d10;
  display:inline-block; border-radius:8px; padding:4px 16px; font-family:monospace;
}
.join-btn {
  display:block; width:100%; background:#f5f5f5; color:#181818;
  font-size:1.2em; border:2px solid #888; border-radius:3px; font-weight:500;
  padding:7px 8px 6px; margin:0 auto; transition: background .17s, border .2s;
  text-align:center; font-family:inherit; box-shadow:none;
}
.join-btn:hover, .join-btn:focus { background:#ffe765; border-color:#ffde3c; color:#111; }

.mailbox-box {
  background:#fff; border-radius:0 0 12px 12px; padding:0 12px 10px;
  box-shadow:0 3px 15px #0002; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.email-here-gif { width:420px; margin-bottom:-7px; pointer-events:none; user-select:none; display:block; }
.mail-row { display:flex; align-items:center; justify-content:center; margin-top:0; }
.mailbox-gif { width:189px; height:143px; margin:0 12px; }
.mail-arrow { width:57px; height:153px; object-fit:contain; user-select:none; }
.mail-arrow.left { margin-right:-4px; } .mail-arrow.right { margin-left:-4px; }
.mail-arrow.left.flipped { transform: scaleX(-1); }

.tally-box {
  background:#fff; border-radius:16px; min-height:320px; min-width:370px; flex:1 1 320px;
  padding:18px 8px; box-shadow:0 2px 8px #0001; display:flex; flex-direction:column;
  align-items:stretch; justify-content:flex-start;
}
#tally-embed iframe {
  width:100% !important; min-height:390px; border:none; border-radius:14px; background:transparent;
}

/* =========================
   Feature row (Video + Tumblr)
   ========================= */
.feature-row{
  width: clamp(960px, 55vw, 1200px);
  margin: 18px auto 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.feature-card{
  background:#fff; border-radius:12px; box-shadow:0 2px 12px #0002; padding:12px;
  display:flex; align-items:center; justify-content:center;
}

/* Make YouTube iframes expand to the card (no HTML change needed) */
.feature-card iframe[src*="youtube.com"],
.feature-card iframe[src*="youtu.be"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
  border-radius: 10px;
}

/* Tumblr embed — let Tumblr's script control height (no height:auto override) */
.feature-row .tumblr-post { width:100%; max-width:100%; }
.feature-row .tumblr-post iframe { width:100% !important; max-width:100% !important; }
.feature-tumblr { overflow: visible; }

/* =========================
   Fanart masonry + empty state
   ========================= */
.masonry-grid {
  columns: 4 250px;
  column-gap: 18px;
  padding: 32px 16px;
  width: 92vw;
  max-width: 1160px;
  margin: 0 auto;
}
.masonry-img {
  width: 100%;
  margin-bottom: 18px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px #0002;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-block;
  break-inside: avoid;
  position: relative;
  overflow: hidden;
}
.masonry-img:hover { transform: scale(1.025); box-shadow: 0 4px 16px #0004; }
.masonry-img img { width: 100%; display: block; max-height: 320px; object-fit: contain; background: #fff; }
.img-hover-info{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(to top, #181818e6 80%, #2220);
  color:#fff; font-size:1em; font-family:'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif;
  text-align:left; padding:13px 12px 8px; opacity:0; pointer-events:none; transition:opacity .17s; z-index:2;
}
.masonry-img:hover .img-hover-info, .masonry-img:focus-within .img-hover-info { opacity: 1; }
.img-hover-info span { font-size: 0.92em; color: #ffde3c; }

/* Sidebar preview for fanart */
.sidebar-preview {
  position: fixed; top: 0; right: 0; width: 400px; height: 100vh;
  background:#fff; box-shadow:-2px 0 16px #0003; padding:18px 12px 12px;
  z-index:1002; display:none; flex-direction:column; align-items:center; transition: transform .25s;
}
.sidebar-preview.open { display:flex; animation: sidebarSlideIn .23s; }
@keyframes sidebarSlideIn { from { transform: translateX(100%);} to { transform: translateX(0);} }
.close-sidebar { background:none; border:none; font-size:2em; color:#444; position:absolute; top:10px; right:18px; cursor:pointer; }
.sidebar-main-img-container { flex: 1; display:flex; align-items:center; justify-content:center; width:100%; margin-bottom:12px; }
#sidebarMainImg { max-width:90%; max-height:55vh; border-radius:10px; box-shadow:0 2px 10px #0001; cursor:pointer; }
.sidebar-thumbs { display:flex; gap:6px; overflow-x:auto; padding:10px 0 6px; width:100%; }
.sidebar-thumbs img { width:64px; height:54px; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.73; border:2px solid transparent; transition:opacity .13s, border .13s; }
.sidebar-thumbs img.active, .sidebar-thumbs img:hover { opacity:1; border-color:#2cb253; }

/* Lightbox (shared) */
.lightbox { display:none; position:fixed; z-index:2000; inset:0; align-items:center; justify-content:center; flex-direction:row; }
.lightbox.open { display:flex; }
.lightbox-overlay { position:absolute; inset:0; background:#000a; z-index:0; }
#lightboxImg { position:relative; z-index:2; max-width:84vw; max-height:80vh; border-radius:10px; background:#fff; box-shadow:0 3px 22px #0007; margin:0 60px; }
.lightbox-arrow { position:relative; z-index:3; background:none; border:none; font-size:3.5em; color:#fff; opacity:.7; cursor:pointer; margin:0 10px; user-select:none; transition:opacity .14s; }
.lightbox-arrow:hover { opacity:1; color:#ffde3c; }
.lightbox-close { position:absolute; top:20px; right:38px; background:none; border:none; font-size:2.3em; color:#fff; opacity:.7; z-index:9; cursor:pointer; user-select:none; }

/* =========================
   Empty-state (Fanart) text
   ========================= */
.no-fanart-msg{
  font-size: 2rem;
  text-align: center;
  margin-top: 50px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.no-fanart-msg span{ font-size: 1.2rem; display:block; margin-top:10px; }

/* ==============================
   MOBILE (≤768px)
   ============================== */

/* ===== Support Wall grid & notes ===== */
.pin-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.note {
  position: relative;
  background: #fffbe7;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  padding: 16px;
  text-align: center;
}

.note .pushpin {
  position: absolute;
  top: -14px;
  left: calc(50% - 12px);
  width: 24px;
  height: 24px;
}

.note .paper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.note .note-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
}

.note-caption {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #333;
}

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  header { position: static; padding: 10px 12px 6px; }
  .header-title { font-size: 1.6rem; margin-left: 0; }
  header nav a { font-size: 1.1rem; }

  main { display: flex; flex-direction: column; }
  .content-wrapper, .sidebar-row, .feature-row { display: contents; }

  .guide-area {
    order: 1;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 18px;
    padding: 0 8px;
    height: auto;
    overflow: visible;
  }
  .guide-slider, .guide-slide { height: auto; }
  .guide-bg-greenred { display: flex; flex-direction: row; height: auto; }
  .guide-col { width: 50%; padding: 12px 10px 16px; font-size: .95rem; line-height: 1.35; }
  .guide-col.right { padding-left: 12px; padding-right: 10px; }
  .guide-title { font-size: 1.35rem; }
  .guide-title2 { font-size: 1.05rem; }
  .guide-nav { display: flex !important; width: 48px; }
  .guide-nav-left  { left: -6px; }
  .guide-nav-right { right: -6px; }
  .guide-arrow-symbol { font-size: 2rem; text-shadow: 0 1px 6px #fff, 0 0 2px #0008; }

  .feature-card, .feature-tumblr, .sidebar-stack, .tally-box {
    width: 100%;
    max-width: 680px;
    margin: 0 auto 16px;
    box-sizing: border-box;
  }

  .feature-card.feature-video { order: 2; }
  .feature-card.feature-video iframe { width: 100%; height: auto; display: block; }

  .feature-tumblr { order: 3; overflow: visible; }

  .sidebar-stack { order: 4; }
  .email-here-gif { max-width: 420px; width: 100%; height: auto; }
  .mail-row { gap: 12px; justify-content: center; }
  .mailbox-gif { width: 160px; height: auto; }
  .mail-arrow { width: 44px; height: auto; }

  .tally-box { order: 5; overflow: visible !important; min-width: 0; }
  #tally-embed { display: block; }
  #tally-embed iframe {
    width: 100% !important;
    height: auto !important;
    min-height: 880px;
    border: 0;
    background: #fff !important;
    border-radius: 14px;
    display: block;
    position: relative;
    z-index: 5;
  }

  .feature-row { width: 100%; margin: 0; }
}

/* Desktop-safe tweaks for Tally */
#tally-embed iframe { background: #fff !important; }
.tally-box { background: #fff; }
#tally-embed iframe { background: transparent !important; }

/* More Tally safety (phones) */
@media (max-width: 768px) {
  #tally-embed iframe { height: auto !important; min-height: 880px; }
}

/* Make mailbox banner and white card match width on narrow screens */
@media (max-width: 900px) {
  .sidebar-stack { width: min(100%, 420px); margin: 0 auto; padding-left: 0; padding-right: 0; }
  .email-here-gif { width: 100%; height: auto; margin: 0; }
  .mailbox-box { width: 100%; box-sizing: border-box; margin: 0; }
  .mail-row { width: 100%; box-sizing: border-box; justify-content: center; }
}

/* ——— TALLY CARD (desktop untouched) ——— */
.tally-box{ background:#fff; border-radius:16px; padding:14px; }
#tally-embed{ display:block; }
#tally-embed iframe{
  background:transparent !important; border:0; display:block; width:100% !important; border-radius:14px;
}

/* mobile/tablet safety only */
@media (max-width: 900px){
  .tally-box{ overflow:visible !important; min-width:0; }
  #tally-embed iframe{ height:auto !important; min-height:1100px; }
}

/* ===== Support Wall + Fanart lightboxes (kept bright/clickable) ===== */
#lb { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; }
#lb.open { display: flex; }
#lbBackdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); z-index: 1000; }
.lb-figure { position: relative; z-index: 1001; margin: 0; }
#lbImg { display: block; max-width: 88vw; max-height: 82vh; border-radius: 10px; background: #fff; box-shadow: 0 3px 22px #0007; }
#lbCap { color:#fff; text-align:center; margin-top:8px; }
#lbClose, .lb-nav {
  position: absolute; z-index: 1002; background: none; border: 0; color: #fff;
  font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: .9; user-select: none; pointer-events:auto;
}
#lbClose { top: 14px; right: 18px; }
.lb-nav.left  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lb-nav.right { right: 18px; top: 50%; transform: translateY(-50%); }

/* --- Header nav fixes on small screens (no mid-word wrapping) --- */
@media (max-width: 720px) {
  header { display: flex; flex-direction: column; align-items: flex-start; }
  header nav { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; }
  header nav a { white-space: nowrap; line-height: 1.2; font-size: clamp(14px, 3.4vw, 19px); padding: 2px 4px; }
}
/* =========================
   Global / Base
   ========================= */
html, body { max-width: 100%; overflow-x: hidden; } /* stop sideways scroll */

body {
  background: #2cb253;
  font-family: 'Arial Narrow', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Backgrounds per page */
body.home-page{
  background-image: url("eltingville background green.png");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
body.fanart-page{
  background-image: url("crumpled paper green.png");
  background-repeat: repeat;
  background-size: auto;
}
.support-wall {
  background-image: url("cork board green.png");
  background-repeat: repeat;
  background-size: auto;
  background-attachment: fixed;
}

/* =========================
   Header / Nav
   ========================= */
header {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 0 0;
}
.header-title {
  font-size: 2.5em;
  font-style: italic;
  margin-left: 12px;
  font-family: 'TW Cen MT Condensed', 'Arial Narrow', Arial, sans-serif;
}
nav a {
  color: #fff;
  margin: 0 18px;
  font-size: 1.7em;
  font-style: italic;
  text-decoration: underline;
  font-family: inherit;
}
nav a:focus, nav a:hover { color: #ffde3c; }

/* =========================
   Layout wrappers
   ========================= */
.content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 32px 0 0 0;
  gap: 32px;
}
.sidebar-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 32px;
  margin-top: 0;
}
.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 420px;
  min-width: 300px;
  max-width: 450px;
}

/* =========================
   GUIDE (slider)
   ========================= */
.guide-area {
  position: relative;
  width: 1200px;
  height: 430px;
  margin: 18px auto 32px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  box-sizing: border-box;
  background: none;
  overflow: visible;
}

.guide-slider { width: 100%; height: 100%; display: flex; align-items: stretch; position: relative; z-index: 2; }

.guide-slide {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s;
  z-index: 1;
  position: absolute;
  left: 0; top: 0;
  background: none;
  pointer-events: none;
}
.guide-slide.active { opacity: 1; z-index: 2; display: flex; pointer-events: auto; position: relative; }
.guide-slide.fade-in { animation: guide-fadein 0.6s; }
@keyframes guide-fadein { from { opacity: 0; } to { opacity: 1; } }
.guide-slide.slide-left  { animation: guide-slideleft 0.65s; }
.guide-slide.slide-right { animation: guide-slideright 0.65s; }
@keyframes guide-slideleft  { from { transform: translateX(40px);  opacity: 0; } to { transform: translateX(0);  opacity: 1; } }
@keyframes guide-slideright { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0);  opacity: 1; } }

.guide-nav {
  position: absolute; top: 0; bottom: 0; width: 203px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; background: none; outline: none;
}
.guide-nav-left  { left: -74px; }
.guide-nav-right { right: -74px; }
.guide-arrow-symbol {
  font-size: 3.7em; color: #252525;
  text-shadow: 0 1px 8px #fff, 0 0 2px #0008;
  pointer-events: none; user-select: none;
}
.guide-nav:hover .guide-arrow-symbol,
.guide-nav:focus .guide-arrow-symbol { color: #111; text-shadow: 0 1px 10px #0007, 0 0 2px #ffec; }

.guide-bg-greenred {
  width: 100%; height: 100%;
  display: flex; flex-direction: row; position: relative;
  background: linear-gradient(to right, #2cb253 50%, #ca3138 50%);
  box-sizing: border-box;
}
.guide-bg-greenred::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-radial-gradient(circle at 10px 10px, rgba(255,255,255,0.05) 0 15px, transparent 15px 75px),
    repeating-radial-gradient(circle at 30% 30%, rgba(0,0,0,0.03) 0 12px, transparent 12px 70px),
    repeating-radial-gradient(circle at 76% 65%, rgba(0,0,0,0.03) 0 18px, transparent 18px 75px);
  z-index: 0; pointer-events: none;
}
.guide-col {
  width: 50%;
  padding: 0 40px 48px 54px;
  display: flex; flex-direction: column; justify-content: flex-start;
  box-sizing: border-box;
  font-family: 'TW Cen MT Condensed', 'Arial Narrow', Arial, sans-serif;
  position: relative; z-index: 2;
  font-size: 1.25em; line-height: 1.2; min-width: 0;
}
.guide-col.right { padding-left: 66px; padding-right: 40px; }
.guide-title { font-size: 2.2em; font-family: 'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif; font-weight: 700; display:block; margin-bottom:10px; }
.guide-title.white { color:#fff; }
.guide-title.black { color:#181818; }
.guide-title2 { font-size: 1.15em; font-weight: 700; margin-top: 14px; }
.guide-quote { font-size: 1em; font-style: italic; margin: 8px 0 12px; color: #b4eac8; display:block; padding-left: 10px; }
.examples { font-size: 1em; font-style: italic; margin-top: 4px; }

.guide-bg-orange {
  background: linear-gradient(to bottom, #ffe482 0%, #ffb146 60%, #f37b34 100%);
  width: 100%; height: 100%; position: relative; padding: 44px 46px 36px; overflow: hidden;
}
.guide-bg-orange::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-radial-gradient(circle at 60px 60px, rgba(255,255,255,0.08) 0 18px, transparent 18px 78px);
  z-index: 0; pointer-events: none;
}
.guide-bg-orange > * { position: relative; z-index: 1; }
.guide-bg-orange .guide-title { font-size: 2.1em; margin-bottom: 16px; color:#181818; font-family:'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif; }
.guide-bg-orange ul { font-size: 1.22em; margin-bottom: 24px; color:#222; font-family:'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif; line-height: 1.7; }
.guide-large { font-size: 1.28em; margin-top: 20px; font-weight: 600; color:#181818; }

/* =========================
   Counter / Mail / Tally
   ========================= */
.counter-box {
  background:#fff; border-radius:16px 16px 0 0; padding:28px 22px 20px;
  text-align:center; box-shadow:0 2px 12px #0002; border-bottom:2px solid #e2e2e2;
}
.counter-label { font-size:1.36em; font-weight:700; margin-bottom:3px; }
.counter-value {
  font-size:2em; letter-spacing:2px; margin-bottom:18px; border:2px solid #d10;
  display:inline-block; border-radius:8px; padding:4px 16px; font-family:monospace;
}
.join-btn {
  display:block; width:100%; background:#f5f5f5; color:#181818;
  font-size:1.2em; border:2px solid #888; border-radius:3px; font-weight:500;
  padding:7px 8px 6px; margin:0 auto; transition: background .17s, border .2s;
  text-align:center; font-family:inherit; box-shadow:none;
}
.join-btn:hover, .join-btn:focus { background:#ffe765; border-color:#ffde3c; color:#111; }

.mailbox-box {
  background:#fff; border-radius:0 0 12px 12px; padding:0 12px 10px;
  box-shadow:0 3px 15px #0002; text-align:center; display:flex; flex-direction:column; align-items:center;
}
.email-here-gif { width:420px; margin-bottom:-7px; pointer-events:none; user-select:none; display:block; }
.mail-row { display:flex; align-items:center; justify-content:center; margin-top:0; }
.mailbox-gif { width:189px; height:143px; margin:0 12px; }
.mail-arrow { width:57px; height:153px; object-fit:contain; user-select:none; }
.mail-arrow.left { margin-right:-4px; } .mail-arrow.right { margin-left:-4px; }
.mail-arrow.left.flipped { transform: scaleX(-1); }

.tally-box {
  background:#fff; border-radius:16px; min-height:320px; min-width:370px; flex:1 1 320px;
  padding:18px 8px; box-shadow:0 2px 8px #0001; display:flex; flex-direction:column;
  align-items:stretch; justify-content:flex-start;
}
#tally-embed iframe {
  width:100% !important; min-height:390px; border:none; border-radius:14px; background:transparent;
}

/* =========================
   Feature row (Video + Tumblr)
   ========================= */
.feature-row{
  width: clamp(960px, 55vw, 1200px);
  margin: 18px auto 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.feature-card{
  background:#fff; border-radius:12px; box-shadow:0 2px 12px #0002; padding:12px;
  display:flex; align-items:center; justify-content:center;
}

/* Make YouTube iframes expand to the card (no HTML change needed) */
.feature-card iframe[src*="youtube.com"],
.feature-card iframe[src*="youtu.be"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
  border-radius: 10px;
}

/* Tumblr embed — let Tumblr's script control height (no height:auto override) */
.feature-row .tumblr-post { width:100%; max-width:100%; }
.feature-row .tumblr-post iframe { width:100% !important; max-width:100% !important; }
.feature-tumblr { overflow: visible; }

/* =========================
   Fanart masonry + empty state
   ========================= */
.masonry-grid {
  columns: 4 250px;
  column-gap: 18px;
  padding: 32px 16px;
  width: 92vw;
  max-width: 1160px;
  margin: 0 auto;
}
.masonry-img {
  width: 100%;
  margin-bottom: 18px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px #0002;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: inline-block;
  break-inside: avoid;
  position: relative;
  overflow: hidden;
}
.masonry-img:hover { transform: scale(1.025); box-shadow: 0 4px 16px #0004; }
.masonry-img img { width: 100%; display: block; max-height: 320px; object-fit: contain; background: #fff; }
.img-hover-info{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(to top, #181818e6 80%, #2220);
  color:#fff; font-size:1em; font-family:'TW Cen MT Condensed','Arial Narrow',Arial,sans-serif;
  text-align:left; padding:13px 12px 8px; opacity:0; pointer-events:none; transition:opacity .17s; z-index:2;
}
.masonry-img:hover .img-hover-info, .masonry-img:focus-within .img-hover-info { opacity: 1; }
.img-hover-info span { font-size: 0.92em; color: #ffde3c; }

/* Sidebar preview for fanart */
.sidebar-preview {
  position: fixed; top: 0; right: 0; width: 400px; height: 100vh;
  background:#fff; box-shadow:-2px 0 16px #0003; padding:18px 12px 12px;
  z-index:1002; display:none; flex-direction:column; align-items:center; transition: transform .25s;
}
.sidebar-preview.open { display:flex; animation: sidebarSlideIn .23s; }
@keyframes sidebarSlideIn { from { transform: translateX(100%);} to { transform: translateX(0);} }
.close-sidebar { background:none; border:none; font-size:2em; color:#444; position:absolute; top:10px; right:18px; cursor:pointer; }
.sidebar-main-img-container { flex: 1; display:flex; align-items:center; justify-content:center; width:100%; margin-bottom:12px; }
#sidebarMainImg { max-width:90%; max-height:55vh; border-radius:10px; box-shadow:0 2px 10px #0001; cursor:pointer; }
.sidebar-thumbs { display:flex; gap:6px; overflow-x:auto; padding:10px 0 6px; width:100%; }
.sidebar-thumbs img { width:64px; height:54px; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.73; border:2px solid transparent; transition:opacity .13s, border .13s; }
.sidebar-thumbs img.active, .sidebar-thumbs img:hover { opacity:1; border-color:#2cb253; }

/* Lightbox (shared) */
.lightbox { display:none; position:fixed; z-index:2000; inset:0; align-items:center; justify-content:center; flex-direction:row; }
.lightbox.open { display:flex; }
.lightbox-overlay { position:absolute; inset:0; background:#000a; z-index:0; }
#lightboxImg { position:relative; z-index:2; max-width:84vw; max-height:80vh; border-radius:10px; background:#fff; box-shadow:0 3px 22px #0007; margin:0 60px; }
.lightbox-arrow { position:relative; z-index:3; background:none; border:none; font-size:3.5em; color:#fff; opacity:.7; cursor:pointer; margin:0 10px; user-select:none; transition:opacity .14s; }
.lightbox-arrow:hover { opacity:1; color:#ffde3c; }
.lightbox-close { position:absolute; top:20px; right:38px; background:none; border:none; font-size:2.3em; color:#fff; opacity:.7; z-index:9; cursor:pointer; user-select:none; }

/* =========================
   Empty-state (Fanart) text
   ========================= */
.no-fanart-msg{
  font-size: 2rem;
  text-align: center;
  margin-top: 50px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px;
}
.no-fanart-msg span{ font-size: 1.2rem; display:block; margin-top:10px; }

/* ==============================
   MOBILE (≤768px)
   ============================== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  header { position: static; padding: 10px 12px 6px; }
  .header-title { font-size: 1.6rem; margin-left: 0; }
  header nav a { font-size: 1.1rem; }

  main { display: flex; flex-direction: column; }
  .content-wrapper, .sidebar-row, .feature-row { display: contents; }

  .guide-area {
    order: 1;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 18px;
    padding: 0 8px;
    height: auto;
    overflow: visible;
  }
  .guide-slider, .guide-slide { height: auto; }
  .guide-bg-greenred { display: flex; flex-direction: row; height: auto; }
  .guide-col { width: 50%; padding: 12px 10px 16px; font-size: .95rem; line-height: 1.35; }
  .guide-col.right { padding-left: 12px; padding-right: 10px; }
  .guide-title { font-size: 1.35rem; }
  .guide-title2 { font-size: 1.05rem; }
  .guide-nav { display: flex !important; width: 48px; }
  .guide-nav-left  { left: -6px; }
  .guide-nav-right { right: -6px; }
  .guide-arrow-symbol { font-size: 2rem; text-shadow: 0 1px 6px #fff, 0 0 2px #0008; }

  .feature-card, .feature-tumblr, .sidebar-stack, .tally-box {
    width: 100%;
    max-width: 680px;
    margin: 0 auto 16px;
    box-sizing: border-box;
  }

  .feature-card.feature-video { order: 2; }
  .feature-card.feature-video iframe { width: 100%; height: auto; display: block; }

  .feature-tumblr { order: 3; overflow: visible; }

  .sidebar-stack { order: 4; }
  .email-here-gif { max-width: 420px; width: 100%; height: auto; }
  .mail-row { gap: 12px; justify-content: center; }
  .mailbox-gif { width: 160px; height: auto; }
  .mail-arrow { width: 44px; height: auto; }

  .tally-box { order: 5; overflow: visible !important; min-width: 0; }
  #tally-embed { display: block; }
  #tally-embed iframe {
    width: 100% !important;
    height: auto !important;
    min-height: 880px;
    border: 0;
    background: #fff !important;
    border-radius: 14px;
    display: block;
    position: relative;
    z-index: 5;
  }

  .feature-row { width: 100%; margin: 0; }
}

/* Desktop-safe tweaks for Tally */
#tally-embed iframe { background: #fff !important; }
.tally-box { background: #fff; }
#tally-embed iframe { background: transparent !important; }

/* More Tally safety (phones) */
@media (max-width: 768px) {
  #tally-embed iframe { height: auto !important; min-height: 880px; }
}

/* Make mailbox banner and white card match width on narrow screens */
@media (max-width: 900px) {
  .sidebar-stack { width: min(100%, 420px); margin: 0 auto; padding-left: 0; padding-right: 0; }
  .email-here-gif { width: 100%; height: auto; margin: 0; }
  .mailbox-box { width: 100%; box-sizing: border-box; margin: 0; }
  .mail-row { width: 100%; box-sizing: border-box; justify-content: center; }
}

/* ——— TALLY CARD (desktop untouched) ——— */
.tally-box{ background:#fff; border-radius:16px; padding:14px; }
#tally-embed{ display:block; }
#tally-embed iframe{
  background:transparent !important; border:0; display:block; width:100% !important; border-radius:14px;
}

/* mobile/tablet safety only */
@media (max-width: 900px){
  .tally-box{ overflow:visible !important; min-width:0; }
  #tally-embed iframe{ height:auto !important; min-height:1100px; }
}

/* ===== Support Wall + Fanart lightboxes (kept bright/clickable) ===== */
#lb { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; }
#lb.open { display: flex; }
#lbBackdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); z-index: 1000; }
.lb-figure { position: relative; z-index: 1001; margin: 0; }
#lbImg { display: block; max-width: 88vw; max-height: 82vh; border-radius: 10px; background: #fff; box-shadow: 0 3px 22px #0007; }
#lbCap { color:#fff; text-align:center; margin-top:8px; }
#lbClose, .lb-nav {
  position: absolute; z-index: 1002; background: none; border: 0; color: #fff;
  font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: .9; user-select: none; pointer-events:auto;
}
#lbClose { top: 14px; right: 18px; }
.lb-nav.left  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lb-nav.right { right: 18px; top: 50%; transform: translateY(-50%); }

/* --- Header nav fixes on small screens (no mid-word wrapping) --- */
@media (max-width: 720px) {
  header { display: flex; flex-direction: column; align-items: flex-start; }
  header nav { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; }
  header nav a { white-space: nowrap; line-height: 1.2; font-size: clamp(14px, 3.4vw, 19px); padding: 2px 4px; }
}

/* === Tally box: make sure it's visible and not clipped (override only) === */
.tally-box,
#tally-box {
  display: block !important;
  position: relative;
  overflow: visible !important; /* stop parent from cutting the iframe */
  background: #fff;            /* keep the white card look behind the form */
  border-radius: inherit;
}

#tally-embed {
  display: block !important;
  position: relative;
  min-height: 690px;           /* reserve space so layout doesn’t jump */
  background: #fff;
  z-index: 5;                  /* above neighbors so it’s clickable */
  pointer-events: auto;
}

/* When the iframe is injected, make sure it fills the box and is clickable */
#tally-embed iframe {
  display: block !important;
  width: 100% !important;
  height: auto !important;     /* Tally’s script will set exact height */
  min-height: 690px;
  border: 0;
  background: #fff !important;
  pointer-events: auto !important;
  z-index: 6;
}

/* (optional) extra safety on small screens */
@media (max-width: 768px) {
  #tally-embed { min-height: 760px; }
}

/* Keep the lower row under the top columns */
.feature-row {
  clear: both;                /* forces it under any floated/positioned top boxes */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}

.feature-card iframe {
  display: block;
  width: 100%;
  height: 315px;              /* adjust if you want */
  border: 0;
  border-radius: 16px;
  background: #fff;
}

@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr;
  }
}

/* === Support Wall tweaks: bigger pins + crooked photos === */

/* 1) Control pin size in one place */
:root { --pin-size: clamp(46px, 3.8vw, 64px); }

.pushpin{
  width: var(--pin-size);
  height: auto;
  top: calc(-1 * (var(--pin-size) * 0.35)); /* pull pin slightly above note */
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* 2) Let each note keep its random tilt even on hover */
.note{
  transform-origin: center top;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .17s, box-shadow .17s;
}
.note:hover{
  transform: scale(1.03) rotate(var(--tilt, 0deg));
}

/* 3) Make the PHOTO itself a little crooked (caption stays straight) */
.note-img{
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  transform: rotate(var(--img-tilt, 0deg));
  border-radius: 8px;
}
/* Force the guide arrows to sit above everything and accept clicks */
.guide-area { position: relative; }
.guide-nav { z-index: 9999 !important; pointer-events: auto !important; }
.guide-arrow-symbol { pointer-events: none; } /* click lands on the nav, not the glyph */

/* ===== Support Wall: fluid grid + crooked photos + bigger pins ===== */

/* A. Containers: don't cap width at tablet */
body.support-wall main,
body.support-wall .pin-board {
  max-width: none !important;
  width: 100% !important;
}

/* B. Always use Grid (not flex) so it keeps adjusting at any width */
body.support-wall .pin-board{
  display: grid !important;
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(240px, 30vw, 360px), 1fr)
  ) !important;
  gap: clamp(14px, 2vw, 30px) !important;
  padding: clamp(16px, 4vw, 40px) !important;
  align-items: start;
  justify-items: center; /* centers notes inside cells */
}

/* If you specifically had a tablet breakpoint at 768, keep grid growing above it */
@media (min-width: 769px){
  body.support-wall .pin-board{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  }
}

/* C. Let cards be fluid; kill any fixed widths */
body.support-wall .note{
  width: auto !important;
  max-width: 100% !important;
  transform-origin: center top;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .17s, box-shadow .17s;
}
body.support-wall .note:hover{
  transform: scale(1.03) rotate(var(--tilt, 0deg));
}

/* D. Bigger pins (tweak the variable to taste) */
:root { --pin-size: clamp(52px, 4.5vw, 72px); }

body.support-wall .pushpin{
  width: var(--pin-size) !important;
  height: auto;
  position: absolute;
  top: calc(-1 * (var(--pin-size) * 0.65));
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* E. Crooked photo (caption stays straight) */
body.support-wall .note-img{
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center;
  transform: rotate(var(--img-tilt, 0deg));
  border-radius: 8px;
}
/* --- Tally: never clip, ever --- */
#tally-box, .tally-box,
#tally-embed {
  overflow: visible !important;
}

/* also unclip common ancestors in your layout */
.content-wrapper,
.sidebar-row,
.sidebar-stack,
.feature-row {
  overflow: visible !important;
}

/* iframe: big safe floors; JS will still raise it further */
#tally-embed iframe {
  display: block;
  width: 100%;
  height: 1300px !important;   /* initial height */
  min-height: 900px !important;/* desktop floor */
  border: 0;
}

@media (max-width: 900px) {
  #tally-embed iframe {
    height: 1800px !important;   /* initial on phones */
    min-height: 1600px !important;
  }
}