/* ============================================================
   THE 5T BRIEF - shared design system
   Direction 01 "Broadsheet", promoted from the design lab.

   Type : Frank Ruhl Libre (display, Hebrew-native) + Literata (text)
   Color: monochrome on true white, one ink red

   HARD SITE RULE: no em dashes anywhere, including in this file.
   ============================================================ */

:root{
  --paper:     oklch(1 0 0);
  --ink:       oklch(0.16 0 0);
  --ink-soft:  oklch(0.40 0 0);    /* 8.4:1 on white */
  --ink-faint: oklch(0.51 0 0);    /* 5.6:1 on white, and on --wash */
  --rule:      oklch(0.84 0 0);
  --rule-hair: oklch(0.91 0 0);
  --wash:      oklch(0.975 0 0);
  --red:       oklch(0.45 0.175 27);
  --red-deep:  oklch(0.34 0.14 27);
  --green:     oklch(0.45 0.10 155);

  --ff-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --ff-text:    "Literata", Georgia, "Times New Roman", serif;

  --measure: 66ch;
  --gutter: clamp(1.15rem, 3.5vw, 2.75rem);
  --maxw: 1280px;

  --z-sticky: 100;
  --z-skip: 200;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-text); font-size:1.0625rem; line-height:1.65;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:900; line-height:1.06;
  letter-spacing:-0.021em; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
abbr{ text-decoration:none; }
:focus-visible{ outline:2.5px solid var(--red); outline-offset:3px; border-radius:1px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0; }

.skip{ position:absolute; left:-9999px; z-index:var(--z-skip);
  background:var(--ink); color:var(--paper); padding:.7rem 1.1rem;
  font-family:var(--ff-display); font-weight:700; }
.skip:focus{ left:.6rem; top:.6rem; }

/* ---------------- utility strip ---------------- */
.strip{ border-bottom:1px solid var(--rule-hair); font-size:.8125rem; color:var(--ink-soft); }
.strip__in{ display:flex; align-items:center; gap:.5rem 1.25rem; min-height:2.5rem;
  flex-wrap:wrap; padding-block:.4rem; }
.strip time{ font-variant-numeric:tabular-nums; }
.strip .heb{ font-family:var(--ff-display); font-size:.9375rem; color:var(--ink); }
.strip__spacer{ margin-inline-start:auto; }
.strip a{ text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.strip a:hover{ color:var(--red); }
@media (max-width:560px){
  .strip__hide{ display:none; }
  .strip__spacer{ margin-inline-start:0; }
  .strip__in{ gap:.3rem .8rem; }
}

/* ---------------- masthead ---------------- */
.masthead{ padding-block:clamp(1.1rem,3vw,2rem) 0; text-align:center; }

/* The double rule needs real air beneath it. Sitting tight against the villages
   line made the two read as one crowded block. */
.masthead__rule{ border-top:3px solid var(--ink); border-bottom:1px solid var(--ink);
  height:5px; margin-bottom:clamp(1rem, 2.6vw, 1.6rem); }

.wordmark{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(2.35rem, 10.5vw, 5.75rem);
  line-height:.92; letter-spacing:-0.038em; margin:0; display:block;
}
/* max() keeps the villages line legible once the wordmark clamps down on phones,
   and the line-height stops the two wrapped lines from colliding. */
/* no max-width: the 26ch cap forced a third line on phones. Natural wrapping
   gives one line on desktop and two at 400px, which is what we want. */
.wordmark .the{ display:block; font-size:max(.7rem, .215em); letter-spacing:.075em;
  line-height:1.5; font-weight:500; text-transform:uppercase;
  margin-bottom:.55em; color:var(--ink-soft); }
.masthead__sub{ font-size:.9375rem; color:var(--ink-soft); font-style:italic;
  margin-top:.55rem; }

/* ---------------- masthead ear: the times are furniture ---------------- */
.ear{
  display:grid; gap:.15rem .9rem; padding-block:.9rem;
  margin-top:clamp(.9rem,2.2vw,1.15rem);
  border-top:1px solid var(--rule); border-bottom:3px double var(--ink);
  text-align:left;
  /* phone: two time columns side by side, parsha on its own line above them.
     The old three-across grid crushed all three at ~400px. */
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "mid mid"
    "l   r";
}
@media (min-width:760px){
  .ear{ grid-template-columns:1fr auto 1fr; align-items:end;
    grid-template-areas:"l mid r"; gap:1rem; }
}
.ear__side{ font-size:.8125rem; line-height:1.45; color:var(--ink-soft); grid-area:l; }
.ear__side--r{ grid-area:r; text-align:right; }
.ear__side b{ display:block; font-family:var(--ff-display); font-weight:700;
  font-size:clamp(1.0625rem,3.4vw,1.25rem); color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:0; }
.ear__mid{ grid-area:mid; text-align:center; padding-bottom:.5rem;
  border-bottom:1px solid var(--rule-hair); margin-bottom:.4rem; }
@media (min-width:760px){
  .ear__mid{ padding-bottom:0; border-bottom:0; margin-bottom:0; }
}
.ear__parsha{ font-family:var(--ff-display); font-weight:700;
  font-size:clamp(1.0625rem,3.2vw,1.1875rem); }
.ear__parsha .heb{ font-weight:500; color:var(--red-deep); margin-inline-start:.4em; }
.ear__label{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); display:block; }

