/* Layout: balanced split hero (text left, Amy's photo right on a taupe anchor), then compact alternating bands:
   about, recent work, what I build, how we work and pricing, contact on burgundy, black footer.
   Brand board: cream, taupe, deep burgundy, black, gold. Two type families only:
   Cormorant for headlines and the name, Jost for everything else. One committed light look. */
/* Fonts are served from this site, so visitors' browsers make no third-party requests.
   Cormorant and Jost, SIL Open Font License 1.1 (see fonts/OFL-*.txt). */
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("fonts/cormorant-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/cormorant-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --cream: #f6f0e6;
  --paper: #fbf8f2;
  --taupe: #ddd1c1;
  --taupe-deep: #b9a790;
  --burgundy: #4a1218;
  --burgundy-hover: #5e1a22;
  --ink: #1a1414;
  --muted: #5d524d;
  --gold: #bf9a60;
  --gold-soft: #d8bf91;
  --line: #e2d6c6;

  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --h1: clamp(2.6rem, 5vw, 4.25rem);
  --h2: clamp(2rem, 3.4vw, 2.8rem);
  --body: 1.0625rem;
  --small: 0.92rem;
  --pad: clamp(3.25rem, 6vw, 5rem);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--sans); font-weight: 400; font-size: var(--body); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--burgundy); text-underline-offset: 0.22em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; }
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: max(16px, 4vw); }

/* Shared text styles */
.eyebrow {
  font: 500 0.76rem/1.4 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}
.rule { display: block; width: 3rem; height: 1px; background: var(--gold); border: 0; margin: 1rem 0 1.4rem; }
h1, h2 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
h2 { font-size: var(--h2); line-height: 1.1; }
h3 { font: 500 1.08rem/1.35 var(--sans); letter-spacing: 0.01em; }
.sec-head { max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 2.75rem); text-align: center; }
.sec-head .rule { margin-inline: auto; }
.sec-head p:not(.eyebrow) { margin-top: 1rem; color: var(--muted); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  background: var(--burgundy); color: var(--cream); text-decoration: none;
  font: 500 0.78rem/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1.1rem 1.7rem; border: 1px solid var(--burgundy); border-radius: 0; cursor: pointer;
}
.button:hover { background: var(--burgundy-hover); border-color: var(--burgundy-hover); }
.button.ghost { background: transparent; color: var(--burgundy); }
.button.ghost:hover { background: var(--burgundy); color: var(--cream); }
.button.small { padding: 0.85rem 1.25rem; font-size: 0.72rem; }

/* Header: brand | centered nav | button */
.site-head .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem;
  padding-block: 1.2rem;
}
.brand { justify-self: start; display: flex; align-items: center; gap: 0.85rem; color: var(--ink); text-decoration: none; }
.brand img { height: 3.1rem; width: auto; }
.brand span { font: 500 1.38rem/1 var(--serif); letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap; padding-top: 0.25em; }
.nav { display: flex; gap: 2.25rem; }
.nav a {
  color: var(--ink); text-decoration: none; font: 500 0.72rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase;
  padding-block: 0.55rem; border-bottom: 1px solid transparent;
}
.nav a:hover { border-color: var(--gold); }
.head-cta { justify-self: end; }

/* Hero */
.hero { background: linear-gradient(90deg, var(--cream) 0 63%, var(--taupe) 63% 100%); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 4.5vw, 3.75rem);
}
.hero h1 { font-size: var(--h1); line-height: 1.04; letter-spacing: -0.005em; }
.hero h1 em { font-style: italic; color: var(--burgundy); }
.lede { margin-top: 1.5rem; font-size: 1.14rem; max-width: 36ch; }
.ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.9rem; max-width: 30rem; margin-top: 2.1rem; }
.ctas .button { padding-inline: 1.4rem; white-space: nowrap; }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 584 / 760; box-shadow: 0 28px 50px -28px rgba(26, 20, 20, 0.45); }

