/* =====================================================================
   Richard Black Studio — main.css
   Matches the existing site (Reinar theme): Karla body, Didact Gothic
   headings, gold #f2d87c accent, solid dark centered-logo header,
   white / #f7f7f7 sections, square buttons. Photography-first. No blue.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Great+Vibes&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&family=Didact+Gothic&family=Karla:wght@400;500;600;700&display=swap");

:root {
  --ink:#0d0d0d; --ink-2:#212121;
  --paper:#fff;
  --text:#3a332f; --text-soft:#726a64; --text-mute:#8f857e;
  --gray-50:#faf8f6; --gray-100:#f7f4f1; --gray-200:#ece7e2; --gray-300:#e2dbd4; --gray-400:#cdc4bb;
  --line:#e6e6e6; --line-dark:#2a2a2a;

  --accent:#d31145;           /* Richard Black Studio brand red — sampled from the studio's monogram */
  --accent-deep:#a90d38;
  --accent-ink:#fff;          /* text on red */

  --maxw:1280px; --gutter:clamp(1.1rem,4vw,3rem);
  --header-h:88px;            /* matches .site-header .container min-height */
  --header-h-sm:64px;

  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --display:"Didact Gothic","Karla","Helvetica Neue",Arial,sans-serif;

  --step--1:clamp(.78rem,.74rem + .2vw,.84rem);
  --step-0:clamp(.95rem,.92rem + .2vw,1rem);
  --step-1:clamp(1.05rem,1rem + .4vw,1.2rem);
  --step-2:clamp(1.35rem,1.15rem + 1vw,1.9rem);
  --step-3:clamp(1.7rem,1.35rem + 1.9vw,2.6rem);
  --step-4:clamp(2.1rem,1.5rem + 3.4vw,3.6rem);

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}.preloader__mark{animation:none}}
body{margin:0;font-family:var(--sans);font-size:var(--step-0);line-height:1.85;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,video,svg{max-width:100%;display:block}img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.3;margin:0 0 .6em;color:var(--ink);letter-spacing:.01em}
p{margin:0 0 1.1em}ul{margin:0 0 1em;padding-left:1.15em}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--accent);color:var(--accent-ink)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--gray-100);padding:.1em .35em}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:780px}
.section{padding-block:clamp(3.25rem,7vw,6rem)}
.section--tight{padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.section--ink{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#eaeaea}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
/* faint monogram-echo ring watermark — skip on .page-head, which already owns ::before/::after for its photo */
.section--ink:not(.page-head)::after{content:"";position:absolute;right:-60px;bottom:-60px;z-index:0;width:420px;height:420px;border:2px solid var(--accent);border-radius:50%;opacity:.07;pointer-events:none}
.section--ink:not(.page-head) > .container{position:relative;z-index:1}
.section--gray{background:var(--gray-100)}

.eyebrow{font-family:var(--display);font-size:var(--step--1);letter-spacing:.28em;text-transform:uppercase;color:var(--text-mute);margin:0 0 1rem}
.eyebrow::before{content:"";display:inline-block;width:14px;height:14px;border:1.5px solid var(--accent);border-radius:50%;background:transparent;vertical-align:middle;margin-right:.8em;margin-bottom:.15em}
.section--ink .eyebrow{color:var(--accent)}
.section--ink .eyebrow::before{border-color:var(--accent)}
.center .eyebrow::before{display:none}

.h-display{font-family:var(--display);font-weight:400;font-size:var(--step-3);letter-spacing:.02em}
.lead{font-size:var(--step-1);color:var(--text-soft);max-width:64ch;line-height:1.8}
.section--ink .lead{color:#cfcfcf}
/* sparing use only — testimonials/pull-quotes, never nav/eyebrow/small text */
.pull-quote{font-family:"Amatic SC",var(--display);font-weight:700;font-size:clamp(1.6rem,1.3rem + 1.4vw,2.6rem);line-height:1.25}
/* testimonials — a wide multi-column wall of quote cards */
.testimonial-grid{columns:2;column-gap:2.5rem;margin-top:.5rem}
@media(max-width:820px){.testimonial-grid{columns:1}}
.testimonial{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 2.25rem;padding-left:1.25rem;border-left:2px solid var(--accent)}
.testimonial blockquote{margin:0 0 .5rem}
.testimonial figcaption{font-family:var(--display);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
/* placeholder testimonials — clearly unfinished, never mistakable for a real review */
.testimonial-grid[data-placeholder] .testimonial{border-left-color:var(--gray-300);opacity:.72}
.testimonial-grid[data-placeholder] .pull-quote{font-style:italic;color:var(--text-mute)}
.center{text-align:center}
.center .lead,.center .eyebrow{margin-inline:auto}
.stack>*+*{margin-top:.9rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:1rem;top:-3rem;z-index:200;background:var(--ink);color:#fff;padding:.6rem 1rem;transition:top .2s var(--ease)}
.skip-link:focus{top:1rem}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* buttons — square, Reinar style */
.btn{display:inline-flex;align-items:center;gap:.55em;padding:1em 1.9em;font-family:var(--display);font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--ink);background:var(--ink);color:#fff;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--on-dark{border-color:#fff;background:transparent;color:#fff}
.btn--on-dark:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.center .btn-row{justify-content:center}
.link-arrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--accent);padding-bottom:3px;transition:color .2s var(--ease)}
.link-arrow .icon{width:1em;height:1em;transition:transform .25s var(--ease)}
.link-arrow:hover{color:var(--text-mute)}
.link-arrow:hover .icon{transform:translateX(4px)}

/* header — solid black, centered logo, two rows, red band on top */
/* fixed (not sticky) so it overlaps the hero/page-head photo below it instead of reserving space;
   the gradient below is also the permanent no-JS state, since .is-solid is only ever added by JS */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;background:linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.58) 45%,rgba(10,10,10,.42) 100%);-webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9);border-bottom:1px solid transparent;box-shadow:none;transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.site-header.is-solid,.site-header.is-open{background:rgba(10,10,10,.98);border-bottom-color:rgba(255,255,255,.12);box-shadow:0 8px 28px rgba(0,0,0,.18)}
