/* Polarfon's pages, design 2.5: the instrument's own system on a page. One typeface in two weights, six sizes, a 4-point unit,
   twelve columns, hairlines, a 4-point corner, one color of signal. Flat: no gradient, no shadow, no blur. The colors are the
   panel's tokens (tokens.css, written from Source/ui/Tokens.h by bin/sync, with the typeface's faces): day, and night for a reader
   who pressed the switch. Nothing here is a number of its own: a size is a token or a multiple of the unit. */

:root{--font:'Hanken Grotesk',system-ui,sans-serif;--u:4px;--z11:11px;--z14:14px;--z18:18px;--z28:28px;--z44:44px;--z72:72px;--w5:500;--w7:700;--r:4px;--hair:1px;--gut:calc(var(--u)*6);--side:clamp(16px,max(2.5vw,calc(50vw - 560px)),40px);--trcap:.08em;--tr72:-.03em;--tr44:-.02em;--tr28:-.01em;--tropen:.02em;
  /* the three measures, one a size of running text: a lead (28) about fifty characters, reading text (18) about seventy, small print (14)
     about sixty-five. Every block of words takes the one of its size, on every page and at every width */
  --m28:calc(var(--u)*200);--m18:calc(var(--u)*160);--m14:calc(var(--u)*120)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--u)*6)}
body{position:relative;margin:0 auto;width:100%;max-width:1200px;background:var(--surface);color:var(--ink);font-family:var(--font);font-weight:var(--w5);font-size:var(--z18);line-height:calc(var(--u)*7);font-feature-settings:"tnum" 1,"lnum" 1;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,dl,dd,ul{margin:0}
h1,h2,h3{text-wrap:balance;overflow-wrap:break-word}
p,dd,li{text-wrap:pretty;overflow-wrap:break-word}   /* (a word longer than a phone is wide breaks; nothing pushes the page sideways) */
ul{padding:0;list-style:none}
img,svg,picture{display:block}
img{max-width:100%;height:auto}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:var(--hair)}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
.nb{white-space:nowrap}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:var(--r)}
code{font:inherit;letter-spacing:var(--tropen);overflow-wrap:anywhere;background:var(--ground);border-radius:var(--r);padding:0 calc(var(--u)*1);box-decoration-break:clone;-webkit-box-decoration-break:clone}   /* a path, a file, a checksum: on its own small ground, apart from the panel's keys */   /* (a checksum: the one face and its size, each figure its own width) */

/* the type */
.d72{font-size:var(--z72);line-height:calc(var(--u)*19);font-weight:var(--w7);letter-spacing:var(--tr72)}
.d44{font-size:var(--z44);line-height:calc(var(--u)*12);font-weight:var(--w7);letter-spacing:var(--tr44)}
.t28{font-size:var(--z28);line-height:calc(var(--u)*10);letter-spacing:var(--tr28)}
.t18{font-size:var(--z18);line-height:calc(var(--u)*7)}
.t14{font-size:var(--z14);line-height:calc(var(--u)*5)}
.l11{font-size:var(--z11);line-height:calc(var(--u)*4);font-weight:var(--w7);letter-spacing:var(--trcap)}
.mute{color:var(--mute)}
/* the price in a line of words: its figure in the first ink, even in a muted note, in figures of one width (a beta price and the price after it align) */
.price{color:var(--ink);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--side);top:calc(var(--u)*-20);background:var(--ink);color:var(--surface);padding:calc(var(--u)*1) calc(var(--u)*3);border-radius:var(--r);font-size:var(--z11);line-height:calc(var(--u)*4);font-weight:var(--w7);letter-spacing:var(--trcap);text-decoration:none}
.skip:focus{top:calc(var(--u)*1);outline-offset:0}

/* the grid: twelve columns, the page as wide as the instrument and no wider. A list inside it (.sub) keeps the same columns */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-left:var(--side);padding-right:var(--side)}
.g>*{grid-column:1/13}
.sub{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}

