/* Kiemelis v10 — the first screen is a fenced yard: player and info on top, the songs in one row along the bottom. */
:root {
  --bg: #ffffff;      /* white */
  --fg: #111111;      /* black */
  --grey: #8a8a86;
  --rule: #111111;
  --hair: #e8e8e4;
  --hover: #f4f4f1;
  --font: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 3.5vw, 50px);
  --side: clamp(20px, 5.9vw, 86px);
  --ink: #17301f;      /* ivy green: the band */
  --night: #0c1710;    /* the stage behind the videos */
  --rec: #9ad66b;      /* grass green */
  --leaf: #5b8f4e;     /* the only colour, used very little: logo brackets, playing song */
  --display: "Archivo", var(--font);
  --band: 156px;       /* height of the header band */
  --tile: clamp(96px, 13vh, 132px);
  --gap: clamp(22px, 3.4vw, 58px);  /* space between the window edges and the yard, all round */
  --edge: clamp(20px, 3vw, 44px);   /* side margin of the content inside the yard */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ───────── the yard: fences top and bottom, thin posts on the sides ───────── */
.fence { flex: none; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14'%3E%3Cpath d='M3 14V4l2-3 2 3v10z M0 7h12v1.4H0z M0 11h12v1.4H0z'/%3E%3C/svg%3E") repeat-x left bottom / 12px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14'%3E%3Cpath d='M3 14V4l2-3 2 3v10z M0 7h12v1.4H0z M0 11h12v1.4H0z'/%3E%3C/svg%3E") repeat-x left bottom / 12px 14px; }
/* the first screen fills the whole window: fence along the very top, fence along the very bottom */
.screen { display: flex; padding: var(--gap); }
.yard { position: relative; width: 100%; min-width: 0; min-height: calc(100vh - 2 * var(--gap)); min-height: calc(100svh - 2 * var(--gap)); padding: 0 var(--edge); display: flex; flex-direction: column; }
.yard > .fence { margin: 0 calc(-1 * var(--edge)); color: var(--fg); }

.top { display: flex; align-items: center; padding: 16px 0 18px; }
.mark { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-size: 20px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--fg); }
.mark .pk, .h .pk { display: inline-block; width: .21em; height: .84em; margin: 0 .05em 0 .06em; background: currentColor; clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); vertical-align: baseline; }
/* the pickets always sway, but with --amp at 0 they stand still; hovering the logo or playing a song
   eases --amp up to 1, so the swing grows in and dies down smoothly instead of jumping */
