/* ============================================================
   WordPress layer for the variation D design system.
   Styles the parish's own page content (block editor and the
   static copy the old page builder left behind) so it reads in
   the same editorial voice as the rest of the site.
   ============================================================ */

.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--black); color:#fff; padding:10px 16px}
.skip:focus{left:12px; top:12px}

/* ---------- Desktop drop-down for the bulletin years ---------- */
@media (min-width:1000px){
  .hnav__group{position:relative}
  .hnav__sub{
    position:absolute; top:100%; left:-18px; min-width:230px; padding:10px 18px;
    background:var(--white); border:1px solid var(--line-2);
    display:flex; flex-direction:column; gap:2px;
    opacity:0; pointer-events:none; transform:translateY(4px); transition:.18s var(--ease);
  }
  .hnav__group:hover .hnav__sub,
  .hnav__group:focus-within .hnav__sub{opacity:1; pointer-events:auto; transform:none}
  .hnav__sub a{padding:9px 0; white-space:nowrap}
  .hnav__sub a::after{display:none}
  .hnav__sub a:hover{color:var(--accent)}
}
/* Logged-in editors see WordPress's admin bar (46px on phones); keep the menu below it. */
@media (max-width:782px){ body.admin-bar .drawer{top:110px} }
@media (min-width:783px) and (max-width:999px){ body.admin-bar .drawer{top:96px} }
.drawer a.drawer__sub{padding-left:18px; font-size:15.5px; color:var(--grey-2)}

/* ---------- Hero, home page ---------- */
.hero h1{max-width:18ch}
@media (max-width:640px){ .hero h1{font-size:32px} }
h1,h2,h3{max-width:100%; overflow-wrap:break-word}

/* ---------- Page heading ---------- */
.phead h1{font-size:clamp(32px,6vw,64px)}
.page-body{padding:44px 0 72px}
@media (min-width:900px){ .page-body{padding:64px 0 104px} }

/* ---------- The parish's content ---------- */
.entry{max-width:760px; font-size:17px; line-height:1.65}
.entry--home{max-width:880px}
.entry p{margin:0 0 14px}
.entry h2,.entry h3,.entry h4,.entry h5{font-weight:400; letter-spacing:-.02em; line-height:1.2; margin:34px 0 12px; text-align:left !important}
.entry h2{font-size:clamp(26px,4vw,38px)}
.entry h3{font-size:24px}
.entry h4{font-size:20px}
.entry h5{font-size:18px; color:var(--grey-2)}
.entry > :first-child{margin-top:0}
.entry a{color:var(--accent-2); text-decoration:underline; text-underline-offset:3px}
.entry a:hover{color:var(--accent)}
.entry strong,.entry b{font-weight:600}
.entry ul,.entry ol{padding-left:22px; margin:0 0 18px}
.entry li{margin:0 0 8px}
.entry img{height:auto}

/* Each page repeats the same wide church banner as its first item.
   The design already shows both churches, so that one banner is hidden;
   every other image the parish adds still shows. */
.entry > .wp-block-image:first-child,
.entry > figure.wp-block-image:first-child,
.entry .themify_builder_content > .module_row:nth-child(2) .module-image:first-child{display:none}
.entry--home > figure.wp-block-image:first-of-type{display:none}

/* Block editor columns: side by side on a wide screen, stacked on a phone. */
.entry .wp-block-columns{display:flex; flex-wrap:wrap; gap:24px 44px; margin:0 0 18px}
.entry .wp-block-column{flex:1 1 280px; min-width:0}
.entry .has-text-align-center{text-align:left}

/* Coloured boxes from the old theme become the design's warm panel. */
.entry [style*="background"],
.entry .has-background{background:var(--warm) !important; color:var(--black) !important; padding:22px 24px !important}

/* The static copy the old page builder stored: drop its grid and widths,
   keep the words and images in a simple column. */
