/* ==========================================================================
   Ananta Designs - home page

   The approved Direction 05 composition: a working shopfront above the fold,
   then short dense sections each ending in something clickable.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------- */

.hero {
  padding-top: calc(var(--head-h) + 1rem);
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .hero {
    padding-top: calc(var(--head-h) + 1.5rem);
  }
}

.hero__grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.6fr 1fr;
  }
}

.hero__lead {
  overflow: hidden;
}

.hero__lead-inner {
  display: grid;
}

@media (min-width: 768px) {
  .hero__lead-inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.hero__copy {
  order: 2;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .hero__copy {
    order: 1;
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hero__copy {
    padding: 3rem;
  }
}

.hero__plate {
  order: 1;
  display: block;
}

@media (min-width: 768px) {
  .hero__plate {
    order: 2;
  }

  .hero__plate .plate {
    aspect-ratio: 1 / 1;
  }
}

/* The hero heading has its own scale, distinct from the Academy and Studio
   page titles. The prototype sets it at three breakpoints - text-[1.9rem] leading-[1.05] md:text-[2.5rem] lg:text-[3rem] - so it tops
   out at 48px, not the 52px the general display class reaches. Reproduced as
   the same three steps rather than folded into a clamp. */
.hero__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 3rem;
  }
}

.hero__body {
  margin-top: 1.25rem;
  max-width: 26rem;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-dim);
}

/* The two calls to action.
   They stay stacked well past the phone breakpoint on purpose: the labels
   are the client's own ("Explore our collections", "Join Nahu's Academy"),
   and at 12px with 0.18em tracking they are wide. Side by side inside the
   hero's half-width copy column they overlapped. They only go horizontal at
   1280px, where the column is finally wide enough to hold both. */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.75rem;
}

.hero__actions .btn {
  width: 100%;
  /* Let a long label wrap rather than run out of its own button. */
  white-space: normal;
  text-align: center;
}

@media (min-width: 1280px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__actions .btn {
    width: auto;
    white-space: nowrap;
  }
}

/* the studio plate beside the hero */
.hero__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: 14rem;
}

.hero__aside .plate {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.hero__aside-body {
  position: relative;
  display: block;
  padding: 1.25rem;
  /* the scrim that keeps the label legible over any photograph */
  background: linear-gradient(to top, var(--ink), rgba(8, 8, 10, 0.6) 60%, transparent);
}

.hero__aside-title {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--fg);
}

.hero__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 0.3s var(--ease-soft);
}

.hero__aside:hover .hero__aside-link {
  color: var(--gold);
}

/* ---- trust row ----------------------------------------------------------- */

.trust-row {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

@media (min-width: 640px) {
  .trust-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}

.trust svg {
  flex-shrink: 0;
  color: var(--gold);
}

.trust__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.trust__note {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* ---- department blocks ---------------------------------------------------
   Each department gets its own heading and its own row. Jewellery is a half
   of the shop, not a chip on the end of the clothing rail. */

.dept-block {
  margin-top: 1.25rem;
}

.dept-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--line);
}

/* The department name sits a step below the section heading and is set
   tight: the prototype uses text-xl leading-none md:text-2xl, i.e. 20/24px
   at line-height 1. It is deliberately smaller than .t-display-sm. */
.dept-block__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--fg);
}

@media (min-width: 768px) {
  .dept-block__title {
    font-size: 1.5rem;
  }
}

.dept-block__all {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  transition: opacity 0.3s var(--ease-soft);
}

.dept-block__all:hover {
  opacity: 0.75;
}

.cat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
  margin-top: 0.875rem;
}

@media (min-width: 640px) {
  .cat-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cat-tile {
  overflow: hidden;
}

.cat-tile .plate__img {
  transition: transform 0.5s var(--ease-soft);
}

.cat-tile:hover .plate__img {
  transform: scale(1.05);
}

.cat-tile__label {
  padding: 0.625rem 0.75rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-dim);
  transition: color 0.3s var(--ease-soft);
}

@media (min-width: 768px) {
  .cat-tile__label {
    font-size: 13px;
  }
}

.cat-tile:hover .cat-tile__label {
  color: var(--gold);
}

/* ---- academy band -------------------------------------------------------- */

.academy-band {
  display: grid;
  overflow: hidden;
}

@media (min-width: 768px) {
  .academy-band {
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
  }
}

.academy-band__copy {
  order: 2;
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .academy-band__copy {
    order: 1;
    padding: 3rem;
  }
}

.academy-band__media {
  order: 1;
}

@media (min-width: 768px) {
  .academy-band__media {
    order: 2;
    align-self: stretch;
  }

  .academy-band__media .plate {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ---- the house ----------------------------------------------------------- */

.house {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  .house {
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: start;
  }
}

.house__copy {
  max-width: 34rem;
}

.house__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .house__stats {
    gap: 2rem;
  }
}

.house__stat {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold);
}

@media (min-width: 768px) {
  .house__stat {
    font-size: 2.5rem;
  }
}

.house__stat-label {
  margin-top: 0.5rem;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}

/* ---- the lookbook --------------------------------------------------------
   The boutique's own shoot. Portrait frames on a 4:5 crop, two across a
   phone and four with room - dense enough to read as a collection, padded
   enough not to read as a contact sheet. */

