/* ==========================================================================
   North Furnishings - homepage, v2 "The Floor"
   Builds on styles.css (tokens, .btn, .tag, .card, .quote, .eyebrow,
   .section--red, [data-reveal]). Mobile-first: every section declares its
   small-screen layout first, then widens at 720 / 1024px.
   Seven sections, seven layout families:
   split hero, marquee band, snap rail, bento + signage index,
   overlapping editorial, staggered quotes, door-sign board.
   ========================================================================== */

/* Signage type: condensed, heavy, uppercase. Used only for "sign" moments. */
.hero__title,
.marquee__name,
.arrivals__title,
.room__name,
.cats__list,
.sign__open,
.sign__hours,
.visit__address {
  font-family: var(--font-display);
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--fg);
}

/* Dark scheme: white on the shared dark --red (#d9513b) is 4.0:1, under AA for button
   and tag text. Until styles.css adopts it, the homepage uses a slightly deeper
   vermillion (4.9:1 with white; still 3.8:1 as large text on --bg). */
@media (prefers-color-scheme: dark) {
  main { --red: #c74430; }
}

/* ---------- 1. Hero: asymmetric split ---------- */
.hero { --chrome: 104px; position: relative; overflow: clip; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__copy {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding-block: var(--s-5) 0;
}
.hero__title {
  margin: 0;
  /* Sized from the column width so "FURNITURE" always fills one line on phones */
  font-size: 25cqi;
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-wrap: wrap;
}
.hero__line { display: block; }
.hero__line--red { color: var(--red); }
.hero__sub { margin: 0 0 var(--s-5); max-width: 38ch; font-size: 1.05rem; line-height: 1.45; color: var(--fg-2); }
.hero__actions { display: flex; gap: var(--s-3); }
.hero__actions .btn { flex: 1 1 0; padding-inline: 0.75rem; }

.hero__media { position: relative; margin: var(--s-7) calc(-1 * var(--gutter)) 0; }
.hero__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 62%; background: var(--bg-2); }
.hero__tag {
  position: absolute; z-index: 1; margin: 0;
  top: 0; right: var(--gutter);
  align-items: center; gap: 0.7rem;
  transform: translateY(-36%);
  rotate: -4deg; transform-origin: 1.1rem 50%;
  animation: nf-settle 1.6s var(--ease) 0.3s both;
}
.hero__tag-num { font-size: clamp(2.4rem, 1.8rem + 3vw, 5rem); line-height: 0.82; }
.hero__tag-note { line-height: 1.3; }
@keyframes nf-settle { from { rotate: -16deg; } 55% { rotate: 1deg; } to { rotate: -4deg; } }

@media (min-width: 560px) {
  .hero__title { font-size: 12.4cqi; }
  .hero__actions .btn { flex: 0 0 auto; padding-inline: 1.6rem; }
}
@media (min-width: 720px) {
  .hero__copy { padding-top: var(--s-7); }
  .hero__img { aspect-ratio: 16 / 9; }
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    /* Leaves a strip of the red maker band showing above the fold */
    height: clamp(560px, calc(100svh - var(--chrome) - 7rem), 780px);
  }
  .hero__copy {
    justify-content: center; gap: clamp(2rem, 6vh, 4rem);
    padding: clamp(1.5rem, 6vh, 5rem) clamp(2rem, 4vw, 4.5rem) clamp(2rem, 7vh, 5rem) 0;
  }
  .hero__title { font-size: 13cqi; }
  .hero__sub { font-size: var(--step-1); }
  /* Photo bleeds off the right edge of the viewport */
  .hero__media { margin: 0 calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max)) / 2))) 0 0; }
  .hero__img { height: 100%; aspect-ratio: auto; object-position: 62% 60%; }
  .hero__tag { top: 46%; right: auto; left: 0; transform: translate(-46%, -50%); }
}

/* ---------- 2. Makers: the colour-block band + the marquee ---------- */
.makers { padding-block: var(--s-7) var(--s-6); overflow: hidden; }
.makers :focus-visible { outline-color: var(--on-red); }
.makers__title { margin: 0 0 var(--s-5); font-size: var(--step-2); line-height: 1; }

