/* The Rune-Well — night water, cold stone, one ember. */

:root {
  --night:  #070a10;
  --deep:   #0c131c;
  --stone:  #141c27;
  --stone-2:#1b2531;
  --ink:    #eceae4;
  /* The two greys carry most of the small text on the page — glosses, notes,
     captions, the footer. They are set by contrast rather than by eye: each
     clears 4.5:1 against the lightest ground it is ever laid on (--stone-2),
     and so clears it against every darker one as well. The old pair sat at
     2.7:1 and 5.3:1 there, which read as atmosphere up close and as nothing
     at all on a dim screen.

       --muted  7.0:1 on stone-2,  9.0:1 on night
       --faint  4.7:1 on stone-2,  6.1:1 on night

     Anything darker than --faint does not belong in text. Use --edge for
     hairlines, which are not read. */
  --muted:  #a7afbb;
  --faint:  #858f9d;
  --ember:  #d8924e;
  --ember-soft: rgba(216, 146, 78, 0.16);
  --glow:   #5cb8a9;
  --edge:   rgba(255, 255, 255, 0.09);
  --edge-strong: rgba(255, 255, 255, 0.16);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shell: 46rem;
  --radius: 14px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* The well, seen from above: a slow cold light under everything. */
.depths {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 40rem at 50% -10%, rgba(92, 184, 169, 0.10), transparent 65%),
    radial-gradient(40rem 30rem at 85% 20%, rgba(216, 146, 78, 0.06), transparent 60%),
    linear-gradient(180deg, var(--deep) 0%, var(--night) 55%);
}

/* ---------------------------------------------------------------- chrome */

.masthead {
  padding: 1.75rem 0 0;
}

/* The masthead is held to the same column as the page under it — same width,
   same gutter — so the sigil stands over the text rather than out at the
   window's edge, and the switcher lines up with the text's right margin. */
.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* On a narrow phone the wordmark gives way before the header spills off the
     side of the page. */
  min-width: 0;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.brand:hover { color: var(--ink); }

.brand-glyph {
  width: 14px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell {
  flex: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.footing {
  padding: 2rem 1.5rem 3rem;
  text-align: center;
}
.footing p {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--faint);
}

/* ------------------------------------------------------------------ type */

.eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--glow);
}

.hero-title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.lede {
  margin: 0;
  max-width: 34rem;
  font-size: 1.1875rem;
  color: #c8ccd3;
}

.section-title {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.step {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.ask {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  line-height: 1.24;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hero { margin-bottom: 4.5rem; }

/* ------------------------------------------------------------- the paths */

.paths { margin-bottom: 4.5rem; }

.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.path { margin: 0; display: flex; }

.path-card {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.5rem;
  width: 100%;
  padding: 1.5rem 1.375rem 1.25rem;
  text-align: left;
  background: linear-gradient(180deg, var(--stone) 0%, rgba(20, 28, 39, 0.55) 100%);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.path-card:hover,
.path-card:focus-visible {
  border-color: var(--edge-strong);
  transform: translateY(-3px);
  background: linear-gradient(180deg, var(--stone-2) 0%, rgba(20, 28, 39, 0.6) 100%);
}
.path-card:hover .path-glyph { color: var(--ember); }
.path-card:hover .path-go { color: var(--ember); }

.path-glyph {
  width: 22px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--glow);
  transition: color 0.2s ease;
}

.path-name { font-size: 1.25rem; }

.path-blurb {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

.path-go {
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.2s ease;
}

/* --------------------------------------------------------------- the rite */

.rite-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.25rem;
}
.rite-steps li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  align-items: start;
}
.rite-n {
  font-family: var(--serif);
  font-style: italic;
  color: var(--glow);
  text-align: center;
}
.rite-steps p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.rite-steps strong { color: var(--ink); font-weight: 400; }

/* ------------------------------------------------------------- the cards */

.card {
  padding: 2rem 1.75rem;
  background: linear-gradient(180deg, var(--stone) 0%, rgba(20, 28, 39, 0.5) 100%);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}

.card-lede { margin: 0 0 1.75rem; color: var(--muted); }

.card-message { text-align: center; }
.message-glyph {
  width: 26px; height: 36px;
  fill: none; stroke: var(--faint); stroke-width: 8;
  stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: 1rem;
}
.card-message .card-foot { justify-content: center; }

.rail {
  height: 2px;
  margin-bottom: 1.25rem;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
  overflow: hidden;
}
.rail-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--glow), var(--ember));
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.warn {
  margin: 0 0 1.25rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ember);
  background: var(--ember-soft);
  border-radius: 8px;
}

