/* ====================================================
   mottool v12 — refined
==================================================== */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--ink);transition:background .4s,color .4s}

:root{
  --bg:#fff;
  --ink:#000;
  --sub:#666;
  --mute:#aaa;
  --line:#eee;
  --card-bg:#f5f4ee;
  --side-bg:#fff;
}
html.dark{
  --bg:#0e0e10;
  --ink:#e8e4da;
  --sub:#999;
  --mute:#555;
  --line:#222;
  --card-bg:#1a1a1c;
  --side-bg:#0e0e10;
}
body{
  font-family:"Pretendard Variable","Pretendard","Inter",-apple-system,sans-serif;
  font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;outline:0}

/* ============ INTRO SPLASH (mobile) ============ */
.intro{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .7s ease;
}
.intro.on{opacity:1;pointer-events:auto}
.intro.hide{opacity:0;pointer-events:none}
.intro.gone{display:none}

.intro-in{
  display:flex;flex-direction:column;align-items:center;
  gap:28px;
  padding:30px;
  opacity:0;transform:translateY(16px);
  animation:introRise .9s cubic-bezier(.2,.8,.2,1) .25s forwards;
}
@keyframes introRise{
  to{opacity:1;transform:translateY(0)}
}

.intro-logo{
  width:min(240px, 62vw);
  height:auto;
  display:block;
  animation:introBreath 3s ease-in-out 1s infinite;
  transition:filter .4s;
}
html.dark .intro-logo{filter:invert(1)}
@keyframes introBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.03)}
}

.intro-tag{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:13px;line-height:1.55;letter-spacing:.02em;
  color:var(--ink);text-align:center;
  max-width:320px;
}
.intro-nav{
  display:flex;flex-direction:column;gap:10px;align-items:center;
  margin-top:8px;
}
.intro-nav a{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:22px;font-weight:700;letter-spacing:-0.01em;
  color:var(--ink);
}
.intro-nav a:hover{color:var(--sub)}

.intro-hint{
  margin-top:16px;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;color:var(--mute);letter-spacing:.16em;
  animation:introPulse 1.6s ease-in-out infinite;
}
@keyframes introPulse{
  0%,100%{opacity:.6}
  50%{opacity:1}
}

/* ============ SIDE NAV ============ */
.side{
  position:fixed;top:0;left:0;
  width:220px;height:100vh;height:100dvh;
  padding:32px 28px;
  background:var(--side-bg);
  display:flex;flex-direction:column;
  z-index:60;
  transition:background .4s;
}

.side-mascot{
  display:flex;justify-content:center;
  width:100%;
  margin-bottom:60px;
}
.side-mascot img{
  width:100%;max-width:180px;
  height:auto;display:block;
}
html.dark .side-mascot img{filter:invert(1)}

.side-search{margin-bottom:24px}
.side-search input{
  width:100%;
  padding:8px 0;
  border:0;border-bottom:1px solid var(--line);
  background:transparent;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:16px;color:var(--ink);
  outline:0;
  transition:border-color .2s;
}
.side-search input:focus{border-color:var(--ink)}
.side-search input::placeholder{color:var(--mute);font-size:13px}

.side-nav{
  display:flex;flex-direction:column;gap:10px;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:32px;font-weight:700;letter-spacing:-0.02em;
  line-height:1.05;
  color:var(--ink);
  text-transform:uppercase;
  margin-top:0;
  margin-bottom:auto;
}
.side-nav a{color:var(--ink);padding:2px 0;display:block}
.side-nav a:hover{color:var(--sub)}
.side-nav a.on{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.side-nav a:first-child{font-size:18px;font-weight:500;letter-spacing:.04em;margin-bottom:14px;color:var(--sub)}
.side-nav a:first-child:hover{color:var(--ink)}

/* ============ SCROLL TO TOP ============ */
.scroll-top{
  position:fixed;
  bottom:72px;right:24px;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  color:var(--ink);
  background:var(--bg);
  z-index:130;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s, transform .3s, bottom .3s;
  cursor:pointer;
}
.scroll-top.show{
  opacity:.3;
  pointer-events:auto;
}
.scroll-top.show:hover{
  opacity:1;
  transform:translateY(-2px);
}
.scroll-top.above-bar{bottom:134px}

.dark-toggle{
  position:fixed;
  bottom:24px;right:24px;
  width:40px;height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  color:var(--ink);
  background:var(--bg);
  z-index:130;
  opacity:.2;
  transition:opacity .4s ease, border-color .3s, transform .3s, background .3s, bottom .3s;
  cursor:pointer;
}
.dark-toggle.above-bar{
  bottom:86px;
}
.dark-toggle:hover{
  opacity:1;
  border-color:var(--ink);
  transform:rotate(180deg);
}
.dark-toggle.flash{
  opacity:1;
  border-color:var(--ink);
}

.brand-mark{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  margin-top:12px;
  align-self:flex-end;
}
.brand-mark img{
  width:64px;height:auto;
  display:block;
}
html.dark .brand-mark img{filter:invert(1)}
.brand-mark span{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:600;font-size:16px;letter-spacing:-0.02em;
  color:var(--ink);
}

/* Mobile-only elements hidden on desktop */
.m-trigger,
.side-close,
.side-overlay{display:none}

/* ============ MAIN ============ */
.main{
  margin-left:220px;
  padding:32px 36px 60px;
  min-height:100vh;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:50px 20px;
}
@media (max-width:760px){
  .grid{
    display:block;
  }
  .card{
    position:sticky;
    top:70px;
    background:var(--bg);
    padding:0;
    margin-bottom:0;
    transform-origin:center top;
    animation:none;
    opacity:1;
    transform:none;
    z-index:1;
  }
  .card .cv{
    margin-bottom:4px;
  }
  .card .meta{
    background:var(--bg);
    padding:4px 0 16px;
  }
}

/* ============ CARD ============ */
.card{
  display:flex;flex-direction:column;
  font-size:11px;
  opacity:0;
  transform:translateY(24px);
  animation:cardIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes cardIn{
  to{opacity:1;transform:translateY(0)}
}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.1s}
.card:nth-child(3){animation-delay:.15s}
.card:nth-child(4){animation-delay:.2s}
.card:nth-child(5){animation-delay:.25s}
.card:nth-child(6){animation-delay:.3s}
.card:nth-child(7){animation-delay:.35s}
.card:nth-child(8){animation-delay:.4s}
.card:nth-child(9){animation-delay:.45s}
.card:nth-child(10){animation-delay:.5s}
.card:nth-child(11){animation-delay:.55s}
.card:nth-child(12){animation-delay:.6s}
.card:nth-child(n+13){animation-delay:.65s}

/* Cover: no fixed aspect, image defines its height */
.cv{
  display:block;
  background:var(--card-bg);
  position:relative;overflow:hidden;
  margin-bottom:6px;
  transition:background .4s;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.cv img{
  width:100%;height:auto;
  display:block;
  background:var(--bg);
  transition:background .4s;
}
/* Placeholder cards keep a book-like ratio */
.ph{
  display:block;
  width:100%;
  aspect-ratio:1/1.3;
}

.cv{transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease}
.meta{transition:all .3s ease}
@media (min-width:761px){
  .card:hover .cv{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.14);
  }
  .card:hover .meta p:first-child{
    font-size:14px;
    font-weight:700;
    letter-spacing:.01em;
  }
  .card:hover .meta p:nth-child(2){
    font-size:12px;
    font-weight:600;
    color:var(--ink);
  }
  .card:hover .meta p:nth-child(3),
  .card:hover .meta p:last-child{
    font-size:12px;
    font-weight:500;
  }
}

.card.sold .cv{opacity:.55}
.card.sold .meta p:last-child{color:var(--ink);font-weight:500}

.meta{
  display:flex;flex-direction:column;
  gap:1px;
  padding-top:2px;
}
.meta p{
  font-size:11px;line-height:1.45;
  color:var(--ink);letter-spacing:.005em;
  transition:font-size .3s ease, font-weight .3s ease, color .3s ease;
}
.meta p:first-child{
  font-weight:500;
  text-transform:uppercase;
}
.meta p:nth-child(2){color:var(--sub);font-size:10px}
.meta p:nth-child(3){color:var(--mute);font-size:10px;margin-top:2px}
.meta p:last-child{color:var(--ink);font-size:11px;margin-top:1px}

/* ============ DETAIL PAGE ============ */
.detail{
  position:fixed;inset:0;
  background:var(--bg);
  z-index:120;
  visibility:hidden;
  opacity:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transition:opacity .45s ease, visibility 0s .45s;
}
.detail.on{
  visibility:visible;
  opacity:1;
  transition:opacity .45s ease, visibility 0s 0s;
}

/* staggered entrance for detail children */
.detail.on .dt-bar{animation:dtFade .5s .1s both}
.detail.on .dt-hero{animation:dtUp .6s .15s cubic-bezier(.2,.8,.2,1) both}
.detail.on .dt-slider{animation:dtUp .6s .3s cubic-bezier(.2,.8,.2,1) both}
.detail.on .dt-body{animation:dtUp .6s .45s cubic-bezier(.2,.8,.2,1) both}
.detail.on .dt-buybar{animation:dtSlideUp .4s .55s cubic-bezier(.2,.8,.2,1) both}

@keyframes dtFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes dtUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes dtSlideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

/* top bar */
.dt-bar{
  position:sticky;top:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(20px,3vw,40px);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  z-index:10;
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:12px;letter-spacing:.04em;
  transition:background .4s,border-color .4s;
}
html.dark .dt-bar{
  background:rgba(14,14,16,.92);
  border-bottom-color:rgba(255,255,255,.15);
}
.dt-back{
  font:inherit;color:var(--ink);
  padding:6px 10px;
  border:1px solid var(--ink);border-radius:999px;
  background:var(--bg);
  transition:background .2s,color .2s,border-color .2s;
}
.dt-back:hover{background:var(--ink);color:var(--bg)}
html.dark .dt-back{color:var(--ink);border-color:var(--ink);background:transparent}
html.dark .dt-back:hover{background:var(--ink);color:var(--bg)}
.dt-ix{color:var(--mute);font-family:"JetBrains Mono",monospace;font-size:11px}

/* hero */
.dt-hero{
  padding:clamp(48px,8vw,120px) clamp(20px,4vw,60px) clamp(32px,5vw,72px);
  max-width:1200px;margin:0 auto;
}
.dt-kicker{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);
  margin-bottom:clamp(16px,3vw,32px);
}
.dt-h{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:600;
  font-size:clamp(40px,7vw,104px);
  letter-spacing:-0.04em;line-height:.95;
  color:var(--ink);
  margin-bottom:clamp(14px,2vw,24px);
}
.dt-byline{
  font-size:clamp(14px,1.4vw,18px);color:var(--sub);
  font-family:"Space Grotesk","Inter",sans-serif;
}
.dt-byline em{
  font-style:normal;font-weight:600;color:var(--ink);
  letter-spacing:.02em;
}

