/* Swear Again: stationery system. Della Respira (display) + Tenor Sans (labels) + Commissioner (text), all OFL, self-hosted.
   Ivory paper, oxblood ink, antique gold hairlines. No shared kit CSS. */
@font-face { font-family: "Della Respira"; src: url("fonts/della-respira-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tenor Sans"; src: url("fonts/tenor-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url("fonts/commissioner-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #FBF6EE; --paper-2: #F4ECE0; --card: #FFFDF8; --blush: #F2E4DD;
  --ink: #2A2424; --ink-2: #5C5250; --wine: #5A1D2C; --wine-2: #7A2E40; --night: #2A1A1F;
  --gold: #A8844A; --gold-soft: #D9C39B; --line: #E3D6C3;
  --display: "Della Respira", Georgia, "Times New Roman", serif;
  --label: "Tenor Sans", "Gill Sans", "Trebuchet MS", sans-serif;
  --body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); overflow-wrap: break-word; }
img, svg { max-width: 100%; }
a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--wine-2); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0 0 .6em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); letter-spacing: -.005em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -999px; top: 0; background: var(--wine); color: var(--paper); padding: .6rem 1rem; z-index: 9; }
.skip:focus { left: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.fine { font-size: .9rem; color: var(--ink-2); }
.eyebrow { font: 400 .78rem/1.4 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.lede { font-size: 1.18rem; color: var(--ink-2); max-width: 44rem; }
.amp { color: var(--gold); }
.numeral { font-family: var(--display); color: var(--gold); }
.numeral--sm { font: 400 .8rem var(--label); letter-spacing: .14em; text-transform: uppercase; margin-right: .5rem; vertical-align: .2em; }

/* buttons */
.btn { display: inline-block; font: 400 .8rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 1rem 1.5rem; border: 1px solid var(--wine); cursor: pointer; transition: background .15s, color .15s; text-align: center; }
.btn--ink { background: var(--wine); color: var(--paper); }
.btn--ink:hover { background: var(--wine-2); color: var(--paper); }
.btn--line { background: transparent; color: var(--wine); }
.btn--line:hover { background: var(--wine); color: var(--paper); }
.btn--big { padding: 1.2rem 2rem; font-size: .86rem; }
.btn--seal { background: var(--wine); color: var(--paper); border: 2px solid var(--gold); border-radius: 999px; padding: 1rem 1.8rem; }
.btn--seal:hover { background: var(--wine-2); color: var(--paper); }
.linkish { background: none; border: 0; padding: 0; color: var(--ink-2); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin: 1.6rem 0; }
.inline { display: inline; }

/* masthead */
.mast { border-bottom: 3px double var(--gold-soft); background: var(--paper); position: relative; }
.mast__note { background: var(--wine); color: #F1E3D6; font: 400 .72rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; }
.mast__note-in { display: flex; justify-content: space-between; gap: 1rem; padding-top: .55rem; padding-bottom: .55rem; }
.mast__note strong { font-weight: 400; color: var(--gold-soft); }
.mast__in { display: flex; flex-direction: column; align-items: center; padding-top: 1.6rem; padding-bottom: 1.1rem; }
.mark { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.mark__rings { width: 46px; height: 29px; color: var(--gold); flex: none; }
.mark__word { font: 400 2.1rem/1 var(--display); letter-spacing: .01em; }
.nav { margin-top: 1.1rem; }
.nav__list { display: flex; gap: 2.3rem; list-style: none; margin: 0; padding: 0; }
.nav a { font: 400 .78rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: .4rem 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--wine); border-bottom-color: var(--gold); }
.menu { display: none; }

/* hero: the page opens as a sealed letter. A centred stationery sheet under an envelope flap, the wax seal at the
   flap's point; the call to action is a seal-shaped pill, and the prices sit on a reply card inside the sheet. */
.hero { padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); background:
  radial-gradient(ellipse at 50% 0%, var(--blush) 0, rgba(242, 228, 221, 0) 60%), var(--paper); }
.sheet { position: relative; max-width: 50rem; margin: 0 auto; background: var(--card); text-align: center;
  padding: calc(clamp(70px, 11vw, 120px) + 64px) clamp(1.4rem, 6vw, 5rem) clamp(2.4rem, 5vw, 3.4rem);
  border: 1px solid var(--gold); outline: 1px solid var(--gold-soft); outline-offset: -14px;
  box-shadow: 0 50px 80px -50px rgba(90, 29, 44, .5); }
.sheet__flap { position: absolute; left: -1px; right: -1px; top: -1px; height: clamp(70px, 11vw, 120px); overflow: hidden; pointer-events: none; }
.sheet__flap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: linear-gradient(180deg, var(--paper-2), var(--blush)); clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 0; }
.sheet__flap::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%;
  background: var(--gold); clip-path: polygon(0 0, 1px 0, 50% calc(100% - 1px), calc(100% - 1px) 0, 100% 0, 50% 100%); opacity: .55; }
