:root {
  --bg: #081220;
  --bg-2: #10213c;
  --panel: rgba(10, 22, 40, 0.74);
  --panel-2: rgba(15, 31, 56, 0.82);
  --paper: rgba(242, 234, 221, 0.93);
  --paper-soft: rgba(255,255,255,0.08);
  --text: #f2ede4;
  --muted: rgba(242, 237, 228, 0.78);
  --accent: #d79242;
  --accent-soft: rgba(215, 146, 66, 0.18);
  --line: rgba(255,255,255,0.08);
  --sidebar: rgba(7, 14, 25, 0.96);
  --sidebar-line: rgba(255,255,255,0.06);
  --shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
  --radius: 28px;
  --radius-sm: 18px;
  --content-max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
.menu-toggle {
  position: fixed; top: 0.9rem; left: 0.9rem; width: 3rem; height: 3rem; z-index: 60;
  display: grid; place-content: center; gap: 0.24rem;
  border-radius: 16px; border: 1px solid var(--sidebar-line); background: rgba(8, 18, 32, 0.92); color: var(--text);
}
.menu-toggle span { width: 1.25rem; height: 2px; background: currentColor; border-radius: 999px; }
.menu-overlay {
  position: fixed; inset: 0; background: rgba(1,4,8,0.56); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 50;
}
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: min(82vw, 300px); transform: translateX(-102%); transition: transform .22s ease;
  background: var(--sidebar); border-right: 1px solid var(--sidebar-line); z-index: 70; box-shadow: var(--shadow);
}
.sidebar-inner { padding: 1rem; display: grid; gap: 1rem; height: 100%; overflow: auto; }
.site-brand { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem; border-radius: 20px; background: rgba(255,255,255,0.03); border: 1px solid var(--sidebar-line); }
.brand-mark {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 16px; display: grid; place-items: center; font-size: 1.15rem; background: rgba(215,146,66,.14); color: var(--accent);
}
.brand-stack { display: grid; gap: .15rem; }
.brand-stack strong { font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.1; }
.brand-stack small { color: var(--muted); line-height: 1.4; font-size: .72rem; }
.side-nav { display: grid; gap: .55rem; }
.side-link, .side-sub-link, .side-group summary {
  display: flex; align-items: center; width: 100%; padding: .82rem .9rem; border-radius: 15px; background: rgba(255,255,255,0.04); border: 1px solid var(--sidebar-line); color: var(--text);
}
.side-link.active, .side-sub-link.active { background: rgba(215,146,66,.14); border-color: rgba(215,146,66,.28); }
.side-group { border-radius: 18px; background: rgba(255,255,255,0.02); border: 1px solid var(--sidebar-line); overflow: hidden; }
.side-group summary { list-style: none; cursor: pointer; }
.side-group summary::-webkit-details-marker { display: none; }
.side-sub-links { display: grid; gap: .4rem; padding: 0 .7rem .7rem; }
.side-sub-link { font-size: .88rem; color: var(--muted); }
body.menu-open .sidebar { transform: translateX(0); }
body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }
.page-wrap { padding: 1rem 1rem 2rem; }
.main-shell { width: min(100%, var(--content-max)); margin: 0 auto; display: grid; gap: 1rem; }
.hero-panel, .content-card, .section-shell, .stat-card, .quote-card, .empty-card, .control-card, .studio-card {
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden;
}
.hero-panel { padding: 1.2rem; background: linear-gradient(145deg, rgba(14,28,51,.92), rgba(8,18,32,.92)); }
.hero-image-panel { position: relative; }
.hero-image-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(7,16,29,.5), rgba(7,16,29,.5)); }
.hero-image-panel > * { position: relative; }
.hero-home { background: linear-gradient(rgba(7,16,29,.5), rgba(7,16,29,.5)), url('../assets/Home.jpg') center/cover; }
.hero-blogs { background: linear-gradient(rgba(35,25,32,.5), rgba(35,25,32,.5)), url('../assets/Blogs.jpg') center/cover; }
.hero-grid { display: grid; gap: 1rem; }
.page-kicker, .eyebrow-label { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .78rem; color: var(--accent); }
h1, h2, h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; line-height: 1.08; }
h1 { font-size: clamp(2.05rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 4vw, 1.5rem); }
p { margin: 0; line-height: 1.72; }
.lead, .muted, .page-copy { color: var(--muted); }
.stack { display: grid; gap: .85rem; }
.cta-row, .button-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  min-height: 2.85rem; padding: .82rem 1.08rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--accent); color: var(--accent); background: transparent; font-weight: 700; transition: background .18s ease, color .18s ease;
}
.btn:hover, .mini-link:hover { background: var(--accent-soft); }
.btn.full { background: var(--accent-soft); }
.section-grid, .card-grid, .stats-grid { display: grid; gap: 1rem; }
.content-card, .section-shell, .empty-card, .control-card, .studio-card { padding: 1rem; background: var(--panel); }
.section-theme-paper { background: rgba(244, 235, 221, 0.9); color: #2a1b10; }
.section-theme-paper p, .section-theme-paper .muted, .section-theme-paper .page-kicker { color: rgba(42,27,16,.82); }
.section-theme-paper .tiny-tag { color: #2a1b10; background: rgba(112,73,43,.08); border-color: rgba(112,73,43,.12); }
.stat-card { padding: 1rem; background: rgba(255,255,255,.04); }
.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-label { color: var(--muted); font-size: .8rem; }
.stat-value { margin-top: .25rem; font-size: clamp(1.3rem, 6vw, 2rem); font-weight: 800; }
.quote-card { padding: 1rem; background: rgba(255,255,255,.03); }
.quote-card blockquote { margin: 0; font-size: clamp(1.2rem, 4vw, 1.6rem); line-height: 1.6; }
.quote-card figcaption { margin-top: .6rem; color: var(--accent); }
.section-label { color: var(--muted); font-size: .92rem; }
.review-card .text-panel, .post-excerpt, .note-panel { background: rgba(255,255,255,.08); padding: .85rem; border-radius: 16px; }
.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.bottom-tags { margin-top: .75rem; }
.tiny-tag {
  padding: .36rem .58rem; border-radius: 999px; font-size: .75rem; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--muted);
}
.tiny-tag.featured { color: #fff3d6; background: rgba(215,146,66,.18); border-color: rgba(215,146,66,.3); }
.rating-line { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.rating-line.large { margin-top: .8rem; }
.rating-number { font-size: 1.35rem; }
.stars { display: inline-flex; gap: .1rem; font-size: 1rem; line-height: 1; vertical-align: middle; }
.star { color: rgba(255,255,255,.18); position: relative; display: inline-block; }
.star.full { color: var(--accent); }
.star.half { color: rgba(255,255,255,.18); }
.star.half::before { content: '★'; position: absolute; inset: 0; width: 50%; overflow: hidden; color: var(--accent); }
.sub-ratings { display: grid; gap: .55rem; margin-top: .75rem; }
.sub-ratings > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; font-size: .9rem; color: var(--muted); }
.sub-ratings > div .stars { margin-left: auto; }
.review-date { color: var(--muted); font-size: .92rem; }
.mini-link { color: var(--accent); border: 1px solid rgba(215,146,66,.3); padding: .65rem .8rem; border-radius: 999px; display: inline-flex; }
.cta-inline { margin-top: .85rem; }
.card-grid.two-up, .stats-grid, .section-grid.two-up { grid-template-columns: 1fr; }
.site-footer { width: min(100%, var(--content-max)); margin: 0 auto; padding: .5rem 0 2rem; color: var(--muted); text-align: center; }
.spacer-top { padding-top: .35rem; }
.split-head { display: grid; gap: .5rem; }
.gallery-grid { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.gallery-tile { min-height: 8rem; border-radius: 18px; border: 1px dashed var(--line); background: rgba(255,255,255,.03); display: grid; place-items: center; text-align: center; padding: .8rem; color: var(--muted); }
.hen-figure img { width: 100%; border-radius: 24px; }
.coming-soon { display: inline-flex; padding: .45rem .75rem; border-radius: 999px; border: 1px solid rgba(215,146,66,.35); color: var(--accent); background: rgba(215,146,66,.14); font-weight: 700; }
.form-grid { display: grid; gap: .85rem; }
.input, .textarea, .select { width: 100%; padding: .82rem .9rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); }
.textarea { min-height: 10rem; resize: vertical; }
.label { font-size: .85rem; color: var(--muted); margin-bottom: .35rem; display: block; }
.small-note { color: var(--muted); font-size: .88rem; }
.code-block { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0,0,0,.25); padding: .8rem; border-radius: 16px; border: 1px solid var(--line); }
.copy-area { display: grid; gap: .75rem; }
.hidden { display: none !important; }

/* Themes */
.theme-home { --bg: #07111f; --bg-2: #132744; --panel: rgba(10,22,40,.78); --panel-2: rgba(14,29,52,.88); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(4, 10, 18, 0.96); }
.theme-plum { --bg: #1a1020; --bg-2: #341c3f; --panel: rgba(31,18,37,.78); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(15, 8, 19, 0.97); }
.theme-forest { --bg: #0f1b1a; --bg-2: #203733; --panel: rgba(18,28,27,.78); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(9, 14, 13, 0.97); }
.theme-burgundy { --bg: #221018; --bg-2: #4c1e35; --panel: rgba(34,17,25,.8); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(14, 8, 10, 0.97); }
.theme-sage { --bg: #101916; --bg-2: #2a3c35; --panel: rgba(18,26,23,.8); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(9, 12, 11, 0.97); }
.theme-amber { --bg: #1f1810; --bg-2: #4c3720; --panel: rgba(30,22,15,.8); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(13, 10, 7, 0.97); }
.theme-toronto { --bg: #20140f; --bg-2: #5c3927; --panel: rgba(38,24,17,.82); --panel-2: rgba(63,38,24,.88); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(20, 12, 8, 0.97); }
.theme-hk { --bg: #181216; --bg-2: #432338; --panel: rgba(28,18,24,.82); --panel-2: rgba(50,26,39,.88); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(16, 10, 12, 0.97); }
.theme-hen { --bg: #13161d; --bg-2: #323843; --panel: rgba(19,22,29,.82); --accent: #d79242; --accent-soft: rgba(215,146,66,.18); --sidebar: rgba(9, 11, 14, 0.97); }
.theme-toronto .hero-panel, .theme-hk .hero-panel { background: linear-gradient(145deg, var(--panel-2), rgba(17,10,7,.92)); }

@media (min-width: 760px) {
  .page-wrap { padding: 1.25rem 1.25rem 2.25rem; }
  .hero-grid.two-col, .section-grid.two-up, .card-grid.two-up { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .card-grid.three-up { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1040px) {
  .menu-toggle, .menu-overlay { display: none; }
  .sidebar { transform: none; width: 290px; }
  .page-wrap { padding: 1.25rem 1.5rem 2rem 322px; }
  .main-shell, .site-footer { width: min(100%, 1180px); }
  .hero-panel { padding: 1.6rem; }
  .hero-grid.home-grid { grid-template-columns: 1.3fr 0.8fr; align-items: stretch; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}