/*
Theme Name:  Tatte media
Author:      Tatte media
Author URI:  https://example.com
Description:
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tatte-media
Tags:        one-column, custom-menu, featured-images, portfolio, dark
*/

/* ==========================================================================
   Table of contents
   1.  Design tokens (custom properties)
   2.  Base / reset
   3.  Layout helpers
   4.  Site header
   5.  Section headings (01 / 02 / 03 labels)
   6.  Hero + reel
   7.  Work list (films)
   8.  Studio
   9.  Contact
   10. Footer
   11. Inner pages (blog, page, single, 404)
   12. WordPress core classes
   13. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colours */
  --dv-bg: #0b0b0a;
  --dv-fg: #f2efe9;
  --dv-accent: #c8875a;

  /* The demo uses the foreground colour at many opacities. */
  --dv-fg-88: rgba(242, 239, 233, 0.88);
  --dv-fg-70: rgba(242, 239, 233, 0.7);
  --dv-fg-66: rgba(242, 239, 233, 0.66);
  --dv-fg-50: rgba(242, 239, 233, 0.5);
  --dv-fg-42: rgba(242, 239, 233, 0.42);
  --dv-fg-38: rgba(242, 239, 233, 0.38);
  --dv-fg-32: rgba(242, 239, 233, 0.32);
  --dv-fg-28: rgba(242, 239, 233, 0.28);
  --dv-line: rgba(242, 239, 233, 0.14);
  --dv-line-soft: rgba(242, 239, 233, 0.1);

  /* Placeholder "hatched" backgrounds used where a still/video is missing */
  --dv-hatch: repeating-linear-gradient(
    112deg,
    #171715 0 10px,
    #101010 10px 20px
  );
  --dv-hatch-dark: repeating-linear-gradient(
    112deg,
    #181816 0 10px,
    #0f0f0e 10px 20px
  );

  /* Type */
  --dv-font-sans: "Archivo", Helvetica, Arial, sans-serif;
  --dv-font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --dv-max-width: 1560px;
  --dv-gutter: 40px;
  --dv-grid-gap: 22px;

  /* Motion */
  --dv-ease: 0.3s ease;
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--dv-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--dv-bg);
  color: var(--dv-fg);
  font-family: var(--dv-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--dv-fg);
  text-decoration: none;
  transition:
    color var(--dv-ease),
    border-color var(--dv-ease);
}

a:hover,
a:focus-visible {
  color: var(--dv-accent);
}

::selection {
  background: var(--dv-accent);
  color: var(--dv-bg);
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-weight: 400;
}