/* ----------------------------------------------------------- the answers */

.answer { display: grid; gap: 1.5rem; }

.options { display: grid; gap: 0.5rem; }

.option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--edge);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.option:hover { border-color: var(--edge-strong); background: rgba(255, 255, 255, 0.05); }

.option input { margin: 0.4rem 0 0; accent-color: var(--ember); flex: none; }
.option:has(input:checked) {
  border-color: var(--ember);
  background: var(--ember-soft);
}
.option span { font-size: 1rem; }

/* The ends belong under the row they describe, one at each end of it, so the
   scale reads as a scale. In the markup they still straddle the marks — the
   low end is read out before the numbers, which is the order that makes sense
   to anyone listening to the page rather than looking at it. */
.scale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1rem;
  align-items: start;
}
.scale-marks {
  grid-row: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}
.scale-end {
  grid-row: 2;
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}
.scale-end:first-of-type { grid-column: 1; }
.scale-end:last-of-type { grid-column: 2; text-align: right; }
.mark {
  display: grid;
  place-items: center;
  padding: 0.875rem 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--edge);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mark:hover { border-color: var(--edge-strong); }
.mark input { position: absolute; opacity: 0; pointer-events: none; }
.mark:has(input:checked) { border-color: var(--ember); background: var(--ember-soft); color: var(--ember); }

textarea, input[type="text"], input[type="date"] {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--edge);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--glow); outline-offset: 1px; border-color: transparent; }
textarea::placeholder { color: var(--faint); }

/* A field is a label around one control, or — where the birth month needs two
   — a fieldset, which arrives with a frame and margins of its own to undo. */
.field { display: grid; gap: 0.5rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field-label { font-family: var(--sans); font-size: 0.875rem; color: var(--muted); padding: 0; }

/* The month and the year, side by side. The month is the wider of the two
   because its longest name is a good deal longer than four digits. */
.field-pair {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0.625rem;
}

.picker {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  padding: 0.875rem 2.25rem 0.875rem 1rem;
  background-color: rgba(0, 0, 0, 0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e97a4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 6px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  cursor: pointer;
}
/* Nothing chosen yet reads as a placeholder, like the name field's does. */
.picker:invalid { color: var(--faint); }
.picker:focus { outline: 2px solid var(--glow); outline-offset: 1px; border-color: transparent; }
/* The dropped-open list is drawn by the browser, so it needs its own colours
   or it falls back to a white sheet in a dark page. */
.picker option { background: var(--stone); color: var(--ink); }
.field-note { font-family: var(--sans); font-size: 0.8125rem; color: var(--faint); }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--ember);
  border: 1px solid var(--ember);
  border-radius: 999px;
  color: #16110a;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.btn:hover { filter: brightness(1.09); transform: translateY(-1px); }

.btn-quiet {
  background: transparent;
  border-color: var(--edge-strong);
  color: var(--muted);
  font-weight: 500;
}
.btn-quiet:hover { color: var(--ink); }

.back {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--faint);
  text-decoration: none;
  cursor: pointer;
}
.back:hover { color: var(--ink); }

/* ------------------------------------------------------- the switcher */

/* A list of the languages, each under its flag and its own name. It sits in
   the masthead at every step, including mid-questionnaire. */
.tongues {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* The label is for screen readers; the flag and the endonym say the rest. */
.tongues-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tongue-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.4rem 2rem 0.4rem 0.85rem;
  background-color: rgba(0, 0, 0, 0.25);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e97a4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 9px 6px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tongue-select:hover { color: var(--ink); border-color: var(--edge-strong); }
.tongue-select:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; }

/* The dropped-open list is drawn by the browser, so it needs colours of its
   own or it falls back to a white sheet in a dark page. */
.tongue-select option {
  background: var(--stone);
  color: var(--ink);
}

.tongue-go {
  padding: 0.4rem 0.85rem;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
  cursor: pointer;
}

/* ---------------------------------------------------------- the ceremony */

.ceremony { text-align: center; }
.ceremony-title { margin-bottom: 2.5rem; }

/* The pouch and the staves share one grid cell, so the staves rise out of the
   circle without a hand-tuned negative margin to keep in step. */
.stage {
  display: grid;
  place-items: center;
  margin-bottom: 2.5rem;
}
.stage > * { grid-area: 1 / 1; }

