/* ============================================================
   Sharmaine B. Rose, memorial site
   The palette, paper, and type are taken from the printed
   5 x 7 invitation so the site and the card read as one piece.
   ============================================================ */

:root{
  /* Paper, matched to the sampled reference sheet */
  --paper:  #e8e4dd;
  --paper-2:#e2ddd4;          /* alternating sections */
  --ground: #d7d1c6;          /* the surface the card sits on */
  --tooth:  1;
  --mottle: .26;
  --light:  .035;

  --ink:    #17171a;
  --soft:   #4a4740;
  --faint:  #7c766b;
  --rule-color: #b8b0a5;
  --hair:   rgba(120,108,88,.28);

  --display: "Playfair Display", "Didot", Georgia, serif;
  --sans:    "Jost", "Futura", "Avenir Next", Helvetica, Arial, sans-serif;

  /* Card geometry, unchanged from the print piece */
  --card-w: 5in;
  --card-h: 7in;
  --tr-w: 1.55in;  --tr-top: -0.32in;    --tr-right: -0.40in;
  --bl-w: 1.10in;  --bl-bottom: -0.26in; --bl-left: -0.38in;
  --rule-inset: .28in;
  --rule-len:   15%;
  --rule-w:     1px;
  --mat: .07in;
  --mat-color: #ffffff;
  --mat-rule: 1px solid rgba(120,108,88,.26);
  --year-inset: .22in;
  --year-w:     1.02in;
  --photo-w: 1.5in;
  --photo-ratio: 1.46;
  --portrait-filter: grayscale(.4) contrast(1.03);
  --invites-w1: 2.65in;
  --invites-w2: 1.829in;
}

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

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

body{
  background: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; }
a{ color: inherit; }

/* Paper grain, applied to the whole page */
body::before{
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='5' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.2'%3E%3CfeDistantLight azimuth='105' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
}
main, .topbar, .foot{ position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   Livestream notice, across the very top
   ------------------------------------------------------------ */
.stream-bar{
  background: var(--ground);
  border-bottom: 1px solid var(--hair);
  padding: 11px 20px;
}
.stream-bar[hidden]{ display: none; }
.stream-bar p{
  max-width: 1020px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 14px;
  font-size: 12px; letter-spacing: .06em; color: var(--soft);
  text-align: center;
}
.stream-bar strong{ font-weight: 500; color: var(--ink); }
.stream-bar .stream-when{ color: var(--faint); }
.stream-bar a{
  font-weight: 500; color: var(--ink);
  border-bottom: 1px solid var(--rule-color); padding-bottom: 2px;
}
.stream-bar a:hover{ border-color: var(--ink); }

/* Before the day: a steady grey bubble, meaning this is coming. */
.stream-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--faint); flex: none;
}

/* On the day: red, and quietly pulsing, meaning it is happening
   now. site.js adds `live` when streamLive is turned on. It holds
   still for anyone who has asked for less motion. */
.stream-bar.live .stream-dot{
  background: #b3403a;
  animation: streamPulse 2.4s ease-in-out infinite;
}
@keyframes streamPulse{
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce){
  .stream-bar.live .stream-dot{ animation: none; }
}

/* On a page whose bar is always in place, the notice has to be
   pushed clear of it, and the usual gap under the bar shrinks by
   the same amount. site.js adds `has-stream` when the notice is
   actually shown. */
.page-plain.has-stream .stream-bar{ margin-top: 49px; }
.page-plain.has-stream main{ padding-top: 26px; }

.watch{ white-space: nowrap; }

.topbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  overflow: hidden;                /* crops the orchid to the bar */
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px clamp(16px, 4vw, 44px);
  background: rgba(232,228,221,.92);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--hair);
  transform: translateY(-100%);
  transition: transform .35s ease;
}
.topbar.show{ transform: translateY(0); }
.topbar-name{
  font-family: var(--display); font-size: 15px; letter-spacing: .06em;
  text-decoration: none; white-space: nowrap;
  /* Weight 600 is a real cut of Playfair, requested in the font
     link. The faint paper glow lifts the name off the orchid
     behind it without darkening the letters. */
  font-weight: 600; color: var(--ink);
  text-shadow: 0 0 6px var(--paper), 0 0 12px var(--paper);
  /* `isolate` keeps the orchid below behind the name but still in
     front of the bar itself. */
  position: relative; isolation: isolate;
}
/* An orchid washed in behind her name, cropped by the bar. */
.topbar-name::before{
  content: '';
  position: absolute; z-index: -1;
  left: -26px; top: 50%; transform: translateY(-50%);
  width: 132px; height: 132px;
  background: url('orchid-bottom-left.webp') no-repeat center / contain;
  opacity: .3;
  pointer-events: none;
}
.topbar-nav{
  display: flex; gap: clamp(12px, 2.2vw, 26px);
  overflow-x: auto; scrollbar-width: none;
}
.topbar-nav::-webkit-scrollbar{ display: none; }

