/* ===========================================================
   Awakened Lenz Photography, shared stylesheet
   -----------------------------------------------------------
   One sheet for the whole site. Page specific rules live in a
   small <style> block on the page that needs them, loaded after
   this file so they win on ties without !important.

   Palette is pulled from the client's own frames: the sepia and
   amber of IMG_1221 against the near black of the logo plate.
   =========================================================== */

:root{
  --black:#0b0a09;
  --char:#131110;
  --panel:#1c1917;
  --line:#2e2925;
  --ink:#efe7db;
  --muted:#8f857a;

  --gold:#c99a55;          /* warm highlight off the sepia frames */
  --gold-rgb:201,154,85;
  --gold2:#a97c3e;         /* mid amber */
  --gold3:#5a3a1a;         /* deep sepia, for glows and scrims */

  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --disp:"Oswald",Impact,sans-serif;
  --script:"Pinyon Script","Cormorant Garamond",cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--ink);font-family:var(--sans);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:900;background:var(--panel);
  color:var(--ink);padding:14px 18px;border:1px solid var(--gold);border-radius:2px;
  font-size:13px;letter-spacing:1px;display:inline-block;min-height:44px}
.skip:focus{left:12px;top:12px}


/* ===========================================================
   SHARED BITS
   =========================================================== */
.eyebrow{font-size:11px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);font-weight:500}

.cta{display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--gold);padding:15px 30px;border-radius:2px;
  cursor:pointer;transition:background .3s,color .3s;background:transparent;
  min-height:44px;font-family:var(--sans)}
.cta:hover{background:var(--gold);color:var(--black)}
.cta.solid{background:var(--gold);color:var(--black);border-color:var(--gold)}
.cta.solid:hover{background:transparent;color:var(--ink)}

.ctarow{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;
  padding:5vh 6vw 11vh;position:relative;z-index:5}

.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.8,.28,1)}
.reveal.in{opacity:1;transform:none}

.wordmark{font-family:var(--script);font-weight:400;letter-spacing:.5px}


/* ===========================================================
   TOP BAR + DROPDOWN NAV
   Native <details>, so it opens and closes with no JavaScript.
   site.js only adds outside click close and current page mark.
   =========================================================== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;
  align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;
  background:linear-gradient(180deg,rgba(11,10,9,.9),transparent);
  backdrop-filter:blur(4px)}
.topbar .brand{font-family:var(--script);font-size:26px;line-height:1;
  letter-spacing:.5px;display:inline-flex;align-items:center;min-height:44px;
  padding:4px 2px 0}
.topbar .brand b{color:var(--gold);font-weight:400}

/* On the home page the hero already carries the name at full size,
   so the small one in the bar would be the same wordmark twice on
   load. It fades in once the hero is behind you, which is also
   where the bar needs a solid background to stay readable. */
.home .topbar .brand{opacity:0;pointer-events:none;transition:opacity .35s ease}
.home .topbar.stuck .brand{opacity:1;pointer-events:auto}
.topbar.stuck{background:rgba(11,10,9,.93);border-bottom:1px solid var(--line)}

.navdd{position:relative;flex:0 0 auto}
/* The bar floats over photography with no solid background of its
   own until it sticks, so the chip has to carry its own contrast.
   The label stays at every width: hiding it left a bare chevron
   that was invisible against a dark hero and under 44px wide. */
.navdd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:var(--disp);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--ink);background:rgba(11,10,9,.72);
  border:1px solid rgba(var(--gold-rgb),.4);border-radius:2px;
  padding:0 16px;min-height:44px;min-width:44px;justify-content:center;
  transition:color .25s,border-color .25s,background .25s}
.navdd summary::-webkit-details-marker{display:none}
.navdd summary::marker{content:""}
.navdd summary:hover,.navdd summary:focus-visible,.navdd[open] summary{
  color:var(--ink);border-color:var(--gold)}
.navdd summary svg{width:13px;height:13px;flex:0 0 auto;fill:none;stroke:var(--gold);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.navdd[open] summary svg{transform:rotate(180deg)}

/* Tall enough that the whole menu, Admin included, fits without
   scrolling on a normal screen. The Admin link is the photographer's
   own way in and she uses it often; behind a scroll it was effectively
   hidden. Still scrolls on short screens, where it has to. */
.navpanel{position:absolute;top:calc(100% + 8px);right:0;z-index:210;
  width:min(80vw,300px);max-height:min(86vh,780px);overflow-y:auto;
  overscroll-behavior:contain;background:var(--panel);border:1px solid var(--line);
  /* No bottom padding: the pinned Admin row sits flush on the panel
     floor, and any gap below it lets the scrolling links show through
     underneath it. */
  border-radius:4px;box-shadow:0 26px 64px rgba(0,0,0,.65);padding:6px 0 0}
.navpanel::-webkit-scrollbar{width:6px}
.navpanel::-webkit-scrollbar-thumb{background:var(--gold3);border-radius:3px}
.navpanel .navlabel{display:block;font-family:var(--disp);font-size:10px;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);padding:14px 18px 7px}
.navpanel .navlabel:first-child{padding-top:10px}
.navpanel a{display:flex;align-items:center;min-height:44px;padding:11px 18px;font-size:13px;font-weight:300;
  line-height:1.3;color:var(--muted);border-left:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s}
