/* ascii-anima gallery page (index.html) · register: a precision instrument, a
   terminal that renders pictures out of characters. Hairlines rule the page;
   Space Mono is the data voice, Space Grotesk (--display) the display voice. EVERY colour, size, space and
   type value is a token from tokens.css (linked first), the same system the
   mapper uses: nothing is named here. No rounded
   corners, no gradients except the hero grid (and its mask) and the frames'
   scanlines. */

*, *::before, *::after{box-sizing:border-box; border-radius:0}
[hidden]{display:none !important}
html{-webkit-font-smoothing:antialiased; overflow-x:hidden}
body{
	margin:0; background:var(--bg); color:var(--tx); font-family:var(--mono);
	font-size:var(--fs-base); line-height:1.6; font-variant-numeric:tabular-nums; overflow-x:hidden;
}
:focus-visible{outline:var(--bw) solid var(--am); outline-offset:3px}
::selection{background:var(--am); color:var(--bg)}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2); border:var(--bw-3) solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--am)}
@supports not selector(::-webkit-scrollbar){*{scrollbar-color:var(--line2) var(--bg); scrollbar-width:thin}}
h1, h2, h3, p, dl, dd, figure{margin:0}
a{color:inherit; text-decoration:none}
a:hover{color:var(--am)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── the bracketed text button: [ LABEL ] ── */
.br{
	display:inline-flex; align-items:center; gap:var(--s-2); min-height:var(--h-ctl-sm);
	font:inherit; font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase;
	color:var(--tx); background:none; border:0; padding:0; cursor:pointer; white-space:nowrap;
}
.br::before{content:"["; color:var(--dim); margin-right:var(--s-1)}
.br::after{content:"]"; color:var(--dim); margin-left:var(--s-1)}
.br:hover, .br:focus-visible{color:var(--am)}
.br:hover::before, .br:hover::after{color:var(--am)}
.br:active{color:var(--bg); background:var(--am)}


/* ══ HERO ═══════════════════════════════════════════════════ */
.hero{position:relative; border-bottom:var(--bw) solid var(--line); overflow:clip}
/* the engineering grid, faded toward the edges */
.hero::before{
	content:""; position:absolute; inset:0; pointer-events:none;
	background:
		repeating-linear-gradient(to right, var(--tx-04) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(to bottom, var(--tx-04) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(to right, var(--tx-02) 0 1px, transparent 1px 8px),
		repeating-linear-gradient(to bottom, var(--tx-02) 0 1px, transparent 1px 8px);
	-webkit-mask-image:radial-gradient(ellipse 70% 75% at 55% 45%, #000 35%, transparent 100%);
	mask-image:radial-gradient(ellipse 70% 75% at 55% 45%, #000 35%, transparent 100%);
}
.hero-grid{
	position:relative; max-width:none; margin:0; /* full width */
	padding:0 var(--gutter) var(--s-11);
	display:flex; justify-content:center;
}
/* THE ENTRANCE: the hero frames rise in together, staggered by --i, the moment the
   page is up; a frame built from a heavy work's stub rises with the others and
   its canvas fades in when the clip lands, so nothing pops or reflows. The
   scroll fade (.io .inst) does not apply here. */
.hero .inst{animation:heroIn .9s cubic-bezier(.2,.75,.25,1) both; animation-delay:calc(var(--i, 0) * 140ms)}
.hero .inst canvas{animation:canvasIn .7s ease both}
@keyframes heroIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes canvasIn{from{opacity:0} to{opacity:1}}
.io .hero .inst{opacity:1; transform:none; transition:none}
.hero-work{min-width:0; width:100%; display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start; gap:var(--s-9)}
/* the featured frame fits the first screen whatever the map's shape: no
   taller than --hero-h, its width following from the map's aspect */
/* widths are set by fitHero() in gallery.js: every hero work shares one height
   (at most --hero-h) so they sit in one row whatever their shapes */
.hero-work > figure{flex:0 0 auto; min-width:0; width:calc(var(--hero-h) * var(--aspect, 1.5)); max-width:100%; margin:0}
/* the identity, under the featured work */
/* ── the identity, inside the hero above the works: mark + "by" wordmark left,
   the content width, generous air above and below ── */
.ident{
	position:relative; max-width:var(--wrap); margin:0 auto;
	padding:var(--s-11) var(--gutter) var(--s-12); /* more air before the works */
}
.by-row{display:flex; align-items:center; gap:var(--s-6)}
.ident-l{display:grid; gap:var(--s-5)}
.mark{
	font-family:var(--display); font-weight:700; font-size:var(--fs-mark);
	line-height:.9; letter-spacing:var(--ls-tight); color:var(--tx); white-space:nowrap;
}
/* "by" + the creativetech.wtf pixel wordmark; its height is a multiple of the
   4-unit grid (12px desktop, 8px phone) so crispEdges lands on whole pixels */
.by{display:inline-flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); letter-spacing:var(--ls-micro);
	text-transform:uppercase; color:var(--mut); text-decoration:none; width:max-content}
.by:hover{color:var(--am)}
.wm{display:inline-block; height:12px; width:auto; vertical-align:middle}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}


/* ══ THE INSTRUMENT FRAME ════════════════════════════════════
   <figure class="inst">
     .inst-strip   WORK 07 / 19  ·  140 × 51 · 13 KB
     .inst-box     1px box; ::before/::after = the top brackets
       .inst-in    ::before/::after = the bottom brackets
         .inst-host  the player's canvas
         .inst-scan  scanlines (pointer-events none)
     figcaption.plaque */
.inst{min-width:0}
.inst-strip{
	display:flex; justify-content:space-between; gap:var(--s-5);
	font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--dim);
	padding-bottom:var(--s-3);
}
.inst-strip .r{color:var(--mut); transition:color .2s}
.inst:hover .inst-strip .r{color:var(--am)}
.inst-box{position:relative; border:var(--bw) solid var(--line2); padding:var(--s-1)}
.inst-in{position:relative; line-height:0; background:var(--bg)}
.inst-box::before, .inst-box::after, .inst-in::before, .inst-in::after{
	content:""; position:absolute; z-index:3; pointer-events:none;
	width:var(--arm); height:var(--arm); border:0 solid var(--am);
	transition:width .2s, height .2s;
}
.inst-box::before{left:-1px; top:-1px; border-top-width:var(--bw); border-left-width:var(--bw)}
.inst-box::after{right:-1px; top:-1px; border-top-width:var(--bw); border-right-width:var(--bw)}
/* the inner element sits inside the box's padding: push its brackets out onto the box's line */
.inst-in::before{left:calc(-1 * var(--s-1) - var(--bw)); bottom:calc(-1 * var(--s-1) - var(--bw)); border-bottom-width:var(--bw); border-left-width:var(--bw)}
.inst-in::after{right:calc(-1 * var(--s-1) - var(--bw)); bottom:calc(-1 * var(--s-1) - var(--bw)); border-bottom-width:var(--bw); border-right-width:var(--bw)}
.inst:hover .inst-box::before, .inst:hover .inst-box::after,
.inst:hover .inst-in::before, .inst:hover .inst-in::after{width:var(--arm-hover); height:var(--arm-hover)}
.inst-host{display:block; width:100%; overflow:hidden}
.inst-host canvas{display:block}
.inst-host.is-reveal{position:relative}
.inst-scan{
	position:absolute; inset:0; z-index:2; pointer-events:none;
	background:repeating-linear-gradient(to bottom, var(--tx-03) 0 1px, transparent 1px 3px);
}

/* the reveal's status chip */
.chip{
	position:absolute; left:var(--s-3); top:var(--s-3); z-index:4; pointer-events:none;
	font-size:var(--fs-xs); line-height:1; letter-spacing:var(--ls-micro); text-transform:uppercase;
	color:var(--am); background:var(--bg-80); border:var(--bw) solid var(--am); padding:var(--s-1) var(--s-2);
}
.chip.done{color:var(--bg); background:var(--am)}

/* the plaque */
.plaque{padding-top:var(--s-5); display:grid; gap:var(--s-1)}
.plaque .t{font-family:var(--display); font-weight:500; font-size:var(--fs-work); line-height:1.3; letter-spacing:-.01em; color:var(--tx)}
.plaque .c{font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--mut)}
.plaque .c a:hover{color:var(--am)}
.plaque .n{font-size:var(--fs-sm); line-height:1.55; color:var(--dim)}
.plaque .acts{display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-6); margin-top:var(--s-1)}
.inst.featured .plaque .t{font-size:var(--fs-work-lg)}

