/* Hallmark · shape: Feature Stack, playful pass, square blocks · genre: playful · theme: custom (Loom base, re-toned to the brief and opened into colour panels by the owner's word) · job: book · draw: 675a7b
 * hero: Stage, no action (the brief keeps the call for the close) · nav: edge-aligned, wordmark and four text links · footer: mast · imagery: photographs, library 4, natural, full-width, square crops · signature: the olive path that draws itself between the four first steps, now carried by full-width colour blocks · loom: DM Sans throughout, heads at 700
 * axes: light/grotesk-sans/warm · posture: full-palette (field olive tint, signal clay, seal forest, ink) · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · dismissed 42 · the bar is a wordmark and four plain text links to the brief's four pages, with no action and no rule under it; the button counted is the small-screen menu toggle */
/* Hallmark · waive 59 · the owner asked for tighter gaps so the page scrolls less; block edges and colour changes carry the seams (56 to 72px) instead of 120px+ gaps · gaps between sections shortened by request */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, many colour fields compete; kept to four roles (olive for the field, clay for the signal, forest for the close, stone for rest) and plain text inside every panel */
@import url("./tokens.css");
@import url("./base.css");

:root { --text-read: 1.125rem; }
h1, h2, h3 { line-height: 1.1; }

/* ---------- shared ---------- */
.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); }

.read { font-size: var(--text-read); line-height: 1.6; max-width: 62ch; }
.note { font-size: var(--text-sm); line-height: 1.5; color: var(--color-muted); max-width: 62ch; }
.display-s { font-size: var(--text-display-s); max-width: 26ch; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-xl); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-clay-deep); border-color: var(--color-clay-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

.pill { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 2px solid currentColor; border-radius: var(--radius-pill); font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.pill:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.pill:active { background: var(--color-clay-deep); border-color: var(--color-clay-deep); color: var(--color-paper); }
.pill:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, currentColor 60%, transparent); border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.photo { margin: 0; }
.photo > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

.section { margin-top: var(--section-gap); }
.section--s { margin-top: var(--section-gap-s); }
.section--l { margin-top: var(--section-gap-l); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* ---------- colour blocks ---------- */
.panel { padding-block: var(--section-gap-s); background: var(--color-paper-3); color: var(--color-ink); }
.panel--olive { background: var(--color-olive-tint); }
.panel--stone { background: var(--color-paper-3); }
.panel--clay { background: var(--color-clay-deep); color: var(--color-paper); }
.panel--moss { background: var(--color-olive-deep); color: var(--color-paper); }
.panel--ink { background: var(--color-ink); color: var(--color-paper); }
.panel--clay .lead, .panel--moss .lead, .panel--ink .lead { color: inherit; }
.panel--clay :focus-visible, .panel--moss :focus-visible, .panel--ink :focus-visible { outline-color: var(--color-paper); }
.panel--clay .pill:hover, .panel--moss .pill:hover, .panel--ink .pill:hover { background: var(--color-paper); border-color: var(--color-paper); color: var(--color-ink); }
.panel--clay .fill, .panel--moss .fill, .panel--ink .fill { color: var(--color-paper); }

/* ---------- nav ---------- */
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--banner-height); }
.wordmark { font: 700 var(--text-lg)/1.1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; white-space: nowrap; border-radius: var(--radius-pill); }
.nav__links { display: flex; gap: var(--space-2xs); }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-pill); font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out); }
.nav__links a:hover { background: var(--color-paper-3); }
.nav__links a[aria-current="page"] { background: var(--color-olive-tint); }
.nav__toggle { display: none; min-height: 44px; padding: 0 var(--space-lg); border: 2px solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.nav__toggle:hover { background: var(--color-olive-tint); }
.nav__toggle:active { background: var(--color-sage); }
@media (max-width: 60rem) {
  .nav__in { flex-wrap: wrap; row-gap: 0; }
  .nav__links { flex-basis: 100%; flex-wrap: wrap; padding-bottom: var(--space-md); }
  .nav__links a { font-size: var(--text-read); }
  .js .nav__toggle { display: inline-flex; align-items: center; }
  .js .nav__links { display: none; flex-direction: column; align-items: flex-start; padding-top: var(--space-xs); }
  .js .nav__links.is-open { display: flex; }
}

/* ---------- hero ---------- */
.hero { display: flex; align-items: center; min-height: min(calc(100dvh - var(--banner-height)), 40rem); padding-block: var(--space-xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: center; }
.hero h1 { max-width: none; font-size: clamp(3rem, 5.2vw + 0.5rem, 6.25rem); line-height: 1; }
.hero__role { margin-top: var(--space-lg); font: 700 clamp(1.5rem, 1.6vw + 1rem, 2.25rem)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.hero__tagline { margin-top: var(--space-xl); max-width: 30ch; font: 500 var(--text-xl)/1.3 var(--font-body); }
.hero + .reasons { margin-top: var(--section-gap-s); }
.hero__lead { margin-top: var(--space-md); max-width: 46ch; font-size: var(--text-md); line-height: 1.55; color: var(--color-paper-3); }
.hero__visual { width: 100%; max-width: 27rem; justify-self: end; }
.hero__photo { width: 100%; height: clamp(22rem, 58dvh, 32rem); }
@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .hero__visual { max-width: 24rem; justify-self: start; }
  .hero__photo { height: auto; aspect-ratio: 4 / 5; }
}

/* ---------- 02 the question ---------- */
.question h2 { max-width: 28ch; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 2px solid color-mix(in oklab, currentColor 30%, transparent); }
.cols3 p { font-size: var(--text-read); line-height: 1.6; max-width: 46ch; }

/* ---------- pinned head beside its content ---------- */
.pin__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: var(--space-2xl); }
.pin__body { grid-column: 6 / span 7; }
.pin--even .pin__head { grid-column: 1 / span 6; }
.pin--even .pin__body { grid-column: 8 / span 5; }

/* ---------- tiles: ruled lists as colour ---------- */
.rows { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.rows > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap-columns); align-items: baseline; padding: var(--space-lg) var(--space-xl); background: var(--color-olive-tint); color: var(--color-ink); }
.rows > li:nth-child(3n + 2) { background: var(--color-paper-3); }
.rows > li:nth-child(3n) { background: var(--color-sage); }
.rows p { color: var(--color-ink-2); }
.rows h3 { font-size: var(--text-title); }

