/* ============================================================
   sections.css - masthead, hero, clippings, the Kathleen job,
   services, who he is, the review record, footer, call bar.
   Mobile first at 390px; desktop is the same handbill with
   wider margins, never a different site.
   ============================================================ */

/* ---------- Masthead (desktop only): the persistent number ---------- */

.masthead { display: none; }

@media (min-width: 900px) {
  .masthead {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 28px;
    background: var(--paper);
    border-bottom: 1px solid var(--bark);
  }
  .masthead__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .masthead__tel {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--ink);
    text-decoration: none;
  }
  .masthead__tel:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
  }
  .masthead__tel:active { color: var(--stamp); }
}

/* ---------- Hero A inverted: cream on sky ----------
   Wes's own photo. The type is set directly into the cobalt sky,
   no scrim, no card; only the ink color flipped from black to
   cream (docs/hero-photo-addendum.md). Identical in dark mode. */

.hero {
  position: relative;
  /* --above-hero is the height of everything stacked above the hero:
     the galley slug and the "Pick a look" band, both of which exist
     only in proof mode. js/direction.js measures them and keeps this
     current on resize. Without it the switcher pushed the hero 269px
     down on a 390x844 phone, so the stamp and the foot of the
     photograph fell below the fold and the hero looked cut off.
     In the shipped site the variable is 0 and nothing changes. */
  min-height: calc(min(92svh, 780px) - var(--above-hero, 0px));
  /* The designed loading state: the photo's own sky, cream type
     already on it, tappable in under a second. */
  background-color: var(--hero-sky-top);
  background-image: linear-gradient(180deg,
    var(--hero-sky-top) 0%,
    var(--hero-sky-mid) 55%,
    var(--hero-sky-low) 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0; /* the trunk runs off the bottom edge */
  opacity: 0;
  transition: opacity 200ms ease-out; /* fade in behind the type */
}

.hero__media img.is-loaded { opacity: 1; }

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 20px;
}

/* Upper-left, in the empty sky beside and above him. */
.hero__block { max-width: 460px; }

.hero__kicker {
  color: var(--cream);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.nowrap { white-space: nowrap; }

.hero h1 {
  color: var(--cream);
  margin: 12px 0 16px;
}

.hero__tel {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 10.5vw, 4.25rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap; /* the number NEVER wraps */
  color: var(--cream);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: var(--cream);
}

.hero__tel:active { text-decoration-color: var(--stamp); }

.hero__tel:focus-visible { outline-color: var(--cream); }

.hero__proof {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cream);
}

.stamp {
  display: block;
  width: 206px;
  color: var(--stamp);
  transform: rotate(-2deg); /* the only rotated element on the page */
}

.stamp svg { width: 100%; height: auto; display: block; }

/* On the hero the stamp is pressed onto the open sky at the lower
   left, clear of Wes and the type. Red on deep blue: the one place
   the stamp gets to be loud. */
.hero > .stamp {
  position: absolute;
  z-index: 1;
  left: 16px;
  bottom: 36px;
  width: 180px;
  color: var(--stamp-hero); /* the stamp's ink on the photograph */
}

@media (min-width: 900px) {
  .hero {
    min-height: min(92vh, 860px);
    align-items: center;
  }
  .hero__inner { padding: 48px; }
  .hero__block { max-width: 560px; }
  /* The portrait photo cannot bleed across a wide screen. It keeps
     its full height on the right, and its left edge feathers into
     the extended sky, sampled from the photo itself: photograph
     and handbill stay one object. */
  .hero__media {
    display: flex;
    justify-content: flex-end;
  }
  .hero__media img {
    width: auto;
    height: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 150px);
    mask-image: linear-gradient(to right, transparent 0, #000 150px);
  }
  .hero__proof { font-size: 15px; }
  .hero > .stamp { left: 48px; bottom: 44px; width: 212px; }
}

/* ---------- Clippings: the first two stories ---------- */

.clipping {
  background: var(--paper-deep);
  border: 1px solid var(--bark);
  padding: 24px 22px 18px;
  margin-top: 18px;
}

.clipping blockquote { border: 0; }

.clipping .pull { color: var(--ink); }

.clipping figcaption,
.clipping .clipping__by {
  margin-top: 12px;
}

/* ---------- The Kathleen job ---------- */

.kathleen__intro { margin: 14px 0 6px; }

.plates { margin-top: 18px; }

.plate {
  position: relative;
  margin-top: 20px;
  border: 1px solid var(--bark);
  background: var(--paper-deep);
  padding: 8px;
}

.plate img {
  width: 100%;
  height: auto;
  background-color: var(--sky); /* placeholder ground behind every photo */
}

.plate__time {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--paper);
  border: 1px solid var(--bark);
  padding: 4px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.plate figcaption {
  padding: 10px 4px 4px;
}

.kathleen .clipping { margin-top: 24px; }

