.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{
    color:rgba(17,17,17,.58) !important;
    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:12px !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:none !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{
    overflow:hidden !important;
  }

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

  body.page-about .about-stage{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    top:74px !important;
    bottom:20px !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    margin:0 !important;
    padding:52px 0 0 !important;
    display:grid !important;
    grid-template-columns:22% minmax(0,1fr) !important;
    grid-template-rows:auto 1fr !important;
    column-gap:10px !important;
    row-gap:14px !important;
    overflow:hidden !important;
  }

  body.page-about .about-left{
    display:contents !important;
  }

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

  body.page-about .based-in{
    display:block !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    z-index:20 !important;
    width:auto !important;
    margin:0 !important;
    padding:0 0 10px !important;
    border-bottom:1px solid rgba(17,17,17,.14) !important;
    text-align:left !important;
    font-size:10px !important;
    line-height:1.18 !important;
    color:rgba(17,17,17,.82) !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  body.page-about .about-right{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    position:relative !important;
    top:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
  }

  body.page-about .statement{
    font-size:clamp(27px,8.2vw,34px) !important;
    line-height:1.01 !important;
    white-space:normal !important;
  }

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

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

  body.page-about .botanical{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:end !important;
    justify-self:start !important;
    width:calc(82% + 10px) !important;
    height:auto !important;
    max-height:24svh !important;
    margin:0 0 5px 5px !important;
    object-fit:contain !important;
    object-position:left bottom !important;
    opacity:.48 !important;
  }

  body.page-about .about-copy{
    grid-column:2 !important;
    grid-row:2 !important;
    align-self:end !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 5px 5px 0 !important;
    box-sizing:border-box !important;
    overflow-wrap:anywhere !important;
    font-size:12.5px !important;
    line-height:1.24 !important;
  }

  body.page-about .about-copy p+p{
    margin-top:8px !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 .video-layer{
    display:none !important;
  }

  body.page-moving .mobile-preview-layer{
    display:block !important;
  }

  body.page-moving .video-controls{
    display:none !important;
  }

  body.page-moving .pause-area,
  body.page-moving .pause-mark{
    display:none !important;
  }

  body.page-moving .info{
    left:18px !important;
    right:18px !important;
    bottom:26px !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;
    height:18px;
    margin-left:2px !important;
    font-size:0 !important;
    opacity:.78;
  }

  body.page-moving .fullscreen-btn .ui-arrow{
    width:12px;
    height:12px;
    margin:auto;
  }

  body.page-moving .progress{
    display:none !important;
  }

  body.page-moving .mobile-swipe-cue{
    position:absolute;
    right:18px;
    bottom:26px;
    z-index:26;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:9px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:rgba(255,255,255,.68);
    pointer-events:none;
    transition:opacity .18s ease;
  }

  body.page-moving .mobile-swipe-cue .ui-arrow{
    display:inline-block;
    width:10px;
    height:10px;
    animation:mobileSwipeCue 1.45s ease-in-out infinite;
  }

  body.page-moving .mobile-swipe-cue.is-hidden{
    opacity:0;
  }

  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-filter{
    position:absolute;
    left:18px;
    right:18px;
    top:56px;
    z-index:26;
    display:flex;
    align-items:center;
    gap:14px;
    overflow-x:auto;
    padding:0 0 8px;
    border-bottom:1px solid rgba(17,17,17,.16);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  body.page-writing-index .writing-filter::-webkit-scrollbar{
    display:none;
  }

  body.page-writing-index .writing-filter button{
    flex:0 0 auto;
    position:relative;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.02em;
    opacity:.38;
    cursor:pointer;
    transition:opacity .18s ease;
  }

  body.page-writing-index .writing-filter button.is-active{
    opacity:1;
  }

  body.page-writing-index .writing-filter button.is-active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-9px;
    height:1px;
    background:currentColor;
  }

  body.page-writing-index .writing-stage{
    left:18px !important;
    right:18px !important;
    top:76px !important;
    bottom:9px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    clip-path:inset(0);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    scrollbar-width:none;
  }

  body.page-writing-index .writing-stage::-webkit-scrollbar{
    display:none;
  }

  body.page-writing-index .writing-list{
    position:relative !important;
    inset:auto !important;
    min-height:100%;
    padding:0 0 18px;
  }

  body.page-writing-index .story{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    height:86px !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
    transition:none !important;
    border-bottom:1px solid rgba(17,17,17,.19);
  }

  body.page-writing-index .story.is-multiline{
    height:112px !important;
  }

  body.page-writing-index .story.is-filtered-out{
    display:none !important;
  }

  body.page-writing-index .story.is-hidden{
    opacity:1 !important;
    filter:none !important;
  }

  body.page-writing-index .story-number{
    top:10px !important;
  }

  body.page-writing-index .story-inner{
    gap:12px !important;
    top:31px !important;
    bottom:auto !important;
    transform:none !important;
  }

  body.page-writing-index .story.is-multiline .story-inner{
    top:31px !important;
    bottom:auto !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{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100svh !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-x !important;
  }

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

  body.page-writing-single .story-head{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    top:54px !important;
    padding:0 !important;
    transition:opacity 160ms ease;
  }

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

  body.page-writing-single.mobile-reader-past-title .story-head{
    opacity:0;
    pointer-events:none;
  }

  body.page-writing-single .reader-wrap{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    top:132px !important;
    bottom:64px !important;
    margin:0 !important;
    height:auto !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-x !important;
    transition:top 160ms ease;
  }

  body.page-writing-single.mobile-reader-past-title .reader-wrap{
    top:62px !important;
  }

  body.page-writing-single .reader{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  body.page-writing-single .column{
    height:100% !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  body.page-writing-single .column + .column{
    display:none !important;
  }

  body.page-writing-single .reader-wrap::after{
    display:none !important;
  }

  /* Phone reading size: 18px is a comfortable standard for long-form reading. */
  body.page-writing-single .text,
  body.page-writing-single .chapter,
  body.page-writing-single .measure .text,
  body.page-writing-single .measure .chapter{
    font-size:18px !important;
    line-height:1.55 !important;
  }

  body.page-writing-single .text p{
    margin-bottom:18px !important;
  }

  body.page-writing-single .page-nav{
    position:fixed !important;
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    height:24px;
    padding:0 !important;
    background:none !important;
  }

  body.page-writing-single .page-link{
    position:absolute !important;
    top:0 !important;
    width:34px !important;
    height:24px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    font-size:0 !important;
    opacity:.62 !important;
    pointer-events:auto;
  }

  body.page-writing-single .page-link.prev{
    left:0 !important;
  }

  body.page-writing-single .page-link.next{
    right:0 !important;
  }

  body.page-writing-single .page-link .ui-arrow{
    width:12px !important;
    height:12px !important;
  }

  body.page-writing-single .page-link[disabled]{
    opacity:.18 !important;
    pointer-events:none;
  }

  body.page-writing-single .reading-status{
    display:block !important;
    left:0 !important;
    right:0 !important;
    bottom:2px !important;
    height:auto !important;
    text-align:center;
    font-size:10px !important;
  }

  body.page-writing-single .left-page-number,
  body.page-writing-single .right-page-number{
    display:none !important;
  }

  body.page-writing-single .read-progress{
    position:static !important;
    transform:none !important;
    opacity:.62 !important;
  }

  body.page-writing-single .mobile-reader-image-page{
    display:none;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    z-index:8;
  }

  body.page-writing-single .mobile-reader-image-page.is-visible{
    display:flex;
  }

  body.page-writing-single.mobile-reader-image-only .reader{
    visibility:hidden;
  }

  body.page-writing-single .mobile-reader-photo{
    position:relative;
    width:min(82vw,360px);
    aspect-ratio:1.45 / 1;
    margin:0;
    perspective:1000px;
    touch-action:manipulation;
  }

  body.page-writing-single .mobile-reader-photo .photo-card{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transition:transform 420ms cubic-bezier(.22,.72,.18,1);
  }

  body.page-writing-single .mobile-reader-photo.is-flipped .photo-card{
    transform:rotateY(180deg);
  }

  body.page-writing-single .mobile-reader-photo .photo-face{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.14);
    background:#d3d3d1;
    overflow:hidden;
  }

  body.page-writing-single .mobile-reader-photo .photo-front{
    transform:rotate(-1deg);
  }

  body.page-writing-single .mobile-reader-photo .photo-front img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    filter:grayscale(1);
  }

  body.page-writing-single .mobile-reader-photo .photo-back{
    transform:rotateY(180deg) rotate(1deg);
    display:flex;
    align-items:center;
    justify-content:center;
    background:#cececc;
    border:1px solid rgba(17,17,17,.12);
    color:rgba(17,17,17,.48);
    font-family:"Courier New",Courier,monospace;
  }

  body.page-writing-single .mobile-reader-photo .photo-back-copy{
    text-align:center;
    font-size:11px;
    line-height:1.55;
    letter-spacing:.04em;
  }

  body.page-writing-single .mobile-reader-photo .photo-back-copy span{
    display:block;
    margin-top:10px;
    font-size:9px;
    opacity:.65;
  }

  body.page-writing-single .mobile-reader-photo .photo-flip{
    position:absolute;
    right:0;
    bottom:-28px;
    display:block !important;
    opacity:.58 !important;
    pointer-events:auto !important;
  }
}

@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;
  }
}


/* =========================================================
   MOBILE — FULL SCREEN NAVIGATION
   ========================================================= */
@media (max-width:900px){

  body.mobile-menu-open{
    overflow:hidden !important;
  }

  /* Full-screen menu using the same neutral background as the site. */
  .site-nav{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100svh !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:13px !important;

    padding:62px 34px !important;
    margin:0 !important;
    border:0 !important;

    background:#d8d8d8 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none !important;

    transition:
      opacity 220ms ease,
      visibility 0s linear 220ms !important;

    z-index:1201 !important;
    overflow:hidden !important;
  }

  /* Keep the area OUTSIDE the menu's inner bounding box clean,
     matching the light, grain-free area outside the site frame. The
     darker inner menu panel keeps its own grain via ::after below. */
  .site-nav::before{
    content:"";
    position:absolute;
    inset:0;
    background:none !important;
    opacity:0 !important;
    pointer-events:none;
    z-index:0;
  }

  /* A slightly smaller inner frame than the normal page frame. */
  .site-nav::after{
    content:"";
    position:absolute;
    inset:42px 15px 15px;
    border:1px solid rgba(17,17,17,.42);
    pointer-events:none;
    z-index:1;
  }

  .site-nav a{
    position:relative;
    z-index:2;
    display:block !important;
    width:auto !important;
    margin:0 !important;
    padding:4px 8px !important;

    font-size:18px !important;
    line-height:1 !important;
    letter-spacing:-.01em !important;
    text-align:center !important;

    color:rgba(17,17,17,.58) !important;
    opacity:1 !important;
    transform:none !important;
  }

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

  body.mobile-menu-open .site-nav{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition-delay:0s !important;
  }

  /* Keep the identity and close control above the full-screen layer. */
  body.mobile-menu-open .site-name{
    position:relative;
    z-index:1202 !important;
  }

  .site-menu-toggle{
    z-index:1203 !important;
  }

  body.mobile-menu-open .site-menu-toggle{
    opacity:1 !important;
  }

  /* The menu is always the site's light grey, including from Moving Image. */
  body.mobile-dark-page .site-nav{
    background:#d8d8d8 !important;
    border-color:transparent !important;
  }

  body.mobile-dark-page .site-nav a{
    color:rgba(17,17,17,.58) !important;
    opacity:1 !important;
  }

  body.mobile-dark-page.mobile-menu-open .site-menu-toggle{
    color:#111 !important;
  }

  body.mobile-dark-page.mobile-menu-open .site-name,
  body.mobile-dark-page.mobile-menu-open .site-name a{
    color:#111 !important;
  }
}


@media (max-width:900px){
  .site-nav{
    padding-top:70px !important;
    padding-bottom:28px !important;
  }
}


/* =========================================================
   MOBILE — PAGE FRAME → MENU FRAME MORPH
   The existing page border itself shrinks into the menu frame.
   ========================================================= */
@media (max-width:900px){

  /* Keep the real site frame above the menu overlay so it can visibly morph. */
  .site-border{
    z-index:1300 !important;
    will-change:top,right,bottom,left;
    transition:
      top 420ms cubic-bezier(.22,.72,.18,1),
      right 420ms cubic-bezier(.22,.72,.18,1),
      bottom 420ms cubic-bezier(.22,.72,.18,1),
      left 420ms cubic-bezier(.22,.72,.18,1),
      border-color 220ms ease !important;
  }

  /* The page frame smoothly becomes the smaller menu frame. */
  body.mobile-menu-open .site-border{
    top:42px !important;
    right:15px !important;
    bottom:15px !important;
    left:15px !important;
    border-color:rgba(17,17,17,.42) !important;
  }

  /* We now use the actual page border, so the menu does not draw a second box. */
  .site-nav::after{
    display:none !important;
  }

  /* Let the grey menu arrive just after the frame starts moving. */
  body.mobile-menu-open .site-nav{
    transition-delay:35ms !important;
  }

  /* Keep reduced-motion preferences respected. */
  @media (prefers-reduced-motion:reduce){
    .site-border{
      transition:none !important;
    }

    body.mobile-menu-open .site-nav{
      transition-delay:0s !important;
    }
  }
}


/* =========================================================
   MOBILE — DARKENING INNER MENU PANEL
   The page frame still morphs into the smaller menu frame.
   Inside that frame, the surface darkens and gains stronger grain.
   ========================================================= */
@media (max-width:900px){

  /* Restore the menu panel pseudo-element: it sits behind the links,
     while the REAL .site-border continues to draw the animated border. */
  .site-nav::after{
    display:block !important;
    content:"" !important;
    position:absolute !important;

    /* Start close to the normal page-frame size. */
    top:9px !important;
    right:9px !important;
    bottom:9px !important;
    left:9px !important;

    border:0 !important;
    pointer-events:none !important;
    z-index:1 !important;

    background-color:rgba(26,26,26,.12) !important;
    background-image:url("grain.png") !important;
    background-repeat:repeat !important;
    background-size:180px 180px !important;
    background-blend-mode:soft-light !important;

    opacity:0 !important;

    transition:
      top 430ms cubic-bezier(.22,.72,.18,1),
      right 430ms cubic-bezier(.22,.72,.18,1),
      bottom 430ms cubic-bezier(.22,.72,.18,1),
      left 430ms cubic-bezier(.22,.72,.18,1),
      background-color 430ms cubic-bezier(.22,.72,.18,1),
      opacity 300ms ease !important;
  }

  body.mobile-menu-open .site-nav::after{
    top:42px !important;
    right:15px !important;
    bottom:15px !important;
    left:15px !important;

    background-color:rgba(24,24,24,.92) !important;
    opacity:1 !important;
  }

  /* Menu items become light against the darkened inner panel.
     Every item stays the same color, including the current page. */
  .site-nav a,
  .site-nav a.is-current,
  body.mobile-dark-page .site-nav a{
    color:rgba(244,244,240,.84) !important;
    opacity:1 !important;
    transition:color 280ms ease !important;
  }

  /* HAMID ATTARAN + CLOSE stay outside the dark panel and remain dark. */
  body.mobile-menu-open .site-name,
  body.mobile-menu-open .site-name a,
  body.mobile-menu-open .site-menu-toggle,
  body.mobile-dark-page.mobile-menu-open .site-name,
  body.mobile-dark-page.mobile-menu-open .site-name a,
  body.mobile-dark-page.mobile-menu-open .site-menu-toggle{
    color:#111 !important;
  }

  @media (prefers-reduced-motion:reduce){
    .site-nav::after{
      transition:none !important;
    }
  }
}


/* =========================================================
   MOBILE — SHARED WORK + EXPERIMENT PREVIEW INSETS
   Keep the preview equally inset from the page frame on
   left, right and bottom at every mobile screen height.
   ========================================================= */
@media (max-width:900px){

  body.page-index .project-index-highlight{
    left:18px !important;
    right:18px !important;
    top:auto !important;
    bottom:16px !important;
    width:auto !important;
    max-width:none !important;
    aspect-ratio:1 / 1 !important;
    transform:none !important;
  }

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

/* Override the older short-screen rule so the margins never change. */
@media (max-width:900px) and (max-height:700px){
  body.page-index .project-index-highlight{
    left:18px !important;
    right:18px !important;
    bottom:16px !important;
  }
}


/* =========================================================
   PHONE LANDSCAPE — WORK + EXPERIMENTS
   Separate composition from portrait:
   list on the left / preview on the right.
   ========================================================= */
@media (max-width:900px) and (orientation:landscape){

  :root{
    --index-row-step:72px;
  }

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

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

  /* Left-side project list, like the desktop composition. */
  body.page-index .project-index-list,
  body.page-work-index .project-index-list{
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:52% !important;
    height:auto !important;
    overflow:visible !important;
  }

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

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

  body.page-index .project-index-title,
  body.page-work-index .project-index-title{
    max-width:64% !important;
    font-size:24px !important;
    line-height:.94 !important;
    white-space:normal !important;
  }

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

  /* Active item keeps its project information; adjacent items stay quiet. */
  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 !important;
    max-width:32% !important;
    font-size:9px !important;
    line-height:1.18 !important;
  }

  /* Exactly three visible rows: previous / active / next. */
  body.page-index .project-index-row[data-distance="0"]{
    opacity:1 !important;
    filter:blur(0) !important;
    pointer-events:auto !important;
  }

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

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

  /* Right-side square preview — desktop-like placement.
     Height controls the size so short landscape phones remain safe. */
  body.page-index .project-index-highlight,
  body.page-work-index .project-index-highlight{
    left:auto !important;
    right:0 !important;
    top:50% !important;
    bottom:auto !important;

    width:min(39vw, calc(100svh - 94px)) !important;
    max-width:340px !important;
    aspect-ratio:1 / 1 !important;

    transform:translateY(-50%) !important;
  }

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

/* Extra-short landscape phones */
@media (max-width:900px) and (orientation:landscape) and (max-height:340px){
  :root{
    --index-row-step:62px;
  }

  body.page-index .project-index-stage{
    top:54px !important;
    bottom:14px !important;
  }

  body.page-index .project-index-title,
  body.page-work-index .project-index-title{
    font-size:21px !important;
  }

  body.page-index .project-index-highlight,
  body.page-work-index .project-index-highlight{
    width:min(36vw, calc(100svh - 78px)) !important;
  }
}


/* =========================================================
   PHONE PORTRAIT — SHARED WORK + EXPERIMENTS LIST WINDOW
   Keep the scrolling project titles strictly between
   the top navigation area and the preview image.
   ========================================================= */
@media (max-width:900px) and (orientation:portrait){

  body.page-index{
    --mobile-index-preview-size:calc(100vw - 72px);
    --mobile-index-preview-bottom:16px;
    --mobile-index-list-gap:18px;
  }

  /* This is now a bounded viewport for the moving project rows.
     Anything outside it is clipped, so rows can never drift behind
     the header or behind the preview image. */
  body.page-index .project-index-list,
  body.page-work-index .project-index-list{
    left:0 !important;
    right:0 !important;
    top:0 !important;

    bottom:calc(
      var(--mobile-index-preview-size)
      + var(--mobile-index-preview-bottom)
      + var(--mobile-index-list-gap)
    ) !important;

    width:100% !important;
    height:auto !important;
    overflow:hidden !important;
  }

  /* Keep the list centered naturally inside the available responsive zone. */
  body.page-index .project-index-row,
  body.page-work-index .project-index-row{
    transform-origin:center center !important;
  }
}

/* Very narrow phones: derive the same relationship from the actual width.
   No hard-coded height is used, so the gap remains responsive. */
@media (max-width:360px) and (orientation:portrait){
  body.page-index{
    --mobile-index-list-gap:14px;
  }
}


/* =========================================================
   PHONE PORTRAIT — CENTER ACTIVE PROJECT + SOFT EDGE FADE
   Shared by Work and Experiments.
   JS measures the actual header and preview positions and sets
   --portrait-list-top / --portrait-list-bottom dynamically.
   ========================================================= */
@media (max-width:900px) and (orientation:portrait){

  body.page-index .project-index-list,
  body.page-work-index .project-index-list{
    top:var(--portrait-list-top, -28px) !important;
    bottom:var(--portrait-list-bottom, 350px) !important;
    height:auto !important;

    /* Keep rows inside the available zone, but fade them smoothly
       instead of cutting them off sharply at the boundaries. */
    overflow:hidden !important;

    -webkit-mask-image:linear-gradient(
      to bottom,
      transparent 0,
      rgba(0,0,0,.18) 10px,
      rgba(0,0,0,.72) 28px,
      #000 48px,
      #000 calc(100% - 58px),
      rgba(0,0,0,.72) calc(100% - 34px),
      rgba(0,0,0,.18) calc(100% - 12px),
      transparent 100%
    ) !important;

    mask-image:linear-gradient(
      to bottom,
      transparent 0,
      rgba(0,0,0,.18) 10px,
      rgba(0,0,0,.72) 28px,
      #000 48px,
      #000 calc(100% - 58px),
      rgba(0,0,0,.72) calc(100% - 34px),
      rgba(0,0,0,.18) calc(100% - 12px),
      transparent 100%
    ) !important;
  }
}


/* =========================================================
   SINGLE WORK / EXPERIMENT — PORTRAIT TOP SPACING
   Pull project information closer to the mobile header.
   Portrait only; index pages, landscape and desktop unchanged.
   ========================================================= */
@media (max-width:900px) and (orientation:portrait){
  body.page-single .single-info{
    padding-top:70px !important;
  }
}


/* =========================================================
   MOBILE PORTRAIT — SCROLLING SINGLE PAGES ONLY
   Keep the existing single Work/Experiment treatment, and
   apply the same containment only to single Writing pages.
   About and Contact are intentionally excluded.
   ========================================================= */
@media (max-width:900px) and (orientation:portrait){

  /* SINGLE WORK / EXPERIMENT — keep exactly as approved */
  body.page-single .site-header::before{
    content:"";
    position:fixed;
    left:9px;
    right:9px;
    top:9px;
    height:36px;
    background:var(--site-bg, #d8d8d8);
    z-index:-1;
    pointer-events:none;
  }

  body.page-single .site-border{
    box-shadow:0 0 0 10px var(--site-bg, #d8d8d8) !important;
  }

  /* SINGLE WRITING — same clean bar, but visually matched to
     the grainy darker surface inside the site frame. */
  body.page-writing-single .site-header::before{
    content:"";
    position:fixed;
    left:9px;
    right:9px;
    top:9px;
    height:36px;
    background-color:var(--site-bg, #d8d8d8);
    background-image:
      linear-gradient(rgba(216,216,216,.86), rgba(216,216,216,.86)),
      url("grain.png");
    background-repeat:no-repeat, repeat;
    background-size:100% 100%, 180px 180px;
    background-position:0 0, 0 0;
    background-blend-mode:normal, multiply;
    z-index:-1;
    pointer-events:none;
  }

  body.page-writing-single .site-border{
    box-shadow:0 0 0 10px var(--site-bg, #d8d8d8) !important;
  }
}


/* =========================================================
   SINGLE WORK / EXPERIMENT — PHONE LANDSCAPE
   Keep the project information fixed on the left and let the
   project story move naturally from right to left with a
   horizontal finger swipe. Portrait remains vertical.
   ========================================================= */
@media (max-width:900px) and (orientation:landscape){

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

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

  body.page-single .single-shell{
    position:fixed !important;
    inset:8px !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  body.page-single .single-info{
    position:absolute !important;
    left:18px !important;
    top:66px !important;
    width:190px !important;
    padding:0 !important;
    z-index:30 !important;
    transition:none !important;
    will-change:transform;
  }

  body.page-single .single-counter{
    margin-bottom:8px !important;
  }

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

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

  body.page-single .single-tags{
    padding-bottom:7px !important;
  }

  body.page-single .single-place{
    padding-top:7px !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:absolute !important;
    left:18px !important;
    right:18px !important;
    top:54px !important;
    bottom:18px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x;
    overscroll-behavior:none;
    clip-path:inset(0);
    contain:paint;
  }

  body.page-single .single-viewport::-webkit-scrollbar{
    display:none !important;
  }

  body.page-single .single-track{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:max-content !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:12px 14px 12px 212px !important;
    transform:none !important;
  }

  body.page-single .single-panel{
    flex:0 0 auto !important;
    margin:0 !important;
  }

  /* Give the FLEX ITEM itself a real aspect ratio. Safari can otherwise
     retain the image's large intrinsic width even after the visible image
     is scaled down, which creates huge invisible gaps between panels. */
  body.page-single .single-image-panel{
    height:calc(100% - 44px) !important;
    min-height:0 !important;
    width:auto !important;
    overflow:hidden !important;
  }

  body.page-single .single-image-panel.square{
    aspect-ratio:1 / 1 !important;
  }

  body.page-single .single-image-panel.wide{
    aspect-ratio:1.30 / 1 !important;
  }

  body.page-single .single-image-panel.portrait{
    aspect-ratio:.78 / 1 !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:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }

  body.page-single .single-text-panel{
    width:min(38vw,300px) !important;
    padding:0 4px !important;
  }

  body.page-single .single-text-panel h2{
    margin-bottom:14px !important;
    font-size:24px !important;
    line-height:1.06 !important;
  }

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

  body.page-single .single-eyebrow{
    margin-bottom:12px !important;
    font-size:9px !important;
  }

  body.page-single .single-next{
    width:170px !important;
    margin:0 !important;
    padding:0 28px 0 0 !important;
    border-top:0 !important;
  }

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

  /* Keep horizontal content visually inside the existing site frame,
     including iOS rubber-band overscroll. */
  body.page-single .site-border{
    box-shadow:0 0 0 10px var(--site-bg, #d8d8d8) !important;
  }

}


/* =========================================================
   SINGLE WORK / EXPERIMENT — MENU CONSISTENCY
   When the mobile navigation opens, remove the single-page-only
   header/frame treatments so the menu matches every other page.
   ========================================================= */
@media (max-width:900px){
  html.mobile-scroll-page body.page-single.mobile-menu-open{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  /* The single-project header/nav lives inside .single-shell, which normally
     sits below the global grain layer. Raise that shell only while the menu
     is open so the navigation uses exactly the same stacking order and grain
     treatment as every other page. */
  body.page-single.mobile-menu-open .single-shell{
    z-index:1100 !important;
    overflow:visible !important;
  }

  body.page-single.mobile-menu-open .site-header::before{
    display:none !important;
  }

  body.page-single.mobile-menu-open .site-border{
    box-shadow:none !important;
  }
}


/* =========================================================
   MOBILE MENU — iOS SAFARI ANIMATION STABILITY
   Safari needs the hidden menu painted once before the open
   class changes the inner panel/frame geometry.
   ========================================================= */
@media (max-width:900px){
  body.mobile-menu-preparing .site-nav{
    visibility:visible !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:none !important;
  }

  .site-nav,
  .site-nav::after,
  .site-border{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  .site-nav::after{
    will-change:top,right,bottom,left,opacity,background-color;
  }
}


@keyframes mobileSwipeCue{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

@media (prefers-reduced-motion: reduce){
  body.page-moving .mobile-swipe-cue .ui-arrow{
    animation:none !important;
  }
}


/* ---------- ABOUT: MOBILE LANDSCAPE ---------- */
@media (max-width:900px) and (orientation:landscape){
  body.page-about .about-stage{
    left:12px !important;
    right:16px !important;
    top:58px !important;
    bottom:16px !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:56% minmax(0,44%) !important;
    grid-template-rows:1fr !important;
    column-gap:0 !important;
    row-gap:0 !important;
    overflow:hidden !important;
  }

  body.page-about .based-in{
    position:absolute !important;
    left:auto !important;
    right:calc(44% + 14px) !important;
    top:8px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    text-align:right !important;
    font-size:9px !important;
    line-height:1.16 !important;
  }

  body.page-about .about-right{
    grid-column:2 !important;
    grid-row:1 !important;
    align-self:stretch !important;
    display:flex !important;
    align-items:flex-start !important;
    min-width:0 !important;
    padding:7px 0 0 18px !important;
    margin:0 !important;
    border-left:1px solid rgba(17,17,17,.14) !important;
    border-right:0 !important;
  }

  body.page-about .statement{
    width:100% !important;
    font-size:clamp(25px,4.15vw,41px) !important;
    line-height:.98 !important;
  }

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

  body.page-about .botanical{
    display:none !important;
  }

  body.page-about .about-copy{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:end !important;
    justify-self:end !important;
    width:min(88%,430px) !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 14px 8px 0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:right !important;
    font-size:10.5px !important;
    line-height:1.22 !important;
    text-wrap:pretty !important;
  }

  body.page-about .about-copy p+p{
    margin-top:12px !important;
  }
}