/* ==========================================================================
   JAXCO Design & Development — style.css (rebuilt 2026-05-03 v6)
   Faithful responsive overlay for Jacqueline Patterson's 1997-2004 design.
   We preserve every original GIF (jaxco.gif logo, web.home.gif/web.gif
   wordmarks, face.gif/g.gif filler, a1/a2/p1/p2/c1/c2 nav buttons, dot.gif
   separators, l/m/r woman-on-chair body slices) and the original 166/514
   table geometry. The only "modernization" is making the layout RESPONSIVE
   on mobile and SCALE UP on PC — no invented copy, no editorial taglines,
   no sidebar callouts, no drop caps. Just her design, properly sized for
   the viewport.
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; vertical-align: top; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* --- Tokens (drawn directly from her original style.css) --- */
:root {
  --jaxco-blue: #6495ed;       /* a:link from 1997 */
  --jaxco-slate: #708090;      /* a:visited from 1997 */
  --jaxco-red: #dc0000;        /* a:hover from 1997 */
  --jaxco-ink: #1a1a1a;
  --jaxco-ink-soft: #4a5568;
  --jaxco-line-soft: #ece9e2;
  --jaxco-paper: #ffffff;
  --jaxco-cream: #f9f8f5;
  --jaxco-cream-deep: #efeae0;
  --font-sans: "Trebuchet MS", Trebuchet, Tahoma, Verdana, Arial, Helvetica, sans-serif;
  --transition: 0.18s cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

/* --- Page shell --- */
html, body {
  background: var(--jaxco-cream);
  color: var(--jaxco-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
}

/* Subtle vintage-paper noise (~3% opacity, multiply blend, zero network cost). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.site-wrapper,
.site-footer { position: relative; z-index: 1; }

/* --- Wrapper. Mobile-first. Scales UP on PC. --- */
.site-wrapper {
  flex: 1;
  width: 100%;
  max-width: 680px;            /* native 1997 design width */
  margin: 0 auto;
  padding: 18px 14px 36px;
}

/* ==========================================================================
   HEADER (matches her 1997 table layout exactly):
     col 1 = jaxco.gif logo, rowspan 2 (166 wide × 143 tall native)
     col 2 row 1 = web.home.gif / web.gif wordmark (514 × 105)
     col 2 row 2 = nav row: face.gif/g.gif filler + a/p/c buttons + dots
   Column ratio 166fr / 514fr is load-bearing — DO NOT change.
   ========================================================================== */
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 166fr) minmax(0, 514fr);
  grid-template-rows: auto auto;
  width: 100%;
  margin-bottom: 0;             /* zero so face.gif's bottom meets m.gif's top */
}
.site-header__logo {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: stretch;
}
.site-header__logo img {
  width: 100%;
  height: auto;
}
.site-header__wordmark {
  grid-row: 1;
  grid-column: 2;
}
.site-header__wordmark img {
  width: 100%;
  height: auto;
}