/* About */
.about { background: var(--paper); border-block: 1px solid var(--line); padding-block: var(--pad); }
.about .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about-intro p + p { margin-top: 1rem; }
.about-intro h2 { margin-bottom: 1.4rem; }
.hats { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.9rem; }
.hats::before { content: ""; position: absolute; left: 6px; top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--gold); }
.hats li { position: relative; padding-left: 2.25rem; }
.hats li::before { content: ""; position: absolute; left: 2px; top: 0.22rem; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.hats .eyebrow { color: var(--burgundy); font-size: 0.7rem; }
.hats h3 { margin-top: 0.3rem; }
.hats p { margin-top: 0.2rem; color: var(--muted); font-size: var(--small); }

/* Recent work */
.work { padding-block: var(--pad); }
.work h2.lined {
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: 0.3em; text-transform: uppercase;
}
.work h2.lined::before, .work h2.lined::after { content: ""; width: 3rem; height: 1px; background: var(--ink); flex: none; }
.work-list { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); }
.work-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; }
.work-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); }
.work-row:nth-child(even) .browser { order: 2; }
.browser { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 22px 40px -30px rgba(26, 20, 20, 0.5); overflow: hidden; }
a.browser:hover { border-color: var(--gold); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); background: var(--cream); }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--taupe-deep); opacity: 0.7; }
.browser-bar .url { margin-left: 0.6rem; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); }
.browser img { width: 100%; height: auto; aspect-ratio: 1200 / 519; max-width: 100%; object-fit: cover; }
.work-meta .eyebrow { color: var(--burgundy); font-size: 0.7rem; }
.work-meta h3 { font-size: 1.3rem; margin-top: 0.45rem; }
.work-meta p:not(.eyebrow) { color: var(--muted); font-size: var(--small); margin-top: 0.45rem; }
.text-link {
  display: inline-flex; gap: 0.4rem; margin-top: 0.55rem; color: var(--burgundy); text-decoration: none;
  font: 500 0.74rem/1.6 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; border-bottom: 1px solid var(--gold);
}
.text-link:hover { color: var(--ink); }
.status { display: inline-block; margin-top: 0.55rem; font: 500 0.7rem/1.6 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* What I build */
.build { background: var(--paper); border-block: 1px solid var(--line); padding-block: var(--pad); }
.build-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.build-grid article { text-align: center; padding: 0.5rem 0.5rem 0; }
.build-grid .mark { display: block; height: 2.9rem; width: auto; margin: 0.25rem auto 1.25rem; }
.build-grid svg { display: block; width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem; stroke: var(--gold); fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.build-grid p { margin-top: 0.45rem; color: var(--muted); font-size: var(--small); max-width: 30ch; margin-inline: auto; }
.scope { margin: clamp(2rem, 4vw, 2.75rem) auto 0; max-width: 46rem; text-align: center; font-size: var(--small); color: var(--muted); }

/* How we work: a line icon for each step, arrows between them, and the last step on a burgundy tile */
.how { background: var(--taupe); padding-block: var(--pad); }
.how .eyebrow { color: var(--burgundy); }
.how .sec-head p:not(.eyebrow) { color: var(--ink); }
.flow { --icon: 3.6rem; --gap: 1.75rem; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem var(--gap); }
.flow li { position: relative; text-align: center; }
.flow .icon { display: grid; place-items: center; width: var(--icon); height: var(--icon); margin: 0 auto 1.1rem; }
.flow svg { width: 2.8rem; height: 2.8rem; stroke: var(--burgundy); fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.flow .live .icon { background: var(--burgundy); box-shadow: 0 14px 26px -16px rgba(74, 18, 24, 0.8); }
.flow .live svg { stroke: var(--cream); }
.flow li:not(:last-child)::before {
  content: ""; position: absolute; top: calc(var(--icon) / 2); left: calc(50% + var(--icon) / 2 + 0.75rem);
  width: calc(100% + var(--gap) - var(--icon) - 1.5rem); height: 1px; background: var(--burgundy); opacity: 0.55;
}
.flow li:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--icon) / 2 - 4px); left: calc(150% + var(--gap) - var(--icon) / 2 - 0.75rem - 10px);
  width: 8px; height: 8px; border-top: 1px solid var(--burgundy); border-right: 1px solid var(--burgundy); transform: rotate(45deg); opacity: 0.55;
}
.flow p { margin-top: 0.4rem; font-size: var(--small); color: var(--ink); max-width: 26ch; margin-inline: auto; }

/* Pricing gets its own card so it is easy to find */
.pricing {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 44rem; text-align: center;
  background: var(--paper); border: 1px solid var(--gold); padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
  box-shadow: 0 24px 40px -32px rgba(26, 20, 20, 0.55);
}
.pricing .eyebrow { color: var(--burgundy); }
.pricing .rule { margin: 0.8rem auto 1rem; }
.pricing-line { font: italic 500 clamp(1.45rem, 2.6vw, 1.85rem)/1.3 var(--serif); color: var(--burgundy); text-wrap: balance; }
.pricing p:not(.eyebrow):not(.pricing-line) { margin: 0.85rem auto 0; max-width: 36rem; font-size: var(--small); color: var(--muted); }
.pricing .button { margin-top: 1.4rem; }

