/* Snow Xue Dong — site styles. Colors & fonts live in the :root block at the top. */
:root{
    --bg:#FDF9F0;
    --green:#1B3D2F;
    --ink:#000000;
    --yellow:#F5D44E;
    --placeholder:#CBCBCB;
    --placeholder-label:#7C7C7C;
    --line:rgba(27,61,47,.14);
    --muted:#565656;
    --serif:'Crimson Text', Georgia, 'Times New Roman', serif;
    --sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --maxw:1080px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- Header / nav ---------- */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:var(--bg);
    padding:1.4rem 1.25rem 1.1rem;
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .site-header.scrolled{
    border-color:var(--line);
    box-shadow:0 2px 14px rgba(27,61,47,.05);
  }
  .logo{
    text-align:center;
    font-family:var(--serif);
    color:var(--green);
    font-size:1.75rem;
    letter-spacing:.01em;
    margin-bottom:1rem;
    line-height:1;
  }
  .logo-snow{font-weight:700;}
  .logo-name{font-style:italic; font-weight:600;}
  nav.nav{
    display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem;
    max-width:var(--maxw); margin:0 auto;
  }
  .nav-btn{
    font-family:var(--serif); font-size:1.05rem;
    background:var(--yellow); color:var(--green);
    border:none; border-radius:999px;
    padding:.55rem 2.1rem; cursor:pointer;
    text-decoration:none; display:inline-block;
    transition:background .18s ease, color .18s ease;
  }
  .nav-btn:hover, .nav-btn.active{
    background:var(--green); color:var(--yellow);
    text-decoration:underline; text-underline-offset:3px;
  }
  .nav-btn:focus-visible{outline:3px solid var(--green); outline-offset:3px;}

  /* ---------- Layout ---------- */
  main{max-width:var(--maxw); margin:0 auto; padding:2.6rem 1.25rem 1rem;}

  h2.page-h{ font-family:var(--serif); color:var(--green); font-size:1.9rem; margin:0 0 1.4rem; }

  /* ---------- Placeholders (grey boxes) ---------- */
  .ph{
    background:var(--placeholder);
    display:flex; align-items:center; justify-content:center;
    color:var(--placeholder-label);
    font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em;
    border-radius:3px; width:100%;
  }
  .ph-3x2{aspect-ratio:3/2;}
  .ph-4x3{aspect-ratio:4/3;}
  .ph-16x9{aspect-ratio:16/9;}
  .ph-banner{aspect-ratio:3.4/1;}
  .ph-video::after{content:"▶"; margin-left:.5rem; font-size:.9em;}

  /* ---------- About ---------- */
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:2.75rem; align-items:center;
  }
  .about-bio p{margin:0 0 1.15rem;}
  .about-bio strong{font-weight:700;}
  .about-bio em{font-style:italic;}
  .linkedin-wrap{max-width:560px; margin:2.75rem auto 0;}

  /* ---------- Work (smart grid) ---------- */
  .work-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%,440px), 1fr));
    gap:2.4rem 2.6rem;
  }
  .work-card{display:flex; gap:1.4rem; align-items:flex-start;}
  .work-media{flex:0 0 40%; max-width:180px; display:flex; flex-direction:column; align-items:center;}
  .work-media .link-btn{margin-top:.7rem;}
  .work-info{flex:1; min-width:0;}

  /* carousel */
  .carousel{width:100%;}
  .viewport{overflow:hidden; border-radius:3px;}
  .track{display:flex; transition:transform .35s ease;}
  .slide{flex:0 0 100%;}
  .carousel-controls{display:flex; align-items:center; justify-content:center; gap:.7rem; margin-top:.6rem;}
  .arrow{background:none; border:none; padding:.2rem; cursor:pointer; display:inline-flex; line-height:0;}
  .arrow svg{width:12px; height:14px; display:block;}
  .arrow .tri{fill:#B2AB99; transition:fill .18s ease;}
  .arrow:hover .tri{fill:#1B3D2F;}
  .arrow:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:2px;}
  .dots{display:flex; align-items:center; gap:.4rem;}
  .dot{width:10px; height:10px; border-radius:50%; background:#B2AB99; border:none; padding:0; cursor:pointer; transition:background .18s ease;}
  .dot.active{background:#1B3D2F;}
  .dot:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
  .work-title{font-family:var(--serif); font-weight:700; color:var(--green); font-size:1.45rem; margin:0 0 .7rem;}
  .spec{margin:0;}
  .spec-row{display:flex; gap:.6rem; margin-bottom:.5rem;}
  .spec-row dt{flex:0 0 5.7rem; font-weight:600; color:var(--muted); margin:0;}
  .spec-row dd{margin:0;}
  .spec-row ul{margin:0; padding-left:1.05rem;}
  .spec-row ul li{margin-bottom:.1rem;}

  .link-btn{
    display:inline-block; font-family:var(--serif); font-size:1rem;
    border:1.5px solid var(--green); color:var(--green); background:transparent;
    border-radius:999px; padding:.32rem 1.5rem; cursor:pointer; text-decoration:none;
    transition:background .18s ease, color .18s ease;
  }
  .link-btn:hover{background:var(--green); color:var(--bg); text-decoration:underline; text-underline-offset:3px;}
  .link-btn:focus-visible{outline:3px solid var(--green); outline-offset:3px;}

  /* ---------- Artist ---------- */
  .filters{display:flex; flex-wrap:wrap; gap:1.4rem; margin:-.4rem 0 1.9rem;}
  .filter-btn{
    background:none; border:none; cursor:pointer;
    font-family:var(--serif); font-size:1.1rem; color:var(--green);
    padding:.15rem 0; opacity:.55; transition:opacity .18s ease;
  }
  .filter-btn:hover{opacity:.85;}
  .filter-btn.active{opacity:1; text-decoration:underline; text-underline-offset:4px;}
  .filter-btn:focus-visible{outline:2px solid var(--green); outline-offset:3px;}

  .art-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(min(100%,300px), 1fr));
    gap:2.2rem 2rem;
    transition:opacity .26s ease;
  }
  .art-grid.fading{opacity:0;}
  .art-card{display:flex; flex-direction:column;}
  .art-desc{margin:.85rem 0 .55rem; background:#F0EBDD; padding:.7rem .85rem; border-radius:3px; font-size:.98rem;}
  .art-tags{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:auto;}
  .art-tags span{font-size:.8rem; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:.12rem .7rem;}
  .yt-embed{position:relative; aspect-ratio:16/9; border-radius:3px; overflow:hidden; background:#000;}
  .yt-embed iframe{position:absolute; inset:0; width:100%; height:100%; display:block; border:0;}
  .yt-facade{
    position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer;
    background-color:#000; background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center;
  }
  .yt-facade::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.16); transition:background .2s ease;}
  .yt-facade:hover::before, .yt-facade:focus-visible::before{background:rgba(0,0,0,.05);}
  .yt-play{
    position:relative; width:60px; height:42px; border-radius:11px; background:var(--green);
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s ease; box-shadow:0 2px 10px rgba(0,0,0,.3);
  }
  .yt-facade:hover .yt-play{transform:scale(1.07);}
  .yt-play svg{width:18px; height:20px; margin-left:3px; display:block;}
  .yt-facade:focus-visible{outline:3px solid var(--green); outline-offset:2px;}

  /* ---------- Teacher (blog) ---------- */
  .posts{max-width:680px;}
  .post{margin-bottom:3rem;}
  .post-title{font-family:var(--serif); color:var(--green); font-size:1.6rem; margin:0 0 .25rem;}
  .post-meta{color:var(--muted); font-size:.9rem; margin:0 0 1.1rem;}
  .post p{margin:0 0 1.1rem;}
  .post .ph{margin:1.4rem 0;}

  /* ---------- Footer ---------- */
  .footer{
    max-width:var(--maxw); margin:3rem auto 0; padding:2rem 1.25rem 2.6rem;
    border-top:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; gap:1rem;
  }
  .socials{display:flex; gap:1.4rem;}
  .socials a{color:var(--green); display:inline-flex; transition:opacity .18s ease, transform .18s ease;}
  .socials a:hover{opacity:.65; transform:translateY(-2px);}
  .socials a:focus-visible{outline:2px solid var(--green); outline-offset:4px; border-radius:4px;}
  .socials svg{width:24px; height:24px;}
  .copyright{color:var(--muted); font-size:.85rem; margin:0;}

  /* ---------- Scroll reveal ---------- */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}

  /* ---------- Responsive ---------- */
  @media (max-width:720px){
    body{font-size:16px;}
    .about-grid{grid-template-columns:1fr; gap:1.75rem;}
    .work-card{flex-direction:column;}
    .work-media{flex:none; max-width:100%; width:100%;}
    .work-media .ph{aspect-ratio:16/9;}
    .logo{font-size:1.5rem;}
    .nav-btn{padding:.5rem 1.5rem; font-size:1rem;}
    main{padding-top:2rem;}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; scroll-behavior:auto !important;}
    .reveal{opacity:1 !important; transform:none !important;}
  }

  /* ---------- Multi-page adjustments ---------- */
  .logo{display:block; text-decoration:none;}
  .ph{position:relative;}
  .ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;}