/* =========================================================================
   ALEXANDRIA FRENCH — an art object, not a website
   Design system. Parchment · letterpress · analogue · unhurried.
   Client fonts (TC Phantasmagoria + her handwriting) swap into the vars below.
   ========================================================================= */

/* ---- Local font kit (carried from 0893) ---------------------------------
   Handwriting stand-in = Caveat. Readable body serif = EB Garamond is not in
   the kit, so Cormorant carries body; Pinyon Script carries calligraphy.
   Display (Phantasmagoria stand-in) = IM Fell, loaded from Google at runtime
   via <link> in the head; falls back to DM Serif Display if offline.
------------------------------------------------------------------------- */
@font-face{font-family:"Caveat";src:url("../fonts/Caveat-400-normal-Wnz6HAc5bAfYB2Q7ZjYY.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Caveat";src:url("../fonts/Caveat-600-normal-Wnz6HAc5bAfYB2Q7ZjYY.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"PinyonScript";src:url("../fonts/Pinyon-Script-400-normal-6xKpdSJbL9-e9LuoeQiDRQR8WOXaOg.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  /* palette — her Business Branding page.
     Parchment is a PALE, cool-leaning off-white (not the old yellow/beige) so
     photo colour stays vibrant. The three brand inks are exact: grey-yellow,
     dark grey-brown, dark red/brown. */
  --parchment:   #efece4;   /* pale paper off-white — the whole-site ground */
  --parchment-2: #f5f2eb;
  --parchment-hi:#faf8f2;
  --ink:         #35291d;   /* warm dark brown for body text */
  --ink-soft:    #5b4e3c;
  --olive:       #9e915f;   /* Grey Yellow  */
  --olive-deep:  #494710;   /* Dark Grey Brown */
  --oxblood:     #442200;   /* Dark Red/Brown — headings, text accents, negative-space grounds */
  --lime:        #d8e05a;   /* pale lime — the colour-pop accent; lives on the dark maroon fields */
  --paper-edge:  rgba(68,34,0,.14);

  /* type — client fonts drop straight in here */
  --font-display: "IM Fell English","DM Serif Display",Georgia,serif;    /* → TC Phantasmagoria */
  --font-display-alt: "IM Fell DW Pica SC","IM Fell English",serif;      /* small-caps letterpress */
  --font-hand:    "Caveat",cursive;                                       /* → her handwriting */
  --font-body:    "Cormorant Garamond","Cormorant",Georgia,serif;
  --font-script:  "PinyonScript","Cormorant Garamond",cursive;

  --shadow-print: 0 1px 0 rgba(255,255,255,.4), 0 18px 40px -22px rgba(44,34,0,.55);
  --ease-slow: cubic-bezier(.22,.61,.36,1);
  --ease-elastic: cubic-bezier(.34,1.56,.64,1);
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;max-width:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(18px,1.15vw,21px);
  line-height:1.5;
  color:var(--ink);
  background:var(--parchment);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:none; /* pear cursor takes over */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* parchment grain + soft vignette, fixed so it never scrolls ------------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(120% 120% at 50% -10%, rgba(250,248,242,.6), transparent 55%),
    radial-gradient(140% 100% at 50% 120%, rgba(120,110,80,.1), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.09'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
main,header,footer{position:relative;z-index:1}

/* =========================================================================
   PAGE-TURN — an INK / PAINT SWEEP. A brushed diagonal wash of her dark
   red-brown (#442200) sweeps across the screen. On arrival it peels off to
   the left to reveal the page (CSS, auto-plays, so a page is NEVER left
   covered). On navigation site.js sweeps it back on from the right, then
   goes. One continuous leftward stroke — edgy, painterly, but smooth.
   The leading + trailing edges are a dry-brush turbulence mask, so it reads
   as a painted stroke, not a solid panel. Nods to her Pre-Raphaelite line.
   ========================================================================= */
.page-veil{position:fixed;inset:0;z-index:9997;pointer-events:none;overflow:hidden}
.page-veil .veil-ink{position:absolute;top:-8vh;left:-16vw;width:180vw;height:116vh;will-change:transform;
  transform:skewX(-11deg) translateX(0);
  /* solid ink body with a soft, feathered LEADING (left) edge baked into the
     paint itself — reads as a wash that thins out at the brush edge. No
     mask-composite (unreliable on iOS): bulletproof gradients + grain only. */
  background:
    linear-gradient(93deg, rgba(68,34,0,0) 0, rgba(68,34,0,0) 7vw, rgba(58,29,0,.55) 11vw, #3a1d00 15vw, #442200 34%, #4d2a06 100%),
    radial-gradient(130% 95% at 28% 22%, #5c3410 0%, transparent 52%);
  animation:inkReveal .74s cubic-bezier(.5,.02,.2,1) both}
/* dry-brush bristle streaks tapering off the leading edge */
.page-veil .veil-ink::before{content:"";position:absolute;top:-4%;bottom:-4%;left:5vw;width:16vw;
  background:repeating-linear-gradient(88deg,rgba(68,34,0,0) 0 3px,rgba(58,29,0,.5) 3px 5px,rgba(68,34,0,0) 5px 11px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%)}
/* paper grain over the whole wash so it isn't a flat swatch */
.page-veil .veil-ink::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E")}
/* arrive: the stroke sweeps off to the LEFT, revealing the page */
@keyframes inkReveal{0%{transform:skewX(-11deg) translateX(0)}100%{transform:skewX(-11deg) translateX(-200vw)}}
@media (prefers-reduced-motion:reduce){.page-veil{display:none!important}}

/* ---------------------------------------------------- pear cursor + trail */
.pear-cursor{
  position:fixed;top:0;left:0;width:38px;height:auto;z-index:9999;
  pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg);
  transition:transform .18s var(--ease-elastic),opacity .3s;
  filter:drop-shadow(0 6px 8px rgba(44,34,0,.3));will-change:transform;
}
.pear-cursor.tap{transform:translate(-50%,-50%) rotate(-8deg) scale(.8)}
.pear-cursor.hot{transform:translate(-50%,-50%) rotate(6deg) scale(1.25)}
@media (hover:none){ body{cursor:auto} .pear-cursor{display:none} }

/* =============================================================== TYPOGRAPHY */
.display{
  font-family:var(--font-display);font-weight:400;line-height:.92;
  letter-spacing:.005em;color:var(--oxblood);
}
/* widow/orphan guard — nothing falls alone on a line */
h1,h2,h3,.display,.hero h1,.sub,blockquote,.eyebrow,.stack-note,.margin-note,.desknote{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
.script{font-family:var(--font-script);font-weight:400;line-height:1;color:var(--olive-deep)}
.hand{font-family:var(--font-hand);font-weight:400;color:var(--ink-soft)}
.eyebrow{
  font-family:var(--font-hand);font-size:1.35rem;color:var(--olive);
  letter-spacing:.02em;margin:0 0 .3em;
}
.kicker{
  font-family:var(--font-display-alt);font-variant:small-caps;
  letter-spacing:.28em;font-size:.82rem;color:var(--olive-deep);text-transform:lowercase;
}

/* letterpress drop cap — the big olive "F" moment */
.dropcap::first-letter{
  font-family:var(--font-display);float:left;font-size:5.4em;line-height:.72;
  padding:.05em .12em 0 0;color:var(--olive-deep);font-weight:400;
}

/* ------------------------------------------------------- scroll-dissolve */
/* full body of text; as you scroll, non-key words fade to leave key words  */
.dissolve .w{transition:opacity .6s var(--ease-slow),filter .6s var(--ease-slow)}
.dissolve.spent .w:not(.key){opacity:.08;filter:blur(1.5px)}
.dissolve.spent .w.key{color:var(--oxblood)}
.w.key{transition:color .6s var(--ease-slow)}

/* =================================================================== SHELL */
.wrap{width:min(1180px,92vw);margin-inline:auto}
.wrap-narrow{width:min(760px,90vw);margin-inline:auto}
section{padding-block:clamp(5rem,11vh,9rem)}

/* =================================================================== NAV */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,2.6rem);
  transition:background .5s,backdrop-filter .5s;
}
.site-head.tucked{background:rgba(236,227,204,.72);backdrop-filter:blur(9px) saturate(1.1)}
/* over the dark maroon desk (mobile: header never veils) print the header
   in parchment until it tucks onto its paper background */
@media(max-width:900px){
  body:has(#desk) .site-head:not(.tucked){color:var(--parchment-hi)}
  body:has(#desk) .site-head:not(.tucked) .nav-toggle{color:var(--parchment-hi)}
  body:has(#desk) .site-head:not(.tucked) .nav-toggle .idx{color:var(--lime)}
  body:has(#desk) .site-head:not(.tucked) .brand img{filter:invert(1) brightness(1.6)}
}
.site-head.veiled{opacity:0;pointer-events:none;transform:translateY(-14px)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em}
.brand img{width:26px;opacity:.9}
.nav-toggle{
  display:flex;align-items:baseline;gap:.5rem;background:none;border:0;cursor:none;
  font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.22em;
  font-size:.95rem;color:var(--ink);
}
.nav-toggle .idx{font-family:var(--font-body);font-style:italic;color:var(--olive)}

/* drop-panel menu — with an image, the way she loved on caramia */
.nav-panel{
  position:fixed;inset:0;z-index:899;pointer-events:none;opacity:0;
  transition:opacity .5s var(--ease-slow);
  display:grid;grid-template-columns:1.1fr .9fr;
}
.nav-panel.open{opacity:1;pointer-events:auto}
.nav-panel .sheet{
  background:var(--parchment-2);border-right:1px solid var(--paper-edge);
  padding:clamp(4rem,10vh,7rem) clamp(2rem,6vw,5rem);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  transform:translateY(-14px);transition:transform .6s var(--ease-slow);
}
.nav-panel.open .sheet{transform:none}
.nav-panel .plate{position:relative;overflow:hidden;background:var(--ink)}
.nav-panel .plate img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.08);transition:opacity .7s,transform 3s var(--ease-slow);
  filter:grayscale(.2) sepia(.15) contrast(1.02)
}
.nav-panel .plate img.live{opacity:1;transform:scale(1)}
.nav-link{
  font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;
  color:var(--ink);display:flex;align-items:baseline;gap:1rem;width:max-content;
  transition:color .3s,transform .4s var(--ease-slow);
}
.nav-link .num{font-family:var(--font-body);font-style:italic;font-size:1.1rem;color:var(--olive)}
.nav-link:hover{color:var(--oxblood);transform:translateX(14px)}
.nav-foot{margin-top:2.5rem;font-family:var(--font-hand);font-size:1.3rem;color:var(--olive-deep)}
.nav-close{position:absolute;top:1.4rem;right:1.6rem;z-index:2;background:none;border:0;cursor:none;
  font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.2em;color:var(--parchment)}

/* =================================================================== HERO */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:6rem}
.hero .kicker{margin-bottom:1.4rem}
.hero h1{
  font-family:var(--font-display);font-size:clamp(3.4rem,12vw,10.5rem);line-height:.86;
  margin:0;letter-spacing:.01em;text-transform:uppercase;
}
.hero .sub{font-family:var(--font-script);font-size:clamp(1.8rem,4.4vw,3.4rem);color:var(--olive-deep);margin:.2em 0 1.4rem}
.hero .lede{max-width:46ch;font-size:1.12em;color:var(--ink-soft)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.4rem;align-items:center}

/* letterpress button */
.ink-btn{
  font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.18em;
  font-size:1rem;color:var(--ink);padding:.7em 1.5em;border:1px solid var(--olive-deep);
  background:var(--parchment-hi);cursor:none;position:relative;
  transition:background .35s,color .35s,transform .3s var(--ease-slow);box-shadow:var(--shadow-print);
}
.ink-btn:hover{background:var(--olive-deep);color:var(--parchment-hi);transform:translateY(-2px)}
.link-soft{font-family:var(--font-hand);font-size:1.35rem;color:var(--olive-deep);border-bottom:1px solid var(--olive);padding-bottom:2px}

/* scroll cue */
.scroll-cue{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);text-align:center;
  font-family:var(--font-hand);color:var(--olive);font-size:1.1rem;opacity:.8}
.scroll-cue .line{width:1px;height:44px;background:var(--olive);margin:.5rem auto 0;transform-origin:top;animation:cue 2.4s var(--ease-slow) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(44px);opacity:0}}

/* ====================================================== WHAT I PHOTOGRAPH */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.6rem);margin-top:3rem}
.plate-card{position:relative}
.plate-card .frame{overflow:hidden;background:var(--ink);aspect-ratio:3/4;box-shadow:var(--shadow-print)}
.plate-card:nth-child(2){transform:translateY(2.4rem)}
.plate-card:nth-child(3){transform:translateY(-1.2rem) rotate(1deg)}
.plate-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-slow),filter 1.2s;filter:grayscale(.25) sepia(.12)}
.plate-card:hover img{transform:scale(1.05);filter:grayscale(0) sepia(0)}
.plate-card h3{font-family:var(--font-display);font-size:2rem;margin:.7rem 0 .2rem}
.plate-card p{font-size:.98em;color:var(--ink-soft);margin:0}
.plate-card .num{position:absolute;top:-1.6rem;left:0;font-family:var(--font-body);font-style:italic;color:var(--olive)}