/* the navigation */
body>nav.g{padding-top:calc(var(--u)*8);padding-bottom:calc(var(--u)*4);align-items:center}
body>nav .logo{grid-column:1/5;color:var(--ink);justify-self:start;display:flex;align-items:center;min-height:calc(var(--u)*11)}   /* (the mark is 21 high, pressed over 44) */
body>nav .links{grid-column:5/13;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:0 clamp(4px,1.4vw,16px);font-size:var(--z14);line-height:calc(var(--u)*5)}
body>nav .links a{text-decoration:none;padding:calc(var(--u)*3) calc(var(--u)*2)}
body>nav .links{margin-right:calc(var(--u)*-2);grid-row:1;padding-right:calc(var(--u)*12)}
/* the theme's key at the end of the bar, the links' room kept clear for it; on a phone it stays top right, beside the wordmark, and
   the links take the row below */
body>nav .switch{grid-column:12/13;grid-row:1;justify-self:end;margin-right:calc(var(--u)*-2)}
.menu{display:none}
@media (max-width:640px){body>nav.g{position:relative}body>nav .links{display:none}
.menu{display:block;order:1;margin-left:auto;font-size:var(--z14);line-height:calc(var(--u)*5)}
.menu summary{list-style:none;cursor:pointer;padding:calc(var(--u)*3) calc(var(--u)*2)}.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:4px}
.menu>div{position:absolute;left:0;right:0;top:100%;z-index:2;background:var(--surface);padding:0 var(--side) calc(var(--u)*6)}
.menu>div a{display:block;font-size:var(--z18);line-height:calc(var(--u)*13);text-decoration:none;border-top:var(--hair) solid var(--line)}.menu>div a:last-child{border-bottom:var(--hair) solid var(--line)}
body>nav .switch{order:2;margin-right:calc(var(--u)*-2)}}
@media (hover:hover){body>nav .links a:hover{text-decoration:underline;text-decoration-thickness:var(--hair)}}

/* a page's head: a caption, the headline, two lines of lead */
.hero{padding-top:calc(var(--u)*8)}
/* a page's head: the headline and its lead on one column (the lead's measure). The headline balances its lines within it; the lead
   fills it as reading text does, so every page's head ends at the same edge */
.hero>h1{max-width:var(--m28)}
.hero>.t28{margin-top:calc(var(--u)*4);text-wrap:pretty;max-width:var(--m18)}   /* (the lead keeps the reading column's edge: every paragraph ends on one line) */
.hero>.t28+*{margin-top:calc(var(--u)*8)}.hero>.t28+.note{margin-top:calc(var(--u)*4)}
.hero>.t18{grid-column:1/13;margin-top:calc(var(--u)*5)}
.hero>.note{grid-column:1/13;margin-top:calc(var(--u)*4)}
.hero>.t18,.soon,#pay,.hero>noscript{max-width:var(--m18)}
.hero>.note,.fine,.part>.more,.doc .facts dd,.facts dd{max-width:var(--m14)}
.hero>.shot{margin-top:calc(var(--u)*8)}
.hero>.more{margin-top:calc(var(--u)*2);font-size:var(--z14);line-height:calc(var(--u)*5)}
.more a{display:inline-block;padding:calc(var(--u)*3) 0}
/* the jump row: a page's contents, stacked in columns (three, two below 926, one on a phone), each link its own line */
.jump{columns:3;column-gap:var(--gut);margin-top:calc(var(--u)*6);font-size:var(--z14);line-height:calc(var(--u)*5)}
.jump a{display:block;width:fit-content;padding:calc(var(--u)*1.5) 0;break-inside:avoid}
@media (max-width:926px){.jump{columns:2}}
@media (max-width:640px){.jump{columns:1}.jump a{padding:calc(var(--u)*3) 0}}
.doc>.jump{grid-column:1/13;margin:0 0 calc(var(--u)*6)}.hero>.jump{grid-column:1/13}.hero>.note+.jump{margin-top:calc(var(--u)*8)}.hero+.doc{margin-top:calc(var(--u)*6)}.doc h2{scroll-margin-top:calc(var(--u)*6)}

/* the keys */
.cta{display:flex;flex-wrap:wrap;gap:calc(var(--u)*3);align-items:center;margin-top:calc(var(--u)*6)}
.cta .t14{margin-left:calc(var(--u)*3)}
.btn{display:inline-block;font:inherit;font-size:var(--z18);line-height:calc(var(--u)*7);font-weight:var(--w7);padding:calc(var(--u)*3) calc(var(--u)*6);border:0;border-radius:var(--r);text-decoration:none;cursor:pointer}
.btn.buy{background:var(--signal);color:var(--onsignal)}
.btn.try{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 var(--hair) var(--mute)}
.btn:disabled{background:none;color:var(--mute);box-shadow:inset 0 0 0 var(--hair) var(--line);cursor:default}
/* a key under the pointer changes by a step of its own color, as the panel's keys do: nothing is drawn onto it */
@media (hover:hover){.btn.buy:hover{background:color-mix(in oklab,var(--signal) 86%,var(--ink))}}
@media (hover:hover){.btn.try:hover{background:var(--ground)}}

