:root{
  --paper:#d2b48c;
  --ink:#ffd700;
  --tan:#d8c3a5;
  --brown:#8b6b4f;
  --gold:#c9a24a;
  --shadow:rgba(0,0,0,.08);
  --card:rgba(255,255,255,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 900px at 10% 10%, rgba(201,162,74,.14), transparent 60%),
    radial-gradient(1000px 700px at 90% 20%, rgba(139,107,79,.18), transparent 55%),
    linear-gradient(180deg, #d2691e, var(--paper));
  min-height:100vh;
  line-height:1.55;
}

a{color:inherit}
a:hover{opacity:.9}
.container{max-width:1100px;margin:0 auto;padding:24px}

.topbar{
  position:sticky;top:0;z-index:20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(245,241,232,.95), rgba(245,241,232,.75));
  border-bottom:1px solid rgba(42,33,24,.08);
}

.brand{
  display:flex;align-items:center;gap:14px;
  padding:14px 24px;
}
.brand .mark{
  width:42px;height:42px;border-radius:12px;
  background: linear-gradient(135deg, var(--tan), rgba(201,162,74,.65));
  box-shadow:0 10px 25px var(--shadow);
  border:1px solid rgba(42,33,24,.10);
}
.brand .title{
  font-size:20px;font-weight:700;letter-spacing:.2px;
}
.brand .subtitle{
  font-size:13px;opacity:.8;margin-top:2px;
}

.navrow{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}

.menu-btn{
  margin-left:auto;
  border:1px solid rgba(42,33,24,.16);
  background: rgba(255,255,255,.5);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 10px 25px var(--shadow);
}
.menu-btn:focus{outline:2px solid rgba(201,162,74,.5); outline-offset:2px;}

.drawer{
  position:fixed; inset:0;
  background: rgba(0,0,0,.35);
  display:none;
  z-index:50;
}
.drawer.open{display:block;}
.drawer-panel{
  position:absolute; top:0; left:0; height:100%;
  width:min(360px, 92vw);
  background: linear-gradient(180deg, rgba(245,241,232,.98), rgba(245,241,232,.92));
  border-right:1px solid rgba(42,33,24,.10);
  padding:18px;
  box-shadow: 20px 0 60px rgba(0,0,0,.18);
}
.drawer-panel h3{margin:4px 0 10px 0;font-size:16px}
.drawer-panel a{
  display:block;
  text-decoration:none;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(42,33,24,.10);
  background: rgba(255,255,255,.45);
  margin:10px 0;
}
.drawer-panel a small{display:block;opacity:.75;margin-top:4px}
.drawer-close{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px;
}
.drawer-close button{
  border:none;background:transparent;cursor:pointer;
  font-size:22px;line-height:1;padding:8px 10px;border-radius:12px;
}
.drawer-close button:hover{background: rgba(0,0,0,.06);}

.hero{
  padding:34px 0 18px 0;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 860px){
  .hero{grid-template-columns:1fr}
}

.card{
  background: var(--card);
  border:1px solid rgba(42,33,24,.10);
  border-radius:22px;
  box-shadow: 0 20px 60px var(--shadow);
  overflow:hidden;
}
.card .pad{padding:20px 20px}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(42,33,24,.12);
  background: rgba(255,255,255,.40);
  font-size:13px;
}
.kicker .dot{
  width:9px;height:9px;border-radius:99px;
  background: var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,74,.15);
}

h1{margin:14px 0 8px 0;font-size:38px;line-height:1.12}
@media (max-width: 460px){h1{font-size:32px}}
.lede{font-size:16px;opacity:.88;margin:0 0 12px 0}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(42,33,24,.12);
  background: rgba(255,255,255,.35);
  font-size:13px;
}

.photo-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  padding:12px;
}
.photo{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(42,33,24,.10);
  background: linear-gradient(180deg, rgba(216,195,165,.35), rgba(255,255,255,.35));
  min-height:150px;
}
.photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter: sepia(.15) contrast(1.05) saturate(1.05);
}
.photo .label{
  position:absolute; left:10px; bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(245,241,232,.86);
  border:1px solid rgba(42,33,24,.10);
  font-size:12px;
}

