/* ═══════════════════════════════════════════════════════════
   Michelle Miles — Shared Stylesheet
   michellemiles.com
   ═══════════════════════════════════════════════════════════ */

/* ── VARIABLES ── */
:root { --bg:#e8e0d4; --paper:#f4efe5; --ink:#1a1715; --mute:#6b655b; --accent:#842912; --rule:#2a2522; }
[data-theme="dark"] { --bg:#1c1916; --paper:#28231f; --ink:#e8e0d4; --mute:#9e9188; --accent:#c03820; --rule:#3d3632; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif; font-size:18px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
a:hover { opacity:0.75; }

/* ── FOCUS + SKIP LINK ── */
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.skip-link { position:absolute; top:-100%; left:1rem; background:var(--ink); color:var(--paper); padding:.5rem 1rem; font-size:18px; text-decoration:none; z-index:999; }
.skip-link:focus { top:1rem; }

/* ── MASTHEAD ── */
.masthead { border-bottom:2px solid var(--rule); padding:24px 48px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.masthead .logo { font-family:"New York","Canela","Didot","Bodoni MT",serif; font-size:32px; font-weight:500; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); }
.masthead nav a { color:var(--ink); text-decoration:none; font-size:18px; text-transform:uppercase; letter-spacing:0.1em; margin-left:24px; }
.masthead nav a:first-child { margin-left:0; }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color:var(--accent); }

/* ── WORK SUBNAV ── */
.has-subnav .masthead { border-bottom:none; }
.subnav { border-top:1px solid var(--rule); border-bottom:2px solid var(--rule); padding:0 48px; display:flex; justify-content:center; }
.subnav a { color:var(--ink); text-decoration:none; font-size:18px; text-transform:uppercase; letter-spacing:0.1em; margin-right:20px; padding:14px 0; opacity:1; }
.subnav a:last-child { margin-right:0; }
.subnav a:hover { color:var(--accent); opacity:1; }
.subnav a.subnav-active { color:var(--accent); font-weight:600; }
@media (max-width:640px) {
  .subnav { padding:0 24px; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .subnav a { white-space:nowrap; }
}

/* ── THEME TOGGLE & MASTHEAD CONTROLS ── */
.masthead-controls { display:flex; align-items:center; justify-self:end; }
.theme-toggle { background:none; border:none; padding:0; cursor:pointer; margin-left:28px; flex-shrink:0; display:flex; align-items:center; align-self:center; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:6px; margin-left:12px; flex-direction:column; justify-content:center; gap:5px; flex-shrink:0; }
.hamburger-bar { display:block; width:22px; height:2px; background:var(--ink); }
.toggle-track { display:inline-flex; align-items:center; width:40px; height:22px; border-radius:11px; background:var(--mute); position:relative; transition:background 0.25s; border:1px solid var(--rule); }
.toggle-thumb { position:absolute; left:3px; width:14px; height:14px; border-radius:50%; background:var(--paper); transition:left 0.2s,background 0.25s; }
[data-theme="dark"] .toggle-track { background:var(--accent); border-color:var(--accent); }
[data-theme="dark"] .toggle-thumb { left:21px; background:var(--ink); }
.theme-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:12px; }

/* ── BUTTON ── */
.btn { display:inline-block; padding:10px 24px; background:var(--accent); color:var(--paper); font-size:18px; text-transform:uppercase; letter-spacing:0.14em; text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:inherit; }
.btn:hover { opacity:0.85; }
[data-theme="dark"] .btn { background:transparent; color:var(--accent); border-color:var(--accent); }

/* ── FOOTER ── */
footer { padding:40px 48px; border-top:2px solid var(--rule); font-size:18px; color:var(--mute); letter-spacing:0.06em; text-transform:uppercase; display:flex; justify-content:space-between; }
footer a { color:inherit; text-decoration:none; }
footer a:hover { color:var(--accent); }

/* ── PAGE HEADER (gallery + writing pages) ── */
.page-header { padding:32px 48px 32px; text-align:center; }
.page-header .rule { display:none; }
.page-header h1 { font-family:"New York","Canela",serif; font-weight:500; font-size:24px; text-transform:uppercase; letter-spacing:0.28em; margin:0; color:var(--accent); }

/* ── GALLERY GRID ── */
.gallery { padding:40px 48px 80px; columns:3; column-gap:20px; }
.gallery-item { break-inside:avoid; margin-bottom:20px; background:var(--paper); border:1px solid var(--rule); overflow:hidden; cursor:pointer; transition:border-color 0.2s; }
.gallery-item:hover { border-color:var(--accent); }
.gallery-item img { width:100%; height:auto; display:block; }

/* ── ITEM META (gallery tiles + homepage tiles) ── */
.item-meta { padding:12px 16px 14px; border-top:1px solid var(--rule); transition:color 0.2s; }
.gallery-item:hover .item-meta { color:var(--accent); }
.item-meta h2 { font-family:"New York","Canela",serif; font-weight:500; font-size:22px; margin:0; letter-spacing:-0.005em; color:var(--ink); }
.item-meta .item-medium { font-size:18px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); margin-bottom:2px; }
.item-meta .item-year { font-size:18px; color:var(--mute); margin-top:2px; }
.series-indicator { font-size:18px; color:var(--mute); letter-spacing:0.06em; margin-top:4px; }