/* frames fade in as they enter (only when the observer runs; see gallery.js) */
.io .inst{opacity:0; transform:translateY(6px); transition:opacity .6s ease, transform .6s ease}
.io .inst.in{opacity:1; transform:none}

/* the featured work: crosshair reticle and the load sweep */
.reticle{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .15s; overflow:hidden}
.inst.aim .reticle{opacity:1}
.reticle .rx, .reticle .ry{position:absolute; left:0; top:0; background:var(--am-45); will-change:transform}
.reticle .rx{width:100%; height:var(--bw)}
.reticle .ry{height:100%; width:var(--bw)}
.reticle .rc{
	position:absolute; right:var(--s-3); bottom:var(--s-3); line-height:1;
	font-size:var(--fs-xs); letter-spacing:var(--ls-micro); color:var(--am);
	background:var(--bg-80); padding:var(--s-1) var(--s-2); white-space:pre;
}
.sweep{
	position:absolute; left:0; right:0; top:0; height:var(--bw); z-index:4; pointer-events:none;
	background:var(--am-40); box-shadow:0 0 0 var(--bw) var(--am-soft);
	animation:sweep 2s cubic-bezier(.45,0,.55,1) .3s both;
}
@keyframes sweep{0%{top:0; opacity:1} 92%{opacity:1} 100%{top:100%; opacity:0}}

