/* mrphunt.net: warm paper, navy ink, a sunrise accent. Professional, but pleased to see you. */

/* ---- framework tweaks ---------------------------------------------------- */
.pk-header { background: color-mix(in srgb, var(--pk-menu-bg) 88%, transparent); border-bottom-color: transparent; }
.pk-brand__mark { background: var(--pk-fg); color: var(--pk-bg); border-radius: 50% 50% 50% 14%; font-family: var(--pk-font-body); font-weight: 700; }
.pk-nav__link { font-weight: 500; border-radius: 999px; padding-inline: .9rem; }
.pk-btn { border-radius: 999px; }
.pk-main { padding-block: 0; }
.pk-main--narrow { padding-block: 2.5rem 4rem; }
.pk-section { padding-block: clamp(2.75rem, 7vw, 5rem); }
.pk-eyebrow { font-family: var(--pk-font-mono); letter-spacing: .1em; }
.pk-lead { font-size: clamp(1.08rem, .6vw + 1rem, 1.25rem); text-wrap: pretty; }
.pk-prose { max-width: 64ch; }
.pk-footer { border-top: 0; }
.pk-footer__about strong { color: #fff; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-weight: 600; letter-spacing: -.02em; }
p { text-wrap: pretty; }
code { font-size: .88em; }

/* ---- small parts --------------------------------------------------------- */
.mp-btn { padding: .75rem 1.4rem; }
.mp-sticker { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 1.1rem; padding: .35rem .95rem; border-radius: 999px; background: color-mix(in srgb, var(--pk-accent-3) 22%, var(--pk-surface)); border: 1px solid color-mix(in srgb, var(--pk-accent-3) 45%, transparent); color: var(--pk-fg); font-weight: 700; font-size: .9rem; transform: rotate(-1.5deg); }
.mp-underline { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pk-sun) 75%, transparent) 62%, color-mix(in srgb, var(--pk-sun) 75%, transparent) 92%, transparent 92%); padding-inline: .08em; border-radius: 3px; }
.mp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.mp-chips li { padding: .2rem .7rem; border-radius: 999px; font-family: var(--pk-font-mono); font-size: .76rem; background: var(--pk-bg-alt); border: 1px solid var(--pk-border); color: var(--pk-fg-muted); }
.pk-section--alt .mp-chips li, .mp-panel .mp-chips li { background: var(--pk-bg); }
.mp-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; align-content: start; }
.mp-ticks li { position: relative; padding: .95rem 1.1rem .95rem 3rem; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-radius); }
.mp-ticks li::before { content: "✓"; position: absolute; left: 1rem; top: .9rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--pk-accent-2); color: var(--pk-surface); font-size: .8rem; font-weight: 700; }
.mp-split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 56rem) { .mp-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.mp-panel { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-radius); padding: 1.5rem; }
.mp-panel h3 { margin-bottom: 1rem; }

/* ---- hero ---------------------------------------------------------------- */
.mp-hero { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4.5rem); background: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--pk-sun) 28%, transparent), transparent 70%); }
.mp-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .mp-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.mp-hero h1 { font-size: clamp(2.1rem, 3.6vw + 1rem, 3.9rem); line-height: 1.08; margin-bottom: 1.25rem; }
.mp-hero__art { max-width: 30rem; width: 100%; margin-inline: auto; }
.mp-scene { width: 100%; height: auto; border-radius: 36px; box-shadow: 0 30px 60px -25px color-mix(in srgb, var(--pk-fg) 45%, transparent); transform: rotate(1.5deg); }
.mp-scene__sky { fill: var(--pk-sky); }
.mp-scene__sun { fill: var(--pk-sun); }
.mp-scene__cloud { fill: color-mix(in srgb, var(--pk-surface) 85%, transparent); animation: mp-drift 26s ease-in-out infinite alternate; }
.mp-scene__cloud--2 { animation-duration: 34s; animation-direction: alternate-reverse; opacity: .8; }
.mp-scene__birds { stroke: var(--pk-fg); opacity: .55; }
.mp-scene__hill-far { fill: var(--pk-hill-far); }
.mp-scene__snow { fill: var(--pk-surface); opacity: .85; }
.mp-scene__hill-near { fill: var(--pk-hill-near); }
.mp-scene__tent { fill: var(--pk-tent); }
.mp-scene__tent-door { fill: color-mix(in srgb, var(--pk-hull) 70%, var(--pk-tent)); }
.mp-scene__guy { stroke: color-mix(in srgb, var(--pk-fg) 55%, transparent); }
.mp-scene__sea { fill: var(--pk-sea); }
.mp-scene__sea-deep { fill: var(--pk-sea-deep); }
.mp-scene__mast { stroke: var(--pk-hull); }
.mp-scene__sail { fill: var(--pk-sail); }
.mp-scene__sail--jib { fill: var(--pk-sun); }
.mp-scene__hull { fill: var(--pk-hull); }
.mp-scene__flag { fill: var(--pk-tent); }
.mp-scene__boat { transform-origin: 295px 370px; animation: mp-bob 5s ease-in-out infinite; }
@keyframes mp-bob { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(5px) rotate(2.5deg); } }
@keyframes mp-drift { from { transform: translateX(-14px); } to { transform: translateX(26px); } }

