/* ═════════════════════════════════════════════════════════
   John Gomez Photography — concept site · gallery-white edition
   ═════════════════════════════════════════════════════════ */

:root{
  --paper:#fbfaf7;          /* the wall */
  --paper-2:#f3efe7;        /* alternating band */
  --paper-3:#e9e4d9;        /* undeveloped print */
  --ink:#15171b;
  --ink-soft:#4c525c;
  --ink-mute:#8b9099;
  --line:#e4dfd4;
  --line-2:#cfc8b9;
  --aqua:#0e9ba6;           /* pulled straight out of his water */
  --coral:#dd5f38;

  --d:'Bodoni Moda','Didot','Playfair Display',Georgia,serif;
  --u:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --m:var(--u);             /* labels and captions: once a mono, now the body's own face */

  --pad:clamp(1.25rem,4.5vw,5rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* `hidden` means gone. Without this, any rule that sets display — the prompt's
   grid, the picker's grid — quietly overrides it, and an invisible overlay
   swallows every click on the page */
[hidden]{display:none !important}

/* keyboard users should not have to tab through a closed shutter */
.skip{
  position:fixed; top:-100px; left:var(--pad); z-index:1100;
  background:var(--ink); color:var(--paper); padding:.85rem 1.4rem; border-radius:0 0 4px 4px;
  font-family:var(--m); font-size:.73rem;
  letter-spacing:.24em; text-transform:uppercase; transition:top .3s var(--ease);
}
.skip:focus{top:0}
/* everything is set in rem, so this one number is the size of the whole site */
html{font-size:115%; scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--u); font-weight:300; line-height:1.65;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden; height:100vh}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
/* every paragraph set flush both sides; where the block is centred, its last
   line stays centred rather than falling back to the left edge */
p{text-align:justify; -webkit-hyphens:auto; hyphens:auto}
/* a phone's column is too narrow to justify: it opens rivers between the
   words and breaks them at the line end */
@media (max-width:700px){ p{text-align:left; -webkit-hyphens:manual; hyphens:manual} }
.say p,.sec__head--c p,.quote p,.p__tail p,.lens__ui p,.loupe figcaption p{text-align-last:center}
::selection{background:var(--aqua); color:#fff}
:focus-visible{outline:2px solid var(--aqua); outline-offset:3px; border-radius:2px}
.tile:focus-visible,.drop a:focus-visible,.turn:focus-visible{outline-offset:-3px}

/* photographs are not draggable assets */
img,.tile__img,.shot__img,.drop__img,.turn__img,.strip__reel i,.hero__frame,.p__cover,
.loupe__img,.loupe__strip i,.pick__img,.ev__img,.ab__portraitImg,.ab__bandImg{
  -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none;
}

/* a scrollbar that belongs to the page */
*::-webkit-scrollbar{width:11px; height:11px}
*::-webkit-scrollbar-track{background:var(--paper-2)}
*::-webkit-scrollbar-thumb{background:var(--line-2); border:3px solid var(--paper-2); border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-mute)}

/* barely-there paper tooth */
body::after{
  content:''; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── the aperture "o" in the wordmark ───────────────────── */
.mark-o{
  display:inline-block; width:.6em; height:.6em; border-radius:50%;
  border:.11em solid currentColor; position:relative; transform:translateY(.02em);
}
.mark-o::after{content:''; position:absolute; inset:.08em; border-radius:50%; background:var(--aqua)}
.mark-o--sm{width:.56em;height:.56em;border-width:.1em}

/* ═════════════ THE LENS ═════════════ */
.lens{
  position:fixed; inset:0; z-index:1000; background:var(--paper);
  display:grid; place-items:center; overflow:hidden; transition:opacity .5s ease;
}
.lens__svg{position:absolute; inset:0; width:100%; height:100%; transform-origin:50% 50%}
#lensArt{transition:opacity .5s ease, transform 1.4s var(--ease); transform-origin:50% 50%}
.lens.is-open #lensArt{transform:scale(1.07)}
.lens__engrave{
  font-family:var(--m); font-size:21px; letter-spacing:5px; fill:#9aa1a9;
}
.lens__stop{font-family:var(--m); font-size:19px; fill:#8b9199}

/* the UI is etched onto the front element, so it rides on the dark glass */
.lens__ui{
  position:relative; z-index:3; text-align:center; padding:1rem;
  transition:opacity .45s ease, transform .6s var(--ease);
}
.lens__meta{
  font-family:var(--m); font-size:clamp(.56rem,1.6vmin,.8rem); letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:clamp(.7rem,2vmin,1.4rem);
}
.lens__meta span{color:var(--aqua)}
.lens__mark{
  font-family:var(--d); font-weight:400; font-size:clamp(1.5rem,6.8vmin,4.2rem);
  line-height:1; margin:0; color:#fff;
}
.lens__mark .mark-o::after{background:var(--aqua)}
.lens__trade{
  font-family:var(--d); font-weight:400; font-size:clamp(1.1rem,4.9vmin,3rem);
  line-height:1; margin:clamp(.3rem,.9vmin,.6rem) 0 0; color:rgba(255,255,255,.9);
}
.lens__sub{
  font-family:var(--m); font-weight:700; font-size:clamp(.56rem,1.7vmin,.86rem); letter-spacing:.4em;
  text-transform:uppercase; color:rgba(255,255,255,.78); margin-top:clamp(.6rem,1.6vmin,1.1rem);
  padding-left:.4em; /* the tracking hangs off the last letter — balance it so the line centres */
}
/* the glass is narrow on a phone — pull the spaced-out lines in so they sit inside it */
@media (max-width:520px){ .lens__meta{letter-spacing:.26em} }
.lens__open{
  margin-top:clamp(1.2rem,4vmin,2.6rem); background:none; border:0; cursor:pointer; padding:.6rem 0;
  display:inline-flex; flex-direction:column; align-items:center; gap:.9rem;
}
.lens__openRing{
  width:clamp(30px,6.2vmin,50px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  position:relative; display:grid; place-items:center;
}
.lens__openRing::before{
  content:''; width:34%; aspect-ratio:1; border-radius:50%; background:var(--aqua);
  box-shadow:0 0 18px 3px rgba(14,155,166,.5); animation:pulse 2.4s ease-in-out infinite;
}
.lens__openRing::after{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(79,208,216,.4); animation:ripple 2.4s ease-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}}
@keyframes ripple{0%{transform:scale(.85);opacity:.6}100%{transform:scale(1.5);opacity:0}}
.lens__openTxt{
  font-family:var(--m); font-weight:700; font-size:clamp(.6rem,1.85vmin,.94rem); letter-spacing:.32em;
  text-transform:uppercase; color:rgba(255,255,255,.72); padding-left:.32em;
}
.lens.is-open{pointer-events:none}
.lens.is-open .lens__ui{opacity:0; transform:scale(1.18)}
.lens.is-gone{opacity:0; visibility:hidden}
.lens.is-shutter{background:transparent}
.lens.is-shutter .lens__ui,.lens.is-shutter #lensArt{opacity:0}

/* ═════════════ HUD ═════════════ */
.hud{
  position:fixed; inset:0; z-index:800; pointer-events:none;
  opacity:0; transition:opacity .8s ease .3s;
  font-family:var(--m); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); mix-blend-mode:multiply; font-variant-numeric:tabular-nums;
}
body.is-live .hud{opacity:1}
.hud__c{position:absolute; width:22px; height:22px; border:1px solid var(--line-2)}
.hud__c--tl{top:14px;left:14px;border-right:0;border-bottom:0}
.hud__c--tr{top:14px;right:14px;border-left:0;border-bottom:0}
.hud__c--bl{bottom:14px;left:14px;border-right:0;border-top:0}
.hud__c--br{bottom:14px;right:14px;border-left:0;border-top:0}
.hud__readout{position:absolute; bottom:16px; display:flex; gap:.9rem; align-items:center}
.hud__readout--l{left:48px}
.hud__readout--r{right:48px}
.hud__readout b{color:var(--aqua); font-weight:500}
.hud__meter{
  position:absolute; top:50%; right:19px; transform:translateY(-50%);
  width:2px; height:110px; background:var(--line);
}
.hud__meter i{display:block; width:100%; background:var(--aqua); height:0%; transition:height .15s linear}
.hud__focus{
  position:absolute; top:0; left:0; width:0; height:0; opacity:0; mix-blend-mode:normal;
  transition:transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease), opacity .25s;
}
.hud__focus.on{opacity:1}
.hud__focus i{position:absolute; width:15px; height:15px; border:1.5px solid var(--aqua)}
.hud__focus i:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}
.hud__focus i:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}
.hud__focus i:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}
.hud__focus i:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
@media (max-width:900px){
  .hud__readout--l{left:18px} .hud__readout--r,.hud__meter,.hud__focus{display:none}
}
/* the readout lives in the page's margins. A phone has none, so below this
   it stops sitting on top of the photographs and goes away. */
