/* Kirkpatrick Tool & Equipment Rental
   One stylesheet for the whole site.

   1. Colors, fonts, and sizes (change them here and they change everywhere)
   2. The basics
   3. The top of every page
   4. Buttons
   5. The home page
   6. Job cards
   7. Equipment and prices
   8. Renting and contact pages
   9. The bottom of every page
   10. Draft notes (removed before launch)
   11. Printing the price list
*/

/* 1. Colors, fonts, and sizes ------------------------------------------- */
:root {
  --page: #F6F3EA;        /* the off-white page */
  --paper: #FFFDF7;       /* cards and tables, a little lighter than the page */
  --ink: #23262A;         /* main text */
  --muted: #565B61;       /* quieter text */
  --rule: #DCD7C9;        /* thin lines */
  --red: #B71F27;         /* from the engine: the call buttons */
  --red-dark: #971820;
  --navy: #1E3F8F;        /* from the engine: links */
  --navy-dark: #152C66;
  --cream: #F7F4EA;
  --highlight: #FFF0BF;   /* a price you jumped to */
  --draft: #FFF6D6;
  --studio-green: #152221;  /* the footer credit: the studio's own green and gold */
  --studio-gold: #C8A35A;

  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1120px;         /* the widest the content gets */
  --gutter: 16px;         /* the space at the sides on a phone */
  --tap: 44px;            /* the smallest comfortable thing to tap */
  --radius: 7px;
}

/* 2. The basics --------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  padding-bottom: 62px;   /* room for the call bar on a phone */
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
}
h1, h2, h3 { font-family: var(--serif); line-height: 1.15; margin: 0; }
h2 { font-size: clamp(25px, 4.4vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 1em; }
a { color: var(--navy); }
a:hover { color: var(--navy-dark); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.vh {                     /* for screen readers only */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 10px 14px; z-index: 40; }
.skip:focus { left: 8px; }
.page-head { padding: 26px 0 8px; }
.page-head h1 { font-size: clamp(32px, 6vw, 46px); }
.page-head p { max-width: 44em; margin: 10px 0 0; color: var(--muted); font-size: 18px; }
section { scroll-margin-top: 12px; }
.band { padding: 34px 0; border-top: 1px solid var(--rule); }
.band-head { margin-bottom: 18px; }
.band-head p { margin: 6px 0 0; color: var(--muted); }

/* 3. The top of every page ---------------------------------------------- */
.stripe {                 /* the engine's red, white, and blue */
  height: 9px;
  background: linear-gradient(var(--red) 0 3px, var(--cream) 3px 6px, var(--navy) 6px);
}
.site-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2px 18px; max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter) 2px;
}
.brand { color: var(--ink); text-decoration: none; line-height: 1.1; padding: 6px 0; }
.brand b { display: block; font: 700 22px/1.1 var(--serif); letter-spacing: .03em; }
.brand span { font: 400 11.5px/1.2 var(--serif); letter-spacing: .1em; color: var(--muted); }
.top-call { font-weight: 700; color: var(--red); text-decoration: none; padding: 10px 0; white-space: nowrap; }
.main-nav { display: flex; flex: 1 1 100%; justify-content: space-between; gap: 2px 10px; order: 3; }
.main-nav a {
  display: block; padding: 10px 2px 7px; line-height: 24px;  /* a comfortable 44px to tap */
  color: var(--ink); font-size: 15.5px; font-weight: 600; text-decoration: none;
  border-bottom: 3px solid transparent;
}
.main-nav a:hover { color: var(--navy); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--red); }
.main-nav .wide, .main-nav .wide-only { display: none; }
.home .brand, .home .top-call { display: none; }
.home .site-top { padding-top: 2px; }

@media (min-width: 760px) {
  .main-nav { flex: 0 1 auto; order: 2; gap: 4px 26px; justify-content: center; }
  .main-nav a { font-size: 16px; }
  .main-nav .wide { display: inline; }
  .main-nav .wide-only { display: block; }
  .top-call { order: 3; }
  .home .site-top { justify-content: center; }
}