.lookbook {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .lookbook {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lookbook__item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.3s var(--ease-soft);
}

.lookbook__item:hover,
.lookbook__item:focus-within {
  border-color: rgba(195, 161, 106, 0.5);
}

.lookbook__media {
  display: block;
  overflow: hidden;
}

.lookbook__item .plate__img {
  transition: transform 0.7s var(--ease-soft);
}

.lookbook__item:hover .plate__img,
.lookbook__item:focus-within .plate__img {
  transform: scale(1.04);
}

/* The caption under each frame: what the piece is, what it is called, and
   how to ask about it. Sized well below the product card - this is a
   collection, and the photograph is still the point. */
.lookbook__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.875rem 0.875rem 1rem;
}

.lookbook__type {
  color: var(--gold);
}

.lookbook__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--fg);
}

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

/* The name is the link, so it carries the whole tile's focus ring rather
   than the image anchor, which is hidden from the accessibility tree. */
.lookbook__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lookbook__body .price-ask {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* The rights line. Quiet by design - it has to be present and readable
   without competing with the photography above it. */
.lookbook__rights {
  margin-top: 1.25rem;
  max-width: 52rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(195, 161, 106, 0.5);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---- hero slideshow ------------------------------------------------------
   Crossfade, not a horizontal slide: the plate sits inside a bordered card
   and a translating strip would show its edge against the card's own border.

   The slides are stacked absolutely, so the container needs a height. The
   first slide keeps its normal flow position to establish that height - the
   rest are lifted out on top of it. That way the card never collapses and
   nothing jumps while images load. */

.hero__slides {
  position: relative;
}

/* Without JavaScript only the first slide exists. The others are not hidden
   with opacity - they are not rendered at all, so nothing can stack up
   invisibly or leave the card empty if the script never runs. */
.hero__slide:not(:first-child) {
  display: none;
}

/* With JavaScript the rest are stacked over the first, which stays in flow
   and sets the card's height. Only .is-active is visible, and that class is
   applied on load before the timer ever starts. */
.js .hero__slide:not(:first-child) {
  display: block;
  position: absolute;
  inset: 0;
}

.js .hero__slide {
  opacity: 0;
  transition: opacity 0.9s var(--ease-soft);
}

.js .hero__slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__slide {
    transition: none;
  }
}

/* ---- indicators ----------------------------------------------------------
   Dashes rather than dots: square corners are the house rule, and a row of
   circles would be the one rounded thing on the page.

   The BUTTON is the tap target at 40x44 and the dash is drawn inside it with
   ::after. Sizing the button itself down to the 2px dash would have made a
   2px-tall control, which fails target size and is miserable on a phone. */

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transform: translateX(-50%);
  /* A soft scrim so the dashes read over a pale frame as well as a dark one. */
  padding: 0 0.5rem;
  background: rgba(8, 8, 10, 0.4);
  backdrop-filter: blur(6px);
}

.hero__dot {
  position: relative;
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: rgba(237, 232, 224, 0.45);
  transition:
    width 0.45s var(--ease-soft),
    background-color 0.45s var(--ease-soft);
}

.hero__dot:hover::after {
  background: rgba(237, 232, 224, 0.75);
}

.hero__dot.is-active::after {
  width: 32px;
  background: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .hero__dot::after {
    transition: none;
  }
}

/* ---- the house lockup ----------------------------------------------------
   Ananta Designs beside Nahu's Academy, edge to edge.

   The artwork is cream on a site that is obsidian. That is treated as a
   deliberate inversion rather than something to disguise: it runs the full
   width with a hairline above and below, so it reads as a printed insert laid
   into the page. An image sitting inside the shell with margins around it is
   what looks pasted on.

   The crop is the important part. At 5.5:1 the artwork scaled to a phone is a
   65px sliver with a two-pixel strapline, so it is never scaled to fit - the
   frame takes a taller ratio and the image is cropped from the left, which
   lands on the two logos. The title and the model return as the frame gets
   the width to carry them. */

.house-lockup {
  /* Explicit, because the class this started life as - `.academy-band` - is
     already taken by the Academy section further down this page. Sharing the
     name meant inheriting its grid and, worse, overwriting its background
     with this band's cream. Different section, different name. */
  display: block;
  border-block: 1px solid var(--line);
  background: #f7f1e9; /* the artwork's own ground, so any rounding gap on a
                          fractional viewport width matches the image */
}

.house-lockup__link {
  display: block;
}

.house-lockup__img {
  display: block;
  width: 100%;
  height: 100%;
  /* Phone: the dual-logo lockup, which is the left ~900px of the artwork. */
  aspect-ratio: 2.5 / 1;
  object-fit: cover;
  object-position: left center;
  transition: transform 0.6s var(--ease-soft);
}

/* Enough width for the title block to arrive as well. */
@media (min-width: 40rem) {
  .house-lockup__img {
    aspect-ratio: 4.3 / 1;
  }
}

/* Enough width for the whole lockup, model included, at its own ratio. */
@media (min-width: 68rem) {
  .house-lockup__img {
    aspect-ratio: 1983 / 359;
  }
}

.house-lockup__link:hover .house-lockup__img {
  transform: scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .house-lockup__img {
    transition: none;
  }

  .house-lockup__link:hover .house-lockup__img {
    transform: none;
  }
}