/* THE /looks PAGE (looks-page.ts): a desk showcase per look, a gallery grid of every look; on a phone a list, then each look's
   world. Every colour and face is a homepage token. The showcase's idle motion is the showcase SVG's own groups (`.mv-<name>`). */
.lp {
  padding: 0 0 8px;
}

.lhead {
  margin: 20px var(--px) 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
@media (min-width: 760px) {
  .lhead {
    margin-top: 44px; /* the header used to carry 24px of its own below it */
  }
}
.lhead h1 {
  font: 700 44px / 48px var(--sans);
  letter-spacing: -1.1px;
}
.lp .sub {
  font: 400 18px / 24px var(--sans);
  color: var(--ink-secondary);
  letter-spacing: -0.2px;
  margin: 4px 0 0;
}
.chips {
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
}
.chip {
  border: 1px solid var(--canvas-border);
  background: transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font: 500 15px / 18px var(--sans);
  color: var(--ink-secondary);
  letter-spacing: -0.2px;
}
.chip:hover {
  border-color: var(--ink-detail);
}
.chip.on {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
}
.chip:focus-visible,
.tile:focus-visible,
.sopen:focus-visible,
.go:focus-visible,
.back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.strip.dim {
  opacity: 0.32;
}

.wbody h3 {
  font: 700 18px / 24px var(--sans);
}

/* a tab header, as the app draws it: caps line, title, the look's art on a rule */
.hd {
  position: relative;
  max-width: 393px;
  width: 100%;
  height: 97px;
  background: var(--canvas);
  overflow: hidden;
}
.hd .hcaps {
  position: absolute;
  left: 16px;
  top: 18px;
  font: 600 var(--text-caps-size) / var(--text-caps-leading) var(--mono);
  letter-spacing: var(--text-caps-tracking);
  color: var(--ink-muted);
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.hd .htitle {
  position: absolute;
  left: 16px;
  top: 42px;
  font: 700 28px / 32px var(--sans);
  letter-spacing: -0.6px;
  color: var(--ink);
}
.hd .hart {
  position: absolute;
  left: 16px;
  bottom: 0;
  width: calc(100% - 32px);
  height: auto;
  aspect-ratio: 361 / 75.4;
  display: block;
}
.hd .hrule {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
}
.hd.plain {
  height: 97px;
  border-bottom: 0;
}
.hd.plain .htitle {
  font: 300 34px / 40px var(--serif, "IBM Plex Serif", Georgia, serif);
  letter-spacing: -0.68px;
}
.hd.plain .hcaps {
  font-weight: 500;
}
.hd.plain .hrule {
  height: 1px;
  background: var(--canvas-border) !important;
}

.stks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 64px));
  gap: 8px;
  margin-top: 12px;
}
.stk {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: block;
}
.nost {
  font: 400 14px / 20px var(--sans);
  color: var(--ink-secondary);
  margin-top: 10px;
}
/* ---------- a phone: a list, then each look's world ---------- */
.lp-phone {
  display: none;
}
@media (max-width: 759px) {
  .lp-desk {
    display: none;
  }
  .lp-phone {
    display: block;
  }
  .lhead {
    margin-top: 32px;
    gap: 24px;
  }
  .lhead h1 {
    font: 700 32px / 36px var(--sans);
    letter-spacing: -0.8px;
  }
  .lp .sub {
    font-size: 16px;
    line-height: 22px;
    margin-top: 8px;
  }
  .chips {
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 0 16px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar {
    display: none;
  }
  .chip {
    padding: 7px 14px;
    font-size: 14px;
    white-space: nowrap;
  }
}
/* the list: each look a rounded card, its art inset at the top, the name and mood under it; the whole card taps */
.strips {
  margin: 32px 16px 0;
  display: grid;
  gap: 16px;
}
.strip {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 8px 16px;
  border: 1px solid var(--canvas-border);
  border-radius: 22px;
  background: var(--canvas);
  box-shadow: 0 10px 24px -18px rgba(40, 36, 30, 0.35);
  text-align: left;
  overflow: hidden;
  transition: opacity 0.2s;
}
.sopen {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 15px;
}
.sopen:focus-visible {
  outline-offset: 4px;
}
.sacts {
  padding: 0 8px;
}
.spic {
  position: relative;
  display: block;
  height: 172px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--fill);
}
.spic img {
  position: absolute;
  display: block;
  max-width: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.spic img.shots {
  object-position: 50% 0;
}
.slab {
  display: grid;
  padding: 14px 8px 0;
}
.sname {
  font: 700 22px / 26px var(--sans);
  letter-spacing: -0.5px;
}
.smood {
  font: 400 14px / 18px var(--sans);
  color: var(--ink-secondary);
}
.lp .pfoot {
  margin: 56px 16px 8px;
  text-align: center;
  font: 500 17px / 24px var(--sans);
  color: var(--ink-secondary);
  letter-spacing: -0.2px;
}

/* the world: full screen over the list */
.pworld {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--canvas);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s 0.45s;
  overflow: hidden;
}
.pworld.open {
  transform: none;
  visibility: visible;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}