.pouch {
  position: relative;
  width: 17rem;
  height: 17rem;
  animation: drift 60s linear infinite;
}

.pebble {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 10px;
  margin: -5px 0 0 -3.5px;
  background: var(--stone-2);
  border: 1px solid var(--edge);
  border-radius: 2px;
  transform: rotate(calc(var(--i) * 15deg)) translateY(-7.5rem);
  opacity: 0.75;
}

@keyframes drift { to { transform: rotate(360deg); } }

.stones { width: 100%; }

.casts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast { text-align: center; }

.stone {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  max-width: 7.5rem;
  margin: 0 auto 1rem;
  background: linear-gradient(160deg, var(--stone-2) 0%, #0f151d 100%);
  border: 1px solid var(--edge-strong);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.cast.is-reversed .stone { transform: rotate(180deg); }

.glyph {
  width: 46%;
  fill: none;
  stroke: var(--ember);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(216, 146, 78, 0.3));
}

.cast-position { margin: 0; font-size: 1.0625rem; }
.cast-gloss { margin: 0.125rem 0 0.5rem; font-size: 0.8125rem; font-style: italic; color: var(--faint); }
.cast-name {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.cast-orientation { color: var(--faint); text-transform: none; letter-spacing: 0; font-style: italic; }

.ceremony-caption {
  min-height: 1.7em;
  margin: 0;
  font-style: italic;
  color: var(--muted);
  transition: opacity 0.4s ease;
}
.ceremony-caption a { color: var(--glow); }

/* The staged states are added by ceremony.js, so with JavaScript off the
   staves simply render in place. */
.ceremony.is-staging .stones .cast { opacity: 0; transform: translateY(14px) scale(0.94); }
.ceremony.is-staging .stones .cast .glyph { stroke-dasharray: 100; stroke-dashoffset: 100; }

.ceremony.is-staging .pouch { animation-duration: 6s; }
.ceremony.is-casting .pouch { animation-duration: 0.9s; opacity: 0.35; transition: opacity 1.4s ease; }
.ceremony.is-settled .pouch { opacity: 0.12; animation-duration: 40s; }

.stones .cast {
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.stones .cast.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.stones .cast.is-revealed .glyph {
  animation: carve 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes carve { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------- while she is writing */

/* The wait after payment is a minute or two long and has nothing to report
   until the poll comes back. Rather than a spinner — which would say the page
   is loading, when what is happening is that someone is writing — the well is
   shown still at work: the pouch turning slower than it did at the casting,
   and the three staves rising through the water one after another, each
   carving itself in as it surfaces.

   It runs on the stage the ceremony uses, so the visitor is watching the same
   water they watched a minute ago. The cycle is driven off --staves, the count
   of staves the template put in, so the timing holds if a reading ever shows
   more or fewer than three. */
.scribing { margin-bottom: 2.5rem; }

/* The pouch is unhurried here: she is not rushing and neither is it. */
.scribing .pouch { animation-duration: 120s; opacity: 0.55; }

/* A slow breath of light off the water, under everything else. */
.scribing::before {
  content: "";
  grid-area: 1 / 1;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ember-soft) 0%, transparent 70%);
  animation: welling 7s ease-in-out infinite;
}

@keyframes welling {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  50%      { opacity: 0.65; transform: scale(1.06); }
}

/* Every stave sits in the same cell and takes its turn, so the well shows one
   at a time however many there are. */
.surfacing {
  display: grid;
  place-items: center;
}
.surfacing-stave {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 6rem;
  height: 8rem;
  opacity: 0;
  animation: surfacing calc(var(--staves) * 4.2s) ease-in-out infinite;
  animation-delay: calc(var(--i) * 4.2s);
}
/* The turn goes on the glyph, since the wrapper's transform is the rise. */
.surfacing-stave.is-reversed .glyph { transform: rotate(180deg); }

.surfacing-stave .glyph {
  width: 100%;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* The same clock as the rise, so a stave is carved by the time it is up. */
  animation: carving calc(var(--staves) * 4.2s) ease-in-out infinite;
  animation-delay: calc(var(--i) * 4.2s);
}

@keyframes surfacing {
  0%   { opacity: 0; transform: translateY(1.25rem) scale(0.94); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  28%  { opacity: 1; transform: translateY(0) scale(1); }
  40%  { opacity: 0; transform: translateY(-1.1rem) scale(1.03); }
  100% { opacity: 0; transform: translateY(1.25rem) scale(0.94); }
}

@keyframes carving {
  0%  { stroke-dashoffset: 100; }
  14% { stroke-dashoffset: 0; }
  /* Carved for the rest of its turn: a stave that unwrote itself on the way
     back down would read as the well taking something away. */
  100% { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------- the reading */

.reading-head { margin-bottom: 2.5rem; }

.greeting {
  margin: 0;
  font-size: clamp(1.375rem, 3.6vw, 1.75rem);
  line-height: 1.36;
  font-weight: 400;
  font-style: italic;
  color: #dfdcd4;
}

.reading .casts { margin-bottom: 3rem; }
.reading .stone { max-width: 6rem; }

.prose { margin-bottom: 2.75rem; }
.prose p { margin: 0 0 1.25rem; }
.prose p:last-child { margin-bottom: 0; }

.opening p:first-child::first-letter {
  float: left;
  margin: 0.32rem 0.6rem 0 0;
  font-size: 3.4rem;
  line-height: 0.8;
  color: var(--ember);
}

.passage-heading {
  margin: 2rem 0 0.875rem;
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--glow);
}
.passage-heading:first-of-type { margin-top: 0; }

.closing { padding-top: 1.5rem; border-top: 1px solid var(--edge); }
.closing-word { font-style: italic; color: #d6d3cb; }

.reading-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--edge);
}
.keep { font-family: var(--sans); font-size: 0.8125rem; color: var(--faint); max-width: 22rem; }

/* The two things left to do, at either end of one row: leaving for another
   matter on the left, keeping this reading on the right. The ember button is
   the one worth reaching for, so it takes the end the eye finishes on. */
.reading-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 0;
}

/* --------------------------------------------- what is said in a dialog */

/* Two things are said over the page rather than on it: the parting word on the
   way out to another casting, and the notice that the fairy is away. They are
   the same card, so they are described once. */
.parting,
.away {
  width: min(30rem, calc(100vw - 2rem));
  padding: 2rem;
  background: var(--stone);
  border: 1px solid var(--edge-strong);
  border-radius: 14px;
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.parting::backdrop,
.away::backdrop { background: rgba(4, 6, 10, 0.72); }

.parting-title,
.away-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 400;
}
.parting-body,
.away-body {
  margin: 0 0 1.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

/* The address, and the one message it is for. It sits inside the notice rather
   than in front of it: the card is complete without it, and a visitor who
   closes it without typing anything has lost nothing. */
.away-ask {
  margin: 0 0 1.5rem;
  padding: 1.125rem 1.125rem 1rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--edge);
  border-radius: 12px;
}
/* The same complaint the question card uses, sized for a card inside a card. */
.away-ask .warn {
  margin: 0 0 0.625rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
}
.away-ask-label {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--ink);
}
/* The field and its button read as one control, the way the link and its copy
   button do on the parting card. */
.away-ask-row {
  display: flex;
  gap: 0.5rem;
}
.away-email {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--edge);
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.8125rem;
}
.away-email::placeholder { color: var(--faint); }
.away-email:focus { outline: 2px solid var(--glow); outline-offset: 1px; }
.away-ask-row .btn { flex: none; padding: 0.75rem 1.125rem; }

.away-ask-note,
.away-said {
  margin: 0.75rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--faint);
}
/* Said in place of the form once the address is written down. */
.away-said {
  margin: 0;
  font-size: 0.875rem;
  color: var(--glow);
}

