/* jakerothwell.com
   Type: Hoefler Text for everything, Courier Prime only for fine print (captions, the copyright line).
   Courier Prime is open-licence and hosted from /fonts, so no request leaves this site. */
@font-face { font-family: 'Courier Prime'; src: url('/fonts/courier-prime/CourierPrime-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/courier-prime/CourierPrime-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/courier-prime/CourierPrime-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/fonts/courier-prime/CourierPrime-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --muted: #777;
  --faint: #eee;
  --red: #b81d15;      /* the Email and download links */
  --serif: 'Hoefler Text', 'EB Garamond', Garamond, Georgia, serif;
  --mono: 'Courier Prime', 'Courier New', Courier, monospace;
  /* set from the locked scribble settings by scribble.js */
  --dur: 300ms; --delay: 0ms; --ease: cubic-bezier(.45,.05,.25,1); --sw: 2.2px; --op: .8; --scr: #000; --hs: 1.1;   /* --hs is how much things grow on hover */
  --icon-sw: 2.25px;
  --band: clamp(96px, 14vh, 140px);   /* height of the top band: the name is centred in it, and the page's content starts right below */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); font-family: var(--serif); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: 17px; line-height: 1.55; letter-spacing: .5px; }
main { flex: 1; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--paper); border: 1px solid var(--ink); padding: 8px 12px; z-index: 100; }
.skip:focus { top: 12px; }
:focus-visible { outline: 1px dashed var(--ink); outline-offset: 4px; }

/* ---- Home page icons and their scribble ---- */
.item { position: relative; display: inline-flex; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.item:focus-visible { outline: none; }
.target { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; }
.icon .target { width: 72px; height: 72px; }
.icon .glyph { width: 36px; height: 36px; transition: transform .25s ease; }
.icon .glyph svg { display: block; width: 100%; height: 100%; stroke: var(--ink); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon .glyph svg path { vector-effect: non-scaling-stroke; stroke-width: var(--icon-sw); }
.icon.active .glyph { transform: scale(var(--hs)); }
.scribble { position: absolute; pointer-events: none; z-index: 1; overflow: visible; opacity: 0; transition: opacity .25s ease; }
.item.active .scribble { opacity: var(--op); transition: opacity .05s linear; }
.scribble .line { fill: none; stroke: var(--scr); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; }
.scribble .ribbon { fill: var(--scr); stroke: none; }
.scribble .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s linear .3s; }
.item.active .scribble .draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur) var(--ease) var(--delay); }

/* ---- Top bar (inner pages) ---- */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 32px; height: var(--band); }
.top .back { justify-self: start; }
.site-name { font-size: 24px; letter-spacing: .5px; text-align: center; white-space: nowrap; }
.back { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 8px 6px 0; color: #444; transition: color .2s ease; }
.back:hover, .back:focus-visible { color: var(--ink); outline: none; }
.chev { width: 9px; height: 12px; flex: none; align-self: baseline; margin-bottom: -1px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil); transition: transform .2s ease; }
.chev path { stroke-width: 2px; }
.back:hover .chev, .back:focus-visible .chev { transform: translateX(-3px); }

/* ---- Home ---- */
body.home main { align-items: center; justify-content: center; gap: 6px; padding: 40px 16px 24px; }
.name { font-weight: 400; font-size: 24px; letter-spacing: .5px; text-align: center; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .25s ease; }
@media (hover: hover) { .name:hover { transform: scale(var(--hs)); } }   /* grows by the same amount as the icons, with no scribble */
.icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 14px; padding-bottom: 36px; }   /* icons sit about 86px apart, centre to centre */
.icons .item { flex-direction: column; align-items: center; }
.label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 16px; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.item.active .label, .item:focus-visible .label { opacity: 1; }
@media (hover: none) { .label { opacity: 1; color: var(--muted); } .icons .item { margin-bottom: 18px; } }

