/* The home page reads as two releases, with the full first volume in view. */
:root:has(body.release-layout) {
  --paper: #f4f2eb;
  --ink: #20252b;
  --muted: #5b6065;
  --line: #d2cfc5;
  --soft: #e9e6dd;
  --accent: #344e78;
}

:root[data-theme="dark"]:has(body.release-layout) {
  --paper: #131619;
  --ink: #f0eee6;
  --muted: #b9bdc2;
  --line: #3b424a;
  --soft: #1d2227;
  --accent: #a9bfea;
}

body.portfolio-layout.release-layout {
  --outer: clamp(20px, 5vw, 74px);
  --release-width: 1320px;
  --release-gutter: clamp(16px, 2.5vw, 36px);
  --release-index-font: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 1640px;
}

body.portfolio-layout.release-layout::before { display: none; }

body.portfolio-layout.release-layout :is(#menu, #content, #footer) {
  width: 100%;
  max-width: var(--release-width);
  margin-inline: auto;
}

body.portfolio-layout.release-layout #menu {
  margin-bottom: clamp(26px, 4vw, 54px);
}

@media screen and (min-width: 1050px) {
  .release-layout .release-home .home-section-nav { display: none; }
}

.release-home .release-chapter { scroll-margin-top: 16px; }

.release-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--release-gutter);
  margin-bottom: clamp(25px, 4vw, 50px);
}

.release-heading { min-width: 0; }

.release-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--release-index-font);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .065em;
  line-height: 1.5;
  text-transform: uppercase;
}

.release-kicker span:first-child {
  padding: 3px 8px;
  border: 1px solid var(--line);
  color: var(--accent);
}

.release-heading h1,
.release-parallax-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(45px, 7.3vw, 111px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.075em;
  text-wrap: balance;
}

html[lang="ko"] .release-home :is(.release-heading h1, .release-parallax-copy h2) { letter-spacing: -.055em; }
html[lang="en"] .release-heading h1 { font-size: clamp(43px, 5.75vw, 92px); }

.release-deck {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.55vw, 22px);
  line-height: 1.45;
}

.release-home .release-intro {
  max-width: 48ch;
  padding-bottom: 2px;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.8;
  text-wrap: pretty;
}

.release-home .release-intro p:last-of-type,
.release-home .release-work-caption p:last-child { margin-bottom: 0; }

.release-jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 3px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 550;
}

.release-jump:hover { text-decoration: underline; }

.release-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(33px, 5vw, 70px) var(--release-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.release-work { min-width: 0; }
.release-work.is-featured { grid-column: span 2; }
.release-work-link { display: block; }

.release-work-image {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--soft);
}

.release-work.is-featured .release-work-image { aspect-ratio: 5 / 4; }

.release-work-image img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.release-work-figure figcaption { padding-top: 11px; }

.release-work-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 11px/1.45 var(--release-index-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: .065em;
}

.release-work-meta span:first-child { color: var(--accent); }

.release-work h2 {
  margin: 0;
  font-size: clamp(16px, 1.72vw, 24px);
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.release-work.is-featured h2 { font-size: clamp(22px, 2.5vw, 36px); }

.release-work-link:is(:hover, :focus-visible) h2 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.release-home .release-work-caption {
  max-width: 50ch;
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  text-wrap: pretty;
}

.release-home .release-work.is-featured .release-work-caption { font-size: 15px; }

.release-index-link {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(25px, 4vw, 49px);
}

.release-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
}

.release-action:hover { color: var(--ink); }

.release-volume-two {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5.6vw, 86px);
  margin-top: clamp(72px, 10vw, 152px);
  padding-top: clamp(27px, 4.5vw, 63px);
  border-top: 1px solid var(--line);
}

/* A graphic study of displacement marks the second volume. */
.release-parallax-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background-color: #151d30;
  background-image:
    linear-gradient(#aec5fc19 1px, transparent 1px),
    linear-gradient(90deg, #aec5fc19 1px, transparent 1px),
    radial-gradient(ellipse at 53% 59%, #334668, #151d30 69%);
  background-position: center;
  background-size: 24px 24px, 24px 24px, cover;
}

.release-parallax-orbit {
  position: absolute;
  inset: 12% 22% 15% 8%;
  border: 1px solid #a3bbf2;
  border-radius: 50%;
  box-shadow: 0 0 0 15px #a3bbf239, 0 0 0 30px #a3bbf215;
  transform: rotate(-29deg);
}

.release-parallax-orbit + .release-parallax-orbit {
  inset: 21% 8% 9% 24%;
  border-color: #e3a5b8;
  box-shadow: 0 0 0 15px #e3a5b82e, 0 0 0 30px #e3a5b814;
}

.release-parallax-letter {
  position: relative;
  padding: .035em .05em 0 0;
  color: #eef1ff;
  font-size: clamp(100px, 19vw, 290px);
  font-weight: 430;
  line-height: .95;
}

.release-parallax-copy { min-width: 0; }
.release-parallax-copy h2 { font-size: clamp(46px, 7vw, 101px); }

.release-parallax-subtitle {
  margin: 10px 0 19px;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1.55;
}

.release-home .release-parallax-description {
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.8;
  text-wrap: pretty;
}

.release-home .release-parallax-description p { margin-bottom: .9em; }
.release-parallax-copy .release-action { margin-top: 7px; }

@media (max-width: 1049px) {
  .release-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-work.is-featured { grid-column: span 1; }
}

@media (max-width: 760px) {
  body.portfolio-layout.release-layout #menu { margin-bottom: 25px; }

  .release-masthead {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .release-kicker { margin-bottom: 10px; }

  .release-heading h1,
  .release-parallax-copy h2 { font-size: clamp(43px, 10vw, 70px); }

  html[lang="en"] .release-heading h1 { font-size: clamp(43px, 9vw, 64px); }

  .release-deck { margin-top: 8px; }
  .release-work.is-featured { grid-column: span 2; }
  .release-work.is-featured .release-work-image { aspect-ratio: auto; }
  .release-work.is-featured .release-work-image img { height: auto; max-height: 68svh; }
  .release-home .release-work-caption { font-size: 13px; }

  .release-volume-two {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .release-parallax-art { aspect-ratio: 8 / 5; }
  .release-parallax-letter { font-size: clamp(100px, 29vw, 185px); }
}

@media (max-width: 359px) {
  .release-work-grid { grid-template-columns: minmax(0, 1fr); }
  .release-work.is-featured { grid-column: span 1; }
}

@media print {
  :root:has(body.release-layout),
  :root[data-theme="dark"]:has(body.release-layout) {
    --paper: #fff;
    --ink: #000;
    --muted: #333;
    --line: #ccc;
    --soft: #fff;
    --accent: #222;
  }

  .release-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .release-work.is-featured { grid-column: span 1; }
  .release-work { break-inside: avoid; }
  .release-work .release-work-image { aspect-ratio: 4 / 3; }
  .release-parallax-art { print-color-adjust: exact; }
}