/* ============================================================
   Come Glow With Me - shared shell
   Chrome every page needs: notice bar, announcement, header and nav,
   logo lockup, photo frames, lightbox, form fields, footer.

   Load order matters: glow.css (tokens) -> shell.css (chrome) -> the
   page's own inline <style>. Page rules must stay last so they can
   override chrome, which is how the homepage already behaves.
   ============================================================ */


/* ==================== notice bar ==================== */

/* ---- notice: this is not RIMAN corporate ---- */
.notice {
  background: var(--ink); color: color-mix(in srgb, var(--paper) 74%, transparent);
  padding: 10px var(--gutter);
}
.notice-in {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: baseline; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.notice-k { color: var(--gold-leaf); flex: none; }
.notice-t { font-size: 12.5px; line-height: 1.5; margin: 0; }
.notice-t a { color: var(--gold-leaf); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold-leaf) 40%, transparent); transition: border-color .3s var(--ease); }
.notice-t a:hover { border-bottom-color: var(--gold-leaf); }
@media (max-width: 720px) {
  .notice-in { justify-content: flex-start; gap: 8px; }
  .notice-t { font-size: 12px; }
}


/* ==================== announcement bar ==================== */

/* ---- announcement ---- */
.ann {
  background: var(--sage-deep); color: var(--paper);
  text-align: center; padding: 9px var(--gutter);
}
.ann-in { display: inline-flex; align-items: center; gap: 10px; opacity: .92; }
.ann-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-leaf); flex: none; }
@media (max-width: 640px) { .ann-dot, .ann-2nd { display: none; } }


/* ==================== header + nav ==================== */

/* ---- header ---- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid color-mix(in srgb, var(--sage-mist) 70%, transparent);
}
.hdr-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); height: 74px;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 14px; font-weight: 500; text-decoration: none;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  padding: 6px 0; position: relative;
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.hdr-cta { display: flex; align-items: center; gap: var(--s4); }
.menu-btn { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }

@media (max-width: 940px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .hdr-cta .btn { display: none; }
}


/* ==================== logo lockup ==================== */

/* ---- official logo lockup (raster wordmark) ---- */
.logo-img { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img img { height: 34px; width: auto; display: block; }
.logo-img--sm img { height: 30px; }
@media (max-width: 940px) { .hdr .logo-img img { height: 27px; } }


/* ==================== photo frames ==================== */

.frame {
  position:relative; aspect-ratio: 1/1; border-radius: 3px; margin:0;
  background: linear-gradient(155deg, var(--paper), color-mix(in srgb,var(--wash) 70%, var(--paper)));
  padding: clamp(10px,0.9vw,15px);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  box-shadow: var(--lift-1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
button.frame { cursor: zoom-in; font: inherit; text-align:inherit; width:100%; }
.frame:hover, .frame:focus-visible { transform: translateY(-5px); box-shadow: var(--lift-2); }
.frame .mat {
  position:relative; height:100%; border-radius:1px; overflow:hidden;
  background: color-mix(in srgb, var(--wash) 60%, var(--paper));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-leaf) 55%, transparent);
  display:grid; place-items:center;
}
.frame .mat img { width:100%; height:100%; object-fit:contain; padding:7px; }
.plate {
  position:absolute; left:50%; bottom:9px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:5px 12px; border-radius:100px;
  background: color-mix(in srgb, var(--ink) 74%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.plate .u-label { font-size:9px; letter-spacing:.15em; color: color-mix(in srgb,var(--paper) 82%, transparent); }
.plate .when { color: var(--gold-leaf); }
.plate .dot { width:3px;height:3px;border-radius:50%;background:var(--gold-leaf); }


/* ==================== lightbox ==================== */

/* ---- lightbox (click to enlarge) ---- */
.lb { position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  padding: clamp(16px,4vw,52px);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s var(--ease); }
.lb.is-open { display: grid; opacity: 1; }
.lb-fig { position: relative; margin:0; max-width: min(1000px, 100%); max-height: 100%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  transform: scale(.97); transition: transform .35s var(--ease); }
.lb.is-open .lb-fig { transform: scale(1); }
.lb-img { max-width:100%; max-height: 82vh; border-radius:4px;
  border:1px solid color-mix(in srgb,var(--gold-leaf) 45%, transparent);
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.6); background: var(--paper); }
.lb-cap { color: color-mix(in srgb,var(--paper) 78%, transparent); }
.lb-cap .when { color: var(--gold-leaf); }
.lb-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid color-mix(in srgb,var(--gold-leaf) 50%, transparent);
  background: var(--ink); color: var(--paper); cursor: pointer; font-size: 20px; line-height: 1;
  display:grid; place-items:center; transition: background .3s var(--ease), transform .3s var(--ease); }
.lb-close:hover { background: var(--sage-deep); transform: rotate(90deg); }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  border:1px solid color-mix(in srgb,var(--gold-leaf) 40%, transparent); background: color-mix(in srgb,var(--ink) 70%, transparent);
  color:var(--paper); cursor:pointer; font-size:20px; display:grid; place-items:center;
  transition: background .3s var(--ease); }
.lb-nav:hover { background: var(--sage-deep); }
.lb-prev { left: clamp(-8px,-2vw,-8px); } .lb-next { right: clamp(-8px,-2vw,-8px); }
@media (max-width: 620px){ .lb-prev{left:2px;} .lb-next{right:2px;} .lb-close{top:2px;right:2px;} }


/* ==================== form fields ==================== */