.seal--flap { position: absolute; left: 50%; top: clamp(70px, 11vw, 120px); width: 92px; height: 92px; margin: -46px 0 0 -46px;
  transform: rotate(-8deg); filter: drop-shadow(0 6px 10px rgba(42, 26, 31, .35)); }
.sheet__opening { font: italic 400 clamp(1.05rem, 2vw, 1.3rem)/1.4 var(--display); color: var(--ink-2); margin: 1.6rem 0 .8rem; }
.sheet h1 { color: var(--wine); font-size: clamp(2.2rem, 5.4vw, 4rem); max-width: 14em; margin: 0 auto .5em; }
.sheet__rule { width: 72px; height: 1px; background: var(--gold); margin: 0 auto 1.6rem; }
.sheet__lede { font-size: 1.15rem; color: var(--ink-2); max-width: 36rem; margin: 0 auto 2rem; }
.sheet__act { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 0 2.4rem; }
.sheet__alt { font: italic 400 1.05rem var(--display); color: var(--wine); }
.reply { max-width: 32rem; margin: 0 auto; border-top: 1px dashed var(--gold-soft); padding-top: 1.4rem; }
.reply__h { font: italic 400 1rem var(--display); color: var(--gold); margin: 0 0 .4rem; }
.reply__p { font-size: .95rem; color: var(--ink-2); margin: 0; }
.reply__p strong { color: var(--wine); font-weight: 600; }

.seal { display: block; }
.seal--small { width: 52px; height: 52px; float: right; margin: 0 0 .5rem .8rem; }
.seal--medium { width: 76px; height: 76px; }

/* section heading with gold rules */
.section-h { display: flex; align-items: center; gap: 1.2rem; font: 400 .8rem/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--wine); margin: 0 0 2.6rem; }
.section-h::before, .section-h::after { content: ""; flex: 1; height: 1px; background: var(--gold-soft); }

/* the order of things: a vertical programme, heading on the left, numbered in words like a printed order of service */
.order { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.order__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.order__head { position: sticky; top: 2rem; }
.order__kicker { font: italic 400 1.1rem var(--display); color: var(--gold); margin-bottom: .6rem; }
.order__head p:last-child { color: var(--ink-2); }
.order__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gold-soft); }
.order__list li { display: grid; grid-template-columns: 9.5rem 1fr; column-gap: 1.6rem; padding: 1.6rem 0; border-bottom: 1px solid var(--gold-soft); }
.order__n { grid-row: span 2; font: italic 400 1.15rem/1.3 var(--display); color: var(--gold); padding-top: .2rem; }
.order__list h3 { margin: 0 0 .35rem; }
.order__list h3 a { color: var(--ink); text-decoration: none; }
.order__list h3 a::after { content: " \2192"; color: var(--gold); }
.order__list h3 a:hover { color: var(--wine); }
.order__list p { color: var(--ink-2); font-size: .98rem; margin: 0; }

/* sealed band */
.sealed-band { background: var(--blush); padding: clamp(3rem, 7vw, 6rem) 0; }
.sealed-band__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.envelope { position: relative; max-width: 320px; margin: 0 auto; width: 100%; }
.envelope__body { position: relative; aspect-ratio: 3 / 2; background: var(--card); border: 1px solid var(--gold-soft); box-shadow: 0 30px 50px -30px rgba(90, 29, 44, .5); overflow: hidden; }
.envelope__flap { position: absolute; inset: 0 0 auto 0; height: 62%; background: var(--paper-2); clip-path: polygon(0 0, 100% 0, 50% 100%); border-bottom: 1px solid var(--gold-soft); }
.seal--envelope { position: absolute; width: 84px; height: 84px; left: 50%; top: 62%; transform: translate(-50%, -50%) rotate(-8deg); filter: drop-shadow(0 5px 8px rgba(42, 26, 31, .3)); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.6rem 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 1.2rem 3.2rem; }
.steps li::before { content: counter(s, lower-roman); position: absolute; left: 0; top: -.2rem; width: 2.2rem; text-align: center; font: 400 1.5rem/1 var(--display); color: var(--gold); }
.steps--plain li { padding-left: 2.8rem; }

