/* Allen Woods & Associates — shared stylesheet
   Palette sampled from the live Webflow site (allenwoods.webflow.shared.css :root). */

:root {
  --black: #000;
  --ink: #333;
  --slate: #465356;
  --slate-2: #464d56;
  --dim: #667073;
  --grey: #8e9699;
  --smoke: #f2f5f7;
  --line: #d6d6d6;
  --accent: #4ac2c9;
  --overlay: rgb(0 0 0 / 40%);
  --overlay-strong: rgb(0 0 0 / 55%);
  /* Application heroes only: their backdrops are cut-out subjects on white, so
     they need a heavier scrim than the industry heroes' dark photographs to
     keep white headline text off a near-white ground. See .hero-app-*. */
  --overlay-app: rgb(0 0 0 / 62%);
  --danger: #b3261e;
  --success: #1e7a46;

  --header-h: 80px;
  --wrap: 1170px;
  --font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  padding-top: var(--header-h);
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

a { color: var(--slate); }

h1, h2, h3 { font-weight: 500; line-height: 1.25; }

[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- header / nav ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  padding: 0 max(1.25rem, calc((100% - var(--wrap)) / 2));
  background: var(--black);
}

.logo { display: flex; align-items: center; }
.logo img { height: 40px; width: auto; }

.site-nav { display: flex; align-items: center; gap: .25rem; }

.site-nav a,
.dropdown > button {
  display: inline-block;
  padding: 1rem .95rem;
  border: 0;
  background: none;
  color: var(--smoke);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.site-nav a:hover,
.dropdown > button:hover { color: var(--accent); }

.dropdown { position: relative; }

.dropdown > button::after {
  content: "";
  display: inline-block;
  margin-left: .5em;
  translate: 0 .2em;
  border: .3em solid transparent;
  border-top-color: currentcolor;
}

.dropdown > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
  min-width: 250px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--black);
}

.dropdown.open > ul { display: block; }

.dropdown > ul a {
  display: block;
  padding: .8rem 1.25rem;
  font-size: .875rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  padding: .6rem;
  border: 0;
  background: none;
  color: var(--smoke);
  cursor: pointer;
}

.nav-toggle svg { display: block; }

@media (max-width: 767px) {
  :root { --header-h: 64px; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 0 1rem;
    background: var(--black);
    border-top: 1px solid rgb(255 255 255 / 15%);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }

  .site-header.nav-open .site-nav { display: flex; }

  .site-nav a,
  .dropdown > button { width: 100%; padding: .9rem 1.5rem; text-align: left; }

  .dropdown > ul { position: static; min-width: 0; background: rgb(255 255 255 / 6%); }
  .dropdown > ul a { padding-left: 2.5rem; }
}

/* ---------- hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 4rem 1.5rem;
  background-image: linear-gradient(var(--overlay), var(--overlay)),
    url("/images/5a626d5dafa44a0001e90938_allenwoods.png");
  background-position: 0 0, 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
  color: var(--smoke);
  text-align: center;
}

/* Catalog / industrial-cleaning hero uses its own backdrop, as on the live site. */
.hero-cleaning {
  background-image: linear-gradient(var(--overlay), var(--overlay)),
    url("/images/5c55d473c3ddd3e6b4e64310_AdobeStock_154349469.png");
}

.hero h1 {
  margin: 0 0 .4rem;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  text-transform: uppercase;
}

.hero .subhead {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .hero { min-height: 260px; padding: 2.5rem 1.25rem; }
}

/* ---------- section headline bar ---------- */

.section-bar {
  margin: 0;
  padding: .8rem 1rem;
  background: var(--black);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- capability columns ---------- */

.capabilities { padding: 3rem 0; }

.column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem 1.5rem;
}

.column-grid img { display: block; height: 100px; width: auto; margin: 0 auto; }

.column-grid h2 {
  margin: 1rem 0 .5rem;
  color: var(--slate);
  font-size: 1.25rem;
  text-align: center;
}

.column-grid p { margin: 0; color: var(--ink); }

/* ---------- industries tiles ---------- */

.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); }

.industry-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 1.5rem;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--smoke);
  text-align: center;
  text-decoration: none;
}

.industry-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay);
  transition: background .2s ease;
}

