/* ==================================================================
   The project page, the Instagram strip, and touch screens.

   A reading column over the sector world, the one-offs strip beneath an
   index, and everything a phone needs that a cursor does not.

   Loaded in order by js/boot.js.  The five sheets are one cascade cut
   into readable pieces, not five independent modules: source order is
   preserved exactly as it was in the single style.css, so a rule still
   sees the same rules before it that it always did.
   ================================================================== */

/* ================================================================
   PROJECT PAGE
   One record from projects.js, rendered as a reading column over the
   sector's own world.  The same tile grid as everywhere else carries
   its media, so nothing here is a second implementation.
   ================================================================ */
body[data-layout="project"]{ overflow:visible; height:auto; min-height:100%; }
body[data-layout="project"].is-locked{ overflow:hidden; }
body[data-layout="project"] #stage{ touch-action:pan-y; }

.work{
  position:relative; z-index:12; display:block;
  padding:clamp(84px,12vh,132px) clamp(16px,4vw,64px) 0;
}
.proj{
  max-width:1120px; margin:0 auto;
  /* opaque instead of blurred, for the same reason as .panel: this
     column is always on screen over an animating canvas, so a
     backdrop-filter is a full re-blur every single frame */
  background:linear-gradient(180deg, rgba(8,8,13,.93), rgba(6,6,10,.975));
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,3.5vw,52px) clamp(20px,3.5vw,54px) clamp(34px,5vw,64px);
}
.proj .panel__back{ margin-bottom:26px; }

.proj__head{ padding-bottom:26px; border-bottom:1px solid var(--line); }
.proj__k{
  font-family:var(--mono); font-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent);
}
.proj__title{
  margin:14px 0 0;
  font-size:clamp(30px,5vw,60px); font-weight:700; line-height:1.02; letter-spacing:-.012em;
}
.proj__lede{
  margin:18px 0 0; max-width:60ch;
  font-size:clamp(14.5px,1.5vw,17px); line-height:1.65; color:var(--ink);
}

/* --- hero --- */
.proj__hero{
  margin:clamp(26px,3.5vw,44px) 0 0;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#0a0a10;
}
.proj__hero img, .proj__hero video{
  display:block; width:100%; max-height:64vh; object-fit:contain; background:#0a0a10;
}

/* --- facts rail beside the copy --- */
.proj__body{
  display:grid; grid-template-columns:minmax(210px,272px) 1fr;
  gap:clamp(24px,4vw,58px);
  margin-top:clamp(28px,4vw,48px);
}
.facts{ margin:0; align-self:start; }
.facts__row{
  display:grid; gap:4px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.facts__row:first-child{ border-top:1px solid var(--line); }
.facts dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
.facts dd{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-dim); }
.facts dd a{ color:var(--ink-dim); border-bottom:1px solid var(--line); transition:color .3s, border-color .3s; }
.facts dd a:hover{ color:var(--accent); border-color:var(--accent); }

.proj__copy p{
  margin:0 0 15px; max-width:62ch;
  font-size:14px; line-height:1.8; color:var(--ink-dim);
}
.proj__thin{ color:var(--ink-faint); }

.proj__links{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:9px; }
.proj__links a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s, gap .3s;
}
.proj__links a:hover{ color:var(--accent); gap:12px; }

/* --- the project's own media --- */
.proj__media{ margin-top:clamp(38px,5vw,68px); }
.proj__h2{
  margin:0 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line);
  font-size:clamp(16px,2vw,21px); font-weight:700;
}
/* inside the reading column the grid supplies its own padding already,
   and five columns of a full-bleed wall become postage stamps */
.proj__media .gal{ padding:0; background:none; }
.proj__media .gal-grid{ columns:3; }
.proj__media .gal--small .gal-grid{ columns:5; }
@media (max-width:900px){
  .proj__media .gal-grid{ columns:2; }
  .proj__media .gal--small .gal-grid{ columns:3; }
}
@media (max-width:520px){
  .proj__media .gal-grid{ columns:1; }
  .proj__media .gal--small .gal-grid{ columns:2; }
}

.pnav{ margin-top:clamp(38px,5vw,64px); }