.kathleen__note { margin-top: 14px; }

@media (min-width: 900px) {
  .plates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .plate { margin-top: 0; }
}

/* ---------- What he does ---------- */

.services-list {
  list-style: none;
  margin-top: 10px;
}

.services-list li {
  border-top: 1px solid color-mix(in srgb, var(--bark) 45%, transparent);
  padding: 16px 0 14px;
}

.services-list li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 45%, transparent);
}

.svc__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}

.svc__detail {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* The emergency line: the only red text on the page. */
.svc--emergency .svc__name { color: var(--stamp); }

.services__plate { margin-top: 28px; }

@media (min-width: 900px) {
  /* A portrait plate should be tipped in, not fill the column. */
  .services__plate {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Who he is ---------- */

.who__logo {
  margin: 22px auto 8px;
  max-width: 300px;
}

.who__logo img { width: 100%; height: auto; }

.who__logo figcaption {
  margin-top: 10px;
  text-align: center;
}

.who__body { margin-top: 16px; }

.who__nostock { margin-top: 10px; }

.towns {
  margin: 26px 0 6px;
  text-align: center;
  font-family: var(--font-body);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-size: 18px;
  line-height: 1.8;
  color: var(--ink);
}

.who__facts {
  list-style: none;
  margin-top: 22px;
}

.who__facts li {
  border-top: 1px solid color-mix(in srgb, var(--bark) 45%, transparent);
  padding: 13px 0 12px;
}

.who__facts li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--bark) 45%, transparent);
}

/* ---------- The record: all nine reviews ---------- */

.reviews__intro { margin: 14px 0 22px; }

.reviews-list { list-style: none; }

.review {
  border-top: 1px solid color-mix(in srgb, var(--bark) 45%, transparent);
  padding: 18px 0 16px;
}

.review__stars {
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--bark);
}

.review__text {
  margin-top: 8px;
  font-style: italic;
}

.review__tags,
.review__nowords {
  margin-top: 8px;
  color: var(--ink-soft);
}

.review__nowords { font-style: italic; }

.review__by { margin-top: 10px; }

.reviews__closer {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 84px;
  padding: 0 20px;
  border-top: 4px solid var(--ink);
}

.footer__inner {
  max-width: 680px;
  margin: 3px auto 0;
  border-top: 1px solid var(--ink);
  padding: 48px 0 40px;
  text-align: center;
}

.footer .stamp {
  margin: 0 auto 26px;
  width: 188px;
}

.footer__lead { margin-bottom: 18px; }

.footer__tel {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 10.5vw, 4.25rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-color: var(--ink);
}

.footer__tel:active { text-decoration-color: var(--stamp); }

.footer__place {
  margin-top: 18px;
  font-size: 15px;
  color: var(--ink-soft);
}

.footer__contact { margin-top: 6px; }

.footer__seal {
  width: 100px;
  margin: 30px auto 0;
  opacity: 0.92;
}

/* The seal img carries width="320" height="320" so the browser can
   reserve its box before it loads. Without height:auto the CSS width
   above squeezes it to 100 wide while the attribute holds it at 320
   tall, and the round seal renders as an oval. */
.footer__seal img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__fine {
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Room for the pinned bar so it never covers the last line. Same
   64px the bar is, plus 56px of air. */
@media (max-width: 899px) {
  .footer__inner {
    padding-bottom: calc(56px + 64px);
  }
}

/* ---------- The pinned call bar (mobile) ---------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 64px, and it does not move.

     There is no safe-area inset in this rule any more and there must
     not be one. This page does not set viewport-fit=cover, so the
     browser is already insetting the layout viewport above the home
     indicator or the gesture bar, and env(safe-area-inset-bottom) is
     specified to be 0 here. Android reports a value anyway, AND
     changes it as its own toolbars slide in and out, so the bar grew
     while scrolling up and shrank again scrolling down. Capping the
     inset at 24px, which is what this rule did before, made the jump
     smaller without stopping it: the height still moved by 24px in
     the middle of a scroll, under the thumb, on the one control a
     panicked customer is reaching for.

     Nothing is lost by dropping it. Without viewport-fit=cover, iOS
     has already reserved the home indicator's space outside the
     viewport, so the bar clears it either way. */
  min-height: 64px;
  padding: 0 20px;
  background: var(--ink);           /* bone with ink text in dark mode, free */
  border-top: 1px solid var(--bark);
  text-decoration: none;
  transform: translateY(105%);
  transition: transform 200ms ease-out, background-color 80ms linear;
}

body.callbar-on .callbar { transform: translateY(0); }

body.callbar-on .callbar:active {
  transform: translateY(0) scale(0.98);
  background: var(--bar-press);
}

.callbar__left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.callbar__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
}

.callbar__sub {
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--bar-sub);
}

.callbar__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--paper);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .callbar { display: none; }
}