/* The menu button, on small screens only ------------------- */
.nav-toggle{
  display: none;                     /* shown by the query below */
  width: 34px; height: 34px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: transparent; border: none; cursor: pointer;
}
.nav-toggle span{
  display: block; width: 21px; height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
/* The three bars fold into a cross while the menu is open. */
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 760px){
  /* The bar keeps its `overflow: hidden` so the orchid stays
     cropped, which means the menu cannot hang below it as an
     overlay. Instead the bar itself grows to hold the links. */
  .topbar{ flex-wrap: wrap; }
  .nav-toggle{ display: flex; }

  .topbar-nav{
    display: none;
    width: 100%; order: 3;
    flex-direction: column; gap: 0;
    overflow: visible;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--hair);
  }
  .topbar-nav.open{ display: flex; }
  .topbar-nav a{
    padding: 13px 2px;
    border-bottom: 1px solid rgba(120,108,88,.14);
  }
  .topbar-nav a:last-child{ border-bottom: none; }
}

@media (prefers-reduced-motion: reduce){
  .nav-toggle span{ transition: none; }
}
.topbar-nav a{
  font-size: 10.5px; font-weight: 400; letter-spacing: .18em; text-indent: .18em;
  text-transform: uppercase; color: var(--soft); text-decoration: none;
  white-space: nowrap; padding: 4px 0; border-bottom: 1px solid transparent;
}
.topbar-nav a:hover, .topbar-nav a:focus-visible{ color: var(--ink); border-bottom-color: var(--rule-color); }

/* ------------------------------------------------------------
   Hero, the invitation itself
   ------------------------------------------------------------ */
.hero{
  background: var(--ground);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(26px, 5vh, 60px) 16px clamp(20px, 4vh, 40px);
  border-bottom: 1px solid var(--hair);
}
.stage{ display: flex; justify-content: center; width: 100%; }

.card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: var(--card-w);
  height: var(--card-h);
  flex: none;
  transform-origin: top center;
  background-color: var(--paper);
  background-image: linear-gradient(102deg,
    rgba(90,78,58, var(--light)) 0%,
    rgba(90,78,58, 0) 45%,
    rgba(255,255,255,.025) 100%);
  box-shadow: 0 14px 40px rgba(60,52,40,.22);
  display: flex; flex-direction: column; align-items: center;
  padding: 0.32in 0.5in 0.30in;
  text-align: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.card::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--tooth); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='5' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.2'%3E%3CfeDistantLight azimuth='105' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
}
.card::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--mottle); mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='3' seed='3'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 600px 600px;
}
.card > *{ position: relative; z-index: 1; }

.rule{
  position: absolute; z-index: 0;
  width: var(--rule-w); height: var(--rule-len);
  background: var(--rule-color); pointer-events: none;
}
.rule.l{ left:  var(--rule-inset); bottom: 0; }
.rule.r{ right: var(--rule-inset); top: 0; }

.card > .floral{
  position: absolute; z-index: 0; pointer-events: none;
  display: block; height: auto;
}
.floral.tr{ width: var(--tr-w); top: var(--tr-top); right: var(--tr-right); }
.floral.bl{ width: var(--bl-w); bottom: var(--bl-bottom); left: var(--bl-left); }

.invites{ display: block; margin: 0 auto; height: auto; }
.invites.l1{ width: var(--invites-w1); }
.invites.l2{ width: var(--invites-w2); margin-top: -.05in; margin-bottom: .18in; }

.given, .surname{
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 29pt; letter-spacing: .02em; text-indent: .02em;
  line-height: 1; white-space: nowrap;
}
.given   { margin-bottom: .07in; }
.surname { margin-top: .07in; margin-bottom: .13in; }

.band{ position: relative; width: 100%; display: flex; justify-content: center; }
.frame{
  width: var(--photo-w);
  aspect-ratio: 1 / var(--photo-ratio);
  flex: none; overflow: hidden;
  padding: var(--mat);
  background: var(--mat-color);
  border: var(--mat-rule);
}
.frame img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  display: block; filter: var(--portrait-filter);
}

.year{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--year-w); text-align: center; color: var(--ink);
}
.year.born { left:  var(--year-inset); }
.year.died { right: var(--year-inset); }
.year .lab{
  display: block; font-size: 6.4pt; font-weight: 500;
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  color: var(--soft); margin-bottom: .035in;
}
.year .date{
  display: block; font-size: 8.2pt; font-weight: 300;
  letter-spacing: .1em; text-indent: .1em; text-transform: uppercase;
  color: var(--soft); line-height: 1.4;
}
.year .yr{
  display: block; font-size: 11pt; font-weight: 400;
  letter-spacing: .16em; text-indent: .16em; line-height: 1.35;
}

