/* ==========================================================================
   HARLEY'S HANDMADE — the clean build
   Direction: the LCW reference (design-direction-lcw.md). Light warm ground,
   dark ink, photography carries the page, 2-3 sentences per section, and
   NO effects — no 3D, no parallax, no ambient overlays, no grain.
   Restraint is the point. If a rule here is decorative, delete it.
   ========================================================================== */

:root {
  /* Harley's established palette — unchanged, just used light-side-up */
  --walnut:    #4A2E1D;
  --espresso:  #2D1F12;
  --oak:       #8B6342;
  --saddle:    #9A6B3F;   /* nudged darker than brand #B08456 for AA on linen */
  --parchment: #F1E6CC;
  --linen:     #FAF4E6;
  --paper:     #FFFDF7;

  --ink:       #241811;
  --ink-soft:  #5C4936;
  --rule:      rgba(74,46,29,.16);

  --display: "Bevan", Rockwell, Georgia, serif;
  --body: "Lora", Georgia, "Times New Roman", serif;

  --t--1: clamp(.82rem, .79rem + .14vw, .9rem);
  --t-0:  clamp(1rem, .97rem + .18vw, 1.1rem);
  --t-1:  clamp(1.12rem, 1.05rem + .34vw, 1.32rem);
  --t-2:  clamp(1.4rem, 1.24rem + .74vw, 1.9rem);
  --t-3:  clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --t-4:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);

  --gut: clamp(1.15rem, 4vw, 2.4rem);
  --wrap: 1180px;
  --narrow: 660px;
  --sec: clamp(3.6rem, 8vw, 6.5rem);
  --bar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--body); font-size: var(--t-0); line-height: 1.72;
  color: var(--ink); background: var(--linen);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; line-height: 1.18; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--walnut); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: .5rem; top: .5rem; z-index: 99; background: var(--walnut);
  color: var(--parchment); padding: .7rem 1.1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* --- layout --------------------------------------------------------------- */
.wrap   { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - var(--gut) * 2, var(--narrow)); margin-inline: auto; }
.sec    { padding-block: var(--sec); }
.sec + .sec { border-top: 1px solid var(--rule); }

/* --- header --------------------------------------------------------------- */
.head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem var(--gut);
  background: rgba(250,244,230,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { width: 46px; height: 46px; border-radius: 50%; }
.brand b { font-family: var(--display); font-size: 1.02rem; letter-spacing: .01em;
  color: var(--walnut); display: block; line-height: 1.1; font-weight: 400; }
.brand span span { display: block; font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 1.7rem; list-style: none; padding: 0; }
.nav a { text-decoration: none; font-size: .95rem; color: var(--ink); padding-block: .3rem; }
.nav a:hover, .nav a[aria-current] { color: var(--walnut); box-shadow: 0 1px 0 var(--saddle); }
.burger { margin-left: auto; display: none; min-height: 44px; min-width: 44px;
  background: transparent; border: 1px solid var(--rule); color: var(--walnut);
  font-family: var(--body); font-size: .88rem; border-radius: 3px; cursor: pointer; }

/* --- type ----------------------------------------------------------------- */
.eyebrow { font-size: var(--t--1); letter-spacing: .22em; text-transform: uppercase;
  color: var(--saddle); font-weight: 600; }
.h1 { font-family: var(--display); font-weight: 400; font-size: var(--t-4);
  color: var(--walnut); line-height: 1.06; }
.h2 { font-size: var(--t-3); color: var(--walnut); }
.h3 { font-size: var(--t-1); color: var(--walnut); }
.lede { font-size: var(--t-1); color: var(--ink-soft); }
.sec > .wrap > .eyebrow, .sec > .narrow > .eyebrow { margin-bottom: .5rem; }
.h2 + p, .h3 + p { margin-top: .6rem; }

/* --- buttons -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .9rem 1.7rem; border-radius: 3px;
  font-family: var(--body); font-weight: 600; font-size: var(--t-0);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn-solid { background: var(--walnut); color: var(--parchment); }
.btn-solid:hover { background: var(--espresso); }
.btn-line { border-color: var(--walnut); color: var(--walnut); }
.btn-line:hover { background: var(--walnut); color: var(--parchment); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* --- hero ----------------------------------------------------------------- */
.hero { padding-block: clamp(2.2rem, 5vw, 3.6rem) 0; }
.hero-grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: .82fr 1.18fr; } }
.hero-photo { border-radius: 4px; overflow: hidden; }
.hero-photo img { width: 100%; }

