:root {
  --paper: #f8f4ec;
  --ink: #11100f;
  --quiet: #6f6b64;
  --line: rgba(17, 16, 15, 0.22);
  --serif: Didot, "Bodoni MT", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.protocolApp {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: 24px;
}

.cardStage {
  display: grid;
  width: min(430px, calc((100dvh - 138px) * 0.5625), calc(100vw - 38px));
  gap: 11px;
}

.cardMeta,
.cardHint {
  display: flex;
  min-height: 14px;
  align-items: center;
  justify-content: space-between;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
}

.protocolCard {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 0;
  border-radius: 16px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
}

.protocolCard:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.protocolCard:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.cardInner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 440ms cubic-bezier(0.22, 0.72, 0.23, 1);
}

.protocolCard.isRevealed .cardInner {
  transform: rotateY(180deg);
}

.cardFace {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(20, 17, 13, 0.19), 0 2px 6px rgba(20, 17, 13, 0.12);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.cardCover {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding: clamp(25px, 7%, 40px);
  background: #0b0b0a;
  color: #fffdf8;
  text-align: left;
}

.coverKicker,
.coverSubtitle {
  font-size: clamp(9px, 2.5cqw, 12px);
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.coverTitle {
  margin-top: auto;
  font-family: var(--serif);
  font-size: clamp(46px, 17cqw, 78px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.83;
  text-transform: uppercase;
}

.coverSubtitle {
  max-width: 20em;
  margin-top: 24px;
  color: rgba(255, 253, 248, 0.68);
}

.coverFamilies {
  display: grid;
  margin-top: auto;
  gap: 6px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  font-size: clamp(8px, 2.2cqw, 10px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coverFamilies > span {
  display: grid;
  grid-template-columns: 22px 1fr;
}

.coverFamilies > span > span {
  color: rgba(255, 253, 248, 0.42);
}

.cardArtwork {
  background: #ece9e3;
  transform: rotateY(180deg);
}

.cardArtwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.aboutTrigger,
.aboutClose {
  position: fixed;
  z-index: 20;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 3px 0;
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: lowercase;
}

.aboutTrigger {
  right: 22px;
  bottom: 20px;
}

.aboutTrigger:hover,
.aboutClose:hover,
.aboutTrigger:focus-visible,
.aboutClose:focus-visible {
  border-color: currentColor;
  color: var(--ink);
  outline: none;
}

.aboutPanel {
  position: fixed;
  z-index: 30;
  inset: 0;
  overflow-y: auto;
  background: var(--paper);
  animation: panelIn 260ms ease-out both;
}

.aboutClose {
  top: 22px;
  right: 22px;
}

.aboutContent {
  width: min(920px, calc(100% - 48px));
  margin: 0 auto;
  padding: 12vh 0 72px;
}

.aboutEyebrow {
  margin: 0 0 18px;
  color: var(--quiet);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.aboutContent h1 {
  max-width: 10em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 100px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.92;
}

.aboutLead {
  max-width: 32em;
  margin: 30px 0 72px;
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.25;
}

.familyList {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.familyList li {
  display: grid;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px 18px;
  grid-template-columns: 38px minmax(110px, 0.5fr) 1fr;
}

.familyList li > span {
  color: var(--quiet);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.familyList strong {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.familyList p {
  margin: 0;
  color: var(--quiet);
  font-size: 14px;
  line-height: 1.4;
}

.aboutNotes {
  display: grid;
  margin-top: 62px;
  gap: 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aboutNotes p {
  margin: 0;
  color: var(--quiet);
  font-size: 12px;
  line-height: 1.55;
}

.aboutNotes a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.noscriptMessage {
  position: fixed;
  z-index: 50;
  right: 20px;
  bottom: 20px;
  left: 20px;
  margin: 0;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  text-align: center;
}

.errorPage {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-content: center;
  padding: 32px;
  text-align: center;
}

.errorCode {
  margin: 0;
  color: var(--quiet);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.errorTitle {
  max-width: 8em;
  margin: 24px auto 30px;
  font-family: var(--serif);
  font-size: clamp(52px, 10vw, 108px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.86;
  text-transform: uppercase;
}

.errorLink {
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-transform: uppercase;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 620px) {
  .protocolApp {
    padding: 18px;
  }

  .cardStage {
    width: min(calc(100vw - 36px), calc((100dvh - 116px) * 0.5625));
    gap: 9px;
  }

  .cardFace,
  .protocolCard {
    border-radius: 13px;
  }

  .aboutTrigger {
    right: 18px;
    bottom: 15px;
  }

  .aboutClose {
    top: 18px;
    right: 18px;
  }

  .aboutContent {
    width: min(100% - 36px, 920px);
    padding-top: 11vh;
  }

  .aboutLead {
    margin-bottom: 48px;
  }

  .familyList li {
    grid-template-columns: 30px 1fr;
  }

  .familyList p {
    grid-column: 2;
  }

  .aboutNotes {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 640px) and (orientation: landscape) {
  .cardStage {
    width: min(240px, calc((100dvh - 84px) * 0.5625));
  }

  .cardMeta,
  .cardHint {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cardInner,
  .aboutPanel {
    transition: none;
    animation: none;
  }
}