/*
Theme Name: Ajanta Digital Studio
Theme URI: https://8mmfilmconversion.com
Author: Ajanta Digital Studio
Author URI: https://share.google/opKoc2GLf533pZU78
Description: Multi-page theme for Ajanta Digital Studio, a film/VHS/audio/photo digitization studio in South Extension, New Delhi, with a homepage, WordPress blog and static pages.
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ajanta-digital-studio
*/

:root{
    --ink:#15120D;
    --ink-2:#1E1A13;
    --base:#EDE6D6;
    --safelight:#E2A33E;
    --safelight-dim:#B47F2B;
    --tally:#C1402B;
    --grain:#8A8171;
    --grain-2:#5E594B;
    --rail-w:34px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--base);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding-left:var(--rail-w);
    overflow-x:hidden;
  }
  @media (max-width:720px){
    body{padding-left:18px;}
    :root{--rail-w:18px;}
  }
  h1,h2,h3{
    font-family:'Bebas Neue',sans-serif;
    font-weight:400;
    letter-spacing:0.02em;
    line-height:1.02;
    margin:0;
    color:var(--base);
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  @media (max-width:720px){.wrap{padding:0 20px;}}

  /* film grain overlay */
  .grain{
    position:fixed;inset:0;pointer-events:none;z-index:40;
    opacity:0.05;mix-blend-mode:overlay;
  }
  @media (prefers-reduced-motion:no-preference){
    .grain{animation:grainshift 0.6s steps(4) infinite;}
  }
  @keyframes grainshift{
    0%{transform:translate(0,0);}
    25%{transform:translate(-1%,1%);}
    50%{transform:translate(1%,-1%);}
    75%{transform:translate(-1%,-1%);}
    100%{transform:translate(0,0);}
  }

  /* sprocket rail — functional scroll indicator */
  .sprocket-rail{
    position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);
    background:var(--ink-2);
    border-right:1px solid rgba(237,230,214,0.08);
    z-index:30;
    display:flex;flex-direction:column;align-items:center;
    padding:14px 0;
    gap:0;
  }
  .hole{
    width:12px;height:16px;border-radius:3px;
    background:rgba(237,230,214,0.10);
    margin:9px 0;
    flex-shrink:0;
    transition:background 0.25s ease, box-shadow 0.25s ease;
  }
  @media (max-width:720px){
    .hole{width:7px;height:10px;margin:6px 0;}
  }
  .hole.lit{
    background:var(--safelight);
    box-shadow:0 0 6px rgba(226,163,62,0.55);
  }

  /* nav */
  header.nav{
    position:sticky;top:0;z-index:20;
    background:rgba(21,18,13,0.86);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(237,230,214,0.08);
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 0;
  }
  .logo{
    display:flex;align-items:center;gap:10px;
    font-family:'Bebas Neue',sans-serif;font-size:19px;letter-spacing:0.03em;
    white-space:nowrap;
  }
  @media (max-width:520px){.logo{font-size:16px;}}
  .logo .dot{
    width:9px;height:9px;border-radius:50%;background:var(--tally);
    box-shadow:0 0 7px rgba(193,64,43,0.7);
    flex-shrink:0;
  }
  nav.links{display:flex;gap:28px;font-size:14px;}
  nav.links a{
    text-decoration:none;color:var(--grain);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    transition:color 0.2s ease, border-color 0.2s ease;
  }
  nav.links a:hover, nav.links a:focus-visible{color:var(--base);border-color:var(--safelight);}
  @media (max-width:720px){nav.links{display:none;}}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;font-weight:600;font-size:14px;
    padding:11px 20px;border-radius:2px;
    text-decoration:none;cursor:pointer;border:1px solid transparent;
    transition:transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{background:var(--safelight);color:var(--ink);}
  .btn-primary:hover{background:#EEB35C;}
  .btn-ghost{border-color:rgba(237,230,214,0.3);color:var(--base);background:transparent;}
  .btn-ghost:hover{border-color:var(--safelight);color:var(--safelight);}
  .btn:focus-visible{outline:2px solid var(--safelight);outline-offset:3px;}

  /* hero */
  .hero{
    padding:88px 0 96px;
    display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;
  }
  @media (max-width:900px){.hero{grid-template-columns:1fr;padding:56px 0 64px;gap:40px;}}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;
    color:var(--safelight);text-transform:uppercase;margin-bottom:20px;
  }
  .eyebrow::before{content:'';width:6px;height:6px;background:var(--tally);border-radius:50%;}
  .hero h1{font-size:clamp(34px,5vw,58px);max-width:20ch;}
  .hero h1 em{font-style:normal;color:var(--safelight);}
  .hero p.lede{
    color:var(--grain);font-size:18px;max-width:46ch;margin:22px 0 32px;
  }
  .hero .ctas{display:flex;gap:14px;flex-wrap:wrap;}
  .hero .fineprint{
    margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--grain-2);
    letter-spacing:0.03em;
  }

  /* countdown leader — signature element */
  .leader{
    position:relative;width:100%;max-width:340px;aspect-ratio:1/1;margin:0 auto;
  }
  .leader svg{width:100%;height:100%;display:block;}
  .leader-num{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'Bebas Neue',sans-serif;font-size:96px;color:var(--base);
    line-height:1;
  }
  .leader-label{
    text-align:center;margin-top:14px;font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:0.15em;color:var(--grain-2);text-transform:uppercase;
  }

  /* section shared */
  section{padding:76px 0;border-top:1px solid rgba(237,230,214,0.08);}
  .section-head{max-width:56ch;margin-bottom:44px;}
  .section-head .kicker{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.1em;
    color:var(--safelight);text-transform:uppercase;margin-bottom:10px;display:block;
  }
  .section-head h2{font-size:clamp(28px,4vw,40px);}
  .section-head p{color:var(--grain);margin-top:14px;font-size:16px;}

  /* formats */
  .media-strip{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:rgba(237,230,214,0.08);border:1px solid rgba(237,230,214,0.08);
    margin-bottom:2px;
  }
  @media (max-width:640px){.media-strip{grid-template-columns:1fr;}}
  .media-piece{
    background:var(--ink-2);padding:28px 24px 22px;
    display:flex;flex-direction:column;align-items:center;
  }
  .media-piece svg{width:100%;max-width:180px;height:auto;}
  .media-img{width:100%;max-width:280px;height:220px;object-fit:cover;display:block;}
  .media-cap{
    margin-top:14px;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--grain-2);
  }
  .formats-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:rgba(237,230,214,0.08);
    border:1px solid rgba(237,230,214,0.08);
  }
  @media (max-width:900px){.formats-grid{grid-template-columns:repeat(2,1fr);}}
  .format-card{
    background:var(--ink);padding:26px 22px;
  }
  .format-card .fmt-code{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--grain-2);
    letter-spacing:0.08em;
  }
  .format-card h3{font-size:24px;margin-top:8px;color:var(--base);font-family:'Inter',sans-serif;font-weight:600;letter-spacing:0;}
  .format-card p{font-size:13.5px;color:var(--grain);margin-top:8px;}

  /* before/after */
  .compare{
    display:grid;grid-template-columns:1fr 1fr;gap:2px;
    background:rgba(237,230,214,0.12);
    border:1px solid rgba(237,230,214,0.12);
    max-width:820px;
  }
  @media (max-width:640px){.compare{grid-template-columns:1fr;}}
  .compare-pane{
    background:var(--ink-2);padding:32px 26px;min-height:220px;
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .compare-pane.before{
    background:repeating-linear-gradient(0deg,#211d16,#211d16 2px,#26221a 2px,#26221a 4px);
    filter:contrast(0.9) brightness(0.85);
  }
  .compare-pane.after{background:#1A1611;}
  .compare-pane .tag{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.1em;
    text-transform:uppercase;color:var(--grain-2);margin-bottom:6px;
  }
  .compare-pane.after .tag{color:var(--safelight);}
  .compare-pane .tag-desc{font-size:14px;color:var(--grain);}

  /* process */
  .process-list{border-top:1px solid rgba(237,230,214,0.1);}
  .process-row{
    display:grid;grid-template-columns:110px 1fr;gap:24px;
    padding:26px 0;border-bottom:1px solid rgba(237,230,214,0.1);
    align-items:start;
  }
  @media (max-width:640px){.process-row{grid-template-columns:70px 1fr;}}
  .process-row .reel-tag{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--safelight);
    letter-spacing:0.05em;padding-top:4px;
  }
  .process-row h3{font-family:'Inter',sans-serif;font-weight:600;font-size:18px;letter-spacing:0;margin-bottom:6px;}
  .process-row p{color:var(--grain);font-size:15px;max-width:56ch;}

  /* guides */
  .guides-list{display:flex;flex-direction:column;gap:1px;background:rgba(237,230,214,0.1);border:1px solid rgba(237,230,214,0.1);}
  .guide-article{background:var(--ink);}
  .guide-article summary{
    padding:22px 24px;cursor:pointer;list-style:none;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  }
  .guide-article summary::-webkit-details-marker{display:none;}
  .guide-tag{
    font-size:11px;letter-spacing:0.1em;color:var(--safelight);
    border:1px solid rgba(226,163,62,0.4);padding:3px 8px;border-radius:2px;flex-shrink:0;
  }
  .guide-title{font-size:16px;font-weight:600;color:var(--base);flex-grow:1;}
  .guide-toggle{
    font-family:'IBM Plex Mono',monospace;font-size:20px;color:var(--safelight);
    transition:transform 0.2s ease;flex-shrink:0;
  }
  .guide-article[open] .guide-toggle{transform:rotate(45deg);}
  .guide-body{padding:0 24px 26px;max-width:66ch;}
  .guide-body p{color:var(--grain);font-size:15px;margin:0 0 14px;}
  .guide-body p:last-child{margin-bottom:0;}

  /* faq */
  .faq-item{border-bottom:1px solid rgba(237,230,214,0.1);}
  .faq-item summary{
    padding:20px 0;cursor:pointer;font-size:16px;font-weight:600;
    display:flex;justify-content:space-between;align-items:center;list-style:none;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+';font-family:'IBM Plex Mono',monospace;font-size:20px;color:var(--safelight);
    transition:transform 0.2s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{color:var(--grain);font-size:15px;padding:0 0 22px;max-width:60ch;}

  /* final cta */
  .final-cta{
    text-align:center;padding:88px 0;
  }
  .final-cta h2{font-size:clamp(32px,5vw,56px);max-width:18ch;margin:0 auto 18px;}
  .final-cta p{color:var(--grain);max-width:48ch;margin:0 auto 32px;font-size:17px;}

  footer{
    border-top:1px solid rgba(237,230,214,0.1);
    padding:36px 0;
  }
  .footer-inner{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
    font-size:13px;color:var(--grain-2);
  }
  .footer-inner a{color:var(--grain);text-decoration:none;}
  .footer-inner a:hover{color:var(--safelight);}

  :focus-visible{outline:2px solid var(--safelight);outline-offset:2px;}

/* blog preview (front page) */
  .blog-preview-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:rgba(237,230,214,0.1);border:1px solid rgba(237,230,214,0.1);
  }
  @media (max-width:820px){.blog-preview-grid{grid-template-columns:1fr;}}
  .blog-preview-card{
    background:var(--ink);padding:26px 22px;display:flex;flex-direction:column;
    text-decoration:none;color:inherit;transition:background 0.2s ease;
  }
  .blog-preview-card:hover{background:var(--ink-2);}
  .blog-preview-card h3{
    font-family:'Inter',sans-serif;font-weight:600;font-size:17px;letter-spacing:0;
    color:var(--base);margin:12px 0 8px;
  }
  .blog-preview-card p{color:var(--grain);font-size:14px;flex-grow:1;margin:0 0 14px;}
  .blog-preview-more{font-size:12px;letter-spacing:0.06em;color:var(--safelight);}

  /* blog listing page (index.php) */
  .blog-hero{padding-bottom:36px;}
  .blog-hero h1{font-size:clamp(32px,5vw,52px);max-width:20ch;margin-top:14px;}
  .blog-list-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    background:rgba(237,230,214,0.1);border:1px solid rgba(237,230,214,0.1);
  }
  @media (max-width:720px){.blog-list-grid{grid-template-columns:1fr;}}
  .blog-pagination{margin-top:40px;display:flex;gap:10px;flex-wrap:wrap;font-size:13px;}
  .blog-pagination .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:34px;height:34px;padding:0 10px;border:1px solid rgba(237,230,214,0.2);
    color:var(--grain);text-decoration:none;border-radius:2px;
  }
  .blog-pagination .page-numbers.current{background:var(--safelight);color:var(--ink);border-color:var(--safelight);}
  .blog-pagination .page-numbers:hover{border-color:var(--safelight);color:var(--safelight);}

  /* single post / static page */
  .single-post{padding-top:76px;max-width:820px;}
  .single-post h1{font-size:clamp(30px,4.6vw,50px);max-width:24ch;margin-top:12px;margin-bottom:32px;}
  .single-post-content{color:var(--grain);font-size:16.5px;line-height:1.75;max-width:68ch;}
  .single-post-content p{margin:0 0 20px;}
  .single-post-content h2{
    font-family:'Inter',sans-serif;font-weight:700;font-size:22px;letter-spacing:0;
    color:var(--base);margin:36px 0 14px;
  }
  .single-post-content h3{
    font-family:'Inter',sans-serif;font-weight:600;font-size:18px;letter-spacing:0;
    color:var(--base);margin:28px 0 12px;
  }
  .single-post-content ul, .single-post-content ol{margin:0 0 20px;padding-left:22px;}
  .single-post-content li{margin-bottom:8px;}
  .single-post-content a{color:var(--safelight);}
  .single-post-cta{
    margin-top:48px;padding:28px 26px;background:var(--ink-2);
    border:1px solid rgba(237,230,214,0.1);max-width:68ch;
  }
  .single-post-cta p{color:var(--grain);margin:0 0 16px;font-size:15px;}