/* ════════════════════════════════════════════════════════════════
   TIME CAPSULE TAPES — full site
   Chivo + Chivo Mono · full-bleed fabric backgrounds that crossfade
   white ⇄ warm-ink text per section · cinematic projector intro
   ════════════════════════════════════════════════════════════════ */
:root{
  --sans:"Chivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Chivo Mono",ui-monospace,monospace;

  --paper:#F4ECDC;             /* warm white text on dark sections */
  --paper-2:rgba(244,236,220,.82);
  --paper-3:rgba(244,236,220,.52);
  --line-paper:rgba(244,236,220,.26);

  --ink:#241F18;               /* warm dark — never pure black */
  --ink-2:#574E40;
  --ink-3:#8A8071;
  --line-ink:rgba(36,31,24,.20);

  --red:#9E2A14;
  --stone:#E7DECC;

  --maxw:1680px;
  --gut:clamp(22px,4.2vw,76px);
  --ease:cubic-bezier(.22,.65,.18,1);
  --quint:cubic-bezier(.22,1,.36,1);
  --text:var(--paper);
  --text-2:var(--paper-2);
  --text-3:var(--paper-3);
  --line:var(--line-paper);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#7C2113}
body{font-family:var(--sans);background:transparent;color:var(--text);overflow-x:hidden;
  transition:color .9s var(--ease)}
body.locked{overflow:hidden}
body.intro-lock{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
/* Inline links inside editable copy — the global rule above strips underlines,
   so restore a tasteful, legible one here (copy fields are the only place body
   text carries links). Single underline, hover just intensifies it (a red text
   colour was illegible on the warm-red sections). */
[data-petrus-text] a{color:inherit;text-decoration-line:underline;text-decoration-style:solid;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 42%,transparent);
  transition:text-decoration-color .25s var(--ease)}
[data-petrus-text] a:hover{text-decoration-color:currentColor}
[data-petrus-text] a a{text-decoration:none}   /* guard: never double-underline a nested link */
::selection{background:var(--paper);color:var(--red)}

/* text-colour inversion on the limestone WORKS section */
body.on-light{--text:var(--ink);--text-2:var(--ink-2);--text-3:var(--ink-3);--line:var(--line-ink)}
body.on-light ::selection{background:var(--red);color:var(--paper)}

/* ───────── BACKGROUND LAYERS ───────── */
.bg{position:fixed;inset:0;z-index:-3;opacity:0;transition:opacity 1.25s var(--ease);will-change:opacity}
.bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;--mb:0px;--ms:1}
.bg.show{opacity:1}
/* Entrance focus-pull rides the PLATE WRAPPER (.bg), not the <img>, so it always
   pivots from the viewport centre (the wrapper's default 50% 50% origin). The img
   keeps its own framing transform + focal-point origin, so a REPOSITIONED bg
   (zoom / x / y used) no longer zooms in from an angle — it resolves like a
   centred one. The pull resolves to identity (scale 1 / blur 0), composing ON TOP
   of the saved framing rather than replacing it, so there's still no
   unblur-then-reblur snap. */