@media (max-width:700px){ .hud__readout{display:none} }

/* ═════════════ NAV ═════════════ */
/* Nothing on .nav may create a containing block — no transform, no filter. The
   mobile menu inside it is position:fixed; inset:0, and a transformed or
   backdrop-filtered ancestor would make that mean "the nav bar" instead of
   "the window", collapsing the menu into the bar with the page showing
   through. So the bar slides on `top`, and its frosted ground lives on a
   pseudo-element. */
.nav{
  position:fixed; top:-140px; left:0; right:0; z-index:700;
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem var(--pad);
  transition:top .7s var(--ease), padding .4s;
}
body.is-live .nav{top:0}
.nav::before{
  content:''; position:absolute; inset:0; z-index:-2; opacity:0;
  background:rgba(251,250,247,.86); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--line); transition:opacity .4s;
}
.nav.is-stuck::before{opacity:1}
.nav.is-stuck{padding-top:.45rem; padding-bottom:.45rem}
.nav__brand{display:block; line-height:0}
/* the mark is his signature, lifted off the frames — a clean file saved over
   assets/photos/signature.png replaces it */
.nav__brand img{height:clamp(66px,6.4vw,88px); width:auto; transition:height .4s var(--ease), filter .4s}
.nav.is-stuck .nav__brand img{height:clamp(52px,4.6vw,64px)}

/* the hero photograph runs up under the bar, and bold ink links vanish into it —
   a pale wash behind the bar, only at the top of the front page, until it sticks */
body[data-page="home"] .nav:not(.is-stuck):not(.is-menu)::before{
  opacity:1; backdrop-filter:none; box-shadow:none;
  background:linear-gradient(180deg, rgba(251,250,247,.94) 0%, rgba(251,250,247,.82) 62%, rgba(251,250,247,0) 100%);
}
.nav__links{display:flex; align-items:center; gap:2.1rem}
.nav__links a{
  font-family:var(--m); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); position:relative; padding:.3rem 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--aqua); transition:width .4s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-here::after{width:100%}
.nav__links a.is-here{color:var(--ink)}
.nav__cta.is-here::after{display:none}
.nav__cta{
  border:1px solid var(--ink); padding:.6rem 1.15rem !important; border-radius:999px;
  transition:background .35s,color .35s,border-color .35s;
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--ink); color:var(--paper) !important; border-color:var(--ink)}
.nav__burger{display:none; background:none; border:0; cursor:pointer; padding:.5rem; width:38px}
.nav__burger i{display:block; height:1px; background:var(--ink); margin:5px 0; transition:.3s var(--ease)}
.nav.is-menu .nav__burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.is-menu .nav__burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media (max-width:1100px){
  .nav__burger{display:block}
  .nav__links{
    position:fixed; inset:0; background:rgba(251,250,247,.98); backdrop-filter:blur(16px);
    flex-direction:column; justify-content:center; gap:2.4rem; z-index:-1;
    opacity:0; pointer-events:none; transition:opacity .4s;
  }
  .nav__links a{font-size:.8rem; letter-spacing:.17em}
  .nav.is-menu .nav__links{opacity:1; pointer-events:auto}
}

/* ═════════════ SHARED ═════════════ */
.eyebrow{
  font-family:var(--m); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; align-items:center; gap:.6rem; margin:0 0 1.8rem;
  text-align:left; -webkit-hyphens:manual; hyphens:manual;     /* a label, never justified */
}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--coral);animation:pulse 2s infinite;flex:none}
.eyebrow a{border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:.3s var(--ease)}
.eyebrow a:hover{color:var(--ink); border-color:var(--aqua)}
.sec{padding:clamp(5rem,11vw,9.5rem) var(--pad); position:relative}
.sec__idx{
  font-family:var(--m); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-mute); display:flex; align-items:center; gap:.75rem; margin:0 0 1.4rem;
}
.sec__idx i{display:block; width:42px; height:1px; background:var(--line-2)}
.sec__title{
  font-family:var(--d); font-weight:400; line-height:1; margin:0;
  font-size:clamp(2.4rem,6vw,4.6rem); letter-spacing:-.015em;
}
.sec__title em{font-style:italic; color:var(--aqua)}
.sec__note{color:var(--ink-soft); font-size:.98rem; margin:0; max-width:42ch; -webkit-hyphens:manual; hyphens:manual}
.sec__head{
  display:flex; gap:clamp(1.5rem,5vw,5rem); align-items:flex-end;
  justify-content:space-between; flex-wrap:wrap; margin-bottom:3.4rem;
  padding-bottom:1.8rem; border-bottom:1px solid var(--line);
}
.sec__head--c{
  flex-direction:column; align-items:center; text-align:center;
  border-bottom:0; padding-bottom:0;
}
.sec__head--c .sec__idx{justify-content:center}