/* a tag: a word of state set beside a name (NEW, SOON). It is the panel's key in its ON state brought down to the caption: the
   caption's type (11, bold, tracked capitals) on the signal color, the key's corner. The signal stays rare: one tag a page at most */
.tag{display:inline-block;vertical-align:middle;font-size:var(--z11);line-height:calc(var(--u)*5);font-weight:var(--w7);letter-spacing:var(--trcap);
  padding:0 calc(var(--u)*2);border-radius:var(--r);background:var(--signal);color:var(--onsignal);text-decoration:none}
h1 .tag,h2 .tag,h3 .tag{margin-left:calc(var(--u)*3);position:relative;top:-.15em}
@media (forced-colors:active){.tag{border:1px solid CanvasText}}
/* a key: a word as the instrument's panel prints it (SETTINGS, LICENSE, THIS LICENSE DIDN'T TAKE), quoted in running text. It is the panel's key
   in its OFF state: the caption's type (bold, tracked capitals) a step below the text around it (11 in 14, 14 in 18), the key's corner
   and hairline, never the signal (that is the tag's) */
.key{display:inline-block;font-size:var(--z11);line-height:1.25;font-weight:var(--w7);letter-spacing:var(--trcap);padding:0 .45em;
  border:var(--hair) solid var(--line);border-radius:var(--r);background:var(--ground);color:var(--ink);white-space:nowrap;vertical-align:.08em}
.t18 .key,.say .key,.qa .key{font-size:var(--z14)}

/* a picture of the instrument: its own render, on its own ground, as wide as its place; a tap opens it full size */
.shot{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ground)}
.shot img{display:block;width:100%;height:auto}
/* both themes' pictures in a figure: the one out of force hidden (and so never fetched); the switch's icon is where it goes */
:root:not([data-theme=night]) .shot .night,:root[data-theme=night] .shot .day{display:none}
:root:not([data-theme=night]) .switch .to-day,:root[data-theme=night] .switch .to-night{display:none}
.shot>a{display:block}
.shot a:focus-visible{outline:0}
.shot:has(:focus-visible){outline:2px solid var(--signal);outline-offset:2px}

/* a part of a page */
.part{padding-top:calc(var(--u)*30)}
.hero+.part{padding-top:calc(var(--u)*22)}   /* (the first part after a page's head: one step, on every page) */
.part>h2{grid-column:1/13;max-width:var(--m28)}
.part>h2+*{margin-top:calc(var(--u)*10)}.part>h2+.say{margin-top:calc(var(--u)*5)}   /* (one step from a part's head to what follows it) */
.part>.l11{margin-bottom:calc(var(--u)*4)}
.part>.say{grid-column:1/13;margin-top:calc(var(--u)*5);max-width:var(--m18)}
.part>.shot{margin-top:calc(var(--u)*10)}
.more{font-size:var(--z14);line-height:calc(var(--u)*5)}.part>.more{margin-top:calc(var(--u)*5)}   /* (a link onward: after a part, or at a catalog card's foot) */
.end{padding-bottom:calc(var(--u)*10)}

/* the catalog: an instrument a cell, its picture, its name, a line, the way in; what is coming is a well of the same size */
.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut);row-gap:calc(var(--u)*12);margin-top:calc(var(--u)*10)}
.catalog .item{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
/* a name in the catalog: one size below its section's heading (44 → 28), bold, as a document's sub-heading */
.catalog h3{font-size:var(--z28);line-height:calc(var(--u)*9);font-weight:var(--w7);letter-spacing:var(--tr28)}
.catalog h3 a{text-decoration:none;display:inline-block;padding:calc(var(--u)*2.5) 0;margin:calc(var(--u)*-2.5) 0}
@media (hover:hover){.catalog h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}}
.catalog .cta{margin-top:calc(var(--u)*3)}
.catalog .item .shot{margin-bottom:calc(var(--u)*3)}
.catalog .well{aspect-ratio:1120/788;border-radius:var(--r);background:var(--ground);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--u)*4);margin-bottom:calc(var(--u)*3)}
.catalog .well{position:relative;overflow:hidden}.catalog .well img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.catalog .well .l11{position:relative;margin-top:auto}.catalog .well .well>svg{position:absolute;inset:0;width:100%;height:100%}

