/* ============================================================
   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; }

/* Filled ad creative. Sample advertisers so the slots read as a real paper
   rather than empty grey boxes. Every one carries a SAMPLE flag: these are
   placeholders on a live site and must never look like a real endorsement. */
.ad--filled{ background:var(--paper); border:1px solid var(--ink); position:relative;
  padding:1.1rem 1rem; display:grid; place-items:center; text-align:center; }
.ad--filled .flag{ position:absolute; top:.35rem; right:.45rem; font-size:.625rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  font-family:var(--ff-text); }
.ad--filled .biz{ font-family:var(--ff-display); font-weight:900;
  font-size:clamp(1.25rem,3.4vw,1.75rem); letter-spacing:-0.02em; line-height:1.05;
  color:var(--ink); }
.ad--filled .line{ font-size:.9375rem; color:var(--ink-soft); margin-top:.35rem;
  max-width:34ch; }
.ad--filled .tel{ font-family:var(--ff-display); font-weight:700; font-size:.875rem;
  color:var(--red); margin-top:.5rem; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; }
.ad-mpu.ad--filled, .ad-half.ad--filled{ align-content:center; }

/* ---------------- 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; } }

/* Business page. Somebody who opens a listing on a phone wants the phone
   number, so the details panel comes first in the stack and the ad goes last.
   On desktop both belong in the right rail, which is what the row/column
   assignments below restore. */
.sheet--biz{ grid-template-areas:"facts" "body" "ad"; }
.sheet--biz .rail--facts{ grid-area:facts; }
.sheet--biz .sheet__body{ grid-area:body; }
.sheet--biz .rail--ad{ grid-area:ad; }
@media (min-width:1000px){
  .sheet--biz{ grid-template-areas:"body facts" "body ad"; align-content:start;
    grid-template-rows:auto 1fr; row-gap:1.5rem; }
}

/* ---------------- 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); }
/* On a narrow screen the heading and its link eat the row, and the rule comes
   out as a two-character stub. A rule that short is debris, so drop it. */
@media (max-width:640px){ .shead:has(a)::after{ display:none; } }
.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{ color:inherit; text-decoration:underline;
  text-decoration-color:var(--rule); text-decoration-thickness:1px;
  text-underline-offset:2px; }
.brieflist a:hover{ color:var(--red); text-decoration-color:currentColor;
  text-decoration-thickness: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; }
/* Every business name is a link to its own page, and the reader has to be able
   to tell that at rest. A bare bold headline reads as a label, so the rule
   sits underneath at low contrast and comes up red on hover. */
.listing__name a{ color:inherit; text-decoration:underline;
  text-decoration-color:var(--rule); text-decoration-thickness:1px;
  text-underline-offset:3px; }
.listing__name a:hover{ color:var(--red); text-decoration-color:currentColor;
  text-decoration-thickness:2px; }
.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; }

/* Three-column village table. The base .ztab rules assume two columns and
   right-align only the last one, which leaves the middle time column drifting
   under a much wider header. Times are numeric, so right-align both. */
.ztab--villages{ width:100%; }
.ztab--villages th:nth-child(1), .ztab--villages td:nth-child(1){ text-align:left; width:40%; }
.ztab--villages th:nth-child(2), .ztab--villages td:nth-child(2),
.ztab--villages th:nth-child(3), .ztab--villages td:nth-child(3){
  text-align:right; width:30%; font-variant-numeric:tabular-nums; }
.ztab--villages td:nth-child(2), .ztab--villages td:nth-child(3){
  font-family:var(--ff-display); font-weight:700; color:var(--ink); }

/* ---------------- 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); }
.field{ display:grid; gap:.3rem; align-content:start; }

/* Side-by-side fields must line up even when only one of them carries a hint.
   Without this the input boxes sit at different heights and the row looks
   broken. Subgrid puts label, input and hint on shared rows. */
@media (min-width:620px){
  .form__row--2{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; }
  .form__row--2 > .field{ grid-row:span 3; display:grid; grid-template-rows:subgrid; }
}
/* Fallback for engines without subgrid: reserve the hint line either way. */
@supports not (grid-template-rows: subgrid){
  @media (min-width:620px){
    .form__row--2 > .field{ grid-row:auto; grid-template-rows:none; }
    .form__row--2 > .field > .hint{ min-height:2.4em; }
  }
}
.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; } }
}