.entry .themify_builder_content,
.entry .module_row,
.entry .row_inner,
.entry .module_column,
.entry .tb-column-inner,
.entry .module{display:block; width:auto !important; max-width:100% !important; padding:0 !important; margin:0 !important; float:none !important; background:none !important}
.entry .module_row{margin-bottom:18px !important}
.entry .image-wrap img{margin-bottom:14px}

/* Bulletin year lists: one row per week, hairline between. */
.entry--list ul{list-style:none; padding:0; border-top:1px solid var(--line)}
.entry--list li{margin:0; border-bottom:1px solid var(--line)}
.entry--list li a{display:block; padding:13px 0; text-decoration:none; color:var(--black)}
.entry--list li a:hover{color:var(--accent)}

/* ---------- Our churches ---------- */
.churches{display:grid; gap:24px; margin-top:28px}
@media (min-width:760px){ .churches{grid-template-columns:1fr 1fr; gap:32px} }
.church{display:block; text-decoration:none; color:var(--black); background:var(--white)}
.church img{width:100%; aspect-ratio:16/7; object-fit:cover; object-position:30% center}
.church h3{margin:18px 20px 6px}
.church p{margin:0 20px 22px; color:var(--grey-2)}
.church:hover h3{color:var(--accent)}

/* ---------- Lists (Weekly Bulletins) ---------- */
.rows{border-top:1px solid var(--line)}
.rowitem{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--black)}
.rowitem h3{margin:0}
.rowitem:hover h3{color:var(--accent)}
.rowitem__pdf{font-size:13px; color:var(--grey-2); white-space:nowrap}

/* The width/height attributes on these photos would otherwise fix them at
   500px tall; height:auto lets aspect-ratio set a landscape crop. */
.church img,.cmaps img,.hist__photo img{height:auto}

/* Directly under a page heading, the table needs no second top rule. */
.page-body > .shell > .cmp:first-child{margin-top:0; border-top:0}
.page-body > .shell > .cmp:first-child .cmp__hd{padding-top:0}
.page-body > .shell > .cwrap:first-child{margin-top:0}

/* Footer: four columns hold a long sentence in the last one. */
footer p a{white-space:nowrap}
footer p a[href*="google.com/maps"]{white-space:normal} /* church addresses wrap on small phones */

/* ---------- Mass times table ---------- */
.cmp__v--none{color:var(--grey)}
.cmp__note b{color:var(--black); font-weight:600}
.cmp__ch b{overflow-wrap:break-word}

/* ---------- Seasonal notice (only when the office fills it in) ---------- */
.notice-box{margin-top:28px; padding:18px 22px; background:var(--warm); border:1px solid var(--line); font-size:16.5px; line-height:1.6}

/* ---------- This week's bulletin ---------- */
.feat-b{margin-top:36px; padding:28px 26px; background:var(--warm)}
.feat-b__k{font-size:14px; color:var(--grey-2); margin-bottom:8px}
.feat-b h3{font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; line-height:1.2}
.feat-b h3 a{text-decoration:none}
.feat-b h3 a:hover{color:var(--accent)}
.feat-b__d{margin-top:8px; color:var(--grey-2); font-size:15px}
.feat-b .btnrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
@media (max-width:520px){ .feat-b .cta{width:100%} }

/* ---------- News and updates ---------- */
.news{display:grid; gap:0; margin-top:28px; border-top:1px solid var(--line)}
@media (min-width:820px){ .news{grid-template-columns:repeat(3,1fr); gap:32px; border-top:0} }
.news__item{display:block; text-decoration:none; color:var(--black); padding:20px 0; border-bottom:1px solid var(--line)}
@media (min-width:820px){ .news__item{border-top:1px solid var(--black); border-bottom:0} }
.news__d{font-size:13.5px; color:var(--grey); margin-bottom:8px}
.news__item h3{margin-bottom:8px}
.news__item p:last-child{color:var(--grey-2); font-size:15.5px}
.news__item:hover h3{color:var(--accent)}