.bg.morph{animation:morphIn 1s var(--ease)}
@keyframes morphIn{0%{filter:blur(16px) saturate(1.15);transform:scale(1.035)}100%{filter:blur(0) saturate(1);transform:scale(1)}}
.bg-base{position:fixed;inset:0;z-index:-4;
  background:linear-gradient(150deg,#C9BFA6 0%,#B85A39 46%,#8A2414 100%)}
/* Adjustable legibility scrim — one shared plate above the photo. Petrus drives
   its opacity per section (the "Darken" control) and it crossfades on scroll. */
.bg-scrim{position:fixed;inset:0;z-index:-3;background:#000;opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease)}

/* global fine grain + soft vignette to seat the type */
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%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(%23n)'/%3E%3C/svg%3E")}
.vig{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 36%,transparent 56%,rgba(40,10,4,.30));
  transition:opacity .9s var(--ease)}
body.on-light .vig{background:radial-gradient(130% 120% at 50% 40%,transparent 60%,rgba(60,46,22,.16))}

/* ───────── TYPE PRIMITIVES ───────── */
.mono{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.2em}
.kick{font-family:var(--mono);font-weight:500;font-size:clamp(.6rem,.74vw,.72rem);
  letter-spacing:.26em;text-transform:uppercase;color:var(--text-3)}
.display{font-weight:700;text-transform:uppercase;line-height:.94;letter-spacing:-.01em;text-wrap:balance}
.body{font-weight:400;font-size:clamp(1.2rem,1.03rem + 0.35vw,1.4rem);line-height:1.6;color:var(--text-2);max-width:46ch}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ───────── HEADER ───────── */
.head{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--text);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;
  padding:clamp(18px,2vw,30px) var(--gut);
  transition:padding .5s var(--ease),color .9s var(--ease),opacity .4s var(--ease)}
.head.hide-chrome{opacity:0;pointer-events:none}
.brand{font-family:var(--mono);font-weight:700;font-size:clamp(11px,1vw,13px);
  letter-spacing:.3em;line-height:1.42;justify-self:start}
/* proper logo lockup (white art); flipped to ink on the light WORKS section */
.brand-logo{height:clamp(30px,3.4vw,42px);width:auto;display:block;
  transition:filter .9s var(--ease)}
body.on-light .brand-logo{filter:brightness(0)}
/* When the (dark) mobile menu is open over a light section, the logo flips
   back to white so it stays legible against the panel. */
body.on-light.menu-open .brand-logo{filter:none}
.brand .r{display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .dash{height:1.5px;width:30px;background:currentColor;display:inline-block}
.nav{display:flex;gap:clamp(20px,2.6vw,46px);justify-self:center}
.nav a,.hmail{font-family:var(--mono);font-weight:600;font-size:clamp(.6rem,.72vw,.7rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);white-space:nowrap;transition:color .3s;
  text-shadow:0 1px 18px rgba(10,3,1,.32)}
/* Email address is one step heavier than nav — !important overrides any editor block. */
.hmail{font-weight:800!important}
.nav a:hover,.nav a.active,.hmail:hover{color:var(--text)}
.hmail{justify-self:end}
/* Desktop: hide the mobile toggle + dropdown entirely. */
.nav-toggle{display:none}
.mobile-menu{display:none}
@media(max-width:1024px){
  .nav,.hmail{display:none}
  .head{grid-template-columns:1fr auto;z-index:76}
  /* Bigger, legible logo on mobile (was clamping down to 30px). */
  .brand-logo{height:clamp(38px,8vw,52px)}
  /* Hamburger toggle on the right. Bars follow the header colour:
     white on dark sections, ink-black on the light WORKS section. */
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:44px;height:44px;padding:0 9px;box-sizing:border-box;cursor:pointer;
    background:transparent;border:0;justify-self:end;z-index:75;color:var(--paper)}
  body.on-light .nav-toggle{color:var(--ink)}
  /* Once the menu is open the panel is dark, so force the glyph white again. */
  body.menu-open .nav-toggle{color:var(--paper)}
  .nav-toggle-bar{display:block;height:1.5px;width:100%;background:currentColor;
    transition:transform .32s var(--ease),opacity .2s var(--ease),background .9s var(--ease)}
  body.menu-open .nav-toggle-bar:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  body.menu-open .nav-toggle-bar:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
  /* Dropdown panel: drops in from the top, frosted, on-brand mono links */
  .mobile-menu{display:flex;flex-direction:column;position:fixed;z-index:70;
    top:0;right:0;left:0;padding:calc(var(--gut) + 60px) var(--gut) clamp(28px,6vw,40px);
    background:rgba(20,6,2,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(244,236,220,.16);
    transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform .42s var(--ease),opacity .42s var(--ease)}
  body.menu-open .mobile-menu{transform:translateY(0);opacity:1;pointer-events:auto}
  .mobile-menu a{font-family:var(--mono);font-weight:500;font-size:1rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--paper);
    padding:14px 0;border-bottom:1px solid rgba(244,236,220,.1);
    transition:color .3s,padding-left .3s var(--ease)}
  .mobile-menu a:hover,.mobile-menu a:active{padding-left:8px;color:var(--paper)}
  .mobile-menu-sep{height:clamp(14px,4vw,22px)}
  .mobile-menu-mail{border-bottom:1px solid rgba(244,236,220,.1)!important;
    font-size:.78rem!important;letter-spacing:.1em!important;text-transform:none!important;
    color:rgba(244,236,220,.74)!important}
  .mobile-menu-ig{border-bottom:0!important;font-size:.7rem!important;
    color:rgba(244,236,220,.56)!important}
  /* Secondary cluster (Privacy · Instagram · Pricing/FAQ · Copyright) — the
     footer links, relocated into the menu on mobile where the footer is hidden. */
  .mobile-menu-sec{font-size:.74rem!important;letter-spacing:.2em!important;
    color:rgba(244,236,220,.6)!important}
  .mobile-menu-sec:last-child{border-bottom:0!important}
  .mobile-menu-scrim{position:fixed;inset:0;z-index:65;background:rgba(8,3,1,.35)}
  .mobile-menu-scrim[hidden]{display:none}
}

/* ───────── FOOTER (fixed bottom rail) ───────── */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:60;color:var(--text);
  display:flex;justify-content:space-between;gap:18px;
  padding:clamp(16px,1.8vw,26px) var(--gut);transition:color .9s var(--ease),opacity .4s var(--ease)}
.foot.hide-chrome{opacity:0;pointer-events:none}
.foot a{font-family:var(--mono);font-weight:600;font-size:clamp(.58rem,.7vw,.68rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);transition:color .3s;
  text-shadow:0 1px 18px rgba(10,3,1,.32)}
.foot a:hover{color:var(--text)}
@media(max-width:1024px){.foot{display:none}}
@media(max-width:680px){.foot{font-size:10px;padding-inline:22px}.foot .fhide{display:none}}

/* ───────── SECTION SHELL ───────── */
.sec{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(120px,16vh,200px) 0 clamp(96px,12vh,150px)}
.sec[hidden]{display:none}
.idx{position:absolute;top:clamp(96px,12vh,150px);left:var(--gut);font-family:var(--mono);font-weight:500;
  font-size:clamp(.6rem,.72vw,.7rem);letter-spacing:.24em;color:var(--text-3)}

/* ───────── HOME ─────────
   Home now reuses the §02 OFFER schema directly (offer-grid / offer-h2 /
   offer-side) so it renders identically to that section. The .home-h1 and
   .home-side classes are kept ONLY as hooks for the cinematic-intro beats
   (see the intro block below) — they carry no layout of their own. */

/* ───────── OFFER ───────── */
.offer-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,7vw,120px);align-items:stretch}
.offer-h2{font-size:clamp(2rem,4vw,3.9rem);max-width:12ch;align-self:start}
.offer-side{align-self:end;max-width:48ch}
.offer-side h3{font-family:var(--mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  font-size:clamp(1.4rem,1.32rem + 0.18vw,1.5rem);margin-bottom:1.1em;color:var(--text)}
.offer-side .body+.body{margin-top:1.05em}
/* Home hero side copy is uppercase — monumental register matching the display headline. */
.home-side .body{text-transform:uppercase}
/* A text field saved empty should not leave a gap for VISITORS. Marked by JS
   (.pet-text-empty) rather than :empty so stray whitespace/<br> can't defeat it.
   In edit mode the owner still sees a clickable target to re-add copy. */
body:not(.petrus-edit) .pet-text-empty{display:none}
body.petrus-edit .pet-text-empty{min-height:1.1em;opacity:.5}
.offer-cta{margin-top:1.8em;display:inline-flex;align-items:center;gap:14px;font-family:var(--mono);
  font-weight:500;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text);transition:gap .4s var(--ease)}
