/* Aubri Poon Photography: homepage draft styles.

   How this page is put together:
   - One warm "paper" colour runs the whole length of the page, like a book.
   - Colour arrives as soft, rounded blocks sitting ON the page (yellow, plum, pink),
     never as hard stripes cutting across it. Only the hero photo runs edge to edge.
   - Everything has soft corners. Buttons are pills.
   - Some blocks overlap the section above them, so one part flows into the next.
   - Layouts alternate sides (photo left, then photo right) so the eye zig-zags down the page.

   Type: Prata headlines, League Spartan labels and big blocks,
   League Spartan OUTLINE accent words (bigger than the Prata beside them, centred on the line),
   Poppins for reading, Amsterdam One only for the hero location line.
   Colours and sizes live in :root, so a change happens in one place. */

:root {
  --white: #FFFBF7;       /* the page "paper" */
  --light: #EFE5E8;
  --pink: #FF2FA3;
  --yellow: #FFC933;
  --purple: #5A316C;
  --plum: #301236;

  --font-headline: "Prata", Georgia, serif;
  --font-display: "League Spartan", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Amsterdam One", "Allura", cursive; /* Allura is a free stand-in until the web font licence is sorted */

  /* Soft corners */
  --r-sm: 14px;           /* small photos */
  --r: 22px;              /* photos and cards */
  --r-lg: 34px;           /* big colour blocks */

  --gutter: 16px;
  --inset: 12px;          /* how far colour blocks sit in from the screen edge */
  --max: 1200px;
  --bar: 46px;            /* height of the slim menu bar */
}
@media (min-width: 900px) { :root { --inset: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar); }
body { margin: 0; background: var(--white); color: var(--purple); font-family: var(--font-body); font-size: 1rem; line-height: 1.8; overflow-x: hidden; }
@media (min-width: 900px) { body { font-size: 1.0625rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--yellow); color: var(--plum); padding: 8px 14px; z-index: 100; border-radius: 999px; }
.skip-link:focus { left: 8px; top: 8px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- Type ---------- */
h1, h2 { font-family: var(--font-headline); font-weight: 400; color: var(--plum); line-height: 1.18; margin: 0 0 .5em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 1rem; color: var(--plum); margin: 0 0 .4em; }

/* Accent word: League Spartan outline, bigger than the Prata around it, centred on the line */
.accent {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  font-size: 1.4em; line-height: .82; vertical-align: middle; color: transparent; -webkit-text-stroke: 1.5px var(--pink);
}
h2 .accent { -webkit-text-stroke-width: 1.8px; }

/* Big bold blocks */
.big { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: .92; margin: 0; }

/* ---------- Buttons: soft pills ---------- */
.btn { display: inline-block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; text-decoration: none; padding: 16px 32px; border-radius: 999px; border: 1.5px solid var(--pink); transition: background .2s ease, color .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-pink { background: var(--pink); color: #fff; }
.btn-pink:hover { background: var(--plum); border-color: var(--plum); }
.btn-plum { background: var(--plum); border-color: var(--plum); color: var(--yellow); }
.btn-plum:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.arrow-link { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .82rem; color: var(--plum); text-decoration: none; border-bottom: 1.5px solid var(--pink); padding-bottom: 6px; }
.arrow-link::after { content: "  \2192"; color: var(--pink); }
.actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }

/* ---------- Confetti dots (decorative) ---------- */
.confetti { position: absolute; width: 150px; height: 290px; background: url("images/confetti.svg") no-repeat center / contain; pointer-events: none; z-index: 0; }

/* ---------- Slim menu bar: sits on the hero photo, turns plum once you scroll ---------- */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; min-height: var(--bar); display: flex; align-items: center; transition: background .25s ease; }
.bar ul { width: 100%; list-style: none; margin: 0 auto; padding: 8px 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 13px; }
.bar a { font: 500 .74rem var(--font-body); letter-spacing: .02em; color: #fff; text-decoration: none; text-shadow: 0 1px 6px rgba(48,18,54,.5); }
.bar a:hover, .bar a[aria-current="page"] { color: var(--yellow); }
.bar.is-solid { background: var(--plum); }
.bar.is-solid a { text-shadow: none; }
@media (max-width: 380px) { .bar ul { gap: 4px 9px; padding-inline: 6px; } .bar a { font-size: .68rem; letter-spacing: 0; } }
@media (min-width: 700px) { .bar ul { gap: 34px; } .bar a { font-size: .85rem; letter-spacing: .06em; } }

/* ---------- Hero: full photo, yellow border just inside the edges (Kim Williams idea) ---------- */
.hero { position: relative; height: max(600px, 100svh); overflow: hidden; color: #fff; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(48,18,54,.35), rgba(48,18,54,0) 25%, rgba(48,18,54,0) 60%, rgba(48,18,54,.45)); }
.hero-border {
  --gap: calc(min(58vw, 260px) + 36px);  /* the break in the top line, sized to the logo */
  -webkit-mask: linear-gradient(#000 0 0) top center / var(--gap) 14px no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  position: absolute; z-index: 1; inset: calc(var(--bar) + 54px) 14px 14px; border: 8px solid var(--yellow); border-radius: 26px; pointer-events: none;
}
.hero-cut { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }  /* must line up exactly with .hero-photo */
.hero-logo { position: absolute; z-index: 2; top: calc(var(--bar) + 58px); left: 50%; translate: -50% -50%; width: min(58vw, 260px);  /* centred on the border's top line */
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px rgba(255,251,247,.9)); }
.hero-bottom { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 24px; }
.hero-tab { background: var(--yellow); color: var(--plum); padding: 16px 22px 18px; border-radius: 22px 22px 22px 18px; max-width: 100%; }
.hero-tab h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.25rem, 4.4vw, 2.1rem); line-height: 1.05; letter-spacing: .02em; margin: 0; color: var(--plum); }
.hero-tab h1 .accent { -webkit-text-stroke: 1.6px var(--plum); font-size: 1.4em; display: inline-block; }
.hero-place { order: -1; font-family: var(--font-script); font-size: clamp(1.05rem, 3.6vw, 2rem); line-height: 1.3; margin: 0 0 18px 10px; color: #fff; text-shadow: 0 2px 10px rgba(48,18,54,.6); }
.hero-circle {
  position: absolute; z-index: 3; right: 20px; bottom: 230px; width: 96px; height: 96px; border-radius: 50%;
  background: var(--pink); color: #fff; display: grid; place-items: center; text-decoration: none; transform: rotate(-8deg);
  font: 800 .9rem/1.1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(48,18,54,.3);
  transition: transform .2s ease, background .2s ease;
}
.hero-circle:hover { transform: rotate(0) scale(1.06); background: var(--plum); color: var(--yellow); }
@media (min-width: 900px) {
  .hero-border { --gap: 400px; inset: calc(var(--bar) + 76px) 32px 21% 32px; border-width: 10px; border-radius: 32px; }  /* bottom line sits lower than the dogs' paws, so everyone stands in front of it */
  .hero-logo { width: 340px; top: calc(var(--bar) + 81px); }
  .hero-bottom { left: 32px; right: 32px; bottom: 32px; flex-wrap: nowrap; }
  .hero-tab { padding: 22px 34px 26px; }
  .hero-place { order: 0; margin: 0 0 20px; white-space: nowrap; }
  .hero-circle { width: 132px; height: 132px; right: 70px; top: auto; bottom: 23%; font-size: 1rem; }
}

/* ---------- Intro line under the hero ---------- */
.intro-line { position: relative; text-align: center; padding-block: clamp(56px, 8vw, 96px) clamp(16px, 3vw, 32px); overflow: hidden; }
.intro-line h2 { position: relative; z-index: 1; max-width: 22em; margin: 0 auto 18px; font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
.intro-line p { position: relative; z-index: 1; max-width: 32em; margin: 0 auto 28px; }
.intro-line .actions { position: relative; z-index: 1; justify-content: center; }
.intro-line .confetti { left: -20px; top: 20px; }
.intro-line .confetti.right { left: auto; right: -20px; top: auto; bottom: 10px; transform: rotate(180deg); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(56px, 8vw, 104px); }

/* ---------- Family: big photo on a soft blush shape, a second photo overlapping, text beside ---------- */
.layered { display: grid; gap: 44px; align-items: center; }
.layered-photos { position: relative; padding: 0 0 56px; }
.layered-photos::before { content: ""; position: absolute; z-index: 0; left: 14%; right: -4%; top: 12%; bottom: 0; background: var(--light); border-radius: var(--r-lg); }
.layered-photo { position: relative; z-index: 1; }
.layered-photo.second { position: absolute; right: 0; bottom: 0; width: 46%; border: 8px solid var(--white); border-radius: var(--r); overflow: hidden; }
.layered-photo.second img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.layered-text { position: relative; z-index: 2; }
@media (min-width: 960px) {
  .layered { grid-template-columns: 1.1fr 1fr; gap: 80px; }
  .layered-photos { padding-bottom: 80px; }
}


/* ---------- Dogs that pop out of their frames ----------
   Two copies of one photo: the framed copy is clipped, the cut-out copy is not,
   so the dog's head rises above the frame. Both must stay exactly the same size and position. */
.pop { position: relative; }
.pop-frame { position: absolute; z-index: 1; left: 0; right: 0; overflow: hidden; border-radius: var(--r); }
.pop-frame img { position: absolute; left: 0; width: 100%; object-fit: cover; }
.pop-cut { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pop-block { position: absolute; z-index: 0; border-radius: var(--r); background: var(--yellow); }
/* Family: tall photo, head pops out above the top */
.layered-photo.first.pop { width: 86%; aspect-ratio: 2 / 3; }
.layered-photo.first .pop-frame { top: 36%; bottom: 0; }
.layered-photo.first .pop-frame img { height: 156.25%; top: -56.25%; }   /* 100 / 0.64 and 0.36 / 0.64 */
.layered-photo.first .pop-block { left: -7%; top: 46%; width: 62%; height: 50%; }
/* Process: terrier bursts out of a white frame */
.pop-terrier { aspect-ratio: 4 / 5; transform: rotate(2deg); margin-top: 6px; }
.pop-terrier .pop-frame { top: 30%; bottom: 0; box-shadow: 0 0 0 10px #fff, 0 16px 34px rgba(48,18,54,.18); }
.pop-terrier .pop-frame img { height: 142.857%; top: -42.857%; }   /* 100 / 0.70 and 0.30 / 0.70 */

/* Plain sentence that introduces the checklist */
.lead-in { font: italic 400 1.2rem/1.5 var(--font-headline); color: var(--plum); margin: 4px 0 6px; }

/* Checkmark list in brand colours */
.ticks { list-style: none; padding: 0; margin: 0 0 1.6em; text-align: left; }
.ticks li { position: relative; padding: 10px 0 10px 40px; }
.ticks li::before { content: "\2713"; position: absolute; left: 4px; top: 6px; font: 800 1.35rem var(--font-display); color: var(--pink); }
.ticks li:nth-child(2)::before { color: var(--yellow); }
.ticks li:nth-child(3)::before { color: var(--purple); }

/* Numbered list (Mary Costa idea), soft lines */
.numbered { list-style: none; padding: 0; margin: 0; counter-reset: n; border-top: 1px solid rgba(48,18,54,.14); }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 76px 1fr; gap: 6px 18px; padding: 22px 0; border-bottom: 1px solid rgba(48,18,54,.14); align-items: baseline; }
.numbered li::before { content: "0" counter(n); grid-row: span 2; font: 400 clamp(2.4rem, 6vw, 3.4rem)/1 var(--font-display); color: var(--pink); }
.numbered li:nth-child(2)::before { color: var(--yellow); }
.numbered li:nth-child(3)::before { color: var(--plum); }
.numbered h3 { margin: 0; }
.numbered p { margin: 0; }

/* ---------- Parallax photo windows: inset with soft corners ---------- */
.parallax { position: relative; margin: 0 var(--inset); border-radius: var(--r-lg); height: clamp(380px, 70vw, 640px); overflow: hidden; display: grid; place-items: center; text-align: center; }
.parallax img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; will-change: transform; }
.parallax.has-text::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(48,18,54,.1), rgba(48,18,54,.5)); }
.parallax-content { position: relative; z-index: 1; padding: 0 var(--gutter); }
.parallax .big { color: #fff; font-size: clamp(2.6rem, 10vw, 6.5rem); }
.parallax .big .accent { -webkit-text-stroke: 2px var(--yellow); }

/* ---------- The Process: a yellow rounded block that rises over the photo above, text beside ---------- */
.process { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; display: grid; gap: 8px; }
.process-block { background: var(--yellow); color: var(--plum); border-radius: var(--r-lg); padding: 44px 24px 32px; margin-top: -72px; display: flex; flex-direction: column; gap: 28px; box-shadow: 0 18px 40px rgba(48,18,54,.12); }
.process-block .big { font-size: clamp(3.4rem, 12vw, 6.2rem); }
.process-block .small-photo { width: 100%; border: 10px solid #fff; border-radius: var(--r); overflow: hidden; transform: rotate(2deg); box-shadow: 0 16px 34px rgba(48,18,54,.18); }
.process-block .small-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.process-list { padding: 48px 0 24px; }
.process-list p.intro { margin: 0 0 28px; max-width: 34em; }
@media (min-width: 960px) {
  .process { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .process-block { order: 2; margin-top: -130px; padding: 56px 48px 48px; }
  .process-list { order: 1; padding: 96px 0 40px; }
}

/* ---------- Favourites: centre stays still while side photos scroll past (Mary Costa idea) ---------- */
.faves { display: grid; gap: 22px; }
.faves-centre { text-align: center; }
.faves-centre h2 { margin-bottom: 22px; }
.faves-centre .feature-photo { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; margin-bottom: 24px; border-radius: var(--r); }
.faves-side { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faves-side img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }
@media (min-width: 900px) {
  .faves { grid-template-columns: 1fr 1.6fr 1fr; gap: 40px; align-items: start; }
  .faves-centre { position: sticky; top: calc(var(--bar) + 30px); }
  .faves-side { grid-template-columns: 1fr; gap: 56px; padding-block: 120px 40px; }
  .faves-side.left { padding-top: 260px; }
}

/* ---------- Client raves: a plum rounded block, round photo above each review ---------- */
.bg-plum { background: var(--plum); color: var(--light); margin: 0 var(--inset); border-radius: var(--r-lg); }
.bg-plum h2, .bg-plum h3 { color: var(--white); }
.reviews-head { text-align: center; margin-bottom: 48px; }
.reviews-head .accent { font-size: clamp(2.6rem, 8vw, 4.8rem); display: inline-block; }
.reviews { display: grid; gap: 48px; }
.review { margin: 0; text-align: center; }
.review img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 22px; border: 4px solid var(--yellow); }
.review:nth-child(2) img { border-color: var(--pink); }
.review:nth-child(3) img { border-color: var(--light); }
.review blockquote { margin: 0 0 16px; font-family: var(--font-headline); font-size: 1.1rem; line-height: 1.65; color: var(--white); }
.review figcaption { font: 700 .8rem var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* ---------- About card (Kim Williams van idea), sitting half on the page, half on a yellow block ---------- */
.about-card-section { position: relative; padding-block: 48px 72px; }
.about-card-section::before { content: ""; position: absolute; z-index: 0; left: var(--inset); right: var(--inset); top: 40%; bottom: 0; background: var(--yellow); border-radius: var(--r-lg); }
.about-card-section .wrap { position: relative; z-index: 1; }
.about-card { position: relative; border: 10px solid var(--white); border-radius: 30px; box-shadow: 0 18px 40px rgba(48,18,54,.18); min-height: 560px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.about-card::after { content: ""; position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(rgba(48,18,54,.45), rgba(48,18,54,0) 45%, rgba(48,18,54,.35)); }
.about-card-text { position: relative; z-index: 2; padding: 44px 20px 0; color: #fff; }
.about-card-text h2 { color: #fff; margin: 0; }
.about-card-text .hi { display: block; font: 800 clamp(1.6rem, 5vw, 2.6rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.about-card-text .name { display: block; font: 400 clamp(3.4rem, 11vw, 6.5rem)/1.05 var(--font-headline); color: var(--yellow); }
.about-card-text p { margin: 14px auto 0; max-width: 40em; font-size: .98rem; }
.about-card .btn { position: relative; z-index: 2; margin-top: auto; margin-bottom: 96px; }  /* clears the sticker below */
.corner-sticker {
  position: absolute; z-index: 3; left: 50%; bottom: -62px; translate: -50% 0; width: 124px; height: 124px; border-radius: 50%; margin: 0;
  background: var(--pink); display: grid; place-items: center; text-align: center; transform: rotate(-8deg);
  font: 800 1rem/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--plum);
  padding: 16px; box-shadow: 0 10px 24px rgba(48,18,54,.25);
}
.about-after { max-width: 640px; margin: 96px auto 0; text-align: center; color: var(--plum); }
.about-after p { margin: 0; }
@media (min-width: 900px) { .about-card { min-height: 640px; } .corner-sticker { width: 160px; height: 160px; bottom: -80px; font-size: 1.25rem; } .about-after { margin-top: 120px; } }

/* Space between the about block and the photo window after it */
.about-card-section + .parallax { margin-top: var(--inset); }

/* ---------- Artwork: rounded panels that stack as you scroll, photos alternating sides ---------- */
.art-head { position: relative; text-align: center; max-width: 820px; margin: 0 auto 48px; }
.stack { position: relative; }
.stack-panel {
  position: sticky; top: calc(var(--bar) + 12px + var(--i) * 58px);
  display: grid; align-content: start; min-height: 440px; overflow: hidden; border-radius: var(--r-lg);
  box-shadow: 0 -8px 24px rgba(48,18,54,.10);
}
.stack-panel h3 { font-size: 1.05rem; margin: 0; line-height: 22px; padding: 18px 26px 12px; }
.stack-panel .text { padding: 0 26px 24px; }
.stack-panel p { margin: 0; max-width: 32em; }
.stack-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stack-panel + .stack-panel { margin-top: 40px; }
.stack-end { height: 160px; }  /* room at the end so all three titles show once stacked */
.panel-1 { background: var(--light); }
.panel-1 h3 { color: var(--pink); }
.panel-2 { background: var(--plum); color: var(--light); }
.panel-2 h3 { color: var(--yellow); }
.panel-3 { background: var(--yellow); color: var(--plum); }
@media (min-width: 900px) {
  .stack-panel { grid-template-columns: 1fr 1.5fr; grid-template-rows: auto 1fr; min-height: 560px; }
  .stack-panel h3 { grid-column: 1; grid-row: 1; padding: 22px 56px 0; }
  .stack-panel .text { grid-column: 1; grid-row: 2; align-self: center; padding: 0 56px 56px; font-size: 1.05rem; }
  .stack-panel img { grid-column: 2; grid-row: 1 / span 2; height: 100%; aspect-ratio: auto; }
  /* the middle panel flips, so photos alternate sides */
  .panel-2 { grid-template-columns: 1.5fr 1fr; }
  .panel-2 h3, .panel-2 .text { grid-column: 2; }
  .panel-2 img { grid-column: 1; }
}
.art-foot { text-align: center; margin-top: 56px; }
.art-note { max-width: 36em; margin: 0 auto 26px; }
.art-note strong { color: var(--plum); }
.art-sub { margin: 16px 0 0; font-size: .95rem; }
.art-sub a { color: var(--pink); }

/* ---------- Closing: a big bold yellow rounded block (Eddie Judd idea) ---------- */
.closing { position: relative; overflow: hidden; margin: 0 var(--inset); border-radius: var(--r-lg); background: var(--yellow); color: var(--plum); text-align: center; padding-block: clamp(72px, 11vw, 140px); }
.closing .wrap { position: relative; z-index: 1; }
.closing-big { font-size: clamp(3.4rem, 13vw, 9rem); color: var(--plum); margin-bottom: 28px; }
.closing h2 { max-width: 15em; margin: 0 auto 18px; }
.closing h2 .accent { -webkit-text-stroke-color: var(--plum); }
.closing p { max-width: 34em; margin: 0 auto 28px; }
.closing .small { font-size: .92rem; margin: 28px auto 0; }
.closing .small a { color: var(--plum); font-weight: 500; }
.closing .confetti { right: 3%; top: 40px; }
@media (max-width: 700px) { .closing .confetti { display: none; } }


/* ---------- Blog: Let's bark about it ---------- */
.blog-grid { display: grid; gap: 40px; align-items: start; }
.blog-title { margin: 0 0 14px; line-height: .95; }
.blog-small { display: block; font: 800 1.15rem/1.4 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--plum); }
.blog-bark { display: block; font-size: clamp(5.5rem, 17vw, 9.5rem); line-height: .88; -webkit-text-stroke: 2px var(--pink); }
.blog-intro p { margin: 0 0 22px; max-width: 24em; }
.blog-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.blog-cards a { display: block; text-decoration: none; }
.blog-cards img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: 14px; transition: transform .3s ease; }
.blog-cards a:hover img { transform: scale(1.02); }
.blog-cards h3 { font: 400 1.2rem/1.35 var(--font-headline); letter-spacing: 0; text-transform: none; color: var(--plum); margin: 0 0 8px; }
.blog-cards .more { font: 700 .78rem var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.blog-cards .more::after { content: "  \2192"; }
@media (min-width: 560px) and (max-width: 899px) { .blog-cards { grid-template-columns: repeat(3, 1fr); gap: 18px; } .blog-cards h3 { font-size: 1.02rem; } }
@media (min-width: 900px) { .blog-grid { grid-template-columns: .9fr 2.1fr; gap: 56px; } .blog-cards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ---------- Instagram FOLLOW band: a pink rounded block (Eddie Judd idea) ---------- */
.follow { position: relative; overflow: hidden; margin: var(--inset) var(--inset) 0; border-radius: var(--r-lg); background: var(--pink); padding-block: 64px 150px; }
.follow-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; z-index: 1; }
.follow-row a { display: block; }
.follow-row img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }
.follow-word { position: absolute; z-index: 2; right: var(--gutter); bottom: 14px; margin: 0; text-decoration: none; display: flex; flex-direction: column; align-items: flex-end; font: 800 clamp(3.4rem, 13vw, 8.5rem)/.86 var(--font-display); text-transform: uppercase; }
.fw-outline { color: transparent; -webkit-text-stroke: 2px #fff; }
.fw-solid { color: #fff; font-size: .62em; letter-spacing: .02em; }
.follow-handle { position: relative; z-index: 2; margin: 18px 0 0; font: 700 .85rem var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--plum); text-decoration: none; display: inline-block; }
@media (min-width: 900px) {
  .follow { padding-block: 88px 190px; }
  .follow-row { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .follow-word { right: max(var(--gutter), calc((100vw - var(--max)) / 2)); bottom: 30px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--white); padding-block: 56px 28px; font-size: .92rem; }
.footer-grid { display: grid; gap: 32px; }
.site-footer .logo img { width: 170px; }
.site-footer h3 { color: var(--pink); font-size: .78rem; letter-spacing: .2em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--pink); }
.footer-bottom { border-top: 1px solid var(--light); margin-top: 36px; padding-top: 18px; font-size: .82rem; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- Back to top arrow ---------- */
.to-top {
  position: fixed; z-index: 70; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--plum); color: var(--yellow); border: 2px solid var(--yellow); display: grid; place-items: center;
  font: 800 1.4rem/1 var(--font-display); text-decoration: none; box-shadow: 0 8px 20px rgba(48,18,54,.25);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.to-top.is-shown { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--pink); color: #fff; border-color: var(--pink); }

/* ---------- Gentle fade-in on scroll ---------- */
/* Uses "translate" so tilted items keep their tilt. Items only start hidden once the script runs. */
.js .reveal { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s ease; }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .parallax img { top: 0; height: 100%; transform: none !important; }
  .js .reveal { opacity: 1; translate: 0 0; transition: none; }
  .btn, .hero-circle, .to-top, .bar { transition: none; }
  .btn:hover { transform: none; }
}