/* ══ SECTIONS ═══════════════════════════════════════════════ */
.sec{max-width:var(--wrap); margin:0 auto; padding:var(--s-12) var(--gutter) 0}
.sec-title{
	font-family:var(--display); font-weight:500; font-size:var(--fs-title);
	line-height:1.08; letter-spacing:-.025em; color:var(--tx); max-width:22em;
}
/* the lede under a title: sentence case, readable, not a label */
.sec-lede{margin:var(--s-6) 0 0; max-width:52ch; font-size:var(--fs-base); line-height:1.75; color:var(--tx)}
.sec-sub{margin-top:var(--s-5); max-width:58ch; font-size:var(--fs-md); color:var(--mut); text-transform:uppercase; letter-spacing:.06em; line-height:1.7}

/* ══ THE EDITORIAL GRID ═══════════════════════════════════════════
   Both sections sit on one 12-column grid with a 20px gutter. Spans change
   from block to block (the trio is three equal 4-column panels, the weigh bars
   take 6 beside the paragraph's 5, the mapper shot takes 7 beside the words'
   4, the control crops take 5 each in two staggered stacks), and the empty
   columns are the white space, not padding. Both control stacks are the same
   width, so the mapper's text inside them is one size. No step labels. */
.ed{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--s-7); align-items:start}
.ed > *{grid-column:1 / -1; min-width:0}