/* Nav row */
.site-header__nav {
  grid-row: 2;
  grid-column: 2;
  width: 100%;
}
.primary-nav {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav__filler { flex: 0 0 calc(211 / 514 * 100%); }
.primary-nav__btn-a  { flex: 0 0 calc(87  / 514 * 100%); }
.primary-nav__sep    { flex: 0 0 calc(20  / 514 * 100%); }
.primary-nav__btn-p  { flex: 0 0 calc(89  / 514 * 100%); }
.primary-nav__btn-c  { flex: 0 0 calc(87  / 514 * 100%); }
.primary-nav img,
.primary-nav a {
  display: block;
  width: 100%;
  height: auto;
}
.primary-nav a { transition: opacity var(--transition); }
.primary-nav a:hover,
.primary-nav a:focus-visible {
  opacity: 0.78;
  outline: none;
}
.primary-nav a:focus-visible {
  outline: 2px solid var(--jaxco-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   HOME HERO — l.gif + m.gif + r.gif as a single illustration.
   The hero MUST share the header's 166/514 column geometry so that:
     - l.gif (left body slice) sits directly under jaxco.gif logo,
     - m.gif (head + torso) sits directly under face.gif (head silhouette),
     - r.gif (legs + chair) extends to the right.
   Native pixels: 166 + 211 + 216 = 593 wide × 362 tall.
   ========================================================================== */
.home-hero {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 166fr) minmax(0, 514fr);
  align-items: start;
  background: var(--jaxco-cream);
}
.home-hero__l {
  width: 100%;
  height: auto;
  display: block;
  grid-column: 1;
}
.home-hero__right-pair {
  grid-column: 2;
  display: flex;
  align-items: stretch;
}
.home-hero__right-pair img {
  display: block;
  height: auto;
  flex-shrink: 0;
  flex-grow: 0;
}
.home-hero__m { flex-basis: calc(211 / 514 * 100%); width: calc(211 / 514 * 100%); }
.home-hero__r { flex-basis: calc(216 / 514 * 100%); width: calc(216 / 514 * 100%); }

/* ==========================================================================
   MAIN CONTENT
   No top padding — home page hero must butt against the header so face.gif
   meets m.gif with zero gap. Subpages get top space via their own blocks.
   ========================================================================== */
.site-main {
  width: 100%;
  padding: 0 0 24px;
}
.site-main p {
  margin: 0 0 1.05em;
  color: var(--jaxco-ink);
  max-width: 64ch;
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: justify;
}
.site-main p strong { color: var(--jaxco-ink); font-weight: 700; }
.site-main a {
  color: var(--jaxco-blue);
  border-bottom: 1px solid currentColor;
  transition: color var(--transition);
}
.site-main a:hover,
.site-main a:focus-visible { color: var(--jaxco-red); }

/* About / apropos */
.about-copy { padding: 24px 0 8px; }

/* Contact intro */
.contact-intro { margin: 22px 0 22px; }

/* Portfolio */
.portfolio-intro { margin: 22px 0 26px; }
.portfolio-section { margin: 26px 0 36px; }
.portfolio-section__heading {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.portfolio-section__heading img {
  display: block;
  height: auto;
  max-width: 100%;
}
.portfolio-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.project-card {
  background: var(--jaxco-paper);
  border: 1px solid var(--jaxco-line-soft);
  border-radius: 4px;
  padding: 14px;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.project-card:hover,
.project-card:focus-within {
  box-shadow: 0 6px 18px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  transform: translateY(-2px);
  border-color: rgba(100, 149, 237, 0.45);
}
.project-card__thumb-link { display: block; margin-bottom: 8px; }
.project-card__thumb-link img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: #f1f5f9;
}
.project-card__name {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
}
.project-card__name a { color: var(--jaxco-ink); border-bottom: 0; }
.project-card__name a:hover { color: var(--jaxco-red); }
.project-card__desc {
  margin: 0;
  font-size: 0.825rem;
  color: var(--jaxco-ink-soft);
  line-height: 1.5;
}

/* ==========================================================================
   CONTACT FORM
   ========================================================================== */
.contact-form-wrap { padding-top: 6px; }
.contact-form-wrap form {
  display: grid;
  gap: 12px;
  max-width: 520px;
}
.form-section-heading {
  margin: 14px 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jaxco-slate);
  border-bottom: 1px solid var(--jaxco-line-soft);
  padding-bottom: 5px;
}
.form-field { display: grid; gap: 4px; }
.form-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--jaxco-ink);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 7px 10px;
  font: inherit;
  font-size: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: white;
  color: var(--jaxco-ink);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 2px solid var(--jaxco-blue);
  outline-offset: 1px;
  border-color: var(--jaxco-blue);
}
.form-field textarea { min-height: 110px; resize: vertical; }
.check-group, .radio-row { display: grid; gap: 6px; }
.radio-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  column-gap: 14px;
}
.check-group label,
.radio-row label {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--jaxco-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--jaxco-blue); }
.other-text { width: auto; max-width: 240px; padding: 4px 6px !important; }

.form-actions { display: flex; gap: 10px; margin-top: 14px; }
.form-actions .btn { flex: 0 0 auto; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--jaxco-blue);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary { background: var(--jaxco-blue); color: white; }
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--jaxco-red);
  border-color: var(--jaxco-red);
  outline: none;
}
.btn--reset {
  background: white;
  color: var(--jaxco-slate);
  border-color: #cbd5e1;
}
.btn--reset:hover { color: var(--jaxco-red); border-color: var(--jaxco-red); }