.offer-cta i{display:block;width:24px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.offer-cta:hover{gap:18px}.offer-cta:hover i{width:34px}
@media(max-width:900px){.offer-grid{grid-template-columns:1fr;gap:28px;align-items:start}.offer-h2{max-width:100%}}

/* ───────── WORKS ───────── */
#works{padding-bottom:clamp(110px,14vh,170px)}
.works-head{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(26px,3vw,42px)}
.works-head h2{font-family:var(--mono);font-weight:500;font-size:clamp(.84rem,1vw,1rem);letter-spacing:.2em;text-transform:uppercase}
.works-head .ct{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.2em;color:var(--text-3);margin-left:auto}
.works-grid{display:grid;grid-template-columns:minmax(360px,.92fr) minmax(0,1.4fr);gap:clamp(26px,3.4vw,56px);align-items:start}
.feat{position:sticky;top:clamp(120px,15vh,168px);display:none;min-width:0}.feat.visible{display:block}
/* On tall viewports (desktop / landscape) fill the full available height so the
   feature photo never looks short next to the tall thumbnail strip.            */
@media(min-width:1101px) and (min-height:640px){
  .feat-frame{height:calc(100svh - clamp(120px,15vh,168px) - clamp(96px,12vh,150px));
    aspect-ratio:unset}
  .feat-frame img{height:100%;width:100%;object-fit:cover}
}
.feat-frame{position:relative;aspect-ratio:3/4;overflow:hidden;background:rgba(0,0,0,.08);cursor:zoom-in;
  box-shadow:0 30px 80px rgba(40,12,4,.28)}
.feat-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s var(--ease);filter:contrast(1.03) saturate(.98)}
.feat-frame img.show{opacity:1}
.feat-meta{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-weight:500;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.thumbs{column-count:3;column-gap:clamp(10px,1vw,16px);min-width:0;overflow:hidden}
.thumb{display:block;width:100%;margin:0 0 clamp(10px,1vw,16px);break-inside:avoid;overflow:hidden;
  background:rgba(0,0,0,.06);cursor:pointer;position:relative}
.thumb img{width:100%;height:auto;display:block;filter:grayscale(.12) contrast(1.02);
  transition:transform .9s var(--ease),filter .6s var(--ease)}
.thumb::after{content:"";position:absolute;inset:0;background:rgba(36,20,8,.16);opacity:0;transition:opacity .4s}
.thumb:hover img{transform:scale(1.05);filter:grayscale(0) contrast(1.04)}
.thumb.sel{outline:2px solid var(--text);outline-offset:-2px}
@media(max-width:1100px){.works-grid{grid-template-columns:1fr;gap:30px}.feat{position:static}
  .feat-frame{aspect-ratio:4/5}.thumbs{column-count:3}}

/* ───────── RECENT WORK — sequential full-size viewer (family page) ─────────
   One photograph at a time, full width, auto-advancing. Framed as recent work
   rather than a grid. Stone frame + red accents tie it to the family page. */
.sec-recent .works-head h2{color:var(--text)}
/* Full-width section wrap (it's a flex item with auto side margins, which would
   otherwise shrink-wrap to the narrow header), then a centred, medium-scale
   stage so the photograph reads large without swallowing the whole viewport. */
.sec-recent{padding-block:clamp(100px,11vh,150px) clamp(70px,8vh,110px)}
.sec-recent>.wrap{width:100%;max-width:1060px}
.seq{position:relative;width:100%}
.seq-stage{position:relative;width:100%;aspect-ratio:5/4;max-height:66svh;overflow:hidden;cursor:zoom-in;
  background:rgba(20,8,4,.18);
  border:1px solid var(--line);
  box-shadow:0 40px 90px rgba(40,12,4,.4)}
/* Empty public placeholder: keeps the stage footprint, no zoom affordance. */
.seq-stage.seq-empty{cursor:default}
.seq-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1s var(--ease);filter:contrast(1.03) saturate(.99)}
.seq-img.show{opacity:1}
/* nav arrows — sit inside the frame, low-key until hover */
.seq-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:clamp(46px,4vw,58px);height:clamp(46px,4vw,58px);display:grid;place-items:center;
  cursor:pointer;border:0;color:var(--paper);
  background:rgba(36,20,8,.22);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .4s var(--ease),background .3s var(--ease)}
.seq-prev{left:0}.seq-next{right:0}
.seq-stage:hover .seq-nav{opacity:1}
.seq-nav:hover{background:var(--red)}
@media(hover:none){.seq-nav{opacity:1}}
/* edit cluster — only visible in Petrus edit mode */
.seq-edit{position:absolute;top:12px;right:12px;z-index:4;display:flex;gap:6px}
.seq-edit[hidden]{display:none}
/* footer: counter + dots */
.seq-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:clamp(14px,1.4vw,20px)}
.seq-count{font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-3)}
.seq-count b{color:var(--text);font-weight:700}
.seq-dots{display:flex;align-items:center;gap:9px}
.seq-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--text-3);opacity:.5;transition:opacity .3s,background .3s,transform .3s var(--ease)}
.seq-dot:hover{background:var(--text-2)}
.seq-dot.on{background:var(--text);opacity:.5;transform:scale(1.28)}
@media(max-width:760px){.seq-stage{aspect-ratio:4/5}}