/* ---------- Slider ---------- */
.dt-slider{
  position:relative;
  background:var(--card-bg);
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
  overflow:hidden;
  max-width:1200px;margin:0 auto;
}
.dt-counter{
  position:absolute;top:16px;right:16px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:6px 12px;border-radius:999px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;letter-spacing:.06em;color:#fff;
  z-index:3;
}
.dt-slides{
  display:flex;
  width:100%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.dt-slide{
  flex:0 0 100%;
  display:block;
}
.dt-slide img{
  width:100%;height:auto;
  display:block;
  background:var(--card-bg);
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}
.dt-dots{
  position:absolute;
  bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;
  background:rgba(255,255,255,.85);
  padding:6px 10px;border-radius:999px;
  z-index:3;
}
.dt-dots button{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--mute);
  border:0;padding:0;cursor:pointer;
  transition:background .2s, transform .2s;
}
.dt-dots button:hover{background:var(--sub)}
.dt-dots button.on{background:var(--ink);transform:scale(1.25)}
.dt-dots.scrub{
  transform:translateX(-50%) scale(1.3);
  background:rgba(255,255,255,.95);
  padding:8px 14px;
  transition:transform .15s, padding .15s;
}
.dt-dots.scrub button{width:8px;height:8px}
.dt-dots.scrub button.on{transform:scale(1.5)}
.dt-dots.tick{transform:translateX(-50%) scale(1.35)}
.dt-dots.tick button.on{transform:scale(1.8)}
.dt-slider{
  cursor:grab;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.dt-slider:active{cursor:grabbing}

/* ---------- Magnifier loupe ---------- */
.mag{
  position:fixed;
  width:200px;height:200px;
  pointer-events:none;
  z-index:200;
  display:none;
  transform:translate(-50%,-110%);
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.25));
}
.mag.on{display:block;animation:magPop .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes magPop{
  from{transform:translate(-50%,-110%) scale(.4);opacity:0}
  to{transform:translate(-50%,-110%) scale(1);opacity:1}
}
.mag-svg{width:100%;height:100%;overflow:visible}
.mag-lens{
  width:200px;height:200px;
  background-color:var(--card-bg);
  background-repeat:no-repeat;
}

/* ---------- Body: description + specs ---------- */
.dt-body{
  max-width:1200px;margin:0 auto;
  padding:clamp(40px,6vw,80px) clamp(20px,4vw,60px) clamp(60px,8vw,120px);
  display:grid;
  grid-template-columns:1fr 380px;
  gap:clamp(32px,5vw,80px);
}
@media (max-width:880px){
  .dt-body{grid-template-columns:1fr;gap:40px}
}
.dt-label{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;letter-spacing:.2em;color:var(--mute);
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--ink);
}
.dt-desc-col .dt-desc{
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.7;color:var(--ink);
  margin-bottom:16px;
  max-width:560px;
}
.dt-desc-col .dt-desc em{
  font-style:normal;font-weight:600;
  border-bottom:2px solid var(--ink);
  padding-bottom:1px;
}