.navpanel a:hover,.navpanel a:focus-visible{color:var(--ink);
  background:rgba(255,255,255,.045);border-left-color:var(--gold)}
.navpanel a.on{color:var(--ink);border-left-color:var(--gold);
  background:rgba(var(--gold-rgb),.09)}
/* The photographer's own way in. Pinned to the floor of the panel so
   it is in the same place every time and never needs scrolling to:
   the menu is longer than a short laptop screen, and at the bottom of
   a scroll area this was effectively hidden from the person who uses
   it most. Set apart in gold so it does not read as another page. */
.navpanel .navadmin{position:sticky;bottom:0;z-index:2;
  color:var(--gold);font-weight:400;background:var(--panel);
  border-top:1px solid var(--line);margin-top:6px}
.navpanel .navadmin:hover,.navpanel .navadmin:focus-visible{
  color:var(--ink);background:rgba(var(--gold-rgb),.16)}

@media(max-width:400px){
  .topbar{padding:12px 16px}
  .topbar .brand{font-size:21px}
  .navdd summary{padding:0 13px;letter-spacing:1.2px;gap:7px}
}


/* ===========================================================
   HOME HERO, THE COLLECTION SURF
   -----------------------------------------------------------
   A vanilla port of a React and Framer Motion "collection
   surfer". Cards sit on one diagonal vector in 3D and the whole
   track is pushed back along that vector as the page scrolls,
   so frames stream past the camera. IMG_1221 sits behind it as
   the mood plate.

   The runway is a bounded scroll region, not an endless one, so
   the hero hands off to the rest of the site after a single
   pass through the collection. surf.js reads these sizes from
   the DOM, so nothing here is hard coded to a viewport.
   =========================================================== */
/* .surf is the scroll runway. The stage sticks inside it, so the
   scrollable difference between the two is exactly the length of
   one pass through the collection. */
/* Six cards over five steps. 300vh leaves a 200vh runway, so roughly
   40vh of scroll per category: enough to read each label without the
   hero outstaying its welcome before the rest of the page. */
.surf{position:relative;height:300vh;background:var(--black)}
.surf__stage{position:sticky;top:0;height:100svh;max-height:1000px;
  overflow:hidden;isolation:isolate}

/* The plate is a portrait frame in a landscape stage, so the crop
   is deliberate: 18% down holds the necklace, the shoulders and
   the hands doing the lacing. Lower than that and it reads as an
   unplaceable field of skin. */
.surf__bg{position:absolute;inset:0;z-index:0;
  background-image:url('IMG_1221.jpg');
  background-size:cover;background-position:40% 18%;
  filter:saturate(.85) contrast(1.05);
  transform:scale(1.06)}
.surf__bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 72% 42%,rgba(var(--gold-rgb),.18),transparent 58%),
    linear-gradient(90deg,rgba(11,10,9,.90) 0%,rgba(11,10,9,.55) 42%,rgba(11,10,9,.30) 100%),
    linear-gradient(0deg,var(--black) 2%,rgba(11,10,9,.30) 40%,rgba(11,10,9,.70) 100%)}

/* the 3D camera */
.surf__scene{position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  perspective:2000px;perspective-origin:10% 10%}
.surf__track{position:relative;width:0;height:0;transform-style:preserve-3d;
  will-change:transform}

.surf__card{
  /* Kept in step with BASE_X/Y/Z in surf.js. These only drive the
     static fallback when JavaScript is off; surf.js overwrites the
     transform on every frame otherwise. */
  --i:0;--sx:380px;--sy:-110px;--sz:-300px;--cw:300px;--ch:400px;
  position:absolute;width:var(--cw);height:var(--ch);
  background:var(--panel);overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  /* No preserve-3d here on purpose. The card's own contents are flat,
     and preserve-3d forces overflow visible, which let the labels
     spill past the card edge onto the backdrop. The track above
     still carries preserve-3d, which is what positions the cards. */
  will-change:transform;
  /* static fallback so the diagonal still reads with JS disabled */
  transform:translate3d(calc(var(--i) * var(--sx)),calc(var(--i) * var(--sy)),
            calc(var(--i) * var(--sz))) rotateY(-50deg)}