/* the mark on a plate of its own (About): the two poles, large, on the instrument's ground */
.points{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut);row-gap:calc(var(--u)*10);margin-top:calc(var(--u)*10)}
.points>div{border-top:var(--hair) solid var(--line);padding-top:calc(var(--u)*5)}
.points h3{font-size:var(--z18);line-height:calc(var(--u)*7);font-weight:var(--w7);max-width:var(--m18)}
.points p{margin-top:calc(var(--u)*2);color:var(--mute);max-width:var(--m18)}
.points+*{margin-top:calc(var(--u)*12)}
@media (max-width:640px){.points{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--u)*8)}}
.strip{grid-template-columns:repeat(12,auto);justify-content:space-between;row-gap:calc(var(--u)*8);margin-top:calc(var(--u)*24)}   /* (the first glyph on the grid's left edge, the last on its right) */
.strip svg{width:calc(var(--u)*7);height:calc(var(--u)*7);fill:none;stroke:var(--ink);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.strip>svg{grid-column:auto}.strip svg *{vector-effect:non-scaling-stroke}
@media (max-width:640px){.strip{grid-template-columns:repeat(6,auto)}}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:calc(var(--u)*10)}
.tile svg{display:block;width:100%;height:auto;border-radius:var(--r);background:var(--ground);font:inherit;font-size:var(--z11);font-weight:var(--w7);letter-spacing:var(--trcap)}
.tile figcaption{margin-top:calc(var(--u)*3)}.tile figcaption>span{display:block}.tile figcaption .l11{margin-bottom:calc(var(--u)*1)}
.tile [data-fill=ink]{fill:var(--ink)}.tile [data-fill=surface]{fill:var(--surface)}.tile [data-fill=ground]{fill:var(--ground)}.tile [data-fill=signal]{fill:var(--signal)}.tile [data-fill=mute]{fill:var(--mute)}
.tile [data-stroke=ink]{stroke:var(--ink)}.tile [data-stroke=line]{stroke:var(--line)}.tile [data-stroke=mute]{stroke:var(--mute)}.tile [data-stroke=signal]{stroke:var(--signal)}
@media (max-width:640px){.tiles{grid-template-columns:minmax(0,1fr)}}

/* boxes: a rule, a caption, a paragraph */
/* a credo: a few promises, one a line at the lead's size, set on the panel's pole (the MIX between TONE and NOISE): the line in ink,
   a filled pole at the first promise, a point at each between, an open pole at the last. The marks sit on each first line's middle */
.credo{grid-column:1/13;margin:calc(var(--u)*10) 0 0;max-width:var(--m28);list-style:none;padding:0}
.credo li{position:relative;z-index:0;padding-left:calc(var(--u)*10)}
.credo li+li{margin-top:calc(var(--u)*6)}
.credo li:has(p)+li{margin-top:calc(var(--u)*10)}
.credo li:has(p):not(:last-child)::after{height:calc(100% + var(--u)*10)}
.credo li::before{content:"";position:absolute}
.credo li:first-child::before,.credo li:last-child::before{background:var(--ink)}
.credo li:first-child::before{left:calc(var(--u)*.25);top:calc(.5lh - var(--u)*1.75);width:calc(var(--u)*3.5);height:calc(var(--u)*3.5);border-radius:50%}
.credo li:last-child::before{left:calc(var(--u)*.25);top:calc(.5lh - var(--u)*1.75);width:calc(var(--u)*3.5);height:calc(var(--u)*3.5);box-sizing:border-box;border:calc(var(--u)*.625) solid var(--ink);background:var(--surface);border-radius:50%}
.credo li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--u)*2 - var(--u)*.1875);top:calc(.5lh);width:calc(var(--u)*.375);height:calc(100% + var(--u)*6);background:var(--ink);z-index:-1}
.credo li p{font-size:var(--z18);line-height:calc(var(--u)*7);letter-spacing:0;margin-top:calc(var(--u)*3);color:var(--mute);max-width:var(--m18)}
.credo li p+*{margin-top:0}