/* 4. Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: 11px 24px; border-radius: var(--radius); border: 2px solid transparent;
  font: 700 18px/1.2 var(--sans); text-decoration: none; text-align: center; cursor: pointer;
}
.btn-call { background: var(--red); color: #fff; }
.btn-call:hover { background: var(--red-dark); color: #fff; }
.btn-plain { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-plain:hover { background: var(--ink); color: #fff; }

/* 5. The home page ------------------------------------------------------ */
.hero { text-align: center; padding-top: 12px; }
.hero h1 { font-size: clamp(36px, 9vw, 66px); line-height: 1.02; letter-spacing: .03em; }
.hero .sub {
  margin: 6px 0 0; color: var(--muted);
  font: 400 clamp(13px, 2.6vw, 20px)/1.25 var(--serif); letter-spacing: .13em;
}
/* Not used right now: the option to show the shop's line here instead, in italics under the name. */
.hero .tagline { max-width: 34em; margin: 10px auto 0; padding: 0 var(--gutter); font: italic 400 clamp(16px, 2.4vw, 20px)/1.35 var(--serif); text-wrap: balance; }
.train { position: relative; max-width: var(--wrap); margin: 2px auto 0; }
.train svg { display: block; width: 100%; height: auto; }
.pause {
  position: absolute; right: 10px; top: 2px; width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid #BDB9AD; border-radius: 50%; background: rgba(246, 243, 234, .88);
  color: var(--ink); font-size: 11px; line-height: 1;
}
/* The day and night switch under the train (the shop asked to keep it, 2026-11-09). A little model of the engine rolls
   to the Day end or the Night end, and the big train follows. Its drawing and colors are in
   source/train/day-night-switch.svg. It shows only when JavaScript runs, since that's what makes it work. */
.daynight-wrap { display: flex; justify-content: center; margin: 4px 0 0; }
.daynight-wrap[hidden] { display: none; }
.daynight {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 8px;
  border: 0; border-radius: var(--radius); background: none; cursor: pointer;
  color: var(--muted); font: 400 15px/1.2 var(--sans);
}
.daynight .dn-day, .daynight[aria-pressed="true"] .dn-night { color: var(--ink); font-weight: 600; }
.daynight[aria-pressed="true"] .dn-day { color: var(--muted); font-weight: 400; }
/* "only light" stops a phone's forced dark mode from repainting the little scene. Without it, the moon turns dark. */
.daynight .dn-window {
  color-scheme: only light; position: relative; display: block; flex: none;
  width: 96px; height: 34px; border-radius: 17px; overflow: hidden;
}
.daynight .dn-window::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
}
.daynight:hover .dn-window::after { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(30, 63, 143, .5); }
.daynight svg { display: block; width: 100%; height: 100%; }
@media (min-width: 760px) {
  .daynight { font-size: 16px; }
  .daynight .dn-window { width: 130px; height: 46px; border-radius: 23px; }
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 4px var(--gutter) 0; }
.hero-actions .btn { flex: 1 1 260px; max-width: 340px; }
/* The shop's own line, in their exact words, in a softer italic. It stays on one line when it fits, and otherwise
   breaks after the comma ("Clinchcross" is the local name for the nearby railroad crossing). "balance" evens out a
   half that has to wrap. The earlier bold version was: font: 700 clamp(17px, 3vw, 25px)/1.3 var(--serif); */
.hero .lead { max-width: 46em; margin: 16px auto 4px; padding: 0 var(--gutter); font: italic 400 clamp(19px, 3.1vw, 28px)/1.32 var(--serif); }
.hero .lead span { display: inline-block; text-wrap: balance; }
/* The hours and the address stay in one piece each: side by side if they fit, one above the other if they don't. */
.hero .where { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.5em; margin: 0 auto 26px; padding: 0 var(--gutter); color: var(--muted); font-size: 16px; }
.hero .where span { text-wrap: balance; }
.more-link { margin: 18px 0 0; font-weight: 600; }

.gallery { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery img.wide { grid-column: span 2; aspect-ratio: 16 / 7; object-position: 50% 60%; }
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .gallery img.wide { aspect-ratio: 2.7 / 1; }  /* lines up with the 4 by 3 photo beside it */
}
.photo-pair { margin-top: 18px; grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.page-photo { margin: 14px 0 22px; }
.page-photo img { width: 100%; border-radius: var(--radius); }

.cat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cat { display: block; padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.cat:hover { border-color: var(--navy); color: var(--ink); }
.cat b { display: block; font: 700 18px/1.25 var(--serif); }
.cat span { display: block; margin-top: 3px; color: var(--muted); font-size: 15px; line-height: 1.4; }

.how-grid { display: grid; gap: 18px 26px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.how-grid h3 { margin-bottom: 6px; }
.how-grid p { margin: 0; color: var(--muted); }

.visit { display: grid; gap: 22px; align-items: center; }
.visit address { font-style: normal; margin-bottom: 10px; }
.visit .hours-line { margin-bottom: 16px; }
.visit .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.visit figure { margin: 0; }
.visit img { border-radius: var(--radius); border: 1px solid var(--rule); }
figcaption { margin-top: 6px; color: var(--muted); font-size: 14px; }
@media (min-width: 860px) { .visit.has-photo { grid-template-columns: 1fr 1.25fr; gap: 36px; } }

/* 6. Job cards ---------------------------------------------------------- */
.job-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); }
.job-tile {
  display: block; padding: 12px 15px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); color: var(--ink); text-decoration: none;
}
.job-tile:hover { border-color: var(--navy); color: var(--ink); }
.job-tile b { display: block; font: 700 17.5px/1.25 var(--serif); }
.job-tile span { display: block; margin-top: 2px; color: var(--muted); font-size: 14.5px; line-height: 1.35; }

