/* Hallmark · shape: Split Studio (draw 6b78cf) · genre: editorial · theme: Almanac (deal 2/3, seed freelance-data-analyst-personal-48e4·aeb33103·2026-10-28·r0) · redesign: full · job: hire
 * hero: Banner · nav: floating pill · footer: letter close · imagery: the product, 3 sample dashboards (the owner's own PNG/WebP) and the owner's portrait in About · signature: the three sample dashboards printed on the pale sheet, each beside the question it answers
 * axes: mid/grotesk-sans/chromatic-magenta · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, a portfolio plus an offer has no argument of its own; led with the work and the question each dashboard answers instead of a claim */
/* Hallmark · hero-review: in-thread · fix · 2 findings · 2 resolved · finish-review: in-thread · fix · 2 findings · 2 resolved · gap: none */
/* Hallmark · waive 59 · one 82px gap, Banner hero to portfolio, parted by a 2px rule · the Banner hero sits close so the first sample dashboard shows in the first screen */
/* Hallmark · reworded "data analyst/dashboard builder based in orange county, ca." to "Joseph Yi, data analyst in Orange County" · 58 caps the hero head at seven words */
/* Hallmark · reworded "about" to "Ten years of SQL and Python" · craft 6 asks a head to say what the visitor gets */
/* Hallmark · reworded "portfolio: sample dashboards" to "Sample dashboards" · craft 6 refuses the colon title */
/* Hallmark · reworded "data sprint: fixed-price dashboards and spreadsheet cleanup" to "Data Sprint, at a fixed price" · craft 6 refuses the colon title */
/* Hallmark · reworded "two fixed-price offers" to the offer table caption · the table now names both offers in its head row */
/* Hallmark · reworded "dashboard sprint", "spreadsheet rescue" to the offer table column heads · one comparison table replaces the two cards */
/* Hallmark · reworded "how it works" to "From messy files to a working dashboard" · craft 6 asks a head to say what the visitor gets */
/* Hallmark · reworded "delivery + walkthrough" to "Delivery and walkthrough" · unslop prefers words to symbols in a heading */
/* Hallmark · reworded "tools and things we can build" to "What I can build from the data you already have" · the tools moved into the About facts list */
/* Hallmark · reworded "bookings & revenue", "listings & enrollment" to "Bookings and revenue", "Listings and enrollment" · unslop prefers words to symbols */
/* Hallmark · reworded "faq" to "Questions before a project" · craft 6 refuses a bare category label */
/* Hallmark · reworded "policies", "refunds & cancellation" to "Policies in plain language", "Refunds and cancellation" · craft 6 refuses a bare category label */
/* Hallmark · dropped contact details · the same email, location, hours and response time now sit as a facts list under Start a project */
/* Hallmark · answered F1 · the owner's copy follows the unslop house rule, which asks for straight quotes and apostrophes */
@import url("./tokens.css");
@import url("./base.css");

body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); }
a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-underline-offset: 0.15em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
a:active { text-decoration-color: var(--color-accent-2); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* nav: a floating bar on the sheet */
.nav { position: sticky; top: var(--space-sm); z-index: var(--z-sticky-nav); padding-inline: var(--gutter); }
.nav__bar { max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 56px; padding-inline: var(--space-lg); background: var(--color-sheet); outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; border-radius: var(--radius-pill); }
.wordmark { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav ul { display: flex; align-items: center; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav li a { font: 500 var(--text-sm)/1 var(--font-display); text-decoration: none; white-space: nowrap; color: var(--color-ink-2); }
.nav li a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav li a.nav__act { display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--space-md); outline: var(--rule-hair) solid var(--color-ink); outline-offset: -1px; border-radius: var(--radius-pill); color: var(--color-ink); }
.nav li a.nav__act:focus-visible, .nav li a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 48rem) { .nav .hide-sm { display: none; } .nav ul { gap: var(--space-md); } }

/* controls */
.btn { display: inline-flex; align-items: center; height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

/* grid */
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); }
section { padding-block: var(--section-gap); }
.head { grid-column: 1 / span 7; display: grid; gap: var(--space-md); align-content: start; }
.head .lead { color: var(--color-ink-2); }

/* hero: banner */
.hero { padding-block: var(--space-2xl) var(--space-xl); }
.hero h1 { grid-column: 1 / span 8; grid-row: 1 / span 2; align-self: end; max-width: 22ch; letter-spacing: -0.035em; line-height: 0.98; }
.hero .lead { grid-column: 9 / span 4; grid-row: 1; align-self: end; }
.hero .actions { grid-column: 9 / span 4; grid-row: 2; align-self: end; }
.hero .cols { row-gap: var(--space-lg); }