/* ============================================================ DRAG STACK */
/* full-screen tactile canvas; never clip a photo you've dragged to the edge */
/* position+z-index lift the whole pile above following sections so a photo
   dragged downward sits ON the green banner, not behind it */
.stack-sec{overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3rem,6vh,5rem)}
.stack-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:1rem}
.stack-note{font-family:var(--font-hand);font-size:1.3rem;color:var(--olive-deep);max-width:26ch}
.stack{position:relative;height:min(92svh,900px);margin-top:1.2rem;width:100%}
.drag-photo{
  position:absolute;width:clamp(170px,19vw,290px);cursor:none;user-select:none;
  background:none;padding:0;box-shadow:0 26px 50px -18px rgba(44,34,0,.6);
  transition:box-shadow .3s;touch-action:none;
}
.drag-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.3) sepia(.12);pointer-events:none}
.drag-photo figcaption{position:absolute;left:0;right:0;bottom:0;font-family:var(--font-hand);font-size:1rem;
  color:var(--parchment-hi);text-align:left;padding:1.8rem .8rem .5rem;
  background:linear-gradient(180deg,transparent,rgba(16,9,2,.6))}
.drag-photo.grabbed{box-shadow:0 34px 60px -14px rgba(44,34,0,.72);z-index:50!important}

/* ============================================================ FILM STILL */
.filmstill{position:relative;color:var(--parchment-hi);isolation:isolate}
.filmstill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,24,8,.62),rgba(30,24,8,.72)),var(--bg) center/cover;filter:saturate(.9)}
.filmstill .wrap-narrow{padding-block:8rem}
.filmstill .eyebrow{color:var(--parchment)}
.filmstill h2{font-family:var(--font-display);font-size:clamp(2.6rem,7.5vw,6.4rem);line-height:.92;margin:.2em 0 .6em}
.filmstill p{color:rgba(248,243,230,.9);max-width:52ch}

/* ============================================================ PULL QUOTE */
.pull{padding-block:clamp(4rem,9vh,7rem)}
.pull blockquote{font-family:var(--font-display);font-size:clamp(2rem,5.4vw,4rem);line-height:1.06;text-align:center;max-width:20ch;margin:0 auto;color:var(--ink)}
.pull cite{display:block;text-align:center;font-family:var(--font-hand);font-size:1.4rem;font-style:normal;color:var(--olive);margin-top:1.4rem}

/* full-bleed painting bg */
.painting{position:relative;isolation:isolate}
.painting::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(239,236,228,.52),rgba(239,236,228,.64)),var(--bg) center/cover fixed}

/* ============================================================ INVESTMENT */
.invest{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.invest .list{list-style:none;margin:2rem 0 0;padding:0}
.invest .list li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted var(--paper-edge);padding:.9rem 0;font-size:1.1em}
.invest .list .p{font-family:var(--font-display);color:var(--oxblood)}
.invest .price-note{font-family:var(--font-hand);color:var(--olive-deep);margin-top:1.2rem;font-size:1.2rem}

/* ============================================================ DIARY GRID */
.diary{background:var(--parchment-2);border-block:1px solid var(--paper-edge)}
.diary .months{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--paper-edge);border:1px solid var(--paper-edge);margin-top:2.2rem}
.diary .m{background:var(--parchment);padding:1rem .8rem;min-height:118px}
.diary .m .mo{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.14em;color:var(--olive-deep);font-size:.82rem}
.diary .m .place{font-family:var(--font-hand);font-size:1.3rem;color:var(--ink);margin-top:.3rem}
.diary .m.free .place{color:var(--olive);opacity:.65}
@media(max-width:820px){.diary .months{grid-template-columns:repeat(3,1fr)}}

/* ============================================================ CLOSE CTA */
.close-cta{background:var(--olive-deep);color:var(--parchment-hi);text-align:center;position:relative;overflow:hidden}
.close-cta::after{content:"";position:absolute;inset:0;background:url("../img/paintings/01.jpg") center/cover;opacity:.14;mix-blend-mode:overlay;pointer-events:none}
.close-cta{padding-block:clamp(5rem,12vh,8.5rem)}
.close-cta .script{color:var(--parchment-hi);font-size:clamp(3rem,9vw,6.6rem);position:relative}
.close-cta p{max-width:48ch;margin:1.2rem auto 2rem;color:rgba(248,243,230,.88);position:relative}
/* elevated "last page of a letter" closing — eyebrow, seal, signature, tape */
.close-cta .closing-eyebrow{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.26em;font-size:.76rem;color:rgba(248,243,230,.68);position:relative;margin:0 0 .3rem}
.closing-tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);width:170px;height:34px;z-index:3;background:linear-gradient(105deg,rgba(236,227,204,.26),rgba(236,227,204,.12));box-shadow:0 3px 8px rgba(0,0,0,.22)}
.closing-tape::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.12) 7px 8px)}
.close-cta .closing-sign{margin-top:2.6rem;position:relative;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.close-cta .closing-sign .seal{transform:rotate(-8deg)}
.close-cta .closing-sign .by{font-family:var(--font-hand);font-size:1.4rem;color:rgba(248,243,230,.82);line-height:1.1}
.close-cta .closing-sign .by em{font-style:normal;font-family:var(--font-script);font-size:2.1rem;color:var(--parchment-hi);display:block;margin-top:.15rem}
.close-cta .ink-btn{margin-top:.4rem}
.close-cta .ink-btn{position:relative;border-color:var(--parchment-hi);color:var(--parchment-hi);background:transparent}
.close-cta .ink-btn:hover{background:var(--parchment-hi);color:var(--olive-deep)}

/* =================================================================== FOOT */
.site-foot{background:var(--parchment-2);border-top:1px solid var(--paper-edge);padding-block:4rem 2.5rem}
.foot-grid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:.8rem;font-family:var(--font-display);font-size:1.7rem}
.foot-brand img{width:34px}
.foot-cols{display:flex;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap}
.foot-cols h4{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.2em;font-size:.8rem;color:var(--olive-deep);margin:0 0 .8rem}
.foot-cols a{display:block;font-family:var(--font-body);font-size:1.05rem;padding:.18rem 0;color:var(--ink-soft)}
.foot-cols a:hover{color:var(--oxblood)}
.foot-fine{margin-top:3rem;font-family:var(--font-body);font-style:italic;color:var(--olive);font-size:.95rem;opacity:.8}

/* =============================================================== REVEALS */
.rise{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-slow),transform 1s var(--ease-slow)}
.rise.seen{opacity:1;transform:none}

@media(max-width:820px){
  .plates{grid-template-columns:1fr;gap:2.4rem}
  .plate-card:nth-child(n){transform:none}
  .invest{grid-template-columns:1fr}
  .nav-panel{grid-template-columns:1fr}
  .nav-panel .plate{display:none}
  .stack{height:auto;min-height:560px}
}

/* =========================================================================
   SCRAPBOOK / EPHEMERA LAYER — cut-and-stick, analogue, "not a website"
   ========================================================================= */

/* a free canvas where things overlap & sit at angles (no rigid grid) */
.collage{position:relative}
.layer{position:relative;z-index:2}

/* --- printerly furniture: masthead rule, folios, registration marks ----- */
.masthead{
  display:flex;align-items:center;gap:1.2rem;
  font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.24em;
  font-size:.72rem;color:var(--olive-deep);text-transform:lowercase;
  padding-bottom:.7rem;border-bottom:1px solid var(--paper-edge);margin-bottom:2.6rem;
}
.masthead .rule{flex:1;height:1px;background:var(--paper-edge)}
.folio{font-family:var(--font-body);font-style:italic;color:var(--olive);font-size:.95rem}
.regmark{position:absolute;width:20px;height:20px;opacity:.5;pointer-events:none;
  background:
    linear-gradient(var(--olive-deep),var(--olive-deep)) center/1px 100% no-repeat,
    linear-gradient(var(--olive-deep),var(--olive-deep)) center/100% 1px no-repeat;
  border-radius:50%;box-shadow:0 0 0 1px var(--olive-deep) inset}

/* --- washi / paper tape -------------------------------------------------- */
.tape{
  position:absolute;width:118px;height:34px;z-index:6;pointer-events:none;
  background:linear-gradient(105deg,rgba(158,145,95,.42),rgba(158,145,95,.24));
  box-shadow:0 2px 6px rgba(44,34,0,.14);
  mix-blend-mode:multiply;opacity:.9;
}
.tape::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.14) 7px 8px)}
.tape.tl{top:-14px;left:-10px;transform:rotate(-24deg)}
.tape.tr{top:-14px;right:-10px;transform:rotate(20deg)}
.tape.bl{bottom:-14px;left:8%;transform:rotate(6deg)}
.tape.washi-red{background:linear-gradient(105deg,rgba(68,34,0,.34),rgba(68,34,0,.18))}

/* --- a loose photograph (borderless print, hand caption resting on it) --- */
.photo{
  position:relative;background:none;padding:0;
  box-shadow:0 24px 48px -20px rgba(44,34,0,.65);
}
.photo img{width:100%;display:block;filter:grayscale(.22) sepia(.12) contrast(1.02)}
.photo figcaption{position:absolute;left:0;right:0;bottom:0;text-align:left;z-index:2;
  font-family:var(--font-hand);font-size:1.15rem;color:var(--parchment-hi);
  padding:1.8rem .8rem .55rem;background:linear-gradient(180deg,transparent,rgba(16,9,2,.6))}
.photo.tilt-l{transform:rotate(-3deg)}
.photo.tilt-r{transform:rotate(2.4deg)}
/* mounting corners */
.photo.mounted::before,.photo.mounted::after{content:"";position:absolute;width:22px;height:22px;z-index:3;
  background:linear-gradient(135deg,rgba(44,34,0,.55) 0 48%,transparent 48%)}
.photo.mounted::before{top:4px;left:4px;transform:rotate(0deg)}
.photo.mounted::after{top:4px;right:4px;transform:rotate(90deg)}

/* a print that's been folded & re-photographed (she loved this) */
.photo.folded img{clip-path:inset(0)}
.photo.folded::after{content:"";position:absolute;left:12px;right:12px;top:50%;height:14px;
  transform:translateY(-50%);background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(44,34,0,.14));
  mix-blend-mode:overlay;pointer-events:none}

/* --- handwritten marginalia (her voice, scattered like the brief PDF) ---- */
.margin-note{
  font-family:var(--font-hand);font-size:1.25rem;line-height:1.28;color:var(--olive-deep);
  max-width:24ch;position:relative;z-index:5;
}
.margin-note.arrow::before{content:"";position:absolute;width:60px;height:40px;
  border-left:1.5px solid var(--olive);border-bottom:1.5px solid var(--olive);
  border-bottom-left-radius:40px;opacity:.7}
