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

/* ── VARIABLES ── */
:root { --bg:#e8e0d4; --paper:#f4efe5; --ink:#1a1715; --mute:#6b655b; --accent:#7c2d1f; --rule:#2a2522; }

/* ── 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:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }

/* ── 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:16px; text-decoration:none; z-index:999; }
.skip-link:focus { top:1rem; }

/* ── MASTHEAD ── */
.masthead { border-bottom:2px solid var(--rule); padding:24px 48px; display:flex; justify-content:space-between; align-items:baseline; }
.masthead .logo { font-family:"New York","Canela","Didot","Bodoni MT",serif; font-size:28px; font-weight:500; letter-spacing:-0.01em; text-decoration:none; color:var(--ink); }
.masthead nav a { color:var(--ink); text-decoration:none; font-size:16px; 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); }

/* ── FOOTER ── */
footer { padding:40px 48px; border-top:2px solid var(--rule); font-size:16px; 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:16px; text-transform:uppercase; letter-spacing:0.1em; color:var(--mute); margin-bottom:2px; }
.item-meta .item-year { font-size:16px; color:var(--mute); margin-top:2px; }
.series-indicator { font-size:16px; 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:16px; text-transform:uppercase; letter-spacing:0.14em; color:var(--mute); margin-bottom:4px; }
.lightbox-year { font-size:16px; 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:16px; 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:16px; 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:16px; 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:16px; color:var(--mute); }
.related-work a { color:var(--ink); text-decoration:none; }
.related-work a:hover { color:var(--accent); }

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

@media (max-width:640px) {
  .masthead { padding:20px 24px; flex-wrap:wrap; gap:12px; }
  .masthead nav { display:flex; flex-wrap:wrap; gap:6px 28px; }
  .masthead nav a { margin-left:0; font-size:14px; }
  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; }
  .lb-prev { left:8px; }
  .lb-next { right:8px; }
}