/* ---------- 03 reasons ---------- */
.reasons h2 { max-width: 24ch; }
.tiles { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--space-md); margin-top: var(--space-xl); }
.tile { display: flex; flex-direction: column; gap: var(--space-md); min-height: 12rem; padding: var(--space-xl); background: var(--color-paper-3); }
.tile h3 { font-size: var(--text-xl); max-width: 14ch; }
.tile p { color: inherit; }
.tile--olive { background: var(--color-olive-tint); }
.tile--clay { background: var(--color-clay-deep); color: var(--color-paper); }
.tile--moss { background: var(--color-olive-deep); color: var(--color-paper); }
.tile--ink { background: var(--color-ink); color: var(--color-paper); }
.tile--stone { background: var(--color-paper-3); }
.tile--sage { background: var(--color-sage); }
.tiles--b { grid-template-columns: 3fr 4fr 5fr; margin-top: var(--space-md); }
.quote { margin-top: var(--section-gap); padding-block: var(--space-lg); background: var(--color-olive); }
.quote blockquote { margin: 0; }
.quote p { max-width: 46ch; font: 700 clamp(2rem, 4vw, 4rem)/1.12 var(--font-body); letter-spacing: var(--tracking-display); color: var(--color-ink); text-wrap: balance; }

/* ---------- the wide photograph ---------- */
.reasons .wide { margin-top: var(--section-gap); }
.wide { width: 100%; height: clamp(20rem, 40vw, 36rem); }

/* ---------- 04 the approach ---------- */
.approach { margin-top: 0; padding-block: var(--space-2xl); }
.approach h2 { max-width: 24ch; }
.approach__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 2px solid color-mix(in oklab, currentColor 30%, transparent); }
.approach .read + .read, .approach .lead + .read { margin-top: var(--space-md); }
.approach .pill { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .approach__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); } }

/* ---------- Sobre mí ---------- */
.about__visual { grid-column: 1 / span 5; align-self: start; }
.about__photo { width: 100%; aspect-ratio: 4 / 5; }
.about__text { grid-column: 7 / span 6; }
.about__text .read + .read { margin-top: var(--space-md); }
.spec { margin: var(--space-2xl) 0 0; padding: var(--space-lg) var(--space-xl); background: var(--color-olive-tint); }
.spec__title { margin: 0; padding-bottom: var(--space-md); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-ink-2); border-bottom: 2px solid color-mix(in oklab, var(--color-ink) 20%, transparent); }
.spec ul { margin: 0; padding: 0; list-style: none; }
.spec li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-bottom: 1px solid color-mix(in oklab, var(--color-ink) 15%, transparent); }
.spec li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec b { font: 700 var(--text-lg)/1.25 var(--font-display); letter-spacing: var(--tracking-display); }
.spec span { color: var(--color-ink-2); }