/* ───────── CONTACT — reuses the §02 OFFER container schema (offer-grid).
   Headline scale + side width kept uniform with hero / offer. ───────── */
.contact-mail{font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.012em;
  font-size:clamp(2rem,4vw,3.9rem);align-self:start}
/* The email is now an editable copy field whose content is ONE mailto link
   spanning three lines (Hello@ / Timecapsule / Tapes.com). It's the headline
   email, so no underline — override the generic [data-petrus-text] a treatment. */
.contact-mail a{color:inherit;text-decoration:none}
.contact-side{align-self:end;padding-top:.5em;display:flex;flex-direction:column;gap:clamp(26px,3vw,46px);max-width:48ch}
.cinfo .l{font-family:var(--mono);font-weight:500;font-size:clamp(1rem,1.4vw,1.4rem);letter-spacing:.04em;
  text-transform:uppercase;line-height:1.25;color:var(--text)}
.cinfo .s{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.24em;color:var(--text-3);margin-top:6px}
.contact-say h3{font-family:var(--mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  font-size:clamp(1.4rem,1.32rem + 0.18vw,1.5rem);margin-bottom:1em;color:var(--text)}
.contact-say p{font-size:clamp(1.2rem,1.03rem + 0.35vw,1.4rem);line-height:1.55;color:var(--text-2)}
.contact-say p+p{margin-top:.85em}
/* Link underline now comes from the unified [data-petrus-text] a rule. The old
   .contact-say a border-bottom stacked a SECOND line on top of it (both match
   the same editable link), so it's removed — one underline, consistent site-wide. */

/* ───────── OVERLAYS (FAQ / PRIVACY) ───────── */
.overlay{position:fixed;inset:0;z-index:80;overflow-y:auto;opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s;
  background:linear-gradient(155deg,#7C2113 0%,#9E2A14 40%,#5C1608 100%);color:var(--paper)}
.overlay::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n2'%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(%23n2)'/%3E%3C/svg%3E")}
.overlay.open{opacity:1;visibility:visible}
.ov-inner{position:relative;max-width:1180px;margin:0 auto;padding:clamp(70px,9vh,120px) var(--gut) 120px}
.ov-close{position:fixed;top:clamp(20px,3vw,34px);right:clamp(22px,4vw,60px);z-index:2;
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-2);cursor:pointer;display:flex;align-items:center;gap:10px}
.ov-close:hover{color:var(--paper)}
.ov-title{font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:-.01em;line-height:.96}
.ov-lead{margin-top:clamp(22px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
.ov-lead h4{font-family:var(--mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.82rem;margin-bottom:.9em}
.ov-lead p{font-size:1rem;line-height:1.62;color:var(--paper-2)}.ov-lead p+p{margin-top:.8em}
@media(max-width:760px){.ov-lead{grid-template-columns:1fr;gap:22px}}

/* accordion */
.acc{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line-paper)}
.acc-item{border-bottom:1px solid var(--line-paper)}
.acc-q{width:100%;background:none;border:0;color:var(--paper);cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:24px;padding:clamp(20px,2.4vw,32px) 0;
  font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1rem,1.7vw,1.6rem);line-height:1.1;transition:color .3s}
.acc-q .n{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.16em;color:var(--paper-3);flex:none;width:2.4em}
.acc-q .t{flex:1}
.acc-q .pm{flex:none;width:20px;height:20px;position:relative}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;background:currentColor;inset:0;margin:auto}
.acc-q .pm::before{width:100%;height:1.5px}
.acc-q .pm::after{height:100%;width:1.5px;transition:transform .4s var(--ease)}
.acc-item.open .acc-q .pm::after{transform:scaleY(0)}
.acc-item.open .acc-q{color:var(--paper)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-item.open .acc-a{grid-template-rows:1fr}
.acc-a-in{overflow:hidden}
.acc-a p{font-size:.98rem;line-height:1.62;color:var(--paper-2);max-width:70ch;padding-bottom:.2em}
.acc-a p+p{margin-top:.75em}
.acc-a .pad{padding-bottom:clamp(22px,2.6vw,34px)}

/* ───────── LIGHTBOX ───────── */
.lb{position:fixed;inset:0;z-index:95;background:rgba(46,14,6,.95);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:6vh 6vw;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-height:86vh;max-width:min(92vw,1100px);width:auto;box-shadow:0 40px 120px rgba(0,0,0,.5);transform:scale(.97);transition:transform .6s var(--ease)}
.lb.open img{transform:none}
.lb .x{position:fixed;top:26px;right:30px;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-2);cursor:pointer}

/* ───────── REVEAL ───────── */
html.js [data-r]{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.js [data-r].in{opacity:1;transform:none}
[data-d="1"]{transition-delay:.08s}[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}[data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){html.js [data-r]{opacity:1;transform:none;transition:none}}

/* ════════════════════════ FILM LIGHT-LEAK · PAGE-LOAD ════════════════════════
   A delicate, drifting warm light leak that washes over the page as it loads
   and lifts away. Layered: a soft exposure flash, two drifting blooms, a
   sweeping leak edge, a corner halation, and a whisper of grain. Light-handed
   by design — the page is luminous beneath it the whole time. */
.fx{position:fixed;inset:0;z-index:120;pointer-events:none;will-change:opacity}
.fx.done{opacity:0;transition:opacity 1.1s var(--ease)}
.fx>*{position:absolute;inset:0;mix-blend-mode:screen;will-change:transform,opacity,filter}

/* gradual focus-pull reveal on the page beneath — short hold, then a smooth
   quint un-blur that hands the page off from leak to crisp visibility */
.fx-blur{mix-blend-mode:normal;backdrop-filter:blur(22px) brightness(1.07) saturate(1.07);
  -webkit-backdrop-filter:blur(22px) brightness(1.07) saturate(1.07);
  animation:fxBlur 1.25s var(--quint) forwards}
@keyframes fxBlur{
  0%{opacity:1;backdrop-filter:blur(22px) brightness(1.08) saturate(1.08);-webkit-backdrop-filter:blur(22px) brightness(1.08) saturate(1.08)}
  16%{backdrop-filter:blur(21px) brightness(1.07) saturate(1.07);-webkit-backdrop-filter:blur(21px) brightness(1.07) saturate(1.07)}   /* short hold */
  70%{backdrop-filter:blur(5px) brightness(1.02) saturate(1.02);-webkit-backdrop-filter:blur(5px) brightness(1.02) saturate(1.02)}
  100%{opacity:1;backdrop-filter:blur(0) brightness(1) saturate(1);-webkit-backdrop-filter:blur(0) brightness(1) saturate(1)}}

/* one soft warm exposure flash to open */
.fx-flash{background:radial-gradient(64% 60% at 48% 44%, rgba(255,238,214,.62), rgba(255,206,150,.22) 46%, transparent 76%);
  opacity:0;filter:blur(6px);animation:fxFlash 1.15s var(--ease) forwards}
@keyframes fxFlash{0%{opacity:0}9%{opacity:.7}28%{opacity:.18}100%{opacity:0}}

/* primary bloom — drifts up-and-right, the heart of the leak */
.fx-bloom{inset:-22%;opacity:0;filter:blur(30px);
  background:
    radial-gradient(34% 46% at 30% 42%, rgba(255,142,90,.80), transparent 66%),
    radial-gradient(26% 38% at 62% 30%, rgba(255,94,86,.62), transparent 70%),
    radial-gradient(40% 52% at 52% 80%, rgba(255,202,124,.66), transparent 70%);
  animation:fxBloom 1.5s var(--ease) forwards}
@keyframes fxBloom{
  0%{opacity:0;transform:translate3d(-13%,9%,0) scale(1.28) rotate(-7deg)}
  24%{opacity:.52}
  52%{opacity:.4;transform:translate3d(2%,-2%,0) scale(1.06) rotate(0deg)}
  100%{opacity:0;transform:translate3d(13%,-9%,0) scale(1) rotate(5deg)}}

/* secondary cooler-rose bloom drifting the other way for chromatic depth */
.fx-bloom2{inset:-22%;opacity:0;filter:blur(40px);
  background:
    radial-gradient(30% 40% at 74% 64%, rgba(255,120,150,.42), transparent 70%),
    radial-gradient(26% 34% at 16% 70%, rgba(255,170,110,.4), transparent 72%);
  animation:fxBloom2 1.5s var(--ease) forwards}
@keyframes fxBloom2{
  0%{opacity:0;transform:translate3d(10%,-6%,0) scale(1.2) rotate(6deg)}
  30%{opacity:.34}
  60%{opacity:.26;transform:translate3d(-2%,2%,0) scale(1.05)}
  100%{opacity:0;transform:translate3d(-12%,8%,0) scale(1) rotate(-4deg)}}

/* a soft luminous leak edge sweeping across (the sprocket-light streak) */
.fx-streak{top:-12%;bottom:-12%;left:-36%;right:auto;width:42%;opacity:0;filter:blur(30px);
  background:linear-gradient(90deg, transparent, rgba(255,182,128,.42) 36%, rgba(255,234,198,.72) 50%, rgba(255,182,128,.42) 64%, transparent);
  animation:fxStreak 1.45s var(--ease) forwards}
@keyframes fxStreak{
  0%{opacity:0;transform:translateX(-8%) rotate(9deg)}
  26%{opacity:.58}
  72%{opacity:.34}
  100%{opacity:0;transform:translateX(230%) rotate(6deg)}}

/* warm corner halation breathing top-right, like flare bleed */
.fx-halo{opacity:0;filter:blur(18px);
  background:radial-gradient(38% 38% at 84% 14%, rgba(255,216,154,.66), transparent 60%);
  animation:fxHalo 1.5s var(--ease) forwards}
@keyframes fxHalo{0%{opacity:0;transform:scale(.82)}32%{opacity:.46}64%{opacity:.26}100%{opacity:0;transform:scale(1.12)}}

/* whisper of moving film grain */
.fx-grain{mix-blend-mode:soft-light;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='fg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fg)'/%3E%3C/svg%3E");background-size:300px;
  animation:fxGrain 1.5s steps(7) forwards}
@keyframes fxGrain{0%{opacity:.22;background-position:0 0}
  40%{opacity:.16;background-position:140px 90px}80%{opacity:.08;background-position:60px 200px}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){.fx{display:none}}

/* ════════════════════════ CINEMATIC HERO INTRO — staggered beats ════════════
   After the leak gradually reveals the page, hero elements assemble one beat
   at a time (250ms apart). Each: slow fade + unblur + directional crawl into
   place, all on an ultra-smooth quint curve. JS drops the .intro classes once
   the sequence completes so nothing lingers to fight scroll / hover / colour. */
body.intro .brand,
body.intro #home .idx,
body.intro .home-h1,
body.intro .home-side,
body.intro .nav a,
body.intro .hmail,
body.intro .foot a{
  transition:opacity .9s var(--quint),transform .95s var(--quint),filter .9s var(--quint);
  will-change:opacity,transform,filter}

/* hidden pre-roll states + crawl direction */
body.intro .brand,
body.intro #home .idx{opacity:0;transform:translateY(-30px);filter:blur(12px)}      /* top → down */
body.intro .home-h1{opacity:0;transform:translateX(48px);filter:blur(16px)}          /* right → left */
body.intro .home-side{opacity:0;transform:translateX(-48px);filter:blur(16px)}       /* left → right */
body.intro .nav a,
body.intro .hmail{opacity:0;transform:translateY(-26px);filter:blur(11px)}           /* top → down */
body.intro .foot a{opacity:0;transform:translateY(26px);filter:blur(11px)}           /* bottom → up */

/* GO — resolve to final state, beat by beat (250ms apart) */
body.intro.intro-go .brand,
body.intro.intro-go #home .idx{opacity:1;transform:none;filter:none;transition-delay:.25s}   /* beat A */
body.intro.intro-go .home-h1{opacity:1;transform:none;filter:none;transition-delay:.50s}      /* beat B */
body.intro.intro-go .home-side{opacity:1;transform:none;filter:none;transition-delay:.75s}    /* beat C */
body.intro.intro-go .nav a,
body.intro.intro-go .hmail,
body.intro.intro-go .foot a{opacity:1;transform:none;filter:none;transition-delay:1s}          /* beat D */

@media(prefers-reduced-motion:reduce){
  body.intro .brand,body.intro #home .idx,body.intro .home-h1,body.intro .home-side,
  body.intro .nav a,body.intro .hmail,body.intro .foot a{opacity:1;transform:none;filter:none;transition:none}}

/* ════════════════════════ HIDDEN PER REVIEW — Pietro ════════════════════════
   Elements his comments marked with "x" are kept in the markup but hidden from
   view via this class. They are NOT deleted — to bring any one back, just remove
   the `is-hidden` class from that element. Currently hidden:
     · #home   eyebrow  "01 — Studio"
     · #offer  eyebrow  "02 — Offer"
     · #contact eyebrow "04 — Contact"
     · #works  heading  "Selected Works"
     · #works  meta     "Fig. 01 / Click to enlarge"
     · #contact label   "Phone"
   ──────────────────────────────────────────────────────────────────────────── */
.is-hidden{display:none !important}

/* style overrides slot */


/* ════════════════════════════════════════════════════════════════
   FAMILY LEGACY — section styles that extend the shared brand system.
   Re-uses the home / offer schema (offer-grid · offer-h2 · offer-side),
   the bg crossfade, film-leak load, cinematic intro, works gallery and
   lightbox verbatim. Only the bits unique to the family scroll live here.
   ════════════════════════════════════════════════════════════════ */

/* monumental stacked hero headline (variation 1) */
.fam-h1{font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.018em;
  font-size:clamp(3.4rem,9vw,8.6rem)}
.fam-h1 span{display:block}
.fam-sub{margin-top:clamp(16px,1.8vw,26px);font-family:var(--mono);font-weight:500;
  font-size:clamp(.74rem,1vw,.92rem);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}

/* philosophy two-line statement — re-uses offer schema, just larger */
.philo-h2{font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.014em;
  font-size:clamp(2.4rem,5.2vw,5rem);max-width:14ch}
.philo-h2 span{display:block}

/* THREE WAYS — clean numbered text columns over a full-bleed plate */
.ways-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,72px);
  margin-top:clamp(34px,4vw,64px)}
.way-col{display:flex;flex-direction:column}
.way-col .n{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.22em;color:var(--text-3)}
.way-col h3{font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:1.02;
  font-size:clamp(1.5rem,2.4vw,2.3rem);margin:clamp(14px,1.4vw,20px) 0 0}
.way-col .ln{height:1px;background:var(--line);margin:clamp(16px,1.6vw,22px) 0 clamp(14px,1.3vw,18px)}
.way-col p{font-size:clamp(.96rem,1vw,1.08rem);line-height:1.55;color:var(--text-2);max-width:30ch}
/* Editable photo slot — sits between the hairline and the caption so the image
   reads as belonging above the description. Petrus owns it (data-petrus-img). */
.way-photo{position:relative;overflow:hidden;aspect-ratio:1/1;
  margin:0 0 clamp(16px,1.5vw,20px);background:rgba(0,0,0,.05)}
.way-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.28) contrast(1.03);transition:transform .6s var(--ease),filter .6s var(--ease)}
.way-col:hover .way-photo img{transform:scale(1.045);filter:grayscale(0) contrast(1.05)}
body.petrus-edit .way-photo{cursor:pointer}
body.petrus-edit .way-photo::after{content:"Replace photo";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;background:rgba(20,6,2,.52);
  color:var(--paper);opacity:0;transition:opacity .3s var(--ease);
  font-family:var(--mono);font-weight:500;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase}