.services{ display: flex; flex-direction: column; gap: .105in; width: 100%; }
.service .label{
  display: block; font-size: 6.8pt; font-weight: 500;
  letter-spacing: .22em; text-indent: .22em; text-transform: uppercase;
  color: var(--soft); margin-bottom: .045in;
}
.service .venue{
  display: block; font-size: 9.2pt; font-weight: 400;
  letter-spacing: .105em; text-indent: .105em; text-transform: uppercase;
  line-height: 1.45;
}
.service .detail{
  display: block; font-size: 8.4pt; font-weight: 300;
  letter-spacing: .105em; text-indent: .105em; text-transform: uppercase;
  color: var(--soft); line-height: 1.5;
}

.card .cross{ margin-top: .12in; font-size: 12pt; color: var(--soft); line-height: 1; }

/* Scroll cue under the card */
.scroll-cue{
  margin-top: clamp(18px, 3vh, 30px);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--soft);
  font-size: 10px; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  text-align: center;
}
.scroll-cue .chev{
  width: 9px; height: 9px; border-right: 1px solid var(--soft); border-bottom: 1px solid var(--soft);
  transform: rotate(45deg); animation: nudge 2.6s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform: rotate(45deg) translate(0,0); } 50%{ transform: rotate(45deg) translate(3px,3px); } }
.scroll-cue:hover{ color: var(--ink); }

/* ------------------------------------------------------------
   Sheets, the page sections
   ------------------------------------------------------------ */
.sheet{ padding: clamp(56px, 9vw, 108px) 20px; border-bottom: 1px solid var(--hair); }
.sheet.alt{ background: var(--paper-2); }
.wrap{ max-width: 1020px; margin: 0 auto; }
.wrap.narrow{ max-width: 660px; }

.eyebrow{
  text-align: center; font-size: 9.5px; font-weight: 500;
  letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 14px;
}
.head{
  text-align: center; font-family: var(--display); font-weight: 400;
  font-size: clamp(27px, 4.4vw, 42px); letter-spacing: .01em; line-height: 1.15;
  margin-bottom: 10px;
}
.sub{
  text-align: center; font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 8px;
}
.dates{
  text-align: center; font-size: 11px; letter-spacing: .16em; text-indent: .16em;
  text-transform: uppercase; color: var(--soft); margin-bottom: 34px;
}
.lede{
  font-size: 15.5px; line-height: 1.75; color: var(--soft);
  max-width: 56ch; margin: 6px auto 0;
}
.lede.center{ text-align: center; margin-bottom: 40px; }

/* ------------------------------------------------------------
   Itinerary
   ------------------------------------------------------------ */
.itinerary{ list-style: none; margin: 44px 0 0; }
.stop{
  display: grid; grid-template-columns: 132px 1fr; gap: clamp(18px, 4vw, 44px);
  padding: 30px 0; border-top: 1px solid var(--hair);
}
.stop:last-child{ border-bottom: 1px solid var(--hair); }
.stop-when{ text-align: center; padding-top: 4px; }
.stop-when .dow{
  display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .24em;
  text-indent: .24em; text-transform: uppercase; color: var(--faint);
}
.stop-when .dnum{
  display: block; font-family: var(--display); font-size: 44px; line-height: 1.05; margin: 4px 0 2px;
}
.stop-when .mon{
  display: block; font-size: 9.5px; letter-spacing: .18em; text-indent: .18em;
  text-transform: uppercase; color: var(--soft);
}
.kind{
  font-size: 9.5px; font-weight: 500; letter-spacing: .26em; text-indent: .26em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px;
}
.place{
  font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.7vw, 26px);
  line-height: 1.25; margin-bottom: 10px;
}
.addr{ font-size: 14.5px; line-height: 1.7; color: var(--soft); }
.time{
  margin-top: 8px; font-size: 12px; font-weight: 400; letter-spacing: .14em;
  text-indent: .14em; text-transform: uppercase;
}
.note{ margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--faint); font-style: italic; }
.links{ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.links a{
  font-size: 10.5px; font-weight: 400; letter-spacing: .18em; text-indent: .18em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule-color); padding-bottom: 3px;
}
.links a:hover{ border-bottom-color: var(--ink); }

/* ------------------------------------------------------------
   Panels and forms
   ------------------------------------------------------------ */
