/* ════════════════════════════════════════════════════════════
   folio studios — site styles (served at the root)
   The previous site is preserved at /legacy/index.html.
   ════════════════════════════════════════════════════════════ */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #f6f4ef;
}

body {
  font-family: 'Libre Baskerville', serif;
  color: #141414;
  animation: page-in 700ms ease both;
  transition: opacity 450ms ease;
}

/* ── Per-page backgrounds ──
   Landing / commercial / about = off-white with black text; our world
   keeps the terracotta grid (it's the "being built" page). */
body[data-page="ourworld"],
html:has(body[data-page="ourworld"]) { background: #f7e7da; }

/* The frosted grid aesthetic only lives on our world now */
body:not([data-page="ourworld"]) #haze,
body:not([data-page="ourworld"]) #tones { display: none; }

body.leaving { opacity: 0; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Grid (ported from the legacy homepage) ── */
#grid {
  position: fixed;
  top: 0; left: 0;
  display: grid;
  z-index: 1;
}

.sq {
  background: transparent;
  /* only top+left carry color — neighbouring borders would otherwise
     stack into 2px-wide lines; this keeps every line a true 1px */
  border: 1px solid transparent;
  border-top-color: rgba(188, 118, 84, 0.28);
  border-left-color: rgba(188, 118, 84, 0.28);
  cursor: inherit;
  position: relative;
  z-index: 1;
  /* no will-change here: promoting every square to its own GPU layer
     under the backdrop-filter haze stalls the compositor */
}
/* Blue hover — kept exactly as it works on the current site */
.sq.hovered {
  border-color: #5DA5F8;
  border-width: 2px;
  transform: scale(1.12);
  box-shadow: 0 0 8px rgba(93, 165, 248, 0.5);
  z-index: 2;
}
.sq.colored::after {
  content: '';
  position: absolute; inset: 0;
  opacity: 0.59; pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 100px 100px;
}

/* ── Ambient tone fade ──
   Two flat, uniform tints — one warm, one cool — crossfading in
   opposite phase on a slow loop. No gradients or shapes: the whole
   page simply shifts temperature. Opacity-only, so it stays on the
   compositor. */
#tones {
  position: fixed; inset: 0;
  z-index: 4;
  pointer-events: none;
}
#tones::before, #tones::after {
  content: '';
  position: absolute; inset: 0;
}
#tones::before {
  background: rgba(244, 212, 184, 0.40);
  animation: warm-breath 24s ease-in-out infinite;
}
#tones::after {
  background: rgba(236, 194, 172, 0.38);
  animation: cool-breath 24s ease-in-out infinite;
}
@keyframes warm-breath { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes cool-breath { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ── Frosted haze over the grid ──
   Gentle backdrop blur softens the lines everywhere; the radial
   wash is strongest at center so the grid breathes at the edges. */
#haze {
  position: fixed; inset: 0;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(0.9px);
  -webkit-backdrop-filter: blur(0.9px);
  background: radial-gradient(ellipse 78% 68% at 50% 46%,
    rgba(250, 238, 226, 0.42) 0%,
    rgba(250, 238, 226, 0.24) 52%,
    rgba(250, 238, 226, 0.03) 100%);
}

/* ── Content (sits above the haze, stays sharp) ── */
#top-nav {
  position: fixed;
  top: 11.8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;   /* small links sit on the active header's baseline */
  gap: 82px;          /* ~one grid square wider than before */
  z-index: 10;
  white-space: nowrap;
}
.nav-link {
  font-family: 'Libre Baskerville', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: #1c1c1c;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 400ms ease, font-size 300ms ease;
}
.nav-link:hover { opacity: 0.5; }

/* On an inner page, that page's own nav item becomes the bold header —
   same size as the old standalone heading; the rest stay small + normal. */
body[data-page="commercial"] .nav-link[data-nav="commercial"],
body[data-page="about"] .nav-link[data-nav="about"],
body[data-page="ourworld"] .nav-link[data-nav="ourworld"] {
  font-size: 25px;
  font-weight: 700;
}

#title {
  position: fixed;
  top: 47%;
  left: 0;
  right: 0;                 /* full-width box… */
  text-align: center;       /* …text centred within it — width-independent */
  transform: translateY(-50%);
  z-index: 10;
  font-family: 'Libre Baskerville', serif;
  font-weight: 500;
  font-size: clamp(59px, 9.2vw, 145px);
  line-height: 1;
  color: #141414;
  white-space: nowrap;
  pointer-events: none;     /* inert wordmark */
  transition: opacity 450ms ease;
  animation: title-float 9s ease-in-out infinite;
}
@keyframes title-float {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 7px)); }
}

