/* Front Range: the davinb.com look, loaded after site.css. First light over Pikes Peak, sand and pine,
   Fraunces with a handwritten accent, topo-map lines, birds from the Graphics By Davin seal, a dotted trail
   for "How I work" and a dusk footer. Icons come from Davin's Font Awesome kit (duotone in pine and sun).
   Light only (Davin, 2026-09-28). */

:root {
    color-scheme: light;
    --bg: #fcf8f2;
    --bg-soft: #f5ecdf;
    --surface: #fffdf9;
    --text: #2b2521;
    --text-muted: #6d635a;
    --border: #eadfce;
    --border-strong: #d9c9b1;
    --accent: #2e6b57;
    --accent-hover: #245646;
    --accent-text: #2a6452;
    --accent-subtle: #e3efe8;
    --accent-border: #a9ccbd;
    --on-accent: #fffdf9;
    --sun: #f0a45d;
    --sun-text: #b0612a;
    --sky-top: #fcf8f2;
    --sky-bottom: #fbe0c4;
    --m-far: #cfc6da;
    --m-far-haze: #f2e2d6;
    --m-peak: #a39cc0;
    --m-peak-haze: #d8cad3;
    --m-mid: #74789f;
    --m-mid-haze: #a7a3be;
    --m-near: #41476c;
    --m-near-deep: #30345a;
    --band-bottom: #292c4a;
    --dusk: #3f4468;
    --night: #23263b;
    --topo: url("/assets/img/topo.svg");
    --topo-ink: #7a5638;
    --topo-opacity: 0.1;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    --shadow: 0 2px 4px rgba(60, 40, 20, 0.05), 0 16px 34px rgba(60, 40, 20, 0.09);
    --shadow-lift: 0 4px 10px rgba(60, 40, 20, 0.07), 0 24px 46px rgba(60, 40, 20, 0.14);
    --fa-primary-color: var(--accent);
    --fa-secondary-color: var(--sun);
    --fa-secondary-opacity: 0.6;
}

/* Paper grain */
body {
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Type */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 3.6vw + 1rem, 3.95rem); line-height: 1.05; font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 600; font-size: 1.28rem; }
.hl {
    font-style: italic; font-weight: 400; color: var(--accent-text); padding-bottom: 0.08em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 70 4, 130 13, 190 7 S 272 5, 297 9' fill='none' stroke='%23f0a45d' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 0.26em no-repeat;
}
.kicker { color: var(--sun-text); letter-spacing: 0.14em; }
.kicker::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sun); margin: 0 0.55rem 0.08rem 0; vertical-align: middle; }

/* Header */
.site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.brand-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.brand-sub { color: var(--sun-text); }
.site-nav a { border-radius: 999px; padding-inline: 0.85rem; }
.site-nav .nav-home { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; font-size: 1.1rem; }
.site-nav .nav-home:hover, .site-nav .nav-home[aria-current="page"] { background: var(--accent-subtle); }

/* Buttons and links */
.btn { border-radius: 999px; }
.btn-primary, .site-nav .btn-primary { box-shadow: 0 6px 16px rgba(46, 107, 87, 0.22); }
.btn-primary:hover, .site-nav .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(46, 107, 87, 0.28); }
.btn-ghost { background: color-mix(in srgb, var(--surface) 75%, transparent); }
.card .more::after, .link-arrow::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform 0.2s ease; }
a.card:hover .more::after, .link-arrow:hover::after { transform: translateX(4px); }

/* Hero: first light over the Front Range */
.hero { background: linear-gradient(to bottom, var(--sky-top) 10%, var(--sky-bottom) 100%); padding-bottom: clamp(7rem, 15vw, 12rem); }
.hero::before, .page-head::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--topo-ink); opacity: var(--topo-opacity);
    -webkit-mask: var(--topo) 70% 45% / cover no-repeat, linear-gradient(to bottom, transparent, #000 22%), linear-gradient(to right, rgba(0, 0, 0, 0.45), #000 60%);
    -webkit-mask-composite: source-in, source-in;
    mask: var(--topo) 70% 45% / cover no-repeat, linear-gradient(to bottom, transparent, #000 22%), linear-gradient(to right, rgba(0, 0, 0, 0.45), #000 60%);
    mask-composite: intersect, intersect;
}
.hero-bg { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(11rem, 30vw, 21rem); z-index: -1; pointer-events: none; }
.scene { display: block; width: 100%; height: 100%; }
.scene-birds { stroke: var(--m-near); opacity: 0.55; animation: drift 9s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-12px, -6px); } }