.marquee { border-block: 2px solid var(--on-red); overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: nf-marquee 70s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
/* Keyboard focus: stop and let the strip scroll so the focused name is in view */
.marquee:has(a:focus-visible) { overflow-x: auto; scrollbar-width: none; }
.marquee:has(a:focus-visible) .marquee__track { animation: none; }
.marquee .marquee__list {
  display: flex; align-items: center; gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  margin: 0; padding: var(--s-4) clamp(2rem, 1rem + 3vw, 4.5rem) var(--s-4) 0; list-style: none;
}
.marquee__item { display: inline-flex; align-items: flex-start; gap: 0.6rem; color: var(--on-red); text-decoration: none; white-space: nowrap; }
.marquee__name { color: inherit; font-weight: 800; font-size: clamp(3.25rem, 1.8rem + 5.4vw, 7.5rem); line-height: 0.92; letter-spacing: -0.01em; }
.marquee__item:hover .marquee__name { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.08em; }
.marquee__count { margin-top: 0.3em; font-family: var(--font-mono); font-stretch: 100%; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; }
.marquee__count::before { background: var(--red); box-shadow: none; }
@keyframes nf-marquee { to { transform: translateX(-50%); } }

.makers__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-6); margin-top: var(--s-5); }
/* Band copy is set as large bold text so it keeps AA contrast on vermillion in both schemes */
.makers__intro { margin: 0; max-width: 44ch; font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.makers__toggle {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.25rem 0;
  border: 0; border-bottom: 3px solid var(--on-red); background: none; color: var(--on-red);
  font-family: var(--font-display); font-stretch: 85%; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.03em; text-transform: uppercase;
}
.makers__toggle::after { content: "+"; font-size: 1.5em; line-height: 0.8; transition: transform 0.3s var(--ease); }
.makers__toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.makers__toggle:active { transform: translateY(1px); }
.no-js .makers__toggle { display: none; }

.makers__all { margin-top: var(--s-5); }
.no-js .makers__all[hidden] { display: block; }
.makers .makers__sheet {
  margin: 0; padding: var(--s-4) var(--s-5); list-style: none;
  background: var(--tag); color: var(--fg);
  columns: 1; column-gap: var(--s-7);
}
.makers__sheet :focus-visible { outline-color: var(--focus); outline-offset: 0; }
.makers__sheet a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-height: 44px; padding: 0.55rem 0; color: var(--fg); text-decoration: none; break-inside: avoid; }
.makers__name { font-family: var(--font-display); font-stretch: 75%; font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.makers__count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.makers__sheet a:hover .makers__name { color: var(--red-ink); text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 560px) { .makers__sheet { columns: 2; } }
@media (min-width: 900px) { .makers .makers__sheet { columns: 3; padding: var(--s-5) var(--s-6); } }
@media (min-width: 1200px) { .makers__sheet { columns: 4; } }

/* ---------- 3. Just hit the floor: snap rail ---------- */
.arrivals__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.arrivals__title { margin: 0; font-size: clamp(2.6rem, 1.5rem + 5vw, 6.5rem); line-height: 0.86; }
.rail-nav { display: flex; flex: none; gap: var(--s-2); }
.rail-nav__btn {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 2px solid var(--fg); border-radius: var(--radius); background: transparent; color: var(--fg);
  font-size: 1.4rem; line-height: 1;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.1s var(--ease), opacity 0.2s var(--ease);
}
.rail-nav__btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
.rail-nav__btn:active:not(:disabled) { transform: translateY(1px); }
.rail-nav__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.rail-nav__btn[hidden] { display: none; }

.rail {
  --rail-pad: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad);
  scrollbar-width: thin; scrollbar-color: var(--fg) transparent;
  padding-bottom: var(--s-5);
}
.rail:focus-visible { outline-offset: -3px; }
.rail .rail__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(68vw, 300px); gap: var(--s-4);
  width: max-content; margin: 0; padding: 0 var(--rail-pad); list-style: none;
}
.rail .card { scroll-snap-align: start; }
.rail__error { width: min(80vw, 36rem); padding-block: var(--s-5); color: var(--fg-2); }
.card--skeleton .card__media { background: var(--bg-2); }
.sk { display: block; width: 80%; height: 0.8rem; margin-top: 0.5rem; background: var(--bg-2); }
.sk--s { width: 40%; }
.sk--p { width: 30%; height: 1.4rem; }
.arrivals__more { margin-top: var(--s-3); }
.arrivals__more noscript p { margin-bottom: var(--s-4); }
@media (min-width: 720px) {
  .rail .rail__list { grid-auto-columns: min(34vw, 300px); gap: var(--s-5); }
}