.panel{
  margin-top: 56px; padding: clamp(26px, 4vw, 44px);
  background: rgba(255,255,255,.42);
  border: 1px solid var(--hair);
}
.form{
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 22px;
}
.field{ display: flex; flex-direction: column; gap: 7px; }
.field.wide, .choices, .actions{ grid-column: 1 / -1; }
.field label, .choices legend{
  font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-indent: .2em;
  text-transform: uppercase; color: var(--soft);
}
.opt{ text-transform: none; letter-spacing: .04em; font-weight: 300; font-style: italic; color: var(--faint); }
input[type=text], input[type=email], input[type=number], textarea{
  font: inherit; font-size: 15px; color: var(--ink);
  background: rgba(255,255,255,.65);
  border: 1px solid var(--hair); border-radius: 0;
  padding: 11px 12px; width: 100%;
}
textarea{ resize: vertical; line-height: 1.65; }
input:focus, textarea:focus{ outline: 2px solid var(--ink); outline-offset: 1px; }
.choices{ border: none; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.choices legend{ margin-bottom: 10px; }
.check{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--soft); text-transform: none; letter-spacing: 0;
}
.check input{ accent-color: #6f6a60; width: 15px; height: 15px; }
.actions{
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap; margin-top: 4px;
}
button[type=submit], .btn{
  font: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-indent: .2em;
  text-transform: uppercase; color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 0;
  padding: 13px 26px; cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .2s ease, color .2s ease;
}
button[type=submit]:hover, .btn:hover{ background: var(--ink); color: var(--paper); }

/* The two submit buttons are what the page is asking people to
   do, so they arrive already filled in and lift off the paper. */
button[type=submit]{
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 32px;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 3px 10px rgba(60,52,40,.17);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
button[type=submit]::after{
  content: '\2192';
  font-size: 13px; letter-spacing: 0; text-indent: 0;
  transition: transform .2s ease;
}
button[type=submit]:hover:not([disabled]){
  background: #000;
  box-shadow: 0 8px 20px rgba(60,52,40,.27);
  transform: translateY(-2px);
}
button[type=submit]:hover:not([disabled])::after{ transform: translateX(3px); }

button[disabled]{ opacity: .45; cursor: default; }

@media (prefers-reduced-motion: reduce){
  button[type=submit], button[type=submit]::after{ transition: none; }
  button[type=submit]:hover:not([disabled]){ transform: none; }
  button[type=submit]:hover:not([disabled])::after{ transform: none; }
}
/* The RSVP form, rolled up until the button is pressed. The class
   is added by site.js, so with JavaScript off the form is simply
   there, open. */
.form{ transition: max-height .6s cubic-bezier(.4,.02,.2,1), opacity .45s ease, margin-top .6s ease; }
.form.folded{
  max-height: 0; opacity: 0; overflow: hidden;
  margin-top: 0;
  /* `visibility` also takes the fields out of the tab order, so
     the keyboard cannot land in a form nobody can see. */
  visibility: hidden;
}

.rsvp-open{ margin-top: 30px; text-align: center; }

/* The RSVP button matches Send flowers and Contribute. */
.rsvp-trigger{
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 40px; cursor: pointer;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 3px 10px rgba(60,52,40,.17);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.rsvp-trigger::after{
  content: '\2193';                /* down, because it opens below */
  font-size: 13px; letter-spacing: 0; text-indent: 0;
  transition: transform .2s ease;
}
.rsvp-trigger:hover{
  background: #000; color: var(--paper);
  box-shadow: 0 8px 20px rgba(60,52,40,.27);
  transform: translateY(-2px);
}
.rsvp-trigger:hover::after{ transform: translateY(2px); }

@media (prefers-reduced-motion: reduce){
  .form{ transition: none; }
  .rsvp-trigger, .rsvp-trigger::after{ transition: none; }
  .rsvp-trigger:hover{ transform: none; }
  .rsvp-trigger:hover::after{ transform: none; }
}

/* The repast code, sitting on the repast line itself */
.repast-line{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.repast-gate{ display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.repast-gate input{
  width: 74px; padding: 6px 8px; font-size: 12.5px;
  letter-spacing: .18em; text-indent: .18em; text-align: center;
}
.repast-go{
  font: inherit; font-size: 9px; font-weight: 500;
  letter-spacing: .14em; text-indent: .14em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 0;
  padding: 7px 12px; cursor: pointer; line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.repast-go:hover{ background: var(--ink); color: var(--paper); }
.repast-msg{ font-size: 12px; color: #8a4b45; font-style: italic; }
.repast-gate.open{
  font-size: 12px; font-style: italic; color: var(--faint);
}
.check input[disabled]{ opacity: .4; }
.check input[disabled] ~ *{ color: var(--faint); }

.form-status{ font-size: 13px; color: var(--soft); font-style: italic; }
.fineprint{ margin-top: 18px; font-size: 12px; color: var(--faint); font-style: italic; }

/* ------------------------------------------------------------
   Obituary
   ------------------------------------------------------------ */
.portrait-plate{
  width: min(260px, 62vw); margin: 0 auto 36px;
  padding: 9px; background: #fff; border: 1px solid var(--hair);
  box-shadow: 0 8px 22px rgba(60,52,40,.12);
}
.portrait-plate img{ display: block; width: 100%; filter: grayscale(.35) contrast(1.03); }
/* The obituary opens partly shown, with a button to read the
   rest. The clamp is added by site.js, so with JavaScript off
   the whole text is simply there. */
.prose{ position: relative; max-height: 400em; overflow: hidden; transition: max-height .7s ease; }
.prose.clamped{ max-height: 27em; }
.prose.clamped::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8em;
  background: linear-gradient(to bottom, rgba(226,221,212,0), var(--paper-2));
  pointer-events: none;
}

.more-wrap{ text-align: center; margin-top: 6px; }
.more{
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  color: var(--faint); padding: 12px 4px 4px;
  border-bottom: 1px solid var(--rule-color);
  transition: color .2s ease, border-color .2s ease;
}
.more:hover{ color: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  .prose{ transition: none; }
}

.prose p{ font-size: 16.5px; line-height: 1.9; color: #26251f; margin-bottom: 1.15em; }
.prose p:first-of-type::first-letter{
  font-family: var(--display); font-size: 3.1em; line-height: .82;
  float: left; padding: .06em .1em 0 0; color: var(--ink);
}
.drop-note{
  font-size: 12.5px !important; line-height: 1.7 !important; color: var(--faint) !important;
  font-style: italic; border-left: 2px solid var(--rule-color); padding-left: 14px;
}
.drop-note::first-letter{ font-size: inherit !important; float: none !important; font-family: inherit !important; }
.pull{
  margin: 44px auto 0; max-width: 42ch; text-align: center;
  padding-top: 30px; border-top: 1px solid var(--hair);
}
.pull p{
  font-family: var(--display); font-style: italic; font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.65; color: var(--soft);
}

/* ------------------------------------------------------------
   Gallery
   ------------------------------------------------------------ */
/* A rotating row of tiles. Five across on a wide screen, fewer
   as it narrows. The number visible is set here in CSS; site.js
   reads the real tile width, so the two never disagree. */
.strip{ position: relative; margin-top: 46px; }
.strip-frame{ overflow: hidden; padding: 6px 0; }

.gallery{
  --tile-gap: clamp(12px, 1.6vw, 20px);
  --per-view: 5;
  display: flex;
  gap: var(--tile-gap);
  transition: transform .7s cubic-bezier(.4,.02,.2,1);
}
.gallery > *{
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--tile-gap)) / var(--per-view));
}

.strip-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 42px; height: 42px; padding: 0;
  background: rgba(255,255,255,.9); border: 1px solid var(--hair);
  color: #46413a; font-size: 24px; line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.strip-arrow:hover{ background: #fff; color: #000; }
.strip-arrow.prev{ left: -19px; }
.strip-arrow.next{ right: -19px; }

@media (max-width: 1000px){
  .gallery{ --per-view: 3; }
}
@media (max-width: 640px){
  .gallery{ --per-view: 2; }
  .strip-arrow.prev{ left: -6px; }
  .strip-arrow.next{ right: -6px; }
}

@media (prefers-reduced-motion: reduce){
  .gallery{ transition: none; }
}
.tile{
  position: relative; padding: 8px; background: #fff; border: 1px solid var(--hair);
  cursor: pointer; box-shadow: 0 5px 16px rgba(60,52,40,.09);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(60,52,40,.16); }
.tile img{ display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(.2); }
.tile figcaption{
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding: 9px 2px 2px; text-align: center;
}
.tile.empty{
  cursor: default; background: rgba(255,255,255,.3); box-shadow: none;
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 4/5; padding: 20px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); line-height: 1.9; border-style: dashed;
}
.tile.empty:hover{ transform: none; }

@media (prefers-reduced-motion: reduce){
  .tile{ transition: none; }
  .tile:hover{ transform: none; }
}

.lightbox{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24,22,18,.94);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 4vh 4vw;
}
.lightbox[hidden]{ display: none; }
.lb-figure{ max-width: 88vw; max-height: 88vh; text-align: center; }
.lb-figure img{ max-width: 100%; max-height: 78vh; object-fit: contain; background: #fff; padding: 8px; }
.lb-figure figcaption{
  margin-top: 14px; color: #d8d2c7; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}
.lb-close, .lb-prev, .lb-next{
  background: transparent; border: none; color: #e8e4dd; cursor: pointer;
  font-size: 34px; line-height: 1; padding: 10px 14px;
}
.lb-close{ position: absolute; top: 14px; right: 18px; font-size: 30px; }
.lb-prev:hover, .lb-next:hover, .lb-close:hover{ color: #fff; }

/* ------------------------------------------------------------
   A page with no invitation above it (memories.html). The top
   bar is always in place there, so the content starts below it.
   ------------------------------------------------------------ */
.page-plain main{ padding-top: 62px; }

/* `.center` on its own does nothing; it is only defined paired
   with `.lede`. So this centres itself rather than relying on it. */
.cta-wrap{ margin-top: 34px; text-align: center; }

/* The photograph picker on the memory form */
.field input[type="file"]{
  font: inherit; font-size: 13px; color: var(--soft);
  padding: 10px 12px;
  background: rgba(255,255,255,.5);
  border: 1px dashed var(--rule-color);
  cursor: pointer;
}
.field input[type="file"]::file-selector-button{
  font: inherit; font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-indent: .14em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 1px solid var(--ink); border-radius: 0;
  padding: 8px 14px; margin-right: 14px; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover{
  background: var(--ink); color: var(--paper);
}
.picked{
  margin-top: 8px; font-size: 12px; color: var(--faint); font-style: italic;
}

/* Previews of the chosen photographs, as little paper prints. */
.thumbs{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 12px;
}
.thumbs:empty{ margin-top: 0; }
.thumb{
  width: 92px;
  padding: 5px; background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 2px 8px rgba(60,52,40,.10);
}
.thumb img{
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
}
.thumb figcaption{
  margin-top: 5px;
  font-size: 9px; letter-spacing: .04em; color: var(--faint);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sending photographs and video */
.sendmedia{
  margin-top: 46px; padding: clamp(24px, 3vw, 34px);
  background: rgba(255,255,255,.42); border: 1px solid var(--hair);
  text-align: center;
}
.sendmedia h3{
  font-family: var(--display); font-weight: 400; font-size: 22px;
  margin-bottom: 12px;
}
.sendmedia p{
  font-size: 14.5px; line-height: 1.75; color: var(--soft);
  max-width: 560px; margin: 0 auto;
}
/* `.links` is a flex row, so centring needs justify-content;
   text-align does nothing to a flex item. */
.sendmedia .links{ margin-top: 22px; justify-content: center; }

/* The same filled button as "Send to the family" below it, so the
   two reads as a pair rather than two different kinds of thing. */
.sendmedia .btn{
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 32px;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 3px 10px rgba(60,52,40,.17);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sendmedia .btn::after{
  content: '\2192';
  font-size: 13px; letter-spacing: 0; text-indent: 0;
  transition: transform .2s ease;
}
.sendmedia .btn:hover{
  background: #000; color: var(--paper);
  box-shadow: 0 8px 20px rgba(60,52,40,.27);
  transform: translateY(-2px);
}
.sendmedia .btn:hover::after{ transform: translateX(3px); }

@media (prefers-reduced-motion: reduce){
  .sendmedia .btn, .sendmedia .btn::after{ transition: none; }
  .sendmedia .btn:hover{ transform: none; }
  .sendmedia .btn:hover::after{ transform: none; }
}

.backlink{
  margin-top: 54px; text-align: center;
  font-size: 11px; letter-spacing: .18em; text-indent: .18em;
  text-transform: uppercase;
}
.backlink a{ color: var(--faint); border-bottom: 1px solid var(--rule-color); padding-bottom: 3px; }
.backlink a:hover{ color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------
   Memory wall
   ------------------------------------------------------------ */
.wall{ margin-top: 52px; columns: 2; column-gap: 22px; }
.memo{
  break-inside: avoid; margin-bottom: 22px; padding: 26px 26px 22px;
  background: rgba(255,255,255,.5); border: 1px solid var(--hair);
}
.memo p{ font-size: 15px; line-height: 1.8; color: #26251f; }
.memo .by{
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--hair);
  font-size: 10px; font-weight: 500; letter-spacing: .2em; text-indent: .2em;
  text-transform: uppercase; color: var(--faint);
}
.memo .by em{ font-style: normal; color: var(--soft); }
.wall-empty{
  text-align: center; color: var(--faint); font-style: italic; font-size: 14px;
  padding: 30px 0;
}

/* ------------------------------------------------------------
   Giving
   ------------------------------------------------------------ */
.cards{
  margin-top: 46px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.give{
  position: relative; overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  background: rgba(255,255,255,.42); border: 1px solid var(--hair);
  display: flex; flex-direction: column;
}

/* An orchid spilling out of the corner, echoing the invitation.
   Decoration only, so it is hidden from screen readers and takes
   no clicks. */
.give-orchid{
  position: absolute; right: -40px; bottom: 24px;
  width: 158px; opacity: .28;
  pointer-events: none; user-select: none;
}

/* The cross balances the orchid in the next card along. It sits
   quietly behind the text rather than competing with it. */
.give-cross{
  position: absolute; right: 20px; bottom: 74px;
  font-size: 96px; line-height: 1;
  color: var(--soft); opacity: .16;
  pointer-events: none; user-select: none;
}
.give h3{
  font-family: var(--display); font-weight: 400; font-size: 22px; margin-bottom: 14px;
}
.give p{ font-size: 14.5px; line-height: 1.75; color: var(--soft); margin-bottom: 10px; }
.give .addr{ font-size: 13.5px; }
.give .links{ margin-top: auto; padding-top: 20px; position: relative; z-index: 1; }

/* The giving buttons are the one thing on the page asking to be
   pressed, so unlike the quiet form buttons they arrive already
   filled in. */
.give .btn{
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; padding: 15px 22px;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: 0 3px 10px rgba(60,52,40,.17);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.give .btn::after{
  content: '\2192';                /* arrow */
  font-size: 13px; letter-spacing: 0; text-indent: 0;
  transition: transform .2s ease;
}
.give .btn:hover{
  background: #000; color: var(--paper);
  box-shadow: 0 8px 20px rgba(60,52,40,.27);
  transform: translateY(-2px);
}
.give .btn:hover::after{ transform: translateX(3px); }

@media (prefers-reduced-motion: reduce){
  .give .btn, .give .btn::after{ transition: none; }
  .give .btn:hover{ transform: none; }
  .give .btn:hover::after{ transform: none; }
}

/* Ribbons ----------------------------------------------------
   These sit in one of the three cards, so they stack down the
   card rather than sitting side by side. */
.ribbons{
  margin-top: 16px;
  display: flex; flex-direction: column;
  gap: 7px;
}
.ribbon{
  --ribbon: var(--faint);
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--ribbon);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ribbon:hover{
  background: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(60,52,40,.13);
}
/* The left edge picks up each ribbon's own colour. */
.ribbon[data-ribbon="diabetes"]{ --ribbon: #2f9fe3; }
.ribbon[data-ribbon="heart"]   { --ribbon: #c62b2b; }
.ribbon[data-ribbon="nursing"] { --ribbon: #6a5b96; }
.ribbon[data-ribbon="jamaica"] { --ribbon: #009b3a; }

/* The ribbons carry their real colours, so they sit slightly back
   on the paper and come fully forward on hover. */
.ribbon-mark{ flex: none; width: 19px; height: 27px; }
.ribbon-mark svg{
  width: 100%; height: 100%; display: block;
  opacity: .88; transition: opacity .2s ease;
}
.ribbon:hover .ribbon-mark svg{ opacity: 1; }

.ribbon-text{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ribbon-text strong{
  font-family: var(--sans); font-weight: 400; font-size: 12.5px;
  color: var(--ink); line-height: 1.25;
}
.ribbon-text em{
  font-style: normal; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); line-height: 1.3;
}

@media (prefers-reduced-motion: reduce){
  .ribbon{ transition: none; }
  .ribbon:hover{ transform: none; }
}

/* ------------------------------------------------------------
   The song, in the bottom corner

   At rest it is a small paper disc with four still bars. Hover
   or focus and it widens to name itself; while playing, the bars
   move. It is deliberately quiet, because it sits on top of the
   page the whole way down.
   ------------------------------------------------------------ */
.music{
  position: fixed; left: 18px; bottom: 18px; z-index: 50;
}
.music[hidden]{ display: none; }

/* The disc and the panel share one paper pill. The panel is
   folded to nothing until the pill is hovered or the keyboard
   lands anywhere inside it. */
.music{
  display: flex; align-items: center;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--hair); border-radius: 999px;
  box-shadow: 0 3px 14px rgba(60,52,40,.16);
  backdrop-filter: saturate(1.1) blur(6px);
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.music:hover, .music:focus-within{
  box-shadow: 0 7px 20px rgba(60,52,40,.24);
}

.music-btn{
  display: flex; align-items: center; justify-content: center;
  flex: none; height: 44px; width: 44px; padding: 0;
  background: transparent; border: none; border-radius: 999px;
  cursor: pointer;
}

.music-panel{
  display: flex; align-items: center; gap: 10px;
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .34s cubic-bezier(.4,.02,.2,1), opacity .24s ease, padding .34s ease;
  padding-right: 0;
}
.music:hover .music-panel,
.music:focus-within .music-panel{
  max-width: 230px; opacity: 1; padding-right: 16px;
}

/* The four bars. Still until the song is running. */
.eq{
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 2.5px;
}
.eq i{
  display: block; width: 2.5px; height: 13px; border-radius: 2px;
  background: var(--soft);
  transform: scaleY(.34); transform-origin: center;
  transition: transform .25s ease;
}
/* The bars move while the track is running. They stop when it is
   paused, whether or not anyone can hear it. */
.music:not(.paused) .eq i{
  animation: eqBounce .9s ease-in-out infinite;
  transition: none;
}
/* Different speeds per bar, or it reads as one blinking block. */
.music:not(.paused) .eq i:nth-child(1){ animation-duration: .78s; }
.music:not(.paused) .eq i:nth-child(2){ animation-duration: 1.12s; }
.music:not(.paused) .eq i:nth-child(3){ animation-duration: .64s; }
.music:not(.paused) .eq i:nth-child(4){ animation-duration: .96s; }

/* Silent, but running: the bars fade back so the player does not
   claim to be making a sound nobody can hear. */
.music.silent .eq i{ opacity: .45; }
@keyframes eqBounce{
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1); }
}

/* The play or pause mark sits over the bars while hovered, so
   the disc says what pressing it will do. */
.music-glyph{
  position: absolute; opacity: 0;
  font-size: 11px; color: var(--ink); line-height: 1;
  transition: opacity .18s ease;
}
.music-btn{ position: relative; }
.music:hover .eq, .music:focus-within .eq{ opacity: 0; }
.music:hover .music-glyph, .music:focus-within .music-glyph{ opacity: 1; }
.eq{ transition: opacity .18s ease; }
.music-glyph::before{ content: '\275A\275A'; letter-spacing: 1px; }  /* pause */
.music.paused .music-glyph::before{ content: '\25B6'; }              /* play */

.music-label{
  white-space: nowrap;
  font-size: 9.5px; font-weight: 500;
  letter-spacing: .15em; text-indent: .15em; text-transform: uppercase;
  color: var(--ink);
}

/* Volume. Kept plain, and given a real track and thumb in the
   page's own colours rather than the browser's blue. */
.music-vol{
  -webkit-appearance: none; appearance: none;
  width: 74px; height: 3px; margin: 0;
  background: var(--rule-color); border-radius: 2px;
  cursor: pointer; flex: none;
}
.music-vol::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: none; cursor: pointer;
}
.music-vol::-moz-range-thumb{
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: none; cursor: pointer;
}
.music-vol:focus-visible{ outline: 2px solid var(--soft); outline-offset: 4px; }

/* Anyone who asked for less motion gets a still player, and no
   sliding open. The song itself still plays if they press it. */
@media (prefers-reduced-motion: reduce){
  .music, .music-panel, .eq, .music-glyph{ transition: none; }
  .music:not(.paused) .eq i{ animation: none; transform: scaleY(.7); }
}

/* On a phone it sits a little tighter into the corner, and out
   of the way of the thumb reaching the bottom of the page. */
@media (max-width: 640px){
  .music{ left: 12px; bottom: 12px; }
}

@media print{
  .music{ display: none !important; }
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot{ text-align: center; padding: clamp(50px, 7vw, 80px) 20px clamp(46px, 6vw, 70px); }
.foot .cross{ font-size: 15px; color: var(--soft); margin-bottom: 20px; }
.foot-name{
  font-family: var(--display); font-size: clamp(21px, 3vw, 27px);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px;
}
.foot-dates{
  font-size: 10.5px; letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  color: var(--soft); margin-bottom: 22px;
}
.foot-fam{ font-family: var(--display); font-style: italic; font-size: 15px; color: var(--faint); }

/* ------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------ */
@media (max-width: 720px){
  .form{ grid-template-columns: 1fr; }
  .wall{ columns: 1; }
  .stop{ grid-template-columns: 74px 1fr; gap: 18px; }
  .stop-when .dnum{ font-size: 34px; }
  .lede.center{ margin-bottom: 30px; }
}

/* ------------------------------------------------------------
   Print. Printing this page gives you the 5 x 7 card alone.
   ------------------------------------------------------------ */
@media print{
  @page{ size: 5in 7in; margin: 0; }
  body{ background: #fff; }
  body::before, .topbar, .scroll-cue, .sheet, .foot, .lightbox{ display: none !important; }
  .hero{ background: #fff; padding: 0; border: none; }
  .card{ box-shadow: none; width: 5in; height: 7in; transform: none !important; }
  .stage{ height: auto !important; }
}