.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:1rem 1.9rem; border-radius:999px;
  font-family:var(--m); font-size:.73rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid transparent; transition:.4s var(--ease); white-space:nowrap;
  background:none; cursor:pointer;
}
.btn--solid{background:var(--ink); color:var(--paper)}
.btn--solid:hover{background:var(--aqua); transform:translateY(-2px)}
.btn--line{border-color:var(--line-2); color:var(--ink)}
.btn--line:hover{border-color:var(--ink); background:#fff; transform:translateY(-2px)}

/* ═════════════ HERO ═════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:clamp(8.5rem,17vh,11rem) var(--pad) clamp(4.5rem,9vh,6rem);
  overflow:hidden;
}
/* the photograph runs off the top and right edges — no polite margins */
.hero__shot{
  position:absolute; top:-2%; right:-2%; width:64%; height:104%; margin:0; z-index:0;
  transition:transform .5s var(--ease); overflow:hidden;
}
/* the frames stop two pixels short of the shot's left edge, so the edge they
   are clipped at is never the very one the wash over them is clipped at */
.hero__reel{position:absolute; inset:0 0 0 2px; overflow:hidden}
.hero__frame{
  position:absolute; inset:0; background-size:cover; background-position:56% 46%;
  opacity:0; transition:opacity 1.6s var(--ease); transform:scale(1.06);
}
.hero__frame.on{opacity:1; animation:kb 9s ease-out both}
@keyframes kb{from{transform:scale(1.06) translate(0,0)} to{transform:scale(1.14) translate(-1.4%,-1%)}}
.hero__shot::after{
  content:''; position:absolute; inset:0;
  /* the wash leans five degrees, so on its own it thins out down the left
     edge and the photograph's edge shows there as a line — the first layer
     runs straight across and keeps that edge solid from top to bottom */
  background:
    linear-gradient(90deg, var(--paper) 0, var(--paper) 3px, rgba(251,250,247,0) 14%),
    linear-gradient(95deg,
      var(--paper) 0%, rgba(251,250,247,.96) 16%, rgba(251,250,247,.55) 34%, rgba(251,250,247,0) 62%);
}
.hero__type{position:relative; z-index:2; width:100%}
.hero__title{
  font-family:var(--d); font-weight:400; margin:0;
  font-size:clamp(3.2rem,12.5vw,11.5rem); line-height:.86; letter-spacing:-.035em;
}
.hero__title em{font-style:italic; color:var(--aqua)}
/* the line is a window its words rise into, and it has to be deep enough for
   the tail of the italic g — the margin gives the extra depth back */
.hero__title .ln{display:block; overflow:hidden; padding:.05em 0 .3em; margin-bottom:-.2em}
/* and a little air under the first line, so that tail clears the line below */
.hero__title .ln:first-child{margin-bottom:-.06em}
.hero__title .ln--push{margin-left:clamp(1.5rem,11vw,13rem)}
.hero__title .ln>*{display:inline-block; transform:translateY(140%); transition:transform 1.2s var(--ease)}
body.is-live .hero__title .ln>*{transform:none}
.hero__title .ln:nth-child(2)>*{transition-delay:.14s}
.hero__row{
  display:flex; gap:clamp(1.6rem,5vw,4rem); align-items:flex-end; flex-wrap:wrap;
  margin-top:clamp(2rem,5vh,3.4rem);
}
.hero__lede{max-width:32ch; color:var(--ink-soft); margin:0; font-size:1.02rem; text-align:left; -webkit-hyphens:manual; hyphens:manual}
.hero__acts{display:flex; gap:.8rem; flex-wrap:wrap}
/* the roll runs from vivid water to pale wash, so the caption carries its own
   ground rather than trusting whatever frame is underneath it */
.hero__cred{
  position:absolute; right:var(--pad); bottom:clamp(1.4rem,4vh,2.4rem); z-index:2; margin:0;
  display:flex; gap:.9rem; align-items:center; color:#fff; text-align:right;
  background:rgba(12,14,16,.44); backdrop-filter:blur(8px) saturate(1.2);
  padding:.5rem 1rem; border-radius:999px;
}
.hero__cred b{font-family:var(--d); font-weight:400; font-size:1rem}
.hero__dots{display:flex; gap:5px; align-items:center}
.hero__dots i{
  display:block; width:15px; height:2px; border-radius:1px;
  background:rgba(255,255,255,.4); transition:background .4s;
}
.hero__dots i.on{background:#fff}
.hero__dots i{cursor:pointer}
.hero__dots i:hover{background:rgba(255,255,255,.8)}
@media (max-width:900px){ .hero__dots{display:none} }
.hero__cred span{
  font-family:var(--m); font-size:.67rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
@media (max-width:900px){ .hero__cred{max-width:calc(100% - var(--pad) * 2)} }
.hero__cue{
  position:absolute; left:var(--pad); bottom:clamp(1.4rem,4vh,2.4rem); z-index:2;
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--m); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.hero__cue i{display:block; width:46px; height:1px; background:var(--line-2); position:relative; overflow:hidden}
.hero__cue i::after{content:''; position:absolute; inset:0; background:var(--aqua); animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* on a phone the photograph sits under the type rather than behind it —
   nothing legible should ever land on open water */
@media (max-width:900px){
  .hero{
    min-height:auto; padding:7.5rem 0 0; gap:2.6rem;
    justify-content:flex-start;
  }
  .hero__type{padding:0 var(--pad); order:-1}
  .hero__title .ln--push{margin-left:1.2rem}
  .hero__row{margin-top:2rem}
  .hero__shot{
    position:relative; top:auto; right:auto; width:100%; height:54vh;
    transform:none !important;
  }
  /* on a phone the wash comes down from the top, so that is the edge to keep clear of */
  .hero__reel{inset:2px 0 0}
  .hero__shot::after{background:linear-gradient(180deg,var(--paper) 0,var(--paper) 3px,rgba(251,250,247,0) 26%)}
  .hero__cue{display:none}
  .hero__cred{left:var(--pad); right:auto; bottom:1.2rem; text-align:left}
}

/* ═════════════ FILM STRIP ═════════════ */
.strip{
  background:#101215; padding:9px 0; overflow:hidden; position:relative;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6);
}
.strip__perf{
  height:16px;
  background-image:radial-gradient(#f3efe7 0 44%, transparent 46%);
  background-size:34px 16px; background-position:center; opacity:.9;
}
.strip__reel{
  display:flex; gap:8px; width:max-content; padding:9px 0;
  will-change:transform;                  /* moved by home.js */
}
.strip__reel i{
  display:block; width:clamp(110px,15vw,190px); aspect-ratio:3/2;
  background-size:cover; background-position:center;
  outline:2px solid #101215; filter:saturate(1.05);
  cursor:pointer; transition:filter .3s;
}
.strip__reel i:hover{filter:saturate(1.2) brightness(1.1)}
.strip__arrow{
  position:absolute; top:50%; z-index:2; width:44px; height:44px; margin-top:-22px;
  display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:rgba(16,18,21,.72); color:#f3efe7;
  box-shadow:0 0 0 1px rgba(243,239,231,.22);
  transition:background .25s, transform .25s;
}
.strip__arrow--prev{left:clamp(8px,2vw,24px)}
.strip__arrow--next{right:clamp(8px,2vw,24px)}
.strip__arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.strip__arrow:hover{background:var(--aqua); transform:scale(1.06)}
.strip__arrow:focus-visible{outline:2px solid var(--aqua); outline-offset:3px}

/* ═════════════ STATEMENT ═════════════ */
.say{
  padding:clamp(5rem,13vw,10rem) var(--pad) clamp(2rem,4vw,3.5rem); text-align:center;
  background:var(--paper); position:relative;
}
.say__k{
  font-family:var(--m); font-size:.75rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 1.4rem;
}
/* his own water, poured into the letters */
.say__big{
  font-family:var(--d); font-weight:400; font-style:italic; margin:0;
  font-size:clamp(3.2rem,15vw,13rem); line-height:.9; letter-spacing:-.04em;
  /* image set inline by js — cropped onto the water, where the colour is */
  background-size:135% auto; background-position:center 74%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .say__big{color:var(--aqua); -webkit-text-fill-color:var(--aqua)}
}
.say__sub{max-width:38ch; margin:2rem auto 0; color:var(--ink-soft)}
/* the photograph closes the statement, so New work picks up close beneath it */
.say + .follow{padding-top:clamp(2.5rem,5vw,4.5rem)}
.say__shot{margin:clamp(2.6rem,6vw,4rem) auto 0; max-width:58rem}
.say__shot img{
  width:100%; height:auto; border-radius:2px; background:var(--paper-3);
  box-shadow:0 34px 70px -42px rgba(21,23,27,.5);
}
.say__shot figcaption{
  margin-top:1.1rem; font-family:var(--d); font-style:italic;
  font-size:clamp(1.1rem,2.1vw,1.45rem); color:var(--aqua);
}

/* ═════════════ CURSOR RETICLE ═════════════ */
.reticle{
  position:fixed; top:0; left:0; z-index:860; pointer-events:none;
  width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  border:1px solid var(--ink-mute); opacity:0;
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease),
             opacity .3s, background .3s, border-color .3s;
  display:grid; place-items:center;
}
.reticle.on{opacity:1}
.reticle.big{
  width:78px; height:78px; margin:-39px 0 0 -39px;
  background:rgba(14,155,166,.9); border-color:transparent;
}
.reticle b{
  font-family:var(--m); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .25s;
}
.reticle.big b{opacity:1}
@media (hover:none){ .reticle{display:none} }

/* ═════════════ WORK ═════════════ */
/* Eleven outlined pills read as a broken grid the moment they wrap. As plain
   type they read as a line of text, and the one that is selected is the only
   thing carrying any weight. */
.filters{
  display:flex; gap:.35rem clamp(.6rem,2vw,1.5rem); flex-wrap:wrap;
  justify-content:center; margin:0 auto .9rem; max-width:62rem;
}

/* on a phone the categories are one row that slides, not four ragged ones */
@media (max-width:640px){
  .filters{
    flex-wrap:nowrap; justify-content:flex-start; gap:.4rem; overflow-x:auto;
    margin:0 calc(var(--pad) * -1) .5rem; padding:.5rem var(--pad);
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.6rem),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 2.6rem),transparent);
  }
  .filters::-webkit-scrollbar{display:none}
  .filters .chip{flex:none; border:1px solid var(--line-2)}
  .filters .chip.on{border-color:var(--ink)}
  .filters .chip::after{display:none}
  .filters--sub{padding-top:.5rem}
  .filters--sub::before{display:none}
  .filters--sub .chip.on{border-color:var(--aqua)}
  .filters__n{text-align:left !important}
}

/* the second level, only ever shown for a category that has one */
.filters--sub{
  margin-bottom:.9rem; padding-top:.9rem; position:relative;
  animation:subIn .45s var(--ease) both;
}
.filters--sub::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:28px; height:1px; background:var(--line-2);
}
.filters--sub{gap:.3rem clamp(.5rem,1.6vw,1.1rem)}
.filters--sub .chip{font-size:.67rem; padding:.45rem .7rem}
.filters--sub .chip.on{background:var(--aqua); color:#fff; box-shadow:0 6px 16px -10px rgba(14,155,166,.9)}
@keyframes subIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.filters__n{
  text-align:center; margin:0 0 2.4rem; font-family:var(--m); font-size:.67rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.chip{
  position:relative; background:none; border:0; border-radius:999px; cursor:pointer;
  padding:.55rem .8rem; font-family:var(--m); font-size:.7rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft); transition:color .3s var(--ease);
}
.chip::after{
  content:''; position:absolute; left:.8rem; right:.8rem; bottom:.3rem; height:1px;
  background:var(--ink-mute); transform:scaleX(0); transform-origin:center;
  transition:transform .35s var(--ease);
}
.chip:hover{color:var(--ink)}
.chip:hover::after{transform:scaleX(1)}
.chip.on{
  background:var(--ink); color:var(--paper);
  box-shadow:0 6px 18px -10px rgba(21,23,27,.6);
}
.chip.on::after{display:none}

.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px}
.tile{
  display:block; grid-column:span var(--c); aspect-ratio:var(--ar);
  position:relative; overflow:hidden; cursor:pointer; background:var(--paper-3);
  border-radius:2px; transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.tile__img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04);
  filter:saturate(0) brightness(1.55) contrast(.35) blur(7px); opacity:.35;
  transition:filter 1.6s var(--ease), opacity 1.6s var(--ease), transform 1s var(--ease);
}
.tile.dev .tile__img{filter:none; opacity:1}
.tile::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent 45%,rgba(21,23,27,.72) 100%);
  transition:opacity .45s;
}
.tile:hover::after{opacity:1}
.tile__cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem; z-index:2; color:#fff;
  transform:translateY(8px); opacity:0; transition:.5s var(--ease);
}
.tile__cap b{display:block; font-family:var(--d); font-size:1.12rem; font-weight:400; line-height:1.25}
.tile__cap span{
  font-family:var(--m); font-size:.67rem; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.75); display:block; margin-top:.35rem;
}
.tile__no{
  position:absolute; top:.8rem; left:1rem; z-index:2; font-family:var(--m);
  font-size:.67rem; letter-spacing:.09em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-6px); transition:.45s var(--ease);
}
.tile__ph{
  position:absolute; right:.85rem; top:.8rem; z-index:2; font-family:var(--m);
  font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.55); border-radius:3px; padding:.2rem .42rem;
  opacity:0; transition:.45s var(--ease);
}
.tile:not(.is-ph) .tile__ph{display:none}
.tile:hover .tile__cap,.tile:hover .tile__no,.tile:hover .tile__ph{transform:none; opacity:1}
.tile:hover .tile__img{transform:scale(1.09)}
.tile.hide{display:none}

