/* The home page's hero and Projects grid (from the portfolio v11 preview, v4, live since 2026-10-31):
   1. The hero (.hx): one flat dark ground (the live #0C0C0C), the live top bar, the giant two-line title
      stretched to its boxes in Anton (cap height + SVG textLength, suit.js) behind my character, who puts
      on diamond armour while the first screen is held for about one screen of scroll.
   2. Projects (.pt-grid): six equal tiles instead of the 3D deck.
   Everything else is pf.css as live. No cursor, no snow, no waves, no shade, no button effects.
   Units: --u is a 1507 x 950 design frame that fits the screen; portrait and phones use a 1300 wide frame
   with the character anchored to the bottom. */

.hx { position: relative; background: var(--bg); }
.hx-track { position: relative; }
.hx-frame { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--bg); container-type: size; }
html.anim .hx-track { height: 360vh; height: 360svh; } /* 2026-11-01: was 205, now the armour plus the three project items */
html.anim .hx-frame { position: sticky; top: 0; }
.hx-frame > * { --u: min(calc(100cqw / 1507), calc(100cqh / 950)); --oy: calc((100cqh - 950 * var(--u)) / 2); }

/* the giant title: each line an SVG stretched to its box; a hair of room so Anton's round overshoots show */
.hx-title { margin: 0; font-weight: 400; }
.hx-line { position: absolute; z-index: 1; left: 50%; display: block; transform: translateX(-50%); clip-path: inset(-4% -2% -2% -2%); }
.hx-l1 { top: calc(var(--oy) + 150 * var(--u)); width: calc(880 * var(--u)); height: calc(250 * var(--u)); }
.hx-l2 { top: calc(var(--oy) + 418 * var(--u)); width: calc(1180 * var(--u)); height: calc(262 * var(--u)); }
.hx-line svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hx-line text { font-family: var(--tall); font-weight: 400; fill: var(--cream); }

