/*
Theme Name: Art by Sumith — Blank
Theme URI: https://www.artbysumith.com
Author: Sumith Bose
Description: A blank, single-purpose canvas theme built to carry Sumith Bose's custom-coded Creative Director portfolio. All page styles are scoped under #asb-site so no theme, plugin or WordPress core CSS can ever override them.
Version: 1.4
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: artbysumith-blank
*/

  :root{
    --bg:#FAF9F5;
    --panel:#F1EEE7;
    --ink:#17161A;
    --grey:#6D6C6F;
    --line:#E2DFD6;
    --accent:#9B7A44;
    --serif:'Fraunces', Georgia, serif;
    --sans:'Inter', -apple-system, Helvetica, Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#141314; --panel:#1C1B1C; --ink:#F3F1EC; --grey:#A8A6A2; --line:#302E2C; --accent:#C8A05F;
    }
  }
  :root[data-theme="dark"]{
    --bg:#141314; --panel:#1C1B1C; --ink:#F3F1EC; --grey:#A8A6A2; --line:#302E2C; --accent:#C8A05F;
  }

  /* Everything below is scoped under #asb-site so it can never be
     overridden by, or bleed into, the host WordPress theme's CSS. */
  #asb-site, #asb-site *{ box-sizing:border-box; }
  #asb-site{
    margin:0; background:var(--bg) !important; color:var(--ink) !important; font-family:var(--sans) !important;
    -webkit-font-smoothing:antialiased; line-height:1.5 !important;
    scroll-behavior:smooth;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #asb-site img{max-width:100%;}
  #asb-site a{color:inherit;}
  #asb-site .asb-container{max-width:1180px; margin:0 auto !important; padding:0 40px !important; width:100%;}

  /* NAV */
  #asb-site header{
    position:sticky; top:0; z-index:50;
    background:var(--bg);
    background:color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding-top:env(safe-area-inset-top,0px);
  }
  #asb-site nav.asb-container{display:flex !important; align-items:center; justify-content:space-between; height:76px;}
  #asb-site .word{font-family:var(--serif); font-weight:500; font-size:19px; letter-spacing:0.01em; text-decoration:none;}
  #asb-site .navlinks{display:flex; gap:34px; list-style:none; margin:0; padding:0; font-size:14.5px;}
  #asb-site .navlinks a{text-decoration:none; color:var(--grey); transition:color .2s;}
  #asb-site .navlinks a:hover, #asb-site .navlinks a:focus-visible{color:var(--ink);}
  #asb-site .navcta{border:1px solid var(--ink); padding:9px 18px; border-radius:2px; font-size:14px; text-decoration:none; white-space:nowrap;}
  #asb-site .navcta:hover{background:var(--ink); color:var(--bg);}

  /* MOBILE MENU (hidden on desktop) */
  #asb-site .menu-btn{
    display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
    width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; margin-right:6px;
  }
  #asb-site .menu-btn span{display:block; width:100%; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .25s ease;}
  #asb-site .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  #asb-site .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
  #asb-site .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  #asb-site .mobile-menu{
    max-height:0; overflow:hidden; border-bottom:0 solid var(--line);
    background:var(--bg); transition:max-height .3s ease, border-bottom-width .3s ease;
  }
  #asb-site .mobile-menu.open{max-height:320px; border-bottom-width:1px;}
  #asb-site .mobile-menu ul{list-style:none; margin:0; padding:6px 22px 18px; display:flex; flex-direction:column;}
  #asb-site .mobile-menu a{display:block; padding:13px 0; text-decoration:none; color:var(--ink); font-size:16px; border-bottom:1px solid var(--line);}
  #asb-site .mobile-menu li:last-child a{border-bottom:none;}

  /* HERO */
  #asb-site .hero{padding:96px 0 88px !important; border-bottom:1px solid var(--line);}
  #asb-site .hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:end;}
  #asb-site .kicker{font-size:15px; color:var(--accent); font-family:var(--serif); font-style:italic; margin:0 0 22px;}
  #asb-site h1{
    font-family:var(--serif); font-weight:400; font-size:clamp(40px,5.4vw,68px);
    line-height:1.06; letter-spacing:-0.01em; margin:0 0 26px; max-width:14ch;
  }
  #asb-site .hero p.lede{font-size:18px; color:var(--grey); max-width:46ch; margin:0 0 34px; line-height:1.65;}
  #asb-site .hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
  #asb-site .btn{
    display:inline-flex; align-items:center; gap:8px; padding:14px 26px; text-decoration:none;
    font-size:15px; border-radius:2px; border:1px solid var(--ink);
  }
  #asb-site .btn.primary{background:var(--ink); color:var(--bg);}
  #asb-site .btn.primary:hover{opacity:.85;}
  #asb-site .btn.ghost{color:var(--ink);}
  #asb-site .btn.ghost:hover{background:var(--panel);}
  #asb-site .stat-panel{border-left:1px solid var(--line); padding-left:40px;}
  #asb-site .stat{padding:18px 0; border-bottom:1px solid var(--line);}
  #asb-site .stat:first-child{padding-top:0;}
  #asb-site .stat:last-child{border-bottom:none;}
  #asb-site .stat .num{font-family:var(--serif); font-size:34px; font-weight:400; display:block;}
  #asb-site .stat .lbl{font-size:13.5px; color:var(--grey);}

  /* SECTION LABELS */
  #asb-site .asb-section{padding:90px 0 !important; border-bottom:1px solid var(--line);}
  #asb-site .section-head{display:grid; grid-template-columns:1fr 1.6fr; gap:40px; margin-bottom:56px;}
  #asb-site .section-head .tag{font-size:14px; color:var(--grey);}
  #asb-site .section-head h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.4vw,40px); margin:0; max-width:18ch;}
  #asb-site .section-head p{color:var(--grey); font-size:16px; margin:14px 0 0; max-width:48ch; line-height:1.65;}

  /* ABOUT */
  #asb-site .about-body{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  #asb-site .about-body p{font-size:16.5px; color:var(--grey); line-height:1.75; margin:0 0 18px;}
  #asb-site .about-body p strong{color:var(--ink); font-weight:500;}
  #asb-site .taglist{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
  #asb-site .tag-pill{border:1px solid var(--line); padding:7px 14px; border-radius:2px; font-size:13.5px; color:var(--grey);}

  /* MARQUEE — continuous strip of more work */
  #asb-site .marquee{overflow:hidden; background:var(--line); margin:48px 0;}
  #asb-site .marquee-track{display:flex; width:max-content; gap:2px; animation:asb-marquee 34s linear infinite;}
  #asb-site .marquee:hover .marquee-track{animation-play-state:paused;}
  #asb-site .marquee-item{flex:0 0 auto; width:260px; aspect-ratio:4/3; overflow:hidden; display:block;}
  #asb-site .marquee-item img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(1); transition:filter .5s ease, transform .6s ease;
  }
  #asb-site .marquee-item:hover img{filter:grayscale(0); transform:scale(1.04);}
  @keyframes asb-marquee{ from{transform:translateX(-50%);} to{transform:translateX(0);} }
  @media (prefers-reduced-motion: reduce){ #asb-site .marquee-track{animation:none;} }

  /* COVER STRIP */
  #asb-site .cover-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin:48px 0; border-radius:2px; overflow:hidden;}
  #asb-site .cover-strip a{display:block; overflow:hidden; aspect-ratio:4/3; position:relative;}
  #asb-site .cover-strip img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(1) contrast(1.02); transition:filter .5s ease, transform .6s ease;
  }
  #asb-site .cover-strip a:hover img, #asb-site .cover-strip a:focus-visible img{filter:grayscale(0); transform:scale(1.03);}

  /* WORK */
  #asb-site .work-row{
    display:grid; grid-template-columns:200px 0.7fr 2.1fr; gap:32px; padding:38px 0;
    border-top:1px solid var(--line); align-items:start;
  }
  #asb-site .work-row:last-child{padding-bottom:0;}
  #asb-site .work-thumb{display:block; overflow:hidden; aspect-ratio:4/3; background:var(--panel);}
  #asb-site .work-thumb img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(1); transition:filter .5s ease, transform .6s ease;
  }
  #asb-site .work-row:hover .work-thumb img{filter:grayscale(0); transform:scale(1.04);}
  #asb-site .work-meta{font-size:14px; color:var(--grey);}
  #asb-site .work-meta .cat{display:block; color:var(--accent); margin-bottom:6px; font-family:var(--serif); font-style:italic; font-size:15px;}
  #asb-site .work-title{font-family:var(--serif); font-size:26px; font-weight:400; margin:0 0 10px;}
  #asb-site .work-desc{color:var(--grey); font-size:15.5px; line-height:1.7; max-width:58ch; margin:0 0 18px;}
  #asb-site .work-link{font-size:14.5px; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px;}
  #asb-site .work-link:hover{color:var(--accent); border-color:var(--accent);}

  /* SERVICES */
  #asb-site .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  #asb-site .service{background:var(--bg); padding:32px 28px;}
  #asb-site .service h3{font-family:var(--serif); font-weight:400; font-size:20px; margin:0 0 10px;}
  #asb-site .service p{color:var(--grey); font-size:14.5px; line-height:1.6; margin:0;}

  /* RECOGNITION */
  #asb-site .rec-strip{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line);}
  #asb-site .rec-item{flex:1 1 220px; padding:26px 30px 26px 0; border-bottom:1px solid var(--line);}
  #asb-site .rec-item .yr{color:var(--grey); font-size:13.5px; display:block; margin-bottom:4px;}
  #asb-site .rec-item .name{font-family:var(--serif); font-size:17px;}

  /* CONTACT */
  #asb-site .contact{padding:100px 0 90px !important; text-align:left;}
  #asb-site .contact h2{font-family:var(--serif); font-weight:400; font-size:clamp(34px,5vw,58px); margin:0 0 24px; max-width:16ch; line-height:1.1;}
  #asb-site .contact p{color:var(--grey); font-size:17px; max-width:50ch; margin:0 0 36px; line-height:1.65;}
  #asb-site .contact-links{display:flex; flex-wrap:wrap; gap:18px 60px;}
  #asb-site .contact-links a{font-family:var(--serif); font-size:20px; text-decoration:none; border-bottom:1px solid transparent;}
  #asb-site .contact-links a:hover{border-color:var(--accent); color:var(--accent);}
  #asb-site .contact-links .lbl{display:block; font-family:var(--sans); font-size:12.5px; color:var(--grey); margin-bottom:4px;}

  #asb-site footer{border-top:1px solid var(--line); padding:26px 0 !important; font-size:13px; color:var(--grey);}
  #asb-site footer .asb-container{display:flex !important; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* reveal */
  #asb-site .reveal{opacity:0; transform:translateY(14px); animation:asb-in .8s ease forwards;}
  #asb-site .d1{animation-delay:.05s;} #asb-site .d2{animation-delay:.18s;} #asb-site .d3{animation-delay:.3s;} #asb-site .d4{animation-delay:.42s;}
  @keyframes asb-in{to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ #asb-site .reveal{animation:none; opacity:1; transform:none;} #asb-site{scroll-behavior:auto;} }

  @media (max-width: 860px){
    #asb-site .asb-container{padding:0 22px !important;}
    #asb-site .hero-grid, #asb-site .about-body, #asb-site .section-head{grid-template-columns:1fr; gap:30px;}
    #asb-site .stat-panel{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:24px;}
    #asb-site .service-grid{grid-template-columns:1fr;}
    #asb-site .work-row{grid-template-columns:1fr; gap:14px;}
    #asb-site .work-thumb{aspect-ratio:16/9;}
    #asb-site .cover-strip{grid-template-columns:1fr 1fr; margin:28px 0;}
    #asb-site .marquee{margin:28px 0;}
    #asb-site .marquee-item{width:170px;}
    #asb-site .navlinks{display:none;}
    #asb-site .menu-btn{display:flex;}
    #asb-site nav.asb-container{height:64px;}
    #asb-site .hero{padding:56px 0 56px !important;}
    #asb-site .asb-section{padding:60px 0 !important;}
  }