@font-face {
  font-family: "Rose Display";
  src: url("fonts/bricolage-grotesque.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: "Rose Sans";
  src: url("fonts/ibm-plex-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

@font-face {
  font-family: "Rose Mono";
  src: url("fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rose CJK";
  src: url("fonts/noto-serif-sc-subset-68.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f3f2ea;
  --paper-raised: #faf9f2;
  --paper-deep: #eae8dc;
  --ink: #222a22;
  --ink-soft: #3c453c;
  --cinnabar: #d2352c;
  --celadon: #a9bfad;
  --celadon-deep: #48604c;
  --font-cjk: "Rose CJK", "Noto Serif SC", serif;
  --paper-fibre: color-mix(in srgb, var(--ink) 1.3%, transparent);
  --paper-laid: color-mix(in srgb, var(--ink) 1%, transparent);
  --paper-chain: color-mix(in srgb, var(--ink) 1.7%, transparent);
  --sheet-feather: clamp(24px, 5vw, 64px);
  --paper-material:
    repeating-linear-gradient(0deg, transparent 0, var(--paper-laid) 1px, transparent 2px, transparent 6px),
    repeating-linear-gradient(0deg, transparent 0, var(--paper-chain) 1px, transparent 3px, transparent 96px),
    repeating-linear-gradient(103deg, transparent 0, var(--paper-fibre) .5px, transparent 1.5px, transparent 12px);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 280px;
  scrollbar-gutter: stable;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background-color: var(--paper-deep);
  color: var(--ink);
  font-family: "Rose Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  caret-color: var(--cinnabar);
}

body::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: var(--paper-raised);
  background-image: var(--paper-material);
  content: "";
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sheet-feather), #000 calc(100% - var(--sheet-feather)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--sheet-feather), #000 calc(100% - var(--sheet-feather)), transparent 100%);
  pointer-events: none;
}

body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--cinnabar);
  color: var(--paper-raised);
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

a:not(.qb-chrome__btn):hover {
  color: var(--ink-soft);
  text-decoration-color: var(--cinnabar);
}

a:focus-visible {
  border-radius: 2px;
  outline: 3px solid var(--cinnabar);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 10;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper-raised);
  font-family: "Rose Mono", ui-monospace, monospace;
  font-size: .78rem;
  transform: translateY(-180%);
}

.skip-link:focus {
  color: var(--paper-raised);
  transform: translateY(0);
}

.skip-link:hover {
  color: var(--paper-raised);
}

.rose-head,
.rose-stage,
.rose-foot {
  width: var(--qb-content-width);
  margin-inline: auto;
}

.rose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, var(--paper));
  font-family: "Rose Mono", ui-monospace, monospace;
  letter-spacing: .08em;
}

.rose-head p {
  margin: 0;
  color: var(--ink-soft);
  text-align: right;
}


.rose-stage {
  display: grid;
  grid-template-columns: minmax(340px, 720px) minmax(260px, 390px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 7vw, 104px);
  min-height: calc(100svh - 72px);
  padding-block: clamp(28px, 4vw, 56px);
}

.rose-plate {
  position: relative;
  width: min(100%, 68vh);
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--celadon-deep);
  border-radius: 3px;
  background: var(--paper);
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--ink) 18%, transparent),
    0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent);
}

.rose-poster,
.rose-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
}

.rose-poster {
  z-index: 0;
  object-fit: contain;
  background: var(--paper);
  height: 100%;
}

.rose-canvas {
  height: 87%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.rose-canvas.is-rendered {
  opacity: 1;
}

.rose-plate figcaption {
  position: absolute;
  z-index: 4;
  top: 88.4%;
  right: 5.8%;
  left: 5.8%;
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--ink-soft);
  line-height: 1;
  pointer-events: none;
}

.rose-plate figcaption b {
  color: var(--ink);
  font-family: var(--font-cjk);
  font-size: clamp(1.25rem, 2.6vw, 1.95rem);
  letter-spacing: .12em;
}

.rose-plate figcaption span {
  font-family: "Rose Display", "Avenir Next", sans-serif;
  font-size: clamp(.78rem, 1.5vw, 1.05rem);
  letter-spacing: -.01em;
}

.rose-copy {
  max-width: 34rem;
}

.rose-copy h1 {
  display: grid;
  gap: 12px;
  margin: 0;
  font-family: "Rose Display", "Avenir Next", sans-serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.rose-copy h1 [lang] {
  color: var(--ink);
  font-family: var(--font-cjk);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: .08em;
}

.rose-copy h1 small {
  min-width: 0;
  color: var(--ink-soft);
  font: inherit;
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
}

.rose-lede {
  max-width: 44ch;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
}

.rose-method {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 28%, var(--paper));
}

