/*
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: 40;
  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
   -------------------------------------------------------------------------- */
.dv-hero {
  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;
}

/* Thin metadata strip above the reel: "REEL — 2026   04:12   PRESS PLAY" */
.dv-reel-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-top: 1px solid var(--dv-line);
  color: var(--dv-fg-42);
}

.dv-reel {
  display: block;
  position: relative;
  aspect-ratio: 2.4 / 1;
  background: var(--dv-hatch);
  border-bottom: 1px solid var(--dv-line);
  overflow: hidden;
}

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

.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);
}

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

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

/*
 * 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 {
  align-items: end;
  padding-bottom: 96px;
  color: inherit;
}

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

.dv-film__still {
  position: relative;
  background: var(--dv-hatch-dark);
  overflow: hidden;
}

.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-film__role {
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   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);
}

/* Film single page: big still on top, meta beneath. */
.dv-film-single__still {
  position: relative;
  background: var(--dv-hatch-dark);
  margin-bottom: 40px;
}

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

.dv-film-single__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  margin-bottom: 48px;
}

/* --------------------------------------------------------------------------
   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 {
    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 {
    padding-bottom: 64px;
  }
}

@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;
  }
}