@charset "UTF-8";

@font-face {
    font-family: "PT Sans";
    src: url("../fonts/pt-sans/PTSans-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("../fonts/ubuntu/Ubuntu-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Ubuntu";
    src: url("../fonts/ubuntu/Ubuntu-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colors */
    --color-black: #000000;
    --color-gray-100: #f5f5f5;
    --color-gray-300: #d1d5db;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-white: #ffffff;
    --borderColor: #e1e5e9;
    --backgroundColor: #ffffff;
    --textColor: #1a1a1a;
    --subtleBackgroundColor: #f8f9fa;
    --linkColor: #0066cc;
    --secondaryTextColor: #6c757d;
    --mutedTextColor: #adb5bd;

    /* Space variables - consolidate all spacing */
    --space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
    --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
    --flow-hspace: var(--space-xs);
    --font-size-s: clamp(0.8rem, 0.25vw + 0.74rem, 0.94rem);

    /* Timeline colors */
    --border-color: rgba(0, 0, 0, 0.3);
    --timeline-line-width: 2px;
    --timeline-marker-size: 10px;
    --timeline-marker-offset: -7px;
    --color-life: #f59e0b;
    --color-programming: wheat;
    --color-family: #ef4444;
    --color-work: #10b981;
    --color-projects: #3b82f6;

    --pilcrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4v16'/%3E%3Cpath d='M17 4v16'/%3E%3Cpath d='M19 4H9.5a4.5 4.5 0 0 0 0 9H13'/%3E%3C/svg%3E");
    --pilcrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4v16'/%3E%3Cpath d='M17 4v16'/%3E%3Cpath d='M19 4H9.5a4.5 4.5 0 0 0 0 9H13'/%3E%3C/svg%3E");

    --external-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m13.5 6.5-3.148-3.148a1.205 1.205 0 0 0-1.704 0L6.352 5.648a1.205 1.205 0 0 0 0 1.704L9.5 10.5"/><path d="M16.5 7.5 19 5"/><path d="m17.5 10.5 3.148 3.148a1.205 1.205 0 0 1 0 1.704l-2.296 2.296a1.205 1.205 0 0 1-1.704 0L13.5 14.5"/><path d="M9 21a6 6 0 0 0-6-6"/><path d="M9.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l4.296-4.296a1.205 1.205 0 0 0 0-1.704l-2.296-2.296a1.205 1.205 0 0 0-1.704 0z"/></svg>');
    --external-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m13.5 6.5-3.148-3.148a1.205 1.205 0 0 0-1.704 0L6.352 5.648a1.205 1.205 0 0 0 0 1.704L9.5 10.5"/><path d="M16.5 7.5 19 5"/><path d="m17.5 10.5 3.148 3.148a1.205 1.205 0 0 1 0 1.704l-2.296 2.296a1.205 1.205 0 0 1-1.704 0L13.5 14.5"/><path d="M9 21a6 6 0 0 0-6-6"/><path d="M9.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l4.296-4.296a1.205 1.205 0 0 0 0-1.704l-2.296-2.296a1.205 1.205 0 0 0-1.704 0z"/></svg>');
}

* {
    touch-action: manipulation;
}

html {
    font-size: 15px;
}

body {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12.5%;
    font-family: "PT Sans", sans-serif;
    background-color: #fffff8;
    color: #111;
    max-width: 1400px;
    counter-reset: sidenote-counter;
}

/* Adds dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #151515;
        color: #ddd;
    }
}

h1 {
    font-weight: 600;
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    font-size: 3rem;
    line-height: 1.6;
    font-family: "Ubuntu", sans-serif;
    hyphens: none;
}

h2 {
    font-weight: 500;
    margin-top: 2.1rem;
    margin-bottom: 1.4rem;
    font-size: 2.2rem;
    line-height: 1.6;
    font-family: "Ubuntu", sans-serif;
    hyphens: none;
}

h1 a:link,
h2 a:link,
h3 a:link {
    background: none;
    text-decoration: none;
    font-feature-settings: normal;
    text-transform: initial;
}

h3 {
    font-weight: 400;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1.4rem;
    line-height: 1.6;
    font-family: "Ubuntu", sans-serif;
}

hr {
    display: block;
    height: 1px;
    width: 55%;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

p.subtitle {
    font-style: italic;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    display: block;
    line-height: 1;
}

article {
    padding: 5rem 0rem;
}

section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

p,
dl,
ol,
ul {
    font-size: 1.4rem;
    line-height: 2rem;
}

p {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    padding-right: 0;
    vertical-align: baseline;
}

section > p,
section > footer,
section > table {
    width: 55%;
}

section > dl,
section > ol,
section > ul {
    width: 50%;
    -webkit-padding-start: 5%;
}

a:link,
a:visited {
    color: inherit;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.05em;
}

img {
    max-width: 100%;
}

.line {
    outline: none;
    border: none;
    height: auto;
    display: block;
    margin-bottom: 1em;
}

#article-title {
    font-size: 1em;
    margin-bottom: 0.5em;
    text-decoration: none;
    display: block;
    margin-bottom: 0.2em;
    color: inherit;
}

#article-description {
    font-family: "Ubuntu", sans-serif;
    font-size: 0.8em;
    max-width: 600px;
    margin-top: 0;
    margin-bottom: 0.5em;
    display: block;
}

.line br {
    display: none;
}

.line a#article-title[href]:hover {
    text-decoration: none;
    background-color: #f0f0f0;
    border-radius: 4px;
    color: #333333;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: -4px;
    margin-right: -4px;
}
.inline-hr {
    border: 0;
    border-left: 0.3rem solid var(--borderColor);
    height: 0.3rem;
    display: inline-block;
    vertical-align: middle;
    max-width: 4.5px;
    align-self: center;
    margin: 0;
}

.hr {
    border: 0;
    border-left: 0.7rem solid wheat;
    height: 0.7rem;
    margin: 1rem 0;
    background: none;
}

nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    align-items: center;
    margin: 0.6em 0;
}

a,
u {
    text-decoration-thickness: 0.5px;
}

a {
    color: var(--textColor);
    text-underline-offset: 3px;
    font-family: "PT Sans" sans-serif;
    line-height: 1.62em;
    font-size: 1.3rem;
    word-wrap: break-word;
}

h1 a,
h2 a,
h3 a {
    font-size: inherit;
}

a[href^="#"] {
    position: relative;
    padding-right: 1.25em;
    font-family: "PT Sans", sans-serif;
}

h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 0.1em;
}

a[href^="#"]::before {
    content: "" / "pilcrow";
    display: inline-block;
    background-image: var(--pilcrow-light);
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.1em;
    background-size: contain;
    font-family: "PT Sans", sans-serif;
    background-repeat: no-repeat;
    vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
    a[href^="#"]::before {
        background-image: var(--pilcrow-dark);
    }
}

a[href^='http']:not([href^='https://***.uk/'],
    .hidden-link,
    :has(img),
    :has(video),
    :has(picture),
    :has(audio)):after {
    content: "" / "external";
    background-image: var(--external-light);
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.5em;
    background-size: contain;
    font-family: "PT Sans", sans-serif;
    background-repeat: no-repeat;
    vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
    a[href^='http']:not([href^='https://***.uk/'],
        .hidden-link,
        :has(img),
        :has(video),
        :has(picture),
        :has(audio)):after {
        background-image: var(--external-dark);
    }
}

.terminal {
    list-style: none;
    padding-left: 0;
}

.terminal ul {
    margin-top: 0.5rem;
}

time.post-date {
    font-family: "PT Sans", sans-serif;
    font-size: 0.7em;
    color: var(--secondaryTextColor);
}