/* WHAT'S THAT? MAIL CLUB — exported Easy Edit Mode changes */
/* Add this file after style.css in index.html. */

[data-editable="envelope-sticker"] { --editor-x:-2px; --editor-y:-37px; --editor-scale:1; --editor-rotate:0deg; }
[data-editable="top-logo"] { --editor-x:0px; --editor-y:7px; --editor-scale:2.5; --editor-rotate:0deg; }
[data-editable="hero-postcard"] { --editor-x:-21px; --editor-y:160px; --editor-scale:1; --editor-rotate:0deg; }
[data-editable="hero-letter"] { --editor-x:54px; --editor-y:148px; --editor-scale:0.35; --editor-rotate:0deg; }
[data-editable="hero-envelope"] { --editor-x:98px; --editor-y:4px; --editor-scale:1.31; --editor-rotate:0deg; }
[data-editable="card-01"] { --editor-x:0px; --editor-y:1px; --editor-scale:1; --editor-rotate:0deg; }
/* Payment links */
a.plan-button { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* =========================================================
   MOBILE POLISH — SEPTEMBER 2026
   ========================================================= */
/* Prevent the document itself from drifting horizontally on phones. */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* Header logo: transparent yellow-only PNG, larger on mobile. */
.brand { display:flex; align-items:center; flex:0 0 auto; }
.brand img { object-fit:contain; }
[data-editable="top-logo"] { --editor-x:0px; --editor-y:0px; --editor-scale:1; --editor-rotate:0deg; }

@media (max-width:600px){
  .header { width:100%; max-width:100%; height:74px; padding:8px 6vw; }
  .brand img { width:110px; height:auto; }

  /* Purple mobile dropdown with yellow text. */
  .header nav[data-mobile="true"] {
    background:#7d4bd1 !important;
    color:#ffd51c !important;
    width:100%;
    max-width:100vw;
    box-sizing:border-box;
    border-bottom:3px solid #18131a;
  }
  .header nav[data-mobile="true"] a { color:#ffd51c !important; width:100%; }

  /* Keep the envelope sticker over the lower flap/corner on phones. */
  .envelope-sticker {
    top:68% !important;
  }
  [data-editable="envelope-sticker"] { --editor-y:0px; }

  /* The NOT A NEWSLETTER block needs to fit cleanly inside the viewport. */
  .manifesto { overflow:hidden; }
  .manifesto-title, .manifesto-copy { min-width:0; max-width:100%; }
  .manifesto h2 {
    font-size:44px;
    letter-spacing:-2.5px;
    line-height:.88;
    overflow-wrap:normal;
    word-break:normal;
  }
  .manifesto h2 span { letter-spacing:-1.5px; }
  .manifesto-copy { font-size:17px; }
  .manifesto-copy .big-copy { font-size:28px; }

  /* Footer: logo above, centered links in the middle, one-line yellow footer text. */
  footer {
    width:100%;
    max-width:100%;
    padding:42px 6vw 30px;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:24px;
    text-align:center;
    overflow:hidden;
  }
  .footer-brand { order:1; margin:0 auto !important; display:flex; justify-content:center; }
  .footer-brand img { width:190px; max-width:70vw; height:auto; }
  .footer-links {
    order:2;
    width:100%;
    max-width:300px;
    display:flex;
    justify-content:center !important;
    align-items:center;
    gap:12px 22px;
    text-align:center;
  }
  .footer-links a { font-size:13px; }
  .footer-small {
    order:3;
    width:100%;
    white-space:nowrap;
    text-align:center !important;
    font-size:7px;
    line-height:1.4;
    color:#ffd51c;
  }
}

/* =========================================================
   FINAL MOBILE POLISH — SEPTEMBER 2026
   ========================================================= */
@media (max-width:600px){
  /* Header logo: keep it comfortably inside the header lines. */
  .header .brand img {
    width:82px;
    height:auto;
    max-height:58px;
  }

  /* Mobile dropdown: yellow text on purple, with a visible Join button. */
  .header nav[data-mobile="true"] {
    background:#7d4bd1 !important;
    color:#ffd51c !important;
  }
  .header nav[data-mobile="true"] a {
    color:#ffd51c !important;
  }
  .header nav[data-mobile="true"] a.nav-cta {
    color:#18131a !important;
    background:#ffd51c !important;
    display:block !important;
    width:100%;
    text-align:center;
    margin-top:4px;
  }

  /* Move the envelope logo sticker upward into the marked area. */
  .envelope-sticker {
    top:56% !important;
  }

  /* Give the Fredoka display headings a little breathing room. */
  .august .section-head h2,
  .real-mail .section-head h2,
  .voices .section-head h2,
  .why h2,
  .subscribe .section-head h2,
  .final-cta h2 {
    letter-spacing:0.8px;
  }

  .manifesto h2 {
    letter-spacing:0.5px;
  }
}


/* =========================================================
   SEPTEMBER 2026 — KERNEL REPORT
   ========================================================= */
.september {
  padding: 100px 7vw;
  background: #ffd51c;
  border-bottom: 3px solid #18131a;
}
.september-feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 70px;
}
.september .overview-frame {
  background: #18131a;
  box-shadow: 12px 12px 0 #7d4bd1;
}
.september .overview-frame img {
  object-fit: contain;
}
.september .feature-copy h3 {
  color: #18131a;
}
.september-polaroids .content-card {
  background: #fff8e9;
}
.september-polaroids .content-card img {
  height: 360px;
  object-fit: contain;
  background: #fff8e9;
}
@media (max-width:1000px) {
  .september-feature { grid-template-columns: 1fr; }
  .september-polaroids { grid-template-columns: repeat(2,1fr); }
  .september-polaroids .content-card { grid-column: span 1; }
  .september-polaroids .content-card img { height: 300px; }
}
@media (max-width:600px) {
  .september { padding: 70px 6vw; }
  .september-polaroids { grid-template-columns: 1fr; }
  .september-polaroids .content-card { grid-column: span 1; }
  .september-polaroids .content-card img {
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain;
  }
  .september .section-head h2 {
    letter-spacing: 0.8px;
  }
}


/* =========================================================
   LATEST SEPTEMBER POLISH
   ========================================================= */

/* NOT A NEWSLETTER — purple section */
.manifesto {
  background: #7d4bd1 !important;
}
.manifesto h2,
.manifesto .kicker {
  color: #ffd51c;
}
.manifesto-copy {
  color: #fff4dc;
}

/* September polaroids: never crop supplied artwork and never
   add artificial white bars around it. Images keep their
   natural aspect ratio. */
.september-polaroids .content-card {
  overflow:visible;
}
.september-polaroids .content-card img,
.september-polaroids .content-card.large img {
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:initial !important;
  display:block;
  background:transparent !important;
}

/* Keep the September feature overview uncropped too. */
.september .overview-frame img {
  height:auto;
  max-height:none;
  object-fit:contain;
}

/* The feature copy can breathe with the new single-line phrase. */
.september .feature-copy h3 {
  line-height:1;
}

/* Remove any remaining teaser styling from affecting layout. */
.teaser {
  display:none !important;
}


/* =========================================================
   OCTOBER 2026 — TRAVEL EDITION + HEADER LOGO POLISH
   ========================================================= */
/* Keep the top-left logo comfortably inside the header. */
.header .brand {
  display:flex;
  align-items:center;
  height:100%;
  line-height:0;
}
.header .brand img {
  width:125px !important;
  height:58px !important;
  max-height:58px;
  object-fit:contain;
}
[data-editable="top-logo"] {
  --editor-x:0px !important;
  --editor-y:0px !important;
  --editor-scale:1 !important;
  --editor-rotate:0deg !important;
}

/* October is now the red Travel Edition. */
#october {
  background:#b7192b !important;
  color:#fff4dc;
}
#october .kicker { color:#ffd51c; }
#october .section-head h2 { color:#fff4dc; }
#october .section-head h2 span { color:#ffd51c; }
#october .section-head > p:last-child { color:#fff4dc; }
#october .feature-copy h3 { color:#fff4dc; }
#october .feature-copy p { color:#fff4dc; }
#october .overview-frame {
  background:#fff4dc;
  box-shadow:12px 12px 0 #ffd51c;
}
#october .overview-frame img {
  width:100%;
  height:auto;
  object-fit:contain;
}
#october .frame-label {
  background:#ffd51c;
  color:#18131a;
}

@media (max-width:600px) {
  .header .brand img {
    width:82px !important;
    height:58px !important;
    max-height:58px;
  }
}

/* October polaroid captions: keep all text clearly visible on the red section. */
#october .polaroid > div,
#october .polaroid > div h3,
#october .polaroid > div span {
  color:#18131a !important;
}


/* Real-mail photo gallery additions */
.real-mail-extra-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:900px; margin:28px auto 0; align-items:start; }
.real-mail-extra-grid .real-photo { margin:0; min-width:0; }
.real-mail-extra-grid .real-photo img { display:block; width:100%; height:auto; object-fit:contain; }
.real-mail-extra-grid figcaption { text-align:center; }
.edition-toggle { display:inline-flex; align-items:center; gap:12px; margin-top:18px; padding:11px 17px; border:2px solid #18131a; background:transparent; color:#18131a; font:inherit; font-weight:700; cursor:pointer; }
.edition-toggle span { font-size:1.25em; line-height:1; }
.edition-content[hidden] { display:none !important; }
.edition-content { margin-top:32px; }
@media(max-width:600px) { .real-mail-extra-grid { gap:12px; margin-top:18px; } .edition-toggle { font-size:14px; padding:9px 12px; } }