/* Site refinement V5 (2026-11-04, approved directions from HYO). Loaded last; V1 tokens only.
   1. Header: one row on desktop — HYOXOE · Work · About · Services, each on one column of the 4-column page grid.
      On phones: the wordmark on row 1, then Work · About · Services in three equal pills on row 2.
   2. Home with the five public projects: a 3 + 2 composition (row 1 three tiles, row 2 two tiles centred under them);
      phones: tile 1 full width, then 2 × 2. Review mode keeps the 12-tile grid. */

/* ---------- header ---------- */
.nav .brand{grid-column:1/2;min-width:0}
.nav .work-toggle{grid-column:2/3;grid-row:1}
.nav .about-toggle{grid-column:3/4;grid-row:1}
.nav .services-link{grid-column:4/5;grid-row:1}
.nav .work-panel{grid-column:2/4}
.nav .about-panel{grid-column:3/4}
.nav .services-link[aria-current="page"]{background:var(--pill-hi)}
/* 2026-11-11 (HYO UI/UX refinement): HYOXOE stays dominant; the descriptor is smaller, lighter and never cut off with an ellipsis.
   The brand pill is a size container (measured: wordmark 51 px + gap 12 + long line 208 px / short line 111 px at 11 px): the long line where it fits, the short line where it does not, nothing below that. */
.nav .brand{container-type:inline-size}
.brand .tagline{min-width:0;white-space:nowrap;overflow:hidden;font-size:11px;line-height:1;letter-spacing:.015em;color:var(--mute);font-weight:400}
.brand .tl-short{display:none}
@container (max-width:287px){ .brand .tl-long{display:none} .brand .tl-short{display:inline} }
@container (max-width:186px){ .brand .tagline{display:none} }

/* ---------- footer: without a public email the Instagram pill takes the right half ---------- */
.foot .pill.foot-ig{grid-column:3/5}

/* ---------- home: 3 + 2 ---------- */
@media (min-width:761px){
  .grid.g5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grid.g5 .tile{grid-column:span 2}
  .grid.g5 .tile:nth-child(4){grid-column:2/4}
  .grid.g5 .tile:nth-child(5){grid-column:4/6}
}

@media (max-width:760px){
  .nav{grid-template-columns:repeat(6,minmax(0,1fr))}
  .nav .brand{grid-column:1/7;grid-row:1}
  .nav .work-toggle{grid-column:1/3;grid-row:2}
  .nav .about-toggle{grid-column:3/5;grid-row:2}
  .nav .services-link{grid-column:5/7;grid-row:2}
  .nav .panel,.nav .work-panel,.nav .about-panel{grid-column:1/7;grid-row:3}
  .nav .pill{padding:0 14px}
  .grid.g5 .tile:first-child{grid-column:1/-1}
  .foot .pill.foot-ig{grid-column:1/-1}
}

/* CREATIVE SYSTEMS (review route #/creative-systems, 2026-11-05): the case study runs full width under the header */
.sys-host{--sys-bleed:var(--m);margin-top:calc(var(--m) * 2)}
.sys-host .sys{margin-bottom:calc(-1 * var(--m))}