.job-group { padding: 28px 0 8px; border-top: 1px solid var(--rule); }
.job-group > h2 { margin-bottom: 14px; }
.job-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.job {
  padding: 14px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  scroll-margin-top: 12px;
}
.job:target { background: var(--highlight); border-color: #C9B26A; }
.job h3 { margin-bottom: 4px; }
.job p { margin: 0 0 8px; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.job ul { margin: 0; padding: 0; list-style: none; }
.job li { padding: 3px 0; font-size: 15.5px; line-height: 1.4; }
.safety {
  margin: 0 0 18px; padding: 12px 16px; background: var(--paper);
  border: 1px solid var(--rule); border-left: 5px solid var(--red); border-radius: var(--radius);
}

/* 7. Equipment and prices ----------------------------------------------- */
.rules { margin: 14px 0 0; padding: 0; list-style: none; }
.rules li { padding: 3px 0; }
.price-tools { padding: 14px 0 4px; }
.price-tools label { display: block; margin-bottom: 5px; font-weight: 600; }
#price-filter {
  width: 100%; max-width: 520px; min-height: 50px; padding: 10px 14px;
  font: 400 17px/1.3 var(--sans); color: var(--ink); background: var(--paper);
  border: 2px solid var(--muted); border-radius: var(--radius);
}
#no-match { margin: 14px 0 0; font-weight: 600; }
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; padding: 0; list-style: none; }
.jump a {
  display: flex; align-items: center; min-height: 38px; padding: 4px 12px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 19px;
  color: var(--ink); font-size: 14.5px; text-decoration: none;
}
.jump a:hover { border-color: var(--navy); color: var(--navy); }
.print-btn { margin-top: 10px; }
.btn-small { min-height: var(--tap); padding: 6px 14px; font-size: 15px; font-weight: 600; }

.price-section { padding-top: 22px; scroll-margin-top: 10px; }
.price-section h2 { font-size: clamp(22px, 3.6vw, 27px); margin-bottom: 8px; }
.prices {
  width: 100%; border-collapse: collapse; background: var(--paper);
  border: 1px solid var(--rule); font-variant-numeric: tabular-nums;
}
.prices th, .prices td { padding: 9px 8px; border-top: 1px solid var(--rule); text-align: right; vertical-align: top; }
.prices thead th { border-top: 0; color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.prices th:first-child { text-align: left; }
.prices tbody th { font-weight: 600; line-height: 1.3; }
.prices td { width: 3.6em; white-space: nowrap; }
.prices td.span { white-space: normal; text-align: right; color: var(--muted); }
.prices .none { color: #A9A597; }
.prices small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; font-weight: 400; }
.prices tr { scroll-margin-top: 10px; }
.prices tr:target th, .prices tr:target td { background: var(--highlight); }
.table-note { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; }
.print-only { display: none; }

@media (min-width: 620px) {
  .prices th, .prices td { padding: 10px 12px; }
  .prices td { width: 5.6em; }
  .prices thead th { font-size: 13px; }
}
@media (min-width: 980px) {
  .price-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 42px; align-items: start; }
  .price-side { position: sticky; top: 12px; }
  .jump { display: block; margin: 0; }
  .jump a { min-height: 0; padding: 5px 0; background: none; border: 0; border-radius: 0; font-size: 15.5px; }
}

/* 8. Renting and contact pages ------------------------------------------ */
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.steps li { position: relative; padding: 14px 16px 14px 56px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px;
  background: var(--navy); color: #fff; border-radius: 50%;
  font: 700 15px/30px var(--sans); text-align: center;
}
.steps h3 { margin-bottom: 4px; }
.steps p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.terms { display: grid; gap: 22px 40px; }
.terms h3 { margin-bottom: 5px; }
.terms p { margin: 0 0 .6em; }
@media (min-width: 800px) { .terms { grid-template-columns: 1fr 1fr; } }