/* Contact on burgundy */
.contact { background: var(--burgundy); color: var(--cream); padding-block: var(--pad); }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.contact .eyebrow { color: var(--gold-soft); }
.contact .rule { background: var(--gold); }
.contact h2 { color: var(--cream); margin-bottom: 1.2rem; }
.helpful { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(246, 240, 230, 0.2); }
.helpful h3 { color: var(--gold-soft); font-size: 0.76rem; letter-spacing: 0.24em; text-transform: uppercase; }
.helpful ul { margin: 0.7rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.helpful li { position: relative; padding-left: 1.3rem; font-size: var(--small); }
.helpful li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.contact-form { background: var(--paper); color: var(--ink); padding: clamp(1.4rem, 3.5vw, 2.4rem); display: grid; gap: 1.1rem; }
.contact-form a { color: var(--burgundy); }
.req-note { font-size: 0.8rem; color: var(--muted); }
.req { color: var(--burgundy); }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; align-content: end; }
.field label { font: 500 0.7rem/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.field .opt { letter-spacing: 0.04em; text-transform: none; font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  font: 400 1rem/1.5 var(--sans); color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 0; padding: 0.8rem 0.9rem; width: 100%; min-height: 46px;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); outline: 0; }
.field textarea { min-height: 10rem; resize: vertical; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.9rem; line-height: 1.55; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0.15rem 0 0; accent-color: var(--burgundy); }
.fine-print { font-size: 0.78rem; line-height: 1.55; color: var(--muted); margin-top: -0.35rem; }
.send { text-align: center; }
.hp { position: absolute; left: -9999px; }
.form-msg { font-size: var(--small); text-align: center; }
.form-msg.ok { color: var(--burgundy); font-weight: 500; }

/* Footer */
.site-foot { background: var(--ink); color: var(--taupe); }
.site-foot .wrap { display: grid; justify-items: center; gap: 1.1rem; padding-block: 2.75rem; text-align: center; }
.site-foot img { height: 4.6rem; width: auto; }
.site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem; }
.site-foot a { color: var(--gold-soft); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; }
.site-foot a:hover { color: var(--cream); }
.site-foot small { font-size: 0.8rem; color: var(--taupe-deep); }

/* Legal pages */
.legal { padding-block: 2.5rem 4.5rem; max-width: 44rem; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.1; margin-bottom: 0.4rem; }
.legal .updated { margin-bottom: 2.25rem; }
.legal h2 { font-size: 1.6rem; font-weight: 600; margin: 2.2rem 0 0.4rem; }
.legal p, .legal li { max-width: 65ch; }
.legal p + p { margin-top: 0.9rem; }

/* Tablet */
@media (max-width: 60rem) {
  .site-head .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .nav { display: none; }
  .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(2)::before, .flow li:nth-child(2)::after { display: none; }
  .contact .wrap { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
  .contact-intro { text-align: center; }
  .contact-intro .rule { margin-inline: auto; }
  .helpful li { padding-left: 0; }
  .helpful li::before { position: static; display: inline-block; vertical-align: middle; margin: 0 0.6rem 0.15em 0; }
}
/* Small tablet: stack the hero, about and contact, centered */
@media (max-width: 46rem) {
  .hero { background: var(--cream); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero .rule, .lede { margin-inline: auto; }
  .ctas { margin-inline: auto; }
  .hero-photo { width: 100%; max-width: 26rem; margin-inline: auto; }
  .about .wrap { grid-template-columns: minmax(0, 1fr); }
}
/* Phone */
@media (max-width: 40rem) {
  .brand img { height: 2.5rem; }
  .brand span { font-size: 1.05rem; letter-spacing: 0.24em; }
  .head-cta { padding: 0.75rem 0.9rem; font-size: 0.66rem; letter-spacing: 0.16em; }
  .work-row, .work-row:nth-child(even), .build-grid, .row { grid-template-columns: minmax(0, 1fr); }
  .work-row:nth-child(even) .browser { order: 0; }
  .build-grid { gap: 2rem; }
  .flow { --icon: 3.2rem; grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
  .flow li { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); column-gap: 1.1rem; align-items: start; text-align: left; }
  .flow .icon { grid-row: 1 / 3; margin: 0; }
  .flow h3, .flow p { grid-column: 2; }
  .flow p { margin-inline: 0; max-width: none; }
  .flow li:not(:last-child)::before, .flow li:nth-child(2)::before {
    display: block; top: calc(var(--icon) + 0.45rem); left: calc(var(--icon) / 2); width: 1px; height: calc(100% - var(--icon) + 0.7rem);
  }
  .flow li:not(:last-child)::after { display: none; }
  .send .button { width: 100%; }
  .work h2.lined { font-size: 1.3rem; letter-spacing: 0.22em; gap: 0.9rem; }
  .work h2.lined::before, .work h2.lined::after { width: 2rem; }
}