/* ==========================================================================
   Anusha & Adamya — a letter about a wedding
   Palette: handmade paper, Jaipur pink, sage green.
   Motifs: a barn swallow (Singapore · Jaipur · Germany · Switzerland),
   block-print booti stamps, museum-label captions, miniature-folio rules.
   ========================================================================== */

/* The couple's own fonts: Cafeline signs their names, The Secret Library
   titles the rooms */
@font-face {
  font-family: 'Cafeline Atelier';
  src: url('../fonts/CafelineAtelierRegular.otf') format('opentype'),
       url('../fonts/CafelineAtelierRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'The Secret Library';
  src: url('../fonts/TheSecretLibrary.otf') format('opentype'),
       url('../fonts/TheSecretLibrary.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f6f0e1;
  --paper-deep: #ede4cf;
  --card: #fbf6e9;
  --ink: #3a352c;
  --ink-soft: #7d7767;
  --pink: #d15c72;        /* Jaipur pink, leaning properly pink */
  --pink-deep: #aa4459;
  --sage: #8aa46e;
  --sage-deep: #53713d;
  --hairline: rgba(58, 53, 44, 0.16);
  /* the Alegreya superfamily — drawn for literature; the letter, the labels,
     and the quotes all come from one bookshelf */
  --serif: 'Alegreya', Georgia, serif;
  --sans: 'Alegreya Sans', 'Segoe UI', sans-serif;
  --names: 'The Secret Library', 'Alegreya', Georgia, serif;
  --heading: 'The Secret Library', 'Alegreya', Georgia, serif;
  /* a single stroke of a wet brush */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='14'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12' numOctaves='2' seed='4' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M6 8 C 60 3, 150 12, 214 6' fill='none' stroke='%23d15c72' stroke-width='4.5' stroke-linecap='round' opacity='0.5' filter='url(%23b)'/%3E%3C/svg%3E");
  /* woven cloth: warp and weft threads as two directional turbulence passes */
  --cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.42' numOctaves='3' seed='6'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.26 0 0 0 0 0.18 0 0 0 0.16 0'/%3E%3C/filter%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42 0.016' numOctaves='3' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.26 0 0 0 0 0.18 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23h)'/%3E%3Crect width='220' height='220' filter='url(%23v)'/%3E%3C/svg%3E");
  /* handmade paper, built in three passes:
     fine tooth (high-freq grain), uneven pulp (low-freq mottle), stray fibres */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.20 0 0 0 0 0.16 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.30 0 0 0 0 0.20 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23m)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg stroke='%236b5f4a' stroke-width='0.7' opacity='0.10' fill='none'%3E%3Cpath d='M42 61q8 -5 17 -2'/%3E%3Cpath d='M215 38q-7 6 -3 14'/%3E%3Cpath d='M117 149q10 3 18 -3'/%3E%3Cpath d='M276 210q-9 -2 -14 5'/%3E%3Cpath d='M61 262q5 -9 15 -8'/%3E%3Cpath d='M180 292q9 -4 11 -13'/%3E%3Cpath d='M300 105q-4 9 -13 10'/%3E%3Cpath d='M22 175q9 1 12 9'/%3E%3C/g%3E%3C/svg%3E");
  /* plaster wall: fine stucco grain over broad uneven patches, both higher-contrast than the paper grain above */
  --plaster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.56 0 0 0 0 0.42 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)'/%3E%3C/svg%3E");
  --plaster-blotch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='3' seed='31'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.49 0 0 0 0 0.36 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23q)'/%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must always win, even over explicit display rules. */
[hidden] { display: none !important; }
.restoring-invitation #login-screen { display: none; }
.invitation-loading { display: none; }
.restoring-invitation .invitation-loading {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background-color: var(--paper);
  background-image: var(--fibre);
}
.invitation-loading img { width: clamp(5rem, 18vw, 8rem); height: auto; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain), var(--fibre), var(--mottle);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--heading); font-weight: 400; color: var(--sage-deep); line-height: 1.32; }

a { color: var(--pink-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pink); }

::selection { background: var(--pink); color: var(--paper); }

strong { font-weight: 700; }
em { font-family: var(--serif); font-style: italic; }

/* an upright bookface ampersand — unmistakably an "&" */
.amp { font-family: var(--serif); font-style: normal; font-weight: 500; color: var(--pink); }

.swallow { fill: var(--sage); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}