/* ============================================================
   Madeline Merced · styles.css
   Every value in this file comes from the brand guide (Version 1.0).
   Variable names use the guide's own names, so the stylesheet
   reads like the guide. Section numbers refer to the guide.
   ============================================================ */


/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  /* Section 4 · Color System */
  --tobacco-ink: #2B2118;        /* Primary. Body text, headings, navigation, strong rules, buttons */
  --aged-cream: #F2E7CF;         /* Secondary 1. The site background */
  --apothecary-green: #3F5147;   /* Secondary 2. Room identities, labels, selected navigation, borders, dark panels */
  --dusty-rose: #A2675E;         /* Accent 1. Sparingly, decorative */
  --faded-mustard: #C5964A;      /* Accent 2. Stamps, labels, active states */
  --faded-olive: #9A9564;        /* Supporting */
  --paper-white: #FFFDF8;        /* Supporting */
  --soft-black: #1C1917;         /* Supporting */

  /* Tobacco Ink and Paper White at low opacity, for thin rules only */
  --rule: rgba(43, 33, 24, 0.28);
  --rule-strong: rgba(43, 33, 24, 0.6);
  --paper-rule: rgba(255, 253, 248, 0.3);

  /* Section 7 · Texture. Madeline's texture files, used as backgrounds, never tiled. */
  --texture-paper-grain: url("../images/mm-texture-paper-grain-01.webp");
  --texture-paper-page: url("../images/mm-texture-paper-grain-tile-01.webp"); /* seamless, for the page itself */
  --texture-paper-cream: url("../images/mm-texture-paper-cream-01.webp");
  --texture-floral: url("../images/mm-texture-floral-01.webp");
  --texture-green-cloth: url("../images/mm-texture-green-cloth-01.webp");

  /* Section 5 · Typography */
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, Consolas, "Courier New", monospace;

  --weight-heading: 600;
  --weight-subheading: 500;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-mono: 500;

  /* Mobile sizes first. Desktop sizes are set at 1024px further down. */
  --size-h1: 44px;            --leading-h1: 0.98;
  --size-h2: 36px;            --leading-h2: 1.05;
  --size-h3: 28px;            --leading-h3: 1.1;
  --size-subheading: 24px;    --leading-subheading: 1.2;   /* guide: 24–30px */
  --size-body: 17px;          --leading-body: 1.6;
  --size-small: 14px;         --leading-small: 1.5;
  --size-label: 13px;         --leading-label: 1.4;        /* guide: 12–14px */
  --size-caption: 12px;
  --tracking-label: 0.1em;                                 /* guide: 0.08em–0.12em */
  --tracking-caption: 0.08em;
  --tracking-wordmark: -0.015em;                           /* slightly tightened kerning */

  /* Section 6 · Grid & Spacing. These are the only spacing values in use. */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --width-content: 1280px;    /* maximum content width */
  --width-text: 720px;        /* editorial text width, guide: 680–760px */
  --gutter: 16px;             /* mobile: 4 columns / 16px gutters */
  --margin-page: 24px;        /* mobile outer margin: 20–24px */
  --section-space: var(--space-64);

  /* Section 14 · Components */
  --button-padding: 14px 20px;
  --radius: 2px;              /* corners nearly square */
  --transition: 180ms ease;   /* guide: 160–220ms */
  --focus-width: 2px;         /* guide: 2–3px, with offset */
  --focus-offset: 3px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;           /* tablet: 8 columns / 24px gutters */
    --margin-page: 32px;
  }
}

@media (min-width: 1024px) {
  :root {
    --size-h1: 64px;
    --size-h2: 48px;
    --size-h3: 34px;
    --size-subheading: 26px;
    --size-body: 18px;        --leading-body: 1.65;
    --margin-page: 48px;      /* desktop outer margin: 48–72px */
    --section-space: var(--space-96); /* major sections: 96–128px */
  }
}


