/* is amazing — organiser and contributor pages (start, add, manage, paid, 404, terms). Paper register.
   Layout only: colours, type, radii, shadows and components come from site.css tokens and classes.
   The feel: a calm order form and a card to write in, from a good stationer. Hairlines, generous margins,
   people's words in EB Garamond, names in Cormorant italic, labels in Jost capitals. */

/* ------------------------------------------------------------ page frame */
.flow { padding-top: var(--s-3); }
.masthead .mast-link { font-family: var(--font-ui); font-size: var(--t-small); }
.site-foot .wrap > span:first-child { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--text); }
.loading { font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); padding: var(--s-8) 0; }

/* ------------------------------------------------------------ page heads */
.page-head { padding: var(--s-4) 0 var(--s-7); max-width: 40rem; }
.page-head h1 { margin-top: var(--s-3); }
.page-head .lede { margin-top: var(--s-4); color: var(--text-soft); }
.for { display: block; font-family: var(--font-ui); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); }
.big-name {
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(3.5rem, 15vw, 6rem);
  line-height: 1; letter-spacing: -0.01em; margin-top: var(--s-2); overflow-wrap: anywhere; padding-right: 0.08em;
}
.from { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 3.4vw, 1.5rem); line-height: 1.3; color: var(--text-soft); margin-top: var(--s-2); }
.page-head .explain { margin-top: var(--s-5); font-size: var(--t-lede); line-height: 1.55; max-width: var(--measure); }
.page-head .count { margin-top: var(--s-3); color: var(--text-soft); }
.head-rule { width: 4rem; margin: var(--s-5) 0 0; }

/* ------------------------------------------------------------ start: the order form, with a preview of the opening */
.start-form { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); }
.sf-fields { min-width: 0; }
.sf-submit .btn { margin-top: 0; }
.sf-submit .pay-note { margin-top: var(--s-3); color: var(--text-soft); }
.sf-submit .error { margin-top: 0; margin-bottom: var(--s-4); }
.opt { font-weight: 400; letter-spacing: 0.08em; color: var(--text-soft); text-transform: none; }
.other-wrap { display: block; margin-top: var(--s-3); }
.world-input { min-height: 6.2rem; }
.field .counter { display: block; }
.code-wrap .code-field { display: block; margin-top: var(--s-3); }
@media (min-width: 960px) {
  .start-layout { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 23rem); grid-template-areas: 'head preview' 'fields preview' 'submit preview'; grid-template-rows: auto auto 1fr; column-gap: clamp(4rem, 8vw, 8rem); }
  .start-layout .start-form { display: contents; }
  .start-layout .page-head { grid-area: head; }
  .sf-fields { grid-area: fields; }
  .sf-submit { grid-area: submit; margin-top: var(--s-7); }
  .sf-preview { grid-area: preview; align-self: start; position: sticky; top: var(--s-6); margin-top: var(--s-4); }
}

/* their title card: the film's own title design in miniature (title-card.css), phone-shaped at every width.
   On a phone it is capped at 60% of the screen's height so the form stays in reach. */
.opening .tc { width: min(100%, 33.75vh, 22rem); }
.opening-cap { margin-top: var(--s-4); max-width: 22rem; }
.opening-cap .hint { margin: var(--s-1) 0 0; }
@media (min-width: 960px) {
  .opening .tc { width: min(100%, 40.5vh); }
}

/* a missing answer, said right under the field */
.field-error { margin-top: var(--s-2); }
.field { scroll-margin-top: var(--s-5); }

/* pages started on this phone */
.yours { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); max-width: 34rem; }
.yours h2 { font-size: var(--t-h3); font-weight: 500; }
.yours-list { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.yours-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.yours-list a { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; min-height: 44px; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------ organiser: a rail with the page, then the steps */
.manage { display: block; }
.manage-head { padding: var(--s-3) 0 var(--s-6); border-bottom: 1px solid var(--line); }
.status-line { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-5); font-family: var(--font-ui); font-size: var(--t-small); line-height: 1.45; color: var(--text); }
.status-line::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--foil-mid); transform: translateY(-0.05rem); }
.status-line.ready::before { background: var(--text); }
.stats { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); }
.stat:not(:last-child)::after { content: '\00B7'; margin-left: var(--s-3); color: var(--text-faint); }
.stat b { font-weight: 500; color: var(--text); font-variant-numeric: lining-nums; }
.avatars { display: flex; flex-wrap: wrap; margin-top: var(--s-4); padding-left: 0.4rem; }
.avatars span {
  width: 2.3rem; height: 2.3rem; margin-left: -0.4rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.1rem; line-height: 1; color: var(--text);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 2px var(--bg);
}
.avatars span.more { font-family: var(--font-ui); font-style: normal; font-size: 0.75rem; }
.step-nav { display: none; }
.rail-edit { display: none; }