/* ---------- 4. Rooms bento + category signage index ---------- */
.browse__title { max-width: 18ch; margin-bottom: var(--s-6); }
.rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.rooms__cell--living,
.rooms__cell--dining { grid-column: 1 / -1; }
.room { display: flex; flex-direction: column; height: 100%; color: var(--fg); text-decoration: none; }
.room__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); }
.room__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.room:hover .room__media img { transform: scale(1.04); }
/* The name block is attached to the photo edge, never laid over it */
.room__block { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); background: var(--bg); color: var(--fg); }
.room__name { color: inherit; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 4rem); line-height: 0.86; }
.room__count { font-family: var(--font-display); font-stretch: 85%; font-weight: 700; font-size: 1.2rem; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; }
.room:hover .room__name { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.08em; }

.room--living .room__media { aspect-ratio: 4 / 3; }
.room--living .room__block { background: var(--red); color: var(--on-red); }
.room--living .room__name { font-size: clamp(3.4rem, 1.6rem + 6.4vw, 8rem); }
.room--dining { flex-direction: row; }
.room--dining .room__media { flex: 0 0 50%; }
.room--dining .room__block { flex: 1 1 0; min-width: 0; background: var(--fg); color: var(--bg); justify-content: flex-end; }
.room--dining .room__name { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 5.5rem); }
.room--office .room__block { background: var(--tag); box-shadow: inset 0 0 0 2px var(--fg); }

.cats { margin-top: var(--s-8); padding-top: var(--s-5); border-top: var(--rule); }
.cats__list {
  display: flex; flex-wrap: wrap; align-items: baseline;
  margin: 0; padding: 0; list-style: none;
  font-weight: 800; font-size: clamp(1.6rem, 0.9rem + 3.6vw, 4.6rem); line-height: 1.08;
}
.cats__list li:not(:last-child)::after { content: "/" / ""; margin-inline: 0.2em; color: var(--red); font-weight: 300; }
.cats__list a { color: var(--fg); text-decoration: none; }
.cats__list a:hover { color: var(--red-ink); text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.08em; }
.cats__count { margin-left: 0.15em; font-family: var(--font-mono); font-stretch: 100%; font-size: max(0.75rem, 0.27em); font-weight: 500; letter-spacing: 0; line-height: 0; vertical-align: super; color: var(--muted); }
.cats__list a:hover .cats__count { color: inherit; }

@media (min-width: 720px) {
  .room--living .room__media { aspect-ratio: 16 / 9; }
  .rooms { gap: var(--s-4); }
}
@media (min-width: 1024px) {
  .rooms { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
  .rooms__cell--living { grid-column: 1; grid-row: 1 / 3; }
  .rooms__cell--dining { grid-column: 2 / 4; grid-row: 1; }
  .room--living .room__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  .room--living .room__media img { position: absolute; inset: 0; }
  .room--living .room__block { flex: 0 0 auto; padding: var(--s-4) var(--s-5) var(--s-5); }
  .room--dining .room__media { flex-basis: 52%; }
  .room--dining .room__block { padding: var(--s-5); }
  .room--bedroom .room__media,
  .room--office .room__media { aspect-ratio: 4 / 3; }
}

/* ---------- 5. The family: full-bleed photo with an offset panel ---------- */
.family__media { margin-inline: calc(-1 * var(--gutter)); }
.family__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 70%; background: var(--bg-2); }
.family__panel {
  position: relative; z-index: 1;
  margin: calc(-1 * var(--s-8)) 0 0 var(--s-5);
  padding: var(--s-5);
  background: var(--tag); color: var(--fg-2);
  border: 2px solid var(--fg); border-top: 10px solid var(--red);
}
.family__title { font-size: var(--step-2); line-height: 1; }
.family__panel p { margin-bottom: var(--s-5); font-size: 1.0625rem; }
@media (min-width: 720px) {
  .family__media img { aspect-ratio: 16 / 10; }
  .family__panel { margin-left: 30%; padding: var(--s-6); }
}
@media (min-width: 1024px) {
  .family { padding-bottom: calc(var(--section) + var(--s-8)); }
  .family__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  /* Photo bleeds off the left edge of the viewport */
  .family__media { grid-column: 1 / 9; grid-row: 1; margin: 0 0 0 calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max)) / 2))); }
  .family__media img { aspect-ratio: 4 / 3; object-position: 50% 66%; }
  .family__panel { grid-column: 8 / 13; grid-row: 1; margin: 0 0 calc(-1 * var(--s-8)); padding: var(--s-7) var(--s-6); }
  .family__title { font-size: clamp(2.4rem, 1.2rem + 2.2vw, 3.6rem); }
  .family__panel p { font-size: var(--step-1); line-height: 1.45; }
}