/* a coming-soon series: a card with no page behind it, so it does not act
   like a link — the caption is always up and the photo does not zoom on
   hover (this holds it at its resting scale(1.04), overriding the 1.09
   hover zoom other tiles get) */
.tile--soon{cursor:default}
.tile--soon::after{opacity:1}
.tile--soon .tile__cap{transform:none; opacity:1}
.tile--soon:hover .tile__img{transform:scale(1.04)}
.tile__soon{
  position:absolute; right:.85rem; top:.8rem; z-index:2; font-family:var(--m);
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:var(--paper); border-radius:3px; padding:.3rem .5rem;
}
.grid.is-filtered .tile{grid-column:span 6; aspect-ratio:3/2}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(6,1fr); gap:12px}
  .tile{grid-column:span var(--c6); aspect-ratio:var(--ar6)}
  .grid.is-filtered .tile{grid-column:span 3; aspect-ratio:3/2}
}
/* every cover is a landscape frame, so a tall card here kept only its middle
   half — on Two at Sundown, one of the two women. Cards take the photo's
   own shape instead and show all of it. */
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .tile,.grid.is-filtered .tile{grid-column:span 1; aspect-ratio:3/2}
}

/* ═════════════ STUDIO ═════════════ */
.studio{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem);
  align-items:center; background:var(--paper-2);
}
.studio__media{position:relative}
.frame{
  aspect-ratio:4/5; background:var(--paper-3); background-size:cover; background-position:center;
  border-radius:2px; box-shadow:0 30px 60px -36px rgba(21,23,27,.45);
}
.studio__badge{
  position:absolute; right:-5%; bottom:-5%; width:clamp(94px,12vw,132px); aspect-ratio:1;
  background:var(--paper); border-radius:50%; display:grid; place-items:center; color:var(--aqua);
  text-align:center; box-shadow:0 12px 30px -18px rgba(21,23,27,.4);
}
.studio__badge svg{position:absolute; inset:7px; animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.studio__badge span{
  font-family:var(--m); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); line-height:1.7;
}
.studio__badge b{font-family:var(--d); font-size:1.45rem; color:var(--ink); letter-spacing:0}
.studio__body p{color:var(--ink-soft); max-width:46ch}
.studio__body .sec__title{margin-bottom:1.6rem}
.stats{display:flex; gap:clamp(1.6rem,4vw,3.2rem); list-style:none; padding:0; margin:2.6rem 0 0; flex-wrap:wrap}
.stats b{
  display:block; font-family:var(--d); font-size:clamp(1.9rem,4vw,2.8rem); font-weight:400;
  font-variant-numeric:tabular-nums;
}
.stats span{font-family:var(--m); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)}
.sig{margin-top:2.2rem !important; line-height:0}
/* his signature, inked in the studio's aqua */
.sig__mark{
  display:inline-block; height:clamp(64px,6vw,84px); aspect-ratio:586/378; background:var(--aqua);
  -webkit-mask:url(../photos/signature.png) left center/contain no-repeat;
          mask:url(../photos/signature.png) left center/contain no-repeat;
}
.more{
  display:inline-flex; align-items:center; gap:.7rem; margin-top:1.6rem;
  font-family:var(--m); font-size:.71rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-soft); transition:color .3s;
}
.more i{display:block; width:30px; height:1px; background:var(--line-2); transition:width .35s var(--ease), background .3s}
.more:hover{color:var(--ink)}
.more:hover i{width:46px; background:var(--aqua)}
@media (max-width:880px){ .studio{grid-template-columns:1fr} .studio__badge{right:4%} }