.dt-spec-list{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 20px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
}
.dt-spec-list dt{
  color:var(--mute);letter-spacing:.02em;
  padding-top:3px;
}
.dt-spec-list dd{
  color:var(--ink);
  padding-bottom:10px;
  border-bottom:1px dotted var(--line);
}

/* ---------- Sticky buy bar ---------- */
.dt-buybar{
  position:sticky;bottom:0;
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;
  padding:14px clamp(20px,3vw,40px);
  background:var(--ink);color:var(--bg);
  z-index:5;
}
.dt-buy-info{display:flex;flex-direction:column;gap:2px}
.dt-buy-title{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:12px;font-weight:500;
  color:var(--bg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw;
}
.dt-buy-meta{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;color:var(--mute);letter-spacing:.06em;
}
.dt-cta{
  display:inline-block;
  padding:10px 18px;
  background:var(--bg);color:var(--ink);
  font-family:"Space Grotesk","Inter",sans-serif;
  font-weight:600;font-size:11px;letter-spacing:.12em;
  border-radius:999px;
  white-space:nowrap;
}
.dt-cta:hover{background:var(--line)}

@media (max-width:520px){
  .dt-buy-title{max-width:50vw;font-size:11px}
  .dt-buy-meta{font-size:9px}
  .dt-cta{padding:8px 14px;font-size:10px}
}

/* ============ FOOTER ============ */
.ftr{
  margin-left:220px;
  border-top:1px solid var(--line);
  padding:40px 36px 24px;
  font-size:12px;
  background:var(--bg);
  transition:background .4s;
}
.ftr-top{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:28px;
  padding-bottom:28px;
}
.ftr-brand{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:28px;font-weight:700;letter-spacing:-0.03em;
  color:var(--ink);line-height:1;
}
.ftr-tag{
  font-size:12px;color:var(--mute);margin-top:6px;letter-spacing:.04em;
}
.ftr-label{
  font-family:"Space Grotesk","Inter",sans-serif;
  font-size:10px;font-weight:600;letter-spacing:.14em;
  color:var(--mute);text-transform:uppercase;
  margin-bottom:8px;
}
.ftr-col p{line-height:1.6;color:var(--sub)}
.ftr-col a{color:var(--ink);border-bottom:1px solid var(--line)}
.ftr-col a:hover{border-color:var(--ink)}
.ftr-bottom{
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--mute);font-size:11px;
}

/* ============ MOBILE ============ */
@media (max-width:760px){
  /* Hide desktop header bar: side becomes a slide-out drawer */
  .side{
    width:78%;max-width:320px;
    padding:120px 24px 40px;
    transform:translateX(-100%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:8px 0 40px rgba(0,0,0,.08);
    z-index:110;
  }
  .side.open{transform:translateX(0)}
  .side-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:14px;
    width:32px;height:32px;
    font-size:18px;color:var(--ink);
    background:transparent;
  }
  .side-mascot{display:none}
  .side-overlay{
    display:block;position:fixed;inset:0;
    background:rgba(0,0,0,.35);
    z-index:100;
    opacity:0;pointer-events:none;
    transition:opacity .3s;
  }
  .side-overlay.on{opacity:1;pointer-events:auto}

  /* Mobile fixed trigger (center-top mascot) */
  .m-trigger{
    display:block;
    position:fixed;
    top:16px;left:50%;
    transform:translateX(-50%);
    width:min(220px, 58vw);height:auto;
    padding:6px;
    z-index:90;
    background:transparent;
    line-height:0;
  }
  .m-trigger img{
    width:100%;height:auto;
    display:block;
    transition:filter .25s ease;
  }
  .m-trigger.inverted img{filter:invert(1)}
  html.dark .m-trigger img{filter:invert(1)}
  .m-trigger:active img{transform:scale(.96)}

  .main{margin-left:0;padding:120px 16px 40px}
  .ftr{margin-left:0;padding:32px 16px 20px}
  .ftr-top{grid-template-columns:1fr 1fr;gap:24px}
}

@media (max-width:380px){
  .meta p{font-size:10px}
  .meta p:nth-child(2),.meta p:nth-child(3){font-size:9px}
  .m-trigger{width:min(180px, 62vw);top:10px}
}