/* The Nancy Classifieds — Keel theme. Scope: body.theme-classifieds */
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Roboto+Slab:wght@400;700;900&family=Special+Elite&family=Courier+Prime:wght@400;700&display=swap");

body.theme-classifieds {
  --paper: #F3EBDD;
  --paper-2: #EADFCC;
  --ink: #1F2A44;
  --tomato: #E0482F;
  --rule: 2px solid var(--ink);
  --hair: 1px solid rgba(31,42,68,.35);
  --font-head: "Alfa Slab One", "Roboto Slab", Georgia, serif;
  --font-body: "Roboto Slab", Georgia, serif;
  --font-mono: "Courier Prime", "Special Elite", ui-monospace, monospace;
  --font-type: "Special Elite", "Courier Prime", monospace;
  --max: 72rem;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  /* riso grain */
  background-image: radial-gradient(rgba(31,42,68,.06) 1px, transparent 1px);
  background-size: 4px 4px;
}
body.theme-classifieds *, body.theme-classifieds *::before, body.theme-classifieds *::after { box-sizing: border-box; }
body.theme-classifieds a { color: var(--tomato); text-underline-offset: 3px; }
body.theme-classifieds a:hover { color: var(--ink); }
body.theme-classifieds :focus-visible { outline: 3px solid var(--tomato); outline-offset: 2px; }
body.theme-classifieds ::selection { background: var(--tomato); color: var(--paper); }

.theme-classifieds .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.theme-classifieds .skip-link:focus { left: 1rem; }

/* Masthead */
.theme-classifieds .masthead { max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem 0; text-align: center; }
.theme-classifieds .masthead__edition {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  font: 700 .78rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  border-top: var(--rule); border-bottom: var(--hair); padding: .35rem 0;
}
.theme-classifieds .masthead__dot { color: var(--tomato); }
.theme-classifieds .masthead__kicker { margin: .9rem 0 0; font: .85rem var(--font-type); letter-spacing: .05em; }
.theme-classifieds .masthead__title {
  display: block; font: 400 clamp(2.4rem, 8vw, 5.5rem)/1 var(--font-head);
  color: var(--ink); text-decoration: none; letter-spacing: -.01em; margin: .3rem 0;
  text-shadow: 3px 3px 0 var(--tomato); /* riso misregistration */
}
.theme-classifieds .masthead__title:hover { color: var(--ink); }
.theme-classifieds .masthead__motto { margin: 0 0 .75rem; font: italic 400 1.05rem var(--font-body); }
.theme-classifieds .masthead__nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  border-top: var(--rule); border-bottom: 4px double var(--ink);
}
.theme-classifieds .masthead__nav a {
  padding: .55rem 1.1rem; font: 700 .95rem var(--font-body); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink); text-decoration: none; border-right: var(--hair);
}
.theme-classifieds .masthead__nav a:last-child { border-right: 0; color: var(--tomato); }
.theme-classifieds .masthead__nav a:hover { background: var(--ink); color: var(--paper); }

