/* =========================================================
   P&S COLLECTIVE — Global Stylesheet
   Earthy · organic · editorial. Handcrafted in the Netherlands.
   Light theme only, by founder decision (the paper look is the brand).
   Shape rule: interactive controls are pills, surfaces and images use --radius.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* P&S logo palette (chosen by the founders, October 2026) */
  /* Backgrounds */
  --paper:        #faf2e3;   /* light cream: main background */
  --paper-deep:   #dacaba;   /* beige: alternating sections */
  --sage-soft:    #dfdcc2;   /* pale grey-green: alternating sections */

  /* Logo colours */
  --ink:          #3c2a19;   /* logo brown: body text, footer */
  --ink-soft:     #5c4632;   /* softer brown text (passes AA on every background) */
  --plum:         #2e1520;   /* logo plum: current menu item */
  --plum-mid:     #5a2e40;   /* headings, hover, form errors */
  --plum-soft:    #6b3a4f;   /* menu text, labels, small links */
  --gold:         #9e7c47;   /* decorative lines and frames only (not for small text) */
  --gold-light:   #c9af81;

  /* Highlights */
  --orange:       #ed9347;   /* main buttons (with brown text), underlines, focus */
  --peach:        #e8ca97;   /* highlight on dark backgrounds, text selection */
  --green:        #9eb26d;   /* confirmations */
  --line-ink:     #c9af81;   /* fine dashed lines */

  --font-head: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "Karla", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --radius: 3px;
  --nav-h: 84px;
  --shadow-soft: 0 22px 60px -34px rgba(60, 42, 25, 0.5);
  --transition: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Paper-grain texture overlay (subtle, fixed) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 2; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  color: var(--plum-mid);
}
p { margin: 0 0 1.15rem; text-wrap: pretty; }

