/* koa.xyz: a lab desk like a Linux desktop, built around Las Awichas. The ground is white and the threads of the code of
   Las Awichas fall over it. A bar runs along the top: the launcher, the workspaces, the open windows, the language and the time in
   Cochabamba. Every project and every piece of research is a window, framed in the colours of a thread: small with its picture
   when the desk opens, in full when you open it. */

@font-face { font-family: "Quicksand"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url("../fonts/quicksand-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Quicksand"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url("../fonts/quicksand-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The colours are the threads of the code of Las Awichas: orange to red, yellow to green, blue to purple.
   Behind everything moves the wallpaper: the pampa of Nazca seen from the air at night, its lines lit by wandering projectors (site.js
   draws it). The windows are dark, each framed in the gradient of its thread; the search and the chips are glass over the pampa, and
   the cards of the front page float above it in space. */
:root {
  --white: #ffffff;
  --ink: #141414;
  --orange: #ffa500;
  --red: #ff0000;
  --yellow: #ffff00;
  --green: #008000;
  --blue: #0000ff;
  --purple: #800080;
  --bg: #050506;            /* black titanium, under the wallpaper */
  --surface: #131316;       /* inside a window */
  --panel: #1c1c21;         /* the bar of a window */
  --sunk: #0c0c0f;          /* a terminal, a list */
  --line: #2e2e36;
  --text: #ecebe6;
  --head: #ffffff;          /* headings */
  --dim: #a3a3ac;
  --link: #ffb23e;          /* orange, light enough for text on the dark */
  --date: #ff7466;          /* red, light enough for text on the dark */
  --path: #7aa7ff;          /* the path in a terminal */
  --hover: rgba(255, 255, 255, .07);
  --fill: rgba(255, 255, 255, .05);   /* a button */
  --fill2: rgba(255, 255, 255, .11);  /* a button under the hand */
  --fill3: rgba(255, 255, 255, .14);  /* a button pressed */
  --glass: rgba(26, 26, 30, .5);      /* glass over the wallpaper */
  --glass2: rgba(20, 20, 24, .72);    /* a card over the wallpaper */
  --edge: rgba(255, 255, 255, .14);   /* the edge of the glass */
  --silver: linear-gradient(#ececef, #8d8d95);
  --shadow: rgba(0, 0, 0, .6);
  --task: 46px;             /* the room the top bar takes */
  --r: 10px;                /* the corners of a window */
  --mono: "JetBrains Mono", ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --chrome: var(--mono);
  color-scheme: dark;
}
.t1 { --hue: #ff4500; --tx: #ff9147; --g: linear-gradient(90deg, var(--orange), var(--red)); --g45: linear-gradient(45deg, var(--orange), var(--red)); --gv: linear-gradient(var(--orange), var(--red)); --on: var(--ink); }
.t2 { --hue: #4bb000; --tx: #b9e34c; --g: linear-gradient(90deg, var(--yellow), var(--green)); --g45: linear-gradient(45deg, var(--yellow), var(--green)); --gv: linear-gradient(var(--yellow), var(--green)); --on: var(--ink); }
.t3 { --hue: #5a00c8; --tx: #ad92ff; --g: linear-gradient(90deg, var(--blue), var(--purple)); --g45: linear-gradient(45deg, var(--blue), var(--purple)); --gv: linear-gradient(var(--blue), var(--purple)); --on: var(--white); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: transparent; color: var(--text); font-family: "Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-weight: 500; letter-spacing: .02em; line-height: 1.5; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--yellow); color: var(--ink); padding: 8px 12px; font-weight: 700; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
::selection { background: var(--orange); color: var(--ink); }

/* a button of the chrome: flat, rounded, in the monospaced type; pressed, it takes the colours of its thread */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 24px; height: 24px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--fill); color: var(--text);
  font: 500 12.5px/1 var(--chrome); letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s; }
.b:hover { background: var(--fill2); border-color: #44444e; }
.b:active, .b[aria-pressed="true"], details[open] > summary.b { background: var(--fill3); }

/* the mini icons of each kind, flat, in the light colour of the thread */
.mini { width: 16px; height: 16px; flex: none; }
.mini .f { fill: var(--tx, #ff9147); stroke: none; }
.mini .w { fill: #e4e4e0; stroke: none; }
.mini .l { fill: none; stroke: #1b1b1f; stroke-width: 1.3; }

/* the threads of Las Awichas: each falls once, in its own time, then hangs from the top; touched, it pulses */
.ths { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.th { position: absolute; top: 0; width: 3px; height: 300px; opacity: .72; animation-name: fall; animation-timing-function: linear; pointer-events: auto; }
.th.t1 { background: linear-gradient(var(--orange), var(--red)); }
.th.t2 { background: linear-gradient(var(--yellow), var(--green)); }
.th.t3 { background: linear-gradient(var(--blue), var(--purple)); }
.th.pulse { animation: pulse .5s forwards; }
/* on the ground of the lab the threads become lines of Nazca: a long line, a knot, a zigzag (the needle and thread, without the bird) */
.pampa .th, .pampa .th.t1, .pampa .th.t2, .pampa .th.t3 { background: var(--silver); }
.pampa .th { width: 16px; margin-left: -8px; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 0V2.4M8 11.6L13 18L3 26L13 34L3 42L13 50L8 56V63'/%3E%3Cellipse cx='8' cy='7' rx='2.6' ry='4.6'/%3E%3C/g%3E%3C/svg%3E") center bottom / 16px 64px no-repeat, linear-gradient(#000, #000) center top / 1.8px calc(100% - 61px) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 0V2.4M8 11.6L13 18L3 26L13 34L3 42L13 50L8 56V63'/%3E%3Cellipse cx='8' cy='7' rx='2.6' ry='4.6'/%3E%3C/g%3E%3C/svg%3E") center bottom / 16px 64px no-repeat, linear-gradient(#000, #000) center top / 1.8px calc(100% - 61px) no-repeat; }
.pampa .th.pulse { animation: sway .6s ease-in-out; }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(4deg); } 70% { transform: rotate(-3deg); } }
.pampa .th { transform-origin: 50% 0; }
@keyframes fall { 0% { top: -100px; } 100% { top: 100%; } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(3); } 100% { transform: scale(1); } }

/* the code of Las Awichas: the grandmother and her eight animals, under the threads */
.tf { position: relative; display: block; background: #000; overflow: hidden; padding-top: 18%; }
.tf img { display: block; width: 100%; height: auto; position: relative; }
.tf .ths { z-index: 1; }
.tf.small { padding-top: 14%; }
.tf.small .th { height: 46%; width: 2px; }

/* the ground: black, a faint grid of dots, the threads falling from the top */
.pampa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* the wallpaper: folds of black satin, drawn small and stretched soft (site.js) */
.wall { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; background: var(--bg); }
.ground .pampa { position: fixed; }

/* the desk, and its icons down the left side */
.desk { position: relative; min-height: max(100svh, 640px); overflow: hidden; }
.files { list-style: none; margin: 0; padding: 0; }
.file { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--text); width: 100px; padding: 4px 2px; }
.ic { width: 56px; height: 44px; display: grid; place-items: center; position: relative; }
.ic.pic img { width: 56px; height: 44px; object-fit: cover; padding: 2px; border-radius: 8px; background: var(--g45, var(--orange)); }
.ic.folder::before { content: ""; position: absolute; left: 3px; top: -5px; width: 22px; height: 8px; border-radius: 4px 4px 0 0; background: var(--g, var(--orange)); }
.ic .doc { width: 34px; height: 42px; color: #3a3a42; background: #e8e8e4; border-radius: 3px; filter: drop-shadow(0 0 0 transparent); box-shadow: 0 0 0 2px var(--hue, var(--orange)); }
.ic .doc text { fill: #1b1b1f; font: 700 13px var(--chrome); }
.name { font: 400 11px/1.3 var(--chrome); letter-spacing: 0; text-align: center; max-width: 100px; padding: 2px 4px; overflow-wrap: anywhere;
  border-radius: 4px; background: rgba(9, 9, 11, .72); color: var(--text); }
.file:hover .name, .file.on .name, .file:focus-visible .name { background: var(--g, var(--orange)); color: var(--on, var(--ink)); }
.file:focus-visible { outline: none; }
.nojs { display: none; }

@media (min-width: 761px) {
  .desk .files { position: absolute; top: calc(var(--task) + 10px); left: 8px; bottom: 12px; display: grid; grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, 88px); grid-auto-columns: 100px; gap: 2px 0; z-index: 1; }
}

/* a window: dark, rounded, framed in the gradient of its thread; a bar with its name and three round buttons on the right */
.win { position: relative; color: var(--text); padding: 0; border: 2px solid transparent; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--g45, linear-gradient(var(--line), var(--line))) border-box;
  box-shadow: 0 12px 34px var(--shadow); }
.win.on, .win.big { box-shadow: 0 18px 50px rgba(0, 0, 0, .7), 0 0 26px -8px var(--hue); }
.bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 5px 0 10px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none; }
.bar h1, .bar h2 { margin: 0; flex: 1; min-width: 0; font: 500 12.5px/1 var(--chrome); letter-spacing: 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.js .desk .win.open:not(.on) .bar h2 { color: var(--dim); }
.bar h2:focus { outline: none; }
.ctl { display: flex; gap: 6px; flex: none; }
.ctl .b { width: 20px; min-width: 20px; height: 20px; padding: 0; position: relative; border: 0; border-radius: 50%; background: var(--fill2); }
.ctl .b:hover { background: rgba(255, 255, 255, .18); }
.ctl .b i { position: absolute; inset: 0; }
.ctl .min i::before { content: ""; position: absolute; left: 6px; right: 6px; top: 9.5px; height: 1.5px; background: var(--text); }
.ctl .max i::before { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border: 1.5px solid var(--text); border-radius: 1.5px; }
.win.full .ctl .max i::before { left: 7.5px; top: 5px; width: 7px; height: 7px; }
.win.full .ctl .max i::after { content: ""; position: absolute; left: 5px; top: 7.5px; width: 7px; height: 7px; border: 1.5px solid var(--text);
  border-radius: 1.5px; background: #34343b; }
.ctl .x i::before, .ctl .x i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--text); transform: rotate(45deg); }
.ctl .x i::after { transform: rotate(-45deg); }
.ctl .x:hover { background: #e0352b; }
.ctl .x:hover i::before, .ctl .x:hover i::after { background: var(--white); }

/* what a small window shows: a picture, a film or the threads that open it, or a terminal */
.peek { display: none; }
.peek.pic { position: relative; width: 100%; margin: 0; padding: 0; border: 0; background: #000; cursor: pointer; }
.peek.pic img, .peek.pic video { width: 100%; height: auto; }
.peek .tag { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 5px 9px; border-radius: 6px; background: var(--g); color: var(--on);
  font: 600 12px/1 var(--chrome); opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; }
.peek.pic:hover .tag, .peek.pic:focus-visible .tag { opacity: 1; transform: none; }
.peek.pic:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
/* a terminal: the prompt, the words, two buttons */
.peek.dlg { grid-template-columns: 50px 1fr; gap: 6px 14px; padding: 12px 14px 12px; background: var(--sunk); font: 400 13.5px/1.55 var(--mono); letter-spacing: 0; }
.cmd { grid-column: 1 / -1; margin: 0 0 4px; color: var(--dim); font: 400 12.5px/1.4 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd b { color: var(--tx); font-weight: 700; }
.cmd i { font-style: normal; color: var(--path); }
.peek.dlg .animal { width: 50px; height: 50px; color: var(--tx); }
.peek.dlg strong { display: block; margin-bottom: 3px; color: var(--tx); }
.peek.dlg p { margin: 0; }
.peek.dlg .btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.peek.dlg .btns .b { min-width: 84px; height: 28px; padding: 0 14px; font-size: 12.5px; }
.peek.dlg .btns .def { background: var(--g); color: var(--on); border-color: transparent; font-weight: 700; }
.peek.dlg .btns .def:hover { filter: brightness(1.1); }
/* the terminal of Las Awichas: big words, ENTER and VIEW */
.peek.dlg.hello { grid-template-columns: 1fr; text-align: left; padding: 12px 16px 14px; }
.peek.dlg.hello .big { font: 800 29px/1.05 var(--mono); letter-spacing: .02em; margin: 6px 0 8px; background: var(--g); -webkit-background-clip: text;
  background-clip: text; color: transparent; }
.peek.dlg.hello .btns { justify-content: space-between; margin-top: 14px; }
.peek.dlg.hello .btns .b { flex: 1; letter-spacing: .1em; text-transform: uppercase; }
/* koa.txt, like the screen a Linux shows when asked who it is: the sign of the lab, its lines, the colours of the threads */
.peek.dlg.fetch { grid-template-columns: 48px 1fr; gap: 4px 12px; align-items: start; padding: 12px 12px 12px; }
.fetch .logo { width: 48px; height: 48px; margin-top: 4px; }
.fetch .who { margin: 0; color: var(--tx); font-weight: 700; }
.fetch .rule { margin: 0 0 2px; color: var(--dim); }
.fetch dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; font-size: 12px; line-height: 1.6; }
.fetch dt { color: var(--tx); font-weight: 700; }
.fetch dd { margin: 0; }
.blocks { display: flex; gap: 0; margin-top: 8px; }
.blocks i { width: 18px; height: 12px; }
.blocks i:nth-child(1) { background: var(--orange); } .blocks i:nth-child(2) { background: var(--red); }
.blocks i:nth-child(3) { background: var(--yellow); } .blocks i:nth-child(4) { background: var(--green); }
.blocks i:nth-child(5) { background: var(--blue); } .blocks i:nth-child(6) { background: var(--purple); }
.caret { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; margin-left: 2px; background: var(--text); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* what an open window holds */
.in { background: var(--surface); padding: 18px 22px 22px; font-size: 16.5px; line-height: 1.62; letter-spacing: .025em; }
.in p { margin: 0 0 .85em; max-width: 64ch; }
.in a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.in a:hover { color: var(--yellow); }
.in h2 { font-size: 21px; font-weight: 700; letter-spacing: .03em; margin: 34px 0 14px; color: var(--head); }
.in h3 { font-size: 17px; font-weight: 700; margin: 18px 0 4px; color: var(--head); }
.in .tf { margin: 0 0 16px; border-radius: 6px; }
.in .lead { font-weight: 600; }
.in .when { font: 500 12.5px/1.4 var(--chrome); letter-spacing: 0; color: var(--date); margin-bottom: .5em; }
.enter a { display: inline-block; font: 700 17px/1 var(--mono); color: var(--ink) !important; background: linear-gradient(90deg, var(--orange), var(--red));
  padding: 11px 18px; border-radius: 6px; text-decoration: none; }
.enter a:hover { filter: brightness(1.1); }
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 16px; }
.pics figure, .hero figure, .film, .yt, .shots figure { margin: 0; }
.pics img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #222; border-radius: 4px; }
.film video, .film img { width: 100%; height: auto; background: #000; border-radius: 4px; }
.film { margin: 0 0 14px; }
.frame { aspect-ratio: 4 / 3; background: #000; overflow: hidden; margin: 0 0 10px; border-radius: 6px; }
.frame.tall { aspect-ratio: auto; height: min(720px, 80svh); }
.frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.yt { margin: 0 0 16px; }
.yt a[data-yt] { position: relative; display: block; overflow: hidden; border-radius: 6px; }
.yt img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.yt .play { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: var(--g, var(--orange));
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.yt .play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent var(--ink); }
.yt figcaption { font-size: 14px; margin-top: 6px; }
.ytframe { aspect-ratio: 16 / 9; overflow: hidden; background: #000; margin: 0 0 14px; border-radius: 6px; }
.ytframe iframe { width: 100%; height: 100%; border: 0; }
.play a { display: inline-block; font: 600 13px/1 var(--mono); padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--fill); color: var(--text) !important; text-decoration: none; }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.go a { font-weight: 700; }
.go a + a { margin-left: 14px; }
.go.small { font-size: 14px; }
.chapters { list-style: none; margin: 8px 0 18px; padding: 0; }
.chapters li { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.chapters .when { color: var(--date); margin: 0 0 2px; font-variant-numeric: tabular-nums; }
.chapters .where { font-size: 14.5px; opacity: .8; margin-bottom: .6em; }
.in .inner-files .file { color: var(--text); text-decoration: none; }
.inner-files { list-style: none; margin: 10px 0 4px; padding: 14px 8px 10px; display: flex; flex-wrap: wrap; gap: 12px 4px; background: var(--sunk);
  border: 1px solid var(--line); border-radius: 8px; }

/* the silver jaguar in 3D: her still picture until she wakes; under her, how to move her, the camera and the pause */
.jag { margin: 0 0 14px; }
.jag .stage { position: relative; aspect-ratio: 16 / 10; background: #000; border-radius: 6px; overflow: hidden; }
.jag .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.jag.live .poster { opacity: 0; }
.jag canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.jag canvas:active { cursor: grabbing; }
.jag video.mirror { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
.jag.inhand video.mirror { display: block; }
.jag-do { margin-top: 8px; }
.jag .hint, .jag .hand-note { margin: 0 0 8px; max-width: none; font: 400 12.5px/1.5 var(--chrome); letter-spacing: 0; color: var(--dim); }
.jag .hand-note { color: var(--text); }
.jag-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.jag-btns .b { height: 30px; padding: 0 14px; }
.jag-btns .hand { background: var(--g); color: var(--on); border-color: transparent; font-weight: 700; }
.jag-btns .hand[aria-pressed="true"] { background: var(--fill3); color: var(--text); border-color: var(--line); }

/* Yakumama and Paqarina: the moods, the films, the wider pictures */
.hero.yk { grid-template-columns: 1.6fr 1fr; }
.pics figcaption, .film figcaption { font: 400 12.5px/1.45 var(--chrome); letter-spacing: 0; color: var(--dim); margin-top: 5px; }
.pics.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pics.wide img { aspect-ratio: auto; object-fit: contain; background: #000; }
.moods { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 6px 0 22px; }
.mood { margin: 0; cursor: pointer; }
.mood video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; display: block; }
.mood:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.mood figcaption { font: 400 12.5px/1.45 var(--chrome); letter-spacing: 0; color: var(--dim); margin-top: 6px; }
.mood figcaption strong { color: var(--text); font-weight: 700; margin-right: 2px; }
.mood figcaption i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.films.tall { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-items: start; margin: 6px 0 18px; }
.films.tall .film { margin: 0; }
.paqarina .in > .film { max-width: 620px; }
.yakumama .in > .film { max-width: 760px; }
ul.drive { margin: 0 0 .85em; padding-left: 1.2em; max-width: 64ch; }

/* the front page: the lab as a grid of pictures, like a search for images, in order: a line to search, chips, a section for each project */
.desk.grid { overflow: visible; min-height: 100svh; }
/* the first frame: the whole screen is the pampa at night; low on the left the command, the name of the lab and the six colours */
.opening { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--task) + 24px) clamp(16px, 7vw, 120px) clamp(72px, 15vh, 160px); }
.opening::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 60%);
  -webkit-mask: linear-gradient(#000 75%, transparent); mask: linear-gradient(#000 75%, transparent); }
.opening .cmd { margin: 0 0 clamp(6px, 1vw, 12px); padding: 0; font: 500 clamp(17px, 2.5vw, 34px)/1.2 var(--mono); color: #c9c4ba; }
.opening .cmd b { color: #ff9147; font-weight: 700; }
.opening .big { margin: 0; font: 800 clamp(72px, 11.5vw, 190px)/.95 var(--mono); letter-spacing: -.01em; color: #f4f4f2; text-shadow: 0 2px 24px rgba(0, 0, 0, .7); }
.opening .six { display: flex; margin: clamp(18px, 3.2vw, 44px) 0 0; }
.opening .six i { width: clamp(30px, 3.9vw, 62px); height: clamp(9px, 1.15vw, 18px); }
.opening .six i:nth-child(1) { background: var(--orange); } .opening .six i:nth-child(2) { background: var(--red); }
.opening .six i:nth-child(3) { background: var(--yellow); } .opening .six i:nth-child(4) { background: var(--green); }
.opening .six i:nth-child(5) { background: var(--blue); } .opening .six i:nth-child(6) { background: var(--purple); }
.tagline { position: relative; z-index: 1; margin: 0 0 6px; padding: 0 clamp(16px, 4vw, 48px); font: 400 13px/1.45 var(--mono); color: var(--dim); }
.seekhead { position: sticky; top: calc(var(--task) + 6px); z-index: 5; padding: 0 clamp(16px, 4vw, 48px); }
/* the search and the chips stay at hand while the cards pass, a capsule of glass under the top bar */
.seekbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 -10px; padding: 8px 10px; border-radius: 30px; }
.seekbar.stuck { background: rgba(8, 8, 10, .55); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.seekbar .seek { flex: 0 1 520px; }
.seekbar .chips { flex: 1 1 320px; min-width: 0; margin: 0; padding: 0; }
.seek { display: flex; align-items: center; gap: 12px; max-width: 680px; height: 46px; padding: 0 20px; border: 1px solid var(--line);
  border-radius: 24px; background: var(--glass); border-color: var(--edge); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.seek:focus-within { border-color: rgba(255, 255, 255, .34); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.seek .glass { width: 18px; height: 18px; flex: none; color: var(--dim); }
.seek input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 16px "Quicksand", system-ui, sans-serif; }
.seek input::-webkit-search-cancel-button { cursor: pointer; }
.chips { display: flex; gap: 8px; margin: 16px 0 0; padding: 0 0 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 16px; background: var(--glass); color: var(--text); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font: 500 12.5px/1 var(--mono); cursor: pointer; }
.chip:hover { background: var(--fill); }
.chip[aria-pressed="true"] { background: #f4f4f2; border-color: #f4f4f2; color: #0b0b0d; }
.results { position: relative; z-index: 1; padding: 6px clamp(16px, 4vw, 48px) 64px; }
.sec { margin: 22px 0 6px; }
.sec h2 { margin: 0 0 12px; font: 700 14px/1.2 var(--mono); color: var(--head); }
.sec h2 .n { margin-left: 6px; font-weight: 400; color: var(--dim); }
.tagline, .sec h2 { text-shadow: 0 1px 14px rgba(0, 0, 0, .75); }
/* the cards arrive as the page goes down: from far back in the dark into their place in the air */
html.js .card.later { opacity: 0; transform: translateZ(-260px) rotateX(22deg) rotateY(0deg); }
html.js .card.arrive { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity .9s ease, box-shadow .6s; }
.masonry { columns: 5 210px; column-gap: 16px; perspective: 1000px; perspective-origin: 50% 30%; }
.card { position: relative; display: block; break-inside: avoid; margin: 0 0 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px;
  background: var(--glass2); color: var(--text); text-decoration: none;
  /* floating in space: its own depth and angle (site.js sets them and lets them drift); a deep shadow on the pampa below */
  transform: translateZ(var(--z, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 90px 90px -40px rgba(0, 0, 0, .95), 0 30px 40px -24px rgba(0, 0, 0, .85), 0 0 40px -10px rgba(255, 236, 200, .1);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s; will-change: transform; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--ga, 130deg), rgba(255, 248, 230, .16), rgba(255, 255, 255, 0) 38%); mix-blend-mode: screen; }
.card:hover, .card:focus-visible { transform: translateZ(50px) rotateX(0deg) rotateY(0deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 110px 100px -40px rgba(0, 0, 0, .95), 0 0 60px -8px rgba(255, 236, 200, .2); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card .shot { display: block; overflow: hidden; background: #111114; }
.card .shot img { display: block; width: 100%; height: auto; transition: transform .25s ease; }
.card:hover .shot img { transform: scale(1.02); }
.card .cap { display: block; padding: 8px 11px 11px; }
.card .title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 600 14px/1.35 "Quicksand", system-ui, sans-serif; color: var(--head); }
.card:hover .title { text-decoration: underline; text-underline-offset: 2px; }
.card .src { display: flex; align-items: center; gap: 6px; margin-top: 3px; overflow: hidden; white-space: nowrap; font: 400 11.5px/1.4 var(--mono); color: var(--dim); }
.card .src i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--g45, var(--orange)); }
.card:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 12px; }
.card .shot.txt { padding: 14px 14px 16px; background: rgba(0, 0, 0, .35); font: 400 12.5px/1.55 var(--mono); color: var(--text); }
.card .shot.txt code { display: block; margin: 0 0 8px; font: inherit; color: var(--dim); overflow-wrap: anywhere; }
.card .shot.txt b { color: var(--tx); font-weight: 700; }
.card[hidden], .sec[hidden] { display: none; }
.results .none { font: 400 14px var(--mono); color: var(--dim); }
@media (min-width: 761px) {
  html.js .desk.grid .wins { position: fixed; inset: 0; z-index: 30; }
}
@media (max-width: 760px) {
  .seekbar { margin: 0 -6px; padding: 6px; border-radius: 22px; }
  .seekbar .seek { flex: 1 1 100%; }
  .masonry { columns: 2; column-gap: 10px; }
  .card { margin-bottom: 14px; }
  html.js .desk.grid .wins { position: fixed; inset: 0; z-index: 30; display: none; padding: calc(var(--task) + 12px) 10px 24px; overflow-y: auto;
    background: rgba(6, 6, 8, .94); }
  html.js .desk.grid .wins:has(.win.open:not(.min)) { display: flex; }
}
.yt a[data-embed] { position: relative; display: block; overflow: hidden; border-radius: 6px; }

/* Todo Nace and Huk: the five states, the team, the question at the end, three pictures to a row */
.pics.three { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pics.five { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.pics.one { grid-template-columns: minmax(0, 520px); }
.pics.one img { aspect-ratio: auto; }
ol.stages, ul.team { margin: 0 0 1em; padding-left: 1.3em; max-width: 64ch; }
ol.stages li, ul.team li { margin-bottom: .35em; }
ul.team { list-style: none; padding-left: 0; }
.tao .in > .film, .tao .in > .yt, .huk .in > .yt { max-width: 720px; }
.tao .in > .film.portrait { max-width: 340px; }
.in .ask { font-weight: 700; font-size: 18px; line-height: 1.5; max-width: 52ch; margin: 1.6em 0 1em; }
ul.drive li { margin: 0 0 .4em; }

/* a person who runs the lab: the pictures beside the words */
.person { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 26px; align-items: start; }
.pics.side { grid-template-columns: 1fr; margin: 0; }
.pics.side img { aspect-ratio: auto; object-fit: contain; }
.person .words p:first-child { margin-top: 0; }

/* a lab note */
.note figure figcaption { font-size: 13.5px; margin-top: 4px; color: var(--dim); }
.shots { display: grid; gap: 8px; margin: 6px 0 18px; align-items: start; }
.shots.n2 { grid-template-columns: 1fr 1fr; }
.shots.n3 { grid-template-columns: 1fr 1fr 1fr; }
.shots img, .shots video { width: auto; max-width: 100%; height: auto; max-height: 72svh; background: #000; border-radius: 4px; }
.shots.n1 { max-width: 680px; }
.gallery { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.also { font-size: 14px; margin-top: 24px; }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font: 400 13px/1.4 var(--chrome); letter-spacing: 0; }
.pager a { max-width: 40%; }

/* the research folder, like the list view of a file manager */
.explorer { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 13px/1.4 var(--chrome); letter-spacing: 0; margin: 0 0 8px;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.explorer th { text-align: left; font-weight: 600; padding: 7px 10px; background: var(--panel); color: var(--dim); border-bottom: 1px solid var(--line); }
.explorer td { padding: 7px 10px; vertical-align: top; border-bottom: 1px solid #1f1f25; }
.explorer tr:last-child td { border-bottom: 0; }
.explorer td:nth-child(n+2) { white-space: nowrap; color: var(--dim); }
.explorer a { display: flex; align-items: flex-start; gap: 9px; color: var(--text) !important; text-decoration: none; }
.explorer a .mini { margin-top: 1px; }
.explorer tr:hover td { background: var(--hover); }
.explorer a:hover span, .explorer a:focus-visible span { background: var(--g); color: var(--on); }

/* Paqarina: the notebooks */
.notebooks { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 22px; }
.notebooks li { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start; }
.notebooks .cover img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 8px 24px var(--shadow); }
.notebooks h2 { margin: 0 0 4px; font-size: 20px; }
.small { font-size: 13.5px; opacity: .8; }

/* the desk with its script: windows float, move by their bar, come to the front when touched */
html.js .desk .win { display: none; flex-direction: column; }
html.js .desk .win.open { display: flex; }
html.js .desk .win.min { display: none; }
html.js .desk .win:not(.full) .peek.pic { display: block; }
html.js .desk .win:not(.full) .peek.dlg { display: grid; }
html.js .desk .win:not(.full) .in { display: none; }
html.js .desk .win.full .in { overflow: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
@media (min-width: 761px) {
  html.js .desk .wins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  html.js .desk .win { position: absolute; pointer-events: auto; width: 360px; }
  html.js .desk .win.full { width: min(660px, 94vw); max-height: calc(100svh - var(--task) - 20px); }
  html.js .desk .win.full:has(.frame) { width: min(820px, 94vw); }
  html.js .desk .win .bar { cursor: default; touch-action: none; -webkit-user-select: none; user-select: none; }
  html.js .desk .win.moving { opacity: .94; }
}

/* without the script, every window sits below the desk, open in full, one after another */
html:not(.js) .ctl .min, html:not(.js) .ctl .max { display: none; }
html:not(.js) .find { display: none; }
html:not(.js) .desk { overflow: visible; padding-top: var(--task); }
html:not(.js) .nojs { display: block; text-align: center; margin: 24px 16px 0; font-weight: 600; position: relative; }
html:not(.js) .wins { position: relative; padding: 0 16px 60px; }
html:not(.js) .wins .win { max-width: 760px; margin: 24px auto; }
html:not(.js) .wins .win[data-hello] { display: none; }
html:not(.js) .desk .files { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 24px 12px 0; }
html:not(.js) .frame { display: none; }
html:not(.js) .th { animation: none; }

/* the top bar: the launcher, the workspaces, the open windows, the language and the time */
.taskbar { position: fixed; top: 6px; left: 6px; right: 6px; z-index: 2000; height: 34px; padding: 0 4px; display: flex; align-items: center; gap: 6px;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 10px; font: 500 12.5px/1 var(--chrome); letter-spacing: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.start { position: relative; flex: none; }
.start > summary { list-style: none; height: 26px; padding: 0 10px 0 6px; font-weight: 700; border-color: transparent; background: transparent; }
.start > summary:hover, .start[open] > summary { background: var(--fill2); }
.start > summary::-webkit-details-marker { display: none; }
.logo { width: 20px; height: 20px; }
.logo .p { stroke: #ff6a1a; }
.logo .g { stroke: #9bd23a; }
.logo .o { stroke: #7f6bff; }
/* the launcher: a box that drops from the bar, with a line to search the lab and everything in it */
.menu { position: absolute; left: -4px; top: calc(100% + 10px); display: flex; flex-direction: column; width: min(380px, calc(100vw - 12px));
  max-height: calc(100svh - var(--task) - 20px); padding: 8px; border: 2px solid transparent; border-radius: 12px;
  background: linear-gradient(#141418, #141418) padding-box, linear-gradient(45deg, var(--blue), var(--purple)) border-box; box-shadow: 0 20px 50px rgba(0, 0, 0, .7); }
.find { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-bottom: 6px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line); }
.find span { color: #ad92ff; font-weight: 700; }
.find input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: 400 13.5px/1 var(--mono); outline: none; }
.find input::placeholder { color: #75757e; }
.find:focus-within { border-color: #6f5bd6; }
.list { flex: 1; min-width: 0; overflow: auto; padding: 2px 0; }
.list ul { list-style: none; margin: 0; padding: 0; }
.list [hidden] { display: none !important; }
.list a { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; border-radius: 6px; font: 400 13px/1.25 var(--chrome); letter-spacing: 0; text-decoration: none; color: var(--text); }
.list a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list a:hover, .list a:focus-visible { background: var(--g, var(--orange)); color: var(--on, var(--ink)); outline: none; }
.list a:hover .mini .f, .list a:focus-visible .mini .f { fill: var(--on, var(--ink)); }
.list .logo { width: 16px; height: 16px; }
.list .grp { margin: 8px 8px 3px; padding-top: 8px; border-top: 1px solid var(--line); font: 600 11px/1 var(--chrome); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.list hr { margin: 8px 4px; border: 0; border-top: 1px solid var(--line); }
.list .lng a { padding-left: 34px; font-weight: 700; }
.list .deep { display: none; }
.list.q .deep { display: block; }
.list .none { margin: 4px 10px 6px; color: var(--dim); font: 400 13px/1.4 var(--chrome); }
/* the workspaces: the four rooms of the lab, the one you stand in lit in the colours of its thread */
.ws { list-style: none; margin: 0; padding: 0 4px; display: flex; gap: 3px; flex: none; }
.ws a { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; text-decoration: none; color: var(--dim); }
.ws a b { font-weight: 700; color: var(--text); }
.ws a:hover { background: var(--hover); color: var(--text); }
.ws a[aria-current] { background: var(--g); color: var(--on); }
.ws a[aria-current] b { color: var(--on); }
.tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; padding-left: 6px; border-left: 1px solid var(--line); }
.task { flex: 0 1 150px; min-width: 36px; height: 26px; justify-content: flex-start; padding: 0 8px; font-weight: 400; font-size: 12px;
  border-color: transparent; background: transparent; position: relative; }
.task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.task[aria-pressed="true"] { background: var(--fill2); }
.task[aria-pressed="true"] span { color: var(--text); }
.task[aria-pressed="true"]::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--g); }
.tray { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 4px; }
.tray .lang { font-weight: 700; text-decoration: none; padding: 5px 8px; border-radius: 6px; }
.tray .lang:hover { background: var(--yellow); color: var(--ink); }
.clock { white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 4px; }

/* a page of its own: one large window on the ground */
.ground { position: relative; min-height: 100svh; padding: calc(var(--task) + 26px) 16px 56px; overflow: hidden; }
.win.big { position: relative; max-width: 1060px; margin: 0 auto; }
.win.big .in { padding: 26px clamp(18px, 4vw, 40px) 34px; font-size: 17px; }
.hero { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.hero.three { grid-template-columns: repeat(3, 1fr); }
.hero img, .hero video { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; border-radius: 4px; }
.hero.three video { aspect-ratio: auto; height: auto; }
.by, .sub { font-weight: 700; color: var(--date); }
.where { opacity: .85; }
.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.press { list-style: none; margin: 0; padding: 0; }
.press li { padding: 8px 0; border-top: 1px solid var(--line); }
.press .d { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; margin-right: 6px; }
.press .w { opacity: .75; font-size: 14.5px; }

/* Las Awichas, as it is on koa.xyz: black, the band, the threads over the grandmother, the big name, the words in a typewriter */
/* Las Awichas keeps her black window on the white desk */
.win.big.dark { --surface: #000; --panel: #1c1c21; --sunk: #0d0d0d; --line: #2e2e36; --text: #ecebe6; --head: #fff; --dim: #a3a3ac;
  --link: #ffb23e; --date: #ff7466; --fill: rgba(255, 255, 255, .05); --fill2: rgba(255, 255, 255, .11); --fill3: rgba(255, 255, 255, .14); color-scheme: dark; }
.win.big.dark .t1, .win.big.dark.t1 { --tx: #ff9147; } .win.big.dark.t2 { --tx: #b9e34c; } .win.big.dark.t3 { --tx: #ad92ff; }
.win.big.dark .in { background: #000; color: var(--white); padding: 0 0 34px; }
.dark .landing { text-align: center; padding: 0 0 10px; }
.dark .band { margin: 0; padding: 14px 16px; background: linear-gradient(90deg, var(--yellow), var(--green)); color: var(--ink); font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 600; letter-spacing: .12em; max-width: none; }
.dark .landing .tf { margin: 0; border-radius: 0; }
.dark .landing .tf img { max-width: 900px; margin: 0 auto; }
.dark .title { font: 700 clamp(46px, 10vw, 118px)/1 "Quicksand", system-ui, sans-serif; letter-spacing: .02em; margin: 26px 0 30px; color: var(--white); }
.dark .title.small { font-size: clamp(32px, 6vw, 64px); margin: 26px 0 20px; }
.dark .mono { font: 400 clamp(16px, 2vw, 21px)/1.6 var(--mono); letter-spacing: 0; max-width: 46ch; margin: 0 auto 28px; padding: 0 18px; text-align: left; }
.dark .enter { margin: 0 0 28px; max-width: none; }
.dark .more { list-style: none; margin: 0 auto 18px; padding: 0 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  font: 700 14px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.dark .present { font: 400 13.5px/1.55 var(--mono); opacity: .8; margin: 10px auto 0; padding: 0 18px; max-width: 60ch; }
.dark .about { padding: 0 clamp(18px, 4vw, 40px); border-top: 1px solid #2a2a2a; margin-top: 30px; }
.dark .about p { max-width: 64ch; }
.dark a { color: var(--orange); }
.dark .chapters li, .dark .press li { border-color: #2a2a2a; }
.dark .chapters .when { color: var(--yellow); }
.dark .inner-files { background: #0d0d0d; }
.dark .inner-files .file, .dark .inner-files .name { color: var(--white) !important; }
.dark .inner-files .name { background: rgba(0, 0, 0, .66); }
.dark .team { font: 400 15px/1.65 var(--mono); }
.dark .go { padding-top: 10px; }
.portraits { list-style: none; margin: 0; padding: 0 clamp(10px, 3vw, 30px); display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.portraits a { display: block; }
.portraits img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: #111; border-radius: 4px; transition: transform .2s; }
.portraits a:hover img, .portraits a:focus-visible img { transform: scale(1.03); }
.dark .landing > .go { margin-top: 26px; }

/* a portrait opened large, in a window of its own */
.lightbox { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; background: rgba(0, 0, 0, .8); padding: calc(var(--task) + 12px) 16px 16px; }
.lightbox[hidden] { display: none; }
.lightbox .win { max-width: min(92vw, 640px); }
.lightbox .in { padding: 0; background: #000; }
.lightbox img { max-height: calc(100svh - var(--task) - 110px); width: auto; margin: 0 auto; }
.lightbox .nav { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px; background: var(--panel); }
.lightbox .nav .b { min-width: 90px; height: 28px; }

@media (pointer: coarse) {
  .ctl .b { width: 28px; min-width: 28px; height: 28px; }
  .ctl .min i::before { left: 9px; right: 9px; top: 13.5px; }
  .ctl .max i::before { left: 9px; top: 9px; width: 10px; height: 10px; }
  .ctl .x i::before, .ctl .x i::after { width: 12px; margin-left: -6px; }
  .bar { height: 38px; }
}

@media (max-width: 1100px) {
  .ws a span { display: none; }
  .ws a { padding: 0 9px; }
  .task { flex: none; min-width: 30px; padding: 0 7px; }
  .task span { display: none; }
}
@media (max-width: 760px) {
  .desk { min-height: 100svh; }
  html.js .desk .files { display: none; }
  /* on a phone the windows stand one under another, a little askew, and open in place */
  html.js .desk .wins { position: relative; padding: calc(var(--task) + 16px) 14px 40px; display: flex; flex-direction: column; }
  html.js .desk .win { width: 100%; margin: 0 0 12px; }
  html.js .desk .win.full { width: 100%; margin: 6px 0 16px; z-index: 50; }
  html.js .desk .win.full .in { overflow: visible; }
  html.js .desk .win.min { display: none; }
  .tasks { display: none; }
  .start > summary span { display: none; }
  .start > summary { padding: 0 6px; }
  .tray { margin-left: auto; }
  .hero { grid-template-columns: 1fr 1fr; }
  .hero > :first-child { grid-column: 1 / -1; }
  .hero.three, .hero.yk, .person { grid-template-columns: 1fr; }
  .pics.side { grid-template-columns: 1fr 1fr; }
  .ground { padding-top: calc(var(--task) + 14px); padding-left: 8px; padding-right: 8px; }
  .shots.n3 { grid-template-columns: 1fr 1fr; }
  .notebooks li { grid-template-columns: 110px 1fr; gap: 14px; }
  .explorer td:nth-child(3), .explorer th:nth-child(3) { display: none; }
  .th { height: 200px; }
}
@media (max-width: 380px) {
  .clock { font-size: 11.5px; }
  .ws a { padding: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .th, .th.pulse, .caret { animation: none !important; }
}

/* Lluvia: the story of koa.xyz/rain in one column, the black band of its first line, its nine pictures that play under the finger */
.rain .call { margin: 0 auto 28px; max-width: 760px; padding: 14px 18px; background: #000; color: #fff; border-radius: 6px;
  font: 700 clamp(15px, 2.1vw, 19px)/1.4 var(--mono); letter-spacing: .03em; }
.rain .story { max-width: 760px; margin: 0 auto; }
.rain .story p { max-width: none; }
.rain .story .r { text-align: right; }
.rain .story .r:last-child { font-style: italic; opacity: .85; }
.rain .scene { position: relative; aspect-ratio: 7 / 4; margin: 22px 0 28px; border-radius: 8px; overflow: hidden; background: #000;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); }
.rain .scene.small { aspect-ratio: 4 / 3; max-width: 474px; margin-inline: auto; }
.rain .scene img, .rain .scene iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.rain .scene img { object-fit: cover; }
.rain .scene.contain img { object-fit: contain; }
.rain .scene iframe { background: transparent; color-scheme: normal; }
.rain .go { max-width: 760px; margin: 30px auto 0; }