.margin-note.pin-l,.margin-note.pin-r{transform:none}

/* --- wax seal / stamp ---------------------------------------------------- */
.seal{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 34%,#5c3410,#442200 70%);color:var(--parchment-hi);
  font-family:var(--font-display-alt);font-variant:small-caps;font-size:.78rem;letter-spacing:.12em;
  box-shadow:0 8px 18px -8px rgba(44,34,0,.7);transform:rotate(-8deg);text-align:center;line-height:1}
.stamp{width:96px;padding:8px;background:var(--parchment-hi);border:1px dashed var(--olive);
  transform:rotate(4deg);box-shadow:var(--shadow-print)}
.stamp img{filter:grayscale(.3) sepia(.2)}

/* --- 35mm film strip ----------------------------------------------------- */
.filmstrip{background:#14110a;padding:26px 0;position:relative;overflow:hidden;box-shadow:var(--shadow-print)}
.filmstrip::before,.filmstrip::after{content:"";position:absolute;left:0;right:0;height:16px;
  background:repeating-linear-gradient(90deg,transparent 0 14px,#14110a 14px 16px,
    var(--parchment) 16px 30px,#14110a 30px 32px);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 20px,transparent 20px 34px);
          mask:repeating-linear-gradient(90deg,#000 0 20px,transparent 20px 34px)}
.filmstrip::before{top:4px}
.filmstrip::after{bottom:4px}
.filmstrip .frames{display:flex;gap:6px;padding:0 6px}
.filmstrip .frames img{width:20%;flex:0 0 auto;aspect-ratio:3/2;object-fit:cover;filter:grayscale(.35) sepia(.15);border:1px solid #2a2312}
.filmstrip .edge{position:absolute;top:9px;left:16px;font-family:var(--font-display-alt);
  font-variant:small-caps;letter-spacing:.2em;color:#c9a15a;font-size:.62rem;z-index:2}
.filmstrip .edge.r{left:auto;right:16px}

/* --- cinema subtitle annotations over a full-bleed still ----------------- */
.cinema{position:relative;min-height:min(1040px,124svh);display:flex;align-items:flex-end;isolation:isolate;color:var(--parchment-hi)}
.cinema::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,16,8,.15),rgba(20,16,8,.78)),var(--bg) center/cover}
.cinema .sub{max-width:60ch;margin-inline:auto;text-align:center;padding:0 1rem 3.4rem;
  font-family:var(--font-body);font-size:clamp(1.1rem,2.2vw,1.6rem);letter-spacing:.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.cinema .sub .cue{color:#d8e05a}   /* subtitle-yellow accent, her p10 */
/* floating film-format labels, scattered like her p10 mock */
.cinema .fmt{position:absolute;font-family:var(--font-body);color:var(--parchment-hi);
  text-shadow:0 2px 8px rgba(0,0,0,.8);max-width:20ch;font-size:.95rem;line-height:1.35;z-index:1}
.cinema .fmt b{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.14em;
  display:block;color:#d8e05a;font-weight:400;margin-bottom:.2em}

/* --- torn paper edges for section breaks -------------------------------- */
.torn-top{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='24' preserveAspectRatio='none'%3E%3Cpath d='M0 24 L0 10 Q30 2 60 9 T120 8 T180 11 T240 6 T300 10 T360 7 T420 11 T480 6 T540 10 T600 8 T660 11 T720 6 T780 10 T840 8 T900 11 T960 6 T1020 10 T1080 8 T1140 11 T1200 8 L1200 24 Z' fill='%23000'/%3E%3C/svg%3E") top/100% 24px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite:source-in;mask-composite:intersect;padding-top:24px}

/* =========================================================================
   THE STUDIO DESK — the opening. Not a hero: her table, scattered & tactile.
   ========================================================================= */
/* ROUND 3 — the desk sits on HER dark maroon, so every parchment object POPS.
   The scatter of pieces reads like a portfolio spread on a darkroom table. */
.desk{
  position:relative;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(130% 95% at 30% 18%, #5c3410 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 120%, #2c1700 0%, transparent 60%),
    var(--oxblood);
}
/* paper grain over the maroon so it isn't a flat swatch (same as .negframe) */
.desk::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E")}
.desk-stage{z-index:1}
/* fixed-size composition, absolutely centred & scaled to fit any viewport
   → the whole scene shrinks to fit; never overlaps, never clips */
.desk-stage{position:absolute;top:50%;left:50%;width:1440px;height:820px;
  transform:translate(-50%,-50%) scale(var(--desk-s,1));transform-origin:center center}
.desk .obj{position:absolute;cursor:grab;user-select:none;touch-action:none;will-change:transform,left,top}
.desk .obj:active{cursor:grabbing}
.desk .obj.grabbed{filter:drop-shadow(0 30px 40px rgba(44,34,0,.4))}

/* the printed title card that anchors the scene */
.desk .titlecard{
  z-index:20;background:var(--parchment-hi);padding:2rem 2.3rem 1.8rem;
  box-shadow:0 30px 60px -26px rgba(44,34,0,.55);border:1px solid var(--paper-edge);
  max-width:min(38vw,460px);
}
.desk .titlecard .kicker{margin-bottom:.9rem}
.desk .titlecard h1{font-family:var(--font-display);text-transform:uppercase;line-height:.86;
  font-size:clamp(2.6rem,6vw,5.4rem);margin:0}
/* inner-page titles are single long words (WEDDINGS/PORTRAITS) — size to fit the card */
.desk .titlecard.page-title h1{font-size:clamp(2.1rem,4.4vw,3.6rem);overflow-wrap:break-word}
.desk .titlecard .sub{font-family:var(--font-script);color:var(--olive-deep);
  font-size:clamp(1.4rem,2.6vw,2.2rem);margin:.3em 0 0}
.desk .titlecard .cta-row{margin-top:1.5rem;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}

/* a loose print on the desk — a clean, borderless image (she doesn't shoot
   polaroids): the photograph itself, with a handwritten note resting on it */
.desk .snap{width:clamp(170px,17vw,250px);background:none;padding:0;
  box-shadow:0 30px 55px -18px rgba(0,0,0,.65)}
.desk .snap img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.25) sepia(.12);pointer-events:none}
.desk .snap figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-family:var(--font-hand);text-align:left;font-size:1.05rem;color:var(--parchment-hi);
  padding:1.8rem .8rem .5rem;background:linear-gradient(180deg,transparent,rgba(16,9,2,.62))}

/* THE MOVING TYPE — huge storytelling typography as a draggable desk object,
   in the pale lime, deliberately running off the edges of the page */
.desk .type-obj{z-index:3;font-family:var(--font-display);color:var(--lime);line-height:.9;
  font-size:clamp(4.6rem,13vw,12.5rem);white-space:nowrap;letter-spacing:.01em;
  text-shadow:0 18px 50px rgba(0,0,0,.4)}
.desk .type-obj span{display:block;font-family:var(--font-display-alt);font-variant:small-caps;
  letter-spacing:.34em;font-size:clamp(.8rem,1.1vw,1rem);color:rgba(248,243,230,.75);margin-top:.5rem;text-shadow:none}

/* the loose painted pear */
.desk .pear-loose{width:clamp(64px,7vw,104px);z-index:24;filter:drop-shadow(0 12px 14px rgba(44,34,0,.34))}

/* the contents / index card = the navigation, as an object */
.desk .index-card{background:var(--parchment-2);border:1px solid var(--paper-edge);
  padding:1.4rem 1.6rem;box-shadow:var(--shadow-print);z-index:22;width:max-content}
.desk .index-card h4{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.2em;
  font-size:.72rem;color:var(--olive-deep);margin:0 0 .7rem}
.desk .index-card a{display:flex;gap:.7rem;font-family:var(--font-display);font-size:1.5rem;
  color:var(--ink);padding:.12rem 0}
.desk .index-card a .num{font-family:var(--font-body);font-style:italic;color:var(--olive);font-size:.95rem}
.desk .index-card a:hover{color:var(--oxblood)}

/* wax-sealed enquiry envelope */
.desk .envelope{width:clamp(150px,16vw,220px);aspect-ratio:3/2;background:var(--parchment-hi);
  border:1px solid var(--paper-edge);box-shadow:var(--shadow-print);z-index:21;display:grid;place-items:center;position:absolute}
.desk .envelope::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 49.4%,rgba(44,34,0,.12) 49.5% 50.5%,transparent 50.6%),
             linear-gradient(-135deg,transparent 49.4%,rgba(44,34,0,.12) 49.5% 50.5%,transparent 50.6%)}
.desk .envelope .seal{z-index:2}
.desk .envelope small{position:absolute;bottom:8px;font-family:var(--font-hand);color:var(--olive-deep);font-size:1rem}

/* handwritten welcome note + hint — chalky parchment on the dark maroon */
.desk .desknote{font-family:var(--font-hand);color:rgba(248,243,230,.85);font-size:1.5rem;line-height:1.25;
  max-width:22ch;z-index:23}
.desk-hint{position:absolute;left:50%;top:1.4rem;transform:translateX(-50%);z-index:30;text-align:center;
  font-family:var(--font-hand);color:rgba(248,243,230,.7);font-size:1.2rem;transition:opacity .8s;pointer-events:none}
.desk-hint.gone{opacity:0}
.desk-hint .line{display:none}

/* handwritten scroll cue — bottom right, clear of the giant storytelling type */
.desk-scroll{position:absolute;left:auto;right:2%;top:91%;transform:none;z-index:26;
  text-align:right;font-family:var(--font-hand);color:rgba(248,243,230,.85);font-size:1.55rem;line-height:1.2;pointer-events:none}
.desk-scroll .arrow{display:block;margin-top:.15rem;font-size:1.7rem;color:var(--lime);animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* film strip as a loose desk object (smaller) */
.desk .strip-obj{width:clamp(200px,24vw,340px);z-index:18}

/* MOBILE: the desk can't scatter on a phone — become a curated scrapbook
   column instead. Same ephemera, stacked with intent, rotations intact. */
@media(max-width:900px){
  .desk{height:auto;min-height:0;overflow:visible;display:block;padding:0}
  .desk-stage{position:relative;top:auto;left:auto;width:auto;height:auto;transform:none;
    min-height:100svh;padding:6.5rem 6% 2rem;display:block}
  /* CRITICAL: objects must NOT trap touch, and the desktop inline positions
     (top/left/right %) MUST be overridden — hence !important, or the polaroids
     get both their desktop top AND the mobile bottom and stretch. */
  .desk .obj{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;cursor:auto;touch-action:auto;width:auto;margin:0}
  .desk .desknote{display:block;transform:rotate(-2.5deg);font-size:1.3rem;margin:0 0 .8rem .2rem;max-width:22ch}
  .desk .titlecard{position:relative;z-index:3;max-width:none;width:84%;margin:2rem auto 0}
  .desk .titlecard h1{font-size:clamp(2.3rem,11.5vw,3.3rem)}
  .desk .titlecard .cta-row{gap:.9rem}
  /* two prints tucked BEHIND the card, peeking from the corners so they
     float about it without covering a single word */
  .desk .snap{position:absolute!important;width:42vw;max-width:176px;z-index:1;padding:0;
    box-shadow:0 22px 42px -16px rgba(0,0,0,.6)}
  .desk .snap figcaption{display:none}
  .desk .snap:nth-of-type(1){top:1rem!important;right:-7%!important;transform:rotate(6deg)}
  .desk .snap:nth-of-type(2){bottom:1.5rem!important;left:-7%!important;transform:rotate(-6deg)}
  .desk .snap:nth-of-type(n+3){display:none!important}
  /* the storytelling type pops as a static line above the card on phones */
  .desk .type-obj{font-size:clamp(2.6rem,13vw,3.6rem);white-space:normal;line-height:.92;
    margin:1.6rem 0 0;max-width:100%}
  .desk .type-obj span{letter-spacing:.26em;font-size:.72rem}
  /* the contents, envelope, film strip & pear live in the MENU on mobile —
     keep the hero to one clean screen, not a mile of scroll */
  .desk .strip-obj,.desk .index-card,.desk .envelope,.desk .pear-loose{display:none}
  .desk-hint{display:none}
  .desk-scroll{position:relative;left:auto;right:auto;top:auto;transform:rotate(-2deg);margin:2.4rem auto 0;text-align:center;display:block}
}

/* MOBILE safety net: any inline multi-column / two-col grid collapses to one */
@media(max-width:720px){
  [style*="column-count"]{column-count:1!important}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
}

/* MOBILE: the pile stays a real, finger-draggable scatter — a bounded canvas
   with breathing room above/below so it never fights the page scroll.
   Show 6 of the 12 so a phone screen isn't overcrowded. */
@media(max-width:900px){
  .stack{height:74svh!important;min-height:480px;margin-top:1.4rem}
  .drag-photo{width:42vw!important;max-width:216px;cursor:grab}
  .drag-photo:nth-of-type(n+7){display:none}
  .stack-note{max-width:none}
}

/* =========================================================================
   INNER PAGES — magazine spreads. Shared masthead, prose, faq, pricing, etc.
   ========================================================================= */
.page-top{padding-top:clamp(7rem,15vh,10.5rem)}

/* poster-style page masthead (magazine cover feel) */
.page-mast{position:relative;text-align:center;padding-block:clamp(2rem,5vh,4rem)}
.page-mast .issue{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.28em;font-size:.78rem;color:var(--olive-deep);display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.2rem}
.page-mast .issue::before,.page-mast .issue::after{content:"";width:min(18vw,120px);height:1px;background:var(--paper-edge)}
.page-mast h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(3rem,10vw,8rem);line-height:.86;margin:0}
.page-mast .over{font-family:var(--font-script);color:var(--olive-deep);font-size:clamp(1.6rem,4vw,3rem);margin:.1em 0 0}
.page-mast .meta{font-family:var(--font-body);font-style:italic;color:var(--olive);margin-top:1rem}

/* readable prose column with letterpress drop cap */
.prose{max-width:64ch;margin-inline:auto;font-size:1.12em;line-height:1.62;color:var(--ink-soft)}
.prose p{margin:0 0 1.3em}
.prose.lead{font-size:1.24em;color:var(--ink)}

/* numbered editorial "what's included" list (weddings) */
.numbered{list-style:none;margin:2rem 0 0;padding:0;max-width:70ch}
.numbered li{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.1rem 0;border-bottom:1px dotted var(--paper-edge);align-items:baseline}
.numbered .no{font-family:var(--font-display);font-size:1.6rem;color:var(--olive-deep)}
.numbered .no small{font-size:.9rem}
.numbered em{font-style:italic;color:var(--olive)}

/* investment tiers list (reuses .invest .list styling too) */
.pricelist{list-style:none;margin:1.6rem 0 0;padding:0;max-width:64ch}
.pricelist li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted var(--paper-edge);padding:.9rem 0;font-size:1.12em}
.pricelist .p{font-family:var(--font-display);color:var(--oxblood);white-space:nowrap}

/* three stacked panels — portraits (maternity/newborn/family) */
.panels{display:grid;gap:0;margin-top:2.5rem;border:1px solid var(--paper-edge)}
.panel{display:grid;grid-template-columns:1fr 1fr;min-height:60vh;border-bottom:1px solid var(--paper-edge)}
.panel:last-child{border-bottom:0}
.panel:nth-child(even) .panel-media{order:2}
.panel-media{overflow:hidden;background:var(--parchment-2)}
.panel-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) sepia(.12)}
.panel-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(2rem,5vw,4.5rem)}
.panel-body .letter{font-family:var(--font-display);font-size:clamp(4rem,9vw,7rem);color:var(--olive-deep);line-height:.8}
.panel-body h3{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);margin:.4rem 0 .2rem}
.panel-body .say{font-family:var(--font-hand);font-size:1.4rem;color:var(--olive);margin:0 0 1rem}
.panel-body .p{font-family:var(--font-display);color:var(--oxblood);margin-top:1rem}
@media(max-width:820px){.panel{grid-template-columns:1fr}.panel:nth-child(even) .panel-media{order:0}.panel-media{min-height:52vh}}

