/* =========================================================
   WABI SABI STUDIOS — shared stylesheet
   Used by every page. Keeping one file means a color or font
   change only has to happen in one place.
   ========================================================= */

/* ---------- Base / reset ----------
   box-sizing: border-box means padding doesn't add to an element's total
   width, which makes grids and columns way easier to line up. */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* One place to change the whole site's colors. */
  --bg: #0d0d0d;
  --bg-raised: #161616;
  --border: #262626;
  --text: #f2f2f2;
  --text-dim: #a3a3a3;
  --text-dimmer: #737373;
  --accent: #e0342d;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: 'Space Grotesk', sans-serif;
  /* Space Grotesk comes in several weights (unlike Archivo Black, which
     only has one), so the bold weight has to be requested explicitly —
     both here and in the Google Fonts <link> in every page's <head>. */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ---------- Header / nav ----------
   Sticky so it's always reachable, same on every page. */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 48px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
  border-bottom: 1px solid var(--border);
}

.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  /* Puts the small icon on the left of the text, lined up vertically. */
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 32px;
  width: auto;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.site-header nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.site-header nav a:hover,
.site-header nav a.active {
  color: var(--accent);
}

/* On phones, let the nav links wrap onto a second line instead of
   squeezing the logo, so nothing overlaps at small widths. */
@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
  }
}

/* ---------- Generic page hero (used by inner pages, not the home page) ---------- */
.page-hero {
  padding: 120px 48px 60px;
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-size: clamp(2.2rem, 6vw, 4rem);
}

/* A smaller title for pages that want a quieter heading (News). */
/* No line under the title (What We Do, where the panels below it are plain). */
.page-hero-noline {
  border-bottom: none;
}

.page-hero-small h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.page-hero p {
  margin-top: 16px;
  color: var(--text-dim);
  max-width: 60ch;
  font-size: 1.05rem;
}

/* A wider subtitle so the About sentence fits on 2 lines on desktop:
   the <br> in about.html ends line 1 after "Yamashita", so line 1 needs
   about 120 characters of room (the normal 60ch limit would wrap it). */
.page-hero .page-hero-wide {
  max-width: 125ch;
}

/* =========================================================
   HOME PAGE — title overlaid on a full-screen slideshow
   ========================================================= */