#tagline {
  position: fixed;
  top: 71.5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #1d1d1d;
  white-space: nowrap;
}

/* ── Video cards ──
   They sit BEHIND the grid (z 0 < grid z 1), under the haze and
   tone layers, so the lines, frost and color weather wash over
   them. Slight blur veil for curiosity; grid.js lifts it (.clear)
   when the cursor is over a card, since :hover can't reach back
   here. Videos are scaled up a touch inside the card so the blur
   doesn't bleed soft edges. */
.video-card {
  position: fixed;
  z-index: 0;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(158, 100, 66, 0.20);
}
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  filter: blur(2px);
  transition: filter 700ms ease;
}
.video-card.clear video { filter: blur(0); }
.video-card.editing { outline: 1px dashed rgba(93, 165, 248, 0.7); }

#video-dare-market {
  left: 6.72%;
  top: 19.81%;
  width: 12.06%;
  aspect-ratio: 16 / 9;
}
#video-kled {
  left: 76.16%;
  top: 71.20%;
  width: 14.82%;
  aspect-ratio: 16 / 9;
}

/* ── Layout-copied toast ── */
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-family: 'Libre Baskerville', serif;
  font-size: 7px;
  letter-spacing: 0.04em;
  color: #1c1c1c;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
#toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #tones::before, #tones::after, #title { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   CONTACT — soft yellow card in the bottom-right; content types
   itself in line by line (see contact.js). The landing stays
   interactive behind it (only the card captures clicks).
   ════════════════════════════════════════════════════════════ */
#contact-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;     /* never blocks the landing */
  opacity: 0;
  transition: opacity 320ms ease;
}
#contact-modal.open { opacity: 1; }

.contact-box {
  position: fixed;
  right: 30px;
  bottom: 26px;
  width: 520px;
  padding: 34px 42px 38px;
  background: rgba(246, 234, 168, 0.65);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(70, 60, 20, 0.20);
  pointer-events: auto;     /* the card itself is interactive */
  transform: translateY(14px);
  transition: transform 380ms ease;
}
#contact-modal.open .contact-box { transform: translateY(0); }

.contact-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: 'Libre Baskerville', serif;
  font-size: 11px;
  color: #2a2a2a;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 250ms ease;
}
.contact-close:hover { opacity: 1; }

/* ── Typed lines ── */
.contact-lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.c-line {
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: #161616;
  min-height: 1.3em;
  white-space: nowrap;
}
.c-line.c-head { font-weight: 700; font-size: 16px; }
.c-email { color: #2b2b2b; text-decoration: none; cursor: pointer; }
.c-email:hover { text-decoration: underline; opacity: 0.7; }
.c-space { height: 8px; min-height: 0; }
/* blinking caret on the line currently being typed */
.c-line.typing::after {
  content: '|';
  margin-left: 1px;
  font-weight: 400;
  animation: caret-blink 0.7s step-end infinite;
}
@keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.contact-lines .social-icons {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-top: 8px;
  min-height: 24px;
  opacity: 0;
  transition: opacity 420ms ease;
}
.contact-lines .social-icons.show { opacity: 1; }
.contact-lines .social-icons a {
  color: #1f1f1f;
  display: inline-flex;
  transition: transform 300ms ease, opacity 300ms ease;
}
.contact-lines .social-icons a:hover { opacity: 0.6; transform: translateY(-2px); }
.contact-lines .social-icons svg { width: 28px; height: 28px; display: block; }

/* ════════════════════════════════════════════════════════════
   OUR WORLD — building-blocks neighborhood (see ourworld.js)
   ════════════════════════════════════════════════════════════ */
#ow-heading {
  position: fixed;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.01em;
  color: #161616;
  text-shadow: 0 5px 14px rgba(158, 100, 66, 0.14);
  white-space: nowrap;
  pointer-events: none;   /* clicks fall through to paint the grid */
}
#ow-note {
  position: fixed;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-family: 'Libre Baskerville', serif;
  font-size: 9px;
  letter-spacing: 0.03em;
  color: #1c1c1c;
  white-space: nowrap;
  pointer-events: none;
}
/* a block dropping into place */
.sq.built {
  animation: block-pop 320ms ease both;
  z-index: 2;
}
@keyframes block-pop {
  0%   { transform: scale(0.35); opacity: 0; }
  65%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* Commercial: let clicks fall through empty canvas to the grid (paint),
   while videos stay interactive. */
body[data-page="commercial"] #commercial { pointer-events: none; }
body[data-page="commercial"] .work-card { pointer-events: auto; }

/* The wall is a tall scroll; push it down so the header gets a clear band,
   and let the header scroll away with the page instead of sitting on a clip. */
body[data-page="commercial"] { padding-top: 210px; }
body[data-page="commercial"] #top-nav {
  position: absolute;
  top: 120px;
}