/* sub-service cards (wedding: proposal/engagement/boudoir/day) */
.subservices{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.5rem}
.subcard{position:relative;background:var(--parchment-hi);border:1px solid var(--paper-edge);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow-print)}
/* text boxes stay straight — the scrapbook tilt lives on photos, not copy */
.subcard h3{font-family:var(--font-display);font-size:1.8rem;margin:0 0 .3rem}
.subcard .say{font-family:var(--font-hand);color:var(--olive-deep);font-size:1.25rem;margin:0 0 .8rem}
.subcard p{color:var(--ink-soft);margin:0 0 1rem}
.subcard .p{font-family:var(--font-display);color:var(--oxblood)}
@media(max-width:720px){.subservices{grid-template-columns:1fr}}

/* FAQ (schema-ready dl) */
.faq{max-width:70ch;margin:2rem auto 0}
.faq-item{border-bottom:1px solid var(--paper-edge);padding:1.4rem 0}
.faq-item h3{font-family:var(--font-display);font-size:1.4rem;margin:0 0 .5rem;color:var(--ink)}
.faq-item p{margin:0;color:var(--ink-soft)}

/* enquiry form */
.form-wrap{max-width:64ch;margin:2rem auto 0}
.field{margin-bottom:1.4rem}
.field label{display:block;font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.16em;font-size:.82rem;color:var(--olive-deep);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;background:var(--parchment-hi);border:1px solid var(--olive);padding:.8em .9em;font-family:var(--font-body);font-size:1.05rem;color:var(--ink);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--olive-deep);box-shadow:0 0 0 3px rgba(158,145,95,.18)}
.field textarea{min-height:140px;resize:vertical}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:600px){.field.two{grid-template-columns:1fr}}

/* =========================================================================
   SCRAPBOOK MOTION — carries the tactile, hand-placed feel through the
   inner pages: items get placed as you scroll, photos lift on hover,
   gentle parallax drift, and floating draggable polaroids in the margins.
   ========================================================================= */
.photo,.subcard,.plate-card{transition:transform .55s var(--ease-slow)}
.photo:hover,.subcard:hover,.plate-card:hover{transform:translateY(-4px) scale(1.01);z-index:6}

/* per-item "placed onto the scrapbook" reveal */
.placeable{opacity:0;transform:translateY(32px) rotate(var(--pr,-2deg)) scale(.97)}
.placeable.set{opacity:1;transform:none;transition:opacity .7s var(--ease-slow),transform .85s var(--ease-elastic)}

/* elements that drift a little on scroll (parallax, set from JS) */
.drift{will-change:transform}

/* floating draggable polaroids tucked into the page margins */
.float-poly{position:absolute;width:clamp(140px,12vw,196px);background:none;
  padding:0;box-shadow:0 24px 46px -18px rgba(44,34,0,.6);cursor:grab;z-index:7;
  will-change:transform;touch-action:none}
.float-poly:active{cursor:grabbing}
.float-poly img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.28) sepia(.12);pointer-events:none}
.float-poly figcaption{position:absolute;left:0;right:0;bottom:0;font-family:var(--font-hand);text-align:left;
  font-size:.92rem;color:var(--parchment-hi);padding:1.4rem .6rem .4rem;
  background:linear-gradient(180deg,transparent,rgba(16,9,2,.6))}
@media(max-width:1160px){.float-poly{display:none}}

/* =========================================================================
   LESS STRUCTURE — inner pages read as a scattered scrapbook, not aligned
   boxes: mastheads offset & tilted, copy pushed off-centre and alternating
   sides, cards un-boxed into tilted overlapping notes, ephemera floats.
   ========================================================================= */
.page-mast{text-align:left;padding-inline:clamp(1.2rem,7vw,7rem)}
.page-mast .issue{justify-content:flex-start}
.page-mast .issue::before{display:none}
.page-mast h1{display:inline-block}
.page-mast .over{display:block;margin-left:clamp(3rem,16vw,12rem);margin-top:.15em}
.page-mast .meta{margin-left:clamp(3rem,16vw,12rem)}

/* copy blocks pushed off-centre, alternating sides, gently tilted */
.prose{margin-left:clamp(1.2rem,14vw,12rem);margin-right:auto}
main > section:nth-of-type(even) .prose{margin-left:auto;margin-right:clamp(1.2rem,14vw,12rem)}
.prose.lead{transform:none}
.eyebrow{display:inline-block}
.numbered,.pricelist,.faq{margin-left:clamp(1rem,9vw,7rem)}
main > section:nth-of-type(even) :is(.numbered,.pricelist,.faq){margin-left:auto;margin-right:clamp(1rem,9vw,7rem)}

/* sub-services: not a 2-col box grid — scattered taped notes, overlapping */
.subservices{display:block;position:relative}
.subcard{border:0;max-width:min(46ch,64%);margin:0 0 2.4rem;box-shadow:0 22px 46px -20px rgba(44,34,0,.52)}
.subcard::before{content:"";position:absolute;top:-13px;left:2rem;width:120px;height:30px;background:linear-gradient(105deg,rgba(158,145,95,.4),rgba(158,145,95,.22));transform:rotate(-3deg);box-shadow:0 2px 6px rgba(44,34,0,.14)}
/* keep the off-centre, alternating placement (scattered) but no tilt on copy */
.subcard:nth-child(1){margin-left:0}
.subcard:nth-child(2){margin-left:auto;margin-right:2%}
.subcard:nth-child(3){margin-left:12%}
.subcard:nth-child(4){margin-left:auto;margin-right:8%}

/* panels: drop the hard box */
.panels,.panel{border:0!important}

/* =========================================================================
   SCATTER — a section is a loose canvas: title, copy, photos sit ANYWHERE
   and float in as you scroll. Not centred, not columns, not boxes.
   ========================================================================= */
.scatter{position:relative;padding:0;overflow:hidden}
.scatter-stage{position:relative;height:min(96svh,880px);width:min(1360px,94vw);margin-inline:auto}
.scatter-stage > .s-item{position:absolute;margin:0}
.s-item.eyebrow{font-size:1.5rem}
.s-item.head{font-family:var(--font-display);line-height:.92;font-size:clamp(2.8rem,7.6vw,6.6rem);color:var(--oxblood)}
.s-item.body{font-family:var(--font-body);font-size:1.18rem;line-height:1.6}
.s-item.note{font-family:var(--font-hand);color:var(--olive-deep);font-size:1.5rem;line-height:1.25}
/* TEXT stays straight even where the HTML carries an inline tilt — the
   scrapbook slant lives on photos/pricetags/seals only, never on copy */
.s-item:is(.eyebrow,.head,.body,.note,.script,.link-soft,.ink-btn,.kicker){transform:none!important}
/* placed-in reveal for scattered items (composes with rotation via translate) */
.s-item{opacity:0;translate:0 28px}
.s-item.in{opacity:1;translate:0 0;transition:opacity .7s var(--ease-slow),translate .85s var(--ease-elastic)}
@media(max-width:900px){
  .scatter{overflow:visible}
  /* height:auto!important beats inline heights so sections don't overlap */
  .scatter-stage{height:auto!important;min-height:0!important;display:flex;flex-direction:column;gap:1.6rem;padding:4.5rem 6% 3rem;align-items:flex-start}
  .scatter-stage > .s-item{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;transform:none!important;max-width:100%!important;width:auto!important;margin:0}
  .s-item.body{max-width:60ch}
  /* keep images sensible — don't let width:auto blow them up full-width */
  .scatter-stage > .photo.s-item{width:min(74%,300px)!important}
  .scatter-stage > img.s-item{width:78px!important;align-self:center}
  .scatter-stage > .pricetag.s-item{width:auto!important}
  /* the About film-still has lots of polaroids for the desktop scatter —
     on mobile keep just two so it isn't a long pointless scroll */
  .filmstill.scatter .scatter-stage > figure.photo.s-item:nth-of-type(n+3){display:none}
}

