/* ---------- Local Fonts -------------------------------------- */
@font-face {
  font-family: "Complement";
  src: url("fonts/complement.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Passenger";
  src: url("fonts/Passenger.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Baramulla";
  src: url("fonts/Baramulla.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("fonts/HKGrotesk-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ---------- Design Tokens ------------------------------------ */
:root {
  /* Surface */
  --color-bg:           #ffffff;
  --color-surface:      #ffffff;
  --color-surface-alt:  #fafafa;

  /* Text */
  --color-text:         #111111;
  --color-text-muted:   #555555;
  --color-text-soft:    #777777;

  /* Neutral borders */
  --neutral-200:        #ececec;
  --neutral-300:        #d4d4d4;
  --neutral-400:        #a3a3a3;

  --pastel-green-light:  hsl(150, 85%, 92%);  /* ~#D9FCEB — pale mint bg */
  --pastel-green:        hsl(150, 80%, 72%);  /* ~#7EF1B8 — mid-light mint fill */
  --pastel-green-mid:    hsl(150, 80%, 42%);  /* ~#15C16B — vivid emerald: borders/shadows */
  --pastel-green-dark:   hsl(150, 85%, 25%);  /* ~#0A7541 — dark emerald: text on green */

  --pastel-lavender-light:  hsl(270, 50%, 90%);
  --pastel-lavender:        #6421ff;
  --pastel-lavender-mid:    #6421ff;
  --pastel-lavender-dark:   rgb(84, 39, 132);

  --pastel-yellow-light:  hsl(65, 100%, 90%);  /* ~#FAFFCC */
  --pastel-yellow:        #fef3c7;
  --pastel-yellow-mid:    #eeff42;   /* ~#BACA0F — borders/shadows */
  --pastel-yellow-dark:   #fcd34d;   /* ~#6A7503 — olive, for text on yellow */

  /* Geometry */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;

  /* Bottom-shadow constant (Gandi recipe) */
  --shadow-offset: 4px;
}

/* ---------- Reset & Base ------------------------------------- */
html {
  font-size: 1rem;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh; /* dvh handles mobile browser chrome better than vh */
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "HK Grotesk", "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection      { background: var(--pastel-lavender-mid); color: #fff; }
::-moz-selection { background: var(--pastel-lavender-mid); color: #fff; }

a {
  color: var(--pastel-lavender-dark);
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
a:hover    {
  color: var(--pastel-green-mid);
  text-decoration:none;
}
a:visited  {
  color: var(--pastel-lavender-mid);
  text-decoration-style: dotted;
  text-decoration-color: var(--pastel-green-dark);
}

b, strong { font-weight: 600; }

p { margin: 0 0 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography --------------------------------------- */
h1 {
  font-family: "Complement", "Passenger", "Georgia", serif;
  font-size: 10rem;
  line-height: 0.95;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
h1 #f { letter-spacing: 4px; }

h2 {
  font-family: "HK Grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0 0 1rem;
  color: var(--color-text);
}

h3 {
  font-family: "Passenger", "Georgia", serif;
  font-weight: normal;
  font-size: 2.25rem;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

h4 {
  font-family: "Baramulla", "Georgia", serif;
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-text);
  margin: 1.75rem 0 0.75rem;
}

h5, h6 {
  font-family: "Baramulla", "Georgia", serif;
  font-weight: normal;
  color: var(--color-text);
  margin: 1.25rem 0 0.5rem;
}
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

/* ---------- Header / Branding -------------------------------- */
header { padding: 2rem 1.25rem 0.5rem; text-align: center; }

.branding,
main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.branding { margin-top: 2.5rem; }
main { 
  width: 100%; 
  flex: 1;
}
.name {
  display: inline-block;
  position: relative;
}
.about {
  margin-top: 0.5rem;
  font-family: "Baramulla", "Georgia", serif;
  font-size: 1.5rem;
  color: var(--color-text-muted);
}

main { width: 100%; }

.hero {
  text-align: center;
  padding: 1.5rem 1.25rem 2rem;
  max-width: 56rem;
  margin: 0 auto;
}
.hero p {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---------- Buttons (Gandi recipe) --------------------------- */
/* shared base for any pill/button */
.btn,
.interactive-guide .item,
.glass-download-button,
.earlier-works-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*gap: 0.5rem;*/

  font-family: "Glook", "Georgia", serif;
  font-size: 1rem;
  font-weight: normal;
  color: var(--color-text);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  background: var(--color-surface);
  border: 1.5px solid var(--pastel-lavender-mid);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.5rem;
  cursor: pointer;

  box-shadow: 0 var(--shadow-offset) 0 var(--pastel-lavender-mid);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}

.btn:hover,
.interactive-guide:not(.sticky) .item:hover,
.sticky .item:hover,
.glass-download-button:hover {
  background: var(--pastel-lavender-light);
  transform: translateY(-2px);
  box-shadow: 0 calc(var(--shadow-offset) + 2px) 0 var(--pastel-lavender-mid);
}
.btn:active,
.interactive-guide .item:active,
.glass-download-button:active,
.earlier-works-toggle:active {
  transform: translateY(2px);
  /* Keep a thin shadow during press instead of zero, so the button doesn't
     look like its bottom border vanishes during the click */
  box-shadow: 0 1px 0 var(--pastel-lavender-mid);
}

/* Active section button (the one whose section is open) */
.interactive-guide .item.active {
  background: var(--pastel-lavender);
  border-color: var(--pastel-lavender-dark);
  color: #fff;
  box-shadow: 0 var(--shadow-offset) 0 var(--pastel-lavender-dark);
}

.interactive-guide:not(.sticky) .item.active:hover{
  color:#000;
}

/* Green-tinted variant for secondary CTAs (used on download button) */
.glass-download-button {
  background: var(--pastel-green-light);
  border-color: var(--pastel-green-mid);
  color: var(--pastel-green-dark);
  box-shadow: 0 var(--shadow-offset) 0 var(--pastel-green-mid);
  float: right;
  margin-bottom: 1rem;
}
.glass-download-button:hover {
  background: var(--pastel-green);
  box-shadow: 0 calc(var(--shadow-offset) + 2px) 0 var(--pastel-green-mid);
  color:#000;
}

:focus-visible {
  outline: 2px dashed var(--pastel-green-mid);
  background:#fff;
  color:#000;
  outline-offset: 5px;
}

/* ---------- Interactive Guide (section nav) ------------------ */
.interactive-guide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1.25rem 2.5rem;
  max-width: 64rem;
  margin: 0 auto;
}
.interactive-guide .item {
  position: relative;   /* Tooltip's containing block. Without this the tooltip
                           is positioned relative to the viewport and ends up
                           rendered off-screen above the top of the page. */
  margin: 0.5rem 1rem;
}

/* Tooltip (hover/focus) */
.tooltip {
  position: absolute;
  bottom: calc(110% + 2rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(90vw, 22rem);
  padding: 0.875rem 1rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--neutral-300);
  border-radius: var(--radius-sm);
  box-shadow: -2px var(--shadow-offset) 2px var(--pastel-lavender-mid);
  font-family: "HK Grotesk", sans-serif;
  font-size: 0.9rem;
  line-height: 1.4;
  /* Use visibility (transitionable) instead of display:none (instantaneous)
     so the opacity fade actually plays on every show/hide */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
  z-index: 9999;
  white-space: normal;
  text-align: left;
}
.interactive-guide:not(.sticky) .item:focus-within .tooltip,
.interactive-guide:not(.sticky) .item:hover .tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* When showing, fire visibility immediately so the opacity fade is visible */
  transition: opacity .25s ease, visibility 0s linear 0s;
}

/* ---------- Sticky Nav --------------------------------------- */
#main-nav {
  z-index: 9999;
  transition: transform .3s ease;
}

#main-nav.sticky {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: safe center;
  align-items: center;
  position: sticky;
  top: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--pastel-lavender-mid);
  border-radius: var(--radius-sm);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

#main-nav.sticky .nav-inner {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

#main-nav.sticky .item {
  flex: 0 0 auto;
  min-width: max-content;
}

#main-nav.hide-on-scroll { transform: translateY(-100%); }

/* ---------- Expandable Sections ------------------------------ */
.expandable-section {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease, max-height .6s ease, padding .3s ease;
  padding: 0 1.25rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
}
.expandable-section.expanded {
  max-height: 250rem;
  opacity: 1;
  padding: 2rem 1.25rem 3rem;
}

.section-heading {
  text-align: center;
  margin: 1rem auto 1.5rem;
}
.section-heading h3 {
  display: inline-block;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid var(--pastel-lavender-mid);
}

/* ---------- Cards -------------------------------------------- */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.glass-card {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 var(--shadow-offset) 0 var(--neutral-200);
  min-width: 18rem;
  flex: 1 1 calc(33.333% - 1rem);
  max-width: 22rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-shadow: none;
}

.glass-card.full-width {
  flex: 0 0 100%;
  max-width: none;
}

.glass-card.half-width {
  flex: 1 1 calc(66.666% - 1rem);
  max-width: none;
}

.deliverable-card {
  background: var(--pastel-lavender-light);
  border-color: var(--pastel-lavender-mid);
  box-shadow: 0 var(--shadow-offset) 0 var(--pastel-lavender-mid);
  margin:2rem auto;
}

.bottom-card { margin-bottom: 3rem; }

/* "Go to section" link inside a card */
.gotolistitem {
  list-style-type: none;
  margin-top: 1rem;
  padding: 0;
}
.gotolink,
.gotolink:visited {
  font-family: "Glook", "Georgia", serif;
  color: var(--pastel-lavender-dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--pastel-lavender-mid);
}
.gotolink:hover {
  color: var(--pastel-green-dark);
  border-bottom-color: var(--pastel-green-mid);
}

/* Section h5 underline (was blue underline w/ stained background) */
.expandable-section h5 {
  display: inline-block;
  font-family: "Baramulla", serif;
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 1.5rem 0 1rem;
  position: relative;
}
.expandable-section h5::after {
  content: "";
  display: block;
  margin-top: 0.4rem;
  width: 100%;
  height: 2px;
  background: hsl(55, 70%, 85%);
}
h5.analysis { margin-top: 1rem; }

/* ---------- Dialog flow blocks ------------------------------- */
.dialog-flow {
  font-family: "HK Grotesk", sans-serif;
  line-height: 1.6;
  margin: 2rem 0;
  background: var(--pastel-green-light);
  border: 1.5px solid var(--pastel-green-mid);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 var(--shadow-offset) 0 var(--pastel-green-mid);
}
.dialog-flow h5 {
  font-family: "Baramulla", serif;
  font-size: 1.1rem;
  color: var(--pastel-green-dark);
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.dialog-flow h5::after { background: var(--pastel-green-mid); }
.dialog-flow p { margin-bottom: 0.75rem; }
.dialog-flow .system-note {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

/* ---------- Deliverable figures (images/videos w/ captions) -- */
.deliverable-media {
  margin: 2rem auto;
  display: block;
  text-align: center;
  max-width: 60%;
}
.deliverable-media img,
.deliverable-media video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}
.deliverable-media figcaption {
  font-family: "HK Grotesk", sans-serif;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  padding: 0.5rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

.deliverable-media.vertical:not(.video-caption-figure) {
  display: inline-block;
  width: 25dvw;
  max-width: 22rem;
  vertical-align: top;
  margin: 1.5rem 0.5rem;
  text-align: center;
}

.deliverable-media.video-caption-figure {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 2rem auto;
}

.deliverable-figure {
  background: var(--color-surface);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius);
  box-shadow: 0 var(--shadow-offset) 0 var(--neutral-200);
  margin: 2rem auto;
  padding: 1.5rem;
  max-width: 100%;
}

.center-container{ text-align:center; }

.deliverable-figure figcaption {
  font-family: "Baramulla", serif;
  font-size: 1.2rem;
  text-align: center;
  font-weight: normal;
  margin-bottom: 1rem;
  color: var(--color-text);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.deliverable-figure table {
  width: 100%;
  border-collapse: collapse;
  font-family: "HK Grotesk", sans-serif;
  font-size: 0.95rem;
  color: var(--color-text);
}
.deliverable-figure table th,
.deliverable-figure table td {
  border: 1px solid var(--neutral-200);
  padding: 0.625rem;
  text-align: left;
}
.deliverable-figure table th.step-header {
  background: var(--pastel-lavender-light);
  font-weight: 600;
}

/* Generic figcaption (overrides legacy gradient look) */
figcaption {
  font-family: "HK Grotesk", sans-serif;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--shadow-offset) 0 var(--neutral-200);
  text-shadow: none;
  padding: 0.75rem;
}

/* Hover captions over video stills */
.video-wrapper,
.video-caption-figure { position: relative; }
.hover-caption {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  font-family: "HK Grotesk", sans-serif;
  font-size: 400%;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity .2s ease;
  color: var(--color-text);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.video-wrapper {
  min-height: 12rem;
  border-radius: var(--radius-lg);
}

.video-wrapper.horiz {
  background: lightslategrey;
  min-height: 14rem;
}

.video-wrapper:hover .hover-caption,
.video-caption-figure:hover .hover-caption {
  opacity: 1;
  pointer-events: auto;
}
.video-caption-figure .hover-caption { height: 80%; }
.hover-caption strong {
  font-family: "Baramulla", serif;
  font-size: 70%;
  font-weight: normal;
  margin-bottom: 0.5rem;
  display: block;
}
.hover-caption p {
  font-weight: 400;
  font-size: 40%;
  margin-top: 1%;
}

/* Review text in lists */
.review-text li {
  margin: 0.75rem 1.5rem;
  line-height: 1.4;
}

/* ---------- VUX 6-step table (Voice UX) ---------------------- */
.VUX-steps-table-container {
  max-width: 75rem;
  margin: 2rem auto;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius);
  box-shadow: 0 var(--shadow-offset) 0 var(--neutral-200);
  font-family: "HK Grotesk", sans-serif;
  color: var(--color-text);
}
.VUX-steps-table-container h4 {
  text-align: center;
  font-family: "Baramulla", serif;
  color: var(--color-text);
  margin: 0 0 1rem;
}
.VUX-steps-table-container table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.VUX-steps-table-container th {
  background: var(--pastel-lavender);
  color: var(--pastel-lavender-dark);
  padding: 0.875rem;
  font-family: "Baramulla", serif;
  font-weight: normal;
}
.VUX-steps-table-container th.step-header { background: var(--pastel-lavender-mid); color: #fff; }
.VUX-steps-table-container td {
  padding: 0.875rem;
  border: 1px solid var(--neutral-200);
  vertical-align: top;
}
.VUX-steps-table-container tr:nth-child(2n) { background: var(--color-surface-alt); }
.VUX-steps-table-container tr:hover td {
  background: var(--pastel-yellow-light);
  border-color: var(--pastel-yellow-mid);
}
.VUX-steps-table-container tr:hover td.step-header {
  background: var(--pastel-lavender-dark);
  color: #fff;
  border-color: var(--pastel-lavender-dark);
}

@media (max-width: 51.2rem) {
  .VUX-steps-table-container table,
  .VUX-steps-table-container td,
  .VUX-steps-table-container th { display: block; }
  .VUX-steps-table-container thead { display: none; }
  .VUX-steps-table-container tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .VUX-steps-table-container td {
    display: flex;
    justify-content: space-between;
    text-align: right;
  }
  .VUX-steps-table-container td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text);
    margin-right: 1rem;
    text-align: left;
  }
  .VUX-steps-table-container td.step-header {
    background: var(--pastel-lavender);
    color: var(--pastel-lavender-dark);
    flex-wrap: nowrap;
    align-items: center;
  }
}

/* ---------- mxgraph container -------------------------------- */
.mxgraph-container { margin: 2rem auto; text-align: center; }
.mxgraph {
  border-radius: var(--radius);
  border: 1.5px solid var(--neutral-200);
  box-shadow: 0 var(--shadow-offset) 0 var(--neutral-200);
}

/* ---------- Earlier Works (blurred-until-revealed) ----------- */
.earlier-works-wrapper {
  position: relative;
  margin: 3rem 0;
}
.earlier-works {
  filter: blur(8px);
  opacity: 0.3;
  pointer-events: none;
  user-select: none;
  transition: filter .6s ease, opacity .6s ease;
}
.earlier-works-wrapper.revealed .earlier-works {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
}
.earlier-works-toggle {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: var(--pastel-yellow-light);
  border-color: var(--pastel-yellow-mid);
  box-shadow: 0 var(--shadow-offset) 0 var(--pastel-yellow-mid);
  color: #000;
}
.earlier-works-toggle:hover {
  background: var(--pastel-yellow-light);
  box-shadow: 0 calc(var(--shadow-offset) + 2px) 0 var(--pastel-yellow-mid);
  transform: translateY() !important;
}
.earlier-works-wrapper.revealed .earlier-works-toggle {
  position: static;
  transform: none;
  margin: 0 auto 1.5rem;
  display: flex;
}

/* ---------- Footer ------------------------------------------- */
footer {
  text-align: center;
  width: 100%;
  padding: 2rem 1.25rem;
  /* removed: margin-top, position, bottom — flexbox parent handles positioning */
  font-family: "HK Grotesk", sans-serif;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-top: 1.5px solid var(--neutral-200);
}
footer a { color: var(--pastel-lavender-dark); }
footer p{ margin-bottom:0; }

/* ---------- Responsive --------------------------------------- */
@media (max-width: 48rem) {
  h1 { font-size: 6rem; }
  .about { font-size: 1.25rem; }
  .hero p { font-size: 1rem; }

  .interactive-guide {
    gap: 0.625rem;
    padding: 1.25rem 1rem 2rem;
  }
  .interactive-guide .item {
    margin-top: 0.5rem;
    padding: 0.75rem 1.125rem;
    font-size: 1rem;
  }
  .cards-container { gap: 1rem; }
  .glass-card {
    flex: 0 0 100%;
    max-width: none;
    min-width: 0;
  }
  .deliverable-media.vertical:not(.video-caption-figure) {
    display: block;
    width: 90%;
    max-width: 90%;
    margin: 1.5rem auto;
  }
  .deliverable-media.video-caption-figure { max-width: 100%; }
  .glass-download-button {
    float: none;
    display: inline-flex;
  }
}

@media (max-width: 30rem) {
  h1 { font-size: 4.5rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.25rem; }
}

@media (orientation: portrait) {
  .hover-caption strong { font-size: 2rem; }
  .hover-caption p { font-size: 1rem; }
}