/* ==========================================================================
   Ria Minds: electric lime collage theme
   ========================================================================== */

:root {
  /* Colour blocks */
  --lime: #e3fd2e;          /* signature electric lime (header, main blocks) */
  --lime-pale: #e8fc5e;     /* softer lime (hero and intro blocks) */
  --paper: #edf5b0;         /* translucent paper panels */
  --off-white: #f6f8f3;     /* cards and footer */

  /* Ink */
  --ink: #0b140d;           /* near-black text and buttons */
  --ink-soft: #2a2f2a;
  --button-shadow: #6e5e58; /* warm taupe offset under black buttons */
  --teal: #0b5371;          /* accent (form submit, icons, links) */

  /* Type */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Josefin Slab", Georgia, serif;

  /* Shadows */
  --heading-shadow: 1px 3px 3px rgba(0, 0, 0, 0.35);
  --card-shadow: 0 14px 18px -10px rgba(0, 0, 0, 0.55);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1120px;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; }

p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px;
}
.skip-link:focus { top: 16px; }

.center { text-align: center; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 0.7em 1.6em;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn--dark {
  background: var(--ink);
  color: #fff;
  box-shadow: 7px 7px 0 var(--button-shadow);
}
.btn--dark:hover { transform: translate(2px, 2px); box-shadow: 5px 5px 0 var(--button-shadow); }

.btn--lime {
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  padding: 0.45em 1.2em;
  box-shadow: 0 12px 10px -8px rgba(0, 0, 0, 0.6);
}
.btn--lime:hover { transform: translateY(-1px); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid var(--teal);
  border-radius: 0;
}
.btn--outline:hover { background: var(--teal); color: #fff; }

.btn--teal {
  background: var(--teal);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  border-radius: 0;
  padding: 0.7em 3em;
}
.btn--teal:hover { background: #083d53; }

.btn--wide { min-width: 13em; }

.btn--disabled,
.btn--disabled:hover {
  background: #4a504a;
  box-shadow: 7px 7px 0 #a59a95;
  transform: none;
  cursor: not-allowed;
  font-size: 0.95rem;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--lime);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.site-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.site-header__cta { justify-self: start; font-size: 1.1rem; padding: 0.55em 1.4em; }

.site-header__brand {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1;
}

.site-nav { justify-self: end; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2vw, 32px); align-items: center; }
.site-nav a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 3px solid transparent;
}
.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.site-nav__cta { display: none; }

.menu-toggle {
  display: none;
  justify-self: end;
  width: 48px; height: 44px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 40px; height: 4px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle__bars { position: relative; margin: 0 auto; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -12px; }
.menu-toggle__bars::after { top: 12px; width: 30px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(12px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { width: 40px; transform: translateY(-12px) rotate(-45deg); }

/* ---------- Sections and colour blocks ---------- */

.section {
  position: relative;
  padding: clamp(56px, 8vw, 110px) var(--gutter);
  overflow: hidden; /* decorative cut-outs bleed past cards but never cause page scroll */
}
@supports (overflow: clip) { .section { overflow: clip; } }

.section > .heading,
.section > p { position: relative; z-index: 2; } /* text always above cut-outs */

.section--lime { background: var(--lime); }
.section--pale { background: var(--lime-pale); }
.section--white { background: var(--off-white); }

.heading { font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.heading--shadow { text-shadow: var(--heading-shadow); }
.heading--caps {
  font-family: var(--font-brand);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: clamp(32px, 5vw, 72px);
}

/* Cards and panels */

.card { position: relative; z-index: 2; }
.card--white { background: var(--off-white); padding: clamp(32px, 6vw, 72px) clamp(24px, 7vw, 100px); }

.panel { position: relative; z-index: 2; }
.panel--paper,
.panel--glass {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  /* subtle paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel--paper { background-color: var(--paper); }
.panel--glass {
  background-color: rgba(237, 245, 176, 0.82);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

/* Little screws on the corners of the paper panels */
.screw {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, #b7b7b2 30%, #6d6d68 75%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.screw::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 5px; height: 1px;
  background: #555; transform: rotate(-35deg);
}
.screw--tl { top: 10px; left: 10px; }
.screw--tr { top: 10px; right: 10px; }
.screw--bl { bottom: 10px; left: 10px; }
.screw--br { bottom: 10px; right: 10px; }

/* ---------- Decorative cut-outs ----------
   Photographic objects cut out of the original Wix artwork (transparent WebP).
   Sizes follow their share of the Wix canvas width and are capped near each
   file's native size so they stay sharp. Most sit flush against a section edge,
   as in the original compositions. */

.deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  height: auto;
}

.deco--sprig-top    { width: clamp(150px, 24vw, 360px); top: 0; right: 0; }
.deco--sprig-bottom { width: clamp(120px, 16.7vw, 330px); bottom: 0; right: 0; }
.deco--white-flower { width: clamp(110px, 15.5vw, 240px); left: 0; bottom: clamp(64px, 10vw, 150px); }
.deco--workout      { width: clamp(220px, 32vw, 480px); left: 5.5vw; bottom: clamp(20px, 4vw, 60px); }
.deco--crayons      { width: clamp(80px, 10.5vw, 160px); top: 26%; left: 0; }
.deco--lisianthus   { width: clamp(110px, 17.8vw, 270px); bottom: 0; right: 0; }
.deco--lily         { width: clamp(140px, 20.8vw, 400px); bottom: 0; left: 0; }
.deco--worry-less   { width: clamp(80px, 10vw, 150px); left: 3vw; top: 50%; transform: translateY(-50%); }
.deco--dear-diary   { width: clamp(100px, 12vw, 170px); right: 4vw; top: 22%; }
.deco--red-flower   { width: clamp(70px, 8vw, 115px); right: 9vw; bottom: 10%; }
.deco--script-paper { height: 100%; width: auto; max-width: none; top: 0; left: 0; }

/* ---------- Hero carousel ---------- */

.hero { padding-top: clamp(40px, 5vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }

.carousel { display: flex; flex-direction: column; }
.carousel__slides { order: 1; display: grid; padding-inline: clamp(48px, 7vw, 96px); } /* room for the side arrows */
.carousel__controls { order: 2; }

.hero__stage {
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
}

/* With JS, every slide shares one grid cell (the tallest sets the height, so
   nothing below jumps). The active slide sits in place; the others wait
   off-screen to the right (or left, .is-left), hidden. Changing slide slides
   them horizontally; the hero section clips them, so the page never scrolls
   sideways. Without JS the slides stack. */
.js .carousel__slide { grid-area: 1 / 1; }
.js .carousel__slide:not(.is-active) { visibility: hidden; }
.js .carousel__slide {
  transform: translateX(100vw);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.7s;
}
.js .carousel__slide.is-left { transform: translateX(-100vw); }
.js .carousel__slide.is-active {
  transform: none;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}
.js .carousel__slide.no-transition { transition: none; }
html:not(.js) .carousel__slide + .carousel__slide { margin-top: 48px; }
html:not(.js) .carousel__controls { display: none; }

.hero__portrait {
  grid-column: 2 / span 5;
  grid-row: 1;
  aspect-ratio: 460 / 650;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
/* The photo fills the arch without distortion (object-fit: cover keeps its
   proportions). A slight uniform zoom from the bottom centre keeps any matte
   painted into a photo's own corners (slide 1 has one) outside the arch, so
   the arch's curved edge always shows the photo itself. */
.hero__portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transform-origin: 50% 100%; }

.hero__panel {
  grid-column: 6 / span 7;
  grid-row: 1;
  margin-bottom: 3%;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px);
  text-align: center;
}
.hero__title { font-size: clamp(1.3rem, 2.3vw, 1.75rem); font-weight: 500; margin-bottom: 0.8em; text-wrap: balance; }
.hero__title-line { display: block; }

/* Mirrored slides: photo on the right, panel overlapping it from the left */
.hero__stage--image-right .hero__portrait { grid-column: 7 / span 5; }
.hero__stage--image-right .hero__panel { grid-column: 1 / span 7; }

.hero__quote { margin: 0 auto 1.4em; max-width: 30em; font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.2rem); }
.hero__quote p { margin: 0; }
.hero__quote footer { margin-top: 0.1em; }
.hero__text { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 30em; margin: 0 auto 1.4em; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }

/* Controls: long thin arrows at the sides, dots underneath (as on Wix) */
.carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 40px);
}

.carousel__arrow,
.carousel__dot,
.carousel__toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--teal);
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: clamp(56px, 5vw, 100px);
  height: 44px;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.carousel__arrow--prev { left: max(8px, calc(var(--gutter) - 32px)); }
.carousel__arrow--next { right: max(8px, calc(var(--gutter) - 32px)); }
.carousel__arrow--prev:hover { transform: translate(-4px, -50%); }
.carousel__arrow--next:hover { transform: translate(4px, -50%); }
.carousel__arrow svg { width: 100%; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }

/* The pause button hangs to the right of the dots so the dots stay centred */
.carousel__dotbar { position: relative; }
.carousel__dots { display: flex; gap: 2px; }
.carousel__dot {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
.carousel__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--teal);
  box-sizing: border-box;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.carousel__dot:hover::before { transform: scale(1.2); }
.carousel__dot[aria-current="true"]::before {
  width: 17px;
  height: 17px;
  background: transparent;
}

.carousel__toggle {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid var(--teal);
  border-radius: 50%;
}
.carousel__toggle[hidden] { display: none; }
.carousel__toggle svg { width: 14px; height: 14px; fill: currentColor; }
.carousel__icon-play,
.carousel__toggle.is-paused .carousel__icon-pause { display: none; }
.carousel__toggle.is-paused .carousel__icon-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .js .carousel__slide,
  .js .carousel__slide.is-active { transition: none; }
}