/* wax seal + handwritten signature, on parchment (scattered closing) */
.sign-scrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.sign-scrap .by{font-family:var(--font-hand);color:var(--olive-deep);font-size:1.4rem;line-height:1.1;text-align:center}
.sign-scrap .by em{font-style:normal;font-family:var(--font-script);color:var(--oxblood);font-size:2rem;display:block;margin-top:.1rem}

/* scattered luggage-tag price cards (scrapbook pricing) */
.pricetag{position:relative;display:flex;flex-direction:column;gap:.2rem;
  background:var(--parchment-hi);padding:1.1rem 1.5rem 1.1rem 2.4rem;width:max-content;max-width:34ch;
  border:1px solid var(--paper-edge);box-shadow:0 20px 40px -18px rgba(44,34,0,.5)}
.pricetag::before{content:"";position:absolute;top:50%;left:12px;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;border:2px solid var(--olive);background:var(--parchment)}
.pricetag .svc{font-family:var(--font-body);font-style:italic;color:var(--ink-soft);font-size:1.02rem;line-height:1.2}
.pricetag .amt{font-family:var(--font-display);color:var(--oxblood);font-size:1.9rem;line-height:.95}

/* mobile: pieces place themselves in (translate composes with CSS rotation) */
.m-place{opacity:0;translate:0 26px}
.m-place.in{opacity:1;translate:0 0;transition:opacity .6s var(--ease-slow),translate .78s var(--ease-elastic)}

/* gentle continuous float — uses `translate` so it composes with rotation */
.floaty{animation:afloat var(--fd,7s) ease-in-out infinite}
@keyframes afloat{0%,100%{translate:0 0}50%{translate:0 -9px}}

@media(max-width:820px){
  .page-mast{text-align:center;padding-inline:1.2rem}
  .page-mast .issue{justify-content:center}
  .page-mast .over,.page-mast .meta{margin-left:0}
  .prose,main > section:nth-of-type(even) .prose,
  .numbered,.pricelist,.faq,main > section:nth-of-type(even) :is(.numbered,.pricelist,.faq){margin-inline:auto}
  .subcard{max-width:100%;margin-inline:auto!important;transform:none!important}
}

/* the scrapbook collage spread (overlapping, no grid) -------------------- */
.spread{position:relative;min-height:640px}
.spread .item{position:absolute}
@media(max-width:900px){
  .spread{min-height:0;display:flex;flex-direction:column;gap:2rem}
  .spread .item{position:relative!important;inset:auto!important;width:auto!important;transform:none!important}
  .cinema .fmt{position:relative;inset:auto;margin:.6rem auto;text-align:center}
  .tape{display:none}
}

/* =========================================================================
   NEGATIVE-SPACE FRAME — her ref: a single image floating in a deep field of
   dark red/brown (#442200), acres of negative space around it. Used sparingly
   to let one picture breathe. Text on it prints in parchment.
   ========================================================================= */
.negframe{background:var(--oxblood);color:var(--parchment-hi);position:relative;isolation:isolate;
  padding-block:clamp(5rem,15vh,10rem);text-align:center;overflow:hidden}
/* faint paper grain over the brown so it isn't a flat swatch */
.negframe::before{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:soft-light;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E")}
.negframe .eyebrow{color:rgba(248,243,230,.6)}
.negframe .over{font-family:var(--font-script);color:rgba(248,243,230,.82);font-size:clamp(1.6rem,3.6vw,2.6rem)}
.negframe h2{font-family:var(--font-display);color:var(--parchment-hi);line-height:1.02;
  font-size:clamp(2rem,5vw,3.6rem);margin:.2em auto 2.4rem;max-width:20ch}
.negframe .frame{display:inline-block;background:#2c1700;padding:14px;
  box-shadow:0 50px 90px -34px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.06) inset;max-width:min(760px,86vw)}
.negframe .frame.tall{max-width:min(430px,74vw)}
.negframe .frame img{width:100%;display:block;filter:contrast(1.03) saturate(1.02)}
.negframe .cap{font-family:var(--font-hand);color:rgba(248,243,230,.66);font-size:1.2rem;margin-top:1.5rem}

/* =========================================================================
   MAGAZINE SPREAD — her ref: editorial title + small body copy set against an
   asymmetric collage of frames, one tall hero. For portfolio + prose together.
   Left cluster (copy + small frames), right a single full-height portrait.
   ========================================================================= */
.mag{padding-block:clamp(3.5rem,9vh,7rem)}
.mag-inner{width:min(1240px,94vw);margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.2rem,3vw,2.6rem);align-items:stretch}
.mag-left{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,2vw,1.6rem);align-content:start}
.mag-copy{grid-column:1/3;margin-bottom:.4rem}
.mag-copy h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.6vw,2.9rem);color:var(--oxblood);margin:0 0 .7rem;line-height:1}
.mag-copy .over{font-family:var(--font-script);color:var(--olive-deep);font-size:1.6rem;display:block;margin-bottom:.4rem}
.mag-copy p{font-family:var(--font-body);color:var(--ink-soft);font-size:1.06rem;line-height:1.5;max-width:38ch;margin:0}
.mag-left figure{margin:0;overflow:hidden;background:var(--parchment-2)}
.mag-left figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.mag-a{grid-column:2/3;aspect-ratio:3/4}
.mag-b{grid-column:1/2;aspect-ratio:4/5}
.mag-c{grid-column:2/3;aspect-ratio:4/5}
.mag-hero{margin:0;overflow:hidden;background:var(--ink);min-height:100%}
.mag-hero img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
@media(max-width:820px){
  .mag-inner{grid-template-columns:1fr;gap:1.2rem}
  .mag-hero{aspect-ratio:4/5;min-height:0;order:-1}
}

/* =========================================================================
   SCROLL REEL — Anna Dunlop moment: a staggered strip of frames that pans
   horizontally as you scroll the section past (film reel through the gate).
   Scroll-linked via JS (progress → translateX). On phones it's a swipe strip.
   ========================================================================= */
.reel{overflow:hidden;padding-block:clamp(3rem,7vh,5.5rem)}
.reel-head{width:min(1180px,92vw);margin:0 auto 1.8rem}
.reel-head h2{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.6rem);margin:.1em 0 0;line-height:1}
.reel-track{display:flex;gap:clamp(1rem,2vw,1.9rem);padding-inline:8vw;will-change:transform}
.reel-item{flex:0 0 auto;width:clamp(250px,33vw,440px);margin:0;background:none;position:relative;
  padding:0;box-shadow:0 26px 50px -22px rgba(44,34,0,.55)}
.reel-item:nth-child(even){margin-top:clamp(1.6rem,5vw,4rem)}
.reel-item img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.2) sepia(.06) contrast(1.02)}
.reel-item figcaption{position:absolute;left:0;right:0;bottom:0;font-family:var(--font-hand);text-align:left;
  color:var(--parchment-hi);font-size:1rem;padding:1.8rem .8rem .5rem;
  background:linear-gradient(180deg,transparent,rgba(16,9,2,.6))}
@media(max-width:900px){
  .reel-track{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:1rem;transform:none!important;
    -webkit-overflow-scrolling:touch}
  .reel-item{width:74vw;scroll-snap-align:center}
  .reel-item:nth-child(even){margin-top:0}
}

/* =========================================================================
   THE BROCHURE — a printed portfolio you physically turn. Two-page spreads
   that flip in 3D on desktop; a clean single-page swipe on phones. Content is
   authored as a flat list of .page nodes so the CRM can reorder/swap them.
   ========================================================================= */
/* ROUND 3 — the portfolio is a FULL-SCREEN dark stage: the whole viewport
   goes her maroon (like the desk), a slim light masthead sits at the top and
   the two-page spread fills everything left. Turns on scroll/click/swipe. */
body:has([data-book]) main{min-height:100svh;display:flex;flex-direction:column;isolation:isolate;
  background:
    radial-gradient(130% 95% at 30% 12%, #5c3410 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 120%, #2c1700 0%, transparent 60%),
    var(--oxblood)}
body:has([data-book]) main::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E")}
/* the fixed header prints in parchment over the dark stage until it tucks */
body:has([data-book]) .site-head:not(.tucked){color:var(--parchment-hi)}
body:has([data-book]) .site-head:not(.tucked) .nav-toggle{color:var(--parchment-hi)}
body:has([data-book]) .site-head:not(.tucked) .nav-toggle .idx{color:var(--lime)}
body:has([data-book]) .site-head:not(.tucked) .brand img{filter:invert(1) brightness(1.6)}

.book-intro{text-align:center;padding:clamp(3.9rem,6.5vh,4.6rem) 1.2rem 0}
.book-intro .issue{display:none}
.book-intro h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:.9;margin:0;color:var(--parchment-hi)}
.book-intro .over{font-family:var(--font-script);color:var(--lime);font-size:clamp(1.3rem,2.4vw,1.9rem);margin:.1em 0 0}
.book-hint{font-family:var(--font-hand);color:rgba(248,243,230,.6);font-size:1rem;margin-top:.3rem}

.book-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:.4rem 1rem 3.2rem;min-height:0;position:relative}
/* MASSIVE: sized from the viewport so the spread swallows the screen; the
   controls float over the maroon beneath it instead of taking up a row */
.book{position:relative;perspective:3400px;height:min(calc(100svh - 225px),58vw);width:auto;aspect-ratio:2 / 1.34;
  max-width:97vw;filter:drop-shadow(0 60px 90px rgba(0,0,0,.55))}
.book-wrap .book-controls{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);z-index:5}
/* the maroon covers get a light edge so they read against the maroon stage */
.page.cover{border:1px solid rgba(248,243,230,.22)}
/* each leaf = two pages (front/back), hinged at the spine (centre) */
.book .leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;
  transform-style:preserve-3d;transition:transform .96s cubic-bezier(.42,.12,.18,1);cursor:none}
.book .leaf .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;
  background:var(--parchment-hi);border:1px solid rgba(68,34,0,.08)}
.book .leaf .face.front{box-shadow:inset 14px 0 30px -18px rgba(44,34,0,.5)}       /* gutter on the spine side */
.book .leaf .face.back{transform:rotateY(180deg);box-shadow:inset -14px 0 30px -18px rgba(44,34,0,.5)}
.book .leaf.turned{transform:rotateY(-180deg)}
.book.at-start .leaf:first-child .face.front{box-shadow:none}                       /* closed cover: no gutter */

/* a page (one side) */
.page{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;margin:0}
.page.plate{background:var(--ink)}
.page.plate img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.03)}
.page.text{justify-content:center;gap:.6rem;padding:clamp(1.6rem,3.6vw,3.2rem)}
.page.text h2{font-family:var(--font-display);color:var(--oxblood);font-size:clamp(1.8rem,3.6vw,3rem);line-height:1;margin:.1em 0 .3em}
.page.text h2.script{font-family:var(--font-script);color:var(--olive-deep);font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:16ch}
.page.text p{font-family:var(--font-body);color:var(--ink-soft);font-size:1.06rem;line-height:1.55;max-width:40ch;margin:0}
.page.text .folio{font-family:var(--font-hand);color:var(--olive);margin-top:1rem}
.page.text.closing{align-items:flex-start}
.page.text.closing .ink-btn{margin-top:1.4rem}
.page.figpage{padding:clamp(1rem,2.4vw,2rem);align-items:center;justify-content:center}
.page.figpage figure{margin:0;max-height:100%;display:flex;flex-direction:column;gap:.7rem}
.page.figpage img{width:100%;max-height:82%;object-fit:cover;filter:grayscale(.14) contrast(1.03)}
.page.figpage figcaption{font-family:var(--font-hand);text-align:center;color:var(--ink-soft);font-size:1.15rem}