.surf__card img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.72) sepia(.12);
  transition:filter .35s ease}
.surf__card:hover img,.surf__card:focus-visible img{filter:brightness(1) sepia(0)}
.surf__card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,rgba(0,0,0,.32),transparent);
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.16);
  transition:box-shadow .35s ease}
.surf__card:hover::after,.surf__card:focus-visible::after{
  box-shadow:inset 0 0 0 1px var(--gold),0 0 30px rgba(var(--gold-rgb),.3)}

/* Each card names the gallery it opens. The card face is turned 50
   degrees away from the camera, which squeezes the type horizontally,
   so the label runs a size larger and a touch wider than the same
   label would on a flat tile. */
/* The label sits at the top of the card. The cards march downwards as
   the track advances, so a bottom label was the first thing to leave
   the frame; anchored at the top it stays readable for the whole pass. */
.surf__card .meta{position:absolute;left:0;right:0;top:0;z-index:3;
  padding:14px 14px 20px;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,9,.95),rgba(11,10,9,.7) 55%,transparent);
  transition:padding-top .35s ease}
.surf__card:hover .meta{padding-top:20px}
.surf__card .meta .k{display:block;font-family:var(--disp);text-transform:uppercase;
  letter-spacing:2px;font-size:19px;font-weight:500;line-height:1.1;color:var(--ink)}
.surf__card .meta .s{display:block;margin-top:4px;font-size:10px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);line-height:1.3}

/* overlays over the scene */
.surf__title{position:absolute;top:3vw;left:3vw;z-index:50;pointer-events:none;
  mix-blend-mode:difference;max-width:min(92vw,760px)}
.surf__title .k{display:block;font-family:var(--script);
  font-size:clamp(44px,9vw,116px);line-height:.86;color:#fff}
.surf__title .k.two{margin-left:6vw}
.surf__title .s{display:block;margin-top:14px;margin-left:6vw;font-family:var(--disp);
  font-size:clamp(10px,1.4vw,13px);letter-spacing:5px;text-transform:uppercase;color:#fff}

.surf__foot{position:absolute;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding:0 3vw 3vw}
.surf__cue{font-family:var(--disp);font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--muted)}
.surf__cue .bar{display:block;width:64px;height:1px;margin-top:10px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform-origin:left;animation:surfcue 2.4s ease-in-out infinite}
@keyframes surfcue{0%,100%{opacity:.3;transform:scaleX(.55)}50%{opacity:1;transform:scaleX(1)}}
.surf__foot .cta{pointer-events:auto}

.surf__fade{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:40;
  background:linear-gradient(0deg,var(--black),transparent);pointer-events:none}

@media(max-width:1200px){.surf__card{--cw:250px;--ch:334px}}
@media(max-width:820px){
  /* Only one or two cards fit a phone screen at a time, so the pass
     needs a little less scroll to get through the same six. */
  .surf{height:260vh}
  .surf__card{--cw:200px;--ch:267px}
  .surf__title{top:auto;bottom:34vh;mix-blend-mode:normal;
    text-shadow:0 2px 30px rgba(0,0,0,.85)}
  .surf__title .k.two,.surf__title .s{margin-left:0}
  .surf__foot{flex-direction:column;align-items:flex-start;gap:14px;padding:0 6vw 7vw}
}
@media(max-width:560px){
  .surf__card{--cw:164px;--ch:219px}
  .surf__bg{background-position:64% center}
}
/* Landscape phones: the stage is short, pull the overlay in tight. */
@media(max-height:520px){
  .surf__title .k{font-size:clamp(30px,7vw,54px)}
  .surf__title .s{display:none}
}


/* ===========================================================
   HOME PORTFOLIO GRID
   =========================================================== */
.navwrap{position:relative;background:var(--black);padding:10vh 0 4vh;overflow:hidden}
.navhead{text-align:center;position:relative;z-index:5;margin-bottom:5vh}
.navhead h2{font-family:var(--serif);font-size:clamp(30px,4vw,52px);font-weight:600;
  display:inline-block;padding-bottom:14px;border-bottom:2px solid var(--gold)}
.navhead p{color:var(--muted);font-weight:300;margin-top:14px;font-size:14px}
.glow{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(70vw,900px);height:min(70vw,900px);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(90,58,26,.45) 0%,rgba(169,124,62,.14) 34%,transparent 64%);
  filter:blur(8px)}

