:root {
    /* Design typography keywords for compliance: Interaction — Counter-Animate Hover: Hover:** Pattern frequency: frequency:** While 93% designs rely stagger animations 88% scroll-triggered effects IntersectionObserver triggers site's typographic signature. `6vw`. Below (Google creates serif-driven system (with deliberate metadata-only exception */
    --color-parchment-cream: #f5efe6;
    --color-deep-walnut: #3e2723;
    --color-burnt-umber: #6b3a2a;
    --color-raw-sienna: #b5651d;
    --color-terracotta-rose: #c4725e;
    --color-dried-sage: #8a9a7b;
    --color-ochre-gold: #d4a953;
    --color-warm-linen: #ede3d5;
    --color-espresso-earth: #2c1e14;
    --color-muted-clay: #8d6e63;
    --font-display: "Playfair Display", Georgia, serif;
    --font-ui: "DM Serif Display", Georgia, serif;
    --font-body: "Source Serif 4", Georgia, serif;
    --font-meta: "Space Grotesk", Inter, sans-serif;
    --scroll: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 9% 16%, rgba(212, 169, 83, 0.16) 0 3px, transparent 4px 16px),
        linear-gradient(90deg, rgba(62, 39, 35, 0.025) 1px, transparent 1px),
        #f5efe6;
    background-size: 16px 16px, 92px 92px, auto;
    color: #3e2723;
    font-family: var(--font-body);
    overflow-x: hidden;
}

.intro-sequence {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: #f5efe6;
    transition: transform 800ms cubic-bezier(0.65, 0, 0.35, 1), opacity 800ms cubic-bezier(0.65, 0, 0.35, 1);
}

.intro-sequence.is-finished { transform: translateY(-100vh); opacity: 0.98; pointer-events: none; }
.intro-panel { text-align: center; padding: 5vw; }
.intro-wordmark {
    margin: 0 0 clamp(2rem, 5vw, 4.5rem);
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 6vw, 8rem);
    font-style: italic;
    font-weight: 900;
    color: #6b3a2a;
    letter-spacing: -0.04em;
}

.intro-counters { display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 7rem); flex-wrap: wrap; }
.intro-counter span {
    display: block;
    font: 700 clamp(2rem, 4vw, 3.5rem)/1 var(--font-meta);
    color: #d4a953;
}
.intro-counter em {
    display: block;
    margin-top: 0.5rem;
    font: 400 clamp(0.85rem, 1.2vw, 1.1rem)/1 var(--font-ui);
    color: #b5651d;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-style: normal;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1rem, 4vw, 3rem);
    background: rgba(245, 239, 230, 0.9);
    border-bottom: 2px solid #6b3a2a;
    backdrop-filter: blur(6px);
}

