/* ---------------------------------------------------------------
   Miroslav Tourek — personal site
   Dark hero with a glow and floating chips, light card sections
   below. The accent is the portfolio teal, brightened so it holds
   up against the dark panels.
   --------------------------------------------------------------- */

/* Inter, served from this site (fonts/) instead of Google Fonts, so visitors'
   IP addresses are not sent to a third party. Variable font, weights 400–800;
   latin-ext carries the Czech diacritics. Licence: SIL Open Font License 1.1. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Light palette is the default. Dark comes either from the OS setting
   or from the user's choice, stored as data-theme on <html>. */
:root {
  /* Dark panels — hero and contact stay dark in both themes */
  --ink-900: #0c1218;
  --ink-800: #111a22;
  --ink-700: #18242e;

  /* Page surface */
  --bg: #ffffff;
  --bg-soft: #f7f8f8;
  --card: #ffffff;
  --card-alt: #111a22;   /* accent card inside a light section */
  --line: #e7eaea;

  /* Text */
  --text: #0f1a20;
  --text-muted: #5d6b73;
  --text-invert: #ffffff;
  --text-invert-muted: #9fb0b8;

  /* Accent */
  --accent: #17a789;
  --accent-bright: #4ad3b4;
  --accent-hover: #0d8f75;
  --accent-soft: #eaf7f4;
  --accent-glow: transparent;

  --shadow-strength: 1;

  /* Opacity of the scrolled bar; the light theme lets a little show through. */
  --header-alpha: 78%;

  /* Height of the sticky bar; the hero is pulled up by exactly this much. */
  --header-h: 91px;

  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --max-width: 1080px;
  --shadow-card: 0 1px 2px rgba(15, 26, 32, calc(0.04 * var(--shadow-strength))),
                 0 8px 24px rgba(15, 26, 32, calc(0.06 * var(--shadow-strength)));
  --shadow-card-hover: 0 2px 4px rgba(15, 26, 32, calc(0.06 * var(--shadow-strength))),
                       0 16px 40px rgba(15, 26, 32, calc(0.1 * var(--shadow-strength)));
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Dark values live in one place and feed both triggers: the OS setting
   (when the user has not chosen) and the manual toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #080d12;
    --ink-800: #0d151b;
    --ink-700: #16222b;

    --bg: #0a1015;
    --bg-soft: #0e161d;
    --card: #131f27;
    --card-alt: #1c2c37;
    --line: #24333d;

    --text: #eaf1f2;
    --text-muted: #93a5ad;

    --accent: #4ad3b4;
    --header-alpha: 85%;
    --accent-hover: #7cead1;
    --accent-glow: rgba(124, 234, 209, 0.35);
    --accent-soft: #14282a;

    --shadow-strength: 0.35;
  }
}

:root[data-theme="dark"] {
  --ink-900: #080d12;
  --ink-800: #0d151b;
  --ink-700: #16222b;

  --bg: #0a1015;
  --bg-soft: #0e161d;
  --card: #131f27;
  --card-alt: #1c2c37;
  --line: #24333d;

  --text: #eaf1f2;
  --text-muted: #93a5ad;

  --accent: #4ad3b4;
  --header-alpha: 85%;
  --accent-hover: #7cead1;
  --accent-glow: rgba(124, 234, 209, 0.35);
  --accent-soft: #14282a;

  --shadow-strength: 0.35;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Anchor targets stop below the sticky bar instead of under it. The extra
   room covers the 18px offset the reveal animation applies to a section
   that has not been scrolled into view yet. */
:target,
section[id] { scroll-margin-top: 116px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: transparent;
  transition: background 0.25s, border-color 0.25s;
  border-bottom: 1px solid transparent;
}
/* Over the hero the bar is invisible. Once the page scrolls it takes the
   colours of the page underneath — light bar with dark text in the light
   theme, dark bar in the dark one — so it never reads as a foreign slab. */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--bg) var(--header-alpha), transparent);
  /* More blur compensates for the thinner backing, keeping the nav legible. */
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-header.is-stuck .logo { color: var(--text); }
.site-header.is-stuck nav a { color: var(--text-muted); }
.site-header.is-stuck nav a:hover { color: var(--text); }
.site-header.is-stuck .theme-toggle {
  border-color: var(--line);
  /* Shares the bar's opacity, otherwise the solid circle reads as a heavier
     element pasted onto a translucent bar. */
  background: color-mix(in srgb, var(--bg-soft) var(--header-alpha), transparent);
  color: var(--text);
}
.site-header.is-stuck .theme-toggle:hover { background: var(--accent-soft); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  color: var(--text-invert);
}
.logo span { color: var(--accent-bright); }