.gtile{position:relative;display:block;overflow:hidden;border-radius:8px;
  border:1px solid var(--line);cursor:pointer;opacity:0;transform:translateY(28px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.8,.28,1)}
.gtile.in{opacity:1;transform:none}
.gtile .ph{width:100%;height:100%;aspect-ratio:4/5;background-size:cover;
  background-position:center;filter:grayscale(.2) contrast(1.04);
  transition:transform .7s cubic-bezier(.22,.8,.28,1),filter .7s ease}
.gtile:hover .ph{transform:scale(1.05);filter:grayscale(0)}
.gtile .meta{position:absolute;left:0;right:0;bottom:0;padding:18px 16px;z-index:3;
  background:linear-gradient(0deg,rgba(11,10,9,.92),transparent);transition:padding .4s}
.gtile .meta .k{font-family:var(--disp);text-transform:uppercase;letter-spacing:1.5px;
  font-size:18px;font-weight:500}
.gtile .meta .s{font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin-top:2px}
.gtile .edge{position:absolute;inset:0;box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .4s;border-radius:8px;pointer-events:none}
.gtile:hover .edge{box-shadow:inset 0 0 0 1px var(--gold),0 0 28px rgba(var(--gold-rgb),.3)}
.gtile:hover .meta{padding-bottom:24px}


/* ===========================================================
   INTERIOR HERO
   =========================================================== */
.ihero{height:78vh;min-height:520px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end}

/* The hero photo is an <img>, not a background, so the browser knows
   its proportions. On desktop it is stretched over the section exactly
   as a background would be, cover and all. On phones it goes back into
   the flow at its natural height: no fixed vh to guess at, no cropping,
   and no dead band, whatever shape the next photo turns out to be.
   These galleries run from 2:3 portraits to 3:2 landscapes, which is
   why one fixed height cannot serve them all. */
.ihero .hero-photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:grayscale(.18) contrast(1.05);transform:scale(1.04);
  animation:slowzoom 18s ease-in-out infinite alternate}
@keyframes slowzoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}

/* For a frame that should never be cropped, even on desktop.
   Letterboxes against the dark instead. */
.ihero .hero-photo-contain{object-fit:contain;object-position:center 35%;
  background:var(--black);transform:none;animation:none}

@media(max-width:700px){
  /* Height of the fixed bar on phones, so the photo starts below it
     rather than behind it. Update if the bar's padding changes. */
  :root{--topbar-h:68px}
  .ihero{display:block;height:auto;min-height:0;padding-top:var(--topbar-h)}
  .ihero .hero-photo{position:relative;inset:auto;height:auto;
    object-fit:fill;transform:none;animation:none}
  /* The scrims existed to darken a full bleed photo so the caption
     could sit on top of it. The caption now sits below the photo, so
     they would only tint it for no reason. */
  .ihero .scrim,.ihero .scrim2,.ihero .herofade{display:none}
  .ihero .c{position:relative;padding:20px 6vw 5vh;max-width:none}
}
.ihero .scrim{position:absolute;inset:0;mix-blend-mode:multiply;
  background:linear-gradient(180deg,rgba(11,10,9,.55),transparent 28%,transparent 50%,var(--gold3) 135%)}
.ihero .scrim2{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(11,10,9,.92),transparent 62%)}
.ihero .herofade{position:absolute;left:0;right:0;bottom:0;height:170px;z-index:4;
  background:linear-gradient(0deg,var(--black),transparent);pointer-events:none}
.ihero .c{position:relative;z-index:5;padding:0 6vw 8vh;max-width:900px}
.ihero h1{font-family:var(--serif);font-size:clamp(46px,8vw,104px);font-weight:600;
  line-height:.9;margin:14px 0 0}
.ihero .tag{color:var(--ink);opacity:.85;font-weight:300;
  font-size:clamp(15px,2vw,19px);margin-top:16px;max-width:560px;line-height:1.6}

/* simple page head, for pages with no hero photo */
.pagehead{padding:23vh 6vw 6vh;max-width:900px;margin:0 auto;text-align:center}
.pagehead h1{font-family:var(--serif);font-size:clamp(40px,7vw,84px);font-weight:600;
  line-height:.95;margin-top:14px}
.pagehead p{color:var(--muted);font-weight:300;line-height:1.7;margin:18px auto 0;
  max-width:620px}


/* ===========================================================
   INTRO / STORY BLOCK
   =========================================================== */
.intro{position:relative;padding:9vh 6vw;max-width:1000px;margin:0 auto;
  display:flex;flex-direction:column;gap:36px}
.intro .lead{font-family:var(--serif);font-size:clamp(28px,4vw,44px);line-height:1.3;
  font-weight:400}