/* ---------- About ---------- */

.about { padding-bottom: clamp(140px, 14vw, 200px); }
.about__card { max-width: 740px; margin: 0 auto; }
.about__card .heading { text-align: center; }
.about__card p { font-size: 1.15rem; }
.about__card .btn { display: table; margin: 1.6em auto 0; }

/* ---------- Journals ---------- */

.journal-grid {
  position: relative; z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 6vw, 72px) clamp(20px, 6vw, 70px);
}

.journal-grid--covers { margin-bottom: clamp(40px, 5vw, 64px); }

.journal-grid__link { display: block; text-decoration: none; transition: transform 0.2s ease; }
.journal-grid__link:hover { transform: translateY(-4px) rotate(-1deg); }

.journal-card__cover {
  border: 2px solid #3a3a3a;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: #fff;
}
.journal-card__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.journals-shop .journal-grid { gap: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px); }
.journal-grid__item { scroll-margin-top: 120px; }
.journal-grid__item .journal-card {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--off-white);
  padding: 18px 18px 30px;
  box-shadow: 8px 8px 0 rgba(11, 20, 13, 0.85);
}
.journal-grid__item:nth-child(3n + 2) .journal-card { transform: translateY(24px); }
.journal-grid__item:target .journal-card { outline: 4px solid var(--teal); outline-offset: 4px; }
.journal-card__title { font-size: 1.3rem; margin: 22px 0 8px; }
.journal-card__text { font-size: 0.98rem; flex: 1; }
.journal-card .btn { align-self: flex-start; margin-top: 8px; }