/* 01: the title wide on the left, the weigh bars at its foot on the right */
.sec-what > .sec-title{grid-column:1 / 8; grid-row:1}
.sec-what > .weigh{grid-column:8 / 13; grid-row:1; align-self:end}
/* 02: the paragraph set as a standfirst, indented to the text column */
.sec-how{padding-top:var(--s-11)}
.sec-how > .sec-lede{grid-row:1; margin:0; font-family:var(--body); font-weight:400; font-size:var(--fs-lg); line-height:1.6; max-width:none; padding-right:var(--s-5)}
.sec-how > .sec-lede span, .sec-how > .sec-lede a{white-space:nowrap}
.sec-how > .sec-lede span{color:var(--am)}
.sec-how > .sec-lede > p{margin:0}
.sec-how > .sec-lede > p + p{margin-top:var(--s-6)}
.sec-how > .sec-lede a{color:var(--am); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.sec-how > .sec-lede a:hover{color:var(--tx)}
/* the copy under the trio as ONE column: why, then how, in a 7-column
   measure. The two-column version was lede-a 1/6, lede-b 7/12, both row 1. */
.sec-how > .lede-a{grid-column:1 / 8; grid-row:1}
.sec-how > .lede-b{grid-column:1 / 8; grid-row:2; margin-top:var(--s-6)}

/* ── 01 the trio: photo → file text → player, four columns each ── */
.trio{display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--s-7); align-items:start; margin-top:var(--s-12)}
.trio-cell{min-width:0}
.trio-cell:nth-child(1){grid-column:1 / 5}
.trio-cell:nth-child(2){grid-column:5 / 9}
.trio-cell:nth-child(3){grid-column:9 / 13}
.trio-k{display:flex; gap:var(--s-4); align-items:baseline; padding-bottom:var(--s-4); font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--tx)}
.trio-k b{font-weight:400; color:var(--am)}
.trio-m{padding-top:var(--s-4); font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--mut)}
.trio-view{position:relative; overflow:hidden; background:var(--bg)}
.trio-view.photo img{display:block; width:100%; height:100%; object-fit:cover}
.trio-view.photo.off{background:var(--bg2)}
.trio-view.photo.off img{display:none}
.off-note{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--dim)}
.raw{margin:0; font-family:var(--mono); white-space:pre; letter-spacing:0; color:var(--mut); user-select:text}
.trio .inst-host, .result .inst-host{line-height:0}

/* the weigh bars: the source against its map, to scale */
.weigh{display:grid; row-gap:var(--s-4); align-items:center}
.weigh-row{display:grid; grid-template-columns:7em minmax(0, 1fr) 5em; gap:var(--s-6); align-items:center}
.weigh-k{font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--mut)}
.weigh-v{font-size:var(--fs-md); text-align:right; color:var(--tx)}
.weigh-bar{display:block; height:var(--s-4)}
.weigh-bar i{display:block; height:100%; background:var(--line2)}
.weigh-row.hot .weigh-k{color:var(--am)}
.weigh-row.hot .weigh-bar i{background:var(--am)}

/* ── 02 the steps: each its own 12-column row, set apart by space alone, no
   line dividers ── */
.step{
	display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:var(--s-7); row-gap:var(--s-9); align-items:start;
	margin-top:var(--s-12);
}
.board + .step{margin-top:var(--s-12)}
.step-text{grid-column:1 / 5; grid-row:1; display:grid; justify-items:start; position:sticky; top:var(--s-9)}
.step-t{font-family:var(--display); font-weight:500; font-size:clamp(1.35rem, 2.2vw, 1.9rem); line-height:1.12; letter-spacing:-.02em; color:var(--tx); text-wrap:balance}
.step-p{margin-top:var(--s-6); font-family:var(--body); font-size:var(--fs-lg); line-height:1.6; color:var(--tx); max-width:46ch}
.step-text > .br{margin-top:var(--s-7)}
.ctas{display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-7)}
.cta{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-7); font-family:var(--mono); font-size:var(--fs-sm); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--tx); border:var(--bw) solid var(--line2); transition:border-color .15s, color .15s, background .15s}
.cta:hover, .cta:focus-visible{border-color:var(--am); color:var(--am)}
.cta-main{background:var(--am); border-color:var(--am); color:var(--bg)}
.cta-main:hover, .cta-main:focus-visible{background:transparent; color:var(--am)}
.facts{list-style:none; margin:var(--s-7) 0 0; padding:0; display:grid; gap:var(--s-3); font-family:var(--body); font-size:var(--fs-base); line-height:1.6; color:var(--mut)}
.facts em{font-family:var(--mono)}
.facts em{font-style:normal; color:var(--tx); text-transform:uppercase; letter-spacing:var(--ls-micro); font-size:var(--fs-xs); margin-right:var(--s-3)}

