:root {
  --bg: #fff;
  --fg: #101010;
  --muted: #a8a8a8;
  --muted-2: #777;
  --header-h: 100px;
  --rail-w: 240px;
  --pad-x: 56px;
  --home-gap: 1px;
  --home-left: 42px;
  --home-width: calc(100vw - 84px);
  --home-height: min(54vw, calc(100vh - 152px));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.38;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font: inherit;
}

.site-header {
  height: var(--header-h);
  padding: 22px var(--pad-x) 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: #fff;
}

.identity,
.media-nav {
  font-size: 18.5px;
  font-weight: 500;
}

.identity {
  line-height: 1.08;
  flex: 0 0 auto;
}

.identity .cn {
  display: block;
  margin-top: 5px;
}

.media-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0 24px;
  line-height: 1.1;
}

.media-nav .exhibitions-link {
  margin-left: 38px;
}

.language-switch {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 20px;
  font-size: 15px;
  font-weight: 500;
}

.language-switch button {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.language-switch button:not(.active) {
  color: var(--muted-2);
}

.identity:hover,
.media-nav a:hover {
  opacity: .55;
}

.media-nav a.active {
  color: var(--fg);
  opacity: 1;
}

#page-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h));
}

#page-shell.home-mode,
#page-shell.contact-mode {
  display: block;
}

.rail {
  padding: 14px 18px 50px var(--pad-x);
  min-width: 0;
}

.rail:empty { display: none; }

.category-index {
  position: sticky;
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding-right: 8px;
}

