/* Fonts */

@font-face {
    font-family: "CustomFont";
    src: url("assets/font/BRHendrix-Medium-BF6556d1b4e12b2.otf") format("opentype");
}

@font-face {
    font-family: "CustomFontBold";
    src: url("assets/font/BRHendrix-Bold-BF6556d1b5459d3.otf") format("opentype");
}

/* Base */

:root {
    --page-transition-duration: 180ms;
}

@view-transition {
    navigation: auto;
}

body {
    background-color: #eae9e5;
    font-family: "CustomFont", sans-serif;
}

::view-transition-old(root) {
    animation: page-fade-out var(--page-transition-duration) ease-out both;
}

::view-transition-new(root) {
    animation: page-fade-in var(--page-transition-duration) ease-in both;
}

@keyframes page-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes page-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01ms;
    }
}

/* Navigation */

nav {
    position: fixed;
    font-size: 18px;
    top: 40px;
    left: 40px;
}

nav a {
    padding: 8px;
    color: #333;
    text-decoration: underline;
    text-underline-offset: 3px;
}

nav a:hover {
    color: #777;
}

nav a[aria-current="page"] {
    font-family: "CustomFontBold", sans-serif;
}

.social-links {
    position: fixed;
    top: 40px;
    right: 50px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links a {
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.social-links a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.social-links img {
    display: block;
    width: 22px;
    height: 22px;
}

.social-links .coffee-button {
    display: inline-flex;
    box-sizing: border-box;
    height: 44px;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    color: #fff8ed;
    font-family: "CustomFontBold", sans-serif;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.01em;
    background: #484440;
    border: 3px solid #3d3936;
    border-radius: 5px;
    box-shadow: 2px 3px 7px rgb(48 39 30 / 18%), inset 0 1px 0 rgb(255 248 237 / 12%);
    opacity: 1;
    transform: rotate(-1deg);
}

.social-links .coffee-button:hover {
    color: #fff8ed;
    background: #393532;
    transform: translateY(-2px) rotate(-1deg);
}

.social-links .coffee-button-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: invert(1) sepia(0.12) saturate(0.45) brightness(1.25);
}

.social-links a:not(.coffee-button) img {
    width: 32px;
    height: 32px;
}

.social-links .coffee-button:focus-visible {
    outline: 3px solid #215caa;
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .social-links {
        top: 88px;
        right: 20px;
        gap: 12px;
    }

    .social-links .coffee-button {
        padding: 7px 10px;
        font-size: 13px;
    }
}

/* Index content */

main {
    margin-top: 100px;
    padding: 50px;
}

main h1 {
    margin-bottom: 0;
    font-size: 75px;
}

main h2 {
    width: 500px;
    margin-top: 20px;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.5;
}

@media (min-width: 901px) {
    .home-page main {
        padding: clamp(95px, 11vh, 140px) clamp(50px, 5vw, 90px) 50px;
    }

    .home-page main h1 {
        font-size: clamp(72.2px, 5.795vw, 96.9px);
        transform: translateX(-15px);
    }

    .home-page main h2 {
        width: min(630px, 48vw);
        margin-top: 26px;
        font-size: clamp(17.8px, 1.30625vw, 20.9px);
        transform: translateX(-15px);
    }
}

/* Footer */

footer {
    position: fixed;
    z-index: 30;
    bottom: 20px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    color: #a3938a;
    font-size: 12px;
    text-align: center;
}

footer p {
    margin: 4px 0;
}

/* About page: background and navigation */

.about-page header {
    position: relative;
    z-index: 20;
}

.about-page nav {
    z-index: 10;
    isolation: isolate;
}

.about-page nav::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 90px;
    background-color: #47301f;
    opacity: var(--nav-opacity, 0);
    pointer-events: none;
}

.about-page nav a,
.projects-page nav a,
.contact-page nav a {
    color: #f5f2e8;
}

.about-page nav a:hover,
.projects-page nav a:hover,
.contact-page nav a:hover {
    color: #d3d3d3;
}

/* About page: wooden desk redesign */
.about-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    color: #f3ede2;
    overflow-x: hidden;
    background-color: #303234;
}

.about-page::before,
.about-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(#20232645, #20232670), url("assets/wood-background.jpg");
    background-position: center, center top;
    background-repeat: no-repeat, repeat-y;
    background-size: cover, 100% auto;
    pointer-events: none;
}

.about-page::after {
    clip-path: inset(0 0 50% 0);
    transform: scaleY(-1);
}

.about-page nav::before {
    background-color: #49301f;
}

.about-page main {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 125px clamp(32px, 4vw, 72px) 100px;
}

.about-intro,
.website-story,
.about-board-section {
    width: min(1460px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.about-intro {
    display: grid;
    grid-template-columns: minmax(190px, 0.38fr) minmax(520px, 1.62fr);
    column-gap: clamp(65px, 8vw, 135px);
    row-gap: 5px;
    align-items: start;
    min-height: 520px;
}

.about-portrait-wrap {
    position: relative;
    z-index: 3;
    width: min(270px, 100%);
    padding: 18px;
    justify-self: center;
    margin-left: 0;
    transform: translate(65px, 90px);
}

.about-portrait {
    position: relative;
    margin: 0;
    padding: 14px 14px 46px;
    background: #efe9dc;
    box-shadow: 12px 18px 32px #321b0c80, 1px 2px 4px #321b0c99;
    transform: rotate(-2.5deg);
    transition: transform 260ms ease, box-shadow 260ms ease;
}

.about-portrait::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 50%;
    z-index: 2;
    width: 92px;
    height: 32px;
    background: #d9ccb3b8;
    box-shadow: 0 2px 4px #4b341f4d;
    transform: translateX(-50%) rotate(-2deg);
}

.about-portrait:hover {
    box-shadow: 15px 22px 36px #321b0c8f, 1px 2px 4px #321b0c99;
    transform: rotate(-0.8deg) translateY(-4px);
}

.about-portrait img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 30%;
    filter: sepia(0.08) contrast(1.03);
}

.about-copy {
    width: 100%;
    max-width: 1040px;
    padding-top: 12px;
    margin-left: -50px;
    text-shadow: 0 2px 8px #321b0c80;
}

.website-story h2 {
    width: auto;
    margin: 0;
    color: #f5efe5;
    font-family: "CustomFontBold", sans-serif;
    font-weight: normal;
    line-height: 1.05;
}

.about-copy-columns {
    display: block;
    box-sizing: border-box;
    max-width: 970px;
    margin: 24px auto 0;
    padding: 30px 36px;
    border: 1px solid #e7d7bd66;
    background: #2b1b12b8;
    box-shadow: 9px 13px 25px #29150966, inset 0 0 0 1px #fff4df14;
    backdrop-filter: blur(2px);
    transform: translateX(-25px);
}

.about-copy-columns p {
    margin: 0;
    padding: 18px 0;
    color: #eee6da;
    font-size: 16px;
    line-height: 1.62;
    border-bottom: 0;
}

.about-copy-columns h2 {
    width: auto;
    max-width: 100%;
    margin: 0 0 10px;
    color: #e1bd7a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(21px, 2.2vw, 27px);
    font-style: italic;
    font-weight: normal;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 5px #160b0666;
}

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.about-tags span {
    padding: 8px 13px;
    color: #f3ede2;
    font-size: 13px;
    border: 1px solid #f3ede27a;
    border-radius: 999px;
    background: #3b241373;
    backdrop-filter: blur(3px);
    transition: transform 180ms ease, background-color 180ms ease;
}

.about-tags span:hover {
    background: #3b2413a8;
    transform: translateY(-2px);
}

.about-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 44px);
    width: min(1380px, 100%);
    margin: 95px auto 0;
}

