/* ============================================================
   8akeryy — shared styles  (clean modern sans · pastel yellow)
   ============================================================ */
:root{
  --bg:#FCFBF7;           /* soft warm white */
  --panel:#FBF3D3;        /* pastel yellow wash */
  --ink:#3A2A1C;          /* deep cocoa brown */
  --ink-soft:#8C7C6B;     /* muted brown */
  --line:#EAE5D8;         /* hairline */
  --yellow:#F6E69A;       /* pastel yellow highlight */
  --yellow-deep:#BE972A;  /* mustard — for small accents needing contrast */
  --card:#FFFFFF;
  --shadow:rgba(60,50,30,.07);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--bg);color:var(--ink);font-family:"Pretendard",sans-serif;-webkit-font-smoothing:antialiased;}
body{overflow-x:hidden;}
h1,h2,h3,h4{font-family:"Pretendard",sans-serif;font-weight:800;letter-spacing:-.025em;}
::selection{background:var(--yellow);color:var(--ink);}
a{color:inherit;text-decoration:none;}

/* ---------- Nav (centered floating pill) ---------- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:50;display:flex;justify-content:space-between;align-items:center;
     padding:18px clamp(20px,4vw,48px);background:transparent;}
.nav .logo{font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink);}
.nav .menu{position:absolute;left:50%;top:13px;transform:translateX(-50%);display:flex;gap:4px;align-items:center;
           background:rgba(252,251,247,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
           border:1px solid var(--line);border-radius:999px;padding:7px 9px;}
.nav .menu a{font-size:14px;color:var(--ink);font-weight:500;opacity:.62;padding:8px 16px;border-radius:999px;
             transition:opacity .25s,background .25s;letter-spacing:-.01em;}
.nav .menu a:hover{opacity:1;}
.nav .menu a.active{opacity:1;background:var(--yellow);font-weight:600;}
.nav-cta{font-size:13.5px;font-weight:600;color:var(--bg);background:var(--ink);border-radius:999px;padding:11px 22px;
         transition:transform .25s,opacity .25s;letter-spacing:-.01em;}
.nav-cta:hover{transform:translateY(-1px);opacity:.9;}
.nav-toggle{display:none;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer;line-height:1;}
@media(max-width:820px){
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav .menu{position:absolute;top:100%;left:0;transform:none;width:100%;flex-direction:column;gap:0;
             background:var(--bg);border:none;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0;
             max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .nav .menu.open{max-height:360px;}
  .nav .menu a{width:100%;padding:14px clamp(20px,5vw,40px);border-radius:0;opacity:.85;}
  .nav .menu a.active{background:none;color:var(--yellow-deep);}
}

/* ---------- Layout ---------- */
main{position:relative;z-index:1;}
section{position:relative;}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,40px);}
.narrow{max-width:720px;}
.eyebrow{font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--yellow-deep);font-weight:700;margin-bottom:22px;}

/* highlight marker for accent words */
.accent{background:linear-gradient(transparent 56%, var(--yellow) 56%);padding:0 .06em;border-radius:2px;}

/* ---------- HERO (main page) ---------- */
.hero{min-height:100vh;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
      gap:clamp(20px,4vw,56px);position:relative;padding:130px clamp(20px,5vw,56px) 90px;}
@media(max-width:880px){.hero{grid-template-columns:1fr;text-align:center;padding-top:118px;gap:10px;}}
.hero-left .eyebrow{margin-bottom:24px;}
.hero h1{font-size:clamp(46px,7.6vw,108px);line-height:1.0;color:var(--ink);font-weight:800;letter-spacing:-.045em;}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;}
.hero h1 .ln > span{display:inline-block;transform:translateY(110%);animation:lnUp .95s cubic-bezier(.2,.75,.2,1) forwards;}
.hero h1 .ln:nth-child(1) > span{animation-delay:.15s;}
.hero h1 .ln:nth-child(2) > span{animation-delay:.32s;}
@keyframes lnUp{to{transform:translateY(0);}}
.hero-left .eyebrow{animation:heroFadeUp .8s ease both .1s;}
.hero p{animation:heroFadeUp .9s ease both .55s;}
.hero-right{animation:heroFadeIn 1s ease both .3s;}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes heroFadeIn{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
.hero p{margin-top:32px;font-size:clamp(14px,1.5vw,17px);color:var(--ink-soft);max-width:430px;line-height:1.95;font-weight:300;}
@media(max-width:880px){.hero p{margin-left:auto;margin-right:auto;}}

/* right-side motion graphic (character turntable) */
.hero-right{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;}
@media(max-width:880px){.hero-right{margin-top:20px;min-height:300px;}}
.hero-stage{position:relative;width:min(440px,90%);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;}
.hero-stage .backdrop{position:absolute;inset:4%;border-radius:50%;
        background:radial-gradient(circle at 50% 46%, var(--panel) 0%, rgba(251,243,211,0) 68%);}
.hero-stage .ring{position:absolute;inset:7%;border:1px dashed rgba(190,151,42,.35);border-radius:50%;animation:spin360 26s linear infinite;}
.hero-stage .ring.r2{inset:16%;border-color:rgba(190,151,42,.18);animation-duration:40s;animation-direction:reverse;}
@keyframes spin360{to{transform:rotate(360deg);}}
.spin{position:relative;width:74%;aspect-ratio:78/90;z-index:1;}
.spin img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s ease;
          filter:drop-shadow(0 26px 26px rgba(60,50,30,.18));}