/* covers — deep red/brown, letterpressed */
.page.cover{background:var(--oxblood);color:var(--parchment-hi);align-items:center;justify-content:center;
  text-align:center;gap:clamp(.45rem,1.4vh,.9rem);padding:clamp(1.2rem,3vw,3rem)}
.page.cover::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.5;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.5'/%3E%3C/svg%3E")}
.page.cover > *{position:relative;z-index:1}
.page.cover .cover-rule{width:44%;height:1px;background:rgba(248,243,230,.4)}
.page.cover .seal.big{width:clamp(56px,11vh,96px);height:clamp(56px,11vh,96px);font-size:1rem;transform:none}
.page.cover .cover-kicker{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.24em;font-size:.72rem;color:rgba(248,243,230,.7)}
.page.cover .cover-title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,3.9vw,4.2rem);line-height:.9;margin:0}
.page.cover .cover-sub{font-family:var(--font-script);font-size:clamp(1.5rem,3vw,2.2rem);color:rgba(248,243,230,.9)}
.page.cover .cover-year{font-family:var(--font-body);font-style:italic;color:rgba(248,243,230,.66);font-size:.95rem}
.page.cover .cover-turn{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.2em;font-size:.86rem;
  color:var(--parchment-hi);background:transparent;border:1px solid rgba(248,243,230,.5);padding:.6em 1.4em;cursor:none;margin-top:.4rem}
.page.cover .cover-turn:hover{background:var(--parchment-hi);color:var(--oxblood)}
.page.cover .cover-pear{width:60px;margin-top:.3rem;filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}

.book-controls{display:flex;gap:1.6rem;align-items:center;
  font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.2em;font-size:.82rem;color:rgba(248,243,230,.85)}
.book-controls button{background:none;border:1px solid rgba(248,243,230,.35);padding:.55em 1.2em;cursor:none;color:inherit;font:inherit;
  transition:background .3s,color .3s}
.book-controls button:hover{background:var(--parchment-hi);color:var(--oxblood)}
.book.at-start ~ .book-controls [data-book-prev]{opacity:.3;pointer-events:none}
.book.at-end   ~ .book-controls [data-book-next]{opacity:.3;pointer-events:none}
.book-controls .book-note{font-family:var(--font-hand);letter-spacing:0;text-transform:none;color:rgba(248,243,230,.55)}

/* short laptop screens: compact the cover so nothing clips */
@media(max-height:800px){
  .page.cover .seal.big{width:54px;height:54px;font-size:.78rem}
  .page.cover .cover-sub{font-size:clamp(1.2rem,2.2vw,1.8rem)}
  .page.cover .cover-year{display:none}
}

/* MOBILE — the flip becomes a single-page swipe deck (no 3D on phones) */
@media(max-width:820px){
  .book{perspective:none;filter:drop-shadow(0 24px 34px rgba(44,34,0,.28))}
  .book.as-slider{aspect-ratio:auto;width:min(460px,94vw);height:min(76svh,640px);
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    border:1px solid var(--paper-edge);background:var(--parchment-hi)}
  .book.as-slider::-webkit-scrollbar{display:none}
  .book.as-slider .slide{flex:0 0 100%;scroll-snap-align:center;position:relative;height:100%}
  .book.as-slider .slide .page{position:absolute;inset:0}
}

/* =========================================================================
   ROUND 3 — BIGGER & BOLDER
   ========================================================================= */

/* --- MARQUEE — a moving band of storytelling type, lime on her maroon ---- */
.marquee{background:var(--oxblood);color:var(--lime);overflow:hidden;position:relative;isolation:isolate;
  padding-block:clamp(1.1rem,2.4vh,1.8rem);border-block:1px solid rgba(216,224,90,.18)}
.marquee::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.45;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E")}
.mq-track{position:relative;z-index:1;display:flex;width:max-content;will-change:transform;
  animation:mq 30s linear infinite}
.mq-track span{font-family:var(--font-display);font-size:clamp(2.4rem,5.6vw,4.8rem);line-height:1;
  white-space:nowrap;padding-right:1.2em}
.mq-track span i{font-style:normal;color:rgba(248,243,230,.55);padding-inline:.45em;font-size:.6em;vertical-align:.28em}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* --- BIG PLATE — one full-screen photograph with massive writing over it - */
.bigplate{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;
  color:var(--parchment-hi);overflow:hidden}
.bigplate::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,12,4,.12) 30%,rgba(20,12,4,.66)),var(--bg) center var(--bgy,50%)/cover}
.bigplate .bp-inner{width:min(1340px,94vw);margin-inline:auto;padding:0 0 clamp(2.6rem,7vh,5.5rem)}
.bigplate .eyebrow{color:var(--lime)}
/* the writing is the size of the picture — edge to edge, allowed off the page */
.bigplate h2{font-family:var(--font-display);font-size:clamp(3.6rem,14vw,13.5rem);line-height:.86;
  margin:.05em 0 .15em -.03em;letter-spacing:.005em;max-width:none;width:100vw;
  text-shadow:0 6px 40px rgba(0,0,0,.5)}
.bigplate p{max-width:46ch;color:rgba(248,243,230,.92);font-size:1.12em;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* --- BREATHER — her red-page ref: acres of maroon, one small letterboxed
   picture. A pause between the loud bits. Reuses .negframe; this variant is
   the quiet full-page version with a wide strip of an image. -------------- */
.negframe .frame.wide{max-width:min(880px,88vw);padding:0;background:none;
  box-shadow:0 60px 110px -40px rgba(0,0,0,.8)}
.negframe .frame.wide img{aspect-ratio:21/9;object-fit:cover;width:min(880px,88vw)}
.negframe.breather{padding-block:clamp(7rem,20vh,13rem)}
.negframe.breather .cap{color:rgba(248,243,230,.55)}
/* a giant word laid ACROSS the picture — half on the maroon, half on the
   photograph. The bold overlap moment she asked for. */
.negframe .negword{position:relative;z-index:2;font-family:var(--font-display);color:var(--lime);
  font-size:clamp(3.2rem,10.5vw,10rem);line-height:.9;text-align:left;white-space:nowrap;
  width:min(880px,88vw);margin:0 auto -.42em;text-shadow:0 14px 44px rgba(0,0,0,.45)}

/* on-dark section head in lime for the odd pop moment */
.lime{color:var(--lime)!important}

/* --- SIDE COLUMNS — her Readymag ref, now a pair of ENDLESS vertical
   photo reels: copy in the centre, the left column glides up and the right
   glides down, forever, faded at the edges. Pause on hover. site.js builds
   the seamless loop and drives it (rAF), so Alexandria can stack as many
   images into each column as she likes via the CRM. ---------------------- */
.sidecols{position:relative;overflow:hidden;min-height:100svh;display:grid;
  grid-template-columns:1fr minmax(34ch,52ch) 1fr;gap:clamp(1.2rem,3vw,3rem);
  align-items:center;padding-block:clamp(3rem,6vh,5rem)}
.sc-col{position:relative;overflow:hidden;height:min(88svh,820px);
  padding-inline:clamp(.6rem,2vw,2rem);
  -webkit-mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
          mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.sc-track{display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,1.8rem);will-change:transform}
.sc-set{display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,1.8rem)}
/* size the prints so a FULL photo is always on screen inside the reel */
.sc-col figure{margin:0;box-shadow:0 26px 50px -22px rgba(44,34,0,.55);
  width:min(100%,calc(38svh * .8));margin-inline:auto}
.sc-col img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.22) sepia(.1) contrast(1.02)}
/* editing: columns lie flat & static so every photo is clickable to swap */
.sc-col.as-flat{overflow:visible;height:auto;-webkit-mask:none;mask:none;
  display:flex;flex-direction:column;gap:clamp(1rem,2.4vh,1.8rem)}
.sc-copy{text-align:center;padding-inline:1rem}
.sc-copy .eyebrow{display:block}
.sc-copy h2{font-family:var(--font-display);font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:.94;
  color:var(--oxblood);margin:.2em 0 .4em}
.sc-copy p{color:var(--ink-soft);font-size:1.12em;line-height:1.6;margin:0 0 1.2em}
@media(max-width:900px){
  .sidecols{grid-template-columns:1fr 1fr;min-height:0;
    grid-template-areas:"copy copy" "left right";row-gap:1.6rem}
  .sc-copy{grid-area:copy;padding-inline:6%}
  .sc-col{padding-inline:2%}
  .sc-col.sc-left{grid-area:left;height:56svh}
  .sc-col.sc-right{grid-area:right;height:56svh}
}

/* --- PILE DISPERSAL — her Readymag ref: the bold scrapbook pile "all goes
   away" as you scroll past. site.js drifts each print outward + fades it
   (uses the `translate` property so it composes with the drag rotation). -- */
.stack-sec .drag-photo{transition:opacity .25s linear}

/* --- THE FINALE — "let's tell your story." goes up several levels: the
   last page of every chapter is a full maroon plate, the script line huge
   in lime and running off the page, everything else printed in parchment. */
.scatter.finale{isolation:isolate;
  background:
    radial-gradient(130% 95% at 70% 10%, #5c3410 0%, transparent 55%),
    radial-gradient(140% 120% at 50% 120%, #2c1700 0%, transparent 60%),
    var(--oxblood)}
.scatter.finale::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E")}
.finale .scatter-stage{z-index:1}
.finale .s-item.eyebrow{color:var(--lime)!important}
.finale .s-item.script{font-family:var(--font-display)!important;color:var(--lime)!important;
  white-space:nowrap;max-width:none!important;
  font-size:clamp(3rem,9.6vw,8.6rem)!important;line-height:.9;
  text-shadow:0 16px 48px rgba(0,0,0,.4)}
.finale .s-item.body{color:rgba(248,243,230,.9)!important}
.finale .s-item.note{color:rgba(248,243,230,.75)!important}
.finale .s-item.ink-btn{border-color:var(--parchment-hi);color:var(--parchment-hi);background:transparent;box-shadow:none}
.finale .s-item.ink-btn:hover{background:var(--parchment-hi);color:var(--oxblood)}
.finale .s-item.link-soft{color:var(--lime)!important;border-color:var(--lime)}
.finale .sign-scrap .by{color:rgba(248,243,230,.8)}
.finale .sign-scrap .by em{color:var(--parchment-hi)}
.finale .photo{box-shadow:0 34px 70px -24px rgba(0,0,0,.7)}
@media(max-width:900px){
  .finale .s-item.script{white-space:normal;font-size:clamp(3rem,13vw,4.6rem)!important}
}

@media(max-width:900px){
  .bigplate{min-height:88svh}
  .negframe .frame.wide img{aspect-ratio:16/9}
}

/* =========================================================================
   JOURNAL / BLOG cards (rendered from the CRM) ---------------------------- */
.journal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(1.4rem,3vw,2.4rem);margin-top:2.4rem}
.journal-card{display:block;background:var(--parchment-hi);border:1px solid var(--paper-edge);
  box-shadow:0 22px 46px -26px rgba(44,34,0,.5);transition:transform .4s var(--ease-slow),box-shadow .4s}
.journal-card:hover{transform:translateY(-4px);box-shadow:0 30px 56px -24px rgba(44,34,0,.55)}
.jc-media{aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.jc-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) sepia(.08);transition:transform 1s var(--ease-slow)}
.journal-card:hover .jc-media img{transform:scale(1.04)}
.jc-body{padding:1.2rem 1.3rem 1.4rem}
.jc-cat{font-family:var(--font-display-alt);font-variant:small-caps;letter-spacing:.2em;font-size:.7rem;color:var(--olive-deep)}
.jc-body h3{font-family:var(--font-display);font-size:1.6rem;line-height:1.04;margin:.3rem 0 .4rem;color:var(--ink)}
.jc-body p{color:var(--ink-soft);font-size:1rem;margin:0 0 .6rem}
.jc-date{font-family:var(--font-body);font-style:italic;color:var(--olive);font-size:.9rem}

