/* manitu.si — Miha Plohl, fractional Rails & AI consultant
   Plain hand-written CSS. No build step, no framework. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --bg: #faf6ee;
  --bg-alt: #f1e9d8;
  --card: #ffffff;
  --ink: #23261f;
  --ink-soft: #5a5f4f;
  --line: #e1d5b8;
  --forest: #1f3327;
  --forest-deep: #15231a;
  --on-accent: #fbf8f1;
  --clay: #ab5a2a;
  --clay-soft: #f1d8bd;
  --ring: rgba(31, 51, 39, 0.35);
  /* fixed dark "signature" panel — stays dark forest with light text in both themes */
  --panel-bg: #1f3327;
  --panel-ink: #fbf8f1;
  --panel-ink-soft: #d8d2bd;
  --panel-accent: #f1d8bd;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171a15;
    --bg-alt: #1f231b;
    --card: #21261e;
    --ink: #efe9db;
    --ink-soft: #b6b3a2;
    --line: #383c2f;
    --forest: #9fd3b3;
    --forest-deep: #cfe9db;
    --on-accent: #15231a;
    --clay: #e0996a;
    --clay-soft: #3a2c1f;
    --ring: rgba(159, 211, 179, 0.35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, .brand-word {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.5em;
}

a { color: var(--clay); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 24px;
}

section { padding-block: 72px; }
section h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clay);
  margin-bottom: 10px;
  display: block;
}
.lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* ---------- header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
/* logo on the left, name (Miha Plohl) beside it */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  margin-right: auto;
}
/* logo = bird: the eye (img, clipped to the middle), a beak layer and two wing
   layers, all cut from the same image, so the wings and beak can move */
.brand-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
  opacity: 0.9;
  /* separate glide / rise / fade so each eases once over the whole flight
     (a timing function on one multi-keyframe animation restarts per segment).
     Fill "backwards", not "both": once landed, logo.js moves it via inline translate/rotate */
  animation:
    logo-glide 3s cubic-bezier(.25, .6, .3, 1) backwards,
    logo-rise 3s cubic-bezier(.45, 0, .3, 1) backwards,
    logo-fade .9s ease-out backwards;
}
/* eye: the middle of the image, minus the beak (which gets its own layer below) */
.brand-logo img {
  position: relative;
  z-index: 1;
  height: 24px;
  width: auto;
  clip-path: polygon(32% 0, 68% 0, 68% 100%, 49.3% 100%, 47.4% 66.9%, 45.3% 61.8%, 43.4% 58.1%,
                     41.4% 54.4%, 39.5% 50.7%, 38.6% 47%, 36.2% 100%, 32% 100%);
}
/* beak: the cut-out beak (beak.png, 68x69 at 293,64 in logo.png) placed where it
   is drawn, behind the eye. logo.js slides it along the lower eyelid, turning it
   about the point where it meets the lid (328,80) so it keeps pointing outward. */
.brand-beak {
  position: absolute;
  left: 38.553%;
  top: 47.059%;
  width: 8.947%;
  height: 50.735%;
  z-index: 0;
  background: url("../img/beak.png?v=2") center / 100% 100% no-repeat;
  transform-origin: 51.47% 23.19%;
}
.brand-logo::before,
.brand-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/logo.png?v=2") center / 100% 100% no-repeat;
  animation: 0.85s cubic-bezier(.45, 0, .55, 1) 3 both;
}
.brand-logo::before { clip-path: inset(0 64% 0 0); transform-origin: 36% 35%; animation-name: logo-flap-left; }
.brand-logo::after  { clip-path: inset(0 0 0 64%); transform-origin: 64% 35%; animation-name: logo-flap-right; }

