/* ==========================================================================
   Home page (index.html): page-specific layout only; components come from
   components.css. A short landing page: the hero (the Hot Soap mark drawn in
   live waveform lines by hero-lines.js, centred above the studio's name and the
   two calls to action), then the tiles, one per menu entry in menu order (nine: three
   rows of three down to 561px; on phones the first tile spans the two columns, so no row
   is left with one tile), each a photo of the studio in black and white that turns mint
   when lit (home.js lights them on touch screens). The footer follows.
   ========================================================================== */

/* ---- 1. Hero ------------------------------------------------------------ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 620px;
  background: var(--ink); color: var(--cream);
}
.hero__media { position: absolute; inset: -2% 0 0 0; z-index: -3; overflow: hidden; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: brightness(.4) saturate(.82) contrast(1.08) sepia(.12);
  transform-origin: 50% 48%;
}
/* darker round the edges and behind the text, open where the mark stands */
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58% 56% at 50% 40%, rgba(15, 13, 12, 0) 0, rgba(15, 13, 12, .38) 62%, rgba(15, 13, 12, .8) 100%),
    linear-gradient(180deg, rgba(15, 13, 12, .78) 0%, rgba(15, 13, 12, 0) 22%, rgba(15, 13, 12, 0) 52%, rgba(15, 13, 12, .88) 84%, var(--ink) 100%),
    radial-gradient(55% 45% at 6% 100%, rgba(255, 106, 43, .16), rgba(255, 106, 43, 0) 70%);
}
/* the mark's canvas (hero-lines.js sizes and places it on the mark's stage, centred above
   the name); --sphere-alpha dims it */
.hero__sphere { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }

.hero__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; justify-items: center; text-align: center;
  padding-bottom: clamp(1.6rem, 5vh, 3.4rem);
}
.hero__title {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 350;
  font-size: clamp(2.3rem, 4.4vw, 4.4rem); line-height: 1; letter-spacing: -.03em;
  text-shadow: 0 2px 40px rgba(15, 13, 12, .45);
}
.hero__sub { margin-top: clamp(.7rem, 1.6vh, 1rem); color: rgba(243, 235, 224, .72); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: clamp(1.2rem, 3vh, 2rem); }
/* short laptop windows (1280x720, 1536x730 at 125%): a tighter text block leaves the mark its height */
@media (min-width: 761px) and (max-height: 780px) {
  .hero__content { padding-bottom: 1.3rem; }
  .hero__title { font-size: clamp(2.2rem, 6.6vh, 4.4rem); }
  .hero__ctas { margin-top: 1rem; }
}

@media (max-width: 760px) {
  .hero { min-height: 640px; }
  .hero__sphere { --sphere-alpha: .92; }
  /* drum kit + timber ceiling instead of a cymbal close-up */
  .hero__img { object-position: 22% 40%; filter: brightness(.48) saturate(.85) contrast(1.06) sepia(.12); }
  .hero__shade {
    background:
      radial-gradient(90% 50% at 50% 36%, rgba(15, 13, 12, 0) 0, rgba(15, 13, 12, .45) 70%, rgba(15, 13, 12, .8) 100%),
      linear-gradient(180deg, rgba(15, 13, 12, .7) 0%, rgba(15, 13, 12, 0) 18%, rgba(15, 13, 12, .1) 46%, rgba(15, 13, 12, .9) 74%, var(--ink) 100%),
      radial-gradient(70% 40% at 0% 100%, rgba(255, 106, 43, .2), rgba(255, 106, 43, 0) 70%);
  }
  .hero__ctas { flex-wrap: nowrap; gap: .6rem; width: 100%; }
  .hero__ctas .btn { flex: 1 1 0; min-height: 50px; padding-inline: 1rem; font-size: .9rem; }
  .hero__ctas .btn__icon { display: none; }
}

/* ---- 2. Explore: one tile per menu entry -------------------------------------- */
.explore { background: var(--ink); padding-block: clamp(3rem, 6vw, 6rem); }
.explore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.tile { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: var(--r-sm); color: var(--cream); }
/* the photos (the client's request, 25 Oct 2026): black and white at rest; the mint duotone of The Team's contact
   sheet when lit, that is on hover, on keyboard focus and, on touch screens, while the tile crosses the middle of
   the screen (home.js sets .is-lit). Hover only where the device can hover: a tap's :hover sticks on touch screens.
   The portraits' duotone (components.css): the grey photo multiplied onto the frame's colour, then lightened by
   ::after; white and black are identity (plain black and white), --duo-hi and --duo-lo the duotone. The frame
   isolates the blend, so the photo mixes with its own background only; the photo's own dark background shows
   until it loads (not the white frame). The photo stays darkened and the gradient (.tile::after) sits above it,
   so the cream titles keep their contrast. The frame takes the tile's corners in one piece, after the blend
   (clip-path): rounded layer by layer, as the portraits are, the white frame showed through their anti-aliased
   edges as a light arc on every corner. The clip-path does not rely on the rounded overflow clip, which iOS
   Safari can drop while a reveal moves the tile. The change runs on transitions, so it is instant with reduced
   motion (base.css). */