/* phones and tablets: the six steps in a paper strip that stays at the top of the screen */
.step-bar {
  position: sticky; top: 0; z-index: 30; margin: 0 calc(-1 * var(--gutter)); padding: var(--s-1) var(--gutter) 0;
  background-color: var(--bg); background-image: var(--bg-tex); background-size: 480px 480px;
  border-bottom: 1px solid var(--line); box-shadow: 0 10px 18px -18px rgba(35, 31, 28, 0.45);
}
.step-bar ol { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: space-between; gap: var(--s-2); max-width: 41rem; overflow-x: auto; scrollbar-width: none; }
.step-bar ol::-webkit-scrollbar { display: none; }
.step-bar a {
  display: flex; align-items: baseline; gap: 0.3rem; min-height: 2.75rem; padding: 0.72rem 0.1rem 0.6rem; margin-bottom: -1px;
  font-family: var(--font-ui); font-size: 0.875rem; letter-spacing: 0.01em; color: var(--text-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color var(--d-1) var(--ease), border-color var(--d-2) var(--ease);
}
.step-bar a:hover, .step-bar a[aria-current] { color: var(--text); }
.step-bar a[aria-current] { border-bottom-color: var(--text); }
.step-bar .n { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1; color: var(--gold); }
@media (max-width: 1099px) {
  .step, .art-choose, .edit-block { scroll-margin-top: 4.25rem; }
}
@media (max-width: 374px) { .step-bar ol { gap: 0; } .step-bar a { font-size: 0.8125rem; letter-spacing: 0; } .step-bar .n { font-size: 0.95rem; } }

/* at the end of each step, the way to the next one */
.step-next { margin-top: var(--s-6); font-family: var(--font-ui); font-size: var(--t-small); }
.step-next a { display: inline-block; padding: 0.7rem 0; color: var(--text-soft); text-decoration-color: var(--line-strong); }
.step-next a:hover { color: var(--text); }
.step-next a::after { content: '\00A0\2193'; }

@media (min-width: 1100px) {
  .manage { display: grid; grid-template-columns: 18.5rem minmax(0, 41rem); column-gap: clamp(4rem, 7vw, 7rem); justify-content: center; align-items: start; }
  .manage-rail { position: sticky; top: var(--s-5); max-height: calc(100vh - 2.5rem); overflow-y: auto; padding-bottom: var(--s-4); }
  .manage-head { padding-top: var(--s-2); }
  .manage-head .big-name { font-size: clamp(3.4rem, 5vw, 4.6rem); }
  .manage-head .stats { flex-direction: column; gap: 0.15rem; }
  .manage-head .stat::after { display: none; }
  .step-nav { display: block; padding-top: var(--s-5); }
  .step-nav ol { list-style: none; margin: var(--s-3) 0 0; padding: 0; counter-reset: step; }
  .step-nav a {
    display: flex; align-items: baseline; gap: var(--s-3); min-height: 2.6rem; padding: var(--s-2) 0; text-decoration: none;
    font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); border-bottom: 1px solid var(--line);
  }
  .step-nav a:hover { color: var(--text); }
  .step-nav .n { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--gold); min-width: 1.1rem; }
  .rail-edit { display: inline-flex; margin-top: var(--s-4); }
  .manage-body { padding-top: var(--s-2); }
  .step-bar { display: none; }
  .step-next { display: none; } /* the rail beside the steps does this job on wide screens */
}

/* notices at the top of the steps: save your link, pay */
.notice-card { margin-bottom: var(--s-6); }
.notice-card h2 { font-size: var(--t-h3); font-weight: 500; }
.notice-card .notice { margin-top: var(--s-3); max-width: 32rem; }
.notice-card .btn-row { margin-top: var(--s-5); }
.notice-card .save-hint { margin: var(--s-3) 0 0; max-width: 32rem; }
.save-done { margin-top: var(--s-4); font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); }
.save-done .textbtn { font-size: var(--t-small); }