@property --amp { syntax: "<number>"; inherits: true; initial-value: 0; }
.mark { --amp: 0; transition: --amp 1.3s ease-in-out; }
.mark.breeze { --amp: .55; }
.brand:hover .mark, body.playing .mark { --amp: 1; }
.mark .pk { animation: sway 1.9s ease-in-out infinite; transform-origin: 50% 100%; }
.mark .pk + .pk { animation-delay: -.7s; }
/* two thin rails just below the middle, so the word reads like a little fence (logo and section headings) */
.mark[data-logo="picket"] > span, .fenced { position: relative; display: inline-block; isolation: isolate; padding: 0 .12em; }
.mark[data-logo="picket"] > span::before, .mark[data-logo="picket"] > span::after, .fenced::before, .fenced::after { content: ""; position: absolute; left: 0; right: 0; height: .065em; background: currentColor; z-index: -1; }
.mark[data-logo="picket"] > span::before, .fenced::before { top: 54%; }
.mark[data-logo="picket"] > span::after, .fenced::after { top: 74%; }
@keyframes sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(calc(var(--amp, 1) * -11deg)); } 70% { transform: rotate(calc(var(--amp, 1) * 7deg)); } }
/* the logo with a small, thin "studio" beside it: half the height, stretched to about the logo's length */
.brand { display: inline-flex; align-items: baseline; gap: 6px; color: var(--fg); }
.brand .sub { font-family: var(--display); font-weight: 200; font-stretch: 100%; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.top nav { margin-left: auto; display: flex; gap: 26px; align-items: center; font-size: 13px; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lang, .lang button { color: var(--grey); }
.lang button[aria-pressed="true"] { color: var(--fg); }

/* player and its info */
/* the player is as big as the window allows: limited by the width left for the info, and by the height left above the songs */
.work { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(260px, 1fr); align-content: center; gap: clamp(28px, 3vw, 56px); }
.player { position: relative; height: min(calc((100vw - 2 * var(--gap) - 2 * var(--edge) - 320px) * 9 / 16), calc(100vh - 2 * var(--gap) - 262px)); width: auto; aspect-ratio: 16 / 9; background: #10180f; overflow: hidden; }
.player iframe, .player .face { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.player .face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player .face.audio img { object-fit: contain; }
.player .face .play { position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -8px; border-left: 24px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; filter: drop-shadow(0 0 10px rgba(0,0,0,.45)); transition: transform .15s; }
.player .face:hover .play { transform: scale(1.12); }
.info { align-self: end; padding-bottom: 4px; min-width: 0; }
.info h1 { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; text-transform: uppercase; }
.info .role { font-weight: 600; margin-top: 8px; font-size: 14px; }
.info .desc { color: var(--grey); margin-top: 8px; max-width: 340px; font-size: 13px; line-height: 1.45; }
.info .cred { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--fg); font-size: 12px; line-height: 1.6; color: var(--grey); }
.info .cred a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
/* a small drawn arrow after outside links (a ↗ character turns into a colour emoji on iPhones) */
.ext { display: inline-block; width: .62em; height: .62em; margin-left: .3em; vertical-align: .05em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center / contain; }
.info .hint { margin-top: 16px; font-size: 12px; color: var(--grey); }

/* the songs: one row of boxed cards along the bottom, scrolling sideways forever */
.strip { flex: none; margin: 22px calc(-1 * var(--edge)) 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); }
#list { list-style: none; display: flex; overflow-x: auto; scrollbar-width: none; }
#list::-webkit-scrollbar { display: none; }
/* each card: a blurred, darkened picture with the song name on top (like Power Up); the playing one comes into focus */
#list li.row { position: relative; flex: none; width: 184px; height: 112px; overflow: hidden; border-right: 1px solid var(--bg); cursor: pointer; background: #111; }
#list li.row .th { position: absolute; inset: 0; }
#list li.row .th img { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(5px) brightness(.5) saturate(.85); transform: scale(1.15); transition: filter .35s, transform .5s; }
#list li.row .t { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 16px; color: #fff; }
/* song names in the logo's letters, with the logo's two rails running through each line, like a little fence */
#list li.row .t b { font-family: var(--display); font-weight: 750; font-stretch: 72%; font-size: 19px; line-height: 1.1; letter-spacing: .015em; text-transform: uppercase; margin-left: -.14em; }
#list li.row .t b span { padding: 0 .14em; --rail: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)); background: var(--rail) 0 55% / 100% 1px no-repeat, var(--rail) 0 75% / 100% 1px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#list li.row .t small { font-family: "DM Mono", monospace; font-weight: 500; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
#list li.row:hover .th img { filter: blur(3px) brightness(.62) saturate(.95); transform: scale(1.1); }
#list li.row.on .th img { filter: blur(.8px) brightness(.72); transform: scale(1.04); }
/* the playing card gets a little picket in the corner, swaying like the logo's */
#list li.row.on::after { content: ""; position: absolute; left: 16px; top: 12px; width: 5px; height: 13px; background: #fff; clip-path: polygon(50% 0, 100% 24%, 100% 100%, 0 100%, 0 24%); transform-origin: 50% 100%; }
body.playing #list li.row.on::after { --amp: 1; animation: sway 2.4s ease-in-out infinite; }

/* ───────── sections ───────── */
section.compare, section.credits, section.studio, section.contact { position: relative; padding: 80px 0 90px; margin: 0 calc(var(--gap) + var(--edge)); }
section.compare::before, section.credits::before, section.studio::before, section.contact::before, .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; opacity: .85; background: var(--fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14'%3E%3Cpath d='M3 14V4l2-3 2 3v10z M0 7h12v1.4H0z M0 11h12v1.4H0z'/%3E%3C/svg%3E") repeat-x left bottom / 12px 14px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14'%3E%3Cpath d='M3 14V4l2-3 2 3v10z M0 7h12v1.4H0z M0 11h12v1.4H0z'/%3E%3C/svg%3E") repeat-x left bottom / 12px 14px; }
.h { font-family: var(--display); font-stretch: 80%; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; letter-spacing: .01em; line-height: 1; margin-bottom: 44px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.big { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; letter-spacing: -.01em; max-width: 680px; }
.credits .big { margin-bottom: 56px; }
.credits .big small { display: block; font-size: 14px; color: var(--grey); letter-spacing: 0; margin-top: 8px; }

.rec { width: 100%; border-collapse: collapse; font-size: 16px; align-self: start; }
.rec td { padding: 13px 16px 13px 0; border-top: 1px solid var(--hair); vertical-align: top; }
.rec tr:last-child td { border-bottom: 1px solid var(--hair); }
.rec td:first-child { font-weight: 500; }
.rec td:nth-child(3) { color: var(--grey); }
.rec td:last-child { text-align: right; padding-right: 0; color: var(--grey); white-space: nowrap; }
.names h3 { font-size: 14px; font-weight: 500; color: var(--grey); margin-bottom: 6px; }
.names p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.35; letter-spacing: -.01em; margin-bottom: 30px; }
.names p b { font-weight: 600; }          /* the names stand out a little, the commas stay quiet */
.names p span { color: var(--grey); }

.rates { width: 100%; border-collapse: collapse; font-size: 16px; }
.rates td { padding: 18px 0 17px; border-top: 1px solid var(--hair); vertical-align: middle; }
.rates tr:first-child td { border-top: 1px solid var(--fg); }
.rates tr:last-child td { border-bottom: 1px solid var(--fg); }
.rates td.s { font-size: 23px; font-weight: 500; letter-spacing: -.015em; line-height: 1.1; transition: transform .35s ease; }
.rates td.s small { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--grey); transition: color .35s; }
.rates tr:hover td.s { transform: translateX(6px); }
.rates tr:hover td.s small { color: var(--fg); }
.note { margin-top: 16px; font-size: 14px; color: var(--grey); }

/* the send button: a little gate that swings open */
.form button { display: inline-flex; align-items: center; gap: 12px; perspective: 60px; }
.gate { width: 14px; height: 14px; background: currentColor; transform-origin: 0 50%; transition: transform .35s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M1 14V4l1.6-2.5L4.2 4v10z M5.4 14V4L7 1.5 8.6 4v10z M9.8 14V4l1.6-2.5L13 4v10z M0 6.5h14v1.3H0z M0 10.5h14v1.3H0z'/%3E%3C/svg%3E") no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M1 14V4l1.6-2.5L4.2 4v10z M5.4 14V4L7 1.5 8.6 4v10z M9.8 14V4l1.6-2.5L13 4v10z M0 6.5h14v1.3H0z M0 10.5h14v1.3H0z'/%3E%3C/svg%3E") no-repeat; }
.form button:hover .gate, .form button:focus-visible .gate { transform: rotateY(-62deg); }

.details { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -.01em; }
.details a { display: block; }
.details a:hover { text-decoration: underline; text-underline-offset: 4px; }
.details .small { font-size: 16px; color: var(--grey); margin-top: 24px; letter-spacing: 0; display: flex; gap: 20px; }
.form { display: flex; flex-direction: column; }
.form p { font-size: 16px; margin-bottom: 18px; }
.form label { display: grid; grid-template-columns: 170px 1fr; align-items: center; border-top: 1px solid var(--hair); }
.form label span { font-size: 14px; color: var(--grey); }
.form input, .form textarea { border: 0; outline: none; font: inherit; font-size: 17px; padding: 14px 0; background: transparent; color: var(--fg); }
.form textarea { resize: vertical; min-height: 96px; line-height: 1.4; }
.form label.msg { align-items: start; } .form label.msg span { padding-top: 16px; }
.form label:last-of-type { border-bottom: 1px solid var(--hair); }
.form.sending button { opacity: .5; pointer-events: none; }
.formmsg { margin-top: 16px; font-size: 14px; color: var(--grey); } .formmsg:empty { display: none; }
.formmsg a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.studio .big { white-space: pre-line; }
.form label:focus-within { border-top-color: var(--fg); }
.form button { align-self: flex-start; margin-top: 22px; border: 1px solid var(--fg); padding: 13px 34px; font-size: 16px; font-weight: 500; }
.form button:hover { background: var(--fg); color: var(--bg); }

.foot { position: relative; display: flex; justify-content: space-between; padding: 30px 0 30px; margin: 0 calc(var(--gap) + var(--edge)); font-size: 14px; color: var(--grey); }

/* the yard already ends with a fence, so the first section after it needs no second one */
section.compare::before { display: none; }
section.compare { padding-top: 56px; }

/* before and after: the demo plays, hold the button to hear the release */
.compare .big { margin-top: -20px; }
.stage { margin-top: 46px; display: grid; justify-items: center; gap: 26px; }
.now { position: relative; width: 100%; height: .85em; font-family: var(--display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; font-size: clamp(54px, 9vw, 130px); line-height: .85; text-align: center; }
.now span { position: absolute; left: 0; right: 0; transition: opacity .2s; }
.now span + span { opacity: 0; }
#cwave { display: block; width: 100%; height: 90px; }
.hold { width: 150px; height: 150px; border-radius: 50%; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 16px; line-height: 1.2; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .15s, opacity .3s; }
.hold small { display: block; margin-top: 4px; font-weight: 400; font-size: 11px; opacity: .6; }
.hold small:empty { display: none; }
.compare.held .hold { transform: scale(.94); }
.compare:not(.ready) .hold { opacity: .5; }
.compare .prow { display: flex; align-items: center; gap: 16px; margin-top: 44px; }
.pbtn { flex: none; width: 46px; height: 46px; border: 1px solid var(--fg); border-radius: 50%; display: grid; place-items: center; transition: background .2s, color .2s; }
.pbtn::before { content: ""; margin-left: 3px; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.pbtn.on::before { margin: 0; width: 10px; height: 13px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pbtn:hover { background: var(--fg); color: var(--bg); }
.compare .song { font-size: 14px; } .compare .song b { font-weight: 600; } .compare .song span { color: var(--grey); }
.csongs { display: flex; gap: 14px; font-size: 13px; } .csongs button { color: var(--grey); } .csongs button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
.compare .time { margin-left: auto; font: 500 11px "DM Mono", monospace; color: var(--grey); font-variant-numeric: tabular-nums; }
.cnote { display: none; margin-top: 26px; font-size: 12px; color: var(--grey); }
.compare.placeholder .cnote { display: block; }

/* ───────── colour palettes (?palette=…) ───────── */
:root[data-palette="white"]  { }
:root[data-palette="cream"]  { --bg: #f4f3ec; --fg: #15241b; --grey: #7f8a80; --rule: #15241b; --hair: #dcded3; --hover: #eae9df; --leaf: #5f9a4f; }
:root[data-palette="sage"]   { --bg: #e3e8da; --fg: #1b3022; --grey: #6f7d6c; --rule: #1b3022; --hair: #cfd6c4; --hover: #d9dfcf; --leaf: #3f7a45; }
:root[data-palette="butter"] { --bg: #f5eed3; --fg: #3a2a1c; --grey: #8d7c62; --rule: #3a2a1c; --hair: #e4dab8; --hover: #ede4c4; --leaf: #6f8f3a; }
:root[data-palette="tomato"] { --bg: #f3efe7; --fg: #2a2520; --grey: #8c847a; --rule: #2a2520; --hair: #e0d9cc; --hover: #ebe5da; --leaf: #c4553a; }
:root[data-palette="lilac"]  { --bg: #ebe6ef; --fg: #2b2440; --grey: #847d94; --rule: #2b2440; --hair: #d9d2e0; --hover: #e2dce8; --leaf: #7d9a5a; }
:root[data-palette="sky"]    { --bg: #e6eef2; --fg: #17303a; --grey: #6f8590; --rule: #17303a; --hair: #d0dde3; --hover: #dbe6eb; --leaf: #5f9a4f; }
:root[data-palette="clay"]   { --bg: #f1e7dc; --fg: #3b2a22; --grey: #93806f; --rule: #3b2a22; --hair: #e1d3c3; --hover: #eadfd2; --leaf: #b0583a; }
:root[data-palette="paper"]  { --bg: #fafaf7; --fg: #111111; --grey: #8a8a85; --rule: #111111; --hair: #e6e6e0; --hover: #f0f0ea; --leaf: #5f9a4f; }
:root[data-palette="night"]  { --bg: #15281c; --fg: #ece6d6; --grey: #8ea08f; --rule: #ece6d6; --hair: #24402c; --hover: #1d3525; --leaf: #a9d97c; }

:root[data-palette="oat"]       { --bg: #ece4d6; --fg: #2b2622; --grey: #8e8478; --rule: #2b2622; --hair: #dcd2c2; --hover: #e4dbcc; --leaf: #7a8f5a; }
:root[data-palette="stone"]     { --bg: #e4e2dd; --fg: #1e1e1c; --grey: #85837d; --rule: #1e1e1c; --hair: #d2d0ca; --hover: #dbd9d3; --leaf: #5e5e58; }
:root[data-palette="moss"]      { --bg: #dfe3cf; --fg: #2d3a1f; --grey: #77805f; --rule: #2d3a1f; --hair: #cdd3ba; --hover: #d6dbc4; --leaf: #6b7f2a; }
:root[data-palette="pistachio"] { --bg: #e8edd5; --fg: #2a3320; --grey: #7c866c; --rule: #2a3320; --hair: #d6ddc0; --hover: #dfe5ca; --leaf: #93b04a; }
:root[data-palette="mint"]      { --bg: #e2efe7; --fg: #173a2b; --grey: #6a877a; --rule: #173a2b; --hair: #cde0d4; --hover: #d7e8de; --leaf: #2f8f63; }
:root[data-palette="fog"]       { --bg: #e9eaea; --fg: #2c3135; --grey: #81878b; --rule: #2c3135; --hair: #d6d8d9; --hover: #dfe1e1; --leaf: #7d8b93; }
:root[data-palette="ink"]       { --bg: #f2f1ec; --fg: #1d2a4a; --grey: #7f8597; --rule: #1d2a4a; --hair: #dfdfe0; --hover: #e8e8e6; --leaf: #3f5fa8; }
:root[data-palette="blush"]     { --bg: #f2e4df; --fg: #3a2526; --grey: #977f7c; --rule: #3a2526; --hair: #e3d0ca; --hover: #ebdad4; --leaf: #c97a6b; }
:root[data-palette="cherry"]    { --bg: #f4e8e8; --fg: #5a1a22; --grey: #a17d80; --rule: #5a1a22; --hair: #e6d2d2; --hover: #eddddd; --leaf: #a6303d; }
:root[data-palette="apricot"]   { --bg: #f6e3cf; --fg: #3b2a1f; --grey: #9a8370; --rule: #3b2a1f; --hair: #e8d0b8; --hover: #efdac4; --leaf: #e07b39; }
:root[data-palette="olive"]     { --bg: #262a1d; --fg: #e6e2cf; --grey: #9a9a80; --rule: #e6e2cf; --hair: #363b2a; --hover: #2f3424; --leaf: #b7c26a; }
:root[data-palette="charcoal"]  { --bg: #1c1c1b; --fg: #eeeae2; --grey: #8d8a83; --rule: #eeeae2; --hair: #2d2d2b; --hover: #262625; --leaf: #9ad66b; }

/* ───────── logo variants (?logo=…) ───────── */
/* plaque — black enamel house plaque */
.mark[data-logo="plaque"] { background: var(--fg); color: var(--bg); font-size: 22px; letter-spacing: .08em; padding: 9px 16px 8px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--fg), inset 0 0 0 3.5px var(--bg); }
/* wide — light and widely spaced */
.mark[data-logo="wide"] { font-stretch: 100%; font-weight: 500; font-size: 17px; letter-spacing: .5em; margin-right: -.5em; }
/* label — the wide name in a thin box */
.mark[data-logo="label"] { font-stretch: 100%; font-weight: 600; font-size: 14px; letter-spacing: .42em; padding: 10px 8px 10px 16px; border: 1.5px solid var(--fg); }
/* block — the name stacked into a black square */
.mark[data-logo="block"] { background: var(--fg); color: var(--bg); width: 64px; height: 64px; padding: 9px 0 0 9px; font-size: 17px; line-height: .92; letter-spacing: .02em; white-space: normal; }
.mark[data-logo="block"] span span { display: block; }
/* dot — lowercase with a full stop */
.mark[data-logo="dot"] { text-transform: none; font-stretch: 100%; font-weight: 700; font-size: 32px; letter-spacing: -.04em; }
.mark[data-logo="dot"] b { color: var(--leaf); }
/* mono — typewriter, in brackets */
.mark[data-logo="mono"] { font-family: "DM Mono", monospace; text-transform: none; font-stretch: 100%; font-weight: 500; font-size: 18px; letter-spacing: 0; }
/* round — a black circle with K, then the wide name */
.mark[data-logo="round"] { display: inline-flex; align-items: center; gap: 14px; font-stretch: 100%; font-weight: 500; font-size: 15px; letter-spacing: .38em; }
.mark .k { width: 42px; height: 42px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-weight: 800; font-stretch: 80%; font-size: 22px; letter-spacing: 0; }
/* tall — very condensed, tall letters */
.mark[data-logo="tall"] { font-stretch: 62%; font-weight: 800; font-size: 44px; letter-spacing: .02em; line-height: .8; }
/* roman — serif capitals, spaced */
.mark[data-logo="roman"] { font-family: "Instrument Serif", serif; font-weight: 400; font-stretch: 100%; font-size: 27px; letter-spacing: .28em; }
/* tagline — name with a small line under it */
.mark[data-logo="tagline"] { display: inline-flex; flex-direction: column; gap: 5px; font-size: 26px; }
.mark[data-logo="tagline"] small { font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--grey); }

.mark[data-logo="mono"] i { font-style: normal; color: var(--leaf); }

/* the picker (only with ?pick) */
.picker { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 300px; background: #fff; color: #111; padding: 14px 14px 12px; border-radius: 10px; font: 13px/1.3 var(--font); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.picker b { display: block; font-weight: 600; margin: 0 0 7px; }
.picker .pl { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.picker .pl button { padding: 4px 9px; border: 1px solid #ccc; border-radius: 20px; font-size: 12px; color: #111; }
.picker .pl button[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.picker .pc { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.picker .pc button { aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.picker .pc button[aria-pressed="true"] { outline: 2px solid #111; outline-offset: 2px; }
.picker .hide { position: absolute; top: 10px; right: 12px; font-size: 11px; color: #888; }
.picker.small { width: auto; } .picker.small > :not(.hide) { display: none; } .picker.small .hide { position: static; color: #111; }
.picker.small .hide::after { content: " picker"; }

/* ───────── smaller screens ───────── */
@media (max-width: 900px) {
  :root { --edge: 14px; --gap: 14px; }
  .yard { min-height: 0; }
  .top { flex-wrap: wrap; gap: 10px; }
  .top nav a { display: none; }
  .work { grid-template-columns: 1fr; gap: 18px; }
  .player { width: 100%; height: auto; }

  .info .hint { display: none; }
  #list li.row { width: 160px; height: 96px; } #list li.row .t b { font-size: 17px; }
}
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; gap: 40px; }
  section.credits, section.studio, section.contact { padding: 70px 0 80px; }
  .h { margin-bottom: 30px; }
  .rec td:last-child { display: none; }   /* on phones drop the year, keep the artist */
  .form label { grid-template-columns: 1fr; padding-top: 10px; }
  .form input, .form textarea { padding: 6px 0 12px; }
  .form label.msg span { padding-top: 0; }
}