/* ── Animated logo (home link), top-left on every page ── */
#logo-home {
  position: fixed;
  top: 10px;
  left: 32px;
  width: 61px;
  height: 55px;
  z-index: 12;
  display: block;
  cursor: pointer;
  transition: opacity 300ms ease;
}
#logo-home:hover { opacity: 0.78; }
#logo-home img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  -webkit-user-drag: none;
}

/* ════════════════════════════════════════════════════════════
   ABOUT US — heading + body, with contact pinned at the bottom
   (plain icons, no yellow card).
   ════════════════════════════════════════════════════════════ */
#about-heading {
  position: fixed;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 25px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #161616;
  text-shadow: 0 5px 14px rgba(158, 100, 66, 0.14);
  white-space: nowrap;
  pointer-events: none;
}
#about-body {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: min(640px, 86vw);
  font-family: 'Libre Baskerville', serif;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: #1c1c1c;
  text-align: center;
}
#about-body p {
  margin: 0 0 1.15em;
}
#about-body p:last-child {
  margin-bottom: 0;
}
#about-contact {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
/* Commercial scrolls — let contact flow to the very bottom of the page
   instead of floating fixed over the videos. */
body[data-page="commercial"] #about-contact {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin: 96px auto 72px;
}
#about-contact .contact-head {
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: #141414;
}
#about-contact .contact-emails {
  display: flex;
  gap: 44px;
}
#about-contact .contact-emails a {
  font-family: 'Libre Baskerville', serif;
  font-size: 9px;
  letter-spacing: 0.02em;
  color: #2b2b2b;
  text-decoration: none;
  transition: opacity 300ms ease;
}
#about-contact .contact-emails a:hover { opacity: 0.55; text-decoration: underline; }
#about-contact .contact-socials {
  display: flex;
  gap: 20px;
  align-items: center;
}
#about-contact .contact-socials a {
  color: #1f1f1f;
  display: inline-flex;
  transition: transform 300ms ease, opacity 300ms ease;
}
#about-contact .contact-socials a:hover { opacity: 0.6; transform: translateY(-2px); }
#about-contact .contact-socials svg { width: 22px; height: 22px; display: block; }

/* ── Page 2 placeholder bits ── */
#corner-mark {
  position: fixed;
  top: 34px;
  left: 38px;
  z-index: 10;
  font-size: 11px;
  font-weight: 500;
  color: #141414;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 400ms ease;
}
#corner-mark:hover { opacity: 0.5; }

#placeholder-note {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  font-style: italic;
  font-size: 10px;
  color: rgba(22, 32, 42, 0.45);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   PAGE 2 — THE MACHINE
   Anchor geometry (intake / output / crossbar) lives here as
   percentages of #machine, which is sized to the pipe's aspect
   ratio. page2.js reads these positions off the rendered box.
   ════════════════════════════════════════════════════════════ */

/* ── The machine (rotated-f pipe) ── */
#machine {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  width: clamp(440px, 44vw, 760px);
  aspect-ratio: 222 / 134;
  z-index: 6;            /* above grid/haze/tones, crisp focal point */
  pointer-events: none;  /* clicks fall through to the document handler */
}
#pipe-body {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 20px 34px rgba(158, 100, 66, 0.18));
}

/* ── Question track (top row) ── */
#question-track {
  position: fixed;
  top: 12.5%;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: clamp(14px, 1.9vw, 38px);
  padding: 0 4vw;
  z-index: 9;
  pointer-events: none;  /* the questions themselves opt back in */
}
.question {
  font-family: 'Libre Baskerville', serif;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #1c1c1c;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transition: color 300ms ease, opacity 500ms ease, transform 500ms ease;
}
.question.in { animation: q-pop 320ms ease both; }
.question:hover { color: #5DA5F8; }
.question.dimmed { opacity: 0.12 !important; pointer-events: none; }
@keyframes q-pop {
  from { opacity: 0; transform: translateY(-9px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* ── Flying question clone (fed into the intake) ── */
.flyer {
  position: fixed;
  z-index: 11;
  font-family: 'Libre Baskerville', serif;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #1c1c1c;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── Output ──
   A flexible frame that emerges from the right curl. Later it can
   hold a video, an image menu, BTS, etc. — for now, a soft glowing
   placeholder. page2.js positions each card via fixed coords. */
#output-zone { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.output-card {
  position: fixed;
  width: clamp(180px, 15vw, 240px);
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.50);
  box-shadow:
    0 0 0 1px rgba(93, 165, 248, 0.28),
    0 0 30px rgba(93, 165, 248, 0.22),
    0 24px 54px rgba(158, 100, 66, 0.24);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}
.output-card.glow { animation: card-glow 3.2s ease-in-out infinite; }
@keyframes card-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(93,165,248,0.24), 0 0 26px rgba(93,165,248,0.18), 0 24px 54px rgba(70,110,140,0.22); }
  50%      { box-shadow: 0 0 0 1px rgba(93,165,248,0.40), 0 0 40px rgba(93,165,248,0.34), 0 24px 54px rgba(70,110,140,0.26); }
}
.output-card .placeholder-frame {
  width: 78%;
  height: 70%;
  border: 1px dashed rgba(158, 100, 66, 0.40);
  border-radius: 6px;
}
.output-card .output-video,
.output-card .output-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── First-click hint ── */
#machine-hint {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  z-index: 9;
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.05em;
  color: rgba(22, 32, 42, 0.40);
  white-space: nowrap;
  pointer-events: none;
  animation: hint-breathe 3.4s ease-in-out infinite;
  transition: opacity 600ms ease;
}
#machine-hint.gone { opacity: 0; }
@keyframes hint-breathe {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  #machine-hint, .output-card.glow, .contact-box { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   COMMERCIAL — scrolling video wall
   The grid/haze/tones stay fixed; the video cards scroll over them
   on a tall canvas. Cards are draggable/resizable and lock in via
   localStorage, same as the landing (see commercial.js).
   ════════════════════════════════════════════════════════════ */
/* Scroll on the <html> element so the fixed grid backdrop doesn't swallow
   wheel events (a fixed element's wheel targets the document scroller, not
   body — scrolling body left the page feeling stuck). */
html:has(body[data-page="commercial"]) {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
body[data-page="commercial"] {
  overflow: visible;
  height: auto;
  min-height: 100%;
}

#commercial {
  position: relative;
  z-index: 6;            /* video wall sits above the fixed grid/haze/tones */
  width: 100%;
  min-height: 100%;
  /* height is set by commercial.js to fit the lowest card */
}

#work-heading {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Libre Baskerville', serif;
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.01em;
  color: #161616;
  text-shadow: 0 5px 14px rgba(158, 100, 66, 0.14);
  white-space: nowrap;
  z-index: 7;
}

.work-card {
  position: absolute;
  aspect-ratio: 16 / 9;
  background: rgba(120, 150, 170, 0.10);
  box-shadow: 0 8px 20px rgba(158, 100, 66, 0.12);
  cursor: pointer;
  user-select: none;
  transition: box-shadow 400ms ease;
}
.work-card:hover { box-shadow: 0 12px 26px rgba(158, 100, 66, 0.18); }
.work-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* clips to the card on its own (no overflow) */
  display: block;
  pointer-events: none;    /* let the card own the drag */
  -webkit-user-drag: none;
}

/* Poster thumbnail over the video; fades out on hover to reveal playback */
.work-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: 1;
  transition: opacity 350ms ease;
}
.work-card:hover .work-thumb { opacity: 0; }

/* Name under the video — fades in on hover (all caps, black, not bold) */
.work-label {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 12px;
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111111;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease;
}
.work-card:hover .work-label { opacity: 1; }
.work-card.editing { outline: 1px dashed rgba(93, 165, 248, 0.8); outline-offset: 2px; }

/* Corner resize handles (aspect stays locked) */
.work-card .rhandle {
  position: absolute;
  width: 16px; height: 16px;
  z-index: 2;
}
.work-card .rhandle.nw { top: -8px; left: -8px; cursor: nwse-resize; }
.work-card .rhandle.ne { top: -8px; right: -8px; cursor: nesw-resize; }
.work-card .rhandle.sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.work-card .rhandle.se { bottom: -8px; right: -8px; cursor: nwse-resize; }

/* ── Fullscreen player (with sound), opened on click ── */
#video-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 24, 30, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
#video-fullscreen.open { opacity: 1; pointer-events: auto; }
#video-fullscreen video {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  background: #000;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.vf-close {
  position: absolute;
  top: 22px;
  right: 30px;
  width: 46px;
  height: 46px;
  font-family: 'Libre Baskerville', serif;
  font-size: 25px;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 300ms ease;
}
.vf-close:hover { opacity: 1; }