/* =========================================================================
   Esmerelda — content templates
   index / page / single / archive / search / 404 / page-faq

   Depends on assets/css/base.css for every token and for the shared
   .esm-btn, .esm-card, .esm-grid, .esm-eyebrow, .esm-lede, .esm-reveal
   primitives. Nothing here introduces a second palette.
   ========================================================================= */

:root{
  /* Long-form body ink sits a touch softer than headline ink. */
  --esm-prose-ink:var(--esm-ink);
  --esm-prose-ink:color-mix(in srgb,var(--esm-ink) 86%,var(--esm-ink-2));
  --esm-prose-w:760px;
  --esm-rail-w:260px;
}

/* =========================================================================
   1. Page hero — eyebrow + display heading left, lede bottom-right
   ========================================================================= */
.esm-hero{
  padding:clamp(48px,7vw,120px) var(--esm-gutter) clamp(32px,5vw,72px);
}
.esm-hero__inner{
  max-width:var(--esm-maxw);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  gap:24px clamp(32px,5vw,64px);align-items:end;
}
.esm-hero__head{display:flex;flex-direction:column;gap:18px}
.esm-hero__title{margin:0;text-wrap:balance}
.esm-hero__title em{font-style:italic;font-weight:500}
.esm-hero__lede{justify-self:end;max-width:52ch}
.esm-hero__lede p{margin:0 0 .8em}
.esm-hero__lede p:last-child{margin-bottom:0}
.esm-hero__lede a{border-bottom:1px solid var(--esm-line-strong)}

/* A single-column page title reads better a size down than a blog index. */
.esm-hero--page .esm-hero__title{font-size:clamp(38px,5vw,84px)}

/* =========================================================================
   2. Long-form prose — client-authored block editor HTML lives here
   ========================================================================= */
.esm-prose{
  max-width:var(--esm-prose-w);
  color:var(--esm-prose-ink);
  font-size:clamp(16px,1.15vw,17px);
  line-height:1.72;
}
.esm-prose > *{margin-block:0 1.15em}
.esm-prose > *:last-child{margin-bottom:0}

/* Headings — serif, tight, with room above them. */
.esm-prose h2,
.esm-prose h3,
.esm-prose h4,
.esm-prose h5,
.esm-prose h6{
  color:var(--esm-ink);font-family:var(--esm-serif);font-weight:500;
  letter-spacing:-.02em;text-wrap:balance;scroll-margin-top:calc(var(--esm-header-h) + 24px);
}
.esm-prose h2{font-size:clamp(26px,2.4vw,38px);line-height:1.1;margin-block:1.9em .55em}
.esm-prose h3{font-size:clamp(21px,1.7vw,26px);line-height:1.2;margin-block:1.6em .45em}
.esm-prose h4{font-size:clamp(18px,1.3vw,21px);line-height:1.25;margin-block:1.5em .4em}
.esm-prose h5,
.esm-prose h6{
  font-family:var(--esm-sans);font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--esm-ink-3);
  margin-block:1.6em .4em;
}
.esm-prose > h2:first-child,
.esm-prose > h3:first-child{margin-top:0}

/* Links inside prose stay readable without shouting. */
.esm-prose a{
  color:var(--esm-violet-deep);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb,var(--esm-violet-deep) 40%,transparent);
}
.esm-prose a:hover{color:var(--esm-violet);text-decoration-color:currentColor}

.esm-prose strong,.esm-prose b{font-weight:700;color:var(--esm-ink)}
.esm-prose em,.esm-prose i{font-style:italic}
.esm-prose small{font-size:.85em;color:var(--esm-ink-3)}
.esm-prose mark{background:var(--esm-lilac);color:var(--esm-ink);padding:.05em .25em;border-radius:3px}
.esm-prose abbr[title]{text-decoration:underline dotted;cursor:help}
.esm-prose hr,
.esm-prose .wp-block-separator{
  border:0;border-top:1px solid var(--esm-line-2);
  margin-block:clamp(32px,4vw,56px);height:0;
}
.esm-prose .wp-block-separator.is-style-dots{border:0;text-align:center}

