:root{
  --sidebar-width:210px;
  --ink:#111;
  --paper:#f5f1e8;
  --acid:#f2ff38;
  --pink:#ff5c9b;
  --blue:#5b7cff;
  --line:#171717;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
[hidden]{display:none!important}


/* SIDEBAR */

.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  z-index:20;
  width:var(--sidebar-width);
  height:100vh;
  padding:42px 22px 28px;
  background:var(--paper);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
}

.logo-link{
  display:block;
  width:max-content;
  margin-bottom:52px;
}

.site-logo{
  width:118px;
  max-height:72px;
  object-fit:contain;
  object-position:left center;
}

.logo-fallback{
  font-family:"Comic Sans MS","Segoe Print",cursive;
  font-size:32px;
  font-weight:700;
}

.sidebar-nav{
  display:grid;
  gap:16px;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sidebar-nav a:hover{transform:translateX(5px)}

.sidebar-tag{
  margin-top:auto;
  font-size:10px;
  line-height:1.65;
  letter-spacing:.18em;
}

.mobile-header,.mobile-nav{display:none}

.page-content{
  margin-left:var(--sidebar-width);
  min-width:0;
}


/* HERO */

.hero{
  position:relative;
  min-height:720px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  border-bottom:1px solid var(--line);
}

.hero-copy{
  padding:90px 6vw 70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:.25em;
  margin-bottom:24px;
}

.hero h1{
  margin:0;
  max-width:850px;
  font-size:clamp(58px,6.2vw,112px);
  line-height:.84;
  letter-spacing:-.07em;
}

.hero-copy p{
  max-width:520px;
  margin:34px 0;
  font-size:17px;
  line-height:1.55;
}

.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.button{
  padding:16px 22px;
  border:1px solid var(--ink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
}

.button-dark{
  background:var(--ink);
  color:#fff;
}

.button-light:hover{background:var(--acid)}

.hero-art{
  position:relative;
  overflow:hidden;
  background:var(--acid);
  display:flex;
  align-items:center;
  justify-content:center;
  border-left:1px solid var(--line);
}

.hero-art>img,
.meet-art>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero-art.has-image .hero-word,
.hero-art.has-image .hero-bubble,
.meet-art.has-image span,
.meet-art.has-image strong{
  display:none;
}

.hero-word{
  position:relative;
  z-index:1;
  font-size:clamp(70px,9vw,160px);
  font-weight:900;
  letter-spacing:-.09em;
  transform:rotate(-8deg);
}

.hero-bubble{
  position:absolute;
  z-index:2;
  right:8%;
  top:12%;
  width:130px;
  height:130px;
  border-radius:50%;
  background:var(--pink);
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:900;
  font-size:18px;
  transform:rotate(9deg);
}


/* SECTIONS */

.feature-section{
  position:relative;
  padding:80px 6vw 100px;
  border-bottom:1px solid var(--line);
}

.section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:42px;
}

.section-heading>div{
  display:flex;
  gap:20px;
  align-items:start;
}

.section-heading span,
.free-title>span{
  font-size:11px;
  font-weight:800;
}

.section-heading h2{
  margin:0;
  font-size:clamp(42px,5vw,76px);
  letter-spacing:-.06em;
  line-height:.9;
}

.section-heading p{
  margin:0;
  font-size:13px;
}


/* CARTOONS */

.cartoon-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.cartoon-card{
  position:relative;
  display:block;
  min-width:0;
}

.poster{
  position:relative;
  padding:0;
  display:block;
  overflow:hidden;
  background:transparent;
  color:#111;
  transition:.2s;
}

.poster:hover{transform:translateY(-5px)}

.poster-media{
  position:relative;
  aspect-ratio:9/13;
  overflow:hidden;
  background:#ddd;
}

.poster-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.poster-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:28px;
  text-align:center;
  font-size:clamp(28px,3vw,52px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.05em;
}

.poster-caption{
  min-height:118px;
  padding:20px 22px 18px;
  display:flex;
  align-items:flex-end;
  font-size:clamp(24px,2.4vw,42px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.05em;
  overflow:hidden;
}

.poster b{
  position:absolute;
  z-index:2;
  right:20px;
  top:20px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  color:#111;
  display:grid;
  place-items:center;
  font-size:15px;
}

.cartoon-card:nth-child(1) .poster-caption,
.cartoon-card:nth-child(1) .poster-placeholder{
  background:var(--pink);
}

.cartoon-card:nth-child(2) .poster-caption,
.cartoon-card:nth-child(2) .poster-placeholder{
  background:var(--blue);
  color:#fff;
}

.cartoon-card:nth-child(3) .poster-caption,
.cartoon-card:nth-child(3) .poster-placeholder{
  background:var(--acid);
}

.cartoon-card:nth-child(4n) .poster-caption,
.cartoon-card:nth-child(4n) .poster-placeholder{
  background:#ff9f1c;
}

.cartoon-card:nth-child(5n) .poster-caption,
.cartoon-card:nth-child(5n) .poster-placeholder{
  background:#65d6c5;
}


/* ABOUT */

.meet-section{
  position:relative;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  min-height:600px;
  border-bottom:1px solid var(--line);
}

.meet-art{
  position:relative;
  background:#111;
  color:var(--acid);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(100px,14vw,240px);
  font-weight:900;
  letter-spacing:-.1em;
  overflow:hidden;
}

.meet-art span{
  position:relative;
  z-index:1;
  transform:rotate(-90deg);
  font-size:.35em;
  margin-right:-.3em;
}

.meet-art strong{
  position:relative;
  z-index:1;
}

.meet-copy{
  padding:70px 5vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.meet-copy h2{
  margin:0 0 28px;
  font-size:clamp(55px,6vw,95px);
  line-height:.82;
  letter-spacing:-.07em;
}

.meet-copy p{
  max-width:390px;
  line-height:1.6;
  font-size:15px;
}

.text-link{
  margin-top:22px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-decoration:underline;
}


/* SHOP */

.shop-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.shop-card{
  position:relative;
  border:1px solid var(--line);
  padding-bottom:24px;
  overflow:hidden;
}

.shop-visual{
  position:relative;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  background:#fff;
  font-size:clamp(40px,6vw,90px);
  font-weight:900;
  letter-spacing:-.08em;
  overflow:hidden;
}

.shop-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.shop-visual.has-image .shop-placeholder{
  display:none;
}

.shop-card:nth-child(2) .shop-visual{
  background:var(--pink);
}

.shop-card:nth-child(3) .shop-visual{
  background:var(--blue);
  color:#fff;
}

/* SHOP TEKST - ISPRAVLJENO */

.shop-card h3,
.shop-card>span{
  margin-left:20px;
  margin-right:20px;
}

.shop-card h3{
  font-size:18px;
  margin-top:18px;
  margin-bottom:10px;
}

.shop-card>span{
  display:block;
  font-size:11px;
  line-height:1.5;
}


/* FREE STUFF */

.free-section{
  position:relative;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  background:var(--acid);
  border-bottom:1px solid var(--line);
}

.free-title{
  padding:70px 6vw;
  display:flex;
  gap:20px;
}

.free-title h2{
  margin:0;
  font-size:clamp(65px,8vw,130px);
  line-height:.78;
  letter-spacing:-.08em;
}

.free-links{
  border-left:1px solid var(--line);
}

.free-links a{
  min-height:145px;
  padding:30px 4vw;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.free-links a:last-child{border-bottom:0}

.free-links b{font-size:22px}

.free-links span{
  font-size:11px;
  text-align:right;
}


/* FOOTER */

footer{
  position:relative;
  background:#111;
  color:#fff;
  padding:80px 6vw 35px;
}

.footer-big{
  font-size:clamp(70px,10vw,170px);
  font-weight:900;
  line-height:.78;
  letter-spacing:-.08em;
}

.footer-small{
  margin-top:70px;
  font-size:9px;
  letter-spacing:.2em;
}


/* ADMIN */

.admin-bar{
  position:fixed;
  z-index:1000;
  left:var(--sidebar-width);
  right:0;
  top:0;
  min-height:48px;
  padding:9px 15px;
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:11px;
  letter-spacing:.08em;
}

.admin-bar button{
  border:1px solid #fff;
  padding:8px 12px;
  background:#fff;
  color:#111;
  font-weight:800;
  font-size:10px;
  cursor:pointer;
}

.admin-bar .admin-secondary{
  background:transparent;
  color:#fff;
}

.admin-bar #saveStatus{
  margin-left:auto;
  letter-spacing:0;
}

body.admin-authenticated .page-content{
  padding-top:48px;
}

body.admin-authenticated .sidebar{
  padding-top:76px;
}

.section-edit-button{
  display:none;
  position:absolute;
  z-index:50;
  right:16px;
  top:16px;
  border:0;
  background:#111;
  color:#fff;
  padding:9px 12px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  cursor:pointer;
}

body.admin-authenticated .section-edit-button{
  display:block;
}

body.admin-authenticated .admin-editable-section{
  outline:1px dashed rgba(0,0,0,.25);
  outline-offset:-6px;
}

body.admin-authenticated footer.admin-editable-section{
  outline-color:rgba(255,255,255,.4);
}

.admin-login,
.edit-modal{
  position:fixed;
  z-index:1200;
  inset:0;
  background:rgba(0,0,0,.72);
  display:grid;
  place-items:center;
  padding:20px;
}

.admin-login-card,
.edit-panel{
  width:min(680px,100%);
  max-height:90vh;
  overflow:auto;
  background:var(--paper);
  border:1px solid #111;
  padding:28px;
}

.admin-login-card{
  position:relative;
  width:min(420px,100%);
}

.admin-login-card h2,
.edit-panel h2{
  margin:0 0 24px;
  font-size:32px;
}

.admin-login-card label,
.edit-panel label{
  display:grid;
  gap:7px;
  margin:14px 0;
  font-size:11px;
  font-weight:800;
}

.admin-login-card input,
.edit-panel input,
.edit-panel textarea{
  width:100%;
  border:1px solid #111;
  background:#fff;
  padding:11px;
  font:inherit;
}

.admin-login-close,
#closeEditPanel{
  border:0;
  background:transparent;
  font-size:30px;
  cursor:pointer;
}

.admin-login-close{
  position:absolute;
  right:14px;
  top:10px;
}

.login-submit{
  width:100%;
  margin-top:12px;
  border:0;
  background:#111;
  color:#fff;
  padding:13px;
  font-weight:800;
  cursor:pointer;
}

#loginStatus{
  margin-top:12px;
  font-size:12px;
}

.edit-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:start;
}