/* the mapper board: five screenshots clustered like an ideation board.
   Placed by hand in percentages of the board, which keeps
   one shape at every width (aspect-ratio); each sits at its own small tilt and
   overlaps its neighbours a little, and hovering one straightens and lifts it.
   The board keeps this layout at every width, scaled down. */
.board{position:relative; aspect-ratio:100 / 52; margin-top:var(--s-12)}
.board > figure{
	position:absolute; margin:0; line-height:0;
	border:var(--bw) solid var(--line2); background:var(--bg2); box-shadow:var(--shadow);
	transform:rotate(var(--tilt, 0deg)); transition:transform .25s ease, box-shadow .25s ease;
}
.board > figure:hover{z-index:10; transform:rotate(0deg) scale(1.02)}
.board img{display:block; width:100%; height:auto}
.pin-mapper  {left:0;    top:7.7%;  width:50%; --tilt:-2deg;   z-index:2}
.pin-gradient{left:46%;  top:3.8%;  width:29%; --tilt:2.5deg;  z-index:3}
.pin-video   {left:77%;  top:11.5%; width:23%; --tilt:-3.5deg; z-index:2}
.pin-curve   {left:53%;  top:50%;   width:21%; --tilt:-1.5deg; z-index:5}
.pin-lens    {left:16%;  top:59.6%; width:33%; --tilt:2deg;    z-index:4}

/* the embed: the switch, the words and the snippet
   down the left (columns 1-6), the live result on the right (8-11). The panes
   flatten into the step's grid (display:contents) so the open pane's snippet
   and result can sit in different columns. */
.step-embed{grid-template-rows:auto 1fr; row-gap:var(--s-7)} /* the result's extra height goes below the snippet */
.step-embed .step-text{grid-column:1 / 7; grid-row:1; position:static}
.step-embed .embed, .step-embed .tabpane{display:contents}
.step-embed .tabpane[hidden]{display:none}
.step-embed .tabpane > .code{grid-column:1 / 7; grid-row:2}
.step-embed .tabpane > .result{grid-column:9 / 13; grid-row:1 / span 2}

/* code: the embed snippets */
.code{
	margin:0; padding:var(--s-6) var(--s-7); overflow-x:auto;
	font-family:var(--mono); font-size:var(--fs-md); line-height:1.8; white-space:pre; tab-size:2;
	color:var(--mut); background:var(--bg2); border:var(--bw) solid var(--line2);
}
.code .k, .code .f{color:var(--am)}
.code .s{color:var(--tx)}
.code .n{color:var(--am)}
.code .c, .code .p{color:var(--dim)}
.code .t{color:var(--mut)}
.code .a{color:var(--tx)}
/* a snippet copies on click: the corner label says so, then says it did */
.step-embed .code{position:relative; cursor:copy; transition:border-color .15s}
.step-embed .code:hover, .step-embed .code:focus-visible{border-color:var(--am)}
.step-embed .code::after{
	content:"click to copy"; position:absolute; top:var(--s-3); right:var(--s-4);
	font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--dim);
}
.step-embed .code:hover::after{color:var(--am)}
.step-embed .code[data-copied]::after{content:"copied"; color:var(--am)}
.tabs{display:flex; gap:var(--s-6); margin-bottom:var(--s-6)}
.tab.on, .tab.on::before, .tab.on::after{color:var(--am)}
.result-k{font-size:var(--fs-xs); letter-spacing:var(--ls-micro); text-transform:uppercase; color:var(--am); padding-bottom:var(--s-4)}
.result-k::before{content:"> "; color:var(--dim)}
.result .plaque .acts, .result .plaque > .br{margin-top:var(--s-1)}


/* ── narrower screens ── */
/* below ~1100px the 3-column text measure gets too narrow: the words take 4
   columns and the visuals give up their blank column */