/* ═════════════ SESSIONS ═════════════ */
/* one full-bleed block of his own water, so the page isn't all wall */
.sessions{
  background:linear-gradient(165deg,#12a3ae 0%,#0b7f92 55%,#08657a 100%);
  color:#fff; overflow:hidden;
}
.sessions::before{
  content:''; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background:
    radial-gradient(60% 40% at 15% 10%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(50% 40% at 85% 90%, rgba(255,255,255,.22), transparent 60%);
}
.sessions>*{position:relative; z-index:1}
.sessions .sec__idx{color:rgba(255,255,255,.7)}
.sessions .sec__idx i{background:rgba(255,255,255,.45)}
.sessions .sec__title em{color:#c9f4f6}
.sessions .sec__note{color:rgba(255,255,255,.82)}
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1160px; margin:3.4rem auto 0}
.tier{
  border:1px solid var(--line); border-radius:4px; padding:2.2rem 1.9rem 2rem;
  background:#fff; color:var(--ink); position:relative; transition:.5s var(--ease);
}
.tier:hover{transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(3,50,60,.55)}
.tier.is-pick{border-color:transparent; box-shadow:0 24px 50px -28px rgba(3,50,60,.5)}
.tier__flag{
  position:absolute; top:0; right:0; background:var(--coral); color:#fff;
  font-family:var(--m); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:0 4px 0 4px;
}
.tier__ap{width:48px; height:48px; margin-bottom:1.4rem; color:var(--aqua); display:block}
.tier h4{font-family:var(--d); font-weight:400; font-size:1.85rem; margin:0 0 .3rem}
.tier__sub{font-family:var(--m); font-size:.67rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 1.6rem}
.tier__price{font-family:var(--d); font-size:2.4rem; line-height:1; margin:0 0 1.6rem}
.tier__price small{font-family:var(--m); font-size:.67rem; letter-spacing:.09em; color:var(--ink-mute); display:block; margin-top:.5rem}
.tier ul{list-style:none; padding:0; margin:0 0 2rem; font-size:.9rem; color:var(--ink-soft)}
.tier li{padding:.55rem 0 .55rem 1.4rem; border-bottom:1px solid var(--line); position:relative}
.tier li::before{content:''; position:absolute; left:0; top:1.05rem; width:6px; height:6px; border:1px solid var(--aqua); border-radius:50%}
.tier .btn{width:100%; justify-content:center}
@media (max-width:900px){ .tiers{grid-template-columns:1fr; max-width:30rem} }

/* ═════════════ NEW WORK ═════════════ */
.drops{list-style:none; margin:0 0 clamp(3rem,7vw,5rem); padding:0; border-top:1px solid var(--line)}
.drop{border-bottom:1px solid var(--line)}
.drop a{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2.4rem);
  align-items:center; padding:1.05rem .8rem; transition:background .35s var(--ease);
}
.drop a:hover{background:var(--paper-2)}
.drop__img{
  width:clamp(78px,10vw,136px); aspect-ratio:3/2; background-size:cover; background-position:center;
  border-radius:2px; transition:transform .45s var(--ease);
}
.drop a:hover .drop__img{transform:scale(1.05)}
.drop__t{display:block; font-family:var(--d); font-weight:400; font-size:clamp(1.1rem,2.3vw,1.55rem); margin:0; line-height:1.2}
.drop__c{
  display:block; font-family:var(--m); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); margin:.4rem 0 0;
}
.drop__d{
  font-family:var(--m); font-size:.69rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-mute); white-space:nowrap; text-align:right;
}
.drop__new{
  display:inline-block; margin-left:.65rem; background:var(--coral); color:#fff;
  padding:.18rem .45rem; border-radius:2px; font-size:.61rem; letter-spacing:.08em;
}
@media (max-width:640px){
  .drop a{grid-template-columns:auto 1fr; row-gap:.5rem}
  .drop__d{grid-column:2; text-align:left}
}

/* ═════════════ NOTIFY ═════════════ */
/* the loudest object on the page, because it is the point of the page */
.notify{
  background:var(--ink); color:var(--paper); border-radius:6px;
  padding:clamp(1.8rem,4.5vw,3.2rem); display:grid; gap:1.5rem clamp(1.5rem,4vw,3rem);
  grid-template-columns:1fr minmax(300px,.85fr); align-items:center;
  box-shadow:0 40px 80px -48px rgba(21,23,27,.75);
}
.notify__say h4{font-family:var(--d); font-weight:400; font-size:clamp(1.5rem,3.2vw,2.3rem); margin:0 0 .7rem; line-height:1.1}
.notify__say p{margin:0; color:rgba(242,239,232,.62); max-width:42ch; font-size:.94rem}
.notify__field{display:flex; gap:.6rem; flex-wrap:wrap}
.notify__field input{
  flex:1 1 180px; min-width:0; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:.95rem 1.3rem; color:#fff; outline:none; transition:.3s var(--ease);
}
.notify__field input::placeholder{color:rgba(255,255,255,.32)}
.notify__field input:focus{border-color:var(--aqua); background:rgba(255,255,255,.1)}
.notify__field button{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer; white-space:nowrap;
  background:var(--aqua); color:#fff; border:0; border-radius:999px; padding:.95rem 1.5rem;
  font-family:var(--m); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  transition:.35s var(--ease);
}
.notify__field button:hover{background:var(--paper); color:var(--ink)}
.notify__ring{width:16px; height:16px; border-radius:50%; border:1px solid currentColor; display:grid; place-items:center}
.notify__ring i{width:6px; height:6px; border-radius:50%; background:currentColor}
.notify__meta{
  grid-column:1/-1; margin:0; font-family:var(--m); font-size:.67rem; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(242,239,232,.42); transition:color .4s;
}
.notify.ok .notify__field{display:none}
.notify.ok .notify__meta{color:var(--aqua)}
@media (max-width:820px){ .notify{grid-template-columns:1fr} }

.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ═════════════ ENQUIRIES ═════════════ */
.reach{background:var(--paper-2)}
.reach__row{
  display:flex; gap:clamp(2rem,6vw,5rem); flex-wrap:wrap;
  align-items:flex-start; justify-content:space-between;
}
.reach__list{list-style:none; padding:0; margin:0; flex:1 1 21rem; max-width:30rem}
.reach__list li{
  display:flex; gap:1.4rem; align-items:baseline; padding:.85rem 0;
  border-top:1px solid var(--line-2); font-size:.95rem; color:var(--ink-soft);
}
.reach__list span{
  font-family:var(--m); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); width:4.2rem; flex:none;
}
.reach__list a{overflow-wrap:anywhere}
.reach__list a:hover{color:var(--aqua)}
.reach__note{margin:2.4rem 0 0; color:var(--ink-soft); max-width:48ch}

