/* =============================
   FONTS
============================= */

@font-face {
  font-family: 'Cormorant';
  src: url('Cormorant/static/Cormorant-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant';
  src: url('Cormorant/static/Cormorant-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =============================
   RESET & BASE
============================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Cormorant', serif;
  background: #fff;
  color: #000;
}

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

a {
  color: inherit;
  text-decoration: none;
}


/* =============================
   LAYOUT STRUCTURE
============================= */

.page-main {
  width: 100%;
}

.container {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 24px;
}

.text-block {
  max-width: 700px;
  margin: 0 auto;
}


/* =============================
   SITE TOPBAR + DROPDOWN MENU
============================= */

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 76px;
  /* Fluid instead of a stepped breakpoint value: scales continuously from
     16px at a 320px-wide screen up to 24px by the time the screen reaches
     600px, then holds at 24px beyond that (clamp's own max). Paired with
     the feather/label/gap below, all four use the same 320→600 anchor
     range so the toggle and the (fixed-size, always-centered) logo never
     get closer together at any width in between than they are at the two
     ends — verified with a real render, see menu-toggle-feather below. */
  padding: 0 clamp(16px, calc(6.86px + 2.86vw), 24px);
  background: #fff;
}

.menu-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 26px;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.menu-toggle-label {
  font-size: clamp(12px, calc(7.43px + 1.43vw), 16px);
  letter-spacing: 0.02em;
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.menu-toggle-wrap {
  display: flex;
  align-items: center;
  gap: clamp(4px, calc(-0.57px + 1.43vw), 8px);
  flex-shrink: 0;
}

.menu-toggle-feather {
  position: relative;
  display: block;
  /* Scales from 20px (at a 320px-wide screen) up to its full 44px (by
     600px and beyond) instead of jumping between two fixed sizes at the
     600px breakpoint. The four fluid values here (topbar padding above,
     this, the label font-size, and the wrap gap) all share the same
     320→600 viewport range, which keeps their combined width growing in
     a straight line — checked against the logo's own position (fixed
     size, always centered, so it moves at a constant rate as the screen
     widens) with a real headless-Chromium render at 320/350/375/400/425/
     450/475/500/525/550/575/600/650/700px: the gap between the toggle and
     the logo never closes below where it is at 320px. */
  width: clamp(20px, calc(-7.43px + 8.57vw), 44px);
  height: clamp(20px, calc(-7.43px + 8.57vw), 44px);
  pointer-events: none;
  transition: transform 1s ease;
}

.menu-toggle-feather.open {
  transform: translateY(var(--feather-drop, 240px));
}

.menu-toggle-feather img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.topbar-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.topbar-logo img:first-of-type {
  /* Same 320→600 fluid range as the toggle (padding/feather/label/gap
     above), so the logo shrinks in step with it rather than staying fixed
     while everything around it scales. */
  height: clamp(34px, calc(20.29px + 4.29vw), 46px);
  width: auto;
  display: block;
}

.topbar-logo a {
  display: block;
  line-height: 0;
}

.dropdown-menu {
  position: fixed;
  top: 76px;
  left: 24px;
  width: 240px;
  max-width: 82vw;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 1s ease, transform 1s ease, visibility 0s linear 1s;
  z-index: 99;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 1s ease, transform 1s ease;
}

.dropdown-backdrop {
  position: fixed;
  inset: 76px 0 0 0;
  background: transparent;
  pointer-events: none;
  z-index: 98;
}

.dropdown-backdrop.open {
  pointer-events: auto;
}

/* Positioned/sized via JS (dropdownGlow) to match the dropdown-menu's own
   box exactly. Styled (solid white + blurred halo) only on mobile, in the
   responsive section below — on desktop it stays invisible so the menu
   keeps its fully transparent look. */
.dropdown-glow {
  position: fixed;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.dropdown-glow.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease;
}

.contact-link {
  font-size: 0.95em;
  letter-spacing: normal;
  white-space: nowrap;
  color: #000;
  opacity: 0.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.contact-link:hover {
  opacity: 1;
}

.contact-link.active {
  opacity: 1;
  font-weight: 700;
}


/* =============================
   SIDEBAR-CONTENT STYLING (reused inside the dropdown menu)
============================= */

.sidebar-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.sidebar-heading {
  display: block;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.4;
  margin-bottom: 0;
}

.sidebar-stories {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.sidebar-stories a.story-logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 44px;
  width: 100%;
  border-bottom: none;
  filter: grayscale(100%);
  opacity: 0.45;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.sidebar-stories a.story-logo-link img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.sidebar-stories a.story-logo-link:hover,
.sidebar-stories a.story-logo-link.active {
  filter: grayscale(0%);
  opacity: 1;
  border-bottom: none;
}

/* Contact Page Layout */
.contact-block {
  max-width: 480px;
  width: 100%;
  margin: 0;
  margin-top: clamp(40px, 10vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-block h1 {
  font-size: clamp(2.6em, 5vw + 1.6em, 4.2em);
  margin-bottom: 0;
}

.contact-info {
  margin-top: clamp(28px, 6vw, 64px);
}

.contact-label {
  display: block;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin-top: 16px;
  margin-bottom: 8px;
}

.contact-links {
  text-align: left;
  margin-bottom: 24px;
}

.contact-links p {
  margin: 4px 0;
}

.contact-links a {
  font-size: 0.9em;
  color: #000;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.contact-links a:hover {
  opacity: 1;
}

.contact-block > p.contact-curators {
  font-size: 0.9em;
  opacity: 0.6;
  margin-bottom: 8px;
}

.newsletter-signup {
  margin-top: 72px;
  text-align: left;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.newsletter-form label {
  /* Visually hidden but still available to screen readers/autofill —
     the placeholder carries the visible label. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.newsletter-form input[type="email"] {
  font-family: inherit;
  font-size: 1.1em;
  min-width: 220px;
  padding: 4px 2px;
  text-align: left;
  color: #000;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  outline: none;
  transition: border-color 0.2s ease;
}

.newsletter-form input[type="email"]:focus {
  border-bottom-color: #000;
}

.newsletter-form input[type="submit"] {
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-family: inherit;
  font-size: 1em;
  font-style: italic;
  color: #000;
  opacity: 0.85;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 4px 0;
  transition: opacity 0.2s ease;
}

.newsletter-form input[type="submit"]:hover {
  opacity: 1;
}

.newsletter-form .newsletter-powered {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 0.75em;
  opacity: 0.4;
}

.newsletter-form .newsletter-powered a {
  color: inherit;
}

/* =============================
   MAIN PAGE (#home)
============================= */

#home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 172px; /* Clears sidebar logo vertically */
  box-sizing: border-box;
  text-align: center;
}

#home .container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

#home .text-block {
  display: block;
  text-align: center;
  max-width: 900px;
  margin: 20px auto 0;
}

#home .text-block p {
  white-space: nowrap;
}

#home #mainimage {
  display: block;
  margin: 0 auto 40px;
  max-width: 520px;
  width: 100%;
}


/* =============================
   PROJECT TYPOGRAPHY & BODY TEXT
============================= */

h1 {
  font-size: 2.4em;
  font-weight: 400;
  margin-bottom: 24px;
  color: #000;
}

p {
  margin: 20px 0;
  line-height: 1.75;
  font-size: 1.2em;
}

.stories-link {
  color: #0047ab;
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}


/* =============================
   PROJECT HEADER & DESCRIPTION
============================= */

.project-header {
  margin-bottom: 40px;
}

.project-header h1 {
  margin-bottom: 8px;
}

.project-subtitle {
  margin: 0;
  font-size: 0.8em;
  font-style: normal;
  color: #000;
}

.project-description {
  margin-bottom: 60px;
}

.project-description .intro-image {
  margin: 0 auto;
  max-width: 100%;
}

.project-description .intro-image img {
  width: 100%;
  height: auto;
  display: block;
}


/* =============================
   STORIES INDEX & GRID
============================= */

.projects-list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.projects-list a {
  width: fit-content;
  margin-bottom: 12px;
  font-size: 1.2em;
  opacity: 0.85;
  border-bottom: 1px solid transparent;
}

.projects-list a:hover {
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 60px 40px;
  margin-top: 40px;
}

.story-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: opacity 0.3s ease;
}

.story-card:hover {
  opacity: 0.7;
}

.story-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 16px;
  background: #f4f4f4;
}

.story-card-title {
  font-size: 1.4em;
  margin-bottom: 4px;
}

.story-card-meta {
  font-size: 0.9em;
  opacity: 0.5;
  font-style: italic;
}


/* =============================
   HOVER-TO-REVEAL WORK NAMES
============================= */

.hover-term {
  position: relative;
  cursor: pointer;
}

.hover-term-label {
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
  font-family: 'Cormorant', serif;
  font-size: 1em;
  font-weight: 700;
  color: #0047ab;
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-style: solid;
  text-underline-offset: 4px;
}

.hover-term .hover-preview {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  z-index: 20;
  width: 380px;
  max-width: 80vw;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.hover-term .hover-preview img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hover-term:hover .hover-preview {
  display: grid;
}


/* =============================
   DOCUMENTATION, IMAGES & VIDEO
============================= */

.project-documentation {
  margin: 50px 0;
}

figure {
  margin: 40px 0;
}

/* Default single-line caption across all project pages */
figcaption {
  font-size: 0.8em;
  font-style: normal;
  margin-top: 8px;
  opacity: 0.65;
}

.video-stack {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 50px 0;
}

.project-video {
  margin: 0;
  width: 100%;
  background: transparent;
}

.project-video video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

/* Scoped multi-work credits list for photo/video documentation captions */
figcaption.work-credits {
  font-style: normal;
  opacity: 1;
  margin-top: 16px;
  font-size: 0.85em;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.work-credits .credit-artist {
  font-weight: 700;
  color: #000;
  margin-bottom: 2px;
}

.work-credits .credit-intro {
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.45;
  border-left: none;
  padding-left: 0;
}

.work-credits .credit-item {
  color: rgba(0, 0, 0, 0.8);
}

.work-credits .credit-item strong {
  font-weight: 700;
  color: #000;
}

.work-credits .credit-item em {
  font-style: italic;
}

.work-credits .credit-note {
  font-style: italic;
  opacity: 0.65;
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed currentColor;
  opacity: 0.6;
  font-style: italic;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}


/* =============================
   PROJECT COLOPHON / METADATA
============================= */

.project-colophon {
  margin-top: 90px;
  padding-top: 24px;
  border-top: none;
  font-size: 0.95em;
}

.colophon-title {
  display: block;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.4;
  margin-bottom: 20px;
}

.meta-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-downloads-row {
  margin-top: 20px;
}

.meta-item {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  line-height: 1.5;
}

.meta-item dt {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  font-weight: 400;
}

.meta-item dd {
  opacity: 0.9;
}

/* Download Link Grouping */
.meta-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.meta-downloads .sep {
  opacity: 0.3;
  font-size: 0.85em;
}

.meta-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.meta-link:hover {
  opacity: 1;
}


/* =============================
   VERTICAL VIDEO STYLING
============================= */

figure.video-portrait {
  max-width: 380px;
  margin: 50px 0;
}

figure.video-portrait video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}


/* =============================
   SHOP
============================= */

.shop-item {
  margin: 0 0 80px;
  max-width: 480px;
}

.shop-images {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #f4f4f4;
  cursor: pointer;
  overflow: hidden;
}

.shop-images img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shop-images img.active {
  display: block;
}

.image-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 0.8em;
  padding: 2px 10px;
  background: rgba(255, 255, 255, 0.85);
}

.item-desc {
  margin-top: 16px;
}

.item-desc p {
  margin: 0 0 6px;
  font-size: 1.1em;
}

.price {
  font-weight: 700;
}

.insurance {
  display: block;
  font-size: 0.85em;
  opacity: 0.55;
  margin-top: 4px;
}


/* =============================
   MISC & BACKGROUND DECORATION
============================= */

#ascii-bg {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 600px;
  width: auto;
  pointer-events: none;
  white-space: pre;
  font-family: monospace;
  z-index: 0;
  color: rgba(0, 0, 0, 0.1);
}


/* =============================
   RESPONSIVE DESIGN (TABLETS & MOBILE)
============================= */

@media (max-width: 768px) {
  .meta-item {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* A separate glow element (#dropdownGlow, sized/positioned via JS to
   match the dropdown's own box) sits behind the menu content on touch
   devices — tablets included, not just narrow phone widths — where the
   transparent menu is more likely to sit over a busy background: solid
   white exactly where the menu is, softly dissolving into transparency
   beyond its edges, like a light source behind the panel rather than a
   flat card. */
@media (max-width: 1024px) {
  .dropdown-glow {
    /* box-shadow always starts from a hard-edged shape, so there's an
       inherent seam where the solid fill meets the shadow no matter how
       large the blur is. A real dissolve instead blurs the box's own edges
       directly: this element is sized larger than the menu (see JS) with a
       plain white fill, then blurred as a whole — the excess margin is
       where the blur eats into the fill and fades to nothing, while the
       center (behind the actual text) stays solid. */
    background: #fff;
    filter: blur(30px);
  }
}

@media (max-width: 600px) {
  /* The topbar padding, toggle size, label size and gap are now fluid
     (see the base rules above) so there's nothing left to override here
     for those. */
  .container {
    margin: 32px auto;
  }

  #home {
    padding-top: 32px;
  }

  #home #mainimage {
    max-width: 320px;
    margin-bottom: 32px;
  }

  #home .text-block p {
    white-space: normal;
  }

  h1 {
    font-size: 1.8em;
  }

  .contact-block {
    margin-top: clamp(110px, 26vw, 280px);
  }

  p {
    font-size: 1.05em;
    line-height: 1.5;
  }

  .dropdown-menu {
    left: 16px;
    width: calc(100vw - 32px);
    max-width: 300px;
    top: 76px;
    max-height: calc(100vh - 96px);
    padding: 20px;
    gap: 20px;
  }

  .dropdown-backdrop {
    inset: 76px 0 0 0;
  }

  .sidebar-stories a.story-logo-link {
    height: 40px;
  }

  /* Centered hover overlay for narrow viewports */
  .hover-term .hover-preview {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    margin-bottom: 0;
    transform: translate(-50%, -50%);
    width: 88vw;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
  }
}

@media (max-width: 480px) {
  .stories-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}