/* Wisploft — application styles.
 *
 * Written by hand rather than built: the deploy target has no Node, the
 * stylesheet is small enough to read in one sitting, and skipping the build
 * removes a whole class of deployment failure. Add tooling when the size of
 * this file argues for it, not before.
 *
 * The palette and type continue the public site: same Dutch Trust Navy accent,
 * same faces, so arriving from wisploft.com into a wishlist does not feel like
 * leaving.
 */

:root {
  /* Dutch Trust Navy: crisp public paper and deep navy controls. */
  --ground:      #F8FAFC;
  --surface:     #FFFFFF;
  --sunk:        #E8ECF1;
  --ink:         #020617;
  --ink-soft:    #475569;
  --ink-faint:   #64748B;
  --hairline:    rgba(15, 23, 42, .13);
  --accent:      #235A88;
  --accent-deep: #09253C;
  --accent-soft: #EAF1F8;
  --on-accent:   #FFFFFF;
  --signal:      #7A5717;
  --signal-soft: #F6EEDF;
  --positive:    #235A88;
  --danger:      #8E3232;

  --radius: .7rem;
  --shadow: 0 1px 2px rgba(15,23,42,.035), 0 18px 42px -30px rgba(15,23,42,.32);
  --gutter-base: clamp(1.1rem, 4vw, 2.5rem);
  --gutter: max(var(--gutter-base), env(safe-area-inset-left), env(safe-area-inset-right));

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* No dark scheme.
 *
 * This used to follow prefers-color-scheme, which meant most people opened a
 * wishlist into a near-black page — and a page about weddings and birthdays
 * read as a terminal. The public site commits to one light world and so does
 * this, for the same reason paper does: a shared link should look the same to
 * everyone who opens it, including the person who chose the theme on it.
 *
 * The themed pages (.wl-*, further down) already pin their own palettes, and
 * that decision is now simply the rule everywhere rather than an exception.
 */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -18rem, rgba(35,90,136,.075), transparent 34rem),
    var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; letter-spacing: -.028em; text-wrap: balance; font-weight: 600; }
h1 { font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.1; }
h2 { font-size: clamp(1.2rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; }
h3 { font-size: 1.02rem; }
p  { margin: 0; }

.mono, code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--accent); }

.shell {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter) 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.shell--wide { max-width: 60rem; }

.masthead { display: flex; flex-direction: column; gap: .5rem; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.sub { color: var(--ink-soft); font-size: .95rem; }
.hint { color: var(--ink-faint); font-size: .84rem; }

/* ------------------------------------------------------------ surfaces -- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
}

.stack { display: flex; flex-direction: column; gap: .8rem; }
.row   { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

/* -------------------------------------------------------------- forms --- */

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-size: .82rem; color: var(--ink-soft); }

input[type=text], input[type=url], input[type=email], input[type=number], input[type=date], textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  width: 100%;
  min-height: 3rem;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
textarea { min-height: 6rem; resize: vertical; }

/* A field no person sees and every naive bot fills in. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 3rem;
  padding: .7rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #12385C, var(--accent));
  color: var(--on-accent);
  font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 16px 34px -26px rgba(35,90,136,.8), inset 0 1px 0 rgba(255,255,255,.14);
  transition: filter .2s ease, transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { filter: brightness(1.04); box-shadow: 0 18px 38px -28px rgba(35,90,136,.85), inset 0 1px 0 rgba(255,255,255,.18); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn--quiet { background: rgba(255,255,255,.36); color: var(--accent); border-color: var(--hairline); box-shadow: none; }
.btn--danger { background: transparent; color: var(--danger); border-color: var(--hairline); box-shadow: none; }
.btn--block { width: 100%; }
.btn--small { min-height: 2.4rem; padding: .35rem .8rem; font-size: .85rem; }

/* Buy and reserve are not the same kind of act, and the plain list used to
   present them as two identical filled buttons with no way to tell which came
   first. Buying is what the guest came to do, so it stays the filled one and
   says that it leaves the site; reserving is the quieter coordination step
   beside it. Dressed lists already read this way — now every list does. */
.btn--shop::after { content: "\2197"; font-size: .82em; opacity: .75; }
.btn--reserve { background: rgba(255,255,255,.38); color: var(--accent); border-color: var(--hairline); box-shadow: none; }
.btn--reserve:hover { border-color: var(--accent); }

@media (max-width: 34rem) {
  .btn--stack { width: 100%; }
}

/* -------------------------------------------------------------- items --- */

.item {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: .85rem;
  padding: .8rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  align-items: start;
}
.item--taken { opacity: .68; }

.item__thumb {
  aspect-ratio: 1;
  border-radius: .5rem;
  background: var(--sunk);
  display: grid; place-items: center;
  overflow: hidden;
  font-size: .58rem; color: var(--ink-faint); text-align: center;
}
.item__thumb img { width: 100%; height: 100%; object-fit: cover; }

.item__body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.item__name { font-weight: 500; line-height: 1.3; }
.item__meta { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .84rem; color: var(--ink-soft); }
.item__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.item__price--unknown { font-family: inherit; font-style: italic; color: var(--ink-faint); }

.pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: .74rem; padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--ink-soft); white-space: nowrap;
}
.pill--taken { background: var(--signal-soft); border-color: transparent; color: var(--signal); }
.pill--open  { border-color: currentColor; color: var(--positive); }
.pill--mine  { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* --------------------------------------------------------- the secret -- */

.keylink {
  background: var(--accent-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .9rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.keylink__value {
  font-family: var(--font-mono);
  font-size: .8rem; line-height: 1.5; word-break: break-all; color: var(--ink);
}
/* The public link is the one a guest gets. It is not a secret, so it does not
   wear the secret's colour. */
.keylink--quiet { background: var(--sunk); }

.warn {
  display: flex; gap: .6rem;
  font-size: .87rem; line-height: 1.5;
  color: var(--signal); background: var(--signal-soft);
  border-radius: var(--radius); padding: .75rem .85rem;
}

.notice {
  border-radius: var(--radius);
  padding: .7rem .85rem;
  font-size: .9rem;
  background: var(--accent-soft);
  color: var(--accent);
}
.notice--error { background: transparent; border: 1px solid var(--danger); color: var(--danger); }

/* ------------------------------------------------------------- footer -- */

.foot {
  border-top: 1px solid var(--hairline);
  margin-top: 2.5rem;
  padding: 1.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  color: var(--ink-faint);
  font-size: .85rem;
}
.foot__inner { max-width: 60rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; }
.foot a { color: var(--ink-faint); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot a span { border-bottom: 1px solid var(--hairline); }
.foot a:hover span { color: var(--accent); border-color: var(--accent); }
.language-switch { display: inline-flex; align-items: center; }
.language-switch__link {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .1rem .65rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
}
.language-switch__link:hover { border-color: var(--accent); color: var(--accent); }
.language-switch__link span { border-bottom: 0; }
.language-switch__flag { font-size: 1rem; line-height: 1; }
.language-switch__text { font-size: .86rem; font-weight: 600; }

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

/* ========================================================== the look === */

/* The public page is a small digital invitation, not a settings demo. The
   template owns composition, the palette owns colour, and the font owns only
   display type. Every combination remains valid and no external asset is
   needed to make it feel complete. */

body.wl-theme {
  background-color: var(--ground);
  background-image: var(--page-wash, radial-gradient(circle at 50% -8rem, var(--accent-soft), transparent 34rem));
  background-repeat: no-repeat;
  background-size: 100% 42rem;
  color: var(--ink);
}

.wl-theme {
  --signal: #8A5A0E;
  --signal-soft: #FAF1DF;
  --positive: #2F6B4F;
  --danger: #A03232;
  --on-accent: #FFFFFF;
  --theme-radius: 1.25rem;
  --theme-thumb-radius: .9rem;
  --theme-shadow: 0 1px 1px rgba(20,20,24,.025), 0 18px 50px -32px rgba(20,20,24,.28);
}

.wl-pal--ink {
  --ground: #F5F5F7; --surface: #FFFFFF; --sunk: #ECECF0;
  --ink: #1D1D1F; --ink-soft: #5E5E63; --ink-faint: #69696D;
  --hairline: rgba(29,29,31,.1); --accent: #1D1D1F; --accent-soft: #E8E8ED;
}
.wl-pal--blush {
  --ground: #FBF6F5; --surface: #FFFEFD; --sunk: #F5E8E5;
  --ink: #291D1F; --ink-soft: #69565A; --ink-faint: #756568;
  --hairline: rgba(91,48,57,.11); --accent: #9D4056; --accent-soft: #F7E4E9;
}
.wl-pal--sage {
  --ground: #F3F6F2; --surface: #FEFFFD; --sunk: #E5ECE3;
  --ink: #18221B; --ink-soft: #526057; --ink-faint: #606C65;
  --hairline: rgba(36,68,45,.11); --accent: #345E43; --accent-soft: #E0EBE2;
}
.wl-pal--sand {
  --ground: #F8F4EC; --surface: #FFFDF8; --sunk: #EEE5D5;
  --ink: #2A241B; --ink-soft: #6B5E4B; --ink-faint: #6E6456;
  --hairline: rgba(80,60,31,.12); --accent: #856027; --accent-soft: #F1E5D1;
}
.wl-pal--sky {
  --ground: #F1F6FA; --surface: #FEFFFF; --sunk: #E2EBF3;
  --ink: #17232E; --ink-soft: #536575; --ink-faint: #5D6973;
  --hairline: rgba(35,70,98,.11); --accent: #315E82; --accent-soft: #DFEAF3;
}
.wl-pal--plum {
  --ground: #F7F3F8; --surface: #FFFDFF; --sunk: #ECE3EF;
  --ink: #251C29; --ink-soft: #615367; --ink-faint: #6E6273;
  --hairline: rgba(76,43,87,.11); --accent: #684479; --accent-soft: #EDE2F1;
}

.wl-font--serif { --display: "Playfair Display", Georgia, "Times New Roman", serif; }
.wl-font--hand { --display: "Caveat", "Bradley Hand", cursive; }
.wl-font--round { --display: "Fredoka", "Trebuchet MS", ui-rounded, sans-serif; }
.wl-theme h1, .wl-theme h2 { font-family: var(--display, var(--font-sans)); }

.shell--wishlist {
  width: 100%;
  max-width: 50rem;
  padding-top: clamp(1.1rem, 3vw, 2rem);
  gap: 1.15rem;
}
.wishlist-brand {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: .48rem;
  min-height: 2.4rem;
  color: var(--ink);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}
.wishlist-brand > span {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;
  border-radius: .48rem;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--display, var(--font-sans));
  font-size: .76rem;
  letter-spacing: 0;
}

.wl-theme .wishlist-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(20rem, 48vw, 25rem);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(3.3rem, 9vw, 5.8rem) clamp(1.5rem, 8vw, 4.5rem);
  border: 1px solid var(--hairline);
  border-radius: 2rem;
  background: var(--surface);
  box-shadow: var(--theme-shadow);
  text-align: center;
}
.theme__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(100%, 38rem);
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.wl-theme .theme__occasion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-bottom: .35rem;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.wl-theme .wishlist-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .95;
}
.wl-font--serif .wishlist-hero h1 { letter-spacing: -.035em; line-height: .98; }
.wl-font--hand .wishlist-hero h1 { font-size: clamp(3.5rem, 10vw, 6.4rem); letter-spacing: -.02em; line-height: .82; }
.wl-font--round .wishlist-hero h1 { letter-spacing: -.04em; }
.wl-theme .wishlist-hero .sub { max-width: 43ch; color: var(--ink-soft); font-size: clamp(.98rem, 2vw, 1.08rem); }
.theme__description { margin-top: .15rem; }
.theme__signature {
  display: block;
  width: 2.9rem;
  height: 1px;
  margin-top: .75rem;
  background: var(--accent);
}
.theme__halo, .theme__motif { position: absolute; z-index: 0; pointer-events: none; }
.theme__motif { inset: 0; }
.theme__motif i { position: absolute; display: block; }

/* Sits between the list's name and its first gift, because that is where the
   question gets asked. */
.wishlist-note {
  max-width: 52ch;
  margin: 0 auto;
  padding-bottom: .3rem;
  text-align: center;
  line-height: 1.6;
}

.wishlist-items { gap: .7rem; }
.wl-theme .item {
  grid-template-columns: 5.4rem minmax(0, 1fr);
  gap: 1.05rem;
  min-height: 7.5rem;
  padding: .95rem;
  border-color: var(--hairline);
  border-radius: var(--theme-radius);
  background: rgba(255,255,255,.82);
  box-shadow: var(--theme-item-shadow, var(--theme-shadow));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.wl-theme .item__thumb { border-radius: var(--theme-thumb-radius); }
.wl-theme .item__name { font-size: 1.02rem; font-weight: 600; letter-spacing: -.012em; }
.wl-theme .item__meta { gap: .35rem .65rem; font-size: .8rem; }
.wl-theme .item__price { font-family: var(--font-sans); font-weight: 600; }
.item__placeholder {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.8), transparent 45%), var(--sunk);
}
.item__placeholder::before {
  content: "";
  width: 1.45rem;
  height: 1.25rem;
  border: 1.5px solid var(--accent);
  border-radius: .28rem;
  opacity: .55;
}
.item__placeholder i {
  position: absolute;
  width: .72rem;
  height: .48rem;
  margin-top: -1.15rem;
  border: 1.5px solid var(--accent);
  border-bottom: 0;
  border-radius: .5rem .5rem 0 0;
  opacity: .55;
}
.wl-theme .btn--small { min-height: 2.55rem; padding-inline: .95rem; }
.wl-theme .hint:last-child { line-height: 1.65; }