/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* The page is a sheet of paper. Sections sit on it as cream mats and wallpaper panels. */
body {
  margin: 0;
  background: var(--paper-white) var(--texture-paper-page) center top / 512px auto repeat;
  color: var(--tobacco-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

svg { display: block; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--size-h1); line-height: var(--leading-h1); }
h2 { font-size: var(--size-h2); line-height: var(--leading-h2); }
h3 { font-size: var(--size-h3); line-height: var(--leading-h3); }

p { margin: 0 0 var(--space-16); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  transition: text-underline-offset var(--transition), text-decoration-color var(--transition), color var(--transition);
}

/* Hover: underline movement (guide section 14) */
a:hover {
  text-underline-offset: 5px;
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: var(--focus-width) solid var(--tobacco-ink);
  outline-offset: var(--focus-offset);
}

.on-dark :focus-visible { outline-color: var(--paper-white); }
.on-dark a { text-decoration-color: var(--paper-rule); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Type roles */
.subheading {
  font-family: var(--font-heading);
  font-weight: var(--weight-subheading);
  font-size: var(--size-subheading);
  line-height: var(--leading-subheading);
}

.microcopy {
  font-family: var(--font-heading);
  font-weight: var(--weight-subheading);
  font-style: italic;
  font-size: var(--size-subheading);
  line-height: var(--leading-subheading);
}

/* Accent + archival labels: IBM Plex Mono, uppercase, sparingly */
.label {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--size-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.caption {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--size-caption);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
}

.small {
  font-size: var(--size-small);
  line-height: var(--leading-small);
}

/* Room names: the serif set small, spaced and in capitals, as on the board */
.room-name {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--size-caption);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .room-name {
    font-size: var(--size-label);
    letter-spacing: 0.1em;
  }
}


/* ---------- Layout ---------- */

.container {
  max-width: calc(var(--width-content) + 2 * var(--margin-page));
  margin-inline: auto;
  padding-inline: var(--margin-page);
}

.text-column { max-width: var(--width-text); }

.section { padding-top: var(--section-space); }

/* Section labels: small archival labels with a rule, not big serif headings */
.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin: 0 0 var(--space-24);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--size-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--apothecary-green);
}

.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

@media (min-width: 768px) {
  .section-label { margin-bottom: var(--space-32); }
}

.grid {
  display: grid;
  gap: var(--space-24) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: -200px;
  left: var(--space-16);
  z-index: 2000;
  padding: 12px 16px;
  background: var(--tobacco-ink);
  color: var(--paper-white);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus { top: var(--space-16); }


/* ---------- Masthead: the name, then the rooms as the navigation ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.masthead__title {
  margin: 0;
  padding: var(--space-24) 0 var(--space-12);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

/* Primary wordmark: Cormorant Garamond 600, title case, tightened, nothing beneath it but the house */
.wordmark {
  display: inline-block;
  padding: var(--space-8) 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--size-h2);
  line-height: 1;
  letter-spacing: var(--tracking-wordmark);
  white-space: nowrap;
  text-decoration: none;
}

.wordmark:hover { text-decoration: none; }

.roomnav { border-top: 1px solid var(--rule); }

.roomnav__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding: var(--space-12) 0 var(--space-8);
  list-style: none;
}

.roomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-8) var(--space-4);
  border-radius: var(--radius);
  text-decoration: none;
}

.roomnav__item:hover { text-decoration: none; }

.roomnav__icon {
  height: 40px;
  width: auto;
  transition: transform var(--transition);
}

.roomnav__label {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  text-wrap: balance;
  transition: border-color var(--transition), color var(--transition);
}

.roomnav__sub {
  display: none;
  max-width: 15ch;
  margin-top: calc(-1 * var(--space-4));
  font-size: var(--size-caption);
  line-height: 1.3;
  text-wrap: balance;
}

.roomnav__item:hover .roomnav__icon { transform: translateY(-4px) rotate(-3deg); }
.roomnav__item:hover .roomnav__label { border-bottom-color: var(--rule-strong); }

/* Selected navigation: Apothecary Green. Active mark: Faded Mustard. */
.roomnav__item[aria-current="page"] .roomnav__label {
  color: var(--apothecary-green);
  border-bottom-color: var(--faded-mustard);
}