@media (max-width:820px){
  .proj__body{ grid-template-columns:1fr; }
  .facts{ order:2; }
}

/* ================================================================
   INSTAGRAM STRIP
   The one-offs that never became projects, under an index.
   ================================================================ */
.strip{ padding:clamp(38px,5vw,72px) 0 0; }
.strip__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:0 clamp(16px,4vw,64px) 16px;
  border-bottom:1px solid var(--line);
  margin:0 clamp(16px,4vw,64px);
  padding-left:0; padding-right:0;
}
.strip__head h2{ margin:0; font-size:clamp(17px,2.2vw,24px); font-weight:700; }
.strip__head a{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s;
}
.strip__head a:hover{ color:var(--accent); }

/* a denser wall for the small stuff */
.gal--small .gal-grid{ columns:7; column-gap:10px; }
.gal--small .tile{ margin-bottom:10px; border-radius:9px; }
.gal--small .tile__cap{ padding:7px 9px 8px; }
.gal--small .tile__title{ font-size:10.5px; }
.gal--small .tile__src, .gal--small .tile__group{ display:none; }
@media (max-width:1600px){ .gal--small .gal-grid{ columns:6; } }
@media (max-width:1200px){ .gal--small .gal-grid{ columns:4; } }
@media (max-width:820px){  .gal--small .gal-grid{ columns:3; } }
@media (max-width:520px){  .gal--small .gal-grid{ columns:2; } }

/* the index counts what it is listing */
.plinks__count{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--ink-faint);
}

/* inside the section panel the strip is already in a padded column, and
   the wall's seven columns become slivers in something 420px wide */
.panel .gal{ padding:0; background:none; }
.panel .plinks .gal{ margin-top:16px; }
.panel .gal--small .gal-grid{ columns:3; column-gap:10px; }
.panel .gal--small .tile__title{ font-size:11px; }
@media (max-width:1180px){ .panel .gal--small .gal-grid{ columns:2; } }

/* the canvas is a backdrop: it never needs to hit-test, and promoting it
   keeps the compositor from repainting it under a scrolling wall */
#stage{ pointer-events:none; }
body:not(.is-section) #stage{ pointer-events:auto; }   /* except the wheel */

/* ================================================================
   TOUCH & SMALL SCREENS
   A phone has no hover, so anything that only appears on hover has to
   be there already — and anything that only works with a cursor has to
   get out of the way.
   ================================================================ */

/* the wheel's titles are permanent without a pointer to reveal them */
@media (max-width: 900px), (hover: none) {
  .label__title{ opacity:1; transform:none; }
  .label{ width:150px; }
  .label__icon{ width:38px; height:38px; }
  .label__title{ font-size:10.5px; letter-spacing:.04em; margin-top:8px; }
}

@media (max-width: 900px) {
  /* the preview stage needs a cursor; on touch it is dead space */
  .stage{ display:none !important; }
  body[data-layout="sheet"] .panel{ top:0; }
  
  body[data-layout="sheet"] .panel__scroll{ padding-top:76px; }

  /* the mosaic bar has to clear the fixed identity */
  .galbar{ padding-top:96px; row-gap:6px; }
  .work{ padding-top:92px; }
  .proj{ border-radius:14px; }
  .galbar__count{ margin-left:0; }

  /* comfortable touch targets */
  .sectors a{ padding:10px 15px; }
  .plink{ padding:17px 6px; }
  .topbar__nav{ gap:16px; }
  .topbar__nav a{ padding:6px 0; }

  /* the landing copy sits under the wheel, so keep it tight */
  .lede__p{ font-size:12px; }
  .hint{ font-size:9.5px; letter-spacing:.14em; }
}

@media (max-width: 520px) {
  .galbar__title{ font-size:22px; }
  .win__panel{ padding:22px 18px; }
  .xp__head{ grid-template-columns:1fr; }
  .xp__when{ grid-row:auto; grid-column:1; }
  .tile__cap{ padding:9px 11px 10px; }
}

/* iOS: honour the safe area so nothing hides under the home indicator */
@supports (padding: max(0px)) {
  .hint, .lede{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  .panel__scroll, .gal, .page-foot{ padding-bottom: max(48px, env(safe-area-inset-bottom)); }
}