@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&family=Caveat:wght@400..700&family=Courier+Prime:wght@400;700&family=Covered+By+Your+Grace&family=Fasthand&family=Kavivanar&family=La+Belle+Aurore&family=Nothing+You+Could+Do&family=Oooh+Baby&family=Over+the+Rainbow&family=Reenie+Beanie&family=Sedgwick+Ave&family=Sue+Ellen+Francisco&display=swap');;


/* =========================================================
   HOMEPAGE — RIGHT-SIDE NOTE CARDS
   Class used on Query Loop: .ms-note-loop
   ========================================================= */

.ms-note-loop .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.ms-note-loop .wp-block-post {
  position: relative;
  isolation: isolate;

  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 38%),

    /* tighter faint horizontal writing lines */
    linear-gradient(
      0deg,
      transparent 0px,
      transparent 20px,
      rgba(23,19,22,0.075) 20.5px,
      transparent 21px
    ),

    linear-gradient(#fbfaf6, #fbfaf6);

  background-size:
    100% 100%,
    calc(100% - 64px) 22px,
    100% 100%;

  background-position:
    0 0,
    32px 0,
    0 0;

  background-repeat:
    no-repeat,
    repeat-y,
    no-repeat;

  border: none;
  border-radius: 6px 6px 16px 16px;
  padding: 30px 15px 30px;
  min-height: 550px !important;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(255,255,255,0.65) inset,
    0 3px 6px rgba(23,19,22,0.08),
    0 12px 18px rgba(23,19,22,0.10);
}

/* individual note angles */
.ms-note-loop .wp-block-post:nth-child(1) {
  transform: rotate(-1.5deg);
}

.ms-note-loop .wp-block-post:nth-child(2) {
  transform: rotate(1.2deg);
  margin-top: 22px;
}

.ms-note-loop .wp-block-post:nth-child(3) {
  transform: rotate(1deg);
  margin-top: -8px;
}

.ms-note-loop .wp-block-post:nth-child(4) {
  transform: rotate(-1.2deg);
  margin-top: 12px;
}

/* image */
.ms-note-loop .wp-block-post-featured-image {
  position: relative;
  width: 75%;
  margin: 0 auto 12px;
  border: none;
  border-radius: 4px;
  overflow: visible;
  z-index: 1;
}

.ms-note-loop .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  box-shadow: 0 2px 5px rgba(23,19,22,0.10);
}

/* date */
.ms-note-loop .wp-block-post-date {
  font-size: 11px !important;
  line-height: 1 !important;
  margin: 7px 0 9px !important;
  color: #6d6268;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-left: 28px;
  padding-right: 14px;
}

/* title */
.ms-note-loop .wp-block-post-title {
  font-size: 30px !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  letter-spacing: -0.035em;
  position: relative;
  z-index: 2;
  padding-left: 34px;
  padding-right: 24px;
}

.ms-note-loop .wp-block-post-title a {
  text-decoration: none;
  mix-blend-mode: multiply;
  opacity: 0.88;
  text-shadow: 0 0 0.35px rgba(49, 38, 33, 0.35);
  -webkit-font-smoothing: antialiased;
}

/* excerpt */
.ms-note-loop .wp-block-post-excerpt {
  font-size: 16px !important;
  line-height: 1.35 !important;
  margin: 10px 0 0 !important;
  color: #6d6268;
  padding-left: 38px;
  padding-right: 28px;
  position: relative;
  z-index: 2;
}

.ms-note-loop .wp-block-post-excerpt p {
  margin: 0 !important;
}

/* bottom flourish */
.ms-note-loop .wp-block-post::before {
  content: "— ✦ —";
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(128,0,32,0.35);
  z-index: 2;
  pointer-events: none;
}