/* one long ease-out from the left: keeps slowing down until it lands */
@keyframes logo-glide {
  from { translate: -60vw 0; }
  to   { translate: 0 0; }
}
/* rises from below, floats a few px above its spot, then settles down onto it */
@keyframes logo-rise {
  0%   { transform: translateY(46px) scale(.7) rotate(-5deg); }
  70%  { transform: translateY(-5px) scale(1) rotate(.5deg); }
  100% { transform: none; }
}
@keyframes logo-fade {
  from { opacity: 0; }
  to   { opacity: .9; }
}
/* each beat: a long, lifting upstroke, then a softer downstroke back to rest */
@keyframes logo-flap-left {
  0%, 100% { transform: none; }
  40%      { transform: rotate(32deg) scaleY(.9); }
  75%      { transform: rotate(-8deg) scaleY(1.02); }
}
@keyframes logo-flap-right {
  0%, 100% { transform: none; }
  40%      { transform: rotate(-32deg) scaleY(.9); }
  75%      { transform: rotate(8deg) scaleY(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo, .brand-logo::before, .brand-logo::after { animation: none; }
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
/* the person leads, the company is secondary */
.brand .brand-word {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  margin: 0;
}
.brand-sub {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
/* small screens: the header row also holds the menu toggle and language switch,
   so keep the name on one line and give it room with a slightly smaller logo */
@media (max-width: 760px) {
  .brand { gap: 10px; }
  .brand-logo img { height: 20px; }
  .brand-sub { white-space: nowrap; }
}

nav.primary { display: flex; align-items: center; gap: 22px; }
nav.primary a { color: var(--ink-soft); font-size: 0.95rem; }
nav.primary a:hover { color: var(--ink); }

.lang-switch a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.lang-switch a:hover { border-color: var(--clay); color: var(--clay); text-decoration: none; }

#nav-toggle { display: none; }
.nav-toggle-label { display: none; cursor: pointer; }

@media (max-width: 760px) {
  nav.primary {
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 24px 20px;
    display: none;
  }
  nav.primary a { padding: 8px 0; }
  #nav-toggle:checked ~ nav.primary { display: flex; }
  .nav-toggle-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 1.1rem;
  }
}

/* ---------- hero ---------- */
.hero { padding-block: 64px 56px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  align-items: center;
}
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.hero .lede { font-size: 1.2rem; margin-bottom: 28px; }
.hero-photo {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  border-radius: 50%;
  border: 6px solid var(--card);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 30px;
}
.meta-line span { display: inline-flex; align-items: center; gap: 6px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--forest); color: var(--on-accent); }
.btn-primary:hover { background: var(--forest-deep); }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--clay); color: var(--clay); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clay-soft);
  color: var(--clay);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

/* Small screens: one column, with the photo and the availability chip side by
   side on the first row. The text column's wrapper steps aside (display:
   contents) so the chip and the rest of the hero text become grid items; the
   chip goes next to the photo and everything else spans the full width below. */
@media (max-width: 760px) {
  .hero-grid {
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    row-gap: 0;
    text-align: left;
  }
  .hero-grid > div { display: contents; }
  .hero-grid > div > * { grid-column: 1 / -1; }
  .hero-photo { grid-column: 1; grid-row: 1; width: 120px; max-width: none; margin: 0 0 26px; }
  .hero .chip {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    margin: 0 0 26px;
    border-radius: 16px;  /* still looks right when the label wraps to two lines */
    line-height: 1.35;
  }
}
/* too narrow for both side by side: photo, then chip, each on its own row */
@media (max-width: 360px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { margin-bottom: 18px; }
  .hero .chip { grid-column: 1; grid-row: 2; }
}

/* ---------- about ---------- */
#about { background: var(--bg-alt); border-block: 1px solid var(--line); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.about-grid p { margin: 0 0 1.1em; color: var(--ink-soft); }
blockquote.pull {
  margin: 0;
  padding: 22px 24px;
  background: var(--card);
  border-left: 4px solid var(--clay);
  border-radius: 4px;
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  color: var(--ink);
  align-self: start;
}
.about-side { display: flex; flex-direction: column; gap: 32px; align-self: start; }
.about-side blockquote.pull { align-self: stretch; }

/* light comic under the quote — wide screens only */
.comic { margin: 0; opacity: 0.94; }
.comic svg { display: block; width: 100%; height: auto; }
.comic .cp { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.comic .cb { font: 500 11px 'Work Sans', -apple-system, sans-serif; fill: #23261f; text-anchor: middle; }
.comic .cm { font: 9px ui-monospace, Menlo, Consolas, monospace; }
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .comic { display: none; }
}

/* ---------- now ---------- */
.now-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 48px;
  align-items: start;
}
.stamp {
  display: block;
  margin: 0 0 22px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.pulse {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 4px;
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3fae6a;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse { to { transform: scale(3); opacity: 0; } }

.now-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.now-list li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-soft);
}
.now-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--clay);
  font-weight: 600;
}
.now-list b { color: var(--ink); font-weight: 600; }

.stack {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 0 var(--line), 0 12px 32px -18px rgba(0,0,0,0.25);
}
.stack h3 { font-size: 1rem; margin-bottom: 14px; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.84rem;
  color: var(--ink);
  background: var(--bg);
}
.tags li.ai {
  border-color: color-mix(in srgb, var(--clay) 45%, var(--line));
  background: var(--clay-soft);
  color: var(--clay);
}
@media (max-width: 760px) { .now-grid { grid-template-columns: 1fr; gap: 28px; } }

/* sections ease in as they scroll into view (progressive enhancement) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(.hero) > .wrap {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) { .pulse::after { animation: none; } }

/* ---------- services ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 36px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 24px;
}
.card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.card .num {
  font-family: 'Fraunces', serif;
  color: var(--clay);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}

/* ---------- impact stats ---------- */
/* Selected experience: the dark forest panel (same in both themes) with a gold
   edge that glows softly outward into the sections above and below. */
