/* Peter Hewitt-Dutton — "half speed".
   Label cream, lacquer black, and the cherry off The Bakery's cupcake. */

@property --light { syntax: "<angle>"; inherits: true; initial-value: 35deg; }

:root {
  --cream: #f3ecdf;
  --cream-2: #e9dfcd;
  --ink: #1c1814;
  --ink-2: #4a423a;
  --muted: #7a6f63;
  --line: #d8cab5;
  --cherry: #da020e;
  --cherry-light: #da020e;  /* same red on dark */
  --lacquer: #100f0e;
  --on-lacquer: #f3ecdf;
  --on-lacquer-muted: #a99e90;
  --display: "Fraunces", Georgia, serif;
  --text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --gap: clamp(64px, 9vw, 116px);   /* the one space between sections, everywhere */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--cream); color: var(--ink);
  font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure, blockquote { margin: 0; }
p { margin: 0 0 1em; }
h1, h2, h3 {
  margin: 0; font-family: var(--display); font-weight: 500; letter-spacing: -.01em;
  font-variation-settings: "SOFT" 100, "WONK" 0;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--cherry); transition: color .2s; }
a:hover { color: var(--cherry); }
:focus-visible { outline: 2px solid var(--cherry); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--ink); color: var(--cream); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* Headings end with a cherry full stop */
.dot::after, .section-head h2::after, .about-text h2::after, .news h2::after, .bookings-text h2::after, .page-head h1::after {
  content: "."; color: var(--cherry);
}
.about-text h2::after, .bookings-text h2::after { color: var(--cherry-light); }

/* ------------------------------------------------------------ header */
.site-header { position: relative; z-index: 3; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; padding-block: 22px; }
.lockup { display: flex; align-items: center; gap: 18px; }
.lockup-bakery img { height: 60px; width: auto; }
.lockup-name { padding-left: 18px; border-left: 1px solid var(--line); font: 500 19px/1.2 var(--display); text-decoration: none; }
.site-nav { display: flex; gap: 28px; font-size: 15px; }
.site-nav a { text-decoration: none; }
@media (max-width: 640px) {
  .lockup-bakery img { height: 46px; }
  .lockup { gap: 14px; }
  .lockup-name { font-size: 17px; padding-left: 14px; }
  .site-nav { width: 100%; gap: 24px; }
}

/* ------------------------------------------------------------ grooves
   Shared by the hero record, the sleeves and the bookings band. */
.grooves {
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 0 33%, #0b0a0a 33.2% 40.5%, transparent 40.7%),
    radial-gradient(circle closest-side,
      transparent 0 54%, rgba(255, 255, 255, .055) 54.2% 54.8%,
      transparent 55% 67%, rgba(255, 255, 255, .055) 67.2% 67.8%,
      transparent 68% 80%, rgba(255, 255, 255, .055) 80.2% 80.8%, transparent 81%),
    radial-gradient(circle closest-side, transparent 0 97.4%, #2c2a28 97.7% 99.4%, transparent 99.7%),
    repeating-radial-gradient(circle closest-side, #151413 0 .28%, #1f1d1b .28% .56%),
    #161514;
}

/* ------------------------------------------------------------ hero record */
.record {
  --size: clamp(300px, 46vw, 620px);
  position: relative; width: var(--size); aspect-ratio: 1 / 1;
  container-type: inline-size;
  transition: --light .9s var(--ease);
  filter: drop-shadow(0 28px 36px rgba(28, 24, 20, .3));
}
.record-disc { position: absolute; inset: 0; animation: spin 3.6s linear infinite; }  /* 16⅔ rpm */
.record.is-paused .record-disc { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(1turn); } }

.record-runout { position: absolute; inset: 0; width: 100%; height: 100%; }
.record-runout text { font-family: var(--mono); font-size: 4.2px; font-weight: 500; fill: rgba(243, 236, 223, .45); }

.record-label {
  position: absolute; inset: 33.6%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle closest-side, #f6efe2 0 89%, #ddcbae 89.5% 91%, #f6efe2 91.5%);
  color: var(--ink); text-align: center;
}
.record-label img { position: absolute; left: 50%; top: 15%; width: 58%; height: auto; transform: translateX(-50%); }
.label-name { position: absolute; left: 12%; right: 12%; top: 60%; font: 500 2.4cqi/1.15 var(--display); }
.label-side { position: absolute; left: 0; right: 0; top: 74%; font: 500 1.35cqi/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cherry); }
.record-label::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 2.6cqi; height: 2.6cqi; margin: -1.3cqi 0 0 -1.3cqi; border-radius: 50%;
  background: var(--cream); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}
