/* HYOXOE — DESIGN SYSTEM V1.0 (locked 2026-10-31, approved by HYO). Spec: docs/DESIGN_SYSTEM_V1.md
   Structure from V4 (three pills, 4-column rounded grid, Work index overlay, About overlay, info panel + sequence).
   Typography and restraint from A+C (Anybody wordmark, Schibsted Grotesk text, black on white, no accent).
   Loaded after style.css and overrides its V4.2 look. No cobalt, no image-edge glass, no zoom.
   Change a value here only together with the spec. */
:root{
  --bg:#fff; --ink:#000; --mute:#6f6f6f;
  --pill:#f5f5f5; --pill-hi:#ececec;        /* header pills, approved by HYO */
  --sheet:rgba(244,244,244,.86);            /* translucent Work / About sheet */
  --sheet-rule:rgba(0,0,0,.09);
  --label-bg:rgba(236,236,236,.92); --label-ink:#1d1d1f;   /* hover title label */
  --accent:var(--ink); --cobalt:var(--ink); /* V4.2 tokens neutralised: no blue can leak from style.css */
  --font:"Schibsted Grotesk",Arial,"Malgun Gothic",sans-serif;
  --fs:12px; --lh:16px;
}
body{background:var(--bg);letter-spacing:.005em}
:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

/* three pills: neutral grey, ink type */
.nav .pill{background:var(--pill);color:var(--ink);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;letter-spacing:.01em}
.nav .pill:hover{background:var(--pill-hi)}
.nav .toggle[aria-expanded="true"]{background:var(--pill-hi);color:var(--ink)}
.nav .toggle[aria-expanded="true"] .caret{border-color:var(--ink)}
.nav .pill:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.caret{border-right-width:1px;border-bottom-width:1px}
.brand .sub{display:none}
.tagline{color:var(--ink);font-weight:400}
/* the only typographic voice change: HYOXOE */
.wordmark{color:var(--ink);font:650 17px/1 Anybody,"Arial Narrow",Arial,sans-serif;font-stretch:78%;letter-spacing:.02em;margin:0;transform:none}

/* image tiles: clean, no edge effect, no zoom */
.tile::after{display:none}
.tile:hover img,.tile:focus-visible img{transform:none}
/* hover title: title only, regular weight, one light grey rounded label at the exact centre of the image.
   Short fade, no movement, no blur, no overlay. Same on every image. */
.tile .tag{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);height:auto;max-width:calc(100% - 40px);
  align-items:baseline;gap:0;padding:8px 16px 9px;border-radius:999px;
  background:var(--label-bg);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--label-ink);white-space:nowrap;
  opacity:0;transition:opacity .18s ease}
.tile .tag::before{display:none}
.tile .tag b{font:400 13px/1 "Schibsted Grotesk",Arial,sans-serif;letter-spacing:.025em}
.tile .tag i{display:none}
.tile:hover .tag,.tile:focus .tag,.tile:focus-visible .tag{opacity:1;transform:translate(-50%,-50%)}

/* Work / About: translucent editorial sheet — light blur, no glass border, no shadow */
.panel{background:var(--sheet);box-shadow:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:22px 24px 26px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.panel{background:rgba(244,244,244,.98)}}
.panel .label{font-size:10.5px;letter-spacing:.09em;color:#8a8a8a;border-bottom-color:var(--sheet-rule)}
.panel .idx th.label{border-bottom-color:var(--sheet-rule)}
.idx td{border-bottom-color:var(--sheet-rule);font-size:12.5px}
.idx tbody tr:hover,.idx tbody tr:focus-within{background:rgba(255,255,255,.45)}
.idx tbody tr:hover td,.idx tbody tr:focus-within td,.idx tr[aria-current="page"] td,.panel a:hover{color:var(--ink)}
.idx tbody tr:hover .t a,.idx tr[aria-current="page"] .t a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.idx .c,.idx .y,.idx .n{color:#555}
.panel .lead-s{font-size:14px;line-height:20px}
.panel li{line-height:19px;font-size:12.5px}

/* project page: neutral info panel, Anybody title pill */
.info{background:#f4f4f4;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.info a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.body-text{font-size:13.5px;line-height:20px}
.d-side>.pill:first-child{font:500 15px/1 Anybody,Arial,sans-serif;font-stretch:86%;background:var(--pill)}
.d-back .pill,.d-next .pill{background:var(--pill)}
.d-next .pill:hover,.d-back .pill:hover{background:var(--pill-hi);color:var(--ink)}
.fig .vctl{background:rgba(255,255,255,.9);backdrop-filter:none}
.about .info{background:#f4f4f4}
.foot .pill{background:var(--pill);backdrop-filter:none}
.lightbox{background:#fff}

/* touch screens have no hover: the same title label is always shown, at the bottom of each tile */
@media (hover:none){
  .tile .tag,.tile:hover .tag,.tile:focus .tag,.tile:focus-visible .tag{opacity:1;top:auto;bottom:10px;transform:translate(-50%,0);padding:6px 12px 7px;justify-content:center}
  .tile .tag b{font-size:12px}
}
@media (max-width:760px){
  .wordmark{font-size:17px}
  /* keep all four index columns on phones (categories wrap instead of disappearing) */
  .panel .idx th.c,.panel .idx td.c{display:table-cell}
  .idx .n{width:9%}.idx .t{width:38%}.idx .c{width:39%}.idx .y{width:14%}
  .idx td,.idx td.c{font-size:11.5px}
  .panel .idx th.label{font-size:10.5px}
}

/* QA helper: ?hover=N|all shows a tile's title */
.tile.show-tag .tag{opacity:1}