/* Overrides for the risotto theme.
   Written against the theme's semantic variables (--link, --hover, --muted,
   --off-bg, --inner-bg ...) so it survives a palette swap in hugo.toml.

   House style, borrowed from the theme itself: monospace, hairline rules,
   hierarchy carried by weight and colour rather than by boxes. */

:root {
    --rule-dash: linear-gradient(to right, var(--base03) 0 4px, transparent 4px);
    --rule-tile: 7px 1px;
}

.hero,
.proj,
.postlist__item,
.stack__group {
    background-image: var(--rule-dash);
    background-size: var(--rule-tile);
    background-repeat: repeat-x;
    background-position: bottom left;
}

.proj:last-child,
.postlist__item:last-child,
.stack__group:last-child {
    background-image: none;
}

/* ─────────────────────────  Sidebar  ───────────────────────── */

.aside__heading {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--muted);
}

.aside__heading::before {
    content: none;
}

.aside__heading--posts {
    margin-top: 1.5rem;
}

.aside__social-links,
.aside__posts {
    padding: 0;
    margin: 0;
    list-style: none;
}

.aside__social-links li,
.aside__posts li {
    display: block;
}

.aside__social-links li::marker,
.aside__posts li::marker {
    content: none;
}

.aside__social-links a {
    display: block;
    padding: 0.1rem 0;
    font-size: 0.8125rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aside__social-links a:link,
.aside__social-links a:visited {
    color: var(--off-fg);
}

.aside__social-links a:hover,
.aside__social-links a:active {
    color: var(--hover);
}

.social__icon {
    display: inline-block;
    width: 1.5rem;
    color: var(--muted);
    transition: color 100ms ease;
}

.aside__social-links a:hover .social__icon {
    color: var(--hover);
}

.aside__posts li {
    margin-bottom: 0.6rem;
}

.aside__posts a {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    text-decoration: none;
}

.aside__posts a:hover {
    text-decoration: underline;
}

.aside__posts time {
    display: block;
    font-size: 0.75rem;
    color: var(--muted);
}

/* ─────────────────────────  Hero  ───────────────────────── */

.hero {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding-bottom: 2rem;
}

.hero__avatar {
    width: 11rem;
    height: auto;
    flex-shrink: 0;
}

.hero__text {
    min-width: 0;
    flex-grow: 1;
}

.hero__name {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: var(--base07);
}

.hero__name::before {
    content: none;
}

.hero__role {
    margin: 0 0 1rem 0;
    color: var(--muted);
}

.hero__bio p {
    margin: 0 0 0.5rem 0;
    color: var(--fg);
}

.hero__bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 34rem) {
    .hero {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ─────────────────────────  Projects  ───────────────────────── */

.projects__heading {
    margin: 1.5rem 0 0 0;
    color: var(--base06);
}

.projects__heading::before {
    content: none;
}

.proj {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0;
}

.proj:last-child {
    padding-bottom: 0;
}

/* Left gutter holds the icon so every project's text shares one left edge. */
.proj__gutter {
    flex-shrink: 0;
    width: 3rem;
    padding-top: 0.125rem;
}

.proj__body {
    min-width: 0;
    flex-grow: 1;
}

.proj__logo {
    display: block;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 7px; /* app artwork is drawn to be rounded */
}

/* Stand-in for projects with no artwork yet. */
.proj__logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--base03);
    border: 1px dashed var(--base03);
    border-radius: 0;
}

/* Name and traction share a baseline; the technical line sits under them. */
.proj__nameline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.875rem;
}

.proj__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--base07);
}

.proj__name::before {
    content: none;
}

.proj__stat {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--off-fg);
    white-space: nowrap;
}

.proj__stat i {
    margin-right: 0.4rem;
    color: var(--accent);
}

.proj__tagline {
    margin: 0.125rem 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--off-fg);
    opacity: 0.62;
}

.proj__desc {
    margin: 0;
    color: var(--fg);
}

.proj__desc code {
    padding: 0 0.25rem;
}

.proj__install {
    margin: 0.75rem 0 0 0;
}

.proj__install code {
    display: inline-block;
    max-width: 100%;
    padding: 0.2rem 0.6rem;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: middle;
}