body.petrus-edit .way-photo:hover::after{opacity:1}
/* Match the Recent Work gallery wrap width (1060px) so the three columns
   align edge-to-edge with the photograph below. */
#ways>.wrap{max-width:1060px}
@media(max-width:820px){.ways-3{grid-template-columns:1fr;gap:34px}}

/* THREE WAYS — framed-photo row variant (variation 2) */
.ways-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,30px);
  margin-top:clamp(30px,3.4vw,52px)}
.way-fig{display:flex;flex-direction:column}
.way-fig .fr{aspect-ratio:4/5;overflow:hidden;position:relative;background:rgba(0,0,0,.14);
  box-shadow:0 26px 64px rgba(40,12,4,.30)}
.way-fig .fr img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(.98);
  transition:transform 1.05s var(--ease),filter .7s var(--ease)}
.way-fig:hover .fr img{transform:scale(1.05)}
.way-fig .cap{display:flex;align-items:baseline;gap:12px;margin-top:14px;font-family:var(--mono);
  font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.way-fig .cap .n{color:var(--text-3)}
.way-fig p{margin-top:9px;font-size:.94rem;line-height:1.5;color:var(--text-2);max-width:32ch}
@media(max-width:820px){.ways-figs{grid-template-columns:1fr;gap:30px}}

/* a wider gallery for the v2 stories grid (no sticky feature) */
.stories-grid{column-count:4;column-gap:clamp(12px,1.2vw,20px)}
.stories-grid .plate{display:block;width:100%;margin:0 0 clamp(12px,1.2vw,20px);break-inside:avoid;
  overflow:hidden;background:rgba(0,0,0,.08);cursor:pointer;position:relative}
.stories-grid .plate img{width:100%;height:auto;display:block;filter:grayscale(.12) contrast(1.03);
  transition:transform .9s var(--ease),filter .6s var(--ease)}
.stories-grid .plate:hover img{transform:scale(1.05);filter:grayscale(0) contrast(1.05)}
.stories-grid .plate figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;
  font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:linear-gradient(transparent,rgba(20,6,2,.62));opacity:0;transition:opacity .4s}