/* Reusable "small mono label" style — most secondary text in the demo. */
.dv-label {
  font: 400 10px/1 var(--dv-font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dv-label--xs {
  font-size: 9.5px;
  letter-spacing: 0.16em;
}

.dv-label--accent {
  color: var(--dv-accent);
}

.dv-label--muted {
  color: var(--dv-fg-38);
}

/* Reusable mono paragraph style (12.5px / 1.7). */
.dv-mono-copy {
  font: 400 12.5px/1.7 var(--dv-font-mono);
  color: var(--dv-fg-50);
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.dv-site {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

/* Subtle film-grain dot pattern that sits above everything. */
.dv-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 3px 3px;
}

.dv-container {
  max-width: var(--dv-max-width);
  margin: 0 auto;
  padding-left: var(--dv-gutter);
  padding-right: var(--dv-gutter);
}

/* 12-column grid used by Work, Studio and Contact. */
.dv-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--dv-grid-gap);
}

.dv-section--ruled {
  border-top: 1px solid var(--dv-line);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 10px 16px;
  background: var(--dv-fg);
  color: var(--dv-bg);
}

/* --------------------------------------------------------------------------
   4. Site header
   -------------------------------------------------------------------------- */
.dv-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70; /* above .dv-film__still (61) and .dv-grain (60), below .dv-modal (100) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--dv-gutter);
  background: linear-gradient(rgba(11, 11, 10, 0.9), rgba(11, 11, 10, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dv-header__brand {
  font: 500 12px/1 var(--dv-font-sans);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dv-header__brand:hover {
  color: var(--dv-fg);
}

.dv-nav ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dv-nav a {
  font: 400 10.5px/1 var(--dv-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dv-fg-50);
}

.dv-nav a:hover,
.dv-nav a:focus-visible,
.dv-nav .current-menu-item > a {
  color: var(--dv-fg);
}

/* Mobile menu toggle (hidden on desktop). */
.dv-nav-toggle {
  display: none;
  border: 1px solid var(--dv-line);
  background: transparent;
  color: var(--dv-fg);
  padding: 8px 12px;
  font: 400 10px/1 var(--dv-font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Section headings — "01  SELECTED WORK"
   -------------------------------------------------------------------------- */
.dv-section-heading {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.dv-section-heading__number {
  font: 400 10px/1 var(--dv-font-mono);
  letter-spacing: 0.2em;
  color: var(--dv-accent);
}

.dv-section-heading__title {
  font: 400 13px/1 var(--dv-font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.dv-section-heading__aside {
  margin-left: auto;
  font: 400 10px/1 var(--dv-font-mono);
  letter-spacing: 0.16em;
  color: var(--dv-fg-38);
}

/* --------------------------------------------------------------------------
   6. Hero + reel
   -------------------------------------------------------------------------- */
/* Two columns on desktop: copy on the left, the portrait (9:16) reel on the
   right. Stacks below 900px so the reel sits under the copy. */
.dv-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 29vw, 460px);
  align-items: center;
  column-gap: 64px;
  padding-top: 164px;
}

.dv-hero__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 30px;
}

.dv-hero__title {
  font: 400 clamp(44px, 7.6vw, 124px) / 0.9 var(--dv-font-sans);
  letter-spacing: -0.045em;
  text-wrap: balance;
  max-width: 11em;
}

.dv-hero__lede {
  margin-bottom: 12px;
  max-width: 262px;
}

/* The reel is a rounded card; the metadata strip
   "REEL — 2026   04:12   PRESS PLAY" and a progress bar overlay the video. */
.dv-hero__media {
  position: relative;
  align-self: center;
  border: 1px solid var(--dv-line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.dv-reel-meta {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px 36px;
  background: linear-gradient(rgba(11, 11, 10, 0.7), rgba(11, 11, 10, 0));
  color: var(--dv-fg-88);
  pointer-events: none;
}

.dv-reel {
  display: block;
  position: relative;
  aspect-ratio: 5 / 8;
  background: var(--dv-hatch);
  overflow: hidden;
}

.dv-reel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dv-reel__media iframe {
  width: 100%;
  height: 100%;
}

.dv-reel__caption {
  position: absolute;
  left: 22px;
  bottom: 18px;
  font: 400 10px/1 var(--dv-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 239, 233, 0.4);
}

.dv-reel__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dv-fg-50);
  border-radius: 50%;
  font: 400 9px/1 var(--dv-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dv-fg-70);
  transition: all 0.4s;
}

.dv-reel:hover .dv-reel__play,
.dv-reel:focus-visible .dv-reel__play {
  border-color: var(--dv-accent);
  color: var(--dv-accent);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Rectangular outlined button, reused for the hero CTA, the "view all"
   link under Selected Work, and the filter/watch links on inner pages. */
.dv-button {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid var(--dv-fg-50);
  font: 400 10px/1 var(--dv-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dv-fg-70);
  transition:
    color var(--dv-ease),
    border-color var(--dv-ease);
}

.dv-button:hover,
.dv-button:focus-visible {
  border-color: var(--dv-accent);
  color: var(--dv-accent);
}

.dv-hero__cta {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   7. Work list (films)
   -------------------------------------------------------------------------- */
.dv-work {
  padding-top: 120px;
  padding-bottom: 40px;
}

.dv-work .dv-section-heading {
  margin-bottom: 0;
}

/*
 * Each film is a 12-column row. The still and the meta block are placed
 * with inline `grid-column` values computed in PHP (see inc/template-tags.php)
 * so odd rows sit left and even rows sit right, like the demo.
 */
.dv-film {
  position: relative;
  align-items: center;
  padding: 56px 0;
  color: inherit;
  /* Reset so a <button> (video films) looks identical to a plain <div>
     (films without a video) — see template-parts/film/card.php. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  margin: 0;
  width: 100%;
  font: inherit;
  text-align: inherit;
}

.dv-film--video {
  cursor: pointer;
}

/* Full-bleed hairline under the section heading and under every row. */
.dv-work .dv-section-heading,
.dv-film {
  position: relative;
}

.dv-work .dv-section-heading::after,
.dv-film::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  border-bottom: 1px solid var(--dv-line-soft);
  pointer-events: none;
}

.dv-work .dv-section-heading {
  padding-bottom: 20px;
}

.dv-film:hover {
  color: inherit;
}

.dv-film__still-wrap {
  width: 100%;
  max-width: clamp(280px, 29vw, 460px);
}

.dv-film__still {
  position: relative;
  /* Above .dv-grain (z-index: 60) so the site-wide grain overlay doesn't
     wash out the stills — the still's own background/image paints over it. */
  z-index: 61;
  background: var(--dv-hatch-dark);
  border: 1px solid var(--dv-line);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  /* Same tall card as the hero reel, whatever ratio the film is set to. */
  aspect-ratio: 5 / 8 !important;
}

.dv-film__still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dv-film__placeholder {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: rgba(242, 239, 233, 0.34);
}

/* Warm tint that fades in over the still on hover. */
.dv-film__tint {
  position: absolute;
  inset: 0;
  background: var(--dv-accent);
  opacity: 0;
  transition: opacity 0.45s;
  mix-blend-mode: overlay;
}

.dv-film:hover .dv-film__tint {
  opacity: 0.28;
}

.dv-film__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 6px;
}

.dv-film__index {
  display: flex;
  gap: 12px;
}

.dv-film__title {
  font: 400 clamp(24px, 2.5vw, 40px) / 1.02 var(--dv-font-sans);
  letter-spacing: -0.03em;
}

.dv-film__note {
  max-width: 34ch;
}

.dv-work__view-all {
  display: flex;
  justify-content: center;
  padding: 24px 0 56px;
}

.dv-film__role {
  letter-spacing: 0.18em;
}

/* Right-hand rows: the text sits left of the still, so right-align it to
   hug the image instead of leaving a ragged gap between them. */
.dv-film--flip .dv-film__meta {
  align-items: flex-end;
  text-align: right;
}

/* "Vaata →" — only on devices without hover, where the pill on the still
   never shows and nothing else hints that the row opens a video. */
.dv-film__cta {
  display: none;
  margin-top: 4px;
  font-size: 11px;
}

@media (hover: none) {
  .dv-film__cta {
    display: inline-block;
  }
}

/* --------------------------------------------------------------------------
   8. Studio
   -------------------------------------------------------------------------- */
.dv-studio__inner {
  padding-top: 96px;
  padding-bottom: 96px;
}

.dv-studio__heading {
  grid-column: 1 / span 3;
}

.dv-studio__statement {
  grid-column: 5 / span 6;
  font: 400 clamp(20px, 2vw, 30px) / 1.42 var(--dv-font-sans);
  letter-spacing: -0.02em;
  color: var(--dv-fg-88);
  text-wrap: pretty;
}

.dv-studio__facts {
  grid-column: 5 / span 6;
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  margin-top: 44px;
  font: 400 11px/1.9 var(--dv-font-mono);
  color: rgba(242, 239, 233, 0.45);
}

.dv-fact-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dv-fact-list__label {
  color: var(--dv-fg-28);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 9.5px;
}

/* --------------------------------------------------------------------------
   9. Contact
   -------------------------------------------------------------------------- */
.dv-contact__inner {
  padding-top: 96px;
  padding-bottom: 40px;
}

.dv-contact__heading {
  grid-column: 1 / span 3;
}

.dv-contact__body {
  grid-column: 5 / span 8;
}

.dv-contact__headline {
  margin-bottom: 40px;
  font: 400 clamp(32px, 4.6vw, 72px) / 1.02 var(--dv-font-sans);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.dv-contact__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 72px;
}

.dv-channel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dv-channel__label {
  color: var(--dv-fg-32);
  letter-spacing: 0.18em;
}

.dv-channel__email {
  font: 400 20px/1.3 var(--dv-font-sans);
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(242, 239, 233, 0.24);
  padding-bottom: 3px;
}

.dv-channel__email:hover {
  color: var(--dv-fg);
  border-color: var(--dv-accent);
}

.dv-channel__links {
  display: flex;
  gap: 22px;
  font: 400 13px/1.3 var(--dv-font-mono);
  color: var(--dv-fg-66);
}

.dv-channel__links a {
  color: inherit;
}

.dv-channel__links a:hover {
  color: var(--dv-accent);
}

.dv-channel__text {
  font: 400 13px/1.5 var(--dv-font-mono);
  color: var(--dv-fg-66);
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.dv-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 34px;
  border-top: 1px solid var(--dv-line-soft);
  color: var(--dv-fg-28);
  letter-spacing: 0.18em;
  font-size: 9.5px;
}

.dv-footer a {
  color: inherit;
}

.dv-footer a:hover {
  color: var(--dv-fg);
}

/* --------------------------------------------------------------------------
   11. Inner pages — blog index, single post, page, 404
   These reuse the same tokens so secondary pages match the front page.
   -------------------------------------------------------------------------- */
.dv-page {
  padding-top: 164px;
  padding-bottom: 96px;
}

.dv-page__header {
  margin-bottom: 64px;
}

.dv-page__title {
  font: 400 clamp(36px, 5vw, 80px) / 0.95 var(--dv-font-sans);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.dv-page__meta {
  margin-top: 16px;
  color: var(--dv-fg-38);
}

.dv-prose {
  max-width: 68ch;
  font: 400 17px/1.7 var(--dv-font-sans);
  color: var(--dv-fg-88);
}

.dv-prose > * + * {
  margin-top: 1.2em;
}

.dv-prose h2,
.dv-prose h3 {
  letter-spacing: -0.02em;
  color: var(--dv-fg);
}

.dv-prose h2 {
  font-size: 1.6em;
  line-height: 1.15;
}
.dv-prose h3 {
  font-size: 1.25em;
  line-height: 1.25;
}

.dv-prose a {
  border-bottom: 1px solid rgba(242, 239, 233, 0.24);
}

.dv-prose a:hover {
  border-color: var(--dv-accent);
}

.dv-prose blockquote {
  margin: 0;
  padding-left: 20px;
  border-left: 1px solid var(--dv-accent);
  color: var(--dv-fg-66);
}

.dv-prose pre,
.dv-prose code {
  font-family: var(--dv-font-mono);
  font-size: 0.9em;
}

/* Blog index list */
.dv-post-list {
  display: grid;
  gap: 48px;
}

.dv-post-card__title {
  font: 400 clamp(24px, 2.5vw, 40px) / 1.02 var(--dv-font-sans);
  letter-spacing: -0.03em;
  margin: 12px 0;
}

.dv-pagination {
  margin-top: 64px;
  display: flex;
  gap: 16px;
}

.dv-pagination .page-numbers {
  color: var(--dv-fg-50);
}

.dv-pagination .page-numbers.current {
  color: var(--dv-accent);
}

/* Portfolio filter bar: "All / Aftermovies / Promo videos / …" */
.dv-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--dv-line);
}

.dv-filters__label {
  color: var(--dv-fg);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-right: 16px;
  border-right: 1px solid var(--dv-line);
}

.dv-filters__item {
  color: var(--dv-fg-42);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dv-filters__item:hover,
.dv-filters__item:focus-visible {
  color: var(--dv-fg);
}

.dv-filters__item.is-active {
  color: var(--dv-accent);
}

/* Generic single page (blog post, and the bare no-JS fallback for a film
   permalink): big still on top, content beneath. */
.dv-film-single__still {
  position: relative;
  background: var(--dv-hatch-dark);
  margin-bottom: 40px;
}

.dv-film-single__still img {
  width: 100%;
}

/* Play affordance shown on a film's still when it has a video — opens the
   watch modal below. */
.dv-film__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dv-fg-50);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.35);
  font: 400 11px/1 var(--dv-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-fg);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.3s,
    border-color var(--dv-ease),
    color var(--dv-ease);
}

.dv-film--video .dv-film__still img {
  transition:
    filter 0.4s,
    transform 0.6s;
}

.dv-film--video .dv-film__still:hover img,
.dv-film--video:focus-visible .dv-film__still img {
  filter: blur(4px);
  transform: scale(1.03);
}

.dv-film--video .dv-film__still:hover .dv-film__play,
.dv-film--video:focus-visible .dv-film__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  border-color: var(--dv-accent);
  color: var(--dv-accent);
}

