/* The Halloran — Home. Tokens and chrome come from tokens.css / site.css. */

/* ---- Hero: the street at night. The blade sign is the only red light. ---- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - 5.5rem);
  padding-block: var(--s-7);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: var(--text);
}

.hero__plate { position: absolute; inset: 0; z-index: -1; }
.hero__plate::after {   /* heavy vignette, and a floor that settles into Ink */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 75% at 50% 45%, transparent 20%, color-mix(in srgb, var(--ink) 88%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 55%, transparent) 0, transparent 22%, transparent 62%, var(--ink) 100%);
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.2);   /* crops the archive border and catalogue number off the print */
  filter: grayscale(1) contrast(1.12) brightness(0.62);
}
.hero__glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  mix-blend-mode: screen;
}
/* Dark rain-street plate, under the blinds, so the hero has depth. The sign stays on top. */
.hero__weather {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  opacity: 0.30;
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}
.hero > .blinds { z-index: 0; }
.hero > .fx-rain { z-index: 0; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--s-5);
  text-align: center;
}

.hero__title { display: grid; justify-items: center; gap: var(--s-4); margin: 0; font: inherit; }
.hero__sign-wrap { display: block; line-height: 0; }

/* The lit SVG carries its own glow; drop the global photo filter and .neon's second halo. */
.hero .hero__sign {
  display: block;
  height: clamp(110px, 40vh, 560px);
  width: auto;
  filter: none;
}
.hero .hero__mono { display: none; height: 72px; width: auto; }
/* Blade sign never under 110px tall: 110 / 0.40 ≈ 275px viewport height. */
@media (max-height: 274px) {
  .hero .hero__sign { display: none; }
  .hero .hero__mono { display: block; }
}

.hero__tagline {
  display: block;
  font-family: var(--font-type);
  font-size: var(--fs-lead);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--white);
}

.hero__copy { display: grid; justify-items: center; gap: var(--s-5); }
.hero__voiceover {
  max-width: 46ch;
  font-family: var(--font-type);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fog);
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* Wide screens: the sign hangs off the left like a real blade, the story reads beside it. */
@media (min-width: 56.25rem) {
  .hero__inner {
    grid-template-columns: auto minmax(0, 34rem);
    justify-content: center;
    align-items: center;
    justify-items: start;
    column-gap: var(--s-7);
    text-align: left;
  }
  .hero__title {   /* subgrid keeps the h1 whole: sign in column 1, tagline in column 2 */
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    gap: var(--s-5) var(--s-7);   /* match .hero__inner, or the subgrid shifts its tracks */
    justify-items: start;
  }
  .hero__sign-wrap { grid-column: 1; grid-row: 1 / span 2; }
  .hero__tagline { grid-column: 2; grid-row: 1; align-self: end; justify-self: stretch; font-size: clamp(1.5rem, 1rem + 1vw, 2rem); }
  .hero__copy { grid-column: 2; grid-row: 2; justify-self: stretch; justify-items: start; align-self: start; }
  .hero__actions { justify-content: flex-start; }
  .hero .hero__sign { height: 58vh; min-height: 110px; } /* ~55-60% of the desktop viewport */
}
/* Monogram when 58vh would fall below 110px (110 / 0.58 ≈ 190px). */
@media (min-width: 56.25rem) and (max-height: 189px) {
  .hero .hero__sign { display: none; }
  .hero .hero__mono { display: block; }
}

/* ---- Hotel (upstairs) and Night Desk (downstairs): text beside a plate ---- */

.home-split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
.home-split__text { display: grid; justify-items: start; gap: var(--s-4); }
.home-split__text .lead { max-width: 40ch; }

@media (min-width: 56.25rem) {
  .home-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
  .home-split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.home-plate { margin: 0; width: 100%; max-width: 30rem; justify-self: center; }
.home-plate picture { display: block; height: 100%; }
.home-plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); }   /* trims the HABS / archive edge */

.home-bar { overflow: hidden; }
.home-bar .container { position: relative; }
.home-bar__mark { width: clamp(9rem, 6rem + 8vw, 13rem); height: auto; opacity: 0.85; }
@media (max-width: 56.24rem) {
  .home-bar .home-plate { order: 2; }
}

/* ---- Hours: a card on the bar's back wall ---- */

.home-hours { padding-top: 0; }
.home-hours__frame {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.home-hours__frame .divider { width: min(12rem, 60%); }

/* ---- Closing band: back up to street level ---- */

.home-closing {
  border-top: var(--rule-hair) solid var(--rule);
  background: var(--ink);
}
.home-closing__inner {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
  text-align: center;
}
.home-closing .lead { max-width: 36ch; }


/* ---- Portfolio study card on Home. The cover already carries the neon; keep the chrome monochrome. ---- */
.home-study__card {
  display: grid;
  gap: var(--s-5);
  color: inherit;
  text-decoration: none;
}
.home-study__plate { margin: 0; aspect-ratio: 3 / 2; }
.home-study__text { display: grid; justify-items: start; gap: var(--s-3); }
.home-study__text .lead { max-width: 40ch; }
@media (min-width: 56.25rem) {
  .home-study__card {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--s-7);
  }
}