*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --gold:        #C9A96E;
      --gold-light:  #E8D5B0;
      --gold-deep:   #8B6B3D;
      --ink:         #1C1917;
      --ink-soft:    #44403C;
      --ink-muted:   #78716C;
      --paper:       #FDFAF5;
      --paper-warm:  #F5EFE4;
      --paper-card:  #FFFEF9;
      --border:      rgba(201,169,110,0.2);
      --border-soft: rgba(201,169,110,0.12);
      --shadow-card: 0 4px 24px rgba(28,25,23,0.08), 0 1px 4px rgba(28,25,23,0.04);
      --shadow-hover:0 12px 40px rgba(28,25,23,0.14), 0 2px 8px rgba(28,25,23,0.06);
      --radius-card: 20px;
      --radius-sm:   10px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--paper);
      color: var(--ink);
      min-height: 100vh;
    }

    /* ── Ambient ── */
    .bg-orb { position:fixed; border-radius:50%; pointer-events:none; z-index:0; filter:blur(80px); opacity:0.35; }
    .orb-1  { width:600px; height:600px; background:radial-gradient(circle,#E8D5B0,transparent 70%); top:-200px; right:-100px; }
    .orb-2  { width:500px; height:500px; background:radial-gradient(circle,#DDD0C0,transparent 70%); bottom:-100px; left:-80px; }
    .bg-grain {
      position:fixed; inset:0; pointer-events:none; z-index:0;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      background-size:180px; opacity:0.6;
    }

    /* ── Header ── */
    .site-header {
      position:fixed; top:0; left:0; right:0; z-index:100;
      background:rgba(253,250,245,0.85);
      backdrop-filter:blur(20px) saturate(180%);
      border-bottom:1px solid var(--border);
    }
    .header-inner {
      max-width:1100px; margin:0 auto; padding:0 32px;
      height:64px; display:flex; align-items:center; justify-content:space-between;
    }
    .logo {
      display:flex; align-items:center; gap:10px;
      color:var(--gold-deep);
      font-family:'Cormorant Garamond',serif;
      font-size:22px; font-weight:600; letter-spacing:0.02em;
      text-decoration:none;
    }
    .nav-links { display:flex; align-items:center; gap:6px; }
    .nav-link {
      padding:8px 16px; border-radius:100px; border:none; background:transparent;
      color:var(--ink-muted); font-family:'DM Sans',sans-serif; font-size:13.5px;
      cursor:pointer; text-decoration:none; transition:all 0.2s;
      display:inline-flex; align-items:center; gap:6px;
    }
    .nav-link:hover { background:var(--paper-warm); color:var(--ink); }
    .nav-link.active { color:var(--gold-deep); font-weight:500; }

    /* ── Page ── */
    .page {
      position:relative; z-index:1;
      max-width:1100px; margin:0 auto;
      padding:104px 32px 80px;
    }

    /* ── Page Header ── */
    .page-header {
      display:flex; align-items:flex-end; justify-content:space-between;
      margin-bottom:48px; padding-bottom:24px;
      border-bottom:1px solid var(--border);
      flex-wrap:wrap; gap:16px;
    }
    /* Guest: centre the header text */
    .page-header.guest-centered {
      justify-content:center;
      text-align:center;
    }
    .page-header.guest-centered .page-header-left h1 {
      font-size:clamp(36px,5vw,56px);
    }
    .page-header-left h1 {
      font-family:'Cormorant Garamond',serif;
      font-size:clamp(32px,5vw,52px);
      font-weight:400; color:var(--ink); line-height:1.1;
    }
    .page-header-left p {
      font-size:14px; color:var(--ink-muted); margin-top:8px; line-height:1.6;
    }

    /* ── Add Entry Button (admin only) ── */
    .btn-add {
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 22px; border:none; border-radius:100px;
      background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
      color:#FFF9EE; font-family:'DM Sans',sans-serif;
      font-size:13.5px; font-weight:500; cursor:pointer;
      box-shadow:0 2px 12px rgba(139,107,61,0.3);
      transition:all 0.2s;
    }
    .btn-add:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(139,107,61,0.4); }

    /* ── Empty State ── */
    .empty {
      text-align:center; padding:80px 20px; color:var(--ink-muted);
    }
    .empty svg { opacity:0.3; margin-bottom:20px; }
    .empty h3 {
      font-family:'Cormorant Garamond',serif;
      font-size:24px; font-weight:400; margin-bottom:8px;
    }
    .empty p { font-size:14px; }

    /* ── Timeline ── */
    .timeline {
      display:flex; flex-direction:column; gap:0;
      position:relative;
    }

    /* Vertical gold line running down the left */
    .timeline::before {
      content:""; position:absolute;
      left:28px; top:0; bottom:0; width:1.5px;
      background:linear-gradient(to bottom, var(--gold), rgba(201,169,110,0.1));
    }

    .timeline-item {
      display:flex; gap:32px; align-items:flex-start;
      padding-bottom:48px; position:relative;
      animation:fadeUp 0.4s ease both;
    }
    .timeline-item:last-child { padding-bottom:0; }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Dot on the timeline */
    .timeline-dot {
      width:18px; height:18px; border-radius:50%; flex-shrink:0;
      background:var(--paper-card); border:2px solid var(--gold);
      margin-top:22px; position:relative; z-index:1;
      box-shadow:0 0 0 4px var(--paper);
      transition:transform 0.2s;
    }
    .timeline-item:hover .timeline-dot {
      transform:scale(1.3);
      background:var(--gold);
    }

    /* Card */
    .history-card {
      flex:1; background:var(--paper-card);
      border:1px solid var(--border); border-radius:var(--radius-card);
      overflow:hidden; box-shadow:var(--shadow-card);
      transition:box-shadow 0.25s, transform 0.25s;
      position:relative;
    }
    .history-card:hover {
      box-shadow:var(--shadow-hover);
      transform:translateY(-2px);
    }
    /* Gold top accent */
    .history-card::before {
      content:""; position:absolute; top:0; left:24px; right:24px;
      height:2px;
      background:linear-gradient(90deg,transparent,var(--gold),transparent);
    }

    .history-card-image {
      width:100%; aspect-ratio:16/7;
      object-fit:cover; display:block;
      background:var(--paper-warm);
    }
    .history-card-image-placeholder {
      width:100%; aspect-ratio:16/7;
      background:var(--paper-warm);
      display:flex; align-items:center; justify-content:center;
      color:var(--gold-light);
    }

    .history-card-body { padding:24px 28px 20px; }
    .history-card-title {
      font-family:'Cormorant Garamond',serif;
      font-size:22px; font-weight:600; color:var(--ink);
      line-height:1.25; margin-bottom:10px;
    }
    .history-card-desc {
      font-size:14px; color:var(--ink-soft); line-height:1.75;
      white-space:pre-wrap;
    }

    /* Admin action row */
    .history-card-actions {
      display:flex; gap:8px; padding:0 28px 20px;
    }
    .btn-sm {
      padding:6px 14px; border-radius:100px; font-size:12px;
      font-family:'DM Sans',sans-serif; cursor:pointer;
      transition:all 0.15s;
    }
    .btn-edit {
      border:1px solid var(--border); background:var(--paper-warm);
      color:var(--ink-soft);
    }
    .btn-edit:hover { background:var(--gold-light); color:var(--ink); border-color:var(--gold); }
    .btn-delete {
      border:1px solid rgba(220,38,38,0.2); background:transparent; color:#DC2626;
    }
    .btn-delete:hover { background:#FEF2F2; }

    /* ── Modal (add / edit entry) ── */
    .entry-overlay {
      position:fixed; inset:0;
      background:rgba(28,25,23,0.5);
      backdrop-filter:blur(8px);
      display:flex; align-items:center; justify-content:center;
      z-index:1000; opacity:0; pointer-events:none;
      transition:opacity 0.2s;
    }
    .entry-overlay.open { opacity:1; pointer-events:all; }

    .entry-modal {
      background:var(--paper-card); border:1px solid var(--border);
      border-radius:28px; width:520px; max-width:calc(100vw - 40px);
      max-height:90vh; overflow-y:auto;
      box-shadow:0 32px 80px rgba(28,25,23,0.2);
      position:relative;
      transform:translateY(16px) scale(0.97);
      transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
      overflow:hidden;
    }
    .entry-overlay.open .entry-modal { transform:translateY(0) scale(1); }
    .entry-modal::before {
      content:""; display:block; width:100%; height:3px;
      background:linear-gradient(90deg,transparent 10%,var(--gold) 40%,var(--gold) 60%,transparent 90%);
    }

    .entry-modal-inner { padding:28px; overflow-y:auto; max-height:calc(90vh - 3px); }

    .entry-modal-title {
      font-family:'Cormorant Garamond',serif;
      font-size:22px; font-weight:600; margin-bottom:24px; color:var(--ink);
    }
    .modal-close {
      position:absolute; top:16px; right:16px;
      background:var(--paper-warm); border:1px solid var(--border);
      border-radius:50%; width:32px; height:32px;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; color:var(--ink-muted); transition:all 0.15s; z-index:10;
    }
    .modal-close:hover { background:var(--gold-light); color:var(--ink); }

    /* Image upload area */
    .image-upload-area {
      width:100%; aspect-ratio:16/7; border-radius:var(--radius-sm);
      border:2px dashed var(--border); background:var(--paper-warm);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:8px; cursor:pointer; transition:all 0.2s;
      overflow:hidden; position:relative; margin-bottom:20px;
    }
    .image-upload-area:hover { border-color:var(--gold); background:rgba(201,169,110,0.05); }
    .image-upload-area img {
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    }
    .image-upload-overlay {
      position:absolute; inset:0; background:rgba(139,107,61,0.6);
      display:flex; align-items:center; justify-content:center;
      color:#FFF; font-size:13px; font-weight:500;
      opacity:0; transition:opacity 0.2s;
    }
    .image-upload-area:hover .image-upload-overlay { opacity:1; }
    .upload-hint { color:var(--ink-muted); font-size:13px; text-align:center; }
    .upload-hint svg { margin-bottom:6px; }

    .field-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
    .field-group label {
      font-size:11px; font-weight:500; color:var(--ink-muted);
      text-transform:uppercase; letter-spacing:0.06em;
    }
    .field-group input, .field-group textarea {
      padding:10px 14px; border:1px solid var(--border);
      border-radius:var(--radius-sm); background:var(--paper);
      color:var(--ink); font-family:'DM Sans',sans-serif; font-size:14px;
      outline:none; transition:border-color 0.2s, box-shadow 0.2s;
      width:100%; resize:vertical;
    }
    .field-group input:focus, .field-group textarea:focus {
      border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,169,110,0.12);
    }
    .field-group input::placeholder, .field-group textarea::placeholder { color:var(--gold-light); }

    .modal-footer {
      display:flex; justify-content:flex-end; gap:8px;
      padding-top:16px; border-top:1px solid var(--border-soft);
      margin-top:8px;
    }
    .btn-ghost-sm {
      padding:8px 16px; border:1px solid var(--border); border-radius:100px;
      background:transparent; color:var(--ink-muted);
      font-family:'DM Sans',sans-serif; font-size:13px; cursor:pointer;
      transition:all 0.2s;
    }
    .btn-ghost-sm:hover { background:var(--paper-warm); }
    .btn-primary {
      padding:9px 20px; border:none; border-radius:100px;
      background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);
      color:#FFF9EE; font-family:'DM Sans',sans-serif;
      font-size:13.5px; font-weight:500; cursor:pointer;
      box-shadow:0 2px 12px rgba(139,107,61,0.3); transition:all 0.2s;
    }
    .btn-primary:hover { transform:translateY(-1px); }
    .btn-primary:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

    /* ── Admin bar ── */
    #admin-bar {
      position:fixed; bottom:24px; right:24px; z-index:500;
      display:flex; align-items:center; gap:12px;
      background:var(--ink); color:var(--paper);
      padding:10px 16px; border-radius:100px; font-size:12.5px;
      box-shadow:0 8px 24px rgba(28,25,23,0.25);
      animation:slideUp 0.3s ease;
    }
    #admin-bar span { display:flex; align-items:center; gap:6px; opacity:0.85; }
    #admin-bar button {
      background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.15);
      border-radius:100px; color:var(--paper); font-family:'DM Sans',sans-serif;
      font-size:12px; padding:4px 12px; cursor:pointer; transition:background 0.15s;
    }
    #admin-bar button:hover { background:rgba(255,255,255,0.22); }

    /* ── Toast ── */
    .toast {
      position:fixed; bottom:32px; left:50%;
      transform:translateX(-50%) translateY(20px);
      background:var(--ink); color:var(--paper);
      padding:12px 22px; border-radius:100px; font-size:13px;
      z-index:2000; opacity:0; transition:all 0.3s ease;
      pointer-events:none; white-space:nowrap;
    }
    .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

    @keyframes slideUp {
      from { transform:translateY(12px); opacity:0; }
      to   { transform:translateY(0); opacity:1; }
    }

    /* ── Responsive ── */
    @media (max-width: 600px) {
      .header-inner, .page { padding-left:20px; padding-right:20px; }
      .timeline::before { left:18px; }
      .timeline-dot { width:14px; height:14px; margin-top:24px; }
      .timeline-item { gap:20px; }
    }


    /* ── Language Toggle Button ───────────────────────────── */
    .lang-btn {
      padding: 7px 14px;
      border: 1px solid var(--border);
      border-radius: 100px;
      background: transparent;
      color: var(--gold-deep);
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      letter-spacing: 0.02em;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .lang-btn:hover {
      background: var(--paper-warm);
      border-color: var(--gold);
    }
    /* RTL adjustments */
    [dir="rtl"] .logo { flex-direction: row-reverse; }
    [dir="rtl"] .nav-links { flex-direction: row-reverse; }
    [dir="rtl"] .header-inner { flex-direction: row-reverse; }
    [dir="rtl"] .page-header { flex-direction: row-reverse; }
    [dir="rtl"] .timeline-item { flex-direction: row-reverse; }
    [dir="rtl"] .ann-date::before { order: 1; }
    [dir="rtl"] .section-label::before { order: 1; }
    [dir="rtl"] .section-label::after  { order: -1; }
    [dir="rtl"] .file-grid { direction: rtl; }
    [dir="rtl"] .modal-footer { flex-direction: row-reverse; }
    [dir="rtl"] .confirm-btns { flex-direction: row-reverse; }

    /* ── Custom Confirm Dialog ─────────────────────────────── */
    .confirm-overlay {
      position:fixed;inset:0;z-index:9000;
      background:rgba(28,25,23,0.45);
      backdrop-filter:blur(6px);
      display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;
      transition:opacity 0.18s ease;
    }
    .confirm-overlay.open { opacity:1;pointer-events:all; }
    .confirm-box {
      background:var(--paper-card);
      border:1px solid var(--border);
      border-radius:20px;
      padding:28px 28px 22px;
      width:340px;max-width:calc(100vw - 40px);
      box-shadow:0 24px 64px rgba(28,25,23,0.18);
      position:relative;overflow:hidden;
      transform:scale(0.93) translateY(10px);
      transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
      text-align:center;
    }
    .confirm-overlay.open .confirm-box { transform:scale(1) translateY(0); }
    .confirm-box::before {
      content:"";display:block;position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,transparent 10%,#DC2626 40%,#DC2626 60%,transparent 90%);
    }
    .confirm-icon {
      width:48px;height:48px;border-radius:50%;
      background:#FEF2F2;border:1px solid rgba(220,38,38,0.15);
      display:flex;align-items:center;justify-content:center;
      margin:0 auto 16px;color:#DC2626;
    }
    .confirm-title {
      font-family:'Cormorant Garamond',serif;
      font-size:20px;font-weight:600;color:var(--ink);margin-bottom:8px;
    }
    .confirm-msg {
      font-size:13.5px;color:var(--ink-muted);line-height:1.6;margin-bottom:22px;
    }
    .confirm-btns { display:flex;gap:10px;justify-content:center; }
    .confirm-cancel {
      flex:1;padding:9px 0;border:1px solid var(--border);border-radius:100px;
      background:transparent;color:var(--ink-soft);
      font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;transition:all 0.15s;
    }
    .confirm-cancel:hover { background:var(--paper-warm); }
    .confirm-delete {
      flex:1;padding:9px 0;border:none;border-radius:100px;
      background:linear-gradient(135deg,#EF4444,#DC2626);
      color:#FFF;font-family:'DM Sans',sans-serif;font-size:13px;
      font-weight:500;cursor:pointer;
      box-shadow:0 2px 10px rgba(220,38,38,0.3);transition:all 0.15s;
    }
    .confirm-delete:hover { transform:translateY(-1px);box-shadow:0 4px 16px rgba(220,38,38,0.4); }

    /* ── Skeleton loader ───────────────────────────────── */
    .skeleton {
      background: linear-gradient(90deg, var(--paper-warm) 25%, #EDE7DA 50%, var(--paper-warm) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 8px;
    }
    @keyframes shimmer { to { background-position: -200% 0; } }