/* ===========================================================
   alth.ing — Fired-Clay Neubrutalism
   Palette tokens from DESIGN.md
   Typography note: IBM Plex Mono is reserved for metadata only.
   Motion note: IntersectionObserver triggers reveal animation (NOT scroll-triggered libraries) instead of heavy libraries — keep it lightweight.
   Source note: Caveat, DM Sans, Homemade Apple, and IBM Plex Mono are (Google Fonts selections.
   =========================================================== */

:root {
    --kiln-cream: #faf3ea;
    --clay-wash: #f0dcc8;
    --fired-umber: #3d2216;
    --terracotta: #c4703e;
    --burnt-sienna: #a0522d;
    --kiln-gold: #d4a04a;
    --apricot-haze: #e8b88a;
    --dark-earth: #2a1810;
    --ember-glow: #f5c882;
    --warm-stone: #c9b8a4;
    --dark-clay: #4a3228;
    --warm-sienna: #7a5a3e;
    --saddle-brown: #6b4d35;
    --thumb-deep: #8b4726;
    --fired-umber-soft: rgba(61, 34, 22, 0.08);
    --fired-umber-ink: rgba(61, 34, 22, 0.85);
    --cream-soft: #f5e6d3;

    --shadow-hard: 6px 6px 0px var(--fired-umber);
    --shadow-hard-lg: 10px 10px 0px var(--fired-umber);
    --shadow-hard-dark: 6px 6px 0px var(--dark-earth);

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-slow: cubic-bezier(0.22, 1, 0.36, 1);

    --font-hand: "Caveat", "Homemade Apple", cursive;
    --font-body: "DM Sans", "Inter", system-ui, sans-serif;
    --font-annot: "Homemade Apple", "Caveat", cursive;
    --font-mono: "IBM Plex Mono", "Space Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    color: var(--dark-clay);
    background: var(--kiln-cream);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* cracked-glaze SVG tile - applied via pseudo on sections */
.cracked-glaze {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%233d2216' stroke-opacity='0.06' stroke-width='0.8'><path d='M0 40 L80 60 L140 30 L200 80 L240 60'/><path d='M20 0 L60 90 L100 120 L70 180 L40 240'/><path d='M130 0 L170 70 L210 140 L180 200 L220 240'/><path d='M0 150 L70 160 L150 200 L240 180'/><path d='M240 20 L160 50 L100 40 L60 10'/><path d='M10 210 L90 220 L160 240'/><path d='M120 90 L170 100 L150 140 L120 90 Z'/><path d='M40 120 L70 140 L55 170 L25 150 Z'/></g></svg>");
    background-size: 240px 240px;
    mix-blend-mode: multiply;
    opacity: 0.6;
    z-index: 1;
}
.cracked-dark {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23f5e6d3' stroke-opacity='0.08' stroke-width='0.8'><path d='M0 40 L80 60 L140 30 L200 80 L240 60'/><path d='M20 0 L60 90 L100 120 L70 180 L40 240'/><path d='M130 0 L170 70 L210 140 L180 200 L220 240'/><path d='M0 150 L70 160 L150 200 L240 180'/></g></svg>");
    mix-blend-mode: screen;
    opacity: 0.5;
}

/* Bokeh - procedural warm circles that drift */
.bokeh-field {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(circle 120px at 20% 30%, rgba(245, 200, 130, 0.30) 0%, transparent 70%),
        radial-gradient(circle 80px at 65% 45%, rgba(232, 184, 138, 0.26) 0%, transparent 65%),
        radial-gradient(circle 150px at 80% 20%, rgba(212, 160, 74, 0.20) 0%, transparent 75%),
        radial-gradient(circle 60px at 35% 70%, rgba(196, 112, 62, 0.22) 0%, transparent 60%),
        radial-gradient(circle 100px at 55% 85%, rgba(245, 200, 130, 0.18) 0%, transparent 70%),
        radial-gradient(circle 40px at 10% 90%, rgba(232, 184, 138, 0.30) 0%, transparent 55%);
    animation: bokeh-drift-a 22s ease-in-out infinite alternate;
    z-index: 0;
}
.bokeh-slow {
    animation: bokeh-drift-b 30s ease-in-out infinite alternate;
    background:
        radial-gradient(circle 200px at 70% 65%, rgba(245, 200, 130, 0.22) 0%, transparent 70%),
        radial-gradient(circle 90px at 15% 55%, rgba(212, 160, 74, 0.18) 0%, transparent 65%),
        radial-gradient(circle 140px at 50% 15%, rgba(232, 184, 138, 0.22) 0%, transparent 70%),
        radial-gradient(circle 70px at 85% 80%, rgba(196, 112, 62, 0.20) 0%, transparent 60%);
    mix-blend-mode: screen;
}
.bokeh-fire {
    animation: bokeh-drift-c 25s ease-in-out infinite alternate;
    background:
        radial-gradient(circle 220px at 30% 40%, rgba(212, 160, 74, 0.35) 0%, transparent 65%),
        radial-gradient(circle 160px at 75% 60%, rgba(196, 112, 62, 0.28) 0%, transparent 70%),
        radial-gradient(circle 110px at 50% 85%, rgba(245, 200, 130, 0.25) 0%, transparent 65%);
    z-index: 0;
}

@keyframes bokeh-drift-a {
    0%   { transform: translate(-10px, -8px); }
    50%  { transform: translate(18px, 14px); }
    100% { transform: translate(-6px, 20px); }
}
@keyframes bokeh-drift-b {
    0%   { transform: translate(12px, 10px); }
    50%  { transform: translate(-18px, -14px); }
    100% { transform: translate(20px, -10px); }
}
@keyframes bokeh-drift-c {
    0%   { transform: translate(-14px, 12px); }
    50%  { transform: translate(22px, -16px); }
    100% { transform: translate(-6px, 24px); }
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    padding: clamp(2rem, 6vw, 6rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 8vw, 7rem);
    border-left: 8px solid var(--fired-umber);
    border-right: 2px solid var(--fired-umber);
    border-top: 5px solid var(--fired-umber);
    border-bottom: 8px solid var(--fired-umber);
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #faf3ea 0%, #f5ecdd 100%);
}

.hero-blob {
    position: absolute;
    width: clamp(420px, 55vw, 720px);
    height: clamp(420px, 55vw, 720px);
    top: 50%;
    right: -8vw;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--apricot-haze), var(--terracotta));
    clip-path: polygon(30% 0%, 70% 5%, 95% 30%, 90% 70%, 65% 95%, 30% 90%, 5% 65%, 10% 30%);
    opacity: 0.45;
    animation: blob-pulse 8s ease-in-out infinite, blob-drift 26s ease-in-out infinite alternate;
    z-index: 1;
    mix-blend-mode: multiply;
}

