/* Hallmark · v2.0.0 · theme: custom (direction dealt by tasteskill v2: uneven-photographs, seed 555713274) · idea: "šest nemovitostí na časové ose v reálném měřítku, každá doložená vlastním výkresem" · vibe: "tichý, tmavý, výkresový, přesný" · paper: dark green-black · accent: pale jade, primary action only · faces: Archivo (display + body, wide cut for the wordmark) · posture: restrained · axes: dark/grotesk-regular/chromatic-jade · hero: the brand's three triangles at monumental scale, flying in to form the mark and drifting apart on scroll, headline ("Portfolio nemovitostí", then the company name) two lines across the full width, the sentence beside the mark · job: inform, contact beside the map at the end · signature: the mark as architecture, an owner's portfolio rather than a broker's listing · map: ČÚZK MCR1M with five pins · nav: letterhead name left, comma links right · footer: bone curtain, columns over fitted wordmark */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, the claim is a record not an argument; carried it by setting the axis to real time so the 2013 to 2023 gap shows */
/* Hallmark · dismissed 58 · the hero line lists the six property types the owner gave word for word; the hero's action is a quiet link down to the portfolio */

:root {
  /* colour */
  --bg: #161c1a;
  --surface: #1f2725;
  --surface-2: #27302d;
  --ink: #e3e2da;
  --muted: #a3a9a2;
  --accent: #9fc7b8;
  --accent-strong: #b8d8cc;
  --accent-ink: #161c1a;
  --focus: #9fc7b8;
  --scrim: rgb(14 18 17 / 0.7);
  --scrim-0: rgb(14 18 17 / 0);
  --logo-1: #a9aaab;
  --logo-2: #707171;
  --logo-3: #e3e2da;
  --footer-bg: #e3e2da;
  --footer-ink: #161c1a;
  --footer-muted: #4a524e;

  /* type */
  --font: "Archivo", system-ui, sans-serif;
  --step-small: 1rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.75rem, 4.6vw, 4.5rem);

  /* space */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;
  --space-5xl: 200px;
  --margin: clamp(16px, 6vw, 96px);
  --gutter: clamp(12px, 1.6vw, 24px);
  --container: 1440px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-fade: 1600ms;

  --z-raised: 10;
  --z-sticky: 200;
  --z-nav: 300;
  --z-modal: 400;
  color-scheme: dark;
}

/* base */
main, .hero { position: relative; z-index: 1; background: var(--bg); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-xl); }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* links and buttons */
.link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--muted);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.link:active { color: var(--muted); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 var(--step-small)/1 var(--font);
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
  .button:hover { background: var(--accent-strong); }
}

/* logo */
.mark { display: block; width: 44px; height: auto; aspect-ratio: 574 / 339; flex-shrink: 0; }

/* ------------------------------------------------ hero: the mark, monumental */
.hero {
  position: relative;
  display: grid;
  color: var(--ink);
  isolation: isolate;
  overflow: clip;
}
.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  font-size: var(--step-small);
  line-height: 1.25;
}
.brand span { display: block; }
.nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--space-xs); font-size: var(--step-small); }
.nav li:not(:last-child)::after { content: ","; }
.nav a { padding-block: var(--space-xs); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
.nav a[aria-current="true"] { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { text-decoration-color: currentColor; } }

.hero { min-height: 100svh; grid-template-rows: auto 1fr; }
.hero__main {
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: var(--space-xl);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
/* the brand's three triangles, set at the scale of a building */
.monument {
  grid-column: 5 / -1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  display: block;
  width: min(58vw, max(280px, calc((100svh - 470px) * 1.693)));
  max-width: 100%;
  height: auto;
  aspect-ratio: 574 / 339;
  overflow: visible;
}
.tri, .tri__move { transform-box: fill-box; transform-origin: 50% 50%; }
.hero h1 {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: clamp(2.5rem, 6.8vw, 6.25rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.hero h1 .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .line > span { display: block; white-space: nowrap; }
.hero__act { grid-column: 1 / span 4; grid-row: 1; align-self: end; display: grid; gap: var(--space-md); justify-items: start; }
.hero__act p { max-width: 30ch; }

.route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.route path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ------------------------------------------------ timeline */
.timeline { padding-top: var(--space-2xl); }
.timeline__body { align-items: start; }

.axis {
  grid-column: 1 / span 3;
  position: sticky;
  top: var(--space-xl);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-lg);
  height: calc(100svh - var(--space-3xl));
  max-height: 760px;
}
.axis__track {
  position: relative;
  margin-left: var(--space-lg);
  width: 3px;
  height: 100%;
  background: var(--surface-2);
}
.axis__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
}
.axis__tick {
  position: absolute;
  left: 50%;
  top: var(--y);
  width: 44px;
  height: 44px;
  margin: 0;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
}
.axis__tick::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--surface-2);
  transform: rotate(45deg);
  transition: background-color var(--t-hover) ease, transform var(--t-ui) var(--ease-out);
}
.axis__tick[aria-current="true"]::before { background: var(--ink); transform: rotate(45deg) scale(1.35); }
.axis__now { display: grid; align-content: start; gap: var(--space-sm); min-width: 0; }
.axis__lat { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }
.axis__place { font-size: var(--step-small); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .axis__tick:hover::before { background: var(--muted); } }