@media (min-width: 768px) {
  .masthead__title { padding: var(--space-32) 0 var(--space-16); }

  .roomnav__list {
    grid-template-columns: repeat(8, 1fr);
    gap: var(--space-8);
    padding: var(--space-16) 0 var(--space-12);
  }

  .roomnav__item {
    gap: var(--space-12);
    align-items: center;
  }

  .roomnav__icon { height: 64px; }

  .roomnav__sub { display: block; }
}


/* ---------- Buttons (guide section 14) ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--button-padding);
  border: 1px solid var(--tobacco-ink);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
  font-size: var(--size-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}

.button:hover { text-decoration: none; }

.button--primary {
  background: var(--tobacco-ink);
  color: var(--paper-white);
}

/* Hover: 2px translation */
.button--primary:hover { transform: translateY(-2px); }

.button--secondary {
  background: transparent;
  color: var(--tobacco-ink);
}

/* Hover: subtle background inversion */
.button--secondary:hover {
  background: var(--tobacco-ink);
  color: var(--paper-white);
}


/* ---------- Paper, frames and prints ---------- */

/* A panel of Madeline's aged cream paper */
.paper {
  background: var(--aged-cream) var(--texture-paper-cream) center / cover no-repeat;
}

/* The floral endpaper, calmed with a layer of cream so text stays easy to read */
.endpaper {
  position: relative;
  background: var(--aged-cream) var(--texture-floral) center / cover;
  isolation: isolate;
}

.endpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 231, 207, 0.45);
  z-index: -1;
}

/* Archival double rule: a border and a second rule just inside it */
.frame {
  position: relative;
  border: 1px solid var(--tobacco-ink);
  border-radius: var(--radius);
}

.frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  pointer-events: none;
}

/* A photograph mounted on paper, with a second sheet peeking out beneath */
.print {
  position: relative;
  margin: 0;
  padding: var(--space-8) var(--space-8) 0;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 0 var(--aged-cream), 7px 7px 0 0 var(--rule);
}

.print img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.print figcaption { padding: var(--space-12) var(--space-4) var(--space-16); }


/* ---------- Hero: a photograph mounted on the mat, with a note beside it ---------- */

.hero { padding-top: var(--space-32); }

.hero__mat {
  display: grid;
  gap: var(--space-24);
  padding: var(--space-16);
}

.hero__photo {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hero__note {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-8) var(--space-8) var(--space-16);
}

.hero__line {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-subheading);
  font-style: italic;
  font-size: var(--size-h3);
  line-height: var(--leading-h3);
  text-wrap: balance;
}

.hero__actions { margin: 0; }

.hero__moth,
.hero__motif {
  position: absolute;
  top: calc(-1 * var(--space-24));
  right: var(--space-8);
  width: 88px;
  transform: rotate(-6deg);
}

.hero__note .hero__moth,
.hero__motif { top: calc(-1 * var(--space-48)); }

@media (min-width: 768px) {
  .hero__mat { padding: var(--space-24); }
}

@media (min-width: 960px) {
  .hero__mat {
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-48);
    padding: var(--space-32);
  }

  .hero__note { padding: var(--space-32) var(--space-16) var(--space-32) 0; }

  .hero__moth,
.hero__motif {
    width: 128px;
    right: var(--space-16);
  }

  .hero__note .hero__moth,
.hero__motif { top: calc(-1 * var(--space-64)); }
}


/* ---------- Recently unearthed: a contact-sheet strip ---------- */

.strip {
  padding: var(--space-24);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.strip__grid { grid-template-columns: 1fr; }

.strip .print {
  height: 100%;
  --tilt: 0deg;
  transform: rotate(var(--tilt));
  transition: transform var(--transition), border-color var(--transition);
}

.strip__grid li:nth-child(1) .print { --tilt: -1.2deg; }
.strip__grid li:nth-child(2) .print { --tilt: 0.9deg; }
.strip__grid li:nth-child(3) .print { --tilt: -0.6deg; }
.strip__grid li:nth-child(4) .print { --tilt: 1.4deg; }

.strip__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  margin: 0 0 var(--space-4);
  color: var(--apothecary-green);
}

