:root{
  /* ---- Imago Light dark palette: tweak here ---- */
  --bg:#161718;            /* page background (neutral graphite) */
  --surface:#1d1e20;       /* cards, panels, image placeholders */
  --surface-2:#252628;     /* raised / hover surfaces, inputs */
  --line:#2e3033;          /* subtle borders & dividers */
  --line-strong:#3f4246;   /* focus-adjacent / hover borders */
  --ink:#e4e5e7;           /* headings, primary text (off-white) */
  --text:#cfd1d4;          /* body copy (~88% of ink) */
  --muted:#9a9da2;         /* secondary text (AA on all surfaces) */
  --faint:#85888d;         /* placeholders, decorative */
  --accent:#b8bcc2;        /* soft pewter / silver */
  --accent-hi:#d4d7db;     /* accent hover */
  --accent-ink:#141516;    /* text on accent */
  --accent-soft:rgba(184,188,194,.14);
  --danger:#e58c82;
  --bg-deep:#121314;       /* footer */
  --lightbox:#0c0d0e;      /* near-black for viewing photos */
  --header-glass:rgba(22,23,24,.82);
  --shadow-photo:0 18px 44px -18px rgba(0,0,0,.65);
  --hero-fallback:radial-gradient(120% 90% at 70% 20%,#3a3d41 0%,#26282b 45%,#161718 100%);
  --hero-overlay:linear-gradient(90deg,rgba(22,23,24,.62) 0%,rgba(22,23,24,.28) 45%,rgba(22,23,24,0) 75%),linear-gradient(180deg,rgba(22,23,24,.45) 0%,rgba(22,23,24,.12) 30%,rgba(22,23,24,.5) 64%,var(--bg) 100%);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans:'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1); --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{color-scheme:dark;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.78;letter-spacing:.012em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(184,188,194,.32);color:var(--ink)}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:2px}
h1,h2,h3,.brand,.footer-brand{color:var(--ink)}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);transition:background .5s var(--ease),padding .5s var(--ease),color .5s var(--ease),box-shadow .5s;color:var(--ink)}
.site-header.on-hero{color:#eceef0}
.site-header.on-hero .brand{color:inherit}
.site-header.scrolled{background:var(--header-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:14px var(--pad);color:var(--ink);box-shadow:0 1px 0 var(--line)}
/* Aperture Cross logo (mark geometry: logos/build-final.js) */
.ac-mark{display:block;flex:none;overflow:visible}.ac-disk{fill:var(--mark-disk,#26272a);stroke:var(--accent);stroke-width:2.4}.ac-blades{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linejoin:round;opacity:.85}.ac-cross{fill:var(--ink);stroke:none}
.brand{display:flex;align-items:center;gap:13px;line-height:1}
.brand .ac-mark{width:36px;height:36px;transition:width .5s var(--ease),height .5s var(--ease)}
.brand-word{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.26em;margin-right:-.26em;white-space:nowrap}
.brand .brand-word{font-size:19px;padding-top:1px}
.site-header.scrolled .brand .ac-mark{width:32px;height:32px}
.site-nav a:hover,.site-nav a.active{color:var(--accent-hi)}
.site-nav{display:flex;gap:38px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.site-nav a{position:relative;padding:4px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.site-nav a:hover::after,.site-nav a.active::after{transform:scaleX(1);transform-origin:left}
.nav-toggle{display:none;background:none;border:0;width:30px;height:20px;position:relative;cursor:pointer;color:inherit;z-index:60}
.nav-toggle span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.nav-toggle span:first-child{top:5px}.nav-toggle span:last-child{top:14px}
body.nav-open .nav-toggle span:first-child{top:9px;transform:rotate(45deg)}
body.nav-open .nav-toggle span:last-child{top:9px;transform:rotate(-45deg)}
@media (max-width:760px){
  .brand{gap:10px}.brand .ac-mark,.site-header.scrolled .brand .ac-mark{width:30px;height:30px}.brand .brand-word{font-size:15px;letter-spacing:.22em;margin-right:-.22em}
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:0;background:var(--bg);color:var(--ink);flex-direction:column;align-items:center;justify-content:center;gap:34px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
  body.nav-open .site-nav{opacity:1;pointer-events:auto}
  body.nav-open .site-header{color:var(--ink)}
}

/* page transitions */
.page{min-height:70vh;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.page.leaving{opacity:0;transform:translateY(-8px)}
.page.entering{opacity:0;transform:translateY(14px)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end;color:#eceef0;background:var(--surface)}
.hero h1{color:#f0f1f3}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);animation:kenburns 18s var(--ease) forwards}
.hero::after{content:"";position:absolute;inset:0;background:var(--hero-overlay)}
.hero-img{filter:saturate(.82)}
.hero.hero-empty .hero-img{background:var(--hero-fallback);filter:none;animation:none;transform:none}
.hero.hero-empty .hero-img::after{content:"";position:absolute;inset:0;opacity:.5;background:radial-gradient(60% 50% at 78% 28%,rgba(212,215,219,.10),transparent 70%)}
@keyframes kenburns{to{transform:scale(1)}}
.hero-inner{position:relative;z-index:2;padding:0 var(--pad) clamp(60px,12vh,120px);max-width:1100px}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;opacity:.85;margin-bottom:18px;font-weight:400}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(44px,8vw,112px);line-height:.98;letter-spacing:-.01em}
.hero p.sub{margin-top:22px;font-size:clamp(14px,1.4vw,17px);opacity:.9;max-width:520px}
.hero .fade-up{opacity:0;transform:translateY(24px);animation:fadeUp 1.2s var(--ease) forwards}
.hero .d1{animation-delay:.2s}.hero .d2{animation-delay:.45s}.hero .d3{animation-delay:.7s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.scroll-cue{position:absolute;z-index:2;right:var(--pad);bottom:40px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;writing-mode:vertical-rl;display:flex;align-items:center;gap:14px;opacity:.85}
.scroll-cue::after{content:"";width:1px;height:56px;background:currentColor;animation:cue 2.2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* verse */
.verse{padding:clamp(80px,14vw,170px) var(--pad);text-align:center;max-width:980px;margin:0 auto}
.verse blockquote{color:var(--ink);font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,3.3vw,40px);line-height:1.35}
.verse cite{display:block;margin-top:26px;font-style:normal;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.verse .ornament{color:var(--accent);font-size:14px;margin-bottom:28px;letter-spacing:1em}

/* sections */
.section{padding:0 var(--pad) clamp(80px,10vw,140px)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,52px);border-bottom:1px solid var(--line);padding-bottom:18px}
.section-head h2{font-family:var(--serif);font-weight:300;font-size:clamp(32px,4vw,52px)}
.section-head span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* album grid */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(22px,3vw,44px)}
.album-card{display:block;cursor:pointer}
.album-card .frame{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--surface);box-shadow:var(--shadow-photo);transition:box-shadow .8s var(--ease)}
.album-card:hover .frame{box-shadow:0 26px 60px -20px rgba(0,0,0,.8)}
.album-card:hover h3{color:var(--accent-hi)}
.album-card h3{transition:color .4s var(--ease)}
.album-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .8s var(--ease)}
.album-card:hover img{transform:scale(1.05)}
.album-card .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;gap:12px}
.album-card h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2}
.album-card .count{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.demo-badge{position:absolute;top:14px;left:14px;background:rgba(22,23,24,.78);color:var(--accent-hi);border:1px solid rgba(184,188,194,.35);backdrop-filter:blur(6px);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px;border-radius:30px;font-weight:500}
.empty{color:var(--muted);text-align:center;padding:80px 0;font-family:var(--serif);font-size:22px;font-style:italic}

/* album page */
.album-hero{padding:clamp(130px,18vh,190px) var(--pad) clamp(36px,5vw,60px);max-width:1100px}
.back{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);display:inline-flex;gap:10px;align-items:center;margin-bottom:28px;transition:color .3s,gap .3s var(--ease)}
.back:hover{color:var(--ink);gap:14px}
.album-hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,6vw,84px);line-height:1.02}
.album-hero p{margin-top:18px;color:var(--muted);max-width:620px}
.justified{position:relative;padding:0 var(--pad) clamp(80px,10vw,140px)}
.jrow{display:flex;gap:var(--gap,10px);margin-bottom:var(--gap,10px)}
.jitem{position:relative;overflow:hidden;cursor:zoom-in;background:var(--surface);flex:none;box-shadow:0 10px 30px -16px rgba(0,0,0,.7)}
.jitem img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.jitem img.loaded{opacity:1;transform:none}
.jitem:hover img.loaded{transform:scale(1.025)}
.jitem .cap{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 12px;color:#eceef0;font-size:13px;letter-spacing:.02em;background:linear-gradient(transparent,rgba(12,13,14,.72));opacity:0;transform:translateY(8px);transition:all .5s var(--ease)}
.jitem:hover .cap{opacity:1;transform:none}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:var(--lightbox);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);touch-action:none}
.lightbox.open{opacity:1;pointer-events:auto}
.lb-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:70px clamp(12px,7vw,110px) 90px}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .35s var(--ease),transform .45s var(--ease);user-select:none;-webkit-user-drag:none;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.lb-stage img.swap{opacity:0;transform:scale(.98)}
.lb-btn{position:absolute;background:none;border:0;color:var(--ink);opacity:.6;cursor:pointer;transition:opacity .3s,transform .3s var(--ease);font-family:var(--serif);z-index:2}
.lb-btn:hover,.lb-btn:focus-visible{opacity:1;color:var(--accent-hi)}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:56px;padding:20px;line-height:1}
.lb-prev{left:6px}.lb-next{right:6px}
.lb-prev:hover{transform:translateY(-50%) translateX(-4px)}.lb-next:hover{transform:translateY(-50%) translateX(4px)}
.lb-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;color:var(--ink);z-index:2}
.lb-count{font-size:11px;letter-spacing:.25em;color:var(--muted)}
.lb-close{position:static;font-size:22px;font-family:var(--sans)}
.lb-caption{position:absolute;bottom:28px;left:0;right:0;text-align:center;color:var(--text);font-family:var(--serif);font-style:italic;font-size:19px;padding:0 24px}
@media (max-width:760px){.lb-prev,.lb-next{display:none}.lb-stage{padding:60px 0 90px}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);padding:clamp(130px,18vh,190px) var(--pad) clamp(70px,9vw,120px);align-items:start;max-width:1320px;margin:0 auto}
.about.no-portrait{grid-template-columns:minmax(0,760px);justify-content:center}
.about .portrait{position:sticky;top:110px;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--surface);border-radius:2px;box-shadow:var(--shadow-photo);outline:1px solid var(--line);outline-offset:10px}
.about .portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:saturate(.92);transform:scale(var(--portrait-zoom,1.3));transform-origin:50% 42%}
.about h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.5vw,76px);line-height:1.03;margin-bottom:34px}
.about .body p{margin-bottom:1.3em;font-size:16.5px;max-width:620px}
.about .body p:first-of-type{color:var(--ink);font-family:var(--serif);font-size:clamp(21px,2.1vw,26px);line-height:1.5;font-weight:400}
.about .body .story-h{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:14px}
.about .body .story-h::after{content:"";flex:0 0 48px;height:1px;background:var(--line-strong)}
.about .body .story-h:not(:first-child){margin-top:2.2em}
.about .body strong{color:var(--ink);font-weight:500}
.about .body em{font-style:italic}
.about .body p.scripture{font-family:var(--serif);font-style:normal;font-size:clamp(20px,1.9vw,23px);line-height:1.55;color:var(--ink);border-left:1px solid var(--accent);padding:4px 0 4px 22px;margin:2em 0 1.4em}
.about .body p.scripture em{color:var(--ink)}
.about .sig{font-family:var(--serif);font-style:italic;font-size:30px;margin-top:20px;color:var(--accent)}
@media (max-width:860px){.about{grid-template-columns:1fr;padding-top:110px;gap:40px}.about .portrait{position:relative;top:0;width:min(78%,360px);margin:0 auto;aspect-ratio:4/5;outline-offset:8px}.about h1{margin-bottom:24px}}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(36px,7vw,110px);padding:clamp(130px,18vh,190px) var(--pad) clamp(70px,9vw,120px)}
.contact h1{font-family:var(--serif);font-weight:300;font-size:clamp(40px,5.5vw,76px);line-height:1.03;margin-bottom:24px}
.contact .intro{color:var(--muted);max-width:420px}
.form .field{position:relative;margin-bottom:30px}
.form input,.form textarea{width:100%;border:0;border-bottom:1px solid var(--line-strong);background:transparent;padding:22px 0 10px;font:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color .4s,box-shadow .4s;caret-color:var(--accent);resize:vertical;border-radius:0}
.form textarea{min-height:140px}
.form label{position:absolute;left:0;top:22px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none;transition:all .35s var(--ease)}
.form input:focus,.form textarea:focus,.form input:focus-visible,.form textarea:focus-visible{border-color:var(--accent);box-shadow:0 1px 0 0 var(--accent);border-radius:0}
.form input:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 40px var(--bg) inset}
.form input:focus+label,.form input:not(:placeholder-shown)+label,.form textarea:focus+label,.form textarea:not(:placeholder-shown)+label{top:0;font-size:10px;color:var(--accent)}
.hp{position:absolute;left:-9999px}
.btn{display:inline-flex;align-items:center;gap:14px;background:transparent;color:var(--accent-hi);border:1px solid var(--accent);font-weight:400;padding:17px 34px;font:inherit;font-size:11px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;transition:background .4s,color .4s,gap .4s var(--ease)}
.btn:hover{background:var(--accent);color:var(--accent-ink);gap:20px}
.btn:disabled{opacity:.6}
.form-msg{color:var(--accent-hi);margin-top:20px;font-family:var(--serif);font-size:20px;font-style:italic;min-height:30px;transition:opacity .4s}
.form-msg.err{color:var(--danger);font-family:var(--sans);font-style:normal;font-size:14px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

/* footer */
.site-footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:60px var(--pad) 50px;text-align:center}
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:14px}
.footer-brand .ac-mark{width:46px;height:46px}
.footer-brand .brand-word{font-size:20px}
.footer-tag{font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:6px;font-size:18px}
.footer-meta{margin-top:26px;font-size:11px;letter-spacing:.14em;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