@keyframes blob-pulse {
    0%, 100% { transform: translateY(-50%) scale(1.00); }
    50%      { transform: translateY(-50%) scale(1.05); }
}
@keyframes blob-drift {
    0%   { right: -8vw; }
    100% { right: -4vw; }
}

.hero-inner {
    position: relative;
    z-index: 5;
    max-width: 62rem;
    margin-left: max(2vw, 1rem);
    transform: translateX(-3vw);
}

.hero-kicker {
    font-family: var(--font-annot);
    color: var(--warm-sienna);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    margin-bottom: clamp(1rem, 2vw, 1.75rem);
    display: inline-block;
    transform: rotate(-1.2deg);
    padding: 0.25rem 0.75rem;
    border: 2px solid var(--fired-umber);
    background: var(--clay-wash);
    box-shadow: 3px 3px 0 var(--fired-umber);
}

.hero-title {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 8rem);
    letter-spacing: 0.02em;
    color: var(--fired-umber);
    line-height: 0.92;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.hero-line {
    display: block;
    clip-path: inset(0 100% 0 0);
    animation: text-wipe 0.8s var(--ease-slow) forwards;
}
.hero-line-1 { animation-delay: 0.3s; }
.hero-line-2 { animation-delay: 0.75s; padding-left: 6vw; }

