/* ==========================================================================
   Habitus Concept, home
   ========================================================================== */

/* --- hero ----------------------------------------------------------------
   The film fills the entire first screen, header included: .hero is a full
   viewport section starting at the page's own y:0, the fixed header floats
   over it with a transparent bar (site-head's own default state), and only
   once the reader scrolls past the film does the header pick up its solid
   paper plate. Nothing here reserves room for the header, because nothing is
   meant to sit below it, the header is meant to sit on top of it.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100svh;
  min-height: 560px;
  background: #04151F;
  display: flex;
  align-items: flex-end;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-media video, .hero-media img {
  transition: transform 1.8s var(--ease), opacity 1.2s linear;
}
.js .hero-media video, .js .hero-media img { transform: scale(1.06); opacity: 0; }
.hero.ready .hero-media video, .hero.ready .hero-media img { transform: scale(1); opacity: 1; }

/* Two scrims, not one. The vertical ramp seats the baseline row; the
   horizontal one holds a dark column under the copy so the headline keeps its
   contrast wherever the film happens to be bright, and the right half of the
   frame stays open. The top edge also gets its own short fade, so the fixed
   header's reversed nav keeps its contrast over a bright opening frame. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(4, 12, 17, 0.82) 0%,
      rgba(4, 12, 17, 0.58) 30%,
      rgba(4, 12, 17, 0.16) 58%,
      rgba(4, 12, 17, 0.00) 78%),
    linear-gradient(to top,
      rgba(4, 12, 17, 0.86) 0%,
      rgba(4, 12, 17, 0.52) 24%,
      rgba(4, 12, 17, 0.10) 50%,
      rgba(4, 12, 17, 0.00) 70%),
    linear-gradient(to bottom,
      rgba(4, 12, 17, 0.50) 0%,
      rgba(4, 12, 17, 0.00) 14%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(24px, 4vw, 64px) var(--gut) clamp(32px, 5vh, 72px);
}

/* The two sentences are one thought, not two lines of equal weight: the first
   sets it up in a quieter tone, the second lands it in Eurostile Bold. Same
   family, so the emphasis is weight and colour rather than a second typeface,
   and the leading is tight enough that they read as a single block. */
.hero-head {
  /* sized so the longer sentence still lands on one line inside the card */
  font-size: clamp(1.55rem, 3.75vw, 3.45rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 34ch;
  margin: 0 0 clamp(26px, 3.2vw, 52px);
}

/* a hairline, then the sub and the call sit on one baseline row */
.hero-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 40px);
  padding-top: clamp(16px, 1.8vw, 26px);
  /* the floating WhatsApp button parks in this corner, so the row keeps clear
     of it rather than putting the call underneath it */
  padding-right: clamp(64px, 7vw, 96px);
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  transition: opacity 0.9s linear 0.8s, transform 0.9s var(--ease) 0.8s;
}
.js .hero-base { opacity: 0; transform: translateY(14px); }
.hero.ready .hero-base { opacity: 1; transform: none; }

.hero-sub {
  color: rgba(255, 255, 255, 0.90);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  max-width: 42ch;
  margin: 0;
}
.hero-btn { flex: none; }

/* word-by-word mount reveal */
.rise { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.rise > span {
  display: inline-block;
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rise > span { transform: translateY(112%); }
.hero.ready .rise > span { transform: translateY(0); }

/* Phones: still full bleed, still cover, per the same "fullscreen everywhere"
   call as desktop. Only the padding and stack direction change. */
@media (max-width: 700px) {
  .hero-inner { padding: clamp(22px, 6vw, 34px) var(--gut) clamp(28px, 8vh, 44px); }
  .hero-head { max-width: none; }
  .hero-base { flex-direction: column; align-items: flex-start; }
}

/* --- manifesto, in the Zenith Realty idiom --------------------------------
   Two panels. A full bleed statement over the film, then a twelve column
   header and a row of cards that fade up as they arrive.

   The film is washed rather than scrimmed. Zenith runs ink type over a bright
   video under a thin white veil; this film is dark, so getting to the same
   ink-on-light reading takes a heavy paper wash instead of a thin one. What
   survives is the movement, which is the point of putting a film there at all.
   -------------------------------------------------------------------------- */

.zen { background: var(--paper); }

.zen-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(74svh, 620px);
  padding-block: clamp(64px, 10vh, 120px);
}

.zen-media { position: absolute; inset: 0; z-index: 0; }
.zen-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* the wash, and a soft vignette so the grid's right column keeps its footing */
.zen-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(var(--paper-rgb), 0.95) 0%,
      rgba(var(--paper-rgb), 0.89) 46%,
      rgba(var(--paper-rgb), 0.78) 100%);
}

/* --- the twelve column statement ---------------------------------------- */

