/* =========================================================================
   Home — hero, buckets, film.

   Everything here is full-bleed: no container, no side gutters. The type
   that sits over photography is white in both modes, because it is reading
   against an image rather than against the page ground.
   ========================================================================= */

.hm { display: block; }

/* -------- Hero ----------------------------------------------------------- */

.hm-hero {
  position: relative;
  width: 100%;
  height: 76vh;
  min-height: 460px;
  max-height: 900px;
  overflow: hidden;
  background: var(--photo-ground);
}
.hm-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Weighted left so the type has ground without flattening the photograph.
   The top band runs the full width and carries the floating nav: the left
   wash stops before the mode toggle, which would otherwise be white type on
   bare photograph. */
.hm-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 8, 6, 0.62) 0%, rgba(12, 8, 6, 0.34) 42%, rgba(12, 8, 6, 0) 72%),
    linear-gradient(180deg, rgba(12, 8, 6, 0.46) 0%, rgba(12, 8, 6, 0.22) 12%, rgba(12, 8, 6, 0) 30%);
}
.hm-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--type-inset);
}
.hm-hero__type {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: #fff;
}
.hm-hero__eyebrow {
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.14em;
}
.hm-hero__h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 5.6vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.hm-hero__lede {
  font-size: 18px;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}
.hm-hero__edit {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}

@media (max-width: 720px) {
  .hm-hero { height: 72vh; min-height: 420px; }
  .hm-hero__scrim {
    background: linear-gradient(180deg, rgba(12, 8, 6, 0.28) 0%, rgba(12, 8, 6, 0.68) 100%);
  }
  .hm-hero__inner { align-items: flex-end; padding-bottom: 40px; }
  .hm-hero__lede { font-size: 16px; }
}

/* -------- The button that sits on photography ---------------------------- */

.hm-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 13px 30px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.hm-btn:hover {
  background: #fff;
  border-color: #fff;
  color: #1a1210;
}
.hm-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* -------- Buckets -------------------------------------------------------- */

.hm-buckets {
  padding: clamp(56px, 7vw, 96px) 0 0;
}
.hm-buckets__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-inline: var(--type-inset);
  padding-bottom: clamp(28px, 3.5vw, 44px);
}
.hm-buckets__h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  margin: 0;
}

/* Edge to edge — the tiles are the page here, not cards on it. */
.hm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tile-gap);
  padding: 0 var(--bleed);
}
@media (max-width: 980px) { .hm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hm-grid { grid-template-columns: 1fr; } }

.hm-bucket { position: relative; }

.hm-bucket__link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--photo-ground);
  text-decoration: none;
  color: #fff;
}
.hm-bucket__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease);
}
.hm-bucket__link:hover .hm-bucket__img { transform: scale(1.045); }
.hm-bucket__empty {
  position: absolute;
  inset: 0;
  background: var(--photo-ground);
}
.hm-bucket__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 8, 6, 0) 38%, rgba(12, 8, 6, 0.72) 100%);
  transition: opacity 300ms var(--ease);
}
.hm-bucket__link:hover .hm-bucket__scrim { opacity: 0.88; }

.hm-bucket__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(20px, 2.4vw, 32px);
}
.hm-bucket__label {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.1;
  color: #fff;
}
.hm-bucket__blurb {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
}
.hm-bucket__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  transition: border-color 220ms var(--ease);
}
.hm-bucket__link:hover .hm-bucket__cta { border-bottom-color: #fff; }
.hm-bucket__count {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62);
}

/* -------- Bucket admin --------------------------------------------------- */

.hm-bucket__edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 4px 20px;
}
/* The shared card bar floats over a gallery card; on a bucket it belongs in
   the edit block under the tile, beside the upload controls. Scoped to
   .hm-bucket to outrank the plain .e-cardbar rule, which admin.css defines
   after this file loads. */
.hm-bucket .hm-bucket__bar {
  position: static;
  justify-content: flex-start;
  gap: 8px;
  align-self: flex-start;
  width: auto;
}
.hm-bucket__uploads {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hm-bucket__hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
  margin: 0;
  max-width: 42ch;
}
/* Same specificity story as the card bar above. */
.hm-grid .hm-addbucket {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  aspect-ratio: 4 / 5;
  min-height: 0;
}

/* -------- Film band ------------------------------------------------------ */

.hm-video {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  margin-top: clamp(56px, 7vw, 96px);
  background: #14100e;
}
.hm-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hm-video__media--empty { background: var(--photo-ground); }
.hm-video__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(12, 8, 6, 0.58) 0%, rgba(12, 8, 6, 0.26) 46%, rgba(12, 8, 6, 0) 78%),
    linear-gradient(180deg, rgba(12, 8, 6, 0.1) 0%, rgba(12, 8, 6, 0.28) 100%);
}
.hm-video__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--type-inset);
}
.hm-video__type {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: #fff;
}
.hm-video__placeholder {
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.hm-video__eyebrow { color: rgba(255, 255, 255, 0.82); letter-spacing: 0.14em; }
.hm-video__h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.hm-video__lede {
  font-size: 17px;
  line-height: 1.55;
  max-width: 46ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.hm-video__edit {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(420px, 90vw);
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--hairline);
}
.hm-video__urlfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.hm-video__urlfield .caption { color: var(--fg-muted); }
.hm-video__urlfield .e-text {
  border: 1px solid var(--hairline);
  padding: 8px 10px;
  font-size: 13px;
  word-break: break-all;
}
.hm-video__edit .hm-bucket__hint { text-align: left; }

@media (max-width: 720px) {
  .hm-video { height: 88vh; min-height: 460px; }
  .hm-video__scrim {
    background: linear-gradient(180deg, rgba(12, 8, 6, 0.3) 0%, rgba(12, 8, 6, 0.72) 100%);
  }
  .hm-video__inner { align-items: flex-end; padding-bottom: 48px; }
  .hm-video__lede { font-size: 16px; }
}