/* © Adam Goldman 2026 */
/* style.css — Acme Tintype */
/* Shared top nav, mobile-overlay, and hamburger styles used by every public
   page. Previously duplicated verbatim inline in each of the 6 HTML files —
   consolidated here so a design change only needs to be made once.
   Page-specific rules (.main, .page-title, .text-content, the homepage grid,
   lightbox, etc.) stay inline in their own file, since those genuinely
   differ per page (e.g. index.html's .main has no max-width/margin, while
   the text pages' .main is centered at 720px). */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background-color: #fff; color: rgb(51,51,51); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; font-weight: 400; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
a:hover { color: #000; }

/* Visually hidden except when focused — used for the skip-to-content link,
   and for any heading (e.g. the homepage <h1>) that exists for screen
   readers/SEO without changing the visual design. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link.visually-hidden:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto; overflow: visible; white-space: normal; background: #fff; color: rgb(20,20,20); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; z-index: 2000; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* ── TOP NAV ── */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 64px; border-bottom: 1px solid #e8e8e8; position: sticky; top: 0; background: #fff; z-index: 100; }
.topbar-title { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; color: rgb(20,20,20); display: flex; align-items: center; gap: 8px; }
.topbar-icon { width: 24px; height: 24px; display: block; }
/* position:absolute + left:50%/translateX(-50%) truly centers the nav in
   the topbar regardless of how wide .topbar-title or .topbar-instagram
   are on either side — with plain flex justify-content:space-between,
   adding the icon widened .topbar-title, which visibly pushed the nav
   off-center toward the (now relatively narrower) Instagram icon side. */
.topbar-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 32px; }
.topbar-nav a { font-size: 13px; font-weight: 400; letter-spacing: 0.06em; color: rgb(20,20,20); text-transform: uppercase; }
.topbar-nav a:hover { opacity: 0.6; }
.topbar-instagram { display: flex; align-items: center; }
.topbar-instagram svg { width: 18px; height: 18px; fill: none; stroke: rgb(20,20,20); stroke-width: 1.5; }
.topbar-instagram:hover svg { opacity: 0.6; }
#hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
#hamburger-btn span { display: block; width: 26px; height: 2px; background: #c0392b; }

/* ── MOBILE NAV OVERLAY ── */
#mobile-nav-overlay { display: none; position: fixed; inset: 0; background: #fff; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; gap: 28px; overflow-y: auto; padding: 80px 20px; }
#mobile-nav-close { position: fixed; top: 22px; right: 22px; font-size: 26px; color: #c0392b; cursor: pointer; background: none; border: none; padding: 8px; line-height: 1; }
.mobile-nav-title { position: fixed; top: 22px; left: 28px; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; color: rgb(20,20,20); text-decoration: none; }
.mobile-nav-link { font-size: 17px; font-weight: 400; letter-spacing: 0.08em; color: rgb(30,30,30); text-align: center; display: block; text-transform: uppercase; }

/* ── TABLET (<1024px) ── */
@media (max-width: 1023px) {
  .topbar { padding: 0 28px; }
  .topbar-nav { display: none; }
  .topbar-instagram { display: none; }
  #hamburger-btn { display: flex; }
}

/* ── PHONE (<768px) ── */
@media (max-width: 767px) {
  .topbar { padding: 0 20px; height: calc(env(safe-area-inset-top) + 56px); padding-top: env(safe-area-inset-top); }
}