/* ============================================================
   tribute.css — the Tribute pages only.

   Loaded after styles.css and videmory.css, and only by /tribute/ and the
   page under it. Everything is scoped to body.vm.tribute, so no Travel or
   Birthday page can pick any of it up.

   Who these pages are for decides all of it. Somebody arranging a funeral,
   often older, often on a phone, reading carefully. So: a warm paper ground
   rather than the site's near-black, dark ink, larger type, tap targets of
   48px, and nothing that moves as the page scrolls. The photographs and the
   film are the only things on the page that ask to be looked at.

   Contrast, measured (WCAG 2, ratio against the ground it sits on):

     ground #F6F1E8 · band #EAE3D9 · card #FFFDF9 · film band #2A2622

     headings   #26221C   14.1 on ground · 12.4 on band
     body       #4A453C    8.5 on ground ·  7.5 on band
     small      #5E574C    6.2 on ground ·  5.6 on band
     links      #6B4F2A    6.7 on ground ·  5.9 on band
     kicker     #705634    6.1 on ground ·  5.4 on band
     button     #FFFDF9 on #3B3329   12.2
     focus ring #8A5A1E    5.2 on ground ·  4.6 on band (needs 3)
     field edge #857B6A    4.1 on card (needs 3)
     error      #9B2C2C    7.4 on card
     footer     #F3EDE3 on #2A2622   12.9

   The site's own accent (#D8C9B4) is 1.4:1 on this ground and its white
   button 1.1:1, which is why the tokens are re-pointed below rather than
   only the things that looked wrong.
   ============================================================ */

body.vm.tribute {
  --bg-deep:      #F6F1E8;
  --paper:        #F6F1E8;
  --paper-deep:   #EAE3D9;
  --ink:          #26221C;
  --ink-soft:     #4A453C;
  --ink-line:     rgba(38, 34, 28, 0.16);
  --on-dark:      #26221C;
  --on-dark-82:   #332E27;
  --on-dark-70:   #4A453C;
  --on-dark-60:   #5E574C;
  --on-dark-55:   #5E574C;
  --on-dark-50:   #5E574C;
  --hairline:     rgba(38, 34, 28, 0.24);
  --hairline-soft:rgba(38, 34, 28, 0.12);
  --pink:         #6B4F2A;
  --pink-deep:    #6B4F2A;
  --purple:       #857B6A;
  --on-light:     #FFFDF9;   /* the ink on a button, which is dark here */

  background: #F6F1E8;
  color: #4A453C;
  font-size: 18px;
}

/* ---------- Type ---------- */