/* --- three callouts (the LCW pattern) ------------------------------------- */
.cols { display: grid; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 760px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.col p { margin-top: .55rem; color: var(--ink-soft); }
.col a { display: inline-block; margin-top: .8rem; color: var(--walnut);
  text-decoration: none; box-shadow: 0 1px 0 var(--saddle); font-weight: 600;
  font-size: .95rem; }

/* --- product grid --------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
@media (min-width: 620px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.item { text-decoration: none; display: flex; flex-direction: column; }
.item-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; }
.item-media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.item:hover .item-media img { transform: scale(1.03); }
.item h3 { margin-top: .85rem; font-size: var(--t-1); color: var(--walnut); }
.item p { font-size: var(--t--1); color: var(--ink-soft); margin-top: .25rem; }
.item .price { margin-top: .5rem; font-family: var(--display); font-weight: 400;
  font-size: 1.05rem; color: var(--oak); }

/* --- plain gallery (no prices, no SKU claims) ----------------------------- */
@media (min-width: 620px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.shot { border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
  background: var(--paper); }
.cap { font-size: var(--t--1); color: var(--ink-soft); margin-top: .55rem; }

/* --- quote ---------------------------------------------------------------- */
.quote { font-family: var(--display); font-weight: 400; font-size: var(--t-2);
  color: var(--walnut); line-height: 1.34; }
.quote-by { font-size: var(--t--1); color: var(--ink-soft); margin-top: .9rem;
  letter-spacing: .1em; text-transform: uppercase; }

/* --- footer --------------------------------------------------------------- */
.foot { background: var(--espresso); color: var(--parchment); padding-block: var(--sec); }
.foot a { color: var(--parchment); }
.foot .h3 { color: var(--parchment); }
.foot p { color: rgba(241,230,204,.82); }
.foot-grid { display: grid; gap: 2.2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.foot .btn-solid { background: var(--parchment); color: var(--espresso); }
.foot .btn-solid:hover { background: #fff; }
.credit { margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(241,230,204,.16); font-size: var(--t--1); }

/* --- sticky tap-to-call (Jeff's one-tap law) ------------------------------ */
.callbar { position: fixed; inset: auto 0 0 0; z-index: 60; display: none;
  align-items: center;   /* without this the buttons stretch to ~83px tall */
  gap: .5rem; padding: .5rem var(--gut) calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(45,31,18,.97); }
.callbar .btn { flex: 1; min-height: 46px; height: 48px; padding: .7rem .9rem;
  font-size: .98rem; white-space: nowrap; }
.callbar .btn-line { flex: 0 0 auto; padding-inline: 1.2rem; }
.callbar .btn-solid { background: var(--parchment); color: var(--espresso); }
.callbar .btn-line { border-color: rgba(241,230,204,.5); color: var(--parchment); }

@media (max-width: 860px) {
  .callbar { display: flex; }
  body { padding-bottom: var(--bar-h); }
  .burger { display: inline-flex; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; display: none;
    background: var(--linen); border-bottom: 1px solid var(--rule);
    padding: .6rem var(--gut) 1rem; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .85rem 0; min-height: 44px;
    border-bottom: 1px solid var(--rule); }
  /* No-JS: the menu must not strand phone visitors behind a dead button. */
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav { display: block; position: static; border: 0; padding: 0; }
}

/* --- the only motion on the site ----------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .up { animation: up .6s linear both; animation-timeline: view();
      animation-range: entry 4% cover 20%; }
  }
}
@keyframes up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- asset placeholders ----------------------------------------------------
   Where none of Harley's 32 photos honestly earns the slot, the slot says so
   and briefs the shot. A handsome placeholder is a normal mockup convention and
   it doubles as the shot list — far better than propping a weak photo into a
   position it can't hold (Jeff's direction, 2026-07-26). */
.ph {
  position: relative; display: grid; place-content: center; text-align: center;
  padding: clamp(1.6rem, 4vw, 2.6rem); gap: .5rem;
  background:
    repeating-linear-gradient(45deg, rgba(74,46,29,.045) 0 12px, transparent 12px 24px),
    var(--paper);
  border: 1px dashed rgba(74,46,29,.42); border-radius: 3px;
  color: var(--ink-soft);
}
.ph-4x3   { aspect-ratio: 4 / 3; }
.ph-3x2   { aspect-ratio: 3 / 2; }
.ph-16x9  { aspect-ratio: 16 / 9; }
.ph-tag {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--saddle);
}
.ph-what { font-family: var(--display); font-weight: 400; color: var(--walnut);
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem); line-height: 1.25; }
.ph-note { font-size: var(--t--1); max-width: 44ch; margin-inline: auto; line-height: 1.6; }

/* --- full-bleed band (the Stine pattern: a big image as a section divider) -- */
.bleed { width: 100%; overflow: hidden; }
.bleed img, .bleed .ph { width: 100%; height: clamp(260px, 46vw, 560px); object-fit: cover; }
.bleed .ph { aspect-ratio: auto; border-left: 0; border-right: 0; border-radius: 0; }

/* --- header phone (the Burton pattern: number visible in the header) -------- */
.head-tel { display: none; margin-left: 1.4rem; font-weight: 600; font-size: .95rem;
  color: var(--walnut); text-decoration: none; white-space: nowrap; }
.head-tel:hover { box-shadow: 0 1px 0 var(--saddle); }
@media (min-width: 861px) { .head-tel { display: inline-block; } }

/* --- scannable fact list (the Cambridge pattern) --------------------------- */
.facts { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: .6rem; }
.facts li { padding-left: 1.5rem; position: relative; color: var(--ink-soft); }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; background: var(--saddle); transform: rotate(45deg); }

/* --- email capture (the Stine pattern + Harley's change request #5) -------- */
.signup { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.signup input { flex: 1 1 15rem; min-height: 48px; padding: .8rem 1rem;
  font-family: var(--body); font-size: var(--t-0); color: var(--ink);
  background: var(--paper); border: 1px solid rgba(241,230,204,.45); border-radius: 3px; }
.signup input::placeholder { color: var(--ink-soft); }

/* ==========================================================================
   BRAND COLOUR PASS — Jeff, 2026-07-26: "use brand colors in places where we can"
   The first cut was almost all linen, which read clean but anonymous. These add
   Harley's actual palette back in as STRUCTURE (alternating grounds, panels,
   accent rules) rather than as decoration, so the page gains identity without
   gaining noise. Every value is from his established six.
   ========================================================================== */

/* Alternating grounds give the page rhythm without a hard slab edge, because the
   two tones are two rungs of the same ladder (linen -> parchment). */
.sec-parch { background: var(--parchment); }
.sec-parch + .sec, .sec + .sec-parch { border-top: 0; }

/* The three trust callouts sit on their own parchment cards. */
.col {
  background: var(--paper); border: 1px solid var(--rule);
  border-top: 3px solid var(--saddle);       /* the brand accent, load-bearing */
  border-radius: 3px; padding: clamp(1.3rem, 3vw, 1.8rem);
}
.sec-parch .col { background: var(--linen); }

/* Eyebrow rule — a small saddle mark so every section opens with brand colour. */
.eyebrow { display: flex; align-items: center; gap: .65rem; }
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--saddle); flex: none;
}