/* one step */
.step { padding-top: var(--s-7); margin-top: var(--s-7); border-top: 1px solid var(--line); scroll-margin-top: var(--s-5); }
.manage-body > .step:first-of-type, .notice-card + .step { border-top: 0; margin-top: 0; padding-top: var(--s-5); }
.step h2 { margin-top: var(--s-2); }
.step-intro { margin-top: var(--s-3); color: var(--text-soft); max-width: var(--measure); }
.step .btn-row { margin-top: var(--s-5); }
.linkbox {
  display: block; width: 100%; margin-top: var(--s-5); font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.45; color: var(--text);
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-2); padding: 0.85rem 1rem; overflow-wrap: anywhere;
  user-select: all; -webkit-user-select: all;
}
.linkbox-label { margin-top: var(--s-5); }
.linkbox-label + .linkbox { margin-top: var(--s-2); }
.own-memory { margin-top: var(--s-5); }

/* memories, as the organiser sees them */
.memory-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-4); }
.memory-item {
  position: relative; padding: clamp(1.15rem, 4vw, 1.6rem); border-radius: var(--r-3); color: var(--text);
  background-color: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.memory-item.is-hidden { background-color: transparent; box-shadow: none; border-style: dashed; }
.memory-item.is-hidden > :not(.actions):not(.flag) { opacity: 0.55; }
.memory-item .who { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.45rem; line-height: 1.2; }
.memory-item .rel { display: block; font-family: var(--font-ui); font-style: normal; font-weight: 400; font-size: var(--t-small); color: var(--text-soft); margin-top: 0.1rem; }
.memory-item .q { font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--text-soft); margin-top: var(--s-3); padding-left: var(--s-3); border-left: 1px solid var(--line-strong); }
.memory-item .body { margin-top: var(--s-3); white-space: pre-line; font-size: 1.15rem; line-height: 1.6; }
.memory-item .body.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.memory-item .photo-img { margin-top: var(--s-4); width: 100%; max-height: 18rem; object-fit: cover; border-radius: var(--r-3); }
.memory-item .vplayer { margin-top: var(--s-4); }
.memory-item .actions { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.memory-item .flag { font-family: var(--font-ui); font-size: var(--t-small); color: var(--danger); margin-top: var(--s-3); }
.empty { font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); margin-top: var(--s-5); padding: var(--s-5); border: 1px dashed var(--line-strong); border-radius: var(--r-3); text-align: center; }
.btn-compact { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--t-small); }

/* a painted scene for a memory without a photo */
.scene-slot { margin-top: var(--s-4); }
.scene-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.scene-offer .hint { margin: 0; flex: 1 1 14rem; }
.scene { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.scene-thumb { position: relative; aspect-ratio: 832 / 1216; border-radius: var(--r-2); overflow: hidden; background: var(--well); box-shadow: var(--shadow-card); }
.scene-thumb img { opacity: 0; transition: opacity var(--d-3) var(--ease); }
.scene-thumb img.is-in { opacity: 1; }
.scene-cap .label { color: var(--text); }
.scene-cap .small { color: var(--text-soft); margin-top: var(--s-1); }
.scene-cap .cluster { gap: 0 var(--s-5); margin-top: var(--s-1); }
.scene .error, .scene-slot .error { margin-top: var(--s-3); }

/* the look: backdrop now showing, their world, painted candidates */
.look { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-6); }
.look-now { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
/* their title card, as the film sets it (title-card.css), phone-shaped */
.look-frame .tc { width: min(100%, 17.5rem, 33.75vh); }
.look-cap .label { color: var(--text-soft); }
.look-kind { display: block; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.2; margin-top: var(--s-2); text-wrap: balance; }
.look-cap .small { color: var(--text-soft); margin-top: var(--s-2); }
.look-cap .textbtn { margin-top: var(--s-2); text-align: left; }
.paint-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.art-left { font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.world-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); }
.world-actions .counter { margin: 0; }
.art-note { margin-top: var(--s-5); }
@media (min-width: 640px) {
  .look { grid-template-columns: 16.5rem minmax(0, 1fr); column-gap: var(--s-7); align-items: start; }
  .look-frame .tc { width: 100%; }
}

