/* ============================================================
   THE PORTRAIT ROOM — CUR8TORIAL
   Built from THE APIARY design-system tokens.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@300;400;500&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────── */
  --apiary-olive:    #65683C;
  --apiary-mustard:  #BE9529;
  --apiary-plaster:  #D5B6A5;
  --apiary-mauve:    #8A6E84;
  --apiary-fern:     #1E2A22;
  --apiary-milk:     #F4F1E8;
  --apiary-surface:  #FBF9F2;
  --apiary-charcoal: #2C2829;
  --apiary-camel:    #B78F5C;
  --apiary-walnut:   #574234;
  --apiary-bark:     #211F18;
  --apiary-borage:   #6C84BE;

  --accent: var(--apiary-mustard);

  /* ── Type families ─────────────────────────────── */
  --font-engrave: 'Cinzel', Georgia, serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* ── Type scale ────────────────────────────────── */
  --text-xs:11px; --text-sm:13px; --text-base:16px; --text-lg:19px;
  --text-xl:24px; --text-2xl:30px; --text-3xl:40px; --text-4xl:54px;
  --track-tight:.02em; --track-wide:.16em; --track-wider:.24em; --track-engrave:.2em;
  --leading-tight:1.12; --leading-snug:1.35; --leading-body:1.65;

  /* ── Radii ─────────────────────────────────────── */
  --radius-sm:3px; --radius:5px; --radius-lg:8px; --radius-pill:999px;

  /* ── Elevation ─────────────────────────────────── */
  --shadow-frame: 0 2px 3px rgba(0,0,0,.25), 0 26px 50px -14px rgba(40,38,30,.55);

  /* ── Devices ───────────────────────────────────── */
  --rule-gold: linear-gradient(90deg, transparent, var(--accent), transparent);
  --frame-brass: linear-gradient(135deg,#ecd08a 0%,#a67f2f 18%,#f4dc96 36%,#7a5c1e 52%,#dcb765 68%,#66501a 84%,#caa250 100%);

  /* ── Semantic · Light ground (default) ─────────── */
  --ground:#EFEADD; --panel:#FBF9F2; --panel-2:#F3EEE0;
  --ink:#2C2829; --ink-soft:#56544A; --muted:#6E6A56; --line:#DBD3C2;
}

/* ── Semantic · Dusk ground ──────────────────────── */
body[data-theme="dusk"] {
  --ground:#2C2829; --panel:#353031; --panel-2:#2A2627;
  --ink:#F4F1E8; --ink-soft:#C7C2B2; --muted:#A6A091; --line:#433F3A;
}

/* ── Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-weight:300; line-height:var(--leading-body);
  font-size:var(--text-base);
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease, color .5s ease;
}
img { display:block; max-width:100%; }
h1, h2 { margin:0; }

.apiary-rule { height:1px; border:0; background:var(--rule-gold); margin:0; }
.apiary-eyebrow {
  font-family:var(--font-body); font-size:var(--text-xs);
  letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--accent);
}

.container { max-width:1100px; margin:0 auto; padding:0 48px; }
.view[hidden] { display:none; }

/* ══════════ LANDING ══════════ */