/* questions: the question in the first five columns, its answer in the rest, a rule between each */
/* questions and their answers: read down one column on the measure of a paragraph, a question in bold over its answer, the room between them the only divider */
.qa{grid-column:1/13;margin-top:calc(var(--u)*10)}
.qa>div{display:block;max-width:var(--m18);scroll-margin-top:calc(var(--u)*6)}
.qa>div+div{margin-top:calc(var(--u)*8)}
.qa h3{font-size:var(--z18);line-height:calc(var(--u)*7);font-weight:var(--w7)}
.qa p{margin-top:calc(var(--u)*2)}
/* folded: a row a question, between hairlines; its marker the mark's two poles, open while closed and filled while open */
.qa>details{max-width:var(--m18);scroll-margin-top:calc(var(--u)*6);border-top:var(--hair) solid var(--line)}.qa>details:last-child{border-bottom:var(--hair) solid var(--line)}
.qa summary{display:flex;align-items:flex-start;gap:calc(var(--u)*3);padding:calc(var(--u)*4) 0;list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none}.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"";flex:none;box-sizing:border-box;width:calc(var(--u)*2.5);height:calc(var(--u)*2.5);margin-top:calc(var(--u)*2.25);border:2px solid var(--ink);border-radius:50%}
.qa details[open]>summary::before{background:var(--ink)}
@media (hover:hover){.qa summary:hover h3{text-decoration:underline;text-decoration-thickness:var(--hair);text-underline-offset:4px}}
.qa details>p{margin:0;padding:0 0 calc(var(--u)*5) calc(var(--u)*5.5)}

/* rows on the twelve columns: the scenes to hear, the releases, the facts */
.listen,.rows,.facts{margin-top:calc(var(--u)*10);border-top:var(--hair) solid var(--line)}
.listen .row,.rows .row,.facts>div{padding:calc(var(--u)*3) 0;border-bottom:var(--hair) solid var(--line);align-items:center}
.listen .nm{grid-column:1/5}.listen .gn{grid-column:5/9}.listen audio,.listen .player{grid-column:9/13}
.rows .row{align-items:baseline;padding:calc(var(--u)*4) 0}
.rows .nm{grid-column:1/3}.rows .gn{grid-column:3/6}.rows ul{grid-column:6/13}
.row .nm{font-weight:var(--w7);letter-spacing:var(--tropen)}
.row .gn,.rows li{font-size:var(--z14);line-height:calc(var(--u)*5)}
.row .gn{color:var(--mute)}
.rows li+li{margin-top:calc(var(--u)*2)}
.listen audio{width:100%;height:calc(var(--u)*9)}
/* a recording to come: the player's place drawn as the instrument's well (its screen), empty: a play key at rest, the line a
   waveform will take dashed, and SOON in the well's quiet ink */
