/* ==========================================================================
   Home page
   ========================================================================== */

/* ---------- Hero ---------- */
.home-hero {
  position: relative;
  height: 820px;
  overflow: hidden;
}
.home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 16, 12, .32) 0%,
    rgba(20, 16, 12, 0)  30%,
    rgba(20, 16, 12, 0)  45%,
    rgba(20, 16, 12, .52) 100%);
}
.home-hero__body {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 76px;
  max-width: 760px;
  color: var(--cream);
}
.home-hero__kicker {
  font-size: 13px;
  letter-spacing: .32em;
  font-weight: 600;
  opacity: .9;
  margin-bottom: 20px;
}
.home-hero__lede {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
  opacity: .92;
}
.home-hero__actions { display: flex; gap: 16px; margin-top: 36px; }

/* ---------- Explore by space ---------- */
.space-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-rows: auto auto;
  gap: 28px;
}
.space-grid__lead { grid-row: 1 / 3; }
.space-grid__side { aspect-ratio: 4 / 3; }
.space-row { margin-top: 28px; gap: 28px; }

/* ---------- Get the look ---------- */
.getlook {
  display: grid;
  grid-template-columns: 8fr 4fr;
  border: 1px solid var(--rule);
}
.getlook__stage { position: relative; }
.getlook__stage > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 560px;
}

.getlook__spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.getlook__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(245, 242, 234, .94);
  border: 1.5px solid var(--rule-strong);
  animation: kbh-breathe 2.6s ease-out infinite;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.getlook__spot[aria-pressed="true"] .getlook__dot {
  color: var(--cream);
  background: var(--terra);
  border-color: var(--cream);
}

.getlook__panel {
  background: var(--ink);
  color: var(--cream);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}
.getlook__eyebrow {
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--terra);
  font-weight: 600;
  margin-bottom: 14px;
}
.getlook__list { display: flex; flex-direction: column; }
.getlook__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 13px 0;
  border-bottom: 1px solid rgba(245, 242, 234, .12);
  font-size: 14.5px;
  text-align: left;
  color: var(--muted);
  transition: color .25s ease;
}
.getlook__row:hover { color: var(--paper); }
.getlook__row[aria-pressed="true"] { color: var(--cream); }
.getlook__row-num {
  font-size: 10.5px;
  letter-spacing: .08em;
  width: 24px;
  color: var(--terra);
  font-weight: 600;
  flex-shrink: 0;
}
.getlook__row-name { flex: 1; font-weight: 500; }
.getlook__row-code { font-size: 10.5px; letter-spacing: .12em; color: var(--muted-deep); }

.getlook__detail { margin-top: 22px; }
.getlook__desc p { font-size: 13.5px; line-height: 1.75; color: var(--paper-dim); }
.getlook__desc[hidden] { display: none; }
.getlook__meta { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; }

