/*
 * Shared responsive foundation.
 *
 * This file intentionally focuses on geometry rather than visual restyling:
 * intrinsic media sizing, continuous page insets, available-width driven grids,
 * and escape hatches for components that otherwise assume a desktop viewport.
 */

html,body{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip;overflow-wrap:break-word}
main,section,article,aside,header,footer,nav,figure,figcaption{min-width:0}
img,video,svg,canvas{max-width:100%}
iframe{max-width:100%}
pre,code{max-width:100%}

/* Secondary pages previously jumped from a 0px inset to 145px per side at
   1321px. Keep the same spacious desktop composition, but arrive there
   continuously as room becomes available. */
body.uniform-interior{
  --interior-content-inset:clamp(0px,calc((100vw - 1180px)*.20),210px)!important;
}

.uniform-interior .subpage-main,
.uniform-interior .plugins-main{min-width:0!important}

.uniform-interior .uniform-hero,
.uniform-interior .plugins-hero,
.uniform-interior .about-hero{max-width:min(1180px,100%)!important}

/* About ------------------------------------------------------------------ */
.about-page .about-main{container-type:inline-size;container-name:about-page}
.about-page .about-page-grid{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
  gap:clamp(28px,4.5cqw,82px)!important;
}
.about-page .about-primary,
.about-page .steam-recent{min-width:0}

@container about-page (max-width:980px){
  .about-page .about-page-grid{grid-template-columns:1fr!important;gap:34px!important}
  .about-page .about-page-grid>.steam-recent{width:100%;max-width:none!important;padding-top:12px!important}
}

@container about-page (max-width:620px){
  .about-page .about-strip{grid-template-columns:1fr!important}
  .about-page .about-strip-item,
  .about-page .about-strip-item:first-child,
  .about-page .about-strip-item:last-child{padding:20px 0!important}
  .about-page .about-strip-item+.about-strip-item{border-left:0!important;border-top:1px solid var(--line)}
}

/* Professional work ------------------------------------------------------- */
body.professional-page .projects{container-type:inline-size;container-name:professional-projects}
body.professional-page .project-card{container-type:inline-size;container-name:professional-card}

/* The timeline belongs on genuinely wide canvases. Reserving the same large
   gutter on 1400–1500px windows was one of the main causes of crushed cards. */
@media (min-width:1321px) and (max-width:1540px){
  body.professional-page{--timeline-space:0px!important}
  body.professional-page .career-timeline{display:none!important}
  body.professional-page main{padding-inline:0!important}
}

/* When the project itself is narrow, switch the focused layout based on that
   width even if the browser viewport is technically "desktop" sized. */
@container professional-projects (max-width:1180px){
  body.professional-page .project-card.is-focused{
    min-height:auto!important;
    height:auto!important;
    display:block!important;
  }
  body.professional-page .project-card.is-focused .project-header{
    min-height:clamp(112px,14cqw,150px)!important;
  }
  body.professional-page .project-card.is-focused .project-content{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    gap:clamp(20px,3cqw,30px)!important;
    padding:0 clamp(20px,3.2cqw,40px) clamp(28px,4cqw,40px)!important;
    transform:none!important;
  }
  body.professional-page .project-card.is-focused .project-copy{
    grid-column:auto!important;
    max-width:820px!important;
    align-self:start!important;
  }
  body.professional-page .project-card.is-focused .media-carousel{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    max-width:960px!important;
    justify-self:stretch!important;
    transform:none!important;
  }
  body.professional-page .project-card.is-focused .media-toolbar{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    margin-top:7px!important;
  }
}

/* Short desktop windows should grow vertically with their content instead of
   clipping copy into a fixed focus-card height. */
@media (min-width:1321px) and (max-height:820px){
  body.professional-page .project-card.is-focused{
    min-height:auto!important;
    height:auto!important;
    display:block!important;
  }
  body.professional-page .project-card.is-focused .project-content{
    position:relative!important;
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    overflow:visible!important;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
    padding-bottom:36px!important;
  }
  body.professional-page .project-card.is-focused .media-carousel{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    transform:none!important;
    align-self:center!important;
  }
  body.professional-page .project-card.is-focused .media-toolbar{
    position:relative!important;
    inset:auto!important;
    margin-top:7px!important;
  }
}