/* Header — full-bleed dark band */
.site-header { background:var(--apiary-bark); border-bottom:3px solid var(--accent); }
.site-header-inner {
  max-width:1100px; margin:0 auto; padding:34px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
}
.lockup { display:flex; align-items:center; gap:26px; }
.seal {
  width:104px; height:104px; border-radius:50%; background:var(--apiary-milk);
  box-shadow:0 0 0 3px rgba(244,241,232,.18), 0 4px 12px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.seal img { width:96px; height:96px; object-fit:contain; mix-blend-mode:multiply; }
.site-title {
  font-family:var(--font-display); font-weight:500; font-size:var(--text-3xl);
  line-height:var(--leading-tight); color:var(--apiary-milk); margin-top:4px; white-space:nowrap;
}
.tagline {
  margin-top:6px; font-family:var(--font-display); font-style:italic;
  font-size:var(--text-base); color:rgba(244,241,232,.62);
}
.site-nav {
  display:flex; gap:28px; font-size:var(--text-sm);
  letter-spacing:var(--track-wide); text-transform:uppercase;
}
.site-nav a {
  color:var(--apiary-milk); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.site-nav a:hover { color:var(--accent); border-bottom-color:var(--accent); }

/* Welcome line */
.welcome { padding:40px 0 12px; }
.welcome p {
  margin:0; font-family:var(--font-display); font-style:italic;
  font-size:var(--text-xl); color:var(--ink-soft);
}

/* Series index + hover preview */
.index-grid {
  display:grid; grid-template-columns:1fr 380px; gap:64px;
  align-items:center; padding:12px 0 72px;
}
.series-index { display:flex; flex-direction:column; }
.series-row {
  display:flex; align-items:baseline; gap:22px; padding:26px 8px;
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:background .2s ease;
}
.series-row:hover { background:var(--panel); }
.series-row .numeral {
  font-family:var(--font-engrave); font-size:var(--text-sm); color:var(--accent);
  letter-spacing:var(--track-engrave); min-width:34px;
}
.series-row .row-main { flex:1; }
.series-row .series-name {
  font-family:var(--font-display); font-weight:500; font-size:var(--text-2xl);
  line-height:var(--leading-tight); color:var(--ink);
}
.series-row .series-meta {
  margin-top:6px; font-size:var(--text-xs); letter-spacing:var(--track-wider);
  text-transform:uppercase; color:var(--muted);
}
.series-row .arrow { font-family:var(--font-display); font-size:var(--text-xl); color:var(--muted); }

.preview-wrap { padding:34px; display:flex; justify-content:center; }

/* The frame + mat construction (signature element) */
.frame {
  position:relative;
  background:var(--frame-brass);
  border:1px solid #52400f;
  box-shadow:inset 0 0 0 2px rgba(255,238,190,.55), inset 0 0 0 4px rgba(96,72,22,.65),
             inset 0 0 12px rgba(60,44,10,.45), var(--shadow-frame);
}
.frame--preview { width:290px; aspect-ratio:3/4; }
.mat {
  position:absolute; inset:13px; background:#EFE9DB;
  box-shadow:inset 0 1px 4px rgba(60,50,30,.3), inset 0 0 0 1px rgba(120,100,70,.2);
}
.art {
  position:absolute; inset:37px; opacity:0; transition:opacity .45s ease;
  background:var(--apiary-surface);
  box-shadow:0 0 0 3px #F8F3E5, 0 0 0 4px rgba(87,66,52,.3), 0 4px 10px rgba(40,38,30,.32);
}
.art.is-active { opacity:1; }
.art img { width:100%; height:100%; object-fit:cover; }

/* Empty-state placeholder for unpublished pieces */
.empty-piece {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:var(--apiary-surface); text-align:center; padding:16px;
  font-size:var(--text-xs); letter-spacing:var(--track-wider); text-transform:uppercase;
  color:var(--muted); font-family:var(--font-body);
}

/* Lower study — full-bleed dark band under the gallery */
.lower-study {
  background:linear-gradient(180deg, rgba(33,31,24,.96) 0%, var(--apiary-bark) 60%);
  border-top:3px solid var(--accent);
  margin-top:0;
}

/* About + Contact */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; padding:56px 0 64px; }
.about-heading {
  margin:14px 0 0; font-family:var(--font-display); font-weight:500;
  font-size:var(--text-3xl); line-height:var(--leading-tight);
  color:var(--apiary-milk);
}
.about-body {
  margin:18px 0 0; font-size:var(--text-base); line-height:var(--leading-body);
  color:rgba(244,241,232,.68); max-width:44ch;
}
.contact-col { display:flex; flex-direction:column; justify-content:center; gap:16px; }
.contact-body { margin:0; font-size:var(--text-base); color:rgba(244,241,232,.68); max-width:40ch; }
.contact-button {
  align-self:flex-start; cursor:pointer; font-size:var(--text-sm); letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--apiary-bark); background:var(--accent);
  padding:12px 26px; border-radius:var(--radius-sm); text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.contact-button:hover { background:var(--apiary-walnut); color:var(--apiary-milk); }

/* Footer */
.site-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 0 40px; border-top:1px solid rgba(244,241,232,.16);
}
.site-footer span {
  font-size:var(--text-xs); letter-spacing:var(--track-wider);
  text-transform:uppercase; color:rgba(244,241,232,.55);
}
.site-footer .estate-link {
  font-size:var(--text-xs); letter-spacing:var(--track-wider);
  text-transform:uppercase; color:rgba(244,241,232,.55); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.site-footer .estate-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
.site-footer img {
  width:44px; height:44px; object-fit:contain; opacity:.9;
  background:var(--apiary-milk); border-radius:50%; padding:2px;
  box-shadow:0 0 0 2px rgba(244,241,232,.18);
}

/* ══════════ SERIES · The Corridor ══════════ */
.corridor { min-height:100vh; display:flex; flex-direction:column; }
.corridor-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 0 20px; border-bottom:1px solid var(--line);
}
.back-link {
  cursor:pointer; font-size:var(--text-sm); letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  transition:color .2s ease;
}
.back-link:hover { color:var(--accent); }
.corridor-heading { text-align:center; }
.corridor-eyebrow {
  font-family:var(--font-engrave); font-size:var(--text-xs);
  letter-spacing:var(--track-engrave); color:var(--accent);
}
.corridor-name { font-family:var(--font-display); font-weight:500; font-size:var(--text-xl); }
.counter {
  font-family:var(--font-engrave); font-size:var(--text-sm);
  letter-spacing:var(--track-engrave); color:var(--muted);
  min-width:90px; text-align:right;
}