.getlook__spacer { flex: 1; min-height: 24px; }
.getlook__actions {
  border-top: 1px solid var(--rule-light);
  padding-top: 26px;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.getlook__actions .btn { width: 100%; padding: 14px 10px; font-size: 12.5px; }

/* ---------- Global capability collage ---------- */
.cap-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cap-collage img { width: 100%; display: block; object-fit: cover; }
.cap-collage__lead { grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.cap-collage img:not(.cap-collage__lead) { aspect-ratio: 1 / 1; }

/* ---------- Step dot grid ---------- */
/* Used by the "how complete" steps. Filled cells are how much of a scene the
   step covers, so the grid carries information rather than decorating. */
.step-dots { display: grid; grid-template-columns: repeat(3, 8px); gap: 3px; }
.step-dots span {
  width: 8px;
  height: 8px;
  border: 1px solid var(--rule-strong);
}
.step-dots span.on  { background: var(--brown); border-color: var(--brown); }
.step-dots span.alt { background: var(--terra); border-color: var(--terra); }

/* ---------- Collection cards ---------- */
.col-card { display: flex; flex-direction: column; }
.col-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
}
.col-card__num   { font-size: 11px; letter-spacing: .2em; color: var(--terra); font-weight: 600; }
.col-card__count { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
.col-card__name  { font-family: var(--serif); font-size: 20px; margin-top: 14px; }
.col-card__pal   { font-size: 11.5px; letter-spacing: .1em; color: var(--muted); margin-top: 5px; }

/* ---------- How complete (merged: ways to buy + made for your space) ---------- */
/* The visual column stretches to the step column's height rather than sitting
   at its own aspect ratio, so the two halves square off at the bottom instead
   of leaving one short. Below the split breakpoint it goes back to a ratio. */
.made-visual { display: flex; flex-direction: column; gap: 24px; }
.made__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.made-visual .made__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 420px; }
.made__lede { margin: 18px 0 0; max-width: 52ch; }

.made-row {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.made-row--last { border-bottom: 1px solid var(--rule); }
.made-row__icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(29, 28, 25, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.made-row__body { min-width: 0; }
.made-row__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.made-row__num {
  font-size: 11.5px;
  letter-spacing: .22em;
  color: var(--terra);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.made-row__title { font-size: 15.5px; font-weight: 600; }
.made-row__badge {
  font-size: 10.5px;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--cream);
  background: var(--brown);
  padding: 3px 9px;
}
.made-row__sub {
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
  font-weight: 600;
  margin-top: 6px;
}
.made-row__text { font-size: 13.5px; color: var(--muted); margin-top: 8px; line-height: 1.65; }

.made-mats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.made-mats__strip { display: flex; gap: 8px; }
.made-mats__strip img { width: 44px; height: 44px; object-fit: cover; display: block; }
.made-mats__label { font-size: 11px; letter-spacing: .16em; color: var(--muted); font-weight: 600; }

/* ---------- Brand story ---------- */
.story-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 90px;
  align-items: center;
}
.story-grid__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* ---------- Trade panel ---------- */
.trade-panel {
  border: 1px solid rgba(29, 28, 25, .16);
  display: grid;
  /* The text carries three rows of substance; the photograph is support. An
     even split left the copy cramped and the picture over-weighted. */
  grid-template-columns: 7fr 5fr;
}
.trade-panel__text {
  padding: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  /* Not centred: centring floated the block and opened dead space under the
     button. The content starts at the top and the rhythm does the spacing. */
  justify-content: flex-start;
}
.trade-panel__title { margin: 10px 0 0; max-width: 18ch; }
.trade-panel__lede {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--muted-dark);
  max-width: 46ch;
}

.trade-panel__media { display: block; overflow: hidden; position: relative; }
.trade-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 520px;
  transition: transform 1.4s ease;
}
.trade-panel__media:hover img { transform: scale(1.03); }

/* ---- the three terms ---- */
.trade-rows { display: flex; flex-direction: column; margin-top: 30px; }
.trade-row {
  display: grid;
  grid-template-columns: 30px 1fr 20px;
  align-items: start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid rgba(29, 28, 25, .12);
  transition: background .25s ease, padding .25s ease;
}
.trade-row:last-child { border-bottom: 1px solid rgba(29, 28, 25, .12); }
.trade-row:hover { background: var(--cream-alt); }

.trade-row__n {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--terra);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.trade-row__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trade-row__who  { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.trade-row__what { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); }
.trade-row__note { font-size: 13px; line-height: 1.6; color: var(--muted-dark); }
.trade-row__go {
  font-size: 15px;
  color: var(--muted);
  padding-top: 2px;
  transition: transform .25s ease, color .25s ease;
}
.trade-row:hover .trade-row__what { color: var(--terra); }
.trade-row:hover .trade-row__go { color: var(--terra); transform: translateX(3px); }

.trade-panel__cta { align-self: flex-start; margin-top: 30px; }

@media (max-width: 1023px) {
  .trade-panel { grid-template-columns: 1fr; }
  .trade-panel__media { order: -1; }
  .trade-panel__media img { min-height: 320px; }
}
@media (max-width: 767px) {
  .trade-panel__text { padding: 28px 20px 32px; }
  .trade-panel__title { max-width: none; }
  .trade-row { grid-template-columns: 26px 1fr 18px; gap: 11px; padding: 14px 0; }
  .trade-row__what { font-size: 16px; }
  .trade-row__note { font-size: 12.5px; }
  .trade-panel__cta { width: 100%; text-align: center; }
}

