/* Night River, the Contact page: "first light". Only contact.html loads this file.
   The scene is the page: one held frame (the river reaches open water at dawn) with the words and one sheet set into it.
   Four quarters around the horizon: words top left in the sky, the owl top right, the river low on the left, the sheet
   low on the right, lying on the water like a writing desk.
   Colours come from tokens.css and from the token block below. No family name is written outside the first block. */

/* TEMPORARY TYPE TOKENS. The site's new pair arrives as main/assets/css/type.css (--font-display, --font-text,
   --font-mono and a scale). Until that file is linked here, these hold the dark site's current faces. Delete this
   one block when type.css is linked; nothing else in this file names a family. */
:root {
}

/* the page's own tokens */
:root {
  /* first light: what the scene (assets/js/contact/scene.js) reads */
  --dawn-zenith: #060a26;
  --dawn-plum: #2b1c5c;
  --dawn-teal: #1c8f9b;
  --dawn-coral: #ff7a59;
  --dawn-gold: #ffb547;
  --dawn-mist: #7f78b4;
  --dawn-water-deep: #0a2342;
  --dawn-water-shallow: #2ca6a4;

  /* the sheet and its paper */
  --ct-sheet: rgb(12 11 38 / 0.82);
  --ct-sheet-solid: #0e0c2b;
  --ct-paper: rgb(245 241 255 / 0.065);
  --ct-paper-focus: rgb(245 241 255 / 0.10);
  --ct-rule: rgb(207 214 255 / 0.11);
  --ct-words-scrim: rgb(8 8 28 / 0.58);

  /* one unit for the whole frame: rem first, a small share of the width, a rem limit, so it follows browser zoom */
  --u: clamp(1rem, 0.75rem + 0.26vw, 1.125rem);

  /* the type scale of this page (steps of the unit) */
  --ct-xs: calc(var(--u) * 0.8125);
  --ct-sm: calc(var(--u) * 0.9375);
  --ct-base: calc(var(--u) * 1.0625);
  --ct-lg: calc(var(--u) * 1.3125);
  --ct-xl: calc(var(--u) * 1.75);
  --ct-2xl: calc(var(--u) * 2.25);
  --ct-hero: min(calc(var(--u) * 6.6), 15.5vw);

  --ct-gutter: clamp(1.25rem, 4.4vw, 12rem);
  --ct-sheet-w: calc(var(--u) * 66);
}

.contact-dawn main { position: relative; }

/* ------------------------------------------------------------------ the frame */
.dawn { position: relative; min-height: 100svh; background: var(--color-bg-deep); }
.dawn__stage { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; z-index: 0; }
.dawn__stage picture { display: contents; }
/* a quiet shade at the very top (the header sits on it) and at the foot (the footer meets it) */
.dawn__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--color-scrim) 0, transparent calc(var(--header-h) + 3rem)), linear-gradient(0deg, var(--color-scrim) 0, transparent 12%); }
html[data-scene="poster"] .dawn__stage.slot::before { background: radial-gradient(34% 18% at 40% 42%, color-mix(in srgb, var(--dawn-coral) 30%, transparent), transparent 72%); }

.dawn__content { position: relative; z-index: 2; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: calc(var(--u) * 1.5); padding: calc(var(--header-h) + var(--u) * 1.5) var(--ct-gutter) calc(var(--u) * 2.2); pointer-events: none; }
.dawn__content > * { pointer-events: auto; }