.viewer {
  flex:1; display:flex; align-items:center; justify-content:center;
  gap:36px; padding:28px 0 8px;
}
.nav-circle {
  background:none; border:1px solid var(--line); border-radius:var(--radius-pill);
  width:46px; height:46px; font-family:var(--font-display); font-size:var(--text-xl);
  color:var(--ink-soft); cursor:pointer; flex-shrink:0;
  transition:border-color .2s ease, color .2s ease;
}
.nav-circle:hover { border-color:var(--accent); color:var(--accent); }

.frame--viewer {
  height:56vh; aspect-ratio:3/4;
  box-shadow:inset 0 0 0 2px rgba(255,238,190,.55), inset 0 0 0 5px rgba(96,72,22,.65),
             inset 0 0 14px rgba(60,44,10,.45), var(--shadow-frame);
}
.mat--viewer { inset:15px; }
.art--viewer {
  inset:44px;
  box-shadow:0 0 0 3px #F8F3E5, 0 0 0 4px rgba(87,66,52,.3), 0 5px 12px rgba(40,38,30,.32);
}
.art--viewer img { object-fit:contain; }

.plaque { text-align:center; padding:14px 0 6px; }
.plaque-title {
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--text-xl); color:var(--ink);
}
.plaque-meta {
  margin-top:5px; font-size:var(--text-xs); letter-spacing:var(--track-wider);
  text-transform:uppercase; color:var(--muted);
}
.dark-link {
  display:inline-block; margin-top:12px; cursor:pointer;
  font-size:var(--text-xs); letter-spacing:var(--track-wider); text-transform:uppercase;
  color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px;
}

.filmstrip { display:flex; justify-content:center; gap:10px; padding:20px 0 30px; }
.film-tab {
  width:42px; height:56px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-family:var(--font-engrave);
  font-size:var(--text-xs); letter-spacing:.08em; color:var(--muted);
  transition:border-color .2s ease, color .2s ease;
}
.film-tab:hover { border-color:var(--accent); }
.film-tab.is-active { border-color:var(--accent); color:var(--accent); }

/* ══════════ LIGHTBOX · The dim room ══════════ */
.lightbox {
  position:fixed; inset:0; z-index:50; background:rgba(28,25,26,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
.lightbox[hidden] { display:none; }
.lightbox-close {
  position:absolute; top:26px; right:32px; background:none; border:none;
  color:var(--apiary-milk); font-family:var(--font-display); font-size:var(--text-2xl);
  cursor:pointer; opacity:.7; transition:opacity .2s ease;
}
.lightbox-close:hover { opacity:1; }
.lightbox-row { display:flex; align-items:center; gap:34px; }
.nav-circle--dark { border-color:rgba(244,241,232,.25); color:var(--apiary-milk); }
.nav-circle--dark:hover { border-color:var(--accent); color:var(--apiary-milk); }
.lightbox-art { position:relative; height:72vh; aspect-ratio:3/4; }
.lightbox-art img { width:100%; height:100%; object-fit:contain; }
.lightbox-art .empty-piece { background:transparent; color:rgba(244,241,232,.55); }
.lightbox-caption { text-align:center; padding-top:14px; }
.lightbox-title {
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--text-xl); color:var(--apiary-milk);
}
.lightbox-meta {
  margin-top:5px; font-size:var(--text-xs); letter-spacing:var(--track-wider);
  text-transform:uppercase; color:rgba(244,241,232,.55);
}

/* ══════════ Responsive ══════════ */
@media (max-width: 920px) {
  .container, .site-header-inner { padding-left:24px; padding-right:24px; }
  .site-header-inner { flex-direction:column; align-items:flex-start; gap:20px; }
  .site-title { white-space:normal; }
  .index-grid { grid-template-columns:1fr; gap:24px; }
  .preview-wrap { order:2; padding:24px 0; }
  .about-grid { grid-template-columns:1fr; gap:40px; padding:40px 0 48px; }
  .viewer { gap:16px; }
  .frame--viewer { height:auto; width:min(62vw, 420px); }
  .lightbox-art { height:auto; width:min(70vw, 480px); }
  .lightbox-row { gap:14px; }
}