.zen-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.zen-head {
  grid-column: 1 / span 8;
  font-size: clamp(1.9rem, 4.4vw, 4.05rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0;
  /* the lines are explicit now, so nothing should be rebalanced across them */
  text-wrap: nowrap;
}

.zen-sub {
  grid-column: 9 / span 4;
  align-self: end;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
}

.zen-cta { grid-column: 1 / span 8; }

/* --- header and cards ---------------------------------------------------- */

.zen-work { padding-block: clamp(64px, 9vw, 128px); }

.zen-work-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  row-gap: clamp(18px, 2.4vw, 28px);
  align-items: end;
  margin-bottom: clamp(32px, 4.4vw, 64px);
}
.zen-work-h {
  grid-column: 1 / span 7;
  font-size: clamp(1.5rem, 3vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.016em;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.zen-work-sub {
  grid-column: 9 / span 4;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}

.zen-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 36px);
}

.zen-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
}

.zen-card-media {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 900 / 1164;      /* the photographs' own shape, so nothing mats */
  background: var(--paper-2);
}
.zen-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* the whole photograph, never cropped */
  transition: transform 0.7s var(--ease-io);
}
.zen-card:hover .zen-card-media img,
.zen-card:focus-visible .zen-card-media img { transform: scale(1.05); }

.zen-card-body { display: block; padding-top: clamp(14px, 1.4vw, 20px); }

.zen-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.zen-card-name {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.25;
  color: var(--ink);
}
.zen-card-fig {
  flex: none;
  font-family: var(--ui);
  font-size: var(--step-label);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.zen-card-rule {
  display: block;
  height: 1px;
  background: var(--rule);
  margin: clamp(10px, 1vw, 14px) 0;
}
.zen-card-loc {
  display: block;
  font-family: var(--ui);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.zen-card-line {
  display: block;
  margin-top: 0.45em;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .zen-head { grid-column: 1 / -1; }
  .zen-sub  { grid-column: 1 / -1; max-width: 46ch; }
  .zen-cta  { grid-column: 1 / -1; }
  .zen-work-h   { grid-column: 1 / -1; }
  .zen-work-sub { grid-column: 1 / -1; max-width: 52ch; }
  .zen-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* three into two leaves a hole, so the last card takes the empty half and
     runs as a wide row instead of sitting next to nothing */
  .zen-card:last-child { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); align-items: center; }
  .zen-card:last-child .zen-card-body { padding-top: 0; }
}

@media (max-width: 560px) {
  .zen-cards { grid-template-columns: 1fr; }
  .zen-card:last-child { grid-column: span 1; display: block; }
  .zen-card:last-child .zen-card-body { padding-top: clamp(14px, 1.4vw, 20px); }
  .zen-stage { min-height: 0; padding-block: clamp(56px, 10vh, 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .zen-card-media img { transition: none !important; }
  .zen-card:hover .zen-card-media img { transform: none; }
}

/* --- collections, as an index --------------------------------------------
   Was a scroll hijack: nine panels driven horizontally by vertical scroll,
   measured and moved from home.js. It is an index now, in the In Common With
   idiom on file in Website Styles & Motions/Styles.

   That board's identity is one ink carrying every word, border and link.
   Habitus already has that shape with a different ink, so the section is set
   in navy rather than the board's oxblood: names, rules and links all resolve
   to --navy, which is 12.5:1 on paper and clears the AAA floor the brand kit
   sets for a 40+ audience. No second accent, no filled control anywhere in the
   section, no radius and no shadow.

   Why this is not the project wall again: the wall is a dark packed grid with
   the credit laid over the photograph and tiles at three different sizes. This
   is light, uniform, hairline separated, and the words sit under the picture
   rather than on it. One is a wall, one is a contents page.
   -------------------------------------------------------------------------- */

.cols {
  background: var(--paper);
  padding-block: clamp(64px, 9vw, 128px);
  /* the space between one band of cards and the next, set in one place so the
     card's margin and the grid's negative margin below cannot drift apart */
  --col-band: clamp(40px, 5vw, 72px);
}

/* the margin label, the rule, and the line that runs under it */
.col-head {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) 3fr;
  column-gap: clamp(20px, 3vw, 48px);
  align-items: baseline;
  margin-bottom: clamp(32px, 4.4vw, 64px);
}
.col-label {
  grid-column: 1;
  font-family: var(--ui);
  font-size: var(--step-label);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--edit-ink);
  margin: 0;
}
.col-rule {
  grid-column: 2;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--edit-ink);
  align-self: center;
}
.col-intro {
  grid-column: 2;
  margin: 14px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  color: var(--ink-muted);
  max-width: 46ch;
}