/* the character: the base render and five pieces, each placed by its box in the 2048 drawing */
.hx-stage { position: absolute; z-index: 2; left: 50%; top: calc(var(--oy) + 79 * var(--u)); width: calc(850 * var(--u)); height: calc(850 * var(--u)); transform: translateX(-50%); }
.hx-cam { position: absolute; inset: 0; transform-origin: 47.83% 20.316%; }
html.anim .hx-cam, html.anim .hx-pc { will-change: transform; }
.hx-base { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hx-pc { position: absolute; max-width: none; }
/* 2026-11-02: re-rendered at 3072 with the vanilla held-item transforms (tools/suit/items.json, layers.json):
   he faces a little to the left so the sword in his right hand stands clear of the body, as in game */
.hx-pc[data-pc="helmet"] { left: 34.831%; top: 7.129%;  width: 29.883%; height: 20.605%; }
.hx-pc[data-pc="chest"]  { left: 25.553%; top: 26.204%; width: 48.633%; height: 34.538%; }
.hx-pc[data-pc="legs"]   { left: 35.091%; top: 54.46%;  width: 29.785%; height: 30.306%; }
.hx-pc[data-pc="boots"]  { left: 32.52%;  top: 74.186%; width: 34.863%; height: 20.117%; }
.hx-pc[data-pc="sword"]  { left: 10.514%; top: 39.681%; width: 21.289%; height: 24.577%; }
/* after the armour he holds one item per project (same pose and camera) */
.hx-pc[data-pc="book"]   { left: 14.844%; top: 44.954%; width: 21.81%;  height: 11.296%; }
.hx-pc[data-pc="cmd"]    { left: 14.779%; top: 43.555%; width: 21.387%; height: 19.531%; }
html.anim .hx-pc { opacity: 0; }
html:not(.anim) .hx-pc[data-pc="book"], html:not(.anim) .hx-pc[data-pc="cmd"] { display: none; }

/* the project the item stands for: name, one line, a link to its case study */
.hx-proj { position: absolute; z-index: 3; margin: 0; list-style: none; }
.hx-pj { display: flex; flex-direction: column; gap: 6px; max-width: 300px; }
.hx-pj-k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 245, 239, .6); }
.hx-pj-n { font-family: var(--tall); font-weight: 400; text-transform: uppercase; color: var(--cream); font-size: clamp(34px, 4.2vw, 58px); line-height: .95; letter-spacing: .01em; }
.hx-pj-t { font-weight: 300; font-size: 15px; line-height: 1.45; color: rgba(247, 245, 239, .8); }
.hx-pj-a { align-self: flex-start; margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cream); padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(247, 245, 239, .35); transition: background-color .2s; }
.hx-pj-a:hover { background: rgba(247, 245, 239, .1); }
/* below the title's second line, right of the character: the dark ground there keeps it readable */
html.anim .hx-proj { left: calc(50% + 250 * var(--u)); bottom: calc(var(--oy) + 60 * var(--u)); width: calc(340 * var(--u)); min-width: 230px; height: 0; }
html.anim .hx-proj > li { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translate3d(0, 14px, 0); visibility: hidden; transition: opacity .4s var(--ease), transform .5s var(--e-out), visibility 0s linear .4s; }
html.anim .hx-proj > li.on { opacity: 1; transform: none; visibility: visible; transition: opacity .4s var(--ease) .08s, transform .6s var(--e-out) .08s, visibility 0s; }
/* still pages and no script: the three as a row at the bottom of the first screen */
html:not(.anim) .hx-proj { left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
html:not(.anim) .hx-pj { flex-direction: row; align-items: center; gap: 8px; }
html:not(.anim) .hx-pj-k, html:not(.anim) .hx-pj-t, html:not(.anim) .hx-pj-n { display: none; }
html:not(.anim) .hx-pj-a { margin: 0; background: rgba(12, 12, 12, .7); }

.hx-cue {
  position: absolute; z-index: 3; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; white-space: nowrap;
  color: rgba(247, 245, 239, .7); font-weight: 500; text-transform: uppercase; letter-spacing: .26em; padding-left: .26em; font-size: 11px;
  transition: opacity .5s var(--ease);
}
.hx.moved .hx-cue { opacity: 0; }
html:not(.anim) .hx-cue { display: none; }

/* portrait and phones: a 1300 wide frame, the title under the bar, the character anchored to the bottom */
@media (max-width: 767px), (max-aspect-ratio: 4/5) {
  .hx-frame > * { --u: calc(100cqw / 1300); --oy: 0px; --st: min(150cqw, calc(100cqh - 170px)); }
  .hx-l1 { top: 132px; width: calc(836 * var(--u)); height: calc(237.5 * var(--u)); }
  .hx-l2 { top: calc(132px + 255 * var(--u)); width: calc(1120 * var(--u)); height: calc(248.7 * var(--u)); }
  .hx-stage { top: auto; bottom: 30px; width: var(--st); height: var(--st); }
  .hx-cue { bottom: 10px; font-size: 10px; }
  /* phones: the caption sits low on a dark plate over the legs */
  html.anim .hx-proj { left: 12px; right: 12px; bottom: 12px; width: auto; min-width: 0; }
  .hx-pj { max-width: none; gap: 4px; padding: 12px 14px; border-radius: 16px; background: rgba(12, 12, 12, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(247, 245, 239, .12); }
  .hx-pj-k { display: none; }
  .hx-pj-n { font-size: 30px; }
  .hx-pj-t { font-size: 13.5px; }
  .hx-pj-a { margin-top: 4px; padding: 7px 12px; font-size: 11px; }
  html:not(.anim) .hx-pj { padding: 0; background: none; border: 0; }
}

/* ======================= Projects: six equal tiles (v4) =======================
   One picture each at the same 16:10, the name in the site's serif, one short line; the whole tile is
   the link. Quiet hover: the picture zooms 3 %, the name underlines. 3 / 2 / 1 columns. */
.pt-grid { list-style: none; max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 24px; }
.pt-a { display: flex; flex-direction: column; gap: 10px; color: inherit; border-radius: 22px; }
.pt-a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.pt-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; background: #151617; margin-bottom: 8px; }
.pt-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-out); }
.pt-name {
  font-family: var(--serif); font-weight: 400; color: var(--bright); font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.05; letter-spacing: -.02em;
  align-self: flex-start; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: transparent; transition: text-decoration-color .3s var(--ease);
}
.pt-line { color: var(--muted); font-weight: 300; font-size: 1rem; line-height: 1.55; }
@media (hover: hover) {
  .pt-a:hover .pt-pic img { transform: scale(1.03); }
  .pt-a:hover .pt-name { text-decoration-color: currentColor; }
}
.pt-a:focus-visible .pt-name { text-decoration-color: currentColor; }
@media (min-width: 640px) { .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; } }
@media (prefers-reduced-motion: reduce) { .pt-pic img, .pt-name { transition: none; } }