/* Innerpattern — editorial layer. Added 2026-08-05.
   Adds the layout devices that make a page feel designed rather than typeset:
   full-bleed image sections, alternating colour bands, layered compositions,
   and a calligraphic display accent.

   Loaded after site.css and anim.css. Purely additive — existing pages keep working
   if none of these classes are used. */

/* ---- Script accent ------------------------------------------------------
   Brandbook (updated 2026-08-05) permits a script face for SHORT display phrases only:
   2–5 words, sitting above or beside a real heading. Never body copy, never buttons,
   never labels, never disclaimers. Anything a customer must read quickly stays in Inter. */
@import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");

:root {
  --font-script: "Sacramento", "Brush Script MT", cursive;
}

.script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 76px);
  line-height: 1;
  color: var(--block-taupe, #B1988D);
  /* Script faces sit high in their em box; this pulls the following heading up
     so the pair reads as one unit rather than two stacked lines. */
  margin-bottom: -0.15em;
  display: block;
}
.script.sm { font-size: clamp(28px, 3.5vw, 44px); }
.script.on-dark { color: var(--block-blush-soft, #EFDDD5); }
.script.on-image { color: var(--canvas, #F7F1E8); }

/* ---- Full-bleed sections -----------------------------------------------
   .sections uses a flex column with a max width; these break out of it. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
}

/* ---- Hero: three-panel image collage with text on top ------------------- */
.hero-collage {
  position: relative;
  min-height: min(78vh, 760px);
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  overflow: hidden;
}
.hero-collage > figure {
  margin: 0;
  overflow: hidden;
  background: var(--block-taupe-soft, #E3D6CD);
}
.hero-collage > figure img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-collage__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  /* A soft scrim keeps text legible over any photograph without darkening it
     into a different mood. Tuned light on purpose — the brand is not moody. */
  background: linear-gradient(
    to bottom,
    rgba(87, 82, 74, .10) 0%,
    rgba(87, 82, 74, .34) 45%,
    rgba(87, 82, 74, .18) 100%
  );
}
.hero-collage__text .d-xl,
.hero-collage__text .lede {
  color: var(--canvas, #F7F1E8);
  max-width: 22ch;
  margin: 0 auto;
  text-shadow: 0 1px 24px rgba(87, 82, 74, .35);
}
.hero-collage__text .lede { max-width: 46ch; }

/* ---- Colour bands -------------------------------------------------------
   One band per narrative beat. Always return to canvas between two bands —
   that alternation is what gives the page rhythm. */
.band {
  padding: clamp(64px, 9vw, 128px) 0;
  position: relative;
}
.band.taupe  { background: var(--block-taupe-soft,  #E3D6CD); }
.band.blush  { background: var(--block-blush-soft,  #EFDDD5); }
.band.sage   { background: var(--block-sage-soft,   #C9D2C0); }
.band.cream  { background: var(--block-cream,       #F4ECD6); }
.band.deep   { background: var(--block-taupe,       #B1988D); color: var(--canvas, #F7F1E8); }
.band.deep .body, .band.deep .lede, .band.deep .sub { color: var(--canvas, #F7F1E8); }

/* Band with a photographic background instead of a flat colour. */
.band.photo { background: var(--block-taupe-soft, #E3D6CD); overflow: hidden; }
.band.photo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.band.photo > .wrap { position: relative; z-index: 1; }
.band.photo::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(247, 241, 232, .58);
  z-index: 0;
}
.band.photo.dark::after { background: rgba(87, 82, 74, .48); }
.band.photo.dark .wrap, .band.photo.dark .wrap * { color: var(--canvas, #F7F1E8); }

/* ---- Layered composition -----------------------------------------------
   Switzer's signature move: a card or list that overlaps the edge of a photo
   rather than sitting politely beside it. */
.layered {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.layered > figure {
  margin: 0;
  border-radius: var(--radius-hero, 40px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.layered > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.layered > .layered__panel {
  background: var(--canvas, #F7F1E8);
  border-radius: var(--radius-hero, 40px);
  padding: clamp(24px, 3.5vw, 48px);
  /* The negative margin is the whole point — it pulls the panel onto the photo. */
  margin-left: -12%;
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 48px -24px rgba(87, 82, 74, .28);
}
.layered.flip > figure { order: 2; }
.layered.flip > .layered__panel { margin-left: 0; margin-right: -12%; }

/* ---- Pill checklist over an image --------------------------------------- */
.pill-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.pill-list li {
  display: flex; align-items: center; gap: var(--space-md);
  background: var(--canvas, #F7F1E8);
  border-radius: 999px;
  padding: 14px 28px;
  font: var(--type-body);
  list-style: none;
  box-shadow: 0 6px 20px -14px rgba(87, 82, 74, .3);
}
.pill-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--block-taupe, #B1988D);
}

/* ---- Numbered feature blocks -------------------------------------------- */
.numbered { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 5vw, 72px); }
.numbered > li { display: flex; gap: var(--space-lg); list-style: none; align-items: flex-start; }
.numbered .num {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 82px);
  line-height: .85;
  color: var(--block-taupe, #B1988D);
  flex: 0 0 auto;
  min-width: 1.4em;
}

/* ---- Image grid (several images in one section) ------------------------- */
.img-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.img-row figure { margin: 0; border-radius: var(--radius-card, 32px); overflow: hidden; aspect-ratio: 1; }
.img-row img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Device row (2 images, kept at their natural 4:3 ratio, with a caption
   underneath) — for product-mockup pairs where forcing a 1:1 crop like .img-row
   would cut off the device. */
.device-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
.device-row figure { margin: 0; border-radius: var(--radius-card, 32px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--block-taupe-soft, #E3D6CD); }
.device-row img { width: 100%; height: 100%; object-fit: cover; display: block; }
.device-row + p.cap { text-align: center; margin-top: var(--space-md); }
@media (max-width: 620px) { .device-row { grid-template-columns: 1fr; } }

/* ---- Small round accent image — a decorative thumbnail beside a CTA row,
   not a full section. Deliberately modest so it doesn't compete with the buttons. */
.accent-round {
  width: 84px; height: 84px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 8px 20px -12px rgba(87, 82, 74, .3);
}
.accent-round img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Responsive ---------------------------------------------------------
   Collages and overlaps are desktop devices. On a phone they become plain
   stacked blocks — an overlapping panel on a 375px screen is just a mess. */
@media (max-width: 960px) {
  .hero-collage { grid-template-columns: 1fr; min-height: 62vh; }
  .hero-collage > figure:nth-child(1),
  .hero-collage > figure:nth-child(3) { display: none; }
  .layered { grid-template-columns: 1fr; gap: var(--space-lg); }
  .layered > .layered__panel,
  .layered.flip > .layered__panel { margin-left: 0; margin-right: 0; }
  .layered.flip > figure { order: 0; }
  .numbered { grid-template-columns: 1fr; }
  .img-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .img-row { grid-template-columns: 1fr; }
  .script { font-size: clamp(32px, 11vw, 46px); }
}

/* ---- Reduced motion / print safety -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .layered > .layered__panel { box-shadow: none; }
}