/* ---- stats strip --------------------------------------------------------- */
.mp-stats { background: var(--pk-footer-bg); color: var(--pk-footer-fg); padding-block: 2rem; }
.mp-stats__list { margin: 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
.mp-stats__list dt { font-family: var(--pk-font-heading); font-size: clamp(1.7rem, 2vw + 1rem, 2.3rem); font-weight: 600; line-height: 1.1; color: var(--pk-sun); white-space: nowrap; }
.mp-stats__list dd { margin: .3rem 0 0; font-size: .95rem; max-width: 24ch; }

/* ---- cards --------------------------------------------------------------- */
.mp-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 1.75rem; }
.mp-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.5rem), 1fr)); }
.mp-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem; background: var(--pk-surface); color: var(--pk-fg); text-decoration: none; border: 1px solid var(--pk-border); border-radius: var(--pk-radius); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.mp-card h3 { margin: 0; font-size: 1.3rem; }
.mp-card p { margin: 0; color: var(--pk-fg-muted); }
.mp-card p + p { margin-top: .25rem; }
a.mp-card:hover { transform: translateY(-4px); border-color: var(--pk-accent); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--pk-fg) 45%, transparent); color: var(--pk-fg); }
.mp-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .35rem; border-radius: 30% 70% 62% 38% / 42% 40% 60% 58%; background: color-mix(in srgb, var(--pk-sun) 30%, var(--pk-bg-alt)); font-size: 1.5rem; line-height: 1; }
.mp-card:nth-child(3n+2) .mp-card__icon { background: color-mix(in srgb, var(--pk-accent-2) 20%, var(--pk-bg-alt)); border-radius: 62% 38% 40% 60% / 55% 62% 38% 45%; }
.mp-card:nth-child(3n) .mp-card__icon { background: color-mix(in srgb, var(--pk-accent) 16%, var(--pk-bg-alt)); border-radius: 45% 55% 35% 65% / 60% 45% 55% 40%; }
.mp-card__cta { margin-top: auto; padding-top: .6rem; font-weight: 700; color: var(--pk-link); }
.mp-card__domain { font-family: var(--pk-font-mono); font-size: .78rem; color: var(--pk-fg-muted); }
.mp-card--plain { border-style: dashed; }
.mp-card--plain .mp-card__cta { color: var(--pk-fg-muted); }

/* ---- page heads & stories (about / work / projects) ---------------------- */
.mp-pagehead { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); background: radial-gradient(50rem 24rem at 90% -20%, color-mix(in srgb, var(--pk-sun) 24%, transparent), transparent 70%); }
.mp-pagehead h1 { max-width: 18ch; }
.mp-story__grid { display: grid; gap: 1.25rem 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 48rem) { .mp-story__grid { grid-template-columns: 7rem minmax(0, 1fr); } }
.mp-story__badge { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; font-size: 2.6rem; line-height: 1; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: 38% 62% 55% 45% / 50% 42% 58% 50%; box-shadow: 6px 6px 0 color-mix(in srgb, var(--pk-sun) 60%, transparent); transform: rotate(-4deg); }

/* ---- projects ------------------------------------------------------------ */
.mp-projects { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); margin-top: 1.75rem; }
.mp-project { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-radius); scroll-margin-top: 5.5rem; }
.mp-project:target { border-color: var(--pk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-accent) 25%, transparent); }
.mp-project header { display: flex; gap: 1rem; align-items: center; }
.mp-project__icon { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; font-size: 1.6rem; line-height: 1; border-radius: 30% 70% 62% 38% / 42% 40% 60% 58%; background: color-mix(in srgb, var(--pk-sun) 30%, var(--pk-bg-alt)); }
.mp-project:nth-child(even) .mp-project__icon { background: color-mix(in srgb, var(--pk-accent-2) 20%, var(--pk-bg-alt)); border-radius: 62% 38% 40% 60% / 55% 62% 38% 45%; }
.mp-project h3 { margin: 0 0 .2rem; font-size: 1.35rem; }
.mp-project p { margin: 0; color: var(--pk-fg-muted); }
.mp-project__status { line-height: 1; }
.mp-project .mp-chips { margin-top: auto; padding-top: .5rem; }
[id] { scroll-margin-top: 5.5rem; }