.fld { display:flex; flex-direction:column; gap:7px; }
.fld.full { grid-column:1 / -1; }
.fld label { font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-leaf); }
.fld-rng { white-space:nowrap; color:color-mix(in srgb, var(--gold-leaf) 70%, transparent); }
.fld input, .fld select, .fld textarea { font-family:var(--sans); font-size:15px; color:var(--paper);
  background: color-mix(in srgb, var(--paper) 8%, transparent); border:0;
  border-bottom:1px solid color-mix(in srgb,var(--gold-leaf) 40%, transparent);
  border-radius:6px 6px 0 0; padding:11px 12px; width:100%;
  transition: border-color .3s var(--ease), background .3s var(--ease); }
.fld textarea { resize:vertical; min-height:70px; }
.fld input::placeholder, .fld textarea::placeholder { color:color-mix(in srgb,var(--paper) 42%, transparent); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline:none;
  background: color-mix(in srgb, var(--paper) 12%, transparent); border-bottom-color: var(--gold-leaf); }
.fld select option { color:var(--ink); }


/* ==================== footer ==================== */

/* ---- footer ---- */
.ftr { background: var(--ink); color: var(--paper); padding-block: clamp(56px,7vw,88px) var(--s7); }
.ftr-top { display: grid; grid-template-columns: minmax(0,1.3fr) repeat(3, minmax(0,.7fr)); gap: clamp(28px,4vw,56px); padding-bottom: var(--s8); border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
.ftr-blurb { margin: var(--s5) 0 var(--s6); font-size: 14.5px; line-height: 1.68; color: color-mix(in srgb, var(--paper) 66%, transparent); max-width: 34ch; }
.ftr-h { color: var(--gold-leaf); margin-bottom: var(--s4); }
.ftr-list { list-style: none; margin: 0; padding: 0; }
.ftr-list li { margin-bottom: 10px; }
.ftr-list a { font-size: 14px; text-decoration: none; color: color-mix(in srgb, var(--paper) 72%, transparent); transition: color .3s var(--ease); }
.ftr-list a:hover { color: var(--gold-leaf); }
.signup { display: flex; gap: 8px; margin-top: var(--s3); }
.signup input {
  flex: 1; min-width: 0; background: transparent; color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  padding: 12px 14px; font-family: var(--sans); font-size: 14px; border-radius: 999px;
  transition: border-color .3s var(--ease);
}
.signup input::placeholder { color: color-mix(in srgb, var(--paper) 40%, transparent); }
.signup input:focus { border-color: var(--gold-leaf); outline: none; }
.signup button { border: 0; }
.ftr-legal { padding-top: var(--s6); display: grid; gap: var(--s4); }
.ftr-legal p { margin: 0; font-size: 12.5px; line-height: 1.68; color: color-mix(in srgb, var(--paper) 50%, transparent); max-width: 96ch; }
.ftr-legal a { color: color-mix(in srgb, var(--gold-leaf) 82%, transparent); }
@media (max-width: 880px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr-top { grid-template-columns: 1fr; } }

/* ==================== mobile menu ====================
   The panel is built by shell.js from the existing nav links, so it needs no
   markup of its own and can never drift out of sync with the desktop nav.
   It is absolutely positioned inside .hdr, which is sticky with z-index 60,
   so it sits above the page but below the lightbox (z-index 200). */

.navdrawer {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--sage-deep);
  border-bottom: 1px solid color-mix(in srgb, var(--gold-leaf) 30%, transparent);
  box-shadow: var(--lift-3);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
  max-height: calc(100dvh - 74px); overflow-y: auto;
}
.hdr.is-menu-open .navdrawer { opacity: 1; transform: none; }

.navdrawer-in {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s5) var(--gutter) var(--s7);
  display: flex; flex-direction: column;
}
.navdrawer-link {
  font-family: var(--display); font-weight: 300; font-size: 1.5rem;
  letter-spacing: -.02em; color: var(--paper); text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  transition: color .3s var(--ease);
}
.navdrawer-link:last-of-type { border-bottom: 0; }
.navdrawer-link:hover, .navdrawer-link:focus-visible { color: var(--gold-leaf); }
.navdrawer-cta { margin-top: var(--s5); align-self: flex-start; }

/* The panel only exists below the breakpoint that hides the nav. Above it,
   stay out of the way entirely even if a stale class is left on the header. */
@media (min-width: 941px) { .navdrawer { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .navdrawer { transition: none; }
}


/* ==================== breadcrumbs ====================
   Needed by every child page, and required to back BreadcrumbList schema -
   Google wants the markup to mirror a breadcrumb the reader can actually see. */

.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 var(--s5); padding: 0; list-style: none;
}
.crumb li { display: flex; align-items: center; gap: 8px; }
.crumb li + li::before { content: "›"; color: color-mix(in srgb, var(--ink) 40%, transparent); }
.crumb a { color: color-mix(in srgb, var(--ink) 62%, transparent); text-decoration: none; }
.crumb a:hover { color: var(--gold); }
.crumb [aria-current="page"] { color: var(--ink); }


/* ==================== form fields on a light ground ====================
   The base .fld above is built for the sage-deep booking panel: paper-coloured
   text on a translucent white fill. On a light page that is white on white.
   Any form outside .rsvp needs this modifier on its wrapper. */

.fld--light label { color: var(--gold); }
.fld--light input, .fld--light select, .fld--light textarea {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 28%, transparent);
}
.fld--light input::placeholder, .fld--light textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
}
.fld--light input:focus, .fld--light select:focus, .fld--light textarea:focus {
  border-bottom-color: var(--gold);
}