/* Essential — quiet hierarchy, generous space and one precise accent. */
.wl-tpl--plain .wishlist-hero { align-items: flex-start; justify-content: flex-end; text-align: left; }
.wl-tpl--plain .theme__content { align-items: flex-start; }
.wl-tpl--plain .wishlist-hero h1 { max-width: 10ch; }
.wl-tpl--plain .theme__halo {
  top: -8rem; right: -6rem; width: 23rem; height: 23rem; border-radius: 50%;
  background: var(--accent-soft); opacity: .85;
}
.wl-tpl--plain .theme__motif::before {
  content: ""; position: absolute; top: 2.2rem; left: 2.3rem; width: 4.5rem; height: .35rem;
  border-radius: 99px; background: var(--accent);
}

/* Birthday — editorial celebration: bold field, floating paper, no clip-art. */
.wl-tpl--birthday { --theme-radius: 1.45rem; --theme-thumb-radius: 1rem; }
.wl-tpl--birthday .wishlist-hero {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 28px 70px -38px var(--accent);
}
.wl-tpl--birthday .wishlist-hero .sub, .wl-tpl--birthday .theme__occasion { color: var(--on-accent); opacity: .78; }
.wl-tpl--birthday .theme__signature { width: 4.5rem; height: .32rem; border-radius: 99px; background: var(--on-accent); opacity: .85; }
.wl-tpl--birthday .theme__motif i { width: 1.1rem; height: 2.8rem; border-radius: 99px; background: var(--on-accent); opacity: .14; }
.wl-tpl--birthday .theme__motif i:nth-child(1) { top: 12%; left: 10%; transform: rotate(32deg); }
.wl-tpl--birthday .theme__motif i:nth-child(2) { top: 18%; right: 12%; height: 1.1rem; transform: rotate(-18deg); }
.wl-tpl--birthday .theme__motif i:nth-child(3) { bottom: 10%; left: 18%; height: 1.1rem; }
.wl-tpl--birthday .theme__motif i:nth-child(4) { right: 7%; bottom: 12%; transform: rotate(55deg); }
.wl-tpl--birthday .item:nth-child(even) { margin-inline: 1.25rem 0; }

