/* =========================================================
   UNDERDOG GUILD – industrial neobrutalism
   ========================================================= */

/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ---------------------------------------------------------
   VARIABLES
   --------------------------------------------------------- */

:root {
    --font-display: "SpartanMB", sans-serif;
    --font-body: "GeneralSans", sans-serif;

    --paper: #f2ede1;
    --card: #fffdf5;
    --ink: #16130f;
    --ink-soft: #4a443a;
    --orange: #ff5c1a;
    --orange-deep: #e84f0a;
    --toxic: #a9ff00;
    --yellow: #ffd400;
    --metal: #d9d4c6;

    --border: 3px solid var(--ink);
    --shadow: 6px 6px 0 var(--ink);
    --shadow-hover: 10px 10px 0 var(--ink);

    --page-width: 1120px;
}

/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

body {
    min-height: 100vh;
    overflow-x: clip;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    display: flex;
    flex-direction: column;
}

main {
    width: min(100% - 2rem, var(--page-width));
    margin-inline: auto;
    flex: 1 0 auto;
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
    text-wrap: balance;
}

/* Blog pages only. SpartanMB caps are 0.75em tall, so 1.05 leaves just a
   0.30em gap between lines of uppercase — cramped on the long, wrapping
   headings the blog uses. 1.2 gives a 0.45em gap, mid-range for all-caps
   display type. Scoped to .post (single) and .werkblog (list) so the
   homepage hero and section headings keep their tighter setting. */
.post h1,
.post h2,
.post h3,
.werkblog h1,
.werkblog h2,
.werkblog h3 {
    line-height: 1.2;
}

p {
    color: var(--ink-soft);
}

a {
    color: var(--ink);
}

:focus-visible {
    outline: 3px solid var(--orange-deep);
    outline-offset: 3px;
}

::selection {
    color: var(--ink);
    background: var(--toxic);
}

/* ---------------------------------------------------------
   HAZARD STRIPES
   --------------------------------------------------------- */

.hazard-bar {
    height: 12px;
    background: repeating-linear-gradient(
        -45deg,
        var(--ink) 0 12px,
        var(--yellow) 12px 24px
    );
}

/* ---------------------------------------------------------
   SKIP LINK
   --------------------------------------------------------- */

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: 0.75rem 1.25rem;
    border: var(--border);
    background: var(--card);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ---------------------------------------------------------
   VISUALLY HIDDEN
   --------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: var(--border);
    background: var(--paper);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    width: min(100% - 2rem, var(--page-width));
    margin-inline: auto;
    padding-block: 0.9rem;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.site-logo__mark {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: var(--border);
    border-radius: 2px;
    box-shadow: 3px 3px 0 var(--ink);
    background: var(--paper);
}

.site-logo__name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.site-logo__tag {
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--ink);
    background: var(--orange);
    transform: rotate(-2deg);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin-inline: auto;
}

.site-nav a {
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 3px solid transparent;
    padding-bottom: 0.15rem;
}

.site-nav a:hover {
    border-bottom-color: var(--orange);
}

.site-header .btn {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   LANGUAGE SWITCH
   --------------------------------------------------------- */

.lang-switch {
    display: flex;
    flex: 0 0 auto;
    border: var(--border);
    border-radius: 2px;
    background: var(--card);
    box-shadow: 3px 3px 0 var(--ink);
    overflow: hidden;
}

.lang-switch__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 0.55rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--ink);
}

.lang-switch__item + .lang-switch__item {
    border-left: var(--border);
}

.lang-switch__item:hover {
    background: var(--toxic);
}

.lang-switch__item.is-active {
    background: var(--orange);
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.65rem 1.5rem;
    border: var(--border);
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
    color: var(--ink);
    background: var(--card);
    cursor: pointer;
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

.btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--ink);
}

.btn--primary {
    background: var(--orange);
}

.btn--primary:hover {
    background: var(--toxic);
}

.btn--small {
    min-height: 40px;
    padding: 0.45rem 1.1rem;
    box-shadow: 3px 3px 0 var(--ink);
}