.about-table-card {
    position: relative;
    isolation: isolate;
    padding: clamp(28px, 4vw, 46px);
    color: #33281d;
    background-color: #c5a574;
    background-image:
        radial-gradient(ellipse at 18% 22%, #f5dfb124 0, transparent 30%),
        radial-gradient(ellipse at 82% 76%, #694a2821 0, transparent 34%),
        repeating-linear-gradient(96deg, transparent 0, transparent 5px, #6c4d2e0b 6px, transparent 7px),
        linear-gradient(108deg, #f7e5bd1f, transparent 42%, #61401f18 100%);
    border: 1px solid #80613e;
    box-shadow: 10px 16px 28px #321b0c78, 1px 2px 3px #321b0c66, inset 0 0 22px #68451f24;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.about-table-card::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 50%;
    z-index: 2;
    width: 125px;
    height: 36px;
    background: #d8c49a9e;
    box-shadow: 0 2px 4px #4b341f55, inset 0 0 5px #fff8dc38;
    transform: translateX(-50%) rotate(-1deg);
}

.about-table-card:hover {
    z-index: 3;
    box-shadow: 14px 21px 34px #321b0c80, 1px 2px 3px #321b0c66;
}

.about-table-card-left {
    transform: rotate(-1.1deg);
}

.about-table-card-left:hover {
    transform: rotate(-0.35deg) translateY(-5px);
}

.about-table-card-right {
    color: #2f2b23;
    transform: rotate(1deg) translateY(18px);
}

.about-table-card-right:hover {
    transform: rotate(0.3deg) translateY(12px);
}

.about-copy-columns p:last-child {
    padding-bottom: 0;
}

.about-table-card-extra {
    color: #2e241b;
    transform: rotate(-0.7deg) translateY(5px);
}

.about-table-card-extra:hover {
    transform: rotate(-0.15deg) translateY(0);
}

.about-table-card h2 {
    display: inline-block;
    width: auto;
    margin: 0 0 24px;
    padding: 0 2px 5px;
    color: #672c38;
    font-family: "Courier Prime", monospace;
    font-size: 28px;
    background: transparent;
    border-bottom: 2px solid currentColor;
    box-shadow: none;
    transform: rotate(-0.6deg);
}

.about-table-card-right h2 {
    color: #315444;
    background: transparent;
    transform: rotate(0.5deg);
}

.about-table-card-extra h2 {
    color: #344967;
    background: transparent;
    transform: rotate(-0.4deg);
}

.about-table-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
}

.about-table-card th,
.about-table-card td {
    padding: 13px 5px;
    border-top: 1px solid #83705e73;
    vertical-align: top;
    transition: background-color 160ms ease;
}

.about-table-card th {
    width: 36%;
    padding-right: 18px;
    font-family: "CustomFontBold", sans-serif;
    font-weight: normal;
    text-align: left;
}

.about-table-card tr:hover th,
.about-table-card tr:hover td {
    background-color: #fff7df42;
}

.about-table-card-right tr:hover th,
.about-table-card-right tr:hover td {
    background-color: #f7f0d94d;
}

.about-table-card-extra tr:hover th,
.about-table-card-extra tr:hover td {
    background-color: #f0d9b24a;
}

.about-details + .about-tags {
    justify-content: center;
    width: min(1050px, 100%);
    margin: 70px auto 0;
}

.website-story {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    max-width: 900px;
    margin-top: 120px;
    padding: clamp(38px, 5vw, 68px);
    color: #30271e;
    border: 1px solid #cbbda8;
    background-color: #eee5d4;
    background-image:
        radial-gradient(ellipse at 16% 18%, #fffdf58c 0, transparent 32%),
        radial-gradient(ellipse at 84% 78%, #b99d7624 0, transparent 38%),
        repeating-linear-gradient(94deg, transparent 0, transparent 6px, #816b5008 7px, transparent 8px),
        linear-gradient(112deg, #fffaf04f, transparent 46%, #9b7c5520 100%);
    box-shadow: 11px 17px 28px #321b0c70, inset 0 0 22px #90724e18;
    transform: rotate(-0.7deg);
}

.paper-tape {
    position: absolute;
    top: -17px;
    left: 50%;
    width: 120px;
    height: 34px;
    background: #d7cbb59c;
    box-shadow: 0 2px 4px #4b341f40;
    transform: translateX(-50%) rotate(1.5deg);
}

.website-story h2 {
    color: #30271e;
    font-family: "Courier Prime", monospace;
    font-size: clamp(27px, 3.5vw, 39px);
}

.website-story-copy > p {
    margin: 20px 0 0;
    color: #44382c;
    font-size: 16px;
    line-height: 1.7;
}

.website-story-copy {
    max-width: 760px;
}

.about-board-section {
    width: min(1380px, 100%);
    margin: 145px auto 0;
}

.about-corkboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, minmax(220px, auto));
    gap: clamp(22px, 3vw, 38px);
    min-height: 740px;
    padding: clamp(45px, 6vw, 78px);
    background-image:
        url("assets/about-background.jpg"),
        linear-gradient(#38200fc2, #38200fc2),
        url("assets/wood-background.jpg");
    background-position: center;
    background-size: cover;
    background-origin: padding-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    border: clamp(16px, 2.2vw, 28px) solid transparent;
    outline: 3px solid #241208;
    box-shadow: inset 0 0 28px #3e220f80, inset 0 0 0 2px #a7784a70, 14px 20px 36px #321b0c80;
}

.board-note {
    position: relative;
    align-self: start;
    min-height: 190px;
    padding: 35px 28px 28px;
    color: #30271e;
    font-family: "Courier Prime", monospace;
    box-shadow: 7px 10px 14px #4a2d1770;
    transition: box-shadow 220ms ease;
}

.board-note:hover {
    z-index: 2;
    box-shadow: 10px 15px 20px #4a2d1785;
}

.board-note h3 {
    margin: 0;
    font-size: clamp(21px, 2.5vw, 29px);
    line-height: 1.12;
}

.board-note p:last-child {
    margin: 15px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.note-pin {
    position: absolute;
    top: 11px;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #9f3427;
    border: 2px solid #742118;
    border-radius: 50%;
    box-shadow: 1px 3px 4px #38200f80;
    transform: translateX(-50%);
}

.board-note-yellow {
    grid-column: 1 / span 4;
    grid-row: 1;
    background: #f2d96f;
    transform: rotate(-2deg);
}

.board-note-cream {
    grid-column: 5 / span 4;
    grid-row: 1;
    margin-top: 28px;
    background: #eee7d5;
    transform: rotate(1.5deg);
}

.board-note-blue {
    grid-column: 9 / span 4;
    grid-row: 1;
    margin-top: 5px;
    background: #b9d5d2;
    transform: rotate(1deg);
}

.board-note-small {
    grid-column: 8 / span 4;
    grid-row: 2;
    margin-top: 24px;
    background: #e4b1a4;
    transform: rotate(-3deg);
}

.board-note-pink {
    grid-column: 2 / span 5;
    grid-row: 2;
    margin-top: 55px;
    background: #e8c0c4;
    transform: rotate(2deg);
}

@media (max-width: 850px) {
    .about-page {
        background-attachment: scroll;
    }

    .about-page main {
        padding: 130px 24px 70px;
    }

    .about-intro {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .about-portrait-wrap {
        width: min(260px, calc(100% - 35px));
        margin: 0 auto;
        transform: translateY(32px);
    }

    .about-copy-columns {
        transform: none;
    }

    .about-copy {
        margin-left: 0;
    }

    .about-details {
        grid-template-columns: 1fr;
    }

    .about-table-card-left,
    .about-table-card-right,
    .about-table-card-extra {
        transform: none;
    }

    .website-story {
        grid-template-columns: 1fr;
        margin-top: 100px;
        transform: none;
    }

    .about-board-section {
        margin-top: 110px;
    }

    .about-corkboard {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-height: auto;
        padding: 42px 28px;
    }

    .board-note,
    .board-note-yellow,
    .board-note-cream,
    .board-note-blue,
    .board-note-small {
        grid-column: 1;
        grid-row: auto;
        width: auto;
        margin-top: 0;
    }

    .board-note-pink {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0;
    }
}

/* Projects page */
.projects-page {
    position: relative;
    min-height: 200vh;
    margin: 0;
    background-color: #245b58;
    background-image: url("assets/cuttingboard-mirror.webp");
    background-position: center;
    background-repeat: repeat;
    background-size: 400px 400px;
}

.projects-page::before,
.projects-page::after {
    content: none;
}

.projects-page main {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding: 150px 0 50px;
}

.projects-page header {
    position: relative;
    z-index: 20;
}

.projects-page nav {
    z-index: 10;
    isolation: isolate;
}

.projects-page nav::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    height: 90px;
    background-color: #164743;
    opacity: var(--projects-nav-opacity, 0);
    pointer-events: none;
}

.projects-page footer,
.about-page footer {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: 1;
    padding-bottom: 20px;
    color: #e8f1e9;
}

.projects-heading {
    display: flex;
    justify-content: flex-start;
    width: min(1600px, calc(100% - clamp(40px, 10vw, 200px)));
    margin: clamp(34px, 4vw, 56px) auto clamp(20px, 2vw, 32px);
}

.projects-title {
    margin: 0;
    padding-bottom: 9px;
    color: #eef4ff;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(56px, 7vw, 92px);
    font-weight: normal;
    line-height: 1;
    text-decoration: underline;
    text-decoration-color: #89aee0;
    text-decoration-thickness: 3px;
    text-underline-offset: 12px;
    text-shadow: 0 4px 12px rgb(4 15 34 / 45%);
}

.hard-hat {
    position: absolute;
    top: 50%;
    left: 110px;
    width: min(200px, 22vw);
    filter: drop-shadow(6px 8px 8px #10282899);
    animation: hard-hat-drift 5s ease-in-out infinite;
}

.rolled-paper,
.theodolite {
    position: absolute;
    top: 50%;
    filter: drop-shadow(5px 7px 7px #10282888);
}

.rolled-paper {
    left: -10px;
    width: min(200px, 21vw);
    animation: rolled-paper-drift 5.5s ease-in-out infinite;
}

.theodolite {
    top: calc(50% - 10px);
    right: 30px;
    width: min(300px, 30vw);
    animation: theodolite-drift 6s ease-in-out infinite;
}

.ransom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(2px, 1vw, 6px);
    margin: 0;
}

.ransom-title span {
    --x: 0px;
    --y: 0px;
    --tilt: 0deg;
    --scale: 1;
    width: min(90px, 10vw);
    transform: translate(var(--x), var(--y)) rotate(var(--tilt)) scale(var(--scale));
    animation: ransom-drift 5s ease-in-out infinite;
}

.ransom-title img {
    display: block;
    width: 100%;
    filter: drop-shadow(6px 8px 8px #102828cc);
}

.ransom-title span:nth-child(1) { --x: -2px; --y: 7px; --tilt: -10deg; --scale: 0.94; animation-delay: -0.4s; }
.ransom-title span:nth-child(2) { --x: 3px; --y: -6px; --tilt: 8deg; --scale: 1.06; animation-delay: -1.2s; }
.ransom-title span:nth-child(3) { --x: -1px; --y: 4px; --tilt: -7deg; --scale: 0.97; animation-delay: -2s; }
.ransom-title span:nth-child(4) { --x: 2px; --y: -9px; --tilt: 12deg; --scale: 1.04; animation-delay: -2.8s; }
.ransom-title span:nth-child(5) { --x: -3px; --y: 6px; --tilt: -9deg; --scale: 0.93; animation-delay: -3.6s; }
.ransom-title span:nth-child(6) { --x: 1px; --y: -4px; --tilt: 6deg; --scale: 1.07; animation-delay: -4.4s; }
.ransom-title span:nth-child(7) { --x: -2px; --y: 9px; --tilt: -8deg; --scale: 0.96; animation-delay: -1.6s; }
.ransom-title span:nth-child(8) { --x: 3px; --y: -7px; --tilt: 10deg; --scale: 1.03; animation-delay: -3.2s; }

.about-ransom-title {
    position: relative;
    isolation: isolate;
    grid-column: 1 / -1;
    justify-self: center;
    justify-content: center;
    gap: clamp(1px, 0.45vw, 5px);
    width: min(100%, 850px);
    min-height: 122px;
    padding: 4px 4px 10px;
    margin: 0 auto 22px;
}

.about-ransom-title::before {
    content: "";
    position: absolute;
    top: -75px;
    left: 50%;
    z-index: -1;
    width: calc(100vw + 180px);
    height: 310px;
    border: 18px solid #201714;
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0 -310px 0 310px #201714;
    transform: translateX(-50%);
    pointer-events: none;
}

.about-ransom-title span {
    position: relative;
    top: 15px;
    z-index: 1;
    width: clamp(40px, 7.1vw, 104px);
}

.about-ransom-title span:first-child {
    --scale: 1.13;
    margin-right: clamp(3px, 0.5vw, 8px);
}

.about-ransom-title .about-title-break {
    margin-left: clamp(24px, 3vw, 48px);
}

.about-ransom-title img {
    filter: drop-shadow(6px 8px 7px #321b0cb8);
}

@media (max-width: 850px) {
    .about-ransom-title::before {
        top: -38px;
        width: calc(100vw + 80px);
        height: 205px;
        border-width: 11px;
        box-shadow: 0 -205px 0 205px #201714;
    }
}

.ransom-title span:hover img {
    transform: rotate(10deg);
}

.ransom-title span:has(+ span:hover) img,
.ransom-title span:hover + span img {
    transform: translateY(-5px) rotate(-3deg);
}

.ransom-title span:has(+ span + span:hover) img,
.ransom-title span:hover + span + span img {
    transform: translateY(-2px) rotate(2deg);
}

@keyframes ransom-drift {
    50% { transform: translate(calc(var(--x) + 4px), calc(var(--y) - 5px)) rotate(calc(var(--tilt) + 3deg)) scale(var(--scale)); }
}

@keyframes hard-hat-drift {
    0%, 100% { transform: translateY(-50%) rotate(-12deg); }
    50% { transform: translate(6px, calc(-50% - 8px)) rotate(-8deg); }
}

@keyframes rolled-paper-drift {
    0%, 100% { transform: translateY(-50%) rotate(100deg); }
    50% { transform: translate(5px, calc(-50% - 7px)) rotate(104deg); }
}

@keyframes theodolite-drift {
    0%, 100% { transform: translateY(-50%) rotate(6deg); }
    50% { transform: translate(-10px, calc(-50% - 12px)) rotate(2deg); }
}

.projects-content {
    width: calc(100% - 200px);
    margin: 100px auto 0;
}

.projects-columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 24px;
}

.projects-columns > * {
    min-width: 0;
}

.paper-panel {
    box-sizing: border-box;
    padding: 40px;
    color: #1f5b57;
    background: url("assets/projects-paper.jpg") center / cover;
    box-shadow: 0 8px 16px #10282899;
}

.projects-columns .paper-panel {
    min-height: 650px;
}

.paper-panel h2 {
    width: auto;
    margin: 0;
    font-family: "CustomFontBold", sans-serif;
    font-size: 30px;
}

.updates-tab,
.working-tab {
    display: inline-block;
    margin-bottom: 20px;
    padding: 0;
    color: #1d3f6e;
    font-family: "CustomFont", sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
}

.working-tab {
    transform: none;
}

.updates-list {
    display: grid;
    gap: 10px;
    margin-bottom: 50px;
}

.update-item {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid #1f5b5744;
}

.update-item span,
.update-item time {
    font-family: "CustomFontBold", sans-serif;
    font-size: 13px;
}

.update-item time {
    color: #194f4b;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.025em;
}

.update-text {
    min-width: 0;
    margin: 0;
    color: #44534f;
    font-size: 15px;
    line-height: 1.5;
}

.update-item i,
.post-title,
.post-description {
    display: block;
    background-color: #1f5b5733;
    border-radius: 4px;
}

.update-item i {
    height: 10px;
    margin: 7px 0;
}

.update-item i:last-child {
    width: 65%;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.working-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 50px;
}

.post-card {
    padding: 14px;
    background-color: #f3eee5aa;
    border: 1px solid #1f5b5733;
    box-shadow: 0 4px 8px #10282844;
}

a.post-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.post-card:hover {
    box-shadow: 0 7px 12px #10282855;
    transform: translateY(-2px);
}

.post-thumbnail {
    aspect-ratio: 4 / 3;
    margin-bottom: 18px;
    background-color: #1f5b5726;
}

.post-title {
    width: 72%;
    height: 18px;
    margin-bottom: 16px;
}

.post-description {
    height: 10px;
    margin-top: 8px;
}

.post-description.short {
    width: 60%;
}

.project-card {
    display: flex !important;
    box-sizing: border-box;
    min-width: 0;
    flex-direction: column;
}

.project-card-thumbnail {
    display: block;
    width: 100%;
    object-fit: cover;
}

.project-card-placeholder {
    display: grid;
    padding: 16px;
    color: #eaf1ed;
    font-family: "CustomFontBold", sans-serif;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
    background:
        linear-gradient(135deg, #174743e8, #2a736de0),
        url("assets/cuttingboard-mirror.webp") center / 280px repeat;
    place-items: center;
}

.project-card-title {
    margin: 0 0 10px;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: 20px;
    line-height: 1.15;
}

.project-card-description {
    display: block;
    margin: 0 0 18px;
    overflow: visible;
    color: #44534f;
    font-size: 14px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.project-card-tags,
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.project-card-tags {
    margin: -5px 0 17px;
}

.project-tags {
    max-width: 720px;
    margin-top: 20px;
}

.project-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 7px;
    color: #f7f4ed;
    font-family: "CustomFontBold", sans-serif;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0.03em;
    background-color: #4d759f;
    border: 1px solid #365d85;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 #ffffff1f, 0 2px 4px #10282826;
}

.project-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 12px;
    color: #67716e;
    font-size: 11px;
    border-top: 1px solid #1f5b572c;
}

.project-card-date {
    font-family: "CustomFontBold", sans-serif;
}

.project-card-status {
    padding: 4px 7px;
    color: #f5f2e8;
    font-family: "CustomFontBold", sans-serif;
    background-color: #194f4b;
    border-radius: 2px;
}

.project-card-status--on-hold {
    background-color: #8f4f4b;
}

.project-card-status--complete {
    background-color: #4f765f;
}

.projects-loading,
.projects-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 18px;
    color: #5c6864;
    font-size: 13px;
    line-height: 1.5;
    background-color: #1f5b570d;
    border: 1px dashed #1f5b5745;
}

.updates-list .projects-loading,
.updates-list .projects-empty {
    padding: 12px 0;
    background: none;
    border-width: 0 0 1px;
}

.projects-error {
    color: #733f3b;
    border-color: #a46e6870;
}

.projects-script-message {
    margin: 0 0 28px;
    padding: 22px;
}

.recent-projects > h2,
.featured-projects > h2,
.all-posts > h2 {
    display: inline-block;
    padding: 0;
    color: #1d3f6e;
    font-family: "CustomFont", sans-serif;
    font-size: 24px;
    font-weight: normal;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.recent-projects > h2 {
    transform: none;
}

.featured-projects {
    text-align: center;
}

.featured-projects > h2 {
    transform: none;
}

.all-posts > h2 {
    transform: none;
}

.featured-projects .posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.all-posts {
    min-height: 100vh;
    margin-top: 50px;
}

.all-projects-page-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    margin-left: 18px;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(17px, 1.5vw, 20px);
    text-underline-offset: 4px;
}

/* Filterable All Projects page */

.all-projects-page {
    min-height: 100vh;
    min-height: 100svh;
}

.all-projects-page main {
    padding: 118px 0 70px;
}

.all-projects-back-link,
.all-projects-archive {
    width: min(1400px, calc(100% - clamp(40px, 8vw, 120px)));
    margin-right: auto;
    margin-left: auto;
}

.all-projects-page .all-projects-back-link {
    display: block;
    box-sizing: border-box;
    margin: 0 auto 20px;
    padding-left: 0;
}

.all-projects-intro {
    position: relative;
    padding: clamp(34px, 5vw, 64px);
    overflow: visible;
}

.all-projects-intro .paper-tape {
    top: -15px;
}

.all-projects-intro h1 {
    margin: 0;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(43px, 7vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.all-projects-intro > p:last-child {
    max-width: 760px;
    margin: 22px 0 0;
    color: #44534f;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.55;
}

.project-filters {
    margin-top: 28px;
    padding: clamp(22px, 3vw, 34px);
}

.project-filters-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.project-filters-heading h2 {
    margin: 0;
    color: #194f4b;
    font-size: clamp(22px, 3vw, 28px);
}

.project-filters-heading p {
    margin: 6px 0 0;
    color: #5c6864;
    font-size: 13px;
}

.project-filters-clear {
    min-height: 40px;
    padding: 8px 12px;
    color: #6a4630;
    font-family: "CustomFontBold", sans-serif;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    background: #d8c49a55;
    border: 1px solid #80613e80;
    border-radius: 2px;
    cursor: pointer;
}

.project-filters-clear:hover {
    background-color: #d8c49a88;
}

.project-filters-clear:focus-visible,
.project-filter-field select:focus-visible,
.all-projects-page-link:focus-visible {
    outline: 3px solid #215caa;
    outline-offset: 3px;
}

.project-filter-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.project-filter-field {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: #3b4b47;
    font-family: "CustomFontBold", sans-serif;
    font-size: 12px;
}

.project-filter-field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 9px 34px 9px 11px;
    color: #253f3c;
    font: 14px "CustomFont", sans-serif;
    background-color: #ffffff;
    border: 1px solid #1f5b5755;
    border-radius: 2px;
    box-shadow: inset 0 1px 3px #10282818;
    cursor: pointer;
}

.project-filter-count {
    margin: 18px 0 0;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: 13px;
}

.all-projects-results {
    min-height: 240px;
    margin-top: 28px;
}

.all-projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(245px, 100%), 1fr));
    margin-top: 0;
}

.all-projects-grid .project-card {
    background: #fffefa;
    border-color: #77a598;
    opacity: 1;
    transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.all-projects-grid .project-card.is-filtered-out {
    opacity: 0;
    pointer-events: none;
    transform: translateY(7px) scale(0.985);
}

.all-projects-grid .project-card[hidden] {
    display: none !important;
}

.all-projects-grid .project-card--placeholder {
    pointer-events: none;
    background: #fffefa;
    border: 1px solid #77a598;
}

.all-projects-grid .project-card--placeholder .project-card-placeholder {
    min-height: 118px;
    background: #cbd2ce;
}

.all-projects-grid .project-card-placeholder-copy {
    display: grid;
    width: 72%;
    min-height: 52px;
    gap: 8px;
    margin: 2px 0 3px;
}

.all-projects-grid .project-card-placeholder-line {
    display: block;
    width: 62%;
    height: 8px;
    background: #b3beb8;
    border-radius: 2px;
}

.all-projects-grid .project-card-placeholder-line--title {
    width: 100%;
    height: 11px;
    background: #91a49a;
}

.all-projects-grid .project-card-placeholder-line:nth-child(3) {
    width: 48%;
}

.all-projects-empty {
    margin: 0;
}

@media (max-width: 800px) {
    .all-projects-page-link {
        display: flex;
        width: fit-content;
        margin: 10px 0 0;
    }

    .project-filter-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .all-projects-page main {
        padding-top: calc(96px + env(safe-area-inset-top));
    }

    .all-projects-back-link,
    .all-projects-archive {
        width: calc(100% - 32px);
    }

    .all-projects-page .all-projects-back-link {
        margin-bottom: 14px;
    }

    .all-projects-intro,
    .project-filters,
    .all-projects-results {
        padding: 26px 18px;
    }

    .project-filters-heading {
        align-items: start;
    }

    .project-filters-clear {
        flex: 0 0 auto;
    }

    .project-filter-controls {
        gap: 10px;
    }
}

@media (max-width: 800px) {
    .projects-content {
        width: calc(100% - 40px);
    }

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

    .posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-projects .posts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    .posts-grid,
    .featured-projects .posts-grid {
        grid-template-columns: 1fr;
    }
}

/* Project post template */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 10px 16px;
    color: #f8f3e8;
    background-color: #123f3d;
    transform: translateY(-150%);
}

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

.project-post-page {
    min-height: 100vh;
    overflow-x: clip;
}

.project-post-page main {
    padding: 130px 0 70px;
}

.project-case-study {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;
    color: #213f3d;
}

.project-back-link {
    display: inline-block;
    margin: 0 0 24px 8px;
    color: #f5f2e8;
    font-family: "CustomFontBold", sans-serif;
    text-underline-offset: 4px;
}

.project-back-link:hover {
    color: #d3d3d3;
}

.project-hero {
    position: relative;
    padding: clamp(32px, 6vw, 72px);
    overflow: visible;
}

.project-hero-copy {
    width: 100%;
    max-width: none;
}

.project-hero h1 {
    max-width: 900px;
    margin: 0;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(42px, 6.5vw, 78px);
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.project-summary {
    width: 100%;
    max-width: none;
    margin: 28px 0 0;
    color: #3f4d49;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.45;
}

.project-plan-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    margin-top: 28px;
    padding: 14px 18px;
    color: #194f4b;
    text-decoration: none;
    background-color: #f7f2e8;
    border: 1px solid #1f5b5755;
    box-shadow: 0 4px 8px #10282833;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.project-plan-link:hover {
    background-color: #fffaf0;
    box-shadow: 0 7px 12px #10282844;
    transform: translateY(-2px);
}

.project-plan-link:focus-visible {
    outline: 3px solid #858b91;
    outline-offset: 4px;
}

.project-plan-link img {
    width: 34px;
    height: 34px;
}

.project-plan-link > span {
    display: grid;
    gap: 3px;
}

.project-plan-link strong {
    font-family: "CustomFontBold", sans-serif;
    font-size: 16px;
}

.project-plan-link small {
    color: #6f6255;
    font-size: 12px;
}

.project-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 1px;
    margin: 48px 0;
    background-color: #1f5b5740;
    border: 1px solid #1f5b5740;
}

.project-facts div {
    padding: 18px;
    background-color: #f3eee5cc;
}

.project-facts dt {
    display: inline-block;
    margin-bottom: 10px;
    padding: 0;
    color: #1f5b57;
    font-family: "CustomFont", sans-serif;
    font-size: 14px;
    letter-spacing: normal;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-transform: none;
}

.project-facts dd {
    margin: 0;
    line-height: 1.35;
}

.project-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    color: #f7f4ed;
    font-family: "CustomFontBold", sans-serif;
    font-size: 14px;
    line-height: 1;
    background-color: #172b4db8;
    border: 1px solid #0e1c34cc;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 #ffffff1f, 0 2px 4px #10282833;
}

.project-status::before {
    width: 8px;
    height: 8px;
    content: "";
    background-color: #8ac6ff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #8ac6ff33;
}

.project-status--on-hold {
    background-color: #843f42c7;
    border-color: #682f32d9;
}

.project-status--on-hold::before {
    background-color: #ffaaa3;
    box-shadow: 0 0 0 2px #ffaaa338;
}

.project-status--complete {
    background-color: #3f7158c7;
    border-color: #2b5944d9;
}

.project-status--complete::before {
    background-color: #a6deb5;
    box-shadow: 0 0 0 2px #a6deb538;
}

.project-hero-media,
.project-wide-media {
    margin: 0;
}

.project-media-placeholder {
    display: grid;
    min-height: 480px;
    padding: 30px;
    color: #f5f2e8;
    text-align: center;
    background:
        linear-gradient(135deg, #174743dd, #2a736ddd),
        url("assets/cuttingboard-mirror.webp") center / 400px repeat;
    border: 12px solid #eee7d9;
    outline: 1px solid #1f5b5755;
    box-shadow: 0 5px 14px #10282855;
    place-content: center;
}

.project-media-placeholder span {
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(22px, 3vw, 38px);
}

.project-media-placeholder small {
    display: block;
    max-width: 400px;
    margin: 10px auto 0;
    font-size: 13px;
    line-height: 1.5;
}

.project-hero-media figcaption,
.project-process-image figcaption,
.project-section-media figcaption,
.project-wide-media figcaption {
    margin-top: 22px;
    color: #5b6864;
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
    text-align: center;
}

.project-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    margin-top: 40px;
}

.project-contents {
    position: sticky;
    top: 115px;
    z-index: 5;
    padding: 28px;
}

.project-contents > p {
    margin: 0 0 18px;
    color: #4f555b;
    font-family: "CustomFontBold", sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-contents ol {
    display: grid;
    gap: 16px;
    margin: 0;
    padding-left: 22px;
}

.project-contents li {
    line-height: 1.6;
}

.project-contents a {
    color: #1f5b57;
    text-underline-offset: 3px;
}

.project-story {
    display: grid;
    gap: 28px;
}

.project-section {
    position: relative;
    z-index: 1;
    scroll-margin-top: 110px;
    padding: clamp(34px, 5vw, 62px);
    overflow: visible;
    isolation: isolate;
}

.project-section h2 {
    width: auto;
    margin: 0 0 26px;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1;
}

.project-section h3 {
    margin: 0 0 12px;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: 20px;
}

.project-section p,
.project-section li {
    line-height: 1.7;
}

.project-lead {
    margin-top: 0;
    color: #3f4d49;
    font-size: 19px;
}

.project-section-guide {
    margin: 24px 0 0;
    padding: 16px 18px;
    color: #4f555b;
    font-size: 14px;
    background-color: #858b9114;
    border: 1px dashed #858b9170;
    border-radius: 3px;
}

.project-section-guide strong {
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
}

.project-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
    margin-top: 38px;
    padding-top: 32px;
    border-top: 1px solid #1f5b5733;
}

.project-two-column ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.project-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.project-detail-grid article {
    padding: 22px;
    background-color: #f8f4eb99;
    border: 1px solid #1f5b5730;
    border-top: 4px solid #858b91;
}

#reflection .project-detail-grid {
    grid-template-columns: 1fr;
}

.project-detail-grid h3 {
    margin-bottom: 9px;
    font-size: 18px;
}

.project-detail-grid article > p:last-child {
    margin-bottom: 0;
}

.project-detail-label {
    margin: 0 0 9px;
    color: #697077;
    font-family: "CustomFontBold", sans-serif;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.project-section-media {
    margin: 38px 0 0;
}

.project-section-media .project-media-placeholder {
    min-height: 300px;
}

#overview .project-two-column ul {
    padding-left: 0;
    list-style: none;
}

#overview .project-two-column li {
    position: relative;
    padding-left: 27px;
}

#overview .project-two-column li::before {
    position: absolute;
    top: 0.78em;
    left: 0;
    width: 16px;
    height: 16px;
    content: "";
    background: url("assets/logos/tick-circle-svgrepo-com.svg") center / contain no-repeat;
    transform: translateY(-50%);
}

.project-callout {
    margin-top: 36px;
    padding: 24px 28px;
    background-color: #858b9133;
    border: 1px solid #4f555b66;
    transform: none;
}

.project-callout strong {
    color: #4f555b;
    font-family: "CustomFontBold", sans-serif;
    text-transform: uppercase;
}

.project-callout p {
    margin-bottom: 0;
}

.project-problems {
    display: grid;
    gap: 22px;
    margin-top: 34px;
}

.project-problems article {
    display: block;
    padding: 28px;
    color: #f5f2e8;
    background-color: #123f3de8;
    border: 1px solid #0d302f;
}

.project-problems h3 {
    color: #ffffff;
    margin-bottom: 10px;
    font-size: 22px;
}

.project-problems article > p {
    margin-top: 0;
    color: #edf3ef;
}

.project-problem-evidence {
    margin-bottom: 0;
    padding-top: 4px;
    font-size: 14px;
}

.project-problem-evidence strong {
    color: #ffffff;
    font-family: "CustomFontBold", sans-serif;
}

.project-reflection-note {
    margin-top: 34px;
    padding: 24px 26px;
    color: #f5f2e8;
    background-color: #194f4b;
    border: 1px solid #123f3d;
    box-shadow: 0 4px 10px #10282833;
}

.project-reflection-note strong {
    display: block;
    margin-bottom: 13px;
    font-family: "CustomFontBold", sans-serif;
    font-size: 17px;
}

.project-reflection-note p {
    margin: 0;
    color: #e4eee9;
}

.project-process-notes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 38px 0 42px;
}