/* ---------------- nav ---------------- */
.nav{ border-bottom:1px solid var(--rule); position:sticky; top:0;
  background:var(--paper); z-index:var(--z-sticky); }
/* fade on the right edge so it is obvious the strip scrolls on a phone */
.nav__scroll{ position:relative; }
.nav__scroll::after{
  content:""; position:absolute; inset-block:0; right:0; width:2.25rem;
  background:linear-gradient(to right, oklch(1 0 0 / 0), oklch(1 0 0));
  pointer-events:none;
}
@media (min-width:900px){ .nav__scroll::after{ display:none; } }
.nav__in{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity; }
.nav__in::-webkit-scrollbar{ display:none; }
.nav a{
  font-family:var(--ff-display); font-weight:700; font-size:.9375rem;
  padding:.8rem clamp(.7rem,2.4vw,1.05rem); text-decoration:none; white-space:nowrap;
  border-bottom:3px solid transparent; margin-bottom:-1px; scroll-snap-align:start;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover{ color:var(--red); }
.nav a[aria-current]{ border-bottom-color:var(--red); }
.nav__end{ display:none; }
@media (min-width:900px){
  .nav__end{ margin-inline-start:auto; display:flex; align-items:center;
    padding-inline-start:1rem; }
}
.nav__cta{ font-family:var(--ff-display); font-weight:700; font-size:.8125rem;
  background:var(--ink); color:var(--paper); padding:.42rem .85rem;
  text-decoration:none; white-space:nowrap; transition:background .18s var(--ease); }
.nav__cta:hover{ background:var(--red); }

/* ---------------- ad slots ---------------- */
.ad{ display:grid; place-items:center; background:var(--wash);
  border:1px solid var(--rule-hair); color:var(--ink-faint); text-align:center; }
.ad__label{ font-family:var(--ff-text); font-size:.75rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); }
.ad__dim{ font-family:var(--ff-display); font-size:.8125rem; color:var(--ink-soft);
  margin-top:.2rem; }
/* show the size that actually applies at this width */
.ad__dim .wide{ display:none; }
.ad__dim .narrow{ display:inline; }
@media (min-width:760px){
  .ad__dim .wide{ display:inline; }
  .ad__dim .narrow{ display:none; }
}
.ad-leader{ margin-block:1.5rem; min-height:90px; }
@media (max-width:759px){ .ad-leader{ min-height:60px; margin-block:1.1rem; } }
.ad-mpu{ min-height:250px; }
.ad-half{ min-height:600px; }
.ad-native{ border-top:1px solid var(--ink); border-bottom:1px solid var(--rule);
  background:none; display:block; padding-block:1.1rem; margin-block:1.75rem;
  text-align:left; }
.ad-native__tag{ font-size:.75rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); font-weight:600; }
.ad-native__grid{ display:grid; grid-template-columns:1fr; gap:1.1rem;
  align-items:start; margin-top:.5rem; }