/* scroll-highlight lede — words start faint, brighten as you scroll through */
.lede-hl .w{opacity:.16;transition:opacity .55s var(--ease-slow),color .55s var(--ease-slow)}
.lede-hl .w.lit{opacity:1}
.lede-hl .w.key.lit{color:var(--oxblood)}
@media (prefers-reduced-motion:reduce){.lede-hl .w{opacity:1}}

/* brochure laid flat while editing — every spread visible & clickable */
.book.as-flat{position:static;perspective:none;aspect-ratio:auto;width:min(1040px,94vw);height:auto;
  display:flex;flex-direction:column;gap:1rem;filter:none}
.book.as-flat .flatpage{position:relative;width:100%;aspect-ratio:16/10;border:1px solid var(--paper-edge);
  overflow:hidden;background:var(--parchment-hi);box-shadow:0 18px 40px -28px rgba(44,34,0,.5)}
.book.as-flat .flatpage .page{position:absolute;inset:0}

/* =========================================================================
   ROUND 4 — "STRUCTURED, NOT SCRAPBOOK"  (client brief 29/07/2026)
   Her words: the scrapbook feel didn't fit her style; the couples enquiring
   over the last 12 months need structure, not confusion. So: the pear cursor
   goes, every page opens with a simple centred banner (her Jennifer Moher
   reference), the moving fragments become two composed boards, the boxes come
   off everything, and the big pictures become one half-frame image with the
   writing beside it.
   Fonts: Copperplate Gothic 29 BC (titles) + Biro Script Plus (body) — both
   stood in below until her licensed files land, then they swap 1:1.
   ========================================================================= */

/* ---- TYPE ---------------------------------------------------------------
   --font-display  → Copperplate Gothic 29 BC   (stand-in: Julius Sans One,
                     the closest free engraved-caps face; wide, light, flared)
   --font-hand     → Biro Script Plus            (stand-in: Caveat, already
                     self-hosted, the most legible hand in the kit)
   --font-read     → the readable serif, kept for forms, captions and micro
                     copy so the site stays usable while the body is a hand.
------------------------------------------------------------------------- */
:root{
  --font-display:     "Julius Sans One","Cinzel","IM Fell English",Georgia,serif;
  --font-display-alt: "Julius Sans One","IM Fell DW Pica SC",Georgia,serif;
  --font-read:        "Cormorant Garamond","Cormorant",Georgia,serif;
  --font-body:        "Cormorant Garamond","Cormorant",Georgia,serif;
  --font-hand:        "Caveat",cursive;
  --rule: rgba(53,41,29,.16);
}

/* Copperplate is an ALL-CAPS face: titles print as caps, generously tracked. */
.display,.mast-title,.page-mast h1,.hero h1,.plate-card h3,.sc-copy h2,
.reel-head h2,.mag-copy h2,.negframe h2,.bigplate h2,.s-item.head,
.page.text h2,.page.cover .cover-title,.jc-body h3,.faq-item h3,.subcard h3,
.panel-body h3,.book-intro h1,.sp-chap h3{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.085em;font-weight:400;
}
/* caps need air between the lines, and never a squashed leading */
.display,.page-mast h1,.hero h1,.s-item.head,.negframe h2,.bigplate h2{line-height:1.1}
/* the giant statement type tracks tighter so it still fills the page */
.bigplate h2,.negframe .negword,.finale .s-item.script{letter-spacing:.03em;line-height:1.06}
.bigplate h2{font-size:clamp(2.6rem,9vw,8.4rem)}
.negframe .negword{font-size:clamp(2.2rem,7vw,6.4rem);white-space:normal}
.finale .s-item.script{font-size:clamp(2.2rem,6.6vw,5.8rem)!important;white-space:normal}

/* Biro Script — the BIG bodies of text are handwritten, the way she asked.
   Functional micro-copy (forms, labels, captions, nav) stays in the serif. */
.prose,.prose p,.lede,.s-item.body,.sc-copy p,.sp-body,.db-copy,
.filmstill p,.bigplate p,.close-cta p,.diary p{
  font-family:var(--font-hand);
}
.prose,.prose p,.lede,.s-item.body,.sc-copy p,.db-copy,.filmstill p,.sp-body{
  font-size:clamp(1.22rem,1.75vw,1.6rem);line-height:1.42;
}
.field label,.field input,.field select,.field textarea,.foot-cols a,
.jc-date,.jc-cat,.mast-cap,.folio,.kicker{font-family:var(--font-read)}

/* ---- THE PEAR CURSOR IS GONE (she asked; it was driving her mad) -------- */
body{cursor:auto}
.pear-cursor{display:none!important}
a,button,summary,.ink-btn,.link-soft,.nav-toggle,.nav-close,
.book .leaf,.book-controls button,.page.cover .cover-turn{cursor:pointer}

/* =========================================================================
   R4 · THE BANNER — every page opens the same simple way (her Jennifer Moher
   reference): the name, a line under it, then one small photograph centred in
   a lot of quiet. As you scroll, the title travels DOWN over the photograph;
   scroll again and, on the homepage, the line changes.
   ========================================================================= */
.mast{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(6rem,15vh,9.5rem) 1.2rem clamp(3rem,9vh,5.5rem);
}
.mast-type{position:relative;z-index:3;width:min(1180px,94vw);will-change:transform;pointer-events:none}
.mast-phrase{transition:opacity .5s var(--ease-slow)}
.mast-phrase.mast-two{position:absolute;left:0;right:0;top:0;opacity:0}
.mast-title{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(1.35rem,3.5vw,3rem);line-height:1.12;color:var(--ink);margin:0;
}
.mast-sub{font-family:var(--font-script);font-size:clamp(1.15rem,2.4vw,1.9rem);
  color:var(--ink);margin:.3em 0 0;line-height:1.1}
/* the strapline: her words, set small and quiet under the name */
.mast-line{font-family:var(--font-read);font-size:clamp(.92rem,1.35vw,1.12rem);
  line-height:1.65;color:var(--ink);margin:.2em auto 0;max-width:54ch;letter-spacing:.015em}
.mast-line .fmt{display:block;letter-spacing:.12em;font-size:.86em;color:var(--ink-soft);margin-top:.35em}
/* once the type has travelled onto the picture it prints in parchment */
.mast.type-over .mast-title,.mast.type-over .mast-sub,.mast.type-over .mast-line{
  color:var(--parchment-hi);text-shadow:0 2px 18px rgba(16,9,2,.55)}
.mast.type-over .mast-line .fmt{color:rgba(248,243,230,.82)}
.mast-photo{position:relative;z-index:1;margin:clamp(1.5rem,3.4vh,2.6rem) auto 0;
  width:clamp(196px,19vw,318px)}
.mast-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  filter:grayscale(.18) contrast(1.02)}
.mast-cap{font-size:.92rem;color:var(--ink-soft);margin:.9rem 0 0;letter-spacing:.03em}
.mast-cue{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  font-family:var(--font-read);font-style:italic;color:var(--olive);font-size:.9rem;
  letter-spacing:.08em;opacity:.75;transition:opacity .5s}
.mast.type-over .mast-cue{opacity:0}
@media(max-width:820px){
  .mast{min-height:92svh;padding-top:clamp(5rem,13vh,7rem)}
  .mast-title{font-size:clamp(1.15rem,5.6vw,1.7rem);letter-spacing:.13em}
  .mast-photo{width:min(58vw,240px)}
  .mast-line{font-size:.92rem;max-width:34ch}
}

/* =========================================================================
   R4 · STORY PLATE — replaces the taped, tilted "how we tell your story"
   collage. One image, half the frame, the writing beside it; both the picture
   and the words change as you scroll through the chapters.
   ========================================================================= */
.storyplate{position:relative;padding:0}
.sp-stage{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr 1fr;
  align-items:stretch;overflow:hidden}
.sp-media{position:relative;overflow:hidden;background:var(--parchment-2)}
.sp-frame{position:absolute;left:0;right:0;top:0;bottom:0;margin:0;opacity:0;
  transition:opacity 1s var(--ease-slow),transform 1.6s var(--ease-slow);transform:scale(1.04)}
.sp-frame.is-on{opacity:1;transform:scale(1)}
.sp-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02)}
.sp-copy{position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(2rem,6vw,6rem)}
.sp-chap{position:absolute;max-width:44ch;opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease-slow),transform .8s var(--ease-slow);pointer-events:none}
.sp-chap.is-on{opacity:1;transform:none;pointer-events:auto}
.sp-chap .kicker{display:block;margin-bottom:.7rem}
.sp-chap h3{font-size:clamp(1.5rem,2.9vw,2.4rem);line-height:1.14;
  color:var(--oxblood);margin:0 0 .8rem}
.sp-head{width:min(1340px,94vw);margin:0 auto;
  padding-block:clamp(3.5rem,9vh,7rem) clamp(1.4rem,3vh,2.4rem)}
.sp-count{position:absolute;left:clamp(2rem,6vw,6rem);bottom:clamp(2rem,6vh,4rem);
  font-family:var(--font-read);font-style:italic;color:var(--olive);font-size:.95rem;letter-spacing:.06em}
@media(max-width:900px){
  /* phones: no pinning — the chapters simply stack, image then words */
  .storyplate{height:auto!important}
  .sp-stage{position:relative;height:auto;display:block}
  .sp-media{height:64svh}
  .sp-copy{padding:1.8rem 6% 0;display:block;min-height:0}
  .sp-chap{position:relative;opacity:1;transform:none;max-width:none;
    padding-bottom:2.4rem;pointer-events:auto}
  .sp-count{display:none}
}

/* =========================================================================
   R4 · DRIFT BOARD — the two arrangements off her own mock-up. Small pictures
   to linger over, composed on a grid instead of scattered like cuttings, and
   the writing appears line by line as you scroll to it.
   ========================================================================= */
.driftboard{padding-block:clamp(4rem,11vh,8.5rem);overflow:hidden}
.db-grid{width:min(1340px,94vw);margin-inline:auto;display:grid;
  grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.5vw,1.4rem);align-items:start}
.db-grid figure{margin:0;position:relative}
.db-grid figure img{width:100%;display:block;object-fit:cover;filter:grayscale(.2) sepia(.05) contrast(1.02)}
.db-grid figure.db-bw img{filter:grayscale(1) contrast(1.05)}
.db-copy{font-family:var(--font-hand);font-size:clamp(1.15rem,1.75vw,1.55rem);
  line-height:1.4;color:var(--ink);align-self:center}
.db-copy .ln{display:block;opacity:0;transform:translateY(12px);
  transition:opacity .85s var(--ease-slow),transform .85s var(--ease-slow);
  transition-delay:calc(var(--i,0) * .13s)}
.db-copy.on .ln{opacity:1;transform:none}
.db-grid figure{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease-slow),transform .9s var(--ease-slow);
  transition-delay:calc(var(--i,0) * .07s)}
.db-grid.on figure{opacity:1;transform:none}
@media(max-width:900px){
  .db-grid{grid-template-columns:repeat(6,1fr);gap:.7rem}
  .db-grid > *{grid-column:auto/span 3!important;grid-row:auto!important;margin-top:0!important}
  .db-grid > .db-copy{grid-column:1/-1!important;margin-block:1.4rem}
}

/* =========================================================================
   R4 · THE BOXES COME OFF — "let's remove the boxes from everything, such as
   the investment prices and other places, to get rid of the scrapbook feel."
   ========================================================================= */

/* prices: no card, no border, no shadow, no punch-hole. A line and a number. */
.pricetag{background:none!important;border:0!important;box-shadow:none!important;
  padding:.85rem 0!important;max-width:36ch;width:auto;display:block;
  border-bottom:1px solid var(--rule)!important;transform:none!important}
