/* Hallmark · shape: Letter and field notes · genre: editorial · theme: brand (pinned by user) · redesign: full
 * paper: Paper · accent: Wax · display: Fraunces · body: Geist · hero: Stage · nav: quiet masthead · footer: letter close · signature: the letter as a research-led introduction
 * axes: paper/serif/wax · posture: restrained · job: hire · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, replace generic stationery positioning with prospect research translated into physical outreach */
/* Hallmark · waive 65 · brand pinned by user · Offline Outbound retains its established Fraunces, Paper and Wax identity, explicitly preserved in this redesign. */
/* Hallmark · reworded "pipeline where attention still lives." to "Turn prospect insight into offline attention." · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "something worth taking a moment for." to "Relevance, beyond the screen." · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "your audience. your voice. a campaign we run together." to "The research shapes what arrives." · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "start with the right people." to "Understand the person" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "give the letter a reason." to "Find the right angle" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "review every detail." to "Make it tangible" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "bring it to the mailbox." to "Make the response count" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "when the right conversation matters." to "For considered B2B outreach." · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "a focused target list" to "A defined audience" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "an offer worth explaining" to "Relationships worth pursuing" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "a team ready to respond" to "A team ready to respond, retained as a definition term" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · reworded "tell us who you want to reach." to "Who is worth reaching differently?" · user requested research-led physical attention positioning and deeper personalization on November 6. */
/* Hallmark · hero-review: subagent, ship, 0 findings · finish-review: subagent, ship, 0 material findings · gap: none */
/* Hallmark · answered F18 · The letter specimen is authored HTML; the production CSP disables scripts, so replacement is a source edit rather than a runtime slot control. */
@import url('./tokens.css');
@import url('./base.css');

html { scroll-behavior: smooth; }
body { font-synthesis: none; }
a, summary { -webkit-tap-highlight-color: var(--color-clear); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
a:hover { text-decoration-color: var(--color-accent); }
a:active { text-decoration-thickness: 2px; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; z-index: var(--z-raised); inset: var(--space-md) auto auto var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.skip:focus { transform: translateY(0); outline-color: var(--wax); }
.site-header { border-bottom: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 96px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; white-space: nowrap; }
.wordmark img { flex-shrink: 0; width: 44px; height: 33px; }
.wordmark > span { font-family: var(--font-display); font-size: 24px; line-height: 1.2; letter-spacing: -0.035em; }
.wordmark b { font-weight: 500; color: var(--wax); }
.site-header nav { display: flex; align-items: center; gap: var(--space-xl); font-size: var(--text-sm); }
.site-header nav a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; white-space: nowrap; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-contact { color: var(--wax); }
.hero { min-height: calc(100svh - 96px); display: grid; align-items: center; padding-block: var(--space-2xl); }
.opening-layout { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { max-width: 11ch; line-height: 1.04; }
.hero .lede { font-size: var(--text-lead); line-height: 1.6; max-width: 37ch; margin-top: var(--space-lg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: var(--space-sm) var(--space-lg); border: 1px solid var(--wax); border-radius: var(--radius-card); background: var(--wax); color: var(--paper); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none; }
.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.button:active { transform: translateY(1px); }
.text-link { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--text-sm); white-space: nowrap; text-underline-offset: 6px; }
.letter-scene { min-width: 0; margin: 0; padding: var(--space-lg) 0; }
.letter { min-height: 480px; display: flex; flex-direction: column; background: var(--color-letter); border: 1px solid var(--line); padding: var(--space-xl); }
.letter-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
.letter-meta img { width: 36px; height: 27px; }
.handwriting { padding-block: var(--space-lg); font-family: var(--font-outlier); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.4; }
.handwriting p + p { margin-top: var(--space-md); }
.handwriting .signature { color: var(--wax); font-size: 36px; }
.letter-bottom { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
.letter-scene figcaption { margin-top: var(--space-md); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.section-lede { font-size: var(--text-lead); line-height: 1.65; max-width: 48ch; }
.introduction { padding-block: var(--section-gap-s); background: var(--cream); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gap-columns); }
.intro-grid h2 { max-width: 15ch; font-size: clamp(2.5rem, 5.5vw, 4.5rem); }
.process, .formats, .questions { padding-block: var(--section-gap); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.section-heading h2 { max-width: 17ch; }
.process-list { list-style: none; padding: 0; margin: var(--space-2xl) 0 0; counter-reset: process; }
.process-list li { counter-increment: process; display: grid; grid-template-columns: 48px minmax(0, 0.8fr) minmax(0, 1fr); align-items: baseline; gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--line); }
.process-list li::before { content: counter(process, decimal-leading-zero); color: var(--wax); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.process-list p { color: var(--color-ink-2); line-height: 1.65; }
.formats { background: var(--ink); color: var(--paper); }
.formats-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.formats article { border-block: 1px solid var(--color-dark-rule); padding-block: var(--space-xl); }
.formats h3 { font-size: clamp(2rem, 3vw, 2.75rem); }
.formats p { margin-top: var(--space-lg); max-width: 45ch; font-size: var(--text-lead); line-height: 1.75; }
.fit { padding-block: var(--section-gap-s); }
.fit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
.fit h2 { max-width: 14ch; }
.fit-list { margin: 0; }
.fit-list div { padding-block: var(--space-lg); border-bottom: 1px solid var(--line); }
.fit-list div:first-child { padding-top: 0; }
.fit-list dt { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.2; }
.fit-list dd { margin: var(--space-sm) 0 0; color: var(--color-ink-2); }
.questions { background: var(--cream); }
.questions-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap-columns); align-items: start; }
.question-intro { font-size: var(--text-md); color: var(--color-ink-2); margin-top: var(--space-lg); max-width: 34ch; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:not([open]) > :not(summary) { display: none; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); cursor: pointer; list-style: none; padding-block: var(--space-lg); font-size: var(--text-md); font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex-shrink: 0; color: var(--wax); font-size: 24px; font-weight: 400; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list summary:hover { color: var(--wax); }
.faq-list summary:active { text-decoration: underline; text-underline-offset: 4px; }
.faq-list details p { color: var(--color-ink-2); line-height: 1.75; padding: 0 0 var(--space-lg); }
.contact { padding-block: var(--section-gap); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: var(--gap-columns); }
.contact h2 { font-size: clamp(2.5rem, 5.2vw, 4.75rem); max-width: 16ch; }
.contact p { margin-top: var(--space-lg); font-size: var(--text-lead); max-width: 45ch; }
.contact-action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); padding-bottom: var(--space-xs); }
.email-address { font-size: var(--text-md); text-underline-offset: 6px; }
.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-xl); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.site-footer .wordmark > span { font-size: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); color: var(--muted); font-size: var(--text-sm); }
.footer-links a { white-space: nowrap; }
.privacy { padding-block: var(--space-3xl); }
.privacy .wrap { max-width: 848px; }
.privacy h1 { font-size: var(--text-section); }
.privacy h2 { font-size: var(--text-title); margin-top: var(--space-xl); }
.privacy p { line-height: 1.75; margin-top: var(--space-lg); }
.privacy .updated { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-md); }
@media (max-width: 60rem) {
  .site-header nav { gap: var(--space-lg); }
  .hero { min-height: auto; padding-block: var(--space-2xl); }
  .opening-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); }
  .hero h1 { font-size: clamp(2.75rem, 5.5vw, 3.5rem); }
  .letter { padding: var(--space-lg); min-height: 440px; }
  .letter-meta { font-size: var(--text-xs); }
  .handwriting { font-size: 26px; }
  .actions { gap: var(--space-md); }
  .process-list li { grid-template-columns: 32px minmax(0, 0.9fr) minmax(0, 1fr); }
  .footer-row { flex-wrap: wrap; }
}
@media (max-width: 45rem) {
  .nav-row { flex-wrap: wrap; padding-block: var(--space-lg); gap: var(--space-md); }
  .site-header nav { width: 100%; justify-content: space-between; gap: var(--space-sm); }
  .site-header nav a { min-height: 36px; }
  .hero { padding-block: var(--space-xl); }
  .opening-layout, .intro-grid, .section-heading, .formats-grid, .fit-grid, .questions-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .opening-layout { gap: var(--space-xl); }
  .hero h1 { font-size: clamp(2.75rem, 10.8vw, 4.75rem); max-width: 12ch; }
  .hero .lede { font-size: 18px; max-width: 36ch; }
  .actions { gap: var(--space-lg); margin-top: var(--space-lg); }
  .letter-scene { padding-block: 0; max-width: 480px; width: 100%; margin-inline: auto; }
  .letter { min-height: 400px; }
  .handwriting { font-size: 28px; }
  .letter-meta { font-size: var(--text-sm); }
  .introduction, .process, .formats, .fit, .questions, .contact { padding-block: var(--section-gap-s); }
  .intro-grid, .section-heading, .fit-grid, .questions-grid, .contact-grid { gap: var(--space-xl); }
  .formats-grid { gap: var(--space-2xl); margin-top: var(--space-xl); }
  .process-list { margin-top: var(--space-xl); }
  .process-list li { grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-sm) var(--space-md); padding-block: var(--space-lg); }
  .process-list p { grid-column: 2; }
  .process-list h3 { font-size: 26px; }
  .fit-list div:first-child { padding-top: var(--space-lg); border-top: 1px solid var(--line); }
  .contact-action { padding-bottom: 0; }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: var(--space-md) var(--space-lg); }
  .privacy { padding-block: var(--space-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}