@media (min-width:520px){ .ad-native__grid{ grid-template-columns:1fr 132px; } }
.ad-native h3{ font-size:1.25rem; font-weight:700; letter-spacing:-0.012em; }
.ad-native p{ font-size:.9375rem; color:var(--ink-soft); margin-top:.3rem; }
.ad-native__thumb{ aspect-ratio:4/3; background:var(--wash);
  border:1px solid var(--rule-hair); display:grid; place-items:center;
  font-size:.75rem; color:var(--ink-faint); letter-spacing:.1em; }

/* ---------------- page grid ---------------- */
.sheet{ display:grid; gap:clamp(1.5rem,3.5vw,2.75rem); padding-block:.5rem 3rem;
  grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){ .sheet{ grid-template-columns:minmax(0,1fr) 300px; } }

/* ---------------- lead story ---------------- */
.kicker{ font-family:var(--ff-display); font-weight:700; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.lead{ padding-bottom:1.75rem; border-bottom:3px double var(--ink); }
.lead h1{ font-size:clamp(1.85rem,5.2vw,3.5rem); margin-block:.45rem .6rem; }
.lead__deck{ font-size:clamp(1.0625rem,2.1vw,1.3125rem); color:var(--ink-soft);
  line-height:1.45; max-width:52ch; font-style:italic; }
.byline{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline;
  margin-top:1rem; padding-top:.65rem; border-top:1px solid var(--rule-hair);
  font-size:.8125rem; color:var(--ink-soft); }
.byline b{ font-family:var(--ff-display); font-weight:700; color:var(--ink);
  font-size:.875rem; letter-spacing:.01em; }
.byline time{ font-variant-numeric:tabular-nums; }

figure{ margin:1.35rem 0 0; }
figure img{ width:100%; }
figcaption{ font-size:.8125rem; color:var(--ink-faint); line-height:1.5;
  padding-top:.5rem; border-top:1px solid var(--rule-hair); margin-top:.5rem; }
figcaption b{ color:var(--ink-soft); font-weight:600; }
.credit{ display:block; font-size:.75rem; color:var(--ink-faint); margin-top:.25rem; }

.body{ margin-top:1.35rem; }
@media (min-width:900px){
  .body{ columns:2; column-gap:2.25rem; column-rule:1px solid var(--rule-hair); }
}
.body p{ margin-bottom:.9rem; max-width:var(--measure); }
.body p:first-of-type::first-letter{
  font-family:var(--ff-display); font-weight:900; float:left;
  font-size:3.55em; line-height:.78; padding:.06em .09em 0 0; color:var(--red-deep);
}
.body p:last-child{ margin-bottom:0; }

/* ---------------- section heads ---------------- */
.shead{ display:flex; align-items:center; gap:1rem; margin:2.5rem 0 1.1rem; }
.shead h2{ font-size:clamp(1.25rem,3vw,1.5rem); letter-spacing:-0.01em; white-space:nowrap; }
.shead::after{ content:""; flex:1; border-top:1px solid var(--ink); }
.shead a{ font-family:var(--ff-display); font-weight:700; font-size:.8125rem;
  color:var(--red); text-decoration:none; white-space:nowrap; }

/* ---------------- story lists ---------------- */
.cols{ columns:1; }
@media (min-width:720px){
  .cols{ columns:2; column-gap:2.25rem; column-rule:1px solid var(--rule-hair); }
}
.story{ break-inside:avoid; padding-bottom:1.1rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--rule-hair); }
.story:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.story h3{ font-size:1.1875rem; font-weight:700; letter-spacing:-0.011em; }
.story h3 a{ text-decoration:none; }
.story h3 a:hover{ color:var(--red); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px; }
.story p{ font-size:.9375rem; color:var(--ink-soft); margin-top:.35rem; }
.story__meta{ font-size:.75rem; color:var(--ink-faint); margin-top:.45rem;
  font-variant-numeric:tabular-nums; }