.project-process-notes article {
    padding: 22px;
    margin: 0;
    color: #3f4d49;
    background-color: #f8f4eb80;
    border: 1px solid #1f5b5728;
}

.project-process-notes article:last-child {
    grid-column: 1 / -1;
}

.project-process-notes h3 {
    width: fit-content;
    margin: 0 0 12px;
    padding: 6px 11px;
    color: #f8f2e8;
    font-family: "CustomFontBold", sans-serif;
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    background-color: #b76f8c;
    border: 1px solid #203d3b33;
    border-radius: 4px;
    box-shadow: 2px 2px 0 #1f5b5724;
}

.project-process-notes article > p {
    margin: 0;
}

.project-process-notes small {
    display: block;
    margin-top: 13px;
    color: #626c68;
    font-size: 12px;
    line-height: 1.55;
}

.project-process-notes small strong {
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
}

.project-process-image {
    margin: 22px 0 0;
}

.project-process-image .project-media-placeholder {
    min-height: 240px;
    border-width: 7px;
}

.project-process-notes article:nth-child(2) h3 {
    color: #f8f2e8;
    background-color: #5684b4;
}

.project-process-notes article:nth-child(3) h3 {
    color: #f8f2e8;
    background-color: #b9863f;
}

.project-process-notes article:nth-child(4) h3 {
    color: #f8f2e8;
    background-color: #5f9174;
}

.project-process-notes article:nth-child(5) h3 {
    color: #f8f2e8;
    background-color: #bc6a62;
}

.project-media-placeholder-small {
    min-height: 260px;
    padding: 18px;
    border-width: 8px;
}

.project-media-placeholder-small span {
    font-size: 21px;
}

.project-wide-media {
    margin-top: 38px;
}

.project-margin-notes {
    position: absolute;
    top: 54px;
    left: -252px;
    z-index: 0;
    width: 220px;
    pointer-events: none;
}

.project-section-with-margin-notes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 205px;
    align-items: start;
    gap: 28px;
}

.project-section-with-margin-notes > .project-margin-notes,
.project-margin-notes--top-level {
    position: static;
    top: auto;
    left: auto;
    z-index: 1;
    display: grid;
    width: 100%;
    pointer-events: auto;
}

.project-section-with-margin-notes > .project-margin-notes {
    grid-column: 2;
}

.project-margin-note {
    position: relative;
    width: 205px;
    aspect-ratio: 474 / 507;
    transform: none;
}

.project-margin-note + .project-margin-note {
    left: 14px;
    margin-top: 20px;
    transform: none;
}

.project-margin-note img {
    display: block;
    width: 100%;
    box-shadow: 5px 7px 13px #10282855;
}

.project-margin-note p {
    position: absolute;
    top: 30px;
    right: 14px;
    bottom: 12px;
    left: 14px;
    display: grid;
    margin: 0;
    color: #4a3d27;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    place-items: center;
}

#outcome > p > strong {
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
}

.project-wide-media .project-media-placeholder {
    min-height: 360px;
}

.project-pagination {
    position: static;
    top: auto;
    left: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 40px;
    padding: 0;
    font-size: inherit;
    background: #123f3d;
    overflow: hidden;
}

.project-pagination a {
    display: grid;
    gap: 8px;
    padding: 34px;
    color: #f5f2e8;
    text-decoration: none;
}

.project-pagination a + a {
    text-align: right;
    border-left: 1px solid #f5f2e855;
}

.project-pagination a:hover {
    background-color: #ffffff14;
}

.project-pagination span {
    color: #c9ddd5;
    font-size: 13px;
}

.project-pagination strong {
    font-family: "CustomFontBold", sans-serif;
    font-size: 20px;
}

@media (max-width: 900px) {
    .project-case-study {
        width: min(100% - 40px, 760px);
    }

    .project-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-layout {
        grid-template-columns: 1fr;
    }

    .project-contents {
        position: static;
    }

    .project-contents ol {
        grid-template-columns: repeat(5, max-content);
        gap: 12px 28px;
        overflow-x: auto;
    }

    .project-margin-notes {
        display: none;
    }
}