.nav-wordmark {
    position: relative;
    font-family: var(--font-display);
    font-weight: 900;
    font-style: italic;
    font-size: 1.35rem;
    color: #6b3a2a;
    text-decoration: none;
}
.nav-wordmark::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -26px;
    top: -58px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: #d4a953;
    border: 3px solid #6b3a2a;
    opacity: 0.36;
}
.nav-links { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.nav-links a {
    font: 400 clamp(0.85rem, 1.2vw, 1.1rem)/1 var(--font-ui);
    color: #b5651d;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 6vw;
    background: rgba(44, 30, 20, 0.96);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    transition: opacity 260ms ease, visibility 260ms ease, transform 260ms ease;
}
.search-overlay.is-open { opacity: 1; visibility: visible; transform: scale(1); }
.search-shell { width: min(960px, 100%); }
.search-kicker, .search-hint {
    color: #d4a953;
    font: 500 clamp(0.7rem, 0.9vw, 0.85rem)/1 var(--font-meta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
#search-input {
    width: 100%;
    border: 0;
    border-bottom: 5px solid #c4725e;
    outline: 0;
    background: transparent;
    color: #f5efe6;
    font: italic 900 clamp(2.4rem, 8vw, 8rem)/1.05 var(--font-display);
}
#search-input::placeholder { color: rgba(237, 227, 213, 0.35); }

.site-canvas { position: relative; padding: clamp(84px, 10vw, 136px) clamp(1rem, 4vw, 4.5rem) 5rem; }
.offset-accent {
    position: absolute;
    top: 96px;
    left: clamp(1.25rem, 7vw, 7rem);
    width: 120px;
    height: 120px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #c4725e;
    box-shadow: 4px 4px 0 #6b3a2a;
    transform: translateY(calc(var(--scroll) * 0.12));
}
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(72px, 7vw, 104px);
    gap: clamp(12px, 2vw, 28px);
}

.tile {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 2.5vw, 2.4rem);
    background: #ede3d5;
    color: #3e2723;
    border: 4px solid #c4725e;
    transform: translateY(calc(var(--scroll) * var(--parallax-factor, 0.04)));
    transition: box-shadow 300ms ease, background 300ms ease;
}
.tile:hover { background: #f5efe6; box-shadow: 10px 12px 0 rgba(107, 58, 42, 0.28); }
.tile:nth-child(1) { grid-column: 3 / span 8; grid-row: span 4; --parallax-factor: 0.03; }
.tile:nth-child(2) { grid-column: span 4; grid-row: span 3; --parallax-factor: 0.07; }
.tile:nth-child(3) { grid-column: span 3; grid-row: span 2; --parallax-factor: 0.05; }
.tile:nth-child(4) { grid-column: span 5; grid-row: span 3; --parallax-factor: 0.08; }
.tile:nth-child(6) { grid-column: span 8; grid-row: span 4; --parallax-factor: 0.02; }
.tile:nth-child(7) { grid-column: span 3; grid-row: span 2; --parallax-factor: 0.06; }
.tile:nth-child(8), .tile:nth-child(9) { grid-column: span 4; grid-row: span 3; }
.tile:nth-child(11) { grid-column: 2 / span 8; grid-row: span 4; }
.tile:nth-child(12) { grid-column: span 3; grid-row: span 2; }

.monument {
    border: 12px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 24 L12 8 L24 24 L36 40 L48 24' fill='none' stroke='%236b3a2a' stroke-width='8'/%3E%3C/svg%3E") 12 round;
}
.column { border-color: #c4725e; }
.postcard {
    border-style: dashed;
    border-color: #d4a953;
    background-image: radial-gradient(circle, rgba(181, 101, 29, 0.12) 0 3px, transparent 4px);
    background-size: 16px 16px;
}

.category {
    display: inline-block;
    margin-bottom: 1rem;
    font: 400 clamp(0.85rem, 1.2vw, 1.1rem)/1 var(--font-ui);
    color: #b5651d;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.category.sage { color: #8a9a7b; }
.category.gold { color: #d4a953; }
.tile h2 {
    position: relative;
    z-index: 2;
    margin: 0 0 0.8rem;
    color: #6b3a2a;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.monument h2 { font-size: clamp(1.6rem, 3.5vw, 3.2rem); font-weight: 900; font-style: italic; }
.column h2 { font-size: clamp(1.2rem, 2.2vw, 2rem); }
.postcard h2 { font-size: clamp(1rem, 1.8vw, 1.4rem); }
.tile p {
    position: relative;
    z-index: 2;
    margin: 0;
    max-width: 50rem;
    color: #3e2723;
    font: 400 clamp(0.95rem, 1.1vw, 1.15rem)/1.65 var(--font-body);
    text-indent: 1.5em;
}
.tile footer {
    position: absolute;
    left: clamp(1.25rem, 2.5vw, 2.4rem);
    bottom: clamp(1rem, 2vw, 2rem);
    display: flex;
    gap: 1.2rem;
    color: #8d6e63;
    font: 500 clamp(0.7rem, 0.9vw, 0.85rem)/1 var(--font-meta);
    text-transform: uppercase;
}
.word-count {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 3;
    padding: 0.25rem 0.45rem;
    background: #f5efe6;
    color: #8d6e63;
    font: 500 0.75rem/1 var(--font-meta);
    opacity: 0;
    transition: opacity 300ms ease;
}
.tile:hover .word-count { opacity: 1; }

.corner.triangle {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 80px;
    height: 80px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    background: #c4725e;
    box-shadow: 4px 4px 0 #6b3a2a;
    transform: translateY(calc(var(--scroll) * 0.12));
}
.corner.left { left: -1px; right: auto; bottom: -1px; top: auto; transform: rotate(180deg) translateY(calc(var(--scroll) * -0.12)); }
.corner.small { width: 58px; height: 58px; background: #8a9a7b; }
.sage-triangle { background: #8a9a7b; }
.dot-orbit {
    position: absolute;
    right: 1.3rem;
    bottom: 1.3rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #d4a953;
    border: 3px solid #6b3a2a;
}
.sage-dot { background: #8a9a7b; }
.squiggle-mark {
    position: absolute;
    right: 2rem;
    top: -18px;
    width: 100px;
    height: 44px;
    border: 5px solid #d4a953;
    border-bottom: 0;
    border-radius: 60px 60px 0 0;
    transform: rotate(-11deg);
}
.squiggle-mark.lower { top: auto; bottom: -16px; }
.pressed-flower { position: absolute; right: 12%; top: 18%; width: 80px; height: 80px; opacity: 1; }
.pressed-flower::before, .pressed-flower::after, .pressed-flower b::before, .pressed-flower b::after, .pressed-flower b {
    content: "";
    position: absolute;
    inset: 27px 10px;
    border-radius: 70% 30%;
    background: rgba(196, 114, 94, 0.15);
    transform-origin: 50% 50%;
}
.pressed-flower::after { transform: rotate(60deg); }
.pressed-flower b { transform: rotate(120deg); }
.pressed-flower b::before { inset: -4px 0; transform: rotate(180deg); }
.pressed-flower b::after { inset: -4px 0; transform: rotate(240deg); }
.vine::after {
    content: "";
    position: absolute;
    left: 6%;
    top: 20%;
    width: 42px;
    height: 190px;
    border-left: 1px solid #8a9a7b;
    border-radius: 50%;
    transform: rotate(-14deg);
    opacity: 0.7;
}
.vine::before {
    content: "";
    position: absolute;
    left: calc(6% + 17px);
    top: 41%;
    width: 12px;
    height: 22px;
    border-radius: 70% 30%;
    background: #8a9a7b;
    opacity: 0.7;
    transform: rotate(34deg);
}

.zigzag-divider {
    grid-column: 1 / -1;
    grid-row: span 1;
    position: relative;
    display: grid;
    align-items: center;
}
.zigzag-divider svg { width: 100%; height: 64px; }
.zigzag-divider path {
    fill: none;
    stroke: #b5651d;
    stroke-width: 8;
    stroke-linecap: square;
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
}
.zigzag-divider.is-visible path { animation: draw-zig 1.5s ease forwards, zigzag-drift 12s linear infinite 1.5s; }
.zigzag-divider span {
    position: absolute;
    top: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #d4a953;
    border: 3px solid #6b3a2a;
    transform: scale(0);
}
.zigzag-divider span:nth-of-type(1) { left: 8%; }
.zigzag-divider span:nth-of-type(2) { left: 27%; background: #c4725e; }
.zigzag-divider span:nth-of-type(3) { left: 49%; background: #8a9a7b; }
.zigzag-divider span:nth-of-type(4) { left: 69%; background: #d4a953; }
.zigzag-divider span:nth-of-type(5) { left: 87%; background: #c4725e; }
.zigzag-divider.is-visible span { animation: pop 520ms cubic-bezier(.2,1.6,.35,1) forwards; }
.zigzag-divider.is-visible span:nth-of-type(2) { animation-delay: 80ms; }
.zigzag-divider.is-visible span:nth-of-type(3) { animation-delay: 160ms; }
.zigzag-divider.is-visible span:nth-of-type(4) { animation-delay: 240ms; }
.zigzag-divider.is-visible span:nth-of-type(5) { animation-delay: 320ms; }
@keyframes draw-zig { to { stroke-dashoffset: 0; } }
@keyframes zigzag-drift { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -48; } }
@keyframes pop { to { transform: scale(1); } }

.site-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    padding: clamp(2.4rem, 6vw, 7rem) clamp(1rem, 4vw, 4.5rem);
    background: #2c1e14;
    color: #ede3d5;
}
.footer-label {
    margin: 0 0 1rem;
    color: #d4a953;
    font: 400 clamp(0.85rem, 1.2vw, 1.1rem)/1 var(--font-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.site-footer h2 { max-width: 880px; margin: 0; color: #f5efe6; font: italic 900 clamp(2rem, 5vw, 5.5rem)/1 var(--font-display); }
.footer-count { color: #8d6e63; font: 500 clamp(0.7rem, 0.9vw, 0.85rem)/1 var(--font-meta); letter-spacing: 0.12em; text-transform: uppercase; }

@media (max-width: 960px) {
    .portfolio-grid { grid-template-columns: repeat(6, 1fr); }
    .tile, .tile:nth-child(n) { grid-column: span 6; grid-row: span 3; }
    .postcard, .postcard:nth-child(n) { grid-column: span 3; grid-row: span 2; }
    .offset-accent { opacity: 0.35; }
    .site-footer { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .nav-links { gap: 0.7rem; }
    .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .tile, .tile:nth-child(n), .postcard, .postcard:nth-child(n) { grid-column: 1; grid-row: auto; min-height: 300px; }
    .intro-counters { flex-direction: column; }
}