.tile__media {
  --duo-hi: var(--mint);
  --duo-lo: #142321;
  display: block; --ratio: 4 / 3; isolation: isolate; border-radius: 0; clip-path: inset(0 round var(--r-sm));
  background-color: #fff;                                        /* multiply by white = identity */
  transition: background-color .8s var(--ease-out);
}
.tile__media img {
  background-color: var(--ink-3);
  filter: grayscale(1) contrast(1.1) brightness(.7);
  mix-blend-mode: multiply;
  transition: transform 1.2s var(--ease-out), filter .8s var(--ease-out);
}
.tile__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-color: #000; mix-blend-mode: lighten;               /* lighten with black = identity */
  transition: background-color .8s var(--ease-out);
}
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(15, 13, 12, 0) 38%, rgba(15, 13, 12, .85) 100%);
}
.tile__body {
  position: absolute; z-index: 2; left: clamp(1rem, 1.6vw, 1.5rem); right: 4.25rem; bottom: clamp(1rem, 1.6vw, 1.4rem);
  display: grid; gap: .3rem;
}
.tile__title {
  font-family: var(--font-display); font-variation-settings: var(--soft); font-weight: 350;
  font-size: var(--fs-h4); line-height: 1.05; letter-spacing: -.02em;
}
.tile__desc { font-size: var(--fs-small); line-height: 1.35; color: rgba(243, 235, 224, .76); text-wrap: pretty; min-height: 2.7em; }   /* two lines kept, so the titles of a row sit level */
.tile__arrow {
  position: absolute; z-index: 2; right: clamp(1rem, 1.6vw, 1.4rem); bottom: clamp(1rem, 1.6vw, 1.4rem);
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid rgba(243, 235, 224, .4);
  transition: background-color .4s, color .4s, border-color .4s, transform .6s var(--ease-out);
}
.tile__arrow .icon { width: .9rem; height: .9rem; }
/* lit: the mint duotone (brightness .9, so the 76% cream descriptions keep 4.5:1 over the light walls) and the
   mint arrow; hover and keyboard focus also zoom the photo slowly. The touch screens' .is-lit does not zoom, as
   on The Team's contact sheet: the photo does not move while the page scrolls. */
.tile:focus-visible .tile__media, .tile.is-lit .tile__media { background-color: var(--duo-hi); }
.tile:focus-visible .tile__media::after, .tile.is-lit .tile__media::after { background-color: var(--duo-lo); }
.tile:focus-visible .tile__media img, .tile.is-lit .tile__media img { filter: grayscale(1) contrast(1.25) brightness(.9); }
.tile:focus-visible .tile__media img { transform: scale(1.04); }
.tile:focus-visible .tile__arrow, .tile.is-lit .tile__arrow { background: var(--mint); border-color: var(--mint); color: var(--ink); transform: rotate(45deg); }
@media (hover: hover) {
  .tile:hover .tile__media { background-color: var(--duo-hi); }
  .tile:hover .tile__media::after { background-color: var(--duo-lo); }
  .tile:hover .tile__media img { transform: scale(1.04); filter: grayscale(1) contrast(1.25) brightness(.9); }
  .tile:hover .tile__arrow { background: var(--mint); border-color: var(--mint); color: var(--ink); transform: rotate(45deg); }
}
/* each photo's focus point (object-position; the .media default is 50% 50%) for the tile's crops: 4 / 3 on
   desktop, 1 / 1 on tablets, 4 / 5 on phones (About: 16 / 9 from 560px down) */
.tile[href="studio.html"] .tile__media { --focus-pos: 35% 40%; }
.tile[href="multimedia.html"] .tile__media { --focus-pos: 50% 40%; }
.tile[href="gear.html"] .tile__media { --focus-pos: 50% 30%; }
.tile[href="artist-projects.html"] .tile__media { --focus-pos: 60% 30%; }
.tile[href="residency.html"] .tile__media { --focus-pos: 55% 40%; }
.tile[href="sessions.html"] .tile__media { --focus-pos: 55% 35%; }
/* tablets: squarer tiles, titles only (three columns leave no room for the descriptions, and without
   the arrow the longer titles stay on one line) */
@media (max-width: 1100px) {
  .tile__media { --ratio: 1 / 1; }
  .tile__body { right: clamp(1rem, 1.6vw, 1.5rem); }
  .tile__desc, .tile__arrow { display: none; }
}
@media (max-width: 760px) {
  .explore__grid { gap: .6rem; }
  .tile__media { --ratio: 4 / 5; }
  .tile__body { left: .8rem; right: .8rem; bottom: .8rem; }
  .tile__title { font-size: 1.15rem; }
}
/* phones: two columns; the first tile (About) spans both, so the nine fill the rows */
@media (max-width: 560px) {
  .explore { padding-block: clamp(2.5rem, 10vw, 3.5rem); }
  .explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore__grid > li:first-child { grid-column: 1 / -1; }
  .explore__grid > li:first-child .tile__media { --ratio: 16 / 9; }
}

/* ---- Hero mark: the Hot Soap mic drawn in live waveform lines (hero-lines.js) ---- */
.hero__mark-nojs { position: absolute; z-index: -1; left: 50%; top: 13%; height: 50%; width: auto; transform: translateX(-50%); pointer-events: none; }
.hero__mic-anchor { position: absolute; z-index: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 760px) {
  .hero__mark-nojs { top: 14%; height: 40%; }
}