/* ---------- Page intro (Journals, Blog) ---------- */

.page-intro { text-align: center; padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-intro .heading--caps { margin-bottom: 0.4em; position: relative; z-index: 2; }
.page-intro__text { max-width: 36em; margin: 0 auto 1.2em; font-size: 1.15rem; position: relative; z-index: 2; }
.page-intro--tall { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
/* Journals and Blog: the intro has the same lime as the content below, so the page background is uniform */
.page-journals .page-intro, .page-blog .page-intro { background: var(--lime); }

/* ---------- Blog ---------- */

.post-grid {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 44px);
}
.blog-preview .post-grid { margin-bottom: clamp(40px, 5vw, 64px); }

.post-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  background: var(--off-white);
  box-shadow: 8px 8px 0 rgba(11, 20, 13, 0.85);
}
.post-card:nth-child(even) { transform: rotate(0.6deg); }
.post-card:nth-child(odd) { transform: rotate(-0.4deg); }
.post-card__image { display: block; overflow: hidden; }
.post-card__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.3s ease; }
.post-card:hover .post-card__image img { transform: scale(1.03); }
.post-card__body { padding: 22px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.4em; }
.post-card__title { font-size: 1.4rem; margin-bottom: 0.4em; }
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.post-card__excerpt { flex: 1; }
.post-card__more { font-family: var(--font-display); font-weight: 700; text-decoration: none; }

