/* ORA By NAD, shared base styles
   Designed by Claude Design. Converted to PHP (structure only; design preserved). */

:root{
  --cream:#EEE9E1; --cream-raised:#F4F1EB;
  /* Text + accent, deepened for legibility on the cream background.
     --taupe ≈ 5.4:1, --taupe-ink ≈ 8:1, --espresso highest. */
  --taupe:#655C52; --taupe-ink:#453F38; --espresso:#2A241F;
  /* --taupe-60 is the muted/secondary TEXT colour. It is now a solid tone
     (was rgba .6, which fell to ~2:1) and clears AA at ~4.7:1. */
  --taupe-60:#6E665B;
  /* Borders / hairlines / faint fills only, not for text. */
  --taupe-30:rgba(101,92,82,.45); --taupe-12:rgba(101,92,82,.12);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--taupe-ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--taupe);color:var(--cream)}
:focus-visible{outline:2px solid var(--taupe);outline-offset:3px}
@keyframes oraReveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
[data-reveal]{animation:oraReveal .8s cubic-bezier(.16,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){[data-reveal]{animation:none}}
section[data-warm="true"]{background:var(--cream-raised)}
@media(max-width:900px){ .d-only{display:none !important} }
@media(min-width:901px){ .m-only{display:none !important} }
@media(max-width:900px){
 .footer-bar{flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding-bottom:clamp(24px,4vw,36px) !important}
 .footer-bar > *{width:100%;text-align:center;flex:0 0 auto !important}
}
@media(min-width:901px){
 .footer-bar__credit{flex:1 1 200px}
}

/* ── Header + main offset (fixed nav clearance) ──────── */
.ora-main{
  /* logo + vertical nav padding + border + breathing room */
  padding-top:calc(clamp(40px,5.8vw,72px) + clamp(14px,2.4vw,28px) * 2 + 14px);
  padding-top:calc(clamp(40px,5.8vw,72px) + clamp(14px,2.4vw,28px) * 2 + 14px + env(safe-area-inset-top,0px));
}
nav[data-scrolled="true"]{padding-top:11px !important;padding-bottom:11px !important;box-shadow:0 10px 30px -24px rgba(74,68,61,.5)}
@media(max-width:420px){
  .ora-ig{letter-spacing:.12em !important}
}

/* ── Image slot (replaces <image-slot> web component) ──
   The wrapping element already paints the cream-raised frame + ring border,
   exactly as the original markup did. Drop a real photo at
   assets/img/<slot-id>.(jpg|png|webp) and img_slot() renders it automatically. */
.img-slot{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.img-slot img{width:100%;height:100%;object-fit:cover;display:block}
.img-slot__ph{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-60);text-align:center;padding:0 1.2em}

/* ── Gallery lightbox (shared: portfolio index + project pages) ── */
#pf-lightbox{align-items:stretch;justify-content:center;padding:clamp(12px,3vw,48px);padding-bottom:max(clamp(12px,3vw,48px),env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pf-lb-inner{max-width:820px;width:100%;margin:auto;display:flex;flex-direction:column}
.pf-lb-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:clamp(12px,1.8vw,20px);flex-shrink:0}
.pf-lb-frame{position:relative;display:flex;align-items:center;justify-content:center;background:var(--cream-raised);border:1px solid var(--taupe-30);overflow:hidden;width:100%}
.pf-lb-slide{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.pf-lb-slide img,.pf-lb-slide video{width:auto;height:auto;max-width:100%;max-height:min(70dvh,calc(100dvh - 200px));object-fit:contain;display:block}
.pf-lb-nav{position:absolute;bottom:clamp(10px,1.4vw,16px);z-index:2;font-family:var(--sans);font-size:clamp(18px,2vw,24px);color:var(--cream);background:rgba(42,36,31,.72);width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:background .35s ease}
.pf-lb-nav:hover{background:var(--espresso)}
.pf-lb-prev{left:clamp(10px,1.4vw,16px)}
.pf-lb-next{right:clamp(10px,1.4vw,16px)}
.pf-lb-nav[data-hidden="true"]{display:none}
.pf-lb-thumbs{display:flex;gap:10px;margin-top:clamp(12px,1.6vw,18px);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;flex-shrink:0}
.pf-lb-thumbs[data-hidden="true"]{display:none}
.pf-lb-thumb{flex:0 0 auto;height:clamp(52px,8vw,72px);width:auto;min-width:clamp(40px,6vw,54px);border:1px solid var(--taupe-30);background:var(--cream-raised);overflow:hidden;opacity:.55;transition:opacity .3s ease,border-color .3s ease;display:flex;align-items:center;justify-content:center}
.pf-lb-thumb[data-active="true"]{opacity:1;border-color:var(--taupe)}
.pf-lb-thumb img{width:auto;height:100%;max-width:clamp(52px,8vw,72px);object-fit:contain;display:block}
.pf-lb-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;margin-top:clamp(14px,1.8vw,22px);flex-shrink:0}
.pf-lb-foot .pf-close{min-height:44px;padding:8px 4px}
@media(min-width:901px){
 #pf-lightbox{padding:clamp(18px,2.5vh,28px) clamp(20px,4vw,48px)}
 .pf-lb-inner{max-width:min(720px,100%)}
 .pf-lb-head{margin-bottom:12px}
 .pf-lb-head #pf-lb-title{font-size:clamp(20px,2vw,28px)!important;line-height:1.12!important}
 .pf-lb-head #pf-lb-meta{margin-top:6px!important}
 .pf-lb-frame{flex:0 1 auto;width:100%;max-width:100%;margin-inline:auto}
 .pf-lb-slide img,.pf-lb-slide video{max-height:calc(100dvh - 260px)}
 .pf-lb-thumbs{margin-top:12px}
 .pf-lb-thumb{height:clamp(52px,5vw,64px);min-width:clamp(40px,5vw,52px)}
 .pf-lb-thumb img{max-width:clamp(52px,5vw,64px)}
 .pf-lb-foot{margin-top:12px}
}