.art-choose { margin-top: var(--s-7); }
.art-choose .hint { margin-bottom: 0; }
.art-grid { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-4); }
@media (min-width: 640px) { .art-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); } }
.art-tile { min-width: 0; }
.art-pick {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--well);
  aspect-ratio: 832 / 1216; border-radius: var(--r-3); overflow: hidden; box-shadow: var(--shadow-card);
  outline: 1px solid transparent; outline-offset: 3px; transition: outline-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.is-painting .art-pick { cursor: default; }
.art-pick img { opacity: 0; transition: opacity var(--d-3) var(--ease), transform var(--d-4) var(--ease); }
.art-pick img.is-in { opacity: 1; }
.art-pick:hover img.is-in { transform: scale(1.025); }
.art-pick[aria-pressed='true'] { outline: 2px solid var(--text); outline-offset: 3px; box-shadow: var(--shadow-lift); }
.art-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.art-badge {
  position: absolute; left: 50%; bottom: var(--s-2); z-index: 2; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  padding: 0.45rem 0.6rem 0.4rem; border-radius: var(--r-1); color: var(--ink); background: var(--card); box-shadow: var(--shadow-card);
}
.art-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 2.75rem; }
.art-meta .small { color: var(--text-soft); font-size: 0.8125rem; line-height: 1.25; }
.art-meta .textbtn { font-size: 0.8125rem; }

/* painting: a quiet sheet of light passing over the paper while the picture is made */
.art-wait { position: absolute; inset: 0; display: grid; place-items: center; background: var(--well); overflow: hidden; }
.art-wait::before {
  content: ''; position: absolute; inset: -40% -60%;
  background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--surface) 85%, transparent) 50%, transparent 62%);
  animation: ia-sheen 2.6s var(--ease) infinite;
}
.art-wait span { position: relative; font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-soft); }
@keyframes ia-sheen { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
@media (prefers-reduced-motion: reduce) { .art-wait::before { animation: none; opacity: 0.5; } }

.scenes-block { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.scenes-block h3 { font-weight: 500; }
.scenes-block p { margin-top: var(--s-2); color: var(--text-soft); max-width: var(--measure); }
.scenes-block .btn-row { margin-top: var(--s-4); }
.scenes-progress { font-family: var(--font-ui); font-size: var(--t-small); color: var(--text); }
/* the painted scenes, laid out in step 3 like prints */
.scene-strip { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: var(--s-4); max-width: 36rem; }
.strip-item { min-width: 0; }
.strip-item .art-wait span { font-family: var(--font-ui); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); text-align: center; padding: 0 var(--s-1); }
.scenes-block .strip-who { margin-top: var(--s-2); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.strip-remove { font-size: 0.875rem; }

/* step 6: unlock, then send */
.send-note { margin-top: var(--s-4); max-width: var(--measure); font-size: 1.1rem; line-height: 1.5; }
.send-empty { margin: var(--s-3) 0 0; max-width: var(--measure); }
.send-confirm { margin-top: var(--s-5); max-width: 32rem; }
.send-confirm p { font-size: 1.1rem; line-height: 1.5; }
.send-confirm .btn-row { margin-top: var(--s-4); }
.relock { margin-top: var(--s-6); }
.show-all-row .btn { width: 100%; max-width: 24rem; }

/* the poem, on the organiser page: a printed insert */
.poem-card {
  margin-top: var(--s-5); padding: clamp(1.75rem, 6vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem); text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 3.8vw, 1.5rem); line-height: 1.55; white-space: pre-line; color: var(--text);
}
.poem-card.off { opacity: 0.5; }
.poem-meta { font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); margin-top: var(--s-3); }
.poem-meta.stale { color: var(--gold); }
.poem-form .field { margin-top: var(--s-5); }

/* watch it first */
.watch-row { margin-top: var(--s-5); }

/* change the details */
.edit-block { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); scroll-margin-top: var(--s-5); }
.edit-block summary { list-style: none; cursor: pointer; }
.edit-block summary::-webkit-details-marker { display: none; }
.edit-block form { margin-top: var(--s-5); max-width: 32rem; }