.category-name {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.project-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.project-link .year {
  flex: 0 0 60px;
  display: block;
  color: inherit;
  line-height: 1.18;
}

.project-link > span:last-child,
.project-link > .project-link-title {
  display: block;
  flex: 1 1 auto;
  line-height: 1.18;
}

.project-link.active {
  color: var(--fg);
}

.project-link:hover {
  color: #555;
}

.content {
  min-width: 0;
  padding: 14px var(--pad-x) 58px 0;
}

.content.work-mode {
  padding: 14px var(--pad-x) 58px var(--pad-x);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.home-mode .content {
  padding: 0 0 12px;
}

.home-carousel-wrap {
  width: var(--home-width);
  margin-left: var(--home-left);
  padding-top: var(--home-gap);
}

.home-carousel {
  position: relative;
  width: 100%;
  height: var(--home-height);
  overflow: hidden;
  background: #000;
}

.home-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.home-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.home-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: #000;
  user-select: none;
  -webkit-user-drag: none;
}

.home-caption {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 4;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
  pointer-events: none;
}

.image-half {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 7;
  width: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.image-half.prev { left: 0; cursor: w-resize; }
.image-half.next { right: 0; cursor: e-resize; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 6px;
  margin-bottom: 12px;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border: 1px solid #777;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.carousel-dot.active { background: #777; }

.film-shell,
.album-shell,
.comic-shell,
.photo-shell {
  width: min(820px, calc(100% - 140px));
  margin: 0 auto;
}

.film-title,
.photo-title,
.album-title,
.comic-title {
  margin: 0 0 9px;
  font-size: 31px;
  line-height: 1.12;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.film-meta,
.photo-meta,
.album-meta,
.comic-meta {
  margin-bottom: 46px;
  color: var(--fg);
  font-size: 16.5px;
  font-weight: 500;
  text-align: center;
}

.film-copy {
  width: 100%;
  margin: 0 auto 68px;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  line-height: 1.52;
}

.film-copy p { margin: 0 0 1.08em; }

.film-stills,
.photo-series,
.comic-pages {
  width: 100%;
  margin-top: 0;
}

.film-credit {
  margin: -32px auto 46px;
  width: 100%;
  text-align: center;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.35;
}

.film-stills {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.film-still-row {
  width: 100%;
}

.film-still-row.single img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.film-still-row.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.film-still-row.pair img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.comic-pages img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto var(--comic-gap, 1%);
}

.comic-pages img:last-child {
  margin-bottom: 0;
}

.photo-carousel-wrap {
  width: 100%;
}

.photo-carousel {
  position: relative;
  width: 100%;
  height: min(76vh, 860px);
  overflow: hidden;
}

.photo-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.photo-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.photo-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}


.album-shell { width: min(560px, calc(100% - 150px)); }

.album-header,
.comic-header {
  margin-bottom: 48px;
  text-align: center;
}

.album-title { margin: 0 0 10px; }



.album-cover {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 24px;
}

.tracklist {
  width: 100%;
  margin: 0 0 30px;
  font-family: "Times New Roman", Times, serif;
  font-size: 13.5px;
  line-height: 1.4;
}

.track {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 42px;
  gap: 7px;
  padding: 4px 0;
}

.track-no,
.track-duration {
  color: var(--muted-2);
}

.track-duration {
  text-align: right;
  white-space: nowrap;
}

.album-copy {
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1.55;
}

.album-copy p { margin: 0 0 1em; }

.comic-shell { width: min(760px, calc(100% - 150px)); }

.comic-title { margin: 0 0 10px; }

.writing-shell {
  width: min(610px, calc(100% - 110px));
  margin: 0 auto;
  text-align: center;
}

.writing-cover {
  display: block;
  width: min(400px, 100%);
  height: auto;
  margin: 0 auto 30px;
}

.writing-title {
  margin: 0 0 9px;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.28;
}

.writing-meta,
.writing-copy {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  line-height: 1.48;
}

.writing-meta {
  margin-bottom: 24px;
  color: var(--muted-2);
}

.paper-link {
  display: inline-block;
  margin-top: 8px;
  border-bottom: 1px solid currentColor;
}

.empty-category {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  color: var(--muted-2);
}

.contact-mode .content {
  min-height: calc(100vh - var(--header-h));
  padding: 22px var(--pad-x) 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-page {
  width: min(920px, 100%);
  margin: 0 auto;
}

.contact-links {
  margin-bottom: 52px;
  text-align: center;
}

.contact-links p {
  margin: 0 0 10px;
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.45;
}

.contact-page a {
  border-bottom: 1px solid currentColor;
}

.artist-profile {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

.artist-portrait-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #eee;
}

.artist-portrait {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 38%;
}

.artist-bio {
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.62;
  max-width: 560px;
}

@media (max-width: 980px) {
  :root {
    --header-h: 126px;
    --pad-x: 22px;
  }

  .site-header { padding-top: 17px; }

  .identity,
  .media-nav { font-size: 14.5px; }

  .media-nav {
    max-width: 74vw;
    gap: 6px 15px;
  }

  .media-nav .exhibitions-link { margin-left: 18px; }

  .language-switch {
    margin-left: 10px;
    font-size: 12px;
  }

  #page-shell { display: block; }

  .rail { padding: 10px 16px 28px; }

  .category-index {
    position: static;
    max-height: none;
  }

  .content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .film-shell,
  .album-shell,
  .comic-shell,
  .photo-shell,
  .writing-shell {
    width: 100%;
  }
}

@media (max-width: 620px) {
  :root { --header-h: 166px; }

  .site-header { gap: 12px; }

  .identity { font-size: 14px; }

  .media-nav {
    max-width: 68vw;
    font-size: 13px;
    gap: 7px 12px;
  }

  .media-nav .exhibitions-link,
  .language-switch {
    margin-left: 8px;
  }

  .film-title,
  .photo-title,
  .album-title,
  .comic-title { font-size: 23px; }
  .film-copy { font-size: 14px; }
}

@media (max-width: 700px) {
  .photo-carousel {
    height: min(68vh, 640px);
  }
}


/* V12 spacing refinements */
.album-header .album-meta { margin-bottom: 10px; }
.album-bandcamp {
  display: inline-block;
  font-family: "Times New Roman", Times, serif;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  border-bottom: 1px solid currentColor;
}
.album-bandcamp:hover { opacity: .55; }
.comic-header .comic-meta { margin-bottom: 0; }


/* V13 refinements */
.project-link .year { line-height: 1.18; }


/* V16 layout refinements */
.content.work-mode .film-shell,
.content.work-mode .album-shell,
.content.work-mode .comic-shell,
.content.work-mode .photo-shell,
.content.work-mode .writing-shell {
  margin-left: auto;
  margin-right: auto;
}

.album-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-meta,
.film-meta,
.album-meta,
.comic-meta {
  margin-left: auto;
  margin-right: auto;
}


.album-title { text-align: center; font-weight: 700; }
.album-bandcamp { text-align: center; }
@media (max-width: 700px) {
  .film-still-row.pair { grid-template-columns: 1fr; }
  .film-credit { margin-top: -28px; }
}


.project-link-title.symbol-title {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  line-height: 1;
  white-space: nowrap;
}

.album-title {
  width: 100%;
}

.album-title .album-title-text {
  display: inline-block;
}

.album-title .symbol-title {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.42em;
  line-height: 1;
  width: 100%;
  margin: 0 auto;
}


/* V19 — Exhibitions and artist profile */
#page-shell.exhibitions-list-mode {
  display: block;
}

.exhibitions-list-mode .content {
  padding: 18px var(--pad-x) 72px;
}

.exhibitions-overview {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.exhibitions-heading {
  margin: 0 0 34px;
  font-family: "Times New Roman", Times, serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
}

.exhibitions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exhibition-overview-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-family: "Times New Roman", Times, serif;
  font-size: 15.5px;
  line-height: 1.45;
}

.exhibition-overview-row:hover {
  opacity: .55;
}

.exhibition-year {
  white-space: nowrap;
}

.exhibition-shell {
  width: min(820px, calc(100% - 140px));
  margin: 0 auto;
}

.exhibition-header {
  margin: 0 auto 52px;
  text-align: center;
}

.exhibition-title {
  margin: 0 auto 11px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 29px;
  line-height: 1.18;
  font-weight: 700;
  max-width: 760px;
}

.exhibition-meta {
  font-size: 15.5px;
  line-height: 1.42;
}

.exhibition-images {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.exhibition-figure {
  margin: 0;
  text-align: center;
}

.exhibition-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76vh;
  margin: 0 auto;
}

.exhibition-figure figcaption {
  margin-top: 9px;
  font-family: "Times New Roman", Times, serif;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted-2);
  text-align: center;
}

.exhibition-index .project-link {
  margin-bottom: 11px;
}

@media (max-width: 980px) {
  .artist-profile {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 32px;
  }

  .exhibition-shell {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .contact-mode .content {
    align-items: flex-start;
    padding-top: 18px;
  }

  .contact-links {
    margin-bottom: 34px;
  }

  .artist-profile {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .artist-portrait-wrap {
    width: min(280px, 72vw);
    margin: 0 auto;
  }

  .artist-bio {
    font-size: 15.5px;
  }

  .exhibitions-list-mode .content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .exhibition-overview-row {
    grid-template-columns: 48px minmax(0, 1fr);
    font-size: 14.5px;
  }

  .exhibition-title {
    font-size: 23px;
  }
}

/* V20 — typography + exhibition detail refinements */
.film-copy,
.tracklist,
.album-copy,
.writing-title,
.writing-meta,
.writing-copy,
.empty-category,
.contact-links p,
.artist-bio,
.album-bandcamp,
.exhibitions-heading,
.exhibition-overview-row,
.exhibition-figure figcaption,
.exhibition-meta,
.exhibition-url {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.film-copy {
  font-size: 15.5px;
  line-height: 1.55;
}

.album-copy {
  font-size: 14.5px;
  line-height: 1.58;
}

.exhibitions-heading {
  font-size: 20px;
  line-height: 1.3;
}

.exhibition-overview-row {
  font-size: 15px;
  line-height: 1.48;
}

.exhibition-title {
  font-size: 23px;
  line-height: 1.22;
  max-width: 720px;
}

.exhibition-meta {
  font-size: 14.5px;
  line-height: 1.45;
}

.exhibition-url {
  display: inline-block;
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.3;
  border-bottom: 1px solid currentColor;
}

.exhibition-url:hover { opacity: .55; }

.exhibition-figure figcaption {
  font-size: 11.5px;
  line-height: 1.4;
}

/* Keep the exhibition index scrollable without showing the grey scrollbar thumb. */
.exhibition-index {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.exhibition-index::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@media (max-width: 700px) {
  .exhibition-title { font-size: 20px; }
}


/* V21 — compact contact, preserved exhibition rail, poster, and empty exhibition state */
.contact-mode .content {
  align-items: flex-start;
  padding-top: 44px;
}

.contact-page {
  width: min(650px, 100%);
}

.artist-profile {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.artist-portrait-wrap {
  width: 150px;
  aspect-ratio: 3 / 4;
}

.artist-bio {
  max-width: 430px;
  font-size: 13px;
  line-height: 1.56;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 26px 0 0;
  text-align: left;
}

.contact-links p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.contact-page a {
  border-bottom: 0;
}

.contact-page a:hover {
  opacity: .55;
}

.film-poster-wrap {
  width: 100%;
  margin: 0 auto 56px;
  text-align: center;
}

.film-poster {
  display: block;
  width: min(430px, 58%);
  height: auto;
  margin: 0 auto;
}

.exhibition-empty {
  margin: 0 auto;
  padding-top: 2px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-2);
  text-align: center;
}

@media (max-width: 700px) {
  .contact-mode .content {
    padding-top: 22px;
  }

  .contact-page {
    width: 100%;
  }

  .artist-profile {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 20px;
  }

  .artist-portrait-wrap {
    width: 128px;
    margin: 0;
  }

  .artist-bio {
    font-size: 13px;
    line-height: 1.52;
  }

  .contact-links {
    margin: 22px 0 0;
    gap: 6px 18px;
  }

  .film-poster {
    width: min(360px, 72%);
  }
}

@media (max-width: 480px) {
  .artist-profile {
    grid-template-columns: 1fr;
  }

  .artist-portrait-wrap {
    width: 132px;
  }

  .contact-links {
    margin-left: 0;
  }
}


/* V22 — independent exhibition scrolling, photo notes, contact composition, paired posters */

/* Sound pages: create a clearer pause between album metadata and Bandcamp. */
.album-header .album-meta {
  margin-bottom: 24px;
}

/* Exhibition detail pages use the same metadata-to-link rhythm as Sound pages. */
.exhibition-url {
  margin-top: 24px;
}

/* Photo-series notes sit between the title/year block and the carousel. */
.photo-copy {
  width: min(620px, 100%);
  margin: -18px auto 38px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

.photo-copy p {
  margin: 0 0 7px;
}

.photo-copy p:last-child {
  margin-bottom: 0;
}

/* Two Unnatural posters are presented as a single, balanced pair. */
.film-poster-wrap.film-poster-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  align-items: start;
}

.film-poster-wrap.film-poster-pair .film-poster {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

/* Exhibition detail: the index and the artwork text/images scroll independently. */
#page-shell.exhibition-detail-mode {
  height: calc(100vh - var(--header-h));
  min-height: 0;
  overflow: hidden;
}

.exhibition-detail-mode .rail {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.exhibition-detail-mode .exhibition-index {
  position: static;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.exhibition-detail-mode .content {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Contact is one fixed, centered composition: portrait at left, bio + links at right. */
#page-shell.contact-mode {
  height: calc(100vh - var(--header-h));
  min-height: 0;
  overflow: hidden;
}

.contact-mode .content {
  height: 100%;
  min-height: 0;
  padding: 20px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.contact-page {
  width: min(680px, 100%);
  margin: 0 auto;
}

.artist-profile {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.artist-info {
  min-width: 0;
  align-self: center;
}

.artist-bio {
  max-width: 440px;
  font-size: 13px;
  line-height: 1.56;
}

.contact-links {
  display: block;
  margin: 24px 0 0;
  text-align: left;
}

.contact-links p {
  margin: 0 0 7px;
  font-size: 13px;
  line-height: 1.45;
}

.contact-links p:last-child {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  #page-shell.exhibition-detail-mode {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .exhibition-detail-mode .rail {
    padding: 10px 14px 26px 16px;
  }

  .exhibition-detail-mode .content {
    padding: 14px 16px 48px;
  }
}

@media (max-width: 700px) {
  .film-poster-wrap.film-poster-pair {
    gap: 10px;
  }

  .photo-copy {
    margin-top: -14px;
    margin-bottom: 30px;
    font-size: 13px;
  }

  #page-shell.contact-mode {
    overflow: auto;
  }

  .contact-mode .content {
    overflow: auto;
    align-items: center;
    padding: 18px 16px;
  }

  .artist-profile {
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 20px;
  }

  .artist-portrait-wrap {
    width: 126px;
  }

  .artist-bio,
  .contact-links p {
    font-size: 12.5px;
  }
}

@media (max-width: 520px) {
  #page-shell.exhibition-detail-mode {
    display: block;
    height: auto;
    overflow: visible;
  }

  .exhibition-detail-mode .rail,
  .exhibition-detail-mode .content {
    height: auto;
    overflow: visible;
  }

  .exhibition-detail-mode .exhibition-index {
    height: auto;
    max-height: none;
  }

  #page-shell.contact-mode {
    height: auto;
    overflow: visible;
  }

  .contact-mode .content {
    height: auto;
    overflow: visible;
  }

  .artist-profile {
    grid-template-columns: 1fr;
  }

  .artist-portrait-wrap {
    width: 132px;
    margin: 0;
  }
}
\n\n/* V23 — whole-viewport contact centering; horizontal contact links */\n#page-shell.contact-mode {\n  height: calc(100vh - var(--header-h));\n  min-height: 0;\n  overflow: hidden;\n}\n\n.contact-mode .content {\n  height: calc(100vh - var(--header-h));\n  min-height: 0;\n  padding: 20px var(--pad-x);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  transform: translateY(calc(var(--header-h) / -2));\n}\n\n.contact-links {\n  display: flex;\n  align-items: baseline;\n  gap: 22px;\n  margin-top: 24px;\n  text-align: left;\n}\n\n.contact-links p,\n.contact-links p:last-child {\n  margin: 0;\n}\n\n@media (max-width: 760px) {\n  .contact-mode .content {\n    transform: none;\n  }\n\n  .contact-links {\n    flex-wrap: wrap;\n    gap: 8px 18px;\n  }\n}\n