/* ---------- Final CTA ---------- */
.home-cta {
  position: relative;
  height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.home-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-cta__veil { position: absolute; inset: 0; background: rgba(20, 16, 12, .5); }
.home-cta__body {
  position: relative;
  color: var(--cream);
  max-width: 680px;
  padding: 0 40px;
}
.home-cta__lede { margin-top: 20px; font-size: 16px; line-height: 1.75; opacity: .92; }
.home-cta__actions { display: flex; gap: 16px; justify-content: center; margin-top: 36px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1279px) {
  .home-hero { height: 660px; }
  .home-hero__body { bottom: 56px; }
  .story-grid { gap: 56px; }
  .trade-panel__text { padding: 44px 40px; }
  .getlook__panel { padding: 32px 28px; }
}

@media (max-width: 1023px) {
  .home-hero { height: 560px; }
  .home-hero__lede { font-size: 16px; }

  .space-grid { grid-template-columns: 1fr 1fr; }
  .space-grid__lead { grid-row: auto; aspect-ratio: 4 / 3; }
  .space-row { grid-template-columns: repeat(2, 1fr); }

  /* Stack the hotspot scene above its list */
  .getlook { grid-template-columns: 1fr; }
  .getlook__stage > img { min-height: 380px; }

  .cap-collage { gap: 12px; }
  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .trade-panel { grid-template-columns: 1fr; }
  .trade-panel__media { order: -1; }
  .trade-panel__media img { min-height: 300px; }
  .home-cta { height: 460px; }
}

@media (max-width: 767px) {
  .home-hero { height: auto; min-height: 82svh; }
  .home-hero__body {
    position: static;
    padding: 180px var(--gutter) 56px;
    max-width: none;
  }
  .home-hero__kicker { font-size: 11px; letter-spacing: .24em; margin-bottom: 14px; }
  .home-hero__lede { font-size: 15px; margin-top: 16px; }
  .home-hero__actions { margin-top: 28px; }

  .space-grid, .space-row { grid-template-columns: 1fr; gap: 20px; }
  .space-grid__lead, .space-grid__side { aspect-ratio: 3 / 2; }
  .space-row { margin-top: 20px; }

  .getlook__stage > img { min-height: 260px; }
  .getlook__dot { width: 26px; height: 26px; font-size: 10.5px; }
  .getlook__panel { padding: 26px 20px; }
  .getlook__row { font-size: 13.5px; }
  .getlook__actions { margin-top: 24px; padding-top: 20px; }

  .cap-collage { grid-template-columns: 1fr 1fr; }
  .cap-collage__lead { grid-row: 1 / 2; grid-column: 1 / 3; aspect-ratio: 3 / 2; }

  .made-visual .made__img { aspect-ratio: 3 / 2; min-height: 0; }
  .made-mats__strip img { width: 38px; height: 38px; }

  .trade-panel__text { padding: 32px 22px; }
  .trade-panel__text .h2 { font-size: 25px !important; }
  .trade-panel__cta { align-self: stretch; }
  .trade-panel__media img { min-height: 220px; }

  .home-cta { height: auto; padding: 72px 0; }
  .home-cta__body { padding: 0 var(--gutter); }
  .home-cta__lede { font-size: 15px; }
  .home-cta__lede br { display: none; }
  .home-cta__actions { margin-top: 28px; }
}


/* -------------------------------------------------------------------------
   Mobile floors — home
   -------------------------------------------------------------------------
   Micro-labels drawn for a 1280px artboard land at 9–10.5px on a phone, and
   the controls inherit hit areas well under the 44px a finger needs. Sizes
   are raised only below the phone breakpoint; the desktop composition is
   untouched.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .getlook__dot,
  .getlook__row-num,
  .getlook__row-code,
  .made-row__badge,
  .col-card__count   { font-size: 11px; }
}

/* -------------------------------------------------------------------------
   Hero rotation
   -------------------------------------------------------------------------
   Slides are stacked and cross-faded rather than slid: the headline stays put
   and only the room behind it changes, which reads as one hero showing
   different rooms rather than a slideshow of unrelated banners. Auto-advance
   stops on hover, on keyboard focus, and for anyone who has asked for reduced
   motion.
   ---------------------------------------------------------------------- */
.home-hero__stage { position: absolute; inset: 0; overflow: hidden; }

.home-hero__stage .home-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.home-hero__stage .home-hero__bg.is-on { opacity: 1; }

/* Which room this is, and a way into it. */
.home-hero__credit { position: relative; min-height: 34px; margin: 22px 0 4px; }
.home-hero__creditlink {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
  color: var(--cream);
  border-bottom: 1px solid rgba(245, 242, 234, .35);
  padding-bottom: 5px;
}
.home-hero__creditlink.is-on { opacity: 1; pointer-events: auto; }
.home-hero__creditlink:hover { border-bottom-color: var(--cream); }
.home-hero__creditroom { font-size: 10.5px; letter-spacing: .2em; opacity: .8; }
.home-hero__creditname { font-family: var(--serif); font-size: 15px; }

.home-hero__dots {
  position: absolute;
  right: var(--gutter);
  bottom: 30px;
  z-index: 3;
  display: flex;
  gap: 10px;
}
.home-hero__dot {
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(245, 242, 234, .35);
  cursor: pointer;
  transition: background .3s ease;
  /* The bar is 3px; the target around it is not. */
  position: relative;
}
.home-hero__dot::after { content: ''; position: absolute; inset: -14px -4px; }
.home-hero__dot.is-on { background: var(--cream); }
.home-hero__dot:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; }