.pricetag::before{display:none!important}
.pricetag .svc{font-family:var(--font-read);font-style:normal;letter-spacing:.05em;
  text-transform:uppercase;font-size:.82rem;color:var(--ink-soft);display:block;margin-bottom:.2rem}
.pricetag .amt{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.15rem,1.9vw,1.6rem);color:var(--oxblood)}

/* sub-service cards: no box, no tape, no shadow */
.subcard{background:none!important;border:0!important;box-shadow:none!important;
  padding:1.6rem 0!important;border-bottom:1px solid var(--rule);max-width:52ch}
.subcard::before{display:none!important}

/* journal cards: the picture and the words, nothing round them */
.journal-card{background:none;border:0;box-shadow:none!important}
.journal-card:hover{transform:none}
.jc-body{padding:1rem 0 0}

/* the negative-space frame is now just the photograph in the space */
.negframe .frame{background:none!important;padding:0!important;
  box-shadow:0 40px 80px -46px rgba(0,0,0,.6)!important}

/* the diary loses its ruled table */
.diary{background:none;border-block:0}
.diary .months{background:none;border:0;gap:0;
  grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule)}
.diary .m{background:none;border-bottom:1px solid var(--rule);padding:1rem 1rem 1rem 0}

/* form fields: a writing line, not a box */
.field input,.field select,.field textarea{
  background:none;border:0;border-bottom:1px solid var(--olive);padding:.6em 0}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow:none;border-bottom-color:var(--oxblood)}

/* the button becomes a ruled small-caps link */
.ink-btn{background:none!important;border:0!important;box-shadow:none!important;
  padding:.4em 0!important;border-bottom:1px solid var(--olive-deep)!important;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;
  font-variant:normal}
.ink-btn:hover{background:none!important;color:var(--oxblood)!important;transform:none}
.close-cta .ink-btn,.finale .s-item.ink-btn{border-bottom-color:var(--parchment-hi)!important;color:var(--parchment-hi)!important}
.close-cta .ink-btn:hover,.finale .s-item.ink-btn:hover{background:none!important;color:var(--lime)!important}

/* plate cards and prints lose their heavy mounts */
.plate-card .frame{background:none;box-shadow:none}
.plate-card:nth-child(n){transform:none}
.photo,.reel-item,.sc-col figure,.drag-photo{box-shadow:none!important}
.photo.tilt-l,.photo.tilt-r{transform:none!important}
.photo:hover,.subcard:hover,.plate-card:hover{transform:none}

/* the portfolio keeps its turning pages, but loses the printed borders */
.book .leaf .face,.page.cover{border:0!important}

/* =========================================================================
   R4 · THE SCRAPBOOK EPHEMERA IS RETIRED — tape, wax seals, stamps, mounting
   corners, registration marks, the mocked film strip and the loose pear.
   ========================================================================= */
.tape,.seal,.stamp,.filmstrip,.closing-tape,.regmark,
.pear-loose,.desk,.desk-hint,.stack-sec,.float-poly,
.page.cover .cover-pear,.masthead{display:none!important}
.photo.mounted::before,.photo.mounted::after,.photo.folded::after{display:none!important}
/* nothing tilts any more, and nothing drifts about on its own */
.floaty{animation:none!important}
.placeable{transform:translateY(28px)!important}
.placeable.set{transform:none!important}

/* drift-board figures carry their own crop */
.db-grid figure img{aspect-ratio:var(--ar,4/5)}
.db-grid figcaption.mast-cap{margin-top:.5rem;font-size:.82rem}

/* R4 fix — the banner is PINNED while its two scroll beats play out: first the
   title travels down onto the photograph, then (on the homepage) the words
   change to her strapline. Without the pin the whole moment scrolls past
   before you can read it. Phones keep it to one plain screen. */
.mast{display:block;padding:0;min-height:0;height:230svh}
.mast.mast-inner{height:165svh}
.mast-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(6rem,15vh,9.5rem) 1.2rem clamp(3rem,9vh,5.5rem)}
@media(max-width:900px){
  .mast,.mast.mast-inner{height:auto!important}
  .mast-stage{position:relative;height:auto;min-height:92svh;overflow:visible}
}

/* R4 — `overflow-x:hidden` on the body makes it a scroll container, which
   silently kills every `position:sticky` descendant (the pinned banner and
   the story plate both died on it). `clip` stops the sideways scroll without
   creating that container, so the pins work again. */
html,body{overflow-x:clip}

/* R4 fix — the title lands ACROSS THE TOP of the photograph rather than dead
   centre of it. Two reasons: parchment type stranded either side of a small
   picture was near-invisible on the pale ground, and an editorial masthead
   sitting over the top edge is the look she pulled from Jennifer Moher.
   So the ink colour stays put and the type is sized nearer her reference. */
.mast-title{font-size:clamp(1.2rem,2.6vw,2.35rem);letter-spacing:.19em}
.mast.type-over .mast-title,.mast.type-over .mast-sub,.mast.type-over .mast-line{
  color:var(--ink);text-shadow:0 1px 22px rgba(239,236,228,.9),0 1px 3px rgba(239,236,228,.95)}
.mast.type-over .mast-line .fmt{color:var(--ink-soft)}
@media(max-width:820px){.mast-title{font-size:clamp(1.05rem,4.6vw,1.5rem);letter-spacing:.15em}}

/* R4 fix — beat two. When the words change to her strapline the PHOTOGRAPH
   RECEDES so the line reads on near-parchment instead of fighting the picture;
   the type balances across its lines so nothing is left stranded on its own
   (house rule: nothing falls alone on a line). */
.mast-title,.mast-line,.mast-sub{text-wrap:balance}
.mast-photo{transition:opacity .7s var(--ease-slow),filter .7s var(--ease-slow)}
.mast.phrase-two .mast-photo{opacity:.16;filter:grayscale(.55)}
.mast.phrase-two .mast-cap{opacity:.35}
.mast-two .mast-title{font-size:clamp(1.1rem,2.25vw,2rem)}
.mast-two .mast-sub{margin-top:.45em}
.mast-two .mast-line{margin-top:1.1em}

/* R4 fix — heading SCALE. Every inline font-size on this site was tuned for a
   compact serif; engraved caps set about 60% wider, so those sizes now blow
   headings across three lines and strand single words. One authoritative
   scale overrides them all, and the big statement type is brought back in
   line too. (House rule: nothing falls alone on a line.) */
.display{font-size:clamp(1.85rem,4.2vw,3.5rem)!important;letter-spacing:.07em}
.s-item.head{font-size:clamp(1.7rem,3.6vw,3rem)!important}
.bigplate h2{font-size:clamp(1.9rem,5vw,4.2rem)!important}
.negframe h2{font-size:clamp(1.6rem,3.4vw,2.6rem)!important}
.negframe .negword{font-size:clamp(1.8rem,4.6vw,4rem)!important}
.finale .s-item.script{font-size:clamp(1.8rem,4.4vw,3.6rem)!important}
.sp-chap h3{font-size:clamp(1.3rem,2.3vw,1.9rem)}
.mag-copy h2,.reel-head h2{font-size:clamp(1.6rem,3.2vw,2.6rem)!important}
.page.cover .cover-title{font-size:clamp(1.4rem,2.6vw,2.6rem)!important}
.plate-card h3,.jc-body h3{font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:.11em}
.sc-copy h2{font-size:clamp(1.7rem,3.4vw,2.8rem)!important}
/* the moving band shrinks in proportion with the new heading scale */
.mq-track span{font-size:clamp(1.3rem,2.8vw,2.3rem)}
/* R4 — inline scrapbook tilts on scattered photos die too (the class-based
   ones were already gone; these were authored straight into the markup) */
.s-item{transform:none!important}

/* R4 — PHONES. There is no room to pin and travel type on a phone, so the
   banner simply states both phrases: her name, then the strapline, then the
   photograph. Without this the strapline never appears on mobile at all. */
@media(max-width:900px){
  .mast-type{display:flex;flex-direction:column;gap:1.1rem}
  .mast-phrase.mast-two{position:static;opacity:1!important}
  .mast-two .mast-title{font-size:clamp(.95rem,3.9vw,1.2rem);letter-spacing:.11em}
  .mast-two .mast-sub{font-size:1.15rem}
  .mast-two .mast-line{font-size:.84rem;line-height:1.55}
  .mast-cap{white-space:nowrap}
}
.nav-toggle .idx{white-space:nowrap}

/* R4 — the collections sit BESIDE the title rather than under it, so the
   page is not a narrow column stranded on a wide screen. */
.collections{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.collections .col-left{align-self:center}
.collections .pricelist-plain{max-width:38ch}
.collections > .prose{grid-column:1/-1;margin-top:1rem}
@media(max-width:820px){.collections{grid-template-columns:1fr;gap:1.6rem}}
.collections > .prose{margin-inline:0!important;max-width:36ch}

/* ===================================================== GO-LIVE (23/09/2026)
   Journal posts imported from the old WordPress blog: big photographs, one
   after another, the way she laid them out. Pairs sit side by side on wide
   screens (WordPress galleries), single column on phones. */
.prose img{display:block;max-width:100%;height:auto;margin:1.4rem auto}
.prose figure{margin:1.4rem 0}
.prose figure img{margin:0 auto}
.prose figcaption{font-family:var(--font-read);font-style:italic;font-size:.95rem;text-align:center;opacity:.75;margin-top:.5rem}
.prose figure > figure{margin:0}
@media (min-width:760px){
  .prose figure:has(> figure + figure){display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
  .prose figure:has(> figure + figure) > figure img{width:100%}
}
.prose h2{font-size:clamp(1.3rem,2.4vw,1.8rem);margin:2.2rem 0 .8rem}
.prose a{text-decoration:underline;text-underline-offset:.2em}

/* GO-LIVE (23/09/2026) — Alex: the title sliding down onto the photograph as
   you start to scroll "looks broken". The banner no longer pins or moves on
   any screen: it states her name, then the strapline, then the photograph,
   and scrolls away like the rest of the page (what phones already did). */
.mast,.mast.mast-inner{height:auto!important}
.mast-stage{position:relative;height:auto;min-height:0;overflow:visible;
  padding:clamp(6.5rem,16vh,9rem) 1.2rem clamp(2.5rem,6vh,4rem)}
.mast-type{display:flex;flex-direction:column;gap:1.1rem;transform:none!important}
.mast-phrase.mast-one,.mast-phrase.mast-two{position:static;opacity:1!important}
.mast.phrase-two .mast-photo,.mast.phrase-two .mast-cap{opacity:1;filter:none}
.mast-cue{display:none}

/* GO-LIVE SEO (23/09/2026) — the banner is now written into the page (one real
   H1 per page). The old poster masthead under it was hidden by site.js; hide
   it here instead, exactly as the script did (its whole section). */
main:has(> header.mast) section:has(.page-mast){display:none}

/* cookie policy table */
.prose table{width:100%;border-collapse:collapse;margin:1rem 0 1.4rem;font-family:var(--font-read);font-size:.95rem}
.prose th,.prose td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--paper-edge);vertical-align:top}
.prose th{font-weight:600}
@media(max-width:600px){.prose table{font-size:.85rem}.prose th,.prose td{padding:.45rem .3rem}}

/* the banner photo always keeps its 3:4 shape, whatever size attributes it carries */
.mast-photo img{height:auto;aspect-ratio:3/4}

/* speed: phones get the 960px copy of full-width background photos */
@media (max-width:900px){[style*="--bgm"]{--bg:var(--bgm)!important}}

/* AW Media credit (24/09/2026) */
.foot-credit{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--paper-edge);font-family:var(--font-body);font-size:.85rem;color:var(--olive);opacity:.75;text-align:center}
.foot-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-credit a:hover{opacity:1;color:var(--ink)}