/* ------------------------------------------------------------------ the words, in the sky above the horizon */
.dawn__words { position: relative; grid-column: 1; grid-row: 1; justify-self: start; display: grid; gap: calc(var(--u) * 1); justify-items: start; max-width: calc(var(--u) * 42); margin-top: clamp(0px, 3.2svh, calc(var(--u) * 2.5)); font-family: var(--font-text); }
.dawn__words::before { content: ""; position: absolute; inset: calc(var(--u) * -5) calc(var(--u) * -7) calc(var(--u) * -5) calc(var(--u) * -9); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--ct-words-scrim) 0%, var(--ct-words-scrim) 36%, transparent 100%); }
.ct-eyebrow { display: flex; align-items: center; gap: calc(var(--u) * 0.75); font-family: var(--font-text); font-size: var(--ct-sm); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); }
.ct-eyebrow::before { content: ""; width: calc(var(--u) * 2.25); height: 2px; border-radius: 2px; background: var(--gradient-brand); }
.dawn__words h1 { font-family: var(--font-display); font-size: var(--ct-hero); line-height: 0.92; letter-spacing: -0.03em; color: var(--color-ink); }
.ct-lede { font-size: var(--ct-lg); line-height: 1.5; color: var(--color-ink); max-width: 31ch; }
/* the address stands on its own small pane of the same glass as the sheet: it stays readable over the first light */
.ct-address { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.4) calc(var(--u) * 1.1); margin-top: calc(var(--u) * 0.3); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.55) calc(var(--u) * 0.45) calc(var(--u) * 1.35); border-radius: calc(var(--u) * 2.2); background: var(--ct-sheet); border: 1px solid var(--color-glass-line); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) var(--color-shadow), inset 0 1px 0 color-mix(in srgb, var(--color-moon) 16%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
html:not(.js) .ct-address { padding-right: calc(var(--u) * 1.35); }
.ct-address .mail { font-family: var(--font-display); font-size: var(--ct-2xl); line-height: 1.2; }
.ct-copy { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.45); min-height: calc(var(--u) * 2.5); padding: 0 calc(var(--u) * 0.95); border-radius: var(--radius-pill); border: 1px solid var(--color-control-line); background: color-mix(in srgb, var(--color-surface) 70%, transparent); font-family: var(--font-text); font-size: var(--ct-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--color-ink); transition: background-color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium); }
.ct-copy svg { width: 1em; height: 1em; flex: none; }
.ct-copy:hover { border-color: var(--color-moon); background: color-mix(in srgb, var(--color-surface-2) 88%, transparent); }
.ct-copy:active { transform: scale(0.96); }
.ct-copy.is-done { border-color: var(--color-success); color: var(--color-success); }
.ct-copy[hidden] { display: none; }

/* ------------------------------------------------------------------ the sheet: a writing desk on the water */
.sheet { position: relative; grid-column: 1; grid-row: 2; justify-self: end; align-self: end; width: min(100%, var(--ct-sheet-w)); display: grid; grid-template-columns: calc(var(--u) * 30) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto; grid-template-areas: "head field" "routes field" "note actions" "status status"; column-gap: calc(var(--u) * 2.5); row-gap: calc(var(--u) * 1); padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.5); background: var(--ct-sheet); border: 1px solid var(--color-glass-line); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) var(--color-shadow), inset 0 1px 0 color-mix(in srgb, var(--color-moon) 16%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); font-family: var(--font-text); font-size: var(--ct-base); line-height: 1.55; color: var(--color-ink); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sheet { background: var(--ct-sheet-solid); } }
.sheet__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 0.5) calc(var(--u) * 1.5); }
.sheet__head h2 { order: -1; font-family: var(--font-display); font-size: var(--ct-xl); line-height: 1.05; }
.sheet__head .ct-eyebrow { font-size: var(--ct-xs); }
.sheet__head .ct-eyebrow::before { width: calc(var(--u) * 1.5); }

/* the routes. Without script: three plain notes, each with its own mail link. With script: one picker. */
.routes { grid-area: routes; display: grid; align-content: start; gap: calc(var(--u) * 1); }
.route { --tone: var(--color-mneme); --tone-fill: var(--color-river-blue); display: grid; gap: calc(var(--u) * 0.4); }
.route[data-tone="mint"] { --tone: var(--color-skills); --tone-fill: var(--color-river-mint); }
.route[data-tone="cyan"] { --tone: var(--color-orion); --tone-fill: var(--color-river-cyan); }
.route__kind { display: flex; align-items: baseline; gap: calc(var(--u) * 0.55); font-size: var(--ct-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink); }
.route__num { flex: none; min-width: 1.5em; font-family: var(--font-display); font-style: italic; font-size: 1.35em; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tone); }
.route__body { display: grid; gap: calc(var(--u) * 0.3); justify-items: start; }
.route h3 { font-family: var(--font-display); font-size: var(--ct-lg); line-height: 1.2; letter-spacing: -0.005em; }
.route__body p { font-size: var(--ct-sm); line-height: 1.5; color: var(--color-ink-muted); max-width: 62ch; }
.route__mail { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.45); min-height: calc(var(--u) * 1.75); font-size: var(--ct-sm); font-weight: 700; color: var(--tone); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--tone) 45%, transparent); text-underline-offset: 0.28em; transition: text-decoration-color var(--duration-fast) var(--ease-premium); }
.route__mail:hover { text-decoration-color: currentColor; }
.route__mail svg { width: 0.95em; height: 0.95em; flex: none; transition: transform var(--duration-normal) var(--ease-premium); }
.route__mail:hover svg { transform: translateX(3px); }
.route + .route { padding-top: calc(var(--u) * 1); border-top: 1px solid var(--color-glass-line); }