/* Wedding — a contemporary invitation with fine rules and interlocking rings. */
.wl-tpl--wedding { --theme-radius: 1.35rem; --theme-thumb-radius: .95rem; }
.wl-tpl--wedding .wishlist-hero { border-radius: 2.25rem; box-shadow: inset 0 0 0 .55rem var(--surface), inset 0 0 0 calc(.55rem + 1px) var(--accent), var(--theme-shadow); }
.wl-tpl--wedding .wishlist-hero::before, .wl-tpl--wedding .wishlist-hero::after {
  content: ""; position: absolute; z-index: 1; top: 1.45rem; bottom: 1.45rem; width: 1px; background: var(--hairline);
}
.wl-tpl--wedding .wishlist-hero::before { left: 1.45rem; }
.wl-tpl--wedding .wishlist-hero::after { right: 1.45rem; }
.wl-tpl--wedding .theme__occasion { font-family: var(--font-sans); font-size: .64rem; }
.wl-tpl--wedding .theme__signature { width: 3.5rem; }
.wl-tpl--wedding .theme__motif i:nth-child(1), .wl-tpl--wedding .theme__motif i:nth-child(2) {
  top: 2.35rem; width: 2rem; height: 2rem; border: 1px solid var(--accent); border-radius: 50%; opacity: .45;
}
.wl-tpl--wedding .theme__motif i:nth-child(1) { left: calc(50% - 1.7rem); }
.wl-tpl--wedding .theme__motif i:nth-child(2) { left: calc(50% - .3rem); }
.wl-tpl--wedding .item { border: 1px solid var(--hairline); border-radius: var(--theme-radius); background: rgba(255,255,255,.76); box-shadow: var(--theme-shadow); }

/* Baby — airy, tactile and calm rather than juvenile. */
.wl-tpl--baby { --theme-radius: 1.75rem; --theme-thumb-radius: 50%; }
.wl-tpl--baby .wishlist-hero { border-radius: 3rem; background: linear-gradient(145deg, var(--surface), var(--accent-soft)); }
.wl-tpl--baby .theme__halo { inset: auto -5rem -7rem auto; width: 18rem; height: 18rem; border-radius: 50%; background: var(--surface); opacity: .55; }
.wl-tpl--baby .theme__motif i { border-radius: 50%; background: var(--accent); opacity: .08; }
.wl-tpl--baby .theme__motif i:nth-child(1) { top: 2.5rem; left: 2.8rem; width: 4rem; height: 4rem; }
.wl-tpl--baby .theme__motif i:nth-child(2) { top: 1.7rem; left: 6rem; width: 2.2rem; height: 2.2rem; }
.wl-tpl--baby .theme__motif i:nth-child(3) { right: 3rem; bottom: 2.8rem; width: 5.5rem; height: 5.5rem; }
.wl-tpl--baby .theme__motif i:nth-child(4) { right: 7.2rem; bottom: 1.8rem; width: 2.7rem; height: 2.7rem; }
.wl-tpl--baby .btn { border-radius: 999px; }

/* New home — architectural contrast without blueprint-grid cliché. */
.wl-tpl--housewarming { --theme-radius: 1.35rem; --theme-thumb-radius: .9rem; }
.wl-tpl--housewarming .wishlist-hero { align-items: flex-start; justify-content: flex-end; border: 0; border-radius: 2.25rem; background: var(--ink); color: var(--surface); text-align: left; }
.wl-tpl--housewarming .theme__content { align-items: flex-start; }
.wl-tpl--housewarming .wishlist-hero .sub, .wl-tpl--housewarming .theme__occasion { color: var(--surface); opacity: .68; }
.wl-tpl--housewarming .theme__signature { width: 5rem; background: var(--surface); }
.wl-tpl--housewarming .theme__motif::before {
  content: ""; position: absolute; top: 2rem; right: 3rem; width: 7rem; height: 7rem;
  border: 1px solid var(--surface); border-width: 1px 1px 0 0; opacity: .28; transform: rotate(-45deg);
}
.wl-tpl--housewarming .theme__motif::after { content: ""; position: absolute; top: 4.7rem; right: 3.1rem; width: 9.7rem; height: 8.5rem; border: 1px solid var(--surface); opacity: .16; }
.wl-tpl--housewarming .item { border-left: .3rem solid var(--accent); }
.wl-tpl--housewarming .btn { border-radius: 999px; }