.pair{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.pair figure{ margin-top:0; }
.pair img{ aspect-ratio:16/10; object-fit:cover; }
.pair h3{ font-size:1.125rem; font-weight:700; margin-top:.6rem; }
.pair h3 a{ text-decoration:none; }
.pair h3 a:hover{ color:var(--red); }
.pair p{ font-size:.9375rem; color:var(--ink-soft); margin-top:.3rem; }

/* ---------------- rail ---------------- */
.rail{ display:grid; gap:1.75rem; align-content:start; }
@media (min-width:1000px){ .rail{ position:sticky; top:3.6rem; } }
.panel{ border:1px solid var(--ink); }
.panel__hd{ background:var(--ink); color:var(--paper); padding:.55rem .85rem;
  font-family:var(--ff-display); font-weight:700; font-size:.9375rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.panel__hd .heb{ font-weight:500; opacity:.85; }
.panel__bd{ padding:.85rem; }
.panel__note{ font-size:.75rem; color:var(--ink-faint); margin-top:.6rem; line-height:1.45; }

.zman{ display:grid; grid-template-columns:1fr auto; gap:.1rem .75rem; font-size:.9375rem; }
.zman dt{ color:var(--ink-soft); padding-block:.34rem; border-bottom:1px solid var(--rule-hair); }
.zman dd{ margin:0; text-align:right; font-family:var(--ff-display); font-weight:700;
  font-variant-numeric:tabular-nums; padding-block:.34rem;
  border-bottom:1px solid var(--rule-hair); }
.zman dt:last-of-type, .zman dd:last-of-type{ border-bottom:0; }
.zman dd.hi{ color:var(--red); }

.brieflist{ list-style:none; margin:0; padding:0; }
.brieflist li{ padding-block:.6rem; border-bottom:1px solid var(--rule-hair);
  font-size:.9375rem; line-height:1.45; }
.brieflist li:last-child{ border-bottom:0; padding-bottom:0; }
.brieflist a{ text-decoration:none; }
.brieflist a:hover{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
.brieflist .t{ display:block; font-size:.75rem; color:var(--ink-faint); margin-top:.15rem;
  font-variant-numeric:tabular-nums; }

/* ---------------- newsletter capture ---------------- */
.signup{ background:var(--ink); color:var(--paper); }
.signup__in{ display:grid; gap:clamp(1.25rem,3vw,2.5rem);
  padding-block:clamp(2rem,5vw,3.25rem); grid-template-columns:minmax(0,1fr);
  align-items:center; }
@media (min-width:860px){ .signup__in{ grid-template-columns:1.05fr 1fr; } }
.signup h2{ color:var(--paper); font-size:clamp(1.6rem,4vw,2.5rem); }
.signup p{ color:oklch(0.84 0 0); margin-top:.7rem; max-width:44ch; font-size:1rem; }
.signup__form{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; }
.signup input{ flex:1 1 15rem; min-width:0; font:inherit; font-size:1rem;
  padding:.8rem .9rem; background:var(--paper); color:var(--ink);
  border:2px solid var(--paper); border-radius:0; }
.signup input::placeholder{ color:oklch(0.45 0 0); }
.signup button{ font-family:var(--ff-display); font-weight:900; font-size:1rem;
  letter-spacing:.01em; padding:.8rem 1.5rem; background:var(--red); color:var(--paper);
  border:2px solid var(--red); cursor:pointer; border-radius:0;
  transition:background .18s var(--ease), border-color .18s var(--ease); }
.signup button:hover{ background:var(--paper); border-color:var(--paper); color:var(--ink); }
.signup__fine{ font-size:.75rem; color:oklch(0.70 0 0); margin-top:.7rem; }
.signup__proof{ font-size:.8125rem; color:oklch(0.84 0 0); margin-top:.6rem;
  font-variant-numeric:tabular-nums; }
.sponsor{ border:1px solid oklch(0.35 0 0); padding:.9rem 1rem; }
.sponsor__lbl{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:oklch(0.70 0 0); }
.sponsor__slot{ margin-top:.55rem; min-height:60px; display:grid; place-items:center;
  border:1px dashed oklch(0.42 0 0); color:oklch(0.70 0 0); font-size:.75rem;
  text-align:center; padding:.5rem; }

/* inline mid-article capture: the highest-converting slot on a news page */
.inline-cap{ border-top:3px double var(--ink); border-bottom:3px double var(--ink);
  padding-block:1.15rem; margin-block:1.75rem; }
.inline-cap h2, .inline-cap h3{ font-size:1.1875rem; font-weight:900;
  letter-spacing:-0.014em; }
.inline-cap p{ font-size:.9375rem; color:var(--ink-soft); margin-top:.3rem; max-width:48ch; }
.inline-cap form{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.85rem; }
.inline-cap input{ flex:1 1 13rem; min-width:0; font:inherit; font-size:1rem;
  padding:.65rem .8rem; border:1px solid var(--ink); background:var(--paper); }
.inline-cap button{ font-family:var(--ff-display); font-weight:900; font-size:.9375rem;
  padding:.65rem 1.2rem; background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  cursor:pointer; transition:background .18s var(--ease); }
.inline-cap button:hover{ background:var(--red); border-color:var(--red); }

/* ---------------- footer ---------------- */
.foot{ border-top:1px solid var(--rule); padding-block:2rem 3rem; font-size:.875rem;
  color:var(--ink-soft); }
.foot__grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.foot h3{ font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--ink); margin-bottom:.5rem; font-family:var(--ff-display); }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li{ padding-block:.22rem; }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--red); text-decoration:underline; }
.foot__base{ margin-top:2rem; padding-top:1rem; border-top:1px solid var(--rule-hair);
  font-size:.75rem; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; }

