:root {
    --crimson:      #7B1818;
    --crimson-deep: #4E0E0E;
    --crimson-mid:  #8F2020;
    --cream:        #F6F1E9;
    --cream-dark:   #EDE5D4;
    --cream-mid:    #F0EAE0;
    --gold:         #C49A28;
    --gold-light:   #D4AF50;
    --gold-pale:    #EDD98A;
    --ink:          #1C1510;
    --muted:        #8A7E71;
    --soft:         #C4B8A8;
    --white:        #FDFAF5;
  }

.banner{
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	height: auto;
	max-height: 500px;
  object-fit: cover;
  object-position: top;
}


/* ── DATETIME BAR ────────────────────────────── */
  .datetime-bar {
    background: var(--crimson);
    display: flex;
  }
  .dt-block {
    flex: 1;
    padding: 22px 32px;
    border-right: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 18px;
  }
  .dt-block:last-child { border-right: none; }
  .dt-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1px solid rgba(196,154,40,0.35);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
  }
  .dt-icon svg { width: 16px; height: 16px; stroke: var(--gold-light); fill: none; stroke-width: 1.5; }
  .dt-label {
    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(245,240,232,0.4); margin-bottom: 5px;
  }
  .dt-value {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px; font-weight: 400;
    color: var(--cream); line-height: 1;
  }
  .dt-sub {
    font-size: 11px; color: rgba(245,240,232,0.5); margin-top: 3px;
    letter-spacing: 0.06em;
  }


    /* ── BODY LAYOUT ─────────────────────────────── */
  .page-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 0px 100px;
  }

  /* ── SECTION LABELS ──────────────────────────── */
  .section-label {
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold);
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
  }
  .section-label::after {
    content: ''; flex: 0 0 28px; height: 1px; background: var(--gold); opacity: 0.4;
  }
  h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px; font-weight: 400; line-height: 1.2;
    margin-bottom: 20px; color: var(--ink);
  }

  p {
    font-size: 14px; line-height: 1.9; color: #4E4238;
    margin-bottom: 16px;
  }



    /* ── DESCRIPTION ─────────────────────────────── */
  .description { margin-bottom: 56px; }

    /* ornament */
  .ornament {
    text-align: center; font-family: 'Cormorant Garamond', serif;
    font-size: 16px; color: var(--gold); opacity: 0.45;
    margin: 40px 0; letter-spacing: 0.4em;
  }



    .section-inner {
         max-width: var(--max);
         margin: 0 auto;
      }

      .section-label {
         font-size: 11px;
         letter-spacing: 0.2em;
         text-transform: uppercase;
         color: var(--ox);
         margin-bottom: 14px;
         font-weight: 500;
      }

      .section-title {
         font-family: var(--serif);
         font-size: clamp(28px, 4vw, 44px);
         font-weight: 500;
         line-height: 1.2;
         color: var(--ink);
         margin-bottom: 20px;
      }

      .divider {
         width: 48px;
         height: 2px;
         background: linear-gradient(to right, var(--ox), transparent);
         margin-bottom: 32px;
         border-radius: 2px;
      }

		 /* ── Gallery ────────────────────────────────────── */
      #gallery {
         background: var(--sand);
      }

      .gallery-grid {
         display: flex;
			flex-wrap: wrap;
         gap: 12px;
         margin-top: 36px;
      }

      .gallery-item {
         position: relative;
         aspect-ratio: 1/1;
         overflow: hidden;
         border-radius: var(--r);
         cursor: pointer;
         background: var(--sand-dark);
			width: calc(100% / 3 - 24px );
      }

      .gallery-item img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.4s ease;
      }

      .gallery-item:hover img {
         transform: scale(1.05);
      }

      .gallery-item:focus-visible {
         outline: 2px solid var(--ox);
         outline-offset: 2px;
      }

      .gallery-overlay {
         position: absolute;
         inset: 0;
         background: linear-gradient(to top, rgba(74, 16, 16, 0.75) 0%, transparent 60%);
         opacity: 0;
         transition: opacity 0.3s;
         display: flex;
         align-items: flex-end;
         padding: 12px;
      }

      .gallery-item:hover .gallery-overlay,
      .gallery-item:focus-visible .gallery-overlay {
         opacity: 1;
      }

   

      /* placeholder gallery images (SVG patterns) */
      .gallery-placeholder {
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-family: var(--serif);
         font-size: 14px;
         color: var(--ink-soft);
         text-align: center;
         padding: 16px;
         line-height: 1.5;
      }


/* ── ANIMATIONS ──────────────────────────────── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  .datetime-bar    { animation: fadeUp 0.6s 0.3s ease both; }
  .page-body > *   { animation: fadeUp 0.7s 0.45s ease both; }
  .page-body > aside { animation-delay: 0.55s; }


    /* ── RESPONSIVE ──────────────────────────────── */
  @media (max-width: 720px) {
    .datetime-bar { flex-direction: column; }
    .dt-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .page-body { padding: 40px 20px 60px; }
  }