.industry-tile:hover::before,
.industry-tile:focus-visible::before { background: var(--overlay-strong); }

.industry-tile h2 {
  position: relative;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
}

.tile-cleaning { background-image: url("/images/5c55d473c3ddd3e6b4e64310_AdobeStock_154349469.png"); }
.tile-pcb { background-image: url("/images/5c55d48b64242a4bfeda40bb_AdobeStock_1917607.png"); }
.tile-railroad { background-image: url("/images/5c55d4da64242a7ae6da40dc_AdobeStock_132432596.png"); }
.tile-inks { background-image: url("/images/5c55d49e64242a4b8fda40c1_AdobeStock_198374180.png"); }

@media (max-width: 767px) {
  .industry-grid { grid-template-columns: 1fr; }
  .industry-tile { min-height: 250px; }
  .industry-tile h2 { font-size: 1.25rem; }

  /* No mobile image swap. The four `500_F_*` files these tiles used to load
     below 768px are Adobe Stock COMPS: 500px wide, stamped with a diagonal
     "AdobeStock" watermark and the asset id. Live's own cascade only reaches for
     them between 480 and 991px — at 479 and below, and at 992 and up, it serves
     the licensed full-size photographs, which is what a phone actually gets.
     Loading the comps at 767 and down put a watermark on the home page at the
     one viewport most visitors use. Same ruling as the two Getty comps already
     removed from the heroes. */
}

/* ---------- industry landing pages ---------- */

/* Each industry hero keeps its own live backdrop. Webflow swaps the
   industrial-cleaning image at its "tiny" breakpoint; we do the same at 767px
   so both verification viewports (390 / 1440) match the live page. */
.hero-ic {
  background-image: linear-gradient(var(--overlay), var(--overlay)),
    url("/images/5c55e2a94ed7960a24efe80d_1200x800.png");
}

/* John-approved deviation from live: the live PCB hero
   (`5a626d5dafa44a0001e9090a_PCB Hero Image.png`) is an unlicensed Getty comp
   with a visible watermark, so it is replaced by the site's own Printed Circuit
   Board tile image — same subject (a bare board close-up), already licensed,
   no watermark. Same ruling as the permanent-inks hero below. */
.hero-pcb {
  background-image: linear-gradient(var(--overlay), var(--overlay)),
    url("/images/5c55d48b64242a4bfeda40bb_AdobeStock_1917607.png");
}

.hero-railroad {
  background-image: linear-gradient(var(--overlay), var(--overlay)),
    url("/images/5a626d5dafa44a0001e90946_IMG_1657.JPG");
}

/* John-approved deviation from live: the live permanent-inks hero
   (`5a626d5dafa44a0001e90875_permanent ink.jpg`) is an unlicensed Getty comp with
   a visible watermark, so it is replaced by the site's own Permanent Inks tile
   image — same subject (a press inking up), already licensed, no watermark. */
.hero-inks {
  background-image: linear-gradient(var(--overlay), var(--overlay)),
    url("/images/5c55d49e64242a4b8fda40c1_AdobeStock_198374180.png");
}

@media (max-width: 767px) {
  .hero-ic {
    background-image: linear-gradient(var(--overlay-strong), var(--overlay-strong)),
      url("/images/5c55d473c3ddd3e6b4e64310_AdobeStock_154349469.png");
  }
}

/* ---------- application landing pages ---------- */

/* The live application pages are unfinished placeholders with no hero at all,
   so each page reuses the image the industrial-cleaning "Applications" tile
   already uses for that application (see .pick-* below): same subject, already
   mirrored, site-owned, and it makes the tile and the page it opens read as one
   thing. No Getty comps -- two watermarked ones were removed for licensing.
   These are cut-out subjects on white, not dark photographs like the industry
   heroes, so they take --overlay-app rather than --overlay: at 40% the white
   ground sits behind the headline at 2.85:1, under the 3:1 large-text floor. */
