.site-menu-toggle{display:none;}

/* =========================================================
   HAMID ATTARAN — MOBILE SYSTEM
   Mobile-only refinement. Desktop rules remain untouched.
   ========================================================= */

@media (max-width: 900px){
  :root{
    --mobile-x:18px;
    --mobile-top:18px;
    --mobile-bottom:22px;
    --site-header-x:var(--mobile-x);
    --site-header-top:var(--mobile-top);
    --site-name-size:11px;
  }

  html,
  body{
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  /* ---------- master mobile navigation ---------- */
  .site-header{
    align-items:flex-start !important;
  }

  .site-name{
    position:relative;
    z-index:2;
  }

  .site-menu-toggle{
    display:block;
    appearance:none;
    position:fixed;
    right:var(--mobile-x);
    top:calc(var(--mobile-top) - 2px);
    z-index:1202;
    border:0;
    margin:0;
    padding:2px 0 8px 10px;
    background:transparent;
    color:inherit;
    font:400 11px/1 Arial,Helvetica,sans-serif;
    letter-spacing:0;
    text-transform:uppercase;
    cursor:pointer;
  }

  .site-nav{
    position:fixed !important;
    left:var(--mobile-x) !important;
    right:var(--mobile-x) !important;
    top:52px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:13px 0 15px !important;
    border-top:1px solid rgba(17,17,17,.15);
    border-bottom:1px solid rgba(17,17,17,.15);
    background:rgba(216,216,216,.96);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:
      opacity 180ms ease,
      transform 220ms cubic-bezier(.22,.72,.18,1),
      visibility 0s linear 220ms;
    z-index:1201 !important;
  }

  .site-nav a{
    display:block !important;
    width:auto !important;
    padding:7px 0 !important;
    margin:0 !important;
    font-size:16px !important;
    line-height:1.05 !important;
    opacity:.48 !important;
  }

  .site-nav a.is-current{
    opacity:1 !important;
  }

  body.mobile-menu-open .site-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition-delay:0s;
  }

  body.mobile-menu-open .site-menu-toggle{
    opacity:.55;
  }

  body.mobile-dark-page .site-nav{
    background:rgba(34,34,33,.96);
    border-color:rgba(255,255,255,.20);
  }

  body.mobile-dark-page .site-menu-toggle{
    color:#fff;
  }

  html.mobile-scroll-page,
  html.mobile-scroll-page body{
    height:auto !important;
    min-height:100% !important;
    overflow-y:auto !important;
  }

  /* ---------- HOME ---------- */
  body.page-home .page{
    height:100svh !important;
    min-height:100svh !important;
  }

  body.page-home .home-intro{
    left:20px !important;
    right:20px !important;
    bottom:30px !important;
    max-width:315px !important;
  }

  body.page-home .home-intro h1{
    font-size:40px !important;
    line-height:.96 !important;
  }

  body.page-home .home-subline{
    margin-top:13px !important;
    max-width:290px !important;
    font-size:13px !important;
    line-height:1.35 !important;
  }

  body.page-home .reveal-note{
    display:block !important;
    left:20px !important;
    bottom:122px !important;
    transform:none !important;
    font-size:10px !important;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:rgba(17,17,17,.42) !important;
  }

  body.page-home .cursor{display:none !important}

  /* ---------- WORK + EXPERIMENT INDEX ---------- */
  body.page-index{
    overflow:hidden !important;
  }

  body.page-index .page{
    height:100svh !important;
    min-height:100svh !important;
  }

  body.page-index .project-index-stage{
    left:18px !important;
    right:18px !important;
    top:96px !important;
    bottom:20px !important;
  }

  body.page-index .project-index-list{
    top:0 !important;
    bottom:auto !important;
    width:100% !important;
    height:43% !important;
  }

  body.page-index .project-index-row{
    height:60px !important;
  }

  body.page-index .project-index-inner{
    bottom:7px !important;
    gap:10px !important;
    align-items:flex-end !important;
  }

  body.page-index .project-index-number{
    font-size:10px !important;
  }

  body.page-index .project-index-title{
    max-width:70% !important;
    font-size:28px !important;
    line-height:.95 !important;
    white-space:normal !important;
  }

  body.page-index .project-index-meta{
    display:none !important;
  }

  body.page-index .project-index-row[data-distance="0"] .project-index-meta{
    display:block !important;
    margin-left:auto;
    max-width:31% !important;
    padding-bottom:0 !important;
    font-size:10px !important;
    line-height:1.23 !important;
  }

  body.page-index .project-index-row[data-distance="3"],
  body.page-index .project-index-row[data-distance="-3"]{
    opacity:0 !important;
    pointer-events:none !important;
  }

  body.page-index .project-index-highlight{
    left:50% !important;
    right:auto !important;
    top:auto !important;
    bottom:0 !important;
    width:min(76vw,310px) !important;
    transform:translateX(-50%) !important;
  }

  /* ---------- SINGLE WORK / EXPERIMENT ---------- */
  body.page-single{
    min-height:100% !important;
    overflow-y:auto !important;
  }

  body.page-single .single-shell{
    position:relative !important;
    inset:auto !important;
    min-height:100svh !important;
    overflow:visible !important;
  }

  body.page-single .single-scroll-spacer{display:none !important}

  body.page-single .single-info{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    padding:96px 18px 24px !important;
  }

  body.page-single .single-counter{
    margin-bottom:10px !important;
    font-size:10px !important;
  }

  body.page-single .single-title{
    margin-bottom:16px !important;
    font-size:36px !important;
    line-height:.98 !important;
  }

  body.page-single .single-tags,
  body.page-single .single-place{
    font-size:13px !important;
    line-height:1.35 !important;
  }

  body.page-single .single-list,
  body.page-single .single-list-scrollbar,
  body.page-single .single-scroll-hint,
  body.page-single .single-progress{
    display:none !important;
  }

  body.page-single .single-viewport{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    overflow:visible !important;
  }

  body.page-single .single-track{
    position:relative !important;
    height:auto !important;
    display:block !important;
    padding:0 18px 36px !important;
    transform:none !important;
  }

  body.page-single .single-panel{
    margin:0 0 18px !important;
  }

  body.page-single .single-image-panel{
    height:auto !important;
    min-height:0 !important;
  }

  body.page-single .single-image-panel img,
  body.page-single .single-image-panel.square img,
  body.page-single .single-image-panel.wide img,
  body.page-single .single-image-panel.portrait img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
  }

  body.page-single .single-text-panel{
    width:auto !important;
    padding:22px 1px 28px !important;
  }

  body.page-single .single-text-panel h2{
    margin-bottom:16px !important;
    font-size:27px !important;
    line-height:1.08 !important;
  }

  body.page-single .single-text-panel p{
    font-size:18px !important;
    line-height:1.55 !important;
  }

  body.page-single .single-next{
    width:100% !important;
    margin-top:10px !important;
    padding:26px 0 58px !important;
    border-top:1px solid rgba(17,17,17,.18);
  }

  body.page-single .single-next a{
    font-size:13px !important;
  }

  /* ---------- ABOUT ---------- */
  body.page-about .page{
    width:100% !important;
    height:auto !important;
    min-height:100svh !important;
    overflow:visible !important;
  }

  body.page-about .about-stage{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:104px 20px 48px !important;
    display:flex !important;
    flex-direction:column-reverse !important;
    gap:36px !important;
  }

  body.page-about .about-right{
    position:relative !important;
    top:auto !important;
    padding:0 !important;
  }

  body.page-about .statement{
    font-size:36px !important;
    line-height:1.04 !important;
    white-space:normal !important;
  }

  body.page-about .stack-window{
    width:100% !important;
    height:4.55em !important;
  }

  body.page-about .story-term{
    white-space:normal !important;
  }

  body.page-about .about-left{
    position:relative !important;
    padding:22px 0 0 !important;
    border-top:1px solid rgba(17,17,17,.14);
    align-items:flex-start !important;
    text-align:left !important;
  }

  body.page-about .about-left::after{display:none !important}

  body.page-about .based-in{
    position:static !important;
    width:auto !important;
    margin:0 0 18px !important;
    text-align:left !important;
    font-size:10px !important;
  }

  body.page-about .botanical{
    width:78px !important;
    margin:0 0 16px !important;
  }

  body.page-about .about-copy{
    width:auto !important;
    max-width:330px !important;
    font-size:14px !important;
    line-height:1.3 !important;
  }

  /* ---------- CONTACT ---------- */
  body.page-contact .page{
    height:auto !important;
    min-height:100svh !important;
    overflow:visible !important;
  }

  body.page-contact .contact-stage{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    min-height:100svh !important;
    margin:0 !important;
    padding:92px 18px 48px !important;
  }

  body.page-contact .image-frame{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:56svh !important;
    min-height:350px !important;
    margin:0 !important;
  }

  body.page-contact .image-frame img{
    left:46% !important;
    top:50% !important;
    width:112% !important;
    height:112% !important;
  }

  body.page-contact .contact-copy{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:min(62vw,250px) !important;
    margin:-58px 0 0 auto !important;
  }

  body.page-contact .contact-copy h1{
    margin-bottom:15px !important;
    font-size:38px !important;
    line-height:.96 !important;
  }

  body.page-contact .contact-details{
    font-size:14px !important;
    line-height:1.35 !important;
  }

  body.page-contact .contact-email{margin-bottom:8px !important}
  body.page-contact .contact-phone{margin-bottom:13px !important}
  body.page-contact .contact-location-inline{font-size:10px !important}

  /* ---------- MOVING IMAGE ---------- */
  body.page-moving{
    overflow:hidden !important;
    background:#333 !important;
  }

  body.page-moving .page{
    height:100svh !important;
    min-height:100svh !important;
    overflow:hidden !important;
  }

  body.page-moving .project-list{display:none !important}

  body.page-moving .info{
    left:18px !important;
    right:18px !important;
    bottom:104px !important;
    max-width:74vw !important;
  }

  body.page-moving .title{
    margin-top:4px !important;
    font-size:36px !important;
    line-height:.96 !important;
  }

  body.page-moving .label,
  body.page-moving .meta{
    font-size:10px !important;
    line-height:1.3 !important;
  }

  body.page-moving .counter{
    top:72px !important;
    right:18px !important;
    bottom:auto !important;
    font-size:10px !important;
  }

  body.page-moving .video-controls{
    left:18px !important;
    right:18px !important;
    bottom:34px !important;
    width:auto !important;
    transform:none !important;
    gap:7px !important;
    font-size:10px !important;
  }

  body.page-moving .video-time{
    min-width:30px !important;
  }

  body.page-moving .fullscreen-btn{
    width:18px;
    margin-left:2px !important;
    font-size:0 !important;
  }

  body.page-moving .fullscreen-btn::after{
    content:"↗";
    font-size:14px;
  }

  body.page-moving .progress{
    left:18px !important;
    right:18px !important;
    bottom:20px !important;
  }

  body.page-moving .cue{display:none !important}
  body.page-moving .pause-area{inset:62px 0 76px !important}

  /* ---------- WRITING INDEX ---------- */
  body.page-writing-index{
    overflow:hidden !important;
  }

  body.page-writing-index .writing-stage{
    left:18px !important;
    right:18px !important;
    top:96px !important;
    bottom:42px !important;
  }

  body.page-writing-index .story{
    height:86px !important;
  }

  body.page-writing-index .story-inner{
    gap:12px !important;
    bottom:9px !important;
  }

  body.page-writing-index .story-title{
    max-width:68% !important;
    white-space:normal !important;
  }

  body.page-writing-index .story-meta{
    max-width:30% !important;
    white-space:normal !important;
  }

  body.page-writing-index .scroll-cue{
    display:none !important;
  }

  /* ---------- SINGLE WRITING ---------- */
  body.page-writing-single .page{
    height:auto !important;
    min-height:100svh !important;
    overflow:visible !important;
  }

  body.page-writing-single .story-head{
    padding:98px 18px 24px !important;
  }

  body.page-writing-single .story-head h1{
    font-size:32px !important;
  }

  body.page-writing-single .reader-wrap{
    margin:0 18px 112px !important;
  }

  /* Keep the writing text exactly as designed. */
  body.page-writing-single .text,
  body.page-writing-single .chapter{
    font-size:18px !important;
    line-height:1.58 !important;
  }

  body.page-writing-single .page-nav{
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    padding:12px 0 2px;
    background:linear-gradient(to top,rgba(216,216,216,.98) 72%,rgba(216,216,216,0));
  }
}

