/* TONEFORM Audio: makieta strony. Paleta, kroje i odstępy: ../brand/css/tokens.css (z repo toneformaudio-branding). */
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  font: 15px/1.6 var(--font-mono);
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
main { flex: 1; }
.wrap { width: min(960px, 100% - 2 * var(--margin)); margin-inline: auto; }

/* ziarno papieru na wszystkim, także na tekście: jak w oknie wtyczki */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: url("../brand/grain.png") 0 0 / 384px 384px;
}

/* gdy skrypt rysujący jeszcze nie ruszył albo go nie ma: prosta ramka zamiast narysowanej */
html:not([data-charcoal-ready]) [data-charcoal="box"],
html:not([data-charcoal-ready]) [data-charcoal="button"] { outline: 3px solid var(--ink); outline-offset: -3px; }
html:not([data-charcoal-ready]) [data-charcoal="rule"] { border-top: 3px solid var(--ink); }
html:not([data-charcoal-ready]) [data-charcoal="link"] { text-decoration: underline; }

.skip { position: absolute; left: -999px; top: 0; padding: 8px 12px; background: var(--ink); color: var(--paper); z-index: 200; }
.skip:focus { left: 0; }

.caption { font: 700 12px/1.3 var(--font-mono); letter-spacing: var(--track-caption); text-transform: uppercase; margin: 0; }
.caption-lg { font-size: 14px; }
.soft { color: var(--ink-soft); }

/* ---- strona główna ---- */
.hero { min-height: 80vh; display: grid; place-items: center; padding: var(--margin); }
.hero h1 { margin: 0; line-height: 0; }
.hero img { width: min(640px, 82vw); }

.plugins { padding: 8px 0 72px; }
.plugins .caption { margin-bottom: 16px; padding-left: 2px; }
.plugin-row {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 26px 28px; text-decoration: none;
}
.plugin-row .swap { display: block; line-height: 0; flex: 0 1 380px; }
.plugin-row .swap img { width: min(380px, 100%); }
.plugin-row .swap .cold { display: block; }
.plugin-row .swap .hot { display: none; }
.plugin-row:hover .swap .cold, .plugin-row:focus-visible .swap .cold { display: none; }
.plugin-row:hover .swap .hot, .plugin-row:focus-visible .swap .hot { display: block; }
.plugin-row .meta { flex: 1 1 200px; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.plugin-row .go { font-weight: 700; font-size: 34px; line-height: 1; }

/* ---- strona produktu ---- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 10px; }
.top a { font-weight: 700; font-size: 12px; letter-spacing: var(--track-caption); text-transform: uppercase; text-decoration: none; display: inline-block; padding: 3px 7px; margin-left: -7px; }
.top a:last-child { margin-left: 0; margin-right: -7px; }
.product-head { padding: 22px 0 6px; }
.title-box { display: inline-block; padding: 20px 26px; line-height: 0; margin: 0; }
.title-box h1 { margin: 0; line-height: 0; }
.title-box img { width: min(520px, 68vw); display: block; }
.product-head .caption { margin-top: 14px; padding-left: 2px; }

.shot { margin: 28px 0 24px; padding: 14px; line-height: 0; }
.shot img { width: 100%; display: block; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.panel { padding: 22px 26px 24px; }
.panel h2 { margin: 0 0 12px; }
.panel p { margin: 0 0 12px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { position: relative; padding-left: 1.5em; margin-bottom: 8px; }
.panel li::before { content: "–"; position: absolute; left: 0; font-weight: 700; }
.note { font-size: 12.5px; line-height: 1.55; }

.download-btn { display: block; padding: 16px 20px; margin-bottom: 10px; text-decoration: none; }
.download-btn .b-title { display: block; font-weight: 700; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.download-btn .b-sub { display: block; font-size: 12.5px; opacity: 0.8; margin-top: 2px; }
.status { font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; }

.credits { margin: 24px 0 0 auto; width: min(470px, 100%); padding: 18px 22px 20px; }
.credits .caption { font-size: 11.5px; letter-spacing: 0.08em; line-height: 1.8; }
.credits .line { display: block; }
.credits .name { display: block; font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none; margin: 2px 0 8px; }
.credits .name a { display: inline-block; padding: 1px 5px; margin-left: -5px; text-decoration: none; }

/* ---- stopka ---- */
.site-footer { padding: 56px 0 28px; }
.site-footer .rule { height: 8px; }
.site-footer .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 28px; }
.site-footer p { margin: 10px 0 0; font-weight: 700; font-size: 11.5px; letter-spacing: var(--track-caption); text-transform: uppercase; }
.site-footer a { display: inline-block; padding: 2px 6px; text-decoration: none; }
.site-footer a.mail { text-transform: none; letter-spacing: 0.02em; font-size: 12.5px; }

@media (max-width: 720px) {
  .cols { grid-template-columns: 1fr; }
  .plugin-row { padding: 22px 20px; }
  .plugin-row .swap { flex-basis: 100%; }
  .panel { padding: 20px 20px 22px; }
  .shot { padding: 8px; margin: 22px 0 20px; }
  .title-box { padding: 14px 16px; }
  .hero { min-height: 72vh; }
}