/* Browser surfaces in the palette */
::selection { background: var(--peach); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

/* Skip link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem; border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 0.75rem; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }

/* Section backgrounds: one light family */
.section--paper   { background: var(--paper); }
.section--sand    { background: var(--paper-deep); }
.section--sage    { background: var(--sage-soft); }
.section--light   { background: #fdf8ef; }  /* light cream, as in The P&S Experience */
.section--warm    { background: #f1dcb6; }  /* warm gold, as in What we believe */

.lead { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.4; color: var(--ink-soft); font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; }

/* ---------- Hand-drawn divider ---------- */
.sketch-divider {
  height: 16px;
  margin: clamp(2rem, 5vw, 4rem) 0;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='16' fill='none'%3E%3Cpath d='M2 9 C 30 2, 52 14, 80 8 S 132 1, 160 9 S 214 14, 244 7 S 300 2, 338 9' stroke='%239E7C47' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
  padding: 0.95rem 1.9rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: var(--transition); text-align: center; white-space: nowrap;
}
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: #f2a868; color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--block { width: 100%; justify-content: center; }

.link-arrow { font-weight: 600; color: var(--plum-soft); border-bottom: 2px solid var(--peach); padding-bottom: 2px; transition: var(--transition); }
.link-arrow:hover { color: var(--plum); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 242, 227, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,175,129,0.5);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--nav-h); }
.brand { display: flex; align-items: center; }
.brand img { height: 66px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; position: relative; padding-block: 0.25rem; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 3px; border-radius: 2px; background: var(--peach); transition: width var(--transition); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a { color: #4a2235; }
.nav-links a:hover { color: var(--plum); }
.nav-links a[aria-current="page"] { color: var(--plum); font-weight: 600; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.75rem; margin-right: -0.75rem; flex-direction: column; gap: 5px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); transition: var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Photo frame (mood-board / pinned look) ---------- */
.photo-frame { position: relative; display: inline-block; }
.photo-frame img {
  position: relative; z-index: 1; border-radius: var(--radius);
  box-shadow: var(--shadow-soft); width: 100%; height: 100%; object-fit: cover;
}
.photo-frame::before {
  content: ""; position: absolute; z-index: 0;
  inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--gold); border-radius: var(--radius);
}
.photo-frame--sage::before { border-color: var(--green); }
.photo-frame--rot-r { transform: rotate(1.6deg); }
.photo-caption {
  font-family: var(--font-head); font-style: italic; font-size: 0.95rem;
  color: var(--ink-soft); margin-top: 1.5rem; max-width: 26ch;
}
.photo-caption--center { text-align: center; margin-inline: auto; max-width: 46ch; }

/* ---------- Home hero: studio video, drawn logo, typed headline ---------- */
.home-hero { position: relative; height: clamp(540px, calc(88svh - var(--nav-h)), 800px); overflow: hidden; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(60,42,25,0.74), rgba(60,42,25,0.46) 70%, rgba(60,42,25,0.56)); }
.home-hero__content { position: relative; z-index: 1; text-align: center; }
.home-hero__logo { width: clamp(180px, 22vw, 290px); margin: 0 auto clamp(2rem, 4.5vw, 3rem); }
.home-hero__title { font-size: clamp(1.25rem, 2.3vw, 2rem); line-height: 1.2; max-width: none; margin: 0 auto; color: var(--paper); min-height: 1.3em; white-space: nowrap; }
.home-hero__title .accent { color: var(--peach); }
/* Typewriter: every letter is laid out from the start (no reflow), then revealed in turn */
.home-hero__type .c { opacity: 0; }
.home-hero__type .c.on { opacity: 1; }
.home-hero__type .c.caret { position: relative; }
.home-hero__type .c.caret::after { content: ""; position: absolute; right: -0.06em; top: 0.2em; height: 0.85em; width: 2px; background: var(--peach); animation: caret-blink 0.9s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* Logo drawn line by line, then filled (light version for the dark banner) */
.logo-draw { display: block; width: 100%; height: auto; overflow: visible; }
.logo-draw #logo-p, .logo-draw #logo-amp, .logo-draw #logo-s, .logo-draw #logo-word { fill: var(--paper); stroke: var(--paper); }
.logo-draw #logo-hand, .logo-draw #logo-dots, .logo-draw #logo-lines, .logo-draw #logo-lotus { fill: var(--peach); stroke: var(--peach); }
.js .logo-draw path { stroke-dashoffset: 1; fill-opacity: 0; }
.logo-draw.play path {
  stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
  animation: logo-stroke var(--dur, 1.4s) cubic-bezier(0.45, 0, 0.25, 1) var(--at, 0s) forwards,
             logo-fill 0.9s ease calc(var(--at, 0s) + var(--dur, 1.4s) * 0.75) forwards;
}
@keyframes logo-stroke { to { stroke-dashoffset: 0; } }
@keyframes logo-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
/* Drawing order: P, the ampersand, S, the hand and flowers, COLLECTIVE, then the line and lotus */
.logo-draw #logo-p path { --at: 0.2s; --dur: 1.5s; }
.logo-draw #logo-amp path { --dur: 0.9s; }
.logo-draw #logo-amp path:nth-child(1) { --at: 1.1s; }
.logo-draw #logo-amp path:nth-child(2) { --at: 1.35s; }
.logo-draw #logo-amp path:nth-child(3) { --at: 1.6s; }
.logo-draw #logo-s path { --at: 1.8s; --dur: 1.4s; }
.logo-draw #logo-hand path { --at: 2.4s; --dur: 2s; }
.logo-draw #logo-hand path:nth-child(n+2) { --at: 3.6s; --dur: 0.5s; }
.logo-draw #logo-word path { --dur: 0.7s; }
.logo-draw #logo-word path:nth-child(1) { --at: 3.20s; }
.logo-draw #logo-word path:nth-child(2) { --at: 3.29s; }
.logo-draw #logo-word path:nth-child(3) { --at: 3.38s; }
.logo-draw #logo-word path:nth-child(4) { --at: 3.47s; }
.logo-draw #logo-word path:nth-child(5) { --at: 3.56s; }
.logo-draw #logo-word path:nth-child(6) { --at: 3.65s; }
.logo-draw #logo-word path:nth-child(7) { --at: 3.74s; }
.logo-draw #logo-word path:nth-child(8) { --at: 3.83s; }
.logo-draw #logo-word path:nth-child(9) { --at: 3.92s; }
.logo-draw #logo-word path:nth-child(10) { --at: 4.01s; }
.logo-draw #logo-dots path, .logo-draw #logo-lines path { --at: 4.1s; --dur: 0.9s; }
.logo-draw #logo-lotus path { --at: 4.4s; --dur: 0.9s; }

/* Intro line and actions below the banner */
.home-intro { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.home-intro__text { font-family: var(--font-head); font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.35; color: var(--ink); max-width: none; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }

/* ---------- The P&S Experience: four photos in a row, painted in by brush strokes ----------
   One word per step, alternating below and above its photo. A dotted line slowly weaves
   over and under the photos (opposite each word) and each photo is painted in as the
   line reaches it. Calm on purpose: no moving markers, words simply fade in. */
.xp { background: #fdf8ef; padding-block: clamp(2.5rem, 5vw, 4rem); overflow: hidden; }  /* a shade lighter than the cream above */
.xp .container { max-width: 1320px; }
.xp__title { text-align: center; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(2.2rem, 4.2vw, 3.2rem); line-height: 1.05; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.xp__map { position: relative; }
.xp__line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.xp-path { fill: none; stroke: var(--ink); stroke-opacity: 0.55; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 9; }
.xp-mask { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }

/* Three rows: words (the line weaves through these), photos, descriptions */
.xp__stops { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: clamp(1rem, 2.5vw, 2.25rem); }
.xp-stop { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; justify-items: center; text-align: center; }
.xp-stop__name { grid-row: 1; align-self: end; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; margin: 1.6rem 0 1.9rem; }
.xp-stop:nth-child(odd) .xp-stop__name { color: var(--gold); }
.xp-stop:nth-child(even) .xp-stop__name, .xp-stop:nth-child(even) .xp-stop__text { color: var(--plum-mid); }
.xp-stop__art { grid-row: 2; align-self: center; height: clamp(180px, 18vw, 240px); width: auto; max-width: 100%; display: block; }
.xp-stop__text { grid-row: 3; align-self: start; font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.45; color: var(--ink-soft); max-width: 24ch; margin: 0.75rem auto 0; }

/* Sequence (js/main.js): words fade in as the line reaches them; then each photo is painted in
   and its description fades in underneath */
.xp-brush { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .xp-stop__name { opacity: 0; }  /* faded in by js/main.js together with its stretch of line */
.js .xp-stop.word-on .xp-stop__name { opacity: 1; transition: opacity 0.7s ease; }
.js .xp-brush { stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s cubic-bezier(0.45, 0, 0.35, 1); }
.js .xp-stop.img-on .xp-brush { stroke-dashoffset: 0; }
.js .xp-stop__text { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s; }
.js .xp-stop.img-on .xp-stop__text { opacity: 1; transform: none; }

/* Phones: one column so every photo gets a similar size; no line */
@media (max-width: 899px) {
  .xp__line { display: none; }
  .xp__stops { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2.25rem; }
  .xp-stop { grid-row: auto; grid-template-rows: none; }
  .xp-stop .xp-stop__name { grid-row: auto; margin: 0 0 0.75rem; }
  .xp-stop .xp-stop__art { grid-row: auto; height: clamp(220px, 62vw, 300px); width: auto; max-width: 100%; }
  /* landscape Connect photo: three quarters of the height, so all four cover about the same area */
  .xp-stop:last-child .xp-stop__art { height: calc(clamp(220px, 62vw, 300px) * 0.75); }
  .xp-stop .xp-stop__text { grid-row: auto; }
}

/* ---------- What we believe: photo strip, then three beliefs on a warm block ---------- */
.beliefs { background: var(--peach); overflow: hidden; }
.beliefs__strip { padding-block: clamp(2rem, 4vw, 3rem) clamp(2.25rem, 4.5vw, 3.25rem); }
.beliefs__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; animation: beliefs-roll 90s linear infinite; }
.beliefs__track li:nth-child(even) { margin-top: 1.5rem; }
.beliefs__track img { height: clamp(190px, 22vw, 290px); width: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); box-shadow: 0 16px 34px -22px rgba(60,42,25,0.55); }
.beliefs__strip:hover .beliefs__track { animation-play-state: paused; }
@keyframes beliefs-roll { to { transform: translateX(-50%); } }
.beliefs__panel { background: #f1dcb6; }  /* a shade lighter than the strip behind the photos */
.beliefs__body { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6.5rem); }
.beliefs__title { text-align: center; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.05; letter-spacing: 0.005em; margin-bottom: clamp(2rem, 4vw, 3rem); }
.beliefs__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); text-align: center; }
.belief h3 { font-size: 1.55rem; margin-bottom: 0.7rem; }
.belief p { margin: 0; color: var(--ink); }
.beliefs .text-link { color: var(--plum-mid); text-decoration-color: var(--ink); }

/* ---------- Section heading ---------- */
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head--tight { margin-bottom: 1.25rem; }
.section-head h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
.section-head h2 { font-size: clamp(2rem, 4.8vw, 3.4rem); }

/* About: founders — landscape banner above two-column bios */

/* Photo grid (workshop archive): captions sit below each photo */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.75rem 1.25rem; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.photo-grid figcaption { margin-top: 0.7rem; font-family: var(--font-head); font-style: italic; font-size: 1rem; color: var(--ink-soft); }

/* ---------- Home: featured workshop (from the founders' Canva card) beside the upcoming list ---------- */
.fw__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: stretch; }
.fw-feature, .fw-upcoming { display: flex; flex-direction: column; }
/* Featured: an arch split down the middle, solid plum panel with the details on the left, video on the right.
   The arch grows so the featured column is exactly as tall as the upcoming column. */
.fw-arch { flex: 1 1 auto; min-height: clamp(360px, 34vw, 460px); display: grid; grid-template-columns: 1fr 1fr; border-radius: 260px 260px 10px 10px; overflow: hidden; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--shadow-soft); }
.fw-arch__panel { background: var(--plum-mid); color: var(--paper); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.9rem; padding: clamp(4.5rem, 7vw, 6rem) clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.25rem); }
.fw-title.fw-title--panel { color: var(--paper); margin: 0 0 0.4rem; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.15; }
.fw-arch__meta { display: flex; align-items: flex-start; justify-content: center; text-align: left; gap: 0.55rem; margin: 0; font-size: 0.98rem; line-height: 1.5; color: var(--peach); }
.fw-arch__meta .fw-icon { color: var(--peach); margin-top: 0.15em; }
.fw-arch__video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--ink); }
.fw-upcoming .btn { align-self: flex-start; margin-top: auto; }
.fw-feature .fw-more { align-self: flex-start; }
.fw-label { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.05; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.fw-icon { width: 1.35em; height: 1.35em; flex: none; object-fit: contain; }  /* the founders' hand-drawn icons (images/icons) */
.fw-event__head { display: grid; grid-template-columns: auto 1fr; gap: clamp(0.85rem, 1.6vw, 1.25rem); align-items: center; margin-bottom: 0.75rem; }
.fw-event__head .fw-title--event { margin-bottom: 0.2rem; }
.fw-event__head .fw-event__place { margin-bottom: 0; }
.fw-event__emblem { width: clamp(58px, 5.5vw, 78px); height: auto; }
.fw-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.98rem; color: var(--ink); margin-bottom: 0.9rem; }
.fw-meta__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.fw-meta__sep { color: var(--gold-light); margin: 0 0.15rem; }
/* Title on a hand-painted highlight that sweeps in */
.fw-title { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.6rem, 2.9vw, 2.45rem); line-height: 1.2; color: var(--plum-mid); margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.fw-title__mark {
  padding: 0 0.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.5' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='10'/%3E%3C/filter%3E%3Crect x='6' y='10' width='388' height='40' rx='4' fill='%23e8ca97' fill-opacity='0.8' filter='url(%23r)'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 70%; background-size: 100% 78%;
}
.js .fw-title__mark { background-size: 0% 78%; transition: background-size 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.35s; }
.js .fw-title.is-visible .fw-title__mark { background-size: 100% 78%; }
/* Photo with an arched top, revealed from the bottom up */
.fw-photo { margin: 0 0 clamp(1.5rem, 3vw, 2rem); }
.fw-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 220px 220px 8px 8px; }
/* The clip sits on the image, not the observed frame, so the scroll watcher can still see the frame */
.js .fw-photo.reveal { opacity: 1; filter: none; transform: none; }
.js .fw-photo.reveal img { clip-path: inset(100% 0 0 0 round 220px 220px 8px 8px); transition: clip-path 1.3s cubic-bezier(0.65, 0, 0.35, 1); }
.js .fw-photo.reveal.is-visible img { clip-path: inset(0 0 0 0 round 220px 220px 8px 8px); }
.fw-facts { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.fw-facts li { display: flex; align-items: center; gap: 0.75rem; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25; color: var(--ink); }
.fw-facts .fw-icon { width: 2.4rem; height: 2.4rem; }
/* Upcoming events */
.fw-events { display: grid; gap: clamp(2rem, 4vw, 2.75rem); margin-bottom: 2rem; }
.fw-event + .fw-event { padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px dashed var(--line-ink); }
.fw-title--event { font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin-bottom: 0.35rem; }
.fw-event__place { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; color: var(--ink-soft); margin-bottom: 0.75rem; }
.fw-event__place .fw-icon { width: 1.3em; height: 1.3em; }
.fw-event__desc { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.3; color: var(--ink); margin-bottom: 1rem; }
.fw-event__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; }
.fw-event__facts li { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; font-size: 1.15rem; color: var(--plum-mid); font-variant-numeric: lining-nums; }
.fw-event__facts .fw-icon { width: 1.8rem; height: 1.8rem; }
.fw-note { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1rem; }
/* Workshops page: upcoming event cards */
.ev-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1.5rem; }
.ev-card { background: rgba(232, 202, 151, 0.22); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; align-items: flex-start; }
.ev-card + .ev-card { padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: none; }
.ev-card .fw-event__facts { margin-bottom: 1.5rem; }
.ev-card .btn { margin-top: auto; }
.ev-intro { padding-bottom: 0; }
.ev-upcoming { padding-top: clamp(2rem, 4vw, 3rem); }
/* The title highlight also sweeps in when its whole card is revealed */
.js .reveal.is-visible .fw-title__mark { background-size: 100% 78%; }