.hero {
  position: relative;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Home page's single looping video. Fills the whole hero. The gradient is
   the placeholder look until a real <video> goes inside; once one does,
   object-fit: cover crops it to fill the box without squashing it. */
.hero-video {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #1f1f1f, #2c2c2c);
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The slideshow on the About page reuses .hero, but as a shorter band
   (not full-screen) since it sits between paragraphs and the poster grids
   instead of opening the page. */
.hero-about {
  height: 70vh;
  min-height: 360px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* The slideshow: a row of full-width slides sitting side by side inside
   .slide-track. Only one slide's width is visible at a time because
   .hero-slideshow clips (overflow: hidden) everything outside it.
   assets/script.js moves .slide-track left by one slide's width every
   6 seconds; the transition below is what turns that jump into a smooth
   slide instead of an instant cut. */
.hero-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.slide-track {
  display: flex;
  height: 100%;
  transition: transform 0.8s ease;
}

.slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

/* Placeholder "stills" stand in for real movie/show photos, for titles
   that don't have a real image yet. Once a real photo exists, an <img>
   goes inside the same .still div (see .still img below) and covers this
   gradient completely. z-index: 0 makes .still its own stacking context —
   without it, a positioned child with z-index: -1 (like the media below)
   escapes past .still entirely and paints behind .still's OWN background,
   hiding it completely instead of just sitting behind the caption text. */
.still {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1f1f1f, #2c2c2c);
  color: var(--text-dimmer);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* A real photo (or, in the hero slideshow, a video) fills its .still box
   edge to edge. object-fit: cover crops it (rather than squashing it) to
   fill the box, whatever its own shape is. z-index: -1 keeps it behind
   any caption text in the same box even though nothing else here sets a
   z-index. */
.still img,
.still video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Inside a slide, the still fills the whole frame and its caption moves
   down to the corner, so the big title below can sit on top of the middle
   of the image without fighting it for space. */
.slide .still {
  position: absolute;
  inset: 0;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 28px 32px;
}

.slide-caption {
  font-size: 1rem;
  color: #cfcfcf;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* A dark film over the slides so the title on top stays readable no
   matter which still is currently showing. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.75) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
}

.hero-content h1 {
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.hero-content .tagline {
  margin-top: 18px;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: #e6e6e6;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 0.85rem;
  color: #e6e6e6;
  letter-spacing: 0.05em;
  animation: bob 2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* People who've asked their OS/browser to reduce motion get a still
   frame instead of an endless slideshow — accessibility, not a style
   choice. assets/script.js checks this same setting and skips the
   auto-advance timer entirely; this just makes sure that if a slide
   change ever does happen, it doesn't animate. */
@media (prefers-reduced-motion: reduce) {
  .slide-track { transition: none; }
  .scroll-cue { animation: none; }
}

/* Slide controls: bottom-right of the hero, above the dark film so they
   stay clickable. The play button sits to the left of the row of dots,
   same square size as each dot so the whole row reads as one control. */
.hero-controls {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-dots {
  display: flex;
  gap: 6px;
}

/* Plain square buttons — no rounding, matching the site's bold/blocky
   look elsewhere. White border keeps a black square visible no matter
   what's playing in the video behind it. position: relative + overflow:
   hidden turns each dot into a little frame for its own progress fill
   (see .hero-dot-progress below). */
.hero-dot {
  position: relative;
  overflow: hidden;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: #000;
  cursor: pointer;
}

/* The current slide's dot fills white from left to right as its 6-second
   hold counts down — assets/script.js animates this span's width from 0%
   to 100%, so the dot itself doubles as a countdown. Every other dot
   stays at width: 0 (plain black), since only the active slide has a
   countdown running. */
.hero-dot-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #fff;
  pointer-events: none;
}

/* Same square footprint as a dot. The icon inside is drawn with CSS
   (no image files needed) and swaps between a pause glyph (shown while
   auto-advancing — clicking it stops that) and a play triangle (shown
   while stopped — clicking it starts it again). Either way the videos
   themselves keep playing; this only controls the slide-to-slide timer. */
.hero-play-btn {
  position: relative;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: #000;
  cursor: pointer;
}

.hero-play-btn.is-playing::before,
.hero-play-btn.is-playing::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  background: #fff;
  transform: translateY(-50%);
}
.hero-play-btn.is-playing::before { left: 4px; }
.hero-play-btn.is-playing::after { left: 8px; }

.hero-play-btn.is-paused::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  transform: translateY(-50%);
}

/* ---------- Featured section (huge horizontal bands) ---------- */
.featured-band {
  position: relative;
  height: 60vh;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.featured-band .still {
  position: absolute;
  inset: 0;
  height: auto;
  font-size: 0;   /* hide the placeholder label text on the big band; the title below carries it */
}

.featured-band-content {
  position: relative;
  z-index: 1;
  padding: 40px 48px;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  width: 100%;
}

.featured-band-content .eyebrow {
  color: var(--text-dim);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.featured-band-content h2 {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  margin-top: 8px;
}

/* ---------- Poster / card grid (used on Home + Work page) ---------- */
.grid-section {
  padding: 80px 48px;
}

.grid-section .section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.grid-section h2 {
  font-size: 2rem;
}

.grid-section .section-head a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--text-dimmer);
}

.grid-section .section-head a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* Each poster card is two stacked parts: the image (or placeholder) on
   top, and plain text below it. Keeping them stacked instead of overlaid
   means a real poster's own baked-in title never fights with our text. */
.poster {
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text-dimmer);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.poster:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
}

.poster-image {
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #1f1f1f, #2c2c2c);
  position: relative;
  overflow: hidden;
}

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

.poster-body {
  padding: 12px 16px 16px;
}

/* Not scoped to .poster alone — the project detail page reuses this same
   tag style, so a status only needs to be styled in one place. */
.status-tag {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 8px;
  border-radius: 999px;
}

.poster .poster-title {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
}

.poster .poster-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-dimmer);
}