.stories-grid .plate:hover figcaption{opacity:1}
@media(max-width:1100px){.stories-grid{column-count:3}}
@media(max-width:760px){.stories-grid{column-count:2}}

/* closing CTA line on family pages (re-uses contact schema otherwise) */
.fam-close .body{max-width:34ch}

/* ════════════════════════════════════════════════════════════════
   SELECTED FAMILY STORIES — home tie-in gallery.
   The family-legacy "stories" contact-sheet, rebuilt in the home brand:
   a 5-up grid of framed plates with mono captions, sitting over a warm
   plate like every other home section. Re-uses the WORKS header rhythm
   and the shared [data-lb] lightbox + [data-r] reveal.
   ════════════════════════════════════════════════════════════════ */
#famstories{padding-block:clamp(110px,15vh,180px)}
.fam-stories-head{display:flex;align-items:baseline;gap:20px;margin-bottom:clamp(26px,3vw,46px)}
.fam-stories-head h2{font-family:var(--mono);font-weight:500;font-size:clamp(.84rem,1vw,1rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.fam-stories-head .ct{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.2em;
  color:var(--text-3);margin-left:auto;text-align:right}
.fam-gal{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,26px);align-items:start}
.fam-gal .plate{display:flex;flex-direction:column;cursor:zoom-in}
.fam-gal .ph{aspect-ratio:3/4;overflow:hidden;position:relative;background:rgba(0,0,0,.18);
  box-shadow:0 24px 60px rgba(40,12,4,.28)}
.fam-gal .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.14) contrast(1.04) saturate(.95);
  transition:transform 1.1s var(--ease),filter .8s var(--ease)}