.proj__prompt {
    margin-right: 0.5rem;
    color: var(--muted);
    user-select: none;
}

/* Links: plain, middot-separated, no chrome. */
.proj__links {
    margin: 0.75rem 0 0 0;
    line-height: 1.75rem;
}

.proj__links a {
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.proj__links a:hover {
    border-bottom-color: var(--hover);
}

/* Separator rides with the link that follows it, so it never strands
   at the end of a wrapped line. */
.proj__links a + a::before {
    content: "·";
    margin: 0 0.6rem;
    color: var(--muted);
}

.proj__links i {
    margin-right: 0.4rem;
    color: var(--muted);
    transition: color 100ms ease;
}

.proj__links a:hover i {
    color: var(--hover);
}

.proj__media {
    max-width: 28rem;
    margin: 1rem 0 0 0;
    line-height: 0;
    border: 1px solid var(--base02);
}

.proj__media img,
.proj__media video {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 34rem) {
    .proj {
        gap: 0.75rem;
    }

    .proj__gutter,
    .proj__logo {
        width: 2.5rem;
    }

    .proj__logo {
        height: 2.5rem;
    }
}

/* ─────────────────────────  Blog index  ───────────────────────── */

.postlist {
    padding: 0;
    margin: 1.5rem 0 0 0;
    list-style: none;
}

.postlist__item {
    display: block;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.postlist__item::marker {
    content: none;
}

.postlist__item:last-child {
    margin-bottom: 0;
}

.postlist__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.postlist__title {
    font-weight: 600;
    text-decoration: none;
}

.postlist__title:hover {
    text-decoration: underline;
}

.postlist__date {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--muted);
    white-space: nowrap;
}

.postlist__desc {
    margin: 0.25rem 0 0 0;
    color: var(--off-fg);
}

@media (max-width: 34rem) {
    .postlist__line {
        flex-wrap: wrap;
        gap: 0;
    }

    .postlist__date {
        margin-left: auto;
    }
}

/* ─────────────────────────  Stack  ───────────────────────── */

.stack__group {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    background-image: var(--rule-dash);
    background-size: var(--rule-tile);
    background-repeat: repeat-x;
    background-position: bottom left;
}

.stack__group:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    background-image: none;
}

.stack__name {
    margin: 0 0 1rem 0;
    color: var(--base06);
}

/* Entries stack: name, then its note underneath. No columns, no gutter rule. */
.stack__items {
    display: block;
}

.stack__item {
    margin-bottom: 1.25rem;
}

.stack__item:last-child {
    margin-bottom: 0;
}

.stack__item-name {
    margin: 0 0 0.125rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--base07);
}

.stack__item-name::before {
    content: none;
}

.stack__item-note p {
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    color: var(--off-fg);
}

.stack__item-note p:last-child {
    margin-bottom: 0;
}

/* Bulleted tool lists inside a note, so the links all start at one edge. */
.stack__item-note ul {
    margin: 0 0 0.5rem 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    color: var(--off-fg);
}

.stack__item-note li {
    margin: 0;
}

.stack__item-note code {
    padding: 0 0.25rem;
}



/* ─────────────────────────  Posts  ───────────────────────── */

/* The theme's headings carry no bottom margin, so body text runs straight
   into them. */
.content__header {
    margin-bottom: 1.5rem;
}

/* Section pages set their h1 directly rather than through .content__header. */
.page__body > h1:first-child {
    margin-bottom: 1.5rem;
}

.content__body h2,
.content__body h3,
.content__body h4 {
    margin-bottom: 0.5rem;
}

/* Tables: give the header a rule and stop the key column wrapping. */
.content__body table {
    width: 100%;
}

.content__body th {
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--base02);
    color: var(--base06);
}

.content__body td {
    padding-top: 0.375rem;
    vertical-align: top;
}

.content__body th:first-child,
.content__body td:first-child {
    white-space: nowrap;
}

/* The theme draws the '>' marker; this just lifts the quote off the body. */
.content__body blockquote {
    margin-top: 1.5rem;
    color: var(--off-fg);
}

.content__body ul,
.content__body ol {
    margin-bottom: 1.5rem;
}