.tribute h1 {
  color: #26221C;
  font-size: clamp(36px, 3.9vw, 56px);
  line-height: 1.1;
  letter-spacing: -1.4px;
  margin-bottom: 26px;
}
.tribute h1 em { color: #6B4F2A; }
/* Even lines, so a long heading does not leave one word alone on the last. */
.tribute h1, .tribute h2 { text-wrap: balance; }
.tribute h2 { color: #26221C; letter-spacing: -0.8px; }
.tribute h3 { color: #26221C; font-size: 23px; margin: 14px 0 10px; }
.tribute .b-kicker { color: #705634; font-size: 13px; letter-spacing: 1.6px; margin-bottom: 18px; }
.tribute .b-lead, .tribute .b-intro { color: #4A453C; font-size: 19.5px; }
.tribute .b-lead { max-width: 560px; }
.tribute .b-small { color: #5E574C; font-size: 15px; line-height: 1.6; }

.tribute main a { color: #6B4F2A; }
.tribute main a:hover { color: #26221C; }
.tribute main p a, .tribute main li a, .tribute main figcaption a {
  text-decoration: underline; text-underline-offset: 4px;
}

/* A ring that can be seen on paper, on the band and on a card. The site's
   own is 2.7:1 here. */
.tribute a:focus-visible,
.tribute button:focus-visible,
.tribute summary:focus-visible,
.tribute .b-strip:focus-visible { outline: 3px solid #8A5A1E; outline-offset: 4px; }
.tribute .skip-link { background: #FFFDF9; color: #26221C; border-color: #26221C; }
.tribute .skip-link:focus { color: #26221C; }

/* ---------- Navigation ---------- */

.tribute .site-nav { border-bottom: 1px solid rgba(38, 34, 28, 0.12); }
/* The mark's colour is written into the SVG; CSS outranks a presentation
   attribute, so it is re-inked here rather than drawn twice. */
.tribute .site-nav .nav-brand svg { stroke: #6B4F2A; }
.tribute .site-nav .nav-brand svg path[stroke="none"] { fill: #6B4F2A; stroke: none; }

.tribute .site-nav .nav-brand { min-height: 44px; }
/* The product switcher, the same three pills every page carries, on paper.
   Its colours come from the re-pointed tokens: the pill for the page you are
   on is the accent brown with paper-white text (6.7:1), the other two are
   the small-print ink (6.2:1). Only the outline needs saying, because the
   token it uses is too faint to see on this ground. */
.tribute .nav-switch { border-color: rgba(38, 34, 28, 0.28); }
.tribute .nav-switch a { color: #4A453C; }
.tribute .nav-switch a:hover { color: #26221C; }
.tribute .nav-switch a[aria-current="page"],
.tribute .nav-switch a[aria-current="page"]:hover { color: #FFFDF9; }
.tribute .nav-links a { font-size: 16px; }

/* ---------- Buttons ---------- */

.tribute .btn { height: auto; min-height: 56px; padding: 14px 30px; font-size: 18px; }
.tribute .btn-nav { min-height: 44px; padding: 8px 22px; font-size: 15.5px; }
.tribute .btn-primary { background: #3B3329; color: #FFFDF9; box-shadow: none; }
.tribute .btn-primary:hover { background: #26221C; color: #FFFDF9; }
.tribute .nav-links a.btn, .tribute .nav-links a.btn:hover { color: #FFFDF9; }
.tribute main a.btn { text-decoration: none; color: #FFFDF9; }

.tribute .b-text-link {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0;
  font-size: 17px; color: #26221C;
  border-bottom: 0;
  text-decoration: underline; text-decoration-color: #857B6A; text-underline-offset: 6px;
}
.tribute .b-actions { margin: 28px 0 18px; }

/* ---------- The opening ---------- */

.tribute .t-hero { padding-top: 64px; padding-bottom: 76px; align-items: center; }
/* A size at which the opening line sits as three even lines beside the
   prints, at every desktop width, rather than four on a wide screen. */
.tribute .t-hero h1 { font-size: clamp(34px, 3.6vw, 50px); }
.t-price { margin-top: 22px; font-size: 19px; color: #26221C; max-width: 540px; }
.t-price strong {
  font-family: var(--serif);
  font-size: 32px; font-weight: 600; letter-spacing: -0.6px;
  margin-right: 6px;
}
.t-preview-note {
  display: inline-block; padding: 8px 12px; border-radius: 6px;
  background: #FFF3CD; border: 1px solid #8A5A1E; color: #26221C;
}

/* Prints on a table, as the rest of the site lays them — but they arrive
   already dealt. Nothing on these pages moves as you scroll. */
.tribute .b-stack img {
  border: 7px solid #FFFDF9;
  background: #DDD5C8;
  box-shadow: 0 14px 34px rgba(38, 34, 28, 0.22), 0 2px 6px rgba(38, 34, 28, 0.16);
}
.vm-js .tribute .b-stack img { opacity: 1; }
.tribute .b-stack.is-dealt img { animation: none; }
.tribute .b-stack figcaption { color: #5E574C; font-size: 13.5px; }

.vm-js .tribute .vm-rise,
.vm-js .tribute .vm-pop { opacity: 1; transform: none; transition: none; }
.tribute .vm-progress { display: none; }

/* ---------- The sample film ---------- */

.t-film { margin: 0; }
/* The film plays full width in a section of its own under the opening, as
   Birthday's and Travel's do (9 October 2026); the opening has the prints. */
.t-film figcaption { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: #5E574C; }
.tribute .vm-film { border: 0; border-radius: 6px; overflow: hidden; background: #2A2622; }
.tribute section .t-film { margin: 34px 0 10px; max-width: 960px; }

/* Preview builds only: where the film will go. Hatched and dashed so it
   cannot be mistaken for a player that has failed to load. */
.t-pending {
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 28px;
  border: 2px dashed #857B6A; border-radius: 6px;
  background: repeating-linear-gradient(45deg, #EAE3D9, #EAE3D9 14px, #E2DACD 14px, #E2DACD 28px);
  color: #26221C;
}
.t-pending p { max-width: 420px; font-size: 16px; line-height: 1.5; }

/* ---------- Sections ---------- */

.tribute .b-promise { border-color: rgba(38, 34, 28, 0.16); }
.tribute .b-promise ul { color: #4A453C; font-size: 16px; }
.tribute .b-promise li:before { color: #6B4F2A; }

.t-alt { background: #EAE3D9; }
.wrap.t-narrow { max-width: 860px; }
.tribute .t-head { padding-top: 44px; padding-bottom: 72px; }
.tribute .t-head h1 { max-width: 880px; }
.tribute .b-back { color: #6B4F2A; font-size: 15px; margin-bottom: 30px; min-height: 44px; display: inline-flex; align-items: center; }

.tribute .b-card { border-top: 1px solid #B6AD9E; }
.tribute .b-card p { color: #4A453C; font-size: 17px; }
.tribute .b-number { color: #705634; font-size: 13px; }
.t-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 20px 56px; }

.tribute .b-list { color: #4A453C; margin: 22px 0 8px 22px; }
.tribute .b-list li { padding: 7px 0 7px 6px; }
.t-includes { align-items: start; margin-top: 30px; }
.tribute .b-note {
  margin: 0; padding: 28px 30px;
  background: #FFFDF9; border-left: 3px solid #6B4F2A;
}
.tribute .b-note h3 { margin-top: 0; }
.tribute .b-note p { color: #4A453C; font-size: 17px; }
.tribute .b-note p + p { margin-top: 14px; }

/* The steps, read downwards: a number, what you do, and one paragraph. */
.t-steps { list-style: none; margin: 38px 0 6px; padding: 0; max-width: 860px; }
.t-steps li {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 26px 0;
  border-top: 1px solid #B6AD9E;
}
.t-steps li:last-child { border-bottom: 1px solid #B6AD9E; }
.t-steps .b-number { padding-top: 6px; }
.t-steps h3 { margin: 0 0 8px; }
.t-steps p { color: #4A453C; }

/* ---------- The strip of photographs ---------- */

.tribute .b-strip { margin-top: 30px; gap: 16px; }
.tribute .b-strip figure { flex-basis: 240px; }
.tribute .b-strip img { background: #DDD5C8; border-radius: 2px; }
.tribute .b-strip figcaption { color: #5E574C; font-size: 14.5px; line-height: 1.45; }
.tribute .b-strip figcaption b { color: #26221C; font-size: 15.5px; font-weight: 600; }

/* ---------- Questions ---------- */

.tribute .b-faq { max-width: 860px; margin-top: 26px; }
.tribute .b-faq details { border-bottom: 1px solid #B6AD9E; padding: 6px 0; }
.tribute .b-faq summary {
  padding: 14px 0; min-height: 48px;
  font-family: var(--serif); font-size: 20px; line-height: 1.35; color: #26221C;
}
.tribute .b-faq details p { color: #4A453C; padding: 2px 24px 18px 0; }

/* ---------- Forms ---------- */

.tribute .form-panel {
  margin-top: 30px; max-width: 680px;
  background: #FFFDF9; border: 1px solid #D5CCBD;
}
.tribute .form-row label { color: #26221C; font-size: 17px; font-weight: 600; }
.tribute .form-row .hint { color: #5E574C; font-size: 15.5px; font-weight: 400; }
.tribute .form-row input,
.tribute .form-row textarea {
  min-height: 52px;
  background: #fff; border: 1px solid #857B6A; border-radius: 10px;
  color: #26221C; font-size: 18px;
}
.tribute .form-row textarea { min-height: 150px; }
/* The site's own is a pale glow, which on a white field is nearly nothing. */
.tribute .form-row input:focus,
.tribute .form-row textarea:focus {
  outline: 3px solid #8A5A1E; outline-offset: 2px;
  border-color: #26221C; box-shadow: none;
}
.tribute .form-status {
  margin: 0 0 18px; padding: 14px 16px;
  font-size: 17px; color: #26221C;
  background: #EAE3D9; border-left: 3px solid #6B4F2A;
}
.tribute .form-status.is-error { color: #9B2C2C; background: #FBEDED; border-left-color: #9B2C2C; padding-left: 16px; }
.tribute .form-panel .b-small { margin-top: 18px; }

/* ---------- Guide pages, and the links to them ----------
   Long-form reading on the band: one column, generous leading, and a table
   that scrolls sideways on a phone rather than squeezing. */

.t-article h2 { margin: 46px 0 14px; font-size: 30px; }
.t-article h2:first-child { margin-top: 0; }
.t-article p { margin-bottom: 16px; }
.t-article .b-list { margin: 8px 0 20px 22px; }
.t-article .b-small { margin-top: 0; }
.tribute .t-article code {
  padding: 2px 7px; border-radius: 4px; background: #FFFDF9; color: #26221C; white-space: nowrap;
}

.t-table-wrap { overflow-x: auto; margin: 22px 0 14px; }
.t-table { width: 100%; min-width: 560px; border-collapse: collapse; background: #FFFDF9; font-size: 17px; }
.t-table caption {
  caption-side: top; text-align: left; padding: 0 0 10px;
  font-size: 15px; color: #5E574C;
}
.t-table th, .t-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid #D5CCBD; color: #4A453C; }
.t-table thead th { font-size: 14.5px; font-weight: 600; color: #26221C; vertical-align: bottom; }
.t-table tbody th { font-weight: 600; color: #26221C; white-space: nowrap; }

.t-guide-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin-top: 22px; max-width: 980px; }
.tribute main .t-guide-links a {
  display: flex; align-items: center; min-height: 56px; padding: 14px 0;
  border-top: 1px solid #B6AD9E;
  font-size: 18.5px; line-height: 1.35; color: #26221C; text-decoration: none;
}
.tribute main .t-guide-links a:hover { color: #6B4F2A; }
.tribute .t-guides-title { margin: 54px 0 0; font-size: 23px; }
.tribute .b-note.t-tell { margin: 34px 0 6px; max-width: 760px; }

@media (max-width: 760px) {
  .t-guide-links { grid-template-columns: 1fr; }
  .t-article h2 { margin-top: 36px; font-size: 26px; }
}

/* ---------- The footer keeps the site's dark ground ----------
   The tokens are put back to their dark values inside it, so the footer the
   other thirty-nine pages carry reads the same here. */
.tribute .site-footer {
  --bg-deep:       #2A2622;
  --on-dark:       #ffffff;
  --on-dark-70:    rgba(255, 255, 255, 0.78);
  --on-dark-55:    rgba(255, 255, 255, 0.66);
  --hairline-soft: rgba(231, 226, 217, 0.14);
  --pink:          #D8C9B4;
  background: #2A2622;
  color: #F3EDE3;
  border-top: 0;
  font-size: 16px;
}
.tribute .site-footer .nav-brand svg { stroke: #D8C9B4; }
.tribute .site-footer a:focus-visible { outline-color: #E7CFAE; }

/* ---------- Narrower ---------- */

/* Below 1100px the links are behind the menu button on every page
   (styles.css). Just above it, four links, a button and three pills want a
   little less room each. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .tribute .nav-links { gap: 20px; }
  .tribute .nav-links a { font-size: 15px; }
  .tribute .btn-nav { padding: 8px 16px; font-size: 15px; }
}

@media (max-width: 760px) {
  body.vm.tribute { font-size: 17.5px; }
  /* Sized so the price and the button are on the first screen of a phone. */
  .tribute h1 { font-size: 32px; letter-spacing: -1px; margin-bottom: 18px; }
  .tribute .t-hero { padding-top: 22px; padding-bottom: 56px; gap: 40px; }
  .tribute .t-hero .b-kicker { margin-bottom: 12px; }
  .t-price { margin-top: 16px; }
  .t-price strong { font-size: 28px; }
  .tribute .b-actions { margin-top: 20px; }
  /* The words come first on a phone here: the price and the button should
     not sit under a pile of photographs. */
  .tribute .vm-hero .b-stack { order: 0; margin: 4px 0 64px; }
  .tribute .b-lead, .tribute .b-intro { font-size: 18px; }
  .tribute .b-lead { line-height: 1.6; }
  .tribute .b-actions { gap: 10px 22px; }
  .tribute .b-actions .btn { width: 100%; }
  .t-grid-2 { grid-template-columns: 1fr; gap: 6px; }
  .t-steps li { grid-template-columns: 34px 1fr; gap: 12px; padding: 22px 0; }
  .tribute .b-faq summary { font-size: 19px; }
  .tribute .b-note { padding: 22px; margin-top: 24px; }
  .tribute .b-strip figure { flex-basis: 200px; }
  .tribute .t-head { padding-top: 24px; padding-bottom: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .tribute * { scroll-behavior: auto !important; }
}

/* ---------- The messages: one speaker at a time ----------
   Directly under the strip of photographs and part of the same example, so
   it shares the strip's ground and is set off by a rule rather than a band.

   One message fills the slider. Each picture keeps the shape it was made in
   — nine are upright, five on their side — and sits whole on a mount the
   colour of the band; nothing is cropped to make them match. There is no
   play button and no player-shaped frame: these are stills, and the caption
   under each says so.

   It is a sideways-scrolling row with scroll snapping, so it swipes and
   scrolls with no script at all. tribute-messages.js adds the buttons. */

.tribute .t-messages { padding-top: 0; }
.t-messages > .wrap:before {
  content: ''; display: block; height: 1px; background: #B6AD9E; margin-bottom: 64px;
}

.t-msg-how {
  max-width: 760px; margin: 28px 0 0; padding: 18px 22px;
  background: #FFFDF9; border-left: 3px solid #6B4F2A;
}
.tribute .t-msg-how h3 { margin: 0 0 6px; font-size: 19px; }
.t-msg-how p { font-size: 17px; color: #4A453C; }

.t-msg-slider { margin-top: 34px; }
.t-msg-track {
  position: relative;
  display: flex; gap: 24px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 18px;
  scrollbar-width: thin; scrollbar-color: #857B6A transparent;
}
.tribute .t-msg-track:focus-visible { outline: 3px solid #8A5A1E; outline-offset: 4px; }

.t-msg {
  flex: 0 0 100%; min-width: 0;
  scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  background: #FFFDF9; border: 1px solid #D5CCBD; border-radius: 8px; overflow: hidden;
}
.t-msg.is-upright { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }

.t-msg-media {
  margin: 0; min-height: 480px; padding: 28px 28px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: #EAE3D9;
}
/* The picture at its own proportions. One dimension is set and the other
   follows from the width and height attributes, so the space is held before
   the file arrives: a picture on its side fills the width of the mount, an
   upright one is given a height. Left with both at auto, an image that has
   not loaded yet is no size at all. */
.tribute .t-msg-media img {
  display: block; width: 100%; height: auto;
  border: 6px solid #FFFDF9; background: #DDD5C8;
  box-shadow: 0 10px 26px rgba(38, 34, 28, 0.18);
}
.tribute .t-msg.is-upright .t-msg-media img { width: auto; height: 410px; max-width: 100%; }
.t-msg-media figcaption { font-size: 13px; letter-spacing: 0.4px; color: #5E574C; text-align: center; }

.t-msg-copy { align-self: center; padding: 40px 46px; }
.tribute .t-msg h3 { margin: 0 0 4px; font-size: 30px; letter-spacing: -0.5px; }
.t-msg-rel { margin-bottom: 22px; font-size: 17px; color: #5E574C; }
.t-msg blockquote { margin: 0; padding: 2px 0 2px 20px; border-left: 2px solid #B6AD9E; }
.t-msg blockquote p {
  font-family: var(--serif); font-size: 23px; line-height: 1.5; letter-spacing: -0.2px; color: #26221C;
}
.t-msg blockquote p + p { margin-top: 14px; }
.t-msg-who { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.3px; color: #5E574C; }
.t-msg blockquote p.t-msg-english {
  margin-top: 18px; font-family: var(--sans); font-size: 18px; line-height: 1.6; letter-spacing: 0; color: #4A453C;
}
.t-msg-english span {
  display: block; margin-bottom: 4px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #705634;
}

/* Above the slides, so the top of the next message is what a press shows. */
.t-msg-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.t-msg-controls[hidden] { display: none; }
.t-msg-btn {
  min-height: 48px; padding: 10px 22px;
  border: 1px solid #857B6A; border-radius: 999px;
  background: #FFFDF9; color: #26221C;
  font: 600 16px/1.2 var(--sans); cursor: pointer;
}
.t-msg-btn:hover { border-color: #26221C; }
.t-msg-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.t-msg-btn[aria-disabled="true"]:hover { border-color: #857B6A; }
.t-messages .b-small { max-width: 860px; }

@media (max-width: 1000px) {
  .t-msg, .t-msg.is-upright { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); }
  .t-msg-copy { padding: 30px 30px; }
  .t-msg blockquote p { font-size: 21px; }
}

@media (max-width: 760px) {
  .t-messages > .wrap:before { margin-bottom: 46px; }
  .t-msg-track { gap: 14px; }
  .t-msg, .t-msg.is-upright { grid-template-columns: minmax(0, 1fr); }
  .t-msg-media { min-height: 0; padding: 20px 20px 14px; }
  .tribute .t-msg-media img { border-width: 5px; }
  .tribute .t-msg.is-upright .t-msg-media img { height: 320px; }
  .t-msg-copy { align-self: start; padding: 22px 22px 28px; }
  .tribute .t-msg h3 { font-size: 26px; }
  .t-msg-rel { margin-bottom: 18px; }
  .t-msg blockquote { padding-left: 16px; }
  .t-msg blockquote p { font-size: 20px; }
  /* Each slide is as tall as its own message here, rather than all of them
     as tall as the longest: on a phone that left a screenful of empty card
     under a short one. */
  .t-msg-track { align-items: flex-start; }
  /* With the script running, the slider is then only as tall as the message
     showing (tribute-messages.js sets the height), so what follows sits
     under the card and not under the tallest one. */
  .t-msg-track.is-fitted { overflow-y: hidden; }
  .t-msg-controls { gap: 10px; }
  .t-msg-btn { flex: 1 1 0; padding: 10px 12px; font-size: 15.5px; }
}

/* The product name beside the wordmark, on paper: the accent brown the mark
   is inked in. */
.tribute .nav-product { color: #6B4F2A; opacity: 1; }
.tribute .nav-links a[aria-current="true"] { color: #26221C; }