.entries { grid-column: 5 / -1; display: grid; row-gap: clamp(var(--space-2xl), 16vh, 180px); padding-bottom: var(--space-4xl); }
.entry { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; scroll-margin-top: var(--space-xl); }
.entry__pic { margin: 0; }
.entry__pic button, .frame button {
  display: block; width: 100%; padding: 0; border: 0; background: var(--surface); cursor: zoom-in; color: inherit; font: inherit; text-align: left;
}
.entry__pic img { width: 100%; height: auto; aspect-ratio: var(--ratio); object-fit: contain; background: var(--bg); transition: transform var(--t-ui) var(--ease-out); }
.entry__pic figcaption { margin-top: var(--space-xs); font-size: var(--step-small); color: var(--muted); }
.entry__text { display: grid; gap: var(--space-md); align-content: start; }
.entry__year { font-size: var(--step-small); color: var(--muted); }
.entry h3 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); }
.entry__what { font-size: var(--step-lead); line-height: 1.3; }
.entry__note { max-width: 40ch; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); font-size: 1rem; margin-top: var(--space-xs); }
.facts dt { color: var(--muted); }
.facts dd { font-variant-numeric: tabular-nums; }

/* three placements, repeating */
.entry--left .entry__pic { grid-column: 1 / span 5; }
.entry--left .entry__text { grid-column: 6 / span 3; padding-top: var(--space-2xl); }
.entry--right .entry__text { grid-column: 1 / span 4; grid-row: 1; padding-top: var(--space-xl); }
.entry--right .entry__pic { grid-column: 6 / span 3; grid-row: 1; }
.entry--inset .entry__pic { grid-column: 2 / span 7; }
.entry--inset .entry__text { grid-column: 2 / span 5; grid-row: 2; margin-top: var(--space-lg); }

.entry__pic button, .frame button { transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .entry__pic button:hover, .frame button:hover { transform: translateY(-3px); }
}
.entry__pic button:active, .frame button:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) { .entry__pic button, .frame button { transition: none; } }

/* ------------------------------------------------ showcase: Neratovice frame run */
.showcase { padding-top: var(--space-5xl); }
.showcase__side { grid-column: 1 / span 3; display: grid; align-content: space-between; gap: var(--space-xl); }
.showcase__side h2 { font-size: var(--step-head); }
.showcase__side .notes { display: grid; gap: var(--space-lg); font-size: 1rem; color: var(--ink); max-width: 32ch; }
.showcase__side .notes strong { color: var(--ink); font-weight: 600; }
.run {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2.59fr) minmax(0, 0.691fr) minmax(0, 1.506fr);
  align-items: end;
  gap: var(--space-xs);
}
.frame { display: grid; gap: var(--space-xs); min-width: 0; align-self: end; }
.clip { display: block; overflow: clip; position: relative; }
.frame img { width: 100%; height: auto; transition: transform var(--t-ui) var(--ease-out); }
.frame figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-md); font-size: 0.9375rem; }
.frame figcaption span:last-child { color: var(--muted); }
.overlay { display: block; position: relative; }
.fp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fp polygon { fill: none; stroke: var(--ink); stroke-width: 4; vector-effect: non-scaling-stroke; }
.fp text { fill: var(--ink); font: 600 26px var(--font); }