.contact-direct {
  background: #f1f5f9;
  padding: 12px 16px;
  border-left: 3px solid var(--jaxco-blue);
  margin: 24px 0 8px;
  font-size: 0.92rem;
}
.contact-direct a {
  color: var(--jaxco-blue);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* ==========================================================================
   FOOTER (matches her original: small Arial-ish caption, centered)
   ========================================================================== */
.site-footer {
  background: transparent;
  padding: 22px 16px 28px;
  margin-top: auto;
}
.site-footer__inner {
  margin: 0 auto;
  text-align: center;
  font-size: 0.78rem;
  color: var(--jaxco-slate);
  letter-spacing: 0.02em;
}
.site-footer__copy { margin: 0; line-height: 1.55; }
.site-footer__copy a { color: var(--jaxco-blue); }
.site-footer__copy a:hover { color: var(--jaxco-red); }

/* ==========================================================================
   PAGE-LOAD REVEAL — gentle 300ms cascade, reduced-motion safe
   ========================================================================== */
@keyframes jaxco-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header,
.home-hero,
.about-copy,
.portfolio-intro,
.contact-intro,
.contact-form-wrap,
.portfolio-section {
  opacity: 0;
  animation: jaxco-rise 0.6s var(--ease-out) forwards;
}
.site-header { animation-delay: 0.05s; }
.home-hero,
.about-copy,
.portfolio-intro,
.contact-intro { animation-delay: 0.18s; }
.portfolio-section:nth-of-type(1) { animation-delay: 0.26s; }
.portfolio-section:nth-of-type(2) { animation-delay: 0.34s; }
.contact-form-wrap { animation-delay: 0.26s; }

/* ==========================================================================
   RESPONSIVE — the design SCALES UP on PC (does not stay bunched at 680px)
   ========================================================================== */

/* ≥ 600px: 2-column portfolio grid */
@media (min-width: 600px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .site-wrapper { padding: 22px 18px 44px; }
}

/* ≥ 760px: native 1997 width hits + a touch more breathing room */
@media (min-width: 760px) {
  .site-wrapper { padding: 28px 24px 56px; }
  .portfolio-grid { gap: 22px; }
}

/* ≥ 1000px: design grows beyond native — wordmark + body image scale up.
   Logo at 200px (1.20x), wordmark at 620px (1.21x), body at 715px (1.21x). */
@media (min-width: 1000px) {
  .site-wrapper {
    max-width: 820px;
    padding: 36px 32px 64px;
  }
}

/* ≥ 1200px: even larger — composition gets editorial breathing space. */
@media (min-width: 1200px) {
  body {
    background:
      radial-gradient(ellipse at 50% 0%, var(--jaxco-cream-deep) 0%, var(--jaxco-cream) 55%, #ece6db 100%);
  }
  .site-wrapper {
    max-width: 940px;
    background: var(--jaxco-paper);
    box-shadow:
      0 0 0 1px var(--jaxco-line-soft),
      0 1px 0 0 rgba(255,255,255,0.6) inset,
      0 2px 4px rgba(60,50,30,0.04),
      0 14px 44px rgba(60,50,30,0.08);
    border-radius: 2px;
    padding: 48px 44px 80px;
    margin: 36px auto 56px;
  }
  .site-footer { background: transparent; padding: 28px 16px 36px; }
}

/* ≥ 1440px: comfortable wide-desktop scale. */
@media (min-width: 1440px) {
  .site-wrapper {
    max-width: 1080px;
    padding: 56px 56px 96px;
    margin: 44px auto 64px;
  }
}

/* ≥ 1700px: the design takes its full editorial scale. */
@media (min-width: 1700px) {
  .site-wrapper {
    max-width: 1200px;
    padding: 64px 64px 112px;
    margin: 52px auto 72px;
  }
}

/* ≥ 1920px: keep composed at ultra-wide — don't grow forever. */
@media (min-width: 1920px) {
  .site-wrapper {
    max-width: 1280px;
    margin: 60px auto 84px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .site-header,
  .home-hero,
  .about-copy,
  .portfolio-intro,
  .contact-intro,
  .contact-form-wrap,
  .portfolio-section { opacity: 1; transform: none; }
}

/* Visually hidden helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}