.section-note {
  margin-top: 28px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* =========================================================
   PROJECT DETAIL PAGE (one per film/show, under work/)
   ========================================================= */

.project-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 140px 48px 100px;
}

.project-poster {
  flex: 0 0 280px;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, #1f1f1f, #2c2c2c);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

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

.project-info {
  flex: 1 1 320px;
}

.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--text-dimmer);
}

.back-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.project-info h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.project-meta {
  display: block;
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 1rem;
}

.project-note {
  margin-top: 24px;
  color: #cfcfcf;
  max-width: 55ch;
}

/* Link to the title's IMDb page, under the project note. */
.imdb-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--text-dimmer);
}

.imdb-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- About-teaser band (bottom of home page) ---------- */
.about-teaser {
  padding: 100px 48px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.about-teaser h2 {
  font-size: 2.2rem;
}

.about-teaser p {
  max-width: 60ch;
  margin: 24px auto 0;
  color: #cfcfcf;
}

.about-teaser .cta {
  display: inline-block;
  margin-top: 28px;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-copy {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 48px;
}

.about-copy p {
  margin-top: 20px;
  color: #cfcfcf;
  font-size: 1.05rem;
}

.about-copy p:first-child {
  margin-top: 0;
}

/* About page bios: two columns side by side, each lined up to the page
   gutter. They stack into one column on narrow screens (see the media
   query at the bottom of this block). */
.bio-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 60px 48px;
}

.bio p {
  margin-top: 20px;
  color: #cfcfcf;
  font-size: 1.05rem;
}

/* Extra breathing room: a full blank line before this paragraph. */
.bio .bio-gap {
  margin-top: 1.8rem;
}

@media (max-width: 800px) {
  .bio-columns {
    grid-template-columns: 1fr;
  }
}

/* Incentive page: full-width picture at the top. max-height keeps it from
   taking over a tall screen; object-fit crops the edges instead of squashing. */
.incentive-image {
  display: block;
  width: 100%;
  max-height: 75vh;
  object-fit: cover;
}

/* =========================================================
   FILMMAKERS PAGE — a grid of quiet portrait cards
   ========================================================= */

.filmmaker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 40px;
}

.filmmaker-card {
  text-align: center;
}

.filmmaker-photo {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #1f1f1f, #2c2c2c);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmer);
  font-size: 0.85rem;
  padding: 12px;
  margin-bottom: 16px;
}

.filmmaker-card h3 {
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: normal;
  font-size: 1.1rem;
  font-weight: 700;
}

.filmmaker-card .role {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* =========================================================
   WHAT WE DO PAGE — two huge side-by-side panels
   ========================================================= */

.pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
}

.pillar {
  position: relative;
  padding: 20px 48px 60px;
  display: flex;
  flex-direction: column;
  /* Text starts at the TOP of each panel (it used to sit at the bottom),
     so both headings line up no matter how long each text is. */
  justify-content: flex-start;
  min-height: 420px;
  overflow: hidden;
}

.pillar .still {
  position: absolute;
  inset: 0;
  height: auto;
  font-size: 0;
}

.pillar-content {
  position: relative;
  z-index: 1;
}

.pillar h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

.pillar-lead {
  margin-top: 14px;
  font-weight: 700;
  font-size: 1.1rem;
  max-width: 32ch;
}

.pillar p {
  margin-top: 14px;
  color: #d9d9d9;
  max-width: 46ch;
}

.pillar a {
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}

