@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&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 1px 2px 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 22px 30px rgba(70,45,35,0.20))
    drop-shadow(0 8px 12px 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: 1300px) {
  .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: clamp(10px, 2.5vw, 34px) !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;
}