/* with script: the picker (real radio buttons), and one note at a time under it */
.routes.is-picker { gap: calc(var(--u) * 0.9); }
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.5); margin: 0; padding: 0; border: 0; min-width: 0; }
.pick__opt { --tone: var(--color-mneme); --tone-fill: var(--color-river-blue); position: relative; display: block; cursor: pointer; }
.pick__opt[data-tone="mint"] { --tone: var(--color-skills); --tone-fill: var(--color-river-mint); }
.pick__opt[data-tone="cyan"] { --tone: var(--color-orion); --tone-fill: var(--color-river-cyan); }
.pick__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick__face { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 0.55); height: 100%; min-height: calc(var(--u) * 3.3); padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8); border-radius: calc(var(--u) * 0.8); border: 1px solid var(--color-control-line); background: color-mix(in srgb, var(--color-surface) 56%, transparent); font-size: var(--ct-sm); font-weight: 700; letter-spacing: 0.005em; line-height: 1.22; color: var(--color-ink); overflow: hidden; transition: background-color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium); }
.pick__face::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tone-fill); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--duration-slow) var(--ease-premium); }
.pick__face .route__num { font-size: 1.5em; min-width: 1.1em; }
.pick__opt:hover .pick__face { border-color: var(--tone); background: color-mix(in srgb, var(--tone-fill) 12%, var(--color-surface)); }
.pick__opt input:active + .pick__face { transform: scale(0.975); }
.pick__opt input:checked + .pick__face { border-color: var(--tone); background: color-mix(in srgb, var(--tone-fill) 20%, var(--color-surface)); box-shadow: inset 0 0 0 1px var(--tone); }
.pick__opt input:checked + .pick__face::after { transform: scaleX(1); }
.pick__opt input:focus-visible + .pick__face { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.routes.is-picker .route { padding-top: 0; border-top: 0; }
.routes.is-picker .route__kind { display: none; }
.routes.is-picker .route[hidden], .pick__hint[hidden] { display: none; }
.routes__panel { display: grid; align-content: start; min-height: calc(var(--u) * 6.6); }
.pick__hint { font-size: var(--ct-sm); line-height: 1.5; color: var(--color-ink-muted); max-width: 46ch; }

/* the letter: its parts lie in the sheet's own grid (the field on the right, the plain note under the routes) */
.letter { display: contents; }
.letter[hidden] { display: none; }
.letter__field { grid-area: field; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: baseline; gap: calc(var(--u) * 0.45) calc(var(--u) * 1); }
.letter__label { font-size: var(--ct-sm); font-weight: 700; letter-spacing: 0.02em; color: var(--color-ink); }
.letter__help { justify-self: end; text-align: right; font-size: var(--ct-xs); color: var(--color-ink-dim); }
/* design-detect: allow repeating-stripes-gradient the ruled lines of letter paper: a texture from the subject's own world (this page is a letter), one hairline per line of writing, scrolling with the text */
.letter__paper { grid-column: 1 / -1; grid-row: 2; align-self: stretch; display: block; width: 100%; height: 100%; min-height: calc(var(--u) * 7.3); resize: none; margin: 0; padding: calc(var(--u) * 0.72) calc(var(--u) * 1) calc(var(--u) * 0.6); border-radius: calc(var(--u) * 0.7); border: 1px solid var(--color-control-line); color: var(--color-ink); caret-color: var(--color-marigold); font-family: var(--font-display); font-size: var(--ct-lg); line-height: calc(var(--u) * 2); letter-spacing: 0.005em; background-color: var(--ct-paper); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--u) * 2 - 1px), var(--ct-rule) calc(var(--u) * 2 - 1px), var(--ct-rule) calc(var(--u) * 2)); background-position: 0 calc(var(--u) * 0.6); background-attachment: local; transition: border-color var(--duration-fast) var(--ease-premium), background-color var(--duration-normal) var(--ease-premium); }
.letter__paper:hover { border-color: var(--color-moon); }
.letter__paper:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-color: var(--color-moon); background-color: var(--ct-paper-focus); }
.letter__paper[aria-invalid="true"] { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.letter__error { grid-column: 1 / -1; grid-row: 3; font-size: var(--ct-sm); font-weight: 700; color: var(--color-error); }
.letter__error[hidden] { display: none; }
.letter__actions { grid-area: actions; align-self: center; display: flex; align-items: center; gap: calc(var(--u) * 0.65); }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.6); min-height: calc(var(--u) * 3); padding: 0 calc(var(--u) * 1.15); border-radius: var(--radius-pill); white-space: nowrap; font-family: var(--font-text); font-size: var(--ct-base); font-weight: 700; letter-spacing: 0.01em; line-height: 1.15; cursor: pointer; transition: transform var(--duration-fast) var(--ease-premium), background-color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), box-shadow var(--duration-normal) var(--ease-premium); }
.ct-btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform var(--duration-normal) var(--ease-premium); }
.ct-btn:active { transform: scale(0.97); }
.ct-btn--warm { flex: 1 1 0; min-width: 0; background: var(--color-marigold); color: var(--color-ink-on-bright); box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 1.6) color-mix(in srgb, var(--color-marigold) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-ink) 42%, transparent); }
.ct-btn--warm:hover { box-shadow: 0 calc(var(--u) * 0.7) calc(var(--u) * 2.4) color-mix(in srgb, var(--color-marigold) 44%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-ink) 42%, transparent); }
.ct-btn--warm:hover svg { transform: translateX(4px); }
.ct-btn--ghost { border: 1px solid var(--color-control-line); background: color-mix(in srgb, var(--color-surface) 62%, transparent); color: var(--color-ink); }
.ct-btn--ghost:hover { border-color: var(--color-moon); background: color-mix(in srgb, var(--color-surface-2) 88%, transparent); }
.ct-btn--ghost.is-done { border-color: var(--color-success); color: var(--color-success); }
.letter__note { grid-area: note; align-self: center; font-size: var(--ct-xs); line-height: 1.5; color: var(--color-ink-dim); max-width: 64ch; }
.letter__status { grid-area: status; font-size: var(--ct-sm); line-height: 1.5; color: var(--color-ink); padding: calc(var(--u) * 0.6) calc(var(--u) * 0.9); border-radius: calc(var(--u) * 0.6); border: 1px solid color-mix(in srgb, var(--color-marigold) 50%, transparent); background: color-mix(in srgb, var(--color-marigold) 9%, transparent); }
.letter__status:empty { display: none; }