/* Section headings get a walnut hairline under them. */
.h2 { padding-bottom: .5rem; border-bottom: 1px solid var(--rule); }
.col .h3 { border: 0; padding-bottom: 0; }

/* Product media on parchment rather than near-white, so cedar sits warmer. */
.item-media { background: var(--parchment); }
.item:hover h3 { color: var(--oak); }

/* Prices: the lamp/oak accent, and a parchment chip so they read as a price. */
.item .price {
  display: inline-block; background: var(--parchment); color: var(--walnut);
  border: 1px solid rgba(74,46,29,.2); border-radius: 2px;
  padding: .2rem .6rem; font-size: 1rem;
}
.sec-parch .item .price { background: var(--linen); }

/* The full-bleed divider gets espresso rules top and bottom to frame it. */
.bleed { border-block: 3px solid var(--espresso); }

/* Pull quote: parchment ground, walnut ink, saddle marks. */
.quote-wrap {
  background: var(--parchment); border: 1px solid var(--rule);
  border-left: 4px solid var(--saddle); border-radius: 3px;
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

/* Fact list markers already saddle; make the finish figure caption brand-warm. */
.shot { background: var(--parchment); }
.cap { color: var(--ink-soft); }

/* Placeholders read as brand-coloured drafting paper, not grey dead space. */
.ph {
  background:
    repeating-linear-gradient(45deg, rgba(154,107,63,.10) 0 10px, transparent 10px 22px),
    var(--paper);
  border-color: rgba(154,107,63,.55);
}