/* ---- greatest hits ------------------------------------------------------- */
.mp-hits { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.mp-hits li { display: grid; gap: .5rem 2rem; grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.75rem; background: var(--pk-surface); border: 1px solid var(--pk-border); border-left: 6px solid var(--pk-accent); border-radius: var(--pk-radius); }
@media (min-width: 44rem) { .mp-hits li { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; } }
.mp-hits li:nth-child(even) { border-left-color: var(--pk-accent-2); }
.mp-hits__num { font-family: var(--pk-font-heading); font-weight: 600; font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem); line-height: 1; color: var(--pk-accent); white-space: nowrap; }
.mp-hits li:nth-child(even) .mp-hits__num { color: var(--pk-accent-2); }
.mp-hits h3 { margin: 0 0 .3rem; }
.mp-hits p { margin: 0; color: var(--pk-fg-muted); max-width: 70ch; }

/* ---- call to action ------------------------------------------------------ */
.mp-cta { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pk-sun) 18%, transparent)); }
.mp-cta h2 { font-size: clamp(1.9rem, 3vw + 1rem, 2.8rem); }
.mp-cta .pk-btn { margin-top: .5rem; overflow-wrap: anywhere; }
.mp-cta__actions { justify-content: center; margin-top: .5rem; }
.mp-404 .pk-error__code { color: var(--pk-accent); font-size: clamp(4rem, 16vw, 8rem); }

/* ---- CV ------------------------------------------------------------------ */
.mp-cv { max-width: 56rem; padding-block: clamp(2rem, 5vw, 3.5rem) 4rem; }
.mp-cv__head { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; justify-content: space-between; align-items: flex-end; padding-bottom: 1.75rem; border-bottom: 3px solid var(--pk-fg); }
.mp-cv__head h1 { margin-bottom: .3rem; }
.mp-cv__role { font-size: 1.15rem; font-weight: 700; color: var(--pk-accent); margin-bottom: .35rem; }
.mp-cv__contact { margin: 0; color: var(--pk-fg-muted); }
.mp-cv__actions { max-width: 17rem; }
.mp-cv__actions p { margin: .75rem 0 0; }
.mp-cv__section { margin-top: 2.25rem; }
.mp-cv__section > h2 { font-size: 1.05rem; font-family: var(--pk-font-mono); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--pk-accent-2); padding-bottom: .5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--pk-border); }
.mp-cv__list { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .5rem; }
.mp-cv__list li::marker { color: var(--pk-accent); }
.mp-cv__skills { margin: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: minmax(0, 1fr); }
.mp-cv__skills dt { font-weight: 700; }
.mp-cv__skills dd { margin: 0 0 .5rem; color: var(--pk-fg-muted); }
@media (min-width: 44rem) { .mp-cv__skills { grid-template-columns: 11rem minmax(0, 1fr); } .mp-cv__skills dd { margin: 0; } }
.mp-job { margin-top: 1.75rem; }
.mp-job:first-of-type { margin-top: 0; }
.mp-job__head { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.mp-job__head h3 { margin: 0; font-size: 1.3rem; }
.mp-job__head h3 span { display: block; font-family: var(--pk-font-body); font-size: 1rem; font-weight: 500; color: var(--pk-fg-muted); letter-spacing: 0; margin-top: .15rem; }
.mp-job__dates { margin: 0; font-family: var(--pk-font-mono); font-size: .9rem; color: var(--pk-fg-muted); white-space: nowrap; }

@media print {
  @page { margin: 14mm; }
  :root { --pk-bg: #fff; --pk-fg: #111; --pk-fg-muted: #333; --pk-border: #bbb; --pk-accent: #9a3412; --pk-accent-2: #115e59; --pk-link: #111; }
  body { background: #fff; color: #111; font-size: 10.5pt; line-height: 1.4; }
  .pk-header, .pk-footer, .pk-skip, .mp-noprint { display: none !important; }
  .mp-cv { max-width: none; padding: 0; }
  .mp-cv__head { padding-bottom: .75rem; }
  .mp-cv__head h1 { font-size: 24pt; }
  .mp-cv__section { margin-top: 1.1rem; }
  .mp-job { margin-top: 1rem; }
  .mp-job__head, .mp-cv__section > h2 { break-after: avoid; }
  .mp-cv__list li { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}