/* Fankle Audio: Look B2 (risograph paper, two inks). See Coding/Look/docs/brief.md, section 7.
   Federal blue does structure and type. Each page adds one ink of its own (--ink) for what matters.
   The pen lines are SVG masks so they print in whatever ink the page uses. They stand in for
   Fraser's own pen drawings until those are scanned. */

@font-face { font-family: 'Alfa Slab One'; src: url(/fonts/AlfaSlabOne-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(/fonts/CourierPrime-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(/fonts/CourierPrime-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #F1ECE0;
  --paper-2: #E8E1D2;
  --blue: #3255A4;
  --black: #1A1A1A;
  --ink: #F15060;          /* studio pages: riso bright red */
  --kanoid: #FF48B0;       /* device inks, approved 1 Nov 2026 */
  --kradle: #00A95C;
  --kepler: #FF6C2F;
  --slab: 'Alfa Slab One', Rockwell, 'Courier New', serif;
  --type: 'Courier Prime', 'Courier New', monospace;
  --measure: 62ch;
  --pad: clamp(16px, 4vw, 40px);

  --m-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.2 2.4 C30 1.2 70 2.1 98.6 1.1 C98.2 30 99.3 70 98.4 98.7 C70 98.1 30 99.2 1.6 98.2 C2.2 70 1 30 1.4 1.6' fill='none' stroke='black' stroke-width='2.2' vector-effect='non-scaling-stroke' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='6'%3E%3Cpath d='M1 3.2 Q60 1.8 120 3.4 T239 2.8' fill='none' stroke='black' stroke-width='2' stroke-dasharray='1 6' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6 Q50 1.4 110 3.2 T199 2.4' fill='none' stroke='black' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60' preserveAspectRatio='none'%3E%3Cpath d='M18 14 C38 3 92 2 110 16 C122 27 112 48 80 54 C50 59 12 54 6 38 C1 25 20 10 54 7 C70 6 84 8 92 11' fill='none' stroke='black' stroke-width='2.6' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .04' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23f)'/%3E%3C/svg%3E");
}
.ink-kanoid { --ink: var(--kanoid); }
.ink-kradle { --ink: var(--kradle); }
.ink-kepler { --ink: var(--kepler); }
.ink-bundle { --ink: var(--kanoid); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper) var(--paper-grain);
  background-image: var(--paper-grain), var(--paper-fibre);
  color: var(--black);
  font: 400 17px/1.55 var(--type);
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--black); }
p, ul, ol { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--slab); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: .01em; }
h2 { font-size: clamp(26px, 5vw, 34px); color: var(--black); margin-bottom: .55em; }
h3 { font-size: 22px; margin-bottom: .4em; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--paper); padding: 6px 10px; z-index: 9; }

/* ---------- printed elements ---------- */
/* A word printed twice, the second pass slightly off register in the page's ink. */
.print { text-shadow: .055em .05em 0 var(--ink); }
.print .k { font-size: 1.3em; line-height: .8; }
.label { font: 700 13px/1.3 var(--type); letter-spacing: .08em; color: var(--blue); text-transform: lowercase; }
.label::after { content: ':'; }
.rule { height: 6px; background: var(--blue); -webkit-mask: var(--m-rule) repeat-x 0 0 / 240px 6px; mask: var(--m-rule) repeat-x 0 0 / 240px 6px; margin: 28px 0; border: 0; }
.boxed { position: relative; }
.boxed::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--blue);
  -webkit-mask: var(--m-box) no-repeat 0 0 / 100% 100%; mask: var(--m-box) no-repeat 0 0 / 100% 100%;
}
.hl { background: var(--ink); color: var(--black); padding: 0 .3em; mix-blend-mode: multiply; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- header ---------- */
.site-head { padding-top: 22px; padding-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--black); }
.brand .word { font: 400 34px/1 var(--slab); text-shadow: 2px 2px 0 var(--blue); }
.brand .mark { width: 54px; height: 38px; transform: rotate(-8deg); }
.nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-left: auto; font: 700 15px var(--type); }
.nav a { position: relative; padding: 6px 10px; text-decoration: none; color: var(--blue); }
.nav a[aria-current]::after {
  content: ''; position: absolute; inset: -4px -6px; background: var(--ink); mix-blend-mode: multiply;
  -webkit-mask: var(--m-loop) no-repeat 0 0 / 100% 100%; mask: var(--m-loop) no-repeat 0 0 / 100% 100%;
}
.nav a[aria-current] { color: var(--black); }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--ink); }

/* ---------- mark (one cable in a tangle) ---------- */
.mark .c2 { stroke: var(--ink); mix-blend-mode: multiply; }
.mark .c1 { stroke: var(--blue); }
.mark .plug { fill: var(--blue); }