.intro .lead em{color:var(--gold);font-style:italic}
.intro .body p{color:var(--muted);font-weight:300;line-height:1.8;margin-bottom:16px;
  max-width:820px}
.intro .body a{color:var(--gold)}
.intro .body .micro{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.intro .body .micro div{border-left:2px solid var(--gold);padding-left:12px}
.intro .body .micro .n{font-family:var(--disp);font-size:24px;color:var(--ink)}
.intro .body .micro .l{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted)}


/* ===========================================================
   GALLERY GRID
   =========================================================== */
.gallery{padding:4vh 4vw 9vh}
.gallery .gh{text-align:center;margin-bottom:5vh}
.gallery .gh h2{font-family:var(--serif);font-size:clamp(28px,4vw,46px);font-weight:600}
.gallery .gh p{color:var(--muted);font-weight:300;margin-top:6px}

.album-head{font-family:var(--disp);text-transform:uppercase;letter-spacing:2px;
  font-size:14px;color:var(--gold);max-width:1180px;margin:6vh auto 18px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.album-head.has-album{padding-bottom:0;display:flex;align-items:stretch;gap:6px}
.album-head .albumbtn{display:flex;flex:1 1 auto;min-width:0;align-items:center;
  justify-content:space-between;gap:14px;background:none;border:0;margin:0;
  padding:0 0 8px;cursor:pointer;text-align:left;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;transition:color .25s;min-height:44px}

/* Fold control, sitting beside the album opener.
   A gallery with several sessions gets long, so each one can be
   folded away to skim the page. Sessions start open, so the page
   reads exactly as before until someone chooses to fold one. */
.album-head .foldbtn{flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;width:44px;min-height:44px;margin:0;padding:0 0 8px;
  background:none;border:0;cursor:pointer;color:var(--muted);
  transition:color .25s}
.album-head .foldbtn:hover,.album-head .foldbtn:focus-visible{color:var(--gold)}
/* Chevron points down while the session is open, right once folded. */
.album-head .foldbtn::after{content:"";width:9px;height:9px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);margin-bottom:4px;transition:transform .25s}
.album-head .foldbtn[aria-expanded="false"]::after{transform:rotate(-45deg);
  margin-bottom:0}

/* The grid carries .gcols, which sets display and would otherwise beat
   the browser's built in [hidden] rule. Two parts here outrank that
   single class, so the fold actually takes. */
.gcols[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  .album-head .foldbtn,.album-head .foldbtn::after{transition:none}
}
.album-head .albumbtn:hover,.album-head .albumbtn:focus-visible{color:var(--ink)}
.album-head .av{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);transition:color .25s}
.album-head .albumbtn:hover .av,.album-head .albumbtn:focus-visible .av{color:var(--gold)}
.album-head .av svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.gcols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1180px;
  margin:0 auto}
.gcol{display:grid;gap:18px;align-content:start}
.gcols .gfade{position:relative;overflow:hidden;border-radius:8px;
  border:1px solid var(--line);cursor:pointer;margin:0;padding:0;
  background:none;width:100%;display:block;
  opacity:0;transform:translateY(28px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.22,.8,.28,1)}
.gcols .gfade.in{opacity:1;transform:none}
.gcols .gfade img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.14);
  transition:transform .7s cubic-bezier(.22,.8,.28,1),filter .7s ease}
.gcols .gfade.por img{aspect-ratio:2/3}
.gcols .gfade.land img{aspect-ratio:3/2}
.gcols .gfade:hover img{transform:scale(1.05);filter:grayscale(0)}
.gcols .gfade .cap{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:16px;background:linear-gradient(0deg,rgba(11,10,9,.75),transparent 55%);
  opacity:0;transition:opacity .4s}
.gcols .gfade:hover .cap,.gcols .gfade:focus-visible .cap{opacity:1}
.gcols .gfade .cap span{font-family:var(--disp);text-transform:uppercase;
  letter-spacing:2px;font-size:13px}
.gcols .gfade .edge{position:absolute;inset:0;box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .4s;border-radius:8px;pointer-events:none}
.gcols .gfade:hover .edge{box-shadow:inset 0 0 0 1px var(--gold),
  0 0 26px rgba(var(--gold-rgb),.28)}


/* ===========================================================
   ALBUM OVERLAY + SCOPED VIEWER
   Every session heading opens that whole set full screen.
   =========================================================== */
.album{position:fixed;inset:0;z-index:600;background:rgba(8,7,6,.985);
  display:none;flex-direction:column}
