/* One Man Studio, v6. The Plain Poster, fourth pass.
   Cool paper, warm ink, the four poster colours back on the blocks. Roboto Flex (Android's own type) at its
   extremes for headlines, Familjen Grotesk (drawn in Sweden) for everything you read. Thin rules, no shadows. */

:root {
  --bg: #e9eef7;
  --fg: #1a1816;
  --rule: #1a1816;
  --card: #ffffff;
  --soft: #dde4f1;
  --mute: #5f6470;

  --tang: #ff6a00;
  --yolk: #ffc400;
  --lime: #c6ff3d;
  --ultra: #2d2bff;
  --accent: var(--tang);
  --accent-text: #d85400;      /* orange dark enough for text on the light paper */
  --focus: var(--ultra);
  --on-ultra: #ffffff;
  --ink: #1a1816;              /* text on colour blocks, both schemes */
  --paper: #ffffff;

  --font: "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-text: "Familjen Grotesk", "Roboto Flex", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #14131a; --fg: #f1f0f7; --rule: #f1f0f7; --card: #1d1c25; --soft: #26252f; --mute: #a6a4b3; --accent-text: var(--tang); --focus: var(--yolk); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #14131a; --fg: #f1f0f7; --rule: #f1f0f7; --card: #1d1c25; --soft: #26252f; --mute: #a6a4b3; --accent-text: var(--tang); --focus: var(--yolk); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-text); font-size: 17.5px; line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1; font-family: var(--font); }
h1 { font-weight: 1000; font-stretch: 110%; letter-spacing: -.035em; }
h2 { font-weight: 1000; font-stretch: 125%; letter-spacing: -.03em; font-size: clamp(34px, 5vw, 64px); margin-bottom: clamp(24px, 3vw, 40px); }
h3 { font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--yolk); color: var(--ink); }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.muted { color: var(--mute); }
.lede { max-width: 60ch; margin-bottom: 24px; }
.label { display: block; font-size: 13px; font-weight: 600; color: inherit; opacity: .75; }

/* Colour blocks (ink text on all of them) */
.tang { --block: var(--tang); } .yolk { --block: var(--yolk); } .lime { --block: var(--lime); } .ultra { --block: var(--ultra); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; background: var(--fg); color: var(--bg); border: 1px solid var(--fg); font: 700 15px/1 var(--font); font-stretch: 105%; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--tang); border-color: var(--tang); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--fg); }
.btn.yolk { background: var(--yolk); border-color: var(--rule); color: var(--ink); }
.btn.yolk:hover { background: var(--lime); border-color: var(--rule); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.brand { text-decoration: none; font-family: var(--font); font-weight: 800; font-stretch: 115%; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px 18px; flex-wrap: wrap; }
.nav li a { display: inline-block; padding: 4px 0; text-decoration: none; font-family: var(--font); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
.nav li a:hover, .nav li a.hot { border-bottom-color: var(--tang); }
.bulb { background: transparent; border: 0; padding: 4px; cursor: pointer; display: grid; place-items: center; }
.bulb img { height: 28px; width: auto; transition: filter .25s, transform .25s; }
.bulb:hover img { transform: rotate(-8deg); }
:root[data-theme="dark"] .bulb img { filter: grayscale(1) brightness(.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bulb img { filter: grayscale(1) brightness(.7); } }
@media (max-width: 760px) { .nav .wrap { flex-wrap: wrap; padding-block: 10px; } .nav nav { order: 3; width: 100%; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 8vw, 120px) clamp(40px, 6vw, 80px); }
.hero h1 { font-size: clamp(44px, 8vw, 128px); max-width: 14ch; }
.hero h1 .hl { color: var(--accent-text); }
.hero-foot { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-end; justify-content: space-between; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--rule); padding-top: 20px; }
.hero .who { font-size: 16px; color: var(--mute); line-height: 1.55; max-width: 62ch; }
.hero .who b { color: var(--fg); font-weight: 700; }

/* ---------- Sections ---------- */
.section { border-top: 1px solid var(--rule); padding-block: clamp(48px, 7vw, 96px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0; }
.section-head + * { margin-top: clamp(24px, 3vw, 40px); }

/* ---------- Work ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.filters button { background: none; border: 0; padding: 4px 0; font: 500 14px/1.2 var(--font); color: var(--mute); cursor: pointer; border-bottom: 2px solid transparent; }
.filters button span { font-variant-numeric: tabular-nums; opacity: .7; }
.filters button:hover { color: var(--fg); }
.filters button[aria-pressed="true"] { color: var(--fg); border-bottom-color: var(--tang); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; min-width: 0; background: var(--card); color: var(--fg); text-decoration: none; border: 1px solid var(--rule); border-top: 6px solid var(--block, var(--tang)); transition: transform .15s ease; }
.card:hover { transform: translateY(-3px); }
.card .shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); border-bottom: 1px solid var(--rule); }
.card .shot img:first-child { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .shot img:first-child { transform: scale(1.025); }
.card .badge { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--ink); background: #fff; }
.card-body { padding: 16px 18px 18px; display: grid; gap: 6px; flex: 1; align-content: start; }
.card h3 { font-size: 24px; font-weight: 900; font-stretch: 110%; }
.card .meta { font-size: 13.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.card .story { margin-top: 6px; font-size: 15.5px; }
.card .story::first-letter { font-weight: 700; }
.card .more { margin-top: auto; padding-top: 12px; font-family: var(--font); font-weight: 700; font-size: 14px; }
.card .more { color: var(--fg); }
.card:hover .more { color: var(--accent-text); }
.card[hidden] { display: none; }
.more-wrap { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.more-wrap[hidden] { display: none; }
.empty { padding-block: 24px; }

/* ---------- The man ---------- */
.man .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.man .photo { position: relative; max-width: 380px; }
.man .photo img { border: 1px solid var(--rule); aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; width: 100%; }
.man .photo .tag { position: absolute; left: 12px; bottom: 14px; background: var(--lime); color: var(--ink); border: 1px solid var(--ink); padding: 5px 9px; font-family: var(--font); font-size: 12px; font-weight: 700; }
.man .copy { max-width: 62ch; }
.man .copy h3 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 16px; }
.man .copy p + p { margin-top: 1em; }
.man .copy mark { background: var(--yolk); color: var(--ink); padding: 0 .2em; }
.stats { list-style: none; margin: 32px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stats li { background: var(--block); color: var(--ink); border: 1px solid var(--ink); padding: 14px 14px 12px; }
.stats li.ultra { color: var(--on-ultra); }
.stats b { display: block; font-family: var(--font); font-size: clamp(40px, 4vw, 56px); font-weight: 1000; font-stretch: 120%; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.stats span { display: block; font-size: 13px; margin-top: 8px; opacity: .8; }
@media (max-width: 860px) { .man .wrap { grid-template-columns: 1fr; } }

/* ---------- What I do ---------- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0; border: 1px solid var(--ink); }
.services article { padding: clamp(20px, 2.5vw, 30px); display: grid; gap: 12px; align-content: start; min-width: 0; background: var(--block); color: var(--ink); border: 0 solid var(--ink); }
.services article.ultra { color: var(--on-ultra); }
.services article + article { border-top-width: 1px; }
@media (min-width: 760px) {
  .services { grid-template-columns: 1fr 1fr; }
  .services article + article { border-top-width: 0; }
  .services article:nth-child(2n) { border-left-width: 1px; }
  .services article:nth-child(n+3) { border-top-width: 1px; }
}
.services h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; font-stretch: 110%; }
.services p { font-size: 15.5px; max-width: 50ch; }
.clients { margin-top: 28px; font-size: 14px; max-width: 80ch; }

/* ---------- The lab ---------- */
.lab-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
@media (max-width: 700px) { .lab-grid { grid-template-columns: 1fr; } }
.labcard { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 32px); text-decoration: none; background: var(--block); color: var(--ink); border: 1px solid var(--ink); transition: transform .15s ease; }
.labcard.ultra { color: var(--on-ultra); }
.labcard:hover { transform: translateY(-3px); }
.labcard h3 { font-size: clamp(30px, 3vw, 40px); font-weight: 900; font-stretch: 115%; }
.labcard p { font-size: 15.5px; max-width: 54ch; }
.labcard .more { margin-top: 6px; font-family: var(--font); font-weight: 700; font-size: 14px; border-bottom: 2px solid currentColor; width: max-content; }

/* ---------- Talk ---------- */
.talk .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; border-top: 1px solid var(--rule); padding-top: 16px; }
.contacts span { display: inline-block; min-width: 9ch; color: var(--mute); }
.contacts a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tang); }
.form { display: grid; gap: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field span { font-size: 13px; color: var(--mute); }
.field input, .field textarea { width: 100%; font: 16px/1.4 var(--font-text); padding: 12px 14px; background: var(--card); color: var(--fg); border: 1px solid var(--rule); border-radius: 0; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: inset 0 -2px 0 var(--focus); }
.field textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.status { font-size: 14px; padding: 8px 12px; border: 1px solid var(--rule); background: var(--card); }
.status.ok { background: var(--lime); color: var(--ink); }
.status.err { background: var(--tang); color: var(--ink); }
@media (max-width: 860px) { .talk .wrap { grid-template-columns: 1fr; } .row2 { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--rule); padding-block: 22px 40px; color: var(--mute); font-size: 13px; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot a { color: var(--fg); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--tang); }

/* ---------- Project page ---------- */
.proj-head { padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.back { display: inline-block; margin-bottom: 24px; font-family: var(--font); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 2px solid var(--tang); }
.proj-head h1 { font-size: clamp(40px, 7vw, 104px); }
.proj-head .meta { margin-top: 18px; font-size: 15px; color: var(--mute); font-variant-numeric: tabular-nums; }
.proj-body .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.proj-shot { margin: 0; padding: clamp(14px, 2vw, 24px); background: var(--block, var(--soft)); border: 1px solid var(--ink); }
.proj-shot img { width: 100%; border: 1px solid var(--ink); background: #fff; }
.proj-info { display: grid; gap: 28px; }
.proj-body .text { font-size: 17.5px; max-width: 62ch; }
.proj-body .text p + p { margin-top: 1em; }
.proj-side { display: grid; gap: 18px; align-content: start; border-top: 1px solid var(--rule); padding-top: 18px; }
.proj-side .logo { width: 64px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); background: #fff; }
.proj-side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 15px; }
.proj-side dt { color: var(--mute); }
.proj-side dd { margin: 0; }
.proj-side .btn { justify-self: start; }
.proj-nav { border-top: 1px solid var(--rule); }
.proj-nav .wrap { display: grid; grid-template-columns: 1fr 1fr; }
.proj-nav a { padding: clamp(20px, 3vw, 32px) 0; text-decoration: none; display: grid; gap: 6px; min-width: 0; }
.proj-nav a + a { text-align: right; border-left: 1px solid var(--rule); padding-left: 24px; }
.proj-nav a:first-child { padding-right: 24px; }
.proj-nav a:hover b { color: var(--accent-text); }
.proj-nav small { font-size: 13px; color: var(--mute); }
.proj-nav b { font-family: var(--font); font-size: clamp(20px, 2.6vw, 34px); font-weight: 900; font-stretch: 110%; letter-spacing: -.02em; line-height: 1; overflow-wrap: anywhere; }
@media (max-width: 860px) { .proj-body .wrap { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.lost h1 { font-size: clamp(90px, 25vw, 320px); color: var(--accent-text); }
.lost p { margin: 20px 0 32px; }

/* Farewell line for apps that left Google Play */
.epitaph { font-style: italic; color: var(--mute); border-left: 3px solid var(--tang); padding-left: 12px; max-width: 40ch; }