/* ══════════════════════════════════════════════════════════════════════════════
   EASTERN BAY BOAT WORKS — site.css        loaded AFTER kit.css and palette.css

   Rebuilt 2026-09-20 with the palette. The site now runs in the kit's LIGHT mode
   (paper body, navy hero / banners / closing band / footer), which is both the
   family 06 shape and the shape of their own site.

   The three things here that make it read as theirs rather than as a template:
     1. the header is NAVY, not paper. Light mode makes it paper by default; their
        own header is navy and it is the first thing anyone sees.
     2. the BRASS BAND under the hero, the single most recognisable element on
        their current site.
     3. their dealer marks (Mercury, Garmin, Seakeeper) sitting on paper, the way
        they already present them.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── display type ───────────────────────────────────────────────────────────
   Manrope, their own face. It has no width axis, so the Archivo `wdth` rules the
   first build used are gone; weight and tightening do the work instead. */
.h-display, .dhead, .pbanner h1, .hero h1 { letter-spacing: -0.022em; }
.h-display { font-weight: 800; }
.hero h1.caps { text-transform: uppercase; letter-spacing: -0.005em; font-weight: 800; }
.dhead { font-weight: 700; }
.pbanner h1 { font-weight: 800; }

/* ── THEIR HEADER ───────────────────────────────────────────────────────────
   Light mode paints the nav paper. Theirs is navy on every page, and the white
   wordmark only works on it.

   SPECIFICITY NOTE: kit.css writes `body.light.dark-top.scrolled .nav` (0,4,1),
   which beats a plain `body.light .nav` (0,3,1) no matter what order the files
   load in. Every state the kit names has to be named back, or the header flips
   to paper the moment the page scrolls. That is exactly what it did. */