/* promises strip */
.promises-strip { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.years { list-style: none; margin: 2.4rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1px solid var(--gold); }
.years li { position: relative; padding-top: 1.8rem; }
.years li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1px solid var(--gold); }
.years__y { font: 400 .78rem/1 var(--label); letter-spacing: .2em; color: var(--gold); }
.years p { font: 400 1.3rem/1.4 var(--display); margin: .7rem 0 .5rem; }
.years__who { font-size: .85rem; color: var(--ink-2); }
.years--book { grid-template-columns: 1fr; gap: 0; border-top: 0; }
.years--book li { display: grid; grid-template-columns: 5rem 1fr auto; gap: .4rem 1.2rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.years--book li::before { display: none; }
.years--book p { margin: 0; font-size: 1.15rem; }
.years--book .years__who { grid-column: 2; }
.years__del { grid-column: 3; grid-row: 1; }

/* pricing */
.pricing-home { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--paper-2); }
.tiers { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.6rem; margin-bottom: 1.6rem; }
.tier { background: var(--card); border: 1px solid var(--line); padding: 2.4rem 2.2rem; }
.tier--pass { border: 1px solid var(--gold); outline: 1px solid var(--gold-soft); outline-offset: -9px; }
.tier__name { font: 400 .8rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--wine); }
.tier__price { font: 400 1.1rem/1.4 var(--display); color: var(--ink-2); }
.tier__price span { font-size: 2.4rem; color: var(--wine); }
.tier__price em { font-style: normal; color: var(--gold); }
.tier__alt { color: var(--ink-2); }
.tier__preview { background: var(--blush); padding: .9rem 1rem; font-size: .92rem; margin: 1.2rem 0 0; }
.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.ticks li { position: relative; padding: 0 0 .7rem 1.5rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* faq */
.faq { padding: clamp(3rem, 6vw, 5rem) var(--gut); }
.faq__list { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem 3rem; margin: 0; }
.faq__list dt { font: 400 1.3rem/1.3 var(--display); }
.faq__list dd { margin: 0 0 1.6rem; color: var(--ink-2); }

/* inner pages */
.page-head { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 1.5rem; }
.page-head .lede { margin-bottom: 1.4rem; }
.prose { max-width: 50rem; padding-bottom: 4rem; }
.prose h2 { font-size: 1.7rem; margin-top: 2.6rem; }
.prose li { margin-bottom: .6rem; }
.h-small { font: 400 .8rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--wine); margin: 0 0 1.2rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; padding-bottom: 3rem; }
.split--wide { grid-template-columns: 1.15fr .85fr; }
.frame { background: var(--card); border: 1px solid var(--line); padding: clamp(1.4rem, 3vw, 2.2rem); }
.frame--narrow { max-width: 40rem; margin: 0 auto; }
.note-page { padding: 4rem var(--gut) 5rem; }
.aside-note { background: var(--paper-2); border-top: 3px solid var(--gold); padding: 1.6rem; }
.aside-note__h { font: 400 .78rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--wine); }
.alert { border-left: 4px solid var(--wine); background: var(--blush); padding: 1rem 1.2rem; margin: 0 0 1.4rem; }
.alert ul { margin: .4rem 0 0; }
.saved { border-left: 4px solid var(--gold); background: var(--paper-2); padding: .8rem 1.2rem; }
.price-note { font-size: .9rem; color: var(--ink-2); border-top: 1px dotted var(--gold-soft); padding-top: .9rem; margin-top: 1.6rem; }
.price-note strong { color: var(--wine); }