@keyframes text-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

.hero-title.shake-in { animation: title-shake 200ms ease-out; }
@keyframes title-shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-2px); }
    50%  { transform: translateX(2px); }
    75%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

.hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    max-width: 34rem;
    color: var(--dark-clay);
    margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.hero-meta { margin-top: 1rem; }

.meta-mono {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--saddle-brown);
    text-transform: uppercase;
}
.meta-mono-gold  { color: var(--kiln-gold); }
.meta-mono-cream { color: var(--cream-soft); }

/* scroll whisper */
.scroll-whisper {
    position: absolute;
    bottom: 2rem;
    right: clamp(1.5rem, 4vw, 4rem);
    z-index: 5;
    font-family: var(--font-annot);
    color: var(--warm-sienna);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    animation: whisper-bob 2.8s ease-in-out infinite;
}
.whisper-mark {
    font-family: var(--font-hand);
    font-size: 1.6rem;
    color: var(--terracotta);
}
@keyframes whisper-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* ===========================================================
   CLAY MENU (CSS-only reveal with JS enhancement)
   =========================================================== */
.clay-menu {
    position: fixed;
    top: clamp(1rem, 2vw, 1.75rem);
    right: clamp(1rem, 2vw, 1.75rem);
    z-index: 100;
}

.clay-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--apricot-haze) 0%, var(--terracotta) 55%, var(--burnt-sienna) 100%);
    border: 3px solid var(--fired-umber);
    box-shadow: 4px 4px 0 var(--fired-umber);
    cursor: pointer;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
    display: grid;
    place-items: center;
}
.clay-circle:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--fired-umber);
}
.clay-circle.shake { animation: shake-pot 0.4s ease-in-out; }

.thumb-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--fired-umber), var(--dark-earth));
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.3);
}

.clay-menu-list {
    position: absolute;
    top: 70px;
    right: 0;
    list-style: none;
    background: var(--kiln-cream);
    border: 3px solid var(--fired-umber);
    box-shadow: 6px 6px 0 var(--fired-umber);
    padding: 0.75rem 1.25rem;
    min-width: 180px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) rotate(-0.8deg);
    transition: opacity 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
}
.clay-menu.open .clay-menu-list {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) rotate(-0.8deg);
}
.clay-menu-list li { padding: 0.35rem 0; }
.clay-menu-list a {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--fired-umber);
    text-decoration: none;
    font-weight: 700;
    position: relative;
    transition: color 0.2s ease;
}
.clay-menu-list a:hover { color: var(--terracotta); }
.clay-menu-list a::before {
    content: "·";
    color: var(--terracotta);
    margin-right: 0.5rem;
    font-size: 1.5rem;
}

/* ===========================================================
   THUMBPRINT DIVIDERS
   =========================================================== */
.thumbprint-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(2.5rem, 6vw, 5rem) 1rem;
    position: relative;
}
.thumb {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, var(--terracotta) 0%, var(--thumb-deep) 70%, var(--fired-umber) 100%);
    box-shadow: 2px 2px 0 var(--fired-umber), inset 2px 2px 4px rgba(0,0,0,0.25);
    animation: thumb-breathe 6s ease-in-out infinite;
}
.thumb-a { width: 70px; height: 70px; }
.thumb-b { width: 48px; height: 48px; transform: translateY(-10px); animation-delay: -1s; }
.thumb-c { width: 60px; height: 60px; transform: translateY(8px); animation-delay: -2.5s; }
.thumb-d { width: 38px; height: 38px; transform: translateY(-6px); animation-delay: -3.2s; }

@keyframes thumb-breathe {
    0%, 100% { transform: translateY(var(--ty, 0)) scale(1); }
    50%      { transform: translateY(var(--ty, 0)) scale(1.06); }
}

/* ===========================================================
   CLAY SLABS
   =========================================================== */
.slab-section {
    position: relative;
    padding: clamp(1rem, 3vw, 2.5rem) 0;
}