/* Ticker */
.theme-classifieds .ticker { display: flex; align-items: stretch; max-width: var(--max); margin: .75rem auto 0; background: var(--ink); color: var(--paper); overflow: hidden; }
.theme-classifieds .ticker__label { flex: none; background: var(--tomato); padding: .45rem .8rem; font: 700 .8rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.theme-classifieds .ticker__track { overflow: hidden; flex: 1; }
.theme-classifieds .ticker__items { margin: 0; white-space: nowrap; display: inline-block; padding: .45rem 0; font: .88rem var(--font-mono); animation: classifieds-ticker 45s linear infinite; }
.theme-classifieds .ticker__items span { padding: 0 1.25rem; }
.theme-classifieds .ticker:hover .ticker__items { animation-play-state: paused; }
@keyframes classifieds-ticker { from { transform: translateX(30%); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .theme-classifieds .ticker__items { animation: none; white-space: normal; }
}

/* Page grid */
.theme-classifieds .page { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1.25rem 2.5rem; }
.theme-classifieds .page__columns { display: grid; grid-template-columns: minmax(0,1fr) 19rem; gap: 2rem; margin-top: 1.5rem; }
.theme-classifieds .page__aside { border-left: var(--hair); padding-left: 1.5rem; }
@media (max-width: 900px) {
  .theme-classifieds .page__columns { grid-template-columns: 1fr; }
  .theme-classifieds .page__aside { border-left: 0; padding-left: 0; border-top: var(--rule); padding-top: 1rem; }
}

/* Regions */
.theme-classifieds .keel-region--hero { border-bottom: var(--rule); padding-bottom: 1.25rem; text-align: center; }
.theme-classifieds .keel-region--hero .keel-block--heading { font: 400 clamp(2rem, 5vw, 3.4rem)/1.05 var(--font-head); margin: .25rem 0 .75rem; }
.theme-classifieds .keel-region--hero .rich-text { max-width: 44rem; margin: 0 auto; font-size: 1.15rem; }
.theme-classifieds .keel-region--main { column-gap: 2rem; }
.theme-classifieds .keel-region--aside > * + * { margin-top: 1rem; }
.theme-classifieds .keel-region--aside .rich-text {
  border: var(--rule); padding: .9rem 1rem; background: var(--paper-2);
  font-size: .95rem; box-shadow: 4px 4px 0 var(--ink);
}
.theme-classifieds .keel-region--aside .keel-block--heading { font: 400 1.2rem var(--font-head); text-transform: uppercase; border-bottom: var(--rule); padding-bottom: .25rem; }
.theme-classifieds .keel-region--cta {
  margin-top: 2.5rem; padding: 1.75rem 1.25rem; text-align: center;
  border: 3px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 4px; background: var(--paper-2);
}
.theme-classifieds .keel-region--cta:has(:empty):not(:has(.keel-block)) { display: none; }

/* Native parts */
.theme-classifieds .keel-block--heading { font-family: var(--font-head); font-weight: 400; line-height: 1.1; letter-spacing: .005em; color: var(--ink); }
.theme-classifieds h2.keel-block--heading { font-size: clamp(1.5rem, 3vw, 2.1rem); border-bottom: var(--rule); padding-bottom: .3rem; margin: 2rem 0 .8rem; }
.theme-classifieds h3.keel-block--heading { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.theme-classifieds .rich-text p { margin: 0 0 .9rem; }
.theme-classifieds .rich-text code,
.theme-classifieds .rich-text strong { font-family: var(--font-mono); font-weight: 700; }
.theme-classifieds .rich-text ul { padding-left: 1.2rem; }
.theme-classifieds .rich-text li::marker { content: "■  "; color: var(--tomato); font-size: .8em; }
.theme-classifieds .rich-text table { width: 100%; border-collapse: collapse; font: .95rem var(--font-mono); }
.theme-classifieds .rich-text th, .theme-classifieds .rich-text td { border-bottom: var(--hair); padding: .4rem .5rem; text-align: left; }
.theme-classifieds .rich-text th { border-bottom: var(--rule); text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }
.theme-classifieds .rich-text blockquote { border-left: 4px solid var(--tomato); margin: 1rem 0; padding: .25rem 1rem; font-style: italic; }

.theme-classifieds a.button {
  display: inline-block; padding: .7rem 1.4rem; margin: .4rem .3rem;
  font: 700 .95rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .1s, box-shadow .1s;
}
.theme-classifieds a.button--primary { background: var(--tomato); color: var(--paper); }
.theme-classifieds a.button--secondary, .theme-classifieds a.button--outline { background: var(--paper); color: var(--ink); }
.theme-classifieds a.button:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }

.theme-classifieds .keel-block--image img { max-width: 100%; height: auto; display: block; border: var(--rule); filter: sepia(.15) contrast(1.05); }
.theme-classifieds .keel-block--image figcaption { font: .82rem var(--font-type); margin-top: .35rem; }

/* Cards = individual classified ads */
.theme-classifieds .keel-cards { --cards-gap: 1rem; display: grid; gap: var(--cards-gap); }
.theme-classifieds .keel-cards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.theme-classifieds .keel-cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.theme-classifieds .keel-cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 767px) { .theme-classifieds .keel-cards { grid-template-columns: 1fr; } }
.theme-classifieds .keel-cards__card { border: 1.5px dashed var(--ink); padding: .9rem; background: var(--paper); }
.theme-classifieds .keel-cards__picture { width: 100%; height: auto; border: var(--hair); }
.theme-classifieds .keel-cards__title { font: 400 1.1rem/1.2 var(--font-head); text-transform: uppercase; margin: .5rem 0 .35rem; }
.theme-classifieds .keel-cards__link { color: var(--ink); }
.theme-classifieds .keel-cards__text { font: .92rem/1.5 var(--font-mono); margin: 0; white-space: pre-line; }

.theme-classifieds .columns { display: grid; gap: 1.5rem; }
.theme-classifieds .columns--1-1 { grid-template-columns: 1fr 1fr; }
.theme-classifieds .columns--2-1 { grid-template-columns: 2fr 1fr; }
.theme-classifieds .columns--1-2 { grid-template-columns: 1fr 2fr; }
.theme-classifieds .columns--1-1-1 { grid-template-columns: repeat(3, 1fr); }
.theme-classifieds .columns > .column + .column { border-left: var(--hair); padding-left: 1.5rem; }
@media (max-width: 767px) {
  .theme-classifieds .columns { grid-template-columns: 1fr; }
  .theme-classifieds .columns > .column + .column { border-left: 0; padding-left: 0; }
}

.theme-classifieds .keel-quote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-top: var(--rule); border-bottom: var(--rule); }
.theme-classifieds .keel-quote__text { font: 400 1.3rem/1.35 var(--font-head); margin: 0; }
.theme-classifieds .keel-quote__attribution { font: .85rem var(--font-mono); margin-top: .5rem; }
.theme-classifieds .keel-quote__name::before { content: "— "; }
.theme-classifieds .keel-quote__role::before { content: ", "; }