/* mobile */
@media (max-width: 768px) {
  .ms-note-loop .wp-block-post-template {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   HOMEPAGE — MAIN LEFT FEATURE NOTE
   Class used on Query Loop: .ms-main-note-loop
   ========================================================= */

.ms-main-note-loop .wp-block-post-template {
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

.ms-main-note-loop .wp-block-post {
  position: relative;
  isolation: isolate;

  /* THIS controls the actual folio size */
  width: min(100%, 860px);
  margin-left: auto;
  margin-right: auto;

  background-image: url("https://modescript.com/wp-content/uploads/2026/06/c772fb50-f3e0-48f0-842c-b5fdf1d20a87.png");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;

  border: none;
  border-radius: 10px;
  aspect-ratio: 1024 / 1365;
  padding: 0;
  overflow: hidden;

  box-shadow:
    0 0px 1px rgba(255,255,255,0.55) inset,
    0 22px 34px rgba(70,45,35,0.22),
    0 54px 82px rgba(23,19,22,0.24);

  filter:
    drop-shadow(0 1px 1px rgba(70,45,35,0.20))
    drop-shadow(0 1px 1px rgba(23,19,22,0.14));

  transform: none !important;
}

/* MOBILE — make the folio smaller and centered */
@media (max-width: 600px) {
  .ms-main-note-loop .wp-block-post {
    width: 86vw;
    max-width: 390px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* MOBILE ONLY — make site title smaller */
@media (max-width: 600px) {
  header .wp-block-site-title,
  header .wp-block-site-title a,
  .site-header .site-title,
  .site-header .site-title a {
    font-size: 48px !important;
    line-height: 0.85 !important;
    white-space: nowrap !important;
  }
}


/* date */
.ms-main-note-loop .wp-block-post-date {
  position: absolute;
  top: 20%;
  left: 16.5%;
  z-index: 3;

  font-size: 10px !important;
  line-height: 1 !important;
  margin: 0 !important;

  color: #6b1d2b;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  mix-blend-mode: multiply;
  opacity: 0.72;
}

/* title */
.ms-main-note-loop .wp-block-post-title {
  position: absolute;
  top: 22%;
  left: 12%;
  z-index: 3;

  font-size: clamp(31px, 2.55vw, 42px) !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  letter-spacing: -0.052em;

  max-width: 75%;
  text-align: center;
}

.ms-main-note-loop .wp-block-post-title a {
  color: #171316;
  text-decoration: none;

  mix-blend-mode: multiply;
  opacity: 0.91;
  text-shadow: 0 0 0.25px rgba(23,19,22,0.22);
}

/* featured image */
.ms-main-note-loop .wp-block-post-featured-image {
  display: block !important;
  position: absolute;
  top: 46%;
  left: 17.5%;
  width: 65%;
  margin: 0;
  z-index: 4;

  border: none;
  border-radius: 4px;
  overflow: visible;

  transform: rotate(0.45deg);
}

.ms-main-note-loop .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 4px;

  box-shadow:
    0 2px 5px rgba(23,19,22,0.18),
    0 12px 22px rgba(23,19,22,0.16);
}

/* remove old pushpin / tape effects */
.ms-main-note-loop .wp-block-post-featured-image::before,
.ms-main-note-loop .wp-block-post-featured-image::after {
  display: none !important;
}

/* excerpt */
.ms-main-note-loop .wp-block-post-excerpt {
  position: absolute;
  top: 75%;
  left: 20%;
  z-index: 5;

  width: 100%;
  text-align: center;
  max-width: 60%;
  margin: 0 !important;

  color: #800020;
  mix-blend-mode: multiply;
  opacity: 0.84;
}

.ms-main-note-loop .wp-block-post-excerpt p {
  position: static !important;
  display: block !important;

  font-size: 18px !important;
  line-height: 1.45 !important;
  margin: 0 !important;

  color: #800020;
}

/* mobile */
@media (max-width: 768px) {
  .ms-main-note-loop .wp-block-post {
    background-size: 100% auto;
    background-position: center top;
    aspect-ratio: 1024 / 1365;
    border-radius: 8px;
  }

  .ms-main-note-loop .wp-block-post-date {
    top: 22%;
    left: 15%;
    font-size: 8px !important;
  }

  .ms-main-note-loop .wp-block-post-title {
    top: 25%;
    left: 15%;
    font-size: 23px !important;
    line-height: 1.06 !important;
    max-width: 70%;
  }

  .ms-main-note-loop .wp-block-post-featured-image {
    top: 45%;
    left: 20%;
    width: 60%;
  }

  .ms-main-note-loop .wp-block-post-excerpt {
    top: 75%;
    left: 22%;
    width: 58%;
    max-width: 58%;
  }

  .ms-main-note-loop .wp-block-post-excerpt p {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
}


/* =========================================================
   ARCHIVE PAD CARDS
   Class used on archive Query Loops: .archive-pad
   ========================================================= */

/* whole archive entry: paper backing behind image + date + title */
.archive-pad .wp-block-post {
  position: relative !important;
  display: block !important;

  padding: 10px 10px 18px 10px !important;
  margin-bottom: 58px !important;

  background: rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(140, 115, 95, 0.06),
    0 4px 14px rgba(70, 50, 35, 0.08) !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

/* featured image wrapper */
.archive-pad .wp-block-post-featured-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;

  margin: 0 0 7px 0 !important;
  padding: 0 !important;

  background: none !important;
  box-shadow: none !important;
}

/* kill old image-attached tape */
.archive-pad .wp-block-post-featured-image::before,
.archive-pad .wp-block-post-featured-image::after {
  content: none !important;
}

/* actual image */
.archive-pad .wp-block-post-featured-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  filter: saturate(0.90) contrast(0.97);
}

/* date */
.archive-pad .wp-block-post-date {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: static !important;
  z-index: auto !important;

  margin: 0 0 3px 0 !important;
  padding: 0 !important;

  color: #29313f !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.archive-pad .wp-block-post-date time,
.archive-pad .wp-block-post-date a {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;

  color: #29313f !important;
  font-size: 12px !important;
  line-height: 1.2 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* title */
.archive-pad .wp-block-post-title {
  display: block !important;

  position: static !important;
  z-index: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.32 !important;
}

.archive-pad .wp-block-post-title a {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* clear tape — top-left of the whole paper backing */
.archive-pad .wp-block-post::before {
  content: "";
  position: absolute;
  width: 78px;
  height: 20px;
  top: -4px;
  left: -18px;

  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(190, 175, 150, 0.12);
  box-shadow:
    0 1px 3px rgba(80, 60, 45, 0.08),
    inset 0 0 8px rgba(255, 255, 255, 0.25);

  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 5;
}

/* clear tape — bottom-right of the whole paper backing */
.archive-pad .wp-block-post::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 20px;
  bottom: -5px;
  right: -18px;

  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(190, 175, 150, 0.12);
  box-shadow:
    0 1px 3px rgba(80, 60, 45, 0.08),
    inset 0 0 8px rgba(255, 255, 255, 0.25);

  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 5;
}


/* =========================================================
   MOBILE HOMEPAGE CATEGORY SECTION
   Class used on pad/category group: .mobile-no-pad-bg
   ========================================================= */

@media (max-width: 767px) {
  .mobile-no-pad-bg {
    background-image: none !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    min-height: 0 !important;
    height: auto !important;

    padding-top: 24px !important;
    padding-bottom: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    overflow-x: hidden !important;
  }

  /* if WordPress applies the background through an inner wrapper */
  .mobile-no-pad-bg::before,
  .mobile-no-pad-bg::after {
    background-image: none !important;
  }

  /* remove giant invisible spacer on mobile */
  .mobile-no-pad-bg .wp-block-spacer {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* stack and center the three category columns */
  .mobile-no-pad-bg .wp-block-columns {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 36px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

  }

  .mobile-no-pad-bg .wp-block-column {
    width: 100% !important;
    max-width: 380px !important;
    flex-basis: auto !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }

  /* actual card/group inside each category column */
  .mobile-no-pad-bg .wp-block-column > .wp-block-group {
    width: min(92vw, 380px) !important;
    max-width: min(92vw, 380px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* keep the article cards wide on mobile */
  .mobile-no-pad-bg .wp-block-post,
  .mobile-no-pad-bg .wp-block-group,
  .mobile-no-pad-bg .wp-block-post-template {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .mobile-no-pad-bg .wp-block-post-template {
    margin-top: 0 !important;
    gap: 28px !important;
  }

  .mobile-no-pad-bg .wp-block-post {
    width: min(92vw, 360px) !important;
  }

  .mobile-no-pad-bg .wp-block-post-featured-image {
    margin-bottom: 8px !important;
  }

  .mobile-no-pad-bg .wp-block-post-date {
    margin-bottom: 6px !important;
  }

  .mobile-no-pad-bg .wp-block-post-title {
    margin-top: 0 !important;
  }

  .mobile-no-pad-bg img {
    max-width: 100% !important;
    height: auto !important;
  }
}


/* =========================================================
   RESPONSIVE LAYOUT FIXES — SMALL LAPTOPS / DESKTOPS
   ========================================================= */

/* mid-size screens: laptops / smaller desktops */
@media (min-width: 768px) and (max-width: 1250px) {
  /* keep the whole site from feeling smashed against the sides */
  body {
    overflow-x: hidden !important;
  }

  main,
  .wp-site-blocks,
  .entry-content {
    max-width: 100vw !important;
  }

  /* reduce giant desktop spacing on smaller laptops */
  .wp-block-group,
  .wp-block-cover,
  .wp-block-columns {
    box-sizing: border-box !important;
  }

  /* make wide sections breathe without overflowing */
  .alignwide,
  .wp-block-group.alignwide,
  .wp-block-columns.alignwide {
    width: min(94vw, 1100px) !important;
    max-width: min(94vw, 1100px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* tighten the header/nav area */
  header,
  .wp-block-template-part,
  .wp-block-navigation {
    max-width: 100vw !important;
  }

  .wp-block-navigation {
    gap: clamp(18px, 2vw, 38px) !important;
  }

  /* make the big logo/title scale instead of staying enormous */
  .site-title,
  .wp-block-site-title,
  .wp-block-site-title a {
    font-size: clamp(4rem, 9vw, 8rem) !important;
    line-height: 0.9 !important;
  }

  /* article cards: keep them elegant, not squeezed */
  .wp-block-post-template {
    gap: clamp(22px, 3vw, 42px) !important;
  }

  .wp-block-post {
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* reduce overly dramatic vertical whitespace */
  .wp-block-spacer {
    max-height: 80px !important;
  }
}

/* desktop + laptop only: scale homepage sections proportionally */
@media (min-width: 782px) and (max-width: 1366px) {
  .desktop-scale-wrap {
    width: 1280px !important;
    max-width: 1280px !important;

    transform: scale(0.82) !important;
    transform-origin: top center !important;

    margin-left: 50% !important;
    translate: -50% 0 !important;
  }

  .notepad-scale-wrap {
    width: 1100px !important;
    max-width: 1100px !important;

    zoom: 0.84 !important;

    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* laptop-only gap fix above subscription ribbon */
@media (max-width: 1366px) and (min-width: 782px) {
  .home .above-subscribe-section {
    padding-bottom: 0 !important;
    margin-bottom: -150px !important;
    min-height: auto !important;
  }
}


/* =========================================================
   CATEGORY ARCHIVE PAGES
   Class used on category archive loop: .modescript-category-loop
   ========================================================= */

.modescript-category-loop {
  max-width: 1120px;
  margin: 70px auto 90px;
  padding: 0 28px;
}

/* space between article cards */
.modescript-category-loop .wp-block-post-template {
  gap: 46px 38px;
}

/* each repeated post card */
.modescript-category-loop .wp-block-post {
  background: rgba(255, 255, 255, 0.38);
  padding: 22px 22px 28px;
  box-shadow:
    0 0 0 1px rgba(140, 115, 95, 0.06),
    0 4px 14px rgba(70, 50, 35, 0.08);
}

/* images */
.modescript-category-loop .wp-block-post-featured-image {
  margin-bottom: 18px;
}

.modescript-category-loop .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* date */
.modescript-category-loop .wp-block-post-date {
  margin-bottom: 14px;
  font-size: 13px;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* title */
.modescript-category-loop .wp-block-post-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: clamp(24px, 2vw, 33px);
  line-height: 1.15;
  font-weight: 400;
}

.modescript-category-loop .wp-block-post-title a {
  text-decoration: none;
}

/* excerpt */
.modescript-category-loop .wp-block-post-excerpt {
  font-size: 15px;
  line-height: 1.55;
  opacity: 0.78;
}

/* mobile */
@media (max-width: 700px) {
  .modescript-category-loop {
    margin-top: 42px;
    padding: 0 20px;
  }

  .modescript-category-loop .wp-block-post-template {
    grid-template-columns: 1fr !important;
    gap: 34px;
  }

  .modescript-category-loop .wp-block-post {
    padding: 18px 18px 24px;
  }
}


/* =========================================================
   HOMEPAGE CATEGORY HEADINGS — PINKY-BEIGE TAB
   Class used on heading text: .ms-cat-highlight
   ========================================================= */

.ms-cat-highlight {
  position: relative;
  display: table !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 1;
  color: #800020 !important;
  padding: 0.05em 0.42em;
}

/* tab shape */
.ms-cat-highlight::before {
  content: "";
  position: absolute;
  left: -0.55em;
  right: -0.55em;
  top: 50%;
  height: 1.18em;
  transform: translateY(-50%) rotate(-3deg);
  z-index: -1;
  pointer-events: none;

  background: #d8b3aa99;

  clip-path: polygon(
    16% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% 48%
  );

  border-radius: 0 7px 7px 0;
  box-shadow: 0 2px 4px rgba(70, 45, 40, 0.10);
}

/* remove old highlighter layer */
.ms-cat-highlight::after {
  content: none !important;
}


/* =========================================================
   ABOUT PAGE — CLEAN WHITE PAPER PANEL
   Class used on About page Group block: .about-paper
   ========================================================= */

.about-paper {
  position: relative;
  max-width: 880px;
  margin: 48px auto 72px auto;
  padding: 52px 56px;
  background: #fbfaf6;
  border: 1px solid rgba(120, 95, 70, 0.13);
  border-radius: 14px;
  box-shadow:
    0 18px 38px rgba(60, 45, 35, 0.10),
    inset 0 0 34px rgba(255, 255, 255, 0.55);
  overflow: hidden;
}

/* subtle paper depth, no lines */
.about-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.55), transparent 26%),
    radial-gradient(circle at 80% 78%, rgba(90,70,50,0.035), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(120,90,60,0.025));
}

/* keep text above paper texture */
.about-paper > * {
  position: relative;
  z-index: 1;
}

/* do not shrink the About text */
.about-paper p {
  font-size: inherit !important;
  line-height: 1.75;
  color: #2a211d;
}

/* burgundy emphasis */
.about-paper strong {
  color: #800020;
}

/* final thesis line */
.about-paper p strong {
  font-weight: 700;
}

/* mobile */
@media (max-width: 700px) {
  .about-paper {
    margin: 28px 16px 48px 16px;
    padding: 34px 24px;
    border-radius: 12px;
  }

  .about-paper p {
    font-size: inherit !important;
    line-height: 1.7;
  }
}

/* =========================================================
   MOBILE SINGLE POST FIX — text + image margins
   ========================================================= */

@media (max-width: 767px) {

  /* Make the actual article content stop touching the screen */
  body.single-post main,
  body.single-post .wp-site-blocks main,
  body.single-post .entry-content,
  body.single-post .wp-block-post-content {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Smaller article text */
  body.single-post .entry-content p,
  body.single-post .wp-block-post-content p,
  body.single-post main p {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  /* Images and figures should respect the same margin */
  body.single-post .entry-content figure,
  body.single-post .entry-content .wp-block-image,
  body.single-post .entry-content .wp-block-gallery,
  body.single-post .wp-block-post-content figure,
  body.single-post .wp-block-post-content .wp-block-image,
  body.single-post .wp-block-post-content .wp-block-gallery {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.single-post .entry-content img,
  body.single-post .wp-block-post-content img,
  body.single-post main img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  /* Undo Gutenberg's annoying full-width mobile behavior */
  body.single-post .alignfull,
  body.single-post .alignwide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If the images are inside a Columns block, stack them neatly */
  body.single-post .wp-block-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;

    gap: 12px !important;
  }
}

/* =========================================================
   MOBILE HOMEPAGE NOTE CARDS — smaller, centered, tilted
   ========================================================= */

@media (max-width: 767px) {

  .home .ms-note-loop,
  .ms-note-loop {
    overflow: visible !important;
  }

  /* Stack cards with breathing room */
  .home .ms-note-loop .wp-block-post-template,
  .ms-note-loop .wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;


    gap: 32px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Smaller paper cards */
  .home .ms-note-loop .wp-block-post,
  .ms-note-loop .wp-block-post {
    width: min(86vw, 350px) !important;
    max-width: 350px !important;

    min-height: 500px !important;
    padding: 26px 13px 50px !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 28px !important;

    box-sizing: border-box !important;
    transform-origin: center center !important;
  }

  /* Restore the desktop-style tilt, but slightly calmer for mobile */
  .home .ms-note-loop .wp-block-post:nth-child(1),
  .ms-note-loop .wp-block-post:nth-child(1) {
    transform: rotate(-1.15deg) !important;
  }

  .home .ms-note-loop .wp-block-post:nth-child(2),
  .ms-note-loop .wp-block-post:nth-child(2) {
    transform: rotate(1.05deg) !important;
    margin-top: 8px !important;
  }

  .home .ms-note-loop .wp-block-post:nth-child(3),
  .ms-note-loop .wp-block-post:nth-child(3) {
    transform: rotate(0.8deg) !important;
  }

  .home .ms-note-loop .wp-block-post:nth-child(4),
  .ms-note-loop .wp-block-post:nth-child(4) {
    transform: rotate(-1deg) !important;
    margin-top: 8px !important;
  }

  /* Slightly smaller image inside each note */
  .home .ms-note-loop .wp-block-post-featured-image,
  .ms-note-loop .wp-block-post-featured-image {
    width: 78% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
  }

  /* Date */
  .home .ms-note-loop .wp-block-post-date,
  .ms-note-loop .wp-block-post-date {
    font-size: 10px !important;
    line-height: 1 !important;

    padding-left: 24px !important;
    padding-right: 18px !important;
    margin-top: 8px !important;
    margin-bottom: 9px !important;
  }

  /* Title */
  .home .ms-note-loop .wp-block-post-title,
  .ms-note-loop .wp-block-post-title {
    font-size: 25px !important;
    line-height: 1.08 !important;

    padding-left: 27px !important;
    padding-right: 25px !important;
  }

  /* Excerpt */
  .home .ms-note-loop .wp-block-post-excerpt,
  .ms-note-loop .wp-block-post-excerpt {
    font-size: 14px !important;
    line-height: 1.43 !important;

    padding-left: 30px !important;
    padding-right: 28px !important;
    margin-top: 10px !important;
  }
}

/* =========================================================
   MOBILE SINGLE POST — smaller title + lower article start
   ========================================================= */

@media (max-width: 767px) {

  /* Smaller mobile post title */
  body.single-post h1.wp-block-post-title,
  body.single-post .wp-block-post-title,
  body.single-post .entry-title {
    font-size: clamp(42px, 10.5vw, 52px) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
  }

  /* Give the featured/hero image more space before the article text begins */
  body.single-post .wp-block-post-featured-image,
  body.single-post .wp-block-post-content > .wp-block-image:first-child,
  body.single-post .entry-content > .wp-block-image:first-child {
    margin-bottom: 42px !important;
  }

  /* If the article begins as normal body text, push the first paragraph down */
  body.single-post .wp-block-post-content > p:first-of-type,
  body.single-post .entry-content > p:first-of-type {
    margin-top: 42px !important;
  }

  /* If that intro is inside a Cover block, lower the inner text slightly */
  body.single-post .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__inner-container,
  body.single-post .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container {
    transform: translateY(36px) !important;
  }
}

/* =========================================================
   KADENCE HEADER TAGLINE ONLY — do not touch site title
   ========================================================= */

/* Desktop */
.site-description,
#masthead .site-description,
.site-header .site-description {
  margin-top: -38px !important;
  margin-bottom: 18px !important;
  padding-top: 0 !important;

  position: relative !important;
  top: -6px !important;
	left: 5px !important;

  font-size: 15px !important;
  line-height: 1.1 !important;
}

/* Mobile */
@media (max-width: 767px) {
  .site-description,
  #masthead .site-description,
  .site-header .site-description {
    margin-top: -48px !important;
    margin-bottom: 18px !important;
    top: -4px !important;

    font-size: 13px !important;
    line-height: 1.1 !important;
  }
}


/* ==========================================
   MODESCRIPT — CENTERED MAIN FOLIO CONTENT
   ========================================== */

/* Make the folio a flexible vertical container */

.ms-main-note-loop .wp-block-post {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: clamp(12px, 1.5vw, 22px) !important;

  padding: 17% 0 10% !important;
  box-sizing: border-box !important;
}

/* Remove independent positioning */

.ms-main-note-loop .wp-block-post-date,
.ms-main-note-loop .wp-block-post-title,
.ms-main-note-loop .wp-block-post-featured-image,
.ms-main-note-loop .wp-block-post-excerpt {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Date: aligned with the left edge of the content */

.ms-main-note-loop .wp-block-post-date {
  width: 72% !important;
  max-width: 72% !important;
  text-align: left !important;
  align-self: center !important;
}

/* Title: centered and free to grow vertically */

.ms-main-note-loop .wp-block-post-title {
  width: 76% !important;
  max-width: 76% !important;

  text-align: center !important;
}

/* Photograph: centered below the title */

.ms-main-note-loop .wp-block-post-featured-image {
  width: 66% !important;
  max-width: 66% !important;

  margin-top: 0 !important;
  flex-shrink: 0 !important;
}

/* Excerpt: centered below the photograph */

.ms-main-note-loop .wp-block-post-excerpt {
  width: 64% !important;
  max-width: 64% !important;

  text-align: center !important;
}

/* Reset any inherited spacing */

.ms-main-note-loop .wp-block-post-excerpt p {
  margin: 0 !important;
}

/* ==========================================
   MOBILE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {

  .ms-main-note-loop .wp-block-post {
    padding: 14% 0 9% !important;
    gap: 10px !important;
  }

  .ms-main-note-loop .wp-block-post-title {
    width: 76% !important;
    max-width: 76% !important;
  }

  .ms-main-note-loop .wp-block-post-featured-image {
    width: 66% !important;
    max-width: 66% !important;
    margin-top: 8px !important;
  }

  .ms-main-note-loop .wp-block-post-excerpt {
    width: 64% !important;
    max-width: 64% !important;
  }

}

/* ==========================================
   FOLIO DATE ABOVE TITLE
   The WordPress date block follows the image in
   the editor; reorder it in the flex layout.
   ========================================== */

.ms-main-note-loop .wp-block-post-date {
  order: -1 !important;
}

/* ==========================================
   MAIN FOLIO PHOTO — TUCKED CORNERS + EXTENDED SLIT LINES
   Clip the photo paper, not its outer wrapper, so the
   thin slit lines can extend past both tucked corners.
   ========================================== */

.ms-main-note-loop .wp-block-post-featured-image {
  --ms-tuck: clamp(21px, 3.5vw, 42px);
  position: relative !important;
  overflow: visible !important;
  clip-path: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Paper mat: preserve the existing warm-ivory color and border. */
.ms-main-note-loop .wp-block-post-featured-image > a {
  display: block !important;
  position: relative !important;
  padding: 10px !important;
  background: #eeeae4 !important;
  border: 1px solid #80002059 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;

  clip-path: polygon(
    0 0,
    calc(100% - var(--ms-tuck)) 0,
    100% var(--ms-tuck),
    100% 100%,
    var(--ms-tuck) 100%,
    0 calc(100% - var(--ms-tuck))
  ) !important;
}

.ms-main-note-loop .wp-block-post-featured-image img {
  display: block !important;
  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Tapered slit edges: pointed tips extend slightly beyond
   the clipped photo corners; narrow center casts a tiny shadow. */
.ms-main-note-loop .wp-block-post-featured-image::before,
.ms-main-note-loop .wp-block-post-featured-image::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: calc(var(--ms-tuck) + 46px) !important;
  height: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(28, 22, 18, 0.12) 0%,
    rgba(28, 22, 18, 0.82) 24%,
    rgba(20, 16, 14, 0.90) 50%,
    rgba(28, 22, 18, 0.82) 76%,
    rgba(28, 22, 18, 0.12) 100%
  ) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 1px rgba(35, 29, 26, 0.24)) !important;
  clip-path: polygon(
    0 50%,
    14% 25%,
    86% 25%,
    100% 50%,
    86% 75%,
    14% 75%
  ) !important;
  pointer-events: none !important;
  transform: rotate(45deg) !important;
  transform-origin: center center !important;
  z-index: 9 !important;
}

/* Top-right: center of diagonal is tuck/2 from both edges. */
.ms-main-note-loop .wp-block-post-featured-image::before {
  top: calc(var(--ms-tuck) / 2) !important;
  right: -23px !important;
  bottom: auto !important;
  left: auto !important;
}

/* Bottom-left: identical line, opposite corner. */
.ms-main-note-loop .wp-block-post-featured-image::after {
  bottom: calc(var(--ms-tuck) / 2) !important;
  left: -23px !important;
  top: auto !important;
  right: auto !important;
}

@media (max-width: 768px) {
  .ms-main-note-loop .wp-block-post-featured-image {
    --ms-tuck: 21px;
  }
  .ms-main-note-loop .wp-block-post-featured-image > a {
    padding: 8px !important;
  }
}


/* MAIN FOLIO PHOTO — faint shadow beneath the tucked photo mat.
   Apply to the un-clipped wrapper so the shadow follows the cut corners. */
.ms-main-note-loop .wp-block-post-featured-image {
  filter: drop-shadow(0 6px 6px rgba(23, 19, 22, 0.11)) !important;
}


/* =========================================================
   SINGLE POST — tighten gap between wpDiscuz and Similar Posts
   ========================================================= */

.single-post #comments {
  margin-bottom: 0 !important;
}

.single-post .entry-related {
  margin-top: 0 !important;


}
/* =========================================================
   NEW HOMEPAGE — CREATIVE HERO INSIDE TWO-COLUMN LAYOUT
   Add BOTH classes to the Creative Query Loop:
   ms-main-note-loop ms-creative-hero
   ========================================================= */

.ms-main-note-loop.ms-creative-hero,
.ms-main-note-loop.ms-creative-hero .wp-block-post-template {
  width: 100% !important;
  max-width: 100% !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post {
  width: 100% !important;
  max-width: 490px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Override the generic laptop rule that caps posts at 360px */
@media (min-width: 768px) {
  .ms-main-note-loop.ms-creative-hero .wp-block-post {
    max-width: 490px !important;
  }
}

/* Let the hero scale naturally on smaller screens */
@media (max-width: 767px) {
  .ms-main-note-loop.ms-creative-hero .wp-block-post {
    width: min(92vw, 430px) !important;
    max-width: 430px !important;
  }


}
/* =========================================================
   NEW HOMEPAGE — CREATIVE HERO INTERNAL PROPORTIONS
   Uses: ms-main-note-loop ms-creative-hero
   ========================================================= */
.ms-main-note-loop.ms-creative-hero .wp-block-post {
  padding: 14% 0 8% !important;
  gap: clamp(7px, 0.9vw, 12px) !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-date {
  width: 70% !important;
  max-width: 70% !important;
  font-size: 8px !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-title {
  width: 72% !important;
  max-width: 72% !important;
  font-size: clamp(30px, 1.8vw, 40px) !important;
  line-height: 1.06 !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image {
  width: 68% !important;
  max-width: 68% !important;
  margin-top: 6px !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-excerpt {
  width: 60% !important;
  max-width: 60% !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-excerpt p {
  font-size: clamp(11px, 0.9vw, 15px) !important;
  line-height: 1.35 !important;
}

/* =========================================================
   HOMEPAGE — CRITICISM HERO
   Class on Criticism Query Loop: ms-criticism-hero
   Query Loop: 1 post
   ========================================================= */

.ms-criticism-hero,
.ms-criticism-hero .wp-block-post-template {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 auto !important;
  list-style: none !important;
  overflow: visible !important;
}

/* Main live post: article content sits directly on the paper pile */
.ms-criticism-hero .wp-block-post {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 490px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 593 / 663 !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(7px, 0.9vw, 12px) !important;
  padding: 13.5% 0 8% !important;;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;

  transform: translateY(80px) rotate(1.8deg) !important;
  transform-origin: center top !important;
}

/* Paper pile background */
.ms-criticism-hero .wp-block-post::before {
  content: "" !important;
  position: absolute !important;
  inset: -20% !important;

  background-image: url("https://modescript.com/wp-content/uploads/2026/10/3e43e920-c615-4287-b0e3-f31ea1abb3f2.png") !important;
  background-size: 100% 100% !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;

  filter:
    drop-shadow(0 14px 14px rgba(23,19,22,0.22))
    drop-shadow(0 30px 34px rgba(23,19,22,0.16)) !important;

  z-index: 1 !important;
  pointer-events: none !important;
}

/* No separate backing-card or artificial shadow layer */
.ms-criticism-hero .wp-block-post::after {
  content: none !important;
  display: none !important;
}

/* Live article content stays above the paper */
.ms-criticism-hero .wp-block-post > * {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Reset inherited Query Loop positioning */
.ms-criticism-hero .wp-block-post-date,
.ms-criticism-hero .wp-block-post-title,
.ms-criticism-hero .wp-block-post-featured-image,
.ms-criticism-hero .wp-block-post-excerpt {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Date + memo masthead */
.ms-criticism-hero .wp-block-post-date {
  order: -1 !important;
  width: 68% !important;
  max-width: 68% !important;
  text-align: left !important;

  font-family: "Courier Prime", "Courier New", monospace !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #61584f !important;
  opacity: 0.75 !important;
}

.ms-criticism-hero .wp-block-post-date::before {
  content: "MODESCRIPT / CRITICISM" !important;
  display: block !important;
  margin: 0 0 6px !important;
  padding: 0 0 6px !important;
  border-bottom: 1px solid rgba(44,39,32,0.28) !important;

  font-family: "Courier Prime", "Courier New", monospace !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #403a34 !important;
  opacity: 0.82 !important;
}

/* Headline */
.ms-criticism-hero .wp-block-post-title {
  width: 72% !important;
  max-width: 72% !important;
  text-align: center !important;

  font-size: clamp(30px, 1.8vw, 36px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  color: #211e1a !important;
  background: transparent !important;
}

.ms-criticism-hero .wp-block-post-title a {
  color: #211e1a !important;
  text-decoration: none !important;
  background: transparent !important;
}

.ms-criticism-hero .wp-block-post-title::before {
  content: "INTERNAL MEMORANDUM  /  SUBJECT UNDER REVIEW" !important;
  display: block !important;
  margin: 0 0 7px !important;

  font-family: "Courier Prime", "Courier New", monospace !important;
  font-size: 7px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: rgba(64,58,52,0.70) !important;
}

.ms-criticism-hero .wp-block-post-title::after {
  content: "" !important;
  display: block !important;
  width: 42% !important;
  height: 1px !important;
  margin: 9px auto 0 !important;
  background: rgba(44,39,32,0.24) !important;
}

/* Featured image */
.ms-criticism-hero .wp-block-post-featured-image {
  display: block !important;
  width: 64% !important;
  max-width: 64% !important;
  margin-top: 6px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  filter: none !important;
  background: transparent !important;
}

.ms-criticism-hero .wp-block-post-featured-image img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  border: 1px solid rgba(44,39,32,0.16) !important;
  box-shadow:
    0 1px 1px rgba(23,19,22,0.05),
    0 3px 7px rgba(23,19,22,0.08) !important;
}

/* Excerpt */
.ms-criticism-hero .wp-block-post-excerpt {
  width: 60% !important;
  max-width: 60% !important;
  text-align: center !important;
  color: #4c453e !important;
  background: transparent !important;
}

.ms-criticism-hero .wp-block-post-excerpt p {
  margin: 0 !important;
  font-size: clamp(11px, 0.9vw, 15px) !important;
  line-height: 1.35 !important;
}

.ms-criticism-hero .wp-block-post-excerpt::after {
  content: "FOR INTERNAL CIRCULATION" !important;
  display: block !important;
  margin-top: 10px !important;

  font-family: "Courier Prime", "Courier New", monospace !important;
  font-size: 7px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: rgba(64,58,52,0.52) !important;
}

/* Mobile */
@media (max-width: 767px) {
  .ms-criticism-hero .wp-block-post {
    width: min(92vw, 430px) !important;
    max-width: 430px !important;
    padding: 18% 0 8% !important;
    gap: 8px !important;
  }

  .ms-criticism-hero .wp-block-post-title {
    font-size: 22px !important;
  }

  .ms-criticism-hero .wp-block-post-excerpt p {
    font-size: 11px !important;
  }
}

/* =========================================================
   NEW HOMEPAGE — FEATURED ARTICLE ORDER + CREATIVE SLIT REALIGNMENT
   Both hero articles: date → title → image → excerpt
   Creative slit centers are locked to the clipped image corners.
   ========================================================= */

/* Featured article order */
.ms-main-note-loop.ms-creative-hero .wp-block-post-date,
.ms-criticism-hero .wp-block-post-date {
  order: 1 !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-title,
.ms-criticism-hero .wp-block-post-title {
  order: 2 !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image,
.ms-criticism-hero .wp-block-post-featured-image {
  order: 3 !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-excerpt,
.ms-criticism-hero .wp-block-post-excerpt {
  order: 4 !important;
}

/* Criticism hero: keep the live article to only date, title, image, excerpt */
.ms-criticism-hero .wp-block-post-date::before,
.ms-criticism-hero .wp-block-post-title::before,
.ms-criticism-hero .wp-block-post-title::after,
.ms-criticism-hero .wp-block-post-excerpt::after {
  content: none !important;
  display: none !important;
}

/* Creative hero: make sure the clipped mat really hides the two image corners */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image > a {
  overflow: hidden !important;
}

/* Re-center each slit exactly over the diagonal cut.
   Slit length = tuck + 32px, giving 16px overhang at each end. */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::before,
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::after {
  width: calc(var(--ms-tuck) + 32px) !important;
  height: 3px !important;
  transform: rotate(45deg) !important;
  transform-origin: center center !important;
  z-index: 10 !important;
}

/* Top-right slit */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::before {
  top: calc((var(--ms-tuck) / 2) - 1.5px) !important;
  right: -16px !important;
  bottom: auto !important;
  left: auto !important;
}

/* Bottom-left slit */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::after {
  bottom: calc((var(--ms-tuck) / 2) - 1.5px) !important;
  left: -16px !important;
  top: auto !important;
  right: auto !important;
}

/* =========================================================
   CREATIVE HERO — RAISE CONTENT + LONGER CORNER SLITS
   ========================================================= */

/* Move the full date → title → image → excerpt stack higher inside the folio */
.ms-main-note-loop.ms-creative-hero .wp-block-post {
  padding-top: 9.5% !important;
}

/* Let the slits extend farther beyond the clipped image corners */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::before,
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::after {
  width: calc(var(--ms-tuck) + 52px) !important;
}

/* Keep the longer slits centered over the same diagonal cuts */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::before {
  right: -26px !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::after {
  left: -26px !important;
}

/* =========================================================
   CREATIVE HERO — RESTORE IVORY PHOTO MAT AROUND CLIPPED CORNERS
   Keep the actual photo safely inside the diagonal corner cuts.
   ========================================================= */

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image > a {
  /* Half the tuck depth is the minimum needed to keep the photo
     itself clear of the diagonal cuts; +2px gives a little breathing room. */
  padding: calc((var(--ms-tuck) / 2) + 2px) !important;
  background: #eeeae4 !important;
  border: 1px solid #80002059 !important;
  box-sizing: border-box !important;
}

/* Make sure the photo itself stays rectangular inside the ivory mat */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  clip-path: none !important;
}

/* =========================================================
   CREATIVE HERO — APPLY IVORY MAT TO THE IMAGE ITSELF
   This is more reliable than styling only the optional link wrapper.
   ========================================================= */

/* Neutralize the optional link wrapper so it cannot create a second mat */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image > a {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
}

/* The image element now carries the ivory mount and the clipped outer corners */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;

  padding: calc((var(--ms-tuck) / 2) + 3px) !important;
  background: #eeeae4 !important;
  border: 1px solid #80002059 !important;
  border-radius: 0 !important;

  clip-path: polygon(
    0 0,
    calc(100% - var(--ms-tuck)) 0,
    100% var(--ms-tuck),
    100% 100%,
    var(--ms-tuck) 100%,
    0 calc(100% - var(--ms-tuck))
  ) !important;
}

/* =========================================================
   CREATIVE HERO — THINNER MAT + FULL IMAGE PRESERVATION
   Smaller tucked corners keep the photo itself uncropped.
   ========================================================= */

/* Use a smaller corner tuck for the homepage Creative hero only */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image {
  --ms-tuck: 16px !important;
}

/* Keep a slim ivory mount without squeezing/cropping the photograph */
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: #eeeae4 !important;
  border: 1px solid #80002059 !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--ms-tuck)) 0,
    100% var(--ms-tuck),
    100% 100%,
    var(--ms-tuck) 100%,
    0 calc(100% - var(--ms-tuck))
  ) !important;
}

/* =========================================================
   CREATIVE HERO — NATURALISTIC SLITS
   Slightly shorter, thinner, muted warm charcoal.
   ========================================================= */

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::before,
.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::after {
  width: calc(var(--ms-tuck) + 34px) !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    rgba(58,52,47,0.18) 0%,
    rgba(58,52,47,0.62) 18%,
    rgba(48,43,39,0.72) 50%,
    rgba(58,52,47,0.62) 82%,
    rgba(58,52,47,0.18) 100%
  ) !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::before {
  right: -17px !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image::after {
  left: -17px !important;
}

/* =========================================================
   NEW HOMEPAGE — DISTINCT COLUMN READING ORDER
   Creative: date → image → title → excerpt
   Criticism: date → title → image → excerpt
   ========================================================= */

/* Creative prioritizes the visual object */
.ms-main-note-loop.ms-creative-hero .wp-block-post-date {
  order: 1 !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-featured-image {
  order: 2 !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-title {
  order: 3 !important;
}

.ms-main-note-loop.ms-creative-hero .wp-block-post-excerpt {
  order: 4 !important;
}

/* Criticism prioritizes the argument before the supporting image */
.ms-criticism-hero .wp-block-post-date {
  order: 1 !important;
}

.ms-criticism-hero .wp-block-post-title {
  order: 2 !important;
}

.ms-criticism-hero .wp-block-post-excerpt {
  order: 4 !important;
}

.ms-criticism-hero .wp-block-post-featured-image {
  order: 3 !important;
}

/* =========================================================
   CRITICISM HERO — HANDWRITTEN TITLE
   Reenie Beanie via Google Fonts
   ========================================================= */

.ms-criticism-hero .wp-block-post-title,
.ms-criticism-hero .wp-block-post-title a {
  font-family: "Oooh Baby", cursive !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* =========================================================
   CRITICISM HERO — ARCHIVE-STYLE FEATURED IMAGE
   Applies the old archive paper border + clear corner tape
   ONLY to the Criticism featured image.
   ========================================================= */

.ms-criticism-hero .wp-block-post-featured-image {
  position: relative !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.38) !important;
  box-shadow:
    0 0 0 1px rgba(140, 115, 95, 0.06),
    0 4px 14px rgba(70, 50, 35, 0.08) !important;
  overflow: visible !important;
}

.ms-criticism-hero .wp-block-post-featured-image img {
  border: 0 !important;
  box-shadow: none !important;
}

/* clear tape — top-left corner */
.ms-criticism-hero .wp-block-post-featured-image::before {
  content: "" !important;
  position: absolute !important;
  width: 78px !important;
  height: 20px !important;
  top: -4px !important;
  left: -18px !important;
  background: rgba(255, 255, 255, 0.34) !important;
  border: 1px solid rgba(190, 175, 150, 0.12) !important;
  box-shadow:
    0 1px 3px rgba(80, 60, 45, 0.08),
    inset 0 0 8px rgba(255, 255, 255, 0.25) !important;
  transform: rotate(-45deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* clear tape — bottom-right corner */
.ms-criticism-hero .wp-block-post-featured-image::after {
  content: "" !important;
  position: absolute !important;
  width: 78px !important;
  height: 20px !important;
  bottom: -5px !important;
  right: -18px !important;
  background: rgba(255, 255, 255, 0.34) !important;
  border: 1px solid rgba(190, 175, 150, 0.12) !important;
  box-shadow:
    0 1px 3px rgba(80, 60, 45, 0.08),
    inset 0 0 8px rgba(255, 255, 255, 0.25) !important;
  transform: rotate(-45deg) !important;
  transform-origin: center !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* =========================================================
   NEW HOMEPAGE — LOWER CARD PAIRS
   Tighten each two-card pair and give text more usable width.
   Scoped only to page 2750; desktop/tablet only.
   ========================================================= */
@media (min-width: 768px) {
  .page-id-2750 .ms-note-loop .wp-block-post-template {
    gap: 10px !important;
  }

  .page-id-2750 .ms-note-loop .wp-block-post {
    padding: 30px 10px 30px !important;
  }

  .page-id-2750 .ms-note-loop .wp-block-post-date {
    padding-left: 20px !important;
    padding-right: 10px !important;
  }

  .page-id-2750 .ms-note-loop .wp-block-post-title {
    padding-left: 24px !important;
    padding-right: 16px !important;
  }

  .page-id-2750 .ms-note-loop .wp-block-post-excerpt {
    padding-left: 26px !important;
    padding-right: 18px !important;
  }
}

/* NEW HOMEPAGE — lower cards: slightly tighter inner margins */
@media (min-width: 768px) {
  .page-id-2750 .ms-note-loop .wp-block-post {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .page-id-2750 .ms-note-loop .wp-block-post-date {
    padding-left: 18px !important;
    padding-right: 8px !important;
  }

  .page-id-2750 .ms-note-loop .wp-block-post-title {
    padding-left: 20px !important;
    padding-right: 12px !important;
  }

  .page-id-2750 .ms-note-loop .wp-block-post-excerpt {
    padding-left: 22px !important;
    padding-right: 14px !important;
  }
}


/* NEW HOMEPAGE — widen the center gutter between Creative and Criticism pairs */
@media (min-width: 768px) {
  .page-id-2750 .wp-block-columns:has(> .wp-block-column .ms-note-loop) {
    column-gap: 100px !important;
  }
}

/* =========================================================
   ARCHIVE PAGE — SCROLLABLE NOTES INSIDE THE FOLDER
   Apply class "ms-archive-scroll" to the shared container
   holding the Creative + Criticism archive columns.
   ========================================================= */
@media (min-width: 768px) {
  .page-id-2909 .ms-archive-scroll {
    max-height: 650px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    box-sizing: border-box !important;
    width: 100% !important;
    padding-top: 0 !important;

  }

  .page-id-2909 .ms-archive-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 0, 32, 0.28) transparent;
  }

  .page-id-2909 .ms-archive-scroll::-webkit-scrollbar {
    width: 7px;
  }

  .page-id-2909 .ms-archive-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  .page-id-2909 .ms-archive-scroll::-webkit-scrollbar-thumb {
    background: rgba(128, 0, 32, 0.24);
    border-radius: 999px;
  }

  .page-id-2909 .ms-archive-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 0, 32, 0.36);
  }
}

/* Mobile: avoid nested scrolling; let the archive expand naturally */
@media (max-width: 767px) {
  .page-id-2909 .ms-archive-scroll {
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0 !important;
  }
}

/* =========================================================
   ARCHIVE PAGE — PRESERVE ORIGINAL FOLDER SCALE
   Restore the pre-scroll background sizing while keeping the
   inner archive area scrollable.
   ========================================================= */
@media (min-width: 768px) {
  .page-id-2909 .wp-block-group:has(.ms-archive-scroll),
  .page-id-2909 .mobile-no-pad-bg {
    background-size: 100% auto !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }

  .page-id-2909 .ms-archive-scroll {
    width: auto !important;
  }
}

/* =========================================================
   ARCHIVE PAGE — STICKY H2 CATEGORY HEADINGS
   Keep the new Creative / Criticism H2 headings fixed while scrolling.
   No banner, no fade overlay.
   ========================================================= */
@media (min-width: 768px) {
  .page-id-2909 .ms-archive-scroll > .wp-block-column > h2.wp-block-heading {
    position: sticky !important;
    top: 8px !important;
    z-index: 50 !important;
    background: transparent !important;
  }
}










































/* =========================================================
   ABOUT PAGE — BORDERLESS COTTON LETTER (OCT 2026)
   Real CSS paper rather than a fixed-size paper PNG.
   Adjusts to text naturally; shared 1-degree tilt.
   Keeps the envelope layer behind the letter.
   ========================================================= */
@media (min-width: 701px) {
  .about-paper {
    box-sizing: border-box !important;
    width: 850px !important;
    max-width: calc(100vw - 48px) !important;
    min-height: 840px !important;
    margin: 72px auto 100px !important;
    padding: 235px 105px 55px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
    position: relative !important;
    transform: rotate(1deg) !important;
    transform-origin: center center !important;
  }
}

/* Physical ivory paper, fine irregular cotton grain, and logo
   all share the same rotation as the text via .about-paper. */
.about-paper::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  background-color: #fcfbf8 !important;
  background-image:
    url("https://modescript.com/wp-content/uploads/2026/10/modescript_logo_transparent.png"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22480%22%3E%3Cfilter%20id%3D%22paper%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.42%20.65%22%20numOctaves%3D%224%22%20seed%3D%2217%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%20.48%200%200%200%200%20.42%200%200%200%200%20.33%20.33%200%200%200%20-.07%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23paper)%22%2F%3E%3C%2Fsvg%3E") !important;
  background-size: 96px 96px, 480px 480px !important;
  background-position: center 82px, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 3px 7px 16px rgba(45, 32, 30, 0.075) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Typography affects only the writing, not paper dimensions. */
.about-paper p {
  font-size: 19px !important;
  line-height: 1.65 !important;
  color: #2a211d !important;
}

/* Mobile: borderless cotton letter, responsive to its contents. */
@media (max-width: 700px) {
  .about-paper {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 38px 18px 70px !important;
    padding: 165px 26px 48px !important;
    position: relative !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: isolate;
    transform: rotate(1deg) !important;
    transform-origin: center center !important;
  }

  .about-paper::before {
    content: "" !important;
    background-size: 72px 72px, 480px 480px !important;
    background-position: center 48px, 0 0 !important;
  }

  .about-paper p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }
}

/* =========================================================
   ABOUT PAGE — BURGUNDY ENVELOPE BEHIND LETTER (OCT 2026)
   Half of envelope peeks out from the left; paper remains
   the foreground layer. No change to existing paper or text.
   ========================================================= */
@media (min-width: 701px) {
  .about-paper::after {
    content: "" !important;
    position: absolute !important;
    width: 840px !important;
    height: 536px !important;
    left: -430px !important;
    top: 47% !important;
    transform: translateY(-50%) rotate(-20deg) !important;
    transform-origin: center center !important;
    background: url("https://modescript.com/wp-content/uploads/2026/10/modescript_burgundy_envelope_transparent.png") center center / contain no-repeat !important;
    pointer-events: none !important;
    z-index: -2 !important;
  }
}

@media (max-width: 700px) {
  .about-paper::after {
    content: none !important;
  }
}

/* =========================================================
   ABOUT PAGE — EDITABLE LETTER FONT
   Change "Fasthand" below to another imported font to test.
   Scoped ONLY to the About letter; no site-wide font changes.
   Fasthand is already loaded by the @import at the top.
   ========================================================= */
/* Edit ONLY this value:
   inherit = WordPress Customizer's font
   "Fasthand", cursive = handwritten
   "Oooh Baby", cursive = alternate handwriting */
.about-paper {
  --ms-about-font: inherit;
}

.about-paper,
.about-paper p,
.about-paper p strong,
.about-paper p a {
  font-family: var(--ms-about-font) !important;
}

/* =========================================================
   ABOUT PAGE — SPECIAL TEXT FONTS (OCT 2026)
   Change the quoted font name to adjust the opening paragraph,
   the closing tagline, and the email. Body text remains unchanged.
   Sue Ellen Francisco is already imported at the top.
   ========================================================= */
.about-paper {
  --ms-about-special-font: "Oooh Baby", cursive;
}

/* Opening statement, including bold spans.
   Descendant selectors support WordPress's inner block wrappers. */
.about-paper p:first-of-type,
.about-paper p:first-of-type strong {
  font-family: var(--ms-about-special-font) !important;
}

/* Closing tagline — next-to-last paragraph */
.about-paper p:nth-last-of-type(2),
.about-paper p:nth-last-of-type(2) strong {
  font-family: var(--ms-about-special-font) !important;
}

/* Email — last paragraph and its link */
.about-paper p:last-of-type,
.about-paper p:last-of-type a,
.about-paper a[href^="mailto:"] {
  font-family: var(--ms-about-special-font) !important;
}

/* =========================================================
   ABOUT PAGE — SPECIAL TEXT FONT SIZES
   EDIT THESE THREE VALUES independently.
   These defaults match the current 19px desktop paragraph size.
   ========================================================= */
.about-paper {
  --ms-about-opening-size: 28px; /* first paragraph */
  --ms-about-tagline-size: 28px; /* second-to-last paragraph */
  --ms-about-email-size:   28px; /* last paragraph */
}

.about-paper p:first-of-type,
.about-paper p:first-of-type strong {
  font-size: var(--ms-about-opening-size) !important;
}

.about-paper p:nth-last-of-type(2),
.about-paper p:nth-last-of-type(2) strong {
  font-size: var(--ms-about-tagline-size) !important;
}

.about-paper p:last-of-type,
.about-paper p:last-of-type a,
.about-paper a[href^="mailto:"] {
  font-size: var(--ms-about-email-size) !important;
}

/* Retain current smaller mobile defaults, independently editable. */
@media (max-width: 700px) {
  .about-paper {
    --ms-about-opening-size: 16px;
    --ms-about-tagline-size: 16px;
    --ms-about-email-size:   16px;
  }
}

/* =========================================================
   ABOUT PAGE — SOCIAL ICONS ALIGN WITH EMAIL
   Desktop only. Raises the WordPress Social Icons block
   without changing its right alignment or icon styling.
   Adjust -70px to fine-tune vertical positioning.
   ========================================================= */
@media (min-width: 701px) {
  .about-paper .wp-block-social-links {
    transform: translateY(-70px) !important;
  }
}



/* =========================================================
   SUBSCRIBE PAGE — BURGUNDY WRITING PAD (OCT 2026)
   WordPress setup:
   1. Add an outer Group block with Additional CSS class:
      ms-subscribe-pad
   2. Place the heading, copy, and existing email form
      inside that Group so they sit over the blank paper.
   Scoped to this class; does not change other pages.
   ========================================================= */
.ms-subscribe-pad {
  box-sizing: border-box !important;
  width: min(100%, 860px) !important;
  aspect-ratio: 573 / 686;
  margin-left: auto !important;
  margin-right: auto !important;
  background-color: transparent !important;
  background-image: url("https://modescript.com/wp-content/uploads/2026/10/d68042ee-eb54-44fc-b5cd-613141815e23-1.png") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% 100% !important;
  padding: 16% 15% 13% !important;
}
/* Mobile: lengthen the pad to leave room for readable
   subscription copy and the email field. */
@media (max-width: 600px) {
  .ms-subscribe-pad {
    aspect-ratio: auto;
    min-height: 610px;
    padding: 115px 12% 85px !important;
  }
}





/* =========================================================
   SUBSCRIBE PAGE — OPENING LINE IN OOOH BABY
   Matches the site's existing imported handwriting font.
   ========================================================= */
.ms-subscribe-pad > p:first-of-type,
.ms-subscribe-pad > p:first-of-type strong,
.ms-subscribe-pad > .wp-block-group__inner-container > p:first-of-type,
.ms-subscribe-pad > .wp-block-group__inner-container > p:first-of-type strong {
  font-family: "Oooh Baby", cursive !important;
  font-size: clamp(28px, 3vw, 36px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}