/* ═════════════ A SERIES ═════════════ */
.p{
  position:relative; min-height:min(86svh,760px); display:flex; align-items:flex-end;
  padding:8rem var(--pad) clamp(2.5rem,6vw,4.5rem); overflow:hidden;
}
.p__cover{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:kb 36s ease-in-out infinite alternate;
}
.p__cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(8,10,12,.42) 0%,rgba(8,10,12,.06) 30%,
                             rgba(8,10,12,.5) 74%,rgba(8,10,12,.82) 100%);
}
.p__head{position:relative; z-index:2; color:#fff; max-width:54rem; text-shadow:0 2px 26px rgba(0,0,0,.5)}

/* the cover runs under the nav, so the nav goes white until it sticks */
body[data-page="project"] .nav:not(.is-stuck):not(.is-menu) .nav__brand,
body[data-page="project"] .nav:not(.is-stuck):not(.is-menu) .nav__links a{color:#fff}
body[data-page="project"] .nav:not(.is-stuck):not(.is-menu) .nav__brand img{
  filter:invert(1) drop-shadow(0 1px 10px rgba(0,0,0,.45));
}
body[data-page="project"] .nav:not(.is-stuck):not(.is-menu) .nav__cta{border-color:rgba(255,255,255,.55)}
body[data-page="project"] .nav:not(.is-stuck):not(.is-menu) .nav__cta:hover{
  background:#fff; color:var(--ink) !important; border-color:#fff;
}
body[data-page="project"] .nav:not(.is-menu) .nav__burger i{background:#fff}
body[data-page="project"] .nav.is-stuck .nav__burger i{background:var(--ink)}
.p__back{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.8rem;
  font-family:var(--m); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.82); transition:color .3s;
}
.p__back i{display:block; width:26px; height:1px; background:currentColor; transition:width .35s var(--ease)}
.p__back:hover{color:#fff}
.p__back:hover i{width:40px}
.p__cat{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:0 0 .9rem;
  font-family:var(--m); font-size:.71rem; letter-spacing:.15em; text-transform:uppercase;
  color:#8ce4ea;
}
.p__cat em{font-style:normal; color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums}
.p__cat i{display:block; width:26px; height:1px; background:rgba(255,255,255,.4)}
.p__title{
  font-family:var(--d); font-weight:400; margin:0;
  font-size:clamp(2.5rem,8vw,6.2rem); line-height:.92; letter-spacing:-.03em;
}
.p__lede{max-width:46ch; margin:1.4rem 0 0; color:rgba(255,255,255,.9); font-size:1.05rem}

.p__facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.6rem,3.5vw,2.4rem) var(--pad); border-bottom:1px solid var(--line);
}
.p__facts div{display:flex; flex-direction:column; gap:.4rem}
.p__facts span{
  font-family:var(--m); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-mute);
}
.p__facts b{font-family:var(--d); font-weight:400; font-size:clamp(.95rem,1.7vw,1.2rem)}
@media (max-width:700px){ .p__facts{grid-template-columns:repeat(2,1fr); row-gap:1.4rem} }

.p__story{
  padding:clamp(3rem,7vw,5.5rem) var(--pad); max-width:64rem; margin-inline:auto;
  color:var(--ink-soft);
}
.p__story p{margin:0 0 1.3rem; max-width:62ch}
.p__story p:first-child{font-size:clamp(1.05rem,2.1vw,1.3rem); color:var(--ink); line-height:1.55}

.p__frames{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(10px,1.7vw,22px);
  padding:0 var(--pad) clamp(3rem,7vw,5rem);
}
.shot{margin:0; cursor:pointer; grid-column:span 1}
.shot--full{grid-column:1/-1}
.shot:focus-visible{outline:2px solid var(--aqua); outline-offset:6px}
.shot__img{
  display:block; width:100%; aspect-ratio:var(--ar); border-radius:2px;
  background-size:cover; background-position:center; background-color:var(--paper-3);
  filter:saturate(0) brightness(1.55) contrast(.35) blur(7px); opacity:.35;
  transition:filter 1.6s var(--ease), opacity 1.6s var(--ease), transform .6s var(--ease);
}
.shot.dev .shot__img{filter:none; opacity:1}
.shot:hover .shot__img{transform:scale(1.012)}
.shot figcaption{
  display:flex; gap:.9rem; align-items:baseline; flex-wrap:wrap; padding:.75rem .1rem 0;
}
.shot figcaption b{font-family:var(--d); font-weight:400; font-size:1rem}
.shot figcaption span{
  font-family:var(--m); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute);
}
@media (max-width:640px){ .p__frames{grid-template-columns:1fr} }

.p__turn{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
}
.turn{
  display:flex; gap:1.2rem; align-items:center; background:var(--paper);
  padding:clamp(1.4rem,3vw,2.2rem) var(--pad); transition:background .4s var(--ease);
}
.turn:hover{background:var(--paper-2)}
.turn--next{flex-direction:row-reverse; text-align:right}
.turn__img{
  width:clamp(64px,8vw,112px); aspect-ratio:3/2; flex:none; border-radius:2px;
  background-size:cover; background-position:center; transition:transform .45s var(--ease);
}
.turn:hover .turn__img{transform:scale(1.05)}
.turn__k{
  display:block; font-family:var(--m); font-size:.65rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:.4rem;
}
.turn b{display:block; font-family:var(--d); font-weight:400; font-size:clamp(1.05rem,2.1vw,1.4rem)}
.turn__c{
  display:block; font-family:var(--m); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); margin-top:.35rem;
}
@media (max-width:700px){
  .p__turn{grid-template-columns:1fr}
  .turn--next{flex-direction:row; text-align:left}
}

.p__tail{
  background:linear-gradient(165deg,#12a3ae 0%,#0b7f92 60%,#08657a 100%);
  color:#fff; text-align:center; padding:clamp(3.5rem,8vw,6rem) var(--pad);
}
.p__tail h2{font-family:var(--d); font-weight:400; font-size:clamp(1.8rem,4.4vw,3rem); margin:0 0 .7rem}
.p__tail p{margin:0 0 2rem; color:rgba(255,255,255,.82)}
.p__tail .btn--solid{background:#fff; color:var(--ink)}
.p__tail .btn--solid:hover{background:rgba(255,255,255,.85); color:var(--ink)}

/* ═════════════ THE STUDIO ═════════════ */
.ab{padding:clamp(6.5rem,13vh,11rem) var(--pad) clamp(2.5rem,6vw,4rem); max-width:70rem}
.ab__lead{display:grid; gap:clamp(2.2rem,5vw,3.5rem)}
.ab__leadTxt{min-width:0}
/* the same mono-key/serif-value block the series pages wear under their
   covers, stood upright to fill the space beside the headline */
.ab__figs{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem}
.ab__figs li{
  display:flex; flex-direction:column; gap:.4rem;
  padding-top:.85rem; border-top:1px solid var(--line);
}
.ab__figs span{
  font-family:var(--m); font-size:.65rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-mute);
}
.ab__figs b{
  font-family:var(--d); font-weight:400; line-height:1; font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,3vw,2.3rem);
}
@media (min-width:1000px){
  .ab{max-width:88rem}
  .ab__lead{grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(3rem,7vw,6rem)}
  .ab__leadTxt{max-width:42rem}   /* "mostly outdoors." needs 625px at 96px — 38rem broke it over three lines */
  /* only once they have a rail of their own do they stand upright; at any
     narrower width three full-bleed bands read as stark rules across the page */
  .ab__figs{grid-template-columns:1fr; gap:1.05rem; min-width:11rem}
}
.ab__title{
  font-family:var(--d); font-weight:400; margin:.6rem 0 0;
  font-size:clamp(2.6rem,8vw,6rem); line-height:.94; letter-spacing:-.03em;
}
.ab__title em{font-style:italic; color:var(--aqua)}
.ab__lede{max-width:46ch; margin:1.8rem 0 0; color:var(--ink-soft); font-size:clamp(1rem,2vw,1.2rem)}

.ab__intro{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5rem); align-items:start;
  padding:clamp(2rem,5vw,4rem) var(--pad) clamp(3rem,7vw,5rem);
}
.ab__portrait{margin:0; position:sticky; top:7rem}
.ab__portraitImg{
  aspect-ratio:4/5; border-radius:2px; background-size:cover; background-position:center;
  background-color:var(--paper-3); box-shadow:0 30px 60px -38px rgba(21,23,27,.45);
}
.ab__portrait figcaption{display:flex; gap:.8rem; align-items:baseline; flex-wrap:wrap; padding-top:.8rem}
.ab__portrait b{font-family:var(--d); font-weight:400; font-size:1rem}
.ab__portrait span{
  font-family:var(--m); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute);
}
/* one size, one colour, top to bottom — the story is one voice, not a
   lede and then the small print */