.btn--big {
    min-height: 72px;
    padding: 1rem 2.5rem;
    font-size: clamp(1.15rem, 3vw, 1.6rem);
    box-shadow: 8px 8px 0 var(--ink);
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 8vw, 6rem);
    background: repeating-linear-gradient(
        45deg,
        rgb(22 19 15 / 0.035) 0 2px,
        transparent 2px 14px
    );
}

.hero__kicker {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.3rem 0.8rem;
    border: var(--border);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    color: var(--card);
    background: var(--ink);
}

.hero__title {
    max-width: 16ch;
    font-size: clamp(3.4rem, 11vw, 8rem);
    text-transform: none;
}

.hero__title-highlight {
    display: inline-block;
    padding: 0 0.35em;
    color: var(--ink);
    background: var(--toxic);
    transform: rotate(-1.5deg);
    box-shadow: 6px 6px 0 var(--ink);
}

.hero__lead {
    max-width: 52ch;
    margin-top: 2rem;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    line-height: 1.6;
    color: var(--ink);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.25rem;
}

.hero__stamp {
    position: absolute;
    top: clamp(3rem, 8vw, 5rem);
    right: 1rem;
    max-width: 9.5rem;
    padding: 1rem 0.6rem;
    border: 3px solid var(--ink);
    outline: 2px dashed var(--ink);
    outline-offset: -9px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--card);
    transform: rotate(8deg);
    box-shadow: var(--shadow);
}

/* ---------------------------------------------------------
   MARQUEE
   --------------------------------------------------------- */

.marquee {
    overflow: hidden;
    border-block: var(--border);
    background: var(--ink);
    transform: rotate(-1deg) scale(1.01);
}

.marquee__track {
    display: flex;
    width: max-content;
    padding-block: 0.8rem;
    animation: marquee 26s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    padding-inline: 1.25rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--card);
    white-space: nowrap;
}

.marquee__item::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 2.5rem;
    background: var(--orange);
    transform: translateY(-1px) rotate(45deg);
}

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* ---------------------------------------------------------
   SECTIONS
   --------------------------------------------------------- */

.section {
    padding-block: clamp(4rem, 9vw, 7rem);
    border-bottom: var(--border);
}

.section:last-child {
    border-bottom: none;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
}

.section-title__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 3.4rem;
    height: 3.4rem;
    padding: 0.5rem;
    border: var(--border);
    box-shadow: 4px 4px 0 var(--ink);
    font-size: 1.2rem;
    color: var(--ink);
    background: var(--orange);
    transform: rotate(-3deg);
}

.section-intro {
    max-width: 55ch;
    margin-top: 1rem;
    font-size: 1.2rem;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------
   PORTFOLIO
   --------------------------------------------------------- */

.projects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 3rem;
}

.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border: var(--border);
    border-radius: 2px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.project-card--featured {
    grid-column: 1 / -1;
    background:
        linear-gradient(120deg, rgb(255 92 26 / 0.08), transparent 55%),
        var(--card);
}

.project-card--fun {
    background:
        linear-gradient(120deg, rgb(169 255 0 / 0.1), transparent 55%),
        var(--card);
}

.project-card::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--orange);
    border-right: var(--border);
    border-bottom: var(--border);
}

.project-card--upcoming::before {
    background: var(--yellow);
}

.project-card--fun::before {
    background: var(--toxic);
}

.project-card h3 {
    margin-top: 1rem;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
}

.project-card em {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.15rem 0.6rem;
    font-family: var(--font-display);
    font-style: normal;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    background: var(--yellow);
    transform: rotate(-1deg);
}

.project-card p {
    margin-top: 1.25rem;
    /* the card is a flex column with align-items:flex-start, so paragraphs
       shrink-wrap. For a paragraph holding an image that is circular: the
       image is 100% of the paragraph, the paragraph is as wide as the image.
       Until the file loads its intrinsic width is unknown, so the card
       started ~11px wide and jumped to 460px — shifting the footer down as
       you scrolled to it. Full width breaks the cycle. */
    width: 100%;
    max-width: 62ch;
}