.section{margin:26px 0}
.section h2{margin:0 0 10px 0;font-size:22px}
.section p{margin:8px 0}

.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){.tiles{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 560px){.tiles{grid-template-columns: 1fr;}}
.tile{
  text-decoration:none;
  display:block;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(42,33,24,.10);
  background: rgba(255,255,255,.42);
  box-shadow: 0 16px 50px var(--shadow);
}
.tile .thumb{
  height:140px;
  background:
    linear-gradient(135deg, rgba(201,162,74,.22), rgba(139,107,79,.18)),
    repeating-linear-gradient(90deg, rgba(42,33,24,.06) 0 2px, transparent 2px 9px);
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:14px;
}
.tile .thumb span{
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(42,33,24,.12);
  background: rgba(245,241,232,.88);
  font-size:12px;
}
.tile .body{padding:14px 14px 16px 14px}
.tile h3{margin:0 0 6px 0;font-size:16px}
.tile p{margin:0;opacity:.85;font-size:14px}

.footer{
  margin-top:34px;
  padding:22px 0 40px 0;
  border-top:1px solid rgba(42,33,24,.10);
  opacity:.9;
  font-size:13px;
}

.form{
  display:grid;gap:12px;
}
label{font-weight:700;font-size:13px}
input, textarea, select{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(42,33,24,.16);
  background: rgba(255,255,255,.62);
  padding:12px 12px;
  font-family: inherit;
  font-size:15px;
}
textarea{min-height:130px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  border:none;
  border-radius:16px;
  padding:12px 14px;
  background: linear-gradient(135deg, rgba(201,162,74,.90), rgba(139,107,79,.88));
  color: #1d140c;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 18px 50px rgba(139,107,79,.25);
}
.btn:hover{transform: translateY(-1px)}
.notice{
  border-left:4px solid rgba(201,162,74,.85);
  background: rgba(255,255,255,.45);
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(42,33,24,.10);
}
.small{font-size:13px;opacity:.85}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 900px){.gallery{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 520px){.gallery{grid-template-columns: 1fr;}}
.gitem{
  border-radius:22px; overflow:hidden;
  border:1px solid rgba(42,33,24,.10);
  background: rgba(255,255,255,.44);
  box-shadow:0 16px 50px var(--shadow);
}
.gitem img{width:100%;height:210px;object-fit:cover;display:block;filter: sepia(.18) contrast(1.05) saturate(1.05);}
.gitem .cap{padding:12px 12px}
.gitem .cap b{display:block;margin-bottom:3px}


/* =========================================================
   Sepia Theme Override (COLOR-ONLY)
   Paste at the very bottom of assets/styles.css
   ========================================================= */

/* Sepia palette */
:root{
  --sepia-bg:        #22150F; /* deep coffee */
  --sepia-surface:   #2C1C14; /* card/section */
  --sepia-surface-2: #352218; /* slightly raised */
  --sepia-text:      #F3E6D3; /* warm parchment */
  --sepia-text-2:    #D9C2A2; /* secondary text */
  --sepia-text-3:    #B8946D; /* subtle labels */
  --sepia-border:    #6A4A31; /* warm border */
  --sepia-accent:    #C9A24E; /* old-gold */
  --sepia-accent-2:  #E0C47A; /* lighter gold */
  --sepia-link:      #E6CC85;
  --sepia-link-hover:#F4E1A6;
  --sepia-shadow:    rgba(0,0,0,.35);
}

/* Global */
html, body{
  background: var(--sepia-bg) !important;
  color: var(--sepia-text) !important;
}
p, li, .small{
  color: var(--sepia-text-2) !important;
}
h1, h2, h3, h4, h5, h6, b, strong, .title{
  color: var(--sepia-text) !important;
}

/* Links */
a{
  color: var(--sepia-link) !important;
}
a:hover{
  color: var(--sepia-link-hover) !important;
}

/* Top bar + nav */
.topbar{
  background: rgba(44, 28, 20, .92) !important;
  border-bottom-color: rgba(201, 162, 78, .25) !important;
}
.subtitle{
  color: var(--sepia-text-2) !important;
}
.mark{
  background: radial-gradient(circle at 30% 30%, var(--sepia-accent-2), var(--sepia-accent)) !important;
  border-color: rgba(243, 230, 211, .18) !important;
}

/* Menu button */
.menu-btn{
  background: rgba(201, 162, 78, .12) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .35) !important;
}
.menu-btn:hover{
  background: rgba(201, 162, 78, .18) !important;
  border-color: rgba(201, 162, 78, .55) !important;
}