/* ---------- home ---------- */
.hero { padding: 40px 0 10px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.hero h1 { font-size: clamp(34px, 7.4vw, 66px); max-width: 15ch; }
.hero p { max-width: 46ch; margin: 18px 0 0; font-size: 18px; }
.stamp { width: clamp(120px, 20vw, 190px); transform: rotate(-11deg); opacity: .92; }
.stamp text { font-family: var(--type); font-weight: 700; }
.stamp .f { font-family: var(--slab); font-weight: 400; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 16px 0 34px; }
.card { padding: 18px 18px 20px; display: flex; flex-direction: column; text-decoration: none; color: var(--black); transition: transform .15s; }
.card:nth-child(1) { transform: rotate(-.6deg); }
.card:nth-child(2) { transform: rotate(.5deg); }
.card:nth-child(3) { transform: rotate(-.3deg); }
.card:hover { transform: rotate(0) translateY(-3px); }
.card .art { aspect-ratio: 4 / 3; margin: -2px -2px 14px; }
.card h3 { font-size: 34px; }
.card p { margin: 8px 0 14px; font-size: 16px; flex: 1; }
.card .foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 700; }
.card .more { color: var(--blue); }
.price { font: 400 22px/1 var(--slab); }

.bundle-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 28px; align-items: center; padding: 22px 24px; margin-bottom: 30px; text-decoration: none; color: var(--black); }
.bundle-card .trio { display: flex; }
.bundle-card .trio img { width: 96px; margin-right: -40px; border-radius: 2px; }
.bundle-card .trio img:nth-child(1) { transform: rotate(-7deg); }
.bundle-card .trio img:nth-child(3) { transform: rotate(6deg); margin-right: 0; }
.bundle-card h3 { font-size: 30px; }
.bundle-card p { margin: 6px 0 0; }
.bundle-card .foot { text-align: right; font-weight: 700; }

.note-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 10px 0 40px; font-size: 15.5px; }
.note-strip p { margin: 6px 0 0; }

/* coming soon: a rubber stamp */
.soon {
  position: absolute; top: 14px; right: 10px; z-index: 2; transform: rotate(9deg);
  font: 700 13px/1 var(--type); letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  padding: 7px 9px; border: 2.5px solid var(--blue); border-radius: 3px; background: color-mix(in srgb, var(--paper) 70%, transparent);
}
[hidden] { display: none !important; }

/* ---------- bundle: the three inks overprinted ---------- */
.print-3 {
  font-size: clamp(54px, 12vw, 110px);
  text-shadow: .05em .045em 0 var(--kanoid), .1em .02em 0 var(--kradle), .07em .1em 0 var(--kepler);
}
.bundle-side { display: grid; justify-items: end; gap: 6px; }
.overprint { width: min(300px, 100%); transform: rotate(-4deg); }
.ink-bundle .buy::after {
  background: linear-gradient(100deg, var(--kanoid) 0 38%, var(--kradle) 33% 71%, var(--kepler) 66%);
}
.bundle-card .trio img { mix-blend-mode: multiply; }

/* ---------- device page ---------- */
.dev-head { padding: 34px 0 6px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px 40px; align-items: end; position: relative; }
.dev-head h1 { font-size: clamp(64px, 15vw, 132px); }
.dev-head .tag { font-size: clamp(19px, 2.6vw, 23px); font-weight: 700; margin: 14px 0 0; max-width: 30ch; }
.buybox { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 8px; }
.buybox .price { font-size: 34px; }

.buy, .soon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 28px;
  font: 700 18px var(--type); letter-spacing: .06em; text-decoration: none; color: var(--black);
}
.buy::before, .soon-btn::before {
  content: ''; position: absolute; inset: 0; background: var(--blue);
  -webkit-mask: var(--m-box) no-repeat 0 0 / 100% 100%; mask: var(--m-box) no-repeat 0 0 / 100% 100%;
}
.buy::after { content: ''; position: absolute; inset: 5px 3px 3px 5px; background: var(--ink); mix-blend-mode: multiply; z-index: -1; transition: inset .12s; }
.buy { z-index: 0; isolation: isolate; }
.buy:hover::after { inset: 1px; }
.buy:active { transform: translate(1px, 1px); }
.soon-btn { color: var(--blue); }

.shot { margin: 26px 0 8px; padding: 14px; }
.shot img { width: 100%; }
.shot.placeholder img { aspect-ratio: 16 / 7; object-fit: contain; opacity: .9; }
.shot figcaption { font-size: 14px; color: var(--blue); margin-top: 10px; }
.shot:not(.placeholder) figcaption .ph { display: none; }

.cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px 56px; margin-top: 36px; }
.prose { max-width: var(--measure); }
.prose p:first-of-type { font-size: 18.5px; }
.list { list-style: none; padding: 0; }
.list li { padding-left: 1.6em; position: relative; margin-bottom: .55em; }
.list li::before { content: '–'; position: absolute; left: .2em; color: var(--blue); font-weight: 700; }
.list b { color: var(--black); }
.side > section { margin-bottom: 34px; }
.needs { list-style: none; padding: 0; margin: 0; font-size: 15.5px; }
.needs li { padding: 9px 0; }
.needs li + li::before { content: ''; display: block; height: 6px; margin: -9px 0 9px; background: var(--blue); -webkit-mask: var(--m-rule) repeat-x 0 0 / 240px 6px; mask: var(--m-rule) repeat-x 0 0 / 240px 6px; }
.needs b { display: block; color: var(--blue); font-size: 13px; letter-spacing: .08em; }

