:root{
    --orange:#ed5e26;
    --red:#a73227;
    --brown:#6e241c;
    --ink:#1c1917;
    --paper:#f8f8f7;
    --paper-dim:#eeeeec;
    --line:rgba(28,25,23,0.1);
    --muted:#6b6560;
    --gutter:28px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Poppins', sans-serif;
    font-weight:600;
    letter-spacing:-0.02em;
  }
  /* COLOR LOGIC: small text stays black (default body ink); titles & subtitles
     (h1/h2 — the studio's own words about itself and its work) are dark brown;
     orange is reserved for highlighted / interactive / stand-out moments only. */
  h1,h2{color:var(--brown);}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  .wrap{max-width:1280px; margin:0 auto; padding:0 40px;}

  /* NAV */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(250,247,244,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{display:flex; align-items:center; justify-content:space-between; height:100px;}
  .brand{display:flex; align-items:center; gap:16px;}
  .brand img{height:64px; width:auto;}
  .brand-text{display:flex; flex-direction:column; line-height:1.2;}
  .brand-text b{font-family:'Poppins',sans-serif; font-size:22px; font-weight:600; letter-spacing:-0.005em; display:flex; align-items:baseline; gap:10px;}
  .brand-text b i{font-family:'Noto Sans SC','PingFang SC',sans-serif; font-style:normal; font-weight:500; font-size:13px; color:var(--muted); letter-spacing:0;}
  .brand-text span{font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:2px;}
  .navlinks{display:flex; gap:38px; font-size:14px; font-weight:500;}
  .navlinks a{position:relative; padding:4px 0; color:var(--ink); opacity:0.8; transition:opacity .2s;}
  .navlinks a:hover{opacity:1;}
  .navlinks a::after{content:'';position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--orange); transition:width .25s;}
  .navlinks a:hover::after{width:100%;}
  .nav-cta{
    font-size:13px; font-weight:600; padding:10px 20px; border-radius:999px;
    background:var(--ink); color:#fff; letter-spacing:0.02em; transition:background .2s;
  }
  .nav-cta:hover{background:var(--orange);}

  /* HERO */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; justify-content:center;
    position:relative; overflow:hidden; padding-top:100px;
    background:
      radial-gradient(circle at 85% 12%, rgba(28,25,23,0.05), transparent 45%),
      var(--paper);
  }
  .hero .wrap{position:relative; z-index:2;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--ink); font-weight:600; margin-bottom:28px;
  }
  .eyebrow::before{content:''; width:28px; height:1px; background:var(--ink);}
  .hero h1{
    font-size:clamp(44px, 7.2vw, 104px);
    line-height:0.98;
    max-width:16ch;
  }
  .hero h1 em{font-style:normal; color:var(--orange);}
  .text-brown{color:var(--brown);}
  .text-orange{color:var(--orange);}
  .position-tag{
    font-family:'Inter',sans-serif; font-size:15.5px; color:var(--muted);
    max-width:52ch; margin-top:22px; padding-left:18px; border-left:2px solid var(--orange);
  }
  .position-tag b{color:var(--ink); font-weight:600;}
  .hero-sub{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
    margin-top:48px; padding-top:32px; border-top:1px solid var(--line);
    flex-wrap:wrap;
  }
  .hero-sub p{max-width:38ch; font-size:16.5px; color:var(--muted);}
  .hero-scroll{display:flex; align-items:center; gap:12px; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap;}
  .hero-scroll .dot{width:6px; height:6px; border-radius:50%; background:var(--orange); animation:pulse 1.8s infinite;}
  @keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}

  .marquee{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:22px 0; overflow:hidden; white-space:nowrap;
    background:var(--paper-dim);
  }
  .marquee-track{display:inline-flex; gap:60px; animation:scroll 28s linear infinite;}
  .marquee-track span{font-family:'Poppins',sans-serif; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:500;}
  .marquee-track span b{color:var(--ink);}
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* SECTION HEADS */
  section{padding:120px 0;}
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:56px; gap:40px; flex-wrap:wrap;
  }
  .section-head .num{font-size:13px; color:var(--ink); font-weight:600; letter-spacing:0.1em; margin-bottom:14px; display:block;}
  .section-head h2{font-size:clamp(30px,4vw,48px);}
  .section-head p{max-width:34ch; color:var(--muted); font-size:15.5px;}

  /* DISCIPLINES */
  .disciplines{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line);}
  .discipline{
    background:var(--paper); padding:44px 36px; position:relative; overflow:hidden;
    transition:background .3s; min-height:280px; display:flex; flex-direction:column; justify-content:space-between;
  }
  .discipline:hover{background:var(--ink);}
  .discipline:hover, .discipline:hover .d-count, .discipline:hover .d-desc, .discipline:hover .d-title{color:#f2ede8;}
  .discipline:hover .d-arrow{background:var(--orange); color:#fff; transform:rotate(45deg) translate(1px,-1px);}
  .d-index{font-size:13px; color:var(--orange); font-weight:600; letter-spacing:0.08em;}
  .d-title{font-family:'Poppins',sans-serif; font-size:30px; font-weight:600; margin:20px 0 10px; color:var(--brown);}
  .d-desc{color:var(--muted); font-size:14.5px; max-width:30ch;}
  .d-footer{display:flex; justify-content:space-between; align-items:center; margin-top:28px;}
  .d-count{font-size:13px; color:var(--muted); font-weight:500;}
  .d-arrow{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:16px;
    transition:all .3s;
  }

  /* PROJECT DETAIL PAGES — shared structural classes so every project page
     follows the same layout logic and collapses to one column together. */
  .proj-topgap{padding-top:150px; padding-bottom:40px;}
  .proj-split{display:grid; grid-template-columns:0.7fr 1.3fr; gap:80px;}
  .proj-duo{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
  .proj-duo-wide{display:grid; grid-template-columns:1.3fr 1fr; gap:28px;}
  /* The stack always stretches to match the hero image's height (grid default
     align-items:stretch); each image inside it takes an equal share of that
     height and crops to fill it, so the stack's bottom always lands exactly
     level with the hero, no matter how many images are stacked. */
  .proj-stack{display:flex; flex-direction:column; gap:28px;}
  .proj-stack img{flex:1 1 0; min-height:0; width:100%; object-fit:cover; border-radius:4px; display:block;}
  .proj-single{display:grid; grid-template-columns:1fr; max-width:640px;}
  /* Two image behaviors for an ordinary proj-duo row of two photos: locked
     to a shared aspect ratio and cropped to fill it, so columns end level. */
  .proj-img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; display:block;}
  .proj-img.bordered{border:1px solid var(--line);}

  /* A row pairing a diagram (must never be cropped — labels/panels/frames
     would be cut off) with an ordinary photo. Grid-stretch doesn't give a
     reliable equal-height match here (percentage-height in an auto grid
     track is circular and inconsistent across browsers), so this pairing
     uses flexbox instead: both columns are pinned to the SAME explicit
     height, the diagram renders at that height at its own natural width
     (never cropped, never distorted), and the photo fills whatever width
     is left, cropping only as needed. The vertical divider between the two
     is therefore not fixed at 50/50 — it moves to wherever the diagram's
     true proportions put it. */
  .proj-duo-diagram{display:flex; align-items:flex-start; gap:28px; flex-wrap:wrap;}
  .proj-duo-diagram .proj-col-auto{flex:0 0 auto;}
  .proj-duo-diagram .proj-col-fill{flex:1 1 300px; min-width:260px;}
  .proj-img-full{height:min(38vw, 480px); width:auto; max-width:100%; display:block; border-radius:4px;}
  .proj-img-fill{width:100%; height:min(38vw, 480px); object-fit:cover; display:block; border-radius:4px;}
  .proj-img-full.bordered, .proj-img-fill.bordered{border:1px solid var(--line);}
  @media (max-width:800px){
    .proj-duo-diagram{flex-direction:column;}
    .proj-duo-diagram .proj-col-fill{flex:1 1 auto; min-width:0;}
    .proj-img-full, .proj-img-fill{height:auto; width:100%;}
  }

  /* ---- Photo row system (4 row types, never cropped) ----
     One fixed gutter is used both between images in a row and between rows.
     Type 1: single image, full width, natural height.
     Type 2/3: 2 or 3 images, same row height, natural width each — every
       image gets flex-grow equal to its own aspect ratio (width/height) with
       flex-basis:0 and aspect-ratio set to that same value. Flexbox then
       distributes the row's width proportionally to each grow value, which
       makes every image land at an identical height automatically, at any
       viewport width, with zero cropping.
     Type 4: a vertical image beside a 2-up vertical stack of horizontal
       images. The stack's two images simply stretch to the stack column's
       width (flex-direction:column default), so their heights fall out of
       their own aspect ratio; the vertical image and the stack column are
       given precomputed flex-grow/aspect-ratio values (solved in Python for
       this site's .wrap content width, 1200px) so that at that width the
       stack's two heights plus one gutter exactly equal the vertical
       image's height. Below that width the match drifts by a few px, which
       is invisible and irrelevant once the row collapses to one column on
       mobile anyway. */
  .imgrow{display:flex; gap:var(--gutter,28px); margin-bottom:var(--gutter,28px); align-items:flex-start;}
  .imgrow:last-child{margin-bottom:0;}
  .imgrow img{display:block; width:100%; height:auto; min-width:0; border-radius:4px;}
  .imgrow > img, .imgrow > .imgrow-stack, .imgrow > .imgrow-item{flex:1 1 0; min-width:0;}
  .imgrow.type1{display:block;}
  .imgrow.type1 img{width:100%; height:auto;}
  .imgrow-stack{display:flex; flex-direction:column; gap:var(--gutter,28px);}
  .imgrow-item img{width:100%; height:auto; display:block; border-radius:4px;}
  @media (max-width:800px){
    .imgrow{flex-direction:column;}
    .imgrow > img, .imgrow > .imgrow-stack, .imgrow > .imgrow-item{flex:none !important; width:100% !important; aspect-ratio:auto !important;}
    .imgrow-stack img{aspect-ratio:auto !important;}
  }
  .proj-next{
    display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
    padding:28px 0; border-top:1px solid var(--line);
  }
  .proj-next-link{display:flex; align-items:center; gap:20px;}
  .proj-next-thumb{
    width:84px; height:64px; border-radius:4px; overflow:hidden; flex-shrink:0;
    background:var(--paper-dim);
  }
  .proj-next-thumb img{width:100%; height:100%; object-fit:cover;}
  .proj-next-arrow{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:16px;
    transition:all .3s; flex-shrink:0;
  }
  .proj-next-link:hover .proj-next-arrow{background:var(--orange); color:#fff; border-color:var(--orange); transform:rotate(45deg) translate(1px,-1px);}
  @media (max-width:800px){
    .proj-topgap{padding-top:120px;}
    .proj-split, .proj-duo, .proj-duo-wide{grid-template-columns:1fr; gap:24px;}
    .proj-next-link{width:100%;}
  }

  /* PROJECT GRID */
  .projects{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .project-card{cursor:pointer;}
  .project-thumb{
    aspect-ratio:4/5; border-radius:4px; margin-bottom:16px; position:relative; overflow:hidden;
  }
  .project-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .project-thumb::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(160deg, transparent 40%, rgba(0,0,0,0.35));
  }
  .project-thumb .tag{
    position:absolute; top:16px; left:16px; z-index:2;
    font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:600;
    color:#fff; background:rgba(0,0,0,0.28); padding:5px 10px; border-radius:999px;
    backdrop-filter:blur(4px);
  }
  .g1{background:linear-gradient(135deg,#e8703a,#a73227 60%,#5c1f18);}
  .g2{background:linear-gradient(135deg,#d9c8b8,#8a6a52 55%,#3f2c22);}
  .g3{background:linear-gradient(135deg,#3a3835,#1c1917 65%,#000);}
  .g4{background:linear-gradient(135deg,#ed9a5e,#c04a28 55%,#601f18);}
  .g5{background:linear-gradient(135deg,#c9b8a3,#7d5b3f 60%,#33221a);}
  .g6{background:linear-gradient(135deg,#4a4844,#242220 65%,#050504);}
  .project-meta{display:flex; flex-direction:column; gap:5px;}
  .project-meta h3{font-size:18.5px; font-weight:600; font-family:'Poppins',sans-serif; line-height:1.3;}
  .project-meta .project-sub{font-size:12.5px; color:var(--muted); letter-spacing:0.01em;}

  .sketch-section{background:var(--paper-dim);}
  .sketch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .sketch-thumb{
    aspect-ratio:4/3; border-radius:4px; margin-bottom:14px;
    background:#fdfcfb;
    border:1px solid var(--line);
    position:relative; overflow:hidden;
  }
  .sketch-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .sk1::before, .sk2::before, .sk3::before{
    content:''; position:absolute; inset:18%; border:1.5px solid var(--brown); opacity:0.35;
  }
  .sk1::before{clip-path:polygon(10% 90%, 10% 30%, 50% 5%, 90% 30%, 90% 90%);}
  .sk2::before{clip-path:polygon(0% 100%, 0% 20%, 100% 20%, 100% 100%); inset:22% 30%;}
  .sk3::before{clip-path:polygon(0% 100%, 0% 40%, 40% 40%, 40% 0%, 100% 0%, 100% 100%);}

  .pull-quote{background:var(--paper-dim); text-align:left;}
  .pull-quote blockquote{
    font-family:'Poppins',sans-serif; font-weight:500; font-size:clamp(24px,3.4vw,38px);
    line-height:1.35; max-width:20ch; color:var(--ink);
  }
  .pull-quote blockquote span{color:var(--orange);}
  .pull-quote cite{display:block; margin-top:24px; font-style:normal; font-size:13.5px; color:var(--muted); letter-spacing:0.02em;}

  .view-all{
    display:inline-flex; align-items:center; gap:10px; margin-top:56px;
    font-size:14px; font-weight:600; letter-spacing:0.02em;
    padding-bottom:4px; border-bottom:1px solid var(--ink);
    transition:color .2s, border-color .2s;
  }
  .view-all:hover{color:var(--orange); border-color:var(--orange);}

  /* STATS / ABOUT TEASER */
  .about-teaser{background:var(--ink); color:#f2ede8;}
  .about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center;}
  .about-teaser .eyebrow{color:var(--orange);}
  .about-teaser .eyebrow::before{background:var(--orange);}
  .about-teaser h2{font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin-bottom:22px; color:#f2ede8;}
  .about-teaser p{color:#b8b1a9; font-size:16px; max-width:44ch; margin-bottom:32px;}
  .stats{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,0.12);}
  .stat{padding:32px 28px; background:var(--ink);}
  .stat b{font-family:'Poppins',sans-serif; font-size:40px; display:block; color:var(--orange); font-weight:600;}
  .stat span{font-size:13px; color:#94897d; letter-spacing:0.04em;}
  .team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
  .team-card{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:24px 20px; border:1px solid var(--line);}
  .team-bio{position:absolute; top:100%; left:0; margin-top:10px; width:340px; max-width:80vw; background:#fff; border:1px solid var(--line); box-shadow:0 14px 34px rgba(0,0,0,0.14); padding:20px 22px; font-size:13px; line-height:1.7; color:var(--muted); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity 0.2s ease, transform 0.2s ease; z-index:20;}
  .team-bio p{margin:0 0 12px 0;}
  .team-bio p:last-child{margin-bottom:0;}
  .team-card.has-bio:hover .team-bio{opacity:1; visibility:visible; transform:translateY(0);}
  @media(max-width:900px){ .team-bio{display:none;} }
  .team-initials{width:72px; height:72px; border-radius:50%; background:var(--orange); padding:4px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; overflow:hidden;}
  .team-initials img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;}
  .team-card b{font-size:15.5px; font-weight:600;}
  .team-card span{font-size:13px; color:var(--muted);}
  @media(max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
  .btn{
    display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600;
    background:var(--orange); color:#fff; padding:14px 26px; border-radius:999px;
  }

  /* AI VIDEOS STRIP */
  .ai-strip{background:var(--paper-dim);}
  .ai-row{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:48px;}
  .ai-tags{display:flex; gap:10px; flex-wrap:wrap;}
  .ai-tags span{font-size:12.5px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--muted);}
  .ai-strip .projects{grid-template-columns:repeat(4,1fr);}
  .ai-strip .project-thumb{aspect-ratio:9/13;}

  /* CONTACT */
  .contact{text-align:left;}
  .contact-inner{
    display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;
    padding-bottom:64px; border-bottom:1px solid var(--line);
  }
  .contact h2{font-size:clamp(32px,5vw,64px); max-width:14ch; line-height:1.05;}
  .contact-links{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
  .contact-links a{font-size:16px; font-weight:500; display:flex; align-items:center; gap:10px;}
  .contact-links a span{width:8px; height:8px; border-radius:50%; background:var(--orange);}
  .contact-links a .social-icon{flex-shrink:0;}

  footer{padding:48px 0 60px;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
  .foot-brand{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted);}
  .foot-brand img{height:34px;}
  .foot-links{display:flex; gap:26px; font-size:13px; color:var(--muted);}
  .foot-links a:hover{color:var(--ink);}
  .foot-social{display:flex; gap:20px; align-items:center; font-size:13px; color:var(--muted);}
  .foot-social a{display:flex; align-items:center;}

  @media (max-width:900px){
    .navlinks{display:none;}
    .disciplines{grid-template-columns:1fr;}
    .projects{grid-template-columns:repeat(2,1fr);}
    .ai-strip .projects{grid-template-columns:repeat(2,1fr);}
    .about-grid{grid-template-columns:1fr; gap:40px;}
    .wrap{padding:0 22px;}
  }

  /* FILTER BAR — discipline listing pages (Architecture / Interior) */
  .filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px;}
  .filter-chip{
    font-size:13px; font-weight:500; padding:9px 18px; border-radius:999px;
    border:1px solid var(--line); color:var(--muted); background:transparent;
    cursor:pointer; transition:all .2s; font-family:'Inter',sans-serif;
  }
  .filter-chip:hover{border-color:var(--ink); color:var(--ink);}
  .filter-chip.active{background:var(--ink); border-color:var(--ink); color:#fff;}
  .project-card[hidden]{display:none;}
  .listing-count{font-size:13px; color:var(--muted); margin:-32px 0 40px;}

  /* AI VIDEOS LISTING PAGE */
  .video-series{margin-bottom:80px;}
  .video-series:last-child{margin-bottom:0;}
  .video-series-head{display:flex; align-items:baseline; gap:16px; margin-bottom:32px; flex-wrap:wrap;}
  .video-series-head h3{font-family:'Poppins',sans-serif; font-size:24px; font-weight:600; color:var(--brown);}
  .video-series-head span{font-size:13px; color:var(--muted);}
  .video-card{display:block; position:relative;}
  /* No fixed aspect-ratio here on purpose: a 16:9 poster must render as an
     exact 16:9 box and a 9:16 (Shorts) poster as an exact 9:16 box, with no
     cropping and no letterbox bars. Letting each image keep its own
     intrinsic ratio (width:100%, height:auto) guarantees that regardless of
     which exact dimensions YouTube serves for a given thumbnail. */
  .video-thumb{
    border-radius:4px; margin-bottom:14px; position:relative; overflow:hidden;
    background:var(--paper-dim); line-height:0;
  }
  .video-thumb img{width:100%; height:auto; display:block; transition:transform .4s;}
  .video-card:hover .video-thumb img{transform:scale(1.04);}
  .video-play{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .video-play span{
    width:52px; height:52px; border-radius:50%; background:rgba(28,25,23,0.55); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px;
    transition:all .25s;
  }
  .video-card:hover .video-play span{background:var(--orange); transform:scale(1.08);}
  .video-duration{
    position:absolute; bottom:10px; right:10px; z-index:2;
    font-size:11px; font-weight:600; color:#fff; background:rgba(0,0,0,0.55);
    padding:3px 8px; border-radius:4px;
  }
  .video-meta h4{font-size:16.5px; font-weight:600; font-family:'Poppins',sans-serif; line-height:1.3; margin-bottom:4px;}
  .video-meta span{font-size:12.5px; color:var(--muted);}
  .video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .video-grid.wide{grid-template-columns:repeat(2,1fr);}
  .video-grid.shorts{grid-template-columns:repeat(4,1fr);}
  @media (max-width:900px){
    .video-grid, .video-grid.wide, .video-grid.shorts{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:600px){
    .video-grid, .video-grid.wide, .video-grid.shorts{grid-template-columns:1fr;}
  }

  /* SKETCHES MARQUEE (JS-driven, single pass, random order each load -- see index.html inline script) */
  .sketch-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);}
  .sketch-track{display:inline-flex; align-items:center; gap:20px; will-change:transform;}
  .sketch-card{display:block; flex:0 0 auto; height:260px; border-radius:4px; overflow:hidden; position:relative; background:#fdfcfb; border:1px solid var(--line);}
  .sketch-card img{height:100%; width:auto; display:block;}
  @media (max-width:720px){
    .sketch-card{height:170px;}
  }

  /* AI VIDEOS POSTER MARQUEE (JS-driven, continuous carousel -- see index.html inline script) */
  .poster-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);}
  .poster-track{display:inline-flex; align-items:center; gap:20px; will-change:transform;}
  .poster-card{display:block; flex:0 0 auto; height:220px; border-radius:4px; overflow:hidden; position:relative; background:var(--paper-dim);}
  .poster-card img{height:100%; width:auto; display:block; transition:transform .4s;}
  .poster-card:hover img{transform:scale(1.04);}
  @media (max-width:720px){
    .poster-card{height:150px;}
  }