#impact {
  --gold: 212, 168, 87;        /* rgb triplet, used with varying alpha */
  position: relative;
  z-index: 1;                  /* lift it so the glow spreads over its neighbours */
  background: var(--panel-bg);
  color: var(--panel-ink-soft);
  border-block: 1px solid rgba(var(--gold), 0.4);
  box-shadow:
    0 0 24px rgba(var(--gold), 0.15),
    0 0 56px rgba(var(--gold), 0.06);
}
#impact .eyebrow { color: var(--panel-accent); }
#impact h2 { color: var(--panel-ink); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
  margin-top: 36px;
}
.stat b {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.9rem;
  color: var(--panel-ink);
  margin-bottom: 6px;
}
.stat span { color: var(--panel-ink-soft); font-size: 0.92rem; }

/* ---------- experience ---------- */
.timeline { margin-top: 36px; border-top: 1px solid var(--line); }
.tl-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 20px;
  align-items: start;
  padding-block: 22px;
  border-bottom: 1px solid var(--line);
}
.tl-item time { color: var(--ink-soft); font-size: 0.88rem; }
.tl-item h3 { font-size: 1.05rem; margin-bottom: 4px; }
.tl-item p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.tl-item .logo-chip {
  align-self: center;
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 0;
}
.tl-item img { height: 22px; width: auto; display: block; }
@media (max-width: 620px) {
  .tl-item { grid-template-columns: 1fr; gap: 6px; }
  .tl-item .logo-chip { display: none; }
}

/* ---------- testimonials ---------- */
#testimonials { background: var(--bg-alt); border-block: 1px solid var(--line); }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 36px;
}
/* testimonial cards: a clay accent along the top, a large faint quote mark,
   a soft lift off the section background, and the attribution set apart below */
.quote {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--clay);
  border-radius: 12px;
  padding: 30px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  right: 18px;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--clay);
  opacity: 0.2;
  pointer-events: none;
}
.quote:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px rgba(0, 0, 0, 0.45); }
.quote p.text { margin: 0; font-family: 'Fraunces', serif; font-size: 1.02rem; }
.quote .who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;           /* attributions line up along the bottom of the row */
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.quote .who img { width: 42px; height: 42px; border-radius: 50%; }
.quote .who b { display: block; font-size: 0.92rem; color: var(--forest); }
.quote .who span { color: var(--ink-soft); font-size: 0.82rem; }

/* ---------- contact ---------- */
#contact { text-align: center; }
#contact .lede { margin-inline: auto; }
/* contact form (embedded from eternalfriend.io, styled to match the site):
   name and email side by side, message full width, Send centred below */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 620px;
  margin: 32px auto 0;
  text-align: left;
}
.contact-form input:not([name="kich_ref"]),
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.contact-form textarea { grid-column: 1 / -1; min-height: 150px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--ink-soft); }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px var(--ring); }
.contact-form button { grid-column: 1 / -1; justify-self: center; cursor: pointer; font-family: inherit; }
.contact-form [data-contact-status] {
  grid-column: 1 / -1;
  min-height: 1.5em;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
@media (max-width: 560px) {
  .contact-form { grid-template-columns: 1fr; }
}
.side-note {
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 56ch;
  margin-inline: auto;
}

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--line);
  padding-block: 30px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.foot-row img { height: 16px; width: auto; opacity: 0.7; }
.foot-brand { display: flex; align-items: center; gap: 8px; }
footer.site a { color: var(--ink-soft); }
footer.site a:hover { color: var(--clay); }

/* Advisory engagements and selected experience. */
section[id] { scroll-margin-top: 90px; }
.card p + p { margin-top: 16px; }
.engagement-note { max-width: 74ch; margin-top: 36px; }
.engagement-note h3 { font-size: 1.2rem; }
.engagement-note p { color: var(--ink-soft); }
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 36px; }
.case h3 { color: var(--panel-ink); font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
.case p { color: var(--panel-ink-soft); }
@media (max-width: 760px) { .case-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Readable type and progressive disclosure. */
body { font-size: 18px; line-height: 1.7; }
h3, .card h3, .tl-item h3, .quote p.text, blockquote.pull {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
h3 { line-height: 1.4; }
section { padding-block: 88px; }
.card-grid { align-items: start; gap: 28px; }
.card { padding: 30px 28px; }
.card h3 { font-size: 1.2rem; margin-bottom: 18px; }
.card p { font-size: 1rem; line-height: 1.75; color: var(--ink); }
.card .num { margin-bottom: 18px; }
summary { cursor: pointer; font-size: 1rem; font-weight: 600; line-height: 1.5; padding-block: 14px; }
summary::marker { color: var(--clay); }
summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; border-radius: 4px; }
.engagement-details { margin-top: 24px; border-top: 1px solid var(--line); }
.details-body { padding-block: 8px 16px; }
.engagement-note { max-width: none; margin-top: 32px; border-block: 1px solid var(--line); padding-block: 6px; }
.engagement-note .details-body { max-width: 68ch; }
.earlier-work { padding-block: 16px; }
.current-details { border-top: 1px solid var(--line); }
.quote p.text { font-size: 1rem; line-height: 1.75; }
.tl-item p { font-size: 1rem; }
.chip { max-width: 100%; }
@media (max-width: 760px) {
  section { padding-block: 60px; }
  .card { padding: 26px 24px; }
}