/* ==========================================================================
   Dactyl Websites — Sydney Metro: the hero and "Around the city".

   Nothing new in the palette: linen, sand, ink and the one terracotta.
   The areas used to be a street-map film with a colour per area; this is
   the same information, quietly: a drawing of the city in hairlines, nine
   numbered points, and the list of areas beside it. Terracotta appears on
   the drawing for exactly one thing at a time, the area being read.

   Contrast, computed against the surface actually underneath:
     ink-3 #665e52 on sand #e9e3d8 ........ 4.97  (labels, readout)
     ink-2 #453f36 on sand ................ 8.97  (point numbers)
     accent-ink #a7471b on linen #f6f3ee .. 5.33  (active row numeral)
     accent-ink on sand ................... 4.62  (active readout)
   The active point is a graphic: accent #c2521f on sand is 3.64, over
   the 3:1 for a mark.

   Built for 375px first; widened at 820px, as the other guide pages are.
   ========================================================================== */

/* ------------------------------------------------------------ Hero */
.mh { padding-bottom: 0; }


.mh-grid { display: grid; gap: 1.8rem; }
.mh-title { font-size: clamp(3.3rem, 15.5vw, 9.4rem); line-height: .95; letter-spacing: -.04em; }
.mh-lead {
  margin: 0;
  max-width: 26em;
  font-size: clamp(1.08rem, 3.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* The photograph. The figure is the full width of the screen and the
   frame is clipped in to the page's margins with round corners; metro.js
   opens the clip out to the edges as the page moves, so it reads as the
   picture coming forward rather than a box growing. Without JS it stays
   inset, which is a finished layout in its own right. */
.mh-photo { margin: clamp(2.4rem, 6vw, 4.5rem) 0 0; }
.mh-photo__frame {
  --inset: var(--gutter);
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sand);
  clip-path: inset(0 var(--inset) round var(--r-xl));
}
.mh-photo__frame picture, .mh-photo__frame img { display: block; width: 100%; height: 100%; }
.mh-photo__frame img { object-fit: cover; object-position: 50% 50%; transform-origin: 50% 60%; will-change: transform; }
.mh-cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: max(12px, .7rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mh-cap span:last-child { display: none; }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  /* The title takes the whole measure; the lead sits in the space the
     short last line ("Sydney.") leaves beside it, on the same baseline
     band, so the two read as one composition rather than two columns. */
  .mh-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mh-title, .mh-aside { grid-area: 1 / 1; }
  .mh-title { font-size: clamp(5rem, 9.6vw, 9.6rem); }
  .mh-aside { justify-self: end; align-self: end; width: min(22rem, 34%); padding-bottom: 1.1rem; }
  .mh-photo__frame { aspect-ratio: auto; height: min(86svh, 54vw); }
  .mh-cap span:last-child { display: inline; }
}

/* ------------------------------------------------------------ Around the city */
.mx-head { display: grid; gap: 1rem; }
.mx-head .gd-p { margin: 0; }

.mx-grid { display: grid; gap: 2.2rem; margin-top: clamp(2rem, 5vw, 3.5rem); }

/* The drawing: a sand card, hairlines in ink at low strength. */
.mx-map {
  margin: 0;
  padding: 1rem 1rem 0;
  border-radius: var(--r-xl);
  background: var(--sand);
}
.mp { display: block; width: 100%; height: auto; overflow: hidden; border-radius: calc(var(--r-xl) - 1rem); }
.mp-axis { stroke: var(--hair-2); stroke-width: 1; }
.mp-ring { fill: none; stroke: rgba(20, 17, 13, .22); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mp-sea, .mp-north text, .mp-pt text {
  font-family: var(--mono);
  letter-spacing: .08em;
}
.mp-sea { font-size: 20px; letter-spacing: .3em; text-transform: uppercase; fill: var(--ink-3); }
.mp-north path { fill: var(--ink); }
.mp-north text { font-size: 20px; fill: var(--ink); }

.mp-dot { fill: var(--ink); transition: fill .4s var(--ease), transform .6s var(--glide); }
.mp-halo { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform: scale(.4); transition: opacity .4s var(--ease), transform .7s var(--glide); }
.mp-pt text { font-size: 24px; fill: var(--ink-2); transition: fill .4s var(--ease); }
.mp-pt.is-on .mp-dot { fill: var(--accent); transform: scale(1.25); }
.mp-pt.is-on .mp-halo { opacity: 1; transform: scale(1); }
.mp-pt.is-on text { fill: var(--accent-ink); }



/* Under the drawing, which area it is showing. */
.mx-read {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .25rem .9rem;
  margin: 1rem -1rem 0;
  padding: 1.05rem 1.4rem 1.2rem;
  border-top: 1px solid var(--hair-2);
}
.mx-read__n { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .14em; color: var(--accent-ink); }
.mx-read__name { font-family: var(--display); font-size: clamp(1.25rem, 4.6vw, 1.55rem); line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.mx-read__sub { grid-column: 2; min-height: 1.5em; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.mx-read > span { transition: opacity .25s var(--ease), transform .45s var(--glide); }
.mx-read.is-swap > span { opacity: 0; transform: translateY(6px); transition: none; }

/* The list: a ruled index of the areas, in two columns that read down,
   so the whole of it sits beside (or under) the drawing rather than
   running on for a screen and a half. On a phone the rows are the names
   alone, and the suburbs of the one lit show under the drawing. */
.mx-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 1.2rem;
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--ink);
}
.mx-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0 .5rem;
  padding: .85rem 0 .95rem;
  border-bottom: 1px solid var(--hair-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mx-n { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .12em; color: var(--ink-3); transition: color .4s var(--ease); }
.mx-body h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  transition: transform .6s var(--glide);
}
.mx-body h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.mx-body h3 a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
/* Phones: no underline. In a list of nine plain names, the one that is
   a link read as a stray mark rather than a link; it stays tappable. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .mx-body h3 a { text-decoration: none; }
}
.mx-body p { margin: .35rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.js .mx-body p { display: none; }

/* The row being read: its numeral warms, its name steps in, and a
   terracotta rule draws along its foot. */
.mx-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s var(--glide);
}
.mx-row.is-on::after { transform: scaleX(1); }
.mx-row.is-on .mx-n { color: var(--accent-ink); }
.mx-row.is-on h3 { transform: translateX(.35rem); }

/* Phones: the row being read is a terracotta band instead, the name and
   numeral in white on it. The band runs a little past the row on both
   sides and feathers out at its ends, so its edges fade into the page in
   the margins, clear of the words. The deep terracotta (accent-ink),
   so white holds about 5.3:1 where the words sit. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .mx-row::after { display: none; }
  .mx-row::before {
    content: "";
    position: absolute;
    inset: 0 -1.1rem;
    z-index: -1;
    background: linear-gradient(90deg, rgba(167, 71, 27, 0) 0%, rgba(167, 71, 27, .96) 9%, rgba(167, 71, 27, .96) 91%, rgba(167, 71, 27, 0) 100%);
    opacity: 0;
    transition: opacity .45s var(--ease);
    pointer-events: none;
  }
  .mx-row { isolation: isolate; }
  .mx-row .mx-body h3, .mx-row .mx-body h3 a { transition: color .45s var(--ease), transform .6s var(--glide); }
  .mx-row.is-on::before { opacity: 1; }
  .mx-row.is-on { border-bottom-color: transparent; }
  .mx-row.is-on .mx-n { color: rgba(255, 255, 255, .85); }
  .mx-row.is-on h3, .mx-row.is-on h3 a { color: #fff; }
  .mx-row.is-on h3 { transform: none; }
}

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .mx-head { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 5rem); }
  .mx-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 4.5vw, 4.5rem); align-items: start; }
  .mx-map { position: sticky; top: calc(var(--nav-h, 56px) + 1.5rem); padding: 1.2rem 1.2rem 0; }
  .mx-read { margin-inline: -1.2rem; padding-inline: 1.6rem; }
  .mp-sea { font-size: 14px; }
  .mp-north text { font-size: 15px; }
  .mp-pt text { font-size: 17px; }
  .mx-grid { align-items: center; }
  .mx-list { column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .mx-row { grid-template-columns: 2.4rem minmax(0, 1fr); padding: 1rem 0 1.1rem; }
  .js .mx-body p { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-row::after, .mx-row h3, .mp-dot, .mp-halo, .mx-read > span { transition: none; }
}

/* "Around the city" and "Big city, small studio": the most to read on the
   page, so the most room after each before the next begins. */
#areas.mx, #why { padding-bottom: clamp(9rem, 20vw, 13rem); }