.rose-method p {
  max-width: 48ch;
  margin: 0;
  color: var(--ink-soft);
}

.rose-method dl {
  display: grid;
  margin: 24px 0 0;
}

.rose-method dl div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 28%, var(--paper));
}

.rose-method dl div:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, var(--paper));
}

.rose-method dt,
.rose-method dd {
  margin: 0;
}

.rose-method dt {
  color: var(--ink-soft);
  font-family: "Rose Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .08em;
}

.rose-method dd {
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.rose-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 28px 52px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 30%, var(--paper));
  color: var(--ink-soft);
  font-size: .82rem;
}

.rose-foot p {
  margin: 0;
  font-family: "Rose Mono", ui-monospace, monospace;
  letter-spacing: .07em;
}

.rose-foot b {
  color: var(--ink);
  font-family: var(--font-cjk);
  letter-spacing: .12em;
}

.rose-foot-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Source credit: an info mark that is a link to the post it is after. The note
   shows on hover and on keyboard focus; on touch the tap goes to the post. */
.rose-source {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--ink-soft);
  text-decoration: none;
}

.rose-source svg {
  width: 20px;
  height: 20px;
  display: block;
}

.rose-source:hover,
.rose-source:focus-visible {
  color: var(--ink);
}

.rose-source-note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, var(--paper));
  border-radius: 2px;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: "Rose Mono", ui-monospace, monospace;
  font-size: .78rem;
  letter-spacing: .05em;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rose-source-note b {
  margin-right: .3em;
  font-weight: 400;
  color: var(--cinnabar);
}

.rose-source-note small {
  display: block;
  margin-top: 4px;
  font-size: .68rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.rose-source:hover .rose-source-note,
.rose-source:focus-visible .rose-source-note {
  opacity: 1;
  visibility: visible;
}

/* The listener rests against the right edge from mid-height, and the copy
   column grows toward it: from 1200px up the lede's line box reaches within a
   few pixels of the resting record, and at 1280 and above the closing words
   run under it. The reserved edge is the constraint the player cannot give
   back, so the lede keeps a hair of measure instead. */
@media (min-width: 1200px) {
  .rose-lede { padding-right: 1.25rem; }
}

@media (max-width: 820px) {

  .rose-stage {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: 0;
    padding-block: 24px 64px;
  }

  .rose-plate {
    width: 100%;
  }

  .rose-copy {
    max-width: none;
  }

}

@media (max-width: 44rem) {
  body.rose-page > .rose-head:first-of-type {
    /* The back control and listener occupy the first row; metadata has its own. */
    padding-block: calc(max(1rem, env(safe-area-inset-top, 0px)) + 5.5rem) 1rem;
    padding-inline-start: 0;
  }
}

@media (max-width: 560px) {
  .rose-head {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding-block: 10px;
  }

  .rose-head p {
    text-align: left;
  }

  .rose-copy h1 {
    gap: 8px 12px;
  }

  .rose-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  /* Anchor the note to the links row, not the icon, so it opens from the
     left edge of the content and never extends the page sideways. */
  .rose-foot-links {
    position: relative;
  }

  .rose-source {
    position: static;
  }

  .rose-source-note {
    right: auto;
    left: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .rose-source-note {
    transition: opacity 160ms ease, visibility 160ms ease;
  }

  .rose-canvas {
    transition: opacity 420ms cubic-bezier(.16, 1, .3, 1);
  }

  .rose-plate {
    animation: plate-arrival 760ms cubic-bezier(.16, 1, .3, 1) both;
  }

  @keyframes plate-arrival {
    from {
      filter: blur(4px);
      opacity: .78;
      transform: translateY(8px) scale(.996);
    }
    to {
      filter: blur(0);
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

.capture-frame .rose-canvas {
  transition: none;
}

.capture-frame .rose-plate {
  animation: none;
}

.capture-plate body::before,
.capture-plate .rose-head,
.capture-plate .rose-copy,
.capture-plate .rose-foot,
.capture-plate .skip-link,
.capture-plate .qb-chrome,
.capture-plate .qb-player,
.capture-plate .rose-poster,
.capture-plate .rose-plate figcaption {
  display: none;
}

/* No scrollbar gutter while capturing: a fixed plate must span the whole window. */
html.capture-plate {
  overflow: hidden;
  scrollbar-gutter: auto;
}

.capture-plate .rose-stage {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
}

.capture-plate .rose-plate {
  position: fixed;
  inset: 0;
  width: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}

.capture-art .rose-plate { background: #090a0d; }

.capture-art .rose-canvas { height: 100%; }