.project-card p:last-of-type {
    margin-top: auto;
    padding-top: 1.5rem;
}

.project-card img {
    width: 100%;
    /* height must be auto or the img element's height="" attribute wins and
       the aspect-ratio below is ignored (it only applies when one axis is auto).
       With height auto the attributes still reserve the right space before the
       image loads, so the page no longer grows as you scroll. */
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 1.5rem;
    border: var(--border);
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 4px 4px 0 var(--ink);
}

.project-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 46px;
    margin-top: 1.5rem;
    padding: 0.6rem 1.4rem;
    border: var(--border);
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-decoration: none;
    color: var(--ink);
    background: var(--toxic);
}

.project-card a:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
    background: var(--orange);
}

/* ---------------------------------------------------------
   STAMPS
   --------------------------------------------------------- */

.stamp {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 1;
    padding: 0.35rem 0.8rem;
    border: 3px solid var(--ink);
    outline: 2px dashed var(--ink);
    outline-offset: -6px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(4deg);
}

.stamp--done {
    background: var(--toxic);
}

.stamp--wip {
    background: var(--yellow);
}

.stamp--fun {
    background: var(--orange);
    color: var(--ink);
}

/* ---------------------------------------------------------
   SERVICES
   --------------------------------------------------------- */

.services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 3rem;
}

.service-card {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem) 1.5rem;
    border: var(--border);
    border-radius: 2px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.service-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: var(--orange);
}

.service-card:nth-child(even)::after {
    background: var(--toxic);
}

.service-card__no {
    display: block;
    margin-bottom: 1.25rem;
    font-family: var(--font-display);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--ink);
}

.service-card:nth-child(odd) .service-card__no {
    -webkit-text-stroke: 2px var(--ink);
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: 0.02em;
}

.service-card h3 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.service-card p {
    margin-top: 0.9rem;
}

/* ---------------------------------------------------------
   TOOLS
   --------------------------------------------------------- */

.tools {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 3rem;
}

.tool-plate {
    position: relative;
    padding: 0.8rem 1.4rem;
    border: var(--border);
    border-radius: 2px;
    font-family: var(--font-display);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: var(--metal);
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 140ms ease, background 140ms ease;
}

.tool-plate::before,
.tool-plate::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
}

.tool-plate::before {
    left: 6px;
}

.tool-plate::after {
    right: 6px;
}

.tool-plate:hover {
    transform: rotate(-2deg) translateY(-3px);
    background: var(--toxic);
}

.tool-plate--hot {
    background: var(--orange);
}

.tool-plate--hot span {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}

/* ---------------------------------------------------------
   PRICE TAG
   --------------------------------------------------------- */

#arak {
    padding-inline: 0;
}

.price-tag {
    border: var(--border);
    border-radius: 2px;
    background:
        repeating-linear-gradient(
            -45deg,
            var(--ink) 0 14px,
            var(--yellow) 14px 28px
        )
        top / 100% 100% no-repeat;
    box-shadow: var(--shadow);
}

.price-tag__label {
    padding: 0.9rem 1.25rem;
    border-bottom: var(--border);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--yellow);
    background: var(--ink);
}

.price-tag__body {
    padding: clamp(2rem, 5vw, 3.5rem);
    background: var(--card);
}

.price-tag__body h2 {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
}

.price-tag__body p {
    max-width: 56ch;
    margin-top: 1.25rem;
    font-size: 1.15rem;
}

.price-tag__body .btn {
    margin-top: 2rem;
}

/* ---------------------------------------------------------
   ABOUT
   --------------------------------------------------------- */

.about {
    max-width: 62ch;
    margin-top: 3rem;
}

.about p {
    position: relative;
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem 1.25rem 2.25rem;
    border: 2px solid var(--ink);
    border-radius: 2px;
    background: var(--card);
    font-size: 1.1rem;
    color: var(--ink);
}

.about p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    background: var(--orange);
}

.about p:nth-child(2)::before {
    background: var(--toxic);
}

.about p:nth-child(3)::before {
    background: var(--yellow);
}

/* ---------------------------------------------------------
   CONTACT
   --------------------------------------------------------- */

.section--contact {
    text-align: center;
}

.section--contact .section-title,
.section--contact .section-intro {
    margin-inline: auto;
}

.section--contact .section-title {
    justify-content: center;
}

.contact {
    margin-top: 3.5rem;
}

.contact__note {
    margin-top: 1.75rem;
    font-size: 1.05rem;
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer {
    background: var(--ink);
}

.site-footer__inner {
    width: min(100% - 2rem, var(--page-width));
    margin-inline: auto;
    padding: 2.5rem 0;
    text-align: center;
}

.site-footer p {
    font-size: 0.95rem;
    color: #cfc8ba;
}

.site-footer p:first-child {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--card);
}

.site-footer__note {
    margin-top: 0.5rem;
}

.site-footer a {
    color: var(--toxic);
}

/* ---------------------------------------------------------
   MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .site-header {
        transition: transform 220ms ease;
    }

    .btn,
    .project-card,
    .tool-plate,
    .lang-switch__item,
    .site-nav a {
        transition:
            transform 140ms ease,
            box-shadow 140ms ease,
            background 140ms ease,
            border-color 140ms ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .marquee__track {
        animation: none;
    }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 860px) {
    .site-header__inner {
        justify-content: center;
    }

    .site-nav {
        margin-inline: 0;
        width: 100%;
        justify-content: center;
        order: 3;
    }

    .marquee {
        transform: none;
    }

    .site-header.is-hidden {
        transform: translateY(-100%);
    }

    .site-header:focus-within {
        transform: none;
    }

    .hero__stamp {
        position: static;
        margin-top: 2.5rem;
        transform: rotate(-3deg);
    }

    .stamp {
        position: static;
        align-self: flex-start;
        margin-top: 1.25rem;
        transform: rotate(-2deg);
    }

    .projects,
    .services {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    main,
    .site-header__inner,
    .site-footer__inner {
        width: min(100% - 1.25rem, var(--page-width));
    }

    .site-logo__mark {
        width: 36px;
        height: 36px;
    }

    .site-logo__name {
        font-size: 1.15rem;
    }

    .hero__kicker {
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }

    .hero__title {
        font-size: clamp(2.9rem, 13vw, 3.4rem);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .section-title {
        flex-wrap: wrap;
        gap: 0.75rem;
        font-size: clamp(1.9rem, 8.5vw, 2.4rem);
    }

    .section-title__no {
        min-width: 2.8rem;
        height: 2.8rem;
        font-size: 1rem;
        box-shadow: 3px 3px 0 var(--ink);
    }

    .project-card h3 {
        margin-top: 0.75rem;
    }

    .price-tag__label {
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        line-height: 1.5;
    }

    .price-tag__body {
        padding: 1.75rem 1.25rem;
    }

    .btn--big {
        min-height: 60px;
        padding: 0.9rem 1.1rem;
        font-size: 1.05rem;
        box-shadow: 5px 5px 0 var(--ink);
    }

    .tools {
        gap: 0.9rem;
    }
}

/* ---------------------------------------------------------
   WERKBLOG
   --------------------------------------------------------- */

.werkblog-hero__intro {
    max-width: 55ch;
    margin-top: 2rem;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    color: var(--ink);
}

.werkblog-hero__intro p {
    color: var(--ink);
}

.post-list {
    display: grid;
    gap: 1.75rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(4rem, 9vw, 7rem);
}

.post-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border: var(--border);
    border-radius: 2px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.post-card__meta {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.post-card__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.2rem 0.45rem;
    border: var(--border);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink);
    background: var(--orange);
    transform: rotate(-3deg);
}

.post-card__date,
.post-header__date {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    background: var(--yellow);
    transform: rotate(-1deg);
}

.post-card__title {
    margin-top: 1.25rem;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
}

.post-card__title a {
    text-decoration: none;
}

.post-card__title a:hover {
    background: var(--toxic);
}

.post-card__summary {
    max-width: 62ch;
    margin-top: 1.25rem;
}

.post-card .btn {
    margin-top: 1.5rem;
}

.post-empty {
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    border: var(--border);
    border-radius: 2px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.post-header {
    padding-block: clamp(3rem, 8vw, 6rem) 0;
}

.post-header__title {
    max-width: 20ch;
    margin-top: 1.25rem;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
}

.post-content {
    /* The box itself spans the page so media can break out into the empty
       column beside the text; the prose is capped instead, just below. */
    max-width: none;
    margin-top: 2.5rem;
    overflow-wrap: break-word;
}

/* 39rem = 624px is the widest that still holds <=80 characters per line
   (WCAG 1.4.8): measured 78.9 for Hungarian and 79.5 for English. Sizing
   this in ch would lie — 1ch is the width of "0" (0.582em), which is wider
   than an average glyph (~0.49em), so the old 70ch was really holding 82.4
   characters. Media blocks opt out of this cap further down. */
.post-content > * {
    max-width: 39rem;
}

.post-content > * + * {
    margin-top: 1.25rem;
}

.post-content h2 {
    margin-top: 2.75rem;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.post-content h3 {
    margin-top: 2rem;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
}

.post-content a {
    text-decoration: none;
    border-bottom: 3px solid var(--orange-deep);
    padding-bottom: 0.08em;
}

.post-content a:hover {
    background: var(--toxic);
    border-bottom-color: var(--ink);
}

.post-content ul,
.post-content ol {
    padding-left: 1.5rem;
}

.post-content ul {
    list-style: square;
}

.post-content ol {
    list-style: decimal;
}

.post-content li {
    margin-top: 0.5rem;
    color: var(--ink-soft);
}

.post-content li::marker {
    color: var(--orange);
}

.post-content blockquote {
    padding: 1.25rem 1.5rem;
    border: 2px solid var(--ink);
    border-left: 12px solid var(--orange);
    background: var(--card);
    box-shadow: 4px 4px 0 var(--ink);
}

.post-content blockquote p {
    color: var(--ink);
}

.post-content code {
    padding: 0.1rem 0.35rem;
    border: 2px solid var(--ink);
    background: var(--metal);
    font-family: ui-monospace, "Cascadia Mono", "Fira Mono", monospace;
    font-size: 0.9em;
}

.post-content pre {
    padding: 1.25rem;
    border: var(--border);
    background: var(--ink);
    color: var(--card);
    overflow-x: auto;
    box-shadow: 4px 4px 0 var(--ink);
}

.post-content pre code {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.post-content img {
    border: var(--border);
    box-shadow: 4px 4px 0 var(--ink);
}

.post-content hr {
    height: 12px;
    border: 0;
    margin-block: 2.5rem;
    background: repeating-linear-gradient(
        -45deg,
        var(--ink) 0 12px,
        var(--yellow) 12px 24px
    );
}

.post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

.post-content th,
.post-content td {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--ink);
}

/* ---------------------------------------------------------
   WERKBLOG – POST FIGURES & GALLERY
   Gallery items are small thumbnails: the whole screenshot is
   scaled down, never cropped and never squashed, so the aspect
   ratio always survives. Each one is a real link to the file,
   so it still works without JS; with JS it opens in the native
   <dialog> below instead, which brings focus trapping,
   Esc-to-close and focus restoration for free.
   --------------------------------------------------------- */

.post-figure {
    margin: 2rem 0 0;
}

/* the Nemezis shot is a small inset, not a banner: capped by
   max-width only, so the height follows the intrinsic ratio */
.post-figure a {
    display: inline-block;
    padding-bottom: 0;
    border-bottom: 0;
}

.post-figure a:hover {
    background: none;
}

.post-figure img {
    width: auto;
    height: auto;
    max-width: min(100%, 20rem);
}

.post-content .post-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* breaks out past the 39rem prose measure into the empty column to the
       right, bounded by the page so it can never outgrow the layout.
       Beats `.post-content > *` on specificity (0,2,0 vs 0,1,0). */
    max-width: 64rem;
    gap: clamp(0.9rem, 2.5vw, 1.35rem);
    margin-top: 2.5rem;
    padding-left: 0;
    list-style: none;
}

.post-content .post-gallery li {
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.post-content .post-gallery figure {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0;
}

/* the thumbnail is the link: kill the inline-link underline */
.post-content .post-gallery a {
    display: block;
    flex: 0 0 auto;
    padding-bottom: 0;
    border: var(--border);
    box-shadow: 4px 4px 0 var(--ink);
    background: var(--card);
    cursor: zoom-in;
}

.post-content .post-gallery a:hover,
.post-content .post-gallery a:focus-visible {
    background: var(--card);
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink);
}

/* flex: 0 0 auto so a flex parent can never squash the ratio */
.post-content .post-gallery img {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    border: 0;
    box-shadow: none;
}

.post-content .post-gallery figcaption {
    margin-top: auto;
    padding-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

@media (min-width: 621px) {
    .post-content .post-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------
   WERKBLOG – LIGHTBOX
   Native <dialog>: the top layer, inert background, focus
   trapping and Esc come from the browser, not from script.
   --------------------------------------------------------- */

.lightbox {
    max-width: 94vw;
    /* vh is the *large* viewport on mobile, so with the URL bar
       showing the dialog could run past the bottom of the screen and
       take the arrows and Close with it. dvh tracks what is actually
       visible; the vh line stays as the fallback. */
    max-height: 94vh;
    max-height: 94dvh;
    margin: auto;
    padding: 0;
    border: var(--border);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: auto;
}

.lightbox::backdrop {
    background: rgba(22, 19, 15, 0.85);
}

.lightbox .lightbox__img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(90vw, 1400px);
    max-height: 80vh;
    max-height: 80dvh;
    margin: 0 auto;
    border: 0;
    box-shadow: none;
}

/* `.btn` sets display:inline-flex, which outranks the UA `[hidden]`
   rule — so hiding the arrows on a single image needs saying out loud */
.lightbox [hidden] {
    display: none;
}

.lightbox__nav {
    padding-inline: 0.75rem;
}

@media (max-width: 620px) {
    /* the labels stay visible on small screens, but the bar tightens so the
       three buttons hold one row and the dialog keeps its height for the
       image instead of scrolling to reach them */
    .lightbox__bar {
        gap: 0.5rem;
        padding: 0.7rem 0.75rem;
    }

    .lightbox__caption {
        flex: 1 1 100%;
        margin-right: 0;
    }

    .lightbox__bar .btn {
        padding-inline: 0.6rem;
        letter-spacing: 0;
        font-size: 0.75rem;
    }
}

.lightbox__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
    padding: 0.85rem 1rem;
    border-top: var(--border);
}

.lightbox__caption {
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.lightbox__caption:empty {
    display: none;
}

.post-footer {
    margin-top: 3rem;
    padding-bottom: clamp(4rem, 9vw, 7rem);
}

/* ---------------------------------------------------------
   WERKBLOG – JOB TICKET CARD
   The entry list, re-cut as workshop tickets: numbered stub,
   perforation, tape, barcode. Markup unchanged.
   --------------------------------------------------------- */

.post-list {
    --stub-w: clamp(58px, 7vw, 92px);
}

.post-card {
    --ticket-code: repeating-linear-gradient(
        90deg,
        var(--ink) 0 2px,
        transparent 2px 4px,
        var(--ink) 4px 5px,
        transparent 5px 9px,
        var(--ink) 9px 12px,
        transparent 12px 15px
    );

    position: relative;
    padding-left: calc(var(--stub-w) + clamp(1.25rem, 3vw, 2.25rem));
    background:
        var(--ticket-code) right 1.75rem bottom 1.75rem / 84px 26px no-repeat,
        repeating-linear-gradient(
            0deg,
            rgb(22 19 15 / 0.045) 0 1px,
            transparent 1px 30px
        ),
        var(--card);
    transform: rotate(-0.5deg);
}

.post-card:nth-child(even) {
    transform: rotate(0.45deg);
}

/* strip of tape */
.post-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -13px;
    right: clamp(1.5rem, 12%, 7rem);
    width: clamp(64px, 8vw, 96px);
    height: 24px;
    background: rgb(255 212 0 / 0.75);
    border-inline: 2px solid rgb(22 19 15 / 0.22);
    transform: rotate(3.5deg);
}

/* punched holes sitting on the perforation */
.post-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: calc(var(--stub-w) - 5px);
    top: -8px;
    bottom: -8px;
    width: 18px;
    background-image:
        radial-gradient(circle closest-side, var(--paper) 72%, var(--ink) 76% 88%, transparent 90%),
        radial-gradient(circle closest-side, var(--paper) 72%, var(--ink) 76% 88%, transparent 90%);
    background-repeat: no-repeat;
    background-position: center top, center bottom;
    background-size: 18px 18px;
    pointer-events: none;
}

/* the number moves out of the meta row into a tear-off stub */
.post-card__no {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--stub-w);
    min-width: 0;
    padding: 0;
    border: 0;
    border-right: 2px dashed var(--ink);
    border-radius: 0;
    box-shadow: none;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    line-height: 1;
    writing-mode: vertical-rl;
    color: var(--ink);
    background-color: transparent;
    background-image: repeating-linear-gradient(
        -45deg,
        rgb(22 19 15 / 0.06) 0 8px,
        transparent 8px 16px
    );
    transform: none;
}

.post-card__title {
    margin-top: 2rem;
}

/* one link grabs the whole ticket; keyboard focus mirrors hover */
.post-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.post-card__title a,
.post-card__title a:hover {
    background-color: transparent;
    background-image: linear-gradient(var(--toxic), var(--toxic));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% 40%;
}

.post-card:hover .post-card__title a,
.post-card:focus-within .post-card__title a {
    background-size: 100% 40%;
}

.post-card:hover,
.post-card:focus-within {
    transform: rotate(0deg) translate(-4px, -4px);
    box-shadow: var(--shadow-hover);
}

/* the ticket CTA wears the same green as the one-pager's
   portfolio buttons, and turns orange on hover just like them */
.post-card .btn {
    background: var(--toxic);
}

