@import url("tokens.css");

/* Hallmark · macrostructure: Narrative Workflow · tone: austere · anchor hue: 178
 * signature: 脱落／残存 · contrast: pending measurement · mobile: pending verification
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  background-color: var(--color-paper);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  padding-bottom: 0.12em;
  overflow-wrap: anywhere;
  min-width: 0;
}

h1 {
  font-size: var(--text-display);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-md);
}

h2 {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-md);
}

h3 {
  font-size: var(--text-lg);
  margin: var(--space-xl) 0 var(--space-sm);
}

p,
li,
dd,
dt,
blockquote {
  overflow-wrap: anywhere;
}

a {
  color: var(--color-ink);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-remain);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--space-sm);
  top: -4rem;
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-btn);
  color: var(--color-btn-ink);
  text-decoration: none;
}

.skip:focus {
  top: var(--space-sm);
}

.bar {
  position: relative;
  z-index: var(--z-bar);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  min-height: var(--bar-h);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-scrim);
  backdrop-filter: blur(8px);
}

.bar__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.bar__now {
  flex: 1 1 8rem;
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.act {
  appearance: none;
  border: 0;
  margin: 0;
  min-height: 44px;
  padding: 0.7rem 1rem;
  background: var(--color-btn-quiet);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.act:hover {
  filter: brightness(1.06);
}

.act:active {
  transform: translateY(1px);
}

.act:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.act--lead {
  background: var(--color-btn);
  color: var(--color-btn-ink);
}

.act--quiet {
  background: transparent;
  padding-inline: 0.55rem;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.act--quiet:hover {
  filter: none;
  color: var(--color-remain);
}

.screen {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: var(--space-xl) 0 var(--space-2xl);
}

.task {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.45;
  padding-bottom: 0.12em;
  max-width: var(--measure);
  margin: 0 0 var(--space-lg);
}

.lede {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: 1.7;
  margin: 0 0 var(--space-xl);
}

.score-note {
  max-width: var(--measure);
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-lg);
}

.prose {
  max-width: var(--measure);
}

.prose p {
  margin: 0 0 var(--space-md);
}

#screen-cover:has(.cover-fig) {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(6, auto);
}

#screen-cover:has(.cover-fig) > :not(.cover-territory) {
  position: relative;
  z-index: 1;
}

.cover-territory {
  position: absolute;
  z-index: 0;
  inset: var(--space-sm) auto auto calc(-1 * var(--space-md));
  width: min(38rem, 78%);
  height: 19rem;
  pointer-events: none;
}

.cover-territory .cover-territory__husk {
  top: 0;
  left: 0;
  width: 88%;
  height: 82%;
  border-radius: 58% 42% 52% 48% / 44% 60% 40% 56%;
  background: var(--color-husk);
  opacity: 0.32;
}

.cover-territory .cover-territory__residue {
  top: 68%;
  left: 67%;
  width: 31%;
  height: 24%;
  border-radius: 42% 58% 63% 37% / 59% 38% 62% 41%;
  background: var(--color-residue);
  opacity: 0.2;
  transform: none;
}

.cover-fig {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0 0 var(--space-xl);
  min-width: 0;
  background: var(--color-image-mat);
}

.cover-fig img {
  width: 100%;
  height: auto;
  filter: saturate(0.72) contrast(1.16) brightness(1.2);
}

.cover-fig figcaption {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.6;
}

html[data-theme="dark"] .cover-fig img {
  filter: saturate(0.78) contrast(1.2) brightness(1.14);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .cover-fig img {
    filter: saturate(0.78) contrast(1.2) brightness(1.14);
  }
}

blockquote {
  margin: 0 0 var(--space-md);
  padding: 0;
  font-size: var(--text-sm);
  line-height: 1.7;
}

blockquote p {
  margin: 0;
}

.cite {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin: 0 0 var(--space-lg);
}

.cite a {
  color: inherit;
}

.phase {
  max-width: var(--measure);
  margin: 0 0 var(--space-xl);
  min-height: 6.5rem;
}

.phase__quote {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.phase__note {
  margin: 0;
  color: var(--color-muted);
}

.field-wrap {
  margin-bottom: var(--space-xl);
}

.field-kicker {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.field {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .field {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
  }

}

@media (min-width: 1100px) {
  .field {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body {
    background-image: linear-gradient(
      90deg,
      var(--color-paper) 0 50%,
      var(--color-paper-2) 50% 100%
    );
  }

  #screen-cover:has(.cover-fig) {
    min-height: calc(100dvh - var(--bar-h));
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    column-gap: var(--space-2xl);
  }

  #screen-cover:has(.cover-fig) > :not(.cover-fig) {
    grid-column: 1;
  }

  #screen-cover:has(.cover-fig) .cover-fig {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    min-height: 0;
  }

  #screen-cover:has(.cover-fig) .cover-fig img {
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
  }

  #screen-cover:has(.cover-fig) .prose {
    max-width: none;
    align-self: start;
  }
}

.mark {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: var(--space-sm);
  min-width: 0;
  align-items: start;
  padding: var(--space-md);
  transition: background-color var(--dur-short) var(--ease-in-out);
}

.mark.is-out {
  background: var(--color-mark-out);
}

.mark.is-back {
  background: var(--color-mark-back);
}

.mark__stain {
  position: relative;
  width: 4.25rem;
  height: 5.5rem;
}

.mark__husk,
.mark__pigment,
.mark__residue {
  position: absolute;
  left: 0.35rem;
  width: 3.4rem;
  height: 3.4rem;
  display: block;
}

.mark__husk {
  top: 0.15rem;
  background: var(--color-husk);
  opacity: 0.55;
}

.mark__pigment {
  top: 0.15rem;
  background: var(--color-remain);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-drain) var(--ease-in),
    transform var(--dur-drain) var(--ease-in);
}

.mark__residue {
  top: 2.05rem;
  width: 2.6rem;
  height: 1.7rem;
  left: 0.75rem;
  background: var(--color-residue);
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity var(--dur-drain) var(--ease-out),
    transform var(--dur-drain) var(--ease-out);
}

.mark:nth-child(1) .mark__husk,
.mark:nth-child(1) .mark__pigment {
  border-radius: 58% 42% 49% 51% / 46% 54% 46% 54%;
}

.mark:nth-child(2) .mark__husk,
.mark:nth-child(2) .mark__pigment {
  border-radius: 40% 60% 52% 48% / 58% 41% 59% 42%;
}

.mark:nth-child(3) .mark__husk,
.mark:nth-child(3) .mark__pigment {
  border-radius: 47% 53% 38% 62% / 52% 48% 44% 56%;
}

.mark:nth-child(4) .mark__husk,
.mark:nth-child(4) .mark__pigment {
  border-radius: 62% 38% 55% 45% / 41% 59% 47% 53%;
}

.mark:nth-child(5) .mark__husk,
.mark:nth-child(5) .mark__pigment {
  border-radius: 44% 56% 61% 39% / 50% 45% 55% 50%;
}

.mark:nth-child(6) .mark__husk,
.mark:nth-child(6) .mark__pigment {
  border-radius: 51% 49% 42% 58% / 39% 61% 52% 48%;
}

.mark:nth-child(7) .mark__husk,
.mark:nth-child(7) .mark__pigment {
  border-radius: 36% 64% 48% 52% / 57% 43% 60% 40%;
}

.mark:nth-child(8) .mark__husk,
.mark:nth-child(8) .mark__pigment {
  border-radius: 55% 45% 36% 64% / 48% 52% 41% 59%;
}

.mark:nth-child(odd) .mark__residue {
  border-radius: 48% 52% 62% 38% / 40% 60% 45% 55%;
}

.mark:nth-child(even) .mark__residue {
  border-radius: 58% 42% 40% 60% / 55% 45% 58% 42%;
}

.mark.is-out .mark__pigment {
  opacity: 0.16;
  transform: translateY(0.8rem) scale(0.82);
}

.mark.is-out .mark__residue {
  opacity: 1;
  transform: scale(1);
}

.mark.is-back .mark__pigment {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--dur-drain) var(--ease-out),
    transform var(--dur-drain) var(--ease-out);
}

.mark.is-back .mark__residue {
  opacity: 0;
  transform: scale(0.7);
}

.mark__name {
  margin: 0 0 var(--space-2xs);
  padding-bottom: 0.12em;
  font-size: var(--text-body);
  font-family: var(--font-display);
  line-height: 1.35;
}

.attrs {
  margin: 0 0 var(--space-xs);
  display: grid;
  gap: 0.15rem;
}

.attrs div {
  display: grid;
  grid-template-columns: 7.2em minmax(0, 1fr);
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.attrs dt {
  color: var(--color-muted);
  font-weight: 400;
}

.attrs dd {
  margin: 0;
}

.mark__status {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  min-height: 2.4em;
}

.mark.is-out .mark__status,
.mark.is-back .mark__status {
  color: var(--color-ink);
}

.ledger {
  max-width: var(--measure);
  margin: 0 0 var(--space-xl);
}

.ledger h2 {
  font-size: var(--text-lg);
}

.ledger__note,
.ledger__list {
  font-size: var(--text-sm);
}

.ledger__list {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.ledger__list li {
  position: relative;
  margin-bottom: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) calc(var(--space-xl) + var(--space-3xs));
  background: color-mix(in oklch, var(--color-husk) 42%, transparent);
}

.ledger__list li::before {
  content: "";
  position: absolute;
  top: 0.62rem;
  left: var(--space-sm);
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 56% 44% 48% 52% / 43% 57% 39% 61%;
  background: var(--color-husk);
}

.ledger__list li::after {
  content: "";
  position: absolute;
  left: 2.15rem;
  bottom: 0.18rem;
  width: min(7rem, 34%);
  height: 0.26rem;
  border-radius: 58% 42% 67% 33% / 46% 54% 41% 59%;
  background: var(--color-residue);
  opacity: 0.72;
}

.figures-territory {
  position: relative;
  isolation: isolate;
  max-width: var(--measure);
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) var(--space-sm) var(--space-md);
}

.figures-territory .figures-territory__husk {
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.2rem 0.45rem 2.8rem 0.7rem / 1.4rem 2.2rem 0.8rem 2.6rem;
  background: var(--color-husk);
  opacity: 0.4;
}

.figures-territory .figures-territory__residue {
  z-index: 1;
  top: auto;
  right: var(--space-sm);
  bottom: 0.24rem;
  left: auto;
  width: 24%;
  height: 0.42rem;
  border-radius: 62% 38% 54% 46% / 44% 56% 40% 60%;
  background: var(--color-residue);
  opacity: 0.78;
  transform: none;
}

.figures {
  position: relative;
  z-index: 2;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
}

.figures div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-xs) var(--space-sm);
}

.figures div:first-child {
  background: color-mix(in oklch, var(--color-paper) 78%, transparent);
}

.figures div:last-child {
  width: 88%;
  margin-inline-start: 12%;
  box-shadow: inset 0.25rem 0 var(--color-remain);
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
}

.figures dt {
  font-size: var(--text-sm);
}

.figures dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
}

#diff-note {
  font-weight: 500;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.colophon {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 0 var(--space-2xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .act:active {
    transform: none;
  }

  @media (min-width: 768px) {
    .mark {
      transform: none;
    }
  }

  .mark.is-out .mark__pigment {
    transform: none;
    opacity: 0.18;
  }

  .mark.is-out .mark__residue {
    transform: none;
  }

  .mark.is-back .mark__pigment {
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 479px) {
  .act {
    width: 100%;
    text-align: center;
  }

  .bar .act {
    width: auto;
  }

  .attrs div {
    grid-template-columns: 1fr;
  }
}