/* ---------- Our Story: same vocabulary as the homepage ----------
   Cormorant Garamond headings, spaced-capital names (gold / plum), the featured-workshop
   arch, the Matisse-quote style, and the homepage's light section colours. */
.story-intro { padding-block: clamp(3.5rem, 7vw, 6rem); }
.journey { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.story-title { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(2.5rem, 5vw, 3.9rem); line-height: 1.05; color: var(--plum-mid); margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.journey p { font-size: clamp(1.05rem, 1.5vw, 1.15rem); line-height: 1.75; color: var(--ink-soft); max-width: 58ch; }
.journey__media { max-width: 420px; justify-self: center; width: 100%; }
.story-arch { border-radius: 220px 220px 10px 10px; overflow: hidden; box-shadow: var(--shadow-soft); }
.story-arch img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.journey__media .photo-caption { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-size: 1.15rem; text-align: center; max-width: none; margin-top: 1rem; color: var(--ink-soft); }

.story-founders { background: #fdf8ef; }  /* same light cream as The P&S Experience */
.story-heading { text-align: center; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; font-size: clamp(2.3rem, 4.6vw, 3.5rem); line-height: 1.05; color: var(--plum-mid); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.story-heading--small { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.founders-banner { width: 100%; margin: 0 0 0.75rem; }
.founders-banner img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow-soft); }
.founders-banner .photo-caption { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-size: 1.15rem; color: var(--ink-soft); }
.founders-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.founders-cols > .founder-block:nth-child(2) { padding-left: clamp(2rem, 5vw, 4rem); border-left: 1px dashed var(--gold-light); }
.founder-block { text-align: center; }
.founder-block__name { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; margin-bottom: 0.6rem; }
.founder-block:nth-child(1) .founder-block__name { color: var(--gold); }
.founder-block:nth-child(2) .founder-block__name { color: var(--plum-mid); }
.founder-block__role { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.1rem; }
.founder-block__statement { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.3; color: var(--ink); margin: 0 auto 1rem; max-width: 30ch; }
.founder-block p { color: var(--ink-soft); }
.founder-block p:last-child { text-align: left; max-width: 52ch; margin-inline: auto; }

.story-vision { background: #f1dcb6; }  /* same warm gold as What we believe */
.vision { text-align: center; max-width: 760px; margin-inline: auto; }
.story-quote { margin: 0 0 clamp(2rem, 4vw, 2.75rem); }
.story-quote p { margin: 0; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.2; color: var(--plum-mid); }
.vision p { max-width: 62ch; margin-inline: auto; color: var(--ink); }
.story-actions { justify-content: center; margin-top: 1.75rem; }

/* ---------- Events ---------- */
.event-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.logistics { background: var(--paper); border: 1.5px solid var(--gold-light); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.logistics dl { margin: 0; display: grid; gap: 1.1rem; }
.logistics dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--plum-soft); font-weight: 600; }
.logistics dd { margin: 0.2rem 0 0; font-weight: 500; }
.logistics .divider { height: 0; border-top: 1px dashed var(--line-ink); margin: 0.3rem 0; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.4rem; }
.form-row { display: grid; gap: 0.45rem; }
.form label { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; }
.form input[type="text"], .form input[type="email"], .form select, .form textarea {
  font-family: var(--font-body); font-size: 1rem; padding: 0.85rem 1rem;
  border: 1.5px solid var(--line-ink); border-radius: var(--radius);
  background: rgba(255,255,255,0.6); color: var(--ink); transition: var(--transition);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(237,147,71,0.3); background: #fff; }
.form textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.form-hint { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.label-note { font-weight: 400; color: var(--ink-soft); }
.field-error { font-size: 0.92rem; font-weight: 600; color: var(--plum-mid); margin: 0; }
.form [aria-invalid="true"] { border-color: var(--plum-mid); }
.form-status { background: rgba(158,178,109,0.18); border: 1px solid var(--green); color: var(--ink); border-radius: var(--radius); padding: 1rem 1.25rem; font-weight: 500; margin: 0; }
.form-panel { max-width: 40rem; }
.form-panel h2 { font-size: clamp(2rem, 4.8vw, 3.4rem); }
.form-panel > p { color: var(--ink-soft); margin-bottom: 2rem; }

/* Inline links inside running text */
.text-link { color: var(--plum-soft); text-decoration: underline; text-decoration-color: var(--gold-light); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.text-link:hover { color: var(--plum); }
[hidden] { display: none !important; }

/* ---------- Gallery ---------- */
.work-group { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.work-group:last-child { margin-bottom: 0; }
.work-group > h2, .work-group h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 1.5rem; }
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); }
.work-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; }
.work img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.work figcaption { margin-top: 0.9rem; }
.work__title { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0 0 0.3rem; }
.work__medium { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ---------- Contact ---------- */
.collab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.collab-grid h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.collab-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.collab-list li { padding-left: 1.7rem; position: relative; color: var(--ink-soft); }
.collab-list li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.collab-list strong { color: var(--ink); }
.collab-outro { margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--peach); color: var(--ink); padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2rem); margin-top: 0; border-top: 1px solid var(--gold-light); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(1.75rem, 4vw, 3rem); }
.footer-brand { margin: 0 0 1rem; }
.footer-brand img { height: 78px; width: auto; }
.footer-tagline { font-family: var(--font-head); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--ink); max-width: 30ch; margin: 0; }
.footer-heading { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; font-size: 1.35rem; color: var(--plum-mid); margin: 0 0 0.9rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer-links a { color: var(--ink); font-size: 0.95rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color 0.25s ease, text-decoration-color 0.25s ease; overflow-wrap: anywhere; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--plum); text-decoration-color: var(--plum-mid); }
.footer-divider { border: none; border-top: 1px dashed var(--gold); margin: 2.25rem 0 1.25rem; opacity: 0.6; }
.footer-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-col--brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Workshop archive ---------- */
.archive-entry { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.archive-entry h3 { font-size: 1.6rem; margin-bottom: 0.2rem; }
.archive-entry__meta { font-weight: 600; color: var(--ink); margin-bottom: 0.6rem; }
.archive-entry p:not(.archive-entry__meta) { color: var(--ink-soft); }

/* ---------- 404 ---------- */
.not-found { min-height: 50vh; }

/* ---------- Scroll reveal: "ink settling on paper" ----------
   Text rises a little and comes into focus as it scrolls into view.
   Only hidden while JavaScript runs (the "js" class is set in <head>). */
.js .reveal, .js .reveal-list > * {
  opacity: 0; transform: translateY(44px); filter: blur(10px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-visible, .js .reveal-list.is-visible > * { opacity: 1; transform: none; filter: none; }
/* Lists arrive one item after another (capped at five steps) */
.js .reveal-list > :nth-child(2) { transition-delay: 0.18s; }
.js .reveal-list > :nth-child(3) { transition-delay: 0.36s; }
.js .reveal-list > :nth-child(4) { transition-delay: 0.36s; }
.js .reveal-list > :nth-child(n+5) { transition-delay: 0.48s; }

/* ---------- Home quote: the one authored moment below the banner ---------- */
.home-quote { margin: 0 0 clamp(3rem, 6vw, 4.5rem); text-align: center; }
.home-quote__text { margin: 0; }
.home-quote__text p {
  margin: 0; font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; color: var(--gold); letter-spacing: -0.005em;
}
.home-quote__by { margin-top: 0.6rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
/* Words appear one by one, like brushstrokes, then the name */
.js .home-quote .w { display: inline-block; opacity: 0; transform: translateY(0.6em); filter: blur(6px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; transition-delay: calc(var(--i) * 0.18s); }
.js .home-quote .home-quote__by { opacity: 0; transition: opacity 0.8s ease 0.8s; }
.js .home-quote.is-visible .w { opacity: 1; transform: none; filter: none; }
.js .home-quote.is-visible .home-quote__by { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .event-grid, .collab-grid, .beliefs__list, .fw__grid, .ev-cards { grid-template-columns: 1fr; }
  .fw-facts { grid-template-columns: 1fr; }
  .fw-arch { min-height: 420px; border-radius: 200px 200px 10px 10px; }
  .journey { grid-template-columns: 1fr; }
  .journey__media { order: -1; }
  .logistics { position: static; }
  .photo-frame--rot-r { transform: none; }
}
@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line-ink);
    padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-130%); visibility: hidden;
    transition: transform var(--transition), visibility 0s linear 0.45s;
    box-shadow: var(--shadow-soft);
  }
  /* Closed menu is also hidden from keyboard and screen readers */
  .nav-links.is-open { transform: translateY(0); visibility: visible; transition: transform var(--transition), visibility 0s; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.85rem 0; width: 100%; border-bottom: 1px dashed var(--line-ink); }
  .hero__actions { gap: 1rem; }
  .photo-frame::before { inset: 10px -6px -10px 6px; }
  .founders-cols { grid-template-columns: 1fr; gap: 0; }
  .founders-cols > .founder-block:nth-child(2) { padding-left: 0; border-left: none; border-top: 1px dashed rgba(201,175,129,0.8); padding-top: 2rem; margin-top: 2rem; }
  .btn { white-space: normal; }
  .work-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .work__title { font-size: 1.1rem; }
  .work__medium { font-size: 0.88rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal, .js .reveal-list > *, .js .home-quote .w { transform: none; filter: none; transition: opacity 0.6s ease !important; transition-delay: 0s !important; }
  .js .logo-draw path, .logo-draw.play path { animation: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
  .beliefs__track { animation: none; }
  .js .xp-brush { stroke-dashoffset: 0; }
  .js .xp-stop__name, .js .xp-stop__text { opacity: 1; transform: none; }
  .js .fw-title__mark { background-size: 100% 78%; }
  .js .fw-photo.reveal img { clip-path: none; }
  .home-hero__type .c { opacity: 1; }
  .home-hero__type .c.caret::after { display: none; }
  .btn:hover, .btn--primary:hover, .btn--ghost:hover { transform: none; }
}
@media (max-width: 760px) {
  .home-hero { height: clamp(460px, 74svh, 640px); }
}
@media (max-width: 760px) {
  .home-hero__title { white-space: normal; max-width: 20ch; min-height: 2.5em; }
}

/* ---------- Inner pages: the homepage's heading voice ----------
   Our Story, Workshops, Gallery, Collaborate and 404 use Cormorant Garamond in plum for
   their headings, like the homepage section titles. */
.page-inner main :is(h1, h2, h3) { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-weight: 600; color: var(--plum-mid); letter-spacing: 0.005em; }
.page-inner main h1 { font-size: clamp(2.5rem, 5vw, 3.9rem); line-height: 1.05; }
.page-inner main .section-head h2, .page-inner main .form-panel h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); }
.page-inner .work-group h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.page-inner .work__title { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-size: 1.45rem; color: var(--ink); }
.page-inner .work img { border-radius: 14px; }
.page-inner .photo-grid img { border-radius: 14px; }
.page-inner .photo-grid figcaption { font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; font-size: 1.12rem; }
.page-inner .archive-entry h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
.page-inner .founder-block__name { letter-spacing: 0.08em; }
.page-inner .founder-block:nth-child(1) .founder-block__name { color: var(--gold); }
.page-inner .fw-title.fw-title--event { color: var(--plum-mid); }