/* Lists — bullet is a small violet dot, matching the design. */
.esm-prose ul,
.esm-prose ol{padding-left:0;list-style:none;margin-block:0 1.3em}
.esm-prose li{
  position:relative;padding-left:30px;margin-bottom:.55em;
}
.esm-prose li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:6px;height:6px;border-radius:999px;background:var(--esm-violet);
}
.esm-prose ol{counter-reset:esm-ol}
.esm-prose ol > li{counter-increment:esm-ol}
.esm-prose ol > li::before{
  content:counter(esm-ol)".";left:0;top:0;width:auto;height:auto;
  border-radius:0;background:none;color:var(--esm-violet);
  font-size:13px;font-weight:700;line-height:inherit;
}
.esm-prose li > ul,
.esm-prose li > ol{margin-block:.5em 0}
.esm-prose dl{margin-block:0 1.3em}
.esm-prose dt{font-weight:700;color:var(--esm-ink)}
.esm-prose dd{margin:0 0 .9em;padding-left:20px;border-left:1px solid var(--esm-line)}

/* Quotes */
.esm-prose blockquote,
.esm-prose .wp-block-quote{
  margin-block:clamp(24px,3vw,40px);padding:0 0 0 28px;
  border-left:2px solid var(--esm-violet);
  font-family:var(--esm-serif);font-style:italic;font-weight:500;
  font-size:clamp(20px,1.9vw,28px);line-height:1.32;letter-spacing:-.015em;
  color:var(--esm-violet-deep);
}
.esm-prose blockquote p{margin-bottom:.5em}
.esm-prose blockquote p:last-child{margin-bottom:0}
.esm-prose blockquote cite,
.esm-prose .wp-block-quote cite{
  display:block;margin-top:12px;font-family:var(--esm-sans);font-style:normal;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--esm-ink-3);
}
.esm-prose .wp-block-pullquote{
  border-left:0;border-block:1px solid var(--esm-line-2);
  padding:clamp(28px,3vw,44px) 0;text-align:center;
}

/* Editor "note" style: the design's soft cream callout. */
.esm-prose .is-style-esm-note,
.esm-prose .wp-block-group.has-background{
  padding:20px 24px;border-radius:12px;
  background:var(--esm-cream-2);border:1px solid var(--esm-line);
  font-size:15px;line-height:1.6;color:var(--esm-ink-2);
}

/* Code */
.esm-prose code,
.esm-prose kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--esm-cream-2);
  border:1px solid var(--esm-line);border-radius:5px;padding:.12em .38em;
}
.esm-prose pre,
.esm-prose .wp-block-code{
  overflow-x:auto;padding:20px 22px;border-radius:12px;
  background:var(--esm-cream-2);border:1px solid var(--esm-line);
  font-size:14px;line-height:1.55;
}
.esm-prose pre code{background:none;border:0;padding:0}

/* Images and figures — must never escape the column. */
.esm-prose img,
.esm-prose video,
.esm-prose iframe,
.esm-prose canvas,
.esm-prose svg{max-width:100%;height:auto}
.esm-prose figure,
.esm-prose .wp-block-image{margin-block:clamp(28px,3.5vw,48px);max-width:100%}
.esm-prose figure img,
.esm-prose .wp-block-image img{border-radius:6px;display:block}
.esm-prose figcaption,
.esm-prose .wp-element-caption{
  margin-top:10px;font-size:13px;line-height:1.5;color:var(--esm-ink-3);
}
.esm-prose .wp-block-image.is-style-rounded img{border-radius:999px}

/* Block alignments. alignwide/alignfull break the measure deliberately. */
.esm-prose .alignleft{float:left;margin:.4em 28px 20px 0;max-width:min(50%,340px)}
.esm-prose .alignright{float:right;margin:.4em 0 20px 28px;max-width:min(50%,340px)}
.esm-prose .aligncenter{margin-inline:auto;text-align:center}
.esm-prose .alignwide{
  width:min(100vw - (var(--esm-gutter) * 2),1100px);
  max-width:none;margin-inline:auto;
}
.esm-prose .alignfull{
  width:min(100vw - (var(--esm-gutter) * 2),var(--esm-maxw));
  max-width:none;margin-inline:auto;
}
@media(max-width:640px){
  .esm-prose .alignleft,
  .esm-prose .alignright{float:none;margin-inline:0;max-width:100%}
  .esm-prose .alignwide,
  .esm-prose .alignfull{width:100%}
}