.spin img.on{opacity:1;}

.hero .scrollcue{position:absolute;bottom:32px;left:clamp(20px,5vw,56px);font-size:10.5px;letter-spacing:.3em;color:var(--ink-soft);display:flex;align-items:center;gap:10px;text-transform:uppercase;}
@media(max-width:880px){.hero .scrollcue{left:50%;transform:translateX(-50%);}}
.hero .scrollcue .line{width:34px;height:1px;background:linear-gradient(90deg,var(--ink-soft),transparent);}

/* ---------- Page hero (sub pages) ---------- */
.page-hero{padding:26vh 0 9vh;text-align:center;}
.page-hero h1{font-size:clamp(32px,5.5vw,64px);color:var(--ink);line-height:1.14;font-weight:800;letter-spacing:-.03em;}
.page-hero .quote{margin-top:26px;font-size:clamp(16px,2vw,22px);line-height:1.75;color:var(--ink);font-weight:600;letter-spacing:-.01em;}
.page-hero p.lead{margin-top:24px;font-size:clamp(15px,1.7vw,18px);line-height:1.95;color:var(--ink-soft);font-weight:300;}

/* ---------- Nav cards (main page → sub pages) ---------- */
.navcards{padding:4vh 0 18vh;}
.navcards .grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);}
@media(max-width:780px){.navcards .grid{grid-template-columns:1fr;}}
.navcard{display:block;padding:clamp(34px,4vw,56px) clamp(24px,3vw,44px);border-bottom:1px solid var(--line);transition:background .35s;}
.navcards .grid .navcard:first-child{border-right:1px solid var(--line);}
.navcard:hover{background:var(--panel);}
.navcard .idx{font-size:11.5px;letter-spacing:.26em;color:var(--yellow-deep);font-weight:700;text-transform:uppercase;}
.navcard h3{font-size:clamp(23px,3vw,31px);color:var(--ink);margin:16px 0 12px;font-weight:800;letter-spacing:-.02em;}
.navcard p{font-size:14.5px;line-height:1.8;color:var(--ink-soft);max-width:380px;}
.navcard .go{display:inline-block;margin-top:22px;color:var(--ink);font-weight:600;font-size:13.5px;letter-spacing:.02em;border-bottom:2px solid var(--yellow);padding-bottom:3px;transition:border-color .25s;}
.navcard:hover .go{border-color:var(--yellow-deep);}