/* Two panels side by side only works with room to breathe; stack them
   on phones/tablets instead of squeezing both into half-width columns. */
@media (max-width: 800px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   NEWS PAGE
   ========================================================= */

.news-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 48px 100px;
}

.news-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}

.news-item .news-date {
  color: var(--text-dimmer);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.news-item h2 {
  margin-top: 8px;
  font-size: 1.4rem;
  text-transform: none;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

/* A grey line that sits UNDER the name (Media: Compass Magazine pages). */
.news-item h2 + .news-date {
  display: block;
  margin-top: 6px;
}

/* One-line description under a Media name. Normal sentence case (the grey
   .news-date lines are all-caps), so it reads as a sentence. */
.news-desc {
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* The pages line sits right under the description, so no extra gap. */
.news-desc + .news-date {
  display: block; /* its own line, so the link below starts on a new line */
  margin-top: 4px;
}

/* Link under a Media entry (press article). Underline only on hover so the
   list stays clean, like the nav links. */
.news-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 0.95rem;
  text-decoration: none;
}

.news-link:hover {
  color: #fff;
  text-decoration: underline;
}

.news-note {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 48px 0;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* "Media" section at the bottom of the News page. Its title copies the
   News title exactly (same size as .page-hero-small h1) and lines up with
   it at the left page edge. The h2 rule is needed because this is an h2,
   not the page's one h1, and plain h2s are smaller. */
.media-section {
  padding: 60px 48px 0;
  border-top: 1px solid var(--border);
}

.media-section h2 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-grid {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 48px 120px;
  display: grid;
  gap: 40px;
}

.contact-block h2 {
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.contact-block p {
  color: #cfcfcf;
  line-height: 1.7;
}

.contact-block a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text-dimmer);
}

.contact-block a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- Footer (shared) ---------- */
.site-footer {
  padding: 40px 48px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--text-dimmer);
  font-size: 0.85rem;
}

.site-footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer nav a {
  text-decoration: none;
  color: var(--text-dimmer);
}

.site-footer nav a:hover {
  color: var(--accent);
}

/* ---------- Password screen (Home page only) ---------- */
/* A full-screen cover on top of everything (z-index above the sticky header)
   so nothing on the page is reachable until it's unlocked. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

/* gate.js adds this class to <html> once unlocked. */
.gate-open .gate {
  display: none;
}

.gate-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}

.gate-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.gate-box label {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.gate-box input {
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--text-dimmer);
}

.gate-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.gate-box button {
  padding: 12px 14px;
  font: inherit;
  font-weight: 600;
  color: var(--bg);
  background: var(--text);
  border: none;
  cursor: pointer;
}

.gate-box button:hover {
  background: var(--accent);
  color: var(--text);
}

.gate-error {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--accent);
}

/* =========================================================
   FILMING IN JAPAN — dissolving photo slideshow
   ========================================================= */

/* A band right under the nav. The photos are stacked on top of each other
   (position: absolute) and only the one with class "active" is visible.
   Fading opacity over 1 second is what makes the dissolve — assets/fade.js
   just moves the "active" class to the next photo every 5 seconds. */
.fade-gallery {
  position: relative;
  height: 70vh;
  min-height: 360px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.fade-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the band, cropping instead of stretching */
  opacity: 0;
  transition: opacity 1s ease;
}

.fade-slide.active {
  opacity: 1;
}

/* Photos 2, 4 and 6 sit slightly lower in the band. The photos are cropped
   to fill it, so "lower" means moving the crop up: 50% is centered, a
   smaller number shows more of the top of the photo and pushes the
   picture down. Tokyo Tower (4th) is lowered the most; the pagoda (2nd)
   and Kyoto street (6th) only a little. Change the numbers to taste. */
.fade-slide:nth-child(2),
.fade-slide:nth-child(6) {
  object-position: center 44%;
}

.fade-slide:nth-child(4) {
  object-position: center 35%;
}