/* Galleries, columns, embeds */
.esm-prose .wp-block-gallery{gap:clamp(10px,1.4vw,18px)}
.esm-prose .wp-block-gallery img{border-radius:6px}
.esm-prose .wp-block-columns{gap:clamp(20px,2.6vw,40px)}
.esm-prose .wp-block-embed__wrapper,
.esm-prose .wp-block-video{border-radius:8px;overflow:hidden}
.esm-prose .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto}

/* Tables — always scrollable rather than pushing the layout wide. */
.esm-prose .wp-block-table,
.esm-prose figure.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.esm-prose table{
  width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;
  margin-block:clamp(20px,2.4vw,32px);
}
.esm-prose th{
  text-align:left;padding:12px 16px 12px 0;
  border-bottom:1px solid var(--esm-line-strong);
  font-family:var(--esm-serif);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--esm-ink-3);
}
.esm-prose td{
  vertical-align:top;padding:14px 16px 14px 0;
  border-bottom:1px solid var(--esm-line-2);color:var(--esm-prose-ink);
}
.esm-prose tr:last-child td{border-bottom:0}
.esm-prose table caption{
  caption-side:bottom;padding-top:12px;font-size:13px;color:var(--esm-ink-3);text-align:left;
}

/* Editor buttons keep the site's pill shape. */
.esm-prose .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 30px;border-radius:999px;
  background:var(--esm-ink);color:var(--esm-cream);
  font-family:var(--esm-sans);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:background .25s var(--esm-ease),transform .25s var(--esm-ease);
}
.esm-prose .wp-block-button__link:hover{background:var(--esm-violet-deep);color:var(--esm-cream);transform:translateY(-1px)}
.esm-prose .is-style-outline .wp-block-button__link{
  background:transparent;color:var(--esm-ink);border:1px solid var(--esm-line-strong);
}
.esm-prose .is-style-outline .wp-block-button__link:hover{background:var(--esm-ink);color:var(--esm-cream)}

/* Paged post links */
.esm-pagelinks{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:clamp(32px,4vw,56px);padding-top:20px;border-top:1px solid var(--esm-line-2);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.esm-pagelinks__label{color:var(--esm-ink-3)}
.esm-pagelinks__n{
  display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;
  border:1px solid var(--esm-line-2);border-radius:999px;
}

/* =========================================================================
   3. Generic page
   ========================================================================= */
.esm-page__media{
  margin:0 auto clamp(32px,4vw,64px);padding-inline:var(--esm-gutter);
  max-width:var(--esm-maxw);
}
.esm-page__img{width:100%;border-radius:8px}
.esm-page__body{padding:0 var(--esm-gutter) var(--esm-section-y)}
.esm-page__inner{max-width:var(--esm-maxw);margin-inline:auto}
.esm-page__inner .esm-prose{margin-inline:auto}

/* =========================================================================
   4. Listing — blog index, archives, search results
   ========================================================================= */
.esm-listing{padding:0 var(--esm-gutter) var(--esm-section-y)}
.esm-listing__inner{max-width:var(--esm-maxw);margin-inline:auto}
.esm-listing__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:16px;margin-bottom:clamp(24px,3vw,36px);
  padding-top:20px;border-top:1px solid var(--esm-line-2);
}
.esm-listing__bar--search{align-items:flex-end}
.esm-listing__count{
  margin:0;font-family:var(--esm-serif);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--esm-ink-3);
}
.esm-listing__grid{
  display:grid;gap:clamp(36px,4vw,52px) clamp(24px,3vw,48px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
  counter-reset:esm-post;
}
.esm-listing__grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}