/* ---------- Single post extras ---------- */
.phead__k{font-size:14px; color:var(--grey-2); margin:0 0 10px !important}
.phead .btnrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
.back{margin-top:36px}
.back a{color:var(--black); border-bottom:1px solid var(--line); text-decoration:none}
.rowitem h3 a{text-decoration:none; color:inherit}
.rowitem h3 a:hover{color:var(--accent)}
.rowitem__d{font-size:13.5px; color:var(--grey); margin-top:4px}
a.rowitem__pdf{color:var(--black); border-bottom:1px solid var(--accent); text-decoration:none; padding:8px 0}

/* ---------- Page heading intro ---------- */
.phead p{font-size:18px; line-height:1.6}

/* ---------- Our churches cards ---------- */
.church__go{display:inline-block; margin:0 20px 22px; font-size:14px; border-bottom:1px solid var(--line); color:var(--black)}
.church:hover .church__go{border-bottom-color:var(--accent); color:var(--accent)}
.church p{margin-bottom:10px}

/* ---------- Contact ---------- */
.urgent{margin-top:24px; padding:18px 20px; background:var(--warm); border-left:0; font-size:16px; line-height:1.6}
.band .urgent{background:var(--white)}
.urgent b{font-weight:600}
.urgent a{color:var(--black); border-bottom:1px solid var(--accent); text-decoration:none; white-space:nowrap}
.cmaps{display:grid; gap:22px}
.cmaps figure{margin:0}
.cmaps img{width:100%; aspect-ratio:16/7; object-fit:cover; object-position:30% center}
.cmaps figcaption{margin-top:10px; font-size:14px; color:var(--grey-2)}