/* ------------------------------------------------------------ contributor */
.add-main { max-width: calc(36rem + 2 * var(--gutter)); }
.add-form .field + .field { margin-top: var(--s-7); }
.two-up { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.add-form .two-up .field + .field { margin-top: 0; }
.add-form .two-up + .field { margin-top: var(--s-7); }
@media (min-width: 640px) { .two-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); } }

/* the questions: a short printed menu, one chosen */
.chips.questions { display: block; margin-top: var(--s-2); border-top: 1px solid var(--line); }
.chips.questions .chip {
  display: flex; align-items: center; gap: var(--s-4); width: 100%; min-height: 3.25rem; padding: 0.7rem 0.25rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  font-family: var(--font-read); font-style: italic; font-size: 1.15rem; line-height: 1.35; letter-spacing: 0; color: var(--text-soft); background: transparent;
}
.chips.questions .chip::before { content: ''; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow var(--d-1) var(--ease); }
.chips.questions .chip:hover { color: var(--text); background: transparent; }
.chips.questions .chip[aria-pressed='true'] { color: var(--text); background: transparent; }
.chips.questions .chip[aria-pressed='true']::before { box-shadow: inset 0 0 0 1px var(--text), inset 0 0 0 4px var(--bg), inset 0 0 0 9px var(--text); }

/* the card they write in */
.write-field .field-top { display: block; }
.writing-card {
  position: relative; margin-top: var(--s-3); padding: clamp(1.4rem, 5vw, 2.2rem) clamp(1.1rem, 5vw, 2.2rem) var(--s-4);
  background-color: var(--card); border-radius: var(--r-3);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line), inset 0 0 0 7px var(--card), inset 0 0 0 8px var(--line);
  transition: box-shadow var(--d-2) var(--ease);
}
.writing-card:focus-within { box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line-strong), inset 0 0 0 7px var(--card), inset 0 0 0 8px var(--line-strong), 0 0 0 3px color-mix(in srgb, var(--focus) 26%, transparent); }
.writing-card .prompt { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.45rem, 4.6vw, 1.75rem); line-height: 1.25; text-align: center; color: var(--text); text-wrap: balance; padding: 0 var(--s-2); }
.writing-card .prompt-rule { display: block; width: 3rem; height: 1px; margin: var(--s-4) auto var(--s-3); background: var(--line-strong); }
.writing-card .textarea.words { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; min-height: 15.75rem; background-color: var(--card); resize: none; overflow: hidden; }
.writing-card .textarea.words:focus { box-shadow: none; }
.writing-card .sign { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.3; text-align: right; color: var(--text); margin-top: var(--s-2); overflow-wrap: anywhere; }
.writing-card .sign.is-empty { color: var(--text-faint); }
.writing-card .counter { margin-top: var(--s-2); }