/* Post card */
.esm-postcard{
  position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;
  counter-increment:esm-post;
}
.esm-postcard__media{
  position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:linear-gradient(160deg,var(--esm-cream-2),var(--esm-lilac));
}
.esm-postcard:nth-child(3n+2) .esm-postcard__media{background:linear-gradient(160deg,var(--esm-blush),var(--esm-cream-2))}
.esm-postcard:nth-child(3n+3) .esm-postcard__media{background:linear-gradient(160deg,var(--esm-lilac),var(--esm-blush))}
.esm-postcard__media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--esm-ease);
}
.esm-postcard:hover .esm-postcard__media img{transform:scale(1.04)}

/* Decorative counter, only where there is no thumbnail to show. */
.esm-postcard--nothumb .esm-postcard__media::after{
  content:counter(esm-post,decimal-leading-zero);
  position:absolute;left:20px;bottom:10px;
  font-family:var(--esm-serif);font-size:clamp(40px,4vw,64px);line-height:.9;
  letter-spacing:-.03em;color:rgba(32,27,36,.18);
}
.esm-postcard__meta{
  display:flex;justify-content:space-between;gap:12px;margin:0;
  font-family:var(--esm-serif);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--esm-ink-3);
}
.esm-postcard__title{
  margin:0;font-family:var(--esm-serif);font-weight:500;
  font-size:clamp(21px,1.9vw,28px);line-height:1.14;letter-spacing:-.015em;
  text-wrap:pretty;
}
/* One tab stop: the title link covers the whole card. */
.esm-postcard__link::after{content:"";position:absolute;inset:0;border-radius:6px}
.esm-postcard__link:focus-visible{outline:none}
.esm-postcard:has(.esm-postcard__link:focus-visible){
  outline:2px solid var(--esm-violet-deep);outline-offset:6px;border-radius:8px;
}
.esm-postcard__cta{
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--esm-violet);
}

/* Empty state */
.esm-empty{
  padding:clamp(40px,6vw,88px) 0;border-top:1px solid var(--esm-line-2);
  display:flex;flex-direction:column;gap:24px;align-items:flex-start;
}
.esm-empty__text{margin:0;max-width:52ch;font-size:clamp(18px,1.8vw,24px);
  font-family:var(--esm-serif);line-height:1.3;letter-spacing:-.015em}
.esm-empty__actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center}

/* Pagination */
.esm-pagination{margin-top:clamp(48px,6vw,88px);padding-top:24px;border-top:1px solid var(--esm-line-2)}
.esm-pagination .nav-links{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
}
.esm-pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--esm-line-2);border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.1em;
  transition:background .25s var(--esm-ease),color .25s var(--esm-ease),border-color .25s var(--esm-ease);
}
.esm-pagination a.page-numbers:hover{background:var(--esm-ink);color:var(--esm-cream);border-color:var(--esm-ink)}
.esm-pagination .page-numbers.current{background:var(--esm-ink);color:var(--esm-cream);border-color:var(--esm-ink)}
.esm-pagination .page-numbers.dots{border-color:transparent}

/* Search form */
.esm-sitesearch{display:flex;flex-wrap:wrap;gap:12px;width:100%;max-width:620px}
.esm-sitesearch__input{
  flex:1 1 240px;min-width:0;height:56px;padding:0 22px;
  border:1px solid var(--esm-line-strong);border-radius:999px;
  background:var(--esm-cream-2);color:var(--esm-ink);
  font-family:var(--esm-sans);font-size:15px;
  transition:border-color .25s var(--esm-ease);
}
.esm-sitesearch__input:hover{border-color:var(--esm-violet)}
.esm-sitesearch__submit{flex:0 0 auto}

/* =========================================================================
   5. Single article
   ========================================================================= */
.esm-article__head{padding:clamp(32px,5vw,80px) var(--esm-gutter) 0}
.esm-article__head-inner{
  max-width:1100px;margin-inline:auto;display:flex;flex-direction:column;gap:20px;
}
.esm-article__kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;
  font-family:var(--esm-serif);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--esm-ink-3);
}
.esm-article__kicker a{color:var(--esm-violet)}
.esm-article__kicker a:hover{color:var(--esm-violet-deep)}
.esm-article__title{
  margin:0;font-size:clamp(34px,4.8vw,76px);line-height:1.02;
  letter-spacing:-.025em;text-wrap:pretty;
}
.esm-article__deck{
  margin:0;max-width:70ch;font-size:clamp(17px,1.4vw,20px);line-height:1.55;
  color:var(--esm-ink-2);
}
.esm-article__media{
  margin:clamp(28px,4vw,56px) auto 0;max-width:var(--esm-maxw);
}
.esm-article__img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:8px;
  background:linear-gradient(160deg,var(--esm-cream-2),var(--esm-lilac))}