/* ------------------------------------------------ about */
.about { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.about__text { grid-column: 1 / span 5; grid-row: 1; display: grid; align-content: space-between; gap: var(--space-2xl); }
.about__head { display: grid; gap: var(--space-lg); }
.about__head h2 { font-size: clamp(2.5rem, 4vw, 3.75rem); }
.about__head p { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.4; max-width: 46ch; }
.map { grid-column: 7 / -1; grid-row: 1; align-self: start; position: relative; }
.map img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  translate: -7px calc(-50% + var(--dy, 0px));
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.pin::before { content: ""; flex: none; width: 10px; height: 10px; margin: var(--space-3xs); background: var(--ink); transform: rotate(45deg); }
.pin > span { padding: var(--space-2xs) var(--space-xs); background: var(--bg); }
.pin__year { color: var(--muted); }
.pin--left { flex-direction: row-reverse; translate: calc(-100% + 7px) calc(-50% + var(--dy, 0px)); }

/* ------------------------------------------------ contact */
.contact { display: grid; gap: var(--space-md); justify-items: start; }
.contact__say { font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.01em; max-width: 24ch; }
.contact__mail { font-size: 1.125rem; }
.contact .button { margin-top: var(--space-xs); }

/* ------------------------------------------------ footer curtain */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  min-height: 100svh;
  background: var(--footer-bg);
  color: var(--footer-ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
  --logo-3: var(--footer-ink);
  --focus: var(--footer-ink);
}
.footer .grid { row-gap: var(--space-xl); }
.footer__col { grid-column: span 3; display: grid; gap: var(--space-2xs); align-content: start; font-size: 1rem; }
.footer__col > :first-child { font-weight: 600; }
.footer__col li, .footer__col p { color: var(--footer-muted); }
.footer__col a { color: var(--footer-ink); }
.footer__word { padding-top: var(--space-2xl); }
.footer__word svg { display: block; width: 100%; height: auto; }
.footer__word text { fill: var(--footer-ink); font-family: var(--font); font-weight: 300; font-stretch: 125%; }
.footer__word .footer__mark { width: clamp(72px, 9vw, 132px); margin-bottom: var(--space-lg); }
.footer__legal { margin-top: 20px; font-size: var(--step-small); color: var(--footer-muted); max-width: 75ch; }

/* ------------------------------------------------ plan viewer */
.viewer {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--ink);
}
.viewer::backdrop { background: var(--bg); }
.viewer[open] { display: grid; grid-template-rows: auto 1fr; }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--margin); }
.viewer__title { font-size: 1rem; }
.viewer__tools { display: flex; gap: var(--space-xs); }
.tool {
  min-width: 48px; min-height: 48px; padding: 0 var(--space-md); border: 0; background: var(--surface-2); color: var(--ink);
  font: 600 1rem/1 var(--font); cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.tool:active { transform: scale(0.96); }
.tool:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .tool:hover { background: var(--surface); } }
.viewer__stage { overflow: hidden; touch-action: none; cursor: grab; display: grid; place-items: center; }
.viewer__stage:active { cursor: grabbing; }
.viewer__stage img { max-width: 92vw; max-height: 82svh; width: auto; height: auto; transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--z, 1)); transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; }