/* Nothing to weigh up here — there is only the way out — so the one button
   goes where the eye leaves the card. */
.away-acts {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 34rem) {
  .away-ask-row { flex-direction: column; }
}

/* The link and its copy button read as one control. */
.parting-link {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.parting-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--edge);
  border-radius: 10px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
}
.parting-url:focus { outline: 2px solid var(--glow); outline-offset: 1px; }
.parting-copy { flex: none; padding: 0.75rem 1.125rem; }
/* Said, briefly, in place of the word it replaced. */
.parting-copy.is-said { background: var(--glow); border-color: var(--glow); }

.parting-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* ------------------------------------------------------------- the seal */

/* The shimmer and the seal itself share one grid cell, so the card is as tall
   as the taller of the two. Absolutely positioning the seal over the shimmer
   would make the card's height depend on decoration alone, and any wording that
   ran a line longer — or any narrow enough screen — would be clipped off the
   top by the overflow rule. */
.seal {
  position: relative;
  display: grid;
  margin-top: 1rem;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--edge);
}
.seal-shimmer,
.seal-body {
  grid-area: 1 / 1;
}

/* Decorative only: bars of light standing in for text that is not on this
   page. Nothing sealed is rendered, hidden, or stored in an attribute here.

   It shares its grid cell with the body and stretches over the whole card, so
   it lies across the button as well. opacity and mask each make it a stacking
   context, which paints it above an ordinary in-flow sibling however the two
   are ordered in the markup — so without this it took the press meant for the
   seal and the button looked dead. Decoration takes no clicks. */