.strip__note {
  margin: 0;
  font-size: var(--size-small);
  line-height: var(--leading-small);
}

/* One piece of tape, on the first print only */
.strip__tape {
  position: absolute;
  top: calc(-1 * var(--space-16));
  left: 50%;
  z-index: 3;
  width: 96px;
  transform: translateX(-50%) rotate(-3deg);
  opacity: 0.9;
}

.strip .print a { text-decoration: none; }

.strip .print a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.strip .print:hover,
.strip .print:focus-within {
  border-color: var(--tobacco-ink);
  transform: rotate(0deg) translateY(-4px);
}

.strip .print:focus-within {
  outline: var(--focus-width) solid var(--tobacco-ink);
  outline-offset: var(--focus-offset);
}

.strip .print a:focus-visible { outline: none; }

@media (min-width: 480px) {
  .strip__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .strip { padding: var(--space-32); }
}

@media (min-width: 1024px) {
  .strip__grid { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- A note about Madeline ---------- */

.note-panel {
  padding: var(--space-32) var(--space-16);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.note {
  position: relative;
  margin: 0 auto;
  padding: var(--space-32) var(--space-24);
  background: var(--paper-white) var(--texture-paper-grain) center / cover;
}

.note__stamp {
  position: absolute;
  top: calc(-1 * var(--space-24));
  right: calc(-1 * var(--space-8));
  width: 96px;
  transform: rotate(9deg);
}

.note__text {
  margin: 0 0 var(--space-24);
  padding-right: var(--space-48);
}

@media (min-width: 768px) {
  .note-panel { padding: var(--space-64) var(--space-48); }
  .note { padding: var(--space-48); }
  .note__stamp {
    right: calc(-1 * var(--space-16));
    width: 120px;
  }
  .note__text { padding-right: var(--space-64); }
}


/* ---------- Footer: on Madeline's floral endpaper ---------- */

.site-footer {
  margin-top: var(--section-space);
  padding: var(--space-48) 0;
  border-top: 1px solid var(--rule);
  color: var(--tobacco-ink);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-32);
  padding: var(--space-32) var(--space-24);
  background: var(--paper-white) var(--texture-paper-grain) center / cover;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

.site-footer__mark {
  width: 72px;
  margin-bottom: var(--space-16);
}

.site-footer .wordmark {
  padding: 0;
  font-size: var(--size-h3);
}

.site-footer__heading {
  margin: 0 0 var(--space-8);
  font-size: var(--size-subheading);
  line-height: var(--leading-subheading);
}

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

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.site-footer__list a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site-footer__list--after { margin-top: var(--space-8); }

.site-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-16);
  padding-top: var(--space-24);
  border-top: 1px solid var(--rule-strong);
}

.site-footer__bottom p { margin: 0; }

.site-footer__copyright {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.site-footer__star {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--space-48);
    padding: var(--space-48);
  }
}


/* ---------- Room pages: the room on the mat, then what is filed here ---------- */

.room__category {
  margin: 0 0 var(--space-12);
  padding-right: var(--space-48);
  color: var(--apothecary-green);
}

.room__title {
  margin: 0 0 var(--space-16);
  font-size: var(--size-h1);
  line-height: var(--leading-h1);
}

.room__microcopy {
  margin: 0;
  max-width: 24ch;
}

.hero__mat--single { grid-template-columns: 1fr; }

.hero__mat--single .hero__note {
  padding: var(--space-32) var(--space-16) var(--space-24);
}

/* A panel of paper with one index card on it */
.holding {
  padding: var(--space-32) var(--space-16);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.card-index {
  position: relative;
  margin: 0 auto;
  padding: var(--space-24);
  background: var(--paper-white) var(--texture-paper-grain) center / cover;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--tobacco-ink);
  border-radius: var(--radius);
  box-shadow: 6px 6px 0 0 var(--aged-cream), 7px 7px 0 0 var(--rule);
}