.site-header nav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.site-header nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-invert-muted);
  transition: color 0.2s;
}
.site-header nav a:hover { color: var(--text-invert); }
/* Language switch: a small pill so it reads as a toggle, not a section link. */
.site-header nav a.lang-switch {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.site-header nav a.lang-switch:hover { background: rgba(255, 255, 255, 0.1); }
.site-header.is-stuck nav a.lang-switch { border-color: var(--line); }
.site-header.is-stuck nav a.lang-switch:hover { background: var(--accent-soft); }


/* Breadcrumbs next to the logo: the logo is the way home, the trail says
   where you are. Replaces the in-page back link. */
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.crumbs {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
  min-width: 0;
}
.crumbs li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The separator sits before every crumb, including the first — the logo is
   the home link, so the trail starts right after it. */
.crumbs li::before {
  content: "›";
  margin-right: 8px;
  opacity: 0.55;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { font-weight: 600; }
.site-header .crumbs { color: var(--text-invert-muted); }
.site-header .crumbs a { color: var(--text-invert-muted); }
.site-header .crumbs [aria-current="page"] { color: var(--text-invert); }
.site-header.is-stuck .crumbs,
.site-header.is-stuck .crumbs a { color: var(--text-muted); }
.site-header.is-stuck .crumbs [aria-current="page"] { color: var(--text); }

/* Theme menu. The trigger sits over the dark hero, so it keeps the light styling. */
.theme-menu { position: relative; }
.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-invert);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-1px); }
.theme-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.2); }
.theme-toggle svg { grid-area: 1 / 1; transition: opacity 0.2s, transform 0.3s; }

/* The icon shows the theme currently in effect: sun for light, moon for dark. */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.theme-toggle[data-effective="light"] .icon-sun,
.theme-toggle[data-effective="dark"] .icon-moon { opacity: 1; transform: none; }

.theme-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(8, 13, 18, 0.28);
}
.theme-list[hidden] { display: none; }
.theme-list button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.theme-list button:hover { background: var(--bg-soft); }
.theme-list .tick { width: 14px; color: var(--accent); opacity: 0; }
.theme-list [aria-checked="true"] { font-weight: 600; }
.theme-list [aria-checked="true"] .tick { opacity: 1; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--ink-900);
  color: var(--text-invert);
  /* Pulled up under the sticky bar, so the transparent bar sits on the dark
     hero. Without this the bar would rest on the page background and the
     white logo and toggle would vanish in the light theme. */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 60px) 0 110px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  top: -10%;
  right: 4%;
  width: 780px;
  height: 780px;
  max-width: 90vw;
  background: radial-gradient(circle, rgba(74, 211, 180, 0.22) 0%, rgba(74, 211, 180, 0.06) 40%, transparent 68%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-invert-muted);
  margin: 0 0 20px;
}
.eyebrow-accent { color: var(--accent); }

.hero h1 {
  font-size: clamp(2.9rem, 7vw, 4.6rem);
  margin-bottom: 26px;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--accent-bright), #74e3c8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead {
  max-width: 46ch;
  color: var(--text-invert-muted);
  font-size: 1.05rem;
  margin: 0;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 0.18s, background 0.18s, border-color 0.18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--accent-bright);
  color: #06231c;
}
.btn-primary:hover { background: #5ee0c1; }
.btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-invert);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.hero-stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  list-style: none;
  padding: 30px 0 0;
  margin: 40px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-stats li { display: flex; flex-direction: column; }
.hero-stats strong {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero-stats span {
  font-size: 0.82rem;
  color: var(--text-invert-muted);
}

/* Portrait with floating chips */
.hero-portrait {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 380px;
}
.portrait {
  width: 320px;
  max-width: 72vw;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-700), var(--ink-800));
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait.is-placeholder {
  display: grid;
  place-items: center;
  color: var(--text-invert-muted);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-style: dashed;
}

.float-chip {
  position: absolute;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.chip-1 { top: 8%; left: -4%; }
.chip-2 { top: 46%; right: -8%; animation-delay: -2s; }
.chip-3 { bottom: 8%; left: 2%; animation-delay: -4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* Compact hero for subpages. */
.page-hero {
  background: var(--ink-900);
  color: var(--text-invert);
  /* Same pull-up as the home hero, so the transparent bar rests on the dark
     panel rather than on the page background. */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 40px) 0 84px;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin-bottom: 20px;
  max-width: 20ch;
}
.page-hero .hero-lead { max-width: 52ch; }

/* Short about block on the home page, pointing at the full story. */
.about-strip h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  max-width: 18ch;
  margin-bottom: 20px;
}
.about-lead {
  max-width: 60ch;
  color: var(--text-muted);
  margin: 0;
}
.about-more { margin: 22px 0 0; font-weight: 600; }
.about-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  transition: gap 0.2s, color 0.2s, text-shadow 0.2s;
}
/* Same nudge as the back link, mirrored: the arrow leads away to the right. */
.about-more a:hover {
  gap: 12px;
  color: var(--accent-hover);
  text-shadow: 0 0 14px var(--accent-glow);
  text-decoration: none;
}