/* ── LIGHTBOX ── */
.lightbox { display:none; position:fixed; inset:0; z-index:500; background:rgba(26,23,21,0.95); align-items:center; justify-content:center; padding:24px; }
.lightbox.open { display:flex; }
.lightbox-inner { position:relative; display:flex; flex-direction:column; align-items:center; max-width:900px; width:100%; max-height:100vh; }
.lightbox-img-wrap { position:relative; width:100%; display:flex; align-items:center; justify-content:center; }
.lightbox img { max-width:100%; max-height:75vh; object-fit:contain; display:block; }
.lightbox-info { margin-top:20px; text-align:center; color:var(--paper); }
.lightbox-title { font-family:"New York","Canela","Didot","Bodoni MT",serif; font-weight:400; font-size:28px; letter-spacing:-0.01em; margin:0 0 4px; color:var(--paper); }
.lightbox-medium { font-size:18px; text-transform:uppercase; letter-spacing:0.14em; color:var(--mute); margin-bottom:4px; }
.lightbox-year { font-size:18px; color:var(--mute); }
.lb-close { position:fixed; top:20px; right:24px; background:none; border:none; color:var(--paper); font-size:32px; line-height:1; cursor:pointer; padding:8px; opacity:0.7; transition:opacity 0.2s; }
.lb-close:hover { opacity:1; }
.lb-prev, .lb-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(244,239,229,.12); border:1px solid rgba(244,239,229,.2); color:var(--paper); font-size:22px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s; }
.lb-prev:hover, .lb-next:hover { background:rgba(244,239,229,.25); }
.lb-prev { left:-56px; }
.lb-next { right:-56px; }
.lb-prev[hidden], .lb-next[hidden] { display:none; }
.lb-dots { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; max-width:100%; }
.lb-dot { width:8px; height:8px; border-radius:50%; background:rgba(244,239,229,0.25); border:1px solid rgba(244,239,229,0.45); padding:0; cursor:pointer; transition:background 0.2s,border-color 0.2s; flex-shrink:0; }
.lb-dot.active { background:rgba(244,239,229,0.85); border-color:rgba(244,239,229,0.85); }

/* ── JOURNAL ARTICLES ── */
.article-wrap { max-width:680px; margin:0 auto; padding:72px 48px 96px; }
.article-back { display:inline-block; font-size:18px; text-transform:uppercase; letter-spacing:0.14em; color:var(--mute); text-decoration:none; margin-bottom:48px; }
.article-back:hover { color:var(--accent); }
.article-cat { font-size:18px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.article-title { font-family:"New York","Canela","Didot","Bodoni MT",serif; font-weight:400; font-size:clamp(36px,5vw,52px); line-height:1.1; letter-spacing:-0.02em; margin:0 0 24px; }
.article-date { font-size:18px; color:var(--mute); letter-spacing:0.1em; padding-bottom:32px; border-bottom:1px solid var(--rule); margin-bottom:40px; }
.article-body { font-size:18px; line-height:1.75; color:var(--ink); }
.article-body p { margin:0 0 1.5em; }
.article-body p:last-child { margin-bottom:0; }
.related-work { margin-top:48px; padding-top:24px; border-top:1px solid var(--rule); font-size:18px; color:var(--mute); }
.related-work a { color:var(--accent); text-decoration:underline; }
.related-work a:hover { color:var(--accent); }

/* ── GALLERY INTRO ── */
.gallery-intro { max-width:800px; margin:0 auto; padding:0 20px; font-size:18px; line-height:1.7; color:var(--mute); }
@media (max-width:820px) { .gallery-intro { padding:0 24px; margin-bottom:32px; } }

/* ── ARTWORK PAGES ── */
.work-wrap { max-width:860px; margin:0 auto; padding:72px 48px 96px; }
.work-figure { margin:0 0 40px; }
.work-figure img { width:100%; height:auto; display:block; border:1px solid var(--rule); }
.work-images-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin:0 0 40px; }
.work-images-grid figure { margin:0; }
.work-images-grid img { width:100%; height:auto; display:block; border:1px solid var(--rule); }
.work-meta { display:flex; flex-wrap:wrap; gap:32px; padding:24px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:40px; }
.work-meta-item { display:flex; flex-direction:column; gap:4px; }
.work-meta-label { font-size:18px; text-transform:uppercase; letter-spacing:0.14em; color:var(--mute); }
.work-meta-value { font-size:18px; color:var(--ink); }

/* ── RESPONSIVE ── */
@media (max-width:960px) { .gallery { columns:2; } }

@media (max-width:640px) {
  .masthead { padding:20px 24px; align-items:center; position:relative; grid-template-columns:1fr auto; }
  .masthead nav { position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:2px solid var(--rule); padding:8px 24px 20px; flex-direction:column; z-index:100; }
  .masthead nav a { margin-left:0; font-size:18px; padding:12px 0; border-bottom:1px solid var(--rule); }
  .masthead nav a:last-child { border-bottom:none; }
  .nav-toggle { display:flex; }
  .theme-toggle { margin-left:0; }
  footer { padding:28px 24px; flex-direction:column; gap:8px; }
  .page-header { padding:40px 24px 32px; }
  .gallery { columns:1; padding:24px 24px 56px; }
  .article-wrap { padding:48px 24px 72px; }
  .work-wrap { padding:48px 24px 72px; }
  .lb-prev { left:8px; }
  .lb-next { right:8px; }
}