/* ---------- Story / oven ---------- */
.story{padding:16vh 0;text-align:center;}
.story .big{font-size:clamp(25px,4.4vw,50px);color:var(--ink);line-height:1.38;font-weight:300;letter-spacing:-.02em;}
.story .big span{color:var(--ink);font-weight:800;background:linear-gradient(transparent 56%, var(--yellow) 56%);padding:0 .06em;}
.oven{margin:62px auto 0;width:min(380px,78vw);aspect-ratio:1/1;border-radius:18px;
      background:var(--panel);border:1px solid var(--line);
      display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.oven .glow{position:absolute;width:78%;height:78%;border-radius:50%;background:radial-gradient(circle,rgba(246,230,154,.6),transparent 70%);opacity:0;}
.oven .cake{font-size:clamp(64px,11vw,108px);transform:scale(.2);}

/* ---------- Generic content blocks ---------- */
.block{padding:8vh 0;}
.block h2{font-size:clamp(25px,4vw,42px);color:var(--ink);line-height:1.24;margin-bottom:26px;font-weight:800;letter-spacing:-.025em;}
.block p{font-size:clamp(14px,1.5vw,17px);line-height:2;color:var(--ink-soft);margin-bottom:18px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;}
@media(max-width:780px){.two{grid-template-columns:1fr;text-align:center;}}

/* character / info card */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:clamp(30px,4vw,48px);}
.card .who{width:160px;margin:0 auto;}
.card .who img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 22px var(--shadow));}
.card h3{font-size:23px;color:var(--ink);margin:18px 0 6px;text-align:center;font-weight:800;letter-spacing:-.02em;}
.card .role{font-size:11px;color:var(--yellow-deep);letter-spacing:.2em;text-transform:uppercase;text-align:center;margin-bottom:18px;font-weight:700;}
.card .desc{font-size:14.5px;line-height:1.9;color:var(--ink-soft);text-align:center;}

/* philosophy list */
.philo{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:24px;border-top:1px solid var(--line);}
@media(max-width:780px){.philo{grid-template-columns:1fr;}}
.philo .item{padding:34px 28px;border-bottom:1px solid var(--line);}
.philo .item:not(:last-child){border-right:1px solid var(--line);}
@media(max-width:780px){.philo .item:not(:last-child){border-right:none;}}
.philo .item .n{font-size:13px;color:var(--yellow-deep);letter-spacing:.14em;font-weight:700;}
.philo .item h4{font-size:18px;color:var(--ink);margin:12px 0 12px;font-weight:800;letter-spacing:-.02em;}
.philo .item p{font-size:13.5px;line-height:1.85;color:var(--ink-soft);margin:0;}

/* ---------- Puppy cards (project) ---------- */
.pups{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:780px){.pups{grid-template-columns:1fr;}}
.pup{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:38px 28px;text-align:center;transition:transform .4s;}
.pup:hover{transform:translateY(-6px);}
.pup .face{font-size:54px;filter:grayscale(.15);}
.pup .face img{width:120px;height:auto;margin:0 auto;display:block;}
.pup h4{font-size:21px;color:var(--ink);margin:16px 0 6px;font-weight:800;letter-spacing:-.02em;}
.pup .tag{font-size:10.5px;color:var(--yellow-deep);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;}
.pup .line{font-size:13.5px;line-height:1.8;color:var(--ink-soft);}

/* journey steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;border-top:1px solid var(--line);}
@media(max-width:780px){.steps{grid-template-columns:1fr;}}
.step{padding:32px 26px;border-bottom:1px solid var(--line);}
.step:not(:last-child){border-right:1px solid var(--line);}
@media(max-width:780px){.step:not(:last-child){border-right:none;}}
.step .n{color:var(--yellow-deep);font-size:14px;letter-spacing:.08em;font-weight:700;}
.step h4{font-size:17px;color:var(--ink);margin:10px 0 10px;font-weight:800;letter-spacing:-.02em;}
.step p{font-size:13.5px;line-height:1.8;color:var(--ink-soft);margin:0;}

/* meta chips */
.meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:52px;}
.meta span{border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:12.5px;color:var(--ink-soft);font-weight:500;letter-spacing:.02em;}

/* ---------- CTA / footer ---------- */
.cta{padding:18vh 0 0;text-align:center;}
.cta h2{font-size:clamp(27px,5vw,56px);color:var(--ink);line-height:1.2;font-weight:800;letter-spacing:-.03em;}
.cta p{margin-top:24px;color:var(--ink-soft);font-size:16px;line-height:1.8;}

/* glass / ghost button — fills pastel yellow on hover */
.btn{display:inline-block;margin-top:38px;font-family:"Pretendard";font-weight:600;font-size:13.5px;letter-spacing:.04em;
     color:var(--ink);padding:15px 36px;border-radius:999px;border:1px solid rgba(38,33,29,.22);
     background:rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
     transition:background .35s,color .35s,border-color .35s,transform .35s;}
.btn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow);transform:translateY(-2px);}

footer{margin-top:15vh;padding:48px 0;text-align:center;color:var(--ink-soft);font-size:13px;border-top:1px solid var(--line);}
footer .fl{font-weight:800;font-size:19px;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em;}