/* The band separation is a margin on the card, not a row-gap on the grid.
   A row-gap here would be laid between every one of the card's five subgrid
   tracks as well as between the bands, which put 72px between the name, the
   category, the line and the link and left the section full of holes. Setting
   row-gap: 0 on the subgrid itself does not take it back in Chromium, so the
   grid carries no row gutter at all and the card spaces itself. */
.col-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 40px);
  row-gap: 0;
  /* takes back the last band's trailing margin, so the section's bottom
     padding matches its top */
  margin-bottom: calc(-1 * var(--col-band));
}

/* Subgrid, so every card in a row shares the same five baselines. Without it
   each card lays its own rows out and a two line description in one card
   pushes its rule out of step with its neighbours. On a contents page the
   alignment IS the design. */
.col-card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  /* No gutter between the five tracks: the internal rhythm is the margins
     below. The margin-bottom is what separates one band of cards from the
     next, and because the card spans all five rows it lands in the sizing of
     the last one, so the bands stay evenly apart. */
  row-gap: 0;
  margin-bottom: var(--col-band);
  text-decoration: none;
  color: inherit;
}
.col-grid { grid-auto-rows: auto; }

/* full bleed, no frame, no radius, no shadow */
.col-plate {
  position: relative;
  display: block;
  aspect-ratio: 900 / 1164;      /* the photographs' own shape */
  overflow: hidden;
  /* the matte is the page, not a panel: two of the nine photographs are 0.668
     rather than 0.773, and contain will not crop them, so what shows at their
     sides has to be the paper itself or it reads as a band */
  background: var(--paper);
  margin-bottom: 18px;
}
.col-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* the whole photograph, never cropped */
  transition: transform 0.8s var(--ease-io);
}

/* The crossfade. The printed page sits over the photograph in the same box,
   at zero, and comes up when the theme goes dark. Both are 0.773, so nothing
   shifts as one replaces the other. Timing and curve are the reference's own,
   4.5s on cubic-bezier(0.22, 1, 0.36, 1): slow enough that the toggle reads
   as a dissolve rather than a swap. */
/* Selector carries two classes on purpose. `.col-plate img` above is (0,1,1)
   and a bare `.col-night` is (0,1,0), so the element-qualified rule wins and
   the fade silently never runs, leaving only the 0.8s transform. */
.col-plate .col-night {
  opacity: 0;
  transition: transform 0.8s var(--ease-io),
              opacity 4.5s cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="dark"] .col-plate .col-night { opacity: 1; }

.col-card:hover .col-plate img,
.col-card:focus-visible .col-plate img { transform: scale(1.03); }

.col-name {
  font-size: clamp(1.15rem, 1.5vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--edit-ink);
}
/* the superscript is the catalog page, which is a real number, not a count
   invented to fill the shape the reference board uses one for */
.col-name sup {
  font-family: var(--ui);
  font-size: 0.44em;
  letter-spacing: 0.1em;
  margin-left: 0.35em;
  top: -0.75em;
  color: var(--ink-muted);
}

.col-cat {
  margin-top: 8px;
  font-family: var(--ui);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.col-line {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34ch;
}

/* the only control in the section, and it is a rule under a word */
.col-go {
  justify-self: start;
  margin-top: 18px;
  font-family: var(--ui);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--edit-ink);
  border-bottom: 1px solid var(--edit-ink);
  padding-bottom: 3px;
  transition: border-bottom-width 0.2s linear, color 0.25s linear;
}
.col-card:hover .col-go,
.col-card:focus-visible .col-go { border-bottom-width: 2px; }

.col-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }

/* Column count is chosen against the section's own height. Nine portrait
   cards one column wide runs past seven thousand pixels on a phone, and two
   columns still runs past four thousand at tablet width, because dropping a
   column makes every remaining card taller, not just narrower. Three holds to
   700px, two below that, never one. */
@media (max-width: 900px) {
  .col-head { grid-template-columns: 1fr; row-gap: 12px; }
  .col-label, .col-rule, .col-intro { grid-column: 1; }
  .col-intro { margin-top: 4px; }
}
@media (max-width: 700px) {
  .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .col-line { max-width: none; }
}
@media (max-width: 560px) {
  .cols { --col-band: clamp(28px, 7vw, 40px); }
  .col-grid { column-gap: 14px; }
  .col-plate { margin-bottom: 12px; }
  /* the label stays the same words site wide, so it is the type that gives */
  .col-go { font-size: 0.66rem; letter-spacing: 0.1em; }
  .col-cat { font-size: 0.66rem; letter-spacing: 0.1em; }
  .col-line { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .col-plate img { transition: none !important; }
  .col-card:hover .col-plate img { transform: none; }
  /* the dissolve becomes a cut; the two states still both exist */
  .col-plate .col-night { transition: none !important; }
}

/* --- split (partnership / digital) --------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.split--sand { background: var(--sand); }
.split--navy { background: var(--navy); color: var(--blue-soft); }
.split--navy h2 { color: #fff; }

.split-text {
  padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 34px);
  align-items: flex-start;
}
.split-media { position: relative; overflow: hidden; min-height: 62vh; }
.split-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;          /* the whole photograph, matted, never cropped */
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 62vw; order: -1; }
}