/* The featured post is wider than the cards below it (up to 160px more) and has a taller image, so it reads as the main article */
.post-card--featured {
  max-width: calc(var(--max) + 160px);
  margin: 0 auto clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  transform: none !important;
}
/* The whole image, at its own proportions (3:2 until it loads), centred when the text is taller */
.post-card--featured .post-card__image { align-self: center; }
.post-card--featured .post-card__image img { aspect-ratio: auto 3 / 2; }
/* Blog page: every article image is shown whole: fitted inside its box (not cropped to fill
   it) and not zoomed on hover (the zoom is clipped by the image link's overflow: hidden) */
.blog-list .post-card__image img { object-fit: contain; }
.blog-list .post-card:hover .post-card__image img { transform: none; }
.post-card--featured .post-card__body {
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
  background-color: var(--paper);
}
.post-card--featured .post-card__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }

.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--ink);
  color: var(--lime);
  border-radius: 2px;
  vertical-align: 1px;
}

/* Article page */

.post__header { text-align: center; padding-bottom: clamp(48px, 6vw, 80px); }
.post__meta { position: relative; z-index: 2; font-size: 0.95rem; }
.post__meta a { font-weight: 500; }
.post__title { position: relative; z-index: 2; max-width: 18em; margin: 0.3em auto 0.4em; font-size: clamp(2rem, 5vw, 3.4rem); }
.post__standfirst { position: relative; z-index: 2; max-width: 34em; margin: 0 auto; font-size: 1.2rem; }

.post__body-wrap { padding-top: 0; }
.post__figure {
  position: relative; z-index: 3;
  max-width: 900px;
  margin: calc(-1 * clamp(24px, 4vw, 48px)) auto 0;
  box-shadow: 8px 8px 0 rgba(11, 20, 13, 0.85);
}
.post__figure img { width: 100%; aspect-ratio: auto 3 / 2; } /* the whole cover, at its own proportions (3:2 until it loads) */

.prose {
  max-width: 780px;
  margin: -24px auto 0;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.8;
}
.prose > :first-child { margin-top: 0.6em; }
.prose h2 { font-size: 1.7rem; margin: 1.6em 0 0.5em; }
.prose h3 { font-size: 1.35rem; margin: 1.4em 0 0.4em; }
.prose a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 1em 1.4em;
  background: var(--lime);
  border-left: 6px solid var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { margin: 1.6em auto; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: 0.4em; }

/* ---------- Join the community ---------- */

.join__panel {
  max-width: 1110px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 6vw, 60px) clamp(48px, 7vw, 100px);
  text-align: center;
}
.join__title { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 0.3em; }
.join__subtitle { font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.5rem); margin-bottom: 1.6em; }
.join__form { text-align: left; max-width: 970px; margin: 0 auto; }
.join__row { display: flex; }
.join__row .field__input { flex: 1; min-width: 0; }
.join__row .btn { flex: 0 0 auto; min-width: 9em; margin-left: -1px; }

/* ---------- Forms ---------- */

.field__label { display: block; font-size: 0.95rem; font-weight: 400; margin-bottom: 4px; }
.field__input {
  width: 100%;
  font: inherit;
  font-weight: 400;
  padding: 10px 12px;
  background: var(--off-white);
  color: var(--ink);
  border: 1.5px solid var(--ink-soft);
  border-radius: 0;
}
.field__input:focus { outline: 3px solid var(--teal); outline-offset: 0; }
textarea.field__input { resize: vertical; min-height: 110px; }

/* ---------- Contact ---------- */

.contact { padding-bottom: clamp(110px, 15vw, 220px); }
.contact .deco--sprig-bottom { width: clamp(110px, 13vw, 250px); }
.contact__inner {
  position: relative; z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contact__list { list-style: none; padding: 0; margin: 1.4em 0 0; }
.contact__list li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1.2em; font-size: 1.05rem; }
.contact__list a { text-decoration: none; }
.contact__list a:hover { text-decoration: underline; }
.icon { flex: 0 0 auto; width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.6; margin-top: 2px; }
.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-top: clamp(0px, 9vw, 100px);
}
.field--full { grid-column: 1 / -1; }
.contact__submit { text-align: right; }

/* ---------- Footer ---------- */