/* The About page: the family's story, with the 1996 shop beside today's yard */
.story { max-width: 44em; }
.story p { margin: 0 0 1em; }
.story .remember { margin: 1.4em 0; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.then-now { display: grid; gap: 16px; margin: 22px 0 26px; }
.then-now figure { margin: 0; }
.then-now img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--rule); }
.then-now figcaption b { color: var(--ink); }
@media (min-width: 700px) { .then-now { grid-template-columns: 1fr 1fr; gap: 20px; } }
.about-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; }
.contact-email { margin: 0 0 12px; font-size: 18px; }
.time-table { width: 100%; max-width: 760px; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); }
.time-table th, .time-table td { padding: 10px 12px; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.time-table tr:first-child th, .time-table tr:first-child td { border-top: 0; }
.time-table th { width: 7em; font-family: var(--serif); }

.contact-call { font: 700 clamp(30px, 7vw, 44px)/1.1 var(--sans); margin: 0 0 14px; }
.contact-call a { color: var(--ink); text-decoration: none; }
.hours-table { border-collapse: collapse; margin-bottom: 8px; }
.hours-table th, .hours-table td { padding: 3px 12px 3px 0; text-align: left; font-weight: 400; font-size: 16px; white-space: nowrap; }
.hours-table th { font-weight: 600; }

/* 9. The bottom of every page ------------------------------------------- */
.site-foot { margin-top: 26px; padding: 26px 0 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 15.5px; }
.foot-grid { display: grid; gap: 16px 40px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.site-foot b { color: var(--ink); }
.site-foot address { font-style: normal; }
.foot-nav { margin: 0; padding: 0; list-style: none; }
.foot-nav a { display: inline-block; padding: 3px 0; }
.small-print { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13.5px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.credit {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 7px;
  background: var(--paper); border: 1.5px solid var(--studio-gold); border-radius: 20px;
  color: var(--studio-green); font-size: 14px; font-weight: 600; text-decoration: none;
}
.credit:hover { background: var(--studio-green); color: #E6C983; }
.credit img { width: 22px; height: 22px; }

.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: block;
  padding: 15px var(--gutter) calc(15px + env(safe-area-inset-bottom));
  background: var(--red); color: #fff; font-weight: 700; font-size: 18px; line-height: 1.2;
  text-align: center; text-decoration: none; box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
}
.callbar:hover { background: var(--red-dark); color: #fff; }
.callbar.is-hidden { display: none; }
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .callbar { display: none; }
}

/* 10. Draft notes: delete these and the data-draft attribute before launch */
.draft-note { display: none; }
[data-draft] .draft-note {
  display: block; margin: 10px 0; padding: 8px 12px; background: var(--draft);
  border: 1px dashed #B99E45; border-radius: 5px; color: #5C4A0E; font-size: 14px; line-height: 1.4;
}
.draft-note button { margin: 2px 2px 2px 0; padding: 6px 10px; font: inherit; cursor: pointer; }
.draft-bar { margin: 0; padding: 5px var(--gutter); background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.35; text-align: center; }

/* 11. Printing the price list ------------------------------------------- */
@media print {
  @page { margin: 0.45in; }
  body { padding: 0; background: #fff; color: #000; font-size: 9.5pt; line-height: 1.25; }
  .stripe, .site-top, .callbar, .price-side, .price-tools, .site-foot, .draft-note, .page-head, .no-print { display: none !important; }
  .print-only { display: block; text-align: center; margin-bottom: 8pt; }
  .print-only .print-name { font: 700 22pt/1.1 var(--serif); letter-spacing: .03em; }
  .print-only p { margin: 2pt 0; }
  .price-layout { display: block; }
  .price-main { column-count: 2; column-gap: 0.3in; }
  .price-section { padding-top: 7pt; break-inside: avoid; }
  .price-section h2 { font-size: 11.5pt; margin-bottom: 2pt; }
  .prices { border: 0; background: none; }
  .prices th, .prices td { padding: 1.5pt 3pt; border-top: 0.5pt solid #999; }
  .prices thead th { font-size: 7.5pt; color: #000; }
  .prices td { width: 3.4em; }
  .prices small { color: #000; font-size: 7.5pt; margin: 0; }
  .prices .none { color: #000; }
  .table-note { color: #000; font-size: 8pt; margin-top: 2pt; }
  a { color: #000; text-decoration: none; }
}