/* ---------- 06 the path ---------- */
.start__head { text-align: center; }
.start__head h2 { margin-inline: auto; max-width: 22ch; }
.path { position: relative; margin-top: var(--space-lg); }
.path__steps { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.path__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 7.5rem; height: 100%; margin-left: -3.75rem; overflow: visible; }
.path__line path { fill: none; stroke: var(--color-clay-deep); stroke-width: 3px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.path__step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1fr); align-items: center; min-height: 8rem; counter-increment: paso; }
.path__step::before { content: counter(paso); grid-column: 2; grid-row: 1; justify-self: center; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--color-clay-deep); color: var(--color-paper); font: 700 var(--text-xl)/1 var(--font-display); z-index: var(--z-base); transition: background-color var(--dur-long) var(--ease-out); }
.path__step:nth-child(2)::before { background: var(--color-olive-deep); }
.path__step:nth-child(3)::before { background: var(--color-ink); }
.path__text { grid-row: 1; grid-column: 3; max-width: 31rem; padding: var(--space-md) var(--space-lg); background: var(--color-olive-tint); }
.path__step:nth-child(2) .path__text { background: var(--color-paper-3); }
.path__step:nth-child(3) .path__text { background: var(--color-sage); }
.path__step:nth-child(odd of .path__step) .path__text { grid-column: 1; justify-self: end; }
.path__text p { margin-top: var(--space-sm); color: var(--color-ink-2); }
.js .is-armed .path__line { clip-path: inset(0 0 calc((1 - var(--drawn, 0)) * 100%) 0); transition: clip-path var(--dur-long) var(--ease-out); }
.js .is-armed .path__step:not(.is-in)::before { background: var(--color-paper-3); color: var(--color-ink-2); }
.js .is-armed .path__step .path__text, .js .is-armed.start__head { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .is-armed .path__step.is-in .path__text, .js .is-armed.start__head.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .is-armed .path__line { clip-path: none; transition: none; }
  .js .is-armed .path__step .path__text, .js .is-armed.start__head { opacity: 1; transform: none; transition: none; }
  .path__step::before { transition: none; }
}

/* ---------- 07 modalities ---------- */
.modes { margin-top: var(--space-lg); }
.modes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-lg); }
.well { display: flex; flex-direction: column; justify-content: flex-end; min-height: 15rem; padding: var(--space-xl); background: var(--color-olive-tint); }
.well--sand { background: var(--color-paper-3); }
.well h3 { font-size: var(--text-3xl); line-height: 1.1; max-width: 14ch; }

/* ---------- 08 the close ---------- */
.close { margin-top: var(--section-gap); }
.close { padding-block: var(--space-2xl); }
.close__grid { align-items: end; row-gap: var(--space-xl); }
.close h2 { grid-column: 1 / span 8; font-size: var(--text-display-s); max-width: 22ch; }
.close__act { grid-column: 9 / span 4; }
.close .btn { margin-top: var(--space-xl); border-color: var(--color-paper); background: var(--color-paper); color: var(--color-ink); }
.close .btn:hover { border-color: var(--color-paper-3); background: var(--color-paper-3); }
.close__micro { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-paper-3); }
.close__pending { margin-top: var(--space-sm); font-size: var(--text-sm); }
::selection { color: var(--color-ink); }

/* ---------- footer ---------- */
.foot { padding-block: var(--section-gap-s) var(--space-lg); }
.foot__name { font: 700 var(--text-display-s)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.foot__role { margin-top: var(--space-xs); color: var(--color-muted); }
.foot__cols { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 2px solid var(--color-rule-ink); row-gap: var(--space-xl); }
.foot__nav { grid-column: span 3; display: grid; align-content: start; justify-items: start; gap: var(--space-xs); }
.foot__nav a { padding-block: var(--space-2xs); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: border-color var(--dur-short) var(--ease-out); }
.foot__nav a:hover { border-color: var(--color-clay-deep); }
.foot__urgent { grid-column: 8 / span 5; }
.foot__urgent p { max-width: 46ch; color: var(--color-ink-2); }
.foot__base { margin-top: var(--space-xl); display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.foot__base p { max-width: none; }
.foot__base a { text-underline-offset: 0.2em; }

/* ---------- small screens ---------- */
@media (max-width: 60rem) {
  .approach, .close { padding-block: var(--space-xl); }
  .cols3 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .tiles, .tiles--b { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 0; }
  .pin__head, .pin--even .pin__head { grid-column: 1 / -1; position: static; }
  .pin__body, .pin--even .pin__body { grid-column: 1 / -1; margin-top: var(--space-xl); }
  .about__visual { grid-column: 1 / -1; max-width: 24rem; }
  .about__text { grid-column: 1 / -1; margin-top: var(--space-xl); }
  .start__head { text-align: left; }
  .start__head h2 { margin-inline: 0; }
  .path__line { left: 0; width: 3rem; margin-left: 0; }
  .path__step { grid-template-columns: 3rem minmax(0, 1fr); min-height: 11rem; }
  .path__step::before { grid-column: 1; width: 2.75rem; height: 2.75rem; font-size: var(--text-lg); }
  .path__text, .path__step:nth-child(odd of .path__step) .path__text { grid-column: 2; justify-self: stretch; max-width: none; margin-left: var(--space-md); padding: var(--space-md) var(--space-lg); }
  .modes__grid { grid-template-columns: minmax(0, 1fr); }
  .well { min-height: 11rem; padding: var(--space-lg); }
  .close h2, .close__act { grid-column: 1 / -1; }
  .foot__nav { grid-column: span 6; }
  .foot__urgent { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .foot__nav { grid-column: 1 / -1; }
  .rows > li, .spec li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .rows > li { padding: var(--space-md) var(--space-lg); }
}