/* BITARD portrait-tablet layout: free width for WORK without touching phone, landscape or desktop. */

@media (min-width:821px) and (max-width:1180px) and (orientation:portrait){
  :root{
    --bitard-tablet-rail-width:220px;
    --bitard-tablet-content-gap:24px;
    --bitard-tablet-logo-stack:92px;
    --bitard-tablet-content-left:calc(var(--edge) + var(--bitard-tablet-rail-width) + var(--bitard-tablet-content-gap));
  }

  /* Stack the brand above the navigation instead of spending a separate logo
     column beside it. Both remain fixed, preserving the desktop interaction
     model while reclaiming roughly one full column for the project grid. */
  .bitard-shell .bitard-logo{
    --bitard-logo-size:72px;
    position:fixed;
    top:var(--edge);
    left:var(--edge);
    width:var(--bitard-tablet-rail-width);
    margin:0;
  }

  .bitard-shell .bitard-rail{
    position:fixed;
    top:calc(var(--edge) + var(--bitard-tablet-logo-stack));
    left:var(--edge);
    width:var(--bitard-tablet-rail-width);
    height:calc(100vh - var(--edge) - var(--edge) - var(--bitard-tablet-logo-stack));
    min-height:0;
    margin:0;
  }

  /* Give the two-column WORK grid the space recovered from the former logo
     column + desktop air gap. Card geometry and column count stay untouched. */
  .bitard-shell:not(.bitard-project-page) > .bitard-content{
    margin-left:var(--bitard-tablet-content-left);
    width:calc(100% - var(--bitard-tablet-content-left) - var(--content-right));
    padding-top:var(--edge);
  }

  /* A PJAX CASE used to keep the older desktop project offset at this width,
     making its canvas narrower than WORK. Reuse the same portrait-tablet span
     so the WORK grid and CASE hero/content align as one visual system. */
  .bitard-project-page .bitard-project-main{
    margin-left:var(--bitard-tablet-content-left);
    width:calc(100% - var(--bitard-tablet-content-left) - var(--content-right));
  }

  /* The rail becomes a quieter secondary layer at portrait-tablet scale. */
  .bitard-shell .bitard-work-title{
    font-size:17px;
    margin-bottom:13px;
  }

  .bitard-shell .bitard-filter{
    --filter-index-width:16px;
    --filter-gap:6px;
    font-size:11px;
    line-height:1.18;
  }

  .bitard-shell .bitard-filters{
    gap:5px;
    margin-bottom:28px;
  }

  .bitard-shell .bitard-utility{
    gap:11px;
    margin-top:5px;
  }

  .bitard-shell .bitard-utility a{
    font-size:16px;
  }

  .bitard-shell .bitard-context{
    width:205px;
    margin-bottom:68px;
  }

  .bitard-shell .bitard-context__title{
    font-size:14px;
  }

  .bitard-shell .bitard-rail-footer{
    gap:16px;
    font-size:8px;
  }
}