/* keep the white nav readable over light banner photos in the un-scrolled overlay state */
.site-header:not(.is-solid) .nav__link{color:#f0f0f0}
.site-header:not(.is-solid) .nav__link,
.site-header:not(.is-solid) .nav-toggle{text-shadow:0 0 4px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.7)}
.site-header:not(.is-solid) .brand__logo{filter:drop-shadow(0 1px 5px rgba(0,0,0,.55))}
/* header now overlays content — keep in-page anchor jumps from landing underneath it */
[id]{scroll-margin-top:calc(var(--header-h) + 1rem)}

/* preloader — visible by default (no-JS safety net is the <noscript> rule in the partial itself);
   JS fades it out on load and back in before an internal navigation */
.preloader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--ink);opacity:1;transition:opacity .35s var(--ease)}
.preloader.is-hidden{opacity:0;pointer-events:none}
.preloader__mark{width:min(280px,62vw);height:auto;object-fit:contain;animation:preloader-pulse 1.8s ease-in-out infinite}
@keyframes preloader-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
.site-header .container{display:flex;align-items:center;justify-content:center;min-height:88px;max-width:1440px;padding-inline:var(--gutter)}
.brand{display:inline-flex;align-items:center;flex:none;margin-inline:clamp(1.6rem,4.3vw,4.75rem)}
.brand--mobile{display:none}
.brand__logo{display:block;width:116px;height:68px;object-fit:contain}
.nav{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:nowrap}
.nav__list{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.55rem);list-style:none;margin:0;padding:0;flex:1}
.nav__list--left{justify-content:flex-end}.nav__list--right{justify-content:flex-start}
.nav__link{display:inline-flex;align-items:center;gap:.35em;font-family:var(--display);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#d8d8d8;padding:.8rem 0;position:relative;white-space:nowrap;transition:color .2s var(--ease),opacity .2s var(--ease)}
.nav__link::after{content:"";position:absolute;right:0;bottom:.3rem;left:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .2s var(--ease)}
.nav__link:hover,.nav__link[aria-current=page]{color:#fff;opacity:1}.nav__link:hover::after,.nav__link[aria-current=page]::after{transform:scaleX(1)}
.nav__link .icon{width:.8em;height:.8em;transition:transform .2s var(--ease)}
.has-dropdown{position:relative}
.has-dropdown[aria-expanded=true] .nav__link .icon,.has-dropdown:hover .nav__link .icon{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);min-width:260px;background:#000;border:1px solid var(--line-dark);padding:.4rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.has-dropdown:hover .dropdown,.has-dropdown[aria-expanded=true] .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.dropdown a{display:block;padding:.65rem .85rem;font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:background .15s var(--ease),color .15s var(--ease)}
.dropdown a:hover,.dropdown a[aria-current=page]{background:#1a1a1a;color:var(--accent)}
.nav-toggle{display:none;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:0;color:#fff}
.nav-toggle .icon{width:26px;height:26px}
.nav-toggle .icon-close{display:none}
.is-open .nav-toggle .icon-open{display:none}
.is-open .nav-toggle .icon-close{display:block}

@media (max-width:1280px){
  :root{--header-h:64px}
  .site-header .container{min-height:64px;position:relative}
  .brand{margin:0}
  .brand__logo{width:82px;height:50px}
  .site-header .brand--mobile{display:inline-flex;position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);z-index:2}
  .nav-toggle{display:inline-flex}
  .nav{position:fixed;inset:var(--header-h-sm) 0 0;z-index:90;isolation:isolate;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:#0d0d0d;padding:1rem var(--gutter) 3rem;overflow-y:auto;overflow-x:hidden;transform:translateX(100%);transition:transform .32s var(--ease)}
  .is-open .nav{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0}
  .nav__link{justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--line-dark);font-size:.8rem;color:#fff;opacity:1}
  .nav__link::after{display:none}
  .has-dropdown{display:flex;flex-direction:column}
  .dropdown{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;min-width:0;border:0;box-shadow:none;background:transparent;padding:0 0 .5rem;max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
  .has-dropdown[aria-expanded=true] .dropdown{max-height:680px}
  .dropdown a{padding-left:0}
  /* hardened: id-scoped so nothing overrides it. lists must NOT keep desktop flex:1 —
     that stretches them to fill the flyout and traps big empty voids between items. */
  #primary-nav.nav{background:#0d0d0d;justify-content:flex-start;will-change:transform}
  #primary-nav .nav__list{flex:0 0 auto;justify-content:flex-start}
  #primary-nav .nav__list--left,#primary-nav .nav__list--right{justify-content:flex-start}
  #primary-nav .nav__list,#primary-nav .has-dropdown,#primary-nav .dropdown{background:#0d0d0d}
  /* kill desktop translate(-50%,0): on mobile it shoves the expanded submenu off-screen left */
  #primary-nav .dropdown{transform:none;left:auto}
  #primary-nav .brand{order:-1;align-self:flex-start;flex:none;margin:0 0 1rem;padding:.25rem 0}
  #primary-nav .nav__link{color:#fff;opacity:1}
  #primary-nav .dropdown a{color:#e6e6e6}
  #primary-nav .nav__link[aria-current=page],#primary-nav .dropdown a[aria-current=page]{color:var(--accent)}
  body.nav-open{overflow:hidden}
}

/* hero */
.hero{position:relative;min-height:min(90svh,820px);display:grid;align-items:end;color:#fff;background:var(--ink);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.1) 40%,rgba(0,0,0,.72))}
.hero__inner{position:relative;padding-block:clamp(3rem,11vh,7rem)}
.hero__title{font-family:var(--display);font-weight:400;font-size:var(--step-4);letter-spacing:.06em;text-transform:uppercase;margin:0 0 .6rem;color:#fff}
.hero__tagline{font-family:var(--display);font-size:var(--step-1);letter-spacing:.24em;text-transform:uppercase;margin:0 0 .5rem}
.hero__sub{font-size:var(--step--1);letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 2rem}
.hero .btn-row{margin-top:1.4rem}

/* Homepage — full-height hero with a muted, auto-playing background video that
   dissolves into the page, based on the live studio site. */
.hero--studio{position:relative;min-height:100svh;align-items:center;background:#000}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.16) translate(-2.5%,-1.5%)}}
.hero--studio .hero__media img{width:100%;height:100%;object-fit:cover}
/* rotating cross-fade slider */
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);will-change:opacity}
.hero__slide.is-active{opacity:1;z-index:1}
.hero--studio .hero__slide.is-active > img{animation:kenburns 9s ease-out both}
@media (prefers-reduced-motion:reduce){.hero__slide{transition:none}.hero--studio .hero__slide.is-active > img{animation:none}}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.hero__slide--video .hero__video.is-loaded{opacity:1}
.hero--studio .hero__media::after{background:linear-gradient(180deg,rgba(45,10,18,.5) 0,rgba(0,0,0,.22) 30%,rgba(0,0,0,.22) 60%,rgba(0,0,0,.55) 100%)}
/* the video melts into the page below */
.hero--studio::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:32vh;z-index:1;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--paper))}
.hero--studio .hero__inner{position:relative;z-index:2}
.hero__inner--center{display:grid;justify-items:center;text-align:center;padding-block:5rem 4rem}
.hero__mark{width:min(510px,78vw);height:auto;filter:drop-shadow(0 3px 16px rgba(0,0,0,.35))}
/* margin-top is the overlap under the logo script — fluid so it never rides up into
   the artwork on narrow screens (the logo PNG has no transparent bottom padding). */
.hero--studio .hero__tagline{margin-top:clamp(-2.5rem, 0.25rem - 3.1vw, 0.5rem);font-family:"Amatic SC",var(--display);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.6rem);font-weight:700;letter-spacing:.01em;text-transform:none;text-shadow:0 2px 9px rgba(0,0,0,.45)}
.home-video__play .icon{width:1.15rem;height:1.15rem;margin-left:2px;fill:currentColor;stroke:none}
.section--videos{padding-block:clamp(4rem,8vw,6rem);background:#fff}
.section--videos .h-display{font-family:"Amatic SC",var(--display);font-weight:700;font-size:clamp(2.1rem,1.5rem + 3vw,3.2rem)}
.home-videos{display:grid;gap:clamp(.7rem,1.5vw,1.25rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:2.5rem 0}
.home-video{position:relative;display:block;text-align:center;background:#111}
.home-video__frame{position:relative;display:block;overflow:hidden;aspect-ratio:415/230;background:#111}
.home-video__frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),opacity .25s var(--ease)}
.home-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.home-video.is-playing .home-video__title,.home-video.is-playing .home-video__play{display:none}
.home-video:hover img{transform:scale(1.045);opacity:.82}
.home-video__play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:54px;height:54px;border:0;border-radius:0;color:#fff;background:transparent;transition:transform .2s var(--ease)}
.home-video__title{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;font-family:var(--display);font-size:var(--step-2);font-weight:700;line-height:1.2;letter-spacing:.02em;color:#fff;background:rgba(0,0,0,.44);opacity:0;transition:opacity .25s var(--ease)}
.home-video:hover .home-video__title{opacity:1}.home-video:hover .home-video__play{transform:scale(1.1)}
.home-services{display:grid;background:var(--ink);grid-template-columns:repeat(3,1fr)}
.home-services a{display:grid;gap:.25rem;place-content:center;min-height:150px;padding:1.5rem;text-align:center;color:#fff;border-right:1px solid var(--line-dark);transition:background .2s var(--ease)}
.home-services a:last-child{border:0}.home-services a:hover{background:var(--accent)}
.home-services span{font-family:var(--display);font-size:var(--step-2);letter-spacing:.08em}.home-services small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#bdbdbd}.home-services a:hover small{color:#fff}
@media(max-width:620px){.home-services{grid-template-columns:1fr}.home-services a{min-height:110px;border-right:0;border-bottom:1px solid var(--line-dark)}.home-services a:last-child{border-bottom:0}}
.home-services{display:none}

/* Corporate headshots — compact gallery-led service layout. */
.corporate-showcase{padding-block:clamp(2rem,4vw,4rem)}
.corporate-showcase__grid{display:grid;gap:clamp(1.75rem,5vw,5rem);align-items:start}
@media(min-width:900px){.corporate-showcase__grid{grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)}}
.corporate-showcase__gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.corporate-showcase__gallery button:nth-child(3){grid-row:span 2}.corporate-showcase__gallery img{aspect-ratio:4/5;object-fit:cover}
.corporate-showcase__copy{max-width:39rem}.corporate-showcase__copy .lead{margin-bottom:1.25rem}.corporate-showcase__copy .stack{margin:0 0 1.6rem;padding-left:1.1rem}.corporate-showcase__copy .stack li+li{margin-top:.35rem}
@media(min-width:1200px){.corporate-showcase__gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.corporate-showcase__copy{position:sticky;top:110px}}

/* Image-led showcase — tight intro copy stacked ABOVE a dense mosaic gallery.
   Shared by wedding-photography, mitzvah-photography and celebrations. */
.mitzvah-coverage-intro,.wedding-coverage-intro{display:none}
.mitzvah-showcase,.wedding-showcase,.celebration-showcase{padding-block:clamp(2rem,4vw,4rem)}
.mitzvah-showcase__grid,.wedding-showcase__grid,.celebration-showcase__grid{display:grid;gap:clamp(1.4rem,3vw,2.25rem)}
.mitzvah-showcase__copy,.wedding-showcase__copy,.celebration-showcase__copy{order:-1;max-width:70ch}
.mitzvah-showcase__copy .lead,.wedding-showcase__copy .lead,.celebration-showcase__copy .lead{margin-bottom:.9rem}
.mitzvah-showcase__copy .stack,.wedding-showcase__copy .stack,.celebration-showcase__copy .stack{margin:0;padding-left:1.1rem;column-gap:2.5rem}
@media(min-width:640px){.mitzvah-showcase__copy .stack,.wedding-showcase__copy .stack,.celebration-showcase__copy .stack{columns:2}}
.mitzvah-showcase__copy .stack li+li,.wedding-showcase__copy .stack li+li,.celebration-showcase__copy .stack li+li{margin-top:.3rem}
.mitzvah-showcase__gallery,.wedding-showcase__gallery,.celebration-showcase__gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
@media(min-width:800px){.mitzvah-showcase__gallery,.wedding-showcase__gallery,.celebration-showcase__gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.mitzvah-showcase__gallery,.wedding-showcase__gallery,.celebration-showcase__gallery{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mitzvah-showcase__gallery img,.mitzvah-showcase__gallery .ph,.wedding-showcase__gallery img,.wedding-showcase__gallery .ph,.celebration-showcase__gallery img,.celebration-showcase__gallery .ph{aspect-ratio:4/5;object-fit:cover;width:100%;height:100%}
.mitzvah-showcase__gallery .tall,.wedding-showcase__gallery .tall,.celebration-showcase__gallery .tall{grid-row:span 2}
.mitzvah-showcase__gallery .tall img,.mitzvah-showcase__gallery .tall.ph,.wedding-showcase__gallery .tall img,.wedding-showcase__gallery .tall.ph,.celebration-showcase__gallery .tall img,.celebration-showcase__gallery .tall.ph{aspect-ratio:2/5}
.mitzvah-showcase__gallery .ph,.wedding-showcase__gallery .ph,.celebration-showcase__gallery .ph{font-size:.58rem;letter-spacing:.08em;padding:.4rem;border-style:dashed}

/* placeholder */
.ph{position:relative;background:repeating-linear-gradient(45deg,var(--gray-100) 0 12px,var(--gray-50) 12px 24px);color:var(--text-mute);display:grid;place-items:center;aspect-ratio:4/3;font-family:var(--display);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:1rem;border:1px solid var(--line)}
.ph[data-ratio="16x9"]{aspect-ratio:16/9}
.ph[data-ratio="3x4"]{aspect-ratio:3/4}
.ph[data-ratio="1x1"]{aspect-ratio:1/1}
.ph[data-ratio="21x9"]{aspect-ratio:21/9}
.section--ink .ph{background:repeating-linear-gradient(45deg,#191919 0 12px,#141414 12px 24px);color:#777;border-color:var(--line-dark)}

/* feature rows */
.feature{display:grid;gap:clamp(1.5rem,5vw,4rem);align-items:center}
@media (min-width:860px){.feature{grid-template-columns:1fr 1fr}.feature--media-right .feature__media{order:2}}
.feature+.feature{margin-top:clamp(3rem,8vw,5.5rem)}
.feature__body h2{font-family:var(--display);font-size:var(--step-3)}
.feature--text-only .feature__body{max-width:52rem}
@media (min-width:860px){.feature--text-only .feature__body{grid-column:1/-1}}

/* grids / cards */
.grid{display:grid;gap:clamp(1rem,2.5vw,1.8rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.card{display:flex;flex-direction:column;color:inherit}
.card__media{position:relative;overflow:hidden}
.card__media img,.card__media .ph{transition:transform .6s var(--ease);width:100%}
.card:hover .card__media img{transform:scale(1.04)}
.card__title{font-family:var(--display);font-size:var(--step-1);letter-spacing:.04em;margin:1rem 0 .3rem}
.card__text{font-size:var(--step--1);color:var(--text-mute);margin:0}
.section--ink .card__text{color:#a9a9a9}

/* Weddings overview: consistent cards despite different source-image dimensions and copy lengths. */
.wedding-services .card{height:100%}
.wedding-services .card__media{aspect-ratio:7/4}
.wedding-services .card__media img{width:100%;height:100%;object-fit:cover}
.wedding-services .card__text{margin-top:auto}
.mitzvah-services .card{height:100%}
.mitzvah-services .card__media{aspect-ratio:7/4}
.mitzvah-services .card__media img{width:100%;height:100%;object-fit:cover}
.mitzvah-services .card__text{margin-top:auto}

.tiles{display:grid;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
@media (min-width:700px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--ink);padding:clamp(1.4rem,4vw,2.4rem)}
.tile .icon{width:2rem;height:2rem;stroke-width:1.1;margin-bottom:1rem;color:var(--accent)}
.tile h3{font-family:var(--display);font-size:var(--step-0);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.tile p{font-size:var(--step--1);color:#a9a9a9;margin:0}

/* gallery */
.gallery{display:grid;gap:clamp(.35rem,1vw,.75rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.gallery button{padding:0;border:0;background:none;display:block;overflow:hidden}
.gallery img,.gallery .ph{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;transition:transform .5s var(--ease),filter .3s var(--ease)}
.gallery button:hover img{transform:scale(1.05)}
.gallery .tall{grid-row:span 2}
.gallery .tall img,.gallery .tall .ph{aspect-ratio:1/2}

/* films */
.films{display:grid;gap:clamp(1rem,3vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.film{position:relative;background:#000}
.film__frame{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer}
.film__frame img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .3s,transform .6s var(--ease)}
.film:hover .film__frame img{opacity:1;transform:scale(1.03)}
.film__play{position:absolute;inset:0;margin:auto;width:72px;height:72px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(0,0,0,.25);color:#fff;transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.film:hover .film__play{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.06)}
.film__play .icon{width:24px;height:24px;margin-left:4px;fill:currentColor;stroke:none}
.film__meta{padding:1rem 1.15rem 1.2rem;color:#fff}
.film__meta h3{font-family:var(--display);font-size:var(--step-1);margin:0 0 .2rem}
.film__meta p{font-size:var(--step--1);color:#a9a9a9;margin:0}
.film.is-playing .film__frame>*:not(iframe){display:none}
.film__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* combo cross-sell */
.combo{display:grid;gap:1.4rem;align-items:center;text-align:center;border:1px solid var(--line-dark);padding:clamp(1.8rem,5vw,3rem)}
.combo__row{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:center;align-items:center}
.combo__row span{font-family:var(--display);font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6em}
.combo__row .icon{width:1.5rem;height:1.5rem;color:var(--accent)}
.combo__plus{color:var(--accent)}

/* blog / long-form article body */
.post-meta{font-family:var(--display);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin:0 0 1rem}
.post-meta span{color:var(--accent)}
/* Article body: a visibly wider column. The text is held to a comfortable reading
   measure and centred; figures, the rule and the CTA row span the full width.
   Fluid throughout — min()/% + ch, no fixed breakpoints. */
.prose{max-width:min(1060px,100%);margin-inline:auto}
.prose>*{max-width:78ch;margin-inline:auto}
.prose>figure,.prose>hr{max-width:100%}
.prose>p{margin:0 0 1.3em;line-height:1.85}
.prose>p:first-of-type{font-size:var(--step-1);color:var(--text-soft);line-height:1.8}
.prose h2{font-family:var(--display);font-size:var(--step-2);letter-spacing:.01em;margin:2.4em 0 .5em}
.prose h3{font-family:var(--display);font-size:var(--step-1);margin:1.9em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:1.35em}
.prose li{margin:.35em 0;line-height:1.7}
.prose figure{margin:2.2em 0}
.prose figcaption{font-size:var(--step--1);color:var(--text-mute);margin-top:.55rem;text-align:center}
.prose .venue-address{margin:-.6rem 0 1.8rem;padding:.7rem 0 0;border-top:1px solid var(--line);font-size:var(--step--1);letter-spacing:.02em;color:var(--text-soft)}
.prose .venue-address strong{color:var(--ink);letter-spacing:.04em;text-transform:uppercase}
.prose blockquote{margin:2em 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--accent);font-family:"Amatic SC",var(--display);font-size:var(--step-2);line-height:1.3;color:var(--ink)}
.prose blockquote p{margin:0}
.prose a{border-bottom:1px solid var(--accent)}
.prose a:hover{color:var(--accent)}
.prose hr{margin:2.6em 0}
.prose .ph{margin:0;aspect-ratio:3/2}
.prose .ph[data-ratio="16x9"]{aspect-ratio:16/9}
.prose .ph[data-ratio="3x4"]{aspect-ratio:3/4}
.prose .ph[data-ratio="1x1"]{aspect-ratio:1/1}
.post-nav{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* blog index — topic filter above the mosaic */
.blog-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
.blog-filter__btn{font-family:var(--display);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);background:transparent;border:1px solid var(--gray-300,#d9d5cf);border-radius:2rem;padding:.42rem .95rem;cursor:pointer;transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)}
.blog-filter__btn:hover{color:var(--ink);border-color:var(--ink)}
.blog-filter__btn.is-active{color:#fff;background:var(--ink);border-color:var(--ink)}
.blog-filter__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.blog-filter__n{opacity:.55;font-size:.9em}
.blog-filter__btn.is-active .blog-filter__n{opacity:.7}
.blog-filter__empty{text-align:center;color:var(--text-soft);margin-top:2rem}
.blog-tile[hidden]{display:none}

/* blog index — mosaic of varied-size tiles, like the celebration/wedding galleries */
.blog-mosaic{display:grid;gap:.6rem;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem}
@media(min-width:800px){.blog-mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.blog-mosaic{grid-template-columns:repeat(5,minmax(0,1fr))}}
.blog-tile{position:relative;display:block;overflow:hidden;background:#111;aspect-ratio:4/5;color:#fff}
.blog-tile.tall{grid-row:span 2;aspect-ratio:2/5}
.blog-tile .ph{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto;transition:transform .55s var(--ease)}
.blog-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.blog-tile:hover .ph,.blog-tile:hover img{transform:scale(1.05)}
.blog-tile__label{position:absolute;inset:auto 0 0 0;z-index:1;display:block;padding:2.4rem .95rem .95rem;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.35) 55%,transparent)}
.blog-tile__cat{display:block;font-family:var(--display);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.blog-tile__title{display:block;font-family:var(--display);font-size:var(--step-0);line-height:1.25;letter-spacing:.01em}
.blog-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* diagrams */
.diagram{border:1px solid var(--line);padding:clamp(1.2rem,4vw,2.4rem);background:var(--paper)}
.diagram svg{width:100%;height:auto}
.diagram figcaption{font-size:var(--step--1);color:var(--text-mute);margin-top:1rem}
.dgm-node{fill:#fff;stroke:var(--ink);stroke-width:1.5}
.dgm-label{fill:var(--ink);font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.dgm-flow{stroke:var(--ink);stroke-width:1.5;fill:none}
.dgm-flow--dash{stroke-dasharray:5 5}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.2rem 2.5rem 1.2rem 0;position:relative;font-family:var(--display);font-size:var(--step-1);letter-spacing:.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:1rem;font-size:1.4rem;color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq details>div{padding-bottom:1.4rem;max-width:68ch;color:var(--text-soft)}

/* form */
.form{display:grid;gap:1.6rem}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font-family:var(--display);font-size:var(--step-2);letter-spacing:.02em;margin-bottom:1rem;padding:0}
.form__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.choice-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.choice{position:relative;border:1px solid var(--line);padding:.95rem 1rem;display:flex;align-items:center;gap:.7rem;font-family:var(--display);font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s var(--ease),background .2s var(--ease)}
.choice input{position:absolute;opacity:0}
.choice .icon{width:1.35rem;height:1.35rem;color:var(--text-mute)}
.choice:hover{border-color:var(--accent)}
.choice:has(input:checked){border-color:var(--accent);background:#fdeaea}
.choice:has(input:checked) .icon{color:var(--accent-deep)}
.choice:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.field{display:grid;gap:.4rem}
.field label{font-family:var(--display);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.field input,.field select,.field textarea{font:inherit;padding:.8rem .9rem;border:1px solid var(--line);background:var(--paper);color:var(--text);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field--full{grid-column:1/-1}
.form__note{font-size:var(--step--1);color:var(--text-mute)}

/* footer — dark */
.site-footer{background:var(--ink);color:#b3b3b3;padding-block:clamp(3rem,7vw,4.5rem);font-size:var(--step--1)}
.site-footer a:hover{color:var(--accent)}
.footer__ig{display:inline-flex;align-items:center;gap:.45em}
.footer__ig .icon{width:1.15em;height:1.15em}
.footer__top{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.footer__logo{width:auto;height:44px;margin-bottom:1rem}
.footer__col h4{font-family:var(--display);font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer__col a{letter-spacing:.03em}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;text-align:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);color:#7d7d7d}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;display:none;background:rgba(6,6,6,.95);place-items:center;padding:clamp(1rem,5vw,4rem)}
.lightbox.is-open{display:grid}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain}
.lightbox__close,.lightbox__nav button{position:absolute;background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;width:48px;height:48px;display:grid;place-items:center}
.lightbox__close:hover,.lightbox__nav button:hover{border-color:var(--accent);color:var(--accent)}
.lightbox__close{top:1.2rem;right:1.2rem}
.lightbox__nav button{top:50%;transform:translateY(-50%)}
.lightbox__nav .prev{left:1.2rem}.lightbox__nav .next{right:1.2rem}
.lightbox__count{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;color:#999;font-family:var(--display);font-size:var(--step--1);letter-spacing:.2em}

/* page head */
.page-head{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:end;min-height:clamp(200px,24vw,320px);padding-block:clamp(3.25rem,7vw,5.25rem) clamp(1.9rem,3.5vw,2.75rem);background-color:#151515;color:#fff}
.page-head::before{content:"";position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;background-image:url("/assets/img/wp/2019/02/cropped-IMG_7447.jpg");animation:kenburns 30s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.page-head::before{animation:none}}
/* stationary translucent dark overlay — a separate layer, never moves */
.page-head::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background-image:linear-gradient(180deg,rgba(0,0,0,.52) 0,rgba(0,0,0,.2) 24%,rgba(0,0,0,.28) 62%,rgba(0,0,0,.46) 100%)}
/* moving film-grain / texture layer above the photo + overlay, photo stays crisp underneath.
   NOTE: no mix-blend-mode — it breaks the mobile position:fixed nav backdrop in Chrome/Safari. */
.page-head__fx{position:absolute;inset:-60px;z-index:2;pointer-events:none;opacity:.09;background-repeat:repeat;background-size:130px 130px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.4s steps(5) infinite}
@keyframes grain{0%,100%{background-position:0 0}10%{background-position:-22px 8px}20%{background-position:14px -20px}30%{background-position:-26px 22px}40%{background-position:28px 12px}50%{background-position:-14px -24px}60%{background-position:18px 28px}70%{background-position:-24px 4px}80%{background-position:24px -16px}90%{background-position:-8px 18px}}
@media (prefers-reduced-motion:reduce){.page-head__fx{animation:none}}
.page-head .container{position:relative;z-index:3}
.page-head h1,.page-head h2,.page-head .h-display,.page-head .lead{color:#fff}
.page-head h1,.page-head .h-display{text-shadow:0 2px 12px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.45)}
/* JS (fitPageTitle) shrinks this to a single line; balance the fallback wrap */
.page-head h1{text-wrap:balance}
.page-head .lead{text-shadow:0 1px 8px rgba(0,0,0,.45)}
.page-head .lead{max-width:74ch;font-size:clamp(.88rem,.84rem + .18vw,1rem);line-height:1.5;margin-top:.5rem;text-wrap:balance}.page-head .breadcrumb{color:rgba(255,255,255,.72);margin-bottom:.7rem}.page-head .breadcrumb a:hover{color:#fff}.page-head .breadcrumb span{color:var(--accent)}
/* centered title with a giant faint echo of itself behind — editorial banner treatment */
.page-head{align-items:center;text-align:center}
.page-head .container{max-width:min(1180px,94vw)}
.page-head .lead{margin-inline:auto}
.page-head .h-display{position:relative;display:inline-block;isolation:isolate;font-family:"Amatic SC",var(--display),cursive;font-style:normal;font-weight:700;text-transform:none;letter-spacing:.02em;line-height:1.05;font-size:clamp(3.4rem,8.5vw,7rem)!important}
.page-head .h-display[data-echo]::before{content:attr(data-echo);position:absolute;left:50%;top:46%;z-index:-1;font-family:"Amatic SC",var(--display),cursive;font-weight:700;font-style:normal;font-size:calc(var(--ph-title-size,4.6rem) * 1.9);line-height:1;letter-spacing:.03em;text-transform:none;white-space:nowrap;color:#fff;opacity:.14;text-shadow:none;pointer-events:none;transform:translate(-50%,-50%);animation:echo-drift 26s ease-in-out infinite}
@keyframes echo-drift{0%{transform:translate(-53%,-50%) scale(1.04)}50%{transform:translate(-47%,-50%) scale(1.09)}100%{transform:translate(-53%,-50%) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.page-head .h-display[data-echo]::before{animation:none;transform:translate(-50%,-50%)}}
@media (max-width:640px){.page-head .h-display[data-echo]::before{display:none}}
@media (max-width:640px){
  .page-head .h-display{display:block;max-width:100%;font-size:clamp(2.65rem,13vw,3.4rem)!important;overflow-wrap:anywhere}
  .h-display{max-width:100%;overflow-wrap:break-word}
}
body[data-nav="weddings"] .page-head::before{background-image:url("/assets/img/wp/2019/09/cropped-danjamwedding.jpg")}
body.wedding-photography .page-head::before{background-image:url("/assets/img/generated/wedding/wedding-dusk-estate-hero.png");background-position:center}
body.wedding-live-streaming .page-head::before{background-image:url("/assets/img/generated/live-streaming/wedding-production.png");background-position:center 42%}
body.wedding-live-streaming .page-head .lead:not(.wedding-streaming__lead){display:none}
.wedding-streaming__copy + .lead{display:none}
body[data-nav="mitzvahs"] .page-head::before{background-image:url("/assets/img/wp/2019/03/IMG_9218.jpg")}
body.mitzvah-live-streaming .page-head::before{background-image:url("/assets/img/generated/mitzvahs/mitzvah-live-streaming.png");background-position:center 42%}
body[data-nav="celebrations"] .page-head::before{background-image:url("/assets/img/wp/2019/03/DSC_1625-XL.jpg")}
body[data-nav="live"] .page-head::before{background-image:url("/assets/img/wp/2020/05/livestream.jpg")}
body.virtual-graduations .page-head::before{background-image:url("/assets/img/generated/graduations/graduation-celebration.png");background-position:center 42%}
body.virtual-graduations .page-head .lead:not(.graduation-page__lead){display:none}
body[data-nav="portfolio"] .page-head::before{background-image:url("/assets/img/wp/2019/02/IMG_4368.jpg")}
body.graduation-photography .page-head::before{background-image:url("/assets/img/generated/graduation-photography/on-stage-diploma.png");background-position:center 42%}
body.school-photography .page-head::before{background-image:url("/assets/img/generated/school-photography/picture-day-portrait.png");background-position:center 28%}
body.school-photography .page-head .lead:not(.school-photography__lead){display:none}
body.corporate-headshots .page-head::before{background-image:url("/assets/img/generated/corporate-headshots/executive-woman.png");background-position:center 30%}
body[data-nav="about"] .page-head::before{background-image:url("/assets/img/wp/2015/01/IMG_0961.jpg")}
body[data-nav="contact"] .page-head::before{background-image:url("/assets/img/wp/2019/03/IMG_1348.jpg")}
body.engagement-photography .page-head::before{background-image:url("/assets/img/wp/2019/09/IMG_2737-X3.jpg");background-position:center 32%}
body.nyc-wedding-photography .page-head::before{background-image:url("/assets/img/wp/2019/02/DSC_5610.jpg");background-position:center 30%}
.breadcrumb{font-family:var(--display);font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb span{color:var(--accent);margin:0 .5em}

/* reveal */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}