/* ---------- Character lineup (cast) ---------- */
.cast{padding:10vh 0 6vh;text-align:center;}
.cast .cast-title{font-size:clamp(24px,4vw,42px);color:var(--ink);font-weight:800;letter-spacing:-.025em;margin-bottom:8px;}
.cast .cast-sub{font-size:14px;color:var(--ink-soft);font-weight:300;margin-bottom:54px;}
.cast-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);align-items:end;}
@media(max-width:780px){.cast-row{grid-template-columns:repeat(2,1fr);gap:30px 14px;}}
.cast figure{margin:0;}
.cast figure img{width:78%;max-width:170px;height:auto;display:block;margin:0 auto 18px;
                 filter:drop-shadow(0 18px 18px rgba(60,50,30,.14));transition:transform .4s ease;}
.cast figure:hover img{transform:translateY(-12px);}
.cast figcaption{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.cast figcaption span{display:block;margin-top:5px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow-deep);}

/* ---------- Archive / gallery ---------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:46px;}
.gal-filter{font-family:"Pretendard";font-size:13px;font-weight:500;color:var(--ink-soft);
            border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 18px;cursor:pointer;
            transition:all .25s;}
.gal-filter:hover{color:var(--ink);}
.gal-filter.on{background:var(--yellow);border-color:var(--yellow);color:var(--ink);font-weight:600;}

.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:880px){.gal-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.gal-grid{grid-template-columns:1fr;}}
.gal-card{display:block;text-align:left;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;}
.gal-thumb{border:1px solid var(--line);border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--card);
           display:flex;align-items:center;justify-content:center;transition:transform .4s,box-shadow .4s;}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.gal-thumb.is-contain{background:var(--panel);}
.gal-thumb.is-contain img{object-fit:contain;padding:14% 12% 0;}
.gal-card:hover .gal-thumb{transform:translateY(-4px);box-shadow:0 20px 30px -20px var(--shadow);}
.gal-card:hover .gal-thumb img{transform:scale(1.03);}
.gal-meta{padding:16px 4px 0;}
.gal-meta .gal-cat{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow-deep);font-weight:700;}
.gal-meta h4{font-size:16px;color:var(--ink);margin:8px 0 6px;font-weight:700;letter-spacing:-.02em;line-height:1.4;}
.gal-meta .gal-date{font-size:12px;color:var(--ink-soft);font-weight:300;}

/* modal */
.gal-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px;}
.gal-modal.open{display:flex;}
.gal-modal-bg{position:absolute;inset:0;background:rgba(40,30,20,.5);backdrop-filter:blur(4px);}
.gal-modal-card{position:relative;z-index:1;background:var(--bg);border-radius:20px;overflow:hidden;
                max-width:860px;width:100%;max-height:88vh;display:grid;grid-template-columns:1.1fr 1fr;
                box-shadow:0 40px 80px -30px rgba(40,30,20,.4);}
@media(max-width:680px){.gal-modal-card{grid-template-columns:1fr;max-height:90vh;overflow-y:auto;}}
.gal-modal-media{background:var(--panel);display:flex;align-items:center;justify-content:center;min-height:280px;}
.gal-modal-media img{width:100%;height:100%;object-fit:cover;}
.gal-modal-media img.is-contain{object-fit:contain;padding:10%;}
.gal-modal-body{padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:center;}
.gal-modal-cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow-deep);font-weight:700;margin-bottom:14px;}
.gal-modal-body h3{font-size:clamp(20px,2.4vw,27px);color:var(--ink);font-weight:800;letter-spacing:-.025em;line-height:1.3;}
.gal-modal-date{font-size:12.5px;color:var(--ink-soft);font-weight:300;margin:10px 0 20px;}
.gal-modal-body p{font-size:14.5px;line-height:1.95;color:var(--ink-soft);font-weight:300;}
.gal-modal-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;
                 border:1px solid var(--line);background:rgba(252,251,247,.85);color:var(--ink);cursor:pointer;font-size:13px;}
.gal-modal-close:hover{background:var(--yellow);}

/* ---------- reveal + paw ---------- */
.reveal{opacity:0;transform:translateY(36px);}
.paw-print{position:fixed;z-index:45;pointer-events:none;width:20px;height:20px;
           opacity:0;color:var(--yellow-deep);transform:translate(-50%,-50%) rotate(var(--r,0deg));}
.paw-print svg{width:100%;height:100%;display:block;}