@media (max-width: 420px){
  body.page-index .project-index-title{
    max-width:66% !important;
    font-size:26px !important;
  }

  body.page-contact .contact-copy{
    width:66vw !important;
  }

  body.page-about .statement{
    font-size:34px !important;
  }
}


/* =========================================================
   MOBILE — WORK INDEX ONLY
   Desktop and Experiments are intentionally unaffected.
   ========================================================= */
@media(max-width:900px){

  /* Keep exactly three list positions visible:
     previous / ACTIVE / next. */
  body.page-work-index .project-index-list{
    top:8px !important;
    height:226px !important;
    bottom:auto !important;
    overflow:visible !important;
  }

  body.page-work-index .project-index-row{
    height:62px !important;
  }

  body.page-work-index .project-index-row[data-distance="0"]{
    opacity:1 !important;
    filter:blur(0) !important;
    pointer-events:auto !important;
  }

  body.page-work-index .project-index-row[data-distance="1"],
  body.page-work-index .project-index-row[data-distance="-1"]{
    opacity:.30 !important;
    filter:blur(2.2px) !important;
    pointer-events:auto !important;
  }

  body.page-work-index .project-index-row[data-distance="2"],
  body.page-work-index .project-index-row[data-distance="-2"],
  body.page-work-index .project-index-row[data-distance="3"],
  body.page-work-index .project-index-row[data-distance="-3"],
  body.page-work-index .project-index-row.is-hidden{
    opacity:0 !important;
    filter:blur(5px) !important;
    pointer-events:none !important;
  }

  /* Adjacent rows stay visually simple; metadata belongs to
     the sharp middle/active project only. */
  body.page-work-index .project-index-row:not([data-distance="0"]) .project-index-meta{
    display:none !important;
  }

  /* Large preview: equal visual inset from the page frame
     on left, right, and bottom. The frame itself sits at 9px,
     so 18px places the image 9px inside it on all three sides. */
  body.page-work-index .project-index-highlight{
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    aspect-ratio:1 / 1 !important;
    transform:none !important;
  }

  body.page-work-index .project-index-highlight img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

/* Short-phone safety: preserve the same composition without
   letting the enlarged image collide with the three-item list. */
@media(max-width:900px) and (max-height:700px){
  body.page-work-index .project-index-list{
    height:202px !important;
  }

  body.page-work-index .project-index-highlight{
    left:42px !important;
    right:42px !important;
    bottom:18px !important;
  }
}