.album.on{display:flex}
.album .ahead{flex:0 0 auto;display:flex;align-items:flex-end;
  justify-content:space-between;gap:18px;padding:20px 5vw 16px;
  border-bottom:1px solid var(--line)}
.album .at{font-family:var(--serif);font-size:clamp(26px,5vw,44px);font-weight:600;
  line-height:1.05}
.album .as{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin-top:8px}
.album .ax{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--disp);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);background:none;border:1px solid var(--line);border-radius:2px;
  padding:0 14px;min-height:44px;transition:color .25s,border-color .25s}
.album .ax:hover,.album .ax:focus-visible{color:var(--ink);border-color:var(--gold)}
.album .ax svg{width:13px;height:13px;fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round}
.album .abody{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:4vh 5vw 9vh}
.album .abody::-webkit-scrollbar{width:7px}
.album .abody::-webkit-scrollbar-thumb{background:var(--gold3);border-radius:4px}
.album .agrid{column-count:3;column-gap:14px;max-width:1300px;margin:0 auto}
.album .agrid .afig{break-inside:avoid;margin:0 0 14px;position:relative;
  overflow:hidden;border-radius:5px;border:1px solid var(--line);cursor:pointer;
  padding:0;background:none;width:100%;display:block}
.album .agrid img{display:block;width:100%;height:auto;filter:grayscale(.14);
  transition:transform .5s cubic-bezier(.22,.8,.28,1),filter .5s ease}
.album .agrid .afig:hover img{transform:scale(1.05);filter:grayscale(0)}
.album .agrid .afig .edge{position:absolute;inset:0;border-radius:5px;
  pointer-events:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .4s}
.album .agrid .afig:hover .edge{box-shadow:inset 0 0 0 1px var(--gold),
  0 0 24px rgba(var(--gold-rgb),.25)}
.album .aempty{text-align:center;color:var(--muted);font-weight:300;padding:8vh 0}

.aview{position:fixed;inset:0;z-index:610;background:rgba(6,5,4,.97);
  display:none;align-items:center;justify-content:center;padding:5vh 6vw}
.aview.on{display:flex}
.aview img{max-width:88vw;max-height:80vh;width:auto;height:auto;object-fit:contain;
  border:1px solid var(--gold);box-shadow:0 30px 90px rgba(90,58,26,.5)}
.aview .avx{position:absolute;top:18px;right:24px;font-family:var(--serif);
  font-size:30px;line-height:1;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:10px}
.aview .avx:hover,.aview .avx:focus-visible{color:var(--gold)}
.aview .avnav{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;
  line-height:1;color:var(--muted);background:none;border:0;cursor:pointer;
  user-select:none;padding:20px}
.aview .avnav:hover,.aview .avnav:focus-visible{color:var(--gold)}
.aview .avprev{left:6px}
.aview .avnext{right:6px}
.aview .avcount{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:2px;color:var(--muted);
  font-variant-numeric:tabular-nums}

@media(max-width:900px){.album .agrid{column-count:2}}
@media(max-width:560px){
  .album .agrid{column-count:1}
  .album .ahead{padding:16px 5vw 14px}
  .album .ax .axtxt{display:none}
  .aview .avnav{padding:14px;font-size:34px}
}


/* ===========================================================
   WHAT IS INCLUDED
   =========================================================== */
.incl{padding:8vh 6vw;background:var(--char);position:relative}
.incl .wrap{max-width:1100px;margin:0 auto}
.incl h2{font-family:var(--serif);font-size:clamp(28px,4vw,44px);font-weight:600;
  text-align:center;margin-bottom:1vh}
.incl .sub{text-align:center;color:var(--muted);font-weight:300;margin-bottom:5vh}
.incl .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.incl .row{border:1px solid var(--line);border-radius:5px;padding:24px;
  background:var(--panel);transition:border-color .3s,transform .3s}
.incl .row:hover{border-color:var(--gold2);transform:translateY(-4px)}
.incl .row h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:1.5px;
  font-size:15px;margin-bottom:6px}
.incl .row p{color:var(--muted);font-weight:300;font-size:14px;line-height:1.6}


/* ===========================================================
   PRICING STRIP
   =========================================================== */
.price{padding:8vh 6vw;text-align:center;position:relative;overflow:hidden}
.price .pglow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(60vw,640px);height:min(60vw,640px);
  background:radial-gradient(circle,rgba(90,58,26,.45),transparent 62%);
  filter:blur(8px);pointer-events:none;z-index:0}
.price .pc{position:relative;z-index:2;max-width:640px;margin:0 auto}
.price .eyebrow{display:block;margin-bottom:10px}
.price h2{font-family:var(--serif);font-size:clamp(30px,5vw,56px);font-weight:600}
.price .amt{font-family:var(--disp);font-size:clamp(36px,6vw,68px);color:var(--gold);
  margin:14px 0;font-weight:600}