.seal-shimmer {
  display: grid;
  align-content: start;
  gap: 0.875rem;
  padding: 2rem 1.75rem 8rem;
  pointer-events: none;
  opacity: 0.5;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 62%);
}
.seal-shimmer span {
  display: block;
  height: 0.6rem;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.13), rgba(255,255,255,0.06));
  background-size: 220% 100%;
  animation: sheen 5.5s ease-in-out infinite;
}
.seal-shimmer span:nth-child(even) { animation-delay: 0.7s; }
.seal-shimmer span:nth-child(3n) { animation-delay: 1.4s; }

@keyframes sheen {
  0%, 100% { background-position: 180% 0; }
  50% { background-position: -60% 0; }
}

/* Positioned, so the words and the button stand above the shimmer rather than
   under it: the gradient here is what the bars are meant to fade into. */
.seal-body {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: 2rem 1.75rem 2.25rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(7, 10, 16, 0.4) 0%, var(--deep) 42%);
}

/* The lock over the seal. Drawn rather than lit: the ember belongs to the
   button below, and an icon that outshone it would be pulling the eye away from
   the one thing there is to press. */
.seal-lock {
  display: block;
  width: 1.75rem;
  height: auto;
  margin: 0 auto;
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
}
.seal-case {
  fill: rgba(216, 146, 78, 0.08);
  stroke: var(--ember);
}
.seal-shackle { stroke: var(--ember); }
.seal-pin { stroke: var(--ember); fill: none; }

.seal-body h2 {
  margin: 1rem 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 400;
}
.seal-body p {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.btn-seal { padding: 0.875rem 1.75rem; font-size: 1rem; }

.seal-note {
  margin: 1rem auto 0 !important;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--faint) !important;
}

/* -------------------------------------------------------------- narrow */

@media (max-width: 34rem) {
  .shell { padding: 2rem 1.125rem 4rem; }
  .masthead { padding: 1.25rem 0 0; }
  .masthead-inner { padding: 0 1.125rem; gap: 0.75rem; }
  .tongue-select { padding: 0.35rem 1.75rem 0.35rem 0.65rem; background-position: right 0.6rem center; }
  .brand { letter-spacing: 0.12em; }
  .card { padding: 1.5rem 1.25rem; }
  .pouch { width: 13rem; height: 13rem; }
  .pebble { transform: rotate(calc(var(--i) * 15deg)) translateY(-5.75rem); }
  /* Stacked staves are taller than the pouch, so let the stage grow instead.
     The waiting stage holds one small stave and stays centred in its ring. */
  .stage { align-items: start; padding-top: 1rem; }
  .scribing { align-items: center; padding-top: 0; }
  .casts { grid-template-columns: 1fr; gap: 2rem; }
  .stone { max-width: 5.5rem; }
  .reading-foot { flex-direction: column; align-items: flex-start; }
  /* Stacked, so neither the link nor the button is squeezed to nothing. */
  .reading-acts { flex-direction: column; align-items: stretch; }
  .reading-acts .btn { text-align: center; }
  .parting { padding: 1.5rem; }
  .parting-link { flex-direction: column; }
}

/* ------------------------------------------------- motion, when unwanted */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .pouch { animation: none; }
  .ceremony .stones .cast { opacity: 1 !important; transform: none !important; }
  .ceremony .glyph { stroke-dashoffset: 0 !important; }

  /* One stave, carved and still, rather than three taking turns — the staves
     stack in a single cell, so without this they would all be drawn at once
     or, since the global rule above lands every animation on its last frame,
     none of them would. */
  .scribing::before { animation: none; opacity: 0.4; transform: none; }
  .surfacing-stave { animation: none; opacity: 0; transform: none; }
  .surfacing-stave:first-child { opacity: 1; }
  .surfacing .glyph { animation: none; stroke-dashoffset: 0; }
}