/* voice recorder */
.recorder { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.rec-btn {
  position: relative; flex: none; width: 4rem; height: 4rem; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-card); -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--d-1) var(--ease);
}
.rec-btn:hover { box-shadow: inset 0 0 0 1px var(--text), var(--shadow-card); }
.rec-btn .rec-dot { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--danger); transition: border-radius var(--d-1) var(--ease), width var(--d-1) var(--ease), height var(--d-1) var(--ease); }
.recorder[data-state='recording'] .rec-dot { width: 1.1rem; height: 1.1rem; border-radius: var(--r-1); }
.recorder[data-state='recording'] .rec-btn::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 1px var(--danger); animation: ia-ring 1.8s var(--ease) infinite; }
.recorder[data-state='asking'] .rec-btn { opacity: 0.7; }
.rec-info { flex: 1; min-width: 0; }
.rec-title { font-family: var(--font-ui); font-weight: 500; font-size: var(--t-ui); }
.rec-time { font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.rec-wave { display: block; width: 100%; height: 34px; margin-top: var(--s-2); }
.rec-done { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.rec-done .btn-row { gap: 0 var(--s-5); }
.rec-note { margin-top: var(--s-2); color: var(--text-soft); }
@keyframes ia-ring { from { transform: scale(0.94); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }

/* one photo, laid on the page like a print */
.photo-pick { display: flex; align-items: center; gap: var(--s-4) var(--s-5); flex-wrap: wrap; margin-top: var(--s-2); }
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.photo-pick img { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--r-1); border: 6px solid var(--card); box-shadow: var(--shadow-lift), 0 0 0 1px var(--line); }
.photo-pick .btn { cursor: pointer; }
.photo-pick .btn:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }

.add-submit { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.add-submit .error { margin-top: 0; margin-bottom: var(--s-4); }
.add-submit .secret-note { margin-top: var(--s-3); color: var(--text-soft); }
.add-submit .ai-note { margin-top: var(--s-2); max-width: var(--measure); font-size: 0.875rem; line-height: 1.5; color: var(--text-soft); }

/* ------------------------------------------------------------ closing and simple pages */
.done-view { padding: var(--s-7) 0 var(--s-6); max-width: 36rem; }
.done-view h1 { font-size: clamp(2.5rem, 7vw, 3.6rem); }
.done-view > p { margin-top: var(--s-4); }
.done-view .btn-row { margin-top: var(--s-6); }
.done-view .rule-ornament { margin: 0 0 var(--s-6); max-width: 14rem; }
.done-view.center { margin-left: auto; margin-right: auto; }
.done-view.center .rule-ornament { margin-left: auto; margin-right: auto; }
.done-view.center .btn-row { justify-content: center; }
.done-view.center .lede { margin-left: auto; margin-right: auto; }
.done-view.center h1 { text-wrap: balance; }
.done-view.center .wait-line { margin-left: auto; margin-right: auto; }
/* notices (404, a link that isn't working, payment): the seal between hairlines, h1, one lede, one action, then any aside */
.notice-page > .done-aside { margin-top: var(--s-7); }
.notice-page > .done-aside + .done-aside { margin-top: var(--s-4); }
.done-aside { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--t-small); color: var(--text-soft); }
.done-aside a { color: var(--text); }
.done-aside + .done-aside { margin-top: var(--s-4); padding-top: 0; border-top: 0; }
.done-view .small { color: var(--text-soft); }

/* paid: a hairline that fills while Stripe confirms */
.wait-line { display: block; width: 100%; max-width: 16rem; height: 1px; margin-top: var(--s-6); background: var(--line); overflow: hidden; position: relative; }
.wait-line::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--text); animation: ia-wait 1.8s var(--ease) infinite; }
@keyframes ia-wait { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .wait-line::after { animation: none; width: 100%; opacity: 0.35; } }

/* terms: a short document */
.plain { max-width: calc(38rem + 2 * var(--gutter)); }
.plain h1 { margin-top: var(--s-4); }
.plain h1 + p { margin-top: var(--s-4); font-size: var(--t-lede); color: var(--text-soft); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.plain h2 { font-size: var(--t-h3); font-weight: 500; margin: var(--s-7) 0 var(--s-3); }
.plain p + p { margin-top: var(--s-4); }
.plain a { text-decoration-color: var(--text-faint); }
@media (min-width: 900px) {
  /* a document from a good stationer: headings in the margin, text in a reading column */
  .plain { max-width: calc(58rem + 2 * var(--gutter)); display: grid; grid-template-columns: 15rem minmax(0, 38rem); column-gap: var(--s-7); align-content: start; }
  .plain > h1, .plain > h1 + p { grid-column: 1 / -1; max-width: none; }
  .plain > h2 { grid-column: 1; margin: 0; padding-top: var(--s-6); font-size: 1.45rem; }
  .plain > p { grid-column: 2; }
  .plain > h2 + p { margin-top: 0; padding-top: calc(var(--s-6) + 0.2rem); }
  .plain > h2 ~ h2, .plain > h2 ~ h2 + p { margin-top: var(--s-6); border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------ small shared details */
.error .textbtn { display: flex; color: var(--danger); text-decoration-color: currentColor; margin-top: var(--s-1); }
.art-note { font-size: 1.1rem; line-height: 1.55; max-width: 30rem; }
/* organiser page: the site's AI pictures for today are used up. Not a mistake, so it reads as a calm note, not a red box. */
.manage .error.is-quiet {
  font-family: var(--font-read); font-style: italic; font-size: 1.1rem; line-height: 1.55; max-width: 30rem; color: var(--text-soft);
  background: none; border-left: 1px solid var(--gold); border-radius: 0; padding: 0.2rem 0 0.2rem 1rem;
}
/* inside a memory's card it sits among people's words, so it is set in the UI face, like the card's other notes */
.manage .scene-slot .error.is-quiet { font-family: var(--font-ui); font-style: normal; font-size: var(--t-small); line-height: 1.5; }