.clay-slab {
    position: relative;
    background: var(--kiln-cream);
    border: 4px solid var(--fired-umber);
    box-shadow: var(--shadow-hard);
    padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
    max-width: 55rem;
}

.slab-left {
    margin-left: 8vw;
    margin-right: 15vw;
}
.slab-right {
    margin-left: 15vw;
    margin-right: 8vw;
    background: var(--clay-wash);
}

.slab-rot-a { transform: rotate(-0.8deg); }
.slab-rot-b { transform: rotate(0.6deg); }
.slab-rot-c { transform: rotate(-0.5deg); }
.slab-rot-d { transform: rotate(0.9deg); }

.slab-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 0.25rem 0.6rem;
    border: 2px solid var(--fired-umber);
    background: var(--ember-glow);
    color: var(--fired-umber);
    margin-bottom: 1rem;
    box-shadow: 3px 3px 0 var(--fired-umber);
}
.slab-label-gold { background: var(--kiln-gold); color: var(--dark-earth); }

.slab-title {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    color: var(--fired-umber);
    letter-spacing: 0.02em;
    line-height: 1.02;
    margin-bottom: 1.1rem;
}
.slab-title-cream { color: var(--cream-soft); }

.slab-body {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: var(--dark-clay);
    margin-bottom: 1.25rem;
}
.slab-body-cream { color: var(--cream-soft); }

.slab-annot {
    font-family: var(--font-annot);
    font-size: 0.95rem;
    color: var(--warm-sienna);
    transform: rotate(-1deg);
    display: inline-block;
    margin: 0.5rem 0 1.25rem;
}

.slab-foot {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 2px dashed var(--warm-stone);
}

.slab-dark {
    background: var(--dark-earth);
    border-color: var(--dark-earth);
    box-shadow: var(--shadow-hard-dark);
}
.slab-dark .slab-foot { border-top-color: rgba(245, 230, 211, 0.2); }

/* Reveal animation (IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(20px) rotate(-1deg);
    transition: opacity 0.85s var(--ease-slow), transform 0.85s var(--ease-slow);
}
.reveal.is-visible {
    opacity: 1;
}
.reveal.is-visible.slab-rot-a { transform: translateY(0) rotate(-0.8deg); }
.reveal.is-visible.slab-rot-b { transform: translateY(0) rotate(0.6deg); }
.reveal.is-visible.slab-rot-c { transform: translateY(0) rotate(-0.5deg); }
.reveal.is-visible.slab-rot-d { transform: translateY(0) rotate(0.9deg); }
.reveal.is-visible:not([class*="slab-rot"]) { transform: translateY(0) rotate(0); }

/* ===========================================================
   VESSEL SECTION (BLOB CARDS)
   =========================================================== */
.vessel-section {
    position: relative;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 4rem);
}

.section-head {
    max-width: 48rem;
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
    text-align: left;
    padding-left: clamp(1rem, 6vw, 5rem);
}
.section-kicker {
    font-family: var(--font-annot);
    color: var(--terracotta);
    font-size: 1rem;
    transform: rotate(-1deg);
    display: inline-block;
}
.section-title {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    color: var(--fired-umber);
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0.5rem 0 1rem;
}
.section-lede {
    max-width: 34rem;
    color: var(--dark-clay);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.vessel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(2rem, 4vw, 3.5rem);
    max-width: 82rem;
    margin: 0 auto;
    padding: 1rem clamp(0.5rem, 3vw, 2.5rem);
}

.blob-card {
    position: relative;
    padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 3vw, 2.75rem);
    min-height: 22rem;
    color: var(--fired-umber);
    transition: transform 0.35s var(--ease-spring), filter 0.35s ease;
    cursor: default;
    isolation: isolate;
}
.blob-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--apricot-haze), var(--terracotta));
    clip-path: polygon(30% 0%, 70% 5%, 95% 30%, 90% 70%, 65% 95%, 30% 90%, 5% 65%, 10% 30%);
    z-index: -2;
    transition: transform 0.5s var(--ease-spring), filter 0.4s ease;
}
.blob-card::after {
    content: "";
    position: absolute;
    inset: 4px 4px 4px 4px;
    background: var(--kiln-cream);
    clip-path: polygon(32% 3%, 70% 8%, 92% 32%, 87% 70%, 63% 92%, 32% 87%, 8% 63%, 13% 33%);
    z-index: -1;
    transition: transform 0.5s var(--ease-spring);
}

