/* Shared subpage styles. Used by /portfolio.html and /studio.html. */

:root {
  --bg:           #e9e7ef;
  --bg-dark:      #000000;
  --text:         #525252;
  --text-strong:  #000000;
  --text-on-dark: #e9e7ef;
  --accent:       #e66942;
  --accent-hi:    #ff7d54;
  --font-display: 'PP Neue Montreal', 'PP Object Sans',
                  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --font-body:    var(--font-display);
  --gutter: clamp(12px, 1.2vw, 28px);
}

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0; font-style: normal;
}
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-style: normal;
  font-synthesis: none;
  overflow-x: hidden;
  line-height: 1.4;
  min-height: 100vh;
}
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- paper curtain ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  /* Solid backdrop matching brand cream — even if frame img isn't
     decoded yet, no white flash; just brand cream. */
  background: var(--bg);
  visibility: hidden;
  opacity: 0;
}
.curtain.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* During the unwrap, drop the cream backdrop AND switch frames to
   multiply blend so white areas of paper photos become transparent
   and the page underneath shows through progressively. Removing the
   transform/will-change because they create a stacking context that
   blocks blend modes from interacting with content beneath. */
.curtain.is-unwrapping { background: transparent; }
.curtain.is-unwrapping .curtain__frame {
  mix-blend-mode: multiply;
  transform: none;
  will-change: auto;
}
.curtain__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  /* No transition between frames — hard cuts only. The previous
     crossfade caused both frames to be at half-opacity briefly,
     letting the backdrop bleed through (looked like a flash). */
  transition: none;
  user-select: none;
  pointer-events: none;
  /* GPU compositing for smooth swaps */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.curtain__frame.is-showing { opacity: 1; visibility: visible; }

html.curtain-incoming .curtain { visibility: visible; opacity: 1; }
html.curtain-incoming .curtain__frame[data-frame="1"] { opacity: 1; }

/* ---------- topbar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 36px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  z-index: 50; background: #ffffff; font-size: 12px; color: var(--text);
}
.topbar > * { pointer-events: auto; }
.topbar__nav { display: flex; gap: 12px; white-space: nowrap; }
.topbar__nav a { color: var(--text); text-decoration: none; transition: color 0.2s ease; }
.topbar__nav a:hover { color: var(--accent); }
.topbar__separator { opacity: 0.4; }
.topbar__time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- scroll progress ---------- */
/* Checker "loading" strip — replaces the old scroll bar. Fills one 8px
   square-column at a time (stepped, not fluid) as the page scrolls;
   overflow:hidden is the mask, JS sets .loadbar__fill width in 8px steps. */
.loadbar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; overflow: hidden; background: transparent; }
.loadbar__fill { height: 100%; width: 0; background: #d4d2dc; transition: width .1s linear; }

/* MOBILE HAMBURGER NAV (animated slide-in) */
.topbar__burger { display: none; }
.navmenu { display: none; }
@media (max-width: 720px) {
  .topbar__nav { display: none; }
  .topbar__time { display: none; }
  .topbar { background: transparent; box-shadow: none; border: none; pointer-events: none; }
  .topbar.is-solid { background: transparent; }
  .topbar.menu-open { background: transparent; }
  .loadbar { display: none; }
  .topbar__burger { position: fixed; top: auto; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; pointer-events: auto; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: auto; height: auto; padding: 10px 22px; background: var(--bg); border: 1px solid rgba(0,0,0,.12); border-radius: 999px; box-shadow: none; cursor: pointer; }
  .topbar__burger span { display: block; height: 2px; width: 20px; background: var(--text-strong); border-radius: 2px; transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .2s ease; transform-origin: center; }
  .topbar.menu-open .topbar__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .topbar.menu-open .topbar__burger span:nth-child(2) { opacity: 0; }
  .topbar.menu-open .topbar__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .navmenu { display: block; position: fixed; inset: 0; z-index: 40; background: var(--bg); transform: translateX(100%); transition: transform .45s cubic-bezier(.22,.61,.36,1); will-change: transform; pointer-events: none; }
  .navmenu.is-open { transform: translateX(0); pointer-events: auto; }
  .navmenu__inner { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; padding: 0 var(--gutter); }
  .navmenu a { font-family: var(--font-display); font-weight: 500; font-size: 14vw; line-height: 1.12; letter-spacing: -0.02em; color: #000; text-decoration: none; opacity: 0; transform: translateY(18px); transition: opacity .4s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
  .navmenu.is-open a { opacity: 1; transform: translateY(0); }
  .navmenu.is-open a:nth-child(1) { transition-delay: .10s; }
  .navmenu.is-open a:nth-child(2) { transition-delay: .17s; }
  .navmenu.is-open a:nth-child(3) { transition-delay: .24s; }
  .navmenu a:active { color: var(--accent); }
  .navmenu__meta { margin-top: 26px; }
  .navmenu__meta a { font-family: var(--font-body); font-weight: 400; font-size: 14px; opacity: 1; transform: none; text-decoration: underline; transition-delay: .3s; }
}
html.curtain-incoming .loadbar { opacity: 0; }

/* ---------- placeholder content ---------- */
.placeholder {
  min-height: 100vh;
  padding: 120px var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
}
.placeholder__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 10vw, 140px);
  line-height: 0.9;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}
.placeholder__title .accent { color: var(--accent); }
.placeholder__lede {
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--text);
  max-width: 600px;
  line-height: 1.5;
}
.placeholder__sub {
  font-size: 13px;
  color: var(--text);
  opacity: 0.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.placeholder__back {
  margin-top: 12px;
  display: inline-block;
  background: var(--accent);
  color: white;
  text-decoration: none;
  padding: 14px 36px;
  font-family: var(--font-display);
  font-size: 16px;
  transition: background 0.2s ease;
}
.placeholder__back:hover { background: var(--accent-hi); }

@media (prefers-reduced-motion: reduce) {
  .curtain__frame { transition: none !important; }
}