.price .amt small{font-size:18px;color:var(--muted);font-weight:300}
.price p{color:var(--muted);font-weight:300;margin:0 auto 20px;line-height:1.7}


/* ===========================================================
   CONSULT CTA
   =========================================================== */
.consult{padding:10vh 6vw;text-align:center;background:var(--char);position:relative}
.consult h2{font-family:var(--serif);font-size:clamp(34px,6vw,72px);font-weight:600;
  line-height:.95}
.consult h2 em{color:var(--gold);font-style:italic}
.consult p{color:var(--muted);font-weight:300;max-width:520px;margin:18px auto 30px;
  line-height:1.7}
.consult h2 + .cta{margin-top:36px}
.consult h2 + .ctarow{margin-top:30px}
.consult .ctarow{padding:0}


/* ===========================================================
   OTHER GALLERIES RAIL
   =========================================================== */
.others{padding:8vh 6vw;max-width:1300px;margin:0 auto}
.others h2{font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:600;
  text-align:center;margin-bottom:4vh}
.others .rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;
  scroll-snap-type:x mandatory}
.others .rail::-webkit-scrollbar{height:6px}
.others .rail::-webkit-scrollbar-thumb{background:var(--gold3);border-radius:3px}
.others .chip{flex:0 0 auto;width:150px;height:200px;border-radius:5px;overflow:hidden;
  position:relative;border:1px solid var(--line);scroll-snap-align:start;
  transition:border-color .3s}
.others .chip:hover{border-color:var(--gold)}
.others .chip .ph{position:absolute;inset:0;background-size:cover;
  background-position:center;filter:grayscale(.3);transition:filter .3s}
.others .chip:hover .ph{filter:grayscale(0)}
.others .chip .t{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(11,10,9,.9),transparent 55%)}
.others .chip .l{position:absolute;left:10px;bottom:10px;font-family:var(--disp);
  text-transform:uppercase;letter-spacing:1px;font-size:13px;z-index:2}


/* ===========================================================
   FAQ
   =========================================================== */
.faq{padding:8vh 6vw 2vh;max-width:880px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:20px;font-family:var(--disp);text-transform:uppercase;
  letter-spacing:1px;font-size:13px;color:var(--ink);transition:color .25s;
  min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:'+';color:var(--gold);font-size:20px;font-family:var(--sans);
  flex:0 0 auto;transition:transform .3s}
.faq details[open] summary::after{content:'\2212'}
.faq details p{color:var(--muted);font-weight:300;line-height:1.7;margin-top:12px;
  padding-right:34px;font-size:14px}


/* ===========================================================
   BOOKING FORM
   =========================================================== */
.policy{max-width:820px;margin:0 auto;padding:0 6vw 6vh}
.policy h2{font-family:var(--disp);text-transform:uppercase;letter-spacing:2px;
  font-size:14px;color:var(--gold);margin-bottom:16px}
.policy ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.policy li{color:var(--muted);font-weight:300;line-height:1.7;font-size:14px;
  padding-left:20px;position:relative}
.policy li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;
  background:var(--gold)}

.formsec{max-width:820px;margin:0 auto;padding:0 6vw 10vh}
.formsec .field{margin-bottom:30px}
.formsec .q{display:block;font-size:15px;font-weight:400;margin-bottom:10px;
  line-height:1.5}
.formsec .req{color:var(--gold)}
.formsec .hint{font-size:12px;color:var(--muted);font-weight:300;margin-bottom:10px}
.formsec input[type=text],.formsec input[type=email],.formsec input[type=tel],
.formsec textarea{width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:3px;color:var(--ink);font-family:var(--sans);font-size:16px;
  padding:13px 14px;transition:border-color .25s}
.formsec textarea{min-height:96px;resize:vertical}
.formsec input:focus,.formsec textarea:focus{border-color:var(--gold);outline:none}
.formsec .optgroup{display:flex;flex-direction:column;gap:2px}
.formsec .optgroup label{display:flex;align-items:center;gap:11px;cursor:pointer;
  color:var(--muted);font-weight:300;font-size:14px;padding:11px 4px;min-height:44px;
  transition:color .2s}
.formsec .optgroup label:hover{color:var(--ink)}
.formsec .optgroup input{accent-color:var(--gold);width:17px;height:17px;flex:0 0 auto}
.formsec .otherwrap{display:none;margin-top:10px}
.formsec .otherwrap.on{display:block}
.formsec .submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px}
.formsec .formnote{font-size:13px;color:var(--muted);font-weight:300;line-height:1.6;
  margin-top:22px}