/* ---------- Shared sections ---------- */

.section { padding: 110px 0; }
.section:nth-of-type(odd) { background: var(--bg-soft); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.section-head h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
.dot { color: var(--accent-bright); }
.section-lead {
  color: var(--text-muted);
  margin: 0;
  max-width: 46ch;
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.work-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s, box-shadow 0.22s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.card p + p { margin-top: 10px; }
.card-when {
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 12px !important;
}
.card-wide { grid-column: span 2; }
.card-full { grid-column: 1 / -1; }

.card-dark {
  background: var(--card-alt);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-invert);
}
.card-dark h3 { color: var(--text-invert); }
.card-dark p { color: var(--text-invert-muted); }
.card-dark .card-when { color: var(--accent-bright) !important; }

.card-feature { display: flex; flex-direction: column; justify-content: center; }
.card-feature h3 { font-size: 1.5rem; }

.work-cta {
  margin: 34px 0 0;
  font-weight: 600;
}
.work-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  transition: gap 0.2s, color 0.2s, text-shadow 0.2s;
}
.work-cta a:hover {
  gap: 12px;
  color: var(--accent-hover);
  text-shadow: 0 0 14px var(--accent-glow);
  text-decoration: none;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }


/* ---------- Seam between dark panels and light sections ----------
   The panel masks itself: a plain rectangle above the seam and an SVG for the
   curved edge below it. Because the section masks its own background, the
   curve works in both themes with no second colour, and there is no overlaid
   strip that could leave a hairline gap.
   The SVG is authored in a 1200x100 box and stretched to --seam-drop, so the
   depth of the cut is a single number. */
:root { --seam-drop: 54px; }

.hero,
.page-hero,
.doc-hero {
  border-radius: 0;
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--seam-drop)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,0 C800,0 400,100 0,100 Z' fill='%23000'/%3E%3C/svg%3E")
      bottom / 100% var(--seam-drop) no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - var(--seam-drop)) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,0 C800,0 400,100 0,100 Z' fill='%23000'/%3E%3C/svg%3E")
      bottom / 100% var(--seam-drop) no-repeat;
}

/* The closing panel repeats the same fall, so the two seams read as one system
   rather than a mirror. It slides up under the section above by the same
   amount it gains in padding, so nothing shifts. */
.contact {
  border-radius: 0;
  margin-top: calc(-1 * var(--seam-drop));
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C400,100 800,0 1200,0 L1200,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E")
      top / 100% var(--seam-drop) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--seam-drop)) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C400,100 800,0 1200,0 L1200,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E")
      top / 100% var(--seam-drop) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--seam-drop)) no-repeat;
}


/* ---------- Journey ----------
   The "Cesta sem" section is a chronology, so it is drawn as one continuous
   rail rather than a grid of cards: a line the eye can follow, with a marker
   per stop. The rail fades in from the top and gains the accent colour as it
   reaches the present, so the direction of travel is readable at a glance. */
.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 720px;
}
.journey::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--line) 8%,
    var(--line) 62%,
    var(--accent) 100%
  );
}
.journey-step {
  position: relative;
  padding: 0 0 40px 44px;
}
.journey-step:last-child { padding-bottom: 0; }
.journey-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  /* The global reset does not reach pseudo-elements — the universal selector
     does not match them — so the border has to be counted in explicitly,
     otherwise the marker is 20px wide and sits 2px off the rail. */
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 2px solid var(--line);
}
/* The present is the destination, so its marker is filled and haloed. */
.journey-step.is-now::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.journey-when {
  font-family: "SFMono-Regular", Consolas, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 6px;
}
.journey-step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.journey-step p { margin: 0; color: var(--text-muted); }
.journey-step h3 + p { max-width: 62ch; }

@media (max-width: 620px) {
  .journey-step { padding-left: 34px; padding-bottom: 32px; }
  .journey::before { left: 6px; }
  .journey-step::before { width: 14px; height: 14px; }
}

/* ---------- Contact ---------- */