@media (max-width: 767px) {
  .home-hero__credit { min-height: 30px; margin: 16px 0 2px; }
  .home-hero__creditname { font-size: 14px; }
  .home-hero__creditroom { font-size: 10px; }
  .home-hero__dots { bottom: 18px; gap: 8px; }
  .home-hero__dot { width: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__stage .home-hero__bg,
  .home-hero__creditlink { transition: none; }
}

/* -------------------------------------------------------------------------
   Featured piece
   -------------------------------------------------------------------------
   A full-bleed photograph against a single column of text. The grid below can
   show forty pieces; this says which one to look at first.
   ---------------------------------------------------------------------- */
.feat { padding: 0; overflow: hidden; }
.feat__inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
  gap: 0;
  max-width: none;
  padding: 0;
}
.feat__media { display: block; position: relative; min-height: 560px; }
.feat__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feat__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  padding: 72px clamp(32px, 6vw, 96px);
  background: var(--cream-alt);
}
/* Panel titles — the featured piece and the trade panel are the same kind of
   component, so they take the same size. They had drifted to 44 and 34. */
.feat__title,
.trade-panel__title {
  font-family: var(--serif);
  /* The floor sits well below the section heading's mobile size (27px). At a
     26px floor the two collapsed to the same size on a phone and the panel
     stopped reading as a level below the section it sits in. */
  font-size: clamp(21px, 3vw, 38px);
  line-height: 1.16;
  margin: 0;
}
.feat__lede { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--muted-dark); max-width: 46ch; }
.feat__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.feat__cta { margin-top: 8px; }

@media (max-width: 1023px) {
  .feat__inner { grid-template-columns: 1fr; }
  .feat__media { min-height: 420px; }
  .feat__body { padding: 44px 20px 52px; }
}
@media (max-width: 767px) {
  .feat__media { min-height: 340px; }
  .feat__lede { font-size: 14.5px; }
}

/* -------------------------------------------------------------------------
   The look
   -------------------------------------------------------------------------
   A photograph and the piece that is in it. The numbered list underneath is
   labelled as what completes the room, not as what is in the frame — the
   catalogue records one product per scene, and the panel says only that.
   ---------------------------------------------------------------------- */