.player{grid-column:9/13;display:flex;align-items:center;gap:calc(var(--u)*3);height:calc(var(--u)*9);padding:0 calc(var(--u)*3);border-radius:var(--r);background:var(--well);color:var(--wellmute)}
.player .play{flex:none;width:0;height:0;border-style:solid;border-width:calc(var(--u)*1.25) 0 calc(var(--u)*1.25) calc(var(--u)*2);border-color:transparent transparent transparent var(--wellmute)}
.player .wave{flex:1;border-top:var(--hair) dashed var(--wellmute);opacity:.6}
.player .l11{flex:none;margin:0;color:var(--wellmute)}
/* the live player: the same well; the key a triangle, a pause while it plays; the wave its peaks, a 2 px stroke a slice (the strip's line), in the second ink, lit in the first as the loop passes */
.player[hidden]{display:none}
.player[data-src] .wave{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*5);border:0;opacity:1}
.player[data-src] .wave i{flex:none;width:2px;min-height:2px;border-radius:1px;background:var(--wellmute);opacity:.5}
.player[data-src] .wave i[data-lit]{background:var(--wellink);opacity:1}
.player .wave .h0{height:10%}.player .wave .h1{height:10%}.player .wave .h2{height:20%}.player .wave .h3{height:30%}.player .wave .h4{height:40%}.player .wave .h5{height:50%}.player .wave .h6{height:60%}.player .wave .h7{height:70%}.player .wave .h8{height:80%}.player .wave .h9{height:90%}.player .wave .h10{height:100%}
.player button.play{appearance:none;flex:none;display:grid;place-items:center;width:calc(var(--u)*6);height:calc(var(--u)*6);margin-left:calc(var(--u)*-1);padding:0;border:0;border-radius:var(--r);background:none;color:var(--wellink);cursor:pointer}
.player button.play svg{width:calc(var(--u)*4);height:calc(var(--u)*4);fill:currentColor}
.player button.play .halt,.player button.play[aria-pressed=true] .go{display:none}.player button.play[aria-pressed=true] .halt{display:block}
.player button.play:focus-visible{outline-color:var(--wellink)}
.player .time{flex:none;min-width:4ch;text-align:right;font-size:var(--z14);line-height:calc(var(--u)*5);font-weight:var(--w5);font-variant-numeric:tabular-nums;color:var(--wellmute)}
.player:has([aria-pressed=true]) .time{color:var(--wellink)}
.player[data-src] .wave{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*5);border:0;opacity:1}
.player[data-src] .wave i{flex:none;width:2px;min-height:2px;border-radius:1px;background:var(--wellmute);opacity:.5}
.player[data-src] .wave i[data-lit]{background:var(--wellink);opacity:1}
.player .wave .h0{height:10%}.player .wave .h1{height:10%}.player .wave .h2{height:20%}.player .wave .h3{height:30%}.player .wave .h4{height:40%}.player .wave .h5{height:50%}.player .wave .h6{height:60%}.player .wave .h7{height:70%}.player .wave .h8{height:80%}.player .wave .h9{height:90%}.player .wave .h10{height:100%}
.player button.play{appearance:none;flex:none;position:relative;width:calc(var(--u)*6);height:calc(var(--u)*6);margin-left:calc(var(--u)*-1.5);padding:0;border:0;border-radius:var(--r);background:none;cursor:pointer}
.player button.play:focus-visible{outline-color:var(--wellink)}
.facts>div{align-items:start;font-size:var(--z14);line-height:calc(var(--u)*5)}
.facts dt{grid-column:1/4;font-weight:var(--w7)}
.facts dd{grid-column:4/11}
.doc .facts{margin-top:calc(var(--u)*4)}
.doc .facts>div,.doc .fine-print>div{grid-template-columns:repeat(7,minmax(0,1fr));column-gap:var(--gut);display:grid}
.doc .facts dt,.doc .fine-print dt{grid-column:1/3}
.doc .facts dd,.doc .fine-print dd{grid-column:3/8}

/* the four themes, two by two */
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut);row-gap:calc(var(--u)*8);margin-top:calc(var(--u)*10)}
.themes img{width:100%;border-radius:var(--r)}
.themes .l11{margin-top:calc(var(--u)*3)}

