/*
Theme Name: Tide & Grain
Theme URI: https://tideandgrain.de/
Author: Tide & Grain
Description: A quiet editorial block theme for analog photography and darkroom craft.
Version: 1.1.3
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: tide-grain
*/

:root {
  --tg-paper: #f4f0e8;
  --tg-paper-deep: #ebe5da;
  --tg-ink: #272522;
  --tg-muted: #6b665e;
  --tg-line: #d4ccc0;
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }

a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tg-muted); }

.wp-site-blocks { overflow: clip; }

.tg-site-header {
  border-bottom: 1px solid var(--tg-line);
  position: relative;
  z-index: 10;
}
.tg-wordmark a {
  text-decoration: none;
  letter-spacing: .18em;
  white-space: nowrap;
}
.tg-site-header .wp-block-navigation-item__content {
  text-decoration: none;
  letter-spacing: .04em;
}

.tg-kicker {
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tg-hero {
  min-height: clamp(560px, 76svh, 820px);
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #070a09;
}
.tg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4,7,6,.46) 0%, rgba(4,7,6,.20) 30%, rgba(4,7,6,.05) 50%, transparent 68%);
}
.tg-hero > .wp-block-group,
.tg-hero > .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }
.tg-hero > .wp-block-cover__inner-container {
  box-sizing: border-box;
  padding-inline: clamp(1.25rem, 4vw, 4.5rem);
}
.tg-hero .wp-block-cover__image-background {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 48% 50%;
}
.tg-hero-copy {
  max-width: min(38rem, 46vw);
  margin-inline: 0 auto !important;
}
.tg-hero-copy .tg-kicker,
.tg-hero-copy h1 {
  text-shadow: 0 1px 18px rgba(0,0,0,.28);
}
.tg-hero h1 {
  max-width: 11ch;
  font-size: clamp(3rem, 6vw, 6.2rem) !important;
}

.tg-brand-moment {
  border-bottom: 1px solid var(--tg-line);
}
.tg-brand-logo {
  width: min(100%, 1186px);
  margin-inline: auto;
}
.tg-brand-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.tg-intro .wp-block-columns { align-items: flex-start; }
.tg-intro-copy { max-width: 54rem; }
.tg-intro-copy p { text-wrap: pretty; }
.tg-intro-copy .has-large-font-size {
  font-size: clamp(1.08rem, 1.45vw, 1.3rem) !important;
  line-height: 1.65;
}

.tg-rule { border-top: 1px solid var(--tg-line); }

.tg-placeholder {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #74746f;
  background-image:
    linear-gradient(155deg, rgba(255,255,255,.26), transparent 42%),
    linear-gradient(20deg, #272929 0 20%, #777873 20.5% 58%, #bbb8b0 58.5% 100%);
  filter: grayscale(1);
}
.tg-placeholder--wide { aspect-ratio: 3 / 2; }
.tg-placeholder--square { aspect-ratio: 1 / 1; }
.tg-placeholder--dark {
  background-image:
    radial-gradient(circle at 68% 30%, rgba(255,255,255,.2), transparent 18%),
    linear-gradient(135deg, #1f2121 0 46%, #5c5d59 46.5% 71%, #aaa69e 71.5% 100%);
}
.tg-placeholder--light {
  background-image:
    linear-gradient(175deg, #d1cec6 0 38%, #8a8b87 38.5% 55%, #424645 55.5% 100%);
}
.tg-placeholder::after {
  content: attr(data-label);
  position: absolute;
  left: 1rem;
  bottom: .85rem;
  color: rgba(255,255,255,.82);
  font: 500 .68rem/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tg-work-grid { gap: clamp(1.5rem, 3vw, 3.75rem) !important; }
.tg-work-grid .wp-block-column { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 3.75rem); }
.tg-work-grid .wp-block-column:nth-child(even) { margin-top: clamp(0px, 7vw, 96px); }
.tg-work-grid figure,
.tg-work-grid img { margin: 0; width: 100%; height: auto; display: block; }
.tg-card-link { text-decoration: none; }
.tg-card-link:hover .tg-placeholder { opacity: .93; }

.tg-darkroom-media figure,
.tg-darkroom-media img { width: 100%; height: auto; display: block; }

.tg-journal-list .wp-block-post { border-top: 1px solid var(--tg-line); padding-top: 1.25rem; }
.tg-journal-list .wp-block-post-title a { text-decoration: none; }
.tg-journal-list .wp-block-post-featured-image { margin-bottom: 1.25rem; }
.tg-journal-list .wp-block-post-featured-image img { width: 100%; height: auto; object-fit: cover; }

.tg-prose { max-width: 720px; }
.tg-prose p { text-wrap: pretty; }

.tg-site-footer { border-top: 1px solid var(--tg-line); }
.tg-site-footer a { text-decoration: none; }
.tg-footer-monogram { width: 132px; margin: 0 0 1.4rem; }
.tg-footer-monogram img { width: 100%; height: auto; display: block; }

.wp-block-post-content > *:first-child { margin-top: 0; }

@media (max-width: 781px) {
  .tg-site-header { padding-top: .8rem !important; padding-bottom: .8rem !important; }
  .tg-wordmark { font-size: 1rem !important; }
  .tg-hero { min-height: clamp(440px, 62svh, 520px); }
  .tg-hero::after { background: linear-gradient(180deg, rgba(4,7,6,.56) 0%, rgba(4,7,6,.18) 43%, transparent 67%); }
  .tg-hero .wp-block-cover__image-background { object-position: 48% 100% !important; }
  .tg-hero-copy {
    width: min(24rem, 86vw) !important;
    max-width: min(24rem, 86vw) !important;
  }
  .tg-hero h1 { font-size: clamp(2.9rem, 12.5vw, 4.1rem) !important; }
  .tg-brand-moment { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .tg-brand-logo { width: min(100%, 640px); }
  .tg-work-grid .wp-block-column:nth-child(even) { margin-top: 0; }
  .tg-site-footer .wp-block-group { align-items: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}