.esm-article__caption{margin-top:10px;font-size:13px;color:var(--esm-ink-3)}

.esm-article__body{padding:clamp(40px,5.5vw,88px) var(--esm-gutter) var(--esm-section-y)}
.esm-article__grid{
  max-width:var(--esm-maxw);margin-inline:auto;
  display:grid;align-items:start;
  gap:40px clamp(40px,6vw,120px);
  grid-template-columns:minmax(0,var(--esm-rail-w)) minmax(0,2.6fr);
}
@media(max-width:900px){
  .esm-article__grid{grid-template-columns:minmax(0,1fr)}
}
.esm-article__prose{max-width:var(--esm-prose-w)}

/* Sticky rail */
.esm-rail{
  position:sticky;top:calc(var(--esm-header-h) + 20px);
  display:flex;flex-direction:column;gap:12px;
}
@media(max-width:900px){
  .esm-rail{position:static;padding-bottom:8px;border-bottom:1px solid var(--esm-line-2)}
}
.esm-rail .esm-eyebrow{margin-top:16px}
.esm-rail .esm-eyebrow:first-child{margin-top:0}
.esm-share,
.esm-rail__tags{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;
}
/* Share: 40px round icon buttons (Facebook, X, Pinterest, email). */
.esm-share{gap:10px}
.esm-share__link{
  display:inline-grid;place-items:center;width:40px;height:40px;padding:0;
  border:1px solid rgba(32,27,36,.25);border-radius:999px;color:var(--esm-ink);
  transition:background .25s var(--esm-ease),color .25s var(--esm-ease),border-color .25s var(--esm-ease);
}
.esm-share__link svg{width:18px;height:18px;display:block}
/* Tags: pills grow with their label instead of clipping a two-line tag inside a fixed 38px capsule. */
.esm-rail__tags a{
  display:inline-flex;align-items:center;min-height:36px;padding:8px 14px;
  border:1px solid var(--esm-line-2);border-radius:999px;color:var(--esm-ink);
  font-size:11px;font-weight:600;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;
  text-align:left;
  transition:background .25s var(--esm-ease),color .25s var(--esm-ease),border-color .25s var(--esm-ease);
}
.esm-share__link:hover,
.esm-rail__tags a:hover{background:var(--esm-ink);color:var(--esm-cream);border-color:var(--esm-ink)}

/* Related */
.esm-related{
  padding:clamp(48px,6vw,104px) var(--esm-gutter) var(--esm-section-y);
  border-top:1px solid var(--esm-line);
}
.esm-related__inner{max-width:var(--esm-maxw);margin-inline:auto}
.esm-related__bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:clamp(24px,3vw,36px);
}
.esm-related__title{margin:0}

/* =========================================================================
   6. FAQ — native <details>, zero JavaScript
   ========================================================================= */
.esm-faq{padding:0 var(--esm-gutter) var(--esm-section-y)}
.esm-faq__inner{
  max-width:var(--esm-maxw);margin-inline:auto;
  display:grid;align-items:start;
  gap:40px clamp(40px,6vw,120px);
  grid-template-columns:minmax(0,300px) minmax(0,2fr);
}
@media(max-width:900px){
  .esm-faq__inner{grid-template-columns:minmax(0,1fr)}
}
.esm-faq__rail{
  position:sticky;top:calc(var(--esm-header-h) + 20px);
  display:flex;flex-direction:column;gap:14px;
}
@media(max-width:900px){.esm-faq__rail{position:static}}
.esm-faq__navlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.esm-faq__navlist a{
  display:block;padding:12px 0;border-bottom:1px solid var(--esm-line-2);
  font-family:var(--esm-serif);font-size:20px;line-height:1.2;
}
.esm-faq__navlist a:hover{color:var(--esm-violet)}
.esm-faq__help{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--esm-ink-2)}
.esm-faq__help-link{border-bottom:1px solid var(--esm-line-strong)}