.formsec .status{font-size:14px;font-weight:300;line-height:1.6}
.formsec .status.ok{color:var(--gold)}
.formsec .status.bad{color:#d98b7a}


/* ===========================================================
   FOOTER
   =========================================================== */
footer{padding:6vh 6vw 4vh;border-top:1px solid var(--line);text-align:center}
footer .fbrand{font-family:var(--script);font-size:30px;line-height:1.2;
  margin-bottom:8px}
footer .fbrand b{color:var(--gold);font-weight:400}
footer .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:18px 0}
footer .links a{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);transition:color .25s;padding:15px 4px;
  display:inline-flex;align-items:center;min-height:44px}
footer .links a:hover{color:var(--gold)}
footer .social{display:flex;gap:14px;justify-content:center;margin:4px 0 18px}
/* Icon only, so the link carries no text to give it height. Sized to
   the 44px touch minimum explicitly rather than relying on padding
   around a 19px glyph, which came out at 35px. */
footer .social a{color:var(--muted);transition:color .25s;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px}
footer .social a:hover,footer .social a:focus-visible{color:var(--gold)}
footer .social svg{width:21px;height:21px;fill:currentColor}
footer .fine{color:var(--muted);font-size:12px;font-weight:300;margin-top:14px;
  opacity:.7;line-height:1.7}
footer .fine a{color:var(--muted);border-bottom:1px solid var(--line);
  display:inline-block;padding:6px 0}
footer .faddr{font-style:normal;font-size:12px;letter-spacing:1px;color:var(--muted);
  margin:2px 0 10px}


/* ===========================================================
   STICKY CALL BAR, PHONES ONLY
   The single highest impact element on a local service site.
   The body gets bottom padding to match so it never covers the
   footer, and it clears the iPhone home indicator.
   =========================================================== */
.callbar{display:none}
@media(max-width:720px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:300;display:flex;
    align-items:center;justify-content:center;
    min-height:56px;padding:16px 20px calc(16px + env(safe-area-inset-bottom));
    background:var(--gold);color:var(--black);
    font-family:var(--disp);font-size:14px;letter-spacing:2px;text-transform:uppercase;
    font-weight:500;box-shadow:0 -10px 30px rgba(0,0,0,.5)}
  .callbar:active{background:var(--gold2)}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  /* The hero's own button would otherwise sit under the bar. */
  .surf__foot{padding-bottom:12vw}
}
footer .fine a:hover{color:var(--gold)}


/* ===========================================================
   LABELED PLACEHOLDER
   Marks a slot whose photo has not been supplied yet. Shows the
   exact filename to drop in rather than rendering a black box.
   =========================================================== */
.slot{position:relative;background-color:#16130f;
  background-image:linear-gradient(150deg,#1f1a15,#0b0a09)}
.slot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 10px,
    transparent 10px 20px)}
.slot::after{content:attr(data-file);position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
  letter-spacing:.06em;color:rgba(239,231,219,.6);background:rgba(6,5,4,.78);
  padding:7px 11px;border-radius:2px;white-space:nowrap}
.others .chip .slot::after,.gtile .slot::after{font-size:9px;padding:5px 7px}

/* Copy the client still has to confirm. Deliberately visible, so
   nothing unverified can ship by being quietly forgotten. */
.todo{display:block;border-left:2px solid var(--gold);background:rgba(var(--gold-rgb),.07);
  padding:12px 16px;margin:10px 0;border-radius:0 3px 3px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  line-height:1.65;color:#e2c08a;letter-spacing:.01em}
.todo b{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px;font-weight:600}


/* ===========================================================
   BREAKPOINTS
   =========================================================== */
@media(max-width:900px){
  .gcols{grid-template-columns:1fr}
  .incl .rows{grid-template-columns:1fr}
  .intro{gap:28px}
}
@media(max-width:560px){
  .ctarow{flex-direction:column;align-items:stretch;gap:12px;max-width:320px;
    margin:0 auto;padding:4vh 6vw 8vh}
  .ctarow .cta{width:100%;text-align:center}
  .pagehead{padding:20vh 6vw 5vh}
}

/* One tile left alone on the last row of a 3 column grid reads as
   a mistake. Centre whichever tile ends up orphaned. */
@media(min-width:901px){
  .gcols .gtile:last-child:nth-child(3n+1){grid-column:2}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .gtile,.gcols .gfade{opacity:1;transform:none}
  /* The surf hero collapses to a single still frame. */
  .surf{height:auto}
  .surf__stage{position:relative;height:100svh}
  .surf__scene,.surf__cue{display:none}
}