/* ------------------------------------------------------------------ the scene's own controls: at the foot, left */
.dawn__controls { grid-column: 1; grid-row: 2; justify-self: start; align-self: end; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 0.6); max-width: calc(100% - var(--ct-sheet-w) - var(--u) * 2); }
.dawn__controls:empty { display: none; }
.dawn__controls .slot__pause { position: static; opacity: 1; min-height: calc(var(--u) * 2.6); padding: 0 calc(var(--u) * 1); font-size: var(--ct-xs); transition: background-color var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium); }
.dawn__controls .slot__pause:hover { border-color: var(--color-moon); }
.dawn__controls .slot__pause:active { transform: scale(0.97); }
.dawn__controls .slot__pause svg { width: 0.9em; height: 0.9em; }
html[data-scene="poster"] .dawn__controls .slot__pause, html[data-scene="still"] .dawn__controls .slot__pause { display: none; }
.dawn__controls .scene-say { position: static; max-width: calc(var(--u) * 30); font-size: var(--ct-sm); line-height: 1.45; }
.dawn__controls .scene-say__try { min-height: calc(var(--u) * 2.6); font-size: var(--ct-sm); white-space: nowrap; }

/* ------------------------------------------------------------------ without script: the sheet is a plain list of the three routes */
html:not(.js) .ct-copy { display: none; }
html:not(.js) .sheet { --ct-sheet-w: calc(var(--u) * 36); grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "routes"; }