.pworld[hidden] {
  display: block;
}
.wtop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px 0 8px;
  pointer-events: none;
}
.back {
  pointer-events: auto;
  border: 0;
  background: var(--canvas);
  border-radius: 999px;
  padding: 8px 14px;
  font: 500 15px var(--sans);
}
.wpos {
  pointer-events: auto;
  background: var(--canvas);
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 11px / 14px var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}
.wtrack {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.world {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.world::-webkit-scrollbar {
  display: none;
}
.wscene {
  position: relative;
  aspect-ratio: 393 / 260;
  overflow: hidden;
  touch-action: pan-y;
  background: var(--fill);
}
.wscene img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  position: absolute;
  display: block;
  max-width: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.wscene img.shots {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.wbody {
  padding: 18px 16px 32px;
}
.wbody h2 {
  font: 700 34px / 38px var(--sans);
  letter-spacing: -0.9px;
  margin-top: 2px;
}
.wbody .moodline {
  margin-top: 4px;
}
.wbody h3 {
  margin-top: 26px;
}
.hrow {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 10px -16px 0;
  scrollbar-width: none;
}
.hrow::-webkit-scrollbar {
  display: none;
}
.hrow .hd {
  flex: 0 0 min(100%, 393px);
  scroll-snap-align: start;
}
.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}
.dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--faint);
}
.dots i.on {
  background: var(--ink);
}
.wacts {
  margin-top: 28px;
  display: grid;
  gap: 14px;
  justify-items: center;
}

body.lp-locked {
  overflow: hidden;
}

@media (max-width: 1099px) and (min-width: 760px) {
  .lhead h1 {
    font-size: 38px;
    line-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pworld,
  .wtrack,
  .tpic,
  .tpic img {
    transition: none !important;
  }
}

/* ROUND 7 (SPEC 36-39) */
/* ---------- the plate: name, mood, two same-size buttons, the sample under them ---------- */
.lp .plate {
  /* a fixed width, about the live plate's: the showcases keep their left corner for it (the hero stands right of it). A long mood
     line wraps to two lines rather than widening the card over the art. */
  box-sizing: border-box;
  width: 320px;
  max-width: none;
  padding: 16px 20px 14px;
  gap: 2px;
}
.lp .plate .moodline {
  font-size: 15px;
  line-height: 20px;
}
.lp .plate .acts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.lp .plate .acts .go {
  margin: 0;
  justify-self: stretch;
  justify-content: center;
  height: 46px;
  padding: 0 6px;
  font: 500 14.5px var(--sans);
  letter-spacing: -0.25px;
}
.samp {
  font: 400 13px / 18px var(--sans);
  color: var(--ink-muted);
  letter-spacing: -0.1px;
  margin-top: 10px !important;
}
.samp b {
  font-weight: 500;
  color: var(--ink-secondary);
}

/* ---------- the gallery: equal tiles, 4 across at 1440, rows grow as looks are added ---------- */
.gal {
  margin: 40px var(--px) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 24px;
}
@media (max-width: 1099px) {
  .gal {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tile {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  outline: none;
}
.tile[hidden] {
  display: none;
}
.tpic {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
  background: var(--fill);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.15s ease, transform 0.3s ease;
}
.tpic img {
  position: absolute;
  display: block;
  max-width: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transform-origin: 55% 100%;
  transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tpic img.shots {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.tpic.shotsbox {
  background: var(--canvas);
}
.tpic.shotsbox::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--canvas-border);
  pointer-events: none;
}
/* hover: the picture lifts a little and its art drifts in, slowly, as if the camera leaned closer */
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tpic {
    transform: translateY(-3px);
  }
  .tile:hover .tpic img {
    transform: scale(1.07) translateX(-1.5%);
  }
}
.tname {
  font: 600 18px / 23px var(--sans);
  letter-spacing: -0.3px;
  margin-top: 12px;
}
.tmood {
  font: 400 14px / 20px var(--sans);
  color: var(--ink-secondary);
  letter-spacing: -0.1px;
  margin-top: 2px;
}
/* the selected tile: the same single ring the rail wore, on the picture only */
.tile.on .tpic {
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--ink);
}
.tile:focus-visible .tpic {
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--accent);
}
.tile.on:focus-visible .tpic {
  box-shadow: 0 0 0 3px var(--canvas), 0 0 0 5px var(--ink);
}
.gfoot {
  margin: 64px var(--px) 24px !important;
  text-align: center;
  font: 500 17px / 24px var(--sans);
  color: var(--ink-secondary);
  letter-spacing: -0.2px;
}

/* ---------- the phone: the same pair, stacked, on each card and in each look's world ---------- */
.acts.stack {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.lp .acts.stack .go {
  width: 100%;
  height: 48px;
  justify-content: center;
  font-size: 16px;
  margin: 0;
}
.sacts .samp,
.wacts .samp {
  margin-top: 8px !important;
  text-align: center;
}
.wacts {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover .tpic,
  .tile:hover .tpic img {
    transform: none !important;
  }
}