@media (max-width: 600px) {
    .project-post-page main {
        padding-top: 115px;
    }

    .project-case-study {
        width: calc(100% - 24px);
    }

    .project-hero {
        padding: 38px 24px 28px;
    }

    .project-facts,
    .project-two-column,
    .project-process-notes,
    .project-pagination {
        grid-template-columns: 1fr;
    }

    .project-media-placeholder {
        min-height: 300px;
        border-width: 7px;
    }

    .project-contents {
        padding: 24px;
    }

    .project-contents ol {
        grid-template-columns: 1fr 1fr;
        overflow: visible;
    }

    .project-section {
        padding: 38px 24px;
    }

    .project-problems article {
        padding: 22px;
    }

    .project-pagination a + a {
        text-align: left;
        border-top: 1px solid #f5f2e855;
        border-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-post-page *,
    .project-post-page *::before,
    .project-post-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* JSON project renderer */
.project-loading,
.project-load-error {
    min-height: 280px;
    padding: clamp(38px, 7vw, 76px);
}

.project-loading {
    display: grid;
    color: #fff;
    font-family: "CustomFontBold", sans-serif;
    font-size: 20px;
    letter-spacing: 0.02em;
    background: #1f5b57;
    border: 1px solid #77a598;
    place-items: center;
}

.project-load-error h1 {
    margin-top: 0;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
}

.project-subtitle {
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    color: #68736f;
    font-family: "CustomFont", sans-serif;
    font-size: clamp(15px, 1.8vw, 19px);
    font-style: italic;
    letter-spacing: 0.025em;
}

@media (max-width: 1200px) {
    .project-section-with-margin-notes {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .project-section-with-margin-notes > .project-margin-notes,
    .project-margin-notes--top-level {
        grid-column: 1;
        grid-template-columns: repeat(auto-fit, minmax(180px, 205px));
        justify-content: center;
        gap: 18px;
    }

    .project-section-with-margin-notes .project-margin-note,
    .project-section-with-margin-notes .project-margin-note + .project-margin-note {
        left: auto;
        width: min(205px, 100%);
        margin: 0 auto;
    }
}

.project-external-links,
.project-links-block {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
}

.project-external-links .project-plan-link,
.project-external-links .project-action-link {
    margin-top: 0;
}

.project-external-links .project-action-link img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.project-external-links .project-action-link > span {
    display: grid;
    gap: 3px;
    font-size: inherit;
}

.project-external-links .project-action-link small {
    font-family: "CustomFont", sans-serif;
    font-size: 12px;
}

.project-action-link,
.project-download-link {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 175px;
    padding: 14px 18px;
    color: #f6f3ea;
    font-family: "CustomFontBold", sans-serif;
    text-decoration: none;
    background-color: #194f4b;
    border: 1px solid #123f3d;
    box-shadow: 0 3px 8px #1028282e;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.project-action-link:hover,
.project-download-link:hover {
    color: #ffffff;
    background-color: #24635e;
    box-shadow: 0 6px 11px #1028283d;
    transform: translateY(-2px);
}

.project-action-link:focus-visible,
.project-download-link:focus-visible {
    outline: 3px solid #858b91;
    outline-offset: 4px;
}

.project-action-link > span,
.project-download-link > span {
    font-size: 18px;
}

.project-hero-image,
.project-block-image,
.project-video {
    display: block;
    width: 100%;
    height: auto;
}

.project-hero-image {
    border: 12px solid #eee7d9;
    outline: 1px solid #1f5b5755;
    box-shadow: 0 5px 14px #10282855;
}

.project-layout--without-contents {
    grid-template-columns: minmax(0, 1fr);
}

.project-block {
    box-sizing: border-box;
}

.project-generated-section > .project-block,
.project-column > .project-block,
.project-image-text-copy > .project-block {
    margin-top: 28px;
}

.project-generated-section > .project-block:first-child,
.project-column > .project-block:first-child {
    margin-top: 0;
}

.project-text-block > :first-child,
.project-column > :first-child,
.project-custom-html > :first-child {
    margin-top: 0;
}

.project-text-block > :last-child,
.project-column > :last-child,
.project-custom-html > :last-child,
.project-image-text-copy > :last-child {
    margin-bottom: 0;
}

.project-tick-list {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.project-tick-list li {
    position: relative;
    padding-left: 29px;
}

.project-tick-list li::before {
    position: absolute;
    top: 0.8em;
    left: 0;
    width: 17px;
    height: 17px;
    content: "";
    background: url("assets/logos/tick-circle-svgrepo-com.svg") center / contain no-repeat;
    transform: translateY(-50%);
}

.project-image-block,
.project-video-block,
.project-youtube-block {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    transform: translateX(var(--project-offset, 0)) rotate(var(--project-rotation, 0deg));
    transform-origin: center;
}

.project-size--small {
    width: min(100%, 390px);
}

.project-size--medium {
    width: min(100%, 590px);
}

.project-size--large {
    width: min(100%, 780px);
}

.project-size--wide,
.project-size--full {
    width: 100%;
}

.project-align--left {
    margin-right: auto;
    margin-left: 0;
}

.project-align--right {
    margin-right: 0;
    margin-left: auto;
}

.project-position--offset-left {
    --project-offset: -24px;
}

.project-position--offset-right {
    --project-offset: 24px;
}

.project-image-style--framed .project-block-image,
.project-image-style--framed .project-media-placeholder,
.project-image-style--framed .project-video,
.project-gallery-item .project-block-image,
.project-image-text-media .project-block-image,
.project-comparison-image .project-block-image,
.project-process-image .project-block-image {
    border: 8px solid #eee7d9;
    outline: 1px solid #1f5b5747;
    box-shadow: 0 5px 12px #10282842;
}

.project-image-style--paper {
    padding: 13px;
    background-color: #f7f2e8;
    box-shadow: 0 5px 12px #10282838;
}

.project-image-style--polaroid {
    padding: 13px 13px 32px;
    background-color: #faf7ef;
    box-shadow: 0 5px 12px #10282842;
}

.project-image-style--taped {
    padding: 10px;
    background-color: #f7f2e8;
    box-shadow: 0 5px 12px #10282838;
}

.project-image-block figcaption,
.project-video-block figcaption,
.project-youtube-block figcaption,
.project-gallery-item figcaption,
.project-image-text-media figcaption,
.project-comparison-image figcaption {
    margin-top: 22px;
    color: #5b6864;
    font-size: 13px;
    font-style: italic;
    line-height: 1.45;
    text-align: center;
}

.project-video {
    background-color: #102e2c;
    box-shadow: 0 5px 14px #10282855;
}

.project-youtube-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    background-color: #102e2c;
    border: 8px solid #eee7d9;
    outline: 1px solid #1f5b5755;
    box-shadow: 0 5px 14px #10282855;
}

.project-youtube-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.project-gallery-block {
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns, 2), minmax(0, 1fr));
    align-items: start;
    gap: 22px;
}

.project-gallery-item,
.project-image-text-media,
.project-comparison-image {
    position: relative;
    margin: 0;
}

.project-columns {
    display: grid;
    align-items: start;
    gap: 32px;
    padding-top: 30px;
    border-top: 1px solid #1f5b5733;
}

.project-columns--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-columns--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-columns--2.project-columns--2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.project-columns--2.project-columns--1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.project-column {
    min-width: 0;
}

.project-image-text {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
    padding: 28px 0;
}

.project-image-text--right .project-image-text-media {
    order: 2;
}

.project-image-text-copy h3 {
    font-size: clamp(24px, 3vw, 34px);
}

.project-process-step {
    padding: 24px;
    color: #3f4d49;
    background-color: #f8f4eb80;
    border: 1px solid #1f5b5728;
}

.project-process-step-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.project-process-step-header h3 {
    width: fit-content;
    margin: 0;
    padding: 6px 11px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    background-color: #c47899;
    border: 1px solid #203d3b26;
    border-radius: 4px;
    box-shadow: 2px 2px 0 #1f5b5724;
}

.project-process-step:nth-of-type(2) .project-process-step-header h3 {
    background-color: #668fbd;
}

.project-process-step:nth-of-type(3) .project-process-step-header h3 {
    background-color: #c89a4e;
}

.project-process-step:nth-of-type(4) .project-process-step-header h3 {
    background-color: #70a083;
}

.project-process-step:nth-of-type(5) .project-process-step-header h3 {
    background-color: #c8776e;
}

.project-process-step-number {
    color: #68736f;
    font-family: "CustomFontBold", sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
}

.project-process-step > p {
    margin-bottom: 0;
}

.project-process-step-evidence {
    display: block;
    margin-top: 13px;
    color: #626c68;
    font-size: 12px;
    line-height: 1.55;
}

.project-process-step-evidence strong {
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
}

.project-callout--problem {
    color: #edf3ef;
    background-color: #123f3ded;
    border-color: #0d302f;
}

.project-callout--problem h3,
.project-callout--problem p {
    color: #ffffff;
}

.project-callout--subtle {
    background-color: #f8f4eb99;
    border-color: #1f5b5730;
    border-top: 4px solid #858b91;
}

.project-callout--conclusion {
    color: #f5f2e8;
    background-color: #194f4b;
    border-color: #123f3d;
    box-shadow: 0 4px 10px #10282833;
}

.project-callout--conclusion h3,
.project-callout--conclusion p {
    color: #f5f2e8;
}

.project-quote-block {
    margin-right: 0;
    margin-left: 0;
    padding: 26px 28px;
    color: #324743;
    background-color: #f7f2e8b8;
    border: 1px solid #1f5b5730;
    box-shadow: 0 3px 8px #1028281f;
}

.project-quote-block p {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 24px);
    font-style: italic;
    line-height: 1.55;
}

.project-quote-block cite {
    display: block;
    margin-top: 14px;
    color: #68736f;
    font-size: 13px;
    font-style: normal;
}

.project-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 1px;
    margin-bottom: 0;
    background-color: #1f5b5740;
    border: 1px solid #1f5b5740;
}

.project-stat {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px;
    background-color: #f3eee5dd;
}

.project-stat dd {
    order: -1;
    margin: 0;
    color: #194f4b;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1;
}

.project-stat dt {
    color: #5f6966;
    font-size: 13px;
    line-height: 1.4;
}

.project-timeline {
    display: grid;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

.project-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(95px, 0.25fr) minmax(0, 1fr);
    gap: 26px;
    padding: 0 0 28px 22px;
    border-left: 1px solid #1f5b575c;
}

.project-timeline-item:last-child {
    padding-bottom: 0;
}

.project-timeline-item::before {
    position: absolute;
    top: 5px;
    left: -5px;
    width: 9px;
    height: 9px;
    content: "";
    background-color: #858b91;
    border: 2px solid #f3eee5;
    border-radius: 50%;
}