.look { display: grid; grid-template-columns: 1.35fr 1fr; align-items: stretch; }
.look__shot { position: relative; min-height: 620px; overflow: hidden; }
.look__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.look__panel {
  background: var(--ink);
  color: var(--cream);
  padding: 56px clamp(28px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.eyebrow--onDark { color: var(--sand-light, #b8ae9c); }

/*
 * Every link on the dark panel needs its colour stated. The base rule paints
 * links with --ink, which on this ground is invisible — only the hovered row
 * showed, because hover was the one state that had been given a colour. The
 * footer links failed this way once already; a dark surface must always set
 * its own link colour.
 */
.look__panel a:not(.btn) { color: var(--cream); }
.look__panel a:not(.btn):hover { color: var(--terra); }

.look__hero { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.look__hero-name { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.look__hero-sku { font-size: 11px; letter-spacing: .16em; opacity: .65; font-variant-numeric: tabular-nums; }
.look__hero:hover .look__hero-name { color: var(--terra); }

.look__desc { margin: 0; font-size: 14.5px; line-height: 1.75; color: rgba(245, 242, 234, .78); max-width: 44ch; }
.look__meta { display: flex; gap: 8px; flex-wrap: wrap; }

.look__with { margin-top: 8px; border-top: 1px solid rgba(245, 242, 234, .16); padding-top: 20px; }
.look__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.look__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(245, 242, 234, .1);
}
/* The terracotta index sat at 4.26:1 on ink — a shade under AA for 11px, and
   these numbers are how the list is referred to. Lightened just enough. */
.look__n { font-size: 11px; letter-spacing: .12em; color: #c98d68; font-variant-numeric: tabular-nums; }
.look__link { font-size: 15px; }
.look__link:hover { color: var(--terra); }
.look__sku { font-size: 11px; letter-spacing: .14em; opacity: .5; font-variant-numeric: tabular-nums; }

.look__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

@media (max-width: 1023px) {
  .look { grid-template-columns: 1fr; }
  .look__shot { min-height: 420px; }
  .look__panel { padding: 40px 20px 48px; }
}
@media (max-width: 767px) {
  .look__shot { min-height: 320px; }
  .look__actions .btn { width: 100%; }
}

/* -------------------------------------------------------------------------
   Mobile home length
   -------------------------------------------------------------------------
   The page ran 22 screens on a phone. Two sections were 7 of them: five
   featured moods and five collections, each stacked one full-width card per
   row because the shared grid collapses to a single column below 767px. Five
   cards do not need five screens — they need one that swipes, which is how
   the product rails already behave, so the gesture is not a new thing to
   learn. The space tiles go two-up: they are wide, shallow and read fine at
   half width.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Featured moods and collections: swipe instead of stack. */
  .home-scenes__grid,
  .home-colls__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 10px;
    /* A flex row must be told it may shrink, or it pushes the page wider. */
    min-width: 0;
  }
  .home-scenes__grid > *,
  .home-colls__grid > * {
    flex: 0 0 74%;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Rooms: two to a row. */
  .space-grid,
  .space-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .space-grid__lead { grid-column: 1 / -1; }
  .space-grid .tile__cap--sm .tile__name { font-size: 15px; }
  .space-grid .tile__sub { font-size: 10px; letter-spacing: .12em; }
}

/* -------------------------------------------------------------------------
   Mobile touch and legibility, after the carousel and the tile grid
   -------------------------------------------------------------------------
   Both were introduced with this session's changes: the hero credit and its
   dots came in with the rotation, and the tile subtitle shrank when the rooms
   went two-up. A 27px link and a 31px dot are under a finger, and 10px is
   under the floor the rest of the site holds to.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .home-hero__creditlink { position: relative; }
  .home-hero__creditlink::after {
    content: '';
    position: absolute;
    inset: -9px -6px;
    background: transparent;
  }
  .home-hero__creditroom { font-size: 11px; }

  .home-hero__dot { height: 4px; }
  .home-hero__dot::after { inset: -18px -5px; }

  .space-grid .tile__sub { font-size: 11px; letter-spacing: .1em; }
}

@media (max-width: 767px) {
  /* The look panel's rows are 23–26px tall — the list is the point of the
     panel, so the hit areas are widened without moving the type. */
  .look__hero,
  .look__link { position: relative; }
  .look__hero::after,
  .look__link::after {
    content: '';
    position: absolute;
    inset: -10px -6px;
    background: transparent;
  }
}