/* forms */
.field { display: grid; gap: .45rem; margin: 0 0 1.2rem; min-width: 0; }
.field__label { font: 400 .74rem/1.3 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.field__lead { font: 400 1.15rem/1.35 var(--display); color: var(--ink); }
.field--row { grid-template-columns: auto 1fr; align-items: center; gap: .8rem; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--card); border: 1px solid #CDBFAE; border-radius: 2px; padding: .7rem .8rem; width: 100%; max-width: 100%; }
textarea { line-height: 1.55; resize: vertical; }
input[type="radio"], input[type="checkbox"] { width: auto; accent-color: var(--wine); margin: .3rem 0 0; }
input[type="number"] { width: 5.5rem; }
input[type="time"], input[type="date"] { max-width: 14rem; }
.choice { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 .7rem; }
.field__own { margin: 0 0 .6rem 1.6rem; width: calc(100% - 1.6rem); }
.studio { padding-bottom: 4rem; }
.studio > * { max-width: 54rem; }
.studio__part { border: 0; border-top: 1px solid var(--gold-soft); margin: 0; padding: 2rem 0 1rem; min-width: 0; }
.studio__part legend { font: 400 1.6rem/1 var(--display); padding: 0 1rem 0 0; }
.studio__part legend small { font: 400 .9rem var(--body); color: var(--ink-2); margin-left: .6rem; }
.studio__go { border-top: 3px double var(--gold-soft); padding-top: 1.8rem; }
.date-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.date-form .field { margin: 0; }

/* vow results */
.result { padding-bottom: 3rem; }
.result__grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 2.4rem; align-items: start; }
.vow-sheet { background: var(--card); border: 1px solid var(--line); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: 0 30px 60px -45px rgba(90, 29, 44, .5); }
.vow-sheet__h { font: 400 .78rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.6rem; }
.vow-sheet p { font: 400 1.22rem/1.7 var(--display); }
.stats__row { margin-bottom: 1.2rem; color: var(--ink-2); }
.stats__n { display: block; font: 400 2.3rem/1.1 var(--display); color: var(--wine); }
.stats__note { border-top: 1px solid var(--line); padding-top: 1rem; font-size: .95rem; }
.reading-card { margin-top: 2.4rem; background: var(--wine); color: #F6ECE2; padding: clamp(1.6rem, 5vw, 3.4rem); }
.reading-card__h { font: 400 .78rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); }
.reading-card .fine { color: #E5D2C6; }
.reading-card__lines p { font: 400 clamp(1.25rem, 2.6vw, 1.6rem)/1.45 var(--display); margin: 0 0 .35rem; }
.reading-card__gap { display: block; height: 1.1rem; }

/* ceremony */
.plan-form__parts { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.plan-form__parts th, .plan-form__parts td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plan-form__parts thead th { font: 400 .72rem/1 var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.plan-form__parts tbody th { font-weight: 500; }
.plan-form__parts small { display: block; font-weight: 400; font-size: .82rem; color: var(--ink-2); }
.plan-form__parts td { width: 6.5rem; }
.runsheet__sum { font: 400 1.3rem/1.3 var(--display); }
.runsheet__sum span { color: var(--wine); }
.runsheet__list { list-style: none; padding: 0; margin: 0 0 1.4rem; border-top: 1px solid var(--gold); }
.runsheet__list li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.runsheet__at { font: 400 .82rem/1.6 var(--label); letter-spacing: .1em; color: var(--wine); }
.runsheet__what strong { font: 400 1.18rem var(--display); }
.runsheet__min { font-size: .82rem; color: var(--gold); margin-left: .4rem; }
.runsheet__what p { margin: .3rem 0 0; color: var(--ink-2); font-size: .95rem; }
.runsheet__lead { color: var(--ink); font-weight: 500; }
.program { background: var(--card); text-align: center; padding: 2.8rem 1.6rem; border: 4px double var(--gold); }
.program__top { font: 400 .76rem/1 var(--label); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.program__names { font: 400 2rem/1.2 var(--display); color: var(--wine); }
.program__rule { width: 48px; height: 1px; background: var(--gold); margin: 1.2rem auto; }
.program__list { list-style: none; padding: 0; margin: 0; }
.program__list li { font: 400 1.3rem/1.4 var(--display); padding: .45rem 0; }
.program__list li + li::before { content: "\00B7"; display: block; color: var(--gold); line-height: 1; margin-bottom: .45rem; }
.drawer summary { cursor: pointer; font: 400 .8rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--wine); }
.drawer[open] summary { margin-bottom: 1.4rem; }

/* anniversary */
.count { padding-bottom: 4rem; }
.count__big { font: 400 clamp(1.5rem, 3.2vw, 2.3rem)/1.35 var(--display); padding: 1rem 0 2rem; border-bottom: 1px solid var(--gold-soft); margin-bottom: 2rem; }
.count__n { color: var(--wine); font-size: 1.5em; }
.count__total { font: 400 1rem var(--body); color: var(--ink-2); margin: .6rem 0 0; }
.count__next { margin-bottom: 2.4rem; }
.count__headline { font: 400 1.6rem/1.3 var(--display); }
.marks { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
.marks li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.marks__what { font-family: var(--display); font-size: 1.1rem; }
.marks__date { color: var(--ink-2); font-size: .92rem; text-align: right; }
.marks .is-past { opacity: .55; }

/* book */
.keep-link { padding-top: 2rem; }
.keep-link__in { background: var(--wine); color: #F6ECE2; padding: clamp(1.4rem, 4vw, 2.4rem); }
.keep-link h2 { color: var(--paper); font-size: 1.6rem; }
.linkbox { display: flex; gap: .6rem; flex-wrap: wrap; }
.linkbox input { flex: 1 1 16rem; font-family: var(--label); font-size: .9rem; letter-spacing: .04em; }
.book-head { padding-top: clamp(2rem, 4vw, 3.4rem); padding-bottom: 1rem; }
.book-head__when { font: 400 1.25rem/1.4 var(--display); color: var(--ink-2); }
.book-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); padding: .9rem 0; margin: 1.6rem 0; }
.book-nav a { font: 400 .74rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.book-nav a:hover { color: var(--wine); }
.book-sec { padding-top: 2.4rem; padding-bottom: 2.4rem; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.book-sec__h { font-size: 2rem; }
.book-sec--end { border-top: 0; padding-bottom: 4rem; }
.details-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; max-width: 50rem; }
.field--wide { grid-column: 1 / -1; }
.checklist { list-style: none; padding: 0; margin: 0; max-width: 56rem; }
.checklist li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.checklist form { margin: 0; }
.tick { width: 1.9rem; height: 1.9rem; border: 1px solid var(--wine); background: var(--card); color: var(--paper); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.checklist .is-done .tick { background: var(--wine); }
.checklist .is-done .checklist__text { text-decoration: line-through; color: var(--ink-2); }
.checklist__due { font-size: .88rem; color: var(--ink-2); text-align: right; }
.checklist .is-late .checklist__due { color: var(--wine); font-weight: 600; }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.side { background: var(--card); border: 1px solid var(--line); padding: 1.8rem; }
.side.is-sealed { background: var(--blush); border-color: var(--gold-soft); }
.side__state { color: var(--ink-2); }
.danger { margin-top: 1.2rem; }
.danger summary { cursor: pointer; font-size: .88rem; color: var(--ink-2); text-decoration: underline; }
.danger form { margin-top: .9rem; }
.opened { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.promise-form { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr auto; gap: 1rem; align-items: end; margin-bottom: 1.2rem; }
.promise-form .field { margin: 0; }
.sealed-note { display: flex; gap: 1rem; align-items: center; background: var(--blush); padding: 1.2rem; margin-bottom: 1.2rem; }
.sealed-note p { margin: 0; }
.seal-form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; border-top: 1px solid var(--line); padding-top: 1.4rem; }
.start-form { margin-top: 1.6rem; }

/* keepsake */
.keepsake { padding-top: 1.4rem; padding-bottom: 4rem; }
.keepsake__page { background: var(--card); border: 1px solid var(--line); padding: clamp(1.4rem, 5vw, 4rem); }
.keepsake__head { text-align: center; border-bottom: 3px double var(--gold-soft); padding-bottom: 1.6rem; margin-bottom: 1rem; }
.keepsake__head .seal { margin: 0 auto 1rem; }
.keepsake__names { font: 400 clamp(2rem, 4vw, 2.8rem)/1.2 var(--display); color: var(--wine); }
.keepsake__h { font: 400 .8rem/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 2.4rem 0 1.2rem; text-align: center; }

/* footer */
.foot { background: var(--night); color: #E8DCD2; margin-top: 0; padding-top: 3.4rem; }
.foot a { color: #F6ECE2; text-decoration: none; }
.foot a:hover { text-decoration: underline; color: var(--paper); }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.4rem; padding-bottom: 2.4rem; }
.foot__word { font: 400 2rem/1 var(--display); color: var(--paper); margin-bottom: 1rem; }
.foot__brand p:not(.foot__word) { max-width: 26rem; color: #CDBFB6; }
.foot__h { font: 400 .74rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .55rem; }
.foot__base { border-top: 1px solid rgba(217, 195, 155, .3); padding-top: 1.4rem; padding-bottom: 2rem; font-size: .86rem; color: #BFB1A8; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.foot__base p { margin: 0; max-width: 46rem; }
.foot__powered a { color: var(--gold-soft); }
.foot__sep { color: var(--gold-soft); font-size: .62em; margin: 0 .7em; vertical-align: .15em; opacity: .8; }

/* responsive */
@media (max-width: 960px) {
  .order__in, .sealed-band__in, .result__grid, .split, .split--wide { grid-template-columns: 1fr; }
  .order__head { position: static; }
  .tiers { grid-template-columns: 1fr; }
  .faq__list { grid-template-columns: 1fr; }
  .faq__list dd { margin-bottom: 1.8rem; }
}
@media (max-width: 760px) {
  .mast__note-in span:first-child { display: none; }
  .mast__note-in { justify-content: center; }
  .mast__in { flex-direction: row; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
  .mark__word { font-size: 1.6rem; }
  .mark__rings { width: 36px; height: 23px; }
  .nav { display: none; }
  .menu { display: block; }
  .menu__btn { list-style: none; cursor: pointer; font: 400 .76rem/1 var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--wine); border: 1px solid var(--wine); padding: .7rem .9rem; }
  .menu__btn::-webkit-details-marker { display: none; }
  .menu[open] .menu__btn { background: var(--wine); color: var(--paper); }
  .menu__list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; list-style: none; margin: 0; padding: .6rem var(--gut) 1.2rem; background: var(--paper); border-bottom: 3px double var(--gold-soft); box-shadow: 0 20px 30px -20px rgba(42, 26, 31, .4); }
  .menu__list a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); font: 400 .82rem/1 var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  .menu__list a[aria-current="page"] { color: var(--wine); }
  .order__list li { grid-template-columns: 1fr; }
  .order__n { grid-row: auto; font-size: 1rem; margin-bottom: .2rem; }
  .years { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--gold); gap: 1.6rem; padding-left: 1.4rem; }
  .years li { padding-top: 0; }
  .years li::before { top: .1rem; left: calc(-1.4rem - 6px); }
  .years--book { border-left: 0; padding-left: 0; }
  .years--book li { grid-template-columns: 3.6rem 1fr; }
  .years--book .years__del { grid-column: 2; grid-row: auto; }
  .details-form, .sides, .opened, .marks { grid-template-columns: 1fr; }
  .promise-form { grid-template-columns: 1fr; align-items: stretch; }
  .checklist li { grid-template-columns: 2.4rem 1fr; }
  .checklist__due { grid-column: 2; text-align: left; }
  .runsheet__list li { grid-template-columns: 4.8rem 1fr; gap: .8rem; }
  .field--row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .seal--flap { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
  .sheet { outline-offset: -9px; }
  .plan-form__parts td { width: 5.8rem; }
  input[type="number"] { width: 4.8rem; }
}

/* print: only the sheet that matters */
@media print {
  .mast, .foot, .no-print, .skip, .book-nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .program, .keepsake__page, .vow-sheet { box-shadow: none; border-color: #999; }
  .reading-card { background: #fff; color: #000; border: 1px solid #999; }
  .reading-card__h, .reading-card .fine { color: #555; }
  .wrap { padding: 0; max-width: none; }
  .split, .split--wide { display: block; }
  a { color: #000; text-decoration: none; }
}

/* v1.1.0: AdEngine banner (adengine.us). One labelled slot between the main content and the footer, on the public reading
   pages only (the controllers opt in). The label and the reserved height are on the <ins>, so when tag.js (or ae-size.js)
   hides a slot it cannot fill, the label and the space go with it. 110px = 16px label + 4px gap + 90px banner; 270px on
   phones (300x250). Every page above ends with its own bottom padding and the night footer has no top margin, so the only
   spacing is below the <ins>, and it disappears with a hidden slot. display stays in this file and is never !important:
   tag.js hides a slot with style.display='none'. */
.ae-slot { padding: 0 var(--gut); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto 3rem; text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 400 11px/16px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; margin-bottom: 2.5rem; } }
@media print { .ae-slot { display: none; } }