.edit-group{
  padding:16px 0;
  border-top:1px solid #bbb;
}

.edit-group:first-child{
  border-top:0;
}

.edit-group h3{
  margin:0 0 14px;
}

.edit-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.edit-panel .danger{
  background:#8c1515;
  color:#fff;
  border:0;
  padding:8px 10px;
  cursor:pointer;
}

.edit-panel .add-button{
  background:#111;
  color:#fff;
  border:0;
  padding:10px 12px;
  font-weight:800;
  cursor:pointer;
  margin-top:10px;
}

.edit-panel .item-box{
  border:1px solid #999;
  padding:14px;
  margin:12px 0;
  background:#fff;
}

.edit-help{
  font-size:11px;
  color:#555;
  line-height:1.5;
}

.admin-login-trigger{
  position:fixed;
  z-index:900;
  right:8px;
  bottom:8px;
  width:8px;
  height:8px;
  opacity:.02;
  cursor:pointer;
}


/* MOBILE */

@media(max-width:850px){

  .sidebar{display:none}

  .mobile-header{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:62px;
    padding:12px 18px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }

  body.admin-authenticated .mobile-header{
    top:48px;
  }

  .mobile-logo img{
    width:92px;
    max-height:45px;
    object-fit:contain;
  }

  .mobile-menu-button{
    border:0;
    background:transparent;
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
  }

  .mobile-nav{
    position:sticky;
    top:62px;
    z-index:29;
    padding:18px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }

  body.admin-authenticated .mobile-nav{
    top:110px;
  }

  .mobile-nav.open{
    display:grid;
    gap:16px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
  }

  .page-content{
    margin-left:0;
  }

  body.admin-authenticated .page-content{
    padding-top:0;
  }

  .admin-bar{
    left:0;
    overflow-x:auto;
    white-space:nowrap;
  }

  .hero{
    min-height:0;
    grid-template-columns:1fr;
  }

  .hero-copy{
    padding:60px 20px 55px;
  }

  .hero h1{
    font-size:58px;
  }

  .hero-copy p{
    font-size:15px;
  }

  .hero-art{
    min-height:360px;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .hero-word{
    font-size:75px;
  }

  .hero-bubble{
    width:100px;
    height:100px;
    font-size:14px;
  }

  .feature-section{
    padding:55px 18px 70px;
  }

  .section-heading{
    display:block;
  }

  .section-heading p{
    margin-top:18px;
  }

  .section-heading h2{
    font-size:48px;
  }

  .cartoon-grid{
    display:flex;
    overflow-x:auto;
    gap:14px;
    padding-bottom:12px;
    scroll-snap-type:x mandatory;
  }

  .cartoon-card{
    flex:0 0 78%;
    scroll-snap-align:start;
  }

  .poster-caption{
    font-size:30px;
    min-height:105px;
  }

  .poster-placeholder{
    font-size:30px;
  }

  .meet-section{
    grid-template-columns:1fr;
  }

  .meet-art{
    min-height:360px;
    font-size:110px;
  }

  .meet-copy{
    padding:55px 20px 65px;
  }

  .shop-grid{
    grid-template-columns:1fr;
  }

  .free-section{
    grid-template-columns:1fr;
  }

  .free-title{
    padding:55px 20px;
  }

  .free-title h2{
    font-size:72px;
  }

  .free-links{
    border-left:0;
    border-top:1px solid var(--line);
  }

  .free-links a{
    min-height:115px;
    padding:25px 20px;
    display:block;
  }

  .free-links span{
    display:block;
    margin-top:8px;
    text-align:left;
  }

  footer{
    padding:60px 20px 30px;
  }

  .footer-big{
    font-size:70px;
  }

  .edit-row{
    grid-template-columns:1fr;
  }
}


/* ADMIN SAVE BAR */

.edit-panel-actions{
  position:sticky;
  bottom:-28px;
  margin:24px -28px -28px;
  padding:14px 28px;
  background:var(--paper);
  border-top:1px solid #111;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  z-index:5;
}

.edit-save-button{
  border:0;
  background:#111;
  color:#fff;
  padding:12px 18px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}

.edit-save-button:disabled{
  opacity:.5;
  cursor:wait;
}

.edit-local-status{
  margin-right:auto;
  font-size:11px;
  font-weight:700;
}