/*! lukasrathmann.com 2026 Stylesheet
    Last updated: 05.10.2026
*/

/* ==========================================================================
  Reset from https://piccalil.li/blog/a-more-modern-css-reset/
========================================================================== */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* ==========================================================================
  Base config
========================================================================== */

/* Font */

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

/* Font sizes https://utopia.fyi/type/calculator?c=360,18,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.72rem, 0.8063rem + -0.1114vw, 0.7813rem);
  --step--1: clamp(0.9rem, 0.9528rem + -0.0682vw, 0.9375rem);
  --step-0: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
  --step-1: clamp(1.35rem, 1.327rem + 0.1023vw, 1.4063rem);
  --step-2: clamp(1.62rem, 1.5636rem + 0.2506vw, 1.7578rem);
  --step-3: clamp(1.944rem, 1.8404rem + 0.4605vw, 2.1973rem);
  --step-4: clamp(2.3328rem, 2.1635rem + 0.7523vw, 2.7466rem);
  --step-5: clamp(2.7994rem, 2.5401rem + 1.1525vw, 3.4332rem);
}

/* Spacing https://utopia.fyi/space/calculator?c=360,18,1.2,1240,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5625rem + 0vw, 0.5625rem);
  --space-xs: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
  --space-s: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
  --space-m: clamp(1.6875rem, 1.6875rem + 0vw, 1.6875rem);
  --space-l: clamp(2.25rem, 2.25rem + 0vw, 2.25rem);
  --space-xl: clamp(3.375rem, 3.375rem + 0vw, 3.375rem);
  --space-2xl: clamp(4.5rem, 4.5rem + 0vw, 4.5rem);
  --space-3xl: clamp(6.75rem, 6.75rem + 0vw, 6.75rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2102rem + 0.4545vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4347rem + 0.5682vw, 0.875rem);
  --space-xs-s: clamp(0.875rem, 0.7727rem + 0.4545vw, 1.125rem);
  --space-s-m: clamp(1.125rem, 0.8949rem + 1.0227vw, 1.6875rem);
  --space-m-l: clamp(1.6875rem, 1.4574rem + 1.0227vw, 2.25rem);
  --space-l-xl: clamp(2.25rem, 1.7898rem + 2.0455vw, 3.375rem);
  --space-xl-2xl: clamp(3.375rem, 2.9148rem + 2.0455vw, 4.5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.5795rem + 4.0909vw, 6.75rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6648rem + 2.0455vw, 2.25rem);
}

:root {
  --gutter: var(--space-s-m);
  --region-space: var(--space-m-l);
  --wrapper-width: clamp(16rem,93vw,46rem);
}

/* Colors light mode */
:root {
  --color-background: #fafafa;
  --color-highlight: #050505;
  --color-default: #111;
  --color-dim: #646464;
  --color-vdim: #e7e7e7;
  --color-accent: #0055ff;    
  --color-backdrop: rgba(0,0,0,0.05);
  --color-vbackdrop: rgba(0,0,0,0.1);
}

/* Colors dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1a1a;
    --color-highlight: #fafafa;
    --color-default: #e5e5e5;
    --color-dim: #bfbfbf;
    --color-vdim: #333;
    --color-accent: #0055ff;
    --color-backdrop: rgba(255,255,255,0.08);
    --color-vbackdrop: rgba(255,255,255,0.16);
  }
}

body {
  margin-inline: 0;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* ==========================================================================
  Typography
========================================================================== */
body {
  background-color: var(--color-background);
  color: var(--color-default);
  font-size: var(--step-0);
  line-height: 1.6;
}

h1, h2, h3 {
  color: var(--color-highlight);
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: var(--step-3);
}

h2 {
  font-size: var(--step-2);
}

h3 {
  font-size: var(--step-1);
}

a {
  color: currentColor;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-highlight);
}

time {
  color: var(--color-dim);
}

blockquote,
dl,
li,
p {
  max-width: 65ch;
}

ol, ul {
  padding-inline-start: var(--space-s);
}

figcaption {
  color: var(--color-dim);
  font-size: var(--step--1);
  margin-block-start: .5em;
  text-align: center;
}

blockquote {
  border-inline-start: .1em solid var(--color-vdim);
  font-style: italic;
  margin-inline-start: 0;
  padding-inline-start: 1em;
}

blockquote cite {
  display: block;
  color: var(--color-default);
  font-style: normal;
  margin-top: var(--space-s);
}

blockquote cite::before {
  content: "– ";
}

strong, b {
  font-weight: 500;
}

/* ==========================================================================
  Block elements
========================================================================== */
svg {
  height: 1em;
  width: 1em;
}

img {
  background-color: var(--color-backdrop);
  height: auto;
  width: 100%;
}

img[src*=".svg"] {
  width: 100%;
}

figure {
  margin-inline: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-dim);
  margin: var(--space-l-xl) 0;
  max-width: 55rem;
  transform: translateY(-1px);
}

/* ==========================================================================
  Layout
========================================================================== */
body {
  display: flex;
  flex-direction: column;
}

main {
  flex: auto;
}

.prose {
  --flow-space:var(--space-m);
}

.prose figure img {
  margin-inline: auto;
}

.prose li+li {
  margin-top:var(--space-s);
}

.prose :is(pre,
pre+*,
figure,
figure+*,
h2,
h3,
h4) {
  --flow-space:var(--space-l-xl);
}

.prose h1+* {
  --flow-space:0.5em;
}

.prose :is(h2+*,
h3+*,
h4+*) {
  --flow-space:var(--space-s);
}

.flow>*+* {
  margin-top:var(--flow-space,1em);
}

.region {
  padding-block: var(--region-space);
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: var(--wrapper-width);
}

.repel { 
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  justify-content: space-between;
}

.cluster {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  justify-content: flex-start;
}

.split {
  list-style: none;
  margin-bottom: var(--space-m);
}

@media only screen and (min-width:40em) {
  .split {
    align-items: baseline;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

ol[role=list],
ul[role=list] {
  list-style: none;
  margin: 0;
  padding: 0;
}

.split-list {
  padding: 0;
}

/* ==========================================================================
  Header
========================================================================== */
.site-header {
  font-size: var(--step--1);
  padding: var(--gutter);
}

.site-header-container {
  align-items: start;
}

.site-header-title {
  display: grid;
}

.site-header-logo {
  color: var(--color-default);
  font-weight: 600;
  text-decoration: none;
}

.site-header-title p {
  color: var(--color-dim);
  margin-top: 0;
}

/* ==========================================================================
  Footer
========================================================================== */
.site-footer {
  font-size: var(--step--1);
  padding: var(--gutter);
}

.site-footer-nav {
  margin-top: var(--space-s);
}

/* ==========================================================================
  Home
========================================================================== */
.hero h1 {
  font-size: var(--step-0);
  font-weight: 400;
}

/* ==========================================================================
  Projects
========================================================================== */
.project-list {
  display: grid;
  gap: var(--gutter);
  margin-top: var(--space-m);
  padding: 0;
}

.project {
  list-style: none;
}

.project-link {
    text-decoration: none;
}

.project-link:hover img {
  background-color: var(--color-vbackdrop);
}

.project-headline {
  font-size: var(--step-0);
}

.project-description {
  margin-top: var(--space-2xs);
}

/* ==========================================================================
 Blog
========================================================================== */
.blog-list {
  list-style: none;
  margin-top: var(--space-xl);
  padding: 0;
}