.contact {
  background: var(--ink-900);
  color: var(--text-invert);
  padding: calc(110px + var(--seam-drop)) 0 120px;
  text-align: center;
}
.contact h2 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 18px; }
.contact .eyebrow { color: var(--accent-bright); }
.contact-lead {
  color: var(--text-invert-muted);
  max-width: 46ch;
  margin: 0 auto;
}
.contact-mail {
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 600;
  margin: 34px 0 30px;
  letter-spacing: -0.01em;
}
.contact-lead a { color: var(--accent-bright); text-decoration: underline; }
.contact-mail a { color: var(--accent-bright); }
.contact-mail a:hover { text-decoration: underline; }
.at-word { color: var(--text-invert-muted); font-size: 0.8em; font-weight: 400; }
.socials {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.socials a {
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.18s;
}
.socials a:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Client work ---------- */

/* Plain section on the page background; its own heading and the portfolio
   link keep it apart from the own-apps section. */
.clients-panel .eyebrow { color: var(--accent); }
.clients-panel h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: 18px;
}
.clients-lead { max-width: 62ch; margin: 0; color: var(--text-muted); }
.clients-more { margin: 22px 0 0; font-weight: 600; }
.clients-more a { color: var(--accent); }
.clients-more a:hover { text-decoration: underline; }

/* ---------- App pages ---------- */

/* App icon: the PNG is the square App Store artwork; the radius
   approximates the iOS icon shape. */
.app-icon {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.app-icon img { width: 100%; height: 100%; display: block; }
.app-icon-lg { width: 112px; height: 112px; }

.app-hero-head { display: flex; gap: 28px; align-items: center; margin-bottom: 26px; }
.app-hero-head h1 { margin: 0; }
.app-hero-head .eyebrow { margin-bottom: 8px; }

/* Official Apple badge: only sized, never restyled. The padding keeps
   the required clear space (a quarter of the badge height). */
.store-badge-link { display: inline-block; margin-top: 28px; padding: 12px 12px 12px 0; line-height: 0; }
.store-badge-link img { height: 48px; width: auto; display: block; }

.app-links { display: flex; gap: 14px; flex-wrap: wrap; }
.app-links a {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.2s;
}
.app-links a:hover { background: var(--accent-soft); }

/* Screenshots: a row of five that fits the page width on desktop and turns
   into a swipeable strip on narrow screens. The strip scrolls on its own, so
   the page never scrolls sideways. */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0 0 12px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.shots li { scroll-snap-align: start; }
.shots figure { margin: 0; }
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12%/5.5%;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.shots figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* App card on the home page */
.app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.app-card { display: flex; gap: 22px; align-items: flex-start; }
.app-card h3 { margin-bottom: 4px; }
.app-card .app-platforms {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.app-card .app-more { margin-top: 14px; font-weight: 600; color: var(--accent); }

@media (max-width: 900px) { .app-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .app-hero-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  /* The strip bleeds to the screen edges, so a cut-off shot reads as
     "swipe for more" rather than as a clipped box. */
  .shots {
    grid-auto-columns: 58%;
    gap: 16px;
    margin: 0 -28px;
    padding: 0 28px 12px;
    scroll-padding: 0 28px;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink-900);
  color: var(--text-invert-muted);
  padding: 0 0 40px;
  font-size: 0.85rem;
  text-align: center;
}
.site-footer p { margin: 0; }
/* Pages without the dark contact block above the footer need their own top padding. */
.site-footer.is-standalone { padding-top: 40px; }
.footer-links {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 14px;
}
.footer-links a {
  font-size: 0.85rem;
  color: var(--text-invert-muted);
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent-bright); }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-portrait { order: -1; min-height: 0; }
  .portrait { width: 220px; }
  .chip-1 { left: 0; }
  .chip-2 { right: 0; }
  .section-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .card-grid, .card-grid-3, .work-grid { grid-template-columns: repeat(2, 1fr); }
  .card-wide, .card-feature { grid-column: span 2; }
}

@media (max-width: 620px) {
  :root { --seam-drop: 32px; }
  .hero { padding: calc(var(--header-h) + 30px) 0 80px; }
  :root { --header-h: 78px; }

  /* Secondary links drop out on narrow screens so the bar stays on one line;
     support is still in the hero and the footer, contact ends the page. */
  .site-header nav { gap: 14px; }
  .site-header nav a.nav-secondary { display: none; }
  .site-header nav a { font-size: 0.85rem; }
  .site-header .wrap { gap: 10px; }
  .card-grid, .card-grid-3, .work-grid { grid-template-columns: 1fr; }
  .card-wide, .card-feature { grid-column: span 1; }
  .section { padding: 76px 0; }
  .hero-stats { gap: 24px; }
  .float-chip { font-size: 0.75rem; padding: 7px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float-chip { animation: none; }
  .card:hover, .btn:hover { transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}