/* ---------- 6. Reviews: staggered 2x2 ---------- */
.reviews__grid { display: grid; gap: var(--s-6); }
.reviews__title { margin: 0; font-size: var(--step-4); }
.reviews__head .eyebrow { margin-bottom: var(--s-3); }
.reviews__q { height: auto; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--rule); }
.reviews__q blockquote p { font-size: clamp(1rem, 0.62rem + 1.75vw, 2.1rem); line-height: 1.2; }
.reviews__q--paper { padding: var(--s-4) var(--s-4) var(--s-5); border: 2px solid var(--fg); background: var(--tag); }
.reviews__q--2,
.reviews__q--4 { margin-left: var(--s-5); }
@media (min-width: 900px) {
  .reviews { padding-top: var(--s-6); }
  .reviews__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); align-items: start; }
  .reviews__head { grid-column: 1 / 7; grid-row: 1; align-self: end; }
  .reviews__q--1 { grid-column: 1 / 7; grid-row: 2; }
  .reviews__q--2 { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; margin: 0; }
  .reviews__q--3 { grid-column: 2 / 7; grid-row: 3; }
  .reviews__q--4 { grid-column: 7 / 13; grid-row: 3; margin: var(--s-8) 0 0; }
  .reviews__q--paper { padding: var(--s-5) var(--s-6) var(--s-6); }
}

/* ---------- 7. Visit: the door sign ---------- */
.visit__grid { display: grid; gap: var(--s-8); }
.visit__sign-wrap { padding-top: var(--s-8); }
.sign {
  position: relative; max-width: 30rem;
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: 3px solid var(--fg); background: var(--tag);
  rotate: -1.5deg;
}
/* The cord and nail the sign hangs from */
.sign::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 54%; height: calc(var(--s-8) - 0.5rem); translate: -50% -3px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1.5px), var(--fg) calc(50% - 1px), var(--fg) calc(50% + 1px), transparent calc(50% + 1.5px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1.5px), var(--fg) calc(50% - 1px), var(--fg) calc(50% + 1px), transparent calc(50% + 1.5px)) right / 50% 100% no-repeat;
}
.sign::after { content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--s-8) - 1.15rem); width: 0.8rem; height: 0.8rem; translate: -50% 0; border-radius: 50%; background: var(--fg); }
.sign__open { margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 3px solid var(--fg); color: var(--red); font-size: clamp(5.5rem, 3rem + 10vw, 10rem); line-height: 0.8; letter-spacing: -0.02em; }
.sign__hours { display: grid; gap: 0.15rem; margin: 0; font-weight: 800; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.75rem); line-height: 1; }
.sign__hours > div { display: flex; justify-content: space-between; gap: var(--s-4); }
.sign__hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.sign__closed { color: var(--muted); }
.visit__status { margin: var(--s-5) 0 0; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em; color: var(--muted); }

.visit__title { font-size: var(--step-3); }
.visit__address { margin: 0 0 var(--s-3); font-style: normal; font-weight: 800; font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.75rem); line-height: 0.9; }
.visit__address span { color: var(--fg-2); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0; }
.visit__tags { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.visit__tag { flex-wrap: wrap; row-gap: 0.15rem; font-size: 1.2rem; white-space: normal; }
.visit__tag::before { background: var(--bg-2); }
@media (prefers-color-scheme: dark) {
  .visit__tag:not(.tag--red) { --tag-bg: var(--bg-3); filter: drop-shadow(0 0 1px var(--muted)); }
}
@media (max-width: 419px) {
  .visit__actions .btn { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .visit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8) clamp(3rem, 6vw, 7rem); align-items: start; }
  .visit__sign-wrap { padding-top: calc(var(--s-8) + var(--s-2)); }
}

/* ---------- Motion off: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__tag { animation: none; }
  .marquee__track { width: auto; animation: none; }
  .marquee .marquee__list { flex-wrap: wrap; row-gap: var(--s-2); max-width: var(--max); margin-inline: auto; padding: var(--s-4) var(--gutter); }
  .marquee__list[aria-hidden="true"] { display: none; }
  .marquee__name { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.25rem); }
  .room__media img, .rail-nav__btn, .makers__toggle::after { transition: none; }
}