/* core.css — shared foundation for all pages.
   Change shared tokens & common components HERE (applies site-wide).
   Page-specific styles stay in each page's inline <style>.

   THE SITE FRAME LIVES HERE — do NOT reduplicate in page <style> blocks:
     • nav (glass) + nav.scrolled        — header, same on every page
     • footer                            — signature-right, same everywhere
     • --main-top / --main-bottom        — header→title & content→footer gaps
                                           (desktop here, mobile in the @media block)
   If a page redeclares any of these inline, it loads AFTER core and silently
   overrides it — which is exactly the drift this file exists to prevent.
   Need a change? Edit it here once. Per-page nav/footer/main padding = a bug. */

:root {
  --bg: #E8E3DA;
  --text: #3E3B39;
  --muted: #827E78;
  --faint: #C8C4BC;
  --faint-text: #877F6F;
  --accent: #7A7570;
  --max-page: 1920px;
  --gutter: max(clamp(1.8rem, 6vw, 6rem), calc((100% - var(--max-page)) / 2));
  --page-col: 1100px;
  --main-top: 4rem;
  --main-bottom: 7rem;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.footer-left { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-sep { margin: 0 0.4rem; opacity: 0.5; }
.footer-sig:hover { color: var(--muted); }
.nav-links { display: flex; gap: 1.6rem; list-style: none; align-items: center; }
.nav-links a { font-family: 'Jost', sans-serif; font-weight: 200; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--muted); text-decoration: none; text-transform: lowercase; transition: color 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-logo { font-family: 'Jost', sans-serif; font-weight: 100; font-size: 1rem; letter-spacing: 0.06em; color: var(--text); text-decoration: none; }
.page-title { font-family: 'Jost', sans-serif; font-weight: 200; font-size: 1.05rem; letter-spacing: 0.18em; text-transform: lowercase; color: var(--text); display: block; margin-bottom: 0.6rem; }
.pp-notice { position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 50; max-width: 340px; padding: 0.75rem 0.9rem; background: rgba(232,227,218,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 0.5px solid var(--faint); border-radius: 3px; font-family: 'Jost', sans-serif; font-weight: 200; font-size: 0.64rem; letter-spacing: 0.06em; line-height: 1.55; color: var(--faint-text); display: flex; align-items: center; gap: 0.8rem; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.pp-notice a { color: var(--muted); text-decoration: none; border-bottom: 0.5px solid var(--faint); }
.pp-notice a:hover { color: var(--text); }
.pp-notice button { flex: 0 0 auto; background: none; border: 0.5px solid var(--faint); border-radius: 2px; cursor: pointer; padding: 0.28rem 0.65rem; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: lowercase; color: var(--muted); transition: color 0.3s, border-color 0.3s; }
.pp-notice button:hover { color: var(--text); border-color: var(--muted); }
.pp-notice.show { opacity: 1; transform: translateY(0); }
.sig-img { display: block; width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
.sig-nav { height: 42px; }
.sig-foot { height: 70px; opacity: 1; }
body { animation: pageIn 0.5s ease both; }
html { font-size: 18px; }
html, body { background: var(--bg); }
picture { display: contents; }

/* ── Shared frame: nav (glass), footer ── */
nav { display: flex; justify-content: space-between; align-items: center; padding: 2.4rem var(--gutter); position: sticky; top: 0; background: transparent; z-index: 10; border-bottom: 0.5px solid transparent; transition: background-color 0.4s, border-color 0.3s, backdrop-filter 0.4s; }
nav.scrolled { background: rgba(232, 227, 218, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: var(--faint); }
footer { padding: 2.4rem var(--gutter) 2.8rem; border-top: 0.5px solid var(--faint); display: flex; justify-content: space-between; align-items: center; gap: 2rem; position: relative; z-index: 1; }

@media (max-width: 640px) {
  :root { --main-top: 3.5rem; --main-bottom: 4rem; }
  .nav-links { gap: 0.9rem; flex-wrap: wrap; justify-content: flex-end; row-gap: 0.45rem; }
  .nav-links a, .nav-links .vs-btn, .vs-btn { font-size: 0.7rem; letter-spacing: 0.1em; }
  .pp-notice { left: 0.8rem; right: 0.8rem; bottom: 0.8rem; max-width: none; }
  .sig-nav { height: 38px; }
  .sig-foot { height: 56px; align-self: flex-end; }
}