.blob-card-1::before { clip-path: polygon(30% 0%, 70% 5%, 95% 30%, 90% 70%, 65% 95%, 30% 90%, 5% 65%, 10% 30%); }
.blob-card-2::before { clip-path: polygon(20% 5%, 55% 0%, 85% 15%, 98% 50%, 80% 85%, 45% 95%, 15% 80%, 3% 40%); }
.blob-card-3::before { clip-path: polygon(25% 2%, 65% 8%, 92% 25%, 95% 60%, 75% 90%, 40% 92%, 12% 75%, 5% 40%); }
.blob-card-4::before { clip-path: polygon(35% 3%, 70% 0%, 92% 28%, 88% 65%, 70% 92%, 35% 95%, 8% 68%, 10% 30%); }

.blob-card-1::after { clip-path: polygon(32% 3%, 70% 8%, 92% 32%, 87% 70%, 63% 92%, 32% 87%, 8% 63%, 13% 33%); }
.blob-card-2::after { clip-path: polygon(22% 8%, 55% 3%, 82% 18%, 95% 50%, 78% 82%, 45% 92%, 17% 78%, 6% 40%); }
.blob-card-3::after { clip-path: polygon(27% 5%, 65% 11%, 89% 27%, 92% 60%, 73% 87%, 40% 89%, 15% 73%, 8% 40%); }
.blob-card-4::after { clip-path: polygon(37% 6%, 70% 3%, 89% 30%, 85% 65%, 68% 89%, 35% 92%, 11% 68%, 13% 32%); }

.blob-card:hover {
    transform: translate(-2px, -2px);
}
.blob-card:hover::before {
    transform: scale(1.03);
    filter: saturate(1.2);
}

.blob-card.shake { animation: shake-pot 0.4s ease-in-out; }

.blob-index {
    font-family: var(--font-hand);
    font-size: 2.2rem;
    color: var(--terracotta);
    display: block;
    line-height: 1;
    margin-bottom: 0.5rem;
    transform: rotate(-4deg);
}
.blob-title {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    color: var(--fired-umber);
    margin-bottom: 0.8rem;
    line-height: 1.05;
    letter-spacing: 0.02em;
}
.blob-body {
    font-size: 0.97rem;
    color: var(--dark-clay);
    margin-bottom: 1rem;
    max-width: 26ch;
}
.blob-meta {
    position: absolute;
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    left: clamp(2rem, 3vw, 2.75rem);
}

/* ===========================================================
   FIRE SECTION
   =========================================================== */
.fire-section {
    position: relative;
    padding: clamp(3rem, 7vw, 6rem) 0;
    background: linear-gradient(180deg, var(--kiln-cream) 0%, #f3e4cf 100%);
    overflow: hidden;
}
.fire-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: var(--fired-umber);
}
.fire-blob {
    position: absolute;
    width: 640px;
    height: 640px;
    right: -12vw;
    top: 10%;
    background: radial-gradient(circle at 40% 40%, var(--kiln-gold), var(--terracotta) 60%, var(--burnt-sienna) 100%);
    clip-path: polygon(28% 2%, 72% 8%, 94% 32%, 92% 68%, 68% 92%, 28% 88%, 6% 62%, 8% 28%);
    opacity: 0.28;
    z-index: 0;
    animation: blob-pulse-c 9s ease-in-out infinite;
    mix-blend-mode: multiply;
    pointer-events: none;
}
@keyframes blob-pulse-c {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.06) rotate(2deg); }
}

/* ===========================================================
   SHAKE FORM
   =========================================================== */
.shake-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
    max-width: 32rem;
}

.form-row { display: flex; flex-direction: column; gap: 0.35rem; }