/* fields: a well with a line a reader can see. A field the server sent back is marked by its own border and says why beneath */
.signup{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:calc(var(--u)*4);margin-top:calc(var(--u)*8);align-items:start}
.signup .field{grid-column:1/13;max-width:var(--m14)}
.signup .btn{grid-column:1/13;justify-self:start}   /* (beside the field, under its caption's line) */
.fields{grid-column:1/13;max-width:var(--m14);display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gut);row-gap:calc(var(--u)*4);margin-top:calc(var(--u)*8);align-items:start}
.field,.field label{display:flex;flex-direction:column;gap:calc(var(--u)*2)}
.fields>.btn{grid-column:1/-1;justify-self:start}
input[type=text],input[type=email]{font:inherit;font-size:var(--z18);width:100%;height:calc(var(--u)*13);padding:0 calc(var(--u)*4);border:var(--hair) solid var(--mute);border-radius:var(--r);background:var(--ground);color:var(--ink)}
input::placeholder{color:var(--mute);opacity:1}
input:focus-visible{outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
input[aria-invalid=true]{border:2px solid var(--ink);padding:0 calc(var(--u)*4 - 1px)}   /* (the heavier line takes its width from the padding: the words do not move) */
.wrong{font-size:var(--z14);line-height:calc(var(--u)*5);font-weight:var(--w7)}
.fine{grid-column:1/13;margin-top:calc(var(--u)*4)}
.soon{grid-column:1/13;margin-top:calc(var(--u)*8);border-top:var(--hair) solid var(--line);padding-top:calc(var(--u)*4)}
.soon .l11{margin-bottom:calc(var(--u)*2)}
.soon+.signup{margin-top:calc(var(--u)*5)}
#pay,.hero>noscript{grid-column:1/9}
#pay>p:first-child{margin-top:0}#pay>p+p,.hero>noscript{margin-top:calc(var(--u)*5)}
#pay-say:empty{display:none}
noscript{display:block}
#pay .cta{margin-top:calc(var(--u)*5)}

/* a document: the legal pages. Seven columns of text, and everything in it ends on the same edge */
.doc{padding-top:calc(var(--u)*16)}
.doc>.text{grid-column:1/13}
.doc>.text{max-width:var(--m18)}
.doc h2{font-size:var(--z28);line-height:calc(var(--u)*9);font-weight:var(--w7);letter-spacing:var(--tr28);margin-top:calc(var(--u)*14);scroll-margin-top:calc(var(--u)*6)}
.doc .text>h2:first-child,.doc section:first-child>h2{margin-top:0}
.doc h3{font-size:var(--z18);line-height:calc(var(--u)*7);font-weight:var(--w7);margin-top:calc(var(--u)*8)}
.doc p{margin-top:calc(var(--u)*4)}
/* who Polarfon is in law: fine print under its heading on the imprint, the size and color of a note */
/* the imprint's fine print: a small register under a hairline, on the facts' columns, quiet (14, muted), its labels on the values' first line */
.doc .fine-print{margin-top:calc(var(--u)*6);padding-top:calc(var(--u)*4);border-top:var(--hair) solid var(--line);font-size:var(--z14);line-height:calc(var(--u)*5);color:var(--mute);font-variant-numeric:tabular-nums}
.doc .fine-print>div+div{margin-top:calc(var(--u)*2)}.doc .fine-print dt{line-height:calc(var(--u)*5)}
.doc h3+p{margin-top:calc(var(--u)*2)}
.doc .shot{margin-top:calc(var(--u)*8)}
footer.g{margin-top:calc(var(--u)*30);padding-bottom:calc(var(--u)*12);row-gap:calc(var(--u)*10);align-items:start;font-size:var(--z14);line-height:calc(var(--u)*5);color:var(--mute)}
footer.g::before{content:"";grid-column:1/13;border-top:var(--hair) solid var(--line);margin-bottom:calc(var(--u)*2)}
footer .l{grid-column:1/5;color:var(--ink)}
footer .l p{margin-top:calc(var(--u)*4);color:var(--mute);max-width:var(--m14)}
footer .cols{grid-column:5/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gut);row-gap:calc(var(--u)*6)}
footer .cols .l11{color:var(--ink);margin-bottom:calc(var(--u)*2)}
footer .cols a{display:block;color:var(--mute);line-height:calc(var(--u)*7);text-decoration:none}
@media (hover:hover){footer .cols a:hover{color:var(--ink);text-decoration:underline}}
/* the copyright and the theme's key stand under the mark and its line, as far below the line as the line is below the mark; the
   link groups run down beside them (one column on a phone: the copyright last) */
@media (min-width:927px){footer.g{grid-template-rows:auto auto 1fr}footer.g::before{grid-row:1}footer .l{grid-row:2}footer .cols{grid-row:2/4}footer .copy{grid-column:1/5;grid-row:3;margin-top:calc(var(--u)*-6)}}
footer .copy{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*3)}

/* a hover is a pointer's: on a touch screen a tapped link keeps no underline and a tapped key no fill (every :hover sits in (hover:hover)) */
/* the theme's switch: one key on the copyright row, its glyph the theme it goes to (day is the default) */
.switch{display:flex;align-items:center}
.switch button{display:flex;color:var(--mute);background:none;border:0;padding:calc(var(--u)*3.5) calc(var(--u)*2);border-radius:var(--r);cursor:pointer}
@media (hover:hover){.switch button:hover{color:var(--ink)}}

/* narrower. Nothing is set at a size between two of the six: below 926 every display size steps down one. 926 is where the
   display sizes and the gutter step down */