.project-timeline-date,
.project-comparison-label {
    color: #68736f;
    font-family: "CustomFontBold", sans-serif;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.project-timeline-copy h3 {
    margin-bottom: 8px;
}

.project-timeline-copy p {
    margin: 0;
}

.project-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.project-comparison-side {
    padding: 24px;
    background-color: #f8f4eb8a;
    border: 1px solid #1f5b5730;
}

.project-comparison-side h3 {
    margin-top: 9px;
}

.project-comparison-side > :last-child {
    margin-bottom: 0;
}

.project-download-block {
    display: flex;
}

.project-divider {
    height: 0;
    margin: 38px 0;
    border: 0;
    border-top: 1px dashed #1f5b5766;
}

.project-spacer {
    width: 100%;
}

.project-spacer--small {
    height: 18px;
}

.project-spacer--medium {
    height: 38px;
}

.project-spacer--large {
    height: 68px;
}

.project-standalone-block {
    padding: clamp(34px, 5vw, 62px);
}

.project-standalone-block.project-image-block,
.project-standalone-block.project-video-block,
.project-standalone-block.project-youtube-block {
    width: 100%;
    transform: none;
}

@media (max-width: 800px) {
    .project-columns--2,
    .project-columns--3,
    .project-columns--2.project-columns--2-1,
    .project-columns--2.project-columns--1-2,
    .project-image-text,
    .project-comparison {
        grid-template-columns: 1fr;
    }

    .project-image-text--right .project-image-text-media {
        order: 0;
    }

    .project-gallery-block {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-position--offset-left,
    .project-position--offset-right {
        --project-offset: 0;
    }

    .project-image-block,
    .project-video-block,
    .project-youtube-block {
        --project-rotation: 0deg !important;
    }
}

@media (max-width: 520px) {
    .project-external-links,
    .project-links-block,
    .project-download-block {
        display: grid;
    }

    .project-action-link,
    .project-download-link,
    .project-plan-link {
        width: 100%;
    }

    .project-gallery-block {
        grid-template-columns: 1fr;
    }

    .project-timeline-item {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

/* Contact page */
.contact-page {
    position: relative;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background: #eae9e5;
}

.contact-page::before {
    content: none;
}

.contact-page header,
.contact-page main {
    position: relative;
    z-index: 1;
}

.contact-page header {
    z-index: 20;
}

.contact-page nav a {
    color: #333;
}

.contact-page nav a:hover {
    color: #777;
}

.contact-page main {
    display: grid;
    height: 100vh;
    min-height: 0;
    margin-top: 0;
    padding: 0;
    place-items: center;
}

.contact-notion-embed {
    position: relative;
    z-index: 1;
    width: min(700px, calc(100vw - 48px));
    height: calc(100vh - 230px);
    background-color: #f3eee5;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.contact-notion-embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: #ffffff;
}

@media (max-width: 600px) {
    .contact-page main {
        padding: 0;
    }

    .contact-notion-embed {
        width: min(100%, calc(100vw - 32px));
        height: calc(100vh - 200px);
        border-width: 3px;
    }
}

/* Home page: heading */
.blue {
    color: #215caa;
}

.hop span {
    display: inline-block;
    transition: transform 0.2s ease;
}

.hop span:has(+ span + span:hover),
.hop span:hover + span + span {
    transform: translateY(-3px);
}

.hop span:has(+ span:hover),
.hop span:hover + span {
    transform: translateY(-6px);
}

.hop span:hover {
    transform: translateY(-10px);
}

/* Home page: wave greeting and images */
.say-hi-wrap {
    position: absolute;
    right: 40px;
    bottom: 240px;
    z-index: 1;
    display: grid;
    justify-items: center;
    width: 180px;
    text-align: center;
}

.say-hi-prompt,
.say-hi-status {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}

.say-hi-prompt {
    width: 125px;
    margin-bottom: 8px;
    font-family: "CustomFont", sans-serif;
    font-weight: normal;
}

.say-hi-status {
    min-height: 1.2em;
    margin-top: 10px;
    font-weight: 400;
    font-style: italic;
    color: #215caa;
}

.say-hi {
    position: relative;
    width: 56px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.say-hi img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 70% 80%;
    filter: drop-shadow(2px 4px 3px #3335);
    transition: transform 180ms ease, filter 180ms ease;
    user-select: none;
}

.say-hi:hover img {
    transform: translateY(-3px) rotate(-4deg);
    filter: drop-shadow(3px 7px 4px #3335);
}

.say-hi:active img {
    transform: translateY(1px) rotate(2deg) scale(0.94);
}

.say-hi:disabled {
    cursor: not-allowed;
}

.say-hi:disabled:not(.clicked) img {
    opacity: 0.58;
}

.say-hi:focus-visible {
    outline: 3px solid #215caa;
    outline-offset: 5px;
    border-radius: 50%;
}

.say-hi.clicked {
    pointer-events: none;
}

.say-hi.clicked img {
    animation: send-wave 650ms cubic-bezier(0.22, 0.8, 0.3, 1);
}

.say-hi.clicked::after {
    content: "";
    position: absolute;
    inset: 8%;
    border: 3px solid #215caa;
    border-radius: 50%;
    animation: hi-ring 500ms ease-out forwards;
}

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

@keyframes send-wave {
    0% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.12) rotate(13deg); }
    50% { transform: scale(1.12) rotate(-11deg); }
    75% { transform: scale(1.08) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes hi-ring {
    from { opacity: 0.75; transform: scale(0.65); }
    to { opacity: 0; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
    .say-hi img { transition: none; }

    .say-hi.clicked img,
    .say-hi.clicked::after { animation-duration: 1ms; }
}

.home-visual {
    position: absolute;
    right: 40px;
    bottom: 40px;
    width: 550px;
}

.home-image {
    display: block;
    width: 100%;
}

.gap-year-sticker {
    position: absolute;
    right: calc(100% - 153px);
    bottom: calc(9% - 20px);
    z-index: 2;
    width: clamp(151px, 17.2vw, 244px);
    height: auto;
    filter: drop-shadow(0 10px 10px rgb(48 39 30 / 16%));
    transform: rotate(-9deg);
}

.thought-bubble {
    position: absolute;
    top: -270px;
    left: -275px;
    width: 530px;
    filter: drop-shadow(3px 4px 4px #3338);
}

.thought-bubble > img {
    display: block;
    width: 100%;
    height: auto;
}

.thought-bubble-status {
    position: absolute;
    top: calc(42% + 20px);
    left: calc(47% + 20px);
    width: 68%;
    margin: 0;
    color: rgb(48 39 30 / 80%);
    font-family: "CustomFont", sans-serif;
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: normal;
    font-style: italic;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    transform: translate(-50%, -50%) rotate(-1deg);
}

.thought-bubble-status--inactive {
    font-weight: normal;
    opacity: 0.42;
}

.post-it {
    position: absolute;
    width: 180px;
    box-shadow: 4px 4px 10px #777;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.post-it-1 {
    bottom: 90px;
    left: 60px;
}

.post-it-2 {
    bottom: 100px;
    left: 430px;
}

.post-it-3 {
    bottom: 50px;
    left: 200px;
}

.post-it:hover {
    transform: translateY(-5px);
    box-shadow: 7px 9px 14px #777;
}

.post-it:active {
    cursor: grabbing;
}

.post-it.is-dragging,
.post-it.is-dragging:hover {
    z-index: 25;
    cursor: grabbing;
    box-shadow: 7px 9px 14px #777;
    transform: var(--post-it-drag-transform, none);
    transition: none;
}

/* Responsive layout system */

html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    min-width: 0;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

video,
img {
    height: auto;
}

body > header nav,
.social-links {
    z-index: 50;
}

.home-page {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: clip;
}

@media (min-width: 901px) {
    .home-page {
        min-height: 0;
        height: calc(100vh - 16px);
        height: calc(100svh - 16px);
        margin: 8px;
        overflow: hidden;
    }
}

.home-page main h2 {
    width: min(500px, 100%);
}

@media (min-width: 901px) {
    .home-page main h2 {
        width: min(630px, 48vw);
    }
}

.website-story,
.about-corkboard,
.about-copy-columns,
.about-portrait-wrap,
.contact-notion-embed,
.project-hero,
.project-section,
.project-hero-image,
.project-youtube-frame {
    box-sizing: border-box;
}

.website-story {
    width: min(100%, 900px);
}

.projects-page {
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: clip;
}

.projects-content {
    width: min(1600px, calc(100% - clamp(40px, 10vw, 200px)));
}

.paper-panel {
    padding: clamp(24px, 3.2vw, 40px);
}

.post-card,
.project-section,
.project-hero,
.project-custom-html,
.about-table-card,
.website-story,
.board-note {
    overflow-wrap: anywhere;
}

.contact-page,
.contact-page main {
    height: 100vh;
    height: 100dvh;
    min-height: 100svh;
}

.contact-page {
    overflow: clip;
}

.contact-page::before {
    inset: 0;
    transform: scale(1.02);
}

.contact-page main {
    box-sizing: border-box;
    padding: 100px 24px 76px;
}

.contact-notion-embed {
    width: min(700px, 100%);
    height: 100%;
    max-height: 850px;
}

@media (max-width: 900px) {
    .home-page {
        margin: 0;
    }

    .home-page > header {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 20px;
        padding: calc(16px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 16px max(18px, env(safe-area-inset-left));
        background: rgb(234 233 229 / 92%);
        box-shadow: 0 5px 14px rgb(48 39 30 / 8%);
        backdrop-filter: blur(8px);
    }

    .home-page > header nav {
        position: static;
        display: flex;
        flex: 1 0 auto;
        align-items: center;
        justify-content: center;
        width: auto;
        white-space: nowrap;
    }

    .home-page .social-links {
        position: static;
        flex: 1 0 auto;
        justify-content: center;
        gap: 10px;
        white-space: nowrap;
    }

    .home-page .social-links a:not(.coffee-button) {
        display: grid;
        width: 44px;
        height: 44px;
        place-items: center;
    }

    .home-page .social-links .coffee-button {
        padding: 8px 12px;
    }

    .home-page main {
        display: grid;
        grid-template-areas:
            "title title"
            "intro intro"
            "visual visual"
            "wave wave";
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 26px 22px;
        min-height: 100svh;
        margin: 0;
        padding: 26px clamp(18px, 5vw, 42px) 54px;
    }

    .home-page main h1 {
        grid-area: title;
        margin: 0;
        font-size: clamp(48px, 10vw, 72px);
        line-height: 0.98;
        overflow-wrap: normal;
    }

    .home-page main h2 {
        grid-area: intro;
        justify-self: start;
        margin: 0;
        font-size: clamp(15px, 2.4vw, 17px);
    }

    .home-page .home-visual {
        position: relative;
        right: auto;
        bottom: auto;
        grid-area: visual;
        justify-self: center;
        box-sizing: border-box;
        width: min(100%, 540px);
        padding-top: clamp(170px, 35vw, 220px);
        margin-top: 4px;
    }

    .home-page .home-visual > a {
        display: block;
    }

    .home-page .gap-year-sticker {
        right: calc(100% - clamp(151px, calc(5vw + 135px), 169px));
        bottom: calc(12% - 20px);
        width: clamp(118px, 27.2vw, 187px);
    }

    .home-page .thought-bubble {
        top: 0;
        left: 50%;
        width: min(500px, 100%);
        transform: translateX(-50%);
    }

    .home-page .thought-bubble-status {
        top: calc(42% + clamp(12px, 2.5vw, 20px));
        font-size: clamp(12px, 2.2vw, 17px);
    }

    .home-page .say-hi-wrap {
        position: static;
        grid-area: wave;
        justify-self: center;
        width: min(100%, 240px);
    }

    .home-page .say-hi {
        min-width: 56px;
        min-height: 56px;
    }

    .home-page .post-it {
        position: relative;
        top: auto !important;
        right: auto;
        bottom: auto;
        left: auto !important;
        align-self: start;
        justify-self: center;
        width: min(180px, 100%);
        cursor: default;
        touch-action: auto;
    }

    .home-page .post-it-1 {
        grid-area: note-one;
        transform: rotate(-1.5deg);
    }

    .home-page .post-it-2 {
        grid-area: note-two;
        transform: rotate(1.2deg);
    }

    .home-page .post-it-3 {
        grid-area: note-three;
        transform: rotate(-0.8deg);
    }

    .home-page footer {
        position: relative;
        bottom: auto;
        left: auto;
        box-sizing: border-box;
        padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
    }

    .project-contents ol {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        overflow: visible;
    }

    .project-margin-notes {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 18px;
        width: 100%;
        margin-top: 28px;
        pointer-events: auto;
    }

    .project-margin-note,
    .project-margin-note + .project-margin-note {
        left: auto;
        width: min(205px, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    body > header nav {
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: auto;
        font-size: clamp(13px, 4vw, 16px);
        line-height: 1.1;
    }

    body > header nav a {
        display: grid;
        min-width: 0;
        min-height: 44px;
        padding: 7px 2px;
        text-align: center;
        place-items: center;
    }

    .about-page nav::before,
    .projects-page nav::before {
        height: calc(66px + env(safe-area-inset-top));
    }

    .contact-page header::before {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 40;
        height: calc(66px + env(safe-area-inset-top));
        content: "";
        background: #eae9e5;
        backdrop-filter: none;
    }

    .about-page main {
        padding: calc(96px + env(safe-area-inset-top)) 18px 64px;
    }

    .about-intro {
        gap: 38px;
        min-height: 0;
    }

    .about-ransom-title {
        min-height: 92px;
        padding: 0;
        margin-bottom: 0;
    }

    .about-ransom-title::before {
        top: -30px;
        width: calc(100vw + 16px);
        height: 155px;
        border-width: 9px;
        box-shadow: 0 -155px 0 155px #201714;
    }

    .about-ransom-title span {
        top: 3px;
        width: clamp(28px, 9.4vw, 52px);
    }

    .about-ransom-title .about-title-break {
        margin-left: clamp(8px, 2.4vw, 18px);
    }

    .about-portrait-wrap {
        width: min(260px, 100%);
        padding: 12px;
        transform: translateY(12px);
    }

    .about-copy-columns {
        width: 100%;
        margin-top: 0;
        padding: 24px 20px;
    }

    .about-copy-columns p,
    .website-story-copy > p {
        font-size: clamp(14px, 4vw, 16px);
    }

    .about-details {
        gap: 28px;
        margin-top: 68px;
    }

    .about-table-card {
        padding: 30px 22px;
    }

    .about-table-card h2 {
        font-size: clamp(23px, 7vw, 28px);
    }

    .about-table-card table {
        font-size: 13px;
    }

    .about-table-card th {
        width: 40%;
        padding-right: 10px;
    }

    .about-table-card th,
    .about-table-card td {
        overflow-wrap: anywhere;
    }

    .about-details + .about-tags {
        margin-top: 52px;
    }

    .website-story {
        margin-top: 84px;
        padding: 34px 24px;
    }

    .about-board-section {
        width: 100%;
        margin-top: 84px;
    }

    .about-corkboard {
        gap: 22px;
        width: 100%;
        padding: 30px 18px;
        border-width: 12px;
    }

    .board-note {
        min-height: 0;
        padding: 34px 22px 24px;
    }

    .projects-page main {
        padding-top: calc(108px + env(safe-area-inset-top));
    }

    .projects-heading {
        min-height: 90px;
    }

    .projects-heading > .ransom-title span {
        width: clamp(28px, 9.5vw, 58px);
    }

    .projects-content {
        margin-top: 64px;
    }

    .projects-columns {
        gap: 20px;
    }

    .projects-columns .paper-panel {
        min-height: 0;
    }

    .updates-tab,
    .working-tab {
        margin-bottom: 28px;
        padding: 10px 16px;
        font-size: clamp(19px, 6vw, 25px);
    }

    .posts-grid {
        gap: 18px;
    }

    .all-posts {
        min-height: 0;
        margin-top: 20px;
    }

    .project-post-page main {
        padding-top: calc(92px + env(safe-area-inset-top));
    }

    .project-back-link {
        min-height: 44px;
        margin-bottom: 16px;
        padding: 10px 4px;
    }

    .project-hero h1 {
        font-size: clamp(36px, 11vw, 52px);
        line-height: 1;
        overflow-wrap: anywhere;
    }

    .project-summary {
        margin-top: 22px;
        font-size: clamp(15px, 4.4vw, 18px);
    }

    .project-hero-image,
    .project-media-placeholder,
    .project-youtube-frame,
    .project-image-style--framed .project-block-image,
    .project-image-style--framed .project-media-placeholder,
    .project-image-style--framed .project-video,
    .project-gallery-item .project-block-image,
    .project-image-text-media .project-block-image,
    .project-comparison-image .project-block-image,
    .project-process-image .project-block-image {
        border-width: 6px;
    }

    .project-section h2 {
        font-size: clamp(28px, 9vw, 42px);
    }

    .project-standalone-block {
        padding: 30px 22px;
    }

    .project-pagination a {
        min-height: 88px;
        padding: 24px;
    }

    .contact-page main {
        padding: calc(82px + env(safe-area-inset-top)) 16px calc(72px + env(safe-area-inset-bottom));
    }

    .contact-notion-embed {
        width: 100%;
        height: 100%;
    }

    footer {
        padding-right: max(14px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
    }
}

@media (max-width: 520px) {
    .home-page main {
        grid-template-areas:
            "title"
            "intro"
            "visual"
            "wave";
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .home-page main h1 {
        font-size: clamp(46px, 15vw, 64px);
    }

    .home-page .post-it {
        width: min(180px, 72vw);
    }

    .about-tags {
        gap: 8px;
    }

    .about-tags span {
        padding: 7px 10px;
        font-size: 12px;
    }

    .update-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .update-item time {
        font-size: 14px;
    }

    .project-contents ol {
        grid-template-columns: 1fr;
    }

    .project-margin-notes {
        grid-template-columns: 1fr;
    }

    .project-facts div,
    .project-stat,
    .project-comparison-side,
    .project-process-step,
    .project-callout,
    .project-quote-block {
        padding: 20px;
    }
}

@media (hover: none), (pointer: coarse) {
    .social-links a:hover,
    .social-links .coffee-button:hover,
    a.post-card:hover,
    .project-action-link:hover,
    .project-download-link:hover,
    .project-plan-link:hover,
    .about-portrait:hover,
    .about-table-card:hover,
    .about-tags span:hover,
    .board-note:hover,
    .post-it:hover {
        box-shadow: revert-layer;
        transform: none;
    }

    .ransom-title span:hover img,
    .ransom-title span:has(+ span:hover) img,
    .ransom-title span:hover + span img,
    .ransom-title span:has(+ span + span:hover) img,
    .ransom-title span:hover + span + span img {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Portrait-phone refinements only: keep tablet and desktop compositions intact. */
@media (max-width: 520px) and (orientation: portrait) {
    .projects-heading > .hard-hat,
    .projects-heading > .rolled-paper,
    .projects-heading > .theodolite {
        display: none;
    }

    .home-page .social-links {
        gap: 6px;
    }

    .home-page .social-links .coffee-button {
        gap: 5px;
        padding: 7px 8px;
        font-size: 12px;
        transform: rotate(-0.6deg);
    }

    .home-page .social-links .coffee-button-icon {
        width: 17px;
        height: 17px;
    }

    .home-page main {
        grid-template-areas:
            "title title"
            "intro intro"
            "visual visual"
            "wave wave";
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 24px;
    }

    .home-page .post-it {
        width: min(180px, 58vw);
        max-width: none;
    }

    .home-page .post-it-1 {
        z-index: 1;
        justify-self: start;
        transform: translate(6px, 12px) rotate(-4deg);
    }

    .home-page .post-it-2 {
        z-index: 2;
        justify-self: end;
        transform: translate(-16px, -2px) rotate(3deg);
    }

    .home-page .post-it-3 {
        z-index: 3;
        justify-self: center;
        margin-top: -44px;
        transform: translate(12px, -4px) rotate(-1.5deg);
    }
}

/* About page: single-screen scrapbook layout */
.about-page {
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    color: #30271e;
    background: #eae9e5;
}

.about-page::before,
.about-page::after,
.about-page nav::before {
    display: none;
}

.about-page nav a {
    color: #333;
}

.about-page nav a:hover {
    color: #777;
}

.about-page main.about-layout {
    display: grid;
    grid-template-areas:
        "portrait copy board"
        "portrait story story";
    grid-template-columns: minmax(0, 40fr) minmax(260px, 35fr) minmax(210px, 25fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(28px, 4vw, 72px);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(105px, 12vh, 138px) clamp(30px, 5vw, 86px) 62px;
    overflow: hidden;
    box-sizing: border-box;
}

.about-portrait-panel {
    grid-area: portrait;
    display: grid;
    align-content: center;
    justify-items: start;
    min-width: 0;
}

.about-page .about-portrait {
    width: min(84%, 390px);
    height: min(63vh, 560px);
    margin: 0 0 0 clamp(-44px, -3vw, -20px);
    padding: 12px 12px 38px;
    background: #f3eee4;
    box-shadow: 8px 12px 24px rgb(48 39 30 / 22%), 1px 2px 3px rgb(48 39 30 / 20%);
    transform: rotate(-2deg);
    transition: none;
}

.about-page .about-portrait::before {
    top: -14px;
    width: 88px;
    height: 27px;
    background: rgb(201 154 104 / 60%);
}

.about-page .about-portrait img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    filter: sepia(0.08) contrast(1.02);
}

.about-page .about-portrait:hover {
    box-shadow: 8px 12px 24px rgb(48 39 30 / 22%), 1px 2px 3px rgb(48 39 30 / 20%);
    transform: rotate(-2deg);
}

.portrait-note {
    justify-self: start;
    margin: 16px 0 0 clamp(-28px, -2vw, -14px);
    color: #786a5d;
    font-family: "CustomFont", sans-serif;
    font-size: 13px;
    font-style: italic;
    transform: rotate(-1deg);
}

.about-content {
    grid-area: copy;
    min-width: 0;
    max-width: 820px;
}

.about-page .about-copy {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
    text-shadow: none;
}

.about-page .about-copy h1 {
    margin: 0 0 10px;
    color: #215caa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 2.5vw, 38px);
    font-style: italic;
    font-weight: normal;
    line-height: 1;
}

.about-page .about-copy p {
    max-width: 760px;
    margin: 0;
    color: #30271e;
    font-size: clamp(14px, 1.12vw, 17px);
    line-height: 1.45;
}

.about-page .about-copy p + p {
    margin-top: 8px;
    color: #5d5147;
}

.about-page .about-board-section {
    grid-area: board;
    width: 100%;
    min-height: 0;
    margin: 0;
}

.about-page .about-corkboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 20px);
    height: 100%;
    min-height: 0;
    padding: clamp(18px, 2.5vw, 30px);
    border: clamp(9px, 1.2vw, 15px) solid #6b4228;
    outline: 2px solid #49301f;
    background-image: linear-gradient(rgb(61 34 17 / 15%), rgb(61 34 17 / 15%)), url("assets/about-background.jpg");
    background-size: cover;
    box-shadow: inset 0 0 20px rgb(48 28 12 / 40%), 7px 10px 20px rgb(48 39 30 / 18%);
    box-sizing: border-box;
}

.about-page .board-note,
.about-page .board-note-yellow,
.about-page .board-note-cream,
.about-page .board-note-blue {
    grid-column: auto;
    grid-row: auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: clamp(25px, 3vw, 34px) clamp(12px, 1.8vw, 20px) 16px;
}

.about-page .board-note-yellow { transform: rotate(-2deg); }
.about-page .board-note-cream { transform: rotate(1deg) translateY(8px); }
.about-page .board-note-blue { transform: rotate(-1deg); }

.about-page .board-note h2 {
    margin: 0;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(16px, 1.55vw, 22px);
    line-height: 1.1;
}

.about-page .board-note p:last-child {
    margin-top: 9px;
    font-family: "CustomFont", sans-serif;
    font-size: clamp(12px, 0.94vw, 14px);
    line-height: 1.35;
}

.about-page .note-pin {
    top: 8px;
    width: 11px;
    height: 11px;
}

.about-page .website-story {
    grid-area: story;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(17px, 2vw, 25px) clamp(20px, 2.8vw, 34px);
    border: 1px solid #cbbda8;
    box-shadow: 6px 8px 16px rgb(48 39 30 / 15%);
    transform: rotate(-0.45deg);
    box-sizing: border-box;
}

.about-page .paper-tape {
    top: -11px;
    width: 80px;
    height: 22px;
}

.about-page .website-story h2 {
    margin: 0;
    color: #215caa;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(17px, 1.65vw, 23px);
}

.about-page .website-story-copy > p {
    margin: 7px 0 0;
    color: #44382c;
    font-size: clamp(12px, 0.98vw, 14px);
    line-height: 1.4;
}

.about-page footer {
    position: fixed;
    bottom: 14px;
    left: 0;
    z-index: 3;
    padding: 0;
    color: #a3938a;
}

@media (max-width: 900px) {
    .about-page {
        height: auto;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .about-page main.about-layout {
        grid-template-areas: none;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        min-height: 100svh;
        padding: 115px 22px 84px;
        overflow: visible;
    }

    .about-portrait-panel {
        grid-area: auto;
        align-content: start;
    }

    .about-page .about-portrait {
        width: min(76vw, 360px);
        height: min(86vw, 440px);
    }

    .about-content {
        grid-area: auto;
        max-width: none;
    }

    .about-page .about-corkboard {
        min-height: 250px;
    }

    .about-page .about-board-section,
    .about-page .website-story {
        grid-area: auto;
    }

    .about-page footer {
        position: relative;
        bottom: auto;
        padding-bottom: 20px;
    }
}

@media (max-width: 560px) {
    .about-page main.about-layout {
        gap: 32px;
        padding-right: 16px;
        padding-left: 16px;
    }

    .about-page .about-corkboard {
        grid-template-columns: 1fr;
        height: auto;
        gap: 18px;
        padding: 24px 18px;
    }

    .about-page .board-note-cream {
        transform: rotate(1deg);
    }
}

/* Projects pages: forest green with textured paper panels */
.projects-page:not(.all-projects-page):not(.project-post-page) {
    background-color: #1f5b57;
    color: #214a45;
}

/* About page: home-page-inspired notes layout */
.about-page.about-home-style {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: #333;
    background: #eae9e5;
}

.about-home-style::before,
.about-home-style::after,
.about-home-style nav::before {
    display: none;
}

.about-home-style > header {
    position: relative;
    z-index: 20;
}

.about-home-style > header nav a {
    color: #333;
}

.about-home-style > header nav a:hover {
    color: #777;
}

.about-home-style main.about-canvas {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(124px, 16vh, 176px) clamp(24px, 7vw, 116px) 28px;
    overflow: hidden;
    place-items: start center;
}

.about-centre-copy {
    z-index: 2;
    width: min(620px, 54vw);
    text-align: center;
}

.about-small-intro {
    margin: 0 0 11px;
    color: #777;
    font-size: clamp(13px, 1.1vw, 16px);
}

.about-centre-copy h1 {
    width: auto;
    margin: 0;
    color: #3d3d3d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 6.3vw, 94px);
    font-style: italic;
    font-weight: normal;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.about-centre-copy h1 span {
    color: #d5a51f;
}

.about-centre-copy > p:not(.about-small-intro) {
    margin: 19px 0 0;
    color: #383838;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: 1.45;
}

.about-centre-copy > p + p {
    margin-top: 8px;
}

.about-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 25px;
}

.about-links a {
    color: #484440;
    font-family: "CustomFontBold", sans-serif;
    font-size: 14px;
    text-underline-offset: 4px;
}

.about-links a:first-child {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: #fff8ed;
    text-decoration: none;
    background: #484440;
    box-shadow: 3px 4px 8px rgb(48 39 30 / 25%);
}

.about-links a:first-child:hover {
    color: #fff8ed;
    background: #393532;
    transform: translateY(-2px);
}

.about-post-it {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    width: clamp(176px, 16vw, 238px);
    min-height: clamp(152px, 16vw, 220px);
    padding: clamp(20px, 2vw, 28px);
    color: #292522;
    box-shadow: 6px 9px 16px rgb(48 39 30 / 28%);
}

.about-post-it h2 {
    width: auto;
    margin: 0 0 12px;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(19px, 1.6vw, 24px);
    line-height: 1;
}

.about-post-it p {
    margin: 0;
    font-size: clamp(12px, 0.95vw, 14px);
    line-height: 1.35;
}

.about-post-it--left {
    top: 39%;
    left: clamp(28px, 18vw, 50px);
    background: #f3dc76;
    transform: rotate(-4deg);
}

.about-post-it--bottom {
    bottom: clamp(26px, 8vh, 90px);
    left: clamp(25%, 31vw, 38%);
    background: #afd5eb;
    transform: rotate(2.5deg);
}

.about-post-it--right {
    top: 34%;
    right: clamp(28px, 8vw, 130px);
    background: #c6e6a6;
    transform: rotate(3deg);
}

@media (max-width: 900px) {
    .about-page.about-home-style {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .about-home-style main.about-canvas {
        height: 100%;
        min-height: 0;
        padding: 112px 24px 24px;
    }

    .about-centre-copy {
        width: min(610px, 66vw);
    }

    .about-post-it--left {
        left: 5vw;
    }

    .about-post-it--right {
        right: 5vw;
    }
}

@media (min-width: 701px) and (max-width: 1200px) {
    .about-post-it {
        width: clamp(150px, 17vw, 190px);
        min-height: 0;
        padding: 18px;
    }

    .about-post-it--left {
        top: 62%;
        left: 4vw;
    }

    .about-post-it--bottom {
        bottom: 3vh;
        left: calc(50% - 85px);
    }

    .about-post-it--right {
        top: 60%;
        right: 4vw;
    }
}

@media (min-width: 701px) and (max-height: 700px) and (orientation: landscape) {
    .about-home-style main.about-canvas {
        padding-top: 88px;
    }

    .about-centre-copy {
        width: min(500px, 56vw);
    }

    .about-small-intro {
        margin-bottom: 5px;
        font-size: 11px;
    }

    .about-centre-copy h1 {
        font-size: clamp(42px, 5vw, 56px);
    }

    .about-centre-copy > p:not(.about-small-intro) {
        margin-top: 9px;
        font-size: 12px;
        line-height: 1.32;
    }

    .about-centre-copy > p + p {
        margin-top: 4px;
    }

    .about-links {
        margin-top: 12px;
    }

    .about-links a {
        font-size: 11px;
    }

    .about-links a:first-child {
        padding: 7px 10px;
    }

    .about-post-it--left,
    .about-post-it--right {
        top: 72%;
    }

    .about-post-it--bottom {
        bottom: 1vh;
    }
}

@media (min-width: 701px) and (max-height: 480px) and (orientation: landscape) {
    .about-home-style main.about-canvas {
        padding-top: 66px;
    }

    .about-small-intro,
    .about-centre-copy > p + p {
        display: none;
    }

    .about-centre-copy h1 {
        font-size: 36px;
    }

    .about-centre-copy > p:not(.about-small-intro) {
        margin-top: 5px;
        font-size: 10px;
    }

    .about-links {
        margin-top: 7px;
    }

    .about-post-it {
        width: 130px;
        padding: 8px;
    }

    .about-post-it h2 {
        margin-bottom: 3px;
        font-size: 12px;
    }

    .about-post-it p {
        font-size: 8px;
    }

    .about-post-it--left,
    .about-post-it--right {
        top: 76%;
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    .about-home-style main.about-canvas {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: calc(70px + env(safe-area-inset-top)) 16px 14px;
    }

    .about-centre-copy {
        width: min(100%, 540px);
    }

    .about-small-intro {
        margin-bottom: 6px;
        font-size: 11px;
    }

    .about-centre-copy h1 {
        font-size: clamp(43px, 13vw, 68px);
    }

    .about-centre-copy > p:not(.about-small-intro) {
        margin-top: 11px;
        font-size: clamp(11px, 3.2vw, 15px);
        line-height: 1.35;
    }

    .about-centre-copy > p + p {
        margin-top: 6px;
    }

    .about-links {
        gap: 13px;
        margin-top: 13px;
    }

    .about-links a {
        font-size: 12px;
    }

    .about-links a:first-child {
        gap: 8px;
        padding: 8px 10px;
    }

    .about-post-it {
        position: absolute;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: min(29vw, 155px);
        min-height: 0;
        margin: 0;
        padding: 12px 9px;
        box-shadow: 4px 6px 10px rgb(48 39 30 / 24%);
    }

    .about-post-it h2 {
        margin-bottom: 5px;
        font-size: clamp(11px, 3.3vw, 17px);
    }

    .about-post-it p {
        font-size: clamp(8px, 2.2vw, 11px);
        line-height: 1.25;
    }

    .about-post-it--left {
        bottom: 17%;
        left: 4vw;
        transform: rotate(-5deg);
    }

    .about-post-it--bottom {
        bottom: 5%;
        left: calc(50% - min(14.5vw, 77px));
        transform: rotate(2deg);
    }

    .about-post-it--right {
        right: 4vw;
        bottom: 20%;
        transform: rotate(4deg);
    }
}

@media (max-width: 700px) and (max-height: 700px) and (orientation: portrait) {
    .about-home-style main.about-canvas {
        padding-top: calc(62px + env(safe-area-inset-top));
    }

    .about-small-intro,
    .about-centre-copy > p + p {
        display: none;
    }

    .about-centre-copy h1 {
        font-size: clamp(36px, 11vw, 54px);
    }

    .about-centre-copy > p:not(.about-small-intro) {
        margin-top: 6px;
        font-size: clamp(10px, 2.8vw, 12px);
    }

    .about-links {
        margin-top: 8px;
    }

    .about-post-it {
        width: min(27vw, 126px);
        padding: 8px 7px;
    }

    .about-post-it h2 {
        margin-bottom: 3px;
        font-size: clamp(10px, 3vw, 14px);
    }

    .about-post-it p {
        font-size: clamp(7px, 2vw, 9px);
    }
}

/* Square paper notes: three on the left, two on the right. */
.about-page.about-home-style {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.about-home-style main.about-canvas {
    --note-size: min(20vw, 25vh, 240px);
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: var(--note-size) minmax(0, 620px) var(--note-size);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    justify-content: center;
    align-items: center;
    gap: 12px clamp(32px, 4vw, 64px);
    padding: 72px clamp(32px, 4vw, 64px) 24px;
    overflow: hidden;
}

.about-home-style .about-centre-copy {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: start;
    width: 100%;
    margin-top: 110px;
}

.about-home-style .about-links { margin-top: 48px; }

.about-home-style .about-post-it {
    position: relative;
    inset: auto;
    width: var(--note-size);
    height: var(--note-size);
    min-height: 0;
    aspect-ratio: 1;
    padding: clamp(12px, 1.6vw, 24px);
    background-image: linear-gradient(180deg, rgb(0 0 0 / 7%) 0%, transparent 18%, transparent 85%, rgb(255 255 255 / 16%) 100%);
    box-shadow: 2px 4px 5px rgb(48 39 30 / 15%), 6px 9px 14px rgb(48 39 30 / 18%);
}

.about-home-style .about-post-it h2 { font-size: clamp(15px, 1.5vw, 22px); }
.about-home-style .about-post-it p { font-size: clamp(10px, 1vw, 14px); }
.about-home-style .about-post-it--left { grid-column: 1; grid-row: 1; transform: translateX(-12px) rotate(-7deg); }
.about-home-style .about-post-it--right { grid-column: 3; grid-row: 1; transform: translate(10px, 36px) rotate(6deg); }
.about-home-style .about-post-it--lower-left {
    grid-column: 1;
    grid-row: 2;
    background-color: #f1c6d3;
    transform: translateX(10px) rotate(4deg);
}
.about-home-style .about-post-it--lower-right {
    grid-column: 3;
    grid-row: 3;
    background-color: #eed5b4;
    transform: translate(0, -36px) rotate(-6deg);
}
.about-home-style .about-post-it--bottom { grid-column: 1; grid-row: 3; transform: translateX(-8px) rotate(-3deg); }

/* A loose arrangement with individually placed notes on larger screens. */
.about-home-style .about-post-it--left { background-color: #f5df91; }
.about-home-style .about-post-it--bottom { background-color: #bad8e5; }
.about-home-style .about-post-it--right { background-color: #c8d9b0; }
.about-home-style .about-post-it--lower-left { background-color: #d1c7e8; }
.about-home-style .about-post-it--lower-right { background-color: #d1c7e8; }
.about-home-style .about-post-it--middle-right {
    grid-column: 3;
    grid-row: 2;
    background-color: #bad8e5;
    transform: translateX(-14px) rotate(-4deg);
}

@media (min-width: 1001px) and (min-height: 601px) {
    .about-home-style main.about-canvas {
        --note-size: min(19vw, 29vh, 280px);
        display: block;
    }
    .about-home-style .about-centre-copy {
        width: min(40vw, 640px);
        margin: 110px auto 0;
    }
    .about-home-style .about-centre-copy h1 { font-size: clamp(46px, 5vw, 76px); }
    .about-home-style .about-post-it { position: absolute; }
    .about-home-style .about-post-it--left {
        top: 14%;
        left: 2.5%;
        transform: rotate(-8deg);
    }
    .about-home-style .about-post-it--lower-left {
        top: 44%;
        left: calc(9% + 70px);
        transform: rotate(5deg);
        width: calc(var(--note-size) - 60px);
        height: calc(var(--note-size) - 60px);
    }
    .about-home-style .about-post-it--bottom {
        bottom: 2.5%;
        left: 3.5%;
        transform: rotate(-4deg);
    }
    .about-home-style .about-post-it--right {
        top: 13%;
        right: 3%;
        transform: rotate(7deg);
    }
    .about-home-style .about-post-it--lower-right {
        z-index: 2;
        bottom: 2.5%;
        right: 3.5%;
        transform: rotate(-5deg);
    }
    .about-home-style .about-post-it--middle-right {
        top: 40%;
        right: 4%;
        transform: rotate(-4deg);
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    .about-home-style main.about-canvas {
        --note-size: min(30vw, 16vh);
        grid-template-columns: var(--note-size) minmax(0, 1fr) var(--note-size);
        grid-template-rows: auto repeat(3, minmax(0, 1fr));
        gap: 12px 16px;
        padding: calc(62px + env(safe-area-inset-top)) 20px 16px;
    }
    .about-home-style .about-centre-copy {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-top: 70px;
        margin-bottom: 8px;
    }
    .about-home-style .about-links { margin-top: 28px; }
    .about-home-style .about-post-it { padding: 10px; }
    .about-home-style .about-post-it--right { transform: translateY(18px) rotate(6deg); }
    .about-home-style .about-post-it--lower-right { transform: translateY(-18px) rotate(-6deg); }
    .about-home-style .about-post-it h2 { font-size: clamp(10px, 3vw, 15px); margin-bottom: 5px; }
    .about-home-style .about-post-it p { font-size: clamp(8px, 2.2vw, 11px); }
    .about-home-style .about-post-it--left { grid-row: 2; }
    .about-home-style .about-post-it--lower-left { grid-row: 3; }
    .about-home-style .about-post-it--bottom { grid-row: 4; }
    .about-home-style .about-post-it--right { grid-row: 2; }
    .about-home-style .about-post-it--lower-right { grid-row: 4; }
    .about-home-style .about-post-it--middle-right { grid-row: 3; }
}

@media (max-width: 700px) and (max-height: 700px) and (orientation: portrait) {
    .about-home-style main.about-canvas { --note-size: min(30vw, 14.5vh); }
}

@media (max-height: 500px) and (orientation: landscape) {
    .about-home-style main.about-canvas {
        --note-size: min(15vw, 23vh);
        padding: 60px 20px 12px;
        gap: 10px 28px;
    }
    .about-home-style .about-centre-copy { margin-top: 65px; }
    .about-home-style .about-post-it--right { transform: rotate(6deg); }
    .about-home-style .about-post-it--lower-right { transform: rotate(-6deg); }
    .about-home-style .about-centre-copy h1 { font-size: 34px; }
    .about-home-style .about-centre-copy > p:not(.about-small-intro) {
        font-size: 10px;
        line-height: 1.3;
        margin-top: 8px;
    }
    .about-home-style .about-links { margin-top: 22px; gap: 12px; }
    .about-home-style .about-links a { font-size: 10px; }
    .about-home-style .about-links a:first-child { padding: 6px 8px; }
    .about-home-style .about-post-it { padding: 7px; }
    .about-home-style .about-post-it h2 { font-size: 10px; margin-bottom: 4px; }
    .about-home-style .about-post-it p { font-size: 7px; line-height: 1.2; }
}

/* Use the supplied handwritten artwork at one consistent size. */
.about-home-style .about-post-it {
    width: var(--note-size);
    height: auto;
    aspect-ratio: 550 / 600;
    padding: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(4px 7px 6px rgb(48 39 30 / 20%));
}
.about-home-style .about-post-it img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.about-home-style .about-post-it--bottom { grid-column: 3; grid-row: 2; }
.about-home-style .about-post-it--middle-right { grid-column: 1; grid-row: 2; }
@media (max-width: 700px) and (orientation: portrait) {
    .about-home-style .about-post-it--bottom { grid-column: 3; grid-row: 3; }
    .about-home-style .about-post-it--middle-right { grid-column: 1; grid-row: 3; }
}
@media (min-width: 1001px) and (min-height: 601px) {
    .about-home-style main.about-canvas {
        --note-size: min(26vw, 38vh, 420px);
        padding-top: 90px;
    }
    .about-home-style .about-centre-copy {
        width: min(40vw, 640px);
        margin: 20px auto 0;
    }
    .about-home-style .about-centre-copy h1 { font-size: clamp(46px, 4.5vw, 68px); }
    .about-home-style .about-centre-copy > p:not(.about-small-intro) {
        font-size: clamp(13px, 1.2vw, 17px);
        line-height: 1.4;
        margin-top: 14px;
    }
    .about-home-style .about-post-it--left {
        left: 2%; top: 14%; transform: rotate(-5deg);
    }
    .about-home-style .about-post-it--bottom {
        left: auto; right: 25%; bottom: 1.5%; transform: rotate(2deg);
    }
    .about-home-style .about-post-it--right {
        right: 3%; top: 9%; transform: rotate(4deg);
    }
    .about-home-style .about-post-it--middle-right {
        left: 5%; right: auto; top: auto; bottom: 3%; transform: rotate(3deg);
    }
    .about-home-style .about-post-it--lower-right {
        right: 1%; bottom: 2%; transform: rotate(-3deg);
    }
}

@media (min-width: 1001px) and (min-height: 601px) and (max-height: 850px) {
    .about-home-style main.about-canvas { padding-top: 72px; }
    .about-home-style .about-centre-copy { margin-top: 0; }
    .about-home-style .about-centre-copy h1 { font-size: clamp(44px, 4vw, 58px); }
}

/* Temporary text-only About layout; retain the artwork for later. */
.about-notes-hidden .about-post-it {
    display: none;
}
.about-home-style.about-notes-hidden main.about-canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 24px;
}
.about-home-style.about-notes-hidden .about-centre-copy {
    width: min(100%, 600px);
    margin: 0;
    align-self: center;
}
.about-home-style.about-notes-hidden .about-centre-copy h1 {
    font-size: clamp(40px, 5vw, 68px);
    line-height: 1.05;
}
.about-home-style.about-notes-hidden .about-centre-copy > p:not(.about-small-intro) {
    display: block;
    margin-top: 20px;
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.5;
}
.about-home-style.about-notes-hidden .about-centre-copy > p + p {
    margin-top: 16px;
}
.about-home-style.about-notes-hidden .about-links {
    margin-top: 30px;
    gap: 20px;
}
.about-home-style.about-notes-hidden .about-links a { font-size: 14px; }
.about-home-style.about-notes-hidden .about-links a:first-child { padding: 10px 14px; }
@media (max-width: 700px) {
    .about-home-style.about-notes-hidden .about-centre-copy h1 { font-size: clamp(38px, 9vw, 52px); }
    .about-home-style.about-notes-hidden .about-centre-copy > p:not(.about-small-intro) {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.5;
    }
    .about-home-style.about-notes-hidden .about-links { margin-top: 24px; gap: 18px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .about-home-style.about-notes-hidden main.about-canvas { padding: 24px; }
    .about-home-style.about-notes-hidden .about-centre-copy { width: min(100%, 600px); }
    .about-home-style.about-notes-hidden .about-centre-copy h1 { font-size: 36px; }
    .about-home-style.about-notes-hidden .about-centre-copy > p:not(.about-small-intro) {
        font-size: 13px;
        line-height: 1.4;
        margin-top: 12px;
    }
    .about-home-style.about-notes-hidden .about-links { margin-top: 20px; }
}

/* Match the user's arranged reference, including its individual note sizes. */
@media (min-width: 901px) {
    .about-home-style.about-reference-layout main.about-canvas {
        display: block;
        position: relative;
        height: 100dvh;
        padding: 0;
        overflow: hidden;
    }
    .about-home-style.about-reference-layout .about-centre-copy {
        position: absolute;
        top: 22%;
        left: 50%;
        width: 40%;
        margin: 0;
        transform: translateX(-50%);
    }
    .about-home-style.about-reference-layout .about-centre-copy h1 {
        font-size: clamp(40px, 4.4vw, 84px);
        line-height: 1.05;
    }
    .about-home-style.about-reference-layout .about-centre-copy > p:not(.about-small-intro) {
        width: 80%;
        margin-inline: auto;
        font-size: clamp(12px, 1.1vw, 21px);
        line-height: 1.5;
        margin-top: 22px;
    }
    .about-home-style.about-reference-layout .about-centre-copy > p + p:not(.about-small-intro) { margin-top: 22px; }
    .about-home-style.about-reference-layout .about-links { margin-top: 32px; gap: 26px; }
    .about-home-style.about-reference-layout .about-links a { font-size: clamp(12px, .94vw, 18px); }
    .about-home-style.about-reference-layout .about-links a:first-child { padding: 12px 17px; }
    .about-home-style.about-reference-layout .about-post-it {
        position: absolute;
        inset: auto;
        height: auto;
        filter: none;
    }
    .about-home-style.about-reference-layout .about-post-it--left {
        left: 2.5%; top: 16%; width: 18%; transform: rotate(-2.5deg);
    }
    .about-home-style.about-reference-layout .about-post-it--bottom {
        left: 20%; top: 13%; width: 13%; transform: rotate(5.5deg);
        z-index: 3;
    }
    .about-home-style.about-reference-layout .about-post-it--lower-right {
        left: 6.2%; top: 57%; width: 17%; transform: rotate(-10deg);
    }
    .about-home-style.about-reference-layout .about-post-it--middle-right {
        right: 4.2%; top: 10%; width: 18.3%; transform: rotate(-3deg);
    }
    .about-home-style.about-reference-layout .about-post-it--right {
        left: calc(65.5% + 10px); top: 69%; width: 13%; transform: rotate(2deg);
        z-index: 3;
    }
    .about-home-style.about-reference-layout .about-post-it--interests-extra {
        right: 2.1%; top: 52.5%; width: 18.3%; transform: rotate(5deg);
        z-index: 3;
    }
}

@media (max-width: 900px) {
    .about-home-style.about-reference-layout .about-post-it--interests-extra {
        grid-column: 1;
        grid-row: 3;
        transform: rotate(-3deg);
    }
    .about-home-style.about-reference-layout .about-post-it--middle-right { grid-row: 1; grid-column: 3; }
    .about-home-style.about-reference-layout .about-post-it--right { grid-row: 2; grid-column: 1; }
}
@media (max-width: 700px) and (orientation: portrait) {
    .about-home-style.about-reference-layout .about-post-it--middle-right { grid-column: 1; grid-row: 4; }
    .about-home-style.about-reference-layout .about-post-it--right { grid-column: 1; grid-row: 3; }
    .about-home-style.about-reference-layout .about-post-it--interests-extra { grid-column: 3; grid-row: 4; }
}

.about-home-style.about-reference-layout .about-centre-copy > p:first-of-type {
    position: relative;
    top: 23px;
}
.about-home-style.about-reference-layout .about-post-it {
    filter: drop-shadow(3px 6px 5px rgb(48 39 30 / 22%))
            drop-shadow(7px 12px 12px rgb(48 39 30 / 12%));
}
.about-home-style.about-reference-layout .about-post-it--right {
    translate: 0 -15px;
    z-index: 4;
}
.about-home-style.about-reference-layout .about-post-it--middle-right {
    z-index: 3;
}
.about-home-style.about-reference-layout .about-post-it--interests-extra {
    z-index: 2;
}
.about-home-style.about-reference-layout .about-centre-copy > p:last-of-type {
    position: relative;
    top: 23px;
}
.about-home-style.about-reference-layout .about-links {
    position: relative;
    top: 30px;
}

/* About page: compact single-screen overview */
.about-page.about-overview-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: #173f3c;
    background:
        linear-gradient(90deg, rgb(31 91 87 / 5%) 1px, transparent 1px),
        linear-gradient(rgb(31 91 87 / 5%) 1px, transparent 1px),
        #f1efe9;
    background-size: 32px 32px;
}

.about-overview-page::before,
.about-overview-page::after,
.about-overview-page nav::before {
    display: none;
}

.about-overview-page > header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    height: 88px;
    background: linear-gradient(to bottom, #f1efe9 72%, rgb(241 239 233 / 0%));
}

.about-overview-page > header nav {
    z-index: 51;
}

.about-overview-page > header nav a {
    color: #333;
}

.about-overview-page > header nav a:hover {
    color: #1f5b57;
}

.about-overview-page main.about-overview {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(480px, 1.18fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: clamp(20px, 3vw, 50px);
    box-sizing: border-box;
    width: min(1500px, 100%);
    height: 100%;
    margin: 0 auto;
    padding: clamp(104px, 13vh, 138px) clamp(28px, 5vw, 82px) clamp(18px, 3vh, 32px);
    overflow: hidden;
}

.about-lead {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px, 2.8vw, 40px) 0;
}

.about-kicker {
    margin: 0 0 clamp(12px, 2vh, 22px);
    color: #4f765f;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.about-lead h1 {
    max-width: 720px;
    margin: 0;
    color: #173f3c;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(34px, 4.2vw, 67px);
    line-height: 0.98;
    letter-spacing: -0.035em;
}

.about-introduction {
    max-width: 620px;
    margin: clamp(17px, 2.6vh, 28px) 0 0;
    color: #4e5d59;
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.5;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: clamp(20px, 3vh, 32px);
}

.about-actions a {
    font-family: "CustomFontBold", sans-serif;
    font-size: 14px;
}

.about-primary-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
    color: #fffdf7;
    text-decoration: none;
    background: #1f5b57;
    border: 2px solid #173f3c;
    border-radius: 3px;
    box-shadow: 3px 3px 0 #8db4a3;
}

.about-primary-link:hover {
    color: #fffdf7;
    background: #173f3c;
    transform: translate(-1px, -1px);
}

.about-secondary-link {
    padding: 9px 2px;
    color: #1f5b57;
    text-underline-offset: 4px;
}

.about-information {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-width: 0;
    min-height: 0;
    border-top: 1px solid #8aa29b;
    border-left: 1px solid #8aa29b;
}

.about-info-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: clamp(12px, 1.5vw, 24px);
    min-width: 0;
    min-height: 0;
    padding: clamp(18px, 2.4vw, 34px);
    overflow: hidden;
    background: rgb(255 254 250 / 78%);
    border-right: 1px solid #8aa29b;
    border-bottom: 1px solid #8aa29b;
}

.about-info-card:nth-child(2),
.about-info-card:nth-child(3) {
    background: rgb(222 235 229 / 76%);
}

.about-card-number {
    margin: 3px 0 0;
    color: #759088;
    font-size: 11px;
    letter-spacing: 0.08em;
}

.about-info-card h2 {
    width: auto;
    margin: 0 0 clamp(9px, 1.4vh, 16px);
    color: #173f3c;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(18px, 1.8vw, 27px);
    line-height: 1.05;
}

.about-info-card p:not(.about-card-number) {
    margin: 0;
    color: #52625d;
    font-size: clamp(12px, 1vw, 15px);
    line-height: 1.45;
}

.about-chip-list,
.about-method-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.about-chip-list li {
    padding: 5px 7px;
    color: #244d49;
    font-size: clamp(10px, 0.8vw, 12px);
    line-height: 1;
    background: #fffefa;
    border: 1px solid #a9c6ba;
    border-radius: 2px;
}

.about-method-list {
    counter-reset: method;
}

.about-method-list li {
    counter-increment: method;
    padding: 5px 0;
    color: #52625d;
    font-size: clamp(11px, 0.92vw, 14px);
    border-bottom: 1px solid rgb(31 91 87 / 18%);
}

.about-method-list li::before {
    content: counter(method, decimal-leading-zero) "  ";
    color: #759088;
    font-size: 10px;
}

.about-site-note {
    grid-column: 1 / -1;
    margin: 0;
    color: #76817e;
    font-size: 11px;
    text-align: right;
}

@media (max-width: 900px) {
    .about-page.about-overview-page {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .about-overview-page main.about-overview {
        height: 100%;
        min-height: 0;
        padding: 100px 24px 22px;
        overflow: hidden;
    }
}

@media (max-width: 760px) and (orientation: portrait) {
    .about-overview-page > header {
        height: 66px;
    }

    .about-overview-page main.about-overview {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: clamp(12px, 2.2vh, 20px);
        padding: calc(68px + env(safe-area-inset-top)) clamp(14px, 4.5vw, 28px) 12px;
    }

    .about-lead {
        justify-content: flex-start;
        padding: 0;
    }

    .about-kicker {
        margin-bottom: 7px;
        font-size: 10px;
    }

    .about-lead h1 {
        max-width: 620px;
        font-size: clamp(25px, 7.5vw, 42px);
        line-height: 1;
    }

    .about-introduction {
        margin-top: 9px;
        font-size: clamp(11px, 3vw, 14px);
        line-height: 1.35;
    }

    .about-actions {
        gap: 8px 14px;
        margin-top: 11px;
    }

    .about-actions a {
        font-size: 12px;
    }

    .about-primary-link {
        gap: 12px;
        padding: 8px 11px;
        border-width: 1px;
        box-shadow: 2px 2px 0 #8db4a3;
    }

    .about-information {
        min-height: 0;
    }

    .about-info-card {
        gap: 7px;
        padding: clamp(9px, 2.8vw, 16px);
    }

    .about-card-number {
        margin-top: 2px;
        font-size: 8px;
    }

    .about-info-card h2 {
        margin-bottom: 5px;
        font-size: clamp(14px, 4.1vw, 20px);
    }

    .about-info-card p:not(.about-card-number) {
        font-size: clamp(9px, 2.65vw, 12px);
        line-height: 1.3;
    }

    .about-chip-list {
        gap: 3px;
    }

    .about-chip-list li {
        padding: 3px 4px;
        font-size: clamp(8px, 2.2vw, 10px);
    }

    .about-method-list li {
        padding: 2px 0;
        font-size: clamp(8px, 2.35vw, 11px);
    }

    .about-method-list li::before {
        font-size: 7px;
    }

    .about-site-note {
        font-size: 8px;
        text-align: center;
    }
}

@media (max-height: 680px) {
    .about-overview-page main.about-overview {
        padding-top: 80px;
        padding-bottom: 12px;
    }

    .about-lead {
        padding-top: 0;
        padding-bottom: 0;
    }

    .about-lead h1 {
        font-size: clamp(27px, 3.7vw, 50px);
    }

    .about-introduction {
        margin-top: 12px;
        line-height: 1.35;
    }

    .about-actions {
        margin-top: 14px;
    }

    .about-info-card {
        padding: clamp(12px, 1.8vw, 23px);
    }

    .about-info-card h2 {
        margin-bottom: 7px;
    }
}

@media (max-width: 760px) and (max-height: 680px) and (orientation: portrait) {
    .about-overview-page main.about-overview {
        gap: 9px;
        padding-top: calc(64px + env(safe-area-inset-top));
        padding-bottom: 7px;
    }

    .about-lead h1 {
        font-size: clamp(22px, 6.8vw, 34px);
    }

    .about-introduction {
        margin-top: 6px;
        font-size: clamp(9px, 2.7vw, 12px);
    }

    .about-actions {
        margin-top: 7px;
    }

    .about-info-card {
        padding: 7px;
    }

    .about-info-card h2 {
        margin-bottom: 3px;
    }

    .about-site-note {
        display: none;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .about-overview-page main.about-overview {
        grid-template-columns: minmax(250px, 0.75fr) minmax(440px, 1.25fr);
        gap: 16px;
        padding: 76px 18px 8px;
    }

    .about-kicker {
        margin-bottom: 6px;
        font-size: 9px;
    }

    .about-lead h1 {
        font-size: clamp(24px, 3.5vw, 34px);
    }

    .about-introduction {
        margin-top: 7px;
        font-size: 10px;
        line-height: 1.3;
    }

    .about-actions {
        margin-top: 8px;
    }

    .about-actions a {
        font-size: 10px;
    }

    .about-primary-link {
        gap: 8px;
        padding: 6px 8px;
        border-width: 1px;
        box-shadow: 2px 2px 0 #8db4a3;
    }

    .about-info-card {
        gap: 6px;
        padding: 7px;
    }

    .about-info-card h2 {
        margin-bottom: 3px;
        font-size: 14px;
    }

    .about-info-card p:not(.about-card-number) {
        font-size: 9px;
        line-height: 1.25;
    }

    .about-chip-list {
        gap: 2px;
    }

    .about-chip-list li {
        padding: 2px 3px;
        font-size: 8px;
    }

    .about-method-list li {
        padding: 1px 0;
        font-size: 8px;
    }

    .about-card-number,
    .about-method-list li::before {
        font-size: 7px;
    }

    .about-site-note {
        display: none;
    }
}

.projects-page:not(.all-projects-page):not(.project-post-page) .paper-panel {
    color: #214a45;
    background: #f7f5f0 url("assets/projects-paper.jpg") center / 100% 100% no-repeat;
    border: 1px solid #d6dce4;
    border-radius: 8px;
    box-shadow: none;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .post-card {
    background: #fffefa;
    border-radius: 6px;
    box-shadow: none;
}

.projects-page:not(.all-projects-page):not(.project-post-page) a.post-card:hover {
    border-color: #4f765f;
    box-shadow: inset 0 0 0 3px #4f765f;
    transform: none;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .post-thumbnail {
    box-sizing: border-box;
    border-radius: 3px;
    background: #deebe5;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-placeholder {
    color: #1f5b57;
    background: #deebe5;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card--placeholder {
    border-style: solid;
    border-color: #77a598;
    background: #fffefa;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card--placeholder .project-card-placeholder {
    min-height: 118px;
    background: #cbd2ce;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-placeholder-copy {
    display: grid;
    width: 72%;
    min-height: 52px;
    gap: 8px;
    margin: 2px 0 3px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-placeholder-line {
    display: block;
    width: 62%;
    height: 8px;
    background: #b3beb8;
    border-radius: 2px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-placeholder-line--title {
    width: 100%;
    height: 11px;
    background: #91a49a;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-placeholder-line:nth-child(3) {
    width: 48%;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-tag {
    color: #1f5b57;
    box-shadow: none;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-loading {
    color: #fff;
    font-weight: 600;
    background: #1f5b57;
    border-color: #77a598;
    border-radius: 4px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-empty {
    color: #566a62;
    background: #e7f0eb;
    border-color: #b8d2c6;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .all-projects-page-link {
    color: #1f5b57;
}

.projects-page:not(.all-projects-page):not(.project-post-page) footer {
    color: #cfddd7;
}

@media (min-width: 851px) {
    .projects-page:not(.all-projects-page):not(.project-post-page) main {
        padding-top: 108px;
    }

    .projects-page:not(.all-projects-page):not(.project-post-page) .projects-heading {
        margin-top: 0;
    }
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-title {
    color: #f8f4eb;
    text-decoration-color: #8db4a3;
    filter: drop-shadow(0 3px 2px rgb(4 15 34 / 38%));
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-heading {
    align-items: center;
    gap: clamp(20px, 3vw, 52px);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-heading-description {
    flex: 1 1 360px;
    max-width: none;
    margin: 0;
    color: #ffffff;
    font-size: clamp(14.2px, calc(1.3vw - 0.8px), 17.2px);
    line-height: 1.5;
    text-shadow: 0 4px 12px rgb(4 15 34 / 45%);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-heading-description a {
    color: #b8dec6;
    font-family: "CustomFontBold", sans-serif;
    filter: drop-shadow(0 2px 1px rgb(4 15 34 / 40%));
    text-decoration-color: #b8dec6;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .updates-tab,
.projects-page:not(.all-projects-page):not(.project-post-page) .working-tab,
.projects-page:not(.all-projects-page):not(.project-post-page) .recent-projects > h2,
.projects-page:not(.all-projects-page):not(.project-post-page) .featured-projects > h2,
.projects-page:not(.all-projects-page):not(.project-post-page) .all-posts > h2,
.projects-page:not(.all-projects-page):not(.project-post-page) .see-more-heading h2 {
    color: #1f5b57;
    text-decoration: none;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .update-item {
    border-bottom: 0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .update-item time {
    color: #5c5a5a;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .update-text {
    color: #405a52;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .post-card {
    border-color: rgb(31 91 87 / 28%);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-title {
    color: #1f5b57;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-description {
    color: #405a52;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-facts {
    color: #535353;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-tag {
    background-color: #deebe5;
    border-color: #b8d2c6;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-meta {
    color: #5d7068;
    border-top-color: rgb(31 91 87 / 20%);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-status {
    background-color: #1f5b57;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-status--in-progress {
    background-color: #4f765f;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-index,
.projects-page:not(.all-projects-page):not(.project-post-page) .project-build-note {
    background: #164743;
    border-color: #3f6c61;
    box-shadow: 0 8px 18px rgb(12 54 47 / 28%);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-index h2,
.projects-page:not(.all-projects-page):not(.project-post-page) .project-build-note h2 {
    color: #fffaf0;
    border-bottom: 0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-index dl {
    margin-top: 10px;
    margin-bottom: 14px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-index dt {
    flex: 0 0 42%;
    color: #cfe0d8;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-index dd {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #fffaf0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-index-link {
    color: #fffaf0;
    text-decoration-color: #c9ddd3;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .all-posts {
    border-left: 4px solid #4f765f;
}

/* Projects homepage: compact portfolio overview */
.projects-page:not(.all-projects-page):not(.project-post-page) .projects-content {
    margin-top: 0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-columns {
    grid-template-columns: minmax(0, 1.7fr) minmax(250px, 0.8fr);
    align-items: start;
    gap: clamp(16px, 2vw, 28px);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-columns > .paper-panel {
    min-height: 0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-left-column {
    display: grid;
    min-width: 0;
    gap: clamp(20px, 2.4vw, 32px);
    align-content: start;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-left-column > .paper-panel {
    min-height: 0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .projects-sidebar {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    min-width: 0;
    align-content: start;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .paper-panel {
    padding: clamp(22px, 2.6vw, 32px);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .updates-tab,
.projects-page:not(.all-projects-page):not(.project-post-page) .working-tab,
.projects-page:not(.all-projects-page):not(.project-post-page) .recent-projects > h2,
.projects-page:not(.all-projects-page):not(.project-post-page) .featured-projects > h2,
.projects-page:not(.all-projects-page):not(.project-post-page) .all-posts > h2,
.projects-page:not(.all-projects-page):not(.project-post-page) .see-more-heading h2 {
    font-size: clamp(20px, 1.65vw, 24px);
    text-underline-offset: 4px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .updates-tab,
.projects-page:not(.all-projects-page):not(.project-post-page) .working-tab {
    margin-bottom: 12px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .updates-list {
    gap: 0;
    margin-bottom: 28px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .update-item {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .update-item time {
    font-size: 14px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .update-text {
    font-size: 14px;
    line-height: 1.38;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .working-projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 28px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .post-card {
    padding: 12px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card {
    min-height: 430px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .post-thumbnail {
    aspect-ratio: 4 / 3;
    margin-bottom: 10px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-title {
    margin-bottom: 6px;
    font-size: 17px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-description {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.38;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-facts {
    margin: -2px 0 10px;
    color: #637085;
    font-size: 11px;
    line-height: 1.35;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-tags {
    gap: 5px;
    margin: -2px 0 10px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-tag {
    padding: 3px 5px;
    font-size: 10px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .project-card-meta {
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .featured-projects {
    min-height: 0;
    text-align: left;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .featured-projects .posts-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.project-index,
.project-build-note {
    box-sizing: border-box;
    min-width: 0;
    padding: clamp(20px, 2.4vw, 28px);
    color: #eaf1fc;
    background: #164743;
    border: 1px solid #3f6c61;
    box-shadow: 0 7px 14px rgb(12 54 47 / 28%);
}

.project-index-kicker {
    margin: 0 0 5px;
    color: #c9ddd3;
    font-size: 12px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.project-index h2 {
    margin: 0;
    color: #fffaf0;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: normal;
}

.project-build-note h2 {
    margin: 0 0 16px;
    color: #fffaf0;
    font-family: "CustomFontBold", sans-serif;
    font-size: clamp(22px, 2vw, 28px);
    font-weight: normal;
}

.project-build-note p {
    margin: 0;
    color: #e6f0e9;
    font-size: 14px;
    line-height: 1.55;
}

.project-build-note p + p {
    margin-top: 16px;
}

.project-index-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.project-index dl {
    display: grid;
    gap: 0;
    margin: 17px 0;
}

.project-index dl > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid rgb(224 239 231 / 22%);
}

.project-index dt {
    color: #cfe0d8;
    font-size: 13px;
}

.project-index dd {
    margin: 0;
    color: #fffaf0;
    font-family: "CustomFontBold", sans-serif;
    font-size: 15px;
    text-align: right;
}

.project-index-link {
    color: #fffaf0;
    font-family: "CustomFontBold", sans-serif;
    font-size: 14px;
    white-space: nowrap;
    text-underline-offset: 4px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .all-posts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-height: 0;
    margin-top: 20px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .see-more-projects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.projects-page:not(.all-projects-page):not(.project-post-page) .see-more-projects-panel {
    margin-top: clamp(28px, 3vw, 44px);
}

.projects-page:not(.all-projects-page):not(.project-post-page) .see-more-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .see-more-projects-panel .all-projects-page-link {
    display: inline-flex;
    margin: 0;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .all-posts-summary {
    flex: 1 1 260px;
    margin: 0;
    color: #566a62;
    font-size: 14px;
    line-height: 1.4;
}

.projects-page:not(.all-projects-page):not(.project-post-page) .all-projects-page-link {
    min-height: 0;
    margin-left: 14px;
    font-size: 15px;
}

@media (max-width: 850px) {
    .projects-page:not(.all-projects-page):not(.project-post-page) .projects-columns {
        grid-template-columns: 1fr;
    }

    .projects-page:not(.all-projects-page):not(.project-post-page) .projects-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .projects-page:not(.all-projects-page):not(.project-post-page) .projects-heading-description {
        flex: 0 1 auto;
    }

    .projects-page:not(.all-projects-page):not(.project-post-page) .working-projects,
    .projects-page:not(.all-projects-page):not(.project-post-page) .see-more-projects {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .projects-page:not(.all-projects-page):not(.project-post-page) .posts-grid,
    .projects-page:not(.all-projects-page):not(.project-post-page) .working-projects,
    .projects-page:not(.all-projects-page):not(.project-post-page) .see-more-projects {
        grid-template-columns: 1fr;
    }

    .projects-page:not(.all-projects-page):not(.project-post-page) .update-item {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .projects-page:not(.all-projects-page):not(.project-post-page) .all-posts {
        align-items: flex-start;
        flex-direction: column;
    }

    .projects-page:not(.all-projects-page):not(.project-post-page) .all-projects-page-link {
        margin-left: 0;
    }
}