.fam-gal .plate:hover .ph img{transform:scale(1.055);filter:grayscale(0) contrast(1.05) saturate(1)}
.fam-gal .cap{display:flex;flex-direction:column;gap:4px;margin-top:13px;font-family:var(--mono);text-transform:uppercase}
.fam-gal .cap .t{font-weight:500;font-size:clamp(.6rem,.72vw,.72rem);letter-spacing:.08em;color:var(--text);line-height:1.25;text-wrap:balance}
.fam-gal .cap .l{font-weight:400;font-size:clamp(.55rem,.64vw,.64rem);letter-spacing:.14em;color:var(--text-3)}
.fam-more{margin-top:clamp(32px,4vw,56px);display:flex;justify-content:flex-end}
@media(max-width:1100px){.fam-gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.fam-gal{grid-template-columns:repeat(2,1fr);gap:16px}
  .fam-stories-head{flex-wrap:wrap;gap:8px}.fam-stories-head .ct{margin-left:0;text-align:left}}

/* ════════════════════════════════════════════════════════════════
   BG VISUALISER — a small top-right dropdown to swap the background of
   whichever section is currently in view (uploads/photos + scraped URLs).
   A design/preview affordance: frosted brand pill, fades in after intro.
   ════════════════════════════════════════════════════════════════ */
