:root {
  --paper: #f1e6c8;
  --paper-edge: #dcc79a;
  --ink: #1d1a16;
  --ink-soft: #4a4136;
  --ink-faint: #7a6c58;
  --cinnabar: #b3261e;
  --cinnabar-dark: #8a1b14;
  --wood: #4b2a17;
  --wood-light: #7a4a2a;
  --gold: #b48a3c;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.12 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.08' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.33 0 0 0 0 0.15 0 0 0 0.35 -0.08'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --serif: "IM Fell English", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --serif-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  --brush: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The whole app fits in one screen, so that one screenshot shows it all.
   The body is exactly one viewport high. The scroll takes the free space,
   and app.js makes the card text smaller if a long verse does not fit. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px 6px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 240, 210, 0.08), transparent 60%),
    var(--grain),
    #2a1f17;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- The scroll ---------- */

.scroll {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 10px;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
}

.roller {
  flex: none;
  position: relative;
  height: 18px;
  margin: 0 -10px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 35%, rgba(0, 0, 0, 0.35)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 3px, transparent 3px 11px),
    linear-gradient(90deg, var(--wood), var(--wood-light) 30%, var(--wood) 70%, var(--wood-light));
  z-index: 2;
}
.roller::before,
.roller::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 16px;
  height: 26px;
  border-radius: 5px;
  background: linear-gradient(180deg, #d9b56a, var(--gold) 45%, #6f5222);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}
.roller::before { left: -6px; }
.roller::after { right: -6px; }

.paper {
  flex: 1 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 12px 14px;
  background:
    var(--fibers),
    var(--grain),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(120, 85, 35, 0.22)),
    linear-gradient(90deg, var(--paper-edge), var(--paper) 6%, var(--paper) 94%, var(--paper-edge));
  /* The fiber layer spans the full width, so it has no vertical seam. */
  background-size: 100% 600px, auto, auto, auto;
  border-left: 1px solid rgba(90, 60, 25, 0.25);
  border-right: 1px solid rgba(90, 60, 25, 0.25);
}

.vertical-title {
  display: none;
  position: absolute;
  top: 30px;
  left: 20px;
  writing-mode: vertical-rl;
  font-family: var(--brush);
  font-size: 28px;
  letter-spacing: 6px;
  color: rgba(29, 26, 22, 0.72);
  line-height: 1;
  user-select: none;
}

/* ---------- Masthead ---------- */

.masthead {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portrait {
  flex: none;
  margin: 0;
  width: 44px;
  padding: 3px;
  background: linear-gradient(135deg, #5d3b22, #3b2414);
  box-shadow: 0 4px 10px rgba(40, 20, 5, 0.35), inset 0 0 0 1px rgba(255, 220, 150, 0.25);
  transform: rotate(-1.5deg);
}
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 520;
  border: 2px solid #e9dcb6;
  filter: sepia(0.15) contrast(1.05);
}

h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: -0.3px;
}
h1 br, .subtitle br { display: none; }

.subtitle {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: -0.1px;
  line-height: 1.3;
}
.subtitle cite { font-style: normal; }

/* ---------- Form ---------- */

.ask {
  margin: 10px 0 0;
  display: grid;
  gap: 8px;
}

textarea {
  width: 100%;
  resize: none;
  height: 3.05em;
  padding: 6px 10px;
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  background: rgba(255, 252, 240, 0.55);
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 2px 2px 0 0;
  outline: none;
  box-shadow: inset 0 1px 6px rgba(90, 60, 25, 0.15);
}
textarea::placeholder { color: var(--ink-faint); font-style: italic; }
textarea:focus { background: rgba(255, 252, 240, 0.8); border-bottom-color: var(--cinnabar); }

.ask-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

button {
  font: inherit;
  cursor: pointer;
}

#go {
  padding: 5px 16px 6px;
  font-family: var(--serif-sc);
  font-size: 17px;
  letter-spacing: 0.5px;
  color: #f7eed8;
  background: var(--ink);
  border: 0;
  border-radius: 3px 14px 3px 12px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.08s, background 0.15s;
}
#go:hover { background: var(--cinnabar-dark); }
#go:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: rgba(74, 65, 54, 0.4);
  text-underline-offset: 3px;
}
.linkish:hover { color: var(--cinnabar); }

button:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px dashed var(--cinnabar);
  outline-offset: 3px;
}

/* ---------- Result column ---------- */

.result { min-width: 0; }

.placeholder { display: none; }

/* ---------- Verdict card ----------
   All sizes are in em, so --card-size scales the whole card. */

.card {
  --card-size: 15px;
  position: relative;
  font-size: var(--card-size);
  padding: 1.2em 1.2em 0.9em;
  background:
    var(--grain),
    linear-gradient(180deg, #f8efd8, #f1e3c0);
  border: 1px solid rgba(90, 60, 25, 0.35);
  box-shadow:
    0 0 0 5px #f6ecd2,
    0 0 0 6px rgba(90, 60, 25, 0.3),
    0 10px 20px rgba(60, 35, 10, 0.18);
  overflow: hidden;
}

.seal {
  position: absolute;
  top: 0.55em;
  right: 0.5em;
  width: 2.45em;
  height: 2.45em;
  display: grid;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  padding: 0.12em 0;
  font-family: var(--brush);
  font-size: 1.65em;
  line-height: 1;
  color: #fbeee0;
  background: var(--cinnabar);
  border-radius: 0.18em;
  box-shadow: inset 0 0 0 0.09em #fbeee0, inset 0 0 0 0.15em var(--cinnabar);
  filter: url(#rough);
  --r: 8deg;
  transform: rotate(var(--r));
  opacity: 0.92;
  mix-blend-mode: multiply;
}
.card[data-verdict="close"] .seal { --r: -6deg; }
.card[data-verdict="never"] .seal { --r: 14deg; }

.card.stamped .seal { animation: stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.2) rotate(var(--r)); }
  60% { opacity: 0.95; }
  100% { opacity: 0.92; transform: scale(1) rotate(var(--r)); }
}

.verdict {
  margin: 0 2.1em 0.35em 0;
  font-family: var(--serif);
  font-size: 2em;
  line-height: 1.02;
  color: var(--ink);
}
.card[data-verdict="never"] .verdict { color: var(--cinnabar-dark); }

.asked {
  margin: 0 0 0.8em;
  font-size: 1.12em;
  line-height: 1.3;
  font-style: italic;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
/* A red stroke through the fake quote. */
.card[data-verdict="never"] .asked {
  text-decoration: line-through;
  text-decoration-color: rgba(179, 38, 30, 0.75);
  text-decoration-thickness: 2px;
}

.lead {
  margin: 0 0 0.3em;
  font-family: var(--serif-sc);
  font-size: 0.82em;
  letter-spacing: 0.6px;
  color: var(--ink-faint);
}

.passage {
  margin: 0;
  padding: 0.5em 0 0.15em 0.9em;
  border-left: 4px solid var(--ink);
  border-image: linear-gradient(180deg, var(--ink), rgba(29, 26, 22, 0.55) 70%, transparent) 1;
}
.passage p {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.38;
}
.passage mark {
  color: inherit;
  background: linear-gradient(180deg, transparent 58%, rgba(179, 38, 30, 0.22) 58%, rgba(179, 38, 30, 0.22) 92%, transparent 92%);
  padding: 0 1px;
}
.passage footer {
  margin-top: 0.45em;
  font-size: 0.88em;
  color: var(--ink-soft);
}
.passage footer cite { font-style: italic; }

.watermark {
  margin: 0.9em 0 0;
  padding-top: 0.5em;
  border-top: 1px solid rgba(90, 60, 25, 0.2);
  text-align: right;
  font-family: var(--serif-sc);
  font-size: 0.72em;
  letter-spacing: 1px;
  color: var(--ink-faint);
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}
.actions[hidden] { display: none; }
#copy {
  padding: 3px 12px;
  font-family: var(--serif-sc);
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
}
#copy:hover { background: rgba(29, 26, 22, 0.07); }
.copied {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 15px;
  overflow-wrap: anywhere;
}