/* Video modal: opened from a film card's play button, holds one embed at a
   time (cloned in from that card's <template> — see assets/js/main.js). */
.dv-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px var(--dv-gutter);
}

.dv-modal[hidden] {
  display: none;
}

.dv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 10, 0.92);
}

.dv-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 1100px;
}

.dv-modal__close {
  position: absolute;
  top: -46px;
  right: 0;
  border: 1px solid var(--dv-fg-50);
  background: transparent;
  padding: 8px 14px;
  font: 400 10px/1 var(--dv-font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-fg-70);
  cursor: pointer;
  transition:
    color var(--dv-ease),
    border-color var(--dv-ease);
}

.dv-modal__close:hover,
.dv-modal__close:focus-visible {
  color: var(--dv-accent);
  border-color: var(--dv-accent);
}

.dv-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--dv-hatch-dark);
}

.dv-modal__frame iframe,
.dv-modal__frame video,
.dv-modal__frame .dv-embed-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body.dv-modal-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. WordPress core classes
   -------------------------------------------------------------------------- */
.alignleft {
  float: left;
  margin: 0 1.5em 1em 0;
}
.alignright {
  float: right;
  margin: 0 0 1em 1.5em;
}
.aligncenter {
  display: block;
  margin: 0 auto 1em;
}
.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  font: 400 11px/1.6 var(--dv-font-mono);
  color: var(--dv-fg-50);
  margin-top: 8px;
}
.sticky {
}
.bypostauthor {
}
.gallery-caption {
  color: var(--dv-fg-50);
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --dv-gutter: 20px;
  }

  .dv-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 120px;
  }

  /* Collapse the 12-col grid: everything stacks full width. */
  .dv-studio__heading,
  .dv-studio__statement,
  .dv-studio__facts,
  .dv-contact__heading,
  .dv-contact__body {
    grid-column: 1 / -1;
  }

  .dv-studio__facts {
    margin-top: 24px;
  }

  /* Film rows: ignore the computed column spans and stack. */
  .dv-film__still-wrap,
  .dv-film__meta {
    grid-column: 1 / -1 !important;
  }

  .dv-film__still-wrap {
    justify-self: start !important;
  }

  .dv-film--flip .dv-film__meta {
    align-items: flex-start;
    text-align: left;
  }

  .dv-film {
    padding: 40px 0;
  }
}

@media (max-width: 640px) {
  .dv-nav-toggle {
    display: inline-block;
  }

  .dv-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px var(--dv-gutter) 24px;
    background: rgba(11, 11, 10, 0.96);
    border-bottom: 1px solid var(--dv-line);
  }

  .dv-nav.is-open {
    display: block;
  }

  .dv-nav ul {
    flex-direction: column;
    gap: 18px;
  }

  .dv-reel__play {
    width: 60px;
    height: 60px;
  }

  .dv-reel-meta {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .dv-hero__title {
    max-width: none;
  }
}

/* Flipped rows: the text column (3–7) comes after the still (8–11) in the
   DOM, so without "dense" auto-placement pushes it onto a second row. */
.dv-film--flip {
  grid-auto-flow: row dense;
}