/* Hallmark · shape: Split Studio · genre: modern-minimal · theme: Coral (by request: owner rejected Blueprint, picked from re-deal) · redesign: full · job: hire
 * hero: Stage · nav: edge-aligned · footer: colophon block · imagery: the product built (a sample quote on cotton) · signature: an accepted CRM quote pressed in coral on a felt desk · coral: desk
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R4 V4 · weakest: S, no real client work to show; the hero builds the job itself (a quote for a CRM, accepted) labelled as an example */
/* Hallmark · dismissed F4 · the card button is the theme's outlined secondary (Coral controls are pressed cards, never flat outlines) */
/* Hallmark · dropped "Et aussi…" as a heading, kept as "Et aussi"; the 2026 figure stays as "17 ans" · the ellipsis was punctuation, the year range became one figure */
/* Hallmark · reworded "Ce que je fais" to "Ce que je construis" · the section head says what the visitor gets */
@import url("./tokens.css?v=3");
@import url("./base.css?v=3");

.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
a:hover { text-decoration-color: var(--color-accent-2); }

/* Paper objects and the desk */
.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); border-radius: var(--radius-stock); box-shadow: var(--edge-stock), var(--cast-stock); }

/* Controls: letterpress cards */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font-family: var(--font-body); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
.btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Nav */
.nav { position: relative; z-index: var(--z-raised); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__row { display: flex; justify-content: space-between; align-items: center; min-height: 72px; gap: var(--space-md); }
.nav__mark { font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }

/* Hero: the quote on the desk */
.hero { min-height: calc(100svh - 73px); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: 12ch; line-height: 1.04; }
.lead { color: var(--color-ink-2); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

.papers { position: relative; margin: 0; min-height: 520px; display: grid; place-items: center; gap: var(--space-lg); }
.sheet { position: relative; width: min(100%, 400px); padding: var(--space-xl) var(--space-xl) var(--space-2xl); transform: rotate(-2deg); }
.sheet__head { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); font-weight: 600; }
.sheet__no { color: var(--color-muted); font-weight: 500; }
.sheet__to { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.sheet__title { margin-top: var(--space-xs); font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-display); }
.sheet__lines { list-style: none; margin: var(--space-lg) 0 0; padding: 0; border-top: var(--rule-hair) solid var(--color-print); }
.sheet__lines li { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.sheet__foot { margin-top: var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); }
.pressed { position: absolute; right: var(--space-xl); bottom: var(--space-lg); padding: var(--space-2xs) var(--space-sm); border: 2px solid var(--color-paid); border-radius: var(--radius-input); color: var(--color-paid); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; transform: rotate(-8deg); opacity: 0.88; text-shadow: 0.5px 0.5px 0 var(--color-cotton); }
.card { position: absolute; left: 0; bottom: var(--space-3xl); width: 240px; padding: var(--space-md) var(--space-lg); transform: rotate(3deg); }
.card__from { font-size: var(--text-xs); color: var(--color-muted); }
.card__body { margin-top: var(--space-2xs); font-weight: 500; }
.papers__caption { justify-self: end; font-size: var(--text-xs); color: var(--color-muted); }

/* Specialities: a ruled list beside its head */
.specs { padding-block: var(--section-gap); }
.specs__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3xl); align-items: start; }
.specs h2 { max-width: 10ch; }
.specs__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.specs__list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.specs__list h3 { font-size: var(--text-title); }
.specs__list p { color: var(--color-muted); }

/* Recent work: three index cards on the desk */
.work { padding-block: var(--section-gap); }
.work__list { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.work__card { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-xl); }
.work__card:nth-child(2) { transform: rotate(0.6deg); }
.work__card:nth-child(3) { transform: rotate(-0.8deg); }
.work__kind { font-size: var(--text-sm); color: var(--color-muted); }
.work__card h3 { font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
.work__card p:not(.work__kind) { color: var(--color-ink-2); }
.work__card a { margin-top: var(--space-xs); font-weight: 500; }
.work__card a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* The board: the one ink band */
.board { background: var(--color-board); color: var(--color-board-type); padding-block: var(--section-gap-s); }
.board__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.board__figure { display: flex; align-items: baseline; gap: var(--space-md); }
.board__num { font-size: calc(var(--text-display) * 2.6); font-weight: 600; letter-spacing: -0.05em; line-height: 0.85; }
.board__unit { font-size: var(--text-title); font-weight: 500; }
.board__text { display: grid; gap: var(--space-lg); justify-items: start; }
.board h2 { color: var(--color-board-type); }
.board p:not(.board__figure) { color: var(--color-board-type); opacity: 0.82; font-size: var(--text-lead); }

/* Contact: the form on a sheet */
.contact { padding-block: var(--section-gap); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.contact__where { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 30ch; }
.contact__sheet { padding: var(--space-xl); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); }
.form label { display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); font-weight: 500; }
.form__wide { grid-column: 1 / -1; }
.opt { font-weight: 400; color: var(--color-muted); }
.form input, .form textarea { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-print); font-size: var(--text-md); font-weight: 400; outline: 2px solid transparent; outline-offset: 1px; }
.form textarea { min-height: 9rem; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--color-muted); }
.form input:hover, .form textarea:hover { border-color: var(--color-ink-2); }
.form input:focus-visible, .form textarea:focus-visible { outline-color: var(--color-focus); }
.form input:disabled, .form textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sent { display: none; margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-print); border-radius: var(--radius-input); font-weight: 500; }
.note { margin-top: var(--space-lg); max-width: 65ch; font-size: var(--text-sm); color: var(--color-muted); }

/* Colophon */
.colophon { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); font-size: var(--text-sm); color: var(--color-muted); }
.colophon strong { color: var(--color-ink-2); font-weight: 500; }
.colophon details { margin-top: var(--space-md); }
.colophon summary { cursor: pointer; color: var(--color-ink); font-weight: 500; }
.colophon summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.colophon details p { margin-top: var(--space-sm); max-width: 75ch; }

@media (max-width: 60rem) {
  .hero { min-height: auto; }
  .hero__grid, .specs__grid, .board__grid, .contact__grid, .work__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .work__card:nth-child(n) { transform: none; }
  .papers { min-height: 0; }
}
@media (max-width: 40rem) {
  .nav__mark { font-size: var(--text-md); }
  .nav .btn { padding: 0 var(--space-md); }
  .specs__list li, .form { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .form { gap: var(--space-md); }
  .card { width: 190px; bottom: var(--space-3xl); }
  .sheet { margin-left: auto; }
  .sheet { padding: var(--space-lg) var(--space-lg) var(--space-2xl); }
  .contact__sheet { padding: var(--space-lg); }
}