/* ---------- Credits ---------- */

.credits {
  flex: none;
  max-width: 1000px;
  margin: 6px auto 0;
  text-align: center;
  color: #bfae8c;
  font-size: 10.5px;
  line-height: 1.35;
}
.wide-only { display: none; }
.credits a { color: #ead7ae; }

/* ---------- Wide screens: two columns ---------- */

@media (min-width: 880px) {
  body { padding: 20px 24px 10px; font-size: 17px; }
  .scroll { padding: 0 14px; }
  .roller { height: 26px; margin: 0 -14px; border-radius: 13px; }
  .roller::before, .roller::after { width: 22px; height: 36px; top: -5px; }
  .roller::before { left: -8px; }
  .roller::after { right: -8px; }

  .paper {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) 6fr;
    align-items: center;
    gap: 48px;
    padding: 28px 52px 28px 84px;
  }
  .vertical-title { display: block; }

  .masthead { gap: 22px; }
  .portrait { width: 118px; padding: 6px; }
  .portrait img { border-width: 3px; }
  h1 { font-size: clamp(36px, 4.2vw, 50px); }
  h1 br, .subtitle br { display: inline; }
  .subtitle { margin-top: 8px; font-size: 16px; }
  .linkish { font-size: 15px; }

  .ask { margin-top: 26px; gap: 12px; }
  .portrait { padding: 6px; }
  textarea { height: 4.6em; font-size: 19px; padding: 10px 14px; }
  .ask-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  #go { padding: 9px 24px 10px; font-size: 20px; }

  .placeholder {
    display: grid;
    place-items: center;
    gap: 18px;
    padding: 48px 24px;
    text-align: center;
    color: var(--ink-faint);
    font-style: italic;
    font-size: 19px;
    border: 1.5px dashed rgba(90, 60, 25, 0.3);
  }
  .placeholder[hidden] { display: none; }
  .placeholder p { margin: 0; }
  .placeholder .seal {
    position: static;
    font-size: 30px;
    opacity: 0.18;
    mix-blend-mode: normal;
  }

  .card { --card-size: 17px; }
  .verdict { font-size: 2.2em; }
  .actions { margin-top: 14px; }
  #copy { padding: 5px 14px; font-size: 15px; }
  .credits { font-size: 12.5px; margin-top: 8px; }
  .wide-only { display: inline; }
}

/* Short phones, for example an iPhone SE with the Safari toolbars. */
@media (max-width: 879px) and (max-height: 700px) {
  body { padding: 6px 10px 4px; }
  .roller { height: 12px; }
  .roller::before, .roller::after { width: 12px; height: 18px; top: -3px; }
  .paper { padding: 8px 12px; gap: 8px; }
  .portrait { width: 34px; padding: 2px; }
  .portrait img { border-width: 1px; }
  h1 { font-size: 22px; }
  .subtitle { margin-top: 1px; font-size: 12px; }
  .ask { margin-top: 8px; gap: 6px; }
  #go { padding: 3px 14px 4px; font-size: 16px; }
  .card { padding: 0.9em 1em 0.7em; }
  .watermark { margin-top: 0.6em; padding-top: 0.35em; }
  .actions { margin-top: 7px; }
  #copy { padding: 2px 10px; font-size: 13px; }
  .credits { margin-top: 3px; font-size: 10px; }
}

/* Large screens: the scroll hangs in the middle at its natural height,
   with bigger type. */
@media (min-width: 1200px) and (min-height: 860px) {
  .scroll { flex: 0 1 auto; max-width: 1320px; }
  .paper { padding: 48px 68px 48px 104px; gap: 64px; }
  .vertical-title { font-size: 34px; top: 40px; left: 28px; }
  .portrait { width: 150px; }
  h1 { font-size: 54px; }
  .subtitle { font-size: 18px; }
  .ask { margin-top: 32px; }
  textarea { font-size: 21px; }
  #go { font-size: 22px; }
  .linkish { font-size: 17px; }
  .card { --card-size: 20px; }
  .placeholder { font-size: 21px; padding: 72px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .card.stamped .seal { animation: none; }
}