.post-card:hover .btn,
.post-card:focus-within .btn {
    background: var(--orange);
}

@media (prefers-reduced-motion: no-preference) {
    .post-card,
    .post-card__title a {
        transition:
            transform 150ms ease,
            box-shadow 150ms ease,
            background-color 150ms ease,
            background-size 180ms ease;
    }
}

/* narrow screens: the stub turns into a band across the top */
@media (max-width: 620px) {
    .post-card {
        padding-top: calc(clamp(1.5rem, 3.5vw, 2.5rem) + 3.1rem);
        padding-left: clamp(1.5rem, 3.5vw, 2.5rem);
        background:
            repeating-linear-gradient(
                0deg,
                rgb(22 19 15 / 0.045) 0 1px,
                transparent 1px 30px
            ),
            var(--card);
    }

    .post-card__no {
        inset: 0 0 auto 0;
        width: auto;
        height: 3.1rem;
        justify-content: flex-start;
        padding-left: clamp(1rem, 4vw, 1.5rem);
        border-right: 0;
        border-bottom: 2px dashed var(--ink);
        font-size: 1.7rem;
        writing-mode: horizontal-tb;
    }

    .post-card::after {
        left: -8px;
        right: -8px;
        top: calc(3.1rem - 9px);
        bottom: auto;
        width: auto;
        height: 18px;
        background-position: left center, right center;
    }
}

/* ---------------------------------------------------------
   WERKBLOG – HERO GLOW
   A warm corner in the top right of the blog hero. The
   hatch of the shared .hero rule is re-declared underneath,
   because background-image replaces the whole layer list.
   --------------------------------------------------------- */

.werkblog-hero {
    background-image:
        radial-gradient(
            115% 90% at 84% 2%,
            rgb(255 92 26 / 0.12),
            transparent 62%
        ),
        repeating-linear-gradient(
            45deg,
            rgb(22 19 15 / 0.035) 0 2px,
            transparent 2px 14px
        );
}