.form-label {
    font-family: var(--font-annot);
    font-size: 0.95rem;
    color: var(--warm-sienna);
    transform: rotate(-1deg);
    display: inline-block;
    padding-left: 0.25rem;
}

.form-input {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.85rem 1rem;
    background: var(--kiln-cream);
    border: 3px solid var(--fired-umber);
    box-shadow: 4px 4px 0 var(--fired-umber);
    color: var(--fired-umber);
    outline: none;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring);
}
.form-input:focus {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--fired-umber);
    background: #fff8ec;
}
.form-input.shake {
    animation: shake-pot 0.4s ease-in-out;
    border-color: var(--burnt-sienna);
    background: #fce8d9;
}

.clay-btn {
    align-self: flex-start;
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: 1.6rem;
    padding: 0.55rem 1.5rem 0.4rem;
    color: var(--kiln-cream);
    background: var(--terracotta);
    border: 3px solid var(--fired-umber);
    box-shadow: 5px 5px 0 var(--fired-umber);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring), background 0.2s ease;
    margin-top: 0.35rem;
}
.clay-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 9px 9px 0 var(--fired-umber);
    background: var(--burnt-sienna);
}
.clay-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0 var(--fired-umber);
}
.clay-btn.shake { animation: shake-pot 0.4s ease-in-out; }

.form-status {
    min-height: 1.2rem;
    font-family: var(--font-annot);
    color: var(--terracotta);
    font-size: 1rem;
    transform: rotate(-0.8deg);
    transition: opacity 0.3s ease;
}
.form-status.success { color: var(--burnt-sienna); }

/* Universal shake keyframe (primary animation language) */
@keyframes shake-pot {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-4px); }
    30%  { transform: translateX(4px); }
    45%  { transform: translateX(-3px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

/* ===========================================================
   FOOTER — KILN
   =========================================================== */
.footer-kiln {
    position: relative;
    background: var(--dark-earth);
    color: var(--cream-soft);
    padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 6vw, 6rem) clamp(3rem, 5vw, 4.5rem);
    border-top: 6px solid var(--fired-umber);
    overflow: hidden;
}

.footer-blob {
    position: absolute;
    width: 520px;
    height: 520px;
    left: -8vw;
    top: -10%;
    background: radial-gradient(circle at 50% 50%, var(--kiln-gold) 0%, var(--terracotta) 55%, var(--dark-earth) 90%);
    clip-path: polygon(30% 2%, 70% 7%, 93% 32%, 89% 68%, 64% 93%, 30% 88%, 7% 64%, 11% 30%);
    opacity: 0.5;
    animation: blob-pulse-c 12s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

.footer-inner {
    position: relative;
    z-index: 2;
    max-width: 64rem;
    margin: 0 auto;
    text-align: left;
}

.footer-kicker {
    font-family: var(--font-annot);
    color: var(--kiln-gold);
    font-size: 1rem;
    margin-bottom: 1.25rem;
    letter-spacing: 0.1em;
    transform: rotate(-1deg);
    display: inline-block;
}
.footer-title {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 6rem);
    color: var(--kiln-gold);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}
.footer-body {
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    color: var(--cream-soft);
    max-width: 32rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-meta {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 2px solid rgba(245, 230, 211, 0.15);
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 760px) {
    .slab-left, .slab-right { margin-left: 5vw; margin-right: 5vw; }
    .hero-inner { transform: translateX(0); margin-left: 0; }
    .hero-line-2 { padding-left: 3vw; }
    .section-head { padding-left: 1rem; }
    .vessel-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .clay-slab { padding: 1.5rem; }
    .footer-meta { gap: 1rem; }
}

@media (max-width: 460px) {
    .hero { padding-left: 1rem; padding-right: 1rem; border-left-width: 5px; }
    .clay-circle { width: 48px; height: 48px; }
    .clay-menu-list { min-width: 150px; }
    .thumb-a { width: 54px; height: 54px; }
    .thumb-b { width: 36px; height: 36px; }
    .thumb-c { width: 44px; height: 44px; }
}