/* Drawer */
.drawer{
  background: rgba(0,0,0,.55) !important;
}
.drawer-panel{
  background: var(--sepia-surface) !important;
  border-left-color: rgba(201, 162, 78, .25) !important;
}
.drawer-panel a{
  color: var(--sepia-text) !important;
  border-color: rgba(106, 74, 49, .45) !important;
}
.drawer-panel a small{
  color: var(--sepia-text-2) !important;
}
.drawer-close button{
  background: rgba(201, 162, 78, .10) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .35) !important;
}

/* Containers / cards */
.card{
  background: linear-gradient(180deg, rgba(53,34,24,.95), rgba(44,28,20,.95)) !important;
  border-color: rgba(201, 162, 78, .18) !important;
  box-shadow: 0 10px 30px var(--sepia-shadow) !important;
}
.section{
  border-top-color: rgba(106, 74, 49, .35) !important;
}

/* Kicker + dot */
.kicker{
  color: var(--sepia-text-3) !important;
}
.kicker .dot{
  background: var(--sepia-accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 78, .18) !important;
}

/* Pills / notices */
.pill{
  background: rgba(201, 162, 78, .10) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .28) !important;
}
.notice{
  background: rgba(201, 162, 78, .09) !important;
  border-color: rgba(201, 162, 78, .22) !important;
  color: var(--sepia-text) !important;
}
.notice .small{
  color: var(--sepia-text-2) !important;
}

/* Tiles */
.tile{
  background: rgba(201, 162, 78, .07) !important;
  border-color: rgba(201, 162, 78, .18) !important;
}
.tile:hover{
  background: rgba(201, 162, 78, .10) !important;
  border-color: rgba(201, 162, 78, .30) !important;
}
.tile .body p{
  color: var(--sepia-text-2) !important;
}
.thumb{
  background: linear-gradient(135deg, rgba(201,162,78,.28), rgba(106,74,49,.35)) !important;
  border-color: rgba(243,230,211,.10) !important;
}
.thumb span{
  color: var(--sepia-text) !important;
}

/* Photo labels */
.photo .label,
.photo .cap,
.label{
  background: rgba(34, 21, 15, .72) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .22) !important;
}

/* Gallery captions */
.cap b{
  color: var(--sepia-text) !important;
}
.cap .small{
  color: var(--sepia-text-2) !important;
}

/* Forms */
label{
  color: var(--sepia-text) !important;
}
input, textarea, select{
  background: rgba(243, 230, 211, .06) !important;
  color: var(--sepia-text) !important;
  border-color: rgba(201, 162, 78, .25) !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(217, 194, 162, .70) !important;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(224, 196, 122, .60) !important;
  box-shadow: 0 0 0 4px rgba(201, 162, 78, .16) !important;
  outline: none !important;
}

/* Buttons */
.btn, button.btn{
  background: linear-gradient(180deg, rgba(201,162,78,.92), rgba(173,131,55,.92)) !important;
  color: #1E120C !important; /* deep brown for contrast */
  border-color: rgba(243, 230, 211, .15) !important;
}
.btn:hover, button.btn:hover{
  background: linear-gradient(180deg, rgba(224,196,122,.95), rgba(201,162,78,.95)) !important;
}

/* Footer */
.footer{
  color: var(--sepia-text-2) !important;
  border-top-color: rgba(106, 74, 49, .35) !important;
}
.footer b{
  color: var(--sepia-text) !important;
}

/* HR + misc */
hr{
  border-color: rgba(106, 74, 49, .45) !important;
}

/* Video player (overrides inline style colors) */
video{
  border-color: rgba(201, 162, 78, .22) !important;
  background: rgba(243, 230, 211, .05) !important;
}