.bg-picker{position:fixed;z-index:65;top:clamp(68px,8.2vh,104px);right:var(--gut);
  display:flex;flex-direction:column;gap:0;padding:8px 12px;
  width:min(450px,calc(100vw - var(--gut) * 2));box-sizing:border-box;
  background:rgba(28,10,4,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(244,236,220,.22);color:var(--paper);
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  transition:opacity .6s var(--ease)}
/* The top row is always one line: label + select + glyph button.
   Select takes all remaining space and truncates long names. */
.bgp-row-top{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.bgp-row-top label{color:rgba(244,236,220,.6);white-space:nowrap;flex:none}
.bgp-row-top label b{color:var(--paper);font-weight:500}
.bgp-row-top select{appearance:none;-webkit-appearance:none;background:transparent;border:0;
  color:var(--paper);font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 16px 2px 0;
  background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%);
  background-position:calc(100% - 7px) 52%,calc(100% - 3px) 52%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.bgp-row-top select option{background:#3a140a;color:#F4ECDC;text-transform:none;letter-spacing:0}
.bgp-row-top select optgroup{background:#2a0e06;color:#F4ECDC;font-style:normal}
.bg-picker select option{background:#3a140a;color:#F4ECDC;text-transform:none;letter-spacing:0}
.bg-picker select optgroup{background:#2a0e06;color:#F4ECDC;font-style:normal}
/* Solid-colour row: hex field + native swatch, revealed when "Solid colour…" is picked */
.bgp-color{display:flex;align-items:center;gap:10px;width:100%;margin-top:7px;padding-top:8px;
  border-top:1px solid rgba(244,236,220,.14)}
.bgp-color[hidden]{display:none}
.bgp-color .bgp-k{color:rgba(244,236,220,.6);white-space:nowrap;flex:none}
.bgp-hex{flex:1 1 auto;min-width:0;background:rgba(244,236,220,.06);
  border:1px solid rgba(244,236,220,.2);color:var(--paper);
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 8px;outline:none;transition:border-color .25s var(--ease)}
.bgp-hex:focus{border-color:rgba(244,236,220,.5)}
.bgp-hex::placeholder{color:rgba(244,236,220,.3);letter-spacing:.08em}
.bgp-swatch{flex:none;width:28px;height:25px;padding:0;cursor:pointer;
  background:transparent;border:1px solid rgba(244,236,220,.28)}
.bgp-swatch::-webkit-color-swatch-wrapper{padding:2px}
.bgp-swatch::-webkit-color-swatch{border:0}
.bgp-swatch::-moz-color-swatch{border:0}
.bg-picker.hide-chrome{opacity:0;pointer-events:none}
body.intro .bg-picker{opacity:0;pointer-events:none}
@media(max-width:680px){.bg-picker{display:none}}

/* ═══════════ SECTION HIDE (owner) ═══════════
   The owner can hide a whole section from the GUI. data-petrus-hidden is rendered
   server-side by boot.php (no flash for visitors) and round-tripped by Petrus.
   • Visitor  → display:none, so the bg engine's offsetParent filter skips it.
   • Owner    → still shown, dimmed + badged, so it stays togglable in edit mode. */
.sec[data-petrus-hidden]{display:none}
body.petrus-edit .sec[data-petrus-hidden]{display:flex;opacity:.4}
body.petrus-edit .sec[data-petrus-hidden]::after{content:"Section hidden";
  position:absolute;top:clamp(68px,8.2vh,104px);left:50%;transform:translateX(-50%);z-index:60;
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);background:rgba(28,10,4,.6);border:1px solid rgba(244,236,220,.22);
  padding:6px 12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Hide-section control — mirrors .bg-picker geometry, anchored LEFT, owner-only. */
.sec-hider{position:fixed;z-index:65;top:clamp(68px,8.2vh,104px);left:var(--gut);
  display:none;align-items:center;gap:10px;padding:8px 12px;box-sizing:border-box;
  background:rgba(28,10,4,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(244,236,220,.22);color:var(--paper);
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  transition:opacity .6s var(--ease)}
body.petrus-edit .sec-hider{display:flex}
.sec-hider button{appearance:none;background:transparent;border:0;cursor:pointer;color:var(--paper);
  font:inherit;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:9px;padding:2px 0}
.sec-hider .dot{width:8px;height:8px;border-radius:50%;background:#5E7B4E;flex:none;transition:background .3s}
.sec-hider.sechide-on .dot{background:#9E2A14}
.sec-hider.hide-chrome{opacity:0;pointer-events:none}
body.intro .sec-hider{opacity:0;pointer-events:none}
/* The control is owner-only (shown only via body.petrus-edit), so keep it usable
   at ANY width — a hidden section must always be reachable to un-hide. The narrow
   rule only targets non-owners, who never see it anyway, so it's a safe no-op
   that documents intent without ever force-hiding the owner's control. */
@media(max-width:680px){body:not(.petrus-edit) .sec-hider{display:none}}

/* ───────── BG ADJUST PANEL (admin · reframe each section's photo) ───────── */
/* The glyph button (slider-dial icon) lives on the dropdown's line; the panel
   wraps below and auto-closes when the pointer leaves the picker. Square 2px
   corners, 1px borders, paper/red inversion — the shared studio control look. */
.bgp-gear{flex:none;appearance:none;-webkit-appearance:none;border:1px solid rgba(244,236,220,.3);
  background:transparent;color:var(--paper);display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:24px;border-radius:2px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.bgp-gear:hover{background:var(--paper);color:var(--red);border-color:var(--paper)}
.bgp-gear.on{background:var(--paper);color:var(--red);border-color:var(--paper)}
.bgp-gear svg{display:block}
.bgp-panel{width:100%;display:flex;flex-direction:column;gap:9px;margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(244,236,220,.16)}
.bgp-panel[hidden]{display:none}
/* Panel holds two mutually-exclusive control groups: photo framing OR colour. */
.bgp-group{display:flex;flex-direction:column;gap:9px;width:100%}
.bgp-group[hidden]{display:none}
/* The colour picker now lives inside the panel — drop the old separator border. */
.bgp-group .bgp-color{margin-top:0;padding-top:0;border-top:0}
/* Each colour (first / second) is a swatch + hex cell; two sit side by side for gradients. */
.bgp-cell{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0}
.bgp-cell[hidden]{display:none}
.bgp-row{display:flex;align-items:center;gap:10px}
.bgp-k{flex:0 0 52px;color:rgba(244,236,220,.6);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.bgp-v{flex:0 0 36px;text-align:right;color:var(--paper);font-size:9px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.bgp-seg{display:flex;border:1px solid rgba(244,236,220,.24);border-radius:2px;overflow:hidden}
.bgp-seg button{appearance:none;border:0;background:transparent;color:rgba(244,236,220,.6);
  font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 11px;cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.bgp-seg button+button{border-left:1px solid rgba(244,236,220,.24)}
.bgp-seg button:hover{color:var(--paper)}
.bgp-seg button.on{background:var(--paper);color:var(--red)}
.bgp-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:2px;border-radius:0;
  background:rgba(244,236,220,.3);outline:none;cursor:pointer}
.bgp-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;
  border-radius:0;background:var(--paper);cursor:pointer;border:0}
.bgp-row input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:0;background:var(--paper);cursor:pointer;border:0}
.bgp-reset{margin-top:2px;align-self:flex-start;appearance:none;border:0;background:transparent;
  color:rgba(244,236,220,.55);font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.bgp-reset:hover{color:var(--paper)}