/* Light on the lacquer: two opposing highlights that follow the pointer */
.record-sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: conic-gradient(from calc(var(--light) - 26deg),
    rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .22) 26deg, rgba(255, 255, 255, 0) 52deg,
    rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .14) 206deg, rgba(255, 255, 255, 0) 232deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 33.6%, #000 34% 99.4%, transparent 99.7%);
          mask: radial-gradient(circle closest-side, transparent 0 33.6%, #000 34% 99.4%, transparent 99.7%);
}
.record-caption { margin: 20px 0 0; text-align: center; font: 13px/1.4 var(--mono); color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .record-disc { animation: none; }
  .record { transition: none; }
}

/* ------------------------------------------------------------ hero */
.hero, .page-head { overflow-x: clip; }
.hero-inner { display: grid; gap: 48px; align-items: center; padding-block: clamp(16px, 3vw, 40px) 0; }
.hero h1 {
  margin-bottom: 28px;
  font-size: clamp(44px, 6.2vw, 84px); line-height: .92; letter-spacing: -.035em; font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.hero-lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 27em; }
.hero-book { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 34px 0 0; }
.hero-book span { font: 14px var(--mono); color: var(--muted); }
.button {
  display: inline-block; padding: 15px 24px 16px; border-radius: 3px;
  background: var(--lacquer); color: var(--on-lacquer);
  font-size: 15px; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--cherry); transition: background .2s, color .2s;
}
.button:hover { background: var(--cherry); color: #fff; }
/* Peter's photo as the sleeve, with the record slid half out of it */
.hero-art {
  --s: clamp(250px, 30vw, 420px);
  position: relative; justify-self: center;
  width: calc(var(--s) * 1.66); height: calc(var(--s) + 12px);
}
/* An old, well-played LP sleeve: card stock, faded print, ring wear and worn edges */
.hero-sleeve {
  position: absolute; left: 0; top: 0; z-index: 2; width: var(--s); height: var(--s);
  container-type: inline-size; overflow: hidden; border-radius: 3px; transform: rotate(-1.2deg);
  background: #eee3cd;
  box-shadow:
    inset 0 0 0 1px rgba(255, 252, 244, .5), inset 0 0 6cqi rgba(140, 104, 58, .28), inset -3px 0 0 rgba(60, 45, 30, .1),
    0 2px 2px rgba(28, 24, 20, .14), 0 32px 50px -26px rgba(28, 24, 20, .65);
}
.hero-sleeve::before, .hero-sleeve::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
/* paper grain */
.hero-sleeve::before {
  opacity: .5; mix-blend-mode: multiply;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .33  0 0 0 0 .22  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* ring wear where the record has pressed through, plus scuffed corners */
.hero-sleeve::after {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 43.5%, rgba(255, 248, 232, .22) 45% 46.4%, transparent 48%),
    radial-gradient(circle at 50% 50%, transparent 0 14%, rgba(255, 248, 232, .1) 15% 16%, transparent 17.5%),
    radial-gradient(circle at 0 0, rgba(255, 248, 232, .35), transparent 9%),
    radial-gradient(circle at 100% 100%, rgba(255, 248, 232, .3), transparent 8%),
    radial-gradient(circle at 0 100%, rgba(255, 248, 232, .25), transparent 7%);
}
.sleeve-top {
  position: absolute; left: 6%; right: 6%; top: 2.4%; display: flex; justify-content: space-between;
  font: 500 2.6cqi/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: #6d5a43;
}
.sleeve-photo { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 25%; overflow: hidden; background: #cbbda3; }
.sleeve-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 30%;
  filter: sepia(.28) saturate(.78) contrast(.94) brightness(1.04);
}
.sleeve-band { position: absolute; left: 6%; right: 6%; bottom: 4.5%; height: 17%; display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 4cqi; }
.sleeve-name { font: 700 7.6cqi/1 var(--display); letter-spacing: -.02em; color: #2a211a; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72; white-space: nowrap; }
.sleeve-sub { grid-column: 1; margin-top: 1.6cqi; font: 500 2.5cqi/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cherry); }
.sleeve-logo { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 21cqi; height: auto; opacity: .85; }
.hero-art .record {
  --size: calc(var(--s) * .96);
  position: absolute; z-index: 1; left: calc(var(--s) * .7); top: calc(var(--s) * .02);
  animation: record-out 1.6s var(--ease) .25s both;
}
@keyframes record-out { from { transform: translateX(calc(var(--s) * -.68)); } }
.hero-art .record-caption { position: absolute; left: calc(var(--s) * .7); width: calc(var(--s) * .96); top: calc(var(--s) + 14px); margin: 0; }
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; }
  .hero-art { justify-self: end; margin-right: calc(-1 * clamp(0px, 6vw, 110px)); }
}
@media (max-width: 899px) {
  .hero-art { --s: min(52vw, 300px); order: -1; }
}
@media (prefers-reduced-motion: reduce) { .hero-art .record { animation: none; } }