/* ---------- Contact form ---------- */
.form-h{font-size:clamp(22px,3vw,30px); margin-bottom:18px; scroll-margin-top:90px}
.npform{scroll-margin-top:90px}
.npform__trap{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden}
.npform__msg{padding:14px 16px; margin:0 0 18px; font-size:15.5px; line-height:1.5}
.npform__msg--ok{background:#E8F1E4; border:1px solid #B9D1AE}
.npform__msg--err{background:#F6E5DF; border:1px solid #E5BBAE}
.npform .field select{appearance:auto}
.npform .fbtn{min-height:48px}
@media (max-width:640px){ .npform .fbtn{width:100%} .form-h{font-size:22px} }

/* ---------- Step-by-step form ---------- */
.npw{background:var(--warm); padding:24px 22px 22px; scroll-margin-top:90px}
.npw__bar{height:4px; background:var(--line); margin-bottom:16px}
.npw__bar span{display:block; height:100%; background:var(--accent); transition:width .25s var(--ease)}
.npw__k{font-size:13.5px; color:var(--grey-2); margin-bottom:10px}
.npw__q{display:block; font-size:clamp(20px,2.6vw,26px); letter-spacing:-.015em; line-height:1.25; margin:0 0 8px; font-weight:400}
.npw__q em{font-style:normal; font-size:15px; color:var(--grey)}
.npw__hint{font-size:14.5px; color:var(--grey-2); margin-bottom:10px}
.npw__note{font-size:15px; background:var(--white); border:1px solid var(--line); padding:12px 14px; margin:0 0 14px; line-height:1.5}
.npw__input{width:100%; font-family:var(--sans); font-size:16px; color:var(--black); background:var(--white); border:1px solid var(--line); border-radius:0; padding:13px 14px; margin-top:6px}
.npw__input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
/* No accidental double-tap zoom on phones; pinch zoom stays on for people who
   need larger text (iPhones ignore attempts to block it, and blocking it fails
   WCAG 1.4.4). No sideways wobble: nothing may be wider than the screen. */
html{touch-action:manipulation; overflow-x:clip}
textarea.npw__input{min-height:130px; resize:vertical; line-height:1.55}
/* Dropdown: a wrapping label box with the real select invisible on top of it. */
.npw__dd{position:relative; margin-top:6px; min-height:50px; padding:13px 44px 13px 14px; background:var(--white); border:1px solid var(--line); font-family:var(--sans); font-size:16px; line-height:1.4; color:var(--black); cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:12px 8px}
.npw__dd.is-empty .npw__ddv{color:#8A857D}
.npw__ddv{display:block}
.npw__ddsel{position:absolute; inset:0; width:100%; height:100%; opacity:0; font-size:16px; cursor:pointer; -webkit-appearance:none; appearance:none; border:0; margin:0}
.npw__dd:focus-within{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)}
.npw__choices{display:grid; gap:10px; margin-top:6px}
.npw__choice{display:flex; align-items:center; gap:12px; background:var(--white); border:1px solid var(--line); padding:13px 14px; cursor:pointer; min-height:48px; font-size:16px}
.npw__choice:has(input:checked){border-color:var(--accent); background:#FBF3F0}
.npw__choice input{width:18px; height:18px; accent-color:var(--accent); flex:none}
.npw__err{min-height:20px; font-size:14px; color:var(--accent-2); margin-top:8px}
.npw__nav{display:flex; justify-content:space-between; gap:12px; margin-top:12px}
.npw__nav .cta{min-width:110px}
.npw__review{margin:10px 0 0; border-top:1px solid var(--line)}
.npw__review div{padding:10px 0; border-bottom:1px solid var(--line)}
.npw__review dt{font-size:13.5px; color:var(--grey-2)}
.npw__review dd{margin:2px 0 0; font-size:16px; white-space:pre-wrap; overflow-wrap:anywhere}
.npw__call{margin-top:10px; font-size:17px; min-height:52px; padding:14px 26px}
.npw__hours{margin-top:16px; background:var(--white); padding:12px 14px; display:grid; gap:4px; font-size:15.5px; line-height:1.5}
.npw__hours b{font-weight:600; font-size:14px; color:var(--grey-2)}
.npw__alt{margin-top:14px; font-size:15px; color:var(--grey-2)}
.npw__alt a{color:var(--black)}
@media (max-width:640px){ .npw{padding:18px 16px} .npw__nav .cta{flex:1; min-width:0} .npw__call{width:100%} }

/* ---------- Our History ---------- */
.hist-nav{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.hist-nav a{font-size:14px; text-decoration:none; color:var(--black); border:1px solid var(--line); border-radius:1440px; padding:10px 16px; min-height:44px; display:inline-flex; align-items:center}
.hist-nav a:hover{border-color:var(--accent); color:var(--accent)}
.hist{scroll-margin-top:80px}
.hist__photo{margin:0 0 30px}
.hist__photo img{width:100%; aspect-ratio:16/6; object-fit:cover; object-position:30% center}
.hist__grid{display:grid; gap:18px}
@media (min-width:900px){
  .hist__grid{grid-template-columns:minmax(220px,.7fr) 1.3fr; gap:56px; align-items:start}
  .hist__grid h2{position:sticky; top:100px}
}
.hist .entry{max-width:68ch}
.hist-sources{padding:36px 0 64px}
.hist-sources p{max-width:72ch; font-size:14px; line-height:1.6; color:var(--grey-2)}
/* ============================================================
   Phone density (Andreas, 15 Nov: "the text and fonts take up so
   much space on mobile"). Smaller type, tighter sections and a
   shorter photo band so more of each page fits on one screen.
   Desktop is unchanged.
   ============================================================ */
@media (max-width:640px){
  body{font-size:16px; line-height:1.5}
  section{padding:34px 0}
  .page-body{padding:24px 0 40px}
  h2{font-size:25px; line-height:1.12}
  h3{font-size:17px}
  .split{gap:8px}
  .split__aside p{font-size:15px}

  /* Hero: 210px photo band instead of 300px, smaller headline */
  .hero--split .pane{height:210px}
  .hero--split::after,.hero__seam,.hero__marks{height:210px}
  .hero--split .hero__in{padding-block:228px 28px}
  .hero h1{font-size:28px; line-height:1.1}
  .hero p{font-size:15px; margin-top:12px}
  .hero__row{margin-top:18px}
  .idmark{margin-bottom:14px; gap:10px}
  .idmark img{width:34px; height:34px}
  .hero__mark{font-size:10px}

  /* Orange bar */
  .bar__in{padding-block:12px; gap:8px}
  .bar__t{font-size:20px}
  .bar__w,.bar__today{font-size:14px}

  /* Page headings */
  .phead{padding:26px 0 20px}
  .phead h1{font-size:28px}
  .phead p{font-size:15.5px; margin-top:10px}

  /* Mass times table */
  .cmp{margin-top:20px}
  .cmp__hd,.cmp__r{padding:11px 0; gap:10px}
  .cmp__ch b{font-size:14.5px}
  .cmp__ch span{font-size:12px}
  .cmp__lbl{font-size:13px; padding:8px 0 2px}
  .cmp__v{font-size:15.5px}
  .cmp__note{font-size:14.5px; margin-top:14px}

  /* Sacrament cards */
  .routes{margin-top:20px}
  .route{padding:14px 0; gap:4px}
  .route h3{font-size:17px}
  .route p{font-size:14.5px; line-height:1.5}
  .route__go{font-size:13.5px}

  /* Churches, bulletin, news, contact */
  .churches{gap:14px; margin-top:18px}
  .church h3{margin:12px 16px 4px; font-size:17px}
  .church p{margin:0 16px 6px; font-size:14.5px}
  .church__go{margin:0 16px 16px; font-size:13.5px}
  .feat-b{margin-top:20px; padding:20px 18px}
  .feat-b h3{font-size:20px}
  .news{margin-top:16px}
  .news__item{padding:14px 0}
  .cinfo .row{padding:10px 0}
  .cinfo dd{font-size:15.5px}
  .urgent{margin-top:16px; padding:14px 16px; font-size:14.5px}
  .rowitem{padding:13px 0}
  .rowitem h3{font-size:16px}

  /* History */
  .hist__photo{margin-bottom:16px}
  .hist .entry,.entry{font-size:15.5px; line-height:1.6}
  .hist-nav{margin-top:16px; gap:8px}
  .hist-nav a{font-size:13.5px; padding:8px 14px; min-height:40px}

  /* Footer */
  footer{padding:36px 0 22px}
  .fbig{font-size:22px; margin-bottom:24px}
  .fgrid{gap:18px}
  footer p{font-size:15px}
  .flegal{margin-top:26px}

  .phead h1{font-size:28px}
  .hist__photo img{aspect-ratio:16/9}
  .church img,.cmaps img{aspect-ratio:16/9}
}


/* ============================================================
   Readability pass (Andreas, 15 Nov: less word-heavy, easy to read).
   ============================================================ */
/* Bar labels in sentence case: tracked capitals stay for the photo captions only. */
.bar__k{text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:rgba(255,255,255,.8)}
/* Times line up and do not jump as the bar updates. */
.bar__t,.cmp__v,.bar__today{font-variant-numeric:tabular-nums}
/* Sacrament cards: title, one line, a short action. */
.route__go{font-size:14px; color:var(--accent-2)}
@media (max-width:819px){
  .route{grid-template-columns:1fr auto; grid-template-areas:"t go" "p p"; align-items:baseline; column-gap:12px}
  .route h3{grid-area:t}
  .route p{grid-area:p}
  .route__go{grid-area:go}
}
/* Footer now has three columns. */
@media (min-width:1080px){ .fgrid{grid-template-columns:1fr 1fr 1fr} }
/* Contact page on phones: the form first, the details underneath. */
@media (max-width:899px){
  .cwrap > .cinfo{order:2}
  .cwrap > div:not(.cinfo){order:1}
}

/* No stranded words (Andreas, 15 Nov): headings balance across their lines,
   paragraphs avoid a lone last word, and church names never split. */
h1,h2,h3,h4,.npw__q,.fbig,.route h3,.church h3{text-wrap:balance}
p,li,dd,.route p,.cmp__note,.bar__today,.hero p{text-wrap:pretty}
.bar__ch{display:block}
.bar__ch b{white-space:nowrap}
@media (min-width:820px){
  .bar__ch{display:inline}
  .bar__ch + .bar__ch::before{content:"\00B7"; margin:0 10px; opacity:.7}
}
a[href^="tel:"]{white-space:nowrap}
.npw__nav > span:empty{display:none}
/* Review screen: answer and a Change link on one row */
.npw__review dd{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.npw__review dd span{flex:1; min-width:0}
.npw__edit{flex:none; background:none; border:0; padding:6px 0; font:inherit; font-size:14px; color:var(--accent-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:36px}
/* Calendar fields: full width, readable, tappable */
input[type="date"].npw__input{min-height:50px; appearance:auto; -webkit-appearance:auto}
.npw__note--urgent{background:#FBF3F0; border-color:#E5BBAE}
.npw__note--urgent a{color:var(--black); font-weight:600; white-space:nowrap}

/* ============================================================
   UX audit, 16 Nov 2026 (WCAG 2.2 AA and readability).
   Loaded last on purpose so it overrides the density pass above.
   Report: Clients/Prospects/NAP Parish/Website/UX-AUDIT-2026-11-16.md
   ============================================================ */

/* Jump links ("See Mass times") land below the sticky header. */
html{scroll-padding-top:84px}
@media (min-width:900px){html{scroll-padding-top:96px}}

/* Reading text at 16px on every screen. Headings and spacing stay compact. */
.hero p,.phead p,.split__aside p,.cmp__v,.cmp__note,.bar__w,.bar__today,.bar__ch,
.route p,.church p,.hist .entry,.entry,.entry p,.entry li,.cinfo dd,.urgent,
footer p,.rowitem p,.rowitem__d,.item p{font-size:16px}

/* Labels and small print at 14px or more. */
.cinfo dt,.cmp__lbl,.cmp__ch span,.cmp__v em,.npw__k,.feat-b__k,.church__go,
.route__go,.rowitem__pdf,.bar__k,.hist-nav a,.yr,.item__d,.srow__d,.feat__d{font-size:14px}
.hero__ln{font-size:15px}
.hero__mark{font-size:12px}
.cta,.hnav a,.cmp__ch b{font-size:15px}

/* Contrast: solid white on the orange bar (the see-through white fell under 4.5:1). */
.bar__k,.bar__w,.bar__today,.bar__ch,.bar__ch b{color:#fff}
.hero__ln{color:rgba(255,255,255,.9)}

/* Tap targets of at least 44px. Underlines move to text-decoration so they
   stay under the words when the link box grows. */
.wm{min-height:44px}
.burger{min-width:44px}
.hist-nav a{min-height:44px}
@media (min-width:900px){
  .hnav a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0}
  .hnav a::after{bottom:10px}
}
footer p > a,.cinfo dd a,.hero__ln a,.split__aside p a,.back a{
  display:inline-flex; align-items:center; min-height:44px; border-bottom:0;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px}
footer p > a{text-decoration-color:rgba(255,255,255,.45)}
.cinfo dd a,.back a,.split__aside p a,.urgent a{text-decoration-color:var(--grey)}
footer p > a:hover,.cinfo dd a:hover,.back a:hover,.split__aside p a:hover,.urgent a:hover{text-decoration-color:var(--accent)}
footer p{margin:0}
footer .sp{margin-bottom:8px}
.cinfo .row{padding:6px 0 4px}
.cinfo dt{padding-top:6px}

/* The contact details no longer sit on the section heading's rule. */
#contact .cinfo{margin-top:32px}

/* Every contact row the same height, link or not, so the list keeps one rhythm. */
.cinfo dd{min-height:44px; display:flex; align-items:center}

/* A link inside a sentence stays inline (WCAG 2.5.8 exempts it); its tap area
   grows invisibly so the line spacing is untouched. */
.urgent a{display:inline; padding:12px 0; margin:-12px 0; border-bottom:0;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--grey)}

/* Long history text: reading column capped at about 72 characters (54ch, since
   one ch is the width of a zero, wider than an average letter). */
.entry p,.entry li{max-width:54ch}

/* Bulletin post headings shifted up a level keep their original look. */
.entry .is-h3{font-size:24px}
.entry .is-h4{font-size:20px}
.entry .is-h5,.entry .is-h6{font-size:18px; color:var(--grey-2)}