.card-index__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4) var(--space-16);
  margin: 0 0 var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--rule);
  color: var(--apothecary-green);
}

.card-index__title {
  margin: 0 0 var(--space-12);
  font-size: var(--size-h3);
  line-height: var(--leading-h3);
}

.card-index__line { margin: 0 0 var(--space-24); }

.card-index__actions { margin: 0; }

.card-index__stamp {
  position: absolute;
  top: calc(-1 * var(--space-24));
  right: calc(-1 * var(--space-8));
  width: 96px;
  transform: rotate(9deg);
}

.prose { max-width: 60ch; }

.prose p { margin-bottom: var(--space-16); }

.prose p:last-child { margin-bottom: var(--space-24); }

@media (min-width: 768px) {
  .holding { padding: var(--space-64) var(--space-48); }

  .card-index { padding: var(--space-32) var(--space-48); }

  .card-index__stamp {
    right: calc(-1 * var(--space-24));
    width: 120px;
  }

  .hero__mat--single .hero__note {
    padding: var(--space-48) var(--space-32) var(--space-32);
  }
}

@media (min-width: 960px) {
  .hero__mat--single { grid-template-columns: 1fr; }

  .hero__mat--single .hero__note .hero__motif {
    top: var(--space-16);
    right: var(--space-32);
  }
}


/* ---------- Motion ---------- */
/* A short sequence when the page opens, a slow drift on the photograph,
   the moth settling and hovering, prints rising as you reach them.
   All of it switches off for visitors who ask for reduced motion. */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

@keyframes settle {
  from { opacity: 0; transform: translate(-16px, -20px) rotate(-18deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(-6deg); }
}

@keyframes hover-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-4px) rotate(-5deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .home .masthead__title { animation: rise 600ms ease-out both; }

  .home .roomnav__item { animation: rise 500ms ease-out both; }
  .home .roomnav__list li:nth-child(1) .roomnav__item { animation-delay: 150ms; }
  .home .roomnav__list li:nth-child(2) .roomnav__item { animation-delay: 220ms; }
  .home .roomnav__list li:nth-child(3) .roomnav__item { animation-delay: 290ms; }
  .home .roomnav__list li:nth-child(4) .roomnav__item { animation-delay: 360ms; }
  .home .roomnav__list li:nth-child(5) .roomnav__item { animation-delay: 430ms; }
  .home .roomnav__list li:nth-child(6) .roomnav__item { animation-delay: 500ms; }
  .home .roomnav__list li:nth-child(7) .roomnav__item { animation-delay: 570ms; }
  .home .roomnav__list li:nth-child(8) .roomnav__item { animation-delay: 640ms; }

  .hero__mat { animation: rise 700ms ease-out 500ms both; }
  .hero__photo img { animation: drift 28s ease-out 1s both; }
  .hero__moth,
.hero__motif {
    animation:
      settle 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 1300ms both,
      hover-bob 6s ease-in-out 2200ms infinite;
  }

  /* Prints rise one after another as they come into view */
  .js .reveal .print {
    opacity: 0;
    transform: translateY(18px) rotate(var(--tilt));
    transition: opacity 500ms ease-out, transform 500ms ease-out, border-color var(--transition);
  }

  .js .reveal.is-visible .print {
    opacity: 1;
    transform: rotate(var(--tilt));
  }

  .js .reveal.is-visible li:nth-child(2) .print { transition-delay: 90ms; }
  .js .reveal.is-visible li:nth-child(3) .print { transition-delay: 180ms; }
  .js .reveal.is-visible li:nth-child(4) .print { transition-delay: 270ms; }

  .js .reveal.is-visible .print:hover,
  .js .reveal.is-visible .print:focus-within {
    transform: rotate(0deg) translateY(-4px);
    transition-delay: 0ms;
  }

  .js .reveal .note,
  .js .reveal .card-index {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
  }

  .js .reveal.is-visible .note,
  .js .reveal.is-visible .card-index {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}