/* ============================================================
   BUSINESS DIRECTORY
   A newspaper's directory is its classifieds page. Ruled rows,
   not a grid of identical cards.
   ============================================================ */

.page-head{ padding-block:clamp(1.5rem,4vw,2.5rem) 1.25rem;
  border-bottom:3px double var(--ink); }
.page-head h1{ font-size:clamp(1.9rem,5.5vw,3.25rem); }
.page-head p{ font-size:clamp(1rem,2vw,1.1875rem); color:var(--ink-soft);
  margin-top:.6rem; max-width:60ch; }
.page-head__meta{ font-size:.8125rem; color:var(--ink-faint); margin-top:.75rem;
  font-variant-numeric:tabular-nums; }

.dirbar{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  padding-block:1rem; border-bottom:1px solid var(--rule); }
.dirsearch{ display:flex; flex:1 1 18rem; min-width:0; }
.dirsearch input{ flex:1; min-width:0; font:inherit; font-size:1rem; padding:.6rem .75rem;
  border:1px solid var(--ink); background:var(--paper); }
.dirsearch button{ font-family:var(--ff-display); font-weight:700; font-size:.9375rem;
  padding:.6rem 1.1rem; background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); cursor:pointer; }
.dirsearch button:hover{ background:var(--red); border-color:var(--red); }
.dirbar__cta{ font-family:var(--ff-display); font-weight:700; font-size:.875rem;
  text-decoration:none; border:1px solid var(--ink); padding:.6rem 1rem;
  white-space:nowrap; transition:background .18s var(--ease), color .18s var(--ease); }
.dirbar__cta:hover{ background:var(--ink); color:var(--paper); }

.cats{ display:flex; flex-wrap:wrap; gap:.4rem; padding-block:1rem;
  border-bottom:1px solid var(--rule-hair); }
.cat{ font-family:var(--ff-display); font-weight:700; font-size:.8125rem;
  text-decoration:none; padding:.34rem .7rem; border:1px solid var(--rule);
  color:var(--ink-soft); white-space:nowrap;
  transition:border-color .16s var(--ease), color .16s var(--ease); }
.cat:hover{ border-color:var(--ink); color:var(--ink); }
.cat[aria-current]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.cat .n{ color:var(--ink-faint); font-weight:500; margin-inline-start:.3em;
  font-variant-numeric:tabular-nums; }
.cat[aria-current] .n{ color:oklch(0.75 0 0); }

/* a listing row */
.listings{ list-style:none; margin:0; padding:0; }
.listing{ display:grid; gap:.35rem 1.25rem; padding-block:1.15rem;
  border-bottom:1px solid var(--rule-hair); grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){
  .listing{ grid-template-columns:minmax(0,1fr) 15rem; align-items:start; }
}
.listing:last-child{ border-bottom:0; }
.listing__name{ font-family:var(--ff-display); font-weight:900; font-size:1.25rem;
  letter-spacing:-0.014em; }
.listing__name a{ text-decoration:none; }
.listing__name a:hover{ color:var(--red); text-decoration:underline;
  text-underline-offset:3px; }
.listing__cat{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); font-family:var(--ff-display); font-weight:700; }
.listing__desc{ font-size:.9375rem; color:var(--ink-soft); margin-top:.3rem;
  max-width:58ch; }
.listing__facts{ font-size:.875rem; color:var(--ink-soft); display:grid; gap:.2rem;
  font-variant-numeric:tabular-nums; }