.hero-facts li svg { font-size: 1.1rem; }
.hero-photo::before {
    content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; z-index: 0; border-radius: 999px 999px 1.5rem 1.5rem;
    background: linear-gradient(160deg, var(--sun), color-mix(in srgb, var(--sun) 35%, var(--bg))); opacity: 0.6;
}
.hero-photo .hero-portrait { border-radius: 999px 999px 1.25rem 1.25rem; border: 7px solid var(--surface); box-shadow: var(--shadow); }

/* The sun, carrying "since 2006", rises beside the photo and behind the ridges (Davin, 2026-09-28). It is a child of
   .hero-photo so it follows the photo at every width; z-index -2 puts it behind the mountains (-1) and in front of
   the topo lines (-3), while the photo itself stays in front of everything. */
.hero::before { z-index: -3; }
.hero-sun {
    position: absolute; z-index: -2; left: -8.25rem; bottom: -3.25rem; width: 8.5rem; aspect-ratio: 1; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; padding-top: 1.45rem; color: #3b2a1c;
    background: radial-gradient(circle at 50% 38%, #f8c486, var(--sun) 72%);
    box-shadow: 0 0 0 10px rgba(240, 164, 93, 0.14), 0 0 70px 26px rgba(240, 164, 93, 0.32);
    animation: sun-rise 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
.hero-sun span { font: italic 400 0.95rem/1 var(--font-display); }
.hero-sun strong { font: 700 1.95rem/1.05 var(--font-display); letter-spacing: -0.01em; }
@keyframes sun-rise { from { transform: translateY(35%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Since 2006 stamp (not shown for now; markup in _partials/stamp.blade.php) */
.hero-stamp { position: absolute; z-index: 3; width: 8rem; height: 8rem; left: -2.9rem; bottom: -1.6rem; filter: drop-shadow(0 8px 14px rgba(60, 40, 20, 0.22)); overflow: visible; }
.stamp-disc { fill: var(--sun); }
.stamp-rim { fill: none; stroke: rgba(255, 253, 249, 0.7); stroke-width: 1.2; stroke-dasharray: 2 3; }
.stamp-spin { transform-origin: 66px 66px; animation: spin 40s linear infinite; }
.stamp-ring-text { font: 700 10px/1 var(--font-sans); letter-spacing: 1px; fill: #3b2a1c; }
.stamp-since { font: italic 400 13px var(--font-display); fill: #3b2a1c; }
.stamp-year { font: 700 27px var(--font-display); fill: #2b2521; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Handwritten aside */
.hero-note {
    position: absolute; z-index: 4; right: -0.75rem; top: -4.6rem; margin: 0; white-space: nowrap; text-align: right;
    font-family: var(--font-hand); font-weight: 600; font-size: 1.5rem; line-height: 1.05; color: var(--sun-text); transform: rotate(-4deg);
}
.hero-note-arrow { position: absolute; z-index: 4; right: 8.6rem; top: -2.4rem; width: 4rem; height: auto; color: var(--sun-text); }

/* Kinds of businesses: badges on the dusk band that continues the mountains */
.clients { background: linear-gradient(to bottom, var(--m-near-deep), var(--band-bottom)); border: 0; padding: 2.25rem 0 2.75rem; color: #f4ecdf; }
.clients-label { color: color-mix(in srgb, #f4ecdf 72%, transparent); }
.client-types {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.9rem 1.5rem;
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #f4ecdf;
}
.client-types li { gap: 0.75rem; }
.client-types .ico {
    display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: rgba(240, 164, 93, 0.15); box-shadow: inset 0 0 0 1px rgba(240, 164, 93, 0.35);
    --fa-primary-color: #f7c08a; --fa-secondary-color: #f4ecdf; --fa-secondary-opacity: 0.45;
}
.client-types .ico svg { width: 1.15rem; height: 1.15rem; color: inherit; }

.section-soft { background: var(--bg-soft); border-block: 0; }

/* Cards */
.card { border-radius: 1.4rem; border-color: var(--border); box-shadow: var(--shadow); }
a.card:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-lift); }
.icon { width: 3.1rem; height: 3.1rem; border-radius: 50%; background: color-mix(in srgb, var(--sun) 20%, var(--surface)); }
.icon svg { width: 1.45rem; height: 1.45rem; }
.tags li { background: var(--bg-soft); color: var(--text-muted); }
.card .more, .link-arrow { color: var(--accent-text); }
.card-kicker { display: flex; align-items: center; gap: 0.45rem; color: var(--sun-text); letter-spacing: 0.12em; --fa-primary-color: var(--sun-text); --fa-secondary-color: var(--sun); }
.card-kicker svg { width: 1.05rem; height: 1.05rem; }

/* Every card with an icon carries a large, faded copy of it in the lower-right corner (Davin, 2026-09-28).
   The copy sits behind the card's text and fades out toward the middle of the card. */
.card { position: relative; isolation: isolate; overflow: hidden; }
.card-mark {
    position: absolute; z-index: -1; right: -0.8rem; bottom: -1.3rem; pointer-events: none;
    font-size: 7rem; line-height: 1; color: var(--accent); opacity: 0.14; transform: rotate(-12deg);
    --fa-primary-color: var(--accent); --fa-secondary-color: var(--accent); --fa-secondary-opacity: 0.45;
    -webkit-mask-image: linear-gradient(135deg, transparent 5%, #000 55%); mask-image: linear-gradient(135deg, transparent 5%, #000 55%);
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.card-mark svg { display: block; }
a.card:hover .card-mark { transform: rotate(-4deg) scale(1.06); opacity: 0.2; }

/* Work stories: a patch of topo map in the corner */
.work-card { position: relative; overflow: hidden; isolation: isolate; }
.work-card::after {
    content: ""; position: absolute; top: -35%; right: -35%; width: 80%; aspect-ratio: 1; z-index: -1; pointer-events: none;
    background: var(--topo-ink); opacity: 0.12;
    -webkit-mask: var(--topo) center / 190% no-repeat, radial-gradient(closest-side, #000 35%, transparent);
    -webkit-mask-composite: source-in;
    mask: var(--topo) center / 190% no-repeat, radial-gradient(closest-side, #000 35%, transparent);
    mask-composite: intersect;
}
.work-card .tags { margin: 0.25rem 0 0.9rem; }
.lab .tags { margin: auto 0 0; }

/* How I work: a dotted trail with waypoints */
.trail-wrap { position: relative; }
.trail-path { position: absolute; left: 11.5%; top: 1.3rem; width: 77%; height: 2.6rem; overflow: visible; }
.trail-path path { fill: none; stroke: var(--sun-text); stroke-width: 3; stroke-dasharray: 0.5 10; stroke-linecap: round; opacity: 0.55; vector-effect: non-scaling-stroke; }
.trail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.waypoint { position: relative; text-align: center; }
.marker {
    position: relative; display: inline-grid; place-items: center; width: 4.75rem; height: 4.75rem; margin-bottom: 1.1rem;
    border-radius: 50%; background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--border);
}
.marker svg { width: 1.9rem; height: 1.9rem; }
.marker-num {
    position: absolute; top: -0.2rem; right: -0.3rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%;
    background: var(--sun); color: #2b2521; font: 700 0.8rem/1 var(--font-sans); box-shadow: 0 0 0 3px var(--bg-soft);
}
.waypoint h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.waypoint p { color: var(--text-muted); font-size: 0.98rem; margin: 0 auto; max-width: 17rem; }

/* About */
.facts li { border-radius: 1.2rem; box-shadow: var(--shadow); border-color: var(--border); }
.facts strong { font-family: var(--font-display); font-weight: 600; }
.facts-seal img { width: 84px; transform: rotate(-5deg); }
.signoff { margin: -0.4rem 0 1rem; font-family: var(--font-hand); font-weight: 600; font-size: 2.3rem; line-height: 1; color: var(--sun-text); transform: rotate(-3deg); transform-origin: left center; }
.signoff::before { content: "— "; }

/* Call to action: pine panel with topo lines and a ridgeline */
.cta { position: relative; overflow: hidden; isolation: isolate; background: var(--accent); border: 0; border-radius: 1.75rem; padding-bottom: clamp(3rem, 7vw, 4.5rem); box-shadow: 0 22px 44px rgba(46, 107, 87, 0.24); }
.cta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.13; background: var(--on-accent);
    -webkit-mask: var(--topo) center / cover no-repeat; mask: var(--topo) center / cover no-repeat;
}
.cta::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: -1; background: rgba(0, 0, 0, 0.16);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L120 110 L230 126 L340 80 L430 96 L540 50 L610 30 L660 44 L760 90 L880 104 L990 70 L1100 96 L1220 84 L1330 110 L1440 100 L1440 200 L0 200 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L120 110 L230 126 L340 80 L430 96 L540 50 L610 30 L660 44 L760 90 L880 104 L990 70 L1100 96 L1220 84 L1330 110 L1440 100 L1440 200 L0 200 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.cta h2 { color: var(--on-accent); }
.cta p { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }
.cta .btn-primary { background: var(--sun); color: #2b2521; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); --fa-primary-color: #2b2521; }
.cta .btn-primary:hover { background: color-mix(in srgb, var(--sun) 85%, #fff); color: #2b2521; }
.cta .btn-ghost { background: transparent; color: var(--on-accent); border-color: color-mix(in srgb, var(--on-accent) 60%, transparent); }
.cta .btn-ghost:hover { background: color-mix(in srgb, var(--on-accent) 12%, transparent); color: var(--on-accent); }

/* Inner pages */
.page-head { position: relative; isolation: isolate; background: linear-gradient(to bottom, var(--bg), var(--bg-soft)); margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.job-org { font-family: var(--font-display); font-weight: 600; }

/* Résumé: the portrait in the header, and the career as a dotted trail (newest at the top, the trailhead at the
   bottom). Markers match the "How I work" trail; the roles still held carry the sun. */
.resume-head .container { position: relative; }
.resume-portrait { position: absolute; right: calc(var(--gutter) + 1rem); top: 50%; width: 10.5rem; aspect-ratio: 1; transform: translateY(-50%); }
.resume-portrait::before {
    content: ""; position: absolute; inset: 0.9rem -0.9rem -0.9rem 0.9rem; border-radius: 50%;
    background: linear-gradient(160deg, var(--sun), color-mix(in srgb, var(--sun) 35%, var(--bg))); opacity: 0.6;
}
.resume-portrait img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 6px solid var(--surface); box-shadow: var(--shadow); }
.job::before { content: ""; position: absolute; left: calc(1.55rem - 1.5px); top: 3.3rem; bottom: 0.8rem; border-left: 3px dotted var(--sun-text); opacity: 0.45; }
.job:last-child::before { display: none; }
.job-marker { background: var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px var(--border); }
.job-marker svg { width: 1.35rem; height: 1.35rem; }
.job-marker img { width: 2.05rem; height: auto; transform: rotate(-4deg); }
.job.is-current .job-marker {
    background: radial-gradient(circle at 50% 38%, #f8c486, var(--sun) 72%);
    box-shadow: 0 0 0 6px rgba(240, 164, 93, 0.16), var(--shadow);
    --fa-primary-color: #3b2a1c; --fa-secondary-color: #fffdf9; --fa-secondary-opacity: 0.85;
}
.job-points li::marker { color: var(--sun-text); }
.earlier strong { font-weight: 650; }
/* Contact page: the Graphics By Davin seal at full strength in the header area (Davin, 2026-09-28) */
.contact-head::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    right: max(0.5rem, calc((100% - var(--max)) / 2 + 1.5rem)); bottom: 1rem; width: min(12rem, 34vw); aspect-ratio: 192 / 227;
    transform: rotate(-8deg); background: url("/assets/img/brand/gbd-seal-360.webp") center / contain no-repeat;
    filter: drop-shadow(0 10px 16px rgba(60, 40, 20, 0.22));
}

.platform-group h3 { font-weight: 600; }
.platform-group .tags li { background: var(--bg-soft); color: var(--text); font-size: 0.82rem; padding: 0.3rem 0.7rem; }

/* Services page */
.service-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.service-jump a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.service-jump a:hover { border-color: var(--accent-border); color: var(--accent-text); }
.service-jump svg { width: 1.05rem; height: 1.05rem; }
.services-list { padding-top: clamp(2rem, 4vw, 3rem); }
.service { align-items: start; scroll-margin-top: 5.5rem; }
.service-case h2 { margin-bottom: 0.25rem; }
.service-headline { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.3; color: var(--accent-text); margin-bottom: 0.9rem; }
.service-why { color: var(--text-muted); }
.service-terms { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--bg-soft); font-weight: 600; font-size: 0.92rem; --fa-primary-color: var(--sun-text); --fa-secondary-color: var(--sun); }
.service-includes h3 { font-size: 1.1rem; }
.engagement h3 { margin-bottom: 0.3rem; }
.engagement p { margin: 0; }
.platform-group { gap: 0.9rem; }
.platform-head { display: flex; align-items: center; gap: 0.8rem; }
.platform-head .icon { width: 2.6rem; height: 2.6rem; margin: 0; flex: none; }
.platform-head .icon svg { width: 1.2rem; height: 1.2rem; }
.platform-head h3 { margin: 0; font-size: 1.1rem; }
.section-tight { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.section:not(.section-soft) + .section-tight { padding-top: 0; }

/* Footer: the day ends at dusk over the same ridgeline */
.site-footer {
    position: relative; isolation: isolate; margin-top: clamp(4.5rem, 8vw, 6.5rem); padding: clamp(2.5rem, 5vw, 3.5rem) 0 2.5rem;
    border: 0; color: #d8d2e6; background: linear-gradient(to bottom, var(--dusk), var(--night));
}
.site-footer::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(3rem, 6vw, 5rem); background: var(--dusk);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L110 128 L220 140 L330 104 L420 118 L520 76 L600 92 L690 48 L740 60 L830 100 L940 112 L1040 80 L1150 104 L1260 90 L1360 118 L1440 108 L1440 200 L0 200 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L110 128 L220 140 L330 104 L420 118 L520 76 L600 92 L690 48 L740 60 L830 100 L940 112 L1040 80 L1150 104 L1260 90 L1360 118 L1440 108 L1440 200 L0 200 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.site-footer::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.85;
    background-image:
        radial-gradient(1.6px 1.6px at 6% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 14% 52%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 23% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 31% 68%, #fff 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 42% 14%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 51% 44%, #fff 50%, transparent 51%),
        radial-gradient(1.3px 1.3px at 60% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 60%, #fff 50%, transparent 51%),
        radial-gradient(1.7px 1.7px at 77% 16%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 85% 40%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 93% 24%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 97% 64%, #fff 50%, transparent 51%);
}
.site-footer strong { color: #fff; }
.site-footer a { color: #ece6f7; }
.site-footer a:hover { color: #fff; }
.footer-seal { width: 72px; transform: rotate(-4deg); }
.footer-links svg { margin-right: 0.2rem; }

/* Cards rise into view (the class is added by a small script, and only when motion is welcome) */
.reveal { opacity: 0; }
.reveal.in { opacity: 1; animation: rise 0.7s ease backwards; }
.grid-3 > .reveal.in:nth-child(2), .trail > .reveal.in:nth-child(2), .grid-2 > .reveal.in:nth-child(2) { animation-delay: 0.08s; }
.grid-3 > .reveal.in:nth-child(3), .trail > .reveal.in:nth-child(3) { animation-delay: 0.16s; }
.trail > .reveal.in:nth-child(4) { animation-delay: 0.24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .hero-sun, .scene-birds, .stamp-spin { animation: none; }
}

@media (max-width: 1100px) {
    .hero-note-arrow { display: none; }
    .hero-note { right: -0.5rem; top: -3.4rem; font-size: 1.35rem; }
}
@media (max-width: 960px) {
    .trail { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
    .trail-path { display: none; }
    .resume-portrait { width: 8rem; }
    .grid-3.lab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .resume-head .container { display: flow-root; }
    .resume-portrait { position: relative; float: right; top: auto; right: auto; transform: none; width: 6rem; margin: 0.25rem 0.6rem 0.75rem 1rem; }
    .resume-portrait::before { inset: 0.5rem -0.5rem -0.5rem 0.5rem; }
    .resume-portrait img { border-width: 4px; }
}
@media (max-width: 820px) {
    .hero-sun { left: auto; right: -2.4rem; top: -2.6rem; bottom: auto; width: 6.75rem; padding-top: 1.15rem; }
    .hero-sun strong { font-size: 1.55rem; }
    .hero-photo { width: min(calc(100% - 3rem), 17.5rem); margin: 0.5rem 0 1.5rem 1.5rem; }
    .hero-note { position: static; white-space: normal; text-align: left; margin: 0 0 1rem -0.5rem; max-width: 12.5rem; transform: rotate(-3deg); }
    .hero-stamp { width: 6.5rem; height: 6.5rem; left: -1.75rem; bottom: -1.2rem; }
    .client-types { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 0.98rem; }
}
@media (max-width: 640px) {
    .site-nav { gap: 0; }
    .site-nav a { padding-inline: 0.55rem; font-size: 0.92rem; }
    .site-nav .nav-home { width: 2.1rem; height: 2.1rem; }
    .trail { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
    .waypoint { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; text-align: left; }
    .marker { grid-row: span 2; width: 3.6rem; height: 3.6rem; margin: 0; }
    .marker svg { width: 1.45rem; height: 1.45rem; }
    .waypoint::before { content: ""; position: absolute; left: 1.8rem; top: 3.9rem; bottom: -1.4rem; border-left: 3px dotted var(--sun-text); opacity: 0.45; }
    .waypoint:last-child::before { display: none; }
    .waypoint p { margin: 0; max-width: none; }
    .job { padding-left: 3.4rem; }
    .job-marker { width: 2.5rem; height: 2.5rem; }
    .job-marker svg { width: 1.1rem; height: 1.1rem; }
    .job-marker img { width: 1.65rem; }
    .job::before { left: calc(1.25rem - 1.5px); top: 2.7rem; }
    .card-mark { font-size: 6rem; }
    .grid-3.lab { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .client-types { grid-template-columns: minmax(0, 1fr); }
}

/* Print: any page prints on plain white; the résumé prints as a one-column document with the contact line under the
   name and skills and education at the end. Last in the cascade so it wins over the theme. */
@media print {
    @page { margin: 0.45in 0.5in; }
    :root { --bg: #fff; --bg-soft: #fff; --surface: #fff; --text: #111; --text-muted: #444; --border: #ccc; --accent-text: #111; --sun-text: #8a4a1f; }
    body { background: #fff; font-size: 10pt; line-height: 1.42; }
    .site-header, .site-footer, .no-print, .cta, .hero-bg, .page-head::before, .page-head .kicker, .contact-head::after,
    .resume-portrait, .card-mark, .job-marker, .job::before, .resume-contact-card { display: none !important; }
    .print-only { display: block !important; }
    .reveal { opacity: 1 !important; animation: none !important; }
    .container { max-width: none; padding-inline: 0; }
    .section { padding: 0; }
    a { color: inherit; text-decoration: none; }
    .page-head { background: none; border: 0; margin: 0; padding: 0 0 0.35rem; }
    .page-head h1 { font-size: 22pt; margin: 0 0 0.1rem; }
    .page-head .lead { font-size: 11.5pt; color: #333; max-width: none; margin: 0 0 0.15rem; }
    .resume-contact-line { margin: 0; font-size: 9.5pt; color: #333; }
    .resume { display: block; }
    .resume-summary { font-size: 10.5pt; margin: 0.5rem 0 0; }
    .resume-h2 { font-size: 13.5pt; margin: 0.8rem 0 0.1rem; padding-bottom: 0.1rem; border-bottom: 1px solid #ccc; }
    .job { padding: 0.55rem 0 0; }
    .job-org { font-size: 12pt; }
    .job-org { display: inline; }
    .job-place { display: inline; margin: 0; font-size: 9.5pt; }
    .job-place::before { content: " · "; }
    .earlier .role { flex-wrap: nowrap; }
    .earlier .role > span:first-child { flex: 1; }
    .job-org, .job-place, .role { break-after: avoid; }
    .role { margin-top: 0.1rem; }
    .role .dates { font-size: 9.5pt; }
    .job-points { margin-top: 0.25rem; gap: 0.1rem; }
    .job-points li, .earlier li { break-inside: avoid; }
    .earlier { gap: 0.3rem; margin-top: 0.2rem; }
    .earlier-note { display: inline; margin: 0; font-size: inherit; }
    .earlier-note::before { content: ": "; }
    .resume-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem 1.5rem; margin-top: 0.9rem; }
    .resume-aside .card { break-inside: avoid; }
    .resume-skills-card { grid-column: 1 / -1; }
    .resume-certs { gap: 0.3rem; }
    .resume-certs li > span:first-child, .resume-certs .dates { font-size: 9.5pt; }
    .resume-certs li { display: block; }
    .resume-certs .dates { white-space: nowrap; }
    .resume-certs .dates::before { content: " · "; }
    .resume-aside .card { display: block; border: 0; border-top: 1px solid #ccc; border-radius: 0; box-shadow: none; padding: 0.4rem 0 0; overflow: visible; }
    .resume-aside h2 { font-size: 10.5pt; color: #111; margin-bottom: 0.3rem; }
    .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem 1.25rem; }
    .skills dt, .skills dd { font-size: 9.5pt; }
}