/* the sheet */
.sheet { background: var(--color-sheet); border-top: var(--rule-bar) solid var(--color-ink); }

/* portfolio rows: text left, the dashboard on the sheet right */
#portfolio { padding-top: var(--space-xl); border-top: var(--rule-bar) solid var(--color-rule-2); }
.work-list { display: grid; gap: var(--space-3xl); margin-top: var(--space-xl); }
.head--split { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.head--split h2 { grid-column: 1 / span 5; }
.head--split .lead { grid-column: 7 / span 6; }
.work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: start; }
.work__text { grid-column: 1 / span 4; display: grid; gap: var(--space-md); }
.work__fig { grid-column: 5 / span 8; margin: 0; padding: var(--space-md); }
.work:not(:first-child) .work__text { grid-column: 1 / span 5; }
.work:not(:first-child) .work__fig { grid-column: 6 / span 7; }
.work__q { font: 500 var(--text-lead)/1.35 var(--font-body); color: var(--color-ink); }
.work__desc { font-size: var(--text-md); color: var(--color-ink-2); }
.work__fig a { display: block; }
.work__fig img { width: 100%; height: auto; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; }
.work__fig figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* about */
#about { border-top: var(--rule-hair) solid var(--color-rule); }
.about__text { grid-column: 1 / span 6; display: grid; gap: var(--space-md); align-content: start; }
.facts { grid-column: 8 / span 5; margin: 0; padding: var(--space-lg); }
.about__text .facts { grid-column: auto; margin-top: var(--space-md); padding: 0; }
.portrait { grid-column: 8 / span 5; margin: 0; align-self: start; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; outline: var(--rule-hair) solid var(--color-rule-2); outline-offset: -1px; border-radius: var(--radius-card); background: var(--color-paper-2); }
.facts div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.uses { margin-top: var(--space-3xl); }
.uses h3 { font-size: var(--text-title); }
.uses ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
.uses li { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xs); align-content: start; }
.uses h4 { margin: 0; font: 600 var(--text-lg)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }

/* data sprint band */
.band { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); }
#data-sprint { padding-block: var(--section-gap-s); }
#data-sprint .head { margin-bottom: var(--space-2xl); }
.offers { width: 100%; border-collapse: collapse; }
.offers-wrap { padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.offers caption { text-align: left; padding-bottom: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.offers th, .offers td { text-align: left; vertical-align: top; padding: var(--space-md) var(--space-lg) var(--space-md) 0; }
.offers thead th { font: 600 var(--text-title)/1.2 var(--font-display); color: var(--color-ink); border-bottom: var(--rule-bar) solid var(--color-rule-2); padding-bottom: var(--space-md); }
.offers thead th:first-child { width: 18%; }
.offers tbody th { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.offers tbody tr + tr > * { border-top: var(--rule-hair) solid var(--color-rule); }
.offers ul { margin: 0; padding-left: var(--space-md); }
.offers li + li { margin-top: var(--space-2xs); }
.offers .offer__eg { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.price { font: 500 var(--text-display-s)/1 var(--font-outlier); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.price small { font: 400 var(--text-sm)/1 var(--font-body); letter-spacing: 0; color: var(--color-muted); margin-left: var(--space-xs); }
.offers .num { font-family: var(--font-outlier); }

/* how it works: the ink band */
.band--ink { background: var(--color-ink); color: var(--color-paper); }
.band--ink h2, .band--ink h3 { color: var(--color-sheet); }
.band--ink .lead, .band--ink p { color: var(--color-paper); }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-muted); }
.steps li::before { content: counter(step); font: 500 var(--text-3xl)/1 var(--font-outlier); font-variant-numeric: tabular-nums; color: var(--color-sheet); }

/* faq: head left, rows right */
.faq__head { grid-column: 1 / span 4; display: grid; gap: var(--space-md); align-content: start; }
.faq__list { grid-column: 5 / span 8; border-top: var(--rule-bar) solid var(--color-rule-2); }
details { border-bottom: var(--rule-hair) solid var(--color-rule); }
summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); font: 500 var(--text-lg)/1.3 var(--font-display); color: var(--color-ink); cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-outlier); color: var(--color-accent); flex-shrink: 0; }
details[open] summary::after { content: "\2212"; }
summary:hover { color: var(--color-accent-2); }
summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
details p { padding-bottom: var(--space-lg); }