@media (max-width:1100px){
	/* tablet and phone: the hero shows the beetle alone */
	.hero-work > figure:not([data-work="26842202"]){display:none}
	.step-text{grid-column:1 / 6}
	.sec-how > .lede-a, .sec-how > .lede-b{grid-column:1 / 10} /* one column, a wider measure */
}
@media (max-width:860px){
	.hero-grid{padding:var(--s-9) var(--gutter)}
	.hero-work{flex-direction:column; align-items:stretch}
	.hero-work > figure{width:100% !important}
	/* the grid folds to one column: everything spans, nothing sticks */
	/* (the trio and the board keep their layouts at every width, scaled down) */
	.ed > *, .weigh-row, .step > *, .step-embed .tabpane > *{grid-column:1 / -1 !important; grid-row:auto !important}
	.step-embed .tabpane > .result{max-width:300px}
	.sec-what > .weigh{margin-top:var(--s-9)}
	.trio{margin-top:var(--s-11); column-gap:var(--s-3)}
	.trio-k, .trio-m{font-size:var(--fs-2xs)}
	.board{margin-top:var(--s-11)}
	.weigh{row-gap:var(--s-5)}
	.step{row-gap:var(--s-7)}
	.step-text{position:static}
	.sec-how > .lede-b{margin-top:var(--s-6)}
}
@media (max-width:640px){
	:root{--fs-mark:clamp(3.2rem, 16.5vw, 4.6rem); --s-12:var(--s-11)} /* phone: the wordmark fits the width, page rhythm tightens */
	.code{font-size:var(--fs-xs); padding:var(--s-5) var(--s-6)} /* phone: more of each line fits before it scrolls */
	.step-embed .code{padding-top:calc(var(--s-5) + var(--s-7))} /* room for the copy label */
	.fwm .wm{height:8px}

				.descriptor{letter-spacing:.14em; font-size:var(--fs-xs)}
}

@media (prefers-reduced-motion:reduce){
	.sweep{display:none}
	.io .inst{opacity:1; transform:none; transition:none}
	.hero .inst, .hero .inst canvas{animation:none}
	.inst-box::before, .inst-box::after, .inst-in::before, .inst-in::after{transition:none}
}

/* ══ THE FOOTER, the ctwtf site's ═══════════════════════════════
   One 64px row on a hairline: a 44px tap row, the rest split above and below.
   Pixel icons left (20px glyphs in 44px tap squares, sp-2 apart so they read
   ~sp-4 apart), the evotions tag pushed right by its own auto margin. */
.foot{border-top:var(--bw) solid var(--line); padding:calc((64px - 1px - 44px) / 2) 0; margin-top:var(--s-11)}
.foot .wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}
.fline{display:flex; flex-wrap:wrap; align-items:center; column-gap:var(--s-5)}
.ficons{display:flex; align-items:center; gap:var(--s-2)}
.ficon{display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--mut); text-decoration:none; transition:color .18s ease}
.ficon:hover, .ficon:focus-visible{color:var(--am)}
.pi{display:block; width:20px; height:20px}
.ftag{margin-left:auto; color:var(--mut); font-size:var(--fs-sm); letter-spacing:var(--ls-micro); text-transform:uppercase}
.fwm{display:inline-flex; align-items:center; min-height:44px; color:var(--tx)}
.fwm:hover, .fwm:focus-visible{color:var(--am)}
.fwm .wm{height:12px}
.fev{color:var(--tx); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.fev:hover{color:var(--am)}
.fnarrow{display:none}
@media (max-width:760px){
	.trio{display:none} /* and no photo / map / player trio on phones */
	.wm{height:8px}
	.ident{padding-bottom:var(--s-10)}
		.ident{flex-direction:column; align-items:flex-start}
		/* the footer stacks the same way on every phone: icons left, tag right */
	.foot{padding:var(--s-1) 0}
	.fline{display:grid; grid-template-columns:auto 1fr; column-gap:var(--s-4); align-items:center}
	.ficons{grid-column:1}
	.ftag{grid-column:2; justify-self:end; text-align:right}
	.flead, .fwide{display:none}
	.fnarrow{display:inline}
}