/* ==========================================================
   interior.css | header + fixed glass footer for interior pages
   Loads after theme.css. Everything is scoped to .in-* so it
   cannot collide with legacy.css, index.css or bootstrap.
   Breakpoint matches the homepage (900px).
   ========================================================== */
:root { --in-bar: 74px; --in-g: 36px; }

/* ---------- logo (mask, so colour follows --accent) ---------- */
.in-logo {
  display: block; flex: none;
  width: 220px; height: 14px;
  background-color: var(--accent, #F784C5);
  -webkit-mask: url(/img/logo/twod-logo.svg) no-repeat left center / contain;
  mask: url(/img/logo/twod-logo.svg) no-repeat left center / contain;
  transition: background-color .2s;
}
.in-logo:hover { background-color: var(--paper, #fff); }

/* ---------- bar ---------- */
.in-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--in-bar);
  display: flex; align-items: center;
  padding: 0 var(--in-g);
  background: #000;
}
.in-spacer { height: var(--in-bar); }

.in-links { margin-left: auto; display: flex; gap: 26px; }
.in-links a {
  position: relative;
  color: var(--accent, #F784C5);
  font: 700 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; background: none;
  padding: 6px 0;
}
.in-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.75,.2,1);
}
.in-links a:hover, .in-links a:focus { color: var(--accent, #F784C5); background: none; text-decoration: none; }
.in-links a:hover::after, .in-links a[aria-current]::after { transform: scaleX(1); }

/* ---------- burger ---------- */
.in-burger {
  display: none; margin-left: auto;
  width: 40px; height: 40px; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent, #F784C5);
}
.in-burger i { display: block; position: relative; width: 22px; height: 2px; background: currentColor; transition: background .2s; }
.in-burger i::before, .in-burger i::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform .25s; }
.in-burger i::before { top: -7px; }
.in-burger i::after  { top: 7px; }
html[data-in-open] .in-burger i { background: transparent; }
html[data-in-open] .in-burger i::before { transform: translateY(7px) rotate(45deg); }
html[data-in-open] .in-burger i::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- drawer ---------- */
.in-scrim { position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s; }
html[data-in-open] .in-scrim { opacity: 1; pointer-events: auto; }
.in-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 999;
  width: min(86vw, 360px);
  padding: calc(var(--in-bar) + 24px) 28px 28px;
  background: #000;
  display: flex; flex-direction: column;
  transform: translateX(-105%);
  transition: transform .4s cubic-bezier(.2,.75,.2,1);
  overflow-y: auto;
}
html[data-in-open] .in-drawer { transform: none; }
.in-drawer-links { display: flex; flex-direction: column; gap: 4px; }
.in-drawer-links a {
  color: var(--accent, #F784C5);
  font: 700 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; background: none; padding: 6px 0;
}
.in-drawer-links a:hover { color: var(--paper, #fff); background: none; }
.in-drawer-foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- contact / newsletter + socials (shared) ---------- */
.in-sec { display: flex; gap: 20px; }
.in-sec a {
  color: var(--accent, #F784C5);
  font: 700 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; background: none;
}
.in-sec a:hover { color: var(--paper, #fff); background: none; }
.in-soc { display: flex; gap: 16px; align-items: center; }
.in-soc a {
  display: grid; place-items: center; width: 24px; height: 24px;
  color: var(--accent, #F784C5); background: none; opacity: .9;
  transition: transform .2s cubic-bezier(.2,.75,.2,1), opacity .2s, color .2s;
}
.in-soc a:hover { opacity: 1; transform: translateY(-2px); color: var(--paper, #fff); background: none; }
.in-soc svg { width: 17px; height: 17px; display: block; }

/* ---------- fixed glass footer, bottom right ---------- */
.in-foot {
  position: fixed; right: var(--in-g); bottom: var(--in-g); z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  padding: 18px 22px 16px;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(3px);
  border: 1px solid rgba(247,132,197,.35);
}

/* ---------- breakpoints ---------- */
@media (max-width: 1100px) {
  .in-links { gap: 18px; }
  .in-links a { font-size: 11px; letter-spacing: .12em; }
}
@media (max-width: 900px) {
  :root { --in-bar: 60px; --in-g: 20px; }
  .in-bar { padding: 0 20px; }
  .in-logo { width: 170px; height: 11px; }
  .in-links { display: none; }
  .in-burger { display: flex; }
  .in-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .in-drawer, .in-scrim, .in-links a::after, .in-soc a { transition: none; }
}