:root{
    --paper: #f2efe4;
    --paper-2: #ece7d8;
    --moss-900: #17301d;
    --moss-800: #1f3f26;
    --moss-700: #2c5330;
    --moss-600: #3a6a3b;
    --moss-400: #6f9a63;
    --moss-200: #cfe0c4;
    --ink: #22391f;
    --cream: #f4f1e6;
    --line: 3.5px;

    --shadow-soft: rgba(23,48,29,0.14);
    --shadow-soft-hover: rgba(23,48,29,0.18);
    --shadow-strong: rgba(23,48,29,0.18);
    --dot: rgba(23,48,29,0.055);
    --grain: rgba(23,48,29,0.06);
    --grain-blend: multiply;
    --selection: var(--moss-200);
  }

  :root[data-theme="dark"]{
    --paper: #0f1c13;
    --paper-2: #16281a;
    --moss-900: #e9f3e2;
    --moss-800: #7fe07a;
    --moss-700: #6cc766;
    --moss-600: #58b352;
    --moss-400: #8fae86;
    --moss-200: #1d3120;
    --ink: #d8e8d0;
    --cream: #0f1c13;

    --shadow-soft: rgba(0,0,0,0.45);
    --shadow-soft-hover: rgba(0,0,0,0.55);
    --shadow-strong: rgba(0,0,0,0.55);
    --dot: rgba(233,243,226,0.06);
    --grain: rgba(233,243,226,0.05);
    --grain-blend: screen;
    --selection: rgba(108,199,102,0.35);
  }

  *{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--paper);
    background-image:
      radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
    background-size: 22px 22px;
    color:var(--ink);
    font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    -webkit-font-smoothing:antialiased;
    transition:background-color .25s ease, color .25s ease;
  }

  a{ color:inherit; }

  .wrap{
    max-width:960px;
    margin:0 auto;
    padding:0 28px 100px;
  }

  /* ---------- topbar ---------- */
  .topbar{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 28px;
    /*max-width:960px;*/
    margin:0 auto;
    background: linear-gradient(var(--paper) 78%, transparent);
  }

  .topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
  }

  .logo-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--moss-800);
    color:var(--cream);
    font-weight:800;
    letter-spacing:0.06em;
    font-size:15px;
    padding:9px 22px 10px;
    border-radius: 60px 58px 62px 56px / 40px 44px 38px 42px;
    box-shadow: 2px 3px 0 var(--shadow-strong);
    transform: rotate(-0.6deg);
    text-decoration:none;
    user-select:none;
  }

  .topnav{
    display:flex;
    align-items:center;
    height:36px;
    gap:18px;
    font-size:13px;
    color:var(--moss-700);
    position:relative;
    top:1px;
  }
  .topnav a{
    display:inline-block;
    line-height:1;
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:2px solid transparent;
    transition:border-color .18s ease, color .18s ease;
  }
  .topnav a:hover{
    border-color:var(--moss-600);
    color:var(--moss-900);
  }

  /* ---------- theme toggle ---------- */
  .theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    border:2px solid var(--moss-700);
    background:transparent;
    color:var(--moss-700);
    cursor:pointer;
    padding:0;
    transition:transform .2s ease, border-color .18s ease, color .18s ease;
  }
  .theme-toggle:hover{
    transform:rotate(-10deg) scale(1.08);
    border-color:var(--moss-900);
    color:var(--moss-900);
  }
  .theme-toggle svg{ width:18px; height:18px; display:block; }
  .theme-toggle .icon-moon{ display:none; }
  :root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

  /* ---------- section headers ---------- */
  .section{
    margin-top:64px;
  }
  .section-head{
    display:flex;
    align-items:baseline;
    gap:12px;
    margin-bottom:4px;
  }
  .section-head h2{
    margin:0;
    font-size:26px;
    font-weight:700;
    color:var(--moss-900);
    letter-spacing:0.01em;
  }

  .rule{
    display:block;
    width:100%;
    height:14px;
    margin:10px 0 30px;
  }
  .rule svg{ width:100%; height:100%; display:block; overflow:visible; }
  .rule path{
    fill:none;
    stroke:var(--moss-700);
    stroke-width:5;
    stroke-linecap:round;
  }
  /* ---------- video cards (long form) ---------- */
  .longform-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
  }


  .card{
    display:block;
    text-decoration:none;
    color:inherit;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .6s ease, transform .6s ease;
  }
  .card.in-view{ opacity:1; transform:translateY(0); }

  .thumb{
    position:relative;
    border:var(--line) solid var(--moss-700);
    background:linear-gradient(135deg,var(--moss-200), var(--paper-2));
    overflow:hidden;
    cursor:pointer;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    box-shadow:3px 4px 0 var(--shadow-soft);
  }
  .thumb:hover{
    transform:translate(-2px,-3px) rotate(-0.3deg);
    box-shadow:6px 7px 0 var(--shadow-soft-hover);
    border-color:var(--moss-900);
  }

  .thumb.wide{
    aspect-ratio:16/10;
    border-radius: 18px 10px 20px 8px / 10px 20px 8px 18px;
  }
  .thumb.wide:nth-of-type(2n){
    transform:rotate(0.5deg);
    border-radius: 10px 20px 8px 18px / 18px 10px 20px 8px;
  }
  .thumb.wide:nth-of-type(2n):hover{
    transform:translate(-2px,-3px) rotate(0.9deg);
  }

  .thumb.tall{
    aspect-ratio:9/16;
    border-radius: 22px 8px 22px 8px / 8px 22px 8px 22px;
  }
  .thumb.tall:nth-of-type(2){
    transform:rotate(-1deg);
    border-radius: 8px 24px 6px 24px / 22px 8px 22px 8px;
  }
  .thumb.tall:nth-of-type(2):hover{
    transform:translate(-2px,-3px) rotate(-1.6deg);
  }
  .thumb.tall:nth-of-type(3){
    transform:rotate(0.7deg);
  }
  .thumb.tall:nth-of-type(3):hover{
    transform:translate(-2px,-3px) rotate(1.2deg);
  }

  .thumb-grain{
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(115deg, var(--grain) 0 2px, transparent 2px 6px);
    mix-blend-mode:var(--grain-blend);
    pointer-events:none;
  }

  .thumb.youtube-1{
    background-image:url('https://img.youtube.com/vi/QQRGBb9yRRw/maxresdefault.jpg');
    background-size:cover;
    background-position:center;
  }
  .thumb.youtube-2{
    background-image:url('https://img.youtube.com/vi/HRwjsHCDVxw/maxresdefault.jpg');
    background-size:cover;
    background-position:center;
  }
  .thumb.youtube-short-1{
    background-image:url('https://img.youtube.com/vi/01AMUgtCuME/maxresdefault.jpg');
    background-size:cover;
    background-position:center;
  }
  .thumb.youtube-short-2{
    background-image:url('https://img.youtube.com/vi/GI0gNVjQm5E/maxresdefault.jpg');
    background-size:cover;
    background-position:center;
  }
  .thumb.youtube-short-3{
    background-image:url('https://img.youtube.com/vi/Ijx3RRw7ttc/maxresdefault.jpg');
    background-size:cover;
    background-position:center;
  }
  .thumb.youtube-short-4{
    background-image:url('https://img.youtube.com/vi/zgnz29Eh6rY/maxresdefault.jpg');
    background-size:cover;
    background-position:center;
  }
  .thumb.youtube .play-btn::before{
    content:"";
    position:absolute;
    inset:-14px;
    border-radius:50%;
    background:rgba(10,18,12,0.55);
  }
  .thumb.youtube .play-btn path{
    stroke:#f4f1e6;
  }

  .play-btn{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:58px; height:58px;
    display:flex; align-items:center; justify-content:center;
  }
  .thumb.tall .play-btn{ width:48px; height:48px; }
  .play-btn svg{ width:100%; height:100%; }
  .play-btn path{
    fill:none;
    stroke:var(--moss-800);
    stroke-width:6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .card-meta{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-top:12px;
    font-size:13.5px;
  }
  .card-meta .title{ color:var(--moss-900); font-weight:600; }
  .card-meta .type{ color:var(--moss-400); }

  /* ---------- shorts grid ---------- */
  .shorts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }

  /* ---------- kontakt ---------- */
  .kontakt{
    margin-top:96px;
    text-align:center;
  }
  .kontakt h2{
    margin:0 0 18px;
    font-size:22px;
    color:var(--moss-900);
    font-weight:700;
  }

  .socials{
    display:flex;
    justify-content:center;
    gap:32px;
    flex-wrap:wrap;
  }
  .kontakt .handle{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:22px;
    font-weight:700;
    color:var(--moss-800);
    text-decoration:none;
    transition:color .18s ease, transform .18s ease;
  }
  .handle-icon{
    width:22px;
    height:22px;
    flex-shrink:0;
  }
  .kontakt .handle:hover{
    color:var(--moss-900);
    transform:translateY(-2px);
  }

  footer{
    margin-top:80px;
    display:flex;
    justify-content:center;
  }
  footer .rule{ width:220px; }

  ::selection{ background:var(--selection); }



  @media (min-width:1460px){
    .topbar{ background: none; }
  }

  @media (max-width:1460px){
    .logo-pill{
      border-radius: 999px;
    }
  }

  @media (max-width:620px){
    .longform-grid{ grid-template-columns:1fr;}
  }

  @media (min-width:1240px){
    #longform .rule,
    #longform .section-head,
    .longform-grid{
      margin-left:-140px;
      margin-right:-140px;
    }
    #longform .rule{
      width: calc(100% + 280px);
    }

    #shorts .rule,
    #shorts .section-head,
    .shorts-grid{
      margin-left:-148px;
      margin-right:-148px;
    }
    #shorts .rule{
      width: calc(100% + 296px);
    }
  }

  @media (max-width:460px){
    .shorts-grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
    .shorts-grid .card-meta{ display:none; }
  }

  @media (max-width:620px){
    .shorts-grid{ grid-template-columns: repeat(2,1fr); }
  }

  @media (prefers-reduced-motion: reduce){
    .card{ transition:none; opacity:1; transform:none; }
    .thumb{ transition:none; }
    body{ transition:none; }
  }