.hero-app-aircraft { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e90939_aircraft.png"); }
.hero-app-diesel-engine { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e908a9_diesel.png"); }
.hero-app-electric { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e908b0_electric.png"); }
.hero-app-locomotive { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e9087a_rail%20bearing.png"); }
.hero-app-military { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e9086e_military.png"); }
.hero-app-transmission { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e90914_transmission.png"); }
.hero-app-wind-turbine { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e90936_turbine.png"); }

/* Below 768px the hero band is at most 767px wide, so the 1500px original is
   pure waste — 226-555KB each. Webflow generated an 800px rendition of every one
   of these; serving it costs 48-95KB and still covers the widest phone in the
   band without upscaling. (Background images take no srcset, so the swap has to
   be a media query — same shape as the watermark overrides above.) */
@media (max-width: 767px) {
  .hero-app-aircraft { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e90939_aircraft-p-800.png"); }
  .hero-app-diesel-engine { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e908a9_diesel-p-800.png"); }
  .hero-app-electric { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e908b0_electric-p-800.png"); }
  .hero-app-locomotive { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e9087a_rail%20bearing-p-800.png"); }
  .hero-app-military { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e9086e_military-p-800.png"); }
  .hero-app-transmission { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e90914_transmission-p-800.png"); }
  .hero-app-wind-turbine { background-image: linear-gradient(var(--overlay-app), var(--overlay-app)), url("/images/5a626d5dafa44a0001e90936_turbine-p-800.png"); }
}

/* These are square 1500x1500 subject photos, not wide plates: at desktop the
   hero band is ~3.5:1, so anchor the crop on the upper-middle of the frame
   where the subject sits rather than dead centre. */
[class*="hero-app-"] { background-position: 0 0, 50% 35%; }

/* Manufacturer logo row. The live page stacks these one-per-row because the
   section carries `display: inline`; the authored 3-across layout is restored
   here — same nine logos, same order. */
.partners { padding: 2.5rem 0 3rem; background: var(--smoke); }

.partners h2 {
  margin: 0 0 2.25rem;
  color: var(--slate-2);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 500;
  text-align: center;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.5rem;
  align-items: center;
}

.partner-grid img { display: block; max-height: 64px; width: auto; margin: 0 auto; }

@media (max-width: 767px) {
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .partner-grid img { max-height: 48px; }
}

/* Picker tiles: a product photo with its label beneath, used for the equipment
   and chemistry category links and for the application tiles. */
.tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1.5rem 0 2.25rem;
}

.tile-row-4 { grid-template-columns: repeat(4, 1fr); }

.pick-tile {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 250px;
  padding: 0 .5rem .5rem;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: auto calc(100% - 2.25rem);
  color: var(--slate-2);
  font-size: 1.15rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}

a.pick-tile:hover,
a.pick-tile:focus-visible { color: var(--accent); }

/* Application tiles sit a little shorter, as on the live page. */
.tile-row-4 .pick-tile { min-height: 200px; }

@media (max-width: 767px) {
  .tile-row,
  .tile-row-4 { grid-template-columns: repeat(2, 1fr); gap: .75rem; }

  .pick-tile,
  .tile-row-4 .pick-tile { min-height: 175px; font-size: 1rem; }
}

/* Equipment + chemistry tile backdrops (mobile variants mirror the live swap). */
.pick-ultrasonic { background-image: url("/images/5a626d5dafa44a0001e90895_pro.png"); }
.pick-heavy-duty { background-image: url("/images/5a626d5dafa44a0001e908cb_viking.png"); }
.pick-specialty { background-image: url("/images/5a626d5dafa44a0001e90959_solvent%20recylcer.png"); }
.pick-detergents { background-image: url("/images/5cb5d4546cf2f5a4184c3c1c_500x500.png"); }
.pick-additives { background-image: url("/images/5a626d5dafa44a0001e90951_foamfree.png"); }
.pick-facility { background-image: url("/images/5a626d5dafa44a0001e908d6_floorclean.png"); }

@media (max-width: 767px) {
  .pick-ultrasonic { background-image: url("/images/5a626d5dafa44a0001e908a6_pro-home.png"); }
  .pick-heavy-duty { background-image: url("/images/5a626d5dafa44a0001e908be_viking-home.png"); }
  .pick-specialty { background-image: url("/images/5a626d5dafa44a0001e90877_pmw-home.png"); }
  .pick-detergents {
    background-image: url("/images/5a626d5dafa44a0001e908bb_7000_9000%20Group%201_preview.png");
  }
}

/* Application tile backdrops — one image per tile at every breakpoint. */
.pick-aircraft { background-image: url("/images/5a626d5dafa44a0001e90939_aircraft.png"); }
.pick-turbine { background-image: url("/images/5a626d5dafa44a0001e90936_turbine.png"); }
.pick-transmission { background-image: url("/images/5a626d5dafa44a0001e90914_transmission.png"); }
.pick-engine { background-image: url("/images/5a626d5dafa44a0001e908a9_diesel.png"); }
.pick-locomotive { background-image: url("/images/5a626d5dafa44a0001e9087a_rail%20bearing.png"); }
.pick-military { background-image: url("/images/5a626d5dafa44a0001e9086e_military.png"); }
.pick-electric { background-image: url("/images/5a626d5dafa44a0001e908b0_electric.png"); }
.pick-app-specialty { background-image: url("/images/5a626d5dafa44a0001e908a8_specialty.png"); }

/* Two-up below 768px puts each of these tiles at roughly 165px, so the 1500px
   original is ~10x more pixels than the tile can show; the 500px rendition
   covers it on a 3x phone. Eight tiles, 2.7MB -> 251KB. */
@media (max-width: 767px) {
  .pick-aircraft { background-image: url("/images/5a626d5dafa44a0001e90939_aircraft-p-500.png"); }
  .pick-turbine { background-image: url("/images/5a626d5dafa44a0001e90936_turbine-p-500.png"); }
  .pick-transmission { background-image: url("/images/5a626d5dafa44a0001e90914_transmission-p-500.png"); }
  .pick-engine { background-image: url("/images/5a626d5dafa44a0001e908a9_diesel-p-500.png"); }
  .pick-locomotive { background-image: url("/images/5a626d5dafa44a0001e9087a_rail%20bearing-p-500.png"); }
  .pick-military { background-image: url("/images/5a626d5dafa44a0001e9086e_military-p-500.png"); }
  .pick-electric { background-image: url("/images/5a626d5dafa44a0001e908b0_electric-p-500.png"); }
  .pick-app-specialty { background-image: url("/images/5a626d5dafa44a0001e908a8_specialty-p-500.png"); }
}

/* Headline-only bands: the three orphaned industry pages are a hero, a stack of
   section headings with no body copy yet, and the contact block — as on live.
   The last band pads below itself too, so its bar cannot fuse with the black
   "Contact Us" bar that follows into one undifferentiated block. */
.band { padding-top: 1.25rem; }
.band:last-of-type { padding-bottom: 1.25rem; }

/* ---------- product card grid (used by the catalog + industry pages) ---------- */

/* Column counts are declared per band rather than left to auto-fill, which was
   picking them from the card min-width and landing on 2-up anywhere between 768
   and ~1130px. Live's Webflow w-col-4 lists are 3-up from 768px straight up; we
   match that from 992px (Webflow's own tablet/desktop boundary) and hold 2-up
   through tablet portrait, where 3-up measures 224px per card: the product photo
   — the thing a visitor actually recognises a washer by — drops to a thumbnail
   and the description runs 13 ragged lines. A 6-item series list still renders
   as two clean rows of three at desktop, as on live. */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: #fff;
  color: inherit;
  text-decoration: none;
}

/* Catalog sections: a full-bleed heading bar, then the grid inside the wrap.
   Parts washers stack three series grids under one heading, as on the live page. */
.catalog-section { padding-bottom: 3rem; }
.catalog-section .section-bar { margin-bottom: 2.5rem; }

/* The header is position:fixed, so anchor landings (section deep-links from the
   industrial-cleaning page, and #product-* hits from search) must clear it. */
.catalog-section .section-bar,
.product-card { scroll-margin-top: calc(var(--header-h) + 1rem); }
.catalog-section .product-grid + .product-grid { margin-top: 1.5rem; }

/* The fixed box exists so headings line up across a row; the images themselves
   are a mix of 4:3 plates and 1:1 cut-outs. */
.product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 1rem; }

/* Single column below 768px, so there is no row to line up with and the box only
   letterboxes the photo — live renders these at natural height and the product
   comes out noticeably larger. Match that. */
@media (max-width: 767px) {
  .product-card img { aspect-ratio: auto; padding: 1.25rem 1rem; }
}
.product-card h3 { margin: 0 0 .5rem; color: var(--slate); font-size: 1.05rem; }
.product-card .product-body { padding: 0 1rem 1.25rem; }
.product-card p { margin: 0; font-size: .95rem; }

/* ---------- contact ---------- */

.contact { padding-bottom: 1rem; }

.contact-inner {
  display: grid;
  /* min() not a bare 300px: at a 320px viewport the 1.5rem gutters leave 272px
     of content box, so a hard 300px track hangs 4px off the right edge and every
     page on the site scrolls sideways. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2.5rem;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}

.contact h3 {
  margin: 0 0 1.25rem;
  color: var(--slate-2);
  font-size: 1.25rem;
  text-transform: capitalize;
}

.contact-form label {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--dim);
  font-size: 1.05rem;
  font-weight: 400;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: .4rem;
  padding: .7rem .75rem;
  border: 2px solid var(--dim);
  border-radius: 0;
  background: #fff;
  color: var(--dim);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
}

.contact-form textarea { min-height: 130px; resize: vertical; }

.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--black); outline: none; }

.contact-form button {
  /* Same reason as .contact-inner above: a hard 300px minimum is wider than the
     column at the 320px floor. */
  min-width: min(100%, 300px);
  max-width: 100%;
  min-height: 50px;
  padding: .75rem 1.5rem;
  border: 0;
  background: var(--black);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  text-transform: capitalize;
  cursor: pointer;
  transition: background .2s ease;
}

.contact-form button:hover { background: var(--slate); }
.contact-form button[disabled] { opacity: .6; cursor: default; }

.form-status { min-height: 1.5em; margin: .75rem 0 0; color: var(--slate); font-size: .95rem; }
.form-status.is-error { color: var(--danger); }
.form-status.is-success { color: var(--success); }

/* honeypot — must stay off-screen but focusable-free */
.hp { position: absolute; left: -9999px; }

.contact address {
  color: var(--dim);
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 300;
  line-height: 2;
}

.contact address a { color: inherit; text-decoration: none; }
.contact address a:hover { text-decoration: underline; }

/* ---------- generic page content (inner pages) ---------- */

.page-section { padding: 2.5rem 0; }
.page-section h2 { color: var(--slate); font-size: 1.5rem; }
.page-intro { max-width: 70ch; margin: 0 0 2rem; }

/* ---------- search ---------- */

/* The live search page is a bare container -- no hero band -- so this is a
   plain content block sitting directly under the fixed header. */
.search-page { padding: 2.5rem 0 3rem; }

.search-page h1 {
  margin: 0 0 1.5rem;
  color: var(--slate);
  font-size: clamp(1.6rem, 4vw, 2rem);
  text-transform: uppercase;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  max-width: 640px;
}

.search-form input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 50px;
  padding: .7rem .75rem;
  border: 2px solid var(--dim);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  /* iOS otherwise rounds the field and ignores the border. */
  -webkit-appearance: none;
  appearance: none;
}

.search-form input[type="search"]:focus { border-color: var(--black); outline: none; }

.search-form button {
  min-height: 50px;
  padding: .75rem 1.75rem;
  border: 0;
  background: var(--black);
  color: #fff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  cursor: pointer;
  transition: background .2s ease;
}

.search-form button:hover { background: var(--slate); }

.search-status { min-height: 1.5em; margin: 1.25rem 0 0; color: var(--dim); font-size: .95rem; }

.search-results {
  max-width: 640px;
  margin: .75rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

/* No rule above an empty list, so the zero-result state is not a stray hairline. */
.search-results:empty { border-top: 0; }

.search-results li { border-bottom: 1px solid var(--line); }

.search-results a {
  display: block;
  padding: .85rem .5rem;
  color: var(--slate);
  font-size: 1.05rem;
  text-decoration: none;
}

.search-results a:hover { background: var(--smoke); text-decoration: underline; }

/* ---------- footer ---------- */

.site-footer {
  margin-top: auto;
  padding: 1.5rem;
  background: var(--black);
  color: var(--smoke);
  font-size: .9rem;
  text-align: center;
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--smoke); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---------- 404 ---------- */

.notfound { padding: 4rem 0 5rem; text-align: center; }
.notfound h1 { margin: 0 0 1rem; color: var(--slate); font-size: 2rem; }
.notfound p { margin: 0 auto; max-width: 50ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}