.ab__text p{
  margin:0 0 1.5rem; max-width:62ch; color:var(--ink-soft);
  font-size:clamp(1rem,1.9vw,1.1rem); line-height:1.72;
}
@media (max-width:860px){
  .ab__intro{grid-template-columns:1fr}
  .ab__portrait{position:static; max-width:24rem}
}

.ab__band{margin:0; padding:0 0 clamp(2.5rem,6vw,4rem)}
.ab__bandImg{
  width:100%; aspect-ratio:21/9; background-size:cover; background-position:center 55%;
  background-color:var(--paper-3);
}
.ab__band figcaption{
  padding:.8rem var(--pad) 0; font-family:var(--m); font-size:.65rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
}

.ab__how{padding:clamp(3rem,7vw,5.5rem) var(--pad); background:var(--paper-2)}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2)}
.steps li{background:var(--paper-2); padding:2rem clamp(1.2rem,2.5vw,2rem)}
.steps__n{
  display:block; font-family:var(--m); font-size:.71rem; letter-spacing:.15em;
  color:var(--aqua); margin-bottom:1.4rem; font-variant-numeric:tabular-nums;
}
.steps h3{font-family:var(--d); font-weight:400; font-size:clamp(1.4rem,2.8vw,1.9rem); margin:0 0 .8rem}
.steps p{margin:0; color:var(--ink-soft); font-size:.94rem}
@media (max-width:820px){ .steps{grid-template-columns:1fr} }

.ab__kit{padding:clamp(3rem,7vw,5.5rem) var(--pad)}
.kit{margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(2rem,5vw,4rem)}
.kit div{
  display:grid; grid-template-columns:7rem 1fr; gap:1.2rem; align-items:baseline;
  padding:1.05rem 0; border-top:1px solid var(--line);
}
.kit dt{
  font-family:var(--m); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.kit dd{margin:0; color:var(--ink-soft); font-size:.95rem}
@media (max-width:820px){ .kit{grid-template-columns:1fr} .kit div{grid-template-columns:5.5rem 1fr; gap:.9rem} }

.quote{padding:clamp(3.5rem,9vw,7rem) var(--pad); text-align:center; background:var(--paper-2)}
.quote blockquote{
  margin:0 auto; max-width:24ch; font-family:var(--d); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,5vw,3.2rem); line-height:1.15; letter-spacing:-.02em;
}
.quote blockquote::before{
  content:''; display:block; width:34px; height:1px; background:var(--aqua); margin:0 auto 2rem;
}

.ab__tl{padding:clamp(3rem,7vw,5.5rem) var(--pad)}
.tl{list-style:none; margin:0; padding:0; max-width:52rem}
.tl li{
  display:grid; grid-template-columns:5.5rem 1fr; gap:clamp(1rem,3vw,2.4rem); align-items:baseline;
  padding:1.05rem 0; border-top:1px solid var(--line);
}
.tl b{
  font-family:var(--m); font-size:.75rem; letter-spacing:.11em; color:var(--aqua);
  font-weight:500; font-variant-numeric:tabular-nums;
}
.tl span{color:var(--ink-soft); font-size:.98rem}
@media (max-width:600px){ .tl li{grid-template-columns:1fr; gap:.35rem} }

.ab__acts{display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap}
.btn--onDark{border-color:rgba(255,255,255,.5); color:#fff}
.btn--onDark:hover{border-color:#fff; background:rgba(255,255,255,.12); color:#fff}

/* ═════════════ FOOTER ═════════════ */
.foot{
  border-top:1px solid var(--line); padding:3.2rem var(--pad) 2.2rem;
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between;
}
.foot__mark{line-height:0}
.foot__logo{height:clamp(56px,5vw,72px); width:auto}
.foot__nav{display:flex; flex-wrap:wrap; gap:.8rem 1.6rem}
.foot__nav a{font-family:var(--m); font-size:.69rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)}
.foot__nav a:hover{color:var(--ink)}
.foot__now{
  width:100%; margin:0; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--m); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-mute); order:-1;
}
.foot__now i{width:6px; height:6px; border-radius:50%; background:var(--aqua); flex:none; animation:pulse 2.4s infinite}
.foot__now b{color:var(--ink); font-weight:400}
.foot__fine{
  width:100%; margin:1.4rem 0 0; padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--m); font-size:.66rem; letter-spacing:.08em; color:var(--ink-mute);
}

/* ═════════════ LOUPE ═════════════ */
.loupe{
  position:fixed; inset:0; z-index:950; background:rgba(251,250,247,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
  padding:4.5rem 1.5rem 1.5rem; opacity:0; pointer-events:none; transition:opacity .4s;
}
.loupe.on{opacity:1; pointer-events:auto}
.loupe__fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem}
.loupe__img{
  width:min(92vw,1080px); height:min(62vh,700px); background-size:contain;
  background-repeat:no-repeat; background-position:center;
  transform:scale(.96); opacity:0; transition:.55s var(--ease);
  filter:drop-shadow(0 24px 44px rgba(21,23,27,.28));
}
.loupe.on .loupe__img{transform:none; opacity:1}
.loupe figcaption{text-align:center}
.loupe figcaption b{font-family:var(--d); font-weight:400; font-size:1.25rem; display:block}
.loupe figcaption span{
  font-family:var(--m); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.loupe__idx{
  position:absolute; top:26px; left:50%; transform:translateX(-50%);
  font-family:var(--m); font-size:.7rem; letter-spacing:.14em; color:var(--ink-mute);
  font-variant-numeric:tabular-nums;
}
.loupe__idx b{color:var(--ink); font-weight:500}
.loupe__hint{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--m); font-size:.63rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-mute); opacity:.7;
}
@media (max-width:640px){ .loupe__hint{display:none} }
.loupe__x,.loupe__nav{
  position:absolute; background:#fff; border:1px solid var(--line-2); border-radius:50%;
  width:44px; height:44px; cursor:pointer; transition:.3s var(--ease);
}
.loupe__x:hover,.loupe__nav:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.loupe__x{top:20px; right:20px; font-size:.85rem}
.loupe__nav{top:50%; transform:translateY(-50%); font-size:1.4rem; line-height:0}
.loupe__nav--p{left:20px} .loupe__nav--n{right:20px}
.loupe__strip{display:flex; gap:8px; overflow-x:auto; max-width:min(92vw,1080px); padding-bottom:.4rem}
.loupe__strip::-webkit-scrollbar{height:3px}
.loupe__strip::-webkit-scrollbar-thumb{background:var(--line-2)}
.loupe__strip i{
  width:64px; height:44px; flex:none; background-size:cover; background-position:center;
  cursor:pointer; opacity:.45; transition:.3s; outline:1px solid transparent; outline-offset:2px;
}
.loupe__strip i.on{opacity:1; outline-color:var(--aqua)}
@media (max-width:640px){ .loupe__nav{display:none} }

/* ═════════════ STRIP PICKER ═════════════ */
.pick{
  position:fixed; inset:0; z-index:960; display:grid; place-items:center; padding:1.25rem;
  background:rgba(16,18,21,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s var(--ease);
}
.pick.on{opacity:1}
.pick:not(.on){pointer-events:none}
.pick__card{
  width:min(100%,34rem); background:var(--paper); border-radius:6px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.98); transition:transform .5s var(--ease);
}
.pick.on .pick__card{transform:none}
.pick__img{aspect-ratio:3/2; max-height:48vh; width:100%; background-size:cover; background-position:center; background-color:#1b1e22}
.pick__body{padding:1.3rem clamp(1.2rem,4vw,1.7rem) 1.6rem}
.pick__k,.pick__c{
  margin:0; font-family:var(--m); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute);
}
.pick__k{color:var(--aqua)}
.pick__t{font-family:var(--d); font-weight:400; font-size:clamp(1.35rem,3.4vw,1.8rem); line-height:1.12; margin:.45rem 0 .35rem}
.pick__acts{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.4rem}
.pick__acts .btn{flex:1 1 9rem; justify-content:center}