body.light .nav,
body.light.dark-top .nav,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav,
body.light.dark-top.scrolled .nav,
body.light.dark-top.menu-open .nav,
body.light.scrolled .nav,
body.light.menu-open .nav {
  background: rgba(13, 39, 66, .96);
  border-bottom-color: rgba(176, 141, 87, .30);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
body.light .nav .w1,
body.light.dark-top.scrolled .nav .w1,
body.light.menu-open .nav .w1 { color: #FFF; }
body.light .nav .w2 { color: var(--accent-lt); }
body.light .nav .nlinks a,
body.light .nav .nphone,
body.light.dark-top.scrolled .nav .nlinks a,
body.light.dark-top.scrolled .nav .nphone,
body.light.menu-open .nav .nlinks a,
body.light.menu-open .nav .nphone { color: rgba(240, 238, 232, .86); }
body.light .nav .nlinks a:hover,
body.light .nav .nlinks a[aria-current] { color: #FFF; }
body.light .nav .nlinks a::after { background: var(--accent-lt); }

/* the burger, white in every state */
body.light .nav .burger,
body.light.dark-top.scrolled .nav .burger { border-color: rgba(176, 141, 87, .40); }
body.light .nav .burger span,
body.light .nav .burger span::before,
body.light .nav .burger span::after,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .burger span,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .burger span::before,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .burger span::after,
body.light.dark-top.scrolled .nav .burger span,
body.light.dark-top.scrolled .nav .burger span::before,
body.light.dark-top.scrolled .nav .burger span::after { background: #FFF; }

/* the header CTA is BRASS in every state. Their own header button is gold, and on
   navy it is the highest contrast call to action on the page. */
body.light .nav .btn-ink,
body.light.dark-top:not(.scrolled):not(.menu-open) .nav .btn-ink,
body.light.dark-top.scrolled .nav .btn-ink,
body.light.menu-open .nav .btn-ink {
  background: var(--accent); color: #16243A; border-color: var(--accent); font-weight: 700;
}
body.light .nav .btn-ink:hover,
body.light.dark-top.scrolled .nav .btn-ink:hover {
  background: var(--accent-lt); border-color: var(--accent-lt); color: #16243A;
}
body.light .brand .mk { color: var(--accent-lt); }

/* ── HER LOGO in the header and the footer (2026-09-21) ─────────────────────
   Her real logo replaces the redrawn mark and the text wordmark. Its lettering is
   only 15% of its height (the boats are 71%), so the header grows to carry it at a
   size the name reads: the kit's 100px becomes 120px, 86px becomes 96px on phones.
   Everything that offsets for the header (banners, hero, drawer) follows --nav-h.
   Her own Wix header runs it at 159px in a 189px bar; this is 104px in 120. */
:root { --nav-h: 120px; }
@media (max-width: 640px) { :root { --nav-h: 96px; } }
.brand-img img { display: block; height: 104px; width: auto; }
@media (max-width: 640px) { .brand-img img { height: 82px; } }
.fbrand .flogo { display: inline-block; margin-bottom: 22px; }
.fbrand .flogo img { display: block; width: 240px; height: auto; }

/* ── THE BRASS BAND ─────────────────────────────────────────────────────────
   Their hero sits directly on a brass strip carrying "Marine Service You Can
   Count On". It is the most recognisable thing on their site, so the rebuild
   keeps it rather than inventing a replacement. */
.brassband {
  background: linear-gradient(100deg, #A8854F 0%, #C0A06A 46%, #A8854F 100%);
  color: #16243A;
  border-top: 1px solid rgba(0, 0, 0, .12);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.brassband .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 34px; flex-wrap: wrap; padding-block: 20px;
}
.brassband p { margin: 0; font-size: 19px; font-weight: 700; color: #16243A; }
.brassband .sub { font-weight: 500; font-size: 16px; color: rgba(22, 36, 58, .82); }
@media (max-width: 720px) { .brassband p { font-size: 17px; } }

/* ── the dealer marks ───────────────────────────────────────────────────────
   All three PNGs are DARK ink on transparent: Mercury's glyph sits at luminance 3,
   Seakeeper's is effectively navy (rgb 1,34,70). They are drawn for a light
   background, so the band is paper, which is also where their own site puts them.
   (They looked like white-on-black tiles on my first contact sheet only because
   that sheet composited RGBA onto black before drawing it.) */
.markband { background: var(--paper-2); border-block: 1px solid var(--line); }
.markband .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px clamp(26px, 4vw, 54px); flex-wrap: wrap; padding-block: 24px;
}
.marks { display: flex; align-items: center; gap: clamp(26px, 4vw, 54px); flex-wrap: wrap; }
/* 9/23, Jackie: "We need to enlarge the manufacturer/dealer logos for Mercury, Garmin
   and Seakeeper Ride. These feel barely visible." 36px to 64px, and the band gets the
   room to carry them. The artwork is 420px wide, so 64px is still under 2x. */
.marks img { height: 64px; width: auto; }
.marks a { display: inline-flex; align-items: center; text-decoration: none; }
.marks a:hover img { opacity: .82; }
@media (max-width: 720px) {
  .markband .wrap { justify-content: center; }
  .marks { justify-content: center; gap: 26px 34px; }
  .marks img { height: 46px; }
}

/* ── eyebrow: brass fails as small text on their paper ──────────────────────
   #B08D57 is 2.8:1 on #F5F3EE and the eyebrow is 12.5px tracked caps. The band
   and the buttons keep full brass; text uses the darkened one at 5.2:1. */
body.light .eyebrow { color: var(--accent-ink); }

/* ── the Google rating pill ───────────────────────────────────────────────── */
.ratepill { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.ratepill .stars { display: inline-flex; font-size: 15px; letter-spacing: .06em; color: var(--accent-lt); }
.ratepill b { font-weight: 700; }
.dotsep { opacity: .5; }
body.light .sec .ratepill { color: var(--muted); }
body.light .sec .ratepill .stars { color: var(--accent-ink); }
body.light .sec .ratepill b { color: var(--ink); }

/* ── Donnie. The largest photograph on the site. ───────────────────────────── */
.s-media.donnie img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px rgba(13, 39, 66, .18);
}
.vcap {
  margin: 14px 0 0; font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}

/* ── page banner, short variant for form pages ────────────────────────────── */
.pbanner.short .pbanner-in { padding-block: clamp(56px, 8vw, 96px); }

/* ── the winterization estimate form ──────────────────────────────────────── */
.wform fieldset { border: 0; border-top: 1px solid var(--line); margin: 0 0 26px; padding: 22px 0 0; }
.wform fieldset:first-of-type { border-top: 0; padding-top: 0; }
.wform legend {
  padding: 0; margin: 0 0 16px;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 700;
}
/* Her questions are full sentences, so they read as sentences, not as the kit's
   small uppercase field labels. Older customers, nothing small. */
.wform .qset { margin: 0 0 22px; }
.wform .step > .qset:last-child { margin-bottom: 0; }
.wform .q, .wform .fld > label.q {
  display: block; margin: 0 0 8px; font-size: 17px; line-height: 1.45; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink);
}
.wform .opts { display: grid; gap: 2px; }
.wform .opts.row { display: flex; flex-wrap: wrap; gap: 2px 30px; }
.wform .qgroup {
  margin: 0 0 14px; font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-ink);
}

/* ── one screen at a time, the way her Typeform runs ─────────────────────────
   site.js adds .stepper and the Back / Next bar. Without it the whole form shows
   as one page and still posts. */
.wform { scroll-margin-top: calc(var(--nav-h) + 12px); }
.wform.stepper fieldset { border-top: 0; padding-top: 0; margin: 0; }
.wform.stepper .step:not(.current) { display: none; }
.wform.stepper .step.current { animation: step-in .35s ease both; }
@keyframes step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wform.stepper .step.current { animation: none; } }
.wform.stepper .step { min-height: 150px; }
.wform.stepper .q, .wform.stepper .fld > label.q { font-size: 21px; line-height: 1.35; margin-bottom: 14px; }
.wform .step:focus { outline: none; }
.wform .sprog { height: 5px; margin: 0 0 28px; border-radius: 5px; overflow: hidden; background: var(--line); }
.wform .sprog span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .35s ease; }
.wform .snav { display: flex; gap: 12px; margin-top: 30px; }
.wform .snav .btn { flex: 1; }
.wform .snav .sback { flex: 0 0 auto; }
.wform .snav [hidden] { display: none !important; }   /* .btn sets display, which beats the hidden attribute */
.chk { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 17px; cursor: pointer; }
.chk input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.chkgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
@media (max-width: 560px) { .chkgrid { grid-template-columns: 1fr; } }
.qside .ticks { margin-top: 4px; }
.bigtel { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }

/* ── the capability strip under the hero ──────────────────────────────────── */
.iline { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.iline .k {
  display: inline-block; padding: 9px 16px;
  border: 1px solid var(--line); border-radius: var(--btn-r);
  background: var(--paper-2);
  font-size: 14.5px; letter-spacing: .02em; color: var(--body);
}

/* ── footer small print ───────────────────────────────────────────────────── */
.fsm { margin-top: 14px; font-size: 15px; color: var(--txt-2); }

/* ── a card that is not a link must not lift on hover ─────────────────────── */
article.scard, div.scard { cursor: default; }
article.scard:hover, div.scard:hover { transform: none; }

/* ── .ticks: a real list. NOT .flist, which the kit builds as a two column
      newsletter grid, so a <ul> of bullets in it leaves holes down the page. ── */
.ticks { list-style: none; margin: 18px 0 0; padding: 0; }
.ticks li {
  position: relative; padding: 0 0 0 28px; margin: 0 0 12px;
  font-size: 17px; line-height: 1.55; color: var(--body); break-inside: avoid;
}
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 6px; height: 11px; transform: translateY(-60%) rotate(45deg);
  border: 1.5px solid var(--accent); border-left: 0; border-top: 0;
}
.ticks.two { columns: 2; column-gap: 44px; }
@media (max-width: 620px) { .ticks.two { columns: 1; } }
.cta .ticks li, .sec-ink .ticks li, .bleed.split .txt .ticks li { color: var(--txt-2); }

/* ══ audit fixes, carried from 2026-09-18 ════════════════════════════════════
   1. The kit hides the header CTA only below 430px. This wordmark is two long
      words, so phone + CTA + burger runs past the viewport at 465. Sunny Side hit
      exactly this. KIT CANDIDATE: raise the kit breakpoint from 430 to 560. */
@media (max-width: 560px) { .ncta .btn { display: none; } }

/* 2. A note set full width runs past the ~28em measure the luxury set holds to.
      Capped in em: .note renders at 15px, so a px cap is a different measure. */
.note { max-width: 34em; }

/* 3. An inline link in a small paragraph is only as tall as its text, 14px
      against a 44px tap floor. Padded, then pulled back out of the flow. */
.fnote a { display: inline-block; padding: 15px 0; margin: -15px 0; }

/* 4. Type floors. This audience skews older and reads on a phone in bad light. */
.crumbs, .crumbs a, .crumbs li, .crumbs span { font-size: 15px; }

/* 5. kit.css guards its invalid style with :not(:placeholder-shown), which only
      works on inputs that HAVE a placeholder. An empty required field with none
      never matches, so it paints red on load before anyone types. Canvas Experts
      hit this too. KIT CANDIDATE: swap the kit rule for :user-invalid. */
.fld input:invalid:not(:placeholder-shown),
.fld textarea:invalid:not(:placeholder-shown) { border-color: var(--line); }
.fld input:user-invalid, .fld textarea:user-invalid { border-color: #B4503C; }

/* ── breadcrumbs: a real <ol>, flattened ──────────────────────────────────── */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; opacity: .4; margin-right: 10px; }
.crumbs [aria-current] { margin: 0; opacity: 1; }
/* On a phone the trail ran 1px wider than the column at 375 (Home / Winterization / Estimate on the
   estimate page), so it broke with the slash leading the second line. Tighter spacing fits it on one
   line at 375, and the slash now trails its own word, so a narrower phone breaks cleanly. (2026-10-06) */
@media (max-width: 480px) {
  .crumbs ol { gap: 0 6px; }
  .crumbs a { padding-left: 0; padding-right: 0; }
  .crumbs li + li::before { content: none; }
  .crumbs li:not(:last-child)::after { content: "/"; opacity: .4; margin-left: 6px; }
}

/* ── the photograph scrims ══════════════════════════════════════════════════
   kit.css hardcodes rgba(12,18,11,…) in the hero and page-banner scrims: a GREEN
   black left over from the palette template's default ground, not derived from
   --ground, so every kit site gets an olive wash over its photographs. Restated
   here in their navy. KIT CANDIDATE: a --scrim token defaulting to --ground. */
.hero-img::after {
  background:
    linear-gradient(180deg, rgba(13,39,66,.56) 0%, rgba(13,39,66,.20) 30%, rgba(13,39,66,.50) 66%, rgba(13,39,66,.92) 100%),
    linear-gradient(96deg, rgba(13,39,66,.86) 0%, rgba(13,39,66,.60) 34%, rgba(13,39,66,.12) 66%, rgba(13,39,66,0) 100%);
}
.pbanner .bimg::after {
  background:
    linear-gradient(180deg, rgba(13,39,66,.62) 0%, rgba(13,39,66,.32) 44%, rgba(13,39,66,.88) 100%),
    linear-gradient(96deg, rgba(13,39,66,.86) 0%, rgba(13,39,66,.62) 36%, rgba(13,39,66,.14) 70%, rgba(13,39,66,0) 100%);
}
@media (max-width: 860px) {
  .hero-img::after {
    background: linear-gradient(180deg, rgba(13,39,66,.50) 0%, rgba(13,39,66,.08) 44%, rgba(13,39,66,.82) 100%);
  }
}
.bleed > figcaption { background: linear-gradient(180deg, transparent, rgba(13,39,66,.80)); }

/* ── the rest of the kit's hardcoded green, restated in navy ─────────────── */
.drawer { background: rgba(13, 39, 66, .985); }
/* ── THE CHAT, IN THEIR COLOURS (rebuilt 2026-09-23) ────────────────────────
   kit.css paints the panel, the tag and the bubble with a GREEN-black gradient
   (#1E2A1C to #141C13) that belongs to another client's palette. A
   background-color override loses to that gradient, which is why the panel was
   still olive: the whole background shorthand has to be restated. Same bug as
   the hero and drawer scrims noted in the README. Everything below is navy,
   brass and paper, the three colours measured off their own site. */
.chattag { background: linear-gradient(150deg, #1A3D62, #0D2742); border-color: rgba(176, 141, 87, .45); color: #F4F1EA; }
.chatfab { background: linear-gradient(150deg, #1A3D62, #0D2742); border-color: rgba(176, 141, 87, .55); color: var(--accent-lt); }
.chatpanel {
  background: linear-gradient(168deg, #15395E 0%, #0B2340 100%);
  border-color: rgba(176, 141, 87, .34);
  box-shadow: 0 40px 90px -30px rgba(3, 14, 26, .95);
}
.chathead { background: rgba(176, 141, 87, .12); border-bottom-color: rgba(176, 141, 87, .24); }
.chathead .logo { height: 34px; width: auto; flex: 0 0 auto; display: block; }
.chathead b { font-family: var(--sans); font-size: 18px; letter-spacing: -.01em; font-weight: 700; }
.chathead span { color: rgba(242, 240, 231, .72); }
/* The first answer was being pushed out of sight by five stacked chips (Adam, 9/23).
   The body now sizes to its messages instead of stretching the panel, so the panel is
   as tall as the conversation and no answer is ever cut off at the top. */
.chatbody { flex: 0 1 auto; min-height: 96px; max-height: 52vh; padding: 18px 18px 6px; }
@media (max-width: 760px) { .chatpanel { bottom: 172px; } }
.msg { font-size: 15.5px; }
.msg.bot { background: rgba(255, 255, 255, .08); border-color: rgba(176, 141, 87, .22); color: #F4F1EA; }
.msg.bot b { color: #fff; }
.msg.me { background: linear-gradient(150deg, #C9A468, #A8854F); color: #16243A; }
.msg a { color: var(--accent-lt); }
.chips { padding: 12px 18px 14px; }
.chips button { font-size: 13.5px; color: #F4F1EA; background: rgba(255, 255, 255, .06); border-color: rgba(176, 141, 87, .32); }
.chips button:hover { background: rgba(176, 141, 87, .2); border-color: var(--accent-lt); color: #fff; }
.chatact { gap: 10px; }
.chatact .p { background: linear-gradient(150deg, #C9A468, #A8854F); color: #16243A; font-weight: 700; }
.chatact .s { border-color: rgba(176, 141, 87, .5); color: #F4F1EA; }
.chatform { background: rgba(4, 18, 34, .45); border-top-color: rgba(176, 141, 87, .22); }
.chatform input { color: #F4F1EA; background: rgba(255, 255, 255, .08); border-color: rgba(176, 141, 87, .3); }
.chatform input::placeholder { color: rgba(242, 240, 231, .5); }
.chatform input:focus { border-color: var(--accent-lt); box-shadow: 0 0 0 3px rgba(176, 141, 87, .18); }
.chatform button { background: linear-gradient(150deg, #C9A468, #A8854F); color: #16243A; }
/* kit.css light mode sets every panel paragraph to inherit, which made this note
   dark navy text on a dark navy panel: invisible. */
body.light .chatpanel .chatnote, .chatnote { color: rgba(242, 240, 231, .66); font-size: 11.5px; padding: 0 18px 13px; }

/* ── the FAQ measure ────────────────────────────────────────────────────────
   Answers ran to 43em, well past the ~28em the luxury set holds to and past the
   40em the kit warns at. Capped in em so it stays a ratio at any font size. */
.faq .ans p, .faq .ans li { max-width: 34em; }

/* The current-page link: kit.css paints it var(--ink) at
   `body.light.dark-top.scrolled .nav .nlinks a[aria-current]` (0,5,1), which is navy
   on a navy header. Same trap as the header background, so the same compounds. */
body.light .nav .nlinks a[aria-current],
body.light .nav .nlinks a:hover,
body.light.dark-top .nav .nlinks a[aria-current],
body.light.dark-top.scrolled .nav .nlinks a[aria-current],
body.light.dark-top.scrolled .nav .nlinks a:hover,
body.light.menu-open .nav .nlinks a[aria-current] { color: #FFF; }

/* ── project galleries (2026-09-24) ─────────────────────────────────────────
   The kit's .gal clips its figures to a 4:3 box, which would swallow a caption.
   This variant puts the caption under the photograph, because captioning with a
   filename ("Bart1.png", "Zip Wake 1.jpeg") is one of the things Jackie asked us
   to fix in the migration.

   THE BUG THIS SHIPPED WITH, 2026-09-24: kit.css line 396 is `.gal img{width:100%;height:100%}`.
   A grid item stretches to its row, so with `aspect-ratio:auto` on the figure the image took the
   WHOLE row height and the caption fell out of the box and landed on top of the next row of
   photographs. `height:auto` and `align-self:start` are the fix, and both have to be here: the
   kit rule is just as specific, so leaving either one out brings the overlap straight back. */
.gal.capped { grid-template-columns: repeat(3, 1fr); gap: 24px 22px; align-items: start; }
/* `body.light .gal figure` in kit.css is (0,2,2) and this was (0,2,1), so the
   box-shadow:none here lost and every figure kept a stray card shadow behind the
   caption. Writing body.light into the selector wins it back. Same class of silent
   loss as the height:100% above: the kit rule is always at least as specific. */
.gal.capped figure,
body.light .gal.capped figure { aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; box-shadow: none; border: 0; align-self: start; }
.gal.capped figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.gal.capped figcaption { margin-top: 11px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
/* A gallery is only as wide as it has pictures. SeaStar power assist has exactly two
   photographs and one of them is the page banner, so its grid was a single tile stranded
   beside two empty columns. `g1`/`g2` come from the build, not from guesswork in CSS. */
.gal.capped.g1 { grid-template-columns: minmax(0, 620px); }
.gal.capped.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
@media (max-width: 860px) { .gal.capped, .gal.capped.g2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gal.capped { grid-template-columns: 1fr; } }

/* ── her blog, resources and service terms (2026-09-28) ─────────────────────
   Her posts are long-form reading, so they run in the prose column with her own
   photographs at full column width and a written caption under each. Her longest
   headline is 99 characters: at the kit's 4.2rem and 18ch that was six lines of
   banner, so a post banner gets a reading size instead of a display size. */
.post-head h1 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 24ch; }
.postmeta { font-size: 17px; margin-top: 14px; }
.post h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 700; line-height: 1.25; color: var(--ink); letter-spacing: -.01em; margin: 1.7em 0 .45em; }
.post figure { margin: 30px 0; }
.post figure img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.post figcaption { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.post strong { color: var(--ink); font-weight: 700; }
/* Vertical padding on an inline link grows its tap box to 46px without moving a line of text,
   and the words still wrap inside it: the 44px phone floor, met without an inline-block. */
.post p a, .post li a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; padding: 11px 0; }
.post .ticks { margin: 14px 0 22px; }
.postlist .pitem { padding: 34px 0; border-top: 1px solid var(--line); }
.postlist .pitem:first-child { border-top: 0; padding-top: 0; }
.postlist h2 { font-size: clamp(1.4rem, 2.3vw, 1.75rem); font-weight: 700; line-height: 1.25; margin: 8px 0 10px; letter-spacing: -.01em; }
.postlist h2 a { color: var(--ink); text-decoration: none; }
.postlist h2 a:hover { color: var(--accent-ink); }
.postlist .from { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 12px 0; min-height: 46px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.postlist .from:hover .arw { transform: translateX(4px); }
.postlist .arw { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.guide .guidecover { display: block; justify-self: center; width: 100%; max-width: 340px; }
.guide .guidecover img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 18px 40px rgba(13, 39, 66, .16); }
/* A link inside an FAQ answer (Electronics <-> Audio and Lighting, 2026-09-29) gets the same 46px phone tap
   box as the blog's inline links, without moving a line of text. */
.faq .ans a { padding: 11px 0; }