.esm-faq__groups{display:flex;flex-direction:column;gap:clamp(40px,5vw,56px)}
.esm-faq__groups--plain{grid-column:1/-1}
.esm-faq__group{scroll-margin-top:calc(var(--esm-header-h) + 24px)}
.esm-faq__group > .esm-eyebrow{padding-bottom:12px}
.esm-faq__intro,
.esm-faq__lead{margin-bottom:20px}

.esm-faq__list{border-top:1px solid var(--esm-line-2)}
.esm-faq__item{border-bottom:1px solid var(--esm-line-2)}

.esm-faq__q{
  display:grid;grid-template-columns:1fr 32px;align-items:center;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--esm-serif);font-size:clamp(19px,1.7vw,25px);line-height:1.22;
  color:var(--esm-ink);
}
.esm-faq__q::-webkit-details-marker{display:none}
.esm-faq__q:hover{color:var(--esm-violet-deep)}
.esm-faq__q:focus-visible{outline:2px solid var(--esm-violet-deep);outline-offset:4px;border-radius:4px}
.esm-faq__q-text{text-wrap:pretty}

/* The +/− sign is drawn, so it needs no icon font and no JS. */
.esm-faq__sign{
  position:relative;justify-self:end;
  width:32px;height:32px;border-radius:999px;border:1px solid var(--esm-line-strong);
  transition:transform .4s var(--esm-ease),background .25s var(--esm-ease),border-color .25s var(--esm-ease);
}
.esm-faq__sign::before,
.esm-faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);
}
.esm-faq__sign::before{width:12px;height:1.5px}
.esm-faq__sign::after{width:1.5px;height:12px;transition:opacity .3s var(--esm-ease)}
.esm-faq__item[open] .esm-faq__sign{transform:rotate(135deg);background:var(--esm-lilac);border-color:transparent}
.esm-faq__q:hover .esm-faq__sign{border-color:var(--esm-violet)}

.esm-faq__a{padding:0 56px 26px 0;max-width:640px;font-size:15px;line-height:1.68}
.esm-faq__a > *:last-child{margin-bottom:0}
@media(max-width:640px){.esm-faq__a{padding-right:0}}

/* Open smoothly where the browser supports it; instant everywhere else. */
@supports (interpolate-size:allow-keywords){
  .esm-faq{interpolate-size:allow-keywords}
  .esm-faq__item::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .45s var(--esm-ease),content-visibility .45s allow-discrete;
  }
  .esm-faq__item[open]::details-content{block-size:auto}
}

/* Every answer must be visible on paper, open or not. */
@media print{
  .esm-faq__item > .esm-faq__a{display:block!important}
  .esm-faq__sign{display:none}
}

/* =========================================================================
   7. 404
   ========================================================================= */
.esm-404{padding:clamp(56px,8vw,120px) var(--esm-gutter) var(--esm-section-y)}
.esm-404__inner{
  max-width:900px;margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:20px;
}
.esm-404__title{margin:0;font-size:clamp(40px,6vw,96px);text-wrap:balance}
.esm-404__title em{font-style:italic;font-weight:500;color:var(--esm-violet-deep)}
.esm-404__lede{margin:0}
.esm-404__search{width:100%;margin-top:8px}
.esm-404__links{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:8px;
}
.esm-404__list{
  list-style:none;display:flex;flex-wrap:wrap;gap:24px;margin:0;padding:0;
}
.esm-404__recent{
  width:100%;margin-top:clamp(32px,4vw,56px);padding-top:24px;
  border-top:1px solid var(--esm-line-2);
}
.esm-404__recent-list{
  list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.esm-404__recent-list a{
  font-family:var(--esm-serif);font-size:clamp(19px,1.7vw,24px);line-height:1.25;
}

/* =========================================================================
   8. Shared utility
   ========================================================================= */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;margin:0;
  clip:auto;clip-path:none;white-space:normal;
}