/* Reversible visual layer, October 2026. Original photographs stay intact. */
:root{--forest-deep:#122e25;--sage-light:#e6eddf;--warm-gold:#dec394}
body{background:radial-gradient(ellipse at 90% 15%,#e5ecde80,transparent 38%),var(--paper)}
body>header{background:#fffcf6ed;backdrop-filter:blur(18px);box-shadow:0 4px 26px #18382b09}
.button{border-radius:999px;box-shadow:0 5px 16px #10291f14;transition:background .2s,box-shadow .2s,transform .2s}
.button:hover{box-shadow:0 9px 24px #10291f22;transform:translateY(-2px)}
.hero{isolation:isolate;margin:24px auto 0;width:calc(100% - 48px);max-width:1600px;border-radius:30px;overflow:hidden;background:radial-gradient(ellipse at 8% 0%,#456858,transparent 58%),linear-gradient(135deg,#18392d,#10271f);box-shadow:0 24px 70px #142e2523;grid-template-columns:1.12fr 1fr;padding:18px;gap:16px}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid #e2d0aa38;border-radius:inherit;z-index:3;background:radial-gradient(ellipse at 36% 12%,#d1b57a10,transparent 55%)}
.hero::after{content:"";position:absolute;width:390px;height:390px;border:1px solid #bdcfaf25;border-radius:50%;left:-200px;bottom:-200px;box-shadow:0 0 0 55px #bdcfaf08,0 0 0 110px #bdcfaf05;pointer-events:none}
.hero-copy{padding:56px 3vw 75px 4vw;z-index:2;position:relative;top:auto;bottom:auto;left:auto;right:auto;min-width:0}
.hero h1{font-size:clamp(42px,4.6vw,74px);text-wrap:balance;text-shadow:0 4px 30px #0a1d1830}
.hero h1 em{color:#e3c99a}
.hero .eyebrow{letter-spacing:2px;line-height:1.8}
.hero>img{border-radius:20px;box-shadow:0 12px 45px #0003;align-self:center;z-index:1;transform:translateZ(0)}
.hero-note{left:calc(4vw + 18px);bottom:24px;color:#d9d8bc;z-index:2}
.intro-strip{border-bottom:0;margin:0 auto;max-width:1510px;padding-top:48px;padding-bottom:48px}
.intro-strip .number{color:#375943;text-shadow:1px 2px 0 #fff}
.home-topics{background:linear-gradient(145deg,#eaf0e3,#f6f3ea);border-top:1px solid #d5dece;border-bottom:1px solid #d5dece}
.home-topic-grid>a,.breed-card,.care-card,.video-card,.gallery-grid figure{border-radius:20px;box-shadow:0 8px 30px #17372a08;transition:box-shadow .25s,transform .25s,border-color .25s}
.home-topic-grid>a{background:linear-gradient(145deg,#fffdf7,#f3f6ed);border:1px solid #d7dfcf!important;padding:26px!important}
.home-topic-grid>a:hover,.breed-card:hover,.care-card:hover{box-shadow:0 20px 42px #17372a15;border-color:#a8ba9b}
.breed-card{transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));will-change:auto}
.breed-card:hover{transform:perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px)}
.card-content{background:linear-gradient(145deg,#fffcf6,#f3f3e9)}
.breed-group-photo{border-radius:24px;overflow:hidden;box-shadow:0 14px 40px #18382b10}
.breed-group-photo figcaption{padding:14px 20px;background:#fffcf6}
.spotlight{position:relative;isolation:isolate;background:radial-gradient(ellipse at 20% 20%,#416452,transparent 58%),var(--forest-deep);border-radius:30px;margin:20px 24px;overflow:hidden;box-shadow:0 18px 55px #18382b1a}
.spotlight-mark{border-color:#c5d4b66b;background:linear-gradient(150deg,#d5e4c610,#ffffff02);box-shadow:inset 0 1px 0 #ffffff25,0 20px 50px #071b1730}
.spotlight-mark strong{text-shadow:0 8px 28px #071b1760;color:#ebd6b3}
.founder-portrait img{border-radius:24px;box-shadow:0 20px 45px #203e3220}
.guide-hero,.breed-banner{background:radial-gradient(ellipse at 0 0,#456858,transparent 70%),var(--green);box-shadow:0 18px 45px #203e3215}
.guide-hero-photo img{box-shadow:0 15px 35px #071b1730}
.knowledge-photo-frame{border-radius:12px;overflow:hidden}
.reader-dialog,dialog{border-radius:24px;box-shadow:0 30px 100px #10271f40}
footer{background:linear-gradient(160deg,#f1f4e9,#fffcf6)}
.puli-controls{position:fixed;right:18px;bottom:18px;z-index:25;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 13px;border:1px solid #bfcdb5;background:#fffcf6f5;color:#203e32;border-radius:999px;box-shadow:0 5px 24px #1231251a;backdrop-filter:blur(10px);font-size:11px}
.puli-controls button{border:0;border-radius:999px;min-height:36px;min-width:36px;background:#e5eddd;color:#203e32;padding:7px 11px;font-size:11px}
.puli-runner{position:fixed;left:-170px;bottom:66px;width:150px;height:145px;z-index:24;pointer-events:none;animation:puli-crossing 28s linear infinite;visibility:hidden;contain:layout style}
.puli-runner img{display:block;width:150px;height:140px;object-fit:contain;animation:puli-hop .52s ease-in-out infinite;filter:drop-shadow(0 7px 5px #142e2520)}
.puli-runner::after{content:"";position:absolute;bottom:0;left:32px;width:90px;height:9px;border-radius:50%;background:#142e2529;filter:blur(3px);animation:puli-shadow .52s ease-in-out infinite}
@keyframes puli-crossing{0%,6%{transform:translateX(0);visibility:hidden}7%{visibility:visible}46%{transform:translateX(calc(100vw + 340px));visibility:visible}47%,100%{transform:translateX(calc(100vw + 340px));visibility:hidden}}
@keyframes puli-hop{0%,100%{transform:translateY(0) rotate(-2deg)}45%{transform:translateY(-16px) rotate(3deg)}75%{transform:translateY(-3px) rotate(-1deg)}}
@keyframes puli-shadow{0%,100%{transform:scaleX(1);opacity:.6}45%{transform:scaleX(.7);opacity:.25}}
html[data-visual-motion="paused"] .puli-runner{display:none}
html[data-visual-motion="paused"] .breed-card{--tilt-x:0deg!important;--tilt-y:0deg!important}
@media(max-width:1000px){.hero-copy{padding:34px 3vw 60px}.hero h1{font-size:clamp(37px,4.5vw,50px)}}
@media(max-width:760px){.hero{width:calc(100% - 24px);margin-top:12px;border-radius:22px;padding:12px;gap:0}.hero-copy{padding:34px 5vw 36px}.hero h1{font-size:clamp(37px,8vw,58px)}.hero>img{border-radius:15px}.hero-note{padding:18px 5vw 8px;font-size:7px;letter-spacing:1.5px}.spotlight{margin:14px 12px;border-radius:22px;gap:30px}.puli-runner{width:112px;height:110px;bottom:62px}.puli-runner img{width:112px;height:106px}.puli-runner::after{left:24px;width:66px}.puli-controls{right:10px;bottom:10px}.care-card{border-radius:16px}.home-topic-grid>a{padding:22px!important}}
@media(prefers-reduced-motion:reduce){.puli-runner{display:none}.breed-card,.button,.home-topic-grid>a,.care-card{transition:none!important;transform:none!important}}

/* Second pass: Canva composition + Figma-generated dimensional artwork. */
.hero{background:linear-gradient(90deg,#112b2480,#112b24b8),url('assets/forest-sculpture-figma.jpg') left center/cover,var(--forest-deep)}
.home-topics{background:transparent;border:0;padding-top:52px}
.home-topics>h2{max-width:650px;text-wrap:balance}
.home-topic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.home-topic-grid>a{position:relative;isolation:isolate;min-height:290px;padding:30px!important;overflow:hidden;box-shadow:0 9px 24px #19382b0b,inset 0 1px 0 #fff}
.home-topic-grid>a>span{padding:6px 12px;border:1px solid #c9d5bf;border-radius:999px;background:#eaf0e3;color:#486243;letter-spacing:1px;font-size:9px;box-shadow:0 3px 7px #15302508}
.home-topic-grid>a h3{margin-top:24px;max-width:19ch;line-height:1.18;font-size:clamp(26px,2.3vw,34px)}
.home-topic-grid>a p{line-height:1.8;max-width:43ch;color:#657063;font-size:14px}
.home-topic-grid>a strong{padding-top:18px;font-size:12px}
.home-topic-grid>a:first-child{grid-column:span 2;background:linear-gradient(135deg,#365f47,#193d2e);border-color:#385b42!important;color:#fffcf6;padding-right:26%!important}
.home-topic-grid>a:first-child::after{content:'09';position:absolute;right:28px;top:50%;transform:translateY(-50%);font:italic clamp(85px,11vw,160px)/1 Georgia,serif;color:#d4e0c321;text-shadow:1px 1px 0 #fcf5e208;z-index:-1}
.home-topic-grid>a:first-child>span{color:#e8d6b5;border-color:#ccd7bc42;background:#ffffff0a}
.home-topic-grid>a:first-child p{color:#dee7d7}
.home-topic-grid>a:first-child strong{color:#f0d5a8;border-color:#d5dfca42}
.home-topic-grid>a:hover{transform:translateY(-5px)}
.home-topic-grid>a:nth-child(2){background:linear-gradient(145deg,#e6eedf,#f5f4e9)}
.intro-strip{position:relative}
.intro-strip::after{content:'';position:absolute;left:7vw;right:7vw;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#b9c7ad,transparent)}
.spotlight{background:linear-gradient(90deg,#112b2460,#112b24c7 54%),url('assets/forest-sculpture-figma.jpg') center/cover,var(--forest-deep);border:1px solid #52664d}
.spotlight-mark{min-height:385px;border-radius:48% 48% 22px 22px;overflow:hidden;background:linear-gradient(145deg,#d9e6c610,#00000014);backdrop-filter:blur(3px);padding:18px 12px;justify-content:flex-end}
.spotlight-mark::before{content:'';position:absolute;inset:12px 4px 90px;background:url('assets/puli-mascot-3d.png') center/contain no-repeat;filter:drop-shadow(0 16px 10px #06191265);z-index:1}
.spotlight-mark::after{content:'';position:absolute;left:17%;right:17%;bottom:98px;height:22px;border-radius:50%;background:linear-gradient(#7c94736b,#213e2c);border-top:1px solid #becbad68;box-shadow:0 13px 20px #0719114a;z-index:0}
.spotlight-mark>span:first-child{display:none}
.spotlight-mark strong{font-size:64px;line-height:1;margin:0 0 13px;position:relative;z-index:2}
.spotlight-mark>span:last-child{font-size:8px;letter-spacing:1.7px;color:#e8d7b7;position:relative;z-index:2;text-align:center}
.spotlight h2{color:#fff9ec;text-wrap:balance}
.spotlight .text-link{border-radius:999px;padding:11px 22px;border:1px solid #d6c29975;color:#f0dbb4;background:#ffffff08;box-shadow:0 6px 20px #06191220}
@media(max-width:950px){.home-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-topic-grid>a:first-child{grid-column:span 2;padding-right:30%!important}.spotlight-mark{min-height:350px}}
@media(max-width:600px){.home-topic-grid{grid-template-columns:1fr;gap:14px}.home-topic-grid>a:first-child{grid-column:auto;padding:25px!important}.home-topic-grid>a{min-height:265px;padding:25px!important}.home-topic-grid>a:first-child::after{top:75px;right:12px;font-size:110px;color:#d4e0c310}.home-topic-grid>a h3{font-size:29px}.home-topics{padding-top:42px}.spotlight-mark{max-width:310px;min-height:340px}.spotlight-mark strong{font-size:58px}}
@media(prefers-reduced-motion:reduce){.home-topic-grid>a:hover{transform:none}}