/* Christmas — Scandinavian evening: evergreen field, warm pinpoints, quiet snow. */
.wl-tpl--christmas { --theme-radius: 1.05rem; }
.wl-tpl--christmas .wishlist-hero { border: 0; background: var(--accent); color: var(--on-accent); }
.wl-tpl--christmas .wishlist-hero .sub, .wl-tpl--christmas .theme__occasion { color: var(--on-accent); opacity: .76; }
.wl-tpl--christmas .theme__signature { width: 4rem; background: var(--signal-soft); }
.wl-tpl--christmas .theme__halo { inset: 0; background: radial-gradient(circle at 50% 115%, rgba(255,255,255,.12), transparent 48%); }
.wl-tpl--christmas .theme__motif i { width: .28rem; height: .28rem; border-radius: 50%; background: var(--on-accent); box-shadow: 1.1rem 1.8rem 0 rgba(255,255,255,.45), -1.7rem 3.8rem 0 rgba(255,255,255,.3); opacity: .7; }
.wl-tpl--christmas .theme__motif i:nth-child(1) { top: 14%; left: 15%; }
.wl-tpl--christmas .theme__motif i:nth-child(2) { top: 19%; right: 17%; transform: scale(.75); }
.wl-tpl--christmas .theme__motif i:nth-child(3) { bottom: 18%; left: 22%; transform: scale(.6); }
.wl-tpl--christmas .theme__motif i:nth-child(4) { right: 9%; bottom: 14%; }

/* ----------------------------------------------------- the look picker -- */

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

.look-picker { gap: 1.35rem; border-radius: 1.4rem; }
/* One disclosure language on the page. The theme card used +/- while the
   gift editor and the settings card shipped the browser's own ▶ triangle,
   which on a page this carefully set read as unfinished markup. */
.disclosure__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 2.4rem;
}
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::after {
  content: "+";
  color: var(--ink-faint);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}
.disclosure[open] > .disclosure__summary::after { content: "\2212"; }
.disclosure__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: .3rem; }

.picker__summary { cursor: pointer; list-style: none; }
.picker__summary::-webkit-details-marker { display: none; }
.picker__summary::after { content: "+"; float: right; color: var(--ink-faint); font-size: 1.2rem; font-weight: 400; line-height: 1; }
.look-picker[open] .picker__summary::after { content: "\2212"; }
.picker__summary .hint { margin-left: .45rem; }
.look-picker__form { gap: 1.8rem; }