/* ------------------------------------------------------------------ the sheet beside the controls needs room: under 84rem the controls go below it */
@media (max-width: 84rem) {
  .dawn__content { grid-template-rows: auto 1fr auto; }
  .dawn__controls { grid-row: 3; max-width: none; }
}

/* ------------------------------------------------------------------ short wide frames (a laptop of 1280 x 720 or 1366 x 768):
   the words and the sheet share the first screen, so only the air between them tightens. No text size changes here,
   so text still follows browser zoom; the limit is in rem, so it moves with zoom too. */
@media (min-width: 68.0625rem) and (min-aspect-ratio: 5/4) and (max-height: 52rem) {
  .dawn__content { row-gap: calc(var(--u) * 0.9); padding-top: calc(var(--header-h) + var(--u) * 0.6); }
  .dawn__words { margin-top: 0; gap: calc(var(--u) * 0.7); }
  .sheet { row-gap: calc(var(--u) * 0.8); padding-top: calc(var(--u) * 1.2); padding-bottom: calc(var(--u) * 1.2); }
}
/* the same frames under 84rem: the scene's controls stand at the right end of the words' row, on the horizon,
   instead of a row of their own under the sheet (that row would sit half cut at the foot of the first screen) */
@media (min-width: 68.0625rem) and (max-width: 84rem) and (min-aspect-ratio: 5/4) and (max-height: 52rem) {
  .dawn__content { grid-template-rows: auto 1fr; }
  .dawn__controls { grid-row: 1; justify-self: end; align-self: end; justify-content: flex-end; max-width: calc(100% - var(--u) * 30); }
}

/* ------------------------------------------------------------------ narrow or upright frames: one column, the sheet under the words */
@media (max-width: 68rem), (max-aspect-ratio: 5/4) {
  :root { --ct-sheet-w: 38rem; --ct-hero: min(calc(var(--u) * 5.2), 17vw); }
  .dawn__content { grid-template-rows: auto auto auto; row-gap: clamp(1.5rem, 9svh, 6rem); align-items: start; padding-bottom: calc(var(--u) * 2); }
  .dawn__words { margin-top: clamp(0px, 3svh, 2rem); }
  .sheet { justify-self: center; align-self: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "routes" "field" "actions" "status" "note"; row-gap: calc(var(--u) * 1.05); }
  .letter__field { padding-top: calc(var(--u) * 1.05); border-top: 1px solid var(--color-glass-line); }
  .letter__actions { flex-wrap: wrap; }
  .ct-btn { white-space: normal; }
  .letter__paper { height: auto; max-height: calc(var(--u) * 15); field-sizing: content; }
  .dawn__controls { justify-self: center; }
}
@media (max-width: 30rem) {
  .sheet { padding: calc(var(--u) * 1.25) calc(var(--u) * 1.1) calc(var(--u) * 1.25); border-radius: calc(var(--u) * 1.15); }
  /* three routes side by side cut "conversations" on a phone: they stack, one per row, number beside the words */
  .pick { grid-template-columns: minmax(0, 1fr); }
  .pick__face { min-height: calc(var(--u) * 2.9); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.8); }
  .letter__field { grid-template-columns: minmax(0, 1fr); }
  .letter__help { justify-self: start; text-align: left; grid-row: 3; }
  .letter__error { grid-row: 4; }
  .ct-btn { width: 100%; }
  .ct-address .mail { font-size: calc(var(--u) * 1.75); }
}
/* a touch screen: the blur behind the sheet is the dearest thing on the page, so the sheet is simply darker there */
@media (pointer: coarse) { .sheet { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: color-mix(in srgb, var(--ct-sheet-solid) 88%, transparent); } }

/* ------------------------------------------------------------------ reduced motion, forced colours */
@media (prefers-reduced-motion: reduce) {
  .pick__face, .pick__face::after, .ct-btn, .ct-btn svg, .ct-copy, .route__mail svg, .letter__paper { transition: none; }
  .ct-btn--warm:hover svg, .route__mail:hover svg { transform: none; }
}
@media (forced-colors: active) {
  .sheet, .pick__face, .letter__paper, .ct-btn, .ct-copy { border: 1px solid ButtonText; }
  .pick__opt input:checked + .pick__face { outline: 2px solid Highlight; outline-offset: -3px; }
  .ct-btn--warm { background: ButtonFace; color: ButtonText; }
  .letter__paper { background-image: none; }
}