/* 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}
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}
img{max-width:100%;display:block}
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 ──────────────────────────────────────────── */
nav[data-scrolled="true"]{padding-top:13px;padding-bottom:13px;box-shadow:0 10px 30px -24px rgba(74,68,61,.5)}

/* ── Overlay menu ────────────────────────────────────── */
.ora-overlay{opacity:0;visibility:hidden;transition:opacity .55s cubic-bezier(.16,.7,.2,1),visibility .55s}
.ora-overlay[data-open="true"]{opacity:1;visibility:visible}
.ora-ovrow{opacity:0;transform:translateY(18px)}
.ora-overlay[data-open="true"] .ora-ovrow{opacity:1;transform:none;transition:opacity .6s ease,transform .65s cubic-bezier(.16,.7,.2,1)}
.ora-overlay[data-open="true"] .ora-ovrow:nth-child(1){transition-delay:.10s}
.ora-overlay[data-open="true"] .ora-ovrow:nth-child(2){transition-delay:.16s}
.ora-overlay[data-open="true"] .ora-ovrow:nth-child(3){transition-delay:.22s}
.ora-overlay[data-open="true"] .ora-ovrow:nth-child(4){transition-delay:.28s}
.ora-overlay[data-open="true"] .ora-ovrow:nth-child(5){transition-delay:.34s}
.ora-overlay[data-open="true"] .ora-ovrow:nth-child(6){transition-delay:.40s}
.mlabel{background-image:linear-gradient(var(--taupe),var(--taupe));background-repeat:no-repeat;background-position:0 96%;background-size:0% 1px;transition:background-size .5s cubic-bezier(.16,.7,.2,1)}
.ora-overlay a:hover .mlabel{background-size:100% 1px}
.ora-overlay a[data-cur="true"] .mlabel{background-size:100% 1px}
@media(prefers-reduced-motion:reduce){.ora-ovrow{opacity:1 !important;transform:none !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}