@container professional-projects (max-width:720px){
  body.professional-page .project-header{grid-template-columns:minmax(0,1fr) auto!important;gap:14px!important}
  body.professional-page .project-content,
  body.professional-page .project-card.is-focused .project-content{padding-inline:16px!important}
  body.professional-page .media-toolbar{grid-template-columns:auto minmax(0,1fr) auto!important;gap:8px!important}
}

/* Concepts & prototypes --------------------------------------------------- */
body.passion-page .projects{container-type:inline-size;container-name:passion-projects}
body.passion-page .project-card{container-type:inline-size;container-name:passion-card}
body.passion-page .project-inner{
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;
}

@container passion-card (max-width:900px){
  body.passion-page .project-card{min-height:auto!important}
  body.passion-page .project-inner{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    gap:22px!important;
  }
  body.passion-page .project-header{grid-column:1!important}
  body.passion-page .project-copy{max-width:800px!important;align-self:start!important}
  body.passion-page .media-frame{width:100%!important;max-width:960px!important;justify-self:stretch!important}
}

/* Tooling / repository catalogs ----------------------------------------- */
.plugins-page .plugins-catalog,
.tooling-page .plugins-catalog{container-type:inline-size;container-name:tooling-catalog}

.plugins-page .plugin-card,
.tooling-page .plugin-card,
.plugins-page .software-repo-card,
.tooling-page .software-repo-card{container-type:inline-size;container-name:repo-card}

@container tooling-catalog (max-width:1080px){
  .plugins-page .plugin-grid,
  .tooling-page .plugin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .plugins-page .plugins-toolbar,
  .tooling-page .plugins-toolbar{align-items:flex-start!important;flex-direction:column!important}
  .plugins-page .plugin-filters,
  .tooling-page .plugin-filters{justify-content:flex-start!important}
}

@container tooling-catalog (max-width:650px){
  .plugins-page .plugin-grid,
  .tooling-page .plugin-grid{grid-template-columns:1fr!important}
  .plugins-page .github-summary,
  .tooling-page .github-summary,
  .plugins-page .software-repo-summary,
  .tooling-page .software-repo-summary{align-items:flex-start!important;flex-direction:column!important}
}

@container repo-card (max-width:360px){
  .plugin-github-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .plugin-github-stats .plugin-stat:first-child{grid-column:1/-1}
  .plugin-support-line{align-items:flex-start!important;flex-direction:column!important}
  .plugin-links{align-items:flex-start!important;flex-direction:column!important;gap:9px!important}
}

/* Focus panels are injected by JS after the page styles, so these are
   deliberately important and based on the panel's actual width. */
.plugin-focus-card{container-type:inline-size;container-name:plugin-focus}
@container plugin-focus (max-width:760px){
  .plugin-focus-body{grid-template-columns:1fr!important;gap:24px!important}
  .plugin-focus-readme-grid{grid-template-columns:1fr!important}
  .plugin-focus-meta{max-width:none!important}
}
@container plugin-focus (max-width:500px){
  .plugin-focus-head{flex-direction:column!important}
  .plugin-focus-close{align-self:flex-end!important;order:-1!important}
  .plugin-clone-row{align-items:stretch!important;flex-direction:column!important}
  .plugin-clone-row code{white-space:normal!important;overflow-wrap:anywhere!important}
  .plugin-clone-row button{align-self:flex-start!important}
  .plugin-focus-meta-row{align-items:flex-start!important;flex-direction:column!important;gap:5px!important}
}

/* Thoughts --------------------------------------------------------------- */
.thoughts-feed{container-type:inline-size;container-name:thoughts-feed}
.thoughts-article-page .editorial-article{container-type:inline-size;container-name:editorial-article}

@container thoughts-feed (max-width:900px){
  .thoughts-grid{grid-template-columns:1fr!important}
}

@container editorial-article (max-width:1040px){
  .article-hero-grid{grid-template-columns:1fr!important;gap:32px!important}
  .article-hero-meta{
    justify-self:stretch!important;
    width:100%!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:0!important;
    border-left:0!important;
    border-top:1px solid var(--thought-line)!important;
  }
  .article-hero-meta>div{padding:15px 14px 0 0!important;border-bottom:0!important}
  .editorial-shell{grid-template-columns:1fr!important;max-width:940px!important}
  .editorial-aside{display:none!important}
  .article-title{text-wrap:balance!important}
  .article-title>span{white-space:normal!important}
}

@container editorial-article (max-width:780px){
  .article-hero-meta{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .article-inline-media,
  .article-inline-video,
  .article-inline-media.compact{float:none!important;width:100%!important;margin:26px 0 30px!important}
  .article-media-duo,
  .article-culture-flow,
  .article-publisher-band{grid-template-columns:1fr!important}
  .article-media-duo .article-visual-card{margin-top:0!important}
  .culture-step{min-height:0!important}
  .culture-step::after{display:none!important}
  .publisher-card{min-height:0!important}
}

@container editorial-article (max-width:520px){
  .article-hero-meta{grid-template-columns:1fr!important}
  .article-feature figcaption,
  .article-video-card figcaption,
  .article-visual-card figcaption{grid-template-columns:1fr!important;gap:3px!important}
  .article-pullquote{padding-inline:clamp(24px,8cqw,38px)!important}
}

/* Planning diagrams live inside an article column; use that actual figure
   width instead of the whole browser width. */
.planner-figure{container-type:inline-size;container-name:planner-figure}
@container planner-figure (max-width:900px){
  .planner-architecture-grid{grid-template-columns:1fr!important;padding-top:0!important}
  .planner-node-director{position:relative!important;grid-template-columns:1fr!important;min-height:auto!important}
  .planner-node-director small{text-align:left!important}
  .planner-arrow{justify-self:center!important;transform:rotate(90deg)!important}
  .planner-feedback{grid-column:auto!important}
  .planner-state-graph{grid-template-columns:1fr!important}
  .planner-edge{justify-self:center!important;transform:rotate(90deg)!important;margin:4px 0!important}
  .planner-branch-stack{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .planner-branch{grid-template-columns:1fr!important}
  .planner-branch .planner-edge{transform:none!important;justify-self:start!important}
  .planner-htn-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@container planner-figure (max-width:560px){
  .planner-figure figcaption{grid-template-columns:1fr!important;gap:7px!important}
  .planner-branch-stack,
  .planner-htn-row,
  .planner-reference-grid{grid-template-columns:1fr!important}
  .planner-bar-row{grid-template-columns:64px minmax(0,1fr)!important;gap:9px!important}
  .planner-bar-row>strong{grid-column:2!important;text-align:left!important;white-space:normal!important}
  .planner-chart-legend{justify-content:flex-start!important;flex-wrap:wrap!important}
}

/* Shared navigation / controls ------------------------------------------ */
@media (max-width:1040px){
  .site-nav{max-width:min(72vw,720px)!important}
}

@media (max-width:720px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overflow-x:clip!important}
  body.uniform-interior .subpage-shell{
    width:100%!important;
    max-width:100%!important;
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important;
  }
  body.uniform-interior .subpage-main,
  body.uniform-interior .plugins-main{width:100%!important;max-width:100%!important;padding-inline:0!important}
  body.uniform-interior .uniform-hero,
  body.uniform-interior .plugins-hero,
  body.uniform-interior .about-hero{width:100%!important;max-width:100%!important;min-height:0!important;padding:36px 0 28px!important}
  body.uniform-interior .uniform-hero .subpage-title,
  body.uniform-interior .plugins-hero .subpage-title,
  body.uniform-interior .about-hero .subpage-title{max-width:8.5ch!important;font-size:clamp(2.9rem,14.2vw,4.65rem)!important}
  body.uniform-interior .uniform-hero .subpage-copy,
  body.uniform-interior .plugins-hero .subpage-copy,
  body.uniform-interior .about-hero .subpage-copy{max-width:100%!important;margin-top:20px!important;font-size:.96rem!important;line-height:1.55!important}
  html body.uniform-interior .subpage-top .site-nav,
  html body.uniform-interior .topbar .site-nav{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px 16px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  html body.uniform-interior .site-nav a{min-width:0!important;width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .professional-page .projects,
  .professional-page .project-scene,
  .professional-page .project-card,
  .professional-page .project-header,
  .professional-page .project-content,
  .professional-page .media-carousel,
  .professional-page .media-stage,
  .passion-page .projects,
  .passion-page .project-card,
  .passion-page .project-inner,
  .passion-page .media-frame{width:100%!important;max-width:100%!important;min-width:0!important}
  .tooling-section-switch{width:min(244px,100%)!important}
  .github-summary-stats,.software-repo-summary-stats{justify-content:flex-start!important}
  html body .site-soundtrack{max-width:calc(100vw - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right)))!important}
}

@media (max-width:420px){
  .site-nav{grid-template-columns:1fr!important}
  .status{max-width:100%!important;line-height:1.4!important}
  .tooling-section-switch{width:100%!important;max-width:280px!important}
}

/* Compact landscape is its own constrained state. A phone can be 800-900px
   wide while only ~390px tall; width-only desktop rules are wrong there. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1024px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;overflow-x:clip!important}
  body.uniform-interior{--interior-content-inset:0px!important}
  body.uniform-interior .subpage-shell{
    width:100%!important;
    max-width:100%!important;
    min-height:100dvh!important;
    padding-top:max(10px,env(safe-area-inset-top))!important;
    padding-left:max(18px,env(safe-area-inset-left))!important;
    padding-right:max(18px,env(safe-area-inset-right))!important;
    padding-bottom:calc(58px + env(safe-area-inset-bottom))!important;
  }
  body.uniform-interior .subpage-main,
  body.uniform-interior .plugins-main{width:100%!important;max-width:100%!important;padding-inline:0!important}
  body.uniform-interior .subpage-top,
  body.uniform-interior .topbar{display:grid!important;grid-template-columns:1fr!important;align-items:start!important;gap:6px!important;min-height:0!important}
  html body.uniform-interior .subpage-top .site-nav,
  html body.uniform-interior .topbar .site-nav{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:2px 18px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:0!important;
    font-size:.58rem!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  html body.uniform-interior .site-nav a{min-width:0!important;width:100%!important;padding:5px 0!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.uniform-interior .status{justify-self:start!important;max-width:100%!important;font-size:.54rem!important;line-height:1.25!important}
  body.uniform-interior .uniform-hero,
  body.uniform-interior .plugins-hero,
  body.uniform-interior .about-hero{width:100%!important;max-width:100%!important;min-height:0!important;padding:18px 0 24px!important}
  body.uniform-interior .uniform-hero .eyebrow,
  body.uniform-interior .plugins-hero .eyebrow,
  body.uniform-interior .about-hero .eyebrow{margin-bottom:10px!important;font-size:.58rem!important}
  body.uniform-interior .uniform-hero .subpage-title,
  body.uniform-interior .plugins-hero .subpage-title,
  body.uniform-interior .about-hero .subpage-title{max-width:11ch!important;font-size:clamp(2.6rem,min(7.8vw,13dvh),4.3rem)!important;line-height:.9!important}
  body.uniform-interior .uniform-hero .subpage-copy,
  body.uniform-interior .plugins-hero .subpage-copy,
  body.uniform-interior .about-hero .subpage-copy{max-width:78ch!important;margin-top:12px!important;font-size:.86rem!important;line-height:1.42!important}
  body.professional-page .career-timeline{display:none!important}
  body.professional-page main{padding-inline:0!important}
  body.professional-page .project-card,
  body.professional-page .project-header{min-height:clamp(132px,34dvh,168px)!important}
  body.professional-page .project-card.is-focused{min-height:auto!important;height:auto!important}
  body.professional-page .project-card.is-focused .project-header{min-height:82px!important;padding-top:15px!important;padding-bottom:13px!important}
  body.professional-page .project-header{padding:18px 20px!important}
  body.professional-page .project-content,
  body.professional-page .project-card.is-focused .project-content{width:100%!important;max-width:100%!important;grid-template-columns:1fr!important;padding-left:20px!important;padding-right:20px!important}
  body.professional-page .media-carousel,
  body.professional-page .media-stage{width:100%!important;max-width:100%!important;min-width:0!important}
  body.passion-page .project-card{min-height:auto!important}
  body.passion-page .project-inner{width:100%!important;max-width:100%!important;grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;gap:18px!important}
  body.passion-page .media-frame{width:100%!important;max-width:100%!important;min-width:0!important}
  .about-page .about-page-grid{grid-template-columns:1fr!important;gap:24px!important}
  .thoughts-grid{grid-template-columns:1fr!important}
  .tooling-page .plugin-grid,
  .plugins-page .plugin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .site-soundtrack{
    left:auto!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    max-width:calc(100vw - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right)))!important;
  }
}

/* Avoid desktop hover translation leaving touch cards in awkward compositor
   states after a tap. */
@media (hover:none){
  .plugin-card:hover,
  .software-repo-card:hover,
  .post-card:hover,
  .publisher-card:hover,
  .professional-page .project-card:hover,
  .passion-page .project-card:hover{transform:none!important}
}