/* ------------------------------------------------------------ sections */
.section { padding-block: var(--gap); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 40px; }
.section-head h2, .about-text h2, .news h2, .bookings-text h2 {
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1; letter-spacing: -.025em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.section-head a { flex: none; font-size: 15px; text-decoration: none; }

/* ------------------------------------------------------------ credits: records in sleeves */
.credit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 18px; }
@media (min-width: 700px) { .credit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 28px; } }
@media (min-width: 1100px) { .credit-grid-full { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.credit { position: relative; }
.credit:hover, .credit:focus-within { z-index: 2; }
.credit-link { display: block; text-decoration: none; }
.sleeve { position: relative; aspect-ratio: 1 / 1; }
.sleeve-disc { position: absolute; top: 3%; left: 3%; width: 94%; height: 94%; transition: transform .8s var(--ease); }
.sleeve-disc.grooves::after {
  content: ""; position: absolute; inset: 33.6%; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--lacquer) 0 8%, var(--cherry) 8.5% 100%);
}
/* Mastering credits: a CD instead of a record */
.cd {
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side,
      transparent 0 12.5%, rgba(236, 239, 241, .75) 12.5% 26.5%, rgba(150, 157, 164, .8) 26.5% 27.3%,
      #e6e9ec 27.3% 37.5%, rgba(160, 167, 174, .8) 37.5% 38.2%, transparent 38.4% 97.6%, rgba(255, 255, 255, .8) 97.8% 100%),
    conic-gradient(from 30deg, #d6dbe0, #f3f4f4 6%, #bde6f1 12%, #efcbe9 18%, #fff0bb 24%, #d6dbe0 32%, #eef0f1 46%,
      #c6ebdd 56%, #f1cde5 63%, #fff2c4 70%, #d6dbe0 80%, #f5f6f6 90%, #d6dbe0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 12.5%, #000 13%);
          mask: radial-gradient(circle closest-side, transparent 0 12.5%, #000 13%);
}
.sleeve-front { position: relative; z-index: 1; display: block; width: 100%; height: 100%; transition: transform .8s var(--ease); }
.sleeve-cover {
  display: block; width: 100%; height: 100%; object-fit: cover;
  box-shadow: 0 1px 1px rgba(28, 24, 20, .12), 0 18px 30px -18px rgba(28, 24, 20, .6);
}
@media (hover: hover) {
  .credit:hover .sleeve-disc, .credit:focus-within .sleeve-disc { transform: translateX(36%) rotate(30deg); }
  .credit:hover .sleeve-front, .credit:focus-within .sleeve-front { transform: translateX(-5%); }
}
/* Award sticker: small, on the sleeve, like a shrink-wrap hype sticker */
.award {
  position: absolute; top: 5%; right: 5%; z-index: 2;
  width: 15%; min-width: 22px; max-width: 34px; aspect-ratio: 1 / 1;
  display: grid; place-items: center; border-radius: 50%;
  background: #f7f1e5; color: var(--cherry); transform: rotate(12deg);
  box-shadow: inset 0 0 0 1.5px var(--cherry), inset 0 0 0 3px #f7f1e5, inset 0 0 0 3.5px rgba(218, 2, 14, .45), 0 1px 3px rgba(0, 0, 0, .35);
}
.award svg { width: 52%; height: 52%; fill: currentColor; }
.award-tip {
  position: absolute; top: calc(100% + 8px); right: -6px; width: max-content; max-width: 210px;
  padding: 7px 10px; border-radius: 3px; transform: rotate(-12deg); transform-origin: top right;
  background: var(--lacquer); color: var(--on-lacquer); font: 11.5px/1.35 var(--mono); text-align: left;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.award:hover .award-tip { opacity: 1; }
.award-note { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 2px; vertical-align: -5px; border-radius: 50%; background: #f7f1e5; color: var(--cherry); box-shadow: inset 0 0 0 1.5px var(--cherry); }
.award-note svg { width: 11px; height: 11px; fill: currentColor; }
/* No artwork: a plain test-pressing sleeve with a hole onto the label */
.sleeve-plain { display: flex; flex-direction: column; padding: 10%; background: #faf6ef; border: 1px solid var(--line); }
.sleeve-plain::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: 32%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle closest-side, var(--lacquer) 0 8%, var(--cherry) 8.5%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08);
}
.is-cd .sleeve-plain::before { background: radial-gradient(circle closest-side, #faf6ef 0 13%, #d9dde1 13.5% 100%); }
.plain-title { font: italic 500 clamp(15px, 1.5vw, 20px)/1.15 var(--display); }
.plain-artist { margin-top: 4px; font-size: 12px; color: var(--muted); }
.plain-mark { margin-top: auto; font: 10.5px var(--mono); letter-spacing: .06em; color: var(--muted); }

.credit-artist { margin-top: 18px; font: 500 15px/1.3 var(--text); letter-spacing: 0; }
.credit-title { margin: 3px 0 0; font: italic 400 17px/1.25 var(--display); color: var(--ink-2); overflow-wrap: anywhere; }
.credit-role { margin: 7px 0 0; font: 12.5px/1.45 var(--mono); color: var(--muted); }
.credit-link:hover .credit-title { color: var(--cherry); }

/* ------------------------------------------------------------ about (lacquer band) */
.about { background: var(--lacquer); color: var(--on-lacquer); padding-block: var(--gap); }
.about-inner { display: grid; gap: 40px; }
@media (min-width: 900px) { .about-inner { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
.about-photo img { width: 100%; border-radius: 2px; }
.about-photo figcaption { margin-top: 12px; font: 13px/1.4 var(--mono); color: var(--on-lacquer-muted); }
.about-text h2 { margin-bottom: 28px; }
.about-text p { max-width: 34em; color: rgba(243, 236, 223, .84); }
.about-text a { color: var(--on-lacquer); text-decoration-color: var(--cherry-light); }
.about-text a:hover { color: var(--cherry-light); }

/* ------------------------------------------------------------ client quotes (only when cleared) */
.testimonials blockquote { max-width: 40em; margin-bottom: 36px; }
.testimonials blockquote p { font: italic 400 26px/1.3 var(--display); margin-bottom: 8px; }
.testimonials footer { font: 13px var(--mono); color: var(--muted); }

/* ------------------------------------------------------------ news */
.news h2 { margin-bottom: 40px; }
.news-grid { display: grid; gap: 36px; }
@media (min-width: 700px) { .news-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.news-item { padding-top: 18px; border-top: 1px solid var(--line); }
.news-date { margin-bottom: 8px; font: 13px var(--mono); color: var(--cherry); }
.news-item h3 { margin-bottom: 10px; font-size: 25px; line-height: 1.15; }
.news-item p { max-width: 34em; font-size: 16px; color: var(--ink-2); }

/* ------------------------------------------------------------ bookings (lacquer band) */
/* Two type sizes only in this band: --bk-large (heading, email) and --bk-small (everything else) */
.bookings { --bk-large: clamp(30px, 3.6vw, 46px); --bk-small: 16px; position: relative; isolation: isolate; overflow: hidden; background: var(--lacquer); color: var(--on-lacquer); padding-top: var(--gap); }
.bookings-disc {
  --d: clamp(560px, 74vw, 1040px);
  position: absolute; z-index: -1; width: var(--d); aspect-ratio: 1 / 1;
  right: calc(var(--d) * -.5); bottom: calc(var(--d) * -.5);
}
.bookings-disc::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen;
  background: conic-gradient(from 200deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .12) 24deg, rgba(255, 255, 255, 0) 48deg,
    rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .08) 204deg, rgba(255, 255, 255, 0) 228deg);
}
.bookings-disc::after {
  content: ""; position: absolute; inset: 33.6%; border-radius: 50%;
  background: radial-gradient(circle closest-side, var(--lacquer) 0 7%, var(--cherry) 7.5% 100%);
}
.bookings-inner { display: grid; gap: 40px; }
@media (min-width: 900px) { .bookings-inner { grid-template-columns: .9fr 1.3fr; gap: 64px; align-items: start; } }
@media (max-width: 899px) { .bookings-disc { opacity: .45; } }
.bookings-logo img { width: min(360px, 78%); height: auto; }
.bookings-text h2 { margin-bottom: 24px; font-size: var(--bk-large); }
.bookings-text p { max-width: 30em; font-size: var(--bk-small); }
.bookings-email { font: 400 var(--bk-large)/1.15 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; text-decoration-color: var(--cherry-light); }
.bookings-email:hover { color: var(--cherry-light); }
.bookings-small { font-size: var(--bk-small) !important; color: var(--on-lacquer-muted); }
.bookings-small a { color: var(--on-lacquer); text-decoration-color: var(--cherry-light); }
.footer-line { margin-top: var(--gap); padding-bottom: 28px; font: var(--bk-small)/1.5 var(--text); color: var(--on-lacquer-muted); }
.footer-line p { margin: 0; padding-top: 20px; border-top: 1px solid rgba(243, 236, 223, .14); }

/* ------------------------------------------------------------ credits page */
.page-head-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-block: clamp(16px, 3vw, 40px) 0; }
.page-head h1 {
  margin-bottom: 16px;
  font-size: clamp(52px, 8vw, 108px); line-height: .95; letter-spacing: -.035em; font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.page-head p { max-width: 26em; font-size: 19px; color: var(--ink-2); }
.record-small { --size: clamp(150px, 28vw, 360px); }
.page-head-record { margin-right: calc(-1 * clamp(40px, 9vw, 140px)); }
.credits { padding-top: var(--gap); }
.credits-more { margin: 64px 0 0; font-size: 15px; color: var(--muted); }

/* ------------------------------------------------------------ game page */
.game-band { padding-block: var(--gap); }
.game-frame {
  max-width: 780px; margin-inline: auto; aspect-ratio: 1 / 1; max-height: 88vh;
  overflow: hidden; border-radius: 6px; background: #07081a;
  box-shadow: 0 2px 2px rgba(28, 24, 20, .12), 0 36px 60px -30px rgba(28, 24, 20, .7);
}
@media (max-width: 640px), (pointer: coarse) { .game-frame { aspect-ratio: 3 / 4; } }
.game-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ai-note { max-width: 780px; margin: 18px auto 0; text-align: center; font: 12px/1.4 var(--mono); color: var(--muted); }

/* Fractions spelled out (the web fonts have no ⅔ glyph) */
.frac { white-space: nowrap; }
.frac sup, .frac sub { font-size: .68em; line-height: 0; position: relative; vertical-align: baseline; }
.frac sup { top: -.42em; }
.frac sub { top: .08em; }

/* Videos: muted loops with a small sound button */
.video { position: relative; }
.video { min-width: 0; }
.video video { display: block; width: 100%; max-width: 100%; height: auto; background: #000; border-radius: 2px; }
.about-photo, .bookings-side, .bookings-video { min-width: 0; }
.sound {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(16, 15, 14, .72); color: var(--on-lacquer); transition: background .2s;
}
.sound:hover { background: var(--cherry); }
.sound svg { width: 18px; height: 18px; fill: currentColor; }
.sound .i-on, .sound[aria-pressed="true"] .i-off { display: none; }
.sound[aria-pressed="true"] .i-on { display: block; }
.video.is-manual .sound { display: none; }
.bookings-side { display: grid; gap: 32px; align-content: start; }
.bookings-video figcaption { margin-top: 10px; font: var(--bk-small)/1.4 var(--text); color: var(--on-lacquer-muted); }

/* Instagram: Peter's logo as a mask, so it takes the colour of the text around it */
.ig {
  display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: url("/images/instagram.png") center / contain no-repeat;
          mask: url("/images/instagram.png") center / contain no-repeat;
}
.nav-ig { display: inline-flex; align-items: center; font-size: 22px; line-height: 1; }
.nav-ig:hover { color: var(--cherry); }
.hero-ig { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 18px 0 0; }
.hero-ig-link { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1 var(--text); text-decoration: none; }
.hero-ig-link .ig { font-size: 24px; }
.hero-ig-link:hover { color: var(--cherry); }
.bookings-ig {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 18px 12px 14px;
  border: 1px solid rgba(243, 236, 223, .35); border-radius: 3px;
  font-size: var(--bk-small); color: var(--on-lacquer); text-decoration: none; transition: border-color .2s, color .2s;
}
.bookings-ig .ig { font-size: 24px; }
.bookings-ig:hover { color: var(--cherry); border-color: var(--cherry); }