@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lilita+One&display=swap');
:root{--ink:#684d3b;--orange:#cb9b31;--paper:#eceabb;--line:#c6c08f;--muted:#6b5547;--red:#ce563b;--blue:#82bdd1;--serif:Georgia,'Times New Roman',serif;--sans:'DM Sans',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #4c60dc;outline-offset:6px}a:hover{text-decoration:underline;text-underline-offset:.3em}img{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3{margin:0}h1,h2{font-family:'Lilita One',var(--sans);font-weight:400;letter-spacing:-.025em;line-height:1.04}h1 em,h2 em{font-weight:400;font-style:normal;color:var(--red)}h3{font-size:1.25rem;line-height:1.3;font-weight:500;letter-spacing:-.02em}header{display:flex;align-items:center;justify-content:space-between;padding:1rem 4.5%;gap:2rem;background:var(--ink);color:white}.brand{display:flex;align-items:center;gap:.85rem;font-family:'Lilita One',var(--sans);font-size:1.8rem;font-weight:400;letter-spacing:.015em;line-height:.95}.brand-mark{display:block;width:72px;height:72px;flex-shrink:0;background:var(--ink);-webkit-mask-image:url("assets/rattatat-logo.webp");mask-image:url("assets/rattatat-logo.webp");mask-mode:luminance;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.original-logo{width:88px;height:88px;border-radius:50%}nav{display:flex;align-items:center;gap:2.3rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.1em}nav .nav-shop{border:1px solid var(--blue);background:var(--blue);color:#50392d;padding:.6rem 1.15rem;border-radius:2px}nav .nav-shop:hover{background:#9acbdd;border-color:#9acbdd;text-decoration:none}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:640px}.hero-copy{background:var(--paper);padding:3.75rem 9% 2rem;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;line-height:1.5}.hero h1{font-size:clamp(3.75rem,6vw,6.2rem);margin:2rem 0 1.3rem}.intro{max-width:22rem;font-size:1.1rem;line-height:1.6}.button{display:inline-flex;align-items:center;justify-content:center;background:#b7462f;color:white;min-height:3.25rem;padding:.8rem 1.5rem;font-size:.9rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;border-radius:2px;margin-top:1.6rem;transition:background .2s}.button:hover{background:#a9432d;text-decoration:none}.hero-photo{position:relative;overflow:hidden;background:#34434b}.hero-photo img{height:100%;width:100%;object-fit:cover;object-position:50% 50%}.hero-photo figcaption{position:absolute;bottom:1.5rem;left:1.5rem;padding:.45rem .8rem;background:var(--paper);font-size:.8rem}.section{padding:6.5rem 6%}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.7rem}.section-heading h2{font-size:clamp(2.7rem,4vw,4.5rem);margin-top:.75rem}.section-heading>p{color:var(--muted);max-width:24rem;line-height:1.6}.pieces{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem}.image-wrap{height:clamp(300px,38vw,530px);overflow:hidden;background:#e9edf0}.image-wrap img{height:100%;width:100%;object-fit:cover}.ornament .image-wrap img{object-position:50% 53%}.pumpkin .image-wrap img{object-position:center}.piece-caption{display:grid;grid-template-columns:auto 1fr;gap:.9rem;margin-top:1.3rem}.piece-number{font-size:.8rem;margin-top:.3rem;color:var(--muted)}.piece-caption p{font-size:.9rem;line-height:1.6;margin-top:.5rem;color:var(--muted);max-width:24rem}.material{grid-column:2;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:.25rem}.gallery-note{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.25rem;font-size:.85rem;color:var(--muted)}.about{padding-top:4rem;background:var(--blue);color:#50392d}.about>.eyebrow{border-top:1px solid var(--line);padding-top:2.5rem}.about-body{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:4rem;margin-top:0}.about h2{font-size:clamp(2.6rem,4.2vw,4.5rem);margin:1.2rem 0 1.5rem}.about-copy{max-width:36rem;padding-top:.4rem}.about-copy p{margin-bottom:1.25rem;font-size:1.1rem}.text-link{display:inline-block;border-bottom:1px solid var(--ink);font-size:.95rem;padding-bottom:.25rem;margin-top:.4rem}.text-link:hover{text-decoration:none;border-bottom-width:2px}.etsy-section{background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;padding:4rem 6%;gap:3rem}.etsy-section .eyebrow{color:var(--paper)}.etsy-section h2{font-size:clamp(3rem,4.5vw,5.2rem);margin:1.1rem 0 1.3rem}.etsy-section p:not(.eyebrow){color:var(--paper)}.button-light{background:var(--paper);color:var(--ink);margin-top:0;flex-shrink:0}.button-light:hover{background:#fff5ce}footer{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.4rem 4.5%}footer p{font-size:.8rem;color:var(--muted)}.copyright{font-size:.75rem}.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}.skip{position:absolute;z-index:10;top:.5rem;left:.5rem;transform:translateY(-200%);background:white;padding:.6rem 1rem}.skip:focus{transform:translateY(0)}
@media(min-width:1600px){body{max-width:1800px;margin:auto}.hero{min-height:760px}}@media(max-width:850px){header{padding:1.4rem 5%;gap:1rem}nav{gap:1.1rem}.hero{min-height:560px}.hero-copy{padding:2.5rem 9% 1.5rem}.hero h1{font-size:4rem}.section{padding:4rem 5%}.section-heading{align-items:start;flex-direction:column;gap:1rem}.section-heading>p br{display:none}.pieces{gap:1.5rem}.about{padding-top:4rem;background:var(--blue);color:#50392d}.about-body{gap:2rem}.etsy-section{padding:3rem 5%;gap:2rem;align-items:flex-start;flex-direction:column}footer{flex-wrap:wrap}.copyright{width:100%}}@media(max-width:580px){header{align-items:center}.brand{font-size:1.25rem;gap:.65rem}.brand-mark{width:54px;height:54px}.brand .brand-name>span{font-size:.8rem}nav{gap:.8rem;font-size:.85rem}nav>a:not(.nav-shop){display:none}nav .nav-shop{padding:.6rem .8rem}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:2.5rem 6% 1.75rem}.hero h1{font-size:clamp(3.4rem,13vw,4.6rem);margin-top:1.5rem}.intro{font-size:1rem;max-width:23rem}.hero-photo{height:430px}.hero-photo img{object-position:50% 53%}.section{padding:3.5rem 6%}.section-heading h2{font-size:2.8rem}.pieces{grid-template-columns:1fr;gap:2.5rem}.image-wrap{height:400px}.piece-caption p{font-size:1rem}.gallery-note{font-size:.9rem}.about{padding-top:4rem;background:var(--blue);color:#50392d}.about-body{grid-template-columns:1fr;gap:1.5rem}.about h2{font-size:2.75rem}.about-copy p{font-size:1rem}.etsy-section{padding:3rem 6%}.etsy-section h2{font-size:3.5rem}.desktop-break{display:none}footer{padding:2rem 6%;gap:1.3rem}footer>p:not(.copyright){width:100%;font-size:.9rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.brand-art{width:100%;max-width:440px;justify-self:end}.brand-art img{width:100%;height:auto}.about-copy .text-link{margin-right:1.5rem}footer{background:var(--paper)}.gallery{background:#fffdf1}.gallery .eyebrow{color:#a43e29}.gallery .section-heading h2{font-size:clamp(2.7rem,4vw,4.2rem)}
@media(max-width:580px){.brand-art{max-width:340px;justify-self:start}.about{padding-top:3rem}.hero h1{font-size:clamp(3rem,12vw,4.6rem)}.etsy-section h2{font-size:3.2rem}}

/* Full-height maker artwork and a playful retro corner for the Etsy section. */
.about.section{padding:0}
.about.section .about-body{grid-template-columns:1.1fr 1fr;align-items:stretch;gap:0}
.about.section .about-copy{max-width:none;padding:4.5rem 10% 4.5rem 11%}
.about.section .brand-art{position:relative;max-width:none;width:100%;height:100%;justify-self:stretch;overflow:hidden}
.about.section .brand-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;box-shadow:none}
.etsy-section{background-image:radial-gradient(circle at 102% 120%,var(--paper) 0 50px,var(--blue) 50px 90px,var(--ink) 90px 115px,var(--orange) 115px 155px,var(--paper) 155px 175px,var(--red) 175px 215px,transparent 215px)}
@media(max-width:760px){.about.section .about-body{grid-template-columns:1fr}.about.section .about-copy{padding:3.5rem 6%}.about.section .brand-art{height:auto;aspect-ratio:1}.original-logo{width:72px;height:72px}.etsy-section{background-image:radial-gradient(circle at 112% 114%,var(--paper) 0 25px,var(--blue) 25px 60px,var(--ink) 60px 80px,var(--orange) 80px 115px,var(--paper) 115px 130px,var(--red) 130px 165px,transparent 165px)}}
/* Keep the complete hero message centred in its panel. */
.hero{min-height:max(580px,calc(90svh - 120px))}
.hero-copy{justify-content:center;align-items:center;text-align:center;padding:3rem 9%}

.hero-photo img{position:absolute;inset:0}
.about h2{color:var(--paper)}
@media(max-width:580px){.hero{min-height:0}.hero-copy{padding:2.5rem 6%}}

/* Hero action and a colourful divider above the gallery. */
.hero .button{background:#b7462f;color:white;letter-spacing:.1em}
.hero .button:hover{background:#a9432d}
.gallery{border-top:10px solid transparent;border-image:repeating-linear-gradient(110deg,var(--red) 0 50px,var(--paper) 50px 70px,var(--blue) 70px 120px,var(--paper) 120px 140px,var(--orange) 140px 190px,var(--paper) 190px 210px) 1}

/* A brown masthead with cream navigation and the standalone logo. */
header{position:relative;min-height:116px;background:var(--ink);color:var(--paper);padding:1rem 6%;border-bottom:0}
header .brand{position:static;transform:none}
header .original-logo{width:112px;height:112px}
header nav{width:auto;justify-content:flex-end;gap:2.5rem}
.nav-links{display:flex;align-items:center;gap:2rem}
header nav .nav-shop{background:#b7462f;border-color:#b7462f;color:var(--paper);border-radius:100px;padding:.75rem 1.5rem}
header nav .nav-shop:hover{background:#a9432d;border-color:#a9432d}
.glass-carousel{--card-width:clamp(280px,34vw,480px);--card-gap:1.5rem}
.carousel-window{overflow:hidden}
.carousel-track{display:flex;width:max-content;animation:glass-loop var(--loop-duration,38s) linear infinite;will-change:transform}
.carousel-group{display:flex;gap:var(--card-gap);padding-right:var(--card-gap)}
.carousel-group .piece{flex:0 0 var(--card-width);width:var(--card-width)}
.carousel-group .image-wrap{height:clamp(340px,34vw,480px)}
.glass-carousel[data-paused="true"] .carousel-track{animation-play-state:paused}
.carousel-controls{display:flex;justify-content:flex-end;margin-top:1.5rem}
.carousel-toggle{font:500 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:2px;padding:.7rem 1.15rem;cursor:pointer;min-height:44px}
.carousel-toggle:hover{background:var(--paper)}
.carousel-toggle:focus-visible{outline:3px solid #4c60dc;outline-offset:4px}
@keyframes glass-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:580px){header{flex-direction:row;gap:1rem;padding:1rem 6%;min-height:100px}header .original-logo{width:88px;height:88px}header nav{font-size:.7rem;gap:.65rem;flex-direction:column;align-items:flex-end}.nav-links{gap:1.25rem}header nav .nav-shop{padding:.55rem 1rem}.carousel-group .image-wrap{height:350px}}

/* Let each product photograph keep its own proportions. */
.hero-photo{background:var(--blue);display:block}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.glass-carousel{--image-height:clamp(340px,34vw,480px)}
.carousel-group .piece{flex:0 0 calc(var(--image-height)*var(--photo-ratio,.8));width:calc(var(--image-height)*var(--photo-ratio,.8))}
.carousel-group .image-wrap{height:var(--image-height)}
.carousel-group .image-wrap img{object-fit:contain}
.etsy-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(3rem,7vw,7rem);align-items:center}
.etsy-feature{width:100%;max-width:440px;justify-self:start}
.etsy-feature>img{width:100%;height:380px;object-fit:cover;object-position:50% 65%}
.etsy-copy .button{margin-top:1.8rem;letter-spacing:.08em}
@media(max-width:760px){.etsy-section{grid-template-columns:1fr;gap:2.5rem}.etsy-feature{max-width:none}.etsy-feature>img{height:360px}.etsy-copy{max-width:36rem}}
@media(max-width:580px){.hero-photo{height:430px}.glass-carousel{--image-height:350px}.etsy-feature>img{height:320px}.etsy-copy .button{font-size:.8rem;padding:.8rem 1.1rem}}

/* Match the logo background to the brand brown without changing its artwork. */
.original-logo{display:block;position:relative;background:var(--ink);flex-shrink:0}
.original-logo::before{content:"";position:absolute;inset:0;background:var(--paper);-webkit-mask-image:url("assets/rattatat-logo.webp");mask-image:url("assets/rattatat-logo.webp");mask-mode:luminance;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
footer .original-logo{width:80px;height:80px}
@media(max-width:580px){footer .original-logo{width:68px;height:68px}}
.etsy-feature{position:relative;padding:18px}
.sketch-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sketch-frame path{vector-effect:non-scaling-stroke}
.frame-cream{stroke:var(--paper);stroke-width:3}
.frame-blue{stroke:var(--blue);stroke-width:1.8}
.frame-spark{stroke:var(--orange);stroke-width:2.5}
.etsy-copy .button{gap:.85rem;max-width:100%}
.etsy-logo{width:58px;height:29px;flex-shrink:0;object-fit:contain}
@media(max-width:580px){.etsy-copy .button{letter-spacing:.06em;gap:.6rem}.etsy-logo{width:50px;height:25px}}

footer .footer-social{display:flex;align-items:center;gap:1.5rem;font-size:.8rem;letter-spacing:.06em;flex-wrap:wrap}
footer .footer-social a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px}
.footer-social svg{width:24px;height:24px;flex-shrink:0}
.footer-social .etsy-logo{width:44px;height:22px}
@media(max-width:580px){footer .footer-social{width:100%;gap:1.8rem}}

/* Cream contact actions and a centered row of social icons. */
.about-copy .text-link{display:inline-flex;align-items:center;justify-content:center;min-height:3.25rem;padding:.8rem 1.2rem;margin:.8rem .8rem 0 0;background:var(--paper);color:var(--ink);border:0;border-radius:2px;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:500}
.about-copy .text-link:hover{background:#fffdf1;border:0;text-decoration:none}
footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
footer .brand{justify-self:start}
footer .footer-social{justify-content:center;justify-self:center;gap:.8rem;width:auto}
footer .footer-social a{justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line)}
footer .footer-social a:hover{background:var(--orange);text-decoration:none;border-color:var(--orange)}
.footer-social .etsy-icon{width:24px;height:24px;object-fit:contain}
footer .copyright{justify-self:end;width:auto;text-align:right}
@media(max-width:580px){footer{grid-template-columns:1fr;justify-items:center;gap:1rem}footer .brand,footer .copyright{justify-self:center}footer .copyright{text-align:center}footer .footer-social{width:auto}}

.about-copy .text-link{gap:.65rem}
.contact-icon{width:20px;height:20px;flex-shrink:0}

#hero-title{animation:headline-fade-in 1.1s ease-out .15s both}
@keyframes headline-fade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#hero-title{animation:none;opacity:1}}

/* Text panels enter once when their section scrolls into view. */
.about,.etsy-section{overflow:clip}
.about-copy{--reveal-offset:-72px}
.etsy-copy{--reveal-offset:72px}
.reveal-ready{opacity:0;transform:translateX(var(--reveal-offset))}
.about-copy.reveal-ready.is-visible{animation:maker-slide-in 1s cubic-bezier(.2,.7,.3,1) both}
.etsy-copy.reveal-ready.is-visible{animation:etsy-slide-in 1s cubic-bezier(.2,.7,.3,1) both}
@keyframes maker-slide-in{from{opacity:0;transform:translateX(-72px)}to{opacity:1;transform:translateX(0)}}
@keyframes etsy-slide-in{from{opacity:0;transform:translateX(72px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.about-copy.reveal-ready,.etsy-copy.reveal-ready{animation:none;opacity:1;transform:none}}