/* ------------------------------------------------ motion: entrances only under .js and no reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 .line > span { transform: translateY(105%); animation: rise 1000ms var(--ease-expo) forwards; animation-delay: calc(620ms + var(--i) * 110ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: lift 600ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1100ms var(--ease-out), transform 1400ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 140ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-shutter] .clip { clip-path: inset(0 0 100% 0); transition: clip-path 1600ms var(--ease-in-out), transform var(--t-ui) var(--ease-out); }
  .js [data-shutter] .clip img { transform: scale(1.06); transition: transform 2200ms var(--ease-soft); }
  .js [data-shutter].is-in .clip { clip-path: inset(0); }
  .js [data-shutter].is-in .clip img { transform: none; }
  /* portfolio entries: progress comes from the scroll position (--p, 0 to 1, set by site.js) */
  .js .scrub[data-reveal] { opacity: var(--p, 0); transform: translateY(calc((1 - var(--p, 0)) * 56px)); transition: opacity 140ms linear, transform 140ms linear; }
  .js .scrub[data-shutter] .clip { clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); transition: clip-path 140ms linear, transform var(--t-ui) var(--ease-out); }
  .js .scrub[data-shutter] .clip > img, .js .scrub[data-shutter] .clip > .overlay { transform: scale(calc(1.12 - var(--p, 0) * 0.12)); transition: transform 140ms linear; }
  .js .scrub[data-shutter] .overlay img { transform: none; }
  .axis__fill { transition: transform 600ms var(--ease-out); }

  /* hero: the three triangles fly in from three sides and lock into the mark */
  .js .tri { animation: assemble 1700ms var(--ease-expo) both; animation-delay: calc(120ms + var(--i) * 150ms); }
  /* map: the route of purchases draws in order, pins land as it reaches them */
  .js .map .route path { stroke-dashoffset: 1; transition: stroke-dashoffset 5000ms linear 900ms; }
  .js .map.is-in .route path { stroke-dashoffset: 0; }
  .js .map .pin { opacity: 0; transition: opacity 600ms var(--ease-out); transition-delay: var(--t); }
  .js .map .pin::before { transform: rotate(45deg) scale(0); transition: transform 700ms var(--ease-expo); transition-delay: var(--t); }
  .js .map.is-in .pin { opacity: 1; }
  .js .map.is-in .pin::before { transform: rotate(45deg) scale(1); }
  /* time axis: the year rolls when the entry changes */
  .axis__lat.roll, .axis__place.roll { animation: roll 560ms var(--ease-expo); }
}
@keyframes rise { to { transform: none; } }
@keyframes lift { to { opacity: 1; transform: none; } }
@keyframes assemble { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.55); } }
@keyframes roll { from { opacity: 0; transform: translateY(45%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .axis__fill { transform: none; }
}

/* ------------------------------------------------ tablet */
@media (max-width: 1024px) {
  .hero__main { grid-template-rows: minmax(0, 1fr) auto auto; }
  .monument { grid-column: 1 / -1; width: min(86vw, max(260px, calc((100svh - 480px) * 1.693))); }
  .hero__act { grid-column: 1 / span 8; grid-row: 3; }
  .axis { grid-column: 1 / span 4; }
  .entries { grid-column: 5 / -1; }
  .entry--left .entry__pic, .entry--inset .entry__pic { grid-column: 1 / -1; }
  .entry--left .entry__text, .entry--inset .entry__text { grid-column: 1 / span 6; grid-row: 2; padding-top: 0; margin-top: var(--space-lg); }
  .entry--right .entry__text { grid-column: 1 / -1; grid-row: 2; padding-top: 0; margin-top: var(--space-lg); }
  .entry--right .entry__pic { grid-column: 3 / -1; }
  .about__text { grid-column: 1 / -1; }
  .map { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-2xl); }
}

/* ------------------------------------------------ phone */
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero__top { padding-top: var(--space-md); }
  .brand { font-size: 0.8125rem; }
  .nav li:not(.keep) { display: none; }
  .nav li.keep::after { content: none; }
  .monument { justify-self: center; width: 100%; }
  .hero__main { row-gap: var(--space-lg); padding-bottom: var(--space-lg); }
  .hero h1 { font-size: 7.3vw; }
  .hero__act { grid-column: 1 / -1; }


  .axis {
    grid-column: 1 / -1; top: 0; z-index: var(--z-sticky); height: auto; max-height: none;
    grid-template-columns: minmax(0, 1fr); background: var(--bg); padding-block: var(--space-sm);
  }
  .axis__track { display: none; }
  .axis__now { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-md); }
  .axis__lat { font-size: 1.75rem; }
  .entries { grid-column: 1 / -1; row-gap: 88px; margin-top: var(--space-xl); }
  .entry { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .entry--left .entry__pic { grid-column: 1 / -1; }
  .entry--right .entry__pic { grid-column: 2 / -1; }
  .entry--inset .entry__pic { grid-column: 1 / span 5; }
  .entry .entry__text { grid-column: 1 / -1 !important; }

  .showcase__side { grid-column: 1 / -1; margin-bottom: var(--space-xl); }
  .run { grid-column: 1 / -1; grid-template-columns: minmax(0, 0.691fr) minmax(0, 1.506fr); row-gap: var(--space-lg); }
  .frame--lift { grid-column: 1 / -1; }


  .about__head h2 { font-size: 9vw; }
  .about__text { gap: var(--space-xl); }
  .map { margin-top: var(--space-xl); }
  .pin { font-size: 0.8125rem; translate: -7px calc(-50% + var(--dy, 0px)); }
  .pin--left { translate: calc(-100% + 7px) calc(-50% + var(--dy, 0px)); }



  .footer__col { grid-column: span 3; }
}