@media (max-width:1000px){.doc>.text{grid-column:1/11}.doc .facts>div,.doc .fine-print>div{grid-template-columns:repeat(10,minmax(0,1fr))}.doc .facts dt,.doc .fine-print dt{grid-column:1/4}.doc .facts dd,.doc .fine-print dd{grid-column:4/11}}
@media (max-width:926px){:root{--gut:calc(var(--u)*4)}.d72{font-size:var(--z44);line-height:calc(var(--u)*12);letter-spacing:var(--tr44)}.catalog h3{font-size:var(--z18);line-height:calc(var(--u)*7);letter-spacing:0}.d44{font-size:var(--z28);line-height:calc(var(--u)*9);letter-spacing:var(--tr28)}.t28{font-size:var(--z18);line-height:calc(var(--u)*7);letter-spacing:0}.hero>.t28{max-width:var(--m18)}.hero>.t28,.hero>.t18,.hero>.note,.part>.say,.part>h2,.fine,.soon,#pay,.hero>noscript{grid-column:1/13}.signup .btn{grid-column:1/13}footer .cols a{line-height:calc(var(--u)*11)}.doc .facts>div,.doc .fine-print>div{grid-template-columns:repeat(12,minmax(0,1fr))}.doc .facts dt,.doc .fine-print dt{grid-column:1/5}.doc .facts dd,.doc .fine-print dd{grid-column:5/13}footer .l,footer .cols{grid-column:1/13}.part{padding-top:calc(var(--u)*22)}.cta .t14{margin-left:0;flex-basis:100%}.doc>.text{grid-column:1/13}.facts dt{grid-column:1/5}.facts dd{grid-column:5/13}}
@media (max-width:640px){.catalog{grid-template-columns:minmax(0,1fr)}:root{--gut:calc(var(--u)*3)}.fields,.themes{grid-template-columns:minmax(0,1fr)}.signup .field,.fields{grid-column:1/13}.rows ul{margin-top:calc(var(--u)*2)}footer .cols{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--u)*8)}.listen .player{margin-top:calc(var(--u)*2)}.listen .nm,.listen .gn,.listen audio,.listen .player,.rows .nm,.rows .gn,.rows ul,.facts dt,.facts dd,.doc .facts dt,.doc .facts dd,.doc .fine-print dt,.doc .fine-print dd{grid-column:1/-1}.hero{padding-top:calc(var(--u)*6)}body>nav.g{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;column-gap:calc(var(--u)*4)}}
@media (max-width:926px){.credo li p{font-size:var(--z14);line-height:calc(var(--u)*5);margin-top:calc(var(--u)*2)}}
/* the narrowest phones: the three links wrap under the wordmark, their words on its left edge */
@media (max-width:359px){body>nav .links{margin-left:calc(var(--u)*-2)}h1 .nb{white-space:normal}}
/* a reader's own colors (a contrast theme): a key keeps its shape */
@media (forced-colors:active){.btn,body>nav .links a.buy{border:1px solid ButtonText}}
/* last, so that it holds whatever a part's own display says: what is hidden is not shown */
[hidden]{display:none}
/* on a phone everything runs the full width, on every page: text fills its lines (no balancing, which Safari does hard enough to
   leave a ragged column), and every key is as wide as the column, a form's under its fields, a pair stacked, the first above; the footer is the menu's pattern: each group's caption over its links in rows, between hairlines, at 18; the line under the mark at 18 too */
@media (max-width:640px){p,dd,li,.hero>.t28{text-wrap:wrap}.fields>.btn,.signup .btn{justify-self:stretch;text-align:center}.cta>.btn{flex:1 1 100%;text-align:center}footer .cols{row-gap:calc(var(--u)*10)}footer .cols a{font-size:var(--z18);line-height:calc(var(--u)*13);border-top:var(--hair) solid var(--line);text-decoration:none}footer .cols a:last-child{border-bottom:var(--hair) solid var(--line)}footer .cols .l11{margin-bottom:calc(var(--u)*3)}footer .l p{font-size:var(--z18);line-height:calc(var(--u)*7)}}
/* the type's rules, one each: what stands under a part's heading starts 20 below it, whatever it is (its words, a list, points);
   headings and statements (the credo) end at 800, running text (18, and the lead) at 640, the 14 at 480; a legal chapter's heading is
   16 above what follows */
.g.part>h2+*{margin-top:calc(var(--u)*5)}
.g.part>.say+*{margin-top:calc(var(--u)*10)}   /* (what follows its words: 40, keys too) */
.g.part>.credo+*,.g.part>.tiles+*{margin-top:calc(var(--u)*10)}   /* (two things in one part: 40 apart) */