/* ═════════════ BACK PILL ═════════════ */
/* one tap from the whole body of work, wherever the reader is in a series.
   It sits above the HUD readout, which owns the bottom edge of the frame */
.p__pill{
  position:fixed; z-index:810; left:clamp(14px,3.4vw,48px);
  bottom:calc(44px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:.7rem; padding:.8rem 1.25rem .8rem 1.05rem;
  border-radius:999px; border:1px solid var(--line-2);
  background:rgba(251,250,247,.9); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 18px 40px -22px rgba(21,23,27,.55);
  font-family:var(--m); font-size:.71rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  opacity:0; transform:translateY(12px);
  transition:opacity .6s var(--ease) .5s, transform .6s var(--ease) .5s, background .3s, color .3s, border-color .3s;
}
body.is-live .p__pill{opacity:1; transform:none}
.p__pill span{font-size:.9rem; letter-spacing:0; line-height:1; transition:transform .35s var(--ease)}
.p__pill:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.p__pill:hover span{transform:translateX(-3px)}

/* ═════════════ THE ASK ═════════════ */
.ask{
  position:fixed; inset:0; z-index:970; display:grid; place-items:center; padding:1.25rem;
  background:rgba(16,18,21,.5); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; transition:opacity .35s var(--ease);
}
.ask.on{opacity:1}
.ask:not(.on){pointer-events:none}      /* fading out must not catch clicks */
.ask__card{
  position:relative; width:min(100%,31rem); background:var(--ink); color:var(--paper);
  border-radius:6px; padding:clamp(1.8rem,5vw,2.6rem);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
  transform:translateY(16px) scale(.98); transition:transform .5s var(--ease);
}
.ask.on .ask__card{transform:none}
.ask__x{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:none; color:rgba(255,255,255,.7);
  cursor:pointer; font-size:.75rem; transition:.3s var(--ease);
}
.ask__x:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.ask__k{
  display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem;
  font-family:var(--m); font-size:.67rem; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(242,239,232,.5);
}
.ask__k i{width:6px; height:6px; border-radius:50%; background:var(--aqua); flex:none}
.ask__t{font-family:var(--d); font-weight:400; font-size:clamp(1.6rem,4.6vw,2.25rem); line-height:1.08; margin:0 0 .8rem; padding-right:2rem}
.ask__p{margin:0 0 1.5rem; color:rgba(242,239,232,.62); font-size:.94rem}
.ask__form .notify__meta{margin-top:.95rem}
.ask__card.ok .notify__field{display:none}
.ask__card.ok .notify__meta{color:var(--aqua); font-size:.71rem}
.ask__no{
  margin-top:1.2rem; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.22);
  padding:.25rem 0; cursor:pointer; font-family:var(--m); font-size:.67rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(242,239,232,.55); transition:color .3s, border-color .3s;
}
.ask__no:hover{color:#fff; border-color:#fff}

/* ═════════════ COMING SOON ═════════════ */
.evs{padding:0 var(--pad) clamp(4rem,9vw,7rem)}
.ev__list{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2.4rem);
}
.ev{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden}
.ev__img{position:relative; aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--paper-3)}
.ev__date{
  position:absolute; top:1rem; left:1rem; min-width:3.6rem; padding:.6rem .75rem .55rem;
  background:var(--paper); border-radius:3px; text-align:center; line-height:1;
  box-shadow:0 12px 28px -16px rgba(21,23,27,.6);
}
.ev__date b{display:block; font-family:var(--d); font-weight:400; font-size:1.75rem}
.ev__date span{
  display:block; margin-top:.35rem; font-family:var(--m); font-size:.63rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-mute);
}
.ev__body{display:flex; flex-direction:column; flex:1; padding:1.4rem clamp(1.2rem,2.6vw,1.8rem) 1.7rem}
.ev__k{margin:0; font-family:var(--m); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua)}
.ev__t{font-family:var(--d); font-weight:400; font-size:clamp(1.45rem,2.8vw,1.95rem); line-height:1.1; margin:.55rem 0 .4rem}
.ev__when{margin:0; font-family:var(--m); font-size:.67rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute)}
.ev__line{flex:1; margin:.9rem 0 1.4rem; max-width:48ch; color:var(--ink-soft); font-size:.95rem}
.ev .btn{align-self:flex-start}
.ev__none{max-width:60rem}
.ev__none > p{margin:1.2rem 0 2.2rem; max-width:44ch; color:var(--ink-soft)}
@media (max-width:760px){ .ev__list{grid-template-columns:1fr} }

/* ═════════════ REVEAL ═════════════ */
.rv{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ═════════════ OCTOBER ═════════════
   Breast Cancer Awareness Month. season.js puts .pink on <html> for the
   month; only the lens and the hero change colour, and the film strip's
   sprocket holes become ribbons. Everything else keeps the studio's aqua. */
.pink .lens,.pink .hero{--aqua:#e0457b}
/* the hero's wall goes blush, and the photograph fades into that instead */
.pink .hero{background:#f9dbe6}
.pink .hero__shot::after{
  background:
    linear-gradient(90deg, #f9dbe6 0, #f9dbe6 3px, rgba(249,219,230,0) 14%),
    linear-gradient(95deg,
      #f9dbe6 0%, rgba(249,219,230,.96) 16%, rgba(249,219,230,.55) 34%, rgba(249,219,230,0) 62%);
}
@media (max-width:900px){
  .pink .hero__shot::after{background:linear-gradient(180deg,#f9dbe6 0,#f9dbe6 3px,rgba(249,219,230,0) 26%)}
}
.pink #barrelGrad stop:nth-child(1){stop-color:#f6a5c2}
.pink #barrelGrad stop:nth-child(2){stop-color:#dc5088}
.pink #barrelGrad stop:nth-child(3){stop-color:#8c2452}
.pink #glassGrad stop:nth-child(1){stop-color:#5c3346}
.pink #glassGrad stop:nth-child(2){stop-color:#2c1320}
.pink #glassGrad stop:nth-child(3){stop-color:#0c0509}
.pink .lens__ring{fill:#2a121d}
.pink .lens__coat{fill:#ff8fb8}
.pink .lens__index{fill:#fff}
.pink .lens__openRing::before{box-shadow:0 0 18px 3px rgba(224,69,123,.55)}
.pink .lens__openRing::after{border-color:rgba(255,143,184,.45)}

/* the menu bar too — its wash over the hero, its frosted ground once it
   sticks, and the phone menu it opens */
.pink .nav{--aqua:#e0457b}
.pink .nav::before{background:rgba(249,219,230,.88); box-shadow:0 1px 0 #ecc3d2}
.pink body[data-page="home"] .nav:not(.is-stuck):not(.is-menu)::before{
  background:linear-gradient(180deg, rgba(249,219,230,.94) 0%, rgba(249,219,230,.82) 62%, rgba(249,219,230,0) 100%);
  box-shadow:none;
}
@media (max-width:1100px){ .pink .nav__links{background:rgba(249,219,230,.98)} }

/* the sprocket holes down the film are ribbons */
.pink .strip__perf{
  height:22px; opacity:1; background-size:34px 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 68' fill='none' stroke-width='8' stroke-linejoin='round'%3E%3Cpath stroke='%23c53a72' d='M24 6C16 6 10 15 16 26L36 62'/%3E%3Cpath stroke='%23f0679a' d='M12 62L32 26C38 15 32 6 24 6'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
}