:root{
    --black:#000000;
    --espresso:#2a170d;
    --espresso-2:#1c0f08;
    --cream:#e6cda4;
    --cream-dim:#9c8567;
    --rust:#c5601f;
    --olive:#5c6b3f;
    --gold:#cfa85c;
    --line: rgba(230,205,164,0.14);
  }

  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }

  @media (max-width:380px){
    main{ max-width:100%; }
    .about, .videos{ margin-top:40px; }
    nav a{ padding:16px 4px; }
  }

  html,body{
    margin:0; padding:0;
    background:var(--black);
    color:var(--cream);
    font-family:'Work Sans', sans-serif;
    min-height:100%;
  }

  body{
    display:flex;
    justify-content:center;
    padding: 7vh 20px 6vh;
    position:relative;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(92,107,63,0.14), transparent 40%),
      radial-gradient(circle at 85% 75%, rgba(197,96,31,0.10), transparent 45%);
    pointer-events:none;
    z-index:0;
  }

  main{
    position:relative;
    z-index:1;
    width:100%;
    max-width:720px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  header{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .logo{
    width:148px;
    height:148px;
    border-radius:50%;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 0 0 6px var(--espresso-2), 0 20px 50px -20px rgba(0,0,0,0.8);
    margin:0 auto 28px;
  }
  .logo img{ width:100%; height:100%; object-fit:cover; display:block; }

  .eyebrow{
    font-size:12px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--cream-dim);
    margin-bottom:14px;
  }

  .eyebrow::before{
    content:"";
    display:inline-block;
    width:6px; height:6px;
    background:var(--rust);
    border-radius:50%;
    margin-right:10px;
    vertical-align:middle;
  }

  h1{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size:clamp(40px, 9vw, 62px);
    line-height:0.94;
    letter-spacing:0.01em;
    text-transform:uppercase;
    margin:0;
  }

  h1 .line2{
    color:var(--rust);
  }

  .tagline{
    margin-top:18px;
    font-size:15.5px;
    line-height:1.6;
    color:var(--cream-dim);
    max-width:380px;
  }

  .fork{
    width:100%;
    max-width:300px;
    margin:36px 0 4px;
  }
  .fork svg{ width:100%; height:auto; display:block; }
  .fork path{
    stroke:var(--cream-dim);
    stroke-width:1.4;
    fill:none;
    stroke-dasharray:400;
    stroke-dashoffset:400;
    animation:draw 1.4s ease forwards 0.2s;
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }

  nav{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:1px;
    margin-top:6px;
    border-top:1px solid var(--line);
  }

  nav a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 6px;
    text-decoration:none;
    color:var(--cream);
    border-bottom:1px solid var(--line);
    position:relative;
    transition:padding-left 0.2s ease, color 0.2s ease;
  }

  nav a:hover, nav a:focus-visible{
    padding-left:14px;
    color:var(--rust);
    outline:none;
  }

  nav a:focus-visible{
    box-shadow: inset 2px 0 0 var(--rust);
  }

  nav a .icon{
    width:20px; height:20px;
    flex-shrink:0;
    color:inherit;
  }
  nav a .icon svg{ width:100%; height:100%; }

  nav a .label{
    font-size:16px;
    font-weight:500;
    letter-spacing:0.01em;
    flex:1;
    text-align:left;
  }

  nav a .handle{
    font-size:13px;
    color:var(--cream-dim);
    font-weight:400;
  }

  nav a .arrow{
    font-family:'Anton', sans-serif;
    font-size:18px;
    color:var(--cream-dim);
    transition:transform 0.2s ease, color 0.2s ease;
  }
  nav a:hover .arrow, nav a:focus-visible .arrow{
    transform:translateX(3px);
    color:var(--rust);
  }

  /* about section */
  .about{
    width:100%;
    margin-top:48px;
    text-align:center;
  }

  .about-head{ margin-bottom:14px; }
  .about-head .eyebrow{ margin-bottom:8px; }

  .about-head h2{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size:32px;
    text-transform:uppercase;
    margin:0;
    letter-spacing:0.01em;
    text-align:center;
  }

  .about-copy{
    font-size:14.5px;
    line-height:1.7;
    color:var(--cream-dim);
    margin-bottom:12px;
    text-align:center;
  }

  /* video section */
  .videos{
    width:100%;
    margin-top:56px;
    margin-bottom:56px;
  }

  .videos-head{
    text-align:left;
    margin-bottom:20px;
  }

  .videos-head .eyebrow{ margin-bottom:8px; }

  .videos-head h2{
    font-family:'Anton', sans-serif;
    font-weight:400;
    font-size:32px;
    text-transform:uppercase;
    margin:0 0 6px;
    letter-spacing:0.01em;
  }

  .videos-head p{
    font-size:13.5px;
    color:var(--cream-dim);
    margin:0;
    max-width:400px;
  }

  .video-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    margin-top:22px;
  }

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

  .video-card{
    background:var(--espresso);
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    text-align:left;
    display:flex;
    flex-direction:column;
  }

  .video-thumb{
    aspect-ratio:16/9;
    background:
      repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(230,205,164,0.03) 10px, rgba(230,205,164,0.03) 20px),
      var(--espresso-2);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  .play-btn{
    width:46px; height:46px;
    border-radius:50%;
    border:1.5px solid var(--cream-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color 0.2s ease, transform 0.2s ease;
  }
  .video-card:hover .play-btn{
    border-color:var(--rust);
    transform:scale(1.06);
  }
  .play-btn svg{ width:15px; height:15px; margin-left:2px; fill:var(--cream-dim); }
  .video-card:hover .play-btn svg{ fill:var(--rust); }

  .soon-tag{
    position:absolute;
    top:8px; right:8px;
    font-size:9.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--cream-dim);
    border:1px solid var(--line);
    padding:3px 7px;
    border-radius:3px;
    background:rgba(0,0,0,0.3);
  }

  .video-meta{
    padding:12px 14px 14px;
  }

  .video-meta .vt{
    font-size:13.5px;
    font-weight:500;
    color:var(--cream);
    margin:0 0 4px;
  }
  .video-meta .vd{
    font-size:11.5px;
    color:var(--cream-dim);
    margin:0;
  }

  footer{
    margin-top:56px;
    font-size:12px;
    color:var(--cream-dim);
    letter-spacing:0.08em;
    text-transform:uppercase;
  }

  footer span{ color:var(--olive); }