@font-face { font-family: "Shippori Mincho"; src: url("../fonts/linen/shippori-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("../fonts/linen/shippori-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("../fonts/linen/redhat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("../fonts/linen/redhat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("../fonts/linen/delafield-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* LINEN (theme key "linen"): quiet luxury. Oat linen, charcoal ink, black-and-white photographs in fine frames, a lot
   of space. Intro: a letterpress card in a linen sleeve held by a paper belly band with the monogram; tap and the band
   slips off, the card rises. Cover: a tall photo set off to one side, the names signed across its edge, the date in big
   fine numerals. A photo the couple puts on a section sits at the top of it as a tall framed print; love-story moments
   with a photo alternate left and right like an editorial. --photo-fx turns photos black and white (Champagne keeps colour).
   Type: Shippori Mincho (display) · Red Hat Text (reading, labels) · Mrs Saint Delafield (signatures). */
:root {
  --bg: #f1ece4; --paper: #f8f5ef; --tone: #e8e1d6; --ink: #262422; --muted: #77716a; --line: rgba(38, 36, 34, .16);
  --accent: #262422; --accent-ink: #f8f5ef; --gold: #9b8466; --photo-fx: grayscale(1) contrast(1.06);
  --display: "Shippori Mincho", "Times New Roman", serif; --text: "Red Hat Text", "Helvetica Neue", Arial, sans-serif; --script: "Mrs Saint Delafield", cursive;
  --radius: 0px; --maxw: 500px; --gutter: 26px;
  --weave: repeating-linear-gradient(0deg, rgba(0, 0, 0, .022) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px);
}
body { font-family: var(--text); font-size: 1rem; line-height: 1.75; background: var(--weave), var(--bg); color: var(--ink); }

/* ---------- intro: the belly band slips off ---------- */
.ln-intro { --intro-ms: 2700; overflow: hidden; background: var(--weave), var(--bg); transition: opacity .7s ease 2s, visibility 0s linear 2.7s; }
.ln-start { display: grid; justify-items: center; gap: 26px; padding: 20px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.ln-for { font: 400 2.2rem/1 var(--script); } .ln-for b { font-weight: 400; }
.ln-pack { position: relative; width: min(64vw, 250px); aspect-ratio: .72; }
.ln-sleeve { position: absolute; inset: 0; z-index: 2; background: var(--weave), color-mix(in srgb, var(--tone) 92%, var(--ink)); box-shadow: 0 30px 40px -26px rgba(40, 30, 20, .6), inset 0 0 0 1px rgba(0, 0, 0, .05);
  transition: transform .8s cubic-bezier(.5, 0, .7, .4) 1.45s, opacity .6s ease 1.5s; }
.ln-card { position: absolute; left: 7%; right: 7%; top: 5%; bottom: 3%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px; text-align: center;
  background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: transform 1.1s cubic-bezier(.3, .7, .2, 1) .8s, z-index 0s linear 1.3s; }
.ln-card-k { font: 500 .56rem var(--text); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.ln-card-n { font: 400 1.25rem/1.25 var(--display); }
.ln-card-d { font: 400 .7rem var(--text); letter-spacing: .3em; color: var(--muted); }
.ln-band { position: absolute; left: -4%; right: -4%; top: 52%; z-index: 3; height: 22%; display: grid; place-items: center; background: var(--paper); box-shadow: 0 3px 8px rgba(40, 30, 20, .18), inset 0 0 0 1px rgba(0, 0, 0, .04);
  transition: transform .9s cubic-bezier(.6, 0, .3, 1) .05s, opacity .5s ease .5s; }
.ln-band-m { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); font: 400 1.1rem var(--display); letter-spacing: .04em; }
.ln-band-m i { font-style: normal; font-size: .7em; margin: 0 1px; color: var(--muted); }
.ln-tap { font: 500 .66rem var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); animation: ln-pulse 2.6s ease-in-out infinite; }
@keyframes ln-pulse { 50% { opacity: .35; } }
.is-opening .ln-band { transform: translateX(130%) rotate(8deg); opacity: 0; }
.is-opening .ln-card { transform: translateY(-58%); z-index: 4; }
.is-opening .ln-sleeve { transform: translateY(70%); opacity: 0; }
.is-opening .ln-tap, .is-opening .ln-for { opacity: 0; transition: opacity .3s; animation: none; }
@media (prefers-reduced-motion: reduce) { .ln-tap { animation: none; } }

/* ---------- cover ---------- */
.t-linen .ln-hero { display: block; min-height: 100svh; padding: calc(56px + env(safe-area-inset-top)) var(--gutter) 64px; text-align: center; }
.t-linen .ln-hero > * { max-width: 460px; }
.ln-hero .hero-guest { margin: 0 auto 10px; font: 400 2rem/1 var(--script); } .ln-hero .hero-guest b { font-weight: 400; }
.ln-hero .hero-k, .t-linen .sh-k { margin: 0 auto; font: 500 .64rem var(--text); letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }
.ln-frame { position: relative; width: min(74%, calc(var(--maxw) * .74)); margin: 34px max(0px, calc((100% - var(--maxw)) / 2)) 0 auto; padding: 10px; border: 1px solid var(--line); }
.ln-frame::before { content: ""; position: absolute; right: -14px; top: -14px; width: 50%; height: 50%; border-right: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.ln-ph { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tone); }
.ln-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-fx); }
.ln-hero .hero-media-tag { top: 14px; bottom: auto; font-size: .58rem; }
.t-linen .hero-t { position: relative; z-index: 2; margin: -.8em 0 0; padding: 0 .2em; text-align: left; font: 400 clamp(3.6rem, 18vw, 5.4rem)/1 var(--script); }
.t-linen .ln-hero.no-media .hero-t { margin-top: 48px; text-align: center; }
.t-linen .hero-t span { display: block; font-size: calc(1em * var(--fit, 1)); }
.t-linen .hero-t span + i + span { padding-left: 1.2em; }
.t-linen .hero-t i { display: block; margin: -.5em 0 -.45em .5em; font: 400 .5em/1.4 var(--display); color: var(--gold); }
.ln-hero .hero-line { margin: 22px auto 0; max-width: 20em; color: var(--muted); }
.ln-date { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px 0 0; font: 400 clamp(2.6rem, 13vw, 3.4rem)/1 var(--display); letter-spacing: .02em; }
.ln-date i { width: 1px; height: .9em; background: var(--line); }
.ln-when { display: grid; gap: 2px; margin: 18px 0 0; font: 500 .7rem var(--text); letter-spacing: .26em; text-transform: uppercase; }
.ln-when span:last-child { color: var(--muted); }
.t-linen .hero-cta, .t-linen .rs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 26px; padding: 12px 36px; border-radius: 0;
  background: var(--ink); color: var(--paper); font: 500 .68rem var(--text); letter-spacing: .32em; text-transform: uppercase; }

/* ---------- sections: quiet, centred, hairlines ---------- */
.t-linen .s:not(.s-hero) { position: relative; padding: 96px var(--gutter); }
.t-linen .s:not(.s-hero)::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 46px; background: var(--line); }
.t-linen .sh { margin-bottom: 36px; }
.t-linen .sh-t { margin-top: 14px; font: 400 clamp(2rem, 9vw, 2.6rem)/1.2 var(--display); }
.t-linen .sh::after { content: ""; display: block; width: 28px; height: 1px; margin: 22px auto 0; background: var(--gold); }
.t-linen .story-body { text-align: center; font-size: 1.04rem; }
/* a photo on a section: a tall framed print at the top of it */
.t-linen .has-sp > .sp { position: relative; width: 72%; max-width: 340px; margin: 0 auto 40px; padding: 9px; border: 1px solid var(--line); }
.t-linen .has-sp > .sp::after { content: ""; position: absolute; right: -14px; top: -14px; width: 44%; height: 44%; border-right: 1px solid var(--gold); border-top: 1px solid var(--gold); pointer-events: none; }
.t-linen .sp-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--photo-fx); }
.t-linen .sp-tag, .t-linen .tml-tag { position: absolute; z-index: 2; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); top: 112px; padding: 4px 10px; background: rgba(38, 36, 34, .62); color: #fff; font: 500 .56rem var(--text); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.t-linen .cd-u b { font: 400 clamp(2.2rem, 11vw, 3rem)/1 var(--display); }
.t-linen .cd-u span { font-weight: 500; letter-spacing: .24em; font-size: .58rem; }
.t-linen .btn-line { border-radius: 0; min-height: 46px; font: 500 .64rem var(--text); letter-spacing: .26em; text-transform: uppercase; }
.t-linen .tl-i { grid-template-columns: 1fr; gap: 2px; padding: 18px 0; text-align: center; }
.t-linen .tl-time { font: 500 .66rem var(--text); letter-spacing: .26em; color: var(--muted); }
.t-linen .tl-title { font: 400 1.3rem var(--display); }
.t-linen .vn-c { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 28px 0 10px; }
.t-linen .vn-l { font-weight: 500; letter-spacing: .28em; color: var(--muted); font-size: .62rem; }
.t-linen .vn-n { font: 400 1.6rem var(--display); }
.t-linen .pp-h { font: 400 1.2rem var(--display); }
.t-linen .dr-text { font: 400 1.6rem var(--display); }
.t-linen .sw-dot { width: 40px; height: 40px; }
.t-linen .rs { border: 1px solid var(--line); border-radius: 0; background: var(--paper); padding: 28px 22px; }
.t-linen .rs-done, .t-linen .dr-roles > div { border-radius: 0; }
.t-linen .f-in, .t-linen .ch span { border-radius: 0; background: var(--bg); }
.t-linen .rs-btn { width: 100%; margin-top: 4px; }
.t-linen .faq summary { font: 400 1.1rem var(--display); }
.t-linen .gal-i img, .t-linen .gal-ph { border-radius: 0; filter: var(--photo-fx); }
.t-linen .gal-i figcaption { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.t-linen .bio-ph { border-radius: 0; } .t-linen .bio-ph img { filter: var(--photo-fx); }

/* the love story: moments with a photo alternate left and right */
.t-linen .tml { padding-left: 0; max-width: 520px; }
.t-linen .tml::before, .t-linen .tml-dot { display: none; }
.t-linen .tml-i { padding: 0 0 46px; text-align: center; }
.t-linen .tml-b { position: relative; }
.t-linen .tml-d { font-weight: 500; letter-spacing: .3em; color: var(--muted); font-size: .62rem; }
.t-linen .tml-t { font: 400 1.5rem var(--display); }
.t-linen .tml-x { font-size: .98rem; }
.t-linen .tml-i:has(.tml-img) .tml-b { display: grid; grid-template-columns: 46% 1fr; gap: 0 18px; align-items: center; text-align: left; }
.t-linen .tml-i:has(.tml-img) .tml-img { grid-column: 1; grid-row: 1 / span 3; max-width: none; width: 100%; aspect-ratio: 3 / 4; margin: 0; border-radius: 0; filter: var(--photo-fx); box-shadow: 0 0 0 8px var(--paper), 0 0 0 9px var(--line); }
.t-linen .tml-i:has(.tml-img) .tml-d { grid-column: 2; align-self: end; }
.t-linen .tml-i:has(.tml-img) .tml-t, .t-linen .tml-i:has(.tml-img) .tml-x { grid-column: 2; }
.t-linen .tml-i:has(.tml-img) .tml-x { align-self: start; }
.t-linen .tml-i:has(.tml-img):nth-child(even) .tml-b { grid-template-columns: 1fr 46%; text-align: right; }
.t-linen .tml-i:has(.tml-img):nth-child(even) .tml-img { grid-column: 2; }
.t-linen .tml-i:has(.tml-img):nth-child(even) .tml-d, .t-linen .tml-i:has(.tml-img):nth-child(even) .tml-t, .t-linen .tml-i:has(.tml-img):nth-child(even) .tml-x { grid-column: 1; }
.t-linen .tml-b > .tml-tag { top: 10px; left: 23%; }
.t-linen .tml-i:nth-child(even) .tml-b > .tml-tag { left: auto; right: 23%; transform: translateX(50%); }

/* ---------- closing ---------- */
.t-linen .ln-end { text-align: center; padding-bottom: 120px; }
.ln-emono { margin: 0 auto 18px; font: 400 2.4rem var(--display); letter-spacing: .06em; } .ln-emono i { font-style: normal; font-size: .6em; color: var(--gold); margin: 0 .2em; }
.t-linen .cl-line { font: 400 1.5rem/1.5 var(--display); }
.t-linen .cl-sign { margin-top: 10px; font: 400 2.6rem/1 var(--script); color: var(--ink); }
.t-linen .cl-tag { font: 500 .66rem var(--text); letter-spacing: .26em; color: var(--muted); }
.t-linen body.is-demo .ln-end { padding-bottom: 150px; }

.t-linen .tml-b { position: relative; }