/* --- catalog invite ------------------------------------------------------ */

.invite {
  background: var(--paper-2);
  padding-block: var(--sec);
  overflow: hidden;
}
.invite-grid {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 46%);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.invite-text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.2vw, 30px); }

.facts { list-style: none; margin: 0; padding: 0; width: min(420px, 100%); }
.facts li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--step-label);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.facts li span:last-child { color: var(--ink-muted); }

/* fanning stack of catalog pages */
.fan {
  position: relative;
  aspect-ratio: 1 / 0.86;
  display: block;
  perspective: 1600px;
}
.fan img {
  position: absolute;
  top: 50%; left: 50%;
  width: 46%;
  height: auto;
  transform-origin: bottom left;
  box-shadow: 0 22px 50px rgba(10, 20, 28, 0.22);
  transition: transform 1s var(--ease), box-shadow 0.6s linear;
}
.fan img:nth-child(1) { transform: translate(-50%, -50%) rotate(-11deg) translateX(-10%); z-index: 1; }
.fan img:nth-child(2) { transform: translate(-50%, -50%) rotate(-4deg)  translateX(-3%);  z-index: 2; }
.fan img:nth-child(3) { transform: translate(-50%, -50%) rotate(2deg);                    z-index: 3; }
.fan img:nth-child(4) { transform: translate(-50%, -50%) rotate(8deg)   translateX(4%);   z-index: 4; }
.fan:hover img:nth-child(1) { transform: translate(-50%, -50%) rotate(-19deg) translateX(-24%) translateY(-2%); }
.fan:hover img:nth-child(2) { transform: translate(-50%, -50%) rotate(-8deg)  translateX(-10%); }
.fan:hover img:nth-child(3) { transform: translate(-50%, -50%) rotate(4deg)   translateX(4%); }
.fan:hover img:nth-child(4) { transform: translate(-50%, -50%) rotate(16deg)  translateX(18%) translateY(-2%); }

@media (max-width: 900px) {
  .invite-grid { grid-template-columns: 1fr; }
  .fan { order: -1; aspect-ratio: 1 / 0.8; }
}

/* --- showroom ------------------------------------------------------------ */

.showroom { padding-block: var(--sec); }
.show-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.92fr;
  grid-auto-rows: minmax(210px, auto);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-top: clamp(32px, 5vw, 64px);
}
.show-cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
}
.show-cell address { font-style: normal; line-height: 1.75; }
.show-cell--accent { background: var(--navy); color: var(--blue-soft); }
.show-cell--accent .label { color: var(--blue-soft); }
.show-cell--accent a { color: #fff; }
.show-cell--wide { grid-column: 1 / span 2; }

.show-cell--media {
  padding: 0;
  grid-column: 3;
  grid-row: 1 / span 2;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: var(--paper-2);
}
.show-cell--media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.show-cell .big { font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.5; }

/* the map sits in the address cell, under the address it belongs to. The whole
   frame is the link: pointer events are taken off the iframe so a click hands
   over to Google Maps proper rather than panning a postage stamp. */
.show-map {
  position: relative;
  display: block;
  margin-top: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  text-decoration: none;
}

.show-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  filter: grayscale(1) contrast(0.94);
  transition: filter 0.5s linear, transform 0.7s var(--ease-io);
}
.show-map:hover iframe,
.show-map:focus-visible iframe { filter: grayscale(0) contrast(1); transform: scale(1.03); }

/* The frame is a convenience click, the link under it is the real affordance:
   Google's embed paints its own "Open in Maps" chip inside the frame, so a
   second overlay on top of it was two labels saying one thing. */
.show-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 12px;
  font-family: var(--ui);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.show-map-link .arw { transition: transform 0.45s var(--ease); }
.show-map-link:hover .arw { transform: translateX(4px); }

:root[data-theme="dark"] .show-map iframe { filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.88); }
:root[data-theme="dark"] .show-map:hover iframe { filter: grayscale(0.4) invert(0.92) hue-rotate(180deg) contrast(0.92); }

@media (prefers-reduced-motion: reduce) {
  .show-map iframe { transition: none !important; }
  .show-map:hover iframe { transform: none; }
}
@media (max-width: 900px) {
  .show-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .show-cell--wide { grid-column: 1; }
  .show-cell--media {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 1100 / 1423;
    min-height: 0;
  }
}