.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-group legend { width: 100%; margin-bottom: .7rem; }
.choice-group legend span { display: block; }
.choice-group legend .hint { margin-top: .18rem; }
.choice-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* The large preview uses the same classes and tokens as the public page. */
.look-preview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(8rem, .88fr);
  gap: .7rem;
  min-height: 17rem;
  padding: clamp(.9rem, 3vw, 1.35rem);
  border: 1px solid var(--hairline);
  border-radius: 1.35rem;
  overflow: hidden;
  background-color: var(--ground);
  background-image: var(--wash, none);
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 18px 50px -38px rgba(25,23,20,.35);
}
.look-preview__masthead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 0;
  padding: 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--surface);
  text-align: center;
  box-shadow: var(--theme-shadow, var(--shadow));
}
.look-preview__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.look-preview__halo, .look-preview__motif { position: absolute; inset: 0; pointer-events: none; }
.look-preview__motif i { position: absolute; display: block; }
.look-preview__occasion {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .57rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.look-preview__masthead strong {
  max-width: 15ch;
  overflow: hidden;
  font-family: var(--display, var(--font-sans));
  font-size: clamp(1.35rem, 4vw, 2rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .98;
  text-overflow: ellipsis;
}
.look-preview__copy { width: 64%; height: .32rem; border-radius: 99px; background: var(--ink-soft); opacity: .28; }
.look-preview__ornament {
  width: 2.6rem;
  height: 1px;
  margin-top: .35rem;
  background: var(--accent);
}
.look-preview__items { display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
.look-preview__items > span {
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .22rem .55rem;
  min-height: 4rem;
  padding: .55rem;
  border: 1px solid var(--hairline);
  border-radius: .9rem;
  background: var(--surface);
  box-shadow: 0 10px 30px -24px rgba(25,23,20,.3);
}
.look-preview__items i { grid-row: 1 / 3; border-radius: .65rem; background: var(--sunk); }
.look-preview__items b,
.look-preview__items em { display: block; align-self: end; height: .38rem; border-radius: 999px; background: var(--ink); opacity: .72; }
.look-preview__items em { align-self: start; width: 62%; background: var(--accent); opacity: .35; }
.look-preview__label { margin: .55rem 0 .35rem; text-align: right; font-size: .61rem; }

.look-preview.wl-tpl--plain .look-preview__masthead { align-items: flex-start; justify-content: flex-end; text-align: left; }
.look-preview.wl-tpl--plain .look-preview__content { align-items: flex-start; }
.look-preview.wl-tpl--plain .look-preview__halo { inset: -4rem -4rem auto auto; width: 10rem; height: 10rem; border-radius: 50%; background: var(--accent-soft); }
.look-preview.wl-tpl--birthday .look-preview__masthead { border: 0; background: var(--accent); color: var(--on-accent); }
.look-preview.wl-tpl--birthday .look-preview__occasion, .look-preview.wl-tpl--birthday .look-preview__copy { color: var(--on-accent); background: var(--on-accent); opacity: .7; }
.look-preview.wl-tpl--birthday .look-preview__ornament { height: .25rem; border-radius: 99px; background: var(--on-accent); }
.look-preview.wl-tpl--birthday .look-preview__motif i { width: .55rem; height: 1.4rem; border-radius: 99px; background: var(--on-accent); opacity: .18; }
.look-preview.wl-tpl--birthday .look-preview__motif i:nth-child(1) { top: 12%; left: 10%; transform: rotate(35deg); }
.look-preview.wl-tpl--birthday .look-preview__motif i:nth-child(2) { right: 12%; bottom: 14%; transform: rotate(-25deg); }
.look-preview.wl-tpl--wedding .look-preview__masthead { border-color: var(--accent); border-radius: 1.4rem; box-shadow: inset 0 0 0 .3rem var(--surface), inset 0 0 0 calc(.3rem + 1px) var(--hairline); }
.look-preview.wl-tpl--wedding .look-preview__motif::before, .look-preview.wl-tpl--wedding .look-preview__motif::after { content: ""; position: absolute; top: 1rem; width: 1.15rem; height: 1.15rem; border: 1px solid var(--accent); border-radius: 50%; opacity: .4; }
.look-preview.wl-tpl--wedding .look-preview__motif::before { left: calc(50% - 1rem); }
.look-preview.wl-tpl--wedding .look-preview__motif::after { left: calc(50% - .15rem); }
.look-preview.wl-tpl--baby .look-preview__masthead { border-radius: 1.8rem; background: linear-gradient(145deg, var(--surface), var(--accent-soft)); }
.look-preview.wl-tpl--baby .look-preview__halo { inset: auto -2rem -3rem auto; width: 8rem; height: 8rem; border-radius: 50%; background: var(--surface); opacity: .55; }
.look-preview.wl-tpl--housewarming .look-preview__masthead { align-items: flex-start; justify-content: flex-end; border: 0; border-radius: 1.4rem; background: var(--ink); color: var(--surface); text-align: left; }
.look-preview.wl-tpl--housewarming .look-preview__content { align-items: flex-start; }
.look-preview.wl-tpl--housewarming .look-preview__occasion, .look-preview.wl-tpl--housewarming .look-preview__copy { color: var(--surface); background: var(--surface); opacity: .65; }
.look-preview.wl-tpl--christmas .look-preview__masthead { border: 0; background: var(--accent); color: var(--on-accent); }
.look-preview.wl-tpl--christmas .look-preview__occasion, .look-preview.wl-tpl--christmas .look-preview__copy { color: var(--on-accent); background: var(--on-accent); opacity: .7; }
.look-preview.wl-tpl--christmas .look-preview__motif { background-image: radial-gradient(circle, rgba(255,255,255,.65) 0 .09rem, transparent .11rem); background-size: 2.8rem 2.8rem; opacity: .35; }

.template-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.template-option {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  min-width: 0;
  padding: .55rem;
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.template-option:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -25px rgba(25,23,20,.4); }
.template-option__copy { display: flex; min-width: 0; flex-direction: column; gap: .18rem; padding-right: .75rem; }
.template-option__copy strong { font-size: .88rem; }
.template-option__copy span { color: var(--ink-faint); font-size: .7rem; line-height: 1.35; }
.template-option__check { position: absolute; top: .55rem; right: .55rem; width: 1rem; height: 1rem; border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface); }
.template-option__scene {
  position: relative;
  display: block;
  height: 5.2rem;
  border-radius: .65rem;
  overflow: hidden;
  background: #F5F2ED;
}
.template-option__scene > span { position: absolute; inset: .65rem .55rem; display: block; border: 1px solid rgba(25,23,20,.1); border-radius: .45rem; background: #fff; box-shadow: 0 8px 18px -14px rgba(25,23,20,.45); }
.template-option__scene i { position: absolute; top: 35%; left: 50%; width: 48%; height: .28rem; border-radius: 1rem; background: #302D29; transform: translateX(-50%); }
.template-option__scene b, .template-option__scene em { position: absolute; top: 57%; left: 50%; width: 34%; height: .18rem; border-radius: 1rem; background: #87817A; transform: translateX(-50%); }
.template-option__scene em { top: 70%; width: 18%; background: #38644A; }
.template-option__scene--plain > span { display: flex; align-items: flex-end; border: 0; background: linear-gradient(145deg, #fff 65%, #E4EBE5); }
.template-option__scene--plain i { top: auto; bottom: 1rem; left: .75rem; width: 50%; transform: none; }
.template-option__scene--plain b { top: auto; bottom: .55rem; left: .75rem; transform: none; }
.template-option__scene--birthday > span { border: 0; background: #38644A; }
.template-option__scene--birthday i, .template-option__scene--birthday b { background: white; }
.template-option__scene--birthday em { height: .24rem; background: white; }
.template-option__scene--birthday::after { content: ""; position: absolute; top: .65rem; left: .8rem; width: .35rem; height: .8rem; border-radius: 99px; background: rgba(255,255,255,.35); transform: rotate(35deg); }
.template-option__scene--wedding > span { border-color: #A8425C; border-radius: .8rem; box-shadow: inset 0 0 0 .18rem white, inset 0 0 0 calc(.18rem + 1px) #EFDDD7; }
.template-option__scene--baby > span { border-radius: 1.2rem; background: linear-gradient(145deg, #fff, #E2EDF9); }
.template-option__scene--baby::after { content: ""; position: absolute; right: .3rem; bottom: .1rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(49,94,130,.09); }
.template-option__scene--housewarming > span { border: 0; border-radius: .8rem; background: #1D1D1F; }
.template-option__scene--housewarming i, .template-option__scene--housewarming b { left: .55rem; background: white; transform: none; }
.template-option__scene--housewarming em { left: .55rem; width: 24%; background: white; transform: none; }
.template-option__scene--christmas > span { border: 0; background: #345E43; }
.template-option__scene--christmas i, .template-option__scene--christmas b { background: white; }
.template-option__scene--christmas em { background: #F6EEDF; }

.palette-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.palette-option {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .4rem;
  border: 1px solid var(--hairline);
  border-radius: .8rem;
  color: var(--ink-soft);
  font-size: .74rem;
  cursor: pointer;
}
.palette-option__colour { position: relative; height: 3.15rem; overflow: hidden; border-radius: .5rem; background: var(--sample-ground); }
.palette-option__colour::before { content: ""; position: absolute; inset: .45rem; border-radius: .25rem; background: var(--sample-surface); box-shadow: 0 3px 8px rgba(25,23,20,.1); }
.palette-option__colour i { position: absolute; z-index: 1; right: .7rem; bottom: .65rem; width: 1rem; height: 1rem; border-radius: 99px; background: var(--sample-accent); }
.palette-option--ink { --sample-ground: #FAF8F5; --sample-surface: #FFFFFF; --sample-accent: #1F4D7A; }
.palette-option--blush { --sample-ground: #FDF6F3; --sample-surface: #F8EAE5; --sample-accent: #A8425C; }
.palette-option--sage { --sample-ground: #F4F7F2; --sample-surface: #E7EEE3; --sample-accent: #38644A; }
.palette-option--sand { --sample-ground: #FAF6EF; --sample-surface: #F1E8D9; --sample-accent: #8A5E22; }
.palette-option--sky { --sample-ground: #F2F7FC; --sample-surface: #E5EEF7; --sample-accent: #26557F; }
.palette-option--plum { --sample-ground: #F8F4FA; --sample-surface: #EFE6F4; --sample-accent: #663A87; }

.font-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.font-option { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-height: 5.7rem; padding: .75rem; border: 1px solid var(--hairline); border-radius: .85rem; background: var(--surface); cursor: pointer; }
.font-option span { font-size: 1.65rem; line-height: 1.15; }
.font-option strong { color: var(--ink-soft); font-size: .76rem; font-family: var(--font-sans); }
.font-option--sans span { font-family: "Instrument Sans", sans-serif; }
.font-option--serif span { font-family: "Playfair Display", Georgia, serif; }
.font-option--hand span { font-family: "Caveat", cursive; font-size: 1.9rem; }
.font-option--round span { font-family: "Fredoka", "Trebuchet MS", sans-serif; }

.choice-input:checked + .template-option,
.choice-input:checked + .palette-option,
.choice-input:checked + .font-option { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px -20px var(--accent); }
.choice-input:checked + .template-option .template-option__check { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.choice-input:focus-visible + .template-option,
.choice-input:focus-visible + .palette-option,
.choice-input:focus-visible + .font-option { outline: 2px solid var(--accent); outline-offset: 2px; }
.template-option:hover,
.palette-option:hover,
.font-option:hover { border-color: var(--accent); }
.look-picker__actions { padding-top: .2rem; }

@media (max-width: 42rem) {
  .template-options { grid-template-columns: 1fr; }
  .palette-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  .picker__summary .hint { display: block; margin-left: 0; margin-top: .15rem; }
  .look-preview { grid-template-columns: 1fr; min-height: 22rem; }
  .look-preview__items { display: grid; grid-template-columns: 1fr 1fr; }
  .font-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .look-picker__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .template-option, .palette-option, .font-option { transition: none; }
}

@media (max-width: 34rem) {
  .shell--wishlist { padding-inline: max(.85rem, env(safe-area-inset-left), env(safe-area-inset-right)); }
  .wl-theme .wishlist-hero { min-height: 22rem; border-radius: 1.5rem; padding-inline: 1.2rem; }
  .wl-theme .wishlist-hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .wl-font--hand .wishlist-hero h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .wl-theme .item { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .8rem; padding: .75rem; }
  .wl-theme .item .row { gap: .4rem; }
  .wl-theme .btn--small { min-height: 2.75rem; padding-inline: .78rem; }
  .wl-tpl--birthday .item:nth-child(even) { margin-inline: 0; }
  .wl-tpl--wedding .wishlist-hero::before { left: 1rem; }
  .wl-tpl--wedding .wishlist-hero::after { right: 1rem; }
  .wl-tpl--wedding .theme__motif i:nth-child(1),
  .wl-tpl--wedding .theme__motif i:nth-child(2) { top: 1.05rem; }
}

/* ============================================== the invitation claim === */

/* The one offer the product makes, so it is allowed to look like an offer —
   but a quiet one. It sits between the add-a-gift form and the list, opens in
   place, and folds back to two lines for the person who does not want it. */
.claim {
  background: var(--accent-soft);
  border-color: transparent;
}
.claim__summary { cursor: pointer; display: flex; flex-direction: column; gap: .2rem; }
.claim__title { font-weight: 600; color: var(--accent); }

/* The sentence about the email address. Set apart deliberately: it is the
   promise the address was given on, and a promise printed in the same grey as
   everything else is a promise nobody read. */
.claim__promise {
  border-left: 2px solid var(--accent);
  padding-left: .7rem;
  color: var(--ink-soft);
}

.claim--pending { display: block; }

/* Two fields that belong together — date and time, deadline and who to tell —
   share a row where there is room and stack where there is not. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 30rem) {
  .pair { grid-template-columns: 1fr; }
}

/* Field types the plain form never needed. */
input[type=time], input[type=file] {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  width: 100%;
  min-height: 3rem;
}
input[type=file] { padding: .55rem .8rem; }
input[type=file]::file-selector-button {
  font: inherit; font-size: .85rem;
  margin-right: .7rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--sunk);
  color: var(--ink);
  cursor: pointer;
}

/* The brief, as a definition list: label and value, and on a phone the label
   above its value rather than squeezed beside it. */
.brief { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .3rem .9rem; margin: 0; font-size: .9rem; }
.brief dt { color: var(--ink-faint); }
.brief dd { margin: 0; color: var(--ink); }
@media (max-width: 32rem) {
  .brief { grid-template-columns: 1fr; gap: 0 0; }
  .brief dt { margin-top: .5rem; font-size: .8rem; }
}

/* The colofon. Quiet on purpose — it is a legal requirement rather than
   something a visitor came for — but present on every page, which is what
   "easily, directly and permanently accessible" asks for. */
.foot__colofon {
  max-width: 60rem;
  margin: .9rem auto 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-faint);
  opacity: .85;
}

/* ================================================= editorial guides === */
.blog-page .shell { max-width: 52rem; }
.blog-hero { padding: 3.5rem 0 2rem; }
.blog-hero .brand { display: inline-block; margin-bottom: 2.5rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.blog-hero h1, .article__head h1 { max-width: 18ch; margin: .35rem 0 .8rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.25rem, 7vw, 4.25rem); line-height: 1.02; letter-spacing: -.035em; }
.blog-hero .lede, .article__head .lede { max-width: 42rem; font-size: 1.12rem; line-height: 1.65; color: var(--ink-soft); }
.post-list { display: grid; gap: 1rem; padding-bottom: 3rem; }
.post-card { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--hairline); border-radius: calc(var(--radius) * 1.5); background: var(--surface); }
.post-card__image { display: block; margin: calc(clamp(1.25rem, 4vw, 2rem) * -1) calc(clamp(1.25rem, 4vw, 2rem) * -1) 1.35rem; overflow: hidden; border-radius: calc(var(--radius) * 1.5) calc(var(--radius) * 1.5) 0 0; }
.post-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-card__image img { transform: scale(1.015); }
.post-card h2 { margin: .3rem 0 .65rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.55rem, 4vw, 2.15rem); line-height: 1.15; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover, .text-link:hover { color: var(--accent); }
.post-card > p:not(.eyebrow, .post-meta) { color: var(--ink-soft); line-height: 1.65; }
.post-meta { margin: .8rem 0; color: var(--ink-faint); font-size: .84rem; }
.text-link { color: var(--accent); font-weight: 600; }

.article { padding: 2rem 0 4rem; }
.article__nav { display: flex; gap: .55rem; margin-bottom: 3rem; color: var(--ink-faint); font-size: .88rem; }
.article__nav a { color: inherit; }
.article__head { padding-bottom: 2rem; border-bottom: 1px solid var(--hairline); }
.article__image { margin: 2rem 0 0; overflow: hidden; border-radius: calc(var(--radius) * 1.5); background: var(--sunk); }
.article__image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.prose { padding: 2rem 0; font-size: 1.04rem; line-height: 1.78; }
.prose > * { max-width: 45rem; }
.prose h2 { margin: 2.4rem 0 .75rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.18; }
.prose h3 { margin: 1.8rem 0 .55rem; font-size: 1.2rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15rem; }
.prose li + li { margin-top: .4rem; }
.prose a { color: var(--accent); text-underline-offset: .16em; }
.prose table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { padding: .7rem; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.prose th { color: var(--ink-soft); font-weight: 600; }
.article-cta { margin-top: 1.5rem; padding: clamp(1.35rem, 4vw, 2.2rem); border-radius: calc(var(--radius) * 1.5); background: var(--accent-soft); }
.article-cta h2 { margin: 0 0 .45rem; font-family: "Playfair Display", Georgia, serif; font-size: 1.7rem; }
.article-cta p { max-width: 38rem; margin-bottom: 1.1rem; color: var(--ink-soft); }

@media (max-width: 36rem) {
  .blog-hero { padding-top: 2rem; }
  .article__nav { margin-bottom: 2rem; }
  .prose table { display: block; overflow-x: auto; }
}

/* --------------------------------------------------------------- faq -- */

.faq-list { gap: 1.3rem; }
.faq-item {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hairline);
}
.faq-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.faq-item h2 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  letter-spacing: -.015em;
}
.faq-item p {
  color: var(--ink-soft);
  line-height: 1.65;
}