@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Gentle Moments. Measured from the printed card (assets/card-front.pdf):
   an A6 card whose fine rules, labels and spacing are scaled here to a 34rem
   column. --u is one card unit: 1rem at full width, shrinking with the
   screen on phones so the card keeps its proportions.
   Colours are the brief's only five. Fonts are stand-ins for Acid Grotesk
   Book and Founders Grotesk Mono until the web licences arrive. */

:root {
  --paper: #fdfbf7;
  --ink: #404538;
  --field: #f0f3e3;
  --hairline: #d7dacb;
  --focus: #043758;

  --column: 34rem;
  --gutter: 1rem;
  --u: clamp(0.72rem, calc((100vw - 2 * var(--gutter)) / 34), 1rem);
  --rule: 1px;

  --font-text: 'Hanken Grotesk Variable', 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --text-weight: 370;

  color-scheme: only light;
}

@media (min-resolution: 2dppx) {
  :root {
    --rule: 0.5px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: var(--text-weight);
  /* Matches Acid Grotesk's x-height, so swapping in the licensed font later
     changes nothing else. */
  font-size-adjust: 0.55;
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  /* A long address or word wraps rather than pushing the page sideways. */
  overflow-wrap: break-word;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

h1,
p,
dl,
dd {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: var(--rule);
  text-underline-offset: 0.25em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Headings receive focus from script when a screen changes; that focus is
   for screen readers, so it draws no ring. */
[tabindex='-1']:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

.page {
  width: 100%;
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main.page {
  flex: 1 0 auto;
  padding-block: calc(3 * var(--u)) calc(2 * var(--u));
}

/* ---- Labels and controls: mono capitals with open letter-spacing ---- */

.label,
.control,
.quiet-link,
.moment__report,
.site-footer__links {
  font-family: var(--font-mono);
  font-size-adjust: none;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.label {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Controls look like the card: mono capitals with a fine underline, never
   filled buttons. */
.control {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: var(--rule);
  text-underline-offset: 0.45em;
  cursor: pointer;
}

.control:disabled,
.control[aria-disabled='true'] {
  cursor: default;
  text-decoration-color: var(--hairline);
}

.quiet-link,
.moment__report {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 0.6875rem;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.45em;
}

/* Quiet controls that are buttons look like the links. */
button.quiet-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule);
  cursor: pointer;
}

.quiet-link:hover,
.moment__report:hover {
  text-decoration-color: currentColor;
}

/* ---- Screens: one at a time, cross-fading in place ---- */

.stage {
  display: grid;
}

.stage > .screen {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 700ms ease;
}

.stage > .screen:not(.is-current):not(.is-leaving):not(.is-entering) {
  display: none;
}

.screen.is-entering,
.screen.is-leaving {
  opacity: 0;
}

.screen.is-leaving {
  pointer-events: none;
}

.screen__error {
  font-size: 0.9375rem;
}

.screen__error:not(:empty) {
  margin-top: calc(1 * var(--u));
}

/* ---- Arrival ---- */

.arrival__photo img {
  width: 100%;
  max-height: 72vh;
  max-height: 72svh;
  object-fit: cover;
  object-position: 50% 80%;
  transition: opacity 1000ms ease;
}

/* Hidden until loaded only when script is running, so it always shows
   without JavaScript. If the script never arrives, it appears anyway. */
@media (scripting: enabled) {
  [data-fade-in]:not(.is-loaded) {
    opacity: 0;
    animation: gm-reveal 1000ms ease 4s forwards;
  }
}

@keyframes gm-reveal {
  to {
    opacity: 1;
  }
}

@media (max-width: 35.99rem) {
  /* Edge to edge on phones, as in the printed guide. */
  .arrival__photo {
    margin-inline: calc(-1 * var(--gutter));
    margin-top: calc(-3 * var(--u));
  }
}

@media (min-width: 36rem) {
  .arrival__photo img {
    outline: var(--rule) solid var(--ink);
    outline-offset: calc(-1 * var(--rule));
  }
}

.arrival__heading {
  margin-top: calc(2.5 * var(--u));
  font-weight: var(--text-weight);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.arrival__line {
  margin-top: calc(0.9 * var(--u));
  max-width: 28em;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.3rem);
  line-height: 1.32;
}

.arrival__begin {
  margin-top: calc(2.2 * var(--u));
}

.arrival__share {
  margin-top: calc(0.4 * var(--u));
}

/* ---- A moment, laid out like the card ---- */

.moment {
  position: relative;
}

.moment__figure img {
  width: 100%;
  outline: var(--rule) solid var(--ink);
  outline-offset: calc(-1 * var(--rule));
}

/* Every photograph in the same square frame, filled edge to edge, so moments
   do not jump in height from one to the next (Arpit, 28 October 2026). The
   frame only ever hides edges; it never shows more than the photograph. */
.moment__figure--photo img {
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.moment__figure + .moment__typed,
.moment__figure + .moment__figure {
  margin-top: calc(2.4 * var(--u));
}

.moment__heading {
  margin: 0;
  font-weight: var(--text-weight);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.moment__parts {
  margin-top: calc(2.6 * var(--u));
}

.moment__part {
  padding-top: calc(2.1 * var(--u));
  padding-bottom: calc(1.5 * var(--u));
  border-bottom: var(--rule) solid var(--ink);
}

.moment__part:first-child {
  padding-top: 0;
}

.moment__text {
  margin-top: calc(0.55 * var(--u));
  font-size: 1.125rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* An event card: the scan stands in for the typed layout, which stays for
   screen readers. */
.moment--card .moment__typed {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Another" (or "More moments") with a quiet "Share a moment" beneath it,
   as on Arrival; "Report" stays small on the right, level with the first
   line, so it never sits beside "Share a moment". */
.moment__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 1.5rem;
  margin-top: calc(1.4 * var(--u));
}

.moment__next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.moment__share {
  margin-top: calc(0.4 * var(--u));
}

/* ---- The end ---- */

.screen--end {
  padding-top: calc(6 * var(--u));
}

.end__heading,
.end__look-up {
  font-weight: var(--text-weight);
  font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.1rem);
  line-height: 1.2;
}

.end__look-up {
  margin-top: calc(0.9 * var(--u));
}

.end__prompt {
  margin-top: calc(3 * var(--u));
  font-size: 1rem;
}

/* ---- Messages: not found, no longer here ---- */

.message {
  padding-top: calc(6 * var(--u));
}

.message__text {
  font-weight: var(--text-weight);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.65rem);
  line-height: 1.2;
}

.message p {
  margin-top: calc(1.5 * var(--u));
}

/* ---- About, Terms, Privacy ---- */

.text-page__heading {
  font-weight: var(--text-weight);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.65rem);
  line-height: 1.15;
  padding-bottom: calc(1.5 * var(--u));
  border-bottom: var(--rule) solid var(--ink);
  margin-bottom: calc(2 * var(--u));
}

.text-page p {
  font-size: 1.0625rem;
  line-height: 1.55;
}

.text-page p + p,
.text-page ul + p {
  margin-top: 1em;
}
.text-page h2 {
  font-weight: var(--text-weight);
  font-size: 1.2rem;
  line-height: 1.3;
  margin: calc(1.6 * var(--u)) 0 0.5em;
}
.text-page ul {
  margin: 1em 0 0;
  padding-left: 1.25em;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.text-page li + li {
  margin-top: 0.4em;
}

/* ---- Share: the blank card ---- */

.share__parts {
  margin-top: calc(2.6 * var(--u));
}

.share__part {
  padding-top: calc(2.1 * var(--u));
}

.share__part:first-child {
  padding-top: 0;
}

.share input[type='text'],
.share input[type='password'],
.share textarea {
  display: block;
  width: 100%;
  margin-top: calc(0.55 * var(--u));
  padding: 0.55rem 0.65rem;
  border: 0;
  border-bottom: var(--rule) solid var(--ink);
  border-radius: 0;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1.45;
  -webkit-appearance: none;
  appearance: none;
}

.share textarea {
  resize: vertical;
  min-height: 3.5em;
}

/* Placeholders: Earth Green, lighter than what a writer types but still
   above 4.5:1 on Pale Green. */
.share ::placeholder {
  color: var(--ink);
  opacity: 0.8;
  /* In the label's mono type, so an example never reads as words already
     typed. */
  font-family: var(--font-mono);
  font-size-adjust: none;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.share [aria-invalid='true'] {
  border-bottom-width: 2px;
}

.share__count,
.share__error,
.share__note {
  font-size: 0.9375rem;
}

.share__count {
  min-height: 1.2em;
  margin-top: 0.25rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size-adjust: none;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.share__error:not(:empty) {
  margin-top: 0.35rem;
}

/* The photograph: the label is the control; the real file input is kept for
   keyboards and screen readers but drawn invisibly. */
.share__part--photo {
  padding-top: calc(2.6 * var(--u));
}

.share__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.share__file:focus-visible + .share__photo-label {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Help lines are smaller and lighter than anything a writer types (Earth
   Green at 75%, about 4.7:1 on the paper), so they never read as words
   already written. */
.share__help {
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0.75;
}

/* A hint between a label and its box. */
.share__help--hint {
  margin: 0.1rem 0 0.45rem;
}

.share__preview {
  margin-top: calc(1 * var(--u));
}

.share__preview img {
  max-height: min(20rem, 40vh);
  width: auto;
  outline: var(--rule) solid var(--ink);
  outline-offset: calc(-1 * var(--rule));
}

.share__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-top: calc(2.6 * var(--u));
  padding-top: calc(2.1 * var(--u));
  border-top: var(--rule) solid var(--ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.share__consent input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--ink);
}

.share__note {
  margin-top: calc(2 * var(--u));
}

.share__submit {
  margin-top: calc(0.4 * var(--u));
}

/* The honeypot: off screen, out of the tab order, hidden from screen
   readers. People never see it; machines often fill it in. */
.share__extra {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.message__line {
  margin-top: calc(1 * var(--u));
  font-size: 1.125rem;
}

/* ---- Report: the moment shown small above the form ---- */

.report__moment {
  margin-top: calc(1.6 * var(--u));
  padding: calc(1.2 * var(--u)) 1rem;
  border: var(--rule) solid var(--hairline);
}

.report__moment .moment__heading {
  font-size: 1.125rem;
}

.report__moment .moment__text {
  font-size: 0.9375rem;
}

.report__moment .moment__figure img {
  max-height: 14rem;
  width: auto;
}

.report__moment .moment__figure--photo img {
  width: 14rem;
  max-width: 100%;
}

.report__form {
  margin-top: calc(1.6 * var(--u));
}

.report__form .share__help {
  margin-top: 0.6rem;
}

/* ---- The editor (private) ---- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Moments on the site that the log has no Publish for: a heavier rule and
   the field colour, never a new colour. The box is always in the page (it
   is a live region), so it takes up no room while empty. */
.editor__warning:not(:empty) {
  margin-bottom: calc(0.8 * var(--u));
  padding: 0.9rem 1rem;
  border: 2px solid var(--ink);
  background: var(--field);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* The log couldn't be checked: said quietly, like the sign-in line. */
.editor__warning--quiet:not(:empty) {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8125rem;
  font-weight: 400;
}

.editor__security {
  margin-bottom: calc(0.8 * var(--u));
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* A wrong password or a lockout today: weight and a fine outline, never a
   new colour. */
.editor__alert {
  padding: 0 0.3em;
  border: var(--rule) solid var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.editor__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  padding-bottom: calc(0.6 * var(--u));
  border-bottom: var(--rule) solid var(--ink);
}

.editor__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.editor__tabs [aria-pressed='false'] {
  text-decoration-color: var(--hairline);
}

.editor__status:not(:empty) {
  margin-top: calc(1 * var(--u));
}

.editor__panel {
  margin-top: calc(1.5 * var(--u));
}

.editor__rules {
  padding: 0.9rem 1rem;
  background: var(--field);
  font-size: 0.9375rem;
}

.editor__rules ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.editor__bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  margin-top: calc(1 * var(--u));
  font-size: 0.9375rem;
}

.editor__bulk input,
.editor__select input,
.editor__remove input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--ink);
  vertical-align: -0.15em;
}

.editor__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor__item {
  padding: calc(2 * var(--u)) 0;
  border-bottom: var(--rule) solid var(--ink);
}

.editor__select {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.editor__meta,
.editor__note {
  margin-top: calc(0.8 * var(--u));
  font-family: var(--font-mono);
  font-size-adjust: none;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editor__note {
  margin-bottom: calc(0.8 * var(--u));
}

.editor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  margin-top: calc(0.4 * var(--u));
}

.editor__remove {
  margin-top: calc(1 * var(--u));
  font-size: 0.9375rem;
}

.editor__reports {
  margin: calc(0.8 * var(--u)) 0 0;
  padding: 0.7rem 1rem;
  list-style: none;
  background: var(--field);
  font-size: 0.9375rem;
}

.editor__reports li {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.editor__reports li + li {
  margin-top: 0.5rem;
}

.editor__reports .label {
  display: inline;
  margin-right: 0.4rem;
}

.editor__export {
  margin-bottom: calc(1 * var(--u));
  font-size: 0.9375rem;
}

.editor__reference {
  margin-top: calc(0.8 * var(--u));
}

.editor__held {
  margin-top: calc(2 * var(--u));
}

.editor__held .label {
  margin-bottom: 0.5rem;
}

.editor__log {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.editor__log li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-bottom: var(--rule) solid var(--hairline);
}

.editor__log time,
.editor__log code {
  font-family: var(--font-mono);
  font-size-adjust: none;
  font-size: 0.75rem;
}

.editor__empty {
  margin-top: calc(2 * var(--u));
}

/* ---- Holding page ---- */

.holding {
  min-height: 70vh;
  min-height: 70svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.holding__heading {
  font-weight: var(--text-weight);
  font-size: clamp(2rem, 1.5rem + 2.4vw, 2.6rem);
  line-height: 1.08;
}

.holding__text {
  margin-top: calc(1 * var(--u));
  font-family: var(--font-mono);
  font-size-adjust: none;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Footer, on every public page ---- */

.site-footer {
  padding-top: calc(5 * var(--u));
  padding-bottom: calc(2.5 * var(--u));
}

.site-footer__logotype {
  display: flex;
  color: var(--ink);
}

/* The logotype links home (Arpit, 23 October 2026): no underline and no
   change of colour, only the focus ring. A little padding, taken back by the
   margin, makes it easier to tap without moving anything. */
.site-footer__home {
  padding-block: 0.375rem;
  margin-block: -0.375rem;
  color: inherit;
  text-decoration: none;
}

.site-footer__logotype svg {
  display: block;
  width: 8.375rem;
  height: auto;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.6rem;
  margin-top: calc(0.8 * var(--u));
  font-size: 0.6875rem;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.45em;
}

.site-footer__links a:hover {
  text-decoration-color: currentColor;
}

/* ---- Slow: no fades at all for people who ask for less motion ---- */

@media (prefers-reduced-motion: reduce) {
  .stage > .screen,
  .arrival__photo img {
    transition: none;
  }

  [data-fade-in]:not(.is-loaded) {
    animation-duration: 1ms;
  }
}