/* policies: three columns parted by hairlines */
#policies { border-top: var(--rule-hair) solid var(--color-rule); }
.policy-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2xl); }
.policy { display: grid; gap: var(--space-sm); align-content: start; padding-inline: var(--space-xl); border-left: var(--rule-hair) solid var(--color-rule); }
.policy:first-child { padding-left: 0; border-left: 0; }
.policy:last-child { padding-right: 0; }
.policy ul { margin: 0; padding-left: var(--space-md); display: grid; gap: var(--space-xs); }
.policy p, .policy li { font-size: var(--text-md); }

/* contact: facts left, the form on the sheet right */
#contact { padding-block: var(--section-gap-l) var(--section-gap); border-top: var(--rule-bar) solid var(--color-rule-2); }
.contact__text { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); align-content: start; }
.contact__text .facts { grid-column: auto; padding: 0; background: transparent; }
.form { grid-column: 7 / span 6; display: grid; gap: var(--space-xs); padding: var(--space-xl); }
.form label { margin-top: var(--space-sm); font: 500 var(--text-sm)/1.3 var(--font-body); color: var(--color-ink); }
.form label:first-of-type { margin-top: 0; }
.form input, .form select, .form textarea { width: 100%; height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--color-ink-2); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.form input:disabled, .form select:disabled, .form textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.form textarea { height: auto; min-height: 160px; padding-block: var(--space-sm); resize: vertical; }
.form .btn { justify-self: start; margin-top: var(--space-md); }
.form .note { font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }
.form .hp { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; }

/* footer: a letter close */
.foot { padding-block: var(--space-3xl) var(--space-2xl); border-top: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-2); }
.foot__sign { grid-column: 1 / span 6; display: grid; gap: var(--space-sm); align-content: start; }
.foot__sign .signoff { font: 600 var(--text-section)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.foot__legal { grid-column: 8 / span 5; display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); }
.foot__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: var(--space-xl) 0 0; padding: var(--space-md) 0 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); }
.foot__links a { white-space: nowrap; }

/* booking dialog: the contact form on the sheet, opened by the Book buttons */
.book { width: calc(100% - 2 * var(--space-md)); max-width: 36rem; max-height: calc(100dvh - 2 * var(--space-md)); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 0; border-top: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-card); color: var(--color-ink); }
.book::backdrop { background: color-mix(in oklab, var(--color-ink) 55%, transparent); }
.book__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-xl) 0; }
.book__head h2 { margin: 0; font-size: var(--text-xl); }
.book__close { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-xl)/1 var(--font-display); cursor: pointer; }
.book__close:hover { background: var(--color-paper-2); }
.book__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.book .form { padding-top: var(--space-lg); }
.book .form textarea { min-height: 120px; }
html:has(.book[open]) { overflow: hidden; }
@media (max-width: 40rem) { .book__head { padding: var(--space-md) var(--space-lg) 0; } }

@media (max-width: 60rem) {
  .hero h1, .hero .lead, .hero .actions { grid-row: auto; }
  .portrait { grid-column: 1 / -1; max-width: 32rem; }
  .head--split h2, .head--split .lead, .hero h1, .hero .lead, .hero .actions, .head, .about__text, .facts, .faq__head, .faq__list, .contact__text, .form, .foot__sign, .foot__legal { grid-column: 1 / -1; }
  .work__text, .work__fig, .work:not(:first-child) .work__text, .work:not(:first-child) .work__fig { grid-column: 1 / -1; }
  .uses ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .policy-row { grid-template-columns: minmax(0, 1fr); }
  .policy, .policy:first-child { padding: var(--space-lg) 0 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .policy + .policy { margin-top: var(--space-lg); }
  .offers-wrap { padding: var(--space-md); }
  .offers thead { display: none; }
  .offers, .offers caption, .offers tbody, .offers tr, .offers th, .offers td { display: block; width: 100%; }
  .offers tbody tr { padding-block: var(--space-sm); }
  .offers tbody tr + tr > * { border-top: 0; }
  .offers tbody tr + tr { border-top: var(--rule-hair) solid var(--color-rule); }
  .offers th, .offers td { padding: var(--space-2xs) 0; }
  .offers td::before { content: attr(data-offer); display: block; font: 600 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); margin-top: var(--space-xs); }
}
@media (max-width: 40rem) {
  .uses ul, .steps { grid-template-columns: minmax(0, 1fr); }
  .nav__bar { padding-inline: var(--space-md); }
  .form { padding: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) { .btn, a { transition: none; } }