.site-footer { background: var(--off-white); padding: clamp(48px, 7vw, 90px) var(--gutter) 28px; }
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.site-footer__inner > div:nth-child(2) { justify-self: center; }
.site-footer__inner > div:nth-child(3) { justify-self: end; }
.site-footer__heading { font-family: var(--font-body); font-weight: 400; font-size: 1.6rem; margin-bottom: 1em; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 0.7em; }
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer .underline { text-decoration: underline; }
.site-footer__label { font-weight: 500; margin-bottom: 0.2em; }
.site-footer__copy { max-width: 1200px; margin: 48px auto 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__cta { display: none; }
  .site-header__brand { justify-self: start; }

  .menu-toggle { display: block; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    justify-self: stretch;
    background: var(--lime);
    border-top: 2px solid var(--ink);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
    padding: 16px var(--gutter) 28px;
  }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-nav a:not(.btn) { font-size: 1.4rem; display: inline-block; padding: 6px 0; }
  .site-nav__cta { display: block; margin-top: 14px; }
}

/* Featured blog card: image above the text below about 1120px, where the text
   panel would be taller than the whole (uncropped) image beside it */
@media (max-width: 1120px) {
  .post-card--featured { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
  /* Hero: stack portrait and panel, keep a gentle overlap */
  /* Hero: image above the panel, no overlap. The arrows stay at the far
     sides, level with the middle of the photo, in the space beside it. */
  .hero__stage { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
  .hero__portrait { width: 72%; margin: 0 auto; }
  .hero__panel { margin: 0; }
  .carousel__slides { padding-inline: 0; }
  .carousel__arrow {
    width: 44px;
    /* hero top padding + half the photo height (72% of the stage, 650/460 tall) */
    top: calc(40px + min(520px, 100vw - 2 * var(--gutter)) * 0.5087);
  }
  .carousel__arrow--prev { left: 6px; }
  .carousel__arrow--next { right: 6px; }

  .journal-grid { grid-template-columns: repeat(2, 1fr); }
  .journal-grid__item:nth-child(3n + 2) .journal-card { transform: none; }
  .journal-grid__item:nth-child(even) .journal-card { transform: translateY(18px); }

  .contact__inner { grid-template-columns: 1fr; gap: 12px; }
  .contact__form { margin-top: 0; }

  .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__inner > div:nth-child(n) { justify-self: start; }

  /* Decorations: smaller, tucked into corners, clear of the text */
  .deco--crayons { top: auto; bottom: 0; width: 52px; }
  .journals-preview { padding-bottom: 100px; }
  .journals-shop { padding-top: 150px; padding-bottom: 200px; }
  .contact { padding-bottom: 150px; }
  .contact .deco--sprig-bottom { width: 100px; }
  .deco--lisianthus { top: 0; bottom: auto; width: 96px; }
  .deco--sprig-top { width: 130px; }
  .deco--sprig-bottom { width: 110px; }
  .deco--white-flower { width: 96px; bottom: auto; top: 8px; }
  .deco--workout { width: 250px; left: 50%; transform: translateX(-50%); bottom: 36px; }
  .deco--lily { width: 130px; }
  .page-intro { padding-top: 132px; }
  .deco--worry-less { width: 62px; top: 14px; left: 16px; transform: none; }
  .deco--dear-diary { width: 110px; top: 40px; right: 16px; }
  .deco--red-flower { display: none; }
  .deco--script-paper { height: 120px; }
  .journals-preview .heading--caps,
  .page-intro .heading--caps { padding: 0 40px; }
  .about { padding-bottom: 130px; }
}

@media (max-width: 520px) {
  body { font-size: 1rem; }
  .card--white { padding: 32px 22px; }
  .about__card p { font-size: 1.02rem; }
  .journal-grid { gap: 32px 16px; }
  .journals-shop .journal-grid { grid-template-columns: 1fr; max-width: 380px; }
  .journal-grid__item:nth-child(n) .journal-card { transform: none; }
  .join__row { flex-direction: column; gap: 10px; }
  .join__row .btn { margin-left: 0; }
  .contact__form { grid-template-columns: 1fr; }
  .contact__submit { text-align: left; }
  .contact__submit .btn { width: 100%; }
  .prose { font-size: 1.05rem; margin-top: -12px; }
}