.listing__facts a{ text-decoration:none; border-bottom:1px solid var(--rule); }
.listing__facts a:hover{ color:var(--red); border-color:var(--red); }
.listing__tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }
.tag{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--ff-display); font-weight:700; padding:.16rem .45rem;
  border:1px solid var(--rule); color:var(--ink-soft); }
.tag--kosher{ border-color:var(--green); color:var(--green); }
.tag--closed{ border-color:var(--red); color:var(--red); }

/* the paid tier. Marked in words, not by colour alone. */
.listing--featured{ background:var(--wash); border:1px solid var(--ink);
  padding:1.15rem; margin-block:1rem; }
.listing--featured .listing__flag{ font-size:.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); font-family:var(--ff-display);
  font-weight:700; display:block; margin-bottom:.4rem; }

.dirnote{ background:var(--wash); border:1px solid var(--rule-hair);
  padding:1.1rem 1.25rem; margin-block:1.75rem; }
.dirnote h2{ font-size:1.125rem; }
.dirnote p{ font-size:.9375rem; color:var(--ink-soft); margin-top:.4rem; max-width:62ch; }

/* ---------------- forms ---------------- */
.form{ display:grid; gap:1.1rem; max-width:44rem; margin-top:1.5rem; }
.form__row{ display:grid; gap:1.1rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:620px){ .form__row--2{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:.3rem; }
.field label{ font-family:var(--ff-display); font-weight:700; font-size:.9375rem; }
.field .hint{ font-size:.8125rem; color:var(--ink-faint); }
.field input, .field select, .field textarea{
  font:inherit; font-size:1rem; padding:.7rem .8rem; border:1px solid var(--ink);
  background:var(--paper); color:var(--ink); border-radius:0; width:100%;
}
.field textarea{ min-height:7rem; resize:vertical; line-height:1.55; }
.field input:invalid:not(:placeholder-shown){ border-color:var(--red); }
.req{ color:var(--red); }
.checks{ display:grid; gap:.5rem; }
.check{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9375rem; }
.check input{ width:auto; margin-top:.28rem; accent-color:var(--red); }
.form__submit{ font-family:var(--ff-display); font-weight:900; font-size:1.0625rem;
  padding:.85rem 1.75rem; background:var(--ink); color:var(--paper);
  border:2px solid var(--ink); cursor:pointer; justify-self:start;
  transition:background .18s var(--ease), border-color .18s var(--ease); }
.form__submit:hover{ background:var(--red); border-color:var(--red); }
.form__fine{ font-size:.8125rem; color:var(--ink-faint); max-width:56ch; }
.honey{ position:absolute; left:-9999px; }

.notice{ border:1px solid var(--ink); padding:1rem 1.15rem; margin-block:1.25rem;
  font-size:.9375rem; }
.notice--ok{ border-color:var(--green); color:var(--green); }
.notice--bad{ border-color:var(--red); color:var(--red); }

/* ---------------- pricing table for listings ---------------- */
.tiers{ display:grid; gap:1.25rem; margin-top:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tier{ border:1px solid var(--rule); padding:1.15rem; display:grid;
  gap:.55rem; align-content:start; }
.tier--pick{ border:2px solid var(--ink); }
.tier h3{ font-size:1.25rem; }
.tier .price{ font-family:var(--ff-display); font-weight:900;
  font-size:2rem; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.tier .price small{ font-size:.5em; font-weight:500; color:var(--ink-soft);
  letter-spacing:0; }
.tier ul{ list-style:none; margin:0; padding:0; font-size:.9375rem;
  color:var(--ink-soft); display:grid; gap:.35rem; }
.tier li{ display:grid; grid-template-columns:1.1rem 1fr; gap:.4rem; }
.tier li::before{ content:"+"; color:var(--green); font-weight:700; }
.tier li.no::before{ content:"-"; color:var(--ink-faint); }
.tier__flag{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--ff-display); font-weight:700; color:var(--red); }

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion: no-preference){
  .masthead .wordmark, .masthead__sub, .ear{ animation:settle .62s var(--ease) both; }
  .masthead__sub{ animation-delay:.07s; }
  .ear{ animation-delay:.13s; }
  @keyframes settle{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } }
}