/* ---- Footer ---- */
.foot { padding: 28px 16px 32px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: #999; }

/* ---- Photo mosaic: tight, flat masonry ---- */
.mosaic { width: min(1100px, 100% - 48px); margin: 0 auto 24px; column-count: 4; column-gap: 2px; }
.mosaic li { break-inside: avoid; margin-bottom: 2px; }
.tile { position: relative; display: block; overflow: visible; z-index: 1; transition: transform .25s ease, box-shadow .25s ease; }
.mosaic .tile { aspect-ratio: var(--ar); }
.mosaic .tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover, .tile:focus-visible { transform: scale(1.06); z-index: 5; box-shadow: 0 12px 30px rgba(0,0,0,.25); outline: none; }
.mosaic.justified { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px; column-count: auto; }   /* set up by the script on the Photos page: every row is filled edge to edge */
.mosaic.justified li { margin: 0; flex: none; }
@media (max-width: 900px) { .mosaic { column-count: 3; } }
@media (max-width: 600px) {
  :root { --band: 76px; } .mosaic { column-count: 2; width: calc(100% - 16px); } }

/* ---- Videos: a grid of thumbnails with the song and artist underneath ---- */
.reel { width: min(1100px, 100% - 48px); margin: 0 auto 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 26px; list-style: none; }
.vtile { display: flex; flex-direction: column; gap: 14px; }
.vtile:hover, .vtile:focus-visible { transform: none; box-shadow: none; }
.vtile .thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #111; overflow: hidden; border: 1px solid rgba(0,0,0,.3); box-shadow: 0 10px 30px rgba(0,0,0,.14); transition: box-shadow .35s ease, transform .35s ease; }
.vtile img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82); transform: scale(1); transition: filter .4s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.vtile:hover .thumb, .vtile:focus-visible .thumb { box-shadow: 0 18px 44px rgba(0,0,0,.28); }
.vtile:hover img, .vtile:focus-visible img { filter: brightness(1); transform: scale(1.045); }
.ring { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .3s ease; }
.ring i { position: relative; width: 76px; height: 76px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 22px rgba(0,0,0,.45); transform: scale(.88); transition: transform .35s ease; }
.ring i::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.vtile:hover .ring, .vtile:focus-visible .ring { opacity: 1; }
.vtile:hover .ring i, .vtile:focus-visible .ring i { transform: scale(1); }
.meta { display: grid; }
.track { font-size: 22px; line-height: 1.2; }
.artist { font-style: italic; color: #555; }
@media (max-width: 1000px) { .reel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reel { grid-template-columns: 1fr; gap: 22px; } }
@media (hover: none) { .vtile img { filter: none; } .ring { opacity: .85; } .ring i { transform: scale(1); } }

/* ---- Lightbox (white wash, like the approved mockup) ---- */
dialog.lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 0; background: rgba(255,255,255,.94); color: var(--ink); overflow: hidden; }
dialog.lb::backdrop { background: rgba(255,255,255,.94); }
.lb-stage { position: absolute; inset: 64px 64px 56px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.lb-stage picture { display: contents; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.lb-stage iframe { width: min(100%, calc((100vh - 130px) * 16 / 9)); aspect-ratio: 16 / 9; border: 0; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.lb-cap { position: absolute; left: 64px; right: 64px; bottom: 20px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0; color: var(--muted); }
.lb button { position: absolute; background: none; border: 0; cursor: pointer; padding: 14px 18px; font-family: var(--serif); font-size: 17px; letter-spacing: .5px; color: #333; }
.lb button:hover { color: var(--ink); }
.lb-close { top: 14px; right: 22px; }
.lb-x { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; filter: url(#pencil); }   /* a big, easy-to-hit close mark, same pencil look as the arrows */
.lb-x path { stroke-width: 2px; vector-effect: non-scaling-stroke; }
dialog.lb:focus { outline: none; }
.lb .lb-nav { top: 50%; transform: translateY(-50%); padding: 22px 18px; }
.lb-nav .chev { width: 9px; height: 12px; margin: 0; align-self: auto; display: block; }   /* the same size as the Home chevron */
.lb-nav .chev path { stroke-width: 2px; }
.lb-prev:hover .chev { transform: translateX(-3px); } .lb-next:hover .chev { transform: translateX(3px); }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
html:has(dialog.lb[open]) { overflow: hidden; }
@media (max-width: 700px) { .lb-stage { inset: 56px 8px 52px; } .lb-cap { left: 12px; right: 12px; } .lb .lb-nav { top: auto; bottom: 8px; transform: none; } }

/* ---- Card pages (About, Other, 404): a white card on the page ---- */
.card { width: min(420px, calc(100% - 32px)); margin: 0 auto 8vh; background: var(--paper); border: 1px solid var(--faint); box-shadow: 0 20px 60px rgba(0,0,0,.15); padding: 40px; text-align: center; }
.card.wide { width: min(560px, calc(100% - 32px)); }
.card h1 { font-weight: 400; -webkit-text-stroke: .45px currentColor; font-size: 23px; letter-spacing: 1.5px; margin-bottom: 4px; line-height: 1.3; }   /* the faint outline makes it a touch heavier than the text */
.card p { margin-bottom: 6px; font-size: 18px; line-height: 1.35; text-wrap: balance; }
.about-photo { display: block; margin: -40px -40px 30px; }   /* the photo runs edge to edge across the top of the About card */
.about-photo img { display: block; width: 100%; height: auto; }
.soft { color: var(--muted); }
.plain { border-bottom: 1px solid currentColor; }
.plain:hover { border-bottom-style: dashed; }
.mail, .ig { color: var(--red); }
.links { display: flex; justify-content: center; gap: 48px; }   /* Instagram and Email sit in one row */
[hidden] { display: none !important; }

/* ---- Other: a plain list of downloads ---- */
.stuff li { border-top: 1px solid var(--faint); padding: 17px 0; }
.stuff li:first-child { border-top: 0; padding-top: 0; }
.stuff li:last-child { padding-bottom: 0; }
.srow { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 26px; }
.sname { font-size: 19px; border-bottom: 1px solid transparent; }
a.srow:hover .sname { border-bottom-color: currentColor; }
.ssize { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.srow.soon, .srow.soon .ssize { color: #999; }
.srow.soon .dash { opacity: .5; }
.dash { width: 16px; height: 8px; margin-right: 5px; position: relative; top: -1px; fill: none; stroke: currentColor; stroke-linecap: round; filter: url(#pencil); }   /* the hand-drawn dash before a name */
.dash path { stroke-width: 2.6px; vector-effect: non-scaling-stroke; }
.ibtn, .dbtn { display: inline-flex; padding: 4px; margin: -4px; background: none; border: 0; color: inherit; cursor: pointer; }
.ibtn:hover, .dbtn:hover { opacity: .6; }
.dbtn { color: var(--red); }
.dl { width: 25px; height: 25px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; filter: url(#pencil); }   /* the info and download icons */
.dl path { stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.dl path.br { stroke-width: .9px; }   /* the corner brackets are lighter than the symbol inside them */
.card .egg { margin: 26px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0; line-height: 1.6; color: #999; }   /* the chess hint */
.egg span { white-space: nowrap; }
@media (hover: none) and (pointer: coarse) { .card .egg { display: none; } }   /* the chess game is desktop only */   /* each sentence stays on its own line */
@media (max-width: 380px) { .egg span { white-space: normal; } }

/* the "i" popup */
.sinfo { position: fixed; margin: auto; width: min(520px, calc(100vw - 32px)); padding: 34px 44px 28px; border: 1px solid var(--faint); background: #fff; color: #333; text-align: center; font-size: 16px; line-height: 1.5; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
@media (max-width: 520px) { .sinfo { padding: 30px 22px 24px; } }
.sinfo:focus { outline: none; }
.sinfo::backdrop { background: rgba(255,255,255,.85); }
.sinfo p { margin: 0; }
.sinfo .sinfo-notes { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--faint); }   /* small print under the description */
.sinfo .sinfo-notes p { font-family: var(--mono); font-size: 11px; letter-spacing: 0; line-height: 1.5; color: #777; }
.sinfo .sinfo-notes p + p { margin-top: 4px; }
.sinfo-x { position: absolute; top: 4px; right: 4px; padding: 10px; background: none; border: 0; cursor: pointer; color: #333; }
.sinfo-x:hover { color: var(--ink); }

@media (max-width: 520px) { .icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 28px; } .icons .item { justify-self: center; } }
@media (max-width: 600px) { .top { padding: 0 16px; gap: 6px; } .site-name { font-size: 19px; } .card { padding: 32px 22px; margin: 0 auto 5vh; } .about-photo { margin: -32px -22px 24px; } body.home main { gap: 6px; } .icons { gap: 12px 24px; } }

/* Reduced motion: no drawing and no growing; the scribble just appears. */
@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; transform: none !important; }
  .scribble .draw, .item.active .scribble .draw { transition: none; stroke-dashoffset: 0; }
  .scribble, .item.active .scribble { transition: opacity .2s ease; }
  .icon .glyph, .icon.active .glyph, .name, .tile, .vtile .thumb, .vtile img, .ring i { transition: none; transform: none !important; }
}