.player { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.player .play { width: 52px; height: 52px; padding: 4px; border: 0; background: none; cursor: pointer; color: var(--blue); }
.player .play:disabled { cursor: default; }
.player .play svg { width: 100%; overflow: visible; }
.player .ring { fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; }
.player .tri { fill: var(--ink); stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; mix-blend-mode: multiply; }
.player .bars { display: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; }
.player.on .tri { display: none; }
.player.on .bars { display: block; }
.player.empty .tri { fill: none; stroke-dasharray: 2 4; }
.player.empty .ring { stroke-dasharray: 3 6; }
.player .meta { display: grid; gap: 4px; min-width: 0; }
.player .title { font-weight: 700; font-size: 15.5px; }
.player .track { height: 10px; position: relative; cursor: pointer; }
.player .track::before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 6px; background: var(--blue); -webkit-mask: var(--m-line) no-repeat 0 0 / 100% 100%; mask: var(--m-line) no-repeat 0 0 / 100% 100%; }
.player .fill { position: absolute; left: 0; top: 1px; height: 8px; width: 0; background: var(--ink); mix-blend-mode: multiply; }
.player .time { font-size: 13px; color: var(--blue); }
.player.empty .track { opacity: .45; cursor: default; }

.again { margin: 30px 0 46px; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.again p { margin: 0; max-width: 46ch; }
.again .buybox { padding: 0; }

/* ---------- mailing-list sign-up ---------- */
.signup { margin: 10px 0 44px; max-width: 640px; }
.signup h2 { margin-bottom: .35em; }
.signup p { margin-bottom: .8em; }
.signup-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 4px; }
.signup input[type=email] {
  flex: 1 1 240px; min-width: 0; min-height: 48px; padding: 8px 2px; border: 0; border-radius: 0; background: transparent;
  font: 700 18px var(--type); color: var(--black);
  background-image: linear-gradient(var(--blue), var(--blue)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat;
}
.signup input[type=email]::placeholder { color: var(--blue); opacity: .55; font-weight: 400; }
.signup input[type=email]:focus { outline: none; background-image: linear-gradient(var(--ink), var(--ink)); background-size: 100% 4px; }
.signup button { border: 0; background: none; cursor: pointer; }
.signup button:disabled { opacity: .6; cursor: default; }
.signup-msg { min-height: 1.5em; margin: 10px 0 0; font-weight: 700; }
.signup .small { font-size: 14px; color: var(--blue); }

/* ---------- text pages ---------- */
.page { padding-top: 34px; padding-bottom: 40px; }
.page h1 { font-size: clamp(44px, 10vw, 84px); margin-bottom: 26px; }
.page .prose h2 { font-size: 26px; margin-top: 1.5em; }
.page .prose ol { padding-left: 1.4em; }
.page .prose ol li { margin-bottom: .6em; }
.page .prose ol li::marker { color: var(--blue); font-weight: 700; }
code, .path { font: 700 .92em var(--type); background: var(--paper-2); padding: .05em .35em; word-break: break-word; }
.aside { padding: 18px 20px; margin: 24px 0; max-width: var(--measure); }
.aside p:last-child { margin: 0; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 56px; align-items: start; }
.about-grid .stamp { width: clamp(150px, 26vw, 230px); margin-top: 10px; }

/* draft notes: visible while showDraftNotes is true in js/config.js */
.draft { display: none; }
.show-drafts .draft {
  display: inline-block; font: 700 12px/1.3 var(--type); letter-spacing: .1em; text-transform: uppercase;
  background: #FFE14D; color: var(--black); padding: 3px 7px; margin: 4px 8px; transform: rotate(-1.5deg); vertical-align: middle;
}
.show-drafts div.draft, .show-drafts p.draft { display: block; width: fit-content; margin: 0 0 18px; }

/* ---------- footer ---------- */
.site-foot { padding-bottom: 36px; font-size: 14.5px; color: var(--blue); }
.site-foot .row { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-weight: 700; }
.site-foot p { margin: 12px 0 0; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .cols, .dev-head { grid-template-columns: 1fr; }
  .buybox { justify-content: flex-start; }
  .bundle-side { justify-items: start; }
  .overprint { width: min(240px, 80%); }
  .note-strip { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .site-head { gap: 6px 10px; }
  .nav { margin-left: -10px; width: calc(100% + 20px); font-size: 14.5px; }
  .nav a { padding: 6px 8px; }
  .hero { grid-template-columns: 1fr; padding-top: 24px; }
  .hero .stamp { width: 104px; margin: -8px 6px 0 auto; }
  .cards { grid-template-columns: 1fr; gap: 22px; }
  .card h3 { font-size: 32px; }
  .bundle-card { grid-template-columns: 1fr; }
  .bundle-card .foot { text-align: left; }
  .shot { padding: 8px; }
  .shot.placeholder img { aspect-ratio: 4 / 3; }
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .stamp { width: 140px; }
  .again { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }