/*
Theme Name: Vilas Tonape
Description: Hand-coded 1:1 rebuild of vilastonape.com. No builder, no plugin dependencies.
Version: 1.0.0
Author: Snazzy Solutions
Text Domain: vilastonape
*/

/* ==========================================================================
   DESIGN SYSTEM — all knobs live here
   ========================================================================== */

@font-face {
  font-family: "seravek extralight";
  src: url("assets/fonts/Seravek-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #c00000;
  --green: #00af50;
  --ink: #000000;
  --grey: #7e7e7e;
  --bg: #fcfff6;
  --font-body: "seravek extralight", sans-serif;
  --fs-body: 15px;
  --lh-body: 19px;
  --wrap: 70%;             /* site-standard content row width */
  --stroke-bio: 0.30px;    /* darker-text option A — Vilas A/B pick pending */
  --stroke-lead: 0.50px;   /* darker-text option B */
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Reserve the scrollbar lane on EVERY page. Without it, pages tall enough to
   scroll (BIO, LEADERSHIP, HOME on short windows) are 15px narrower than pages
   that fit, so the centered 70% header/logo jumps ~2px between pages whenever
   classic scrollbars are on (mouse attached / "always show"). No-op with
   overlay scrollbars. The Divi original has this jump; we don't. */
html { overflow-x: clip; scrollbar-gutter: stable; }

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;   /* Divi sets this — glyph weight parity on macOS */
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  background-image: var(--vt-bg-img);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  font-family: var(--font-body);
  font-weight: 200;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  overflow-x: clip;
}

/* iOS ignores background-attachment:fixed — fixed pseudo-element overlay,
   same pattern staging uses. NEVER put an opaque background on html/body
   above this or the overlay vanishes (see project CLAUDE.md). */
@media (max-width: 980px) {
  body { background-image: none; }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -10;
    background: var(--bg) var(--vt-bg-img) center / cover no-repeat;
  }
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* Sticky-footer page frame: footer at viewport bottom on short pages,
   below content on long pages. Replaces staging's fixed-© + JS-gap hacks. */
.vt-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.vt-content { flex: 1 0 auto; }

.vt-footer { flex-shrink: 0; }

/* © bar — staging: 12px / 23.8px grey #7e7e7e, centered.
   Desktop: FIXED to the viewport bottom (staging behavior on every page that
   fits the viewport), except the two long pages (BIO, LEADERSHIP) where it
   flows after the content — the flex frame + footer margin give the exact
   80px-above / 7px-below gaps staging shows there.
   Mobile: static everywhere (staging behavior). */
.vt-copy {
  margin: 0;
  padding-bottom: 2px;
  font-size: 12px;
  line-height: 23.8px;
  text-align: center;
  color: var(--grey);
}

@media (min-width: 981px) {
  .vt-copy {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  body.page-template-template-bio-php .vt-copy,
  body.page-template-template-leadership-php .vt-copy,
  body.page-template-default .vt-copy,
  body.error404 .vt-copy {
    position: static;
    width: auto;
  }
  /* long pages: © ink sits exactly 80px below the last content line,
     even on viewports taller than the page (no flex stretch) */
  body.page-template-template-bio-php .vt-footer,
  body.page-template-template-leadership-php .vt-footer,
  body.page-template-default .vt-footer,
  body.error404 .vt-footer {
    margin-top: 61px;
  }
  body.page-template-template-bio-php .vt-page,
  body.page-template-template-leadership-php .vt-page {
    min-height: 0;
  }
}

@media (max-width: 980px) {
  .vt-copy { padding-bottom: 10px; }
  .vt-footer { padding-bottom: 5px; }
}

/* ==========================================================================
   HEADER
   Staging geometry @1440: 70% row (x 216..1224); logo <p> box y 53..73
   (36px/20px); nav column = 48.5% of row, flex space-between, links 15px/19px
   at y 60; header 155px tall. Nav gaps are FLUID (space-between) — that is
   staging's behavior at every width, do not convert to fixed margins.
   ========================================================================== */

/* Height is fluid on staging: 140px + 1.5% of the 70% row (= 1.05vw).
   Measured: 153 @1200, 155 @1440, 160 @1920. */
.vt-header { height: calc(140px + 1.05vw); }

.vt-header-row {
  width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.vt-logo {
  margin: 53.25px 0 0;           /* production: logo <p> top 53.25 (snippet 27098 math) */
  font-size: 36px;
  line-height: 20px;
  text-transform: uppercase;
}

.vt-logo-red { color: var(--red); }
.vt-logo-green { color: var(--green); }

.vt-nav {
  width: 48.5%;
  margin-top: 60px;
}

.vt-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.vt-menu a {
  font-size: 15px;
  line-height: 19px;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

.vt-menu .current-menu-item > a,
.vt-menu .current_page_item > a { color: var(--green); }

.vt-burger { display: none; }
.vt-mobile-panel { display: none; }

/* ==========================================================================
   SHARED CONTENT PRIMITIVES
   ========================================================================== */

.vt-row {
  width: var(--wrap);
  margin: 0 auto;
}

/* Page h1 — staging: 22px/22px green, 10px bottom padding, right-half on
   desktop, centered on mobile. */
.vt-h1 {
  margin: 0;
  padding-bottom: 10px;
  font-size: 22px;
  line-height: 22px;
  font-weight: 200;
  color: var(--green);
  text-transform: uppercase;
}

@media (min-width: 981px) {
  .vt-heading-row .vt-h1 { margin-left: 51.5%; }
  .vt-content .vt-mobile-only { display: none; }
}

@media (max-width: 980px) {
  .vt-heading-row .vt-h1 { text-align: center; }
  .vt-content .vt-desktop-only { display: none; }
}

/* Divi phone font scaling is PER-MODULE on staging: only the BIO body copy
   drops to 14px at ≤767 (leadership essay stays 15px, quote stays 18px).
   Line-height stays 19px; the 1em paragraph gap becomes 14px with it. */
@media (max-width: 767px) {
  main.vt-content .vt-bio-text p { font-size: 14px; margin-bottom: 14px; }
}

/* ==========================================================================
   BIO  (staging @1440: h1 y173; images y250 h233; text col y242 (-8px pull);
   catalog links x=img2-left, 27px under images, 34px pitch; stroke 0.30px on
   body copy only)
   ========================================================================== */

.vt-bio { padding-top: 2vh; }

.vt-bio-content {
  display: flex;
  justify-content: space-between;
  margin-top: calc(min(2vw, 27px) + 2vh);   /* 45px @1440x900, tracks staging */
}

.vt-bio-left {
  width: 48.5%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

/* production %s of the column (measured 981–1920) */
.vt-bio-img1 { width: 36.669%; align-self: flex-start; }
.vt-bio-img2 { width: 50.857%; margin-left: 6.586%; align-self: flex-start; }

/* Production gap under the photos is fluid: Divi's image module box runs
   2.934% (of this column) taller than the self-portrait, then the row's
   min(2vw,27px) bottom pad, then the next row's -16px pull (+1px inline
   offset). 26.3 @1440, 15.6 @1024, 31.6 @1920. */
/* links box = the self-portrait's width (so "…CATALOG 2005" wraps at ~981
   exactly like production) */
.vt-bio-cats { width: 50.857%; margin: calc(2.934% + min(2vw, 27px) - 15px) 0 0 43.255%; }

.vt-bio-cats a {
  display: block;
  font-size: 15px;
  line-height: 19px;
  margin-bottom: 15px;           /* 34px pitch */
  -webkit-text-stroke: 0 var(--ink);
}

.vt-bio-text {
  width: 48.5%;
  margin-top: -8px;              /* staging's -8px body-module pull */
}

.vt-bio-text p {
  margin: 0 0 15px;
  -webkit-text-stroke: var(--stroke-bio) var(--ink);
}

@media (max-width: 980px) {

  .vt-bio-content {
    display: block;
    margin-top: calc(30px + 2vh);   /* production: heading row 30px pad + 2vh row pad */
  }

  .vt-bio-left { width: 100%; }
  .vt-bio-img1 { width: 37.85%; }                     /* production 375–980 */
  .vt-bio-img2 { width: 52.49%; margin-left: 6.80%; }

  .vt-bio-text {
    width: 100%;
    margin-top: 52px;
  }

  .vt-bio-cats.vt-mobile-only {
    width: 100%;
    margin: calc(2px + 6vh) 0 0;   /* production: catalog module margin-top 6vh */
    text-align: center;
  }
  .vt-bio-cats.vt-mobile-only a { margin-bottom: 19px; }  /* 38px pitch */

  .vt-bio { padding-bottom: calc(73.2px + 23.08vh); }  /* 268 @844h */  /* reproduces staging's ©-above gap at 390 */
}

/* ==========================================================================
   LEADERSHIP  (staging @1440: h1 y173; essay full-width y242 stroke 0.50;
   two 47.2% columns y732 (gutter 5.56%); h3 20px/20px green +10px pad;
   li 15/19 mb7 (26px pitch desktop); quote 18px/28.8 centered italic y1480)
   ========================================================================== */

.vt-lead { padding-top: 2vh; }

.vt-lead-essay { margin-top: calc(min(2vw, 27px) + 2vh - 8px); }  /* 37 @1440x900, 39 @1000h */

.vt-lead-essay p {
  margin: 0 0 15px;
  -webkit-text-stroke: var(--stroke-lead) var(--ink);
}

.vt-h3 {
  margin: 0;
  padding-bottom: 10px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 200;
  color: var(--green);
}

.vt-lead-cols {
  display: flex;
  justify-content: space-between;
  margin-top: calc(min(2vw, 27px) + 8px);   /* 35 @1440 */
}

.vt-lead-col { width: 47.22%; }

.vt-lead-col p {
  margin: 0 0 15px;
  -webkit-text-stroke: var(--stroke-lead) var(--ink);
}

.vt-lead-col ul {
  margin: 0;
  padding-left: 15px;
}

.vt-lead-col li {
  font-size: 15px;
  line-height: 19px;
  margin-bottom: 7px;                /* 26px pitch desktop */
  -webkit-text-stroke: var(--stroke-lead) var(--ink);
}
.vt-lead-col li:last-child { margin-bottom: 0; }

.vt-lead-quote { margin-top: calc(3px + 4vh); }   /* 39 @900h, 43 @1000h */

.vt-lead-quote p {
  margin: 0 0 11px;                 /* lands © ink exactly 80px below quote */
  font-size: 18px;
  line-height: 28.8px;
  text-align: center;
  -webkit-text-stroke: var(--stroke-lead) var(--ink);
}

@media (max-width: 980px) {
  .vt-lead { padding-top: 0; padding-bottom: calc(14px + 8vh); }  /* production: quote→© = 32.8px + 8vh (2vh module + 6vh section) */
  .vt-lead-essay { margin-top: calc(22.1px + 2vh); }  /* 39 @844h */
  .vt-lead-cols { display: block; margin-top: 38px; }
  .vt-lead-col { width: 100%; }
  .vt-lead-col:not(:last-child) { margin-bottom: 45px; }  /* Divi stacked-column gap */
  .vt-lead-col li { margin-bottom: 11px; }   /* mobile pitch 49 w/ lh19 */
  .vt-lead-quote { margin-top: calc(18px + 4vh); }  /* production: last line→quote ink = 21px + 4vh */
}

/* ==========================================================================
   PRESS  (staging @1440: images left col x216 w460 (45.6% row), vasai 4vh +
   2.907%-col gap below colorado; 6 links right col x735, 34px pitch,
   vertically centered against the photos)
   ========================================================================== */

.vt-press { padding-top: 2vh; }

/* h1-box → images gap = heading-row pad + content-row pad (each
   min(2vw,27px)) + the h1 module's 1.5%-of-row margin (1.05vw).
   Staging: 60 @1200, 69 @1440, 74 @1920. */
.vt-press-content {
  display: flex;
  justify-content: space-between;
  margin-top: calc(2 * min(2vw, 27px) + 1.05vw);
}

.vt-press-left { width: 48.5%; }

.vt-press-left img { display: block; width: 94.02%; }

.vt-press-left .vt-press-vasai { margin-top: calc(2.907% + 4vh); }

.vt-press-links {
  width: 48.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vt-press-links p { margin: 0 0 15px; }        /* 34px pitch */
.vt-press-links p:last-of-type { margin-bottom: 0; }

.vt-press-links a {
  font-size: 15px;
  line-height: 19px;
  text-transform: uppercase;
}

@media (min-width: 768px) and (max-width: 980px) {
  .vt-press-colorado { width: calc(100% - 2vw) !important; }  /* staging tablet: 522 @768 */
}

@media (max-width: 980px) {
  .vt-press { padding-bottom: 95px; }
  .vt-press-content { display: block; margin-top: 90px; }
  .vt-press-left { width: 100%; }
  .vt-press-left img { width: 100%; }
  .vt-press-links { width: 100%; margin-top: 60px; text-align: center; }
  .vt-press-links p { margin-bottom: 19px; }   /* 38px pitch */
  .vt-press-links .vt-press-vasai { width: 100%; margin-top: 60px; }
}

/* ==========================================================================
   CONTACT  (staging @1440: florida photo left x216 w460 y250; email x735
   y247 15/20; LinkedIn 3-slot block right-pinned 1064..1224 y245; ProfT
   watermark 160w under the icons y397)
   ========================================================================== */

.vt-contact { padding-top: 2vh; }

.vt-contact-content {
  display: flex;
  justify-content: space-between;
  margin-top: calc(min(2vw, 27px) + 2vh);
}

.vt-contact-left { width: 48.5%; }
.vt-contact-left img { display: block; width: 94.02%; }

.vt-contact-right {
  width: 48.5%;
  margin-top: -5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* ProfT watermark bottom = photo bottom */
}

.vt-contact-toprow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vt-contact-email {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 20px;
}

.vt-contact-icons { display: flex; }
.vt-contact-icons a { display: block; }

.vt-contact-icons img { display: block; width: 30px; height: 30px; }
.vt-contact-icons a:nth-child(2) { margin: 0 35px; }
.vt-icon-blank { pointer-events: none; cursor: default; }

.vt-contact-proft {
  display: block;
  width: 160px;
  margin: 0 0 0 auto;
}

/* Desktop: production's icon block is the right 1/4 column's content box,
   right-pinned: min(160px, 22.75% of row − its min(2vw,27px) left pad).
   22.75% of row = 46.907% of this 48.5% column. Below ~1180px it is narrower
   than 160 and the three slots shrink proportionally (30/100/30 bases, the
   LinkedIn icon keeps its 35px left inset); the ProfT watermark hangs from
   the block's left edge. */
@media (min-width: 981px) {
  .vt-contact-right { --vt-icons-w: min(160px, calc(46.907% - min(2vw, 27px))); }
  .vt-contact-email { white-space: nowrap; }
  .vt-contact-icons { width: var(--vt-icons-w); flex-shrink: 0; }
  .vt-contact-icons a { flex: 0 1 30px; min-width: 0; }
  .vt-contact-icons a:nth-child(2) { flex-basis: 100px; margin: 0; }
  .vt-contact-icons a:nth-child(2) img { margin-left: 35px; }
  .vt-icon-blank img { width: 100%; }
  .vt-contact-proft { margin-right: calc(var(--vt-icons-w) - 160px); }
}

@media (max-width: 980px) {
  .vt-contact { padding-bottom: 94.8px; }
  .vt-contact-content { display: block; margin-top: calc(30px + 2vh); }  /* production: heading row 30px pad + 2vh row pad */
  .vt-contact-left { width: 100%; }
  .vt-contact-left img { width: 100%; }
  .vt-contact-right { width: 100%; margin-top: 27px; display: block; }  /* production tablet: 30px column gap − 3px module pull */
  .vt-contact-toprow { display: block; }
  .vt-contact-email { margin: 0; font-size: 15px; text-align: center; }
  .vt-contact-icons { justify-content: center; margin-top: 49px; }
  .vt-contact-proft { width: 172px; margin: 67px auto 0; }
}

@media (max-width: 767px) {
  .vt-contact-right { margin-top: 41px; }
  .vt-contact-email { font-size: 14px; }
  .vt-contact-icons { margin-top: 79px; }
}

/* ==========================================================================
   HOME  (staging @1440: 3 shadowed artworks equal-height 328 in the 70% row
   y164 (1vh below header); widths 25.4% / 44.64% / 21.92%, space-between;
   LinkedIn centered 15vh+22px below. Mobile: single artwork 80% centered.)
   ========================================================================== */

.vt-home { padding-top: 1vh; }

.vt-home-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vt-home-strip img {
  box-shadow: 8px 8px 14px 5px rgba(0, 0, 0, 0.69);
}

/* production widths (measured 1024–1920, constant % of the row) */
.vt-home-img1 { width: 25.445%; }
.vt-home-img2 { width: 44.667%; }
.vt-home-img3 { width: 21.888%; }

.vt-home-icon {
  margin-top: calc(15vh + min(2vw, 27px) - 5px);   /* production: row pad min(2vw,27) + 15vh row pad − 5px icon pull */
  text-align: center;
}
.vt-home-icon img { display: inline-block; width: 30px; height: 30px; }

@media (max-width: 980px) {
  /* staging's mobile footer flows right after content on short pages —
     don't stretch the page frame on mobile */
  .vt-page { min-height: 0; }
  .vt-home { padding-bottom: 60px; }
  .vt-home-mobile { text-align: center; }

  /* auto-rotating crossfade carousel (staging: 7s interval, 1s fade,
     all slides 845x1080 so the height is constant) */
  .vt-home-slider {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  .vt-home-slider img {
    display: block;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }
  .vt-home-slider img + img {
    position: absolute;
    inset: 0;
  }
  .vt-home-slider img.is-active { opacity: 1; }

  .vt-home-dots {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin-top: 26px;
  }
  .vt-home-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
  }
}

/* Tablet home: dots overlay the slide near its bottom (staging: 7px dots,
   absolute), © stays at image-bottom + 99px like phone. */
@media (min-width: 768px) and (max-width: 980px) {
  .vt-home { padding-bottom: 95px; }
  .vt-home-slider { position: relative; }
  .vt-home-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 37px;
    margin-top: 0;
    gap: 14px;
  }
  .vt-home-dots button { width: 7px; height: 7px; }
  .vt-home-mobile { position: relative; }
}

/* ==========================================================================
   GALLERIES  (staging: gallery row = 60vh, grid + focused image centered on
   its vertical midline; grid container left = 60.1% of row; h1 = grid −3px,
   captions = grid +10px; cells 3.25vw + 8px margins in a 16.25vw 5-col grid;
   focused image capped 46vh with the artwork drop shadow)
   ========================================================================== */

.vt-gal { padding-top: 2vh; }

.vt-gal-heading .vt-h1 { white-space: nowrap; }

@media (min-width: 981px) {
  .vt-gal-heading .vt-h1 { margin-left: calc(60.1% + 5px); }
}

.vt-gal-main {
  display: flex;
  height: 60vh;
  margin-top: min(2vw, 27px);
}

.vt-gal-left {
  width: 48.5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-focused {
  max-width: 46vh;
  max-height: 46vh;
  box-shadow: 8px 8px 14px 5px rgba(0, 0, 0, 0.69);
  transition: opacity 1s ease-in-out;
}

.vt-gal-right {
  margin-left: auto;
  width: 48.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vt-grid {
  width: 16.25vw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-left: 17.73%;
}

.vt-cell {
  width: 3.25vw;
  height: 3.25vw;
  margin: 8px;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.vt-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* caption hangs below the centered grid without affecting the centering */
.vt-caption-anchor { height: 0; overflow: visible; margin-left: calc(17.73% + 10px); }

.vt-caption { padding-top: 1.44vw; }

.vt-caption p {
  margin: 0;
  font-size: 12px;
  line-height: 3.6px;        /* staging's model: tiny line box + 1em pad     */
  padding-bottom: 11.9px;    /* = same 15.5px visual pitch, same ink extent  */
}

.vt-gal-mobile { display: none; }

/* Tablet (768–980): desktop content, columns stacked — focused image centered
   (still 46vh-capped), grid + captions below at 8.55%-of-row anchor. */
@media (min-width: 768px) and (max-width: 980px) {
  .vt-gal-heading .vt-h1 { margin-left: calc(8.55% + 5px); text-align: center; }
  .vt-gal-main { display: block; height: auto; margin-top: 0; }
  .vt-gal-left { width: 100%; }
  .vt-focused { display: block; margin: calc(30px + 1vh) auto 0; }   /* production: h1 ink → image = 65px + 1vh */
  .vt-gal-right { width: 100%; display: block; }
  .vt-grid { margin-left: 8.55%; margin-top: calc(94.83px + 1.274vw); }   /* production: image → first cell = 102.83px + 1.274vw */
  .vt-caption-anchor { height: auto; margin-left: calc(8.55% + 10px); }
  .vt-caption { padding-top: calc(30px + 1.278vw); }   /* production: last cell → caption ink = 32px + 1.278vw */
  .vt-gal-mobile { display: none; }
  .vt-gal { padding-bottom: calc(53.33px + 1vh); }   /* production: caption ink → © ink = 109.8px + 1vh */
}

/* Phone (≤767): stacked full images + one-line captions. */
@media (max-width: 767px) {
  .vt-gal { padding-bottom: 65.25px; }   /* production: constant last caption → © gap */
  .vt-gal-main { display: none; }

  .vt-gal-heading { width: 100%; }
  .vt-gal-heading .vt-h1 { font-size: 21px; line-height: 21px; text-align: center; }

  .vt-gal-mobile { display: block; margin-top: 60px; }

  .vt-mob-item { width: 80%; margin: 0 auto 30px; }
  .vt-mob-item img { display: block; width: 100%; margin-bottom: 2%; }  /* Divi %-margin: 6.24 @390 */

  /* staging's caption model: two <p> (title+medium, then line3), each with a
     zero line box + 1em pad; last p padless — so a line3 adds exactly 10px */
  .vt-mob-caption { margin: 0 0 0 2px; }
  .vt-mob-caption p {
    margin: 0;
    padding-bottom: 1em;
    font-size: 9.8px;
    line-height: 0;
  }
  .vt-mob-caption p:last-child { padding-bottom: 0; }
}

/* --- Mobile header (Divi breakpoint: ≤980) ------------------------------- */
@media (max-width: 980px) {
  /* staging mobile header is vh-anchored: logo top 5vh, total 125.3px+10.05vh
     (210 @844h, 216 @900h, 226 @1000h) */
  .vt-header { height: calc(125.3px + 10.05vh); }

  .vt-header-row { width: 100%; display: block; }

  .vt-logo {
    margin: 5vh 0 0;
    font-size: 43px;
    line-height: 20px;
    text-align: center;
  }

  .vt-nav { display: none; }

  .vt-burger {
    display: block;
    margin: 30px auto 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .vt-burger img { display: block; width: 64px; height: 59px; }

  /* Full-screen menu panel — bg2 cover, own centered logo, 22px items,
     current page green, LinkedIn at the bottom (matches staging's dfh-21). */
  .vt-mobile-panel.is-open {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    inset: 0;
    width: 100vw;   /* cover the reserved scrollbar lane too (scrollbar-gutter on html) */
    z-index: 9999;
    overflow-y: auto;
    background: var(--bg) var(--vt-panel-img) center / cover no-repeat;
  }

  body.vt-menu-open { overflow: hidden; }

  .vt-mobile-menu {
    list-style: none;
    margin: calc(42.96px + 6vh) 0 0;   /* production: logo ink → HOME ink = 80.96px + 6vh */
    padding: 0;
    text-align: center;
  }

  .vt-mobile-menu a {
    display: block;
    font-size: 22px;
    line-height: 29px;
    text-transform: uppercase;
    color: var(--red);
  }

  .vt-mobile-menu li { margin-bottom: 20.417px; }  /* production pitch 49.417 = 29 + 20.417 */
  .vt-mobile-menu li:last-child { margin-bottom: 0; }

  .vt-mobile-menu .current-menu-item > a,
  .vt-mobile-menu .current_page_item > a { color: var(--green); }

  .vt-mobile-linkedin { margin-top: calc(32.36px + 6vh); }   /* production: CONTACT ink → icon = 60.36px + 6vh */
  .vt-mobile-linkedin img { display: block; width: 30px; height: 30px; }
}

/* ==========================================================================
   PORTFOLIO SHEETS  (template-portfolio.php — /student-work/, /creative-work/)
   Rebuilt 1:1 from the Divi originals' box model (measured 981–2560):
   row = min(83.2vw, 1660px) centred on 48vw, two ≤460px columns with a
   5.5%-of-row gap; the row is vertically centred in an 86vh band. Right
   column paddings are % of the column width (5.819% / 2%), the tile grid is
   fixed px (31.19 × 44.19, 14px gaps), ProfT sits 92.78px below the grid top.
   ========================================================================== */

.vt-pf-band {
  min-height: 86vh;
  display: flex;
  align-items: center;
}

.vt-pf-row {
  width: min(83.2vw, 1660px);
  margin-left: calc(48vw - min(41.6vw, 830px));
  display: flex;
  justify-content: center;
  column-gap: 5.5%;
}

.vt-pf-left {
  flex: 0 1 460px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2.855%;          /* of the row width (row caps at 1660px) */
}

.vt-pf-focused {
  display: block;
  max-width: 350px;
  max-height: 350px;
  margin-top: 50px;
  box-shadow: 8px 8px 14px 5px rgba(0, 0, 0, 0.69);
  transition: opacity 1s ease-in-out;
}

.vt-pf-right { flex: 0 1 460px; min-width: 0; }

.vt-pf-head { padding: 5.819% 0; }

.vt-pf-name {
  margin: 5.819% 0;
  font-size: 36px;
  line-height: 20px;
  text-transform: uppercase;
  color: #666;
}

.vt-pf-title {
  margin: 0;
  padding: 20px 0 10px;
  font-size: 22px;
  line-height: 22px;
  font-weight: 200;
  color: #6c6c6c;
}

.vt-pf-mid { position: relative; display: flex; }

.vt-pf-grid {
  flex: 0 0 44.178%;
  min-width: 0;                 /* tiles overflow the column, as on the original */
  display: grid;
  grid-template-columns: repeat(5, 31.1875px);
  grid-auto-rows: 44.1875px;
  gap: 14px;
}

.vt-pf-cell {
  width: 31.1875px;
  height: 44.1875px;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.vt-pf-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-pf-side {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 11.637%;
  padding-left: 40px;
}

.vt-pf-contact {
  margin: -3px 0 0;
  white-space: nowrap;          /* explicit <br> lines; the e-mail line overhangs like the original */
  font-size: 15px;
  line-height: 22.9px;
  color: #000;
}

.vt-pf-proft {
  display: block;
  width: 100px;
  opacity: 0.46;
}

.vt-pf-side .vt-pf-proft {
  position: absolute;
  top: 92.78px;
  left: 40px;
}

.vt-pf-cap { padding-top: calc(7.819% + 12px); }

.vt-pf-cap p {
  margin: 0;
  padding-bottom: 12px;
  font-size: 12px;
  line-height: 3.6px;
  color: #000;
}

.vt-pf-phone { display: none; }

/* Tablet: the same blocks stacked in one ≤460px column. */
@media (max-width: 980px) {
  .vt-pf { padding-bottom: 60px; }
  .vt-pf-band { display: block; min-height: 0; }
  .vt-pf-row {
    width: min(460px, calc(100% - 40px));
    margin: 0 auto;
    flex-direction: column;
    column-gap: 0;
  }
  .vt-pf-left, .vt-pf-right { flex: none; }
  .vt-pf-left { padding-top: 0; }
}

/* Phone: every work stacked with its caption (as the original sheet). */
@media (max-width: 767px) {
  .vt-pf { padding-bottom: 20px; }
  .vt-pf-band { display: none; }
  .vt-pf-phone { display: block; padding-top: 30px; text-align: center; }
  .vt-pf-phone .vt-pf-name { margin: 0; }
  .vt-pf-phone .vt-pf-title { margin: 18px 0 0; font-size: 21px; line-height: 21px; }
  .vt-pf-item { width: 76%; margin: 30px auto 0; text-align: left; }
  .vt-pf-item img { display: block; width: 100%; }
  .vt-pf-mcap { margin: 1px 0 0 2px; }
  .vt-pf-mcap p { margin: 0; font-size: 9.8px; line-height: 11px; }
  .vt-pf-phone .vt-pf-proft { margin: 60px auto 0; }
  .vt-pf-phone .vt-pf-contact { margin: 27px 0 0; font-size: 14px; }
}

/* ==========================================================================
   GENERIC PAGES  (index.php / 404.php — privacy policy etc.)
   ========================================================================== */

.vt-generic { padding-top: 2vh; }
.vt-generic-body { margin-top: calc(30px + 2vh); }
.vt-generic-body p,
.vt-generic-body li { margin: 0 0 15px; -webkit-text-stroke: var(--stroke-bio) var(--ink); }
.vt-generic-body h2,
.vt-generic-body h3 {
  margin: 30px 0 10px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 200;
  color: var(--green);
}
.vt-generic-body a,
.vt-generic-link { color: var(--red); }

@media (max-width: 980px) {
  .vt-generic { padding-bottom: 95px; }
}

/* Phone only (≤767): sections sit flush under the header (tablet keeps its
   2vh). Kept at the end of the file so it wins the cascade over the
   per-section padding-top declarations above. */
@media (max-width: 767px) {
  .vt-bio, .vt-lead, .vt-press, .vt-contact, .vt-gal, .vt-generic { padding-top: 0; }
}