/* Forms: the "Place an ad" coupon */
.theme-classifieds .keel-form { border: 2px dashed var(--ink); padding: 1.25rem; background: var(--paper-2); }
.theme-classifieds .keel-field { margin-bottom: 1rem; border: 0; padding: 0; }
.theme-classifieds .keel-field__label { display: block; font: 700 .82rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; }
.theme-classifieds .keel-field__input { width: 100%; padding: .55rem .65rem; font: 1rem var(--font-mono); color: var(--ink); background: var(--paper); border: 0; border-bottom: 2px solid var(--ink); }
.theme-classifieds .keel-field__input:focus { outline: none; background: #fff8ec; border-bottom-color: var(--tomato); }
.theme-classifieds .keel-field__hint { font: .8rem var(--font-type); }
.theme-classifieds .keel-field__error, .theme-classifieds .keel-form__errors { color: var(--tomato); font: 700 .85rem var(--font-mono); }
.theme-classifieds .keel-field__required { color: var(--tomato); }
.theme-classifieds .keel-form__submit { padding: .7rem 1.4rem; font: 700 .95rem var(--font-mono); text-transform: uppercase; background: var(--tomato); color: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); cursor: pointer; }

/* rawHtml helpers for listing tables & stamps (classes used in pages.md) */
.theme-classifieds .listing { border: 1.5px dashed var(--ink); padding: .9rem 1rem; margin: 0 0 1rem; background: var(--paper); }
.theme-classifieds .listing__title { font: 400 1.05rem var(--font-head); text-transform: uppercase; margin: 0 0 .3rem; }
.theme-classifieds .listing__price { font: 700 1.35rem var(--font-mono); color: var(--tomato); }
.theme-classifieds .listing__meta { font: .85rem var(--font-mono); margin: .3rem 0 0; }
.theme-classifieds .stamp { display: inline-block; padding: .1rem .5rem; border: 2px solid currentColor; font: 700 .75rem var(--font-mono); text-transform: uppercase; letter-spacing: .1em; transform: rotate(-4deg); }
.theme-classifieds .stamp--good { color: var(--ink); }
.theme-classifieds .stamp--bad { color: var(--tomato); }
.theme-classifieds .listing--dead .listing__title,
.theme-classifieds .listing--dead .listing__price { text-decoration: line-through; opacity: .6; }

/* Footer */
.theme-classifieds .colophon { max-width: var(--max); margin: 0 auto; padding: 1.25rem; text-align: center; border-top: 4px double var(--ink); font: .88rem var(--font-mono); }
.theme-classifieds .colophon__joke { font: 400 1.05rem var(--font-head); margin: .5rem 0; }
.theme-classifieds .colophon__fine { font-